fix Bug or add example

b4857a75 · 前端啊俊 · a6aa6d4d · b4857a75 · b4857a75 · b4857a75
27 changed file
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
+# 1.2 (2021-07-16)
+### 🐛 Bug Fixes
+- 修复面包屑显示登录页面
+- 菜单支持只展开当前父级菜单
+  
+- ### ✨ Features
+- 新增 `列表页面-基础列表` 示例页面
+- 新增 `异常页面-404-403-500` 示例页面
+- 新增 `结果页面-成功-失败-信息` 示例页面
+- 新增 `设置页面-个人设置-系统设置` 示例页面
+- tips `示例页面，可能在深色主题显示不佳`  
+- 持续更新更多实用示例，同时也演示`Naive UI`使用方法
+
+
 # 1.1 (2021-07-15)
 - ### ✨ Features
 - 新增 `基础表单` 示例页面

--- a/README.md
+++ b/README.md
@@ -16,6 +16,10 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - [ ] 监控页
 - [x] 工作台
 - [x] 表单页面
+- [x] 列表页面
+- [x] 异常页面
+- [x] 结果页面
+- [x] 设置页面

 ### 页面组件
 #### ProTable

--- a/index.html
+++ b/index.html
@@ -10,81 +10,13 @@
  />
  <link rel="icon" href="/favicon.ico"/>
  <title><%= title %></title>
+  <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 </head>
 <body>
 <div id="app">
-  <style>
-    .app-loading-main {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      min-width: 100%;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      background-color: #f4f7f9;
-      position: relative;
-    }
-
-    .app-loading {
-      position: relative;
-      -webkit-transform: translateY(-15px);
-      -ms-transform: translateY(-15px);
-      transform: translateY(-15px);
-    }
-
-    .app-loading > div {
-      -webkit-animation-fill-mode: both;
-      animation-fill-mode: both;
-      position: absolute;
-      top: 0;
-      left: 0;
-      border-radius: 100%;
-    }
-
-    .app-loading > div:first-child {
-      background: #2d8cf0;
-      height: 16px;
-      width: 16px;
-      top: 9px;
-      left: 9px;
-      -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-      animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-    }
-
-    .app-loading > div:last-child {
-      position: absolute;
-      border: 2px solid #2d8cf0;
-      width: 30px;
-      height: 30px;
-      background: transparent;
-      border: 2px solid;
-      border-color: #2d8cf0 transparent #2d8cf0 transparent;
-      -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-      animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-      -webkit-animation-duration: 1s;
-      animation-duration: 1s;
-    }
-
-    @keyframes rotate {
-      0% {
-        -webkit-transform: rotate(0deg) scale(1);
-        transform: rotate(0deg) scale(1);
-      }
-      50% {
-        -webkit-transform: rotate(180deg) scale(0.6);
-        transform: rotate(180deg) scale(0.6);
-      }
-      100% {
-        -webkit-transform: rotate(360deg) scale(1);
-        transform: rotate(360deg) scale(1);
-      }
-    }
-  </style>
-  <div class="app-loading-main">
-    <div class="app-loading">
-      <div></div>
-      <div></div>
+  <div class="first-loading-wrp">
+    <div class="loading-wrp">
+        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
    </div>
  </div>
 </div>

--- a/package.json
+++ b/package.json
 {
  "name": "naive-ui-admin",
-  "version": "1.1",
+  "version": "1.2",
  "author": {
    "name": "Ahjung",
    "email": "735878602@qq.com",
@@ -33,7 +33,7 @@
    "lodash-es": "^4.17.21",
    "mitt": "^2.1.0",
    "mockjs": "^1.1.0",
-    "naive-ui": "^2.15.4",
+    "naive-ui": "^2.15.5",
    "nprogress": "^1.0.0-1",
    "pinia": "^2.0.0-beta.3",
    "qs": "^6.10.1",

--- a/src/components/Application/Application.vue
+++ b/src/components/Application/Application.vue
@@ -11,7 +11,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, onUnmounted } from 'vue'
+import { defineComponent } from 'vue'
 import { MessageContent } from '@/components/MessageContent'
 import { DialogContent } from '@/components/DialogContent'


--- a/src/components/ProTable/src/ProTable.vue
+++ b/src/components/ProTable/src/ProTable.vue
@@ -2,20 +2,22 @@
  <div class="table-toolbar">

    <!--顶部左侧区域-->
-    <n-space align="center" class="table-toolbar-left">
-      <div class="table-toolbar-left-title" v-if="title">
-        {{ title }}
-        <n-tooltip trigger="hover" v-if="titleTooltip">
-          <template #trigger>
-            <n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
-              <QuestionCircleOutlined/>
-            </n-icon>
-          </template>
-          {{ titleTooltip }}
-        </n-tooltip>
-      </div>
+    <div class="flex items-center table-toolbar-left ">
+      <template v-if="title">
+        <div class="table-toolbar-left-title">
+          {{ title }}
+          <n-tooltip trigger="hover" v-if="titleTooltip">
+            <template #trigger>
+              <n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
+                <QuestionCircleOutlined/>
+              </n-icon>
+            </template>
+            {{ titleTooltip }}
+          </n-tooltip>
+        </div>
+      </template>
      <slot name="tableTitle"></slot>
-    </n-space>
+    </div>

    <div class="flex items-center table-toolbar-right">

@@ -276,7 +278,6 @@ export default defineComponent({
    flex: 1;

    &-icon {
-      height: 18px;
      margin-left: 12px;
      font-size: 16px;
      cursor: pointer;

--- a/src/components/ProTable/src/components/settings/ColumnSetting.vue
+++ b/src/components/ProTable/src/components/settings/ColumnSetting.vue
@@ -222,12 +222,10 @@ export default defineComponent({
  }
  &-right {
    &-icon {
-      height: 18px;
      margin-left: 12px;
      font-size: 16px;
      color:var(--text-color);
      cursor: pointer;
-
      :hover {
        color: #1890ff;
      }

--- a/src/layout/components/Footer/index.vue
+++ b/src/layout/components/Footer/index.vue
@@ -12,7 +12,7 @@
      </a>
    </div>
    <div class="copyright">
-      naive-ui-admin 1.1 · Made by Ah jung
+      naive-ui-admin 1.2 · Made by Ah jung
    </div>
  </div>


--- a/src/layout/components/Header/components.ts
+++ b/src/layout/components/Header/components.ts
-import { NLayout, NAvatar, NMenu, NDropdown, NBreadcrumb, NTooltip } from 'naive-ui'
-
 import {
  SettingOutlined,
  SearchOutlined,
@@ -18,7 +16,6 @@ import {

 export default {
  SettingOutlined,
-  NDropdown,
  LockOutlined,
  GithubOutlined,
  SearchOutlined,

--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -256,7 +256,7 @@ export default defineComponent({
    ]
    const avatarOptions = [
      {
-        label: '个人中心',
+        label: '个人设置',
        key: 1
      },
      {
@@ -269,7 +269,7 @@ export default defineComponent({
    const avatarSelect = (key) => {
      switch (key) {
        case 1:
-          openUserCentre()
+          router.push({name:'Setting'})
          break;
        case 2:
          doLogout()
@@ -282,13 +282,6 @@ export default defineComponent({
      openDrawer()
    }

-    function openUserCentre() {
-      notification.info({
-        content: '提示',
-        meta: '客官，该功能正在开发中呢...'
-      })
-    }
-
    return {
      ...toRefs(state),
      iconList,

--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
 <template>
-  <NMenu :options="menus" :inverted="inverted" :mode="mode" :collapsed="collapsed" :collapsed-width="64"
-         :collapsed-icon-size="20"
-         @update:value="clickMenuItem" :default-expanded-keys="openKeys" v-model:value="selectedKeys">
+  <NMenu
+      :options="menus"
+      :inverted="inverted"
+      :mode="mode"
+      :collapsed="collapsed"
+      :collapsed-width="64"
+      :collapsed-icon-size="20"
+      :expanded-keys="openKeys"
+      v-model:value="selectedKeys"
+      @update:value="clickMenuItem"
+      @update:expanded-keys="menuExpanded"
+  >
  </NMenu>
 </template>

 <script lang="ts">
 import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/store/modules/user'
 import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
 import { generatorMenu } from '@/utils/index'
 import { useProjectSettingStore } from "@/store/modules/projectSetting";
@@ -32,14 +40,16 @@ export default defineComponent({
    const currentRoute = useRoute()
    const router = useRouter()
    const asyncRouteStore = useAsyncRouteStore()
-    const userStore = useUserStore()
    const settingStore = useProjectSettingStore()
    const { mode } = props
+
    // 获取当前打开的子菜单
-    const getOpenKeys = () => [currentRoute.matched[0]?.name]
+    const matched = currentRoute.matched
+
+    const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []

    const state = reactive({
-      openKeys: getOpenKeys(),
+      openKeys: getOpenKeys,
      selectedKeys: currentRoute.name,
    })

@@ -53,25 +63,23 @@ export default defineComponent({

    // 监听菜单收缩状态
    watch(
-      () => props.collapsed,
-      (newVal) => {
-        state.openKeys = newVal ? [] : getOpenKeys()
-        state.selectedKeys = currentRoute.name
-      }
+        () => props.collapsed,
+        (newVal) => {
+          state.openKeys = newVal ? [] : getOpenKeys
+          state.selectedKeys = currentRoute.name
+        }
    )

    // 跟随页面路由变化，切换菜单选中状态
    watch(
-      () => currentRoute.fullPath,
-      () => {
-        if (currentRoute.name == 'login' || props.collapsed) return
-        state.openKeys = getOpenKeys()
-        state.selectedKeys = currentRoute.name
-      }
+        () => currentRoute.fullPath,
+        () => {
+          state.selectedKeys = currentRoute.name
+        }
    )

    // 点击菜单
-    const clickMenuItem = (key, item) => {
+    function clickMenuItem(key: string) {
      if (/http(s)?:/.test(key)) {
        window.open(key)
      } else {
@@ -79,12 +87,20 @@ export default defineComponent({
      }
    }

+    //展开菜单
+    function menuExpanded(openKeys: string[]) {
+      if (!openKeys) return
+      const latestOpenKey = openKeys.pop();
+      state.openKeys = latestOpenKey ? [latestOpenKey] : []
+    }
+
    return {
      ...toRefs(state),
      inverted,
      menus,
      mode,
-      clickMenuItem
+      clickMenuItem,
+      menuExpanded
    }
  }
 })

--- a/src/main.ts
+++ b/src/main.ts
@@ -5,25 +5,31 @@ import router, { setupRouter } from './router'
 import { setupStore } from '@/store'
 import { setupNaive, setupDirectives, setupGlobalMethods, setupCustomComponents } from '@/plugins'

-const app = createApp(App)
+async function bootstrap() {
+    const app = createApp(App)

-// 注册全局常用的 naive-ui 组件
-setupNaive(app)
+    // 注册全局常用的 naive-ui 组件
+    setupNaive(app)

-// 注册全局自定义组件,如：<svg-icon />
-setupCustomComponents(app)
+    // 注册全局自定义组件,如：<svg-icon />
+    setupCustomComponents(app)

-// 注册全局自定义指令，如：v-permission权限指令
-setupDirectives(app)
+    // 注册全局自定义指令，如：v-permission权限指令
+    setupDirectives(app)

-// 注册全局方法，如：app.config.globalProperties.$message = message
-setupGlobalMethods(app)
+    // 注册全局方法，如：app.config.globalProperties.$message = message
+    setupGlobalMethods(app)

-// 挂载状态管理
-setupStore(app)
+    // 挂载状态管理
+    setupStore(app)

-// 挂载路由
-setupRouter(app)
+    // 挂载路由
+    await setupRouter(app)

-// 路由准备就绪后挂载APP实例
-router.isReady().then(() => app.mount('#app'))
+    // 路由准备就绪后挂载APP实例
+    await router.isReady();
+
+    app.mount('#app', true);
+}
+
+void bootstrap()
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -56,7 +56,10 @@ import {
  NResult,
  NDescriptions,
  NDescriptionsItem,
-  NTable
+  NTable,
+  NInputNumber,
+  NLoadingBarProvider,
+  NModal
 } from 'naive-ui'

 const naive = create({
@@ -116,7 +119,10 @@ const naive = create({
    NResult,
    NDescriptions,
    NDescriptionsItem,
-    NTable
+    NTable,
+    NInputNumber,
+    NLoadingBarProvider,
+    NModal
  ]
 })


--- a/src/router/generator-routers.ts
+++ b/src/router/generator-routers.ts
 import { adminMenus } from '@/api/system/menu'
 import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
 import router from '@/router/index'
-import { constantRouter, asyncRoutes } from '@/router/index'
-import { NEmpty } from 'naive-ui'
+import { constantRouter } from '@/router/index'
 import { RouteRecordRaw } from 'vue-router'

 /**
@@ -12,9 +11,9 @@ import { RouteRecordRaw } from 'vue-router'
 * @param parent
 * @returns {*}
 */
-export const routerGenerator = (routerMap, parent) => {
+export const routerGenerator = (routerMap, parent?):any[] => {
  return routerMap.map(item => {
-    const currentRouter = {
+    const currentRouter:any = {
      // 路由地址 动态拼接生成如 /dashboard/workplace
      path: `${ parent && parent.path || '' }/${ item.path }`,
      // 路由名称，建议唯一
@@ -53,12 +52,6 @@ export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
    adminMenus()
      .then((result) => {
        const routeList = routerGenerator(result)
-        // 设置模块重定向到菜单
-        // routeList.forEach((item) => {
-        //   if (item.children?.length > 0 && !item.redirect) {
-        //     item.redirect = { name: item.children[0].name }
-        //   }
-        // })
        const asyncRoutesList = [...constantRouter, ...routeList]
        asyncRoutesList.forEach(item => {
          router.addRoute(item)

--- a/src/router/modules/comp.ts
+++ b/src/router/modules/comp.ts
@@ -24,16 +24,16 @@ const routes: Array<RouteRecordRaw> = [
    redirect: '/comp/console',
    component: Layout,
    meta: {
-      title: '组件',
+      title: '组件示例',
      icon: renderIcon(WalletOutlined ),
-      sort: 1
+      sort: 8
    },
    children: [
      {
        path: 'table',
        name: `${ routeName }_table`,
        meta: {
-          title: '基础表格',
+          title: '表格',
        },
        component: () => import('@/views/comp/table/list.vue')
      }

--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { TableOutlined } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/list',
+        name: 'List',
+        redirect: '/list/basic-list',
+        component: Layout,
+        meta: {
+            title: '列表页面',
+            icon: renderIcon(TableOutlined),
+            sort: 1
+        },
+        children: [
+            {
+                path: 'basic-list',
+                name: 'basic-list',
+                meta: {
+                    title: '基础列表',
+                },
+                component: () => import('@/views/list/basicList/index.vue')
+            }
+        ],
+    }
+]
+
+export default routes
--- a/src/router/modules/setting.ts
+++ b/src/router/modules/setting.ts
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { SettingOutlined } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ * */
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/setting',
+        name: 'Setting',
+        redirect: '/setting/account',
+        component: Layout,
+        meta: {
+            title: '设置页面',
+            icon: renderIcon(SettingOutlined),
+            sort: 5
+        },
+        children: [
+            {
+                path: 'account',
+                name: 'setting-account',
+                meta: {
+                    title: '个人设置',
+                },
+                component: () => import('@/views/setting/account/account.vue')
+            },
+            {
+                path: 'system',
+                name: 'setting-system',
+                meta: {
+                    title: '系统设置',
+                },
+                component: () => import('@/views/setting/system/system.vue')
+            }
+        ]
+    }
+]
+
+export default routes
--- a/src/router/router-guards.ts
+++ b/src/router/router-guards.ts
@@ -6,146 +6,137 @@ import NProgress from 'nprogress' // progress bar
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { storage } from '@/utils/Storage'
 import { debounce } from '@/utils/lodashChunk'
-import { useGlobSetting } from '@/hooks/setting'
 import { PageEnum } from '@/enums/pageEnum'

-const globSetting = useGlobSetting()
-

 NProgress.configure({ showSpinner: false }) // NProgress Configuration

-const whitePathList = ['/login'] // no redirect whitelist
-
 const LOGIN_PATH = PageEnum.BASE_LOGIN
-const DEFAULT_PATH = PageEnum.BASE_HOME

-
-const permissionMode = globSetting.permissionMode //ROLE 前端固定角色  BACK 动态获取
+const whitePathList = [LOGIN_PATH] // no redirect whitelist

 // 是否需要从后端获取菜单
 const isGetMenus = debounce(
-  ({ to, from, next, hasRoute, router }) => {
+    ({ to, from, next, hasRoute, router }) => {
+        const userStore = useUserStoreWidthOut();
+        const asyncRouteStore = useAsyncRouteStoreWidthOut();
+        userStore.GetInfo().then(res => {
+            asyncRouteStore.generateRoutes(res).then(() => {
+                // 根据roles权限生成可访问的路由表
+                // 动态添加可访问路由表
+                asyncRouteStore.getRouters().forEach((item) => {
+                    router.addRoute(item)
+                });
+                // if (whitePathList.includes(to.name as string)) return
+                if (!hasRoute) {
+                    // 请求带有 redirect 重定向时，登录自动重定向到该地址
+                    const redirect = decodeURIComponent((from.query.redirect || '') as string)
+                    if (to.path === redirect) {
+                        next({ ...to, replace: true })
+                    } else {
+                        // 跳转到目的路由
+                        next({ ...to, replace: true })
+                    }
+                } else {
+                    next()
+                }
+            }).catch(() => next({ path: defaultRoutePath }))
+        })
+    },
+    1800,
+    { leading: true }
+)
+
+
+export function createRouterGuards(router: Router) {
    const userStore = useUserStoreWidthOut();
    const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    userStore.GetInfo().then(res => {
-      asyncRouteStore.generateRoutes(res).then(() => {
-        // 根据roles权限生成可访问的路由表
+    router.beforeEach(async (to, from, next) => {
+        NProgress.start()
+        if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+            next(PageEnum.BASE_HOME);
+            return;
+        }
+
+        // Whitelist can be directly entered
+        if (whitePathList.includes(to.path as PageEnum)) {
+            next();
+            return;
+        }
+
+        const token = storage.get(ACCESS_TOKEN)
+        const roles = storage.get('roles')
+
+        if (!token) {
+
+            // You can access without permission. You need to set the routing meta.ignoreAuth to true
+            if (to.meta.ignoreAuth) {
+                next();
+                return;
+            }
+            // redirect login page
+            const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+                path: LOGIN_PATH,
+                replace: true,
+            };
+            if (to.path) {
+                redirectData.query = {
+                    ...redirectData.query,
+                    redirect: to.path,
+                };
+            }
+            next(redirectData);
+            return;
+        }
+
+        if (asyncRouteStore.getIsDynamicAddedRoute) {
+            next();
+            return;
+        }
+
+        const userInfo = await userStore.GetInfo()
+
+        const routes = await asyncRouteStore.generateRoutes(userInfo)
+
        // 动态添加可访问路由表
-        asyncRouteStore.getRouters().forEach((item) => {
-          router.addRoute(item)
+        routes.forEach((item) => {
+            router.addRoute(item)
        });
-        debugger
-        // if (whitePathList.includes(to.name as string)) return
-        if (!hasRoute) {
-          // 请求带有 redirect 重定向时，登录自动重定向到该地址
-          const redirect = decodeURIComponent((from.query.redirect || '') as string)
-          if (to.path === redirect) {
-            next({ ...to, replace: true })
-          } else {
-            // 跳转到目的路由
-            next({ ...to, replace: true })
-          }
-        } else {
-          next()
-        }
-      }).catch(() => next({ path: defaultRoutePath }))
+
+        const redirectPath = (from.query.redirect || to.path) as string;
+        const redirect = decodeURIComponent(redirectPath);
+        const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+        asyncRouteStore.setDynamicAddedRoute(true);
+        next(nextData);
+        NProgress.done()
    })
-  },
-  1800,
-  { leading: true }
-)

+    router.afterEach((to, from, failure) => {
+        document.title = (to?.meta?.title as string) || document.title
+        if (isNavigationFailure(failure)) {
+            //console.log('failed navigation', failure)
+        }
+        const asyncRouteStore = useAsyncRouteStoreWidthOut();
+        // 在这里设置需要缓存的组件名称
+        const keepAliveComponents = asyncRouteStore.keepAliveComponents
+        const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
+        if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
+            // 需要缓存的组件
+            keepAliveComponents.push(currentComName)
+        } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
+            // 不需要缓存的组件
+            const index = asyncRouteStore.keepAliveComponents.findIndex(
+                (name) => name == currentComName
+            )
+            if (index != -1) {
+                keepAliveComponents.splice(index, 1)
+            }
+        }
+        asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
+        NProgress.done() // finish progress bar
+    })

-export function createRouterGuards(router: Router) {
-  const userStore = useUserStoreWidthOut();
-  const asyncRouteStore = useAsyncRouteStoreWidthOut();
-  router.beforeEach(async (to, from, next) => {
-    NProgress.start()
-
-    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
-      next(PageEnum.BASE_HOME);
-      return;
-    }
-
-    // Whitelist can be directly entered
-    if (whitePathList.includes(to.path as PageEnum)) {
-      next();
-      return;
-    }
-
-    const token = storage.get(ACCESS_TOKEN)
-    const roles = storage.get('roles')
-
-    if (!token) {
-
-      // You can access without permission. You need to set the routing meta.ignoreAuth to true
-      if (to.meta.ignoreAuth) {
-        next();
-        return;
-      }
-      // redirect login page
-      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
-        path: LOGIN_PATH,
-        replace: true,
-      };
-      if (to.path) {
-        redirectData.query = {
-          ...redirectData.query,
-          redirect: to.path,
-        };
-      }
-      next(redirectData);
-      return;
-    }
-
-    if (asyncRouteStore.getIsDynamicAddedRoute) {
-      next();
-      return;
-    }
-
-    const userInfo = await userStore.GetInfo()
-
-    const routes = await asyncRouteStore.generateRoutes(userInfo)
-
-    // 动态添加可访问路由表
-    routes.forEach((item) => {
-      router.addRoute(item)
-    });
-
-    const redirectPath = (from.query.redirect || to.path) as string;
-    const redirect = decodeURIComponent(redirectPath);
-    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
-    asyncRouteStore.setDynamicAddedRoute(true);
-    next(nextData);
-    NProgress.done()
-  })
-
-  router.afterEach((to, from, failure) => {
-    document.title = (to?.meta?.title as string) || document.title
-    if (isNavigationFailure(failure)) {
-      //console.log('failed navigation', failure)
-    }
-    const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    // 在这里设置需要缓存的组件名称
-    const keepAliveComponents = asyncRouteStore.keepAliveComponents
-    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
-    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
-      // 需要缓存的组件
-      keepAliveComponents.push(currentComName)
-    } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
-      // 不需要缓存的组件
-      const index = asyncRouteStore.keepAliveComponents.findIndex(
-        (name) => name == currentComName
-      )
-      if (index != -1) {
-        keepAliveComponents.splice(index, 1)
-      }
-    }
-    asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
-    NProgress.done() // finish progress bar
-  })
-
-  router.onError((error) => {
-    console.log(error, '路由错误')
-  })
+    router.onError((error) => {
+        console.log(error, '路由错误')
+    })
 }
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -110,6 +110,11 @@ body .proCard {
  }
 }

+//body .proCardTabs{
+//  .n-card__content{ padding-top: 3px}
+//  .n-card__content:first-child{ padding-top: 3px}
+//}
+
 .n-layout-page-header {
  margin: 0 -10px;
 }
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@@ -3,10 +3,8 @@
 import { VAxios } from './Axios'
 import { AxiosTransform } from './axiosTransform'
 import axios, { AxiosResponse } from 'axios'
-import qs from 'qs'
 import { checkStatus } from './checkStatus'
 import { joinTimestamp, formatRequestDate } from './helper'
-import { useDialog } from 'naive-ui'
 import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum'

 import { useGlobSetting } from '@/hooks/setting'
@@ -24,8 +22,6 @@ const urlPrefix = globSetting.urlPrefix || '';
 const Message = window.$message
 const Modal = window.$dialog

-const isDev = import.meta.env.DEV
-
 import router from '@/router'
 import { storage } from '@/utils/Storage'


--- a/src/views/comp/table/columns.ts
+++ b/src/views/comp/table/columns.ts
@@ -42,16 +42,31 @@ export const columns = [
  {
    title: '操作',
    key: 'actions',
-    render(row) {
-      return h(
-        NButton,
-        {
-          size: 'small',
-          onClick: () => {
-          }
-        },
-        { default: () => '编辑' }
-      )
+    width:150,
+    //简单写一下例子，不建议这么写，过段时间，这里封二次封装
+    render() {
+      return [
+        h(
+            NButton,
+            {
+              size: 'small',
+              type:'error',
+              style:'margin-right:10px',
+              onClick: () => {
+              }
+            },
+            { default: () => '删除' }
+        ),
+        h(
+            NButton,
+            {
+              size: 'small',
+              onClick: () => {
+              }
+            },
+            { default: () => '编辑' }
+        )
+      ]
    }
  }
 ]
--- a/src/views/form/basicForm/index.vue
+++ b/src/views/form/basicForm/index.vue
@@ -68,7 +68,7 @@
  </div>
 </template>

-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useMessage } from 'naive-ui'


--- a/src/views/list/basicList/columns.ts
+++ b/src/views/list/basicList/columns.ts
+import { h } from 'vue'
+import { NAvatar, NButton } from 'naive-ui'
+
+export const columns = [
+  {
+    title: 'id',
+    key: 'id'
+  },
+  {
+    title: '名称',
+    key: 'name'
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(
+        NAvatar,
+        {
+          size: 48,
+          src: row.avatar
+        }
+      )
+    }
+  },
+  {
+    title: '地址',
+    key: 'address'
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width:150,
+    //简单写一下例子，不建议这么写，过段时间，这里封二次封装
+    render() {
+      return [
+          h(
+            NButton,
+            {
+              size: 'small',
+              type:'error',
+              style:'margin-right:10px',
+              onClick: () => {
+              }
+            },
+              { default: () => '删除' }
+        ),
+        h(
+            NButton,
+            {
+              size: 'small',
+              onClick: () => {
+              }
+            },
+            { default: () => '编辑' }
+        )
+      ]
+    }
+  }
+]
--- a/src/views/list/basicList/index.vue
+++ b/src/views/list/basicList/index.vue
+<template>
+  <n-card :bordered="false" class="proCard">
+    <ProTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="row => row.id"
+        ref="actionRef"
+        @update:checked-row-keys="onCheckedRow"
+    >
+      <template #tableTitle>
+        <n-button type="primary" @click="addTable">
+          <template #icon>
+            <n-icon>
+              <PlusOutlined/>
+            </n-icon>
+          </template>
+          新建
+        </n-button>
+      </template>
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </ProTable>
+
+    <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
+      <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+      >
+        <n-form-item label="名称" path="name">
+          <n-input placeholder="请输入名称" v-model:value="formParams.name"/>
+        </n-form-item>
+        <n-form-item label="地址" path="address">
+          <n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address"/>
+        </n-form-item>
+        <n-form-item label="日期" path="date">
+          <n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date"/>
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="()=> showModal = false">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+
+    </n-modal>
+
+  </n-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, h } from 'vue'
+import { useMessage } from 'naive-ui'
+import { ProTable } from '@/components/ProTable'
+import { getTableList } from '@/api/table/list'
+import { columns } from './columns'
+import { PlusOutlined } from '@vicons/antd'
+
+const rules = {
+  name: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入名称'
+  },
+  address: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入地址'
+  },
+  date: {
+    type: 'number',
+    required: true,
+    trigger: ['blur', 'change'],
+    message: '请选择日期'
+  },
+}
+
+export default defineComponent({
+  components: { ProTable, PlusOutlined },
+  setup() {
+    const formRef: any = ref(null)
+    const message = useMessage()
+    const actionRef = ref()
+    const state = reactive({
+      showModal: false,
+      formBtnLoading: false,
+      formParams: {
+        name: '',
+        address: '',
+        date: []
+      },
+      params: {
+        pageSize: 5,
+        name: 'xiaoMa'
+      },
+    })
+
+    function addTable() {
+      state.showModal = true
+    }
+
+    const loadDataTable = async (params) => {
+      const data = await getTableList(params);
+      return data
+    }
+
+    function onCheckedRow(rowKeys) {
+      console.log(rowKeys)
+    }
+
+    function reloadTable() {
+      actionRef.value.reload()
+    }
+
+    function confirmForm(e) {
+      e.preventDefault()
+      state.formBtnLoading = true
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          message.success('新建成功')
+          setTimeout(() => {
+            state.showModal = false
+            reloadTable()
+          })
+        } else {
+          message.error('请填写完整信息')
+        }
+        state.formBtnLoading = false
+      })
+    }
+
+    return {
+      ...toRefs(state),
+      formRef,
+      columns,
+      rules,
+      actionRef,
+      confirmForm,
+      loadDataTable,
+      onCheckedRow,
+      reloadTable,
+      addTable
+    }
+  }
+})
+</script>
+
+<style lang='less' scoped>
+
+</style>
--- a/src/views/setting/account/BasicSetting.vue
+++ b/src/views/setting/account/BasicSetting.vue
+<template>
+  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
+    <n-grid-item>
+      <n-form
+          :label-width="80"
+          :model="formValue"
+          :rules="rules"
+          ref="formRef"
+      >
+        <n-form-item label="昵称" path="name">
+          <n-input v-model:value="formValue.name" placeholder="请输入昵称"/>
+        </n-form-item>
+
+        <n-form-item label="邮箱" path="email">
+          <n-input placeholder="请输入备案编号" v-model:value="formValue.email"/>
+        </n-form-item>
+
+
+        <n-form-item label="联系电话" path="mobile">
+          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
+        </n-form-item>
+
+        <n-form-item label="联系地址" path="address">
+          <n-input
+              v-model:value="formValue.address"
+              type="textarea"
+              placeholder="请输入联系地址"
+          />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入昵称',
+    trigger: 'blur'
+  },
+  email: {
+    required: true,
+    message: '请输入邮箱',
+    trigger: 'blur'
+  },
+  mobile: {
+    required: true,
+    message: '请输入联系电话',
+    trigger: 'input'
+  },
+}
+
+export default defineComponent({
+  setup() {
+    const formRef: any = ref(null)
+    const message = useMessage()
+
+    const state = reactive({
+      formValue: {
+        name: '',
+        mobile: '',
+        email: '',
+        address: '',
+      }
+    })
+
+    function formSubmit() {
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          message.success('验证成功')
+        } else {
+          message.error('验证失败，请填写完整信息')
+        }
+      })
+    }
+
+    return {
+      formRef,
+      ...toRefs(state),
+      rules,
+      formSubmit
+    }
+  }
+})
+</script>
--- a/src/views/setting/account/SafetySetting.vue
+++ b/src/views/setting/account/SafetySetting.vue
+<template>
+  <n-grid cols="1" responsive="screen" class="-mt-5">
+    <n-grid-item>
+      <n-list>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text>修改</n-button>
+          </template>
+          <n-thing title="账户密码">
+            <template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text>修改</n-button>
+          </template>
+          <n-thing title="绑定手机">
+            <template #description><span class="text-gray-400">已绑定手机号：+86189****4877</span></template>
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text>设置</n-button>
+          </template>
+          <n-thing title="密保问题">
+            <template #description><span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span></template>
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text>修改</n-button>
+          </template>
+          <n-thing title="个性域名">
+            <template #description><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template>
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入昵称',
+    trigger: 'blur'
+  },
+  email: {
+    required: true,
+    message: '请输入邮箱',
+    trigger: 'blur'
+  },
+  mobile: {
+    required: true,
+    message: '请输入联系电话',
+    trigger: 'input'
+  },
+}
+
+export default defineComponent({
+  setup() {
+    const formRef: any = ref(null)
+    const message = useMessage()
+
+    const state = reactive({
+      formValue: {
+        name: '',
+        mobile: '',
+        email: '',
+        address: '',
+      }
+    })
+
+    function formSubmit() {
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          message.success('验证成功')
+        } else {
+          message.error('验证失败，请填写完整信息')
+        }
+      })
+    }
+
+    return {
+      formRef,
+      ...toRefs(state),
+      rules,
+      formSubmit
+    }
+  }
+})
+</script>
--- a/yarn.lock
+++ b/yarn.lock
@@ -3561,10 +3561,10 @@ mute-stream@0.0.7:
  resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=

-naive-ui@^2.15.4:
-  version "2.15.4"
-  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.4.tgz#56c53b03e277ac9e55396bfb85dc2b49293ca6c3"
-  integrity sha1-VsU7A+J3rJ5VOWv7hdwrSSk8psM=
+naive-ui@^2.15.5:
+  version "2.15.5"
+  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.5.tgz#50ffc1834fd64765621a31f0b09e64d72770cd6c"
+  integrity sha1-UP/Bg0/WR2ViGjHwsJ5k1ydwzWw=
  dependencies:
    "@css-render/plugin-bem" "^0.15.4"
    "@css-render/vue3-ssr" "^0.15.4"
@@ -3578,7 +3578,7 @@ naive-ui@^2.15.4:
    lodash "^4.17.21"
    lodash-es "^4.17.21"
    seemly "^0.3.1"
-    treemate "^0.2.11"
+    treemate "^0.2.12"
    vdirs "^0.1.4"
    vfonts "^0.1.0"
    vooks "^0.2.6"
@@ -4967,10 +4967,10 @@ to-regex-range@^5.0.1:
  dependencies:
    is-number "^7.0.0"

-treemate@^0.2.11:
-  version "0.2.11"
-  resolved "https://registry.nlark.com/treemate/download/treemate-0.2.11.tgz#cffa37051e613beaa82fd3fce56300e8e4d8328f"
-  integrity sha1-z/o3BR5hO+qoL9P85WMA6OTYMo8=
+treemate@^0.2.12:
+  version "0.2.12"
+  resolved "https://registry.nlark.com/treemate/download/treemate-0.2.12.tgz#eed8ce0cd5a03f11c090c43d08f548694eead4b5"
+  integrity sha1-7tjODNWgPxHAkMQ9CPVIaU7q1LU=

 trim-newlines@^3.0.0:
  version "3.0.1"