diff --git a/lib/client.js b/lib/client.js index c1db1f2..dd38eb2 100644 --- a/lib/client.js +++ b/lib/client.js @@ -195,7 +195,10 @@ window.__ModuleLoader__.load({ .dsh-ct-switch::after{content:"";display:block;width:20px;height:20px;border-radius:999px;background:var(--dsw-alias-bg-layer-3);transition:transform .16s} .dsh-ct-switch[aria-checked=true]::after{transform:translateX(16px)} .dsh-ct-entry{box-sizing:border-box;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden;font-family:inherit;cursor:pointer} +.dsh-ct-entry svg{flex:none;display:block;margin:0} .dsh-ct-entryLabel{white-space:nowrap;overflow:hidden} +[class*="_collapsed"] .dsh-ct-entry{width:36px;height:36px;padding:0;gap:0;margin:0 0 12px;justify-content:center;align-items:center;align-self:flex-start} +[class*="_collapsed"] .dsh-ct-entry .dsh-ct-entryLabel{max-width:0;opacity:0;margin:0;padding:0;pointer-events:none} .dsh-ct-region{display:none !important;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding-right:var(--dsh-sidebar-inline-padding,12px);box-sizing:border-box} [data-dsh-ct-mode=on] .dsh-ct-region{display:flex !important;animation:dsh-ct-fade-in .18s var(--ds-ease-in-out,ease)} [data-dsh-ct-mode=on] [class*="regionArea"] > :not(.dsh-ct-region){display:none !important} @@ -1173,6 +1176,11 @@ window.__ModuleLoader__.load({ window.dispatchEvent(new CustomEvent('dsh-ct-mode', { detail: on })) } + function sidebarCollapsed(found) { + const root = findSidebarRoot(found) + return !!(root && /(?:^|\s)[\w-]*_collapsed(?:\s|$)/.test(String(root.className || ''))) + } + function syncEntryLook(entry, found) { if (!entry || !found) return const nativeClass = String(found.className || '').trim() @@ -1181,10 +1189,16 @@ window.__ModuleLoader__.load({ const label = entry.querySelector('span') if (nativeLabel && label) label.className = `${nativeLabel.className} dsh-ct-entryLabel`.trim() const cs = getComputedStyle(found) + const collapsed = sidebarCollapsed(found) || Number.parseFloat(cs.width) <= 40 entry.style.borderRadius = cs.borderRadius - entry.style.height = cs.height - entry.style.padding = cs.padding - entry.style.gap = cs.gap + entry.style.height = collapsed ? '36px' : cs.height + entry.style.width = collapsed ? '36px' : '' + entry.style.padding = collapsed ? '0' : cs.padding + entry.style.gap = collapsed ? '0' : cs.gap + entry.style.margin = collapsed ? '0 0 12px' : cs.margin + entry.style.justifyContent = 'center' + entry.style.alignItems = 'center' + entry.style.alignSelf = collapsed ? 'flex-start' : '' entry.style.fontSize = cs.fontSize entry.style.fontWeight = cs.fontWeight entry.style.lineHeight = cs.lineHeight @@ -1192,6 +1206,12 @@ window.__ModuleLoader__.load({ entry.style.backgroundColor = cs.backgroundColor entry.style.boxShadow = cs.boxShadow entry.style.color = cs.color + if (label) { + label.style.maxWidth = collapsed ? '0' : '' + label.style.opacity = collapsed ? '0' : '' + label.style.margin = collapsed ? '0' : '' + label.setAttribute('aria-hidden', collapsed ? 'true' : 'false') + } const nativeSvg = found.querySelector('svg') const icon = entry.querySelector('svg') if (nativeSvg && icon) { diff --git a/test/package.test.js b/test/package.test.js index e0e30eb..5ea5aa9 100644 --- a/test/package.test.js +++ b/test/package.test.js @@ -58,6 +58,9 @@ test('installable bundle declares host apply, client half, unique id, and no @de assert.match(client, /新建会话/) assert.match(client, /logoRow/) assert.match(client, /dsh-ct-entry/) + assert.match(client, /sidebarCollapsed/) + assert.match(client, /_collapsed/) + assert.match(client, /width:36px/) assert.match(client, /返回工作区/) assert.match(client, /runs\/\$\{run\.id\}\/open/) assert.match(client, /regionArea/)