fix: FilePreview iframe高度撑满 + 手机端响应式布局

src/components/FilePreview.vue

@@ -37,17 +37,17 @@
     <!-- Preview content -->
     <div class="flex-1 overflow-auto 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">
+      <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;">
         <iframe
           ref="iframeRef"
           :srcdoc="content"
-          class="w-full h-full min-h-[500px]"
+          class="w-full flex-1"
           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">
+      <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-html="renderedMarkdown"></div>
       </div>
 
@@ -56,7 +56,7 @@
         <iframe
           v-if="pdfUrl"
           :src="pdfUrl"
-          class="w-full flex-1 min-h-[500px]"
+          class="w-full flex-1"
           type="application/pdf"
         ></iframe>
         <div v-else class="flex items-center justify-center h-full">

src/pages/ProjectDetail.vue

@@ -3,7 +3,9 @@
     <!-- Main Content -->
     <main class="relative z-10 flex h-screen overflow-hidden">
       <!-- Left: Glass Sidebar with Reports List -->
-      <div class="w-[400px] glass-light border-r border-orange-200/50 flex flex-col shadow-2xl">
+      <!-- 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 }">
         <!-- Header -->
         <div class="bg-white/80 backdrop-blur-xl border-b border-orange-200/50 p-6">
           <router-link
@@ -78,7 +80,20 @@
       </div>
 
       <!-- Right: File Preview -->
-      <div class="flex-1 flex flex-col bg-white/50">
+      <!-- Mobile: show only when report selected, with back button -->
+      <div class="flex-1 flex flex-col bg-white/50"
+           :class="{ 'hidden md:flex': !selectedReport }">
+        <!-- Mobile back button -->
+        <button
+          v-if="selectedReport"
+          @click="selectedReport = null"
+          class="md:hidden flex items-center space-x-2 px-4 py-3 text-orange-500 hover:text-orange-600 border-b border-orange-200/50"
+        >
+          <svg class="w-5 h-5" 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>
+          <span>返回列表</span>
+        </button>
         <FilePreview :report="selectedReport" :content="reportContent" />
       </div>
     </main>