From ea482e382a88bcf2f22227bbe1b22dbbcf0ff774 Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Mon, 18 May 2026 15:13:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E8=AF=86=E5=BA=93-=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/knowledge/index.vue | 1106 +++++++++++++++------------------
 1 file changed, 507 insertions(+), 599 deletions(-)

diff --git a/src/views/knowledge/index.vue b/src/views/knowledge/index.vue
index 569a6b5..e74ec9b 100644
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -1,720 +1,628 @@
 <template>
   <div class="app-container">
-    <el-row>
-      <!-- 左侧菜单栏 -->
+    <el-row :gutter="20">
+      <!-- 左侧分类菜单 -->
       <el-col :span="6">
-        <el-card>
-          <div slot="header" class="card-header">
+        <el-form>
+          <el-form-item prop="userName">
             <el-input
-              v-model="searchKeyword"
-              placeholder="请输入关键词搜索"
+              v-model="deptFilterText"
+              placeholder="输入部门名称过滤"
+              clearable
+              size="small"
               prefix-icon="el-icon-search"
-              style="margin-right: 8px"
-              @input="handleSearch"
             >
-              <el-button
-                slot="append"
-                icon="el-icon-refresh-right"
-                @click="handleRefresh"
-              />
+              <template slot="append">
+                <el-button
+                  slot="append"
+                  icon="el-icon-refresh-right"
+                  @click="refreshMenu"
+                />
+              </template>
             </el-input>
-          </div>
-
-          <el-menu
-            class="content-list"
-            :default-active="activeMenu"
-            @select="handleMenuClick"
+          </el-form-item>
+        </el-form>
+        <el-menu :default-active="defaultActive" @select="handleSelect">
+          <!-- 内置标签 -->
+          <el-menu-item
+            v-for="(dept, index) in builtInDepts"
+            :key="`built-in-${index}`"
+            :index="`built-in-${index}`"
+            class="custom-item"
           >
-            <el-menu-item index="1">
-              <i class="el-icon-menu"></i>
-              <span slot="title">海信产品介绍</span>
-            </el-menu-item>
-            <el-menu-item index="2">
-              <i class="el-icon-video-camera"></i>
-              <span slot="title">公共教学视频</span>
-            </el-menu-item>
-            <el-menu-item index="3">
-              <i class="el-icon-user"></i>
-              <span slot="title">个人收藏录像</span>
-            </el-menu-item>
-
-            <div v-for="item in customMenuList" :key="item.index">
-              <el-menu-item :index="item.index" class="custom-item">
-                <div class="item-content">
-                  <div class="left">
-                    <i class="el-icon-collection-tag" style="color: #20c0c0" />
-                    <span style="color: #20c0c0">{{ item.title }}</span>
-                  </div>
-                  <div class="right">
-                    <el-button
-                      type="text"
-                      icon="el-icon-edit"
-                      @click.stop="openEditDialog(item)"
-                    />
-                    <el-button
-                      type="text"
-                      icon="el-icon-delete"
-                      @click.stop="deleteCustomTag(item)"
-                    />
-                  </div>
-                </div>
-              </el-menu-item>
+            <div class="left">
+              <i :class="getBuiltInIcon(index)" />
+              <span>{{ dept.label }}</span>
             </div>
-
-            <el-menu-item index="custom" @click="openAddDialog">
-              <i class="el-icon-edit-outline"></i>
-              <span slot="title">自定义标签</span>
-            </el-menu-item>
-          </el-menu>
-        </el-card>
+            <!-- 内置标签无操作按钮 -->
+          </el-menu-item>
+          <!-- 自定义标签 -->
+          <el-menu-item
+            v-for="(dept, index) in filteredCustomDeptList"
+            :key="`custom-${index}`"
+            :index="`custom-${index}`"
+            class="custom-item"
+          >
+            <div class="left">
+              <i class="el-icon-collection-tag" />
+              <span>{{ dept.label }}</span>
+            </div>
+            <div class="right">
+              <el-button
+                type="text"
+                icon="el-icon-edit"
+                @click.stop="handleEditTag(dept)"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-delete"
+                @click.stop="handleDeleteTag(dept)"
+              />
+            </div>
+          </el-menu-item>
+          <el-menu-item>
+            <div class="left" @click.stop="handleAddTag">
+              <i class="el-icon-edit-outline" />
+              <span>自定义标签</span>
+            </div>
+          </el-menu-item>
+        </el-menu>
       </el-col>
 
-      <!-- 右侧内容区 -->
+      <!-- 右侧资源列表 -->
       <el-col :span="18">
-        <el-card>
-          <div slot="header" class="card-header">
-            <span>{{ currentMenuTitle }}</span>
+        <!-- 搜索区域 -->
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
+          <el-form-item label="文件名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入文件名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
             <el-button
-              v-if="currentMenuTitle === '个人收藏录像' || isCustomMenu"
-              type="text"
-              @click="openUploadDialog"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleQuery"
             >
-              上传
+              搜索
             </el-button>
-          </div>
-
-          <div class="content-list" v-if="filteredFileList.length > 0">
-            <div
-              class="list-item"
-              v-for="file in filteredFileList"
-              :key="file.id"
-              @click="previewFile(file)"
+            <el-button icon="el-icon-refresh" @click="resetQuery">
+              重置
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-upload2"
+              size="mini"
+              @click="openUploadTypeDialog"
             >
-              <div class="item-cover">
-                <img :src="file.cover" alt="" />
-                <div class="play-btn" v-if="file.type === 'video'">
-                  <i class="el-icon-video-play"></i>
-                </div>
-                <div class="play-btn" v-if="file.type === 'pdf'">
-                  <i class="el-icon-document"></i>
-                </div>
-              </div>
-              <div class="item-info">
-                <div class="item-name">{{ file.name }}</div>
-              </div>
-              <div class="item-upload-time">{{ file.uploadTime }} 上传</div>
-              <div class="item-size">{{ file.size }}</div>
-              <div class="actions">
-                <el-button
-                  type="text"
-                  icon="el-icon-share"
-                  @click.stop="handleShare(file)"
-                />
-                <el-button
-                  v-if="isCustomMenu || currentMenuTitle === '个人收藏录像'"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click.stop="openEditFileDialog(file)"
-                />
-                <el-button
-                  v-if="isCustomMenu || currentMenuTitle === '个人收藏录像'"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click.stop="deleteFile(file)"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="empty-state" v-else>
-            <i class="el-icon-file-empty"></i>
-            <span>暂无相关文件数据</span>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 预览弹窗 -->
-    <el-dialog
-      :title="previewFileData.name"
-      :visible.sync="previewVisible"
-      fullscreen
-      append-to-body
-    >
-      <video
-        v-if="previewFileData.type === 'video'"
-        :src="previewFileData.url"
-        controls
-        autoplay
-        playsinline
-        style="
-          width: 100%;
-          height: calc(100vh - 75px);
-          object-fit: contain;
-          background: #000;
-        "
-      />
-      <iframe
-        v-if="previewFileData.type === 'pdf'"
-        :src="previewFileData.url"
-        style="width: 100%; height: calc(100vh - 75px); border: none"
-      />
-    </el-dialog>
-
-    <!-- 上传弹窗（按原型图修改） -->
-    <el-dialog
-      title="请选择上传文件类型"
-      :visible.sync="uploadDialogVisible"
-      width="17%"
-      :close-on-click-modal="false"
-      @closed="resetUploadDialog"
-    >
-      <div class="upload-type-container">
-        <!-- 视频上传 -->
-        <div class="type-card" @click="selectUploadType('video')">
-          <el-upload
-            ref="videoUpload"
-            :auto-upload="false"
-            accept=".mp4"
-            :on-change="handleFileChange"
-            :file-list="videoFileList"
-            class="uploader"
+              上传
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <!-- 资源列表 -->
+        <el-table v-loading="loading" :data="userList">
+          <el-table-column
+            label="缩略图"
+            prop="thumbnail"
+            align="center"
+            v-if="columns.thumbnail.visible"
+            width="250"
           >
-            <div class="type-icon">
-              <svg width="80" height="80" viewBox="0 0 24 24" fill="none">
-                <path
-                  d="M14 2H6C4.89 2 4 2.89 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M14 2V8H20"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path d="M10 15L15 12L10 9V15Z" fill="white" />
-              </svg>
-            </div>
-            <div class="type-text">请选择视频文件(仅支持MP4格式)</div>
-          </el-upload>
-        </div>
-
-        <!-- PDF上传 -->
-        <div class="type-card" @click="selectUploadType('pdf')">
-          <el-upload
-            ref="pdfUpload"
-            :auto-upload="false"
-            accept=".pdf"
-            :on-change="handleFileChange"
-            :file-list="pdfFileList"
-            class="uploader"
+            <template slot-scope="scope">
+              <el-image
+                class="resource-thumb"
+                :src="
+                  scope.row.thumbnail || defaultThumbnail(scope.row.fileType)
+                "
+                fit="contain"
+                @click="handlePreview(scope.row)"
+              >
+                <i slot="load" :class="getFileIcon(scope.row.fileType)" />
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="文件名"
+            align="center"
+            prop="userName"
+            v-if="columns.userName.visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="上传时间"
+            align="center"
+            prop="createTime"
+            v-if="columns.createTime.visible"
+            width="200"
           >
-            <div class="type-icon">
-              <svg width="80" height="80" viewBox="0 0 24 24" fill="none">
-                <path
-                  d="M14 2H6C4.89 2 4 2.89 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M14 2V8H20"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <rect x="6" y="14" width="12" height="4" rx="1" fill="white" />
-                <text
-                  x="12"
-                  y="17"
-                  text-anchor="middle"
-                  fill="#20c0c0"
-                  font-size="5"
-                  font-weight="bold"
-                >
-                  PDF
-                </text>
-              </svg>
-            </div>
-            <div class="type-text">请选择PDF文件(仅支持PDF格式)</div>
-          </el-upload>
-        </div>
-      </div>
-    </el-dialog>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}上传</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="文件大小"
+            align="center"
+            prop="fileSize"
+            v-if="columns.fileSize.visible"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <span>{{ formatFileSize(scope.row.fileSize) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            width="240"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                icon="el-icon-share"
+                @click="handleShare(scope.row)"
+              >
+                分享
+              </el-button>
+              <el-button
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdateFileName(scope.row)"
+              >
+                修改
+              </el-button>
+              <el-button
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
 
-    <!-- 新增/编辑标签 -->
+    <!-- 自定义标签弹窗 -->
     <el-dialog
-      :title="dialogTitle"
-      :visible.sync="dialogVisible"
-      width="17%"
-      @close="resetDialog"
+      title="自定义标签名称"
+      :visible.sync="tagDialogVisible"
+      width="400px"
+      destroy-on-close
     >
-      <el-form ref="tagForm" :model="tagForm" :rules="rules" label-width="80px">
-        <el-form-item label="标签名称" prop="name">
+      <el-form
+        :model="tagForm"
+        :rules="tagRules"
+        ref="tagFormRef"
+        label-width="80px"
+      >
+        <el-form-item label="标签名称" prop="label">
           <el-input
-            v-model="tagForm.name"
-            placeholder="请输入标签名称"
+            v-model="tagForm.label"
+            placeholder="请输入最多8个字符"
             maxlength="8"
             show-word-limit
           />
         </el-form-item>
       </el-form>
-      <span slot="footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm">确认</el-button>
-      </span>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitTagForm">确认</el-button>
+        <el-button @click="cancelTagForm">取消</el-button>
+      </div>
     </el-dialog>
 
-    <!-- 编辑文件名 -->
+    <!-- 修改文件名弹窗 -->
     <el-dialog
-      title="编辑文件名称"
-      :visible.sync="editFileDialogVisible"
-      width="300px"
+      title="修改文件名称"
+      :visible.sync="fileNameDialogVisible"
+      width="400px"
+      destroy-on-close
     >
       <el-form
-        ref="fileForm"
-        :model="fileForm"
-        :rules="fileRules"
+        :model="fileNameForm"
+        :rules="fileNameRules"
+        ref="fileNameFormRef"
         label-width="80px"
       >
-        <el-form-item label="文件名称" prop="name">
+        <el-form-item label="文件名称" prop="userName">
           <el-input
-            v-model="fileForm.name"
+            v-model="fileNameForm.userName"
             placeholder="请输入文件名称"
-            maxlength="8"
             show-word-limit
+            maxlength="8"
           />
         </el-form-item>
       </el-form>
-      <span slot="footer">
-        <el-button @click="editFileDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitFileEdit">确认</el-button>
-      </span>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileNameForm">确认</el-button>
+        <el-button @click="cancelFileNameForm">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择上传类型弹窗 -->
+    <el-dialog
+      title="请选择上传文件类型"
+      :visible.sync="uploadTypeDialogVisible"
+      width="400px"
+      :show-footer="false"
+    >
+      <div class="upload-type-box">
+        <div class="type-item" @click="selectFileType('video')">
+          <i class="el-icon-video-play" />
+          <span>视频文件（MP4）</span>
+        </div>
+        <div class="type-item" @click="selectFileType('pdf')">
+          <i class="el-icon-document" />
+          <span>PDF 文件</span>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- el-upload 组件（隐藏，只用于触发上传） -->
+    <el-upload
+      ref="upload"
+      :action="uploadUrl"
+      :headers="uploadHeaders"
+      :data="uploadParams"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
+      :on-progress="handleUploadProgress"
+      :before-upload="beforeUpload"
+      :file-list="fileList"
+      :limit="1"
+      :on-exceed="handleExceed"
+      :show-file-list="false"
+      :accept="uploadAccept"
+    />
+
+    <!-- 上传进度弹窗 -->
+    <el-dialog
+      title="文件上传中"
+      :visible.sync="uploadProgressDialogVisible"
+      width="400px"
+      :close-on-click-modal="false"
+      :show-footer="false"
+    >
+      <div class="progress-box">
+        <el-progress :percentage="uploadPercent" />
+        <p style="margin-top: 15px">资源上传中，请稍候...</p>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { listUser, delUser, deptTreeSelect } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
+
 export default {
-  name: "KnowledgeBase",
+  name: "Knowledge",
   data() {
     return {
-      searchKeyword: "",
-      activeMenu: "1",
-      currentMenuTitle: "海信产品介绍",
-      fixedMenuList: [
-        { index: "1", title: "海信产品介绍" },
-        { index: "2", title: "公共教学视频" },
-        { index: "3", title: "个人收藏录像" },
-      ],
-      customMenuList: [{ index: "4", title: "我的收藏" }],
-      menuFiles: {
-        1: [
-          {
-            id: 1,
-            name: "海信超声图像调节",
-            cover: "https://via.placeholder.com/160x90/42b983/ffffff?text=视频",
-            uploadTime: "2026-05-11 09:22:15",
-            size: "269.75M",
-            type: "video",
-            url: "https://www.w3schools.com/html/mov_bbb.mp4",
-          },
-          {
-            id: 4,
-            name: "信联用户手册V1.2_20220428.pdf",
-            cover: "https://via.placeholder.com/160x90/9b59b6/ffffff?text=PDF",
-            uploadTime: "2026-05-12 16:44:02",
-            size: "3.82M",
-            type: "pdf",
-            url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
-          },
-        ],
-        2: [
-          {
-            id: 7,
-            name: "超声在PsA多学科诊疗中的价值",
-            cover: "https://via.placeholder.com/160x90/34495e/ffffff?text=视频",
-            uploadTime: "2026-05-09 14:33:16",
-            size: "634.11M",
-            type: "video",
-            url: "https://www.w3schools.com/html/mov_bbb.mp4",
-          },
-        ],
-        3: [],
-        4: [
-          {
-            id: 17,
-            name: "1633500241136.mp4",
-            cover: "https://via.placeholder.com/160x90/000000/ffffff?text=视频",
-            uploadTime: "2026-05-13 14:32:04",
-            size: "17.92M",
-            type: "video",
-            url: "https://www.w3schools.com/html/mov_bbb.mp4",
-          },
-        ],
+      loading: true,
+      total: 0,
+      userList: [],
+      showSearch: true,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        deptId: undefined,
+      },
+      columns: {
+        thumbnail: { label: "缩略图", visible: true },
+        userName: { label: "文件名", visible: true },
+        createTime: { label: "上传时间", visible: true },
+        fileSize: { label: "文件大小", visible: true },
       },
-      dialogVisible: false,
-      dialogTitle: "",
-      currentEditItem: null,
-      tagForm: { name: "" },
-      rules: {
-        name: [
-          { required: true, message: "请输入标签名称", trigger: "blur" },
-          { min: 1, max: 8, message: "1-8个字符", trigger: "blur" },
+      deptFilterText: "",
+      deptOptions: [],
+      builtInDepts: [
+        { label: "海信产品介绍", id: "built-in-0" },
+        { label: "公共教学视频", id: "built-in-1" },
+        { label: "个人收藏录像", id: "built-in-2" },
+      ],
+      currentTag: "",
+      // 标签弹窗
+      tagDialogVisible: false,
+      tagForm: { id: null, label: "" },
+      tagRules: {
+        label: [
+          { required: true, message: "标签名称不能为空", trigger: "blur" },
+          { max: 8, message: "最多8个字符", trigger: "blur" },
         ],
       },
-      uploadDialogVisible: false,
-      selectedUploadType: "",
-      videoFileList: [],
-      pdfFileList: [],
-      editFileDialogVisible: false,
-      currentEditFile: null,
-      fileForm: { name: "" },
-      fileRules: {
-        name: [
-          { required: true, message: "请输入文件名称", trigger: "blur" },
-          { min: 1, max: 8, message: "1-8个字符", trigger: "blur" },
+      // 文件名弹窗
+      fileNameDialogVisible: false,
+      fileNameForm: { userId: undefined, userName: "" },
+      fileNameRules: {
+        userName: [
+          { required: true, message: "文件名不能为空", trigger: "blur" },
         ],
       },
-      previewVisible: false,
-      previewFileData: {},
+
+      // ================== 上传相关 ==================
+      uploadTypeDialogVisible: false, // 类型选择弹窗
+      currentFileType: "", // 当前选择的文件类型 video/pdf
+      uploadUrl: "/api/file/upload", // 后端上传接口
+      uploadHeaders: { Authorization: "Bearer " + getToken() },
+      uploadParams: { deptId: "", fileType: "" },
+      uploadAccept: "",
+      fileList: [], // 只允许一个
+      uploadProgressDialogVisible: false,
+      uploadPercent: 0,
     };
   },
   computed: {
-    isCustomMenu() {
-      return this.customMenuList.some((item) => item.index === this.activeMenu);
-    },
-    currentFileList() {
-      return this.menuFiles[this.activeMenu] || [];
-    },
-    filteredFileList() {
-      if (!this.searchKeyword.trim()) return this.currentFileList;
-      const k = this.searchKeyword.toLowerCase();
-      return this.currentFileList.filter((f) =>
-        f.name.toLowerCase().includes(k)
+    filteredCustomDeptList() {
+      if (!this.deptOptions) return [];
+      let list = this.deptOptions[0]?.children[0]?.children || [];
+      if (!this.deptFilterText) return list;
+      return list.filter((item) =>
+        item.label.includes(this.deptFilterText.trim())
       );
     },
   },
   created() {
-    this.loadLocalData();
+    this.getList();
+    this.getDeptTree();
   },
   methods: {
-    loadLocalData() {
-      const t = localStorage.getItem("customMenuList");
-      const f = localStorage.getItem("menuFiles");
-      if (t) this.customMenuList = JSON.parse(t);
-      if (f) this.menuFiles = JSON.parse(f);
+    refreshMenu() {
+      this.deptFilterText = "";
+      this.getDeptTree();
     },
-    saveLocalData() {
-      localStorage.setItem(
-        "customMenuList",
-        JSON.stringify(this.customMenuList)
-      );
-      localStorage.setItem("menuFiles", JSON.stringify(this.menuFiles));
+    getDeptTree() {
+      deptTreeSelect().then((res) => {
+        this.deptOptions = res.data;
+      });
+    },
+    getBuiltInIcon(idx) {
+      return ["el-icon-coin", "el-icon-video-camera", "el-icon-user"][idx];
     },
-    handleRefresh() {
-      this.searchKeyword = "";
-      this.$modal.msgSuccess("刷新成功");
+    getFileIcon(t) {
+      return t === "video" ? "el-icon-video-play" : "el-icon-document";
     },
-    handleSearch() {},
-    handleMenuClick(index) {
-      if (index === "custom") return;
-      this.activeMenu = index;
-      const f = this.fixedMenuList.find((x) => x.index === index);
-      const c = this.customMenuList.find((x) => x.index === index);
-      this.currentMenuTitle = f?.title || c?.title || "";
+    defaultThumbnail(t) {
+      return t === "video"
+        ? "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+        : "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3794312f7670b85636.jpeg";
     },
-    openAddDialog() {
-      this.dialogTitle = "新增自定义标签";
-      this.tagForm.name = "";
-      this.currentEditItem = null;
-      this.dialogVisible = true;
+    formatFileSize(bytes) {
+      if (!bytes) return "0B";
+      const u = ["B", "KB", "MB", "GB"];
+      let s = bytes,
+        i = 0;
+      while (s >= 1024 && i < 3) {
+        s /= 1024;
+        i++;
+      }
+      return s.toFixed(2) + u[i];
     },
-    openEditDialog(item) {
-      this.dialogTitle = "编辑自定义标签";
-      this.tagForm.name = item.title;
-      this.currentEditItem = item;
-      this.dialogVisible = true;
+    handleSelect(key) {
+      const [type, idx] = key.split("-");
+      this.currentTag =
+        type === "built-in"
+          ? this.builtInDepts[idx].id
+          : this.filteredCustomDeptList[idx]?.id;
+      this.queryParams.deptId = this.currentTag;
+      this.handleQuery();
     },
-    submitForm() {
-      this.$refs.tagForm.validate((v) => {
-        if (!v) return;
-        const n = this.tagForm.name.trim();
-        if (this.currentEditItem) {
-          this.currentEditItem.title = n;
-          this.$modal.msgSuccess("编辑成功");
-        } else {
-          const all = [
-            ...this.fixedMenuList.map((x) => +x.index),
-            ...this.customMenuList.map((x) => +x.index),
-          ];
-          const idx = String(Math.max(...all) + 1);
-          this.customMenuList.push({ index: idx, title: n });
-          this.menuFiles[idx] = [];
-          this.$modal.msgSuccess("新增成功");
-        }
-        this.dialogVisible = false;
-        this.saveLocalData();
-      });
+    handleAddTag() {
+      this.tagForm = { id: null, label: "" };
+      this.tagDialogVisible = true;
     },
-    resetDialog() {
-      this.$refs.tagForm?.clearValidate();
-      this.tagForm.name = "";
+    handleEditTag(t) {
+      this.tagForm = { ...t };
+      this.tagDialogVisible = true;
     },
-
-    // ====================== 删除标签（使用$modal.confirm）======================
-    deleteCustomTag(item) {
+    // 删除标签
+    handleDeleteTag(tag) {
       this.$modal
         .confirm(
-          "是否删除该自定义标签?若删除，该标签下资源将迁移至[个人收藏视频]标签下。"
+          `是否删除该自定义标签?若删除，该标签下资源将迁移至[个人收藏录像]标签下。`
         )
         .then(() => {
-          const files = this.menuFiles[item.index] || [];
-          this.menuFiles["3"] = [...(this.menuFiles["3"] || []), ...files];
-          const i = this.customMenuList.findIndex(
-            (x) => x.index === item.index
-          );
-          if (i > -1) this.customMenuList.splice(i, 1);
-          delete this.menuFiles[item.index];
-          this.handleMenuClick("3");
-          this.saveLocalData();
           this.$modal.msgSuccess("删除成功");
+          this.getDeptTree();
+          this.migrateResource(tag.id, this.builtInDepts[2].id);
         })
         .catch(() => {});
     },
-
-    // ====================== 删除文件（使用$modal.confirm）======================
-    deleteFile(file) {
-      this.$modal
-        .confirm(`是否要删除【${file.name}】此资源？删除后不可恢复！`)
-        .then(() => {
-          const list = this.menuFiles[this.activeMenu];
-          const i = list.findIndex((x) => x.id === file.id);
-          if (i > -1) list.splice(i, 1);
-          this.saveLocalData();
+    // 迁移资源
+    migrateResource(oldDeptId, newDeptId) {
+      this.getList();
+    },
+ submitTagForm() {
+      this.$refs["tagFormRef"].validate((valid) => {
+        if (valid) {
+          if (this.tagForm.id) {
+            this.$modal.msgSuccess("修改成功");
+            this.tagDialogVisible = false;
+            this.getDeptTree();
+          } else {
+            this.$modal.msgSuccess("新增成功");
+            this.tagDialogVisible = false;
+            this.getDeptTree();
+          }
+        }
+      });
+    },
+    cancelTagForm() {
+      this.tagDialogVisible = false;
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.deptId = null;
+      this.currentTag = "";
+      this.handleQuery();
+    },
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then((res) => {
+        this.userList = res.rows;
+        this.total = res.total;
+        this.loading = false;
+      });
+    },
+    handleShare() {
+      this.$modal.msgSuccess("分享链接已复制");
+    },
+    handleUpdateFileName(row) {
+      this.fileNameForm = { ...row };
+      this.fileNameDialogVisible = true;
+    },
+    submitFileNameForm() {
+      this.$refs.fileNameFormRef.validate((v) => {
+        if (v) {
+          this.$modal.msgSuccess("修改成功");
+          this.fileNameDialogVisible = false;
+          this.getList();
+        }
+      });
+    },
+    cancelFileNameForm() {
+      this.fileNameDialogVisible = false;
+    },
+    handleDelete(row) {
+      this.$modal.confirm("确认删除？").then(() => {
+        delUser(row.userId).then(() => {
           this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
+          this.getList();
+        });
+      });
+    },
+    handlePreview() {
+      this.$modal.msg("预览功能开发中");
     },
 
-    openEditFileDialog(file) {
-      this.currentEditFile = file;
-      this.fileForm.name = file.name;
-      this.editFileDialogVisible = true;
+    // ====================== 上传核心逻辑 ======================
+    // 打开类型选择
+    openUploadTypeDialog() {
+      this.uploadTypeDialogVisible = true;
     },
-    submitFileEdit() {
-      this.$refs.fileForm.validate((v) => {
-        if (!v) return;
-        this.currentEditFile.name = this.fileForm.name.trim();
-        this.editFileDialogVisible = false;
-        this.$modal.msgSuccess("修改成功");
-        this.saveLocalData();
+    // 选择文件类型
+    selectFileType(type) {
+      this.uploadTypeDialogVisible = false;
+      this.currentFileType = type;
+      this.uploadAccept = type === "video" ? "video/mp4" : "application/pdf";
+      // 触发上传
+      this.$nextTick(() => {
+        this.$refs.upload.$children[0].$el.click();
       });
     },
-    openUploadDialog() {
-      this.uploadDialogVisible = true;
-      this.selectedUploadType = "";
+    // 上传前校验
+    beforeUpload(file) {
+      this.uploadParams.deptId = this.currentTag || this.builtInDepts[2].id;
+      this.uploadParams.fileType = this.currentFileType;
+      this.uploadProgressDialogVisible = true;
+      this.uploadPercent = 0;
+      return true;
     },
-    selectUploadType(type) {
-      this.selectedUploadType = type;
+    // 超过数量
+    handleExceed() {
+      this.$modal.msgError("每次只能上传一个文件！");
     },
-    handleFileChange(file, list) {
-      if (file.raw.type.includes("video")) {
-        this.videoFileList = list;
-      } else if (file.raw.type.includes("pdf")) {
-        this.pdfFileList = list;
-      }
+    // 进度
+    handleUploadProgress(e) {
+      this.uploadPercent = Math.round(e.percent);
     },
-    resetUploadDialog() {
-      this.videoFileList = [];
-      this.pdfFileList = [];
-      this.selectedUploadType = "";
-      this.$refs.videoUpload?.clearFiles();
-      this.$refs.pdfUpload?.clearFiles();
+    // 成功
+    handleUploadSuccess() {
+      this.uploadPercent = 100;
+      setTimeout(() => {
+        this.uploadProgressDialogVisible = false;
+        this.$modal.msgSuccess("上传成功");
+        this.getList(); // 刷新列表
+        this.fileList = [];
+      }, 500);
     },
-    previewFile(file) {
-      this.previewFileData = file;
-      this.previewVisible = true;
-    },
-    handleShare(file) {
-      navigator.clipboard
-        .writeText(file.url)
-        .then(() => {
-          this.$modal.msgSuccess("分享链接已复制");
-        })
-        .catch(() => {
-          this.$modal.msgInfo(file.url);
-        });
+    // 失败
+    handleUploadError() {
+      this.uploadProgressDialogVisible = false;
+      this.$modal.msgError("上传失败");
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-$primary-color: #20c0c0;
-$gray-color: #999;
-$light-gray: #eee;
-
-.custom-item {
-  .item-content {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    align-items: center;
-    .left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .right {
-      display: flex;
-      gap: 8px;
-    }
-  }
+.app-container {
+  padding: 20px;
+  height: 100%;
 }
 
-.card-header {
+.custom-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 10px;
-  height: 48px;
-}
-
-.content-list {
-  height: calc(100vh - 255px);
-  max-height: calc(100vh - 255px);
-  overflow-y: auto;
-  padding: 10px 0;
-  .list-item {
+  .left {
     display: flex;
     align-items: center;
-    padding: 12px 0;
-    border-bottom: 1px solid $light-gray;
-    cursor: pointer;
-    transition: background 0.2s;
-    &:hover {
-      background: rgba($primary-color, 0.05);
-    }
-    .item-cover {
-      position: relative;
-      width: 160px;
-      height: 90px;
-      border-radius: 4px;
-      overflow: hidden;
-      margin-right: 16px;
-      flex-shrink: 0;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      .play-btn {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 36px;
-        height: 36px;
-        background: rgba(0, 0, 0, 0.6);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        font-size: 18px;
-      }
-    }
-    .item-info {
-      flex: 1;
-      min-width: 0;
-      .item-name {
-        font-size: 14px;
-        color: #333;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .item-upload-time,
-    .item-size {
-      font-size: 13px;
-      color: $gray-color;
-      width: 180px;
-      text-align: center;
-      flex-shrink: 0;
-    }
-    .item-size {
-      width: 100px;
-      text-align: right;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      margin-left: 16px;
-      flex-shrink: 0;
-      ::v-deep .el-button {
-        color: $gray-color;
-        &:hover {
-          color: $primary-color;
-        }
-      }
-    }
+    gap: 8px;
   }
 }
 
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: $gray-color;
-  height: 200px;
-  i {
-    font-size: 48px;
-    margin-bottom: 12px;
-  }
+.resource-thumb {
+  width: 230px;
+  height: 80px;
+  border-radius: 4px;
+  cursor: pointer;
 }
 
-/* 上传弹窗样式，完全匹配原型 */
-.upload-type-container {
+.upload-type-box {
   display: flex;
   justify-content: space-around;
-  align-items: center;
   padding: 20px 0;
-
-  .type-card {
+  .type-item {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #ccc;
+    border-radius: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     cursor: pointer;
-
-    .type-icon {
-      width: 90px;
-      height: 100px;
-      background-color: $primary-color;
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 15px;
-    }
-
-    .type-text {
-      font-size: 14px;
-      color: #333;
+    i {
+      font-size: 40px;
+      color: #409eff;
       margin-bottom: 10px;
     }
+    &:hover {
+      border-color: #409eff;
+      background: #f5f7fa;
+    }
   }
 }
 
-.dialog-footer {
+.progress-box {
+  padding: 20px;
   text-align: center;
 }
 </style>
\ No newline at end of file