设置菜单的静态常量

总结与建议

问题根源

--left-menu-max-width 和 --left-menu-min-width 是静态常量，不随菜单折叠状态变化。布局组件（如 useRenderLayout.tsx）通过条件类名切换来适配：

{
  'w-[var(--left-menu-min-width)]': collapse.value,    // 收起
  'w-[var(--left-menu-max-width)]': !collapse.value    // 展开
}

但新组件（如底部悬浮操作栏）直接写 var(--left-menu-max-width)，只读了展开时的值，没有走这套条件逻辑，导致菜单收起后左侧留白过大。

对以后开发的建议

1. CSS 变量设计原则：一个语义 = 一个变量

避免 --min-width + --max-width 双变量的设计，应该定义 --left-menu-width 作为当前实际宽度，在折叠状态变化时动态更新。新组件直接用它，不需要关心 min/max 切换逻辑。

2. 全局动态变量统一在 store 中维护

类似 setCollapse 这种状态变更，应该同步更新所有相关的 CSS 变量。这次改 app.ts 就是补上了这个逻辑，后续新增的全局动态属性（侧边栏宽度、主题色等）都应遵循这个模式。

3. 避免在业务组件中硬编码布局尺寸

底部悬浮栏用 calc(var(--left-menu-max-width, 200px)) 属于隐式依赖布局状态。如果布局结构发生变化（比如加了左侧面板、改了布局模式），这类硬编码会集体失效。应该：

• 优先用框架提供的布局组件
• 或者监听 store 状态动态计算 left 值
• 至少注释清楚「与 layout 中的 collapse 逻辑强关联」

4. 测试覆盖折叠/展开、缩放等边界场景

这类问题在开发时很容易漏掉——只看了菜单展开的页面，没点一下折叠按钮看看效果。建议新页面完成后，至少手动测一轮：菜单收起、窗口缩小、不同分辨率、不同权限。