最外层的界面

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" }
+  //     },
+  //   ]
+  // },
 ]
 
 // 动态路由，基于用户权限动态去加载