Merge remote-tracking branch 'origin/v3' into v3

src/api/myfile/myfile.js

@@ -2,7 +2,7 @@ import request from "../../../src/utils/request"
 // 查询文档目录管理列表
 function get(data) {
     return request({
-        url: "/biz/dir/list",
+        url: "/biz/info/list",
         method: "get",
         params: data
     })

src/assets/fonts/font.css

@@ -15,4 +15,10 @@
     src: url('Inter-SemiBold-10.otf');
     font-weight: normal;
     font-style: normal;
+  }
+  @font-face {
+    font-family: "Inter-Medium";
+    src: url('Inter-Medium-8.otf');
+    font-weight: normal;
+    font-style: normal;
   }

src/components/TopNav/index.vue

@@ -12,7 +12,7 @@
       >
     </template>
 
-    <!-- 顶部菜单超出数量折叠 -->
+    顶部菜单超出数量折叠
     <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">

src/layout/components/Sidebar/Link.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 首页和我的文件 -->
   <component :is="type" v-bind="linkProps()">
     <slot />
   </component>

src/layout/components/Sidebar/Logo.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 头部标题不需要ll -->
   <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" />头部标题不需要ll-->
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"

src/layout/index2.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+export default {
+  name: 'index2',
+}
+</script>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+</script>
+
+<template>
+  <div>
+    会话
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/layout/indexCommon.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header class="nav">
+        <div class="nav-top">
+          <div>
+            <img src="@/assets/images/logos.png" /><span>DOMINO'S File</span>
+          </div>
+          <div class="search">
+            <el-input
+              v-model="input3"
+              class="w-50 m-2"
+              size="small"
+              suffix-icon="Search"
+            />
+          </div>
+          <div>
+            <el-dropdown
+              @command="handleCommand"
+              class="right-menu-item hover-effect"
+              trigger="click"
+            >
+              <div class="avatar-wrapper">
+                <img src="@/assets/images/profile.jpg" class="head-img" /><span
+                  >Cat container</span
+                >
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item divided command="logout">
+                    <span>退出登录</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside width="120px" class="asides">
+          <div class="aside-con">
+            <router-link
+              :to="item.path"
+              v-for="(item, index) in menuList.data"
+              :key="index"
+              @click="clickPath(index)"
+              ><div
+                :class="
+                  clickId == index ? 'acitve-img-style img-style' : 'img-style'
+                "
+              >
+                <img :src="clickId == index ? item.beimgs : item.imgs" />
+                <div class="text-style" v-if="clickId != index">
+                  {{ item.label }}
+                </div>
+              </div> </router-link
+            ><br />
+          </div>
+        </el-aside>
+        <el-main class="main">
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+import Breadcrumb from '@/components/Breadcrumb'
+import TopNav from '@/components/TopNav'
+import Hamburger from '@/components/Hamburger'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import HeaderSearch from '@/components/HeaderSearch'
+import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiDoc from '@/components/RuoYi/Doc'
+import useAppStore from '@/store/modules/app'
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'
+
+
+import chat from "@/assets/images/chat.png";
+import bechat from "@/assets/images/bechat.png";
+import zuijin from "@/assets/images/zuijin.png";
+import bezuijin from "@/assets/images/bezuijin.png";
+import colloect from "@/assets/images/colloect.png";
+import becolloect from "@/assets/images/becolloect.png";
+import my from "@/assets/images/my.png";
+import bemy from "@/assets/images/bemy.png";
+import bumen from "@/assets/images/bumen.png";
+import bebumen from "@/assets/images/bebumen.png";
+import common from "@/assets/images/common.png";
+import becommon from "@/assets/images/becommon.png";
+import chuanshu from "@/assets/images/chuanshu.png";
+import bechuanshu from "@/assets/images/bechuanshu.png";
+import { AppMain, Navbar, Settings, TagsView } from "./components";
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+
+function toggleSideBar() {
+  appStore.toggleSideBar()
+}
+
+function handleCommand(command) {
+  switch (command) {
+    case "setLayout":
+      setLayout();
+      break;
+    case "logout":
+      logout();
+      break;
+    default:
+      break;
+  }
+}
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      location.href = '/index';
+    })
+  }).catch(() => { });
+}
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+  emits('setLayout');
+}
+const clickId = ref("0");
+const menuList = reactive({
+  data: [
+    {
+      label: "会话消息",
+      path: "/index",
+      imgs: chat,
+      beimgs: bechat,
+    },
+    {
+      label: "接口",
+      path: "/swagger",
+      imgs: chat,
+      beimgs: bechat,
+    },
+    {
+      label: "最近文件",
+      path: "/swagger",
+      imgs: zuijin,
+      beimgs: bezuijin,
+    },
+    {
+      label: "收藏文件",
+      path: "/swagger",
+      imgs: colloect,
+      beimgs: becolloect,
+    },
+    {
+      label: "我的文件",
+      path: "/swagger",
+      imgs: my,
+      beimgs: bemy,
+    },
+    {
+      label: "部门文件",
+      path: "/swagger",
+      imgs: bumen,
+      beimgs: bebumen,
+    },
+    {
+      label: "公共文件",
+      path: "/swagger",
+      imgs: common,
+      beimgs: becommon,
+    },
+    {
+      label: "传输列表",
+      path: "/swagger",
+      imgs: chuanshu,
+      beimgs: bechuanshu,
+    },
+  ],
+});
+
+const clickPath = (index) => {
+  clickId.value = index;
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
+//整体布局css
+.common-layout,
+.el-container {
+  height: 100vh;
+}
+.nav {
+  background: #06286c;
+  height: 48px;
+  .nav-top {
+    width: 98%;
+    margin-left: 1%;
+    display: flex;
+    justify-content: space-between;
+    & > div:first-child,
+    & > div:last-child {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      & > img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+  .head-img {
+    border-radius: 12px;
+    width: 24px;
+    height: 24px;
+    margin-right:10px;
+  }
+  .avatar-wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .search {
+    .w-50,
+    :deep .el-input {
+      width: 400px;
+      height: 32px;
+      margin-top: 8px;
+      background: #6f85b5 !important;
+    }
+  }
+  :deep .el-input__wrapper {
+    background: #1f3f7e !important;
+  }
+}
+.asides {
+  font-size: 14px;
+  color: #000;
+  background: #fff;
+}
+.main {
+  background: #c7cbd8;
+}
+//侧边栏css
+.acitve-img-style {
+  background-color: #f5f7f9;
+}
+.img-style {
+  width: 72px;
+  height: 72px;
+  display: flex;
+  margin-bottom: 8px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  & > img {
+    width: 40px;
+    height: 40px;
+  }
+}
+.text-style {
+  text-align: center;
+  color: #000;
+}
+</style>

src/permission.js

@@ -15,6 +15,7 @@ const whiteList = ['/login', '/register'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
+  console.log(to)
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
     /* has token*/

src/router/index.js

@@ -1,7 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
-
+import main from '@/layout/components/AppMain.vue'
 /**
  * Note: 路由配置项
  *
@@ -59,19 +59,27 @@ export const constantRoutes = [
   },
   {
     path: '',
-    component: Layout,
+    component: () => import('@/layout/indexCommon.vue'),
     redirect: '/index',
+    hidden:true,
     children: [
       {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
+        path: 'index',
+        component: () => import('@/layout/index2.vue'),
+        name: 'index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       },
+      {
+        path:'swagger',
+        component:() => import('@/views/tool/swagger/index.vue'),
+        name:'swagger',
+        meta:{ title:'接口',icon: 'dashboard' },
+        
+      }
     ]
   },
   {
-    path: '',
+    path: '/file',
     component: Layout,
     redirect: '/index',
     children: [
@@ -98,6 +106,26 @@ export const constantRoutes = [
       },
     ]
   },
+  // {
+  //   path: '/indexCommons',
+  //   hidden: true,
+  //   component: () => import('@/views/indexcommon/index'),
+  //   redirect: '/indexCommon',
+  //   children: [
+  //     {
+  //       path: '/indexCommon',
+  //       component: () => import('@/views/indexcommon/hhxx'),
+  //       name: 'Dashboard',
+  //       meta: { title: '会话消息', icon: 'dashboard', affix: true },
+  //     },
+  //     {
+  //       path: "/myfile",
+  //       component: () => import("@/views/myfile/MyFile"),
+  //       name: "myfile",
+  //       meta: { title: "我的文件", icon: "myfile" }
+  //     },
+  //   ]
+  // },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views/biz/recent/index.vue

@@ -1,241 +1,275 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['biz:recent:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['biz:recent:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['biz:recent:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['biz:recent:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="recentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增ID" align="center" prop="recentId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:recent:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:recent:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改最近文件对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="recentRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="是否文件夹" prop="isFolder">
-          <el-select v-model="form.isFolder" placeholder="请选择是否文件夹">
-            <el-option
-              v-for="dict in sys_yes_no"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="文件夹/文档ID" prop="relaId">
-          <el-input v-model="form.relaId" placeholder="请输入文件夹/文档ID" />
-        </el-form-item>
-        <el-form-item label="所有人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入所有人" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+  <div>
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <div v-if="isList">
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="../../../assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+      </div>
+      <div v-else>
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="../../../assets/images/fileBox.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="../../../assets/images/fileType//file／DOC.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+      </div>
+    </el-collapse>
   </div>
 </template>
 
-<script setup name="Recent">
-import { listRecent, getRecent, delRecent, addRecent, updateRecent } from "@/api/biz/recent";
-
-const { proxy } = getCurrentInstance();
-const { sys_yes_no } = proxy.useDict('sys_yes_no');
-
-const recentList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  },
-  rules: {
-  }
+<script setup>
+import { onMounted, ref } from "vue";
+import { listRecent } from "../../../api/biz/recent";
+const activeNames = ref(["folder", "file"]);
+const isList = ref(false); //控制显示方式
+onMounted(() => {
+  getList();
 });
+const getList = async () => {
+  const res = await listRecent();
+  console.log("res = ", res);
+};
+const handleChange = (val) => {
+  // console.log(val);
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+];
+</script>
 
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询最近文件列表 */
-function getList() {
-  loading.value = true;
-  listRecent(queryParams.value).then(response => {
-    recentList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+<style lang="scss" scoped>
+.table_icon {
+  height: 27px;
+  width: 27px;
+  vertical-align: middle;
 }
-
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
 }
-
-// 表单重置
-function reset() {
-  form.value = {
-    recentId: null,
-    isFolder: null,
-    relaId: null,
-    owner: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null,
-    remark: null
-  };
-  proxy.resetForm("recentRef");
+::v-deep .el-collapse-item__header {
+  background-color: #ebeff6 !important;
+  width: 100% !important;
+  height: 24px !important;
 }
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+::v-deep .el-collapse-item__arrow {
+  position: relative;
+  color: #2e6bc8;
+  right: 97%;
 }
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+::v-deep .el-table td.el-table__cell {
+  border: none;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #000 !important;
 }
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.recentId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+::v-deep .el-table__row {
+  height: 35px !important;
 }
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加最近文件";
+::v-deep .el-table .el-table__header-wrapper th {
+  border-bottom: none;
+  border-right: 1px solid #c1cce3;
+  background-color: #fff !important;
+  color: #505870;
+  font-size: 14px;
 }
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const _recentId = row.recentId || ids.value
-  getRecent(_recentId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改最近文件";
-  });
+.collapseItem_title {
+  position: relative;
+  left: 40px;
+  color: #2e6bc8;
+  font-family: Inter-Medium;
+  font-size: 12px;
 }
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["recentRef"].validate(valid => {
-    if (valid) {
-      if (form.value.recentId != null) {
-        updateRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addRecent(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+// 表格右边3个靠右对齐
+::v-deep .el-table__header thead tr th {
+  font-family: Inter-Medium;
+  font-size: 14px;
+  color: #505870;
+  text-align: right;
+  &:nth-child(1) {
+    text-align: left;
+  }
 }
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _recentIds = row.recentId || ids.value;
-  proxy.$modal.confirm('是否确认删除最近文件编号为"' + _recentIds + '"的数据项？').then(function() {
-    return delRecent(_recentIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+::v-deep .el-table__body tbody [class*="column_2"] {
+  text-align: right;
 }
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('biz/recent/export', {
-    ...queryParams.value
-  }, `recent_${new Date().getTime()}.xlsx`)
+::v-deep .el-table__body tbody [class*="column_3"] {
+  text-align: right;
 }
-
-getList();
-</script>
+::v-deep .el-table__body tbody [class*="column_4"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_6"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_7"] {
+  text-align: right;
+}
+::v-deep .el-table__body tbody [class*="column_8"] {
+  text-align: right;
+}
+//平铺
+.tile_box {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-wrap: wrap;
+  .file_box {
+    width: 116px;
+    min-height: 138px;
+    // border: 1px solid #000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .big_file_img {
+      width: 100px;
+      height: 100px;
+    }
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -226,15 +226,16 @@ getCookie();
   display: flex;
   // justify-content: center;
   // align-items: center;
-  width: 100%;
+  width: 100vw;
   height: 100%;
 }
 .img_box {
   height: 100%;
-  width: 640px;
-  background-image: url("../assets/images/Rectangle 229.png");
+  width: 50%;
+  background-image: url("../assets/images/login_big.png");
+  // background-image: url("../assets/images/Rectangle 229.png");
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size:100% 100%;
 }
 .login_box {
   .center_box {

src/views/myfile/MyFile.vue

@@ -4,13 +4,202 @@
             <div class="settingBox">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
-                    <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件">
-                    </el-input>
-                    <el-icon style="font-size: 24px;">
-                        <Plus />
-                    </el-icon>
+                    <div style="position: relative;">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
+                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
+                            <Search />
+                        </el-icon>
+                    </div>
+                    <div>
+                        <el-icon style="font-size: 24px;">
+                            <Plus />
+                        </el-icon>
+                    </div>
+                </div>
+                <!-- 方块点击盒子 -->
+                <div
+                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 540px;">
+                    <!-- v-for盒子 -->
+                    <div class="setBox" @click="changeFile">
+                        <el-dropdown trigger="click" class="selectChe">
+                            <span class="el-dropdown-link">
+                                ...
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>重命名</el-dropdown-item>
+                                    <el-dropdown-item>删除</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
+                        <p>xxx文件</p>
+                    </div>
+                </div>
+                <div>
+                    <p>
+                        <span style="margin-left: 10px;">5G/1T</span>
+                        <span style="margin-left: 10rem;font-size: 12px;color: blue;cursor: pointer;"
+                            @click="askApply">申请扩容</span>
+                    </p>
+                    <el-progress style="margin-left: 8px;" :percentage="50" />
                 </div>
             </div>
+            <!-- 右侧大盒子 -->
+            <div class="mesBox">
+                <!-- 功能盒子  -->
+                <div class="useBox">
+                    <!-- table切换 -->
+                    <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
+                        <template v-for="(item, index) in menuList">
+                            <span @click="tableChange(item, index)"
+                                :class="['tables', { tableLis: selectedIndex === index }]">
+                                {{ item.name }}
+                                <img v-if="selectedIndex === index ? true : false"
+                                    style="position: absolute;top: 4px;right: 4px;" src="../../assets/images/close.png"
+                                    @click="shotdown(item)">
+                            </span>
+                        </template>
+                    </div>
+                    <!-- 众多功能 -->
+                    <div class="manyUse">
+                        <div
+                            style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
+                            <div style="margin-left: 5px;">
+                                <el-icon
+                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;">
+                                    <Plus />
+                                </el-icon>
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <span style="font-size: 14px;">新建</span>
+                            </div>
+                        </div>
+                        <template v-for="(item, index) in useMenu">
+                            <div
+                                style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                                <div style="margin-left: 5px;">
+                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
+                                </div>
+                                <div style="margin-left: 5px;">
+                                    <span style="font-size: 14px;">{{ item.name }}</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div
+                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;">上传
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 面包屑功能栏 -->
+                    <div class="breadBox">
+                        <!-- 左侧 -->
+                        <div style="display: flex;justify-content: space-around;align-items: center;">
+                            <!-- 前进后退 -->
+                            <div style="display: flex;justify-content: space-around;align-items: center;">
+                                <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt="">
+                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
+                            </div>
+                            <!-- 面包屑 -->
+                            <div>
+                                <el-breadcrumb separator="/">
+                                    <el-breadcrumb-item style="font-size: 12px;">homepage</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion management</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion detail</el-breadcrumb-item>
+                                </el-breadcrumb>
+                            </div>
+                        </div>
+                        <!-- 右侧 -->
+                        <div>
+                            <img :src="sort" alt="">
+                            <img :src="squre" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!-- 展示文件夹盒子 -->
+                <div>
+                    <!-- 文件夹 -->
+                    <div class="detailBox">
+                        <el-collapse v-model="folder" accordion class="collapse">
+                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
+
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    <!-- 文件 -->
+                    <div class="fileTable">
+                        <el-collapse v-model="files" accordion class="collapse">
+                            <el-collapse-item title="文件" name="2" class="custom-collapse-item">
+                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
+                                    <el-table-column label="Image" width="100">
+                                        <template slot-scope="scope">
+                                            <!-- 插入固定图片 -->
+                                            <span>1</span>
+                                            <img :src="fileBox" alt=""/>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="date" label="Date" width="180" />
+                                    <el-table-column prop="name" label="Name" width="180" />
+                                    <el-table-column prop="address" label="Address" />
+                                </el-table>
+                                <div class="setCli" v-if="cliCC">
+                                    <template v-for="(item, index) in mouseCli">
+                                        <p @click="chooseSet(item, index)" class="chooseSet">
+                                            <img :src="item.img" alt="">
+                                            {{ item.name }}
+                                            <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
+                                                style="color: #7084B4;float: right;">></span>
+                                        </p>
+                                    </template>
+                                </div>
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                </div>
+            </div>
+            <!-- 扩容弹窗 -->
+            <div>
+                <el-dialog v-model="askTo" header="扩容申请" width="30%">
+                    <el-form>
+                        <el-form-item label="新容量">
+                            <el-input-number v-model="askNum" :min="1" :max="10" />
+                        </el-form-item>
+                        <el-form-item label="申请理由">
+                            <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
+                                type="textarea" />
+                        </el-form-item>
+                    </el-form>
+                    <template #footer>
+                        <span class="dialog-footer">
+                            <el-button @click="askTo = false">取消</el-button>
+                            <el-button type="primary" @click="sureAsk">
+                                确定
+                            </el-button>
+                        </span>
+                    </template>
+                </el-dialog>
+            </div>
         </div>
     </div>
 </template>
@@ -19,44 +208,394 @@
 import { ref } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import { Search } from '@element-plus/icons-vue'
+import copy from '../../assets/images/copy.png'
+import clipboard from '../../assets/images/clipboard.png'
+import share from '../../assets/images/share.png'
+import trash from '../../assets/images/trash.png'
+import file from '../../assets/images/file.png'
+import folder from '../../assets/images/folder.png'
+import image from '../../assets/images/image.png'
+import filmSlate from '../../assets/images/filmSlate.png'
+import musicNotes from '../../assets/images/musicNotes.png'
+import blueLeft from '../../assets/images/blueLeft.png'
+import grayRight from "../../assets/images/grayRight.png"
+import sort from '../../assets/images/sort.png'
+import squre from '../../assets/images/squre.png'
+import addolder from '../../assets/images/addolder.png'
+import textbox from '../../assets/images/textbox.png'
+import goon from '../../assets/images/goon.png'
+import notePencil from '../../assets/images/notePencil.png'
+import togger from '../../assets/images/togger.png'
+import icc from '../../assets/images/icc.png'
+import history from '../../assets/images/history.png'
+import fileBox from '../../assets/images/fileBox.png'
 export default {
     setup() {
-        let tableList = ref([])
         let searchFire = ref('')
-        const getAll = () => {
+        let selectedIndex = ref(0)
+        let folder = ref(['1'])
+        let files = ref(['2'])
+        let folderList = ref([])
+        let askTo = ref(false)
+        let askNum = ref(1)
+        let askTalk = ref('')
+        let cliCC = ref(false)
+        let fileList = ref([
+            {
+                date: '2016-05-03',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-02',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-04',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-01',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+        ])
+        let menuList = ref([
+            {
+                name: "标签1",
+                choose: "1"
+            },
+            {
+                name: "标签2",
+                choose: "2"
+            },
+        ])
+        let useMenu = ref([
+            {
+                img: copy,
+                name: "复制"
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: share,
+                name: "分享给"
+            },
+            {
+                img: trash,
+                name: "删除"
+            },
+        ])
+        let arrorMenu = ref([
+            {
+                img: file,
+                name: "文件"
+            },
+            {
+                img: folder,
+                name: '文件夹'
+            },
+            {
+                img: image,
+                name: "图片"
+            },
+            {
+                img: filmSlate,
+                name: "视频"
+            },
+            {
+                img: musicNotes,
+                name: "音频"
+            }
+        ])
+        let mouseCli = ref([
+            {
+                img: addolder,
+                name: "移动",
+            },
+            {
+                img: copy,
+                name: "复制",
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: textbox,
+                name: "重命名"
+            },
+            {
+                img: goon,
+                name: "发送"
+            },
+            {
+                img: share,
+                name: "分享"
+            },
+            {
+                img: notePencil,
+                name: "在线编辑"
+            },
+            {
+                img: togger,
+                name: "协作"
+            },
+            {
+                img: icc,
+                name: "文字识别"
+            },
+            {
+                img: history,
+                name: "历史版本"
+            },
+            {
+                img: share,
+                name: "删除"
+            }
+        ])
+        function getAll() {
             myfile.get().then(res => {
                 console.log(res, 'eee');
             })
         }
+        function changeFile(row) {
+
+        }
+        // tableMenu切换
+        function tableChange(row, num) {
+            this.selectedIndex = num
+        }
+        // x图标事件
+        function shotdown(row) {
+            this.menuList = this.menuList.filter(item => item.name !== row.name)
+        }
+        // 文件名表格每一行点击事件
+        function handleRowClick(row) {
+            cliCC.value = true
+        }
+        // 申请扩容
+        function askApply() {
+            this.askTo = true
+        }
+        function sureAsk() {
+            this.askTo = false
+        }
+        //mouse弹框
+        function chooseSet(row, num) {
+            if (row.name == '在线编辑' || row.name == '协作') {
+                cliCC.value = true
+            } else {
+                cliCC.value = false
+            }
+        }
         return {
-            tableList,//定义的数据
+            folderList,//文件夹的数据
+            fileList,//文件夹的数据
             getAll,//拿到数据的方法
             searchFire,//搜索文件的model
+            changeFile,//切换右侧视图的file
+            menuList,//右侧切换
+            tableChange,//改变class点击事件
+            selectedIndex,//当前选中下标
+            shotdown,//筛选出当前数据
+            useMenu,
+            arrorMenu,
+            blueLeft,//返回
+            grayRight,//前进
+            squre,//视图切换
+            sort,//排序
+            folder,
+            files,
+            handleRowClick,
+            askApply,//申请扩容
+            askTo,
+            sureAsk,
+            askNum,
+            askTalk,
+            cliCC,
+            addolder,//图片↓
+            textbox,
+            goon,
+            notePencil,
+            togger,
+            icc,
+            history,
+            mouseCli,//文件点击弹框
+            chooseSet,
+            fileBox,
         }
     },
     created() {
         this.getAll();
+        // 监听鼠标左键点击事件
     },
 }
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    display: flex;
+    justify-content: flex-start;
+}
+
 .settingBox {
     width: 312px;
-    height: 836px;
-    border: 1px solid black;
+    height: 636px;
+    border: 2px solid black;
     border-radius: 4px;
     margin: 10px 10px;
 }
-.topSearch{
+
+.topSearch {
     width: 100%;
     height: 48px;
     background-color: #EBEFF6;
-    text-align: center;
-    line-height: 48px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
 }
+
 .searchFire {
     width: 248px;
     height: 32px;
 }
+
+.setBox {
+    width: 88px;
+    height: 112px;
+    text-align: center;
+    margin-left: 12px;
+    margin-top: 5px;
+    position: relative;
+}
+
+.setBox:hover {
+    background-color: #EEF9FF;
+}
+
+.setBox:hover .selectChe {
+    background-color: #EEF9FF;
+    display: block;
+}
+
+.selectChe {
+    display: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 4px 4px 4px 4px;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    line-height: 10px;
+}
+
+.mesBox {
+    width: 70vw;
+    height: 636px;
+    margin: 10px 5px;
+    border-radius: 4px;
+}
+
+.useBox {
+    width: 100%;
+    height: 96px;
+}
+
+.tables {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.tableLis {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    background-color: #EBEFF6;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.manyUse {
+    width: 100%;
+    height: 48px;
+    /* background-color: gray; */
+    line-height: 48px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.el-dropdown-link {
+    color: white;
+}
+
+.breadBox {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #D9E0F0;
+}
+
+::v-deep .el-collapse-item__header {
+    height: 24px !important;
+    background-color: #EBEFF6 !important;
+}
+
+.detailBox {
+    width: 100%;
+    height: 270px;
+}
+
+::v-deep .el-dialog__header {
+    background-color: #ECEFF7;
+    margin-right: 0px;
+}
+
+.fileTable {
+    position: relative;
+}
+
+.setCli {
+    width: 156px;
+    height: 340px;
+    position: absolute;
+    top: -70px;
+    left: 300px;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 2;
+}
+
+.chooseSet:hover {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: #8693b2;
+    color: white;
+}
 </style>

vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 80,
+      port: 81,
       host: true,
       open: true,
       proxy: {