README.md

@@ -30,10 +30,16 @@
 
 ### Plus
 
-基于 `NaiveUi` 全新设计版本，增加了众多特性，值得一试
+全新设计版本，增加了众多特性，值得一试
+
+基于 `NaiveUi` 组件库
 
 [NaiveAdmin Plus 预览](https://plus.naiveadmin.com)
 
+基于 `Antd` 组件库
+
+[NaiveAdmin Antd Plus 预览](https://plus-full.naiveadmin.com)
+
 ### Arco vue
 
 智能设计体系，提供轻盈体验
@@ -46,14 +52,14 @@
 
 [Element Plus Admin 预览](https://element.naiveadmin.com)
 
-以上版本同时具备 `NaiveAdmin` 功能/组件/页面，一如既往、开箱即用，欢迎前往查看。
-
 ### Antd vue
 
 新产品，如果您选的技术栈是 `Antd` 的话，不妨看看
 
 [NaiveAdmin Antd 预览](https://antd.naiveadmin.com)
 
+以上版本同时具备 `NaiveAdmin` 功能/组件/页面，一如既往、开箱即用，欢迎前往查看。
+
 ## 📚 文档
 
 [文档地址](https://docs.naiveadmin.com)
@@ -151,7 +157,8 @@ pnpm build
 
 有关 `Naive Ui Admin` 的使用或其他问题，欢迎加入我们的讨论群组或提出问题。
 
-![160335146-c28dd205-4600-4d62-b2c6-6456034ab7b1](https://user-images.githubusercontent.com/19426584/217689718-407e6cb9-dd3b-4a11-a025-3c58834b52ff.jpg)
+QQ1群：328347666 （已满）
+QQ2群：741353560
 
 ## 💖 赞助
 #### 如果您觉得这个项目对您有帮助，可以通过下面的链接为作者买一杯果汁，表示感谢！。

mock/system/menu.ts

@@ -1,16 +1,6 @@
 import { defineMock } from '@alova/mock';
 import { resultSuccess } from '../_util';
-
-export interface ListDate {
-  label: string;
-  key: string;
-  type: number;
-  subtitle: string;
-  openType: number;
-  auth: string;
-  path: string;
-  children?: ListDate[];
-}
+import type { ListDate } from '@/api/system/menu';
 
 const menuList = () => {
   const result: ListDate[] = [

src/api/system/menu.ts

@@ -1,5 +1,14 @@
 import { Alova } from '@/utils/http/alova/index';
-import { ListDate } from 'mock/system/menu';
+export interface ListDate {
+  label: string;
+  key: string;
+  type: number;
+  subtitle: string;
+  openType: number;
+  auth: string;
+  path: string;
+  children?: ListDate[];
+}
 
 /**
  * @description: 根据用户id获取用户菜单

src/router/base.ts

@@ -34,7 +34,7 @@ export const RedirectRoute: RouteRecordRaw = {
   children: [
     {
       path: '/redirect/:path(.*)',
-      name: RedirectName,
+      name: `${RedirectName}Son`,
       component: () => import('@/views/redirect/index.vue'),
       meta: {
         title: RedirectName,

src/views/setting/account/account.vue

@@ -7,7 +7,7 @@
             class="thing-cell"
             v-for="item in typeTabList"
             :key="item.key"
-            :class="{ 'thing-cell-on': type === item.key }"
+            :class="{ 'thing-cell-on': state.type === item.key }"
             @click="switchType(item)"
           >
             <template #header>{{ item.name }}</template>
@@ -16,61 +16,63 @@
         </n-card>
       </n-grid-item>
       <n-grid-item span="18">
-        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1" />
-          <SafetySetting v-if="type === 2" />
+        <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
+          <BasicSetting v-if="state.type === 1" />
+          <SafetySetting v-if="state.type === 2" />
         </n-card>
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import BasicSetting from './BasicSetting.vue';
-  import SafetySetting from './SafetySetting.vue';
+import { reactive, ref } from 'vue';
+import BasicSetting from './BasicSetting.vue';
+import SafetySetting from './SafetySetting.vue';
 
-  const typeTabList = [
-    {
-      name: '基本设置',
-      desc: '个人账户信息设置',
-      key: 1,
-    },
-    {
-      name: '安全设置',
-      desc: '密码，邮箱等设置',
-      key: 2,
-    },
-  ];
+const typeTabList = [
+  {
+    name: '基本设置',
+    desc: '个人账户信息设置',
+    key: 1,
+  },
+  {
+    name: '安全设置',
+    desc: '密码，邮箱等设置',
+    key: 2,
+  },
+];
 
-  const type = ref(1);
-  const typeTitle = ref('基本设置');
+const state = reactive({
+  type: 1,
+  typeTitle: '基本设置',
+});
 
-  function switchType(e) {
-    type.value = e.key;
-    typeTitle.value = e.name;
-  }
+function switchType(e) {
+  state.type = e.key;
+  state.typeTitle = e.name;
+}
 </script>
 <style lang="less" scoped>
-  .thing-cell {
-    margin: 0 -16px 10px;
-    padding: 5px 16px;
+.thing-cell {
+  margin: 0 -16px 10px;
+  padding: 5px 16px;
 
-    &:hover {
-      background: #f3f3f3;
-      cursor: pointer;
-    }
+  &:hover {
+    background: #f3f3f3;
+    cursor: pointer;
   }
+}
 
-  .thing-cell-on {
-    background: #f0faff;
-    color: #2d8cf0;
+.thing-cell-on {
+  background: #f0faff;
+  color: #2d8cf0;
 
-    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-      color: #2d8cf0;
-    }
+  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+    color: #2d8cf0;
+  }
 
-    &:hover {
-      background: #f0faff;
-    }
+  &:hover {
+    background: #f0faff;
   }
+}
 </style>

src/views/setting/system/system.vue

@@ -7,7 +7,7 @@
             class="thing-cell"
             v-for="item in typeTabList"
             :key="item.key"
-            :class="{ 'thing-cell-on': type === item.key }"
+            :class="{ 'thing-cell-on': state.type === item.key }"
             @click="switchType(item)"
           >
             <template #header>{{ item.name }}</template>
@@ -16,10 +16,10 @@
         </n-card>
       </n-grid-item>
       <n-grid-item span="18">
-        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1" />
-          <RevealSetting v-if="type === 2" />
-          <EmailSetting v-if="type === 3" />
+        <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
+          <BasicSetting v-if="state.type === 1" />
+          <RevealSetting v-if="state.type === 2" />
+          <EmailSetting v-if="state.type === 3" />
         </n-card>
       </n-grid-item>
     </n-grid>

src/views/system/menu/menu.vue

@@ -132,7 +132,7 @@
   import { getMenuList } from '@/api/system/menu';
   import { getTreeItem } from '@/utils';
   import CreateDrawer from './CreateDrawer.vue';
-  import { ListDate } from 'mock/system/menu';
+  import type { ListDate } from '@/api/system/menu';
 
   const rules = {
     label: {

src/views/system/role/role.vue

@@ -75,10 +75,8 @@
   import { getTreeAll } from '@/utils';
   import CreateModal from './CreateModal.vue';
   import EditModal from './EditModal.vue';
-  import { useRouter } from 'vue-router';
-  import { ListDate } from 'mock/system/menu';
+  import type { ListDate } from '@/api/system/menu';
 
-  const router = useRouter();
   const message = useMessage();
   const actionRef = ref();
   const createModalRef = ref();