From 5fb6af8cb8b0c6d3a48e2281c9a0a21bb10089de Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Fri, 1 May 2026 21:39:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(workspace):=20=E5=A2=9E=E5=BC=BA=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=85=B3=E9=97=AD=E5=92=8C=E6=8A=98=E5=8F=A0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AgentFilePreview.vue       | 19 ++++++++++++++++---
 web/src/components/AgentPanel.vue             |  1 +
 .../workspace/WorkspacePreviewPane.vue        |  1 +
 .../components/workspace/WorkspaceSidebar.vue |  2 +-
 web/src/views/WorkspaceView.vue               | 12 ++++++++++--
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/src/components/AgentFilePreview.vue b/web/src/components/AgentFilePreview.vue
index 9fd0956d..66163af2 100644
--- a/web/src/components/AgentFilePreview.vue
+++ b/web/src/components/AgentFilePreview.vue
@@ -79,8 +79,14 @@
         >
           <Maximize2 :size="18" />
         </button>
-        <button v-if="showClose" class="modal-action-btn" @click="$emit('close')" title="关闭">
-          <X :size="18" />
+        <button
+          v-if="showClose"
+          class="modal-action-btn"
+          @click="$emit('close')"
+          :title="closeTitle"
+          :aria-label="closeTitle"
+        >
+          <component :is="closeIconComponent" :size="18" />
         </button>
       </div>
     </div>
@@ -234,7 +240,7 @@
 
 <script setup>
 import { computed, onUnmounted, ref, watch } from 'vue'
-import { Code2, Download, Eye, Globe, Maximize2, Pencil, Save, X } from 'lucide-vue-next'
+import { Code2, Download, Eye, Globe, Maximize2, PanelRightClose, Pencil, Save, X } from 'lucide-vue-next'
 import { MdPreview } from 'md-editor-v3'
 import hljs from 'highlight.js/lib/common'
 import 'md-editor-v3/lib/preview.css'
@@ -274,6 +280,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  closeVariant: {
+    type: String,
+    default: 'close',
+    validator: (value) => ['close', 'collapse-right'].includes(value)
+  },
   fullHeight: {
     type: Boolean,
     default: false
@@ -300,6 +311,8 @@ const emit = defineEmits(['close', 'download', 'save'])
 
 const themeStore = useThemeStore()
 const theme = computed(() => (themeStore.isDark ? 'dark' : 'light'))
+const closeTitle = computed(() => (props.closeVariant === 'collapse-right' ? '收起预览面板' : '关闭预览'))
+const closeIconComponent = computed(() => (props.closeVariant === 'collapse-right' ? PanelRightClose : X))
 const htmlPreviewMode = ref('render')
 const editMode = ref('preview')
 const draftContent = ref('')
diff --git a/web/src/components/AgentPanel.vue b/web/src/components/AgentPanel.vue
index 618f8e51..db8309b0 100644
--- a/web/src/components/AgentPanel.vue
+++ b/web/src/components/AgentPanel.vue
@@ -82,6 +82,7 @@
               :filePath="currentFilePath"
               :fullHeight="true"
               :showClose="true"
+              closeVariant="collapse-right"
               :showDownload="true"
               :showFullscreen="true"
               @download="downloadFile"
diff --git a/web/src/components/workspace/WorkspacePreviewPane.vue b/web/src/components/workspace/WorkspacePreviewPane.vue
index 37d24fe2..697c6867 100644
--- a/web/src/components/workspace/WorkspacePreviewPane.vue
+++ b/web/src/components/workspace/WorkspacePreviewPane.vue
@@ -6,6 +6,7 @@
       :file-path="filePath"
       :show-download="false"
       :show-close="true"
+      close-variant="collapse-right"
       :show-fullscreen="true"
       :full-height="true"
       :editable="editable"
diff --git a/web/src/components/workspace/WorkspaceSidebar.vue b/web/src/components/workspace/WorkspaceSidebar.vue
index 832e3dff..be6a542c 100644
--- a/web/src/components/workspace/WorkspaceSidebar.vue
+++ b/web/src/components/workspace/WorkspaceSidebar.vue
@@ -95,7 +95,7 @@ defineEmits(['select-personal', 'select-database', 'select-path'])
   min-width: 0;
   padding: 14px 10px;
   border-right: 1px solid var(--gray-100);
-  background: var(--gray-25);
+  background: var(--gray-0);
   overflow-y: auto;
 }
 
diff --git a/web/src/views/WorkspaceView.vue b/web/src/views/WorkspaceView.vue
index aa485bed..82704842 100644
--- a/web/src/views/WorkspaceView.vue
+++ b/web/src/views/WorkspaceView.vue
@@ -566,12 +566,20 @@ onUnmounted(() => {
   revokePreviewObjectUrl()
 })
 
-watch(useInlinePreview, (isInline) => {
+watch(useInlinePreview, (isInline, wasInline) => {
   if (!previewFile.value) {
     previewModalVisible.value = false
     return
   }
-  previewModalVisible.value = !isInline
+
+  if (isInline) {
+    previewModalVisible.value = false
+    return
+  }
+
+  if (wasInline) {
+    closePreview()
+  }
 })
 </script>