From 4563fad2d93e502255706df5d7dd9aab51f56661 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Thu, 27 Nov 2025 18:42:08 +0800
Subject: [PATCH] feat: enhance workspace toggle and mobile topbar

---
 static/icons/layers.svg                       |   1 +
 static/src/App.vue                            |  60 ++--
 static/src/app.ts                             |  13 +
 static/src/components/chat/ChatArea.vue       | 259 +++++++++---------
 static/src/components/panels/LeftPanel.vue    |  18 +-
 .../sidebar/ConversationSidebar.vue           |  23 +-
 static/src/stores/ui.ts                       |   8 +
 .../styles/components/chat/_chat-area.scss    |  19 ++
 .../styles/components/overlays/_overlays.scss |  43 ++-
 .../styles/components/panels/_left-panel.scss |  32 +++
 .../components/sidebar/_conversation.scss     |  66 +++++
 11 files changed, 380 insertions(+), 162 deletions(-)
 create mode 100644 static/icons/layers.svg

diff --git a/static/icons/layers.svg b/static/icons/layers.svg
new file mode 100644
index 0000000..a36c416
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/src/App.vue b/static/src/App.vue
index 383194c..5a30ab6 100644
--- a/static/src/App.vue
+++ b/static/src/App.vue
@@ -50,26 +50,41 @@
           @personal="openPersonalPage"
           @delete="deleteConversation"
           @duplicate="duplicateConversation"
+          @toggle-workspace="handleWorkspaceToggle"
         />
 
-        <LeftPanel
-          v-if="!isMobileViewport"
-          ref="leftPanel"
-          :width="leftWidth"
-          :icon-style="iconStyle"
-          :agent-version="agentVersion"
-          :thinking-mode="thinkingMode"
-          :is-connected="isConnected"
-          :panel-menu-open="panelMenuOpen"
-          :panel-mode="panelMode"
-          @toggle-panel-menu="togglePanelMenu"
-          @select-panel="selectPanelMode"
-          @open-file-manager="openGuiFileManager"
-        />
+        <div v-if="!isMobileViewport" class="workspace-region">
+          <LeftPanel
+            ref="leftPanel"
+            class="workspace-panel"
+            :class="{ 'workspace-panel--collapsed': workspaceCollapsed }"
+            :width="leftWidth"
+            :collapsed="workspaceCollapsed"
+            :icon-style="iconStyle"
+            :agent-version="agentVersion"
+            :thinking-mode="thinkingMode"
+            :is-connected="isConnected"
+            :panel-menu-open="panelMenuOpen"
+            :panel-mode="panelMode"
+            @toggle-panel-menu="togglePanelMenu"
+            @select-panel="selectPanelMode"
+            @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">
-          <img :src="mobilePanelIcon" alt="" aria-hidden="true" />
-        </button>
+        <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)"
diff --git a/static/src/app.ts b/static/src/app.ts
index eef6f1a..21dcbac 100644
--- a/static/src/app.ts
+++ b/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',
diff --git a/static/src/components/chat/ChatArea.vue b/static/src/components/chat/ChatArea.vue
index ef900de..8d60989 100644
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@@ -1,161 +1,158 @@
 <template>
   <div class="messages-area" ref="rootEl">
-    <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">
-          <span class="icon icon-sm" :style="iconStyleSafe('user')" aria-hidden="true"></span>
-          <span>用户</span>
+    <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">
+            <span class="icon icon-sm" :style="iconStyleSafe('user')" aria-hidden="true"></span>
+            <span>用户</span>
+          </div>
+          <div class="message-text">{{ msg.content }}</div>
         </div>
-        <div class="message-text">{{ msg.content }}</div>
-      </div>
-      <div v-else-if="msg.role === 'assistant'" class="assistant-message">
-        <div class="message-header icon-label">
-          <span class="icon icon-sm" :style="iconStyleSafe('bot')" aria-hidden="true"></span>
-          <span>AI Assistant</span>
-        </div>
-        <div
-          v-for="(action, actionIndex) in msg.actions || []"
-          :key="action.id || `${index}-${actionIndex}`"
-          class="action-item"
-          :class="{
-            'streaming-content': action.streaming,
-            'completed-tool': action.type === 'tool' && !action.streaming,
-            'immediate-show': action.streaming || action.type === 'text'
-          }"
-        >
+        <div v-else-if="msg.role === 'assistant'" class="assistant-message">
+          <div class="message-header icon-label">
+            <span class="icon icon-sm" :style="iconStyleSafe('bot')" aria-hidden="true"></span>
+            <span>AI Assistant</span>
+          </div>
           <div
-            v-if="action.type === 'thinking'"
-            class="collapsible-block thinking-block"
+            v-for="(action, actionIndex) in msg.actions || []"
+            :key="action.id || `${index}-${actionIndex}`"
+            class="action-item"
             :class="{
-              expanded: expandedBlocks?.has(action.blockId || `${index}-thinking-${actionIndex}`)
+              'streaming-content': action.streaming,
+              'completed-tool': action.type === 'tool' && !action.streaming,
+              'immediate-show': action.streaming || action.type === 'text'
             }"
           >
             <div
-              class="collapsible-header"
-              @click="toggleBlock(action.blockId || `${index}-thinking-${actionIndex}`)"
+              v-if="action.type === 'thinking'"
+              class="collapsible-block thinking-block"
+              :class="{ expanded: expandedBlocks?.has(action.blockId || `${index}-thinking-${actionIndex}`) }"
             >
-              <div class="arrow"></div>
-              <div class="status-icon">
-                <span class="thinking-icon" :class="{ 'thinking-animation': action.streaming }">
-                  <span class="icon icon-sm" :style="iconStyleSafe('brain')" aria-hidden="true"></span>
-                </span>
+              <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 }">
+                    <span class="icon icon-sm" :style="iconStyleSafe('brain')" aria-hidden="true"></span>
+                  </span>
+                </div>
+                <span class="status-text">{{ action.streaming ? '正在思考...' : '思考过程' }}</span>
               </div>
-              <span class="status-text">{{ action.streaming ? '正在思考...' : '思考过程' }}</span>
+              <div class="collapsible-content">
+                <div
+                  class="content-inner thinking-content"
+                  :ref="el => registerThinkingRef(action.blockId || `${index}-thinking-${actionIndex}`, el)"
+                  @scroll="
+                    handleThinkingScroll(
+                      action.blockId || `${index}-thinking-${actionIndex}`,
+                      $event
+                    )
+                  "
+                  style="max-height: 240px; overflow-y: auto;"
+                >
+                  {{ action.content }}
+                </div>
+              </div>
+              <div v-if="action.streaming" class="progress-indicator"></div>
             </div>
-            <div class="collapsible-content">
-              <div
-                class="content-inner thinking-content"
-                :ref="el => registerThinkingRef(action.blockId || `${index}-thinking-${actionIndex}`, el)"
-                @scroll="
-                  handleThinkingScroll(
-                    action.blockId || `${index}-thinking-${actionIndex}`,
-                    $event
-                  )
-                "
-                style="max-height: 240px; overflow-y: auto;"
-              >
+
+            <div v-else-if="action.type === 'text'" class="text-output">
+              <div class="text-content" :class="{ 'streaming-text': action.streaming }">
+                <div v-if="action.streaming" v-html="renderMarkdown(action.content, true)"></div>
+                <div v-else v-html="renderMarkdown(action.content, false)"></div>
+              </div>
+            </div>
+
+            <div v-else-if="action.type === 'system'" class="system-action">
+              <div class="system-action-content">
                 {{ action.content }}
               </div>
             </div>
-            <div v-if="action.streaming" class="progress-indicator"></div>
-          </div>
 
-          <div v-else-if="action.type === 'text'" class="text-output">
-            <div class="text-content" :class="{ 'streaming-text': action.streaming }">
-              <div v-if="action.streaming" v-html="renderMarkdown(action.content, true)"></div>
-              <div v-else v-html="renderMarkdown(action.content, false)"></div>
+            <div
+              v-else-if="action.type === 'append_payload'"
+              class="append-placeholder"
+              :class="{ 'append-error': action.append?.success === false }"
+            >
+              <div class="append-placeholder-content">
+                <template v-if="action.append?.success !== false">
+                  <div class="icon-label append-status">
+                    <span class="icon icon-sm" :style="iconStyleSafe('pencil')" aria-hidden="true"></span>
+                    <span>已写入 {{ action.append?.path || '目标文件' }} 的追加内容（内容已保存至文件）</span>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="icon-label append-status append-error-text">
+                    <span class="icon icon-sm" :style="iconStyleSafe('x')" aria-hidden="true"></span>
+                    <span>向 {{ action.append?.path || '目标文件' }} 写入失败，内容已截获供后续修复。</span>
+                  </div>
+                </template>
+                <div class="append-meta" v-if="action.append">
+                  <span v-if="action.append.lines !== null && action.append.lines !== undefined">
+                    · 行数 {{ action.append.lines }}
+                  </span>
+                  <span v-if="action.append.bytes !== null && action.append.bytes !== undefined">
+                    · 字节 {{ action.append.bytes }}
+                  </span>
+                </div>
+                <div class="append-warning icon-label" v-if="action.append?.forced">
+                  <span class="icon icon-sm" :style="iconStyleSafe('triangleAlert')" aria-hidden="true"></span>
+                  <span>未检测到结束标记，请根据提示继续补充。</span>
+                </div>
+              </div>
             </div>
-          </div>
 
-          <div v-else-if="action.type === 'system'" class="system-action">
-            <div class="system-action-content">
-              {{ action.content }}
-            </div>
-          </div>
-
-          <div
-            v-else-if="action.type === 'append_payload'"
-            class="append-placeholder"
-            :class="{ 'append-error': action.append?.success === false }"
-          >
-            <div class="append-placeholder-content">
-              <template v-if="action.append?.success !== false">
+            <div
+              v-else-if="action.type === 'append'"
+              class="append-placeholder"
+              :class="{ 'append-error': action.append?.success === false }"
+            >
+              <div class="append-placeholder-content">
                 <div class="icon-label append-status">
                   <span class="icon icon-sm" :style="iconStyleSafe('pencil')" aria-hidden="true"></span>
-                  <span>已写入 {{ action.append?.path || '目标文件' }} 的追加内容（内容已保存至文件）</span>
+                  <span>{{ action.append?.summary || '文件追加完成' }}</span>
                 </div>
-              </template>
-              <template v-else>
-                <div class="icon-label append-status append-error-text">
-                  <span class="icon icon-sm" :style="iconStyleSafe('x')" aria-hidden="true"></span>
-                  <span>向 {{ action.append?.path || '目标文件' }} 写入失败，内容已截获供后续修复。</span>
+                <div class="append-meta" v-if="action.append">
+                  <span>{{ action.append.path || '目标文件' }}</span>
+                  <span v-if="action.append.lines">· 行数 {{ action.append.lines }}</span>
+                  <span v-if="action.append.bytes">· 字节 {{ action.append.bytes }}</span>
+                </div>
+                <div class="append-warning icon-label" v-if="action.append?.forced">
+                  <span class="icon icon-sm" :style="iconStyleSafe('triangleAlert')" aria-hidden="true"></span>
+                  <span>未检测到结束标记，请按提示继续补充。</span>
                 </div>
-              </template>
-              <div class="append-meta" v-if="action.append">
-                <span v-if="action.append.lines !== null && action.append.lines !== undefined">
-                  · 行数 {{ action.append.lines }}
-                </span>
-                <span v-if="action.append.bytes !== null && action.append.bytes !== undefined">
-                  · 字节 {{ action.append.bytes }}
-                </span>
-              </div>
-              <div class="append-warning icon-label" v-if="action.append?.forced">
-                <span class="icon icon-sm" :style="iconStyleSafe('triangleAlert')" aria-hidden="true"></span>
-                <span>未检测到结束标记，请根据提示继续补充。</span>
               </div>
             </div>
-          </div>
 
-          <div
-            v-else-if="action.type === 'append'"
-            class="append-placeholder"
-            :class="{ 'append-error': action.append?.success === false }"
-          >
-            <div class="append-placeholder-content">
-              <div class="icon-label append-status">
-                <span class="icon icon-sm" :style="iconStyleSafe('pencil')" aria-hidden="true"></span>
-                <span>{{ action.append?.summary || '文件追加完成' }}</span>
-              </div>
-              <div class="append-meta" v-if="action.append">
-                <span>{{ action.append.path || '目标文件' }}</span>
-                <span v-if="action.append.lines">· 行数 {{ action.append.lines }}</span>
-                <span v-if="action.append.bytes">· 字节 {{ action.append.bytes }}</span>
-              </div>
-              <div class="append-warning icon-label" v-if="action.append?.forced">
-                <span class="icon icon-sm" :style="iconStyleSafe('triangleAlert')" aria-hidden="true"></span>
-                <span>未检测到结束标记，请按提示继续补充。</span>
-              </div>
-            </div>
+            <ToolAction
+              v-else-if="action.type === 'tool'"
+              :action="action"
+              :expanded="expandedBlocks?.has(action.blockId || `${index}-tool-${actionIndex}`)"
+              :icon-style="iconStyleSafe"
+              :get-tool-animation-class="getToolAnimationClass"
+              :get-tool-icon="getToolIcon"
+              :get-tool-status-text="getToolStatusText"
+              :get-tool-description="getToolDescription"
+              :format-search-topic="formatSearchTopic"
+              :format-search-time="formatSearchTime"
+              :streaming-message="streamingMessage"
+              @toggle="toggleBlock(action.blockId || `${index}-tool-${actionIndex}`)"
+            />
           </div>
-
-          <ToolAction
-            v-else-if="action.type === 'tool'"
-            :action="action"
-            :expanded="expandedBlocks?.has(action.blockId || `${index}-tool-${actionIndex}`)"
-            :icon-style="iconStyleSafe"
-            :get-tool-animation-class="getToolAnimationClass"
-            :get-tool-icon="getToolIcon"
-            :get-tool-status-text="getToolStatusText"
-            :get-tool-description="getToolDescription"
-            :format-search-topic="formatSearchTopic"
-            :format-search-time="formatSearchTime"
-            :streaming-message="streamingMessage"
-            @toggle="toggleBlock(action.blockId || `${index}-tool-${actionIndex}`)"
-          />
         </div>
-      </div>
-      <div v-else class="system-message">
-        <div class="collapsible-block system-block" :class="{ expanded: expandedBlocks?.has(`system-${index}`) }">
-          <div class="collapsible-header" @click="toggleBlock(`system-${index}`)">
-            <div class="arrow"></div>
-            <div class="status-icon">
-              <span class="tool-icon icon icon-md" :style="iconStyleSafe('info')" aria-hidden="true"></span>
+        <div v-else class="system-message">
+          <div class="collapsible-block system-block" :class="{ expanded: expandedBlocks?.has(`system-${index}`) }">
+            <div class="collapsible-header" @click="toggleBlock(`system-${index}`)">
+              <div class="arrow"></div>
+              <div class="status-icon">
+                <span class="tool-icon icon icon-md" :style="iconStyleSafe('info')" aria-hidden="true"></span>
+              </div>
+              <span class="status-text">系统消息</span>
             </div>
-            <span class="status-text">系统消息</span>
-          </div>
-          <div class="collapsible-content">
-            <div class="content-inner">
-              {{ msg.content }}
+            <div class="collapsible-content">
+              <div class="content-inner">
+                {{ msg.content }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/static/src/components/panels/LeftPanel.vue b/static/src/components/panels/LeftPanel.vue
index 490c5d8..17795df 100644
--- a/static/src/components/panels/LeftPanel.vue
+++ b/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);
diff --git a/static/src/components/sidebar/ConversationSidebar.vue b/static/src/components/sidebar/ConversationSidebar.vue
index 4f29978..48173e9 100644
--- a/static/src/components/sidebar/ConversationSidebar.vue
+++ b/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>
diff --git a/static/src/stores/ui.ts b/static/src/stores/ui.ts
index ec2cf92..c681341 100644
--- a/static/src/stores/ui.ts
+++ b/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;
     },
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index f29cbfb..ec913d8 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/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;
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index b5dcd41..11b2b46 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/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;
diff --git a/static/src/styles/components/panels/_left-panel.scss b/static/src/styles/components/panels/_left-panel.scss
index 45581f6..568c149 100644
--- a/static/src/styles/components/panels/_left-panel.scss
+++ b/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 {
diff --git a/static/src/styles/components/sidebar/_conversation.scss b/static/src/styles/components/sidebar/_conversation.scss
index 9aa79ab..c936f4b 100644
--- a/static/src/styles/components/sidebar/_conversation.scss
+++ b/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;