From 69f97e1bac69a38a7d326d2e4850f15593262caa Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Sat, 4 Jul 2026 10:24:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(file):=20=E9=87=8D=E6=9E=84=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E5=88=86=E6=A0=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现共享文件标签页的左右分栏布局，左侧显示文件列表，右侧显示文件预览
- 添加拖拽分隔条功能，支持调整左右面板宽度比例
- 为共享文件添加文件预览功能，支持图片、PDF、Word、Excel等多种格式
- 实现文件评论系统，支持查看和发布评论
- 优化表格交互，在共享文件标签页点击行可选中文件并显示预览
- 添加浏览次数统计功能，点击预览时自动增加浏览量
- 调整文件列表列显示逻辑，根据不同标签页显示相应字段
- 添加文件详情预览面板，显示文件元数据信息
- 实现评论区域展开收起功能，优化界面空间利用
-
---
 klp-ui/src/views/system/file/index.vue | 748 +++++++++++++++++++------
 1 file changed, 570 insertions(+), 178 deletions(-)

diff --git a/klp-ui/src/views/system/file/index.vue b/klp-ui/src/views/system/file/index.vue
index cd40b66d1..4b59baafb 100644
--- a/klp-ui/src/views/system/file/index.vue
+++ b/klp-ui/src/views/system/file/index.vue
@@ -35,179 +35,258 @@
       <el-tab-pane label="与我相关" name="related"></el-tab-pane>
     </el-tabs>
 
-    <!-- 搜索栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="文件名称" prop="fileName">
-        <el-input
-          v-model="queryParams.fileName"
-          placeholder="请输入文件名称"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="订单编号" prop="orderNo">
-        <el-input
-          v-model="queryParams.orderNo"
-          placeholder="请输入订单编号"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="所属部门" prop="dept">
-        <el-input
-          v-model="queryParams.dept"
-          placeholder="请输入部门"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="文件类型" prop="fileType">
-        <el-select
-          v-model="queryParams.fileType"
-          placeholder="请选择文件类型"
-          clearable
-          style="width: 200px"
-        >
-          <el-option
-            v-for="item in dict.type.sys_file_type"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="可见范围" prop="scopeType" v-if="activeTab !== 'share' && activeTab !== 'related'">
-        <el-select
-          v-model="queryParams.scopeType"
-          placeholder="请选择可见范围"
-          clearable
-          style="width: 200px"
-        >
-          <el-option label="公开" :value="1" />
-          <el-option label="私有" :value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="上传时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- 左右分栏布局 -->
+    <div class="file-layout" ref="layoutContainer">
+      <!-- 左侧：文件列表 -->
+      <div class="file-left" :style="{ width: activeTab === 'share' ? leftPanelWidth : '100%' }">
+        <!-- 搜索栏 -->
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+          <el-form-item label="文件名称" prop="fileName">
+            <el-input
+              v-model="queryParams.fileName"
+              placeholder="请输入文件名称"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="订单编号" prop="orderNo">
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="请输入订单编号"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="所属部门" prop="dept">
+            <el-input
+              v-model="queryParams.dept"
+              placeholder="请输入部门"
+              clearable
+              style="width: 200px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="文件类型" prop="fileType">
+            <el-select
+              v-model="queryParams.fileType"
+              placeholder="请选择文件类型"
+              clearable
+              style="width: 200px"
+            >
+              <el-option
+                v-for="item in dict.type.sys_file_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="可见范围" prop="scopeType" v-if="activeTab !== 'share' && activeTab !== 'related'">
+            <el-select
+              v-model="queryParams.scopeType"
+              placeholder="请选择可见范围"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="公开" :value="1" />
+              <el-option label="私有" :value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="上传时间">
+            <el-date-picker
+              v-model="dateRange"
+              style="width: 240px"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-    <!-- 操作按钮 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >上传文件</el-button>
-      </el-col>
-      <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+        <!-- 操作按钮 -->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+            >上传文件</el-button>
+          </el-col>
+          <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <!-- 文件列表表格 -->
-    <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
-      <el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <el-link type="primary" @click="handlePreview(scope.row)">{{ scope.row.fileName }}</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="文件类型" align="center" prop="fileType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_file_type" :value="scope.row.fileType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="文件大小" align="center" prop="fileSize">
-        <template slot-scope="scope">
-          {{ formatFileSize(scope.row.fileSize) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" />
-      <el-table-column label="所属部门" align="center" prop="dept" :show-overflow-tooltip="true" />
-      <el-table-column label="可见范围" align="center" prop="scopeType">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.scopeType === 1 ? 'success' : 'warning'" size="small">
-            {{ scope.row.scopeType === 1 ? '公开' : '私有' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="上传人" align="center" prop="createBy" />
-      <el-table-column label="上传时间" align="center" prop="createTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handlePreview(scope.row)"
-          >预览</el-button>
-          <el-button
-            v-if="canEdit(scope.row)"
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >编辑</el-button>
-          <el-button
-            v-if="canEdit(scope.row)"
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
+        <!-- 文件列表表格 -->
+        <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share'" @row-click="handleRowClick">
+          <el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
+          <el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <el-link type="primary" @click="handlePreview(scope.row)">{{ scope.row.fileName }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="文件类型" align="center" prop="fileType" v-if="activeTab !== 'share'">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_file_type" :value="scope.row.fileType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="文件大小" align="center" prop="fileSize" v-if="activeTab !== 'share'">
+            <template slot-scope="scope">
+              {{ formatFileSize(scope.row.fileSize) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
+          <el-table-column label="所属部门" align="center" prop="dept" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
+          <el-table-column label="可见范围" align="center" prop="scopeType" v-if="activeTab !== 'share'">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.scopeType === 1 ? 'success' : 'warning'" size="small">
+                {{ scope.row.scopeType === 1 ? '公开' : '私有' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="上传人" align="center" prop="createBy" />
+          <el-table-column label="上传时间" align="center" prop="createTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="浏览次数" align="center" width="90" v-if="activeTab === 'share'">
+            <template slot-scope="scope">
+              <span>{{ scope.row.viewCount != null ? scope.row.viewCount : 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
+          <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" v-if="activeTab !== 'share'">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-view"
+                @click="handlePreview(scope.row)"
+              >预览</el-button>
+              <el-button
+                v-if="canEdit(scope.row)"
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+              >编辑</el-button>
+              <el-button
+                v-if="canEdit(scope.row)"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </KLPTable>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+
+      <!-- 拖拽分隔条（仅共享文件 tab） -->
+      <div class="resize-handle" v-if="activeTab === 'share'" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
+
+      <!-- 右侧：文件预览（仅共享文件 tab） -->
+      <div class="file-right" v-if="activeTab === 'share'">
+        <div class="preview-panel">
+          <div v-if="!selectedFile" class="preview-empty">
+            <el-empty description="请选择左侧文件进行预览" />
+          </div>
+          <template v-else>
+            <div class="preview-header">
+              <span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
+              <div>
+                <el-button size="mini" type="primary" icon="el-icon-download" @click="downloadFile(selectedFile)">下载</el-button>
+                <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(selectedFile)">编辑</el-button>
+                <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
+              </div>
+            </div>
+            <div class="preview-meta">
+              <span>{{ formatFileSize(selectedFile.fileSize) }}</span>
+              <dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType" />
+              <span>{{ selectedFile.createBy }}</span>
+              <span>{{ parseTime(selectedFile.createTime) }}</span>
+            </div>
+            <div class="preview-comment">
+              <div class="comment-bar" @click="commentExpanded = !commentExpanded">
+                <span><i class="el-icon-chat-dot-round"></i> 评论 ({{ comments.length }})</span>
+                <span class="comment-toggle">{{ commentExpanded ? '收起' : '展开' }} <i :class="commentExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
+              </div>
+              <div v-show="commentExpanded" class="comment-body">
+                <div v-if="commentLoading" class="comment-hint"><i class="el-icon-loading"></i> 加载中...</div>
+                <div v-else-if="comments.length === 0" class="comment-hint comment-empty">暂无评论</div>
+                <div v-else class="comment-list">
+                  <div v-for="item in comments" :key="item.commentId" class="comment-item">
+                    <div class="comment-meta">
+                      <span class="comment-dept">{{ item.dept }}</span>
+                      <span class="comment-user">{{ item.createBy }}</span>
+                      <span class="comment-time">{{ parseTime(item.createTime) }}</span>
+                    </div>
+                    <div class="comment-text">{{ item.content }}</div>
+                  </div>
+                </div>
+                <div class="comment-input-area">
+                  <el-input
+                    v-model="commentInput"
+                    type="textarea"
+                    :rows="2"
+                    placeholder="输入评论..."
+                    resize="none"
+                  />
+                  <el-button type="primary" size="mini" @click="handleAddComment" :disabled="!commentInput.trim()" style="margin-top: 6px;">发送</el-button>
+                </div>
+              </div>
+            </div>
+            <div class="preview-content">
+              <ImagePreview v-if="fileTypeCategory === 'image'" :src="selectedFile.filePath" />
+              <PdfPreview v-else-if="fileTypeCategory === 'pdf'" :src="selectedFile.filePath" />
+              <DocxPreview v-else-if="fileTypeCategory === 'docx'" :src="selectedFile.filePath" />
+              <XlsxPreview v-else-if="fileTypeCategory === 'xlsx'" :src="selectedFile.filePath" />
+              <XlsPreview v-else-if="fileTypeCategory === 'xls'" :src="selectedFile.filePath" />
+              <div v-else class="preview-not-supported">
+                <el-empty description="暂不支持预览此文件类型" />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
 
     <!-- 上传/编辑对话框 -->
     <el-dialog :title="dialogTitle" :visible.sync="open" width="650px" append-to-body @close="handleDialogClose">
@@ -272,7 +351,7 @@
       </div>
     </el-dialog>
 
-    <!-- 文件预览对话框 -->
+    <!-- 文件预览对话框（仅非共享文件 tab 使用） -->
     <el-dialog :title="previewTitle" :visible.sync="previewVisible" width="80%" append-to-body>
       <div v-if="previewFile" class="file-preview-container">
         <el-descriptions :column="2" border>
@@ -302,15 +381,26 @@
 </template>
 
 <script>
-import { listFile, getFile, addFile, updateFile, delFile, exportFile, listVisibleUser, addVisibleUser, delVisibleUser, listVisibleUserByFileId, listRelatedToMe } from '@/api/system/file'
+import { listFile, getFile, addFile, updateFile, delFile, exportFile, listVisibleUser, addVisibleUser, delVisibleUser, listVisibleUserByFileId, listRelatedToMe, incrementView } from '@/api/system/file'
+import { listFileComment, addFileComment } from '@/api/system/fileComment'
 import { getToken } from '@/utils/auth'
 import UserSelect from '@/components/KLPService/UserSelect/index'
+import ImagePreview from '@/components/FilePreview/preview/image/index.vue'
+import PdfPreview from '@/components/FilePreview/preview/pdf/index.vue'
+import DocxPreview from '@/components/FilePreview/preview/docx/index.vue'
+import XlsxPreview from '@/components/FilePreview/preview/xlsx/index.vue'
+import XlsPreview from '@/components/FilePreview/preview/xls/index.vue'
 
 export default {
   name: 'SysFile',
   dicts: ['sys_file_type'],
   components: {
-    UserSelect
+    UserSelect,
+    ImagePreview,
+    PdfPreview,
+    DocxPreview,
+    XlsxPreview,
+    XlsPreview
   },
   data() {
     return {
@@ -386,15 +476,51 @@ export default {
         Authorization: 'Bearer ' + getToken()
       },
       uploadFileList: [],
-      // 预览
+      // 预览对话框（非共享文件 tab）
       previewVisible: false,
       previewTitle: '',
-      previewFile: null
+      previewFile: null,
+      // 选中的文件（共享文件 tab 右侧预览）
+      selectedFile: null,
+      // 评论
+      comments: [],
+      commentExpanded: false,
+      commentInput: '',
+      commentLoading: false,
+      // 拖拽调节宽度（共享文件 tab）
+      leftPanelWidth: '40%',
+      isDragging: false,
+      startX: 0,
+      startLeftWidth: 60
+    }
+  },
+  computed: {
+    /** 根据文件后缀分类，决定右侧用哪个预览组件 */
+    fileTypeCategory() {
+      if (!this.selectedFile) return null
+      const raw = this.selectedFile.suffix || this.selectedFile.fileName || ''
+      const ext = (raw.includes('.') ? raw.split('.').pop() : raw).toLowerCase()
+      if (['png', 'jpg', 'jpeg', 'bmp', 'webp'].includes(ext)) return 'image'
+      if (ext === 'pdf') return 'pdf'
+      if (ext === 'docx') return 'docx'
+      if (ext === 'xlsx') return 'xlsx'
+      if (ext === 'xls') return 'xls'
+      return 'other'
     }
   },
   created() {
     this.getList()
   },
+  watch: {
+    selectedFile(val) {
+      if (val) {
+        this.loadComments()
+      } else {
+        this.comments = []
+        this.commentExpanded = false
+      }
+    }
+  },
   methods: {
     /** 切换tab */
     handleTabClick(tab) {
@@ -499,6 +625,7 @@ export default {
     /** 重置按钮 */
     resetQuery() {
       this.dateRange = []
+      this.selectedFile = null
       this.resetForm('queryForm')
       this.queryParams = {
         pageNum: 1,
@@ -675,15 +802,74 @@ export default {
     },
     /** 预览 */
     handlePreview(row) {
-      this.previewFile = row
-      this.previewTitle = '文件详情 - ' + row.fileName
-      this.previewVisible = true
+      if (this.activeTab === 'share') {
+        this.selectedFile = row
+        incrementView(row.fileId)
+      } else {
+        this.previewFile = row
+        this.previewTitle = '文件详情 - ' + row.fileName
+        this.previewVisible = true
+      }
+    },
+    /** 点击行选中预览（共享文件 tab） */
+    handleRowClick(row) {
+      if (this.activeTab === 'share') {
+        this.selectedFile = row
+      }
     },
     /** 下载文件 */
     downloadFile(row) {
       if (row.filePath) {
         window.open(row.filePath, '_blank')
       }
+    },
+    /** 加载评论列表 */
+    loadComments() {
+      this.commentLoading = true
+      listFileComment(this.selectedFile.fileId).then(res => {
+        this.comments = res.data || []
+        this.commentLoading = false
+      }).catch(() => {
+        this.commentLoading = false
+      })
+    },
+    /** 发送评论 */
+    handleAddComment() {
+      const content = this.commentInput.trim()
+      if (!content) return
+      addFileComment({ fileId: this.selectedFile.fileId, content }).then(() => {
+        this.commentInput = ''
+        this.loadComments()
+      })
+    },
+    /** 开始拖拽 */
+    startResize(e) {
+      this.isDragging = true
+      this.startX = e.clientX
+      this.startLeftWidth = parseFloat(this.leftPanelWidth)
+      document.addEventListener('mousemove', this.doResize)
+      document.addEventListener('mouseup', this.stopResize)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    },
+    /** 拖拽中 */
+    doResize(e) {
+      if (!this.isDragging) return
+      const container = this.$refs.layoutContainer
+      const rect = container.getBoundingClientRect()
+      const deltaX = e.clientX - this.startX
+      let percent = this.startLeftWidth + (deltaX / rect.width) * 100
+      percent = Math.max(30, Math.min(80, percent))
+      this.leftPanelWidth = percent + '%'
+    },
+    /** 结束拖拽 */
+    stopResize() {
+      if (!this.isDragging) return
+      this.isDragging = false
+      document.removeEventListener('mousemove', this.doResize)
+      document.removeEventListener('mouseup', this.stopResize)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
     }
   }
 }
@@ -731,4 +917,210 @@ export default {
 .upload-demo {
   width: 100%;
 }
+
+/* 左右分栏布局 */
+.file-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.file-left {
+  flex-shrink: 0;
+}
+
+.file-right {
+  flex: 1;
+  min-width: 300px;
+}
+
+/* 拖拽分隔条 */
+.resize-handle {
+  width: 6px;
+  cursor: col-resize;
+  flex-shrink: 0;
+  align-self: stretch;
+  background: transparent;
+  position: relative;
+  transition: background-color 0.2s;
+  margin: 0 2px;
+  border-radius: 3px;
+}
+
+.resize-handle:hover,
+.resize-handle.dragging {
+  background: #409eff;
+}
+
+.resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 30px;
+  background: #dcdfe6;
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.resize-handle:hover::after,
+.resize-handle.dragging::after {
+  background: #fff;
+}
+
+.preview-panel {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  height: calc(100vh - 280px);
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 16px;
+}
+
+.preview-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-filename {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 12px;
+}
+
+.preview-meta {
+  padding: 8px 16px;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #909399;
+}
+
+.preview-comment {
+  border-bottom: 1px solid #ebeef5;
+}
+
+.comment-bar {
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-size: 13px;
+  color: #606266;
+  user-select: none;
+}
+
+.comment-bar:hover {
+  background: #f5f7fa;
+}
+
+.comment-toggle {
+  color: #909399;
+  font-size: 12px;
+}
+
+.comment-body {
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.comment-hint {
+  padding: 16px;
+  text-align: center;
+  color: #909399;
+  font-size: 13px;
+}
+
+.comment-list {
+  padding: 4px 0;
+}
+
+.comment-item {
+  padding: 8px 16px;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.comment-item:last-child {
+  border-bottom: none;
+}
+
+.comment-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.comment-dept {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.comment-user {
+  color: #606266;
+}
+
+.comment-time {
+  color: #c0c4cc;
+}
+
+.comment-text {
+  font-size: 13px;
+  color: #303133;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.comment-input-area {
+  padding: 8px 16px;
+  border-top: 1px solid #f2f2f2;
+}
+
+.preview-content {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+}
+
+.preview-content > div {
+  width: 100%;
+}
+
+.preview-not-supported {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+</style>
+
+<!-- 表格选中行高亮（非 scoped，穿透 el-table） -->
+<style>
+.file-left .el-table .current-row > td {
+  background-color: #ecf5ff !important;
+}
 </style>