加入后台管理模块。

code/web/task_schedule/src/layout/Index.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:07:31
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/index.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="view-wrapper">
+        <el-container class="layout-container">
+            <el-header class="layout-header">
+                <LayoutHeader />
+            </el-header>
+            <el-container class="layout-container-down">
+                <el-aside class="layout-aside">
+                    <LayoutAside />
+                </el-aside>
+                <el-main class="layout-main">
+                    <LayoutMain />
+                </el-main>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+<script lang="ts">
+// 组件
+import LayoutHeader from "./components/Header.vue";
+import LayoutAside from "./components/Aside.vue";
+import LayoutMain from "./components/Main.vue";
+
+export default {
+    name: "MainFrame",
+    components: {
+        LayoutHeader,
+        LayoutAside,
+        LayoutMain,
+    },
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+.layout-container {
+    height: 100vh;
+    width: 100vw;
+    max-height: 100vh;
+    max-width: 100vw;
+
+    .layout-header {
+        height: 50px;
+        width: 100vw;
+        max-height: 50px;
+        max-width: 100vw;
+
+        padding: 0px;
+    }
+
+    .layout-container-down {
+        height: calc(100vh - 50px);
+        max-height: calc(100vh - 50px);
+        width: 100vw;
+        max-width: 100vw;
+
+        .layout-aside {
+            height: calc(100vh - 50px);
+            max-height: calc(100vh - 50px);
+            min-height: calc(100vh - 50px);
+            width: 200px;
+
+            overflow-x: hidden;
+
+            background-color: #2f4156;
+        }
+
+        .layout-main {
+            padding: 0px;
+            height: 100%;
+        }
+    }
+}
+</style>

code/web/task_schedule/src/layout/components/Aside.vue

@@ -0,0 +1,157 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:40:08
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Aside.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <el-scrollbar class="view-wrapper">
+        <el-menu
+            class="side-bar"
+            router
+            :default-active="currentPath"
+            background-color="#2f4156"
+            text-color="#fff"
+            active-text-color="#ffd04b"
+        >
+            <template v-for="route in routes">
+                <template v-if="!route.hidden">
+                    <template v-if="hasOnlyChild(route.children)">
+                        <!-- 当只有一个子路由时，将这个子路由作为顶级菜单项 -->
+                        <el-menu-item
+                            :key="route.children[0].path"
+                            :index="route.children[0].path"
+                            class="sidebar-submenu"
+                        >
+                            <component
+                                :is="route.children[0] ?? route.children[0].meta.icon"
+                                class="icons"
+                            />
+                            <template #title>
+                                {{ route.children[0].meta && route.children[0].meta.title }}
+                            </template>
+                        </el-menu-item>
+                    </template>
+                    <template v-else>
+                        <!-- 不止一个子路由，可能是咩有子路由，或者有多个子路由 -->
+                        <!-- 如果没有子路由，就不渲染 -->
+                        <el-sub-menu
+                            v-if="route.children && route.children.length"
+                            :key="route.path"
+                            :index="route.path"
+                            class="sidebar-submenu"
+                        >
+                            <template #title>
+                                <component
+                                    :is="route.meta && route.meta.icon"
+                                    class="icons"
+                                />
+                                <span>{{ route.meta && route.meta.title }}</span>
+                            </template>
+                            <template v-for="child in route.children">
+                                <el-menu-item
+                                    v-if="!child.hidden"
+                                    :key="child.path"
+                                    :index="child.path"
+                                    class="sidebar-item"
+                                >
+                                    <component
+                                        :is="child.meta && child.meta.icon"
+                                        class="icons"
+                                    />
+                                    <template #title>
+                                        {{ child.meta && child.meta.title }}
+                                    </template>
+                                </el-menu-item>
+                            </template>
+                        </el-sub-menu>
+                    </template>
+                </template>
+            </template>
+        </el-menu>
+    </el-scrollbar>
+</template>
+<script lang="js">
+// @ts-expect-error 之后再补充类型文件
+import { hasOnlyChild } from "@/router/index.js";
+import { useRoute, useRouter, RouteRecordNormalized } from "vue-router";
+import { computed } from "vue";
+
+export default {
+    name: "LayoutAside",
+    setup()
+    {
+        const router = useRouter();
+        const routes = router.getRoutes();
+
+        const currentPath = computed(() =>
+        {
+            return useRoute().path;
+        });
+
+        return { routes, currentPath, hasOnlyChild, };
+    },
+};
+</script>
+
+<style scoped>
+.view-wrapper {
+    height: 100%;
+    width: 100%;
+}
+
+.el-menu {
+    border-right: none;
+    /* border-left: 5px solid #1d74b2; */
+    overflow: auto;
+
+    -webkit-touch-callout: none;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+}
+
+.el-menu-item {
+    font-weight: normal;
+}
+
+.el-sub-menu {
+    font-weight: normal;
+}
+
+.sidebar-submenu {
+    background-color: #2f4156 !important;
+}
+
+.sidebar-item {
+    background-color: #223142 !important;
+}
+
+/* 顺序必须在上面两个之后*/
+.is-active {
+    /* background-color: #ffffff4f !important; */
+    /* font-weight: 1000; */
+    /* font-size: 15px; */
+    color: #ffd04b;
+}
+
+/* .is-opened {
+    border-left: 5px solid #1d74b2;
+} */
+
+.icons {
+    width: 1em;
+    height: 1em;
+    margin-right: 8px;
+}
+
+</style>

code/web/task_schedule/src/layout/components/Header.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:12:07
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Header.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="header-wrapper">
+        <span class="company-name">CPIC</span>
+        <div class="version-wrapper">
+            <span>测试版</span>
+            <span>3.6.7 x64 Build 202208301257</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayoutHeader",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.header-wrapper {
+    width: 100%;
+    height: 50px;
+    max-height: 50px;
+
+    padding: 0px 15px;
+
+    position: relative;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+
+    color: #fff;
+    background-color: $banner-background-color;
+
+    span {
+        text-align:left;
+    }
+
+    > *+* {
+        margin-left: 10px;
+    }
+
+    .version-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: start;
+
+        font: {
+            size: 0.5rem;
+        }
+    }
+
+    .company-name {
+        font-size: 2rem;
+    }
+
+    .buttons_div {
+        margin-left: auto;
+        padding-top: 5px;
+        /* border: 1px solid salmon; */
+    }
+}
+</style>

code/web/task_schedule/src/layout/components/Main.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:44:52
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Main.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+ <!--
+ * @Author: Kane
+ * @Date: 2023-01-04 11:40:03
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-03-21 23:19:27
+ * @FilePath: /it-console/src/layout/components/Main.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <el-scrollbar>
+        <div class="view-wrapper">
+            <router-view />
+        </div>
+    </el-scrollbar>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayoutMain",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+
+<style scoped>
+.el-scrollbar {
+    height: 100%;
+    background-color: #ecf2f9;
+}
+
+.view-wrapper {
+    padding: 10px;
+}
+</style>