优化: 溢出修复与视觉token收敛+三处小清理
- diff长行折行可读/任务描述与产出宽表格横滚/确认弹窗长路径折行 - 滚动条色抽token浅色主题可见/阶段徽章与优先级色对齐语义token - git状态色与错误色替换散落硬编码 - alert残留换toast走i18n/分离窗口缺参数补错误态/dev路由生产守卫
This commit is contained in:
@@ -84,6 +84,8 @@ watch(() => props.visible, () => {})
|
|||||||
color: var(--df-text, #333);
|
color: var(--df-text, #333);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
/* anywhere:长 Windows 路径等无空格长串可断行,不撑破 360px 弹窗 */
|
||||||
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
.confirm-actions {
|
.confirm-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -641,7 +641,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.preview-size { color: var(--df-text-dim); flex-shrink: 0; }
|
.preview-size { color: var(--df-text-dim); flex-shrink: 0; }
|
||||||
.preview-truncated { color: #f0a020; flex-shrink: 0; }
|
.preview-truncated { color: var(--df-git-modified); flex-shrink: 0; }
|
||||||
|
|
||||||
.git-badge {
|
.git-badge {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -655,7 +655,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.git-modified { background: color-mix(in srgb, var(--df-git-modified) 18%, transparent); color: var(--df-git-modified); }
|
.git-modified { background: color-mix(in srgb, var(--df-git-modified) 18%, transparent); color: var(--df-git-modified); }
|
||||||
.git-added { background: color-mix(in srgb, var(--df-git-added) 18%, transparent); color: var(--df-git-added); }
|
.git-added { background: color-mix(in srgb, var(--df-git-added) 18%, transparent); color: var(--df-git-added); }
|
||||||
.git-untracked { background: rgba(150, 150, 150, 0.18); color: #999; }
|
.git-untracked { background: rgba(150, 150, 150, 0.18); color: var(--df-git-untracked); }
|
||||||
.git-deleted { background: color-mix(in srgb, var(--df-git-deleted) 18%, transparent); color: var(--df-git-deleted); }
|
.git-deleted { background: color-mix(in srgb, var(--df-git-deleted) 18%, transparent); color: var(--df-git-deleted); }
|
||||||
.git-other { background: color-mix(in srgb, var(--df-git-untracked) 18%, transparent); color: var(--df-git-untracked); }
|
.git-other { background: color-mix(in srgb, var(--df-git-untracked) 18%, transparent); color: var(--df-git-untracked); }
|
||||||
|
|
||||||
@@ -737,7 +737,7 @@ onUnmounted(() => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-error { color: #e05050; }
|
.preview-error { color: var(--df-danger); }
|
||||||
.binary-icon { font-size: 32px; opacity: 0.5; }
|
.binary-icon { font-size: 32px; opacity: 0.5; }
|
||||||
|
|
||||||
.preview-image {
|
.preview-image {
|
||||||
@@ -1062,7 +1062,9 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.diff-line-text {
|
.diff-line-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
white-space: pre;
|
/* pre-wrap + break-all:diff 长行折行显示,替代旧 pre+hidden 的静默裁剪(内容不可达) */
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ watch(() => props.view, () => nextTick(measureDesc))
|
|||||||
.stage-testing { background: rgba(255,217,61,0.15); color: var(--df-warning); }
|
.stage-testing { background: rgba(255,217,61,0.15); color: var(--df-warning); }
|
||||||
.stage-release { background: rgba(100,255,218,0.15); color: var(--df-success); }
|
.stage-release { background: rgba(100,255,218,0.15); color: var(--df-success); }
|
||||||
/* WK-1:暂停/取消置灰(PROJECT_STATUS_BADGE_CLASS 映射) */
|
/* WK-1:暂停/取消置灰(PROJECT_STATUS_BADGE_CLASS 映射) */
|
||||||
.stage-dim { background: rgba(158,158,158,0.15); color: #9e9e9e; }
|
.stage-dim { background: rgba(158,158,158,0.15); color: var(--df-text-dim); }
|
||||||
|
|
||||||
.card-desc-wrap {
|
.card-desc-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -269,8 +269,8 @@ function confirmDelete() {
|
|||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
}
|
}
|
||||||
.tbb-toast--success { border-color: rgba(82, 196, 26, 0.5); color: #67c23a; }
|
.tbb-toast--success { border-color: color-mix(in srgb, var(--df-success) 50%, transparent); color: var(--df-success); }
|
||||||
.tbb-toast--warning { border-color: rgba(230, 162, 60, 0.5); color: #e6a23c; }
|
.tbb-toast--warning { border-color: color-mix(in srgb, var(--df-warning) 50%, transparent); color: var(--df-warning); }
|
||||||
.tbb-toast--error { border-color: rgba(240, 101, 101, 0.5); color: var(--df-danger); }
|
.tbb-toast--error { border-color: rgba(240, 101, 101, 0.5); color: var(--df-danger); }
|
||||||
.toast-enter-active, .toast-leave-active { transition: opacity 0.2s; }
|
.toast-enter-active, .toast-leave-active { transition: opacity 0.2s; }
|
||||||
.toast-enter-from, .toast-leave-to { opacity: 0; }
|
.toast-enter-from, .toast-leave-to { opacity: 0; }
|
||||||
|
|||||||
@@ -94,6 +94,7 @@ const reviewSuggestions = computed<string[]>(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
/* 自审结论卡:verdict 红绿标(pass 绿 / fail 红 / unknown 灰),复用全局 --df-success/danger token */
|
/* 自审结论卡:verdict 红绿标(pass 绿 / fail 红 / unknown 灰),复用全局 --df-success/danger token */
|
||||||
.review-card {
|
.review-card {
|
||||||
|
|||||||
@@ -127,6 +127,7 @@ export default {
|
|||||||
createFailed: 'Failed to create task',
|
createFailed: 'Failed to create task',
|
||||||
deleteFailed: 'Failed to delete task',
|
deleteFailed: 'Failed to delete task',
|
||||||
updateFailed: 'Failed to update task',
|
updateFailed: 'Failed to update task',
|
||||||
|
selectProject: 'Please select a project',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -127,6 +127,7 @@ export default {
|
|||||||
createFailed: '创建任务失败',
|
createFailed: '创建任务失败',
|
||||||
deleteFailed: '删除任务失败',
|
deleteFailed: '删除任务失败',
|
||||||
updateFailed: '更新任务失败',
|
updateFailed: '更新任务失败',
|
||||||
|
selectProject: '请选择项目',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-2
@@ -65,12 +65,15 @@ const routes = [
|
|||||||
component: () => import('../views/AuditLog.vue'),
|
component: () => import('../views/AuditLog.vue'),
|
||||||
meta: { title: '审批历史' },
|
meta: { title: '审批历史' },
|
||||||
},
|
},
|
||||||
{
|
// X6 v3 验证 demo:仅开发环境注册,生产构建不含该路由
|
||||||
|
...(import.meta.env.DEV
|
||||||
|
? [{
|
||||||
path: '/dev/x6',
|
path: '/dev/x6',
|
||||||
name: 'X6Demo',
|
name: 'X6Demo',
|
||||||
component: () => import('../components/dev/X6Demo.vue'),
|
component: () => import('../components/dev/X6Demo.vue'),
|
||||||
meta: { title: 'X6 v3 验证' },
|
meta: { title: 'X6 v3 验证' },
|
||||||
},
|
}]
|
||||||
|
: []),
|
||||||
{
|
{
|
||||||
path: '/settings',
|
path: '/settings',
|
||||||
name: 'Settings',
|
name: 'Settings',
|
||||||
|
|||||||
@@ -49,6 +49,10 @@
|
|||||||
--df-border: rgba(255,255,255,0.06);
|
--df-border: rgba(255,255,255,0.06);
|
||||||
--df-border-strong: rgba(255,255,255,0.10);
|
--df-border-strong: rgba(255,255,255,0.10);
|
||||||
|
|
||||||
|
/* — Scrollbar: 滚动条 thumb(默认深色值,浅色主题在 [data-theme="light"] 覆写)— */
|
||||||
|
--df-scrollbar: rgba(255,255,255,0.08);
|
||||||
|
--df-scrollbar-hover: rgba(255,255,255,0.14);
|
||||||
|
|
||||||
/* — Radius: 2/4/6/8/10 渐进(全站统一走 token)— */
|
/* — Radius: 2/4/6/8/10 渐进(全站统一走 token)— */
|
||||||
--df-radius-xs: 2px;
|
--df-radius-xs: 2px;
|
||||||
--df-radius-sm: 4px;
|
--df-radius-sm: 4px;
|
||||||
@@ -107,6 +111,9 @@
|
|||||||
|
|
||||||
--df-border: rgba(0,0,0,0.08);
|
--df-border: rgba(0,0,0,0.08);
|
||||||
--df-border-strong: rgba(0,0,0,0.14);
|
--df-border-strong: rgba(0,0,0,0.14);
|
||||||
|
|
||||||
|
--df-scrollbar: rgba(0,0,0,0.2);
|
||||||
|
--df-scrollbar-hover: rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
@@ -129,8 +136,8 @@ html, body, #app {
|
|||||||
/* — Scrollbar — */
|
/* — Scrollbar — */
|
||||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||||
::-webkit-scrollbar-track { background: transparent; }
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--df-radius-xs); }
|
::-webkit-scrollbar-thumb { background: var(--df-scrollbar); border-radius: var(--df-radius-xs); }
|
||||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
|
::-webkit-scrollbar-thumb:hover { background: var(--df-scrollbar-hover); }
|
||||||
|
|
||||||
/* — Selection — */
|
/* — Selection — */
|
||||||
/* 选中态用 accent 实色 + 白字:保证紫底气泡(accent)选中也高对比可读,
|
/* 选中态用 accent 实色 + 白字:保证紫底气泡(accent)选中也高对比可读,
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fe-detached-shell">
|
<div class="fe-detached-shell">
|
||||||
<!-- 等待 projectId 参数加载 -->
|
<!-- projectId 来自 URL query(同步可得),缺失时直接给错误态而非无限 spinner -->
|
||||||
<div v-if="!projectId" class="fe-detached-loading">
|
<FileExplorer v-if="projectId" :project-id="projectId" />
|
||||||
<span class="spinner"></span>
|
<div v-else class="fe-detached-error">
|
||||||
|
<span class="fe-detached-error-icon">⚠️</span>
|
||||||
|
<p>缺少 projectId 参数,无法打开文件浏览器</p>
|
||||||
</div>
|
</div>
|
||||||
<FileExplorer v-else :project-id="projectId" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -29,27 +30,19 @@ const projectId = computed(() => (route.query.projectId as string) || '')
|
|||||||
background: var(--df-bg);
|
background: var(--df-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fe-detached-loading {
|
.fe-detached-error {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: var(--df-text-dim);
|
color: var(--df-text-dim);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.fe-detached-error-icon {
|
||||||
width: 20px;
|
font-size: 40px;
|
||||||
height: 20px;
|
opacity: 0.6;
|
||||||
border: 2px solid var(--df-border, #444);
|
|
||||||
border-top-color: var(--df-accent, #3a8);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: df-spin 0.8s linear infinite;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes df-spin {
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1427,13 +1427,14 @@ onUnmounted(() => {
|
|||||||
border-radius: var(--df-radius-lg);
|
border-radius: var(--df-radius-lg);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.stage-planning { background: rgba(100,181,246,0.15); color: #64b5f6; }
|
/* 阶段色全走语义 token(对齐全站约定:releasing/completed=success,见 ActiveProjectsPanel dot-release) */
|
||||||
|
.stage-planning { background: var(--df-info-bg); color: var(--df-info); }
|
||||||
.stage-in_progress { background: var(--df-accent-soft); color: var(--df-accent); }
|
.stage-in_progress { background: var(--df-accent-soft); color: var(--df-accent); }
|
||||||
.stage-testing { background: rgba(255,193,7,0.15); color: #ffc107; }
|
.stage-testing { background: var(--df-warning-bg); color: var(--df-warning); }
|
||||||
.stage-releasing { background: rgba(156,39,176,0.15); color: #ce93d8; }
|
.stage-releasing { background: var(--df-success-bg); color: var(--df-success); }
|
||||||
.stage-completed { background: rgba(100,200,100,0.15); color: #64c864; }
|
.stage-completed { background: var(--df-success-bg); color: var(--df-success); }
|
||||||
.stage-paused { background: rgba(158,158,158,0.15); color: #9e9e9e; }
|
.stage-paused { background: rgba(158,158,158,0.15); color: var(--df-text-dim); }
|
||||||
.stage-cancelled { background: rgba(244,67,54,0.15); color: #f44336; }
|
.stage-cancelled { background: var(--df-danger-bg); color: var(--df-danger); }
|
||||||
|
|
||||||
/* .header-actions 已提取到 styles/global.css 全局 */
|
/* .header-actions 已提取到 styles/global.css 全局 */
|
||||||
|
|
||||||
|
|||||||
@@ -874,7 +874,7 @@ onBeforeUnmount(() => {
|
|||||||
border-radius: var(--df-radius-xs);
|
border-radius: var(--df-radius-xs);
|
||||||
}
|
}
|
||||||
.priority-critical { background: rgba(255,107,107,0.2); color: var(--df-danger); }
|
.priority-critical { background: rgba(255,107,107,0.2); color: var(--df-danger); }
|
||||||
.priority-high { background: rgba(255,152,0,0.2); color: #ff9800; }
|
.priority-high { background: rgba(255,152,0,0.2); color: var(--df-warning); }
|
||||||
.priority-medium { background: rgba(100,181,246,0.2); color: var(--df-info); }
|
.priority-medium { background: rgba(100,181,246,0.2); color: var(--df-info); }
|
||||||
.priority-low { background: rgba(90,99,128,0.2); color: var(--df-text-dim); }
|
.priority-low { background: rgba(90,99,128,0.2); color: var(--df-text-dim); }
|
||||||
|
|
||||||
@@ -916,6 +916,7 @@ onBeforeUnmount(() => {
|
|||||||
.description-wrap {
|
.description-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
transition: max-height 0.25s var(--df-ease);
|
transition: max-height 0.25s var(--df-ease);
|
||||||
}
|
}
|
||||||
.desc-toggle {
|
.desc-toggle {
|
||||||
|
|||||||
+2
-2
@@ -825,7 +825,7 @@ function openCreateModal(parent?: TaskRecord) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function confirmCreate() {
|
async function confirmCreate() {
|
||||||
if (!newTaskProjectId.value) { alert('请选择项目'); return }
|
if (!newTaskProjectId.value) { showToast(t('tasks.err.selectProject'), 'error'); return }
|
||||||
if (!newTaskTitle.value.trim()) return
|
if (!newTaskTitle.value.trim()) return
|
||||||
submitting.value = true
|
submitting.value = true
|
||||||
try {
|
try {
|
||||||
@@ -1244,7 +1244,7 @@ onUnmounted(() => {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.priority-critical { background: rgba(255,107,107,0.2); color: var(--df-danger); }
|
.priority-critical { background: rgba(255,107,107,0.2); color: var(--df-danger); }
|
||||||
.priority-high { background: rgba(255,152,0,0.2); color: #ff9800; }
|
.priority-high { background: rgba(255,152,0,0.2); color: var(--df-warning); }
|
||||||
.priority-medium { background: rgba(100,181,246,0.2); color: var(--df-info); }
|
.priority-medium { background: rgba(100,181,246,0.2); color: var(--df-info); }
|
||||||
.priority-low { background: rgba(90,99,128,0.2); color: var(--df-text-dim); }
|
.priority-low { background: rgba(90,99,128,0.2); color: var(--df-text-dim); }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user