fix: ProjectDetail sidebar layout - 1/4 collapsible, preview full height

src/components/FilePreview.vue

@@ -34,29 +34,29 @@
       </div>
     </div>
 
-    <!-- Preview content -->
-    <div class="flex-1 overflow-auto p-6 bg-slate-50/50">
+      <!-- Preview content -->
+    <div class="flex-1 overflow-auto p-4 md:p-6 bg-slate-50/50">
       <!-- HTML Preview -->
-      <div v-if="normalizedFileType === 'html'" class="bg-white rounded-2xl shadow-xl overflow-hidden border border-orange-200/30 flex flex-col" style="min-height: 500px;">
+      <div v-if="normalizedFileType === 'html'" class="bg-white rounded-2xl shadow-xl overflow-hidden border border-orange-200/30 flex flex-col h-full min-h-[500px]">
         <iframe
           ref="iframeRef"
           :srcdoc="content"
-          class="w-full flex-1"
+          class="w-full h-full"
           sandbox="allow-same-origin"
         ></iframe>
       </div>
 
       <!-- Markdown Preview -->
-      <div v-else-if="normalizedFileType === 'md'" class="bg-white rounded-2xl shadow-xl p-8 border border-orange-200/30 prose max-w-none prose-orange flex-1 overflow-auto" style="min-height: 500px;">
+      <div v-else-if="normalizedFileType === 'md'" class="bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-orange-200/30 prose max-w-none prose-orange overflow-auto h-full min-h-[500px]">
         <div v-html="renderedMarkdown"></div>
       </div>
 
       <!-- PPTX Preview (PDF iframe) -->
-      <div v-else-if="normalizedFileType === 'pptx'" class="bg-white rounded-2xl shadow-xl overflow-hidden h-full flex flex-col border border-orange-200/30">
+      <div v-else-if="normalizedFileType === 'pptx'" class="bg-white rounded-2xl shadow-xl overflow-hidden h-full flex flex-col border border-orange-200/30 min-h-[500px]">
         <iframe
           v-if="pdfUrl"
           :src="pdfUrl"
-          class="w-full flex-1"
+          class="w-full h-full"
           type="application/pdf"
         ></iframe>
         <div v-else class="flex items-center justify-center h-full">

src/pages/ProjectDetail.vue

@@ -2,10 +2,23 @@
   <div class="min-h-screen bg-gradient-to-br from-orange-100 via-orange-200 to-amber-100">
     <!-- Main Content -->
     <main class="relative z-10 flex h-screen overflow-hidden">
-      <!-- Left: Glass Sidebar with Reports List -->
-      <!-- Mobile: show only list, hide when preview is selected -->
-      <div class="w-full md:w-[400px] flex-1 flex flex-col glass-light border-r border-orange-200/50 shadow-2xl overflow-y-auto"
-           :class="{ 'hidden md:flex': selectedReport }">
+      <!-- Left: Glass Sidebar with Reports List (1/4 width, collapsible) -->
+      <div class="relative flex flex-col glass-light border-r border-orange-200/50 shadow-2xl transition-all duration-300"
+           :class="[
+             sidebarCollapsed ? 'w-0' : 'w-1/4 min-w-[220px]',
+             selectedReport && !sidebarCollapsed ? 'hidden md:flex' : '',
+             !selectedReport ? 'flex' : ''
+           ]">
+        <!-- Collapse toggle (always visible when sidebar is open) -->
+        <button
+          v-show="!sidebarCollapsed"
+          @click="sidebarCollapsed = true"
+          class="absolute top-4 -right-3 z-20 w-6 h-6 bg-white/90 border border-orange-200 rounded-full shadow-md flex items-center justify-center hover:bg-orange-50 transition-colors"
+        >
+          <svg class="w-3 h-3 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
         <!-- Header -->
         <div class="bg-white/80 backdrop-blur-xl border-b border-orange-200/50 p-6">
           <router-link
@@ -79,10 +92,20 @@
         </div>
       </div>
 
-      <!-- Right: File Preview -->
-      <!-- Mobile: show only when report selected, with back button -->
+      <!-- Right: File Preview (fills remaining space) -->
       <div class="flex-1 flex flex-col bg-white/50"
            :class="{ 'hidden md:flex': !selectedReport }">
+        <!-- Expand sidebar button (visible when sidebar is collapsed) -->
+        <button
+          v-if="sidebarCollapsed && !selectedReport"
+          @click="sidebarCollapsed = false"
+          class="absolute top-4 left-4 z-20 flex items-center space-x-1 px-3 py-1.5 bg-white/90 border border-orange-200 rounded-lg shadow-md hover:bg-orange-50 transition-colors"
+        >
+          <svg class="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+          <span class="text-sm text-orange-600 font-medium">展开列表</span>
+        </button>
         <!-- Mobile back button -->
         <button
           v-if="selectedReport"
@@ -94,7 +117,7 @@
           </svg>
           <span>返回列表</span>
         </button>
-        <FilePreview :report="selectedReport" :content="reportContent" />
+        <FilePreview :report="selectedReport" :content="reportContent" class="flex-1" />
       </div>
     </main>
   </div>
@@ -115,6 +138,7 @@ const reports = ref([])
 const selectedReport = ref(null)
 const reportContent = ref('')
 const editing = ref(false)
+const sidebarCollapsed = ref(false)
 const editName = ref('')
 const coverImageFile = ref(null)
 const coverImagePreview = ref('')