框架

src/components/LayoutHeader/index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import {useSystemStore} from "../../pinia/SystemStore/index.js";
+
+const SystemStore = useSystemStore();
+</script>
+
+<template>
+    <div class="w-full h-full flex items-center px-[24px] box-border">
+        <div class="title">
+            代发平台-{{SystemStore.isRoot?'管理员':'商家'}}
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-family: PingFang SC;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: left;
+}
+</style>

src/components/LayoutSider/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import {onMounted} from "vue";
+import mockRoutes from "./mock.js";
+import routesMap from "../../router/routes-map.js";
+import {toPath} from "../../utils/index.js";
+
+onMounted(() => {
+    console.log(mockRoutes.map(v => ({
+        path: v.path,
+        name: v.name,
+        component: routesMap[v.component]
+    })))
+});
+
+const menuItemClick = (e) => {
+    toPath(`/home${e}`);
+}
+</script>
+
+<template>
+    <a-menu @menu-item-click="menuItemClick">
+        <a-sub-menu v-for="item in mockRoutes" :key="item.name">
+            <template #icon>
+                <icon-apps></icon-apps>
+            </template>
+            <template #title>{{ item.title }}</template>
+            <a-menu-item v-for="k in item.children" :key="item.path + k.path">{{k.title}}</a-menu-item>
+        </a-sub-menu>
+    </a-menu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/LayoutSider/mock.js

@@ -0,0 +1,27 @@
+const mockRoutes = [
+    {
+        path: 'task-center',
+        name: 'task-center',
+        title: '任务中心',
+        icon: '',
+        component: 'task-center',
+        children: [
+            {
+                path: 'reward-mission',
+                name: 'reward-mission',
+                title: '悬赏任务',
+                icon: '',
+                component: 'reward-mission',
+            },
+            {
+                path: 'appointed-task',
+                name: 'appointed-task',
+                title: '任务指派',
+                icon: '',
+                component: 'appointed-task',
+            }
+        ]
+    },
+];
+
+export default mockRoutes;