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/app-tabbar/app-tabbar.vue
+28 -6
View File
@@ -3,7 +3,7 @@
<script setup lang="ts">
import { $u, useLocale } from "uview-pro";
import { computed, onMounted } from "vue";
import { computed, nextTick, onMounted, ref } from "vue";
import { PAGE_PATHS, pageUrl, TAB_PAGES } from "@/router/routes";
import { useTabbarStore } from "@/stores";
@@ -60,11 +60,32 @@ function indexOfCurrentRoute(): number {
return TAB_PAGES.findIndex(name => PAGE_PATHS[name] === route);
}
/**
* 页面栈就绪门闸：u-tabbar 的 onMounted 会直接读 getCurrentPages 栈顶的 .route，
* 而 reLaunch 重建页面的瞬间栈顶 route 可能还没赋值（读到 undefined 抛
* "Cannot read properties of undefined (reading 'route')"）。等栈顶拿到 route 再挂载，
* 规避这个组件内部时序（node_modules 不宜直接改）。
*/
const ready = ref(false);
onMounted(() => {
const index = indexOfCurrentRoute();
if (index >= 0) {
store.setActiveIndex(index);
}
// 上限兜底：route 理论上必在若干 tick 内赋值；万一等不到也放行挂载，
// 宁可让 u-tabbar 报一次可捕获的错误，也不能让 tabbar 永远不出现
let attempts = 0;
const settle = (): void => {
const pages = getCurrentPages();
if (pages[pages.length - 1]?.route || ++attempts > 50) {
ready.value = true;
const index = indexOfCurrentRoute();
if (index >= 0) {
store.setActiveIndex(index);
}
}
else {
nextTick(settle);
}
};
settle();
});
/** item 未配 pagePath，u-tabbar 只会 emit change 而不自行 switchTab；跳转在这里做 */
@@ -79,7 +100,8 @@ function onChange(index: number): void {
</script>
<template>
<u-tabbar v-bind="tabbarProps" @change="onChange" />
<!-- ready 门闸：页面栈就绪后才挂载，避开 u-tabbar onMounted 空栈读 route 的崩溃窗口 -->
<u-tabbar v-if="ready" v-bind="tabbarProps" @change="onChange" />
</template>
<style lang="scss" scoped>
uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue
+17 -1
View File
@@ -457,7 +457,12 @@ function close(): void {
<text class="ftc__title">
{{ props.title || t('FamilyTreePage.pedigreeChart') }}
</text>
<u-icon name="close" size="40" color="#8f959e" @click="close" />
<!-- 退出钮统一为「取消」文字胶囊（底部抽屉风格语言，不再用 X） -->
<view class="ftc__cancel" @tap="close">
<text class="ftc__cancel-text">
{{ t("FamilyTreePage.cancel") }}
</text>
</view>
</view>
<!-- 悬浮控制条：放大/缩小/百分比复位/横纵布局切换（对齐旧图 G6 工具钮） -->
<view class="ftc__ctrl">
@@ -513,6 +518,17 @@ function close(): void {
color: #1f2329;
}
.ftc__cancel {
padding: 12rpx 40rpx;
border-radius: 999rpx;
background-color: #f2f3f5;
}
.ftc__cancel-text {
font-size: 26rpx;
color: #5c626b;
}
/* 悬浮控制条：右侧竖排，白底圆角轻阴影 */
.ftc__ctrl {
position: absolute;
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));
uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue
+44 -9
View File
@@ -6,6 +6,7 @@
*/
import { useLocale } from "uview-pro";
import { computed } from "vue";
import { useThemeTokens } from "@/composables";
interface AddAction {
key: string;
@@ -29,6 +30,8 @@ const emit = defineEmits<{
}>();
const { t } = useLocale();
// 行图标随主题（与文件夹图形同一 primary 派生）
const { primary } = useThemeTokens();
// computed：切换语言后文案跟随重算（tab 页组件实例常驻，setup 只跑一次）
const actions = computed<AddAction[]>(() => [
@@ -45,9 +48,18 @@ const actions = computed<AddAction[]>(() => [
{{ t("FilePage.addTitle") }}
</text>
<view v-for="action in actions" :key="action.key" class="file-add-sheet__row" @tap="emit('action', action.key)">
<u-icon :name="action.icon" size="40" color="#2b8fff" />
<text class="file-add-sheet__row-text">
{{ action.label }}
<view class="file-add-sheet__row-main">
<u-icon :name="action.icon" size="40" :color="primary" />
<text class="file-add-sheet__row-text">
{{ action.label }}
</text>
</view>
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
</view>
<!-- 取消通栏（底部抽屉统一风格） -->
<view class="file-add-sheet__cancel" @tap="emit('close')">
<text class="file-add-sheet__cancel-text">
{{ t("FilePage.folderCancel") }}
</text>
</view>
<view class="file-add-sheet__safe" />
@@ -56,13 +68,14 @@ const actions = computed<AddAction[]>(() => [
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡行 */
.file-add-sheet {
padding: 40rpx 32rpx 0;
background-color: #ffffff;
padding: 32rpx 24rpx 0;
background-color: #f2f3f5;
&__title {
display: block;
padding: 0 8rpx 24rpx;
padding: 8rpx 8rpx 24rpx;
font-size: 26rpx;
color: #8f959e;
}
@@ -70,11 +83,18 @@ const actions = computed<AddAction[]>(() => [
&__row {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 16rpx;
justify-content: space-between;
margin-bottom: 20rpx;
padding: 30rpx 32rpx;
border-radius: 20rpx;
background-color: #f5f6f8;
background-color: #ffffff;
}
&__row-main {
display: flex;
align-items: center;
gap: 24rpx;
min-width: 0;
}
&__row-text {
@@ -82,6 +102,21 @@ const actions = computed<AddAction[]>(() => [
color: #1f2329;
}
&__cancel {
display: flex;
align-items: center;
justify-content: center;
margin-top: 8rpx;
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));
uniapp/youjiala/src/components/file-breadcrumb/file-breadcrumb.vue
+4 -3
View File
@@ -137,15 +137,16 @@ onUnmounted(() => {
</template>
<style lang="scss" scoped>
/* 面包屑：描边圈 + 浅浅的半透明白底（透出渐变底不发死白），分隔为细 chevron */
/* 卡片表面统一风格：白底 + 细边框 + 柔和投影，与搜索框/分类条同一层级；分隔为细 chevron */
.file-breadcrumb {
display: flex;
align-items: center;
gap: 10rpx;
padding: 20rpx 28rpx;
border: 2rpx solid rgba(31, 35, 41, 0.08);
border: 2rpx solid rgba(31, 35, 41, 0.06);
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 0.45);
background-color: #ffffff;
box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
white-space: nowrap;
}
uniapp/youjiala/src/components/file-grid-list/file-grid-list.vue
+32 -13
View File
@@ -6,6 +6,8 @@
*/
import type { PropType } from "vue";
import type { FileItem, FileKind } from "@/data/custom/fileBrowser";
import { computed } from "vue";
import { useThemeTokens } from "@/composables/useThemeGradient";
const props = defineProps({
/** 已过滤排序好的条目，组件按原顺序渲染 */
@@ -60,6 +62,21 @@ function isSelected(file: FileItem): boolean {
return props.selectedIds.includes(file.id);
}
// 主题强调色派生（useThemeGradient）：文件夹图形/勾选/选中底统一跟随 primary，不再硬编码蓝
const { primary, accentGradient, accentSoft, accentShadow } = useThemeTokens();
/** 文件夹主体：主题渐变 + 同色柔和投影 */
const folderStyle = computed(() => ({
background: accentGradient.value,
boxShadow: `0 10rpx 20rpx ${accentShadow.value}`,
}));
/** 文件夹左上页签：同渐变 */
const folderTabStyle = computed(() => ({ background: accentGradient.value }));
/** 多选选中卡：主题浅色底 */
const cardSelectedStyle = computed(() => ({ backgroundColor: accentSoft.value }));
function onCardTap(file: FileItem): void {
if (props.selectMode) {
emit("toggle-select", file.id);
@@ -77,18 +94,19 @@ function onCardTap(file: FileItem): void {
</text>
</view>
<view v-for="file in files" :key="file.id" class="fgl-card"
:class="{ 'fgl-card--selected': selectMode && isSelected(file) }">
:class="{ 'fgl-card--selected': selectMode && isSelected(file) }"
:style="selectMode && isSelected(file) ? cardSelectedStyle : undefined">
<!-- 「更多」与多选勾选圈互斥：多选模式下只留 check 圆，不再同屏两个操作图标 -->
<view v-if="!selectMode" class="fgl-card__more" @tap.stop="emit('more', file)">
<u-icon name="more-dot-fill" size="30" color="#b8bcc4" />
<u-icon class="fgl-card__more-icon" name="more-dot-fill" size="30" color="#b8bcc4" />
</view>
<view class="fgl-card__body" @tap="onCardTap(file)">
<!-- 图标区包装：共享域的权限/收藏角标叠加在图标右上角（旧 MyComputerFamily 同款） -->
<view class="fgl-card__icon-wrap">
<!-- 文件夹：纯 CSS 造型（图标库没有 folder），主体 + 左上页签 -->
<view v-if="file.kind === 'folder'" class="fgl-card__folder">
<view class="fgl-card__folder-tab" />
<view v-if="file.kind === 'folder'" class="fgl-card__folder" :style="folderStyle">
<view class="fgl-card__folder-tab" :style="folderTabStyle" />
</view>
<u-icon v-else :name="visualOf(file.kind)!.icon" size="88" :color="visualOf(file.kind)!.color" />
<!-- 锁仅目录显示（旧系统：文件不挂锁）：绿开锁=有权限，灰闭锁=无权限；
@@ -119,7 +137,7 @@ function onCardTap(file: FileItem): void {
<view v-if="selectMode" class="fgl-card__check">
<u-icon :name="isSelected(file) ? 'checkmark-circle-fill' : 'checkmark-circle'" size="40"
:color="isSelected(file) ? '#2b8fff' : '#c0c4cc'" />
:color="isSelected(file) ? primary : '#c0c4cc'" />
</view>
</view>
</view>
@@ -144,17 +162,21 @@ function onCardTap(file: FileItem): void {
color: #9aa0a6;
}
/* 卡片表面统一风格：白底 + 细边框 + 柔和投影（替代灰底 #f7f8fa 与页面底糊在一起的问题） */
.fgl-card {
position: relative;
width: calc(100% / 3 - 16rpx);
margin: 8rpx;
padding-bottom: 20rpx;
border: 2rpx solid rgba(31, 35, 41, 0.06);
border-radius: 20rpx;
background-color: #f7f8fa;
background-color: #ffffff;
box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
}
&--selected {
background-color: #eaf4ff;
}
/* 横三点旋转 90° 成竖排（图标库无竖版 more），绕中心转不影响外层定位 */
.fgl-card__more-icon {
transform: rotate(90deg);
}
.fgl-card__more {
@@ -195,15 +217,13 @@ function onCardTap(file: FileItem): void {
gap: 4rpx;
}
/* ---- 纯 CSS 文件夹：蓝色渐变圆角主体 + 左上页签 ---- */
/* ---- 纯 CSS 文件夹：主题渐变圆角主体 + 左上页签（配色由 script 的 folderStyle/folderTabStyle 内联下发） ---- */
.fgl-card__folder {
position: relative;
width: 132rpx;
height: 104rpx;
margin: 14rpx 0;
border-radius: 16rpx;
background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
box-shadow: 0 10rpx 20rpx rgba(43, 143, 255, 0.25);
}
.fgl-card__folder-tab {
@@ -213,7 +233,6 @@ function onCardTap(file: FileItem): void {
width: 56rpx;
height: 24rpx;
border-radius: 10rpx 10rpx 0 0;
background: linear-gradient(135deg, #6ec2ff 0%, #4aa6ff 100%);
}
.fgl-card__info {
uniapp/youjiala/src/components/file-tab-filter/file-tab-filter.vue
+4 -3
View File
@@ -92,15 +92,16 @@ const sortIconDark = sortGlyph("#1f2329");
</template>
<style lang="scss" scoped>
/* 分类条卡片：与面包屑/搜索框同风格——描边圈 + 浅半透明白底，透出渐变底 */
/* 卡片表面统一风格：白底 + 细边框 + 柔和投影，与搜索框/面包屑同一层级（替代半透明白叠加） */
.file-tab-filter {
display: flex;
align-items: center;
margin: 20rpx 24rpx 0;
padding: 8rpx 16rpx;
border: 2rpx solid rgba(31, 35, 41, 0.08);
border: 2rpx solid rgba(31, 35, 41, 0.06);
border-radius: 24rpx;
background-color: rgba(255, 255, 255, 0.45);
background-color: #ffffff;
box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
}
.file-tab-filter__scroll {
uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue
+11 -4
View File
@@ -8,6 +8,7 @@
* 拖动收尾置 suppressClick 吞掉随后的原生 click，防拖完误触。
*/
import { computed, onMounted, ref } from "vue";
import { useThemeTokens } from "@/composables/useThemeGradient";
const props = defineProps({
/** 初始底部偏移（rpx 数值，仅首次无存储记录时生效），供不同页面避开各自的底部元素 */
@@ -72,6 +73,13 @@ const posStyle = computed(() => ({
visibility: ready.value ? "visible" : "hidden",
}));
/** 按钮面色跟随主题（与文件夹图形同派生，主题统一）：渐变 + 同色柔光投影 */
const { accentGradient, accentShadow } = useThemeTokens();
const skinStyle = computed(() => ({
background: accentGradient.value,
boxShadow: `0 12rpx 32rpx ${accentShadow.value}`,
}));
function onDragStart(x: number, y: number): void {
dragging = true;
moved = false;
@@ -154,8 +162,8 @@ function onMouseDown(e: MouseEvent): void {
</script>
<template>
<view class="float-add-btn" :style="posStyle" @touchstart="onTouchStart" @touchmove.stop.prevent="onTouchMove"
@touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
<view class="float-add-btn" :style="[posStyle, skinStyle]" @touchstart="onTouchStart"
@touchmove.stop.prevent="onTouchMove" @touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
<u-icon name="plus" size="52" color="#ffffff" />
</view>
</template>
@@ -172,8 +180,7 @@ function onMouseDown(e: MouseEvent): void {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
box-shadow: 0 12rpx 32rpx rgba(43, 143, 255, 0.4);
/* 面色与投影由 skinStyle 内联下发（主题派生），这里只留形态 */
touch-action: none;
/* 屏蔽浏览器默认滚动手势，touchmove 才不被吞 */
user-select: none;
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;
}
uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue
+15 -7
View File
@@ -7,6 +7,7 @@
*/
import { useLocale } from "uview-pro";
import { computed, ref, watch } from "vue";
import { useThemeTokens } from "@/composables";
const props = defineProps({
/** 对话框是否展开 */
@@ -49,6 +50,8 @@ const emit = defineEmits<{
}>();
const { t } = useLocale();
// 确认钮纯色跟主题（渐变浅档白字发糊）
const { primary } = useThemeTokens();
const name = ref("");
@@ -90,7 +93,8 @@ function onConfirm(): void {
</text>
</view>
<view class="folder-name-dialog__btn folder-name-dialog__btn--primary"
:class="{ 'folder-name-dialog__btn--muted': !canSubmit || props.submitting }" @click="onConfirm">
:class="{ 'folder-name-dialog__btn--muted': !canSubmit || props.submitting }" :style="{ background: primary }"
@click="onConfirm">
<text class="folder-name-dialog__btn-text folder-name-dialog__btn-text--primary">
{{ props.confirmLabel || t("FilePage.folderConfirm") }}
</text>
@@ -133,30 +137,34 @@ function onConfirm(): void {
margin-top: 32rpx;
}
/* 底部按键统一规格（同 option-picker）：等高圆角矩形 + 细描边，非胶囊 */
&__btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 76rpx;
border-radius: 999rpx;
background-color: #f5f6f8;
height: 96rpx;
border: 2rpx solid #e5e6eb;
border-radius: 24rpx;
background-color: #ffffff;
&--primary {
border-color: transparent;
background-color: #2b8fff;
}
/* 名称为空或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
/* 名称为空或提交中：纯色 + 透明度置灰（色相不脱节，仍可点，由 onConfirm 拦截） */
&--muted {
background-color: #b9d6ff;
opacity: 0.45;
}
}
&__btn-text {
font-size: 28rpx;
font-size: 32rpx;
color: #5c626b;
&--primary {
font-weight: 600;
color: #ffffff;
}
}
uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue
+316 -291
View File
@@ -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>
uniapp/youjiala/src/components/help-doc-preview/help-doc-preview.vue
+30 -5
View File
@@ -126,8 +126,7 @@ const hasContent = computed(
</script>
<template>
<u-popup :model-value="visible" mode="bottom" round="24" :closeable="true" close-icon-pos="top-right"
:safe-area-inset-bottom="true" @close="emit('close')">
<u-popup :model-value="visible" mode="bottom" round="24" :safe-area-inset-bottom="true" @close="emit('close')">
<view class="help-preview">
<scroll-view class="hp-body" scroll-y :show-scrollbar="false">
<!-- 头部：圆形图标徽标 + 标题 -->
@@ -223,24 +222,50 @@ const hasContent = computed(
</template>
</view>
</scroll-view>
<!-- 取消通栏（底部抽屉统一风格：不再用右上角 X） -->
<view class="hp-cancel" @tap="emit('close')">
<text class="hp-cancel-text">
{{ t("HelpPreview.cancel") }}
</text>
</view>
</view>
</u-popup>
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格：浅灰面板底，文档内容整体放白色圆角卡 */
.help-preview {
display: flex;
flex-direction: column;
max-height: 82vh;
padding: 8rpx 32rpx 24rpx;
background-color: #ffffff;
padding: 24rpx;
background-color: #f2f3f5;
border-radius: 24rpx;
}
.hp-body {
flex: 1;
min-height: 0;
max-height: calc(82vh - 32rpx);
max-height: calc(82vh - 176rpx);
padding: 8rpx 28rpx 24rpx;
background-color: #ffffff;
border-radius: 20rpx;
}
/* 取消通栏：白卡灰字，与文档卡同语言 */
.hp-cancel {
display: flex;
align-items: center;
justify-content: center;
margin-top: 24rpx;
padding: 26rpx 0;
border-radius: 20rpx;
background-color: #ffffff;
}
.hp-cancel-text {
font-size: 28rpx;
color: #5c626b;
}
/* 头部 */
uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue
+102
View File
@@ -0,0 +1,102 @@
<script setup lang="ts">
/**
* 沉浸式主题头部（传输列表页同款风格）：柔光主题渐变底 + 白胶囊返回 + 居中主题色标题。
* 所有「进入后返回」的子页页头统一用它：回收站 / 共享大厅 / 相册详情 / 新建专辑 / 传输列表。
* 标题真居中靠两侧等宽胶囊（返回 64rpx + gap 16rpx）：右侧无搜索时放透明占位。
* 渐变与 transport 页一致：primary 混白 35% 起、混白 10% 止（浓色带色觉冲击大的教训）。
*/
import { computed } from "vue";
import { mixWithWhite, useThemeTokens } from "@/composables";
const props = defineProps({
title: {
type: String,
default: "",
},
/** 右侧搜索胶囊（与返回同宽同形，保持标题居中） */
showSearch: {
type: Boolean,
default: false,
},
/** 搜索展开态：图标高亮为主题色 */
searchOn: {
type: Boolean,
default: false,
},
});
const emit = defineEmits<{
(e: "back"): void;
(e: "toggle-search"): void;
}>();
const { primary } = useThemeTokens();
const heroStyle = computed(() => ({
background: `linear-gradient(180deg, ${mixWithWhite(primary.value, 0.35)} 0%, ${mixWithWhite(primary.value, 0.1)} 100%)`,
}));
</script>
<template>
<view class="hero-navbar" :style="heroStyle">
<view class="hero-navbar__status-bar" />
<view class="hero-navbar__nav">
<view class="hero-navbar__pill" @tap="emit('back')">
<u-icon name="arrow-left" size="32" :color="primary" />
</view>
<text class="hero-navbar__title" :style="{ color: primary }">
{{ props.title }}
</text>
<!-- 右侧：搜索胶囊或等宽透明占位（占位保证标题仍几何居中） -->
<view v-if="props.showSearch" class="hero-navbar__pill" @tap="emit('toggle-search')">
<u-icon name="search" size="30" :color="props.searchOn ? primary : '#5c626b'" />
</view>
<view v-else class="hero-navbar__pill hero-navbar__pill--ghost" />
</view>
</view>
</template>
<style lang="scss" scoped>
/* 沉浸式头部：状态栏占位 + 导航行（传输列表页同款几何） */
.hero-navbar {
padding-bottom: 8rpx;
&__status-bar {
height: var(--status-bar-height);
}
&__nav {
display: flex;
align-items: center;
gap: 16rpx;
height: 88rpx;
padding: 0 24rpx;
}
/* 白柔光胶囊钮（浅底上用白底 + 主题色图标） */
&__pill {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.65);
&--ghost {
background: transparent;
}
}
&__title {
flex: 1;
text-align: center;
font-size: 34rpx;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>
uniapp/youjiala/src/components/option-picker/option-picker.vue
+100 -41
View File
@@ -6,7 +6,8 @@
* loading 显示转圈占位，items 空且不在 loading 时显示 emptyText。
*/
import { useLocale } from "uview-pro";
import { ref, watch } from "vue";
import { computed, ref, watch } from "vue";
import { useThemeTokens } from "@/composables";
export interface PickerOption {
key: string;
@@ -14,6 +15,8 @@ export interface PickerOption {
label: string;
/** 次要说明（如共享路径 / 专辑描述），缺省不占行 */
sub?: string;
/** 行首图标（如相册=photo），缺省不占位 */
icon?: string;
}
const props = defineProps({
@@ -41,6 +44,16 @@ const props = defineProps({
type: String,
default: "",
},
/** 确认键文案：发布场景传「发布相册」等，缺省仍用「创建」 */
confirmText: {
type: String,
default: "",
},
/** 附加「新建」行文案（如 新建相册）：非空即渲染，点按 emit create */
createText: {
type: String,
default: "",
},
});
const emit = defineEmits<{
@@ -48,12 +61,22 @@ const emit = defineEmits<{
(e: "close"): void;
/** 确认并带上选中项 key */
(e: "confirm", key: string): void;
/** 点了附加的「新建」行 */
(e: "create"): void;
}>();
const { t } = useLocale();
// 勾选色与确认钮随主题；确认钮用纯色（渐变浅档在白字下发糊），未选择/提交中用透明度做置灰态
const { primary } = useThemeTokens();
const picked = ref("");
const confirmStyle = computed(() => ({
background: primary.value,
opacity: picked.value && !props.loading ? 1 : 0.45,
}));
// 每次展开清掉上次选择
watch(
() => props.visible,
@@ -79,41 +102,52 @@ function onConfirm(): void {
<text class="option-picker__title">
{{ props.title }}
</text>
<scroll-view scroll-y class="option-picker__list">
<view v-if="props.loading" class="option-picker__empty">
<u-loading mode="circle" />
</view>
<template v-else>
<view v-if="!props.items.length" class="option-picker__empty">
<text class="option-picker__empty-text">
{{ props.emptyText || t("FilePage.pickerEmpty") }}
</text>
<!-- 列表白卡（底部抽屉统一风格：灰底上的白色圆角分块） -->
<view class="option-picker__card">
<scroll-view scroll-y class="option-picker__list">
<view v-if="props.loading" class="option-picker__empty">
<u-loading mode="circle" />
</view>
<view v-for="item in props.items" :key="item.key" class="option-picker__row"
:class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
<view class="option-picker__row-main">
<text class="option-picker__row-label">
{{ item.label }}
</text>
<text v-if="item.sub" class="option-picker__row-sub">
{{ item.sub }}
<template v-else>
<view v-if="!props.items.length" class="option-picker__empty">
<text class="option-picker__empty-text">
{{ props.emptyText || t("FilePage.pickerEmpty") }}
</text>
</view>
<u-icon v-if="picked === item.key" name="checkmark" size="36" color="#2b8fff" />
<view v-else class="option-picker__radio" />
</view>
</template>
</scroll-view>
<view v-for="item in props.items" :key="item.key" class="option-picker__row"
:class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
<u-icon v-if="item.icon" :name="item.icon" size="40" :color="primary" />
<view class="option-picker__row-main">
<text class="option-picker__row-label">
{{ item.label }}
</text>
<text v-if="item.sub" class="option-picker__row-sub">
{{ item.sub }}
</text>
</view>
<u-icon v-if="picked === item.key" name="checkmark-circle-fill" size="40" :color="primary" />
<view v-else class="option-picker__radio" />
</view>
</template>
</scroll-view>
</view>
<!-- 附加「新建」行（如 新建相册）：点按跳创建页 -->
<view v-if="props.createText" class="option-picker__create" @tap="emit('create')">
<u-icon name="plus-circle-fill" size="40" :color="primary" />
<text class="option-picker__create-text">
{{ props.createText }}
</text>
<u-icon name="arrow-right" size="26" color="#c0c4cc" />
</view>
<view class="option-picker__footer">
<view class="option-picker__btn" @tap="emit('close')">
<text class="option-picker__btn-text">
{{ t("FilePage.folderCancel") }}
</text>
</view>
<view class="option-picker__btn option-picker__btn--primary"
:class="{ 'option-picker__btn--muted': !picked || props.loading }" @tap="onConfirm">
<view class="option-picker__btn option-picker__btn--primary" :style="confirmStyle" @tap="onConfirm">
<text class="option-picker__btn-text option-picker__btn-text--primary">
{{ t("FilePage.folderConfirm") }}
{{ props.confirmText || t("FilePage.folderConfirm") }}
</text>
</view>
</view>
@@ -123,17 +157,26 @@ function onConfirm(): void {
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
.option-picker {
padding: 40rpx 32rpx 0;
background-color: #ffffff;
padding: 32rpx 24rpx 0;
background-color: #f2f3f5;
&__title {
display: block;
padding-bottom: 24rpx;
font-size: 32rpx;
font-weight: 600;
padding: 8rpx 8rpx 28rpx;
font-size: 36rpx;
font-weight: 700;
color: #1f2329;
text-align: center;
border-bottom: 2rpx solid #e8eaed;
margin-bottom: 24rpx;
}
&__card {
padding: 8rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
&__list {
@@ -156,6 +199,7 @@ function onConfirm(): void {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
padding: 24rpx 20rpx;
border-radius: 16rpx;
@@ -170,7 +214,6 @@ function onConfirm(): void {
min-width: 0;
flex-direction: column;
gap: 4rpx;
margin-right: 20rpx;
}
&__row-label {
@@ -198,36 +241,52 @@ function onConfirm(): void {
border-radius: 50%;
}
/* 附加「新建」行：与列表卡同款白卡（图标 + 文案 + 右尖角） */
&__create {
display: flex;
align-items: center;
gap: 20rpx;
margin-top: 20rpx;
padding: 28rpx 32rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
&__create-text {
flex: 1;
font-size: 28rpx;
color: #1f2329;
}
&__footer {
display: flex;
gap: 20rpx;
margin-top: 28rpx;
}
/* 按键版式对齐设计图：等高圆角矩形 + 细描边，非胶囊 */
&__btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 76rpx;
border-radius: 999rpx;
background-color: #f5f6f8;
height: 96rpx;
border: 2rpx solid #e5e6eb;
border-radius: 24rpx;
background-color: #ffffff;
&--primary {
border-color: transparent;
background-color: #2b8fff;
}
/* 未选择或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
&--muted {
background-color: #b9d6ff;
}
}
&__btn-text {
font-size: 28rpx;
font-size: 32rpx;
color: #5c626b;
&--primary {
font-weight: 600;
color: #ffffff;
}
}
uniapp/youjiala/src/components/page-navbar/page-navbar.vue
+8 -13
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
/**
* 文件页顶部导航栏：「返回箭头 + 居中标题 + 传输入口 + 右侧两个显隐开关」。
* 根目录不显示返回（showBack=false）；标题两侧等宽占位保证真居中。
* 文件页顶部导航栏：「返回箭头 + 左对齐标题 …… 传输入口 + 右侧两个显隐开关」。
* 根目录不显示返回（showBack=false）；标题左对齐、操作图标右对齐，稳定的两端对齐结构
* （避免居中标题与右侧图标在图标增减时产生的不对称视觉负担）。
* 右侧 search/grid 两个图标分别切换页面里搜索框与快捷入口区的显隐，
* 点亮（蓝）= 对应区域显示，置灰 = 隐藏；排序按钮在 file-tab-filter 工具区。
* 传输图标是跳转入口（带进行中计数角标），不参与显隐切换；字形用自绘 SVG（transferGlyph）。
@@ -67,10 +68,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
<template>
<view class="page-navbar">
<view class="page-navbar__side page-navbar__side--left">
<view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
<u-icon name="arrow-left" size="42" color="#1f2329" />
</view>
<view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
<u-icon name="arrow-left" size="42" color="#1f2329" />
</view>
<text class="page-navbar__title">
{{ props.title }}
@@ -107,20 +106,15 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
background-color: transparent;
}
/* 左右等宽占位（容纳右侧三个按钮）：任何状态下标题都严格居中 */
/* 右侧操作图标组：宽度自适应内容、不参与标题伸缩，标题始终左对齐 */
.page-navbar__side {
display: flex;
align-items: center;
gap: 6rpx;
width: 208rpx;
min-height: 64rpx;
flex-shrink: 0;
}
.page-navbar__side--left {
justify-content: flex-start;
}
.page-navbar__side--right {
justify-content: flex-end;
}
@@ -169,7 +163,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
.page-navbar__title {
flex: 1;
text-align: center;
min-width: 0;
text-align: left;
font-size: 38rpx;
font-weight: 600;
color: #1f2329;
uniapp/youjiala/src/components/person-quick-create/person-quick-create.vue
+52 -33
View File
@@ -10,6 +10,7 @@
import type { FamilyPersonDisplayData } from "@/data/auto/familyPersonDisplayData";
import { useLocale } from "uview-pro";
import { computed, ref, watch } from "vue";
import { useThemeTokens } from "@/composables";
import { usePolicyOptions } from "@/composables/usePolicyOptions";
import { FamilyPersonData } from "@/data/auto/familyPersonData";
import { FamilyPersonDisplayData as FamilyPersonDisplayDataCls } from "@/data/auto/familyPersonDisplayData";
@@ -27,6 +28,8 @@ const emit = defineEmits<{
}>();
const { t } = useLocale();
// 确认钮纯色跟主题（渐变浅档白字发糊）
const { primary } = useThemeTokens();
const { getPolicyOptions, getPolicyText } = usePolicyOptions();
const genderItems = computed(() => getPolicyOptions("GenderPolicy"));
@@ -104,31 +107,34 @@ async function onConfirm(): Promise<void> {
{{ props.title || t('FamilyPersonPage.quickCreateTitle') }}
</text>
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.surname") }}<text class="pqc__required">*</text>
</text>
<u-input v-model="surname" :border="true" :maxlength="100"
:placeholder="t('FamilyPersonPage.surnamePlaceholder')" />
</view>
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.genealogyName") }}<text class="pqc__required">*</text>
</text>
<u-input v-model="genealogyName" :border="true" :maxlength="100"
:placeholder="t('FamilyPersonPage.genealogyNamePlaceholder')" />
</view>
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.gender") }}<text class="pqc__required">*</text>
</text>
<view class="pqc__picker" @tap="genderPickerVisible = true">
<text :class="{ 'pqc__picker-empty': !genderLabel }">
{{ genderLabel || t('FamilyPersonPage.genderPlaceholder') }}
<!-- 表单白卡（底部抽屉统一风格：灰底 + 白色圆角分块） -->
<view class="pqc__card">
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.surname") }}<text class="pqc__required">*</text>
</text>
<u-icon name="arrow-right" size="26" color="#c4c8cf" />
<u-input v-model="surname" :border="true" :maxlength="100"
:placeholder="t('FamilyPersonPage.surnamePlaceholder')" />
</view>
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.genealogyName") }}<text class="pqc__required">*</text>
</text>
<u-input v-model="genealogyName" :border="true" :maxlength="100"
:placeholder="t('FamilyPersonPage.genealogyNamePlaceholder')" />
</view>
<view class="pqc__field">
<text class="pqc__label">
{{ t("FamilyPersonPage.gender") }}<text class="pqc__required">*</text>
</text>
<view class="pqc__picker" @tap="genderPickerVisible = true">
<text :class="{ 'pqc__picker-empty': !genderLabel }">
{{ genderLabel || t('FamilyPersonPage.genderPlaceholder') }}
</text>
<u-icon name="arrow-right" size="26" color="#c4c8cf" />
</view>
</view>
</view>
@@ -138,7 +144,8 @@ async function onConfirm(): Promise<void> {
{{ t("AdminPage.cancelBut") }}
</text>
</view>
<view class="pqc__btn pqc__btn--primary" :class="{ 'pqc__btn--muted': saving }" @tap="onConfirm">
<view class="pqc__btn pqc__btn--primary" :class="{ 'pqc__btn--muted': saving }"
:style="{ background: primary }" @tap="onConfirm">
<text class="pqc__btn-text pqc__btn-text--primary">
{{ saving ? t("AdminPage.savingTip") : t("AdminPage.confirmBut") }}
</text>
@@ -154,9 +161,10 @@ async function onConfirm(): Promise<void> {
</template>
<style lang="scss" scoped>
/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
.pqc {
padding: 40rpx 32rpx 0;
background-color: #ffffff;
padding: 32rpx 24rpx 0;
background-color: #f2f3f5;
&__title {
display: block;
@@ -167,6 +175,12 @@ async function onConfirm(): Promise<void> {
text-align: center;
}
&__card {
padding: 28rpx 28rpx 4rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
&__field {
margin-bottom: 24rpx;
}
@@ -203,32 +217,37 @@ async function onConfirm(): Promise<void> {
&__footer {
display: flex;
gap: 20rpx;
margin-top: 8rpx;
margin-top: 28rpx;
}
/* 底部按键统一规格（同 option-picker）：等高圆角矩形 + 细描边，非胶囊 */
&__btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 76rpx;
border-radius: 999rpx;
background-color: #f5f6f8;
height: 96rpx;
border: 2rpx solid #e5e6eb;
border-radius: 24rpx;
background-color: #ffffff;
&--primary {
border-color: transparent;
background-color: #2b8fff;
}
/* 提交中：纯色 + 透明度置灰（色相不脱节） */
&--muted {
background-color: #b9d6ff;
opacity: 0.45;
}
}
&__btn-text {
font-size: 28rpx;
font-size: 32rpx;
color: #5c626b;
&--primary {
font-weight: 600;
color: #ffffff;
}
}
uniapp/youjiala/src/components/search-input/search-input.vue
+6 -5
View File
@@ -57,7 +57,7 @@ function onClear(): void {
</template>
<style lang="scss" scoped>
/* 分区卡片风格：外层透明露渐变底，胶囊内部浅白色、留描边定形 */
/* 卡片表面统一风格：白底 + 细边框 + 柔和投影（替代半透明白叠加的灰浊感），圆角矩形（对齐设计图，非全胶囊） */
.search-input {
padding: 20rpx 24rpx 0;
}
@@ -66,10 +66,11 @@ function onClear(): void {
display: flex;
align-items: center;
gap: 16rpx;
padding: 10rpx 28rpx;
border: 2rpx solid rgba(31, 35, 41, 0.08);
border-radius: 399rpx;
background-color: rgba(255, 255, 255, 0.55);
padding: 14rpx 28rpx;
border: 2rpx solid rgba(31, 35, 41, 0.06);
border-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
}
.search-input__field {