feat: enhance workspace toggle and mobile topbar

static/icons/layers.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:1;"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>

static/src/App.vue

@@ -50,12 +50,16 @@
           @personal="openPersonalPage"
           @delete="deleteConversation"
           @duplicate="duplicateConversation"
+          @toggle-workspace="handleWorkspaceToggle"
         />
 
+        <div v-if="!isMobileViewport" class="workspace-region">
           <LeftPanel
-          v-if="!isMobileViewport"
             ref="leftPanel"
+            class="workspace-panel"
+            :class="{ 'workspace-panel--collapsed': workspaceCollapsed }"
             :width="leftWidth"
+            :collapsed="workspaceCollapsed"
             :icon-style="iconStyle"
             :agent-version="agentVersion"
             :thinking-mode="thinkingMode"
@@ -67,9 +71,20 @@
             @open-file-manager="openGuiFileManager"
           />
 
-        <div v-if="!isMobileViewport" class="resize-handle" @mousedown="startResize('left', $event)"></div>
+          <div
+            v-if="!workspaceCollapsed"
+            class="resize-handle"
+            @mousedown="startResize('left', $event)"
+          ></div>
+        </div>
 
-        <main class="chat-container">
+        <main
+          class="chat-container"
+          :class="{
+            'chat-container--immersive': workspaceCollapsed,
+            'chat-container--mobile': isMobileViewport
+          }"
+        >
           <TokenDrawer
             :visible="Boolean(currentConversationId)"
             :collapsed="tokenPanelCollapsed"
@@ -180,9 +195,14 @@
         :class="{ 'is-hidden': Boolean(activeMobileOverlay) }"
         ref="mobilePanelTrigger"
       >
-        <button type="button" class="mobile-panel-fab" aria-label="打开更多工作区面板" @click="toggleMobileOverlayMenu">
+        <div class="mobile-panel-topbar">
+          <button type="button" class="mobile-panel-fab" aria-label="切换工作区" @click="toggleMobileOverlayMenu">
             <img :src="mobilePanelIcon" alt="" aria-hidden="true" />
           </button>
+          <div class="mobile-topbar-title" :title="currentConversationTitle || '未命名对话'">
+            {{ currentConversationTitle || '未命名对话' }}
+          </div>
+        </div>
         <transition name="mobile-panel-menu">
           <div v-if="mobileOverlayMenuOpen" class="mobile-panel-menu">
             <button
@@ -230,7 +250,7 @@
               :format-time="formatTime"
               :show-collapse-button="true"
               collapse-button-variant="close"
-              @toggle="toggleSidebar"
+              @toggle="closeMobileOverlay"
               @create="createNewConversation"
               @search="handleSidebarSearch"
               @select="handleMobileOverlaySelect($event)"

static/src/app.ts

@@ -196,6 +196,7 @@ const appOptions = {
             ...mapState(useFileStore, ['contextMenu', 'fileTree', 'expandedFolders', 'todoList']),
             ...mapWritableState(useUiStore, [
                 'sidebarCollapsed',
+                'workspaceCollapsed',
                 'panelMode',
                 'panelMenuOpen',
                 'leftWidth',
@@ -398,6 +399,16 @@ const appOptions = {
                 }
                 this.uiSetMobileOverlayMenuOpen(false);
             },
+            handleWorkspaceToggle() {
+                if (this.isMobileViewport) {
+                    return;
+                }
+                const nextState = !this.workspaceCollapsed;
+                this.uiSetWorkspaceCollapsed(nextState);
+                if (nextState) {
+                    this.uiSetPanelMenuOpen(false);
+                }
+            },
             handleMobileOverlayEscape(event) {
                 if (event.key !== 'Escape' || !this.isMobileViewport) {
                     return;
@@ -413,6 +424,8 @@ const appOptions = {
             ...mapActions(useUiStore, {
                 uiToggleSidebar: 'toggleSidebar',
                 uiSetSidebarCollapsed: 'setSidebarCollapsed',
+                uiSetWorkspaceCollapsed: 'setWorkspaceCollapsed',
+                uiToggleWorkspaceCollapsed: 'toggleWorkspaceCollapsed',
                 uiSetPanelMode: 'setPanelMode',
                 uiSetPanelMenuOpen: 'setPanelMenuOpen',
                 uiTogglePanelMenu: 'togglePanelMenu',

static/src/components/chat/ChatArea.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="messages-area" ref="rootEl">
+    <div class="messages-flow">
       <div v-for="(msg, index) in messages" :key="index" class="message-block">
         <div v-if="msg.role === 'user'" class="user-message">
           <div class="message-header icon-label">
@@ -26,14 +27,9 @@
             <div
               v-if="action.type === 'thinking'"
               class="collapsible-block thinking-block"
-            :class="{
-              expanded: expandedBlocks?.has(action.blockId || `${index}-thinking-${actionIndex}`)
-            }"
-          >
-            <div
-              class="collapsible-header"
-              @click="toggleBlock(action.blockId || `${index}-thinking-${actionIndex}`)"
+              :class="{ expanded: expandedBlocks?.has(action.blockId || `${index}-thinking-${actionIndex}`) }"
             >
+              <div class="collapsible-header" @click="toggleBlock(action.blockId || `${index}-thinking-${actionIndex}`)">
                 <div class="arrow"></div>
                 <div class="status-icon">
                   <span class="thinking-icon" :class="{ 'thinking-animation': action.streaming }">
@@ -162,6 +158,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">

static/src/components/panels/LeftPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="sidebar left-sidebar" :style="{ width: width + 'px' }">
+  <aside class="sidebar left-sidebar" :style="panelStyle">
     <div class="sidebar-status">
       <div class="compact-status-card">
         <div class="status-line">
@@ -122,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import FileNode from '@/components/files/FileNode.vue';
 import { useFileStore } from '@/stores/file';
@@ -132,6 +132,7 @@ defineOptions({ name: 'LeftPanel' });
 
 const props = defineProps<{
   width: number;
+  collapsed?: boolean;
   iconStyle: (key: string) => Record<string, string>;
   agentVersion: string | null;
   thinkingMode: boolean;
@@ -147,6 +148,19 @@ defineEmits<{
 }>();
 
 const panelMenuWrapper = ref<HTMLElement | null>(null);
+const panelStyle = computed(() => {
+  if (props.collapsed) {
+    return {
+      width: '0px',
+      minWidth: '0px'
+    };
+  }
+  const px = `${props.width}px`;
+  return {
+    width: px,
+    minWidth: px
+  };
+});
 const fileStore = useFileStore();
 const subAgentStore = useSubAgentStore();
 const { fileTree, expandedFolders, todoList } = storeToRefs(fileStore);

static/src/components/sidebar/ConversationSidebar.vue

@@ -73,6 +73,24 @@
       </template>
     </div>
 
+    <div v-if="collapsed" class="workspace-immersive-toggle" :class="{ collapsed }">
+      <button
+        type="button"
+        class="workspace-immersive-btn"
+        :class="{ active: workspaceCollapsed }"
+        :title="workspaceCollapsed ? '显示工作区' : '隐藏工作区'"
+        @click="$emit('toggle-workspace')"
+      >
+        <span class="sr-only">{{ workspaceCollapsed ? '显示工作区' : '隐藏工作区' }}</span>
+        <span class="workspace-immersive-icon" aria-hidden="true">
+          <img :src="workspaceToggleIcon" alt="" />
+        </span>
+        <span v-if="!collapsed" class="workspace-immersive-label">
+          {{ workspaceCollapsed ? '显示工作区' : '隐藏工作区' }}
+        </span>
+      </button>
+    </div>
+
     <template v-if="!collapsed">
       <div class="conversation-search">
         <input
@@ -186,13 +204,14 @@ defineEmits<{
   (event: 'personal'): void;
   (event: 'delete', id: string): void;
   (event: 'duplicate', id: string): void;
+  (event: 'toggle-workspace'): void;
 }>();
 
 const uiStore = useUiStore();
 const conversationStore = useConversationStore();
 const personalizationStore = usePersonalizationStore();
 
-const { sidebarCollapsed: collapsed } = storeToRefs(uiStore);
+const { sidebarCollapsed: collapsed, workspaceCollapsed } = storeToRefs(uiStore);
 const {
   searchQuery,
   conversations,
@@ -207,4 +226,6 @@ const formatTime = (value: unknown) => (props.formatTime ? props.formatTime(valu
 const iconStyle = (key: string) => (props.iconStyle ? props.iconStyle(key) : {});
 const resolvedShowCollapseButton = computed(() => props.showCollapseButton);
 const resolvedCollapseButtonVariant = computed(() => props.collapseButtonVariant);
+
+const workspaceToggleIcon = new URL('../../../icons/layers.svg', import.meta.url).href;
 </script>

static/src/stores/ui.ts

@@ -49,6 +49,7 @@ interface EasterEggState {
 
 interface UiState {
   sidebarCollapsed: boolean;
+  workspaceCollapsed: boolean;
   panelMode: PanelMode;
   panelMenuOpen: boolean;
   leftWidth: number;
@@ -73,6 +74,7 @@ interface UiState {
 export const useUiStore = defineStore('ui', {
   state: (): UiState => ({
     sidebarCollapsed: true,
+    workspaceCollapsed: false,
     panelMode: 'files',
     panelMenuOpen: false,
     leftWidth: 350,
@@ -108,6 +110,12 @@ export const useUiStore = defineStore('ui', {
     toggleSidebar() {
       this.sidebarCollapsed = !this.sidebarCollapsed;
     },
+    setWorkspaceCollapsed(collapsed: boolean) {
+      this.workspaceCollapsed = collapsed;
+    },
+    toggleWorkspaceCollapsed() {
+      this.workspaceCollapsed = !this.workspaceCollapsed;
+    },
     setPanelMode(mode: PanelMode) {
       this.panelMode = mode;
     },

static/src/styles/components/chat/_chat-area.scss

@@ -22,6 +22,13 @@
     position: relative;
 }
 
+.messages-flow {
+    width: min(960px, 100%);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
 .chat-container .input-area {
     position: absolute;
     left: 0;
@@ -58,6 +65,18 @@
     justify-content: flex-end;
 }
 
+.chat-container--immersive .messages-flow {
+    width: min(900px, 100%);
+}
+
+.chat-container--immersive .scroll-lock-toggle {
+    right: calc((100% - min(900px, 100%)) / 2 + 24px);
+}
+
+.chat-container--mobile {
+    padding-top: 68px;
+}
+
 .scroll-lock-btn {
     width: 36px;
     height: 36px;

static/src/styles/components/overlays/_overlays.scss

@@ -174,36 +174,49 @@
 
 .mobile-panel-trigger {
     position: fixed;
-    top: 16px;
-    left: 16px;
+    top: 0;
+    left: 0;
+    right: 0;
     z-index: 1500;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
     gap: 10px;
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.2s ease;
+    padding: 0;
 }
 
 .mobile-panel-trigger.is-hidden {
     opacity: 0;
 }
 
+.mobile-panel-topbar {
+    background: var(--claude-left-rail);
+    padding: 10px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 10px 20px rgba(51, 35, 20, 0.1);
+    pointer-events: auto;
+}
+
 .mobile-panel-fab {
-    width: 48px;
-    height: 48px;
+    width: 44px;
+    height: 44px;
     border: none;
-    padding: 6px;
+    padding: 0;
     border-radius: 12px;
     background: transparent;
-    color: var(--claude-accent);
+    color: var(--claude-text);
     cursor: pointer;
     pointer-events: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: none;
+    flex-shrink: 0;
 }
 
 .mobile-panel-fab img {
@@ -221,6 +234,20 @@
     background: rgba(255, 255, 255, 0.35);
     backdrop-filter: blur(10px);
     box-shadow: 0 12px 30px rgba(38, 28, 18, 0.15);
+    align-self: flex-start;
+}
+
+.mobile-topbar-title {
+    flex: 0 0 50%;
+    max-width: 50%;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--claude-text);
+    margin-left: auto;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mobile-menu-btn {
@@ -269,7 +296,7 @@
     inset: 0;
     background: rgba(16, 11, 7, 0.45);
     backdrop-filter: blur(6px);
-    z-index: 1400;
+    z-index: 2000;
     display: flex;
     align-items: stretch;
     padding: 0;

static/src/styles/components/panels/_left-panel.scss

@@ -12,6 +12,12 @@
     background: rgba(218, 119, 86, 0.22);
 }
 
+.workspace-region {
+    display: flex;
+    align-items: stretch;
+    flex-shrink: 0;
+}
+
 /* 侧边栏 */
 .sidebar {
     background: var(--claude-left-rail);
@@ -23,6 +29,32 @@
 .sidebar.left-sidebar {
     display: flex;
     flex-direction: column;
+    transition:
+        width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+        min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.35s ease,
+        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.workspace-panel {
+    flex: 0 0 auto;
+    will-change: width, transform, opacity;
+    transition:
+        width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+        min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.35s ease,
+        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.workspace-panel--collapsed {
+    flex: 0 0 0 !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    opacity: 0;
+    transform: translateY(-70px);
+    overflow: hidden;
+    pointer-events: none;
 }
 
 .sidebar-status {

static/src/styles/components/sidebar/_conversation.scss

@@ -62,6 +62,72 @@
     border-bottom: none;
 }
 
+.workspace-immersive-toggle {
+    padding: 12px 16px 8px;
+    background-color: inherit;
+}
+
+.workspace-immersive-toggle.collapsed {
+    padding: 12px 0 8px;
+    display: flex;
+    justify-content: center;
+}
+
+.workspace-immersive-btn {
+    width: 100%;
+    border: none;
+    border-radius: 12px;
+    background: transparent;
+    color: var(--claude-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 14px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.workspace-immersive-btn .workspace-immersive-icon {
+    width: 22px;
+    height: 22px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.workspace-immersive-btn .workspace-immersive-icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.workspace-immersive-btn .workspace-immersive-label {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.workspace-immersive-btn:hover,
+.workspace-immersive-btn:focus-visible {
+    color: var(--claude-accent);
+    outline: none;
+}
+
+.workspace-immersive-btn.active {
+    color: var(--claude-accent);
+}
+
+.workspace-immersive-toggle.collapsed .workspace-immersive-btn {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    padding: 8px;
+}
+
+.workspace-immersive-toggle.collapsed .workspace-immersive-btn .workspace-immersive-label {
+    display: none;
+}
+
 .collapsed-header-buttons {
     display: flex;
     flex-direction: column;