新增待办信息

web-vue/packages/core/layouts/views/desktop/analysis/components/BizApps.vue

@@ -1,6 +1,15 @@
 <template>
 	<Card title="常用应用" class="common-app-card">
 	  <div class="app-list">
+	    <!-- 新增的文件管理项 -->
+	    <div class="app-item">
+	      <a-button type="link" size="small" @click="goToFileManager" class="app-btn">
+	        <img :src="FileImg" class="app-icon" />
+	      </a-button>
+	      <span class="app-text">文件管理</span>
+	    </div>
+	    
+	    <!-- 原有应用列表 -->
 	    <div class="app-item" v-for="(app, index) in appList" :key="index">
 	      <a-button type="link" size="small" @click="goToMorePage(app)" class="app-btn">
 	        <img :src="app.iconClass" class="app-icon" />
@@ -16,6 +25,8 @@ import { ref, onMounted } from 'vue';
 import { Card } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
 
+import FileImg from '@jeesite/assets/images/login-brand.png';
+
 import { BizQuickLogin, bizQuickLoginListAll } from '@jeesite/biz/api/biz/quickLogin';
 
 const appList = ref<BizQuickLogin[]>([]);
@@ -40,6 +51,10 @@ const goToMorePage = (app : BizQuickLogin) => {
   router.push(app.homepageUrl);
 };
 
+const goToFileManager = () => {
+  router.push('/desktop/myfiles');
+};
+
 onMounted(() => {
   const timer = setTimeout(() => {
     fetchAppList();

web-vue/packages/core/layouts/views/desktop/analysis/components/DynamicInfo.vue

@@ -86,7 +86,6 @@ export default defineComponent({
 	const [register, { openModal }] = useModal();
     // 服务器数据列表
     const listData = ref<BizServerInfo[]>([]);
-    const router = useRouter();
 
     // 获取数据列表
     const getDataList = async () => {

web-vue/packages/core/layouts/views/desktop/myfiles/components/folder.vue

@@ -0,0 +1,42 @@
+<template>
+	<BasicModal
+	  v-bind="$attrs"
+	  @register="register"
+	  title="新建文件夹"
+	  width="40%"
+	  @cancel="handleCancel"
+	>
+	</BasicModal>
+</template>
+
+<script lang="ts">
+	import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+	import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+	import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
+	
+	export default defineComponent({
+	  components: { BasicModal },
+	  emits: ['modalClose'], 
+	  setup(props, { emit }) {
+	  
+	    const { createMessage } = useMessage();
+	    // 模态框注册
+	    const [register, { closeModal }] = useModalInner(async (data: any) => {
+	      
+	    });
+		
+		const handleCancel = () => {
+		  emit('modalClose'); 
+		};
+	
+	    return {
+	      register,
+	      closeModal,
+		  handleCancel,
+	    };
+	  },
+	});
+</script>
+
+<style>
+</style>

web-vue/packages/core/layouts/views/desktop/myfiles/components/upload.vue

@@ -0,0 +1,42 @@
+<template>
+	<BasicModal
+	  v-bind="$attrs"
+	  @register="register"
+	  title="上传文件"
+	  width="40%"
+	  @cancel="handleCancel"
+	>
+	
+	</BasicModal>
+</template>
+
+<script lang="ts">
+	import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+	import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+	import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
+	
+	export default defineComponent({
+	  components: { BasicModal },
+	  emits: ['modalClose'], 
+	  setup(props, { emit }) {
+	    const { createMessage } = useMessage();
+	    // 模态框注册
+	    const [register, { closeModal }] = useModalInner(async (data: any) => {
+	      
+	    });
+		
+		const handleCancel = () => {
+		  emit('modalClose'); 
+		};
+	
+	    return {
+	      register,
+	      closeModal,
+		  handleCancel,
+	    };
+	  },
+	});
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,622 @@
+<template>
+  <div class="file-manager-container">
+    <div class="sidebar">
+      <div class="search-box-fixed">
+        <a-input
+          v-model:value="folderSearchText"
+          placeholder="文件夹搜索框"
+          class="folder-search-input"
+        />
+      </div>
+      <div class="tree-scroll-container">
+        <div class="tree-container">
+          <div 
+            class="tree-node folder-node" 
+            v-for="(folder, index) in folderList" 
+            :key="index"
+            @click="toggleFolder(folder)"
+            @dblclick="doubleClickFolder(folder)"
+            :class="{ active: folder.expanded }"
+          >
+            <div class="folder-info">
+              <span class="folder-icon">
+                <Icon 
+                  :icon="folder.expanded 
+                    ? 'ant-design:folder-open-filled' 
+                    : 'ant-design:folder-outlined'" 
+                  :color="folder.expanded ? '#FF9800' : '#FFB74D'"
+                />
+              </span>
+              <span class="folder-name">{{ folder.name }}</span>
+            </div>
+            <span class="tree-toggle">
+              <Icon 
+                :icon="folder.expanded ? 'simple-line-icons:arrow-down' : 'simple-line-icons:arrow-right'" 
+                style="margin-right: 4px;" 
+              />
+            </span>
+            <div class="tree-children" v-if="folder.expanded">
+              <div class="tree-node file-node" v-for="(child, idx) in folder.children" :key="idx">
+                <span class="file-icon">
+                  <Icon 
+                    :icon="child.type === 'folder' 
+                      ? 'simple-line-icons:folder' 
+                      : 'ant-design:file-outlined'" 
+                    class="icon-size"
+                  />
+                </span>
+                <span class="file-name">{{ child.name }}</span>
+                <span class="tree-toggle empty"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-content">
+      <div class="header-bar">
+        <a-input
+          v-model:value="fileSearchText"
+          placeholder="文件搜索框"
+          class="file-search-input"
+        />
+        <div class="header-btn-group">
+          <a-button type="default" class="header-btn" @click="openfolderModal(true, item)"><Icon icon="ant-design:folder-add-outlined" />新建文件夹</a-button>
+		  <a-button type="primary" class="header-btn" @click="openUploadModal(true, item)"><Icon icon="ant-design:cloud-upload-outlined" />上传文件</a-button>
+        </div>
+      </div>
+
+      <div class="file-list-wrapper">
+        <div class="file-list">
+          <Card
+            v-for="(file, index) in fileList"
+            :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.name">{{ file.name }}</span>
+                </div>
+                <span class="file-card-size">{{ file.size }}</span>
+              </div>
+              <div class="card-divider"></div>
+              <div class="file-card-actions">
+                <a-button type="link" size="small" ><Icon icon="ant-design:branches-outlined"/>共享</a-button>
+                <a-button type="link" size="small" ><Icon icon="ant-design:cloud-download-outlined"/>下载</a-button>
+                <a-button type="error" size="small" danger><Icon icon="ant-design:delete-filled"/>删除</a-button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </div>
+  <UploadModal @register="uploadregister" />
+  <FolderModal @register="folderregister" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { Input, Card } from 'ant-design-vue';
+import { Icon } from '@jeesite/core/components/Icon';
+import { useModal } from '@jeesite/core/components/Modal';
+import UploadModal from './components/upload.vue';
+import FolderModal from './components/folder.vue';
+
+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 FileItem {
+  name: string;
+  size: string;
+  time: string;
+  path: string;
+  creator: string;
+}
+
+const folderSearchText = ref<string>('');
+const fileSearchText = ref<string>('');
+
+const folderList = ref<FolderItem[]>([
+  {
+    name: '项目文档',
+    expanded: false,
+    children: [
+      { name: '需求文档', type: 'folder' },
+      { name: '设计稿', type: 'folder' },
+      { name: '开发规范.docx', type: 'file' },
+      { name: '接口文档.pdf', type: 'file' }
+    ]
+  },
+  {
+    name: '日常办公',
+    expanded: false,
+    children: [
+      { name: '周报汇总', type: 'folder' },
+      { name: '会议纪要.docx', type: 'file' },
+      { name: '考勤表.xlsx', type: 'file' }
+    ]
+  },
+  {
+    name: '第三季度',
+    expanded: false,
+    children: [
+      { name: '业绩分析.pptx', type: 'file' },
+      { name: '预算规划.xlsx', type: 'file' },
+      { name: '工作总结.docx', type: 'file' }
+    ]
+  },
+  {
+    name: '临时文件',
+    expanded: false,
+    children: [
+      { name: '草稿.txt', type: 'file' },
+      { name: '截图.png', type: 'file' }
+    ]
+  }
+]);
+
+const fileList = ref<FileItem[]>([]);
+const paths = ['项目文档/需求文档', '日常办公/周报汇总', '第三季度', '临时文件', '项目文档/设计稿'];
+const creators = ['张三', '李四', '王五', '赵六', '钱七'];
+
+// 初始化文件列表数据
+for (let i = 0; i < 50; i++) {
+  const randomPath = paths[Math.floor(Math.random() * paths.length)];
+  const randomCreator = creators[Math.floor(Math.random() * creators.length)];
+  
+  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
+  });
+}
+
+const toggleFolder = (targetFolder: FolderItem) => {
+  if (!targetFolder.expanded) {
+    folderList.value.forEach(folder => {
+      folder.expanded = false;
+    });
+    targetFolder.expanded = true;
+  }
+};
+
+const doubleClickFolder = (targetFolder: FolderItem) => {
+  if (targetFolder.expanded) {
+    targetFolder.expanded = false;
+  }
+};
+</script>
+
+<style scoped>
+/* 基础布局 */
+.file-manager-container {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #f0f8ff;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.sidebar {
+  width: 220px;
+  background: transparent;
+  border-right: 1px solid #e8f4f8;
+  padding: 0;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.search-box-fixed {
+  padding: 16px;
+  border-bottom: 1px solid #e8f4f8;
+  background: #f0f8ff;
+  z-index: 10;
+}
+
+.folder-search-input {
+  width: 100%;
+  border: 1px solid #b3d9f2;
+  border-radius: 4px;
+}
+
+/* 优化 tree-scroll-container 样式 */
+.tree-scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+  scrollbar-width: thin;
+  scrollbar-color: #b3d9f2 #f0f8ff;
+  /* 优化滚动体验 */
+  scroll-behavior: smooth;
+  /* 防止内容抖动 */
+  contain: layout paint;
+}
+
+.tree-scroll-container::-webkit-scrollbar {
+  width: 8px;
+}
+.tree-scroll-container::-webkit-scrollbar-track {
+  background: #f0f8ff;
+  border-radius: 4px;
+}
+.tree-scroll-container::-webkit-scrollbar-thumb {
+  background-color: #b3d9f2;
+  border-radius: 4px;
+  border: 2px solid #f0f8ff;
+}
+
+/* 优化滚动容器的交互体验 */
+.tree-scroll-container:hover::-webkit-scrollbar-thumb {
+  background-color: #91c8ee;
+}
+
+.tree-container {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.folder-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 6px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 4px 0;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #e8f4f8;
+  /* 优化过渡效果 */
+  transition: background-color 0.2s ease;
+}
+
+/* 优化文件夹节点激活状态 */
+.folder-node.active,
+.folder-node:hover {
+  background: #e8f4f8;
+}
+
+/* 展开状态的文件夹额外样式 */
+.folder-node.active {
+  background-color: #f5fafe;
+  border-left: 3px solid #1890ff;
+  padding-left: 3px;
+}
+
+.folder-info {
+  display: flex;
+  align-items: center;
+  flex: 1; 
+  overflow: hidden; 
+}
+
+.folder-node:last-child {
+  border-bottom: none;
+}
+
+.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;
+}
+
+.file-node:last-child {
+  border-bottom: none;
+}
+
+.file-node:hover {
+  background: #f5fafe;
+}
+
+.tree-toggle {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  text-align: center;
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: bold;
+  user-select: none;
+  flex-shrink: 0;
+  /* 优化切换图标过渡 */
+  transition: transform 0.2s ease;
+}
+
+/* 优化箭头图标旋转效果 */
+.tree-toggle .icon {
+  transition: transform 0.2s ease;
+}
+
+.tree-toggle.empty {
+  visibility: hidden;
+}
+
+.folder-icon, .file-icon {
+  margin: 0 6px;
+  font-size: 14px;
+  flex-shrink: 0;
+  /* 图标颜色区分 */
+  color: #1890ff;
+  transition: color 0.2s ease;
+}
+
+/* 展开文件夹图标颜色加深 */
+.folder-node.active .folder-icon,
+.folder-node:hover .folder-icon {
+  color: #096dd9;
+}
+
+.file-icon {
+  color: #668799;
+}
+
+.folder-name, .file-name {
+  font-size: 13px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-children {
+  margin-left: 24px;
+  margin-top: 2px;
+  width: 100%;
+  padding-bottom: 4px;
+  /* 优化子项展开动画 */
+  animation: fadeIn 0.2s ease;
+}
+
+/* 子项展开动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: 16px;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.file-search-input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid #b3d9f2;
+}
+
+.header-btn-group {
+  display: flex;
+  gap: 12px;
+}
+
+.header-btn {
+  white-space: nowrap;
+}
+
+.file-list-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #b3d9f2 #f0f8ff;
+  border-radius: 8px;
+  border: 1px solid #e8f4f8;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.file-list-wrapper::-webkit-scrollbar {
+  width: 8px;
+}
+.file-list-wrapper::-webkit-scrollbar-track {
+  background: #f0f8ff;
+  border-radius: 4px;
+}
+.file-list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #b3d9f2;
+  border-radius: 4px;
+  border: 2px solid #f0f8ff;
+}
+
+.file-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 核心修复：文件卡片样式 */
+.file-card {
+  background: #e8f4f8;
+  border: 1px solid #b3d9f2;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  height: 100px; /* 卡片总高度 */
+  padding: 0; /* 重置卡片默认padding */
+  overflow: hidden; /* 防止内容溢出 */
+}
+
+/* 卡片内部容器 - 控制所有内容的间距和布局 */
+.card-inner-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 0 4px; /* 左右内边距，上下通过内部元素控制 */
+}
+
+.file-card:hover {
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+/* 文件名区域 - 精准距顶部2px */
+.file-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 2px; /* 顶部2px间距 */
+  padding-bottom: 4px;
+  flex-shrink: 0;
+}
+
+.file-name-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.file-card-icon {
+  font-size: 18px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.file-card-name {
+  font-weight: 500;
+  color: #1890ff;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 40px);
+  cursor: default;
+}
+
+.file-card-size {
+  font-size: 12px;
+  color: #668799;
+  font-weight: 400;
+  flex-shrink: 0;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+/* 分割线样式 */
+.card-divider {
+  width: 100%;
+  height: 1px;
+  background-color: #b3d9f2;
+  opacity: 0.5;
+  margin: 0 0 4px 0; /* 仅底部留间距 */
+  flex-shrink: 0;
+}
+
+/* 按钮区域 - 在分割线下，距底部2px，完全在卡片内 */
+.file-card-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: auto; /* 自动填充剩余空间，靠底 */
+  margin-bottom: 2px; /* 距底部2px */
+  justify-content: flex-end; /* 靠右对齐 */
+  flex-shrink: 0;
+}
+
+.file-card-actions button {
+  color: #1890ff;
+  padding: 0;
+  height: auto;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 1; /* 重置按钮行高，避免超出 */
+}
+
+:deep(.file-card-actions .ant-btn-dangerous) {
+  color: #ff4d4f;
+}
+
+:deep(.ant-tooltip-inner) {
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #b3d9f2;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 200px;
+}
+
+/* 响应式调整 */
+@media (max-width: 1400px) {
+  .file-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1200px) {
+  .file-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .file-card {
+    height: 90px;
+  }
+}
+
+@media (max-width: 768px) {
+  .file-list {
+    grid-template-columns: 1fr;
+  }
+  
+  .file-card {
+    height: 100px;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+</style>

web-vue/packages/core/locales/lang/en/routes/dashboard.ts

@@ -3,4 +3,5 @@ export default {
   about: 'About',
   workbench: 'Workbench',
   analysis: 'Analysis',
+  files:'files'
 };

web-vue/packages/core/locales/lang/zh-CN/routes/dashboard.ts

@@ -3,4 +3,5 @@ export default {
   workbench: '我的工作',
   analysis: '首页',
   about: '关于我们',
+  files: '文件管理'
 };

web-vue/packages/core/router/routes/modules/desktop.ts

@@ -19,7 +19,6 @@ const desktop: AppRouteModule = {
       name: 'Analysis',
       component: () => import('@jeesite/core/layouts/views/desktop/analysis/index.vue'),
       meta: {
-        // affix: true,
         icon: 'i-ant-design:home-outlined',
         tabIcon: 'i-ant-design:home-outlined',
         title: t('routes.dashboard.analysis'),
@@ -44,6 +43,16 @@ const desktop: AppRouteModule = {
         hideMenu: true,
       },
     },
+	{
+	  path: 'myfiles',
+	  name: 'MyfilePage',
+	  component: () => import('@jeesite/core/layouts/views/desktop/myfiles/index.vue'),
+	  meta: {
+	    title: t('routes.dashboard.files'),
+	    icon: 'i-ant-design:tag-outlined',
+	    hideMenu: true,
+	  },
+	},
   ],
 };