优化: 界面交互完善与设置体验

- 审批卡尊重滚动意图,等长切换回底,排队超时按钮修活
- 带图编辑提示不静默丢,删除目标回写,切换文案消歧
- 会话键盘可达+搜索态重命名,筛选计数口径对齐
- 子任务提示正名,看板加载态
- 主题跟随系统,表单脏态拦截,密钥显隐留空提示
This commit is contained in:
lxy
2026-10-03 16:28:38 +08:00
parent 31f7a9570b
commit 3e3c6f4d0f
22 changed files with 294 additions and 12 deletions
+27 -2
View File
@@ -52,7 +52,10 @@
<option value="status">{{ $t('tasks.sort.status') }}</option>
</select>
</div>
<span class="filter-count">{{ $t('common.pagination.total', { n: store.tasks.length }) }}</span>
<!-- UX走查 P2-2: 计数对齐可见行口径——列表模式按状态筛选后的可见行数(batchScopeIds,
含折叠父的子任务),看板模式各状态列恒全显仍取全量;原固定 store.tasks.length,
勾选状态芯片后计数不变与可见行数矛盾 -->
<span class="filter-count">{{ $t('common.pagination.total', { n: viewMode === 'list' ? batchScopeIds.length : store.tasks.length }) }}</span>
<!-- 列表/看板切换(持久化) -->
<div class="filter-group view-toggle">
<button class="seg-btn" :class="{ 'is-active': viewMode === 'list' }" @click="viewMode = 'list'">{{ $t('tasks.kanban.toggleList') }}</button>
@@ -271,8 +274,11 @@
<div
class="kanban-board"
ref="kanbanBoardRef"
:class="{ 'is-busy': kanban.kanbanBusy, 'is-hidden': viewMode !== 'kanban' }"
:class="{ 'is-busy': kanban.kanbanBusy, 'is-loading': viewMode === 'kanban' && loading, 'is-hidden': viewMode !== 'kanban' }"
>
<!-- 看板加载指示(UX走查 P2-4):看板常驻渲染,切项目/搜索期间旧筛选卡片仍在展示,
轻提示 + 卡片降透明度避免误读为最新数据;局部于看板容器,非全局遮罩,文案对齐列表模式 -->
<div v-if="viewMode === 'kanban' && loading" class="kanban-loading">{{ $t('common.loading') }}</div>
<div v-for="col in kanbanColumns" :key="col.status" class="kanban-col" :data-status="col.status">
<div class="kanban-col-header">
<span class="kanban-col-name">{{ $t(statusLabel(col.status)) }}</span>
@@ -1000,7 +1006,26 @@ onUnmounted(() => {
align-items: flex-start;
overflow-x: auto;
padding-bottom: 8px;
position: relative; /* 承载局部加载浮标(UX走查 P2-4) */
}
/* 加载浮标:局部于看板容器的轻提示,压在列上方居中,不阻断列布局;pointer-events none 不挡拖拽热区 */
.kanban-loading {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
padding: 3px 14px;
border-radius: 999px;
background: var(--df-bg);
border: 0.5px solid var(--df-border);
color: var(--df-text-dim);
font-size: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
pointer-events: none;
}
/* 加载期间旧筛选卡片降透明度+禁交互,避免被误读为当前筛选的最新结果 */
.kanban-board.is-loading .task-card { opacity: 0.45; pointer-events: none; }
.kanban-board.is-busy .task-card { pointer-events: none; }
.kanban-board.is-hidden { display: none; }
.kanban-col {