fix: toggle shows expand chevron when locked, lock icon when unlocked

This commit is contained in:
2026-07-25 20:57:58 +08:00
parent 3aef7d115f
commit ee9a602f7f

View File

@@ -106,8 +106,12 @@ onUnmounted(() => {
<div id="app" class="ms-app" :data-current-login="'guest'">
<aside class="ms-side" :class="{ collapsed: sidebarCollapsed }" :style="{ width: sidebarCollapsed ? '62px' : sidebarWidth + 'px', minWidth: sidebarCollapsed ? '62px' : sidebarWidth + 'px' }">
<div class="gs-sidebar-toggle" @click="toggleSidebar">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline :points="sidebarCollapsed ? '9 18 15 12 9 6' : '15 18 9 12 15 6'"/>
<svg v-if="sidebarCollapsed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
<svg v-else class="gs-sidebar-lock" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<div class="gs-logo" :class="{ 'gs-logo-collapsed': sidebarCollapsed }">{{ sidebarCollapsed ? 'WS' : 'Workspace' }}</div>
@@ -208,8 +212,8 @@ html, body { height: 100%; margin: 0; }
.gs-hidden { display: none !important; }
.gs-sidebar-toggle { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 12px 4px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
.gs-sidebar-toggle svg { transition: transform 0.2s; }
.gs-sidebar-lock { opacity: 1; }
.ms-side.collapsed .gs-sidebar-toggle { justify-content: center; width: 100%; }
.ms-side.collapsed .gs-sidebar-toggle svg { transform: rotate(180deg); }
.gs-logo-collapsed { text-align: center; padding: 8px 4px 16px 4px; font-size: 14px; }
.ms-divider { width: 28px; flex-shrink: 0; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
.ms-divider-hidden { cursor: default; pointer-events: none; opacity: 0; }