From 67ba035a95b4a91442f696e12cd6bf50efcfa0ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E5=A4=A7=E6=80=AA?= <artistcode@hotmail.com>
Date: Fri, 15 Mar 2024 11:50:35 +0800
Subject: [PATCH] fix:init

---
 mock/auth/user.mock.ts           |  23 ++++--
 mock/login.mock.ts               |   2 +
 src/components/RoleSelect.vue    |   2 +-
 src/layout/NavMenu.vue           | 128 ++++++++++++++++++-----------
 src/layout/Navigator.vue         |  79 +++++++++++-------
 src/router/index.ts              |  53 ++++++------
 src/stores/setting.ts            |  14 ++++
 src/stores/user.ts               | 133 ++++++++++++++++---------------
 src/views/system/user/Editor.vue |   8 +-
 src/views/system/user/index.vue  |   6 +-
 10 files changed, 270 insertions(+), 178 deletions(-)
 create mode 100644 src/stores/setting.ts

diff --git a/mock/auth/user.mock.ts b/mock/auth/user.mock.ts
index ca5f9b5..4747744 100644
--- a/mock/auth/user.mock.ts
+++ b/mock/auth/user.mock.ts
@@ -21,7 +21,8 @@ export default definePostMock([
     method: "GET",
     body(request) {
       const id = request.params.id as number;
-      if (id && user.list[id - 1]) return user.list[id - 1];
+      const index = user.list.findIndex((item) => item.id == id);
+      if (index) return user.list[index];
       return {
         error_code: 400,
         msg: "author not found",
@@ -40,7 +41,6 @@ export default definePostMock([
       request.body.avatar = "https://picsum.photos/id/1/400/300";
       request.body.created_at = Mock.Random.datetime();
       request.body.updated_at = Mock.Random.datetime();
-      console.log("添加");
       user.list.unshift(request.body);
       return request.body;
     },
@@ -49,11 +49,10 @@ export default definePostMock([
     url: "/system/user/:id",
     method: "PUT",
     body(request) {
-      // user.list[]
-      console.log("更新");
       const id = request.params.id as number;
-      const result = find(user.list, { id });
-      return result;
+      const index = user.list.findIndex((item) => item.id == id);
+      Object.assign(user.list[index], request.body);
+      return user.list[index];
     },
   },
   {
@@ -61,8 +60,16 @@ export default definePostMock([
     method: "DELETE",
     body(request) {
       const id = request.params.id as number;
-      user.list.splice(id - 1, 1);
-      return user.list[id - 1];
+      const index = user.list.findIndex((item) => item.id == id);
+      const deleteRueslt = user.list.splice(index, 1);
+      if (deleteRueslt) {
+        return {
+          error_code: 400,
+          msg: "author not found",
+        };
+      }
+      const result = user.list[index];
+      return result;
     },
   },
 ]);
diff --git a/mock/login.mock.ts b/mock/login.mock.ts
index 627c437..8b27e9f 100644
--- a/mock/login.mock.ts
+++ b/mock/login.mock.ts
@@ -551,6 +551,7 @@ const menu = [
     icon: "mingcute:feeder-fill",
   },
 ];
+
 export default definePostMock([
   {
     url: "/login/userinfo",
@@ -566,6 +567,7 @@ export default definePostMock([
     response(req, res) {
       const { query = {}, body = { account: "", password: "" } } = req;
       res.setHeader("Content-Type", "application/json");
+      console.log(body);
       if (body.account == "admin" && body.password == "123456") {
         res.statusCode = 200;
         res.end(
diff --git a/src/components/RoleSelect.vue b/src/components/RoleSelect.vue
index fac5543..672a4d8 100644
--- a/src/components/RoleSelect.vue
+++ b/src/components/RoleSelect.vue
@@ -5,7 +5,7 @@ import { onMounted, reactive } from "vue";
 const model = defineModel<any>();
 withDefaults(
   defineProps<{
-    multiple: boolean;
+    multiple?: boolean;
   }>(),
   { multiple: false }
 );
diff --git a/src/layout/NavMenu.vue b/src/layout/NavMenu.vue
index 74d68f1..333c21e 100644
--- a/src/layout/NavMenu.vue
+++ b/src/layout/NavMenu.vue
@@ -1,64 +1,102 @@
 <script setup lang="ts">
-import { ElIcon, ElMenuItem, ElSubMenu } from 'element-plus';
+import { ElIcon, ElMenuItem, ElSubMenu } from "element-plus";
 import { h, ref } from "vue";
 import { Icon } from "@iconify/vue";
-import { Document, Folder } from '@element-plus/icons-vue';
+import { Document, Folder } from "@element-plus/icons-vue";
+import { useSettingStore } from "@/stores/setting";
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore();
+const settingStore = useSettingStore();
 export interface MenuItem {
-    name: string,
-    route_path: string,
-    icon: string,
-    [props: string]: any
+  name: string;
+  route_path: string;
+  icon: string;
+  [props: string]: any;
 }
-const model = defineModel<Array<MenuItem>>({ required: true })
+const model = defineModel<Array<MenuItem>>({ required: true });
 interface Props {
-    option: any[]
+  option: any[];
 }
 const collapse = ref<boolean>(false);
-const activeMenu = ref<string>("/console")
 const TreeMenu = (props: Props, ctx?: any) => {
-    return props.option.map((item) => {
-        if (item.children?.length) {
-            return h(ElSubMenu, {
-                index: item.route_path || item.id.toString()
-            }, {
-                default: () => {
-                    const childNode = TreeMenu({ option: item.children });
-                    return childNode;
-                },
-                title: () => [h(ElIcon, null, () => {
-                    if (item.icon) {
-                        return h(Icon, { icon: item.icon });
-                    } else {
-                        return h(Folder)
-                    }
-                }), h("span", item.name)]
-            })
-        }
-        return h(ElMenuItem, {
-            index: item.route_path
-        }, () => [h(ElIcon, null, () => {
-            if (item.icon) {
+  return props.option.map((item) => {
+    if (item.children?.length) {
+      return h(
+        ElSubMenu,
+        {
+          index: item.route_path || item.id.toString(),
+        },
+        {
+          default: () => {
+            const childNode = TreeMenu({ option: item.children });
+            return childNode;
+          },
+          title: () => [
+            h(ElIcon, null, () => {
+              if (item.icon) {
                 return h(Icon, { icon: item.icon });
-            } else {
-                return h(Document)
-            }
-        }), h("span", null, item.name)]);
-    })
-}
+              } else {
+                return h(Folder);
+              }
+            }),
+            h("span", item.name),
+          ],
+        }
+      );
+    }
+    return h(
+      ElMenuItem,
+      {
+        index: item.route_path,
+      },
+      () => [
+        h(ElIcon, null, () => {
+          if (item.icon) {
+            return h(Icon, { icon: item.icon });
+          } else {
+            return h(Document);
+          }
+        }),
+        h("span", null, item.name),
+      ]
+    );
+  });
+};
+const handleOpen = (param) => {
+  console.log(param);
+};
+
+const handleSelect = (index, path, item) => {
+  const navIndex = userStore.navigator.findIndex(
+    (item) => item.route_path == index
+  );
+  userStore.navigator[navIndex]["active"] = true;
+  console.log(userStore.navigator);
+};
 </script>
 <template>
-    <ElMenu active-text-color="#ffd04b" background-color="#00000" :collapse="collapse"
-        :class="collapse ? 'collapse' : 'layout-menu'" class="layout-menu" :default-active="activeMenu"
-        text-color="#fff" unique-opened router>
-        <TreeMenu :option="model"></TreeMenu>
-    </ElMenu>
+  <ElMenu
+    active-text-color="#ffd04b"
+    background-color="#00000"
+    :collapse="collapse"
+    :class="collapse ? 'collapse' : 'layout-menu'"
+    @open="handleOpen"
+    @select="handleSelect"
+    class="layout-menu"
+    :default-active="settingStore.activeURL"
+    text-color="#fff"
+    unique-opened
+    router
+  >
+    <TreeMenu :option="model"></TreeMenu>
+  </ElMenu>
 </template>
 <style lang="scss" scoped>
 .el-menu {
-    border: none;
+  border: none;
 }
 
 .layout-menu {
-    width: 220px;
+  width: 220px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/Navigator.vue b/src/layout/Navigator.vue
index 59cf224..af2e4ba 100644
--- a/src/layout/Navigator.vue
+++ b/src/layout/Navigator.vue
@@ -3,31 +3,38 @@ import { Search, Fold } from "@element-plus/icons-vue";
 import { Icon } from "@iconify/vue";
 import { ref } from "vue";
 import { useUserStore } from "@/stores/user";
+import { useSettingStore } from "@/stores/setting";
 import { storeToRefs } from "pinia";
+const settingStore = useSettingStore();
 const userStore = useUserStore();
 const { userinfo } = storeToRefs(userStore);
 const keyword = ref<string>();
-const TabsRef = ref<HTMLDivElement | null>(null)
+const TabsRef = ref<HTMLDivElement | null>(null);
 const scrollLeft = () => {
   if (TabsRef.value != null) {
-    TabsRef.value.scrollLeft -= 80
+    TabsRef.value.scrollLeft -= 80;
   }
-}
+};
 const scrollRight = () => {
   if (TabsRef.value != null) {
-    TabsRef.value.scrollLeft += 80
+    TabsRef.value.scrollLeft += 80;
   }
-}
+};
 const handlerClick = (item) => {
-  item.badge = Math.random().toFixed(1)
-}
+  item.badge = Math.random().toFixed(1);
+};
 </script>
 <template>
   <div class="nav-header">
     <div class="left-content">
       <!-- <Fold style="width: 1em; height: 1em; margin-right: 8px" /> -->
       <Icon icon="mingcute:fold-horizontal-line"></Icon>
-      <ElInput v-model="keyword" placeholder="请输入" style="width: 200px" :prefix-icon="Search"></ElInput>
+      <ElInput
+        v-model="keyword"
+        placeholder="请输入"
+        style="width: 200px"
+        :prefix-icon="Search"
+      ></ElInput>
       <Icon icon="mingcute:walk-fill"></Icon>
     </div>
     <div class="right-content">
@@ -39,20 +46,30 @@ const handlerClick = (item) => {
   </div>
   <div class="nav-tab">
     <Icon class="arrow icon-arrow" icon="mingcute:home-2-line"></Icon>
-    <Icon class="arrow icon-arrow" @click.stop="scrollLeft" icon="mingcute:arrows-left-line"></Icon>
+    <Icon
+      class="arrow icon-arrow"
+      @click.stop="scrollLeft"
+      icon="mingcute:arrows-left-line"
+    ></Icon>
     <div class="content" ref="TabsRef">
-      <div v-for="item in userStore.navigator" @click.stop="handlerClick(item)">
+      <template v-for="item in userStore.navigator">
+        <!-- <ElBadge v-if="item.active" :value="item.badge" :max="99">{{
+          item.name
+        }}</ElBadge> -->
         <template v-if="item.active">
-          <template v-if="item.badge">
-            <ElBadge :value="item.badge" :max="99">{{ item.name }}</ElBadge>
-          </template>
-          <template v-else>
-            {{ item.name }}
-          </template>
+          <span
+            class="tab-item"
+            :class="{ active: settingStore.activeURL == item.route_path }"
+            >{{ item.name }}</span
+          >
         </template>
-      </div>
+      </template>
     </div>
-    <Icon class="icon-arrow" @click.stop="scrollRight" icon="mingcute:arrows-right-line"></Icon>
+    <Icon
+      class="icon-arrow"
+      @click.stop="scrollRight"
+      icon="mingcute:arrows-right-line"
+    ></Icon>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -79,7 +96,6 @@ const handlerClick = (item) => {
     flex-shrink: 0;
     display: flex;
     align-items: center;
-
   }
 }
 
@@ -93,17 +109,22 @@ const handlerClick = (item) => {
     display: flex;
     align-items: center;
     overflow: hidden;
-
-    div {
-      white-space: nowrap;
-      width: 80px;
-      box-sizing: border-box;
-      text-align: center;
-      flex-shrink: 0;
-      text-overflow: ellipsis;
-      margin-right: 1em;
-      cursor: pointer;
+    .tab-item {
+      margin: 0 1em;
+    }
+    .active {
+      color: rgb(10, 156, 68);
     }
+    // div {
+    //   white-space: nowrap;
+    //   width: 80px;
+    //   box-sizing: border-box;
+    //   text-align: center;
+    //   flex-shrink: 0;
+    //   text-overflow: ellipsis;
+    //   margin-right: 1em;
+    //   cursor: pointer;
+    // }
   }
 
   .icon-arrow {
diff --git a/src/router/index.ts b/src/router/index.ts
index c1900ee..db2da9a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,40 +1,45 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-import Layout from '@/layout/index.vue'
-const viewsPath = import.meta.glob(['@/views/**/*.vue', '!@/views/*.vue'])
+import { createRouter, createWebHistory } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/index.vue";
+import { useSettingStore } from "@/stores/setting";
+const viewsPath = import.meta.glob(["@/views/**/*.vue", "!@/views/*.vue"]);
 
-const autoView: RouteRecordRaw[] = []
+const autoView: RouteRecordRaw[] = [];
 for (const [path, resovleImport] of Object.entries(viewsPath)) {
-  const routePath = path.replace(/\/src\/views|\/index\.vue|\.vue/gi, '')
+  const routePath = path.replace(/\/src\/views|\/index\.vue|\.vue/gi, "");
   autoView.push({
     path: routePath,
-    component: resovleImport
-  })
+    component: resovleImport,
+  });
 }
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
+      path: "/",
+      name: "home",
       component: Layout,
-      redirect: '/console',
+      redirect: "/console",
       children: [
         {
-          path: '/console',
-          component: () => import('@/views/console.vue')
+          path: "/console",
+          component: () => import("@/views/console.vue"),
         },
-        ...autoView
-      ]
+        ...autoView,
+      ],
     },
     {
-      name: 'login',
-      path: '/login',
-      component: () => import('@/views/Login.vue'),
+      name: "login",
+      path: "/login",
+      component: () => import("@/views/Login.vue"),
       meta: {
-        title: '登录'
-      }
-    }
-  ]
-})
-export default router
+        title: "登录",
+      },
+    },
+  ],
+});
+router.beforeEach((item) => {
+  const settingStore = useSettingStore();
+  settingStore.activeURL = item.fullPath;
+});
+export default router;
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
new file mode 100644
index 0000000..4500162
--- /dev/null
+++ b/src/stores/setting.ts
@@ -0,0 +1,14 @@
+import { defineStore } from "pinia";
+
+export const useSettingStore = defineStore("setting", {
+  state() {
+    return {
+      tabs: [],
+      activeURL: "/console",
+      theme: {
+        default: "drak",
+        color: {},
+      },
+    };
+  },
+});
diff --git a/src/stores/user.ts b/src/stores/user.ts
index dad5a2d..546adbb 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,74 +1,77 @@
 import { defineStore } from "pinia";
 import request from "@/utils/request";
 import type { MenuItem } from "@/layout/NavMenu.vue";
-import type { User } from "@/views/system/user/index.vue";
+import type { User } from "@/api/system/user";
 
 interface Userinfo {
-   token: string,
-   userinfo: null | User
-   auth: MenuItem[]
-   [props: string]: any
+  token: string;
+  userinfo: null | User;
+  auth: MenuItem[];
+  [props: string]: any;
 }
 export const useUserStore = defineStore("user", {
-   state(): Userinfo {
-      return {
-         token: "",
-         userinfo: null,
-         auth: []
+  state(): Userinfo {
+    return {
+      token: "",
+      userinfo: null,
+      auth: [],
+    };
+  },
+  actions: {
+    async login(account: string, password: string) {
+      try {
+        const data = await request.post<
+          any,
+          { token?: string; auth?: MenuItem[] }
+        >("/login/password", {
+          account,
+          password,
+        });
+        if (data.token && data.auth) {
+          this.token = data.token;
+          this.auth = data.auth;
+        }
+        delete data.auth;
+        delete data.token;
+        this.userinfo = data as User;
+        return data;
+      } catch (error) {
+        return false;
       }
-   },
-   actions: {
-      async login(account: string, password: string) {
-         try {
-            const data = await request.post<any, { token?: string, auth?: MenuItem[] }>("/login/password", {
-               account,
-               password
-            });
-            if (data.token && data.auth) {
-               this.token = data.token;
-               this.auth = data.auth;
-            }
-            delete data.auth;
-            delete data.token;
-            this.userinfo = data as User;
-            return data;
-         } catch (error) {
-            return false;
-         }
-      },
-      async getUserInfo() {
-         try {
-            const data = await request.get<any, { auth: any[] }>("/login/userinfo");
-            this.auth = data.auth;
-            return data;
-         } catch (error) {
-            return false;
-         }
-      },
-      async logout() {
-         const { data } = await request.get("/login/logout");
-         return data;
+    },
+    async getUserInfo() {
+      try {
+        const data = await request.get<any, { auth: any[] }>("/login/userinfo");
+        this.auth = data.auth;
+        return data;
+      } catch (error) {
+        return false;
       }
-   },
-   getters: {
-      isLogin: (state: Userinfo) => {
-         return state.token !== "";
-      },
-      navigator(state) {
-         const menu = (node: MenuItem[]) => {
-            const list: MenuItem[] = []
-            node.map(item => {
-               if (item.children && item.children.length > 0) {
-                  const result = menu(item.children);
-                  list.push(...result);
-               } else {
-                  list.push(item);
-               }
-            })
-            return list;
-         }
-         return menu(state.auth);
-      }
-   },
-   persist: true
-})
\ No newline at end of file
+    },
+    async logout() {
+      const { data } = await request.get("/login/logout");
+      return data;
+    },
+  },
+  getters: {
+    isLogin: (state: Userinfo) => {
+      return state.token !== "";
+    },
+    navigator(state) {
+      const menu = (node: MenuItem[]) => {
+        const list: MenuItem[] = [];
+        node.map((item) => {
+          if (item.children && item.children.length > 0) {
+            const result = menu(item.children);
+            list.push(...result);
+          } else {
+            list.push(item);
+          }
+        });
+        return list;
+      };
+      return menu(state.auth);
+    },
+  },
+  persist: true,
+});
diff --git a/src/views/system/user/Editor.vue b/src/views/system/user/Editor.vue
index b7a3f2b..05b6276 100644
--- a/src/views/system/user/Editor.vue
+++ b/src/views/system/user/Editor.vue
@@ -6,15 +6,13 @@ import RoleSelect from "@/components/RoleSelect.vue";
 const formRef = ref<FormInstance>();
 const dailogVisible = defineModel<boolean>("visible", { default: false });
 const formData = defineModel<Partial<T>>({ required: true });
-
+const emit = defineEmits(["complete"]);
 const onSubmit = async () => {
   const validate = await formRef.value?.validate();
   if (!validate) return false;
-  if (formData.value.id) {
-  }
-  await push(formData.value);
+  const result = await push(formData.value);
   dailogVisible.value = false;
-
+  emit("complete", result);
 };
 </script>
 <template>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index d2e6bef..0579343 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -151,7 +151,11 @@ onMounted(() => {
     </vxe-pager>
     <!-- #endregion -->
     <!-- #region 表单 -->
-    <Editor v-model="formData" v-model:visible="visible"></Editor>
+    <Editor
+      @complete="refresh()"
+      v-model="formData"
+      v-model:visible="visible"
+    ></Editor>
     <!-- #endregion -->
   </div>
 </template>