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/folder-move-picker/folder-move-picker.vue
+82 -54
View File
@@ -11,6 +11,7 @@
import type { PathNode } from "@/data/custom/fileBrowser";
import { useLocale } from "uview-pro";
import { computed, ref, watch } from "vue";
import { useThemeTokens } from "@/composables";
import dmsFileService from "@/service/master/dmsFileService";
/** 一个目录层：系统名（提交用）+ 显示名 */
@@ -75,6 +76,11 @@ const rows = computed<FolderRow[]>(() => {
/** 「移动到此」置灰：没有可提交层，或正站在条目现居目录 */
const canMoveHere = computed(() => !!current.value && current.value.folderName !== props.sourcePath);
const { accentGradient, primary } = useThemeTokens();
/** 文件夹图形用主题强调渐变（同 file-grid-list）；提交钮用纯色（渐变浅档在白字下发糊），禁用态回落到置灰样式 */
const folderStyle = computed(() => ({ "--fg-folder": accentGradient.value }));
const submitStyle = computed(() => (canMoveHere.value ? { background: primary.value } : undefined));
// 每次展开重拉并回到根：目录可能被别的操作改过，缓存会钻进了不存在的坑
watch(
() => props.visible,
@@ -136,47 +142,53 @@ function onMoveHere(): void {
<template>
<u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
<view class="folder-move-picker">
<!-- 头部：面包屑路径（复用 file-breadcrumb，单击回层、超长自动折叠）+ 关闭 -->
<!-- 头部白卡：面包屑路径（复用 file-breadcrumb，单击回层、超长自动折叠）；退出走底部「取消」 -->
<view class="folder-move-picker__head">
<view class="folder-move-picker__crumb">
<file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
</view>
<view class="folder-move-picker__close" @tap="emit('close')">
<u-icon name="close" size="36" color="#8f959e" />
</view>
</view>
<text v-if="props.selectedCount" class="folder-move-picker__picked">
{{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
</text>
<scroll-view scroll-y class="folder-move-picker__list">
<view v-if="loading" class="folder-move-picker__empty">
<u-loading mode="circle" />
</view>
<template v-else>
<view v-if="!rows.length" class="folder-move-picker__empty">
<text class="folder-move-picker__empty-text">
{{ t("FilePage.moveNoSub") }}
</text>
<!-- 列表白卡（底部抽屉统一风格） -->
<view class="folder-move-picker__card">
<scroll-view scroll-y class="folder-move-picker__list">
<view v-if="loading" class="folder-move-picker__empty">
<u-loading mode="circle" />
</view>
<view v-for="row in rows" :key="row.folderName" class="folder-move-picker__row" @tap="onEnter(row)">
<!-- 图标库无 folder 字形，沿用项目 CSS 画文件夹惯例（同 file-action-sheet） -->
<view class="folder-move-picker__folder" />
<view class="folder-move-picker__row-main">
<text class="folder-move-picker__row-text">
{{ row.localName }}
</text>
<text v-if="fmtDate(row.folderName)" class="folder-move-picker__row-sub">
{{ fmtDate(row.folderName) }}
<template v-else>
<view v-if="!rows.length" class="folder-move-picker__empty">
<text class="folder-move-picker__empty-text">
{{ t("FilePage.moveNoSub") }}
</text>
</view>
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
</view>
</template>
</scroll-view>
<!-- 底部：通栏「移动到此」提交当前层（站在原地目录时置灰） -->
<view v-for="row in rows" :key="row.folderName" class="folder-move-picker__row"
@tap="onEnter(row)">
<!-- 图标库无 folder 字形，沿用项目 CSS 画文件夹惯例；颜色随主题（--fg-folder） -->
<view class="folder-move-picker__folder" :style="folderStyle" />
<view class="folder-move-picker__row-main">
<text class="folder-move-picker__row-text">
{{ row.localName }}
</text>
<text v-if="fmtDate(row.folderName)" class="folder-move-picker__row-sub">
{{ fmtDate(row.folderName) }}
</text>
</view>
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
</view>
</template>
</scroll-view>
</view>
<!-- 底部：取消 + 通栏「移动到此」提交当前层（站在原地目录时置灰） -->
<view class="folder-move-picker__footer">
<view class="folder-move-picker__btn folder-move-picker__btn--cancel" @tap="emit('close')">
<text class="folder-move-picker__cancel-text">
{{ t("FilePage.folderCancel") }}
</text>
</view>
<view class="folder-move-picker__btn" :class="{ 'folder-move-picker__btn--muted': !canMoveHere }"
@tap="onMoveHere">
:style="submitStyle" @tap="onMoveHere">
<text class="folder-move-picker__btn-text">
{{ t("FilePage.moveHere") }}
</text>
@@ -188,14 +200,18 @@ function onMoveHere(): void {
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
.folder-move-picker {
padding: 8rpx 32rpx 0;
background-color: #ffffff;
padding: 24rpx 24rpx 0;
background-color: #f2f3f5;
&__head {
display: flex;
align-items: center;
height: 108rpx;
padding: 0 24rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
/* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
@@ -205,19 +221,48 @@ function onMoveHere(): void {
overflow: hidden;
}
&__close {
&__footer {
display: flex;
flex-shrink: 0;
padding: 12rpx;
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;
}
}
&__cancel-text {
font-size: 32rpx;
color: #5c626b;
}
&__picked {
display: block;
padding: 0 8rpx 16rpx;
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;
@@ -249,7 +294,7 @@ function onMoveHere(): void {
width: 56rpx;
height: 44rpx;
border-radius: 10rpx;
background: linear-gradient(180deg, #8ecbff, #4aa3ff);
background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
&::before {
position: absolute;
@@ -258,7 +303,7 @@ function onMoveHere(): void {
width: 24rpx;
height: 12rpx;
border-radius: 6rpx 6rpx 0 0;
background: linear-gradient(180deg, #8ecbff, #4aa3ff);
background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
content: "";
}
}
@@ -284,29 +329,12 @@ function onMoveHere(): void {
color: #8f959e;
}
&__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--muted {
background-color: #d4d8de;
}
&__btn-text {
font-size: 28rpx;
font-size: 32rpx;
font-weight: 600;
color: #ffffff;
}