feat: 导航栏路由开发

src/assets/svg/home/actBusinessManagement.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="yewuguanli" clip-path="url(#clip0_807_4489)">
+<path id="Vector" d="M22 2.5H2V8.5H22V2.5Z" stroke="#0052D9" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 20.5151L8.08781 14.3646L11.3775 17.5151L15.3991 13.5L17.6393 15.684" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M22 8.08595V21.0859" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_4" d="M2 8.08595V15.0859" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_5" d="M6.50781 21.5H22.0001" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_6" d="M8.5 5.5H19" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_7" d="M5 5.4983H5.50001" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4489">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/actKnowledgeCentre.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="zhishizhongxin" clip-path="url(#clip0_807_4471)">
+<path id="Vector" d="M18 4H4.5C3.67158 4 3 4.67158 3 5.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V12.5V9" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M16.1216 6.2427L18.2429 4.12135L16.1216 2.00003" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12 8.5V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M16 12V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M8 12V17" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4471">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/act_home.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="shouye" clip-path="url(#clip0_807_4340)">
+<path id="Vector" d="M4.5 9V21H19.5V9L12 3L4.5 9Z" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.5 14.5V21H14.5V14.5H9.5Z" stroke="#0052D9" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_3" d="M4.5 21H19.5" stroke="#0052D9" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4340">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/businessManagement.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="yewuguanli" clip-path="url(#clip0_807_4352)">
+<path id="Vector" d="M22 2.5H2V8.5H22V2.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 20.5151L8.08781 14.3646L11.3775 17.5151L15.3991 13.5L17.6393 15.684" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M22 8.08595V21.0859" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_4" d="M2 8.08595V15.0859" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_5" d="M6.50775 21.5H22" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_6" d="M8.5 5.5H19" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_7" d="M5 5.4983H5.50001" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4352">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/home.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="shouye" clip-path="url(#clip0_807_4466)">
+<path id="Vector" d="M4.5 9V21H19.5V9L12 3L4.5 9Z" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.5 14.5V21H14.5V14.5H9.5Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_3" d="M4.5 21H19.5" stroke="#666666" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4466">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/knowledgeCentre.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="zhishizhongxin" clip-path="url(#clip0_807_4345)">
+<path id="Vector" d="M18 4H4.5C3.67158 4 3 4.67158 3 5.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V12.5V9" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M16.1213 6.2427L18.2426 4.12135L16.1213 2.00003" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M12 8.5V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M16 12V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M8 12V17" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4345">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/home/system.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="xitongguanli" clip-path="url(#clip0_807_4361)">
+<path id="Vector" d="M12 2L9 5H5V9L2 12L5 15V19H9L12 22L15 19H19V15L22 12L19 9V5H15L12 2Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12 15C13.6568 15 15 13.6568 15 12C15 10.3432 13.6568 9 12 9C10.3432 9 9 10.3432 9 12C9 13.6568 10.3432 15 12 15Z" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_807_4361">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/layout/components/appHeader/index.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { useNav } from "@/layout/hooks/useNav";
+import logoImg from "@/assets/home/logo.png";
+import { isAllEmpty } from "@pureadmin/utils";
+import MeunIcon from "./meunIcon.vue";
+import { onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { findRouteByPath, getParentPaths, getTopMenu } from "@/router/utils";
+const { route } = useNav();
+const router = useRouter();
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+const menuData = computed(() => {
+  return [
+    {
+      id: 0,
+      meta: {
+        title: "首页",
+        icon: 0
+      },
+      children: [],
+      path: "/home"
+    }
+  ].concat(usePermissionStoreHook().wholeMenus);
+  // return [
+  //   {
+  //     id: 0,
+  //     meta: {
+  //       title: "首页",
+  //       icon: 0
+  //     },
+  //     path: "/home",
+  //     children: []
+  //   },
+  //   {
+  //     id: 1,
+  //     meta: {
+  //       title: "知识中心",
+  //       icon: 1
+  //     },
+  //     path: "/test",
+  //     children: []
+  //   },
+  //   {
+  //     id: 1,
+  //     meta: {
+  //       title: "业务管理",
+  //       icon: 2
+  //     },
+  //     path: "/test1",
+  //     children: []
+  //   },
+  //   {
+  //     path: "/systemManagement",
+  //     redirect: "/systemManagement/accountManagement",
+  //     meta: {
+  //       title: "系统管理",
+  //       icon: 2,
+  //       rank: 15
+  //     },
+  //     children: [
+  //       {
+  //         path: "/systemManagement/accountManagement",
+  //         name: "systemManagement",
+  //         component: () =>
+  //           import("@/views/systemManagement/accountManagement/index.vue"),
+  //         meta: {
+  //           title: "账号管理",
+  //           showLink: true,
+  //           showParent: true,
+  //           roles: ["admin", "common"]
+  //         }
+  //       }
+  //     ]
+  //   }
+  // ];
+});
+const currentTopRoute = ref("/home");
+const routes: any = router.options.routes;
+const getCurrentRoute = () => {
+  // 当前路由的父级路径组成的数组
+  const parentRoutes = getParentPaths(
+    router.currentRoute.value.name as string,
+    routes,
+    "name"
+  );
+  if (router.currentRoute.value.path === "/home") {
+    currentTopRoute.value = "/home";
+  } else {
+    currentTopRoute.value = parentRoutes[1];
+  }
+};
+onMounted(() => {
+  console.log(usePermissionStoreHook().wholeMenus);
+  getCurrentRoute();
+});
+const getIsActived = val => {
+  return val === currentTopRoute.value ? true : false;
+};
+watch(
+  () => route.path,
+  () => {
+    getCurrentRoute();
+  },
+  {
+    deep: true
+  }
+);
+const changeRouter = val => {
+  router.push(val);
+};
+</script>
+
+<template>
+  <div class="navbar-wrapper">
+    <div class="logo-container">
+      <img :src="logoImg" alt="" />
+      <span>知识报送平台</span>
+    </div>
+    <div class="content">
+      <div class="meun_list">
+        <div
+          v-for="(item, index) in menuData"
+          :class="[currentTopRoute === item.path ? 'actived' : '']"
+          :key="index"
+        >
+          <el-dropdown v-if="item?.children.length > 0">
+            <div class="meun_item">
+              <MeunIcon
+                :isActived="getIsActived(item.path)"
+                :meunIconIndex="item.meta.icon"
+              />
+              <span>{{ item.meta.title }}</span>
+            </div>
+            <template #dropdown>
+              <div class="drop_meun">
+                <div
+                  @click="changeRouter(items.path)"
+                  class="drop_meun_item"
+                  v-for="(items, i) in item.children"
+                  :key="i"
+                >
+                  <span>{{ items.meta.title }}</span>
+                </div>
+              </div>
+            </template>
+          </el-dropdown>
+          <div v-else>
+            <div class="meun_item" @click="changeRouter(item.path)">
+              <MeunIcon
+                :isActived="getIsActived(item.path)"
+                :meunIconIndex="item.meta.icon"
+              />
+              <span>{{ item.meta.title }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar-wrapper {
+  height: 96px;
+  display: flex;
+  align-items: center;
+  padding: 0 32px;
+  .logo-container {
+    display: flex;
+    img {
+      width: 40px;
+      height: 40px;
+    }
+    span {
+      font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
+      font-weight: 400;
+      font-size: 26px;
+      color: #283c84;
+      margin-left: 16px;
+    }
+  }
+  .content {
+    margin-left: 116px;
+    .meun_list {
+      display: flex;
+      .meun_item {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        margin-right: 12px;
+        padding: 0 16px;
+        cursor: pointer;
+        color: #666666;
+        span {
+          font-family: Microsoft YaHei, Microsoft YaHei;
+          font-weight: 400;
+          font-size: 22px;
+
+          margin-left: 12px;
+        }
+      }
+      .actived {
+        background: rgba(0, 82, 217, 0.1);
+        color: #0052d9;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.drop_meun {
+  width: 156px;
+  background: #ffffff;
+
+  border-radius: 8px 8px 8px 8px;
+  padding: 24px;
+  padding-bottom: 0;
+  .drop_meun_item {
+    font-size: 20px;
+    color: #333333;
+    margin-bottom: 24px;
+    cursor: pointer;
+  }
+  .drop_meun_item:hover {
+    color: #0052d9;
+  }
+}
+</style>

src/layout/components/appHeader/meunIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <component v-if="isActived" :is="actIcon" />
+    <component v-else :is="icon" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import homeIcon from "../../../assets/svg/home/home.svg";
+import actHomeIcon from "../../../assets/svg/home/act_home.svg";
+import systemIcon from "../../../assets/svg/home/system.svg";
+import knowledgeCentreIcon from "../../../assets/svg/home/knowledgeCentre.svg";
+import businessManagementIcon from "../../../assets/svg/home/businessManagement.svg";
+import actKnowledgeCentreIcon from "../../../assets/svg/home/actKnowledgeCentre.svg";
+import actBusinessManagementIcon from "../../../assets/svg/home/actBusinessManagement.svg";
+// ...导入其他SVG组件
+const props = defineProps({
+  meunIconIndex: {
+    type: Number,
+    default: undefined
+  },
+  isActived: {
+    type: Boolean,
+    default: false
+  }
+});
+const icons = [
+  homeIcon,
+  knowledgeCentreIcon,
+  businessManagementIcon,
+  systemIcon
+]; // ...加入其他SVG组件的引用
+const actIcons = [
+  actHomeIcon,
+  actKnowledgeCentreIcon,
+  actBusinessManagementIcon
+];
+
+const icon = ref();
+const actIcon = ref();
+
+onMounted(() => {
+  icon.value = icons[props.meunIconIndex];
+  actIcon.value = actIcons[props.meunIconIndex];
+});
+</script>

src/layout/components/appMain.vue

@@ -20,24 +20,6 @@ const transitions = computed(() => {
   };
 });
 
-const hideTabs = computed(() => {
-  return $storage?.configure.hideTabs;
-});
-
-const layout = computed(() => {
-  return $storage?.layout.layout === "vertical";
-});
-
-const getSectionStyle = computed(() => {
-  return [
-    hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 85px;" : "",
-    hideTabs.value && !layout.value ? "padding-top: 48px" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
-    props.fixedHeader ? "" : "padding-top: 0;"
-  ];
-});
-
 const transitionMain = defineComponent({
   render() {
     return h(
@@ -74,13 +56,10 @@ const transitionMain = defineComponent({
 </script>
 
 <template>
-  <section
+  <section class="app-main">
-    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
-    :style="getSectionStyle"
-  >
     <router-view>
       <template #default="{ Component, route }">
-        <el-scrollbar v-if="props.fixedHeader">
+        <el-scrollbar>
           <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
             <backTop />
           </el-backtop>
@@ -103,26 +82,6 @@ const transitionMain = defineComponent({
             />
           </transitionMain>
         </el-scrollbar>
-        <div v-else>
-          <transitionMain :route="route">
-            <keep-alive
-              v-if="keepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
-              <component
-                :is="Component"
-                :key="route.fullPath"
-                class="main-content"
-              />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
-        </div>
       </template>
     </router-view>
   </section>
@@ -132,21 +91,14 @@ const transitionMain = defineComponent({
 .app-main {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 96px);
   overflow-x: hidden;
 
   /* background: #fff; */
 }
 
-.app-main-nofixed-header {
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-}
-
 .main-content {
   display: flex;
   flex-direction: column;
-  margin: 16px;
 }
 </style>

src/layout/index.vue

@@ -3,34 +3,16 @@ import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
-import { useLayout } from "./hooks/useLayout";
-import { useResizeObserver } from "@vueuse/core";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
-import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
+import { useGlobal } from "@pureadmin/utils";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import {
+import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
-  h,
-  ref,
-  reactive,
-  computed,
-  onMounted,
-  onBeforeMount,
-  defineComponent
-} from "vue";
 
-import navbar from "./components/navbar.vue";
+import AppHeader from "./components/appHeader/index.vue";
-import tag from "./components/tag/index.vue";
 import appMain from "./components/appMain.vue";
-import setting from "./components/setting/index.vue";
-import Vertical from "./components/sidebar/vertical.vue";
-import Horizontal from "./components/sidebar/horizontal.vue";
-import backTop from "@/assets/svg/back_top.svg?component";
 
 const appWrapperRef = ref();
-const { isDark } = useDark();
-const { layout } = useLayout();
-const isMobile = deviceDetection();
 const pureSetting = useSettingStoreHook();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 
@@ -61,135 +43,22 @@ const set: setType = reactive({
   })
 });
 
-function setTheme(layoutModel: string) {
+onMounted(() => {});
-  window.document.body.setAttribute("layout", layoutModel);
-  $storage.layout = {
-    layout: `${layoutModel}`,
-    theme: $storage.layout?.theme,
-    darkMode: $storage.layout?.darkMode,
-    sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor
-  };
-}
-
-function toggle(device: string, bool: boolean) {
-  useAppStoreHook().toggleDevice(device);
-  useAppStoreHook().toggleSideBar(bool, "resize");
-}
-
-// 判断是否可自动关闭菜单栏
-let isAutoCloseSidebar = true;
-
-useResizeObserver(appWrapperRef, entries => {
-  if (isMobile) return;
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
-  /** width app-wrapper类容器宽度
-   * 0 < width <= 760 隐藏侧边栏
-   * 760 < width <= 990 折叠侧边栏
-   * width > 990 展开侧边栏
-   */
-  if (width > 0 && width <= 760) {
-    toggle("mobile", false);
-    isAutoCloseSidebar = true;
-  } else if (width > 760 && width <= 990) {
-    if (isAutoCloseSidebar) {
-      toggle("desktop", false);
-      isAutoCloseSidebar = false;
-    }
-  } else if (width > 990 && !set.sidebar.isClickCollapse) {
-    toggle("desktop", true);
-    isAutoCloseSidebar = true;
-  } else {
-    toggle("desktop", false);
-    isAutoCloseSidebar = false;
-  }
-});
-
-onMounted(() => {
-  if (isMobile) {
-    toggle("mobile", false);
-  }
-});
 
 onBeforeMount(() => {
   useDataThemeChange().dataThemeChange();
 });
-
-const layoutHeader = defineComponent({
-  render() {
-    return h(
-      "div",
-      {
-        class: { "fixed-header": set.fixedHeader },
-        style: [
-          set.hideTabs && layout.value.includes("horizontal")
-            ? isDark.value
-              ? "box-shadow: 0 1px 4px #0d0d0d"
-              : "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
-            : ""
-        ]
-      },
-      {
-        default: () => [
-          !pureSetting.hiddenSideBar &&
-          (layout.value.includes("vertical") || layout.value.includes("mix"))
-            ? h(navbar)
-            : null,
-          !pureSetting.hiddenSideBar && layout.value.includes("horizontal")
-            ? h(Horizontal)
-            : null,
-          h(tag)
-        ]
-      }
-    );
-  }
-});
 </script>
 
 <template>
-  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
+  <div ref="appWrapperRef" class="app-wrapper">
-    <div
+    <div class="main-container">
-      v-show="
+      <div>
-        set.device === 'mobile' &&
-        set.sidebar.opened &&
-        layout.includes('vertical')
-      "
-      class="app-mask"
-      @click="useAppStoreHook().toggleSideBar()"
-    />
-    <Vertical
-      v-show="
-        !pureSetting.hiddenSideBar &&
-        (layout.includes('vertical') || layout.includes('mix'))
-      "
-    />
-    <div
-      :class="[
-        'main-container',
-        pureSetting.hiddenSideBar ? 'main-hidden' : ''
-      ]"
-    >
-      <div v-if="set.fixedHeader">
-        <layout-header />
         <!-- 主体内容 -->
-        <app-main :fixed-header="set.fixedHeader" />
+        <AppHeader />
+        <app-main />
       </div>
-      <el-scrollbar v-else>
-        <el-backtop
-          title="回到顶部"
-          target=".main-container .el-scrollbar__wrap"
-        >
-          <backTop />
-        </el-backtop>
-        <layout-header />
-        <!-- 主体内容 -->
-        <app-main :fixed-header="set.fixedHeader" />
-      </el-scrollbar>
     </div>
-    <!-- 系统设置 -->
-    <setting />
   </div>
 </template>
 
@@ -198,7 +67,8 @@ const layoutHeader = defineComponent({
   position: relative;
   width: 100%;
   height: 100%;
-
+  background-image: url("../assets/home/home_bg.png");
+  background-size: 100% 100%;
   &::after {
     display: table;
     clear: both;

src/router/modules/home.ts

@@ -5,7 +5,7 @@ export default {
   path: "/",
   name: "Home",
   component: Layout,
-  redirect: "/welcome",
+  redirect: "/home",
   meta: {
     icon: HomeFill,
     title: "首页",
@@ -14,9 +14,9 @@ export default {
   },
   children: [
     {
-      path: "/welcome",
+      path: "/home",
-      name: "Welcome",
+      name: "Home",
-      component: () => import("@/views/welcome/index.vue"),
+      component: () => import("@/views/home/index.vue"),
       meta: {
         title: "首页",
         showLink: VITE_HIDE_HOME === "true" ? false : true

src/router/modules/systemManagement.ts

@@ -0,0 +1,23 @@
+export default {
+  path: "/systemManagement",
+  redirect: "/systemManagement/accountManagement",
+  meta: {
+    title: "系统管理",
+    icon: 3,
+    rank: 15
+  },
+  children: [
+    {
+      path: "/systemManagement/accountManagement",
+      name: "systemManagement",
+      component: () =>
+        import("@/views/systemManagement/accountManagement/index.vue"),
+      meta: {
+        title: "账号管理",
+        showLink: true,
+        showParent: true,
+        roles: ["admin", "common"]
+      }
+    }
+  ]
+} as RouteConfigsTable;

src/style/sidebar.scss

@@ -38,7 +38,6 @@
     min-width: 1500px;
     height: 100vh;
     min-height: 100%;
-    margin-left: $sideBarWidth;
     background: #f0f2f5;
 
     /* main-content 属性动画 */
@@ -50,17 +49,6 @@
     }
   }
 
-  .fixed-header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 998;
-    width: calc(100% - 210px);
-
-    /* fixed-header 属性左上角动画 */
-    transition: width var(--pure-transition-duration);
-  }
-
   .main-hidden {
     margin-left: 0 !important;
 

src/views/home/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 defineOptions({
-  name: "Welcome"
+  name: "Home"
 });
 </script>
 
 <template>
   <div class="container">
-    <h1>算法管理</h1>
+    <h1>首页</h1>
   </div>
 </template>

src/views/login/index.vue

@@ -16,6 +16,7 @@ import Lock from "@iconify-icons/icon-park-outline/lock";
 import User from "@iconify-icons/icon-park-outline/user";
 import PreviewClose from "@iconify-icons/icon-park-outline/preview-close";
 import PreviewOpen from "@iconify-icons/icon-park-outline/preview-open";
+import { setUserInfo } from "@/utils/auth";
 
 defineOptions({
   name: "Login"
@@ -42,31 +43,37 @@ const onLogin = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      useUserStoreHook()
+      setUserInfo({
-        .loginByUsername({
+        roleCode: "1"
-          userAccount: ruleForm.username,
+      });
-          password: ruleForm.password
+      initRouter().then(() => {
-        })
+        router.push("/home");
-        .then((res: any) => {
-          loading.value = false;
-          if (res.code === 200) {
-            if (res.data.roleCode === "1") {
-              // initRouter().then(() => {
-              //   router.push("/selectCase");
-              // });
-            } else {
-              // initRouter().then(() => {
-              //   router.push("/inquiryCase");
-              // });
-            }
-
-            message("登录成功", { type: "success" });
-          }
-        })
-        .catch(() => {
-          loading.value = false;
-          message("登录失败", { type: "error" });
       });
+      // useUserStoreHook()
+      //   .loginByUsername({
+      //     userAccount: ruleForm.username,
+      //     password: ruleForm.password
+      //   })
+      //   .then((res: any) => {
+      //     loading.value = false;
+      //     if (res.code === 200) {
+      //       if (res.data.roleCode === "1") {
+      //         // initRouter().then(() => {
+      //         //   router.push("/selectCase");
+      //         // });
+      //       } else {
+      //         // initRouter().then(() => {
+      //         //   router.push("/inquiryCase");
+      //         // });
+      //       }
+
+      //       message("登录成功", { type: "success" });
+      //     }
+      //   })
+      //   .catch(() => {
+      //     loading.value = false;
+      //     message("登录失败", { type: "error" });
+      //   });
     } else {
       loading.value = false;
       return fields;

src/views/systemManagement/accountManagement/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>11111</div>
+</template>