xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 15 Pull Requests Actions 1 Packages Projects Releases 7 Wiki Activity

feat: 左侧导航栏宽度缩窄约一半 + 页面内容区拓宽 #1807

New Issue
Closed
opened 2026-09-08 23:56:17 +08:00 by xiaoxia · 0 comments
xiaoxia commented 2026-09-08 23:56:17 +08:00
Owner
Copy Link
Copy Source

需求

用户反馈：左侧导航栏展开态太宽（240px），占用过多空间。要求：

  1. 侧边栏展开态宽度缩小约一半（240px → 128px 左右），腾出的空间给页面内容
  2. 多出来的宽度让每个页面内容区放大、用满空间

修改范围

1. MainLayout.css（3 处硬编码宽度）

  • .xx-app-sidebar 展开态：width 240px → 128px
  • 平板媒体查询 @media (min-width:769px) and (max-width:1024px) 中 .xx-app-sidebar:not(.xx-collapsed)：240px → 128px
  • 移动端媒体查询 @media (max-width:768px) 中 .xx-app-sidebar：width 240px → 128px
  • 更新 MainLayout.tsx 第 5 行注释（240px → 128px）

2. Sidebar.css 内部元素同步压缩（关键：防止文字截断）

宽度变窄后，菜单项内容必须完整显示、不换行不截断：

  • .xx-sidebar-menu-item 的水平 padding：var(--space-md) → var(--space-sm)
  • .xx-sidebar-group-title 水平 padding 同步收窄
  • .xx-sidebar-content padding 适当收窄
  • 菜单图标区域（36px）、gap 视情况微调，保证「图标 + 文字」一行完整显示
  • 菜单项文字 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 兜底，防止超长文字撑破

3. 页面内容区拓宽

  • .xx-app-content 是 flex:1，侧边栏变窄后自动拓宽
  • 检查主要页面（智能剪辑 /generate、AI数字人 /ai-avatar、视频管理、素材库、配音库等）是否有固定 max-width 容器把内容限制在窄宽度导致右侧大量留白；如有则放宽或改为响应式，让页面内容充分用满拓宽后的空间

不变项

  • 折叠态 64px 图标栏保持不变
  • 折叠/展开交互、移动端汉堡菜单逻辑不变

验收标准

  • 桌面端侧边栏展开态视觉宽度约为原来的一半（128px），所有菜单文字完整显示、无截断无换行
  • 折叠态 64px 正常
  • 平板（769~1024px）默认折叠、展开后为 128px
  • 移动端（≤768px）滑入宽度为 128px
  • 各主要页面内容区随侧边栏变窄而拓宽，无右侧大面积留白
  • 不破坏任何现有功能和页面布局
  • PR CI 全绿
## 需求 用户反馈：左侧导航栏展开态太宽（240px），占用过多空间。要求： 1. 侧边栏展开态宽度缩小约一半（240px → 128px 左右），腾出的空间给页面内容 2. 多出来的宽度让每个页面内容区放大、用满空间 ## 修改范围 ### 1. MainLayout.css（3 处硬编码宽度） - `.xx-app-sidebar` 展开态：width 240px → **128px** - 平板媒体查询 `@media (min-width:769px) and (max-width:1024px)` 中 `.xx-app-sidebar:not(.xx-collapsed)`：240px → 128px - 移动端媒体查询 `@media (max-width:768px)` 中 `.xx-app-sidebar`：width 240px → 128px - 更新 MainLayout.tsx 第 5 行注释（240px → 128px） ### 2. Sidebar.css 内部元素同步压缩（关键：防止文字截断） 宽度变窄后，菜单项内容必须完整显示、不换行不截断： - `.xx-sidebar-menu-item` 的水平 padding：var(--space-md) → var(--space-sm) - `.xx-sidebar-group-title` 水平 padding 同步收窄 - `.xx-sidebar-content` padding 适当收窄 - 菜单图标区域（36px）、gap 视情况微调，保证「图标 + 文字」一行完整显示 - 菜单项文字 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 兜底，防止超长文字撑破 ### 3. 页面内容区拓宽 - `.xx-app-content` 是 flex:1，侧边栏变窄后自动拓宽 - 检查主要页面（智能剪辑 /generate、AI数字人 /ai-avatar、视频管理、素材库、配音库等）是否有固定 max-width 容器把内容限制在窄宽度导致右侧大量留白；如有则放宽或改为响应式，让页面内容充分用满拓宽后的空间 ## 不变项 - 折叠态 64px 图标栏保持不变 - 折叠/展开交互、移动端汉堡菜单逻辑不变 ## 验收标准 - [ ] 桌面端侧边栏展开态视觉宽度约为原来的一半（128px），所有菜单文字完整显示、无截断无换行 - [ ] 折叠态 64px 正常 - [ ] 平板（769~1024px）默认折叠、展开后为 128px - [ ] 移动端（≤768px）滑入宽度为 128px - [ ] 各主要页面内容区随侧边栏变窄而拓宽，无右侧大面积留白 - [ ] 不破坏任何现有功能和页面布局 - [ ] PR CI 全绿
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1807
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?