itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
owenchen committed 2026-10-16 11:57:29 +08:00
1 parent b858386e86
commit 3b2ee8523b
28 files changed
+2285 -1496
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

uniapp/youjiala/src/components/file-action-sheet/file-action-sheet.vue
+64 -28
View File
@@ -10,11 +10,14 @@ import type { PropType } from "vue";
import type { FileItem, FileKind } from "@/data/custom/fileBrowser";
import { useLocale } from "uview-pro";
import { computed } from "vue";
import { useThemeTokens } from "@/composables";
interface ActionDef {
key: string;
label: string;
icon: string;
/** 危险动作（删除）：图标与文字标红 */
danger?: boolean;
}
const props = defineProps({
@@ -39,6 +42,9 @@ const emit = defineEmits<{
const { t } = useLocale();
// 文件夹图形随主题（与 file-grid-list / move / share picker 同一强调渐变）
const { accentGradient, accentSoft } = useThemeTokens();
// 类型 -> 头部图标与配色，与 file-grid-list 的 kindVisual 同一套
const kindVisual: Record<Exclude<FileKind, "folder">, { icon: string; color: string }> = {
image: { icon: "photo-fill", color: "#0ea5e9" },
@@ -60,7 +66,7 @@ const gridActions = computed<ActionDef[]>(() => {
if (file.kind !== "folder") {
actions.unshift({ key: "download", label: t("FilePage.actionDownload"), icon: "download" });
}
actions.push({ key: "delete", label: t("FilePage.actionDelete"), icon: "trash" });
actions.push({ key: "delete", label: t("FilePage.actionDelete"), icon: "trash", danger: true });
return actions;
});
@@ -101,11 +107,11 @@ function onAction(action: ActionDef): void {
<!-- u-popup 只认 modelValue（v-model），绑 :show 会静默弹不出 -->
<u-popup :model-value="visible" mode="bottom" round="24" @close="emit('close')">
<view class="file-action-sheet">
<!-- 头部：类型图标 + 名称/元信息 + 详情 -->
<!-- 头部白卡：类型图标 + 名称/元信息（「i」详情钮已移除，边界由取消/遮罩承担） -->
<view class="file-action-sheet__head">
<view v-if="file && file.kind === 'folder'" class="file-action-sheet__folder">
<view class="file-action-sheet__folder-tab" />
<view class="file-action-sheet__folder-body" />
<view class="file-action-sheet__folder-tab" :style="{ background: accentSoft }" />
<view class="file-action-sheet__folder-body" :style="{ background: accentGradient }" />
</view>
<u-icon v-else-if="file" :name="kindVisual[file.kind as Exclude<FileKind, 'folder'>].icon" size="64"
:color="kindVisual[file.kind as Exclude<FileKind, 'folder'>].color" />
@@ -117,29 +123,37 @@ function onAction(action: ActionDef): void {
{{ file && file.kind !== 'folder' ? `${file.sizeText} · ` : '' }}{{ file?.modifiedAt }}
</text>
</view>
<view class="file-action-sheet__info" @tap="onAction({ key: 'detail', label: '', icon: '' })">
<u-icon name="info-circle" size="40" color="#8f959e" />
</view>
</view>
<!-- 宫格动作（图1 第一排大按钮） -->
<!-- 宫格动作：白卡上图标下文字，删除标红 -->
<view class="file-action-sheet__grid">
<view v-for="action in gridActions" :key="action.key" class="file-action-sheet__grid-btn"
@tap="onAction(action)">
<u-icon :name="action.icon" size="44" color="#1f2329" />
<text class="file-action-sheet__grid-text">
<u-icon :name="action.icon" size="44" :color="action.danger ? '#f0413e' : '#1f2329'" />
<text class="file-action-sheet__grid-text"
:style="action.danger ? { color: '#f0413e' } : undefined">
{{ action.label }}
</text>
</view>
</view>
<!-- 行式动作（图1 下方整行菜单） -->
<!-- 行式动作：左图标 + 文字，右尖角 -->
<view v-for="action in listActions" :key="action.key" class="file-action-sheet__row"
@tap="onAction(action)">
<text class="file-action-sheet__row-text">
{{ action.label }}
<view class="file-action-sheet__row-main">
<u-icon :name="action.icon" size="38" color="#1f2329" />
<text class="file-action-sheet__row-text">
{{ action.label }}
</text>
</view>
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
</view>
<!-- 取消通栏：替代原「i」的退出锚点 -->
<view class="file-action-sheet__cancel" @tap="emit('close')">
<text class="file-action-sheet__cancel-text">
{{ t("FilePage.folderCancel") }}
</text>
<u-icon :name="action.icon" size="38" color="#1f2329" />
</view>
<view class="file-action-sheet__safe" />
@@ -148,15 +162,19 @@ function onAction(action: ActionDef): void {
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格（对齐设计图）：浅灰面板底 + 白色圆角卡分块 */
.file-action-sheet {
padding: 40rpx 32rpx 0;
background-color: #ffffff;
padding: 32rpx 24rpx 0;
background-color: #f2f3f5;
&__head {
display: flex;
align-items: center;
gap: 24rpx;
padding: 0 8rpx 32rpx;
margin-bottom: 20rpx;
padding: 28rpx 32rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
/* 文件夹造型与 file-grid-list 同源：主体 + 左上页签 */
@@ -174,7 +192,6 @@ function onAction(action: ActionDef): void {
width: 36rpx;
height: 16rpx;
border-radius: 8rpx 8rpx 0 0;
background-color: #6cb7ff;
}
&__folder-body {
@@ -184,7 +201,6 @@ function onAction(action: ActionDef): void {
right: 0;
bottom: 0;
border-radius: 10rpx;
background: linear-gradient(135deg, #7cc0ff, #3d8bfd);
}
&__meta {
@@ -209,24 +225,21 @@ function onAction(action: ActionDef): void {
color: #8f959e;
}
&__info {
display: flex;
align-items: center;
padding: 8rpx;
}
&__grid {
display: flex;
gap: 16rpx;
margin-bottom: 20rpx;
}
/* 宫格钮：白卡、上图标下文字居中 */
&__grid-btn {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
padding: 28rpx 0;
border-radius: 20rpx;
background-color: #f5f6f8;
background-color: #ffffff;
}
&__grid-text {
@@ -239,10 +252,17 @@ function onAction(action: ActionDef): void {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
margin-bottom: 20rpx;
padding: 28rpx 32rpx;
border-radius: 20rpx;
background-color: #f5f6f8;
background-color: #ffffff;
}
&__row-main {
display: flex;
align-items: center;
gap: 24rpx;
min-width: 0;
}
&__row-text {
@@ -250,6 +270,22 @@ function onAction(action: ActionDef): void {
color: #1f2329;
}
/* 取消通栏：与内容隔一段灰底收尾，防误点动作区 */
&__cancel {
display: flex;
align-items: center;
justify-content: center;
margin-top: 28rpx;
padding: 26rpx 0;
border-radius: 20rpx;
background-color: #ffffff;
}
&__cancel-text {
font-size: 28rpx;
color: #5c626b;
}
/* 底部留白：贴屏安全区（H5 无 env 时也有 32rpx 呼吸） */
&__safe {
height: calc(32rpx + env(safe-area-inset-bottom));