From 86c0cda627fd5b7a9fecd43bf9fb51b8879dce0e Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Wed, 9 Sep 2026 00:08:28 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20#1807=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=80=81=20240px=E2=86=92128px=20=E7=BC=A9?= =?UTF-8?q?=E7=AA=84=E5=B9=B6=E5=8E=8B=E7=BC=A9=E5=86=85=E9=83=A8=E5=85=83?= =?UTF-8?q?=E7=B4=A0=EF=BC=8C=E6=8B=93=E5=AE=BD=E5=86=85=E5=AE=B9=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - MainLayout.css: 主容器/平板/移动端 3 处 width 240px→128px，折叠态 64px 不变 - 展开态 .xx-sidebar-content 水平 padding 收窄至 4px，为菜单文字留足一行空间 - Sidebar.css: 菜单项水平 padding 16→4、gap 8→4、margin 4→2，图标 36→28 - 菜单文字补 min-width:0 + white-space:nowrap + ellipsis 兜底防截断 - 折叠态菜单项居中覆盖、图标 32px，保持 64px 图标栏布局 - 页面容器 max-width 放宽：智能剪辑/任务中心/我的模板/后台 1400→1680，批量 1100→1400 - 视频管理/素材库/配音库/AI数字人本就无 max-width 自动用满，无需改动 --- apps/web/src/components/layout/MainLayout.css | 14 ++++++--- apps/web/src/components/layout/MainLayout.tsx | 2 +- apps/web/src/components/layout/Sidebar.css | 30 ++++++++++++------- apps/web/src/pages/admin/Admin.css | 2 +- .../web/src/pages/duplication/duplication.css | 2 +- apps/web/src/pages/generate/generate.css | 2 +- .../src/pages/my-templates/MyTemplates.css | 2 +- apps/web/src/pages/tasks/tasks.css | 2 +- 8 files changed, 36 insertions(+), 20 deletions(-) diff --git a/apps/web/src/components/layout/MainLayout.css b/apps/web/src/components/layout/MainLayout.css index b2302d8da..890f417b3 100644 --- a/apps/web/src/components/layout/MainLayout.css +++ b/apps/web/src/components/layout/MainLayout.css @@ -5,7 +5,7 @@ .xx-app-shell 全屏 flex 容器 ├── header (xx-top-nav) 顶部导航（Header.tsx 管理） └── .xx-app-body 水平 flex 行 - ├── .xx-app-sidebar 左侧侧边栏（240px / 64px 折叠） + ├── .xx-app-sidebar 左侧侧边栏（128px / 64px 折叠） └── .xx-app-content 主内容区（自适应） 所有尺寸/颜色均使用 global.css 设计系统变量 @@ -31,7 +31,7 @@ /* ── 侧边栏 ───────────────────────────────────────────────── */ .xx-app-sidebar { - width: 240px; + width: 128px; flex-shrink: 0; position: sticky; top: 0; @@ -103,6 +103,12 @@ padding: var(--space-sm); } +/* 展开态（侧边栏 128px）水平 padding 收窄，为菜单文字留出完整一行空间 */ +.xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-content { + padding-left: var(--space-xs); + padding-right: var(--space-xs); +} + /* ── 主内容区 ─────────────────────────────────────────────── */ .xx-app-content { flex: 1; @@ -136,7 +142,7 @@ /* 展开态恢复完整宽度 */ .xx-app-sidebar:not(.xx-collapsed) { - width: 240px; + width: 128px; } .xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-toggle { @@ -159,7 +165,7 @@ top: 56px; /* 移动端 Header 高度 */ left: 0; bottom: 0; - width: 240px; + width: 128px; transform: translateX(-100%); transition: transform var(--transition-slow); box-shadow: none; diff --git a/apps/web/src/components/layout/MainLayout.tsx b/apps/web/src/components/layout/MainLayout.tsx index 848da13bd..55dd53928 100644 --- a/apps/web/src/components/layout/MainLayout.tsx +++ b/apps/web/src/components/layout/MainLayout.tsx @@ -2,7 +2,7 @@ * MainLayout - 主布局组件（Task 1.2） * * 三栏布局：左侧侧边栏 + 顶部导航栏 + 主内容区 - * - 侧边栏：240px 固定宽度，可折叠至 64px 图标栏 + * - 侧边栏：128px 固定宽度，可折叠至 64px 图标栏 * - 顶部导航：复用 Header 组件（68px 固定高度） * - 主内容区：自适应填充剩余空间 * - 响应式：移动端（<768px）隐藏侧边栏 diff --git a/apps/web/src/components/layout/Sidebar.css b/apps/web/src/components/layout/Sidebar.css index 4a7e957a2..590c23af7 100644 --- a/apps/web/src/components/layout/Sidebar.css +++ b/apps/web/src/components/layout/Sidebar.css @@ -30,7 +30,7 @@ /* 分组标题 */ .xx-sidebar-group-title { - padding: var(--space-sm) var(--space-md) var(--space-xs); + padding: var(--space-sm) var(--space-sm) var(--space-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-tertiary); @@ -56,9 +56,9 @@ .xx-sidebar-menu-item { display: flex; align-items: center; - gap: var(--space-sm); - padding: var(--space-sm) var(--space-md); - margin: 0 var(--space-xs); + gap: var(--space-xs); + padding: var(--space-sm) var(--space-xs); + margin: 0 var(--space-xxs); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); @@ -97,12 +97,12 @@ align-items: center; justify-content: center; flex-shrink: 0; - width: 36px; - height: 36px; - border-radius: 10px; + width: 28px; + height: 28px; + border-radius: 8px; background: #f1f5f9; color: var(--text-secondary); - font-size: 18px; + font-size: 16px; line-height: 1; transition: 0.15s ease; } @@ -119,7 +119,9 @@ /* ── 菜单项文字 ───────────────────────────────────────────── */ .xx-sidebar-menu-label { flex: 1; + min-width: 0; overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; } @@ -133,8 +135,16 @@ /* 折叠时菜单项居中，仅图标 */ .xx-sidebar-nav--collapsed .xx-sidebar-menu-item { justify-content: center; - padding: var(--space-sm); - margin: 0 var(--space-xxs); + padding: var(--space-xs); + margin: 0; +} + +/* 折叠态图标恢复更大尺寸居中 */ +.xx-sidebar-nav--collapsed .xx-sidebar-menu-icon { + width: 32px; + height: 32px; + border-radius: 8px; + font-size: 16px; } /* 折叠时隐藏分组标题 */ diff --git a/apps/web/src/pages/admin/Admin.css b/apps/web/src/pages/admin/Admin.css index 6eb0fc565..cf549b1a2 100644 --- a/apps/web/src/pages/admin/Admin.css +++ b/apps/web/src/pages/admin/Admin.css @@ -11,7 +11,7 @@ .admin-coming-soon-page { padding: 32px; - max-width: 1400px; + max-width: 1680px; margin: 0 auto; } diff --git a/apps/web/src/pages/duplication/duplication.css b/apps/web/src/pages/duplication/duplication.css index 5e39f2cce..577e28776 100644 --- a/apps/web/src/pages/duplication/duplication.css +++ b/apps/web/src/pages/duplication/duplication.css @@ -10,7 +10,7 @@ ============================================================ */ .dup-page { padding: var(--space-2xl) var(--space-lg); - max-width: 1100px; + max-width: 1400px; margin: 0 auto; } diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index 2e81c174a..0f8a5c2df 100644 --- a/apps/web/src/pages/generate/generate.css +++ b/apps/web/src/pages/generate/generate.css @@ -10,7 +10,7 @@ .xx-generate-page { min-height: 100%; padding: var(--space-xl); - max-width: 1400px; + max-width: 1680px; margin: 0 auto; } diff --git a/apps/web/src/pages/my-templates/MyTemplates.css b/apps/web/src/pages/my-templates/MyTemplates.css index 5aa2c7b8e..798d8c804 100644 --- a/apps/web/src/pages/my-templates/MyTemplates.css +++ b/apps/web/src/pages/my-templates/MyTemplates.css @@ -5,7 +5,7 @@ .mt-page { padding: var(--space-xl); - max-width: 1400px; + max-width: 1680px; margin: 0 auto; } diff --git a/apps/web/src/pages/tasks/tasks.css b/apps/web/src/pages/tasks/tasks.css index 0548cc3b3..174c72233 100644 --- a/apps/web/src/pages/tasks/tasks.css +++ b/apps/web/src/pages/tasks/tasks.css @@ -2,7 +2,7 @@ .task-center { padding: var(--space-lg); - max-width: 1400px; + max-width: 1680px; margin: 0 auto; } -- 2.54.0