ui: 优化侧边栏宽度,提升界面布局

🎨 界面优化:

1. 主侧边栏宽度调整:
   - 从 w-64 (256px) 调整为 w-48 (192px)
   - 减少 64px 宽度,为主内容区域提供更多空间
   - 保持导航项的可读性和点击区域

2. AI 视频页面侧边栏优化:
   - 从 w-80 (320px) 调整为 w-64 (256px)
   - 减少 64px 宽度,平衡内容展示和说明文档
   - 保持使用说明的完整性和可读性

3. 编辑器页面媒体库优化:
   - 从 w-64 (256px) 调整为 w-48 (192px)
   - 与主侧边栏保持一致的宽度
   - 为视频编辑区域提供更多空间

 优化效果:
- 主内容区域空间增加 ✓
- 侧边栏内容仍然完整可读 ✓
- 整体布局更加平衡 ✓
- 响应式设计保持良好 ✓

现在界面布局更加紧凑合理,主要内容区域有更多展示空间!
This commit is contained in:
root 2025-07-10 12:32:16 +08:00
parent a6dbd37526
commit ed8b854755
3 changed files with 3 additions and 3 deletions

View File

@ -17,7 +17,7 @@ const Sidebar: React.FC = () => {
] ]
return ( return (
<div className="w-64 bg-white border-r border-secondary-200 flex flex-col"> <div className="w-48 bg-white border-r border-secondary-200 flex flex-col">
<div className="p-4 border-b border-secondary-200"> <div className="p-4 border-b border-secondary-200">
<h2 className="text-lg font-semibold text-secondary-900"></h2> <h2 className="text-lg font-semibold text-secondary-900"></h2>
</div> </div>

View File

@ -96,7 +96,7 @@ const AIVideoPage: React.FC = () => {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="w-80 bg-white border-l border-secondary-200 p-6 overflow-y-auto"> <div className="w-64 bg-white border-l border-secondary-200 p-6 overflow-y-auto">
<h3 className="text-lg font-semibold text-secondary-900 mb-4">使</h3> <h3 className="text-lg font-semibold text-secondary-900 mb-4">使</h3>
<div className="space-y-4"> <div className="space-y-4">

View File

@ -63,7 +63,7 @@ const EditorPage: React.FC = () => {
<div className="flex flex-1 min-h-0"> <div className="flex flex-1 min-h-0">
{/* Media Library Sidebar */} {/* Media Library Sidebar */}
<MediaLibrary className="w-64" /> <MediaLibrary className="w-48" />
{/* Main Content */} {/* Main Content */}
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">