fix Bug or add example

新增示例demo
readme更新，删除无用文件
2026-02-04 21:52:27 +08:00 · 2021-07-16 17:41:11 +08:00 · 2021-07-15 23:51:18 +08:00 · 2021-07-15 15:18:00 +08:00 · 2021-07-15 13:52:54 +08:00 · 2021-07-13 18:16:47 +08:00
104 changed files with 3630 additions and 1015 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,19 +0,0 @@
-root = true
-
-[*]
-charset=utf-8
-end_of_line=lf
-insert_final_newline=true
-indent_style=space
-indent_size=2
-max_line_length = 100
-
-[*.{yml,yaml,json}]
-indent_style = space
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab
--- a/.env.production
+++ b/.env.production
@@ -5,7 +5,7 @@ VITE_USE_MOCK = true
 VITE_PUBLIC_PATH = /

 # 网站前缀
-VITE_BASE_URL = /naive-ui-admin-preview
+VITE_BASE_URL = /

 # 是否删除console
 VITE_DROP_CONSOLE = true
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,9 +0,0 @@
-module.exports = {
-  useTabs: false,
-  tabWidth: 2,
-  printWidth: 100,
-  singleQuote: true,
-  trailingComma: 'none',
-  bracketSpacing: true,
-  semi: false
-};
--- a/.yarnrc
+++ b/.yarnrc
@@ -1,8 +0,0 @@
-registry "https://registry.npm.taobao.org"
-
-sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
-phantomjs_cdnurl "http://cnpmjs.org/downloads"
-electron_mirror "https://npm.taobao.org/mirrors/electron/"
-sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
-profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
-chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,38 @@
+# 1.2 (2021-07-16)
+### 🐛 Bug Fixes
+- 修复面包屑显示登录页面
+- 菜单支持只展开当前父级菜单
+  
+- ### ✨ Features
+- 新增 `列表页面-基础列表` 示例页面
+- 新增 `异常页面-404-403-500` 示例页面
+- 新增 `结果页面-成功-失败-信息` 示例页面
+- 新增 `设置页面-个人设置-系统设置` 示例页面
+- tips `示例页面，可能在深色主题显示不佳`  
+- 持续更新更多实用示例，同时也演示`Naive UI`使用方法
+
+
+# 1.1 (2021-07-15)
+- ### ✨ Features
+- 新增 `基础表单` 示例页面
+- 新增 `分步表单` 示例页面
+- 新增 `表单详情` 示例页面
+- 持续更新更多实用示例，同时也演示`Naive UI`使用方法
+
+
+# 1.0 (2021-07-12)
+### 🐛 Bug Fixes
+- 修复页面切换面包屑未及时更新
+
+- ### ✨ Features
+- 1.0骨架发布 
+- Naive UI 升级至2.15.4  
+- 菜单新增排序字段  
+- 新增 `ProTable` 组件，封装了常用的分页列配置等逻辑
+- 新增 `ProTable` 组件示例页面 
+- 持续更新中...
+
+
 # 0.1.1-beta (2021-07-07)
 ### 🐛 Bug Fixes
 - 修正黑色主题，页面背景色和导航风格问题
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2020 bqy
+Copyright (c) 2021-present Naive Ui Admin

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@@ -15,9 +15,19 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - [x] 主控台
 - [ ] 监控页
 - [x] 工作台
+- [x] 表单页面
+- [x] 列表页面
+- [x] 异常页面
+- [x] 结果页面
+- [x] 设置页面

-## 预览
- [naive-ui-admin](https://jekip.github.io/naive-ui-admin-preview)
+### 页面组件
+#### ProTable
+- [x] 表格
+- 持续开发中...
+
+## 在线预览
+- [naive-ui-admin](https://jekip.github.io)

 账号：admin，密码：123456

--- a/index.html
+++ b/index.html
@@ -1,78 +1,25 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-cmn-Hans">
 <head>
  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+  <meta name="renderer" content="webkit"/>
+  <meta
+    name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+  />
+  <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%;
-        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: 0px;
-        left: 0px;
-        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>
+<div id="app">
+  <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>
-  <script type="module" src="/src/main.ts"></script>
+</div>
+<script type="module" src="/src/main.ts"></script>
 </body>
 </html>
--- a/mock/table/list.ts
+++ b/mock/table/list.ts
@@ -28,12 +28,12 @@ export default [
    timeout: 1000,
    method: 'get',
    response: ({ query }) => {
-      const { pageNumber = 1, pageSize = 10 } = query;
+      const { page = 1, pageSize = 10 } = query;
      const list = tableList(Number(pageSize))
      return resultSuccess({
-        pageNumber:Number(pageNumber),
+        page:Number(page),
        pageSize:Number(pageSize),
-        total: list.length,
+        pageCount: 60,
        list
      }
      );
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "naive-ui-admin",
-  "version": "1.0",
+  "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.2",
+    "naive-ui": "^2.15.5",
    "nprogress": "^1.0.0-1",
    "pinia": "^2.0.0-beta.3",
    "qs": "^6.10.1",
@@ -47,7 +47,6 @@
  "devDependencies": {
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-conventional": "^12.1.4",
-    "@tailwindcss/postcss7-compat": "^2.2.4",
    "@types/lodash": "^4.14.170",
    "@types/node": "^15.12.2",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
@@ -56,7 +55,7 @@
    "@vitejs/plugin-vue-jsx": "^1.1.5",
    "@vue/compiler-sfc": "3.1.1",
    "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.3.1",
    "commitizen": "^4.2.4",
    "core-js": "^3.14.0",
    "dotenv": "^10.0.0",
@@ -80,11 +79,11 @@
    "stylelint-scss": "^3.19.0",
    "tailwindcss": "^2.2.4",
    "typescript": "^4.3.2",
-    "vite": "2.4.0-beta.3",
+    "vite": "^2.4.2",
    "vite-plugin-html": "^2.0.7",
-    "vite-plugin-mock": "^2.8.0",
-    "vite-plugin-style-import": "^0.10.1",
-    "vue-eslint-parser": "^7.6.0"
+    "vite-plugin-mock": "^2.9.1",
+    "vite-plugin-style-import": "^1.0.1",
+    "vue-eslint-parser": "^7.8.0"
  },
  "lint-staged": {
    "*.{vue,js,ts,tsx}": "eslint --fix"
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,14 +12,14 @@
  </NConfigProvider>

  <transition v-if="isLock && $route.name != 'login'" name="slide-up">
-    <lockScreen/>
+    <LockScreen/>
  </transition>
 </template>

 <script lang="ts">
 import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
 import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui'
-import { LockScreen } from '@/components/lockscreen'
+import { LockScreen } from '@/components/Lockscreen'
 import { AppProvider } from '@/components/Application'
 import { useLockscreenStore } from '@/store/modules/lockscreen'
 import { useRoute } from 'vue-router'
--- a/src/assets/images/exception/403.svg
+++ b/src/assets/images/exception/403.svg
--- a/src/assets/images/exception/404.svg
+++ b/src/assets/images/exception/404.svg
--- a/src/assets/images/exception/500.svg
+++ b/src/assets/images/exception/500.svg
--- a/src/assets/images/exception/developing.svg
+++ b/src/assets/images/exception/developing.svg
--- a/src/assets/images/exception/load-error.svg
+++ b/src/assets/images/exception/load-error.svg
--- a/src/assets/images/exception/nodata.svg
+++ b/src/assets/images/exception/nodata.svg
--- 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/Lockscreen/Lockscreen.vue
+++ b/src/components/Lockscreen/Lockscreen.vue
@@ -77,7 +77,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue'
 import { ResultEnum } from '@/enums/httpEnum'
-import recharge from './recharge.vue'
+import recharge from './Recharge.vue'
 import {
  LockOutlined,
  LoadingOutlined,
--- a/src/components/Lockscreen/Recharge.vue
+++ b/src/components/Lockscreen/Recharge.vue
--- a/src/components/Lockscreen/index.ts
+++ b/src/components/Lockscreen/index.ts
@@ -0,0 +1,3 @@
+import LockScreen from './Lockscreen.vue'
+
+export { LockScreen }
--- a/src/components/ProTable/README.md
+++ b/src/components/ProTable/README.md
@@ -0,0 +1,91 @@
+ProTable 重封装组件说明
+====
+
+封装说明
+----
+
+> 基础的使用方式与 API 与 [官方版(data-table)](https://www.naiveui.com/zh-CN/os-theme/components/data-table#tree) 本一致，在其基础上，封装了加载数据的方法。
+>
+> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 ProTable 组件传递绑定 `:api="Promise"` 对象即可
+>
+> 例子1
+----
+（基础使用）
+
+```vue
+
+<template>
+    <ProTable
+      title="表格列表"
+      :columns="columns"
+      :api="loadDataTable"
+      :row-key="row => row.id"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary">添加会员</n-button>
+      </template>
+    </ProTable>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ProTable } from '@/components/ProTable'
+import { getTableList } from '@/api/table/list'
+const columns = [
+    {
+      title: 'id',
+      key: 'id'
+    },
+    {
+      title: '名称',
+      key: 'name'
+    },
+    {
+      title: '地址',
+      key: 'address'
+    },
+    {
+      title: '日期',
+      key: 'date'
+    },
+]
+export default defineComponent({
+  components: { ProTable },
+  setup() {
+      const loadDataTable = async (params) => {
+        const data = await getTableList(params);
+        return data
+      }
+    return {
+      columns,
+      loadDataTable
+    }
+  }
+})
+</script>
+```
+
+API
+----
+ProTable 在 NaiveUi 的 data-table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 data-table 不同的 api。
+
+> request：Promise 参考上面例子写法
+> ref：可绑定ref 调用组件内部方法（data-table本身的方法和参数）
+
+Methods
+----
+> reload：actionRef.value.reload()
+
+> 其余方法，请打印查看
+
+Slots
+----
+> 名称：tableTitle | 表格顶部左侧区域                          
+> 名称：toolbar | 表格顶部右侧区域
+
+
+更新时间
+----
+
+该文档最后更新于： 2021-07-12 PM 10:13
--- a/src/components/ProTable/index.ts
+++ b/src/components/ProTable/index.ts
@@ -0,0 +1 @@
+export { default as ProTable } from './src/ProTable.vue';
--- a/src/components/ProTable/src/ProTable.vue
+++ b/src/components/ProTable/src/ProTable.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="table-toolbar">
+
+    <!--顶部左侧区域-->
+    <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>
+    </div>
+
+    <div class="flex items-center table-toolbar-right">
+
+      <!--顶部右侧区域-->
+      <slot name="toolbar"></slot>
+
+      <!--刷新-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="table-toolbar-right-icon" @click="reload">
+            <n-icon size="18">
+              <ReloadOutlined/>
+            </n-icon>
+          </div>
+        </template>
+        <span>刷新</span>
+      </n-tooltip>
+
+      <!--密度-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="table-toolbar-right-icon">
+            <n-dropdown @select="densitySelect" trigger="click" :options="densityOptions" v-model:value="tableSize">
+              <n-icon size="18">
+                <ColumnHeightOutlined/>
+              </n-icon>
+            </n-dropdown>
+          </div>
+        </template>
+        <span>密度</span>
+      </n-tooltip>
+
+      <!--表格设置单独抽离成组件-->
+      <ColumnSetting></ColumnSetting>
+
+    </div>
+
+  </div>
+  <div class="s-table">
+    <n-data-table
+      v-bind="getBindValues"
+      :pagination="pagination"
+      @update:page="updatePage"
+      @update:page-size="updatePageSize"
+    >
+      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <slot :name="item" v-bind="data"></slot>
+      </template>
+    </n-data-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { NDataTable } from 'naive-ui'
+import { ref, defineComponent, reactive, unref, onMounted, toRaw, onBeforeMount, computed, toRefs, watch } from "vue"
+import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, QuestionCircleOutlined } from '@vicons/antd'
+import { createTableContext } from './hooks/useTableContext';
+
+import ColumnSetting from './components/settings/ColumnSetting.vue'
+
+import { useLoading } from './hooks/useLoading';
+import { useColumns } from './hooks/useColumns';
+import { useDataSource } from './hooks/useDataSource';
+import { usePagination } from './hooks/usePagination';
+
+import { basicProps } from './props'
+
+import { BasicTableProps } from './types/table'
+
+
+const densityOptions = [
+  {
+    type: "menu",
+    label: '紧凑',
+    key: 'small',
+  },
+  {
+    type: "menu",
+    label: '默认',
+    key: "medium"
+  },
+  {
+    type: "menu",
+    label: '宽松',
+    key: 'large'
+  }
+]
+
+export default defineComponent({
+  components: {
+    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, ColumnSetting, QuestionCircleOutlined
+  },
+  props: {
+    ...NDataTable.props, // 这里继承原 UI 组件的 props
+    ...basicProps
+  },
+  emits: [
+    'fetch-success',
+    'fetch-error',
+    'update:checked-row-keys'
+  ],
+  setup(props, { emit }) {
+
+    const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+
+    const tableData = ref<Recordable[]>([]);
+    const innerPropsRef = ref<Partial<BasicTableProps>>();
+
+    const getProps = computed(() => {
+      return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+    });
+
+    const { getLoading, setLoading } = useLoading(getProps);
+
+    const {
+      getPaginationInfo,
+      getPagination,
+      setPagination,
+      setShowPagination,
+      getShowPagination,
+    } = usePagination(getProps)
+
+    const { getDataSourceRef, getRowKey, getDataSource, setDataSource, reload } = useDataSource(
+      getProps, {
+        getPaginationInfo,
+        setPagination,
+        tableData,
+        setLoading
+      }, emit
+    )
+
+    const {
+      getPageColumns,
+      setColumns,
+      getColumns,
+      getCacheColumns,
+      setCacheColumnsField,
+      getColumnsRef
+    } = useColumns(getProps)
+
+    const state = reactive({
+      tableSize: 'medium',
+      isColumnSetting: false
+    })
+
+    //页码切换
+    function updatePage(page) {
+      setPagination({ page: page, });
+      reload()
+    }
+
+    //分页数量切换
+    function updatePageSize(size) {
+      setPagination({ page: 1, pageSize: size, });
+      reload()
+    }
+
+    //密度切换
+    function densitySelect(e) {
+      state.tableSize = e
+    }
+
+    //选中行
+    function updateCheckedRowKeys(rowKeys) {
+      emit('update:checked-row-keys', rowKeys)
+    }
+
+    //重置 Columns
+    const resetColumns = () => {
+      columns.map(item => {
+        item.isShow = true
+      })
+    }
+
+    //获取表格大小
+    const getTableSize = computed(() => state.tableSize)
+
+    //组装表格信息
+    const getBindValues = computed(() => {
+      const tableData = unref(getDataSourceRef);
+      let propsData = {
+        ...unref(getProps),
+        loading: unref(getLoading),
+        columns: toRaw(unref(getPageColumns)),
+        rowKey: unref(getRowKey),
+        data: tableData,
+        size: unref(getTableSize),
+        remote: true
+      }
+      return propsData
+    })
+
+    //获取分页信息
+    const pagination = computed(() => toRaw(unref(getPaginationInfo)))
+
+    function setProps(props: Partial<BasicTableProps>) {
+      innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+    }
+
+    const tableAction: TableActionType = {
+      reload,
+      setColumns,
+      setLoading,
+      setProps,
+      getColumns,
+      getPageColumns,
+      getCacheColumns,
+      setCacheColumnsField,
+      emit,
+      getSize: () => {
+        return unref(getBindValues).size as SizeType;
+      },
+    };
+
+    createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+    return {
+      ...toRefs(state),
+      getBindValues,
+      densityOptions,
+      reload,
+      densitySelect,
+      updatePage,
+      updatePageSize,
+      updateCheckedRowKeys,
+      pagination,
+      resetColumns,
+      tableAction
+    }
+  }
+})
+
+</script>
+<style lang='less' scoped>
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0 16px 0;
+
+  &-left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  &-right {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+
+    &-icon {
+      margin-left: 12px;
+      font-size: 16px;
+      cursor: pointer;
+      color:var(--text-color);
+      :hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.table-toolbar-inner-popover-title {
+  padding: 2px 0;
+}
+</style>
--- a/src/components/ProTable/src/components/settings/ColumnSetting.vue
+++ b/src/components/ProTable/src/components/settings/ColumnSetting.vue
@@ -0,0 +1,275 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <div class="cursor-pointer table-toolbar-right-icon">
+        <n-popover trigger="click" :width="230" class="toolbar-popover" placement="bottom-end">
+          <template #trigger>
+            <n-icon size="18">
+              <SettingOutlined/>
+            </n-icon>
+          </template>
+          <template #header>
+            <div class="table-toolbar-inner-popover-title">
+              <n-space>
+                <n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll">列展示</n-checkbox>
+                <n-checkbox v-model:checked="selection" @update:checked="onSelection">勾选列</n-checkbox>
+                <n-button text type="info" size="small" class="mt-1" @click="resetColumns">重置</n-button>
+              </n-space>
+            </div>
+          </template>
+          <div class="table-toolbar-inner">
+            <n-checkbox-group v-model:value="checkList" @update:value="onChange">
+              <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
+                <template #item="{element, index}">
+                  <div class="table-toolbar-inner-checkbox" :class="{'table-toolbar-inner-checkbox-dark':getDarkTheme === true}">
+                    <span class="drag-icon">
+                      <n-icon size="18">
+                        <DragOutlined/>
+                      </n-icon>
+                    </span>
+                    <n-checkbox :value="element.key" :label="element.title"/>
+                    <div class="fixed-item">
+                      <n-tooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
+                                  class="cursor-pointer" @click="fixedColumn(element,'left')">
+                            <VerticalRightOutlined />
+                          </n-icon>
+                        </template>
+                        <span>固定到左侧</span>
+                      </n-tooltip>
+                      <n-divider vertical/>
+                      <n-tooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <n-icon size="18" :color="element.fixed === 'right' ? '#2080f0':undefined"
+                                  class="cursor-pointer" @click="fixedColumn(element,'right')">
+                            <VerticalLeftOutlined />
+                          </n-icon>
+                        </template>
+                        <span>固定到右侧</span>
+                      </n-tooltip>
+                    </div>
+                  </div>
+                </template>
+              </Draggable>
+            </n-checkbox-group>
+          </div>
+        </n-popover>
+      </div>
+    </template>
+    <span>列设置</span>
+  </n-tooltip>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from "vue"
+import { useTableContext } from '../../hooks/useTableContext';
+import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@vicons/antd'
+import Draggable from 'vuedraggable/src/vuedraggable'
+import { useDesignSetting } from "@/hooks/setting/useDesignSetting";
+
+interface Options {
+  title: string;
+  key: string;
+  fixed?: boolean | 'left' | 'right';
+}
+
+export default defineComponent({
+  name: 'ColumnSetting',
+  components: {
+    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, Draggable,
+    VerticalRightOutlined, VerticalLeftOutlined
+  },
+  setup(props, { emit }) {
+    const { getDarkTheme } = useDesignSetting()
+    const table = useTableContext();
+    const columnsList = ref<Options[]>([]);
+    const cacheColumnsList = ref<Options[]>([]);
+
+    const state = reactive({
+      selection: false,
+      checkAll: true,
+      checkList: [],
+      defaultCheckList: []
+    })
+
+    const getSelection = computed(() => {
+      return state.selection
+    })
+
+    watchEffect(() => {
+      const columns = table.getColumns();
+      if (columns.length) {
+        init();
+      }
+    });
+
+    //初始化
+    function init() {
+      const columns = getColumns();
+      const checkList = columns.map(item => item.key)
+      state.checkList = checkList
+      state.defaultCheckList = checkList
+      columnsList.value = columns
+      cacheColumnsList.value = columns
+    }
+
+    //切换
+    function onChange(checkList) {
+      if (state.selection) {
+        checkList.unshift('selection')
+      }
+      setColumns(checkList)
+    }
+
+    //设置
+    function setColumns(columns) {
+      table.setColumns(columns)
+    }
+
+    //获取
+    function getColumns() {
+      let newRet = []
+      table.getColumns().forEach(item => {
+        newRet.push({...item })
+      })
+      return newRet
+    }
+
+    //重置
+    function resetColumns() {
+      state.checkList = [...state.defaultCheckList]
+      state.checkAll = true;
+      let cacheColumnsKeys:any[] = table.getCacheColumns()
+      let newColumns = cacheColumnsKeys.map(item => {
+        return {
+          ...item,
+          fixed:undefined
+        }
+      })
+      setColumns(newColumns);
+      columnsList.value = newColumns
+    }
+
+    //全选
+    function onCheckAll(e) {
+      let checkList = table.getCacheColumns(true)
+      if (e) {
+        setColumns(checkList);
+        state.checkList = checkList
+      } else {
+        setColumns([]);
+        state.checkList = []
+      }
+    }
+
+    //拖拽排序
+    function draggableEnd() {
+      const newColumns = toRaw(unref(columnsList))
+      columnsList.value = newColumns
+      setColumns(newColumns);
+    }
+
+    //勾选列
+    function onSelection(e) {
+      let checkList = table.getCacheColumns()
+      if (e) {
+        checkList.unshift({ type: 'selection', key: 'selection' })
+        setColumns(checkList);
+      } else {
+        checkList.splice(0, 1)
+        setColumns(checkList);
+      }
+    }
+
+    //固定
+    function fixedColumn(item, fixed) {
+      console.log('item：',item)
+      if (!state.checkList.includes(item.key)) return;
+      let columns = getColumns();
+      const isFixed = item.fixed === fixed ? undefined : fixed
+      let index = columns.findIndex(res => res.key === item.key)
+      console.log('index：',index)
+      if(index !== -1){
+        columns[index].fixed = isFixed;
+      }
+      table.setCacheColumnsField(item.key, { fixed: isFixed })
+      columnsList.value[index].fixed = isFixed
+      console.log('columnsList：',columnsList.value)
+      setColumns(columns);
+    }
+
+    return {
+      ...toRefs(state),
+      columnsList,
+      getDarkTheme,
+      onChange,
+      onCheckAll,
+      onSelection,
+      resetColumns,
+      fixedColumn,
+      draggableEnd,
+      getSelection
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.table-toolbar {
+  &-inner-popover-title{
+    padding: 3px 0;
+  }
+  &-right {
+    &-icon {
+      margin-left: 12px;
+      font-size: 16px;
+      color:var(--text-color);
+      cursor: pointer;
+      :hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.table-toolbar-inner {
+  &-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 10px 14px;
+    &:hover {
+      background: #e6f7ff;
+    }
+    .drag-icon {
+      display: inline-flex;
+      margin-right: 8px;
+      cursor: move;
+    }
+    .fixed-item {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+
+    .ant-checkbox-wrapper {
+      flex: 1;
+
+      &:hover {
+        color: #1890ff !important;
+      }
+    }
+  }
+  &-checkbox-dark{
+    &:hover {
+      background: hsla(0, 0%, 100%, .08);
+    }
+  }
+}
+.toolbar-popover{
+  .n-popover__content{
+    padding: 0;
+  }
+}
+</style>
--- a/src/components/ProTable/src/const.ts
+++ b/src/components/ProTable/src/const.ts
@@ -0,0 +1,15 @@
+import componentSetting from '@/settings/componentSetting'
+
+const { table } = componentSetting
+
+const { apiSetting, defaultPageSize, pageSizes } = table;
+
+export const DEFAULTPAGESIZE = defaultPageSize;
+
+export const APISETTING = apiSetting;
+
+export const PAGESIZES = pageSizes;
+
+
+
+
--- a/src/components/ProTable/src/hooks/useColumns.ts
+++ b/src/components/ProTable/src/hooks/useColumns.ts
@@ -0,0 +1,95 @@
+import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
+import type { BasicColumn, BasicTableProps } from '../types/table';
+import { isEqual, cloneDeep } from 'lodash-es';
+import { isArray, isString } from '@/utils/is';
+
+export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
+  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
+  let cacheColumns = unref(propsRef).columns;
+
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef));
+    return columns;
+  })
+
+  const getPageColumns = computed(() => {
+    const pageColumns = unref(getColumnsRef);
+    const columns = cloneDeep(pageColumns);
+    return columns
+  })
+
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns;
+    }
+  );
+
+
+  //设置
+  function setColumns(columnList: string[]) {
+    const columns: any[] = cloneDeep(columnList);
+    if (!isArray(columns)) return;
+
+    if (!columns.length) {
+      columnsRef.value = [];
+      return;
+    }
+    const cacheKeys = cacheColumns.map((item) => item.key);
+    //针对拖拽排序
+    if (!isString(columns[0])) {
+      columnsRef.value = columns;
+    } else {
+      const newColumns: any[] = []
+      cacheColumns.forEach(item => {
+        if (columnList.includes(item.key)) {
+          newColumns.push({ ...item })
+        }
+      })
+      if (!isEqual(cacheKeys, columns)) {
+        newColumns.sort((prev, next) => {
+          return (
+            cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key)
+          );
+        });
+      }
+      columnsRef.value = newColumns
+    }
+  }
+
+  //获取
+  function getColumns() {
+    let columns = toRaw(unref(getColumnsRef));
+    return columns.map(item => {
+      return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
+    })
+  }
+
+  //获取原始
+  function getCacheColumns(isKey?: boolean): any[] {
+    return isKey ? cacheColumns.map(item => item.key) : cacheColumns;
+  }
+
+  //更新原始数据单个字段
+  function setCacheColumnsField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
+    if (!dataIndex || !value) {
+      return;
+    }
+    cacheColumns.forEach((item) => {
+      if (item.key === dataIndex) {
+        Object.assign(item, value);
+        return;
+      }
+    });
+  }
+
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    setCacheColumnsField,
+    setColumns,
+    getColumns,
+    getPageColumns
+  };
+}
--- a/src/components/ProTable/src/hooks/useDataSource.ts
+++ b/src/components/ProTable/src/hooks/useDataSource.ts
@@ -0,0 +1,141 @@
+import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import { isBoolean } from '@/utils/is';
+import { APISETTING } from '../const';
+
+export function useDataSource(
+  propsRef: ComputedRef<BasicTableProps>,
+  {
+    getPaginationInfo,
+    setPagination,
+    setLoading,
+    tableData
+  },
+  emit
+) {
+  const dataSourceRef = ref([]);
+
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource }: any = unref(propsRef);
+      dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const getRowKey = computed(() => {
+    const { rowKey }:any = unref(propsRef);
+    return rowKey ? rowKey : () => {
+      return 'key'
+    };
+  });
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef);
+    }
+    return unref(dataSourceRef);
+  });
+
+  async function fetch(opt?) {
+    try {
+      setLoading(true);
+      const { request, pagination }: any = unref(propsRef);
+
+      //组装分页信息
+      const pageField = APISETTING.pageField
+      const sizeField = APISETTING.sizeField
+      const totalField = APISETTING.totalField
+      const listField = APISETTING.listField
+
+      let pageParams = {};
+      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
+
+      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+        pageParams = {};
+      } else {
+        pageParams[pageField] = (opt && opt[pageField]) || page;
+        pageParams[sizeField] = pageSize;
+      }
+
+      let params = {
+        ...pageParams,
+      }
+      const res = await request(params);
+
+      const resultTotal = res[totalField] || 0
+      const currentPage = res[pageField]
+
+      // 如果数据异常，需获取正确的页码再次执行
+      if (resultTotal) {
+        const currentTotalPage = Math.ceil(resultTotal / pageSize);
+        if (page > currentTotalPage) {
+          setPagination({
+            [pageField]: currentTotalPage,
+          });
+          fetch(opt);
+        }
+      }
+      let resultInfo = res[listField] ? res[listField] : []
+      dataSourceRef.value = resultInfo;
+      setPagination({
+        [pageField]: currentPage,
+        [totalField]: resultTotal,
+      });
+      if (opt && opt[pageField]) {
+        setPagination({
+          [pageField]: opt[pageField] || 1,
+        });
+      }
+      emit('fetch-success', {
+        items: unref(resultInfo),
+        resultTotal
+      });
+    } catch (error) {
+      console.error(error)
+      emit('fetch-error', error);
+      dataSourceRef.value = [];
+      // setPagination({
+      //   pageCount: 0,
+      // });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      fetch();
+    }, 16)
+  });
+
+  function setTableData(values) {
+    dataSourceRef.value = values;
+  }
+
+  function getDataSource() :any[] {
+    return getDataSourceRef.value;
+  }
+
+  async function reload(opt?) {
+    await fetch(opt);
+  }
+
+  return {
+    fetch,
+    getRowKey,
+    getDataSourceRef,
+    getDataSource,
+    setTableData,
+    reload
+  }
+}
--- a/src/components/ProTable/src/hooks/useLoading.ts
+++ b/src/components/ProTable/src/hooks/useLoading.ts
@@ -0,0 +1,21 @@
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+export function useLoading(props: ComputedRef<BasicTableProps>) {
+  const loadingRef = ref(unref(props).loading);
+
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
+    }
+  );
+
+  const getLoading = computed(() => unref(loadingRef));
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+
+  return { getLoading, setLoading };
+}
--- a/src/components/ProTable/src/hooks/usePagination.ts
+++ b/src/components/ProTable/src/hooks/usePagination.ts
@@ -0,0 +1,48 @@
+import type { PaginationProps } from '../types/pagination';
+import type { BasicTableProps } from '../types/table';
+import { computed, unref, ref, ComputedRef } from 'vue';
+
+import { isBoolean } from '@/utils/is';
+import { DEFAULTPAGESIZE, PAGESIZES } from '../const';
+
+export function usePagination(refProps: ComputedRef<BasicTableProps>) {
+  const configRef = ref<PaginationProps>({});
+  const show = ref(true);
+
+  const getPaginationInfo = computed((): PaginationProps | boolean => {
+    const { pagination } = unref(refProps);
+    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
+      return false;
+    }
+    return {
+      pageSize: DEFAULTPAGESIZE,
+      pageSizes: PAGESIZES,
+      showSizePicker: true,
+      showQuickJumper: true,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+    };
+  });
+
+  function setPagination(info: Partial<PaginationProps>) {
+    const paginationInfo = unref(getPaginationInfo);
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    };
+  }
+
+  function getPagination() {
+    return unref(getPaginationInfo);
+  }
+
+  function getShowPagination() {
+    return unref(show);
+  }
+
+  async function setShowPagination(flag: boolean) {
+    show.value = flag;
+  }
+
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
+}
--- a/src/components/ProTable/src/hooks/useTableContext.ts
+++ b/src/components/ProTable/src/hooks/useTableContext.ts
@@ -0,0 +1,22 @@
+import type { Ref } from 'vue';
+import type { BasicTableProps, TableActionType } from '../types/table';
+import { provide, inject, ComputedRef } from 'vue';
+
+const key = Symbol('s-table');
+
+type Instance = TableActionType & {
+  wrapRef: Ref<Nullable<HTMLElement>>;
+  getBindValues: ComputedRef<Recordable>;
+};
+
+type RetInstance = Omit<Instance, 'getBindValues'> & {
+  getBindValues: ComputedRef<BasicTableProps>;
+};
+
+export function createTableContext(instance: Instance) {
+  provide(key, instance);
+}
+
+export function useTableContext(): RetInstance {
+  return inject(key) as RetInstance;
+}
--- a/src/components/ProTable/src/props.ts
+++ b/src/components/ProTable/src/props.ts
@@ -0,0 +1,45 @@
+import type { PropType } from 'vue'
+import { BasicColumn } from './types/table'
+
+export const basicProps = {
+  title: {
+    type: String,
+    default: null,
+  },
+  titleTooltip: {
+    type: String,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  tableData: {
+    type: [Object],
+    default: () => {
+    },
+  },
+  columns: {
+    type: [Array] as PropType<BasicColumn[]>,
+    default: () => [],
+    required: true,
+  },
+  request: {
+    type: Function as PropType<(...arg: any[]) => Promise<any>>,
+    default: null,
+    required: true
+  },
+  rowKey: {
+    type: [String, Function] as PropType<string | ((record) => string)>,
+    default: undefined,
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => {
+    }
+  },
+  showPagination: {
+    type: [String, Boolean],
+    default: 'auto'
+  }
+}
--- a/src/components/ProTable/src/types/pagination.ts
+++ b/src/components/ProTable/src/types/pagination.ts
@@ -0,0 +1,11 @@
+import Pagination from 'naive-ui/lib/pagination';
+import { VNodeChild } from 'vue';
+
+export interface PaginationProps {
+  page?: number;
+  pageCount?: number,
+  pageSize?: number,
+  pageSizes?: number[],
+  showSizePicker?: boolean,
+  showQuickJumper?: boolean,
+}
--- a/src/components/ProTable/src/types/table.ts
+++ b/src/components/ProTable/src/types/table.ts
@@ -0,0 +1,22 @@
+import type {
+  TableBaseColumn,
+} from 'naive-ui/lib/data-table/src/interface';
+
+export interface BasicColumn extends TableBaseColumn {
+
+}
+
+export interface TableActionType {
+  reload: (opt) => Promise<void>;
+  emit?: any;
+  getColumns: (opt) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
+}
+
+export interface BasicTableProps<T = any> {
+  title?: string,
+  dataSource: Function,
+  columns: any[],
+  pagination: object,
+  showPagination: boolean
+}
--- a/src/components/lockscreen/index.ts
+++ b/src/components/lockscreen/index.ts
@@ -1,3 +0,0 @@
-import LockScreen from './lockscreen.vue'
-
-export { LockScreen }
--- a/src/enums/pageEnum.ts
+++ b/src/enums/pageEnum.ts
@@ -1,10 +1,10 @@
 export enum PageEnum {
-  // basic login path
+  // 登录
  BASE_LOGIN = '/login',
-  // basic home path
+  //重定向
+  REDIRECT = '/Redirect',
+  // 首页
  BASE_HOME = '/dashboard',
-  // error page path
+  // 错误
  ERROR_PAGE = '/exception',
-  // error log page path
-  ERROR_LOG_PAGE = '/error-log/list',
 }
--- a/src/hooks/setting/useDesignSetting.ts
+++ b/src/hooks/setting/useDesignSetting.ts
@@ -1,4 +1,4 @@
-import { computed, unref, ref } from 'vue';
+import { computed } from 'vue';
 import { useDesignSettingStore } from '@/store/modules/designSetting';

 export function useDesignSetting() {
--- a/src/hooks/setting/useProjectSetting.ts
+++ b/src/hooks/setting/useProjectSetting.ts
@@ -1,4 +1,4 @@
-import { computed, unref, ref } from 'vue';
+import { computed } from 'vue';
 import { useProjectSettingStore } from '@/store/modules/projectSetting';

 export function useProjectSetting() {
--- 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 0.1.0 · Made by Ah jung
+      naive-ui-admin 1.2 · Made by Ah jung
    </div>
  </div>

--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :native-scrollbar="false">
    <n-drawer-content :title="title">
      <div class="drawer">
        <n-divider title-placement="center">主题</n-divider>
@@ -214,7 +214,7 @@ export default defineComponent({
    watch(
      () => designStore.darkTheme,
      (to) => {
-        settingStore.navTheme = to ? 'header-dark': 'dark'
+        settingStore.navTheme = to ? 'header-dark' : 'dark'
      }
    )

--- a/src/layout/components/Header/components.ts
+++ b/src/layout/components/Header/components.ts
@@ -1,5 +1,3 @@
-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
@@ -7,7 +7,7 @@
    <!--左侧菜单-->
    <div class="layout-header-left" v-else>
      <!-- 菜单收起 -->
-      <span class="ml-1 layout-header-trigger layout-header-trigger-min"
+      <div class="ml-1 layout-header-trigger layout-header-trigger-min"
            @click="() => $emit('update:collapsed', !collapsed)">
          <n-icon size="18" v-if="collapsed">
            <MenuUnfoldOutlined/>
@@ -15,14 +15,14 @@
          <n-icon size="18" v-else>
            <MenuFoldOutlined/>
          </n-icon>
-        </span>
+      </div>
      <!-- 刷新 -->
-      <span class="mr-1 layout-header-trigger layout-header-trigger-min" v-if="headerSetting.isReload"
+      <div class="mr-1 layout-header-trigger layout-header-trigger-min" v-if="headerSetting.isReload"
            @click="reloadPage">
          <n-icon size="18">
            <ReloadOutlined/>
          </n-icon>
-        </span>
+      </div>
      <!-- 面包屑 -->
      <n-breadcrumb v-if="crumbsSetting.show">
        <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
@@ -46,7 +46,7 @@
      </n-breadcrumb>
    </div>
    <div class="layout-header-right">
-        <span class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
+        <div class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
          <n-tooltip placement="bottom">
            <template #trigger>
              <n-icon size="18">
@@ -55,15 +55,20 @@
            </template>
            <span>{{ item.tips }}</span>
          </n-tooltip>
-        </span>
+        </div>
      <!--切换全屏-->
-      <span class="layout-header-trigger layout-header-trigger-min">
-          <n-icon size="18">
-            <component :is="fullscreenIcon" @click="toggleFullScreen"/>
-          </n-icon>
-        </span>
+      <div class="layout-header-trigger layout-header-trigger-min">
+        <n-tooltip placement="bottom">
+            <template #trigger>
+              <n-icon size="18">
+                <component :is="fullscreenIcon" @click="toggleFullScreen"/>
+              </n-icon>
+            </template>
+            <span>全屏</span>
+          </n-tooltip>
+        </div>
      <!-- 个人中心 -->
-      <span class="layout-header-trigger layout-header-trigger-min">
+      <div class="layout-header-trigger layout-header-trigger-min">
            <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
              <div class="avatar">
                <n-avatar>
@@ -72,9 +77,9 @@
                </n-avatar>
              </div>
            </n-dropdown>
-        </span>
+        </div>
      <!--设置-->
-      <span class="layout-header-trigger layout-header-trigger-min" @click="openSetting">
+      <div class="layout-header-trigger layout-header-trigger-min" @click="openSetting">
            <n-tooltip placement="bottom-end">
              <template #trigger>
                <n-icon size="18" style="font-weight: bold">
@@ -83,7 +88,7 @@
              </template>
              <span>项目配置</span>
            </n-tooltip>
-          </span>
+          </div>
    </div>
  </div>
  <!--项目配置-->
@@ -91,7 +96,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, reactive, toRefs, createVNode, ref, computed, unref } from 'vue'
+import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import components from './components'
 import { NDialogProvider, useDialog, useMessage, useNotification } from 'naive-ui'
@@ -139,7 +144,7 @@ export default defineComponent({

    const getChangeStyle = computed(() => {
      const { collapsed } = props
-      const { minMenuWidth, menuWidth }:any = unref(getMenuSetting)
+      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting)
      return {
        'left': collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px`,
        'width': `calc(100% - ${ collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px` })`
@@ -165,7 +170,10 @@ export default defineComponent({
        return currentMenu
      })
    }
-    const breadcrumbList: any = generator(route.matched)
+
+    const breadcrumbList = computed(() => {
+      return generator(route.matched)
+    })

    const dropdownSelect = (key) => {
      router.push({ name: key })
@@ -248,7 +256,7 @@ export default defineComponent({
    ]
    const avatarOptions = [
      {
-        label: '个人中心',
+        label: '个人设置',
        key: 1
      },
      {
@@ -261,7 +269,7 @@ export default defineComponent({
    const avatarSelect = (key) => {
      switch (key) {
        case 1:
-          openUserCentre()
+          router.push({name:'Setting'})
          break;
        case 2:
          doLogout()
@@ -274,13 +282,6 @@ export default defineComponent({
      openDrawer()
    }

-    function openUserCentre() {
-      notification.info({
-        content: '提示',
-        meta: '客官，该功能正在开发中呢...'
-      })
-    }
-
    return {
      ...toRefs(state),
      iconList,
--- a/src/layout/components/Logo/index.vue
+++ b/src/layout/components/Logo/index.vue
@@ -28,7 +28,6 @@ export default {

  img {
    height: 32px;
-    margin-right: 8px;
  }

  .title {
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -1,14 +1,22 @@
 <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/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -22,7 +22,10 @@
          <div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
            <Draggable :list="tabsList" animation="300" item-key="fullPath">
              <template #item="{element}">
-                <div class="tabs-card-scroll-item" @click.stop="goPage(element)" @contextmenu="handleContextMenu">
+                <div class="tabs-card-scroll-item"
+                     :class="{'active-item':activeKey === element.path }"
+                     @click.stop="goPage(element)"
+                     @contextmenu="handleContextMenu">
                  <span>{{ element.meta.title }}</span>
                  <n-icon size="14" @click.stop="closeTabItem(element)">
                    <CloseOutlined/>
@@ -59,6 +62,7 @@ import { RouteItem } from '@/store/modules/tabsView'
 import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
 import { useMessage } from 'naive-ui'
 import Draggable from 'vuedraggable/src/vuedraggable'
+import { PageEnum } from '@/enums/pageEnum'
 import {
  DownOutlined,
  ReloadOutlined,
@@ -126,8 +130,8 @@ export default defineComponent({
    const getChangeStyle = computed(() => {
      const { collapsed } = props
      const navMode = unref(getNavMode)
-      const { minMenuWidth, menuWidth }:any = unref(getMenuSetting)
-      const { fixed }:any = unref(getMultiTabsSetting)
+      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting)
+      const { fixed }: any = unref(getMultiTabsSetting)
      let lenNum = navMode === 'horizontal' ? '0px' : collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px`
      return {
        left: lenNum,
@@ -199,8 +203,7 @@ export default defineComponent({

    // 标签页列表
    const tabsList: any = computed(() => tabsViewStore.tabsList)
-
-    const whiteList = ['Redirect', 'login']
+    const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]

    watch(
      () => route.fullPath,
@@ -516,6 +519,9 @@ export default defineComponent({
            }
          }
        }
+        .active-item{
+          color: #2d8cf0
+        }
      }
    }

@@ -545,7 +551,8 @@ export default defineComponent({
    }
  }
 }
-.tabs-view-default-background{
+
+.tabs-view-default-background {
  background: #f5f7f9;
 }

--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -13,8 +13,8 @@
      :width="leftMenuWidth"
      :native-scrollbar="false"
      :inverted="inverted" class="layout-sider">
-        <Logo :collapsed="collapsed"/>
-        <AsideMenu v-model:collapsed="collapsed"/>
+      <Logo :collapsed="collapsed"/>
+      <AsideMenu v-model:collapsed="collapsed"/>
    </NLayoutSider>

    <NLayout :inverted="inverted">
--- 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
@@ -8,6 +8,7 @@ import {
  NButton,
  NForm,
  NFormItem,
+  NCheckboxGroup,
  NCheckbox,
  NIcon,
  NLayout,
@@ -45,7 +46,20 @@ import {
  NThing,
  NDataTable,
  NPopover,
-  NPagination
+  NPagination,
+  NSelect,
+  NRadioGroup,
+  NRadio,
+  NSteps,
+  NStep,
+  NInputGroup,
+  NResult,
+  NDescriptions,
+  NDescriptionsItem,
+  NTable,
+  NInputNumber,
+  NLoadingBarProvider,
+  NModal
 } from 'naive-ui'

 const naive = create({
@@ -57,6 +71,7 @@ const naive = create({
    NButton,
    NForm,
    NFormItem,
+    NCheckboxGroup,
    NCheckbox,
    NIcon,
    NLayout,
@@ -94,7 +109,20 @@ const naive = create({
    NThing,
    NDataTable,
    NPopover,
-    NPagination
+    NPagination,
+    NSelect,
+    NRadioGroup,
+    NRadio,
+    NSteps,
+    NStep,
+    NInputGroup,
+    NResult,
+    NDescriptions,
+    NDescriptionsItem,
+    NTable,
+    NInputNumber,
+    NLoadingBarProvider,
+    NModal
  ]
 })

--- a/src/router/constant.ts
+++ b/src/router/constant.ts
@@ -1,24 +1,6 @@
-import { MainView } from '@/layout/components/Main'
-
 export const RedirectName = 'Redirect';

-export const ParentLayout = 'ParentLayout';
-
 export const ErrorPage = () => import('@/views/exception/404.vue');

-/**
- * @description: default layout
- */
 export const Layout = () => import('@/layout/index.vue');

-/**
- * @description: parent-layout
- */
-export const getParentLayout = (_name?: string) => {
-  return () =>
-    new Promise((resolve) => {
-      resolve({
-        name: PARENT_LAYOUT_NAME,
-      });
-    });
-};
--- a/src/router/generator-routers.ts
+++ b/src/router/generator-routers.ts
@@ -1,8 +1,7 @@
 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/index.ts
+++ b/src/router/index.ts
@@ -5,9 +5,10 @@ import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards'
 import 'nprogress/css/nprogress.css' // 进度条样式

+// @ts-ignore
 const modules = import.meta.globEager('./modules/**/*.ts');

-const routeModuleList: AppRouteModule[] = [];
+const routeModuleList: RouteRecordRaw[] = [];

 Object.keys(modules).forEach((key) => {
  const mod = modules[key].default || {};
@@ -15,7 +16,13 @@ Object.keys(modules).forEach((key) => {
  routeModuleList.push(...modList);
 });

-export const RootRoute: AppRouteRecordRaw = {
+function sortRoute(a, b) {
+  return (a.meta.sort || 0) - (b.meta.sort || 0)
+}
+
+routeModuleList.sort(sortRoute)
+
+export const RootRoute: RouteRecordRaw = {
  path: '/',
  name: 'Root',
  redirect: PageEnum.BASE_HOME,
@@ -24,7 +31,7 @@ export const RootRoute: AppRouteRecordRaw = {
  },
 };

-export const LoginRoute: AppRouteRecordRaw = {
+export const LoginRoute: RouteRecordRaw = {
  path: '/login',
  name: 'Login',
  component: () => import('@/views/login/index.vue'),
--- a/src/router/modules/comp.ts
+++ b/src/router/modules/comp.ts
@@ -0,0 +1,44 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { WalletOutlined  } from '@vicons/antd'
+import { renderIcon } from '@/utils/index'
+
+
+const routeName = 'comp'
+
+/**
+ * @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: '/comp',
+    name: routeName,
+    redirect: '/comp/console',
+    component: Layout,
+    meta: {
+      title: '组件示例',
+      icon: renderIcon(WalletOutlined ),
+      sort: 8
+    },
+    children: [
+      {
+        path: 'table',
+        name: `${ routeName }_table`,
+        meta: {
+          title: '表格',
+        },
+        component: () => import('@/views/comp/table/list.vue')
+      }
+    ],
+  }
+]
+
+export default routes
--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@@ -1,13 +1,7 @@
-import { h } from 'vue'
-import { NIcon } from 'naive-ui'
 import { RouteRecordRaw } from 'vue-router'
 import { Layout } from '@/router/constant';
-import { MainView } from '@/layout/components/Main'
 import { DashboardOutlined } from '@vicons/antd'
-
-function renderIcon(icon) {
-  return () => h(NIcon, null, { default: () => h(icon) })
-}
+import { renderIcon } from '@/utils/index'

 const routeName = 'dashboard'

@@ -19,7 +13,7 @@ const routeName = 'dashboard'
 * @param meta.title 菜单名称
 * @param meta.icon 菜单图标
 * @param meta.keepAlive 缓存该路由
- *
+ * @param meta.sort 排序越小越排前
 * */
 const routes: Array<RouteRecordRaw> = [
  {
@@ -30,7 +24,8 @@ const routes: Array<RouteRecordRaw> = [
    meta: {
      title: 'Dashboard',
      icon: renderIcon(DashboardOutlined),
-      permission: ['dashboard_console', 'dashboard_console', 'dashboard_workplace']
+      permission: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],
+      sort: 0
    },
    children: [
      {
@@ -56,7 +51,7 @@ const routes: Array<RouteRecordRaw> = [
        name: `${ routeName }_workplace`,
        meta: {
          title: '工作台',
-          keepAlive:true,
+          keepAlive: true,
          permission: ['dashboard_workplace']
        },
        component: () => import('@/views/dashboard/workplace/workplace.vue')
--- a/src/router/modules/exception.ts
+++ b/src/router/modules/exception.ts
@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { ExclamationCircleOutlined } 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: '/exception',
+        name: 'Exception',
+        redirect: '/exception/403',
+        component: Layout,
+        meta: {
+            title: '异常页面',
+            icon: renderIcon(ExclamationCircleOutlined),
+            sort: 3
+        },
+        children: [
+            {
+                path: '403',
+                name: 'exception-403',
+                meta: {
+                    title: '403',
+                },
+                component: () => import('@/views/exception/403.vue')
+            },
+            {
+                path: '404',
+                name: 'exception-404',
+                meta: {
+                    title: '404',
+                },
+                component: () => import('@/views/exception/404.vue')
+            },
+            {
+                path: '500',
+                name: 'exception-500',
+                meta: {
+                    title: '500',
+                },
+                component: () => import('@/views/exception/500.vue')
+            },
+        ],
+    }
+]
+
+export default routes
--- a/src/router/modules/form.ts
+++ b/src/router/modules/form.ts
@@ -0,0 +1,58 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { ProfileOutlined } 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: '/form',
+    name: 'Form',
+    redirect: '/form/basic-form',
+    component: Layout,
+    meta: {
+      title: '表单页面',
+      icon: renderIcon(ProfileOutlined),
+      sort: 1
+    },
+    children: [
+      {
+        path: 'basic-form',
+        name: 'form-basic-form',
+        meta: {
+          title: '基础表单',
+        },
+        component: () => import('@/views/form/basicForm/index.vue')
+      },
+      {
+        path: 'step-form',
+        name: 'form-step-form',
+        meta: {
+          title: '分步表单',
+        },
+        component: () => import('@/views/form/stepForm/stepForm.vue')
+      },
+      {
+        path: 'detail',
+        name: 'form-detail',
+        meta: {
+          title: '表单详情',
+        },
+        component: () => import('@/views/form/detail/index.vue')
+      },
+
+    ],
+  }
+]
+
+export default routes
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -0,0 +1,41 @@
+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/result.ts
+++ b/src/router/modules/result.ts
@@ -0,0 +1,57 @@
+import { RouteRecordRaw } from 'vue-router'
+import { Layout } from '@/router/constant';
+import { CheckCircleOutlined  } 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: '/result',
+        name: 'Result',
+        redirect: '/result/success',
+        component: Layout,
+        meta: {
+            title: '结果页面',
+            icon: renderIcon(CheckCircleOutlined),
+            sort: 4
+        },
+        children: [
+            {
+                path: 'success',
+                name: 'result-success',
+                meta: {
+                    title: '成功页',
+                },
+                component: () => import('@/views/result/success.vue')
+            },
+            {
+                path: 'fail',
+                name: 'result-fail',
+                meta: {
+                    title: '失败页',
+                },
+                component: () => import('@/views/result/fail.vue')
+            },
+            {
+                path: 'info',
+                name: 'result-info',
+                meta: {
+                    title: '信息页',
+                },
+                component: () => import('@/views/result/info.vue')
+            },
+        ],
+    }
+]
+
+export default routes
--- a/src/router/modules/setting.ts
+++ b/src/router/modules/setting.ts
@@ -0,0 +1,49 @@
+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 }) => {
-    const userStore = useUserStoreWidthOut();
-    const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    userStore.GetInfo().then(res => {
-      asyncRouteStore.generateRoutes(res).then(() => {
-        // 根据roles权限生成可访问的路由表
-        // 动态添加可访问路由表
-        asyncRouteStore.getRouters().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 }))
-    })
-  },
-  1800,
-  { leading: true }
+    ({ 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();
-  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 userStore = useUserStoreWidthOut();
    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.beforeEach(async (to, from, next) => {
+        NProgress.start()
+        if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+            next(PageEnum.BASE_HOME);
+            return;
+        }

-  router.onError((error) => {
-    console.log(error, '路由错误')
-  })
+        // 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, '路由错误')
+    })
 }
--- a/src/settings/componentSetting.ts
+++ b/src/settings/componentSetting.ts
@@ -0,0 +1,18 @@
+export default {
+  table: {
+    apiSetting: {
+      // 当前页的字段名
+      pageField: 'page',
+      // 每页数量字段名
+      sizeField: 'pageSize',
+      // 接口返回的数据字段名
+      listField: 'list',
+      // 接口返回总页数字段名
+      totalField: 'pageCount',
+    },
+    //默认分页数量
+    defaultPageSize: 10,
+    //可切换每页数量集合
+    pageSizes: [10, 20, 30, 40, 50],
+  }
+}
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -13,7 +13,7 @@ const setting = {
    isReload: true
  },
  //页脚
-  showFooter:true,
+  showFooter: true,
  //多标签
  multiTabsSetting: {
    //背景色
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -3,6 +3,7 @@ import { createStorage } from '@/utils/Storage'
 import { store } from '@/store'
 import { ACCESS_TOKEN, CURRENT_USER, IS_LOCKSCREEN } from '@/store/mutation-types'
 import { ResultEnum } from '@/enums/httpEnum'
+
 const Storage = createStorage({ storage: localStorage })
 import { getUserInfo, login } from '@/api/system/user'
 import { storage } from '@/utils/Storage'
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -94,6 +94,27 @@ body .n-card {
  transition: all .2s ease-in-out;
 }

+body .n-icon{
+  vertical-align:middle;
+}
+
+body .proCard {
+  border-radius: 4px;
+
+  .n-card__content {
+    padding: 16px;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+  }
+}
+
+//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/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,5 +1,4 @@
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+/*! @import */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- 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/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { h } from 'vue';
+import type { App, Plugin } from 'vue';
 import { NIcon } from 'naive-ui'

 /**
--- a/src/utils/is/index.ts
+++ b/src/utils/is/index.ts
@@ -104,3 +104,11 @@ export const isServer = typeof window === 'undefined'
 export function isImageDom(o: Element) {
  return o && ['IMAGE', 'IMG'].includes(o.tagName)
 }
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val);
+}
--- a/src/views/comp/table/columns.ts
+++ b/src/views/comp/table/columns.ts
@@ -0,0 +1,72 @@
+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/comp/table/list.vue
+++ b/src/views/comp/table/list.vue
@@ -0,0 +1,65 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <ProTable
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="row => row.id"
+      ref="actionRef"
+      @update:checked-row-keys="onCheckedRow"
+    >
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
+      </template>
+    </ProTable>
+  </n-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive, toRefs, ref, h } from 'vue'
+import { NTag, NButton, useMessage } from 'naive-ui'
+import { ProTable } from '@/components/ProTable'
+import { getTableList } from '@/api/table/list'
+import { columns } from './columns'
+
+export default defineComponent({
+  components: { ProTable },
+  setup() {
+    const message = useMessage()
+    const actionRef = ref()
+    const state = reactive({
+      params: {
+        pageSize: 5,
+        name: 'xiaoMa'
+      },
+    })
+    const loadDataTable = async (params) => {
+      const data = await getTableList(params);
+      return data
+    }
+
+    function onCheckedRow(rowKeys) {
+      console.log(rowKeys)
+    }
+
+    function reloadTable() {
+      console.log(actionRef.value)
+      actionRef.value.reload()
+    }
+
+    return {
+      ...toRefs(state),
+      columns,
+      actionRef,
+      loadDataTable,
+      onCheckedRow,
+      reloadTable
+    }
+  }
+})
+</script>
+
+<style lang='less' scoped>
+
+</style>
--- a/src/views/dashboard/console/console.vue
+++ b/src/views/dashboard/console/console.vue
@@ -13,13 +13,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              日同比<CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
+              日同比
+              <CountTo :startVal="1" suffix="%" :endVal="visits.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              周同比<CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
+              周同比
+              <CountTo :startVal="1" suffix="%" :endVal="visits.decline"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -77,13 +79,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              日同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              日同比
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              周同比<CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
+              周同比
+              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -111,13 +115,15 @@
          </div>
          <div class="py-1 px-1 flex justify-between ">
            <div class="text-sn">
-              月同比<CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
+              月同比
+              <CountTo :startVal="1" suffix="%" :endVal="volume.rise"/>
              <n-icon size="12" style="color: #00ff6f">
                <component is="CaretUpOutlined"/>
              </n-icon>
            </div>
            <div class="text-sn">
-              月同比<CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
+              月同比
+              <CountTo :startVal="1" suffix="%" :endVal="volume.decline"/>
              <n-icon size="12" style="color: #ffde66">
                <component is="CaretDownOutlined"/>
              </n-icon>
@@ -179,10 +185,10 @@ export default defineComponent({
        'border-bottom': '1px solid #eee',
        'font-size': '16px'
      },
-      visits:{},
-      saleroom:{},
-      orderLarge:{},
-      volume:{},
+      visits: {},
+      saleroom: {},
+      orderLarge: {},
+      volume: {},
    })
    // 图标列表
    const iconList = [
@@ -267,8 +273,8 @@ export default defineComponent({
        }
      },
    ]
-    onMounted(async ()=> {
-      const { visits, saleroom, orderLarge, volume} =  await getConsoleInfo()
+    onMounted(async () => {
+      const { visits, saleroom, orderLarge, volume } = await getConsoleInfo()
      state.visits = visits
      state.saleroom = saleroom
      state.orderLarge = orderLarge
--- a/src/views/dashboard/workplace/workplace.vue
+++ b/src/views/dashboard/workplace/workplace.vue
@@ -41,8 +41,7 @@
      <n-gi>
        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="项目">
          <div class="flex flex-wrap project-card">
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30">
@@ -58,8 +57,7 @@
                开源君，2021-07-04
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30" style="color: #42b983">
@@ -75,12 +73,11 @@
                学不动也要学，2021-07-04
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30" style="color: #e44c27">
-                    <Html5Outlined />
+                    <Html5Outlined/>
                  </n-icon>
                </span>
                <span class="text-lg ml-4">Html5</span>
@@ -92,8 +89,7 @@
                撸码也是一种艺术 2021-04-01
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30" style="color: #dd0031">
@@ -109,8 +105,7 @@
                铁粉君 2021-07-04。
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30" style="color: #61dafb">
@@ -126,8 +121,7 @@
                技术牛 2021-07-04。
              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
-                    :bordered="false" hoverable>
+            <n-card size="small" class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
              <div class="flex">
                <span>
                  <n-icon size="30">
@@ -220,7 +214,9 @@
              </template>
              <n-thing title="页面切换其实也支持缓存，只是加了过度效果，看起来像是重新渲染了">
                <template #description>
-                  <p class="text-gray-400"><n-input type="text" placeholder="不信，输点文字试试"></n-input></p>
+                  <p class="text-gray-400">
+                    <n-input type="text" placeholder="不信，输点文字试试"></n-input>
+                  </p>
                </template>
              </n-thing>
            </n-list-item>
@@ -228,73 +224,68 @@
        </n-card>
      </n-gi>
      <n-gi>
-        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small" title="快捷操作">
+        <n-card :segmented="{ content: 'hard' }" content-style="padding: 0;" :bordered="false" size="small"
+                title="快捷操作">
          <div class="flex flex-wrap project-card">
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" style="color: #68c755">
                      <DashboardOutlined/>
                    </n-icon>
                  </span>
                <span class="text-lx text-center">主控台</span>
-              </a>
+              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" style="color: #fab251">
                      <ProfileOutlined/>
                    </n-icon>
                  </span>
                <span class="text-lx text-center">列表</span>
-              </a>
+              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" style="color: #1890ff">
                      <FileProtectOutlined/>
                    </n-icon>
                  </span>
                <span class="text-lx text-center">表单</span>
-              </a>
+              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" style="color: #f06b96">
                      <ApartmentOutlined/>
                    </n-icon>
                  </span>
                <span class="text-lx text-center">权限管理</span>
-              </a>
+              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" style="color: #7238d1">
                      <SettingOutlined/>
                    </n-icon>
                  </span>
                <span class="text-lx text-center">系统管理</span>
-              </a>
+              </div>
            </n-card>
-            <n-card size="small" class="border rounded-none border-gray-100 cursor-pointer project-card-item"
-                    :bordered="false" hoverable>
-              <a href="javascript:;" class="flex flex-col justify-center text-gray-500">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
                <span class="text-center">
-                  <n-icon size="30">
+                  <n-icon size="30" color="">
                    <DashboardOutlined/>
                  </n-icon>
                </span>
                <span class="text-lx text-center">主控台</span>
-              </a>
+              </div>
            </n-card>
          </div>
        </n-card>
@@ -327,9 +318,19 @@ import {
 import { defineComponent } from 'vue'

 export default defineComponent({
-  name:'dashboard_workplace',
-  components: { GithubOutlined, LogoVue, DashboardOutlined, ProfileOutlined, FileProtectOutlined, SettingOutlined, ApartmentOutlined,
-    Html5Outlined, LogoAngular, LogoReact, LogoJavascript
+  name: 'dashboard_workplace',
+  components: {
+    GithubOutlined,
+    LogoVue,
+    DashboardOutlined,
+    ProfileOutlined,
+    FileProtectOutlined,
+    SettingOutlined,
+    ApartmentOutlined,
+    Html5Outlined,
+    LogoAngular,
+    LogoReact,
+    LogoJavascript
  },
  setup() {
    return {
@@ -342,9 +343,10 @@ export default defineComponent({
 <style lang="less" scoped>
 .project-card {
  margin-right: -6px;
+
  &-item {
    margin: -1px;
-    width:33.333333%
+    width: 33.333333%
  }
 }
 </style>
--- a/src/views/exception/403.vue
+++ b/src/views/exception/403.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/403.svg" alt=""/>
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.page-container {
+  width: 100%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
+</style>
--- a/src/views/exception/404.vue
+++ b/src/views/exception/404.vue
@@ -1,31 +1,40 @@
 <template>
-  <div class="flex flex-col align-center justify-center page-container">
+  <div class="flex flex-col justify-center page-container">
    <div class="text-center">
-      <h1 class="text-base text-gray-500">哎哟喂，您好像走丢了...</h1>
-      <router-link to="/" class="n-btn n-btn-primary">回到首页</router-link>
+      <img src="~@/assets/images/exception/404.svg" alt=""/>
    </div>
    <div class="text-center">
-      <img src="~@/assets/images/Error.svg" alt=""/>
+      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
    </div>
  </div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue'
-import { routes } from '@/router'
+import { useRouter } from 'vue-router'

 export default defineComponent({
-  name: '404'
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
 })
 </script>

 <style lang="less" scoped>
 .page-container {
  width: 100%;
-  height: 100vh;
  background-color: white;
  border-radius: 4px;
-
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
  img {
    width: 350px;
    margin: 0 auto;
--- a/src/views/exception/500.vue
+++ b/src/views/exception/500.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/500.svg" alt=""/>
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome(){
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.page-container {
+  width: 100%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 50px 0;
+  .text-center{
+    h1{ color: #666;padding: 20px 0}
+  }
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
+</style>
--- a/src/views/form/basicForm/index.vue
+++ b/src/views/form/basicForm/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单">
+        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
+        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
+          <n-form
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+            label-placement="left"
+            ref="formRef"
+            class="py-8"
+          >
+            <n-form-item label="预约姓名" path="name">
+              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
+            </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="datetime">
+              <n-date-picker type="datetime" v-model:value="formValue.datetime"/>
+            </n-form-item>
+            <n-form-item label="预约医生" path="doctor">
+              <n-select
+                placeholder="请选择预约医生"
+                :options="doctorList"
+                v-model:value="formValue.doctor"
+              />
+            </n-form-item>
+            <n-form-item label="预约事项" path="matter">
+              <n-select
+                placeholder="请选择预约事项"
+                :options="matterList"
+                v-model:value="formValue.matter"
+                multiple
+              />
+            </n-form-item>
+            <n-form-item label="性别" path="sex">
+              <n-radio-group v-model:value="formValue.sex" name="sex">
+                <n-space>
+                  <n-radio :value="1">男</n-radio>
+                  <n-radio :value="2">女</n-radio>
+                </n-space>
+              </n-radio-group>
+            </n-form-item>
+            <n-form-item label="预约备注" path="remark">
+              <n-input
+                v-model:value="formValue.remark"
+                type="textarea"
+                placeholder="请输入预约备注"
+              />
+            </n-form-item>
+            <div style="margin-left:80px">
+              <n-space>
+                <n-button type="primary" @click="formSubmit">提交预约</n-button>
+                <n-button @click="resetForm">重置</n-button>
+              </n-space>
+            </div>
+          </n-form>
+        </n-grid-item>
+      </n-grid>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const matterList = [
+  {
+    label: '种牙',
+    value: 1
+  },
+  {
+    label: '补牙',
+    value: 2
+  },
+  {
+    label: '根管',
+    value: 3
+  }
+]
+
+const doctorList = [
+  {
+    label: '李医生',
+    value: 1
+  },
+  {
+    label: '黄医生',
+    value: 2
+  },
+  {
+    label: '张医生',
+    value: 3
+  }
+]
+
+export default defineComponent({
+  setup() {
+    const formRef = ref(null)
+    const message = useMessage()
+
+    return {
+      formRef,
+      formValue: ref({
+        name: '',
+        mobile: '',
+        remark: '',
+        sex: 1,
+        matter: null,
+        doctor: null,
+        datetime: [],
+      }),
+      rules: {
+        name: {
+          required: true,
+          message: '请输入预约姓名',
+          trigger: 'blur'
+        },
+        remark: {
+          required: true,
+          message: '请输入预约备注',
+          trigger: 'blur'
+        },
+        mobile: {
+          required: true,
+          message: '请输入预约电话号码',
+          trigger: ['input']
+        },
+        datetime: {
+          required: true,
+          type: 'number',
+          message: '请选择预约时间',
+          trigger: ['blur', 'change'],
+        },
+        doctor: {
+          required: true,
+          type: 'number',
+          message: '请选择预约医生',
+          trigger: 'change'
+        },
+      },
+      doctorList,
+      matterList,
+      formSubmit(e) {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功')
+          } else {
+            message.error('验证失败，请填写完整信息')
+          }
+        })
+      },
+      resetForm() {
+        formRef.value.restoreValidation()
+      }
+    }
+  }
+})
+</script>
--- a/src/views/form/detail/index.vue
+++ b/src/views/form/detail/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="表单详情">
+        表单除了提交数据，有时也用于显示只读信息。
+      </n-card>
+    </div>
+    <n-card :bordered="false" title="基本信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item><template #label>收款人姓名</template>啊俊</n-descriptions-item>
+        <n-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</n-descriptions-item>
+        <n-descriptions-item label="付款类型">支付宝</n-descriptions-item>
+        <n-descriptions-item label="付款账户">NaiveUiAdmin@163.com</n-descriptions-item>
+        <n-descriptions-item label="转账金额">￥1980.00</n-descriptions-item>
+        <n-descriptions-item label="状态"><n-tag type="success"> 已到账 </n-tag></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card :bordered="false" title="其它信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item><template #label>城市</template>深圳</n-descriptions-item>
+        <n-descriptions-item label="性别">男</n-descriptions-item>
+        <n-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</n-descriptions-item>
+        <n-descriptions-item label="地址">广东省深圳市南山区</n-descriptions-item>
+        <n-descriptions-item label="生日">1991-06-04</n-descriptions-item>
+        <n-descriptions-item label="认证"><n-tag type="success"> 已认证 </n-tag></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card :bordered="false" title="表格信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-table :bordered="false" :single-line="false">
+        <thead>
+        <tr>
+          <th>姓名</th>
+          <th>性别</th>
+          <th>城市</th>
+          <th>生日</th>
+          <th width="150">操作</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ah jung</td>
+          <td>男</td>
+          <td>深圳</td>
+          <td>1993-11-09</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>西门飞雪</td>
+          <td>男</td>
+          <td>广州</td>
+          <td>1991-09-11</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>泰坦巨人</td>
+          <td>男</td>
+          <td>北京</td>
+          <td>1990-11-03</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>猎魔人</td>
+          <td>女</td>
+          <td>上海</td>
+          <td>1992-03-11</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        </tbody>
+      </n-table>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {}
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/src/views/form/stepForm/Step1.vue
+++ b/src/views/form/stepForm/Step1.vue
@@ -0,0 +1,131 @@
+<template>
+  <n-form
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form1Ref"
+    style="max-width: 500px; margin: 40px auto 0;"
+  >
+    <n-form-item label="付款账户" path="myAccount">
+      <n-select
+        placeholder="请选择付款账户"
+        :options="myAccountList"
+        v-model:value="formValue.myAccount"
+      />
+    </n-form-item>
+    <n-form-item label="收款账户" path="account">
+      <n-input-group>
+        <n-select
+          placeholder="请选择"
+          :options="accountTypeList"
+          :style="{ width: '20%' }"
+          v-model:value="formValue.accountType"
+        />
+        <n-input placeholder="请输入收款账户" :style="{ width: '80%' }" v-model:value="formValue.account"/>
+      </n-input-group>
+
+
+    </n-form-item>
+    <n-form-item label="收款人姓名" path="name">
+      <n-input placeholder="请输入收款人姓名" v-model:value="formValue.name"/>
+    </n-form-item>
+    <n-form-item label="转账金额" path="money">
+      <n-input placeholder="请输入转账金额" v-model:value="formValue.money">
+        <template #prefix>
+          <span class="text-gray-400">￥</span>
+        </template>
+      </n-input>
+    </n-form-item>
+    <div style="margin-left:80px">
+      <n-space>
+        <n-button type="primary" @click="formSubmit">下一步</n-button>
+      </n-space>
+    </div>
+  </n-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const myAccountList = [
+  {
+    label: 'NaiveUiAdmin@163.com',
+    value: 1
+  },
+  {
+    label: 'NaiveUiAdmin@qq.com',
+    value: 2
+  },
+]
+
+const accountTypeList = [
+  {
+    label: '微信',
+    value: 1
+  },
+  {
+    label: '支付宝',
+    value: 2
+  },
+]
+
+export default defineComponent({
+  emits: ['nextStep'],
+  setup(_, { emit }) {
+    const form1Ref: any = ref(null)
+    const message = useMessage()
+    const current = ref(1)
+
+    return {
+      form1Ref,
+      current,
+      formValue: ref({
+        accountType: 1,
+        myAccount: null,
+        account: 'xioama@qq.com',
+        money: "1980",
+        name: 'Ah jung',
+      }),
+      rules: {
+        name: {
+          required: true,
+          message: '请输入收款人姓名',
+          trigger: 'blur'
+        },
+        account: {
+          required: true,
+          message: '请输入收款账户',
+          trigger: 'blur'
+        },
+        money: {
+          required: true,
+          message: '请输入转账金额',
+          trigger: 'blur'
+        },
+        myAccount: {
+          required: true,
+          type: 'number',
+          message: '请选择付款账户',
+          trigger: 'change'
+        },
+      },
+      myAccountList,
+      accountTypeList,
+      formSubmit() {
+        form1Ref.value.validate((errors) => {
+          if (!errors) {
+            emit('nextStep')
+          } else {
+            message.error('验证失败，请填写完整信息')
+          }
+        })
+      },
+      resetForm() {
+        form1Ref.value.restoreValidation()
+      }
+    }
+  }
+})
+</script>
--- a/src/views/form/stepForm/Step2.vue
+++ b/src/views/form/stepForm/Step2.vue
@@ -0,0 +1,81 @@
+<template>
+  <n-form
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form2Ref"
+    style="max-width: 500px; margin: 40px auto 0;"
+  >
+    <n-form-item label="付款账户" path="myAccount">
+      <span>NaiveUiAdmin@163.com</span>
+    </n-form-item>
+    <n-form-item label="收款账户" path="account">
+      <span>NaiveUiAdmin@qq.com</span>
+    </n-form-item>
+    <n-form-item label="收款人姓名" path="name">
+      <span>Ah jung</span>
+    </n-form-item>
+    <n-form-item label="转账金额" path="money">
+      <span>￥1980</span>
+    </n-form-item>
+    <n-divider/>
+    <n-form-item label="支付密码" path="password">
+      <n-input type="password" v-model:value="formValue.password"/>
+    </n-form-item>
+    <div style="margin-left:80px">
+      <n-space>
+        <n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
+        <n-button @click="prevStep">上一步</n-button>
+      </n-space>
+    </div>
+  </n-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  emits: ['prevStep', 'nextStep'],
+  setup(_, { emit }) {
+    const form2Ref: any = ref(null)
+    const message = useMessage()
+    const loading = ref(false)
+
+    function prevStep() {
+      emit('prevStep')
+    }
+
+    function formSubmit() {
+      loading.value = true
+      form2Ref.value.validate((errors) => {
+        if (!errors) {
+          setTimeout(() => {
+            emit('nextStep')
+          }, 1500)
+        } else {
+          message.error('验证失败，请填写完整信息')
+        }
+      })
+    }
+
+    return {
+      form2Ref,
+      loading,
+      formValue: ref({
+        password: '086611'
+      }),
+      rules: {
+        password: {
+          required: true,
+          message: '请输入支付密码',
+          trigger: 'blur'
+        },
+      },
+      prevStep,
+      formSubmit,
+    }
+  }
+})
+</script>
--- a/src/views/form/stepForm/Step3.vue
+++ b/src/views/form/stepForm/Step3.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <n-result status="success" title="操作成功" description="预计两小时内到账" class="step-result">
+      <template #default>
+        <div class="information">
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>付款账户：</n-gi>
+            <n-gi>NaiveUiAdmin@163.com</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>收款账户：</n-gi>
+            <n-gi>xiaoma@qq.com</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>收款人姓名：</n-gi>
+            <n-gi>啊俊</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>转账金额：</n-gi>
+            <n-gi>￥<span class="money">1980</span> 元</n-gi>
+          </n-grid>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-center">
+          <n-button type="primary" @click="finish" class="mr-4">再转一笔</n-button>
+          <n-button @click="prevStep">查看账单</n-button>
+        </div>
+      </template>
+    </n-result>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  emits: ['finish', 'prevStep'],
+  setup(_, { emit }) {
+    const router = useRouter()
+
+    function prevStep() {
+      emit('prevStep')
+    }
+
+    function finish() {
+      emit('finish')
+    }
+
+    function toOrderList() {
+      router.push('/form/step-form')
+    }
+
+    return {
+      prevStep,
+      finish,
+      toOrderList
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.step-result {
+  max-width: 560px;
+  margin: 40px auto 0;
+
+  ::v-deep(.n-result-content) {
+    background-color: #fafafa;
+    padding: 24px 40px;
+  }
+
+  .information {
+    line-height: 22px;
+
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+
+  .money {
+    font-family: "Helvetica Neue", sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 14px;
+  }
+}
+</style>
--- a/src/views/form/stepForm/stepForm.vue
+++ b/src/views/form/stepForm/stepForm.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="分步表单">
+        将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <n-space vertical class="steps">
+        <n-steps :current="currentTab" :status="currentStatus">
+          <n-step
+            title="填写转账信息"
+            description="确保填写正确"
+          />
+          <n-step
+            title="确认转账信息"
+            description="确认转账信息"
+          />
+          <n-step
+            title="完成"
+            description="恭喜您，转账成功"
+          />
+        </n-steps>
+        <step1 v-if="currentTab === 1" @nextStep="nextStep"/>
+        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import step1 from './Step1.vue'
+import step2 from './Step2.vue'
+import step3 from './Step3.vue'
+
+export default defineComponent({
+  components: { step1, step2, step3 },
+  setup() {
+    const currentTab = ref(1)
+    const currentStatus = ref('process')
+
+    function nextStep() {
+      if (currentTab.value < 3) {
+        currentTab.value += 1
+      }
+    }
+
+    function prevStep() {
+      if (currentTab.value > 1) {
+        currentTab.value -= 1
+      }
+    }
+
+    function finish() {
+      currentTab.value = 1
+    }
+
+    return {
+      currentTab,
+      currentStatus,
+      nextStep,
+      prevStep,
+      finish
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.steps {
+  max-width: 750px;
+  margin: 16px auto;
+}
+</style>
--- a/src/views/list/basicList/columns.ts
+++ b/src/views/list/basicList/columns.ts
@@ -0,0 +1,72 @@
+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
@@ -0,0 +1,156 @@
+<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/login/index.vue
+++ b/src/views/login/index.vue
@@ -116,7 +116,7 @@ export default defineComponent({
          loadingMessage = message.loading('登录中...')
          state.loading = true

-          const params:FormState = {
+          const params: FormState = {
            username,
            password
          }
--- a/src/views/result/fail.vue
+++ b/src/views/result/fail.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="error" title="操作失败" description="请核对并修改以下信息后，再重新提交。">
+        <div class="result-box-extra">
+          <p>您提交的内容有如下错误：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined  />
+              </n-icon>
+              <span>认证照片不够清晰</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined  />
+              </n-icon>
+              <span>备注包含敏感字符，并且不能包含政治相关</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+import { InfoCircleOutlined } from '@vicons/antd'
+
+export default defineComponent({
+  components:{ InfoCircleOutlined },
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>
--- a/src/views/result/info.vue
+++ b/src/views/result/info.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="info" title="提示" description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回">
+        <div class="result-box-extra">
+          <p>您提交的内容如下：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined />
+              </n-icon>
+              <span>转入支付宝账户（189****5426）：￥1980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined  />
+              </n-icon>
+              <span>转入支付宝账户（187****5426）：￥2980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>全部撤回</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+import { CheckCircleOutlined } from '@vicons/antd'
+
+export default defineComponent({
+  components:{ CheckCircleOutlined },
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -0,0 +1,49 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="success" title="操作成功" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
+        <div class="result-box-extra">
+          <p>已提交申请，等待财务部门审核。</p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    return {
+      goHome() {
+        router.push('/')
+      }
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+}
+</style>
--- a/src/views/setting/account/BasicSetting.vue
+++ b/src/views/setting/account/BasicSetting.vue
@@ -0,0 +1,95 @@
+<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
@@ -0,0 +1,96 @@
+<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/stylelint.config.js
+++ b/stylelint.config.js
@@ -1,25 +1,36 @@
 module.exports = {
  root: true,
-  plugins: ['stylelint-order', 'stylelint-scss'],
+  plugins: ['stylelint-order'],
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    'selector-pseudo-class-no-unknown': [
      true,
      {
-        ignorePseudoClasses: ['global']
-      }
+        ignorePseudoClasses: ['global'],
+      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
-        ignorePseudoElements: ['v-deep']
-      }
+        ignorePseudoElements: ['v-deep'],
+      },
    ],
    'at-rule-no-unknown': [
      true,
      {
-        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
-      }
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin',
+        ],
+      },
    ],
    'no-empty-source': null,
    'named-grid-areas-no-invalid': null,
@@ -28,12 +39,12 @@ module.exports = {
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': ['always', { ignore: ['single-declaration'] }],
+    // 'declaration-block-trailing-semicolon': 'always',
    'rule-empty-line-before': [
      'always',
      {
-        ignore: ['after-comment', 'first-nested']
-      }
+        ignore: ['after-comment', 'first-nested'],
+      },
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
@@ -44,165 +55,16 @@ module.exports = {
        'declarations',
        {
          type: 'at-rule',
-          name: 'supports'
+          name: 'supports',
        },
        {
          type: 'at-rule',
-          name: 'media'
+          name: 'media',
        },
-        'rules'
+        'rules',
      ],
-      { severity: 'warning' }
+      { severity: 'warning' },
    ],
-    // Specify the alphabetical order of the attributes in the declaration block
-    'order/properties-order': [
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'z-index',
-      'display',
-      'float',
-      'width',
-      'height',
-      'max-width',
-      'max-height',
-      'min-width',
-      'min-height',
-      'padding',
-      'padding-top',
-      'padding-right',
-      'padding-bottom',
-      'padding-left',
-      'margin',
-      'margin-top',
-      'margin-right',
-      'margin-bottom',
-      'margin-left',
-      'margin-collapse',
-      'margin-top-collapse',
-      'margin-right-collapse',
-      'margin-bottom-collapse',
-      'margin-left-collapse',
-      'overflow',
-      'overflow-x',
-      'overflow-y',
-      'clip',
-      'clear',
-      'font',
-      'font-family',
-      'font-size',
-      'font-smoothing',
-      'osx-font-smoothing',
-      'font-style',
-      'font-weight',
-      'hyphens',
-      'src',
-      'line-height',
-      'letter-spacing',
-      'word-spacing',
-      'color',
-      'text-align',
-      'text-decoration',
-      'text-indent',
-      'text-overflow',
-      'text-rendering',
-      'text-size-adjust',
-      'text-shadow',
-      'text-transform',
-      'word-break',
-      'word-wrap',
-      'white-space',
-      'vertical-align',
-      'list-style',
-      'list-style-type',
-      'list-style-position',
-      'list-style-image',
-      'pointer-events',
-      'cursor',
-      'background',
-      'background-attachment',
-      'background-color',
-      'background-image',
-      'background-position',
-      'background-repeat',
-      'background-size',
-      'border',
-      'border-collapse',
-      'border-top',
-      'border-right',
-      'border-bottom',
-      'border-left',
-      'border-color',
-      'border-image',
-      'border-top-color',
-      'border-right-color',
-      'border-bottom-color',
-      'border-left-color',
-      'border-spacing',
-      'border-style',
-      'border-top-style',
-      'border-right-style',
-      'border-bottom-style',
-      'border-left-style',
-      'border-width',
-      'border-top-width',
-      'border-right-width',
-      'border-bottom-width',
-      'border-left-width',
-      'border-radius',
-      'border-top-right-radius',
-      'border-bottom-right-radius',
-      'border-bottom-left-radius',
-      'border-top-left-radius',
-      'border-radius-topright',
-      'border-radius-bottomright',
-      'border-radius-bottomleft',
-      'border-radius-topleft',
-      'content',
-      'quotes',
-      'outline',
-      'outline-offset',
-      'opacity',
-      'filter',
-      'visibility',
-      'size',
-      'zoom',
-      'transform',
-      'box-align',
-      'box-flex',
-      'box-orient',
-      'box-pack',
-      'box-shadow',
-      'box-sizing',
-      'table-layout',
-      'animation',
-      'animation-delay',
-      'animation-duration',
-      'animation-iteration-count',
-      'animation-name',
-      'animation-play-state',
-      'animation-timing-function',
-      'animation-fill-mode',
-      'transition',
-      'transition-delay',
-      'transition-duration',
-      'transition-property',
-      'transition-timing-function',
-      'background-clip',
-      'backface-visibility',
-      'resize',
-      'appearance',
-      'user-select',
-      'interpolation-mode',
-      'direction',
-      'marks',
-      'page',
-      'set-link-source',
-      'unicode-bidi',
-      'speak'
-    ]
  },
-  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
-}
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,3 @@
-const { sky: color_sky, ...colors } = require('tailwindcss/colors');
-
 module.exports = {
  mode: 'jit',
  // darkMode: 'class',
@@ -15,8 +13,6 @@ module.exports = {
      },
    },
    colors: {
-      ...colors,
-      sky: color_sky,
      primary: {
        DEFAULT: '#0960bd',
        // dark: primaryColorDark,
@@ -79,4 +75,4 @@ function createEnterPlugin(maxOutput = 6) {
    });
  };
  return { handler };
-}
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,41 +2,39 @@
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "pretty": true,
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "checkJs": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "strictPropertyInitialization": false,
-    "downlevelIteration": true,
-    "noUnusedLocals": false,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "removeComments": false,
    "strictFunctionTypes": false,
+    "jsx": "preserve",
    "baseUrl": ".",
-    "types": ["vite/client", "node"],
-    "typeRoots": ["./node_modules/@types/", "./types"],
+    "allowJs": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "types": [
+      "vite/client",
+      "jest"
+    ],
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./types"
+    ],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    }
  },
  "include": [
    "src/**/*.ts",
@@ -44,9 +42,15 @@
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
-    "types/**/*.ts"
+    "types/**/*.ts",
+    "build/**/*.ts",
+    "build/**/*.d.ts",
+    "mock/**/*.ts",
+    "vite.config.ts"
  ],
  "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist",
+    "**/*.js"
  ]
 }
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -1,12 +1,10 @@
-export interface GlobConfig {
-  // Site title
-  title: string;
-  // Service interface url
-  apiUrl: string;
-  // Upload url
-  uploadUrl?: string;
-  //  Service interface url prefix
-  urlPrefix?: string;
-  // Project abbreviation
-  shortName: string;
+export interface ProjectSettingState {
+  navMode: string,//导航模式
+  navTheme: string,//导航风格
+  headerSetting: object,//顶部设置
+  showFooter: boolean, //页脚
+  menuSetting: object, //多标签
+  multiTabsSetting: object,//多标签
+  crumbsSetting: object,//面包屑
+  permissionMode: string//权限模式
 }
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -0,0 +1,97 @@
+import type {
+  ComponentRenderProxy,
+  VNode,
+  VNodeChild,
+  ComponentPublicInstance,
+  FunctionalComponent,
+  PropType as VuePropType,
+} from 'vue';
+
+declare global {
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+  // declare interface Window {
+  //   // Global vue app instance
+  //   __APP__: App<Element>;
+  // }
+
+  // vue
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element;
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T;
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: T;
+  };
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement;
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[];
+  }
+
+  interface ImportMetaEnv extends ViteEnv {
+    __: unknown;
+  }
+
+  declare interface ViteEnv {
+    VITE_PORT: number;
+    VITE_USE_MOCK: boolean;
+    VITE_PUBLIC_PATH: string;
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_DROP_CONSOLE: boolean;
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode;
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy;
+
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module 'vue' {
+  export type JSXComponent<Props = any> =
+    | { new(): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>;
+}
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -0,0 +1,22 @@
+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R;
+}
+
+declare interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>;
+}
+
+declare type RefType<T> = T | null;
+
+
+declare type EmitType = (event: string, ...args: any[]) => void;
+
+declare type TargetContext = '_self' | '_blank';
+
+declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+  $el: T;
+}
+
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
--- a/types/modules.d.ts
+++ b/types/modules.d.ts
@@ -1,9 +1,10 @@
-declare module 'mitt' {
-  import mitt from 'mitt'
-  export default mitt
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
 }

-declare module 'blueimp-md5' {
-  import md5 from 'blueimp-md5'
-  export default md5
+declare module 'virtual:*' {
+  const result: any;
+  export default result;
 }
--- a/types/schema.d.ts
+++ b/types/schema.d.ts
@@ -1,59 +0,0 @@
-import { VNode, ComponentInternalInstance, HTMLAttributes, CSSProperties } from 'vue'
-import { RuleObject } from 'ant-design-vue/lib/form/interface'
-import { FormItemProps } from 'ant-design-vue/lib/form/FormItem'
-import { FormProps, ValidationRule } from 'ant-design-vue/lib/form/Form'
-
-declare global {
-  declare interface OptionItem {
-    label: string
-    value: string | number
-    [key: string]: any
-  }
-
-  declare type Rule =
-    | ValidationRule
-    | {
-        trigger?: 'blur' | 'change' | string['blur' | 'change']
-      }
-
-  declare interface FormItem extends Partial<typeof FormItemProps> {
-    type?:
-      | 'input'
-      | 'textarea'
-      | 'select'
-      | 'radio'
-      | 'checkbox'
-      | 'input-number'
-      | 'inputRange'
-      | 'switch'
-      | VNode
-    label?: string // 表单标签
-    field: string // 表单字段
-    value: any // 表单默认值
-    props?: Partial<
-      HTMLAttributes | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any
-    > // 表单属性
-    rules?: Rule[] // 表单验证规则
-    options?: OptionItem[] // 可选项
-    eventObject?: object // 事件对象，例如：{ mousedown: doThis, mouseup: doThat } 将会动态绑定为：v-on="{ mousedown: doThis, mouseup: doThat }"
-    loading?: boolean // 异步数据是否加载
-    asyncValue?: (
-      formItem: FormItem,
-      formInstance: ComponentInternalInstance | null
-    ) => Promise<any> // 异步数据
-    asyncOptions?: (
-      formItem: FormItem,
-      formInstance: ComponentInternalInstance | null
-    ) => Promise<OptionItem[]> // 异步选项的数据
-    hidden?: boolean // 是否隐藏表单项
-    placeholder?: string
-  }
-
-  interface FormSchema extends Partial<typeof FormProps> {
-    style?: CSSProperties // 表单样式
-    formItemLayout?: object // 表单布局
-    watchKeys?: string[]
-    watchCallback?: (watchKeys: string[], { dynamicForm, modelRef }) => any
-    formItem: FormItem[]
-  }
-}
--- a/types/shims/shims-app.d.ts
+++ b/types/shims/shims-app.d.ts
@@ -1,67 +0,0 @@
-declare module '*.bmp' {
-  const src: string
-  export default src
-}
-
-declare module '*.gif' {
-  const src: string
-  export default src
-}
-
-declare module '*.jpg' {
-  const src: string
-  export default src
-}
-
-declare module '*.jpeg' {
-  const src: string
-  export default src
-}
-
-declare module '*.png' {
-  const src: string
-  export default src
-}
-
-declare module '*.webp' {
-  const src: string
-  export default src
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module 'moment/locale/*' {
-  const LocaleMessage: { [key: string]: any }
-  export default LocaleMessage
-}
-
-declare module 'ant-design-vue/es/locale-provider/*' {
-  const LocaleMessage: { [key: string]: any }
-  export default LocaleMessage
-}
-
-// ant-design-vue/es/base
-declare module 'ant-design-vue/es/base' {
-  class Base {
-    static install(vue: typeof Vue): void
-  }
-  export default Base
-}
--- a/types/shims/shims-tsx.d.ts
+++ b/types/shims/shims-tsx.d.ts
@@ -1,18 +0,0 @@
-import Vue, { VNode } from 'vue'
-
-declare module '*.tsx' {
-  import Vue from 'compatible-vue'
-  export default Vue
-}
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    type Element = VNode
-    // tslint:disable no-empty-interface
-    type ElementClass = Vue
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
-}
--- a/types/shims/shims-vue.d.ts
+++ b/types/shims/shims-vue.d.ts
@@ -1,24 +0,0 @@
-declare module '*.vue' {
-  import { defineComponent } from 'vue'
-  const component: ReturnType<typeof defineComponent>
-  export default component
-}
-
-// declare module '*.vue' {
-//     import * as vue from 'vue';
-//     export declare const render: vue.RootRenderFunction<Element | DocumentFragment>
-// }
-
-// declare module '@vue/runtime-core' {
-//     interface ComponentCustomProperties {
-//         $createLoading: () => any
-//     }
-// }
-
-declare type Nullable<T> = T | null
-
-declare type CustomizedHTMLElement<T> = HTMLElement & T
-
-declare type Indexable<T> = {
-  [key: string]: T
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ah jung	b4857a7559	fix Bug or add example	2021-07-16 17:41:11 +08:00
啊俊	a6aa6d4d6d	新增示例demo	2021-07-15 23:51:18 +08:00
Ah jung	8fd663e0e5	readme更新，删除无用文件	2021-07-15 15:18:00 +08:00
Ah jung	304e7053d7	新增示例页面	2021-07-15 13:52:54 +08:00
Ah jung	9fa584eb23	日常 bugfix 更新，依赖升级	2021-07-13 18:16:47 +08:00
Ah jung	18597fabd3	日常 bugfix 更新	2021-07-13 10:01:31 +08:00
Ah jung	b1c730dde8	1.0发布，Fixes Bug，以及新增 ProTable组件	2021-07-12 16:36:07 +08:00
Ah jung	1e9b7074e5	1.0发布，Fixes Bug，以及新增 ProTable组件	2021-07-12 16:16:51 +08:00
				`@@ -0,0 +1 @@`
				`export { default as ProTable } from './src/ProTable.vue';`