WuYongJie/furniture-3d-system-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(layout): 产品开发侧栏对齐供应链 224px，修复系统切换器「产品开发」截断

Browse Source 
侧栏变量 --layout-app-sidebar-width 11rem→14rem（浅色/深色两处），切换器簇/按钮随之与供应链逐项一致（224/192/144）；切换器簇改 min-width、触发器 flex-1→flex-auto 作为防截断兜底。已实测四主页面无挤压无横向溢出。
This commit is contained in:
WuYongJie 2026-10-09 09:38:44 +08:00
parent c3b20aace6
commit 6d3891fc44
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
furniture-3d-system/src/app/globals.css
View File

@ -272,7 +272,7 @@
@layer utilities {
:root,
[data-theme='light'] {
--layout-app-sidebar-width: 11rem;
--layout-app-sidebar-width: 14rem; /* 与供应链中心 .sc-sidebar 224px 对齐 */
--layout-right-panel-width: 360px;
--layout-right-panel-max-width: 32vw;
@ -440,7 +440,7 @@
/* ===== 深色主题 ===== */
[data-theme='dark'] {
--layout-app-sidebar-width: 11rem;
--layout-app-sidebar-width: 14rem; /* 与供应链中心 .sc-sidebar 224px 对齐 */
--layout-right-panel-width: 360px;
--layout-right-panel-max-width: 32vw;
@ -2097,17 +2097,20 @@
* 32px = 顶栏在该断点下的左内边距。
*/
@media (min-width: 1024px) {
.app-workspace-switcher-cluster {
width: calc(var(--layout-app-sidebar-width) - 32px);
/* min-width 而非固定宽度：以侧栏对齐宽度为下限，内容（「产品开发」+折叠按钮）放不下时
允许簇自动撑开数像素，避免切换器文字被 truncate 截断。 */
.app-workspace-switcher-cluster {
min-width: calc(var(--layout-app-sidebar-width) - 32px);
}
.app-workspace-switcher-panel {
width: calc(var(--layout-app-sidebar-width) - 32px);
min-width: calc(var(--layout-app-sidebar-width) - 32px);
}
/* 供应链中心布局的左侧栏是固定 224px（.sc-sidebar），此处同步 */
body:has(.sc-layout) .app-workspace-switcher-cluster,
body:has(.sc-layout) .app-workspace-switcher-panel {
width: 192px;
min-width: 192px;
}
}

6
furniture-3d-system/src/components/layout/WorkspaceSwitcher.tsx
View File

@ -188,7 +188,9 @@ export function WorkspaceSwitcher({
'flex min-w-0 items-center text-[#2d3335] transition hover:bg-black/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#40585d]',
mobile
? 'h-10 max-w-[220px] gap-1.5 rounded-[6px] px-2'
: 'h-11 min-w-0 flex-1 gap-2.5 rounded-[6px] px-1.5 pr-2.5',
// flex-auto（而非 flex-1）：按内容参与簇的自动宽度计算，
// 侧栏较窄时切换器仍能完整显示系统名，不被 truncate 截断。
: 'h-11 min-w-0 flex-auto gap-2.5 rounded-[6px] px-1.5 pr-2.5',
].join(' ')}
>
{triggerContent}
@ -200,7 +202,7 @@ export function WorkspaceSwitcher({
'flex min-w-0 items-center text-[#2d3335]',
mobile
? 'h-10 max-w-[220px] gap-1.5 px-2'
: 'h-11 min-w-0 flex-1 gap-2.5 px-1.5 pr-2.5',
: 'h-11 min-w-0 flex-auto gap-2.5 px-1.5 pr-2.5',
].join(' ')}
>
{triggerContent}