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>