From 94791dc25518bfedd301f06685d41f042a3bd97f Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 10 Aug 2026 01:32:06 +0800 Subject: [PATCH] =?UTF-8?q?fix:=206=E4=B8=AACSS=E5=8F=98=E9=87=8F/?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E9=97=AE=E9=A2=98=20(#1317)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. tasks.css: 未定义变量替换为设计系统已定义变量 - --bg-surface → --bg-primary - --border-primary → --border-color - --bg-hover → --bg-tertiary - --error-500 → --error - --primary-500 → --color-primary-500 2. voice-clone.css: .vc-toast-container z-index 从 var(--z-modal) 改为 var(--z-toast) 3. products.css: 响应式断点调整 1400px→1200px(3列) 992px→768px(2列) 4. voice-materials.css: 列表视图9列grid加 overflow-x:auto + min-width 约束 - .vmat-list-header / .vmat-row min-width: 700px - batch-mode min-width: 730px - 顺带修复 --border-primary → --border-color 5. titles.css + assets.css: sticky定位父容器加 overflow:visible + align-self:start 6. EditingPlanner.css: .ep-search-wrap 已有 position:relative，无需改动 --- apps/web/src/pages/assets/assets.css | 2 ++ apps/web/src/pages/products/products.css | 6 ++--- apps/web/src/pages/tasks/tasks.css | 24 +++++++++---------- apps/web/src/pages/titles/titles.css | 2 ++ .../web/src/pages/voice-clone/voice-clone.css | 2 +- .../pages/voice-materials/voice-materials.css | 9 ++++--- 6 files changed, 25 insertions(+), 20 deletions(-) diff --git a/apps/web/src/pages/assets/assets.css b/apps/web/src/pages/assets/assets.css index fabdd1b09..8fa5f34ba 100644 --- a/apps/web/src/pages/assets/assets.css +++ b/apps/web/src/pages/assets/assets.css @@ -21,6 +21,7 @@ grid-template-columns: 260px 1fr; gap: 20px; align-items: start; + overflow: visible; } /* ============================================================ @@ -32,6 +33,7 @@ gap: var(--space-sm); position: sticky; top: var(--space-md); + align-self: start; } .xx-asset-library-item { diff --git a/apps/web/src/pages/products/products.css b/apps/web/src/pages/products/products.css index 6945e006e..91ed71bcc 100644 --- a/apps/web/src/pages/products/products.css +++ b/apps/web/src/pages/products/products.css @@ -991,19 +991,17 @@ /* ============================================================ 响应式 ============================================================ */ -@media (max-width: 1400px) { +@media (max-width: 1200px) { .xx-products-grid { grid-template-columns: repeat(3, 1fr); } } -@media (max-width: 992px) { +@media (max-width: 768px) { .xx-products-grid { grid-template-columns: repeat(2, 1fr); } -} -@media (max-width: 768px) { .xx-products-page { padding: var(--space-md); } diff --git a/apps/web/src/pages/tasks/tasks.css b/apps/web/src/pages/tasks/tasks.css index 42ec388e7..0548cc3b3 100644 --- a/apps/web/src/pages/tasks/tasks.css +++ b/apps/web/src/pages/tasks/tasks.css @@ -31,9 +31,9 @@ justify-content: space-between; margin-bottom: var(--space-lg); padding: var(--space-md); - background: var(--bg-surface); + background: var(--bg-primary); border-radius: var(--radius-lg); - border: 1px solid var(--border-primary); + border: 1px solid var(--border-color); } .task-status-tabs { @@ -56,10 +56,10 @@ /* 表格 */ .task-table { - background: var(--bg-surface); + background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; - border: 1px solid var(--border-primary); + border: 1px solid var(--border-color); } .task-table .ant-table { @@ -68,7 +68,7 @@ .task-table .ant-table-thead > tr > th { background: var(--bg-secondary); - border-bottom: 1px solid var(--border-primary); + border-bottom: 1px solid var(--border-color); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--text-secondary); @@ -79,7 +79,7 @@ } .task-table .ant-table-tbody > tr:hover > td { - background: var(--bg-hover); + background: var(--bg-tertiary); } /* 任务 ID */ @@ -122,7 +122,7 @@ /* 操作按钮 */ .task-retry-btn { - color: var(--primary-500); + color: var(--color-primary-500); } .task-retry-btn:hover { @@ -139,7 +139,7 @@ padding: var(--space-md); background: var(--bg-secondary); border-radius: var(--radius-md); - border: 1px solid var(--border-primary); + border: 1px solid var(--border-color); } .task-error-header { @@ -148,7 +148,7 @@ gap: var(--space-sm); margin-bottom: var(--space-md); font-weight: var(--font-weight-semibold); - color: var(--error-500, #ef4444); + color: var(--error); } .task-error-icon { @@ -175,7 +175,7 @@ } .task-error-message { - color: var(--error-500, #ef4444); + color: var(--error); word-break: break-all; } @@ -186,7 +186,7 @@ .task-error-stack pre { margin: var(--space-xs) 0 0 0; padding: var(--space-sm); - background: var(--bg-surface); + background: var(--bg-primary); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--text-secondary); @@ -224,7 +224,7 @@ .task-error { padding: var(--space-2xl); text-align: center; - color: var(--error-500, #ef4444); + color: var(--error); } .task-error .anticon { diff --git a/apps/web/src/pages/titles/titles.css b/apps/web/src/pages/titles/titles.css index 2c92a31dc..1de358487 100644 --- a/apps/web/src/pages/titles/titles.css +++ b/apps/web/src/pages/titles/titles.css @@ -21,6 +21,7 @@ grid-template-columns: 220px 1fr; gap: 20px; align-items: start; + overflow: visible; } /* ============================================================ @@ -32,6 +33,7 @@ gap: var(--space-sm); position: sticky; top: var(--space-md); + align-self: start; } .xx-title-category-item { diff --git a/apps/web/src/pages/voice-clone/voice-clone.css b/apps/web/src/pages/voice-clone/voice-clone.css index c639038dd..eb6b816f3 100644 --- a/apps/web/src/pages/voice-clone/voice-clone.css +++ b/apps/web/src/pages/voice-clone/voice-clone.css @@ -264,7 +264,7 @@ position: fixed; top: 80px; right: 20px; - z-index: var(--z-modal); + z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; diff --git a/apps/web/src/pages/voice-materials/voice-materials.css b/apps/web/src/pages/voice-materials/voice-materials.css index fed41ec53..710f194aa 100644 --- a/apps/web/src/pages/voice-materials/voice-materials.css +++ b/apps/web/src/pages/voice-materials/voice-materials.css @@ -351,18 +351,19 @@ .vmat-list { display: flex; flex-direction: column; - border: 1px solid var(--border-primary); + border: 1px solid var(--border-color); border-radius: var(--radius-lg); - overflow: hidden; + overflow-x: auto; } .vmat-list-header { display: grid; grid-template-columns: 48px 1fr 80px 160px 120px 60px 70px 80px; + min-width: 700px; align-items: center; padding: 10px 16px; background: var(--bg-secondary); - border-bottom: 1px solid var(--border-primary); + border-bottom: 1px solid var(--border-color); font-size: 12px; font-weight: 600; color: var(--text-secondary); @@ -373,6 +374,7 @@ .vmat-row { display: grid; grid-template-columns: 48px 1fr 80px 160px 120px 60px 70px 80px; + min-width: 700px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-light); @@ -1062,6 +1064,7 @@ .vmat-list.batch-mode .vmat-list-header, .vmat-list.batch-mode .vmat-row { grid-template-columns: 30px 48px 1fr 80px 160px 120px 60px 70px 80px; + min-width: 730px; } /* ─── 标签筛选药丸条 ─────────────────────────────────────── */ -- 2.54.0