新增前端vue

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

@@ -10,10 +10,11 @@
       </div>
       <div class="tree-scroll-container">
         <div class="tree-container">
+          <!-- 顶级文件夹节点 -->
           <div 
             class="tree-node folder-node" 
             v-for="(folder, index) in folderList" 
-            :key="folder.folderId"
+            :key="index"
             @click="toggleFolder(folder)"
             @dblclick="doubleClickFolder(folder)"
             :class="{ active: folder.expanded }"
@@ -27,7 +28,7 @@
                   :color="folder.expanded ? '#FF9800' : '#FFB74D'"
                 />
               </span>
-              <span class="folder-name">{{ folder.folderName }}</span>
+              <span class="folder-name">{{ folder.name }}</span>
             </div>
             <span class="tree-toggle">
               <Icon 
@@ -35,8 +36,14 @@
                 style="margin-right: 4px;" 
               />
             </span>
+            <!-- 子节点容器：移除多余的 tree-toggle 元素 -->
             <div class="tree-children" v-if="folder.expanded">
-              <div class="tree-node file-node" v-for="(child, idx) in folder.children" :key="idx">
+              <div 
+                class="tree-node file-node" 
+                v-for="(child, idx) in folder.children" 
+                :key="idx"
+                @click.stop="handleChildClick(child)"
+              >
                 <span class="file-icon">
                   <Icon 
                     :icon="child.type === 'folder' 
@@ -45,8 +52,8 @@
                     class="icon-size"
                   />
                 </span>
-                <span class="file-name">{{ child.type === 'folder' ? child.folderName : child.fileName }}</span>
-                <span class="tree-toggle empty"></span>
+                <span class="file-name">{{ child.name }}</span>
+                <!-- 移除：<span class="tree-toggle empty"></span> -->
               </div>
             </div>
           </div>
@@ -71,18 +78,17 @@
         <div class="file-list">
           <Card
             v-for="(file, index) in fileList"
-            :key="file.tid"
+            :key="index"
             class="file-card"
             :hoverable="true"
           >
             <div class="card-inner-content">
-              <!-- 文件名区域 - 距顶部2px -->
               <div class="file-card-header">
                 <div class="file-name-wrap">
                   <span class="file-card-icon">📄</span>
-                  <span class="file-card-name" :title="file.fileName">{{ file.fileName }}</span>
+                  <span class="file-card-name" :title="file.name">{{ file.name }}</span>
                 </div>
-                <span class="file-card-size">{{ formatFileSize(file.fileSize) }}</span>
+                <span class="file-card-size">{{ file.size }}</span>
               </div>
               <div class="card-divider"></div>
               <div class="file-card-actions">
@@ -101,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { message } from 'ant-design-vue';
 import { Input, Card } from 'ant-design-vue';
 import { Icon } from '@jeesite/core/components/Icon';
@@ -113,354 +119,91 @@ const item = ref();
 const [uploadregister, { openModal: openUploadModal }] = useModal();
 const [folderregister, { openModal: openfolderModal }] = useModal();
 
-// 定义与后端实体类对应的类型接口
-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 FolderItem {
+  name: string;
+  expanded: boolean;
+  children: Array<{
+    name: string;
+    type: 'folder' | 'file';
+  }>;
 }
 
-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;      // 更新时间
+interface FileItem {
+  name: string;
+  size: string;
+  time: string;
+  path: string;
+  creator: string;
 }
 
 const folderSearchText = ref<string>('');
 const fileSearchText = ref<string>('');
 
-// 重构文件夹列表数据，使用后端实体类字段
-const folderList = ref<BizFolders[]>([
+const folderList = ref<FolderItem[]>([
   {
-    folderId: 'folder_001',
-    folderName: '项目文档',
-    parentId: '',
-    userName: '管理员',
-    loginCode: 'admin',
-    createTime: new Date().toISOString(),
-    updateTime: new Date().toISOString(),
-    isDeleted: 0,
-    description: '项目相关文档',
+    name: '项目文档',
     expanded: false,
     children: [
-      { 
-        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: '需求文档', type: 'folder' },
+      { name: '设计稿', type: 'folder' },
+      { name: '开发规范.docx', type: 'file' },
+      { name: '接口文档.pdf', type: 'file' }
     ]
   },
   {
-    folderId: 'folder_002',
-    folderName: '日常办公',
-    parentId: '',
-    userName: '管理员',
-    loginCode: 'admin',
-    createTime: new Date().toISOString(),
-    updateTime: new Date().toISOString(),
-    isDeleted: 0,
-    description: '日常办公文档',
+    name: '日常办公',
     expanded: false,
     children: [
-      { 
-        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: '周报汇总', type: 'folder' },
+      { name: '会议纪要.docx', type: 'file' },
+      { name: '考勤表.xlsx', type: 'file' }
     ]
   },
   {
-    folderId: 'folder_003',
-    folderName: '第三季度',
-    parentId: '',
-    userName: '管理员',
-    loginCode: 'admin',
-    createTime: new Date().toISOString(),
-    updateTime: new Date().toISOString(),
-    isDeleted: 0,
-    description: '第三季度相关文档',
+    name: '第三季度',
     expanded: false,
     children: [
-      { 
-        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: '业绩分析.pptx', type: 'file' },
+      { name: '预算规划.xlsx', type: 'file' },
+      { name: '工作总结.docx', type: 'file' }
     ]
   },
   {
-    folderId: 'folder_004',
-    folderName: '临时文件',
-    parentId: '',
-    userName: '管理员',
-    loginCode: 'admin',
-    createTime: new Date().toISOString(),
-    updateTime: new Date().toISOString(),
-    isDeleted: 0,
-    description: '临时文件',
+    name: '临时文件',
     expanded: false,
     children: [
-      { 
-        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'
-      }
+      { name: '草稿.txt', type: 'file' },
+      { name: '截图.png', type: 'file' }
     ]
   }
 ]);
 
-// 重构文件列表数据，使用后端实体类字段
-const fileList = ref<BizMyfiles[]>([]);
-const folderPaths = ['folder_001', 'folder_002', 'folder_003', 'folder_004', 'folder_001_001'];
+const fileList = ref<FileItem[]>([]);
+const paths = ['项目文档/需求文档', '日常办公/周报汇总', '第三季度', '临时文件', '项目文档/设计稿'];
 const creators = ['张三', '李四', '王五', '赵六', '钱七'];
 
 // 初始化文件列表数据
 for (let i = 0; i < 50; i++) {
-  const randomFolderId = folderPaths[Math.floor(Math.random() * folderPaths.length)];
+  const randomPath = paths[Math.floor(Math.random() * paths.length)];
   const randomCreator = creators[Math.floor(Math.random() * creators.length)];
-  const randomSize = (Math.floor(Math.random() * 100) + 50) * 1024; // 转换为字节
   
   fileList.value.push({
-    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()
+    name: `第三季度开始就大家思考爱睡觉的${i + 1}.docx`,
+    size: `${Math.floor(Math.random() * 100) + 50}kb`,
+    time: '2025-12-17 20:53',
+    path: randomPath,
+    creator: randomCreator
   });
 }
 
-// 文件大小格式化函数（字节转KB/MB）
-const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) {
-    return `${bytes}B`;
-  } else if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(0)}KB`;
+// 顶级文件夹切换逻辑：仅处理顶级文件夹的展开/关闭
+const toggleFolder = (targetFolder: FolderItem) => {
+  if (targetFolder.expanded) {
+    // 关闭当前顶级文件夹
+    targetFolder.expanded = false;
   } else {
-    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-  }
-};
-
-const toggleFolder = (targetFolder: BizFolders) => {
-  if (!targetFolder.expanded) {
+    // 先关闭所有顶级文件夹，再展开当前
     folderList.value.forEach(folder => {
       folder.expanded = false;
     });
@@ -468,11 +211,22 @@ const toggleFolder = (targetFolder: BizFolders) => {
   }
 };
 
-const doubleClickFolder = (targetFolder: BizFolders) => {
-  if (targetFolder.expanded) {
-    targetFolder.expanded = false;
+// 子节点点击处理函数
+const handleChildClick = (child: { name: string; type: 'folder' | 'file' }) => {
+  // 可以根据子节点类型添加自定义逻辑
+  if (child.type === 'folder') {
+    message.info(`点击了子文件夹：${child.name}`);
+    // 如需展开子文件夹，可在这里扩展逻辑
+  } else {
+    message.info(`点击了文件：${child.name}`);
+    // 比如打开文件预览、加载文件详情等
   }
 };
+
+// 双击顶级文件夹逻辑
+const doubleClickFolder = (targetFolder: FolderItem) => {
+  message.info(`正在打开「${targetFolder.name}」文件夹`);
+};
 </script>
 
 <style scoped>
@@ -518,9 +272,7 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   padding: 8px 0;
   scrollbar-width: thin;
   scrollbar-color: #b3d9f2 #f0f8ff;
-  /* 优化滚动体验 */
   scroll-behavior: smooth;
-  /* 防止内容抖动 */
   contain: layout paint;
 }
 
@@ -557,7 +309,6 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   margin: 4px 0;
   flex-wrap: wrap;
   border-bottom: 1px solid #e8f4f8;
-  /* 优化过渡效果 */
   transition: background-color 0.2s ease;
 }
 
@@ -588,13 +339,13 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
 .file-node {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 6px 4px;
   cursor: pointer;
   border-radius: 4px;
   margin: 2px 0;
   border-bottom: 1px dashed #e8f4f8;
   transition: background-color 0.2s ease;
+  /* 移除 justify-content: space-between，避免内容分散 */
 }
 
 .file-node:last-child {
@@ -615,7 +366,6 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   font-weight: bold;
   user-select: none;
   flex-shrink: 0;
-  /* 优化切换图标过渡 */
   transition: transform 0.2s ease;
 }
 
@@ -624,15 +374,12 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   transition: transform 0.2s ease;
 }
 
-.tree-toggle.empty {
-  visibility: hidden;
-}
+/* 移除无用的 empty 类样式 */
 
 .folder-icon, .file-icon {
   margin: 0 6px;
   font-size: 14px;
   flex-shrink: 0;
-  /* 图标颜色区分 */
   color: #1890ff;
   transition: color 0.2s ease;
 }
@@ -653,6 +400,8 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* 子文件名占满剩余空间 */
+  flex: 1;
 }
 
 .tree-children {
@@ -660,7 +409,6 @@ const doubleClickFolder = (targetFolder: BizFolders) => {
   margin-top: 2px;
   width: 100%;
   padding-bottom: 4px;
-  /* 优化子项展开动画 */
   animation: fadeIn 0.2s ease;
 }