新增前端vue

web-vue/packages/core/layouts/views/desktop/myfiles/index.vue

@@ -13,7 +13,7 @@
           <div 
             class="tree-node folder-node" 
             v-for="(folder, index) in folderList" 
-            :key="index"
+            :key="folder.folderId"
             @click="toggleFolder(folder)"
             @dblclick="doubleClickFolder(folder)"
             :class="{ active: folder.expanded }"
@@ -27,7 +27,7 @@
                   :color="folder.expanded ? '#FF9800' : '#FFB74D'"
                 />
               </span>
-              <span class="folder-name">{{ folder.name }}</span>
+              <span class="folder-name">{{ folder.folderName }}</span>
             </div>
             <span class="tree-toggle">
               <Icon 
@@ -45,7 +45,7 @@
                     class="icon-size"
                   />
                 </span>
-                <span class="file-name">{{ child.name }}</span>
+                <span class="file-name">{{ child.type === 'folder' ? child.folderName : child.fileName }}</span>
                 <span class="tree-toggle empty"></span>
               </div>
             </div>
@@ -71,7 +71,7 @@
         <div class="file-list">
           <Card
             v-for="(file, index) in fileList"
-            :key="index"
+            :key="file.tid"
             class="file-card"
             :hoverable="true"
           >
@@ -80,9 +80,9 @@
               <div class="file-card-header">
                 <div class="file-name-wrap">
                   <span class="file-card-icon">📄</span>
-                  <span class="file-card-name" :title="file.name">{{ file.name }}</span>
+                  <span class="file-card-name" :title="file.fileName">{{ file.fileName }}</span>
                 </div>
-                <span class="file-card-size">{{ file.size }}</span>
+                <span class="file-card-size">{{ formatFileSize(file.fileSize) }}</span>
               </div>
               <div class="card-divider"></div>
               <div class="file-card-actions">
@@ -99,8 +99,9 @@
   <UploadModal @register="uploadregister" />
   <FolderModal @register="folderregister" />
 </template>
+
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { message } from 'ant-design-vue';
 import { Input, Card } from 'ant-design-vue';
 import { Icon } from '@jeesite/core/components/Icon';
@@ -112,85 +113,353 @@ const item = ref();
 const [uploadregister, { openModal: openUploadModal }] = useModal();
 const [folderregister, { openModal: openfolderModal }] = useModal();
 
-// 定义类型接口
-interface FolderItem {
-  name: string;
-  expanded: boolean;
-  children: Array<{
-    name: string;
-    type: 'folder' | 'file';
-  }>;
+// 定义与后端实体类对应的类型接口
+interface BizFolders {
+  createTime: Date | string;      // 记录时间
+  folderId: string;               // 文件夹标识
+  folderName: string;             // 文件夹名称
+  parentId: string;               // 父文件夹
+  userName: string;               // 用户姓名
+  loginCode: string;              // 用户名称
+  updateTime: Date | string;      // 更新时间
+  isDeleted: number;              // 是否删除
+  description: string;            // 文件夹描述
+  expanded?: boolean;             // 前端扩展字段：是否展开
+  children?: (BizFolders & { type: 'folder' }) | (BizMyfiles & { type: 'file' }); // 前端扩展字段：子节点
 }
 
-interface FileItem {
-  name: string;
-  size: string;
-  time: string;
-  path: string;
-  creator: string;
+interface BizMyfiles {
+  createTime: Date | string;      // 记录时间
+  tid: number;                    // 文件标识
+  fileName: string;               // 原始名称
+  filePath: string;               // 存储路径
+  fileHash: string;               // 文件MD5
+  fileSize: number;               // 文件大小(字节)
+  fileExt: string;                // 文件扩展名
+  mimeType: string;               // 文件类型
+  folderId: string;               // 文件夹标识
+  userName: string;               // 用户姓名
+  loginCode: string;              // 用户名称
+  downloadCount: number;          // 下载次数
+  viewCount: number;              // 查看次数
+  expireTime: Date | string;      // 过期时间
+  isDelete: number;               // 是否删除
+  updateTime: Date | string;      // 更新时间
 }
 
 const folderSearchText = ref<string>('');
 const fileSearchText = ref<string>('');
 
-const folderList = ref<FolderItem[]>([
+// 重构文件夹列表数据，使用后端实体类字段
+const folderList = ref<BizFolders[]>([
   {
-    name: '项目文档',
+    folderId: 'folder_001',
+    folderName: '项目文档',
+    parentId: '',
+    userName: '管理员',
+    loginCode: 'admin',
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString(),
+    isDeleted: 0,
+    description: '项目相关文档',
     expanded: false,
     children: [
-      { name: '需求文档', type: 'folder' },
-      { name: '设计稿', type: 'folder' },
-      { name: '开发规范.docx', type: 'file' },
-      { name: '接口文档.pdf', type: 'file' }
+      { 
+        folderId: 'folder_001_001',
+        folderName: '需求文档',
+        parentId: 'folder_001',
+        userName: '管理员',
+        loginCode: 'admin',
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        isDeleted: 0,
+        description: '需求相关文档',
+        type: 'folder'
+      },
+      { 
+        folderId: 'folder_001_002',
+        folderName: '设计稿',
+        parentId: 'folder_001',
+        userName: '管理员',
+        loginCode: 'admin',
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        isDeleted: 0,
+        description: '设计相关文档',
+        type: 'folder'
+      },
+      { 
+        tid: 1001,
+        fileName: '开发规范.docx',
+        filePath: '/项目文档/开发规范.docx',
+        fileHash: 'md5_123456',
+        fileSize: 1024 * 100, // 100KB
+        fileExt: 'docx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        folderId: 'folder_001',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      },
+      { 
+        tid: 1002,
+        fileName: '接口文档.pdf',
+        filePath: '/项目文档/接口文档.pdf',
+        fileHash: 'md5_789012',
+        fileSize: 1024 * 200, // 200KB
+        fileExt: 'pdf',
+        mimeType: 'application/pdf',
+        folderId: 'folder_001',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      }
     ]
   },
   {
-    name: '日常办公',
+    folderId: 'folder_002',
+    folderName: '日常办公',
+    parentId: '',
+    userName: '管理员',
+    loginCode: 'admin',
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString(),
+    isDeleted: 0,
+    description: '日常办公文档',
     expanded: false,
     children: [
-      { name: '周报汇总', type: 'folder' },
-      { name: '会议纪要.docx', type: 'file' },
-      { name: '考勤表.xlsx', type: 'file' }
+      { 
+        folderId: 'folder_002_001',
+        folderName: '周报汇总',
+        parentId: 'folder_002',
+        userName: '管理员',
+        loginCode: 'admin',
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        isDeleted: 0,
+        description: '周报汇总',
+        type: 'folder'
+      },
+      { 
+        tid: 1003,
+        fileName: '会议纪要.docx',
+        filePath: '/日常办公/会议纪要.docx',
+        fileHash: 'md5_345678',
+        fileSize: 1024 * 80, // 80KB
+        fileExt: 'docx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        folderId: 'folder_002',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      },
+      { 
+        tid: 1004,
+        fileName: '考勤表.xlsx',
+        filePath: '/日常办公/考勤表.xlsx',
+        fileHash: 'md5_901234',
+        fileSize: 1024 * 50, // 50KB
+        fileExt: 'xlsx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        folderId: 'folder_002',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      }
     ]
   },
   {
-    name: '第三季度',
+    folderId: 'folder_003',
+    folderName: '第三季度',
+    parentId: '',
+    userName: '管理员',
+    loginCode: 'admin',
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString(),
+    isDeleted: 0,
+    description: '第三季度相关文档',
     expanded: false,
     children: [
-      { name: '业绩分析.pptx', type: 'file' },
-      { name: '预算规划.xlsx', type: 'file' },
-      { name: '工作总结.docx', type: 'file' }
+      { 
+        tid: 1005,
+        fileName: '业绩分析.pptx',
+        filePath: '/第三季度/业绩分析.pptx',
+        fileHash: 'md5_567890',
+        fileSize: 1024 * 300, // 300KB
+        fileExt: 'pptx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        folderId: 'folder_003',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      },
+      { 
+        tid: 1006,
+        fileName: '预算规划.xlsx',
+        filePath: '/第三季度/预算规划.xlsx',
+        fileHash: 'md5_234567',
+        fileSize: 1024 * 150, // 150KB
+        fileExt: 'xlsx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        folderId: 'folder_003',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      },
+      { 
+        tid: 1007,
+        fileName: '工作总结.docx',
+        filePath: '/第三季度/工作总结.docx',
+        fileHash: 'md5_890123',
+        fileSize: 1024 * 120, // 120KB
+        fileExt: 'docx',
+        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        folderId: 'folder_003',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      }
     ]
   },
   {
-    name: '临时文件',
+    folderId: 'folder_004',
+    folderName: '临时文件',
+    parentId: '',
+    userName: '管理员',
+    loginCode: 'admin',
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString(),
+    isDeleted: 0,
+    description: '临时文件',
     expanded: false,
     children: [
-      { name: '草稿.txt', type: 'file' },
-      { name: '截图.png', type: 'file' }
+      { 
+        tid: 1008,
+        fileName: '草稿.txt',
+        filePath: '/临时文件/草稿.txt',
+        fileHash: 'md5_456789',
+        fileSize: 1024 * 10, // 10KB
+        fileExt: 'txt',
+        mimeType: 'text/plain',
+        folderId: 'folder_004',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      },
+      { 
+        tid: 1009,
+        fileName: '截图.png',
+        filePath: '/临时文件/截图.png',
+        fileHash: 'md5_012345',
+        fileSize: 1024 * 500, // 500KB
+        fileExt: 'png',
+        mimeType: 'image/png',
+        folderId: 'folder_004',
+        userName: '管理员',
+        loginCode: 'admin',
+        downloadCount: 0,
+        viewCount: 0,
+        expireTime: '',
+        isDelete: 0,
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        type: 'file'
+      }
     ]
   }
 ]);
 
-const fileList = ref<FileItem[]>([]);
-const paths = ['项目文档/需求文档', '日常办公/周报汇总', '第三季度', '临时文件', '项目文档/设计稿'];
+// 重构文件列表数据，使用后端实体类字段
+const fileList = ref<BizMyfiles[]>([]);
+const folderPaths = ['folder_001', 'folder_002', 'folder_003', 'folder_004', 'folder_001_001'];
 const creators = ['张三', '李四', '王五', '赵六', '钱七'];
 
 // 初始化文件列表数据
 for (let i = 0; i < 50; i++) {
-  const randomPath = paths[Math.floor(Math.random() * paths.length)];
+  const randomFolderId = folderPaths[Math.floor(Math.random() * folderPaths.length)];
   const randomCreator = creators[Math.floor(Math.random() * creators.length)];
+  const randomSize = (Math.floor(Math.random() * 100) + 50) * 1024; // 转换为字节
   
   fileList.value.push({
-    name: `第三季度开始就大家思考爱睡觉的${i + 1}.docx`,
-    size: `${Math.floor(Math.random() * 100) + 50}kb`,
-    time: '2025-12-17 20:53',
-    path: randomPath,
-    creator: randomCreator
+    tid: 2000 + i,
+    fileName: `第三季度开始就大家思考爱睡觉的${i + 1}.docx`,
+    filePath: `/${randomFolderId}/第三季度开始就大家思考爱睡觉的${i + 1}.docx`,
+    fileHash: `md5_${Math.random().toString(16).substring(2, 10)}`,
+    fileSize: randomSize,
+    fileExt: 'docx',
+    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    folderId: randomFolderId,
+    userName: randomCreator,
+    loginCode: randomCreator.toLowerCase(),
+    downloadCount: 0,
+    viewCount: 0,
+    expireTime: '',
+    isDelete: 0,
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString()
   });
 }
 
-const toggleFolder = (targetFolder: FolderItem) => {
+// 文件大小格式化函数（字节转KB/MB）
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(0)}KB`;
+  } else {
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  }
+};
+
+const toggleFolder = (targetFolder: BizFolders) => {
   if (!targetFolder.expanded) {
     folderList.value.forEach(folder => {
       folder.expanded = false;
@@ -199,7 +468,7 @@ const toggleFolder = (targetFolder: FolderItem) => {
   }
 };
 
-const doubleClickFolder = (targetFolder: FolderItem) => {
+const doubleClickFolder = (targetFolder: BizFolders) => {
   if (targetFolder.expanded) {
     targetFolder.expanded = false;
   }
@@ -619,4 +888,4 @@ const doubleClickFolder = (targetFolder: FolderItem) => {
 * {
   box-sizing: border-box;
 }
-</style>
+</style>