ow
This commit is contained in:
owenchen committed
1 parent
b858386e86
commit
3b2ee8523b
28 files changed
+2285
-1496
No files matched your search
@@ -12,6 +12,7 @@
|
||||
import type { PathNode } from "@/data/custom/fileBrowser";
|
||||
import { useLocale } from "uview-pro";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useThemeTokens } from "@/composables";
|
||||
import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
|
||||
import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
|
||||
import { SearchFilter } from "@/data/auto/searchFilter";
|
||||
@@ -19,34 +20,34 @@ import dmsFileService from "@/service/master/dmsFileService";
|
||||
|
||||
/** 共享目标层：组 + 顶层目录系统名（旧系统取消共享按它查权限）+ 当前目录标识 */
|
||||
export interface ShareTarget {
|
||||
familyName: string;
|
||||
topFolderName: string;
|
||||
filePath: string;
|
||||
familyName: string;
|
||||
topFolderName: string;
|
||||
filePath: string;
|
||||
}
|
||||
|
||||
/** 浏览路径的一段：value = 群组编号（组根）或目录系统名（子层） */
|
||||
interface CrumbRow {
|
||||
value: string;
|
||||
displayName: string;
|
||||
value: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
/** 抽屉是否展开 */
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** 已选待共享文件数（顶部「已选择 N 项」提示） */
|
||||
selectedCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/** 抽屉是否展开 */
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** 已选待共享文件数（顶部「已选择 N 项」提示） */
|
||||
selectedCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
/** 点「共享到此」，带上当前所在层的目标三元组 */
|
||||
(e: "confirm", target: ShareTarget): void;
|
||||
(e: "close"): void;
|
||||
/** 点「共享到此」，带上当前所在层的目标三元组 */
|
||||
(e: "confirm", target: ShareTarget): void;
|
||||
}>();
|
||||
|
||||
const { t } = useLocale();
|
||||
@@ -66,327 +67,351 @@ const inGroup = computed(() => !!trail.value.length);
|
||||
/** 「共享到此」只在进入下一层目录后出现：群组名那一层（trail 只有组根一段）不允许直接共享 */
|
||||
const canShareHere = computed(() => trail.value.length >= 2);
|
||||
|
||||
const { accentGradient, primary } = useThemeTokens();
|
||||
/** 文件夹图形用主题强调渐变（同 file-grid-list）；提交钮用纯色（渐变浅档在白字下发糊） */
|
||||
const folderStyle = computed(() => ({ "--fg-folder": accentGradient.value }));
|
||||
const submitStyle = computed(() => (canShareHere.value ? { background: primary.value } : undefined));
|
||||
|
||||
/** 「共享到此」的目标三元组：组根 TopFolderName = 群组编号，子层 = 路径首段目录 */
|
||||
const currentTarget = computed<ShareTarget | null>(() => {
|
||||
if (!inGroup.value) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
familyName: familyName.value,
|
||||
topFolderName: trail.value[0].value,
|
||||
filePath: trail.value[trail.value.length - 1].value,
|
||||
};
|
||||
if (!inGroup.value) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
familyName: familyName.value,
|
||||
topFolderName: trail.value[0].value,
|
||||
filePath: trail.value[trail.value.length - 1].value,
|
||||
};
|
||||
});
|
||||
|
||||
// 每次展开重拉群组并回大厅顶层：群组可能被别的端改过，缓存会弹进已消失的坑
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (on) => {
|
||||
if (on) {
|
||||
trail.value = [];
|
||||
familyName.value = "";
|
||||
await loadGroups();
|
||||
}
|
||||
},
|
||||
() => props.visible,
|
||||
async (on) => {
|
||||
if (on) {
|
||||
trail.value = [];
|
||||
familyName.value = "";
|
||||
await loadGroups();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
async function loadGroups(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const options = (await dmsFileService.FindFamilyDmsFolders()) ?? [];
|
||||
groups.value = options.map(opt => ({ value: opt.BindValue, label: opt.DisplayName || opt.BindValue }));
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const options = (await dmsFileService.FindFamilyDmsFolders()) ?? [];
|
||||
groups.value = options.map(opt => ({ value: opt.BindValue, label: opt.DisplayName || opt.BindValue }));
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 查当前层子目录：两段过滤与共享大厅 loadFolder 同口径（组根标识=群组编号照挂） */
|
||||
async function loadDirs(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const criteria = new DmsFileSearchCriteria();
|
||||
const familyFilter = new SearchFilter();
|
||||
familyFilter.Column = FamilyDmsFileViewDisplayData.DB_FAMILY_NAME;
|
||||
familyFilter.Type = "SingleSelection";
|
||||
familyFilter.Operator = "single";
|
||||
familyFilter.Value = familyName.value;
|
||||
const pathFilter = new SearchFilter();
|
||||
pathFilter.Column = FamilyDmsFileViewDisplayData.DB_FILE_PATH;
|
||||
pathFilter.Type = "SingleSelection";
|
||||
pathFilter.Operator = "single";
|
||||
pathFilter.Value = trail.value[trail.value.length - 1].value;
|
||||
criteria.Filter = [familyFilter, pathFilter];
|
||||
criteria.limit = 999999;
|
||||
criteria.page = 1;
|
||||
criteria.GridColumns = [];
|
||||
const data = await dmsFileService.FindFamilyBySearchCriteria(criteria);
|
||||
dirs.value = (data?.Families ?? [])
|
||||
.filter(r => r.IsDirectoryIndc === "Y")
|
||||
.map(r => ({
|
||||
value: r.FileName,
|
||||
label: r.OrgFileName || r.FileName,
|
||||
permitted: r.PermissionIndc === "Y",
|
||||
}))
|
||||
.sort((a, b) => a.label.localeCompare(b.label, "zh-CN"));
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const criteria = new DmsFileSearchCriteria();
|
||||
const familyFilter = new SearchFilter();
|
||||
familyFilter.Column = FamilyDmsFileViewDisplayData.DB_FAMILY_NAME;
|
||||
familyFilter.Type = "SingleSelection";
|
||||
familyFilter.Operator = "single";
|
||||
familyFilter.Value = familyName.value;
|
||||
const pathFilter = new SearchFilter();
|
||||
pathFilter.Column = FamilyDmsFileViewDisplayData.DB_FILE_PATH;
|
||||
pathFilter.Type = "SingleSelection";
|
||||
pathFilter.Operator = "single";
|
||||
pathFilter.Value = trail.value[trail.value.length - 1].value;
|
||||
criteria.Filter = [familyFilter, pathFilter];
|
||||
criteria.limit = 999999;
|
||||
criteria.page = 1;
|
||||
criteria.GridColumns = [];
|
||||
const data = await dmsFileService.FindFamilyBySearchCriteria(criteria);
|
||||
dirs.value = (data?.Families ?? [])
|
||||
.filter(r => r.IsDirectoryIndc === "Y")
|
||||
.map(r => ({
|
||||
value: r.FileName,
|
||||
label: r.OrgFileName || r.FileName,
|
||||
permitted: r.PermissionIndc === "Y",
|
||||
}))
|
||||
.sort((a, b) => a.label.localeCompare(b.label, "zh-CN"));
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function enterGroup(group: { value: string; label: string }): void {
|
||||
familyName.value = group.value;
|
||||
trail.value = [{ value: group.value, displayName: group.label }];
|
||||
dirs.value = [];
|
||||
void loadDirs();
|
||||
familyName.value = group.value;
|
||||
trail.value = [{ value: group.value, displayName: group.label }];
|
||||
dirs.value = [];
|
||||
void loadDirs();
|
||||
}
|
||||
|
||||
/** 下钻子目录；无权限的目录进不去（与共享大厅 PermissionIndc 口径一致） */
|
||||
function enterDir(row: { value: string; label: string; permitted: boolean }): void {
|
||||
if (!row.permitted) {
|
||||
uni.showToast({ title: t("ShareHallPage.noPermission"), icon: "none" });
|
||||
return;
|
||||
}
|
||||
trail.value = [...trail.value, { value: row.value, displayName: row.label }];
|
||||
void loadDirs();
|
||||
if (!row.permitted) {
|
||||
uni.showToast({ title: t("ShareHallPage.noPermission"), icon: "none" });
|
||||
return;
|
||||
}
|
||||
trail.value = [...trail.value, { value: row.value, displayName: row.label }];
|
||||
void loadDirs();
|
||||
}
|
||||
|
||||
/** 组内面包屑：首段=群组名，单击回该层（当前段组件内自行不响应） */
|
||||
const crumbItems = computed<PathNode[]>(() => trail.value.map(row => ({
|
||||
value: row.value,
|
||||
displayName: row.displayName,
|
||||
value: row.value,
|
||||
displayName: row.displayName,
|
||||
})));
|
||||
|
||||
function onJump(index: number): void {
|
||||
trail.value = trail.value.slice(0, index + 1);
|
||||
void loadDirs();
|
||||
trail.value = trail.value.slice(0, index + 1);
|
||||
void loadDirs();
|
||||
}
|
||||
|
||||
function onShareHere(): void {
|
||||
const target = currentTarget.value;
|
||||
if (target) {
|
||||
emit("confirm", target);
|
||||
}
|
||||
const target = currentTarget.value;
|
||||
if (target) {
|
||||
emit("confirm", target);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
|
||||
<view class="folder-share-picker">
|
||||
<!-- 头部：大厅层显示标题，组内显示面包屑（单击回层、超长自动折叠）+ 关闭 -->
|
||||
<view class="folder-share-picker__head">
|
||||
<text v-if="!inGroup" class="folder-share-picker__title">
|
||||
{{ t("FilePage.shareTitle") }}
|
||||
</text>
|
||||
<view v-else class="folder-share-picker__crumb">
|
||||
<file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
|
||||
</view>
|
||||
<view class="folder-share-picker__close" @tap="emit('close')">
|
||||
<u-icon name="close" size="36" color="#8f959e" />
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="props.selectedCount" class="folder-share-picker__picked">
|
||||
{{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
|
||||
</text>
|
||||
<scroll-view scroll-y class="folder-share-picker__list">
|
||||
<view v-if="loading" class="folder-share-picker__empty">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<!-- 大厅顶层：群组卡片（共享大厅图2 同款：浅灰圆卡 + 蓝色文件夹） -->
|
||||
<template v-if="!inGroup">
|
||||
<view v-if="!groups.length" class="folder-share-picker__empty">
|
||||
<text class="folder-share-picker__empty-text">
|
||||
{{ t("FilePage.pickerEmpty") }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-for="g in groups" :key="g.value" class="folder-share-picker__group"
|
||||
@tap="enterGroup(g)">
|
||||
<view class="folder-share-picker__folder" />
|
||||
<text class="folder-share-picker__group-text">
|
||||
{{ g.label }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 组内：子目录行（点行进下层，「共享到此」提交当前层） -->
|
||||
<template v-else>
|
||||
<view v-if="!dirs.length" class="folder-share-picker__empty">
|
||||
<text class="folder-share-picker__empty-text">
|
||||
{{ t("FilePage.moveNoSub") }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-for="row in dirs" :key="row.value" class="folder-share-picker__row"
|
||||
@tap="enterDir(row)">
|
||||
<view class="folder-share-picker__folder" />
|
||||
<text class="folder-share-picker__row-text"
|
||||
:class="{ 'folder-share-picker__row-text--dim': !row.permitted }">
|
||||
{{ row.label }}
|
||||
</text>
|
||||
<u-icon v-if="!row.permitted" name="lock" size="26" color="#8c8c8c" />
|
||||
<u-icon v-else name="arrow-right" size="26" color="#c0c4cc" />
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<!-- 底部：通栏「共享到此」提交当前层（群组名那一层不显示——必须进到下一层目录才能共享） -->
|
||||
<view v-if="canShareHere" class="folder-share-picker__footer">
|
||||
<view class="folder-share-picker__btn" @tap="onShareHere">
|
||||
<text class="folder-share-picker__btn-text">
|
||||
{{ t("FilePage.shareHere") }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="folder-share-picker__safe" />
|
||||
<u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
|
||||
<view class="folder-share-picker">
|
||||
<!-- 头部白卡：大厅层显示标题，组内显示面包屑（单击回层、超长自动折叠）；退出走底部「取消」 -->
|
||||
<view class="folder-share-picker__head">
|
||||
<text v-if="!inGroup" class="folder-share-picker__title">
|
||||
{{ t("FilePage.shareTitle") }}
|
||||
</text>
|
||||
<view v-else class="folder-share-picker__crumb">
|
||||
<file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
<text v-if="props.selectedCount" class="folder-share-picker__picked">
|
||||
{{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
|
||||
</text>
|
||||
<!-- 列表白卡（底部抽屉统一风格） -->
|
||||
<view class="folder-share-picker__card">
|
||||
<scroll-view scroll-y class="folder-share-picker__list">
|
||||
<view v-if="loading" class="folder-share-picker__empty">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
<template v-else>
|
||||
<!-- 大厅顶层：群组卡片（共享大厅图2 同款：浅灰圆卡 + 蓝色文件夹） -->
|
||||
<template v-if="!inGroup">
|
||||
<view v-if="!groups.length" class="folder-share-picker__empty">
|
||||
<text class="folder-share-picker__empty-text">
|
||||
{{ t("FilePage.pickerEmpty") }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-for="g in groups" :key="g.value" class="folder-share-picker__group" @tap="enterGroup(g)">
|
||||
<view class="folder-share-picker__folder" :style="folderStyle" />
|
||||
<text class="folder-share-picker__group-text">
|
||||
{{ g.label }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 组内：子目录行（点行进下层，「共享到此」提交当前层） -->
|
||||
<template v-else>
|
||||
<view v-if="!dirs.length" class="folder-share-picker__empty">
|
||||
<text class="folder-share-picker__empty-text">
|
||||
{{ t("FilePage.moveNoSub") }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-for="row in dirs" :key="row.value" class="folder-share-picker__row" @tap="enterDir(row)">
|
||||
<view class="folder-share-picker__folder" :style="folderStyle" />
|
||||
<text class="folder-share-picker__row-text"
|
||||
:class="{ 'folder-share-picker__row-text--dim': !row.permitted }">
|
||||
{{ row.label }}
|
||||
</text>
|
||||
<u-icon v-if="!row.permitted" name="lock" size="26" color="#8c8c8c" />
|
||||
<u-icon v-else name="arrow-right" size="26" color="#c0c4cc" />
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 底部：取消常驻；「共享到此」只在可提交层出现（群组名那一层必须进到下一层目录才能共享） -->
|
||||
<view class="folder-share-picker__footer">
|
||||
<view class="folder-share-picker__btn folder-share-picker__btn--cancel" @tap="emit('close')">
|
||||
<text class="folder-share-picker__cancel-text">
|
||||
{{ t("FilePage.folderCancel") }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="canShareHere" class="folder-share-picker__btn" :style="submitStyle" @tap="onShareHere">
|
||||
<text class="folder-share-picker__btn-text">
|
||||
{{ t("FilePage.shareHere") }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="folder-share-picker__safe" />
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
|
||||
.folder-share-picker {
|
||||
padding: 8rpx 32rpx 0;
|
||||
padding: 24rpx 24rpx 0;
|
||||
background-color: #f2f3f5;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 108rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 108rpx;
|
||||
&__title {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
|
||||
&__crumb {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__picked {
|
||||
display: block;
|
||||
padding: 20rpx 8rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #5c626b;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: 8rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&__list {
|
||||
max-height: 640rpx;
|
||||
min-height: 240rpx;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
&__empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #8f959e;
|
||||
}
|
||||
|
||||
/* 群组卡片：共享大厅顶层同款浅灰圆底行 */
|
||||
&__group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
&__group-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1f2329;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
&__row-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
color: #1f2329;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&--dim {
|
||||
color: #9aa0a6;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
text-align: center;
|
||||
/* CSS 画文件夹（图标库无 folder 字形，同 folder-move-picker）；颜色随主题 --fg-folder */
|
||||
&__folder {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 56rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 10rpx;
|
||||
background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: 0;
|
||||
width: 24rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx 6rpx 0 0;
|
||||
background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
/* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
|
||||
&__crumb {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
|
||||
/* 底部按键统一规格（同 option-picker）：等高圆角矩形，非胶囊 */
|
||||
&__btn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 96rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #2b8fff;
|
||||
|
||||
/* 取消：白底细描边灰字（底部抽屉统一语言） */
|
||||
&--cancel {
|
||||
border: 2rpx solid #e5e6eb;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 12rpx;
|
||||
}
|
||||
&__cancel-text {
|
||||
font-size: 32rpx;
|
||||
color: #5c626b;
|
||||
}
|
||||
|
||||
&__picked {
|
||||
display: block;
|
||||
padding: 0 8rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #5c626b;
|
||||
}
|
||||
&__btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&__list {
|
||||
max-height: 640rpx;
|
||||
min-height: 240rpx;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
&__empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #8f959e;
|
||||
}
|
||||
|
||||
/* 群组卡片：共享大厅顶层同款浅灰圆底行 */
|
||||
&__group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
&__group-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1f2329;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
&__row-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
color: #1f2329;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&--dim {
|
||||
color: #9aa0a6;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS 画文件夹（图标库无 folder 字形，同 folder-move-picker / 图2 蓝色系） */
|
||||
&__folder {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 56rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 10rpx;
|
||||
background: linear-gradient(180deg, #8ecbff, #4aa3ff);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: 0;
|
||||
width: 24rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx 6rpx 0 0;
|
||||
background: linear-gradient(180deg, #8ecbff, #4aa3ff);
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 76rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #2b8fff;
|
||||
}
|
||||
|
||||
&__btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&__safe {
|
||||
height: calc(24rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
&__safe {
|
||||
height: calc(24rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user