新增示例页面

日常 bugfix 更新，依赖升级
日常 bugfix 更新
2026-02-05 22:22:25 +08:00 · 2021-07-15 13:52:54 +08:00 · 2021-07-13 18:16:47 +08:00 · 2021-07-13 10:01:31 +08:00 · 2021-07-12 16:36:07 +08:00
31 changed files with 1143 additions and 572 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,9 +1,20 @@
 module.exports = {
-  useTabs: false,
-  tabWidth: 2,
  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  vueIndentScriptAndStyle: true,
  singleQuote: true,
-  trailingComma: 'none',
+  quoteProps: 'as-needed',
  bracketSpacing: true,
-  semi: false
+  trailingComma: 'es5',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf',
+  rangeStart: 0,
 };
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 1.1 (2021-07-15)
+- ### ✨ Features
+- 新增 `基础表单` 示例页面
+- 新增 `分步表单` 示例页面
+- 新增 `表单详情` 示例页面
+- 持续更新更多实用示例，同时也演示`Naive UI`使用方法
+
+
 # 1.0 (2021-07-12)
 ### 🐛 Bug Fixes
 - 修复页面切换面包屑未及时更新
@@ -6,7 +14,8 @@
 - 1.0骨架发布 
 - Naive UI 升级至2.15.4  
 - 菜单新增排序字段  
- 新增 `ProTable` 组件，封装了常用的分页列配置等逻辑，可查看组件示例页面
+- 新增 `ProTable` 组件，封装了常用的分页列配置等逻辑
+- 新增 `ProTable` 组件示例页面 
 - 持续更新中...


--- a/README.md
+++ b/README.md
@@ -16,6 +16,11 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - [ ] 监控页
 - [x] 工作台

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

--- a/index.html
+++ b/index.html
@@ -1,78 +1,93 @@
 <!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>
 </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;
+<div id="app">
+  <style>
+    .app-loading-main {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-width: 100%;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      background-color: #f4f7f9;
+      position: relative;
+    }
+
+    .app-loading {
+      position: relative;
+      -webkit-transform: translateY(-15px);
+      -ms-transform: translateY(-15px);
+      transform: translateY(-15px);
+    }
+
+    .app-loading > div {
+      -webkit-animation-fill-mode: both;
+      animation-fill-mode: both;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 100%;
+    }
+
+    .app-loading > div:first-child {
+      background: #2d8cf0;
+      height: 16px;
+      width: 16px;
+      top: 9px;
+      left: 9px;
+      -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
+      animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
+    }
+
+    .app-loading > div:last-child {
+      position: absolute;
+      border: 2px solid #2d8cf0;
+      width: 30px;
+      height: 30px;
+      background: transparent;
+      border: 2px solid;
+      border-color: #2d8cf0 transparent #2d8cf0 transparent;
+      -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
+      animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
+      -webkit-animation-duration: 1s;
+      animation-duration: 1s;
+    }
+
+    @keyframes rotate {
+      0% {
+        -webkit-transform: rotate(0deg) scale(1);
+        transform: rotate(0deg) scale(1);
      }
-      .app-loading {
-        position: relative;
-        -webkit-transform: translateY(-15px);
-        -ms-transform: translateY(-15px);
-        transform: translateY(-15px); 
+      50% {
+        -webkit-transform: rotate(180deg) scale(0.6);
+        transform: rotate(180deg) scale(0.6);
      }
-      .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; 
+      100% {
+        -webkit-transform: rotate(360deg) scale(1);
+        transform: rotate(360deg) scale(1);
      }
-      .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>
+    }
+  </style>
+  <div class="app-loading-main">
+    <div class="app-loading">
+      <div></div>
+      <div></div>
    </div>
  </div>
-  <script type="module" src="/src/main.ts"></script>
+</div>
+<script type="module" src="/src/main.ts"></script>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "naive-ui-admin",
-  "version": "1.0",
+  "version": "1.1",
  "author": {
    "name": "Ahjung",
    "email": "735878602@qq.com",
@@ -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,7 +12,7 @@
  </NConfigProvider>

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

--- a/src/components/ProTable/src/ProTable.vue
+++ b/src/components/ProTable/src/ProTable.vue
@@ -267,7 +267,6 @@ export default defineComponent({
      justify-content: flex-start;
      font-size: 16px;
      font-weight: 600;
-      color: rgba(0, 0, 0, .85);
    }
  }

@@ -280,9 +279,8 @@ export default defineComponent({
      height: 18px;
      margin-left: 12px;
      font-size: 16px;
-      color: rgba(0, 0, 0, .75);
      cursor: pointer;
-
+      color:var(--text-color);
      :hover {
        color: #1890ff;
      }
--- a/src/components/ProTable/src/components/settings/ColumnSetting.vue
+++ b/src/components/ProTable/src/components/settings/ColumnSetting.vue
@@ -18,42 +18,41 @@
            </div>
          </template>
          <div class="table-toolbar-inner">
-            <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
-              <template #item="{element, index}">
-                <div class="table-toolbar-inner-checkbox">
-                  <span class="drag-icon">
-                    <n-icon size="18">
-                      <DragOutlined/>
-                    </n-icon>
-                  </span>
-                  <n-checkbox-group v-model:value="checkList" @update:value="onChange">
+            <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"/>
-                  </n-checkbox-group>
-                  <div class="fixed-item">
-                    <n-tooltip trigger="hover" placement="bottom">
-                      <template #trigger>
-                        <n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
-                                class="transform -rotate-90 cursor-pointer" @click="fixedColumn(index,'left')">
-                          <VerticalAlignTopOutlined/>
-                        </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="transform rotate-90 cursor-pointer" @click="fixedColumn(index,'right')">
-                          <VerticalAlignTopOutlined/>
-                        </n-icon>
-                      </template>
-                      <span>固定到右侧</span>
-                    </n-tooltip>
+                    <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>
-                </div>
-              </template>
-            </Draggable>
-
+                </template>
+              </Draggable>
+            </n-checkbox-group>
          </div>
        </n-popover>
      </div>
@@ -65,8 +64,9 @@
 <script lang="ts">
 import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from "vue"
 import { useTableContext } from '../../hooks/useTableContext';
-import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalAlignTopOutlined } from '@vicons/antd'
+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;
@@ -78,11 +78,14 @@ export default defineComponent({
  name: 'ColumnSetting',
  components: {
    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, Draggable,
-    VerticalAlignTopOutlined
+    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,
@@ -108,6 +111,7 @@ export default defineComponent({
      state.checkList = checkList
      state.defaultCheckList = checkList
      columnsList.value = columns
+      cacheColumnsList.value = columns
    }

    //切换
@@ -125,18 +129,26 @@ export default defineComponent({

    //获取
    function getColumns() {
-      const newArr = []
+      let newRet = []
      table.getColumns().forEach(item => {
-        newArr.push({ ...item })
+        newRet.push({...item })
      })
-      return newArr
+      return newRet
    }

    //重置
    function resetColumns() {
      state.checkList = [...state.defaultCheckList]
      state.checkAll = true;
-      setColumns(table.getCacheColumns(true));
+      let cacheColumnsKeys:any[] = table.getCacheColumns()
+      let newColumns = cacheColumnsKeys.map(item => {
+        return {
+          ...item,
+          fixed:undefined
+        }
+      })
+      setColumns(newColumns);
+      columnsList.value = newColumns
    }

    //全选
@@ -152,8 +164,9 @@ export default defineComponent({
    }

    //拖拽排序
-    function draggableEnd(e) {
+    function draggableEnd() {
      const newColumns = toRaw(unref(columnsList))
+      columnsList.value = newColumns
      setColumns(newColumns);
    }

@@ -170,19 +183,26 @@ export default defineComponent({
    }

    //固定
-    function fixedColumn(index, fixed) {
-      let columnList = getColumns();
-      let columnInfo = columnList[index]
-      const isFixed = columnInfo.fixed === fixed ? undefined : fixed
-      columnInfo.fixed = isFixed
-      columnsList.value = columnList
-      table.setCacheColumnsField(columnInfo.key, { fixed: isFixed })
-      setColumns(columnList);
+    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,
@@ -197,12 +217,15 @@ export default defineComponent({

 <style lang="less">
 .table-toolbar {
+  &-inner-popover-title{
+    padding: 3px 0;
+  }
  &-right {
    &-icon {
      height: 18px;
      margin-left: 12px;
      font-size: 16px;
-      color: rgba(0, 0, 0, .75);
+      color:var(--text-color);
      cursor: pointer;

      :hover {
@@ -216,18 +239,15 @@ export default defineComponent({
  &-checkbox {
    display: flex;
    align-items: center;
-    padding: 8px 0;
-
+    padding: 10px 14px;
    &:hover {
      background: #e6f7ff;
    }
-
    .drag-icon {
      display: inline-flex;
      margin-right: 8px;
      cursor: move;
    }
-
    .fixed-item {
      display: flex;
      align-items: center;
@@ -243,5 +263,15 @@ export default defineComponent({
      }
    }
  }
+  &-checkbox-dark{
+    &:hover {
+      background: hsla(0, 0%, 100%, .08);
+    }
+  }
+}
+.toolbar-popover{
+  .n-popover__content{
+    padding: 0;
+  }
 }
 </style>
--- a/src/components/ProTable/src/hooks/useColumns.ts
+++ b/src/components/ProTable/src/hooks/useColumns.ts
@@ -22,10 +22,11 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
    () => unref(propsRef).columns,
    (columns) => {
      columnsRef.value = columns;
-      cacheColumns = columns?.filter((item) => !item.flag) ?? [];
+      cacheColumns = columns;
    }
  );

+
  //设置
  function setColumns(columnList: string[]) {
    const columns: any[] = cloneDeep(columnList);
@@ -36,7 +37,6 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
      return;
    }
    const cacheKeys = cacheColumns.map((item) => item.key);
-
    //针对拖拽排序
    if (!isString(columns[0])) {
      columnsRef.value = columns;
@@ -60,9 +60,9 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {

  //获取
  function getColumns() {
-    const columns = toRaw(unref(propsRef).columns);
+    let columns = toRaw(unref(getColumnsRef));
    return columns.map(item => {
-      return { title: item.title, key: item.key, fixed: item.fixed || undefined }
+      return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
    })
  }

--- a/src/components/ProTable/src/hooks/useDataSource.ts
+++ b/src/components/ProTable/src/hooks/useDataSource.ts
@@ -1,8 +1,8 @@
-import { ref, ComputedRef, unref, computed, onMounted, onBeforeMount, watchEffect, watch } from 'vue';
+import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
-import { isFunction, isBoolean } from '@/utils/is';
-import { DEFAULTPAGESIZE, APISETTING, PAGESIZES } from '../const';
+import { isBoolean } from '@/utils/is';
+import { APISETTING } from '../const';

 export function useDataSource(
  propsRef: ComputedRef<BasicTableProps>,
@@ -10,12 +10,11 @@ export function useDataSource(
    getPaginationInfo,
    setPagination,
    setLoading,
-    tableData,
-    getSelection
+    tableData
  },
-  emit: EmitType
+  emit
 ) {
-  const dataSourceRef = ref<Recordable[]>([]);
+  const dataSourceRef = ref([]);

  watchEffect(() => {
    tableData.value = unref(dataSourceRef);
@@ -33,7 +32,7 @@ export function useDataSource(
  );

  const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef);
+    const { rowKey }:any = unref(propsRef);
    return rowKey ? rowKey : () => {
      return 'key'
    };
@@ -44,25 +43,6 @@ export function useDataSource(
    if (!dataSource || dataSource.length === 0) {
      return unref(dataSourceRef);
    }
-    // if (unref(getAutoCreateKey)) {
-    //   const firstItem = dataSource[0];
-    //   const lastItem = dataSource[dataSource.length - 1];
-    //
-    //   if (firstItem && lastItem) {
-    //     if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
-    //       const data = cloneDeep(unref(dataSourceRef));
-    //       data.forEach((item) => {
-    //         if (!item[ROW_KEY]) {
-    //           item[ROW_KEY] = buildUUID();
-    //         }
-    //         if (item.children && item.children.length) {
-    //           setTableKey(item.children);
-    //         }
-    //       });
-    //       dataSourceRef.value = data;
-    //     }
-    //   }
-    // }
    return unref(dataSourceRef);
  });

@@ -77,7 +57,7 @@ export function useDataSource(
      const totalField = APISETTING.totalField
      const listField = APISETTING.listField

-      let pageParams: Recordable = {};
+      let pageParams = {};
      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;

      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
@@ -95,7 +75,7 @@ export function useDataSource(
      const resultTotal = res[totalField] || 0
      const currentPage = res[pageField]

-      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+      // 如果数据异常，需获取正确的页码再次执行
      if (resultTotal) {
        const currentTotalPage = Math.ceil(resultTotal / pageSize);
        if (page > currentTotalPage) {
@@ -138,19 +118,15 @@ export function useDataSource(
    }, 16)
  });

-  // onBeforeMount(()=> {
-  //   fetch()
-  // })
-
-  function setTableData<T = Recordable>(values: T[]) {
+  function setTableData(values) {
    dataSourceRef.value = values;
  }

-  function getDataSource<T = Recordable>() {
-    return getDataSourceRef.value as T[];
+  function getDataSource() :any[] {
+    return getDataSourceRef.value;
  }

-  async function reload(opt?: FetchParams) {
+  async function reload(opt?) {
    await fetch(opt);
  }

--- a/src/components/ProTable/src/props.ts
+++ b/src/components/ProTable/src/props.ts
@@ -23,7 +23,6 @@ export const basicProps = {
    type: [Array] as PropType<BasicColumn[]>,
    default: () => [],
    required: true,
-
  },
  request: {
    type: Function as PropType<(...arg: any[]) => Promise<any>>,
@@ -31,7 +30,7 @@ export const basicProps = {
    required: true
  },
  rowKey: {
-    type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
+    type: [String, Function] as PropType<string | ((record) => string)>,
    default: undefined,
  },
  pagination: {
--- 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/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.1 · 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>
--- 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'
--- 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/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -46,7 +46,17 @@ import {
  NThing,
  NDataTable,
  NPopover,
-  NPagination
+  NPagination,
+  NSelect,
+  NRadioGroup,
+  NRadio,
+  NSteps,
+  NStep,
+  NInputGroup,
+  NResult,
+  NDescriptions,
+  NDescriptionsItem,
+  NTable
 } from 'naive-ui'

 const naive = create({
@@ -96,7 +106,17 @@ const naive = create({
    NThing,
    NDataTable,
    NPopover,
-    NPagination
+    NPagination,
+    NSelect,
+    NRadioGroup,
+    NRadio,
+    NSteps,
+    NStep,
+    NInputGroup,
+    NResult,
+    NDescriptions,
+    NDescriptionsItem,
+    NTable
  ]
 })

--- a/src/router/modules/comp.ts
+++ b/src/router/modules/comp.ts
@@ -1,6 +1,6 @@
 import { RouteRecordRaw } from 'vue-router'
 import { Layout } from '@/router/constant';
-import { ProfileOutlined } from '@vicons/antd'
+import { WalletOutlined  } from '@vicons/antd'
 import { renderIcon } from '@/utils/index'


@@ -25,7 +25,7 @@ const routes: Array<RouteRecordRaw> = [
    component: Layout,
    meta: {
      title: '组件',
-      icon: renderIcon(ProfileOutlined),
+      icon: renderIcon(WalletOutlined ),
      sort: 1
    },
    children: [
--- 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/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/views/dashboard/workplace/workplace.vue
+++ b/src/views/dashboard/workplace/workplace.vue
@@ -41,9 +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">
@@ -59,9 +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">
@@ -77,9 +73,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: #e44c27">
@@ -95,9 +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">
@@ -113,9 +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">
@@ -131,9 +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">
@@ -239,71 +227,65 @@
        <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>
--- 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>
+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/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/yarn.lock
+++ b/yarn.lock
@@ -431,13 +431,6 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

-"@fullhuman/postcss-purgecss@^3.1.3":
-  version "3.1.3"
-  resolved "https://registry.npm.taobao.org/@fullhuman/postcss-purgecss/download/@fullhuman/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"
-  integrity sha1-R697h8m/s95LyUo4+HW5KP/98zk=
-  dependencies:
-    purgecss "^3.1.3"
-
 "@fullhuman/postcss-purgecss@^4.0.3":
  version "4.0.3"
  resolved "https://registry.npm.taobao.org/@fullhuman/postcss-purgecss/download/@fullhuman/postcss-purgecss-4.0.3.tgz#55d71712ec1c7a88e0d1ba5f10ce7fb6aa05beb4"
@@ -521,46 +514,6 @@
    remark "^13.0.0"
    unist-util-find-all-after "^3.0.2"

-"@tailwindcss/postcss7-compat@^2.2.4":
-  version "2.2.4"
-  resolved "https://registry.nlark.com/@tailwindcss/postcss7-compat/download/@tailwindcss/postcss7-compat-2.2.4.tgz#0e5b446e94cfdf892e4f76cecb703c8d698050f3"
-  integrity sha1-DltEbpTP34kuT3bOy3A8jWmAUPM=
-  dependencies:
-    "@fullhuman/postcss-purgecss" "^3.1.3"
-    arg "^5.0.0"
-    autoprefixer "^9"
-    bytes "^3.0.0"
-    chalk "^4.1.1"
-    chokidar "^3.5.2"
-    color "^3.1.3"
-    cosmiconfig "^7.0.0"
-    detective "^5.2.0"
-    didyoumean "^1.2.1"
-    dlv "^1.1.3"
-    fast-glob "^3.2.5"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.0"
-    html-tags "^3.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.8.1"
-    normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss "^7"
-    postcss-functions "^3"
-    postcss-js "^2"
-    postcss-load-config "^3.1.0"
-    postcss-nested "^4"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
-
 "@types/estree@0.0.39":
  version "0.0.39"
  resolved "https://registry.nlark.com/@types/estree/download/@types/estree-0.0.39.tgz?cache=0&sync_timestamp=1622611944045&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Festree%2Fdownload%2F%40types%2Festree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -1122,19 +1075,19 @@ at-least-node@^1.0.0:
  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==

-autoprefixer@^10.2.6:
-  version "10.2.6"
-  resolved "https://registry.nlark.com/autoprefixer/download/autoprefixer-10.2.6.tgz?cache=0&sync_timestamp=1622039586788&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fautoprefixer%2Fdownload%2Fautoprefixer-10.2.6.tgz#aadd9ec34e1c98d403e01950038049f0eb252949"
-  integrity sha1-qt2ew04cmNQD4BlQA4BJ8OslKUk=
+autoprefixer@^10.3.1:
+  version "10.3.1"
+  resolved "https://registry.nlark.com/autoprefixer/download/autoprefixer-10.3.1.tgz?cache=0&sync_timestamp=1626111096696&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fautoprefixer%2Fdownload%2Fautoprefixer-10.3.1.tgz#954214821d3aa06692406c6a0a9e9d401eafbed2"
+  integrity sha1-lUIUgh06oGaSQGxqCp6dQB6vvtI=
  dependencies:
    browserslist "^4.16.6"
-    caniuse-lite "^1.0.30001230"
+    caniuse-lite "^1.0.30001243"
    colorette "^1.2.2"
    fraction.js "^4.1.1"
    normalize-range "^0.1.2"
    postcss-value-parser "^4.1.0"

-autoprefixer@^9, autoprefixer@^9.8.6:
+autoprefixer@^9.8.6:
  version "9.8.6"
  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
  integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -1290,10 +1243,10 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==

-caniuse-lite@^1.0.30001230:
-  version "1.0.30001239"
-  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001239.tgz?cache=0&sync_timestamp=1624135674813&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001239.tgz#66e8669985bb2cb84ccb10f68c25ce6dd3e4d2b8"
-  integrity sha1-ZuhmmYW7LLhMyxD2jCXObdPk0rg=
+caniuse-lite@^1.0.30001243:
+  version "1.0.30001244"
+  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001244.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001244.tgz#a6dc49ad5fa02d81d04373ec3f5ceabc3da06abf"
+  integrity sha1-ptxJrV+gLYHQQ3PsP1zqvD2gar8=

 capital-case@^1.0.4:
  version "1.0.4"
@@ -1950,10 +1903,10 @@ error-ex@^1.3.1:
  dependencies:
    is-arrayish "^0.2.1"

-es-module-lexer@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz#dda8c6a14d8f340a24e34331e0fab0cb50438e0e"
-  integrity sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==
+es-module-lexer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.nlark.com/es-module-lexer/download/es-module-lexer-0.6.0.tgz?cache=0&sync_timestamp=1625523919137&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fes-module-lexer%2Fdownload%2Fes-module-lexer-0.6.0.tgz#e72ab05b7412e62b9be37c37a09bdb6000d706f0"
+  integrity sha1-5yqwW3QS5iub43w3oJvbYADXBvA=

 esbuild-node-loader@^0.1.1:
  version "0.1.1"
@@ -2256,6 +2209,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.5:
    micromatch "^4.0.2"
    picomatch "^2.2.1"

+fast-glob@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.nlark.com/fast-glob/download/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
+  integrity sha1-/Wy3otfpqnp4RhEehaGW1rL3ZqE=
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
  version "2.1.0"
  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -2558,7 +2522,7 @@ glob@7.1.4:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.3:
  version "7.1.7"
  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -3721,7 +3685,7 @@ num2fraction@^1.2.2:
  resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=

-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0:
  version "4.1.1"
  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -3967,16 +3931,6 @@ please-upgrade-node@^3.2.0:
  dependencies:
    semver-compare "^1.0.0"

-postcss-functions@^3:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/postcss-functions/download/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
-  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
-  dependencies:
-    glob "^7.1.2"
-    object-assign "^4.1.1"
-    postcss "^6.0.9"
-    postcss-value-parser "^3.3.0"
-
 postcss-html@^0.36.0:
  version "0.36.0"
  resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -3984,14 +3938,6 @@ postcss-html@^0.36.0:
  dependencies:
    htmlparser2 "^3.10.0"

-postcss-js@^2:
-  version "2.0.3"
-  resolved "https://registry.npm.taobao.org/postcss-js/download/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
-  integrity sha1-qW8PI/89CM7H3FsRvxHF+Ad82rk=
-  dependencies:
-    camelcase-css "^2.0.1"
-    postcss "^7.0.18"
-
 postcss-js@^3.0.3:
  version "3.0.3"
  resolved "https://registry.npm.taobao.org/postcss-js/download/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
@@ -4070,14 +4016,6 @@ postcss-nested@5.0.5:
  dependencies:
    postcss-selector-parser "^6.0.4"

-postcss-nested@^4:
-  version "4.2.3"
-  resolved "https://registry.npm.taobao.org/postcss-nested/download/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
-  integrity sha1-xvJVsKcgVJd20iDQDEtwzSRBNvY=
-  dependencies:
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-
 postcss-resolve-nested-selector@^0.1.1:
  version "0.1.1"
  resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -4136,16 +4074,7 @@ postcss-value-parser@^4.1.0:
  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==

-postcss@^6.0.9:
-  version "6.0.23"
-  resolved "https://registry.nlark.com/postcss/download/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  integrity sha1-YcgswyisYOZ3ZF+XkFTrmLwOMyQ=
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
-
-postcss@^7, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
+postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
  version "7.0.36"
  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
@@ -4244,16 +4173,6 @@ punycode@^2.1.0:
  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

-purgecss@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npm.taobao.org/purgecss/download/purgecss-3.1.3.tgz?cache=0&sync_timestamp=1616279696360&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpurgecss%2Fdownload%2Fpurgecss-3.1.3.tgz#26987ec09d12eeadc318e22f6e5a9eb0be094f41"
-  integrity sha1-Jph+wJ0S7q3DGOIvblqesL4JT0E=
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 purgecss@^4.0.3:
  version "4.0.3"
  resolved "https://registry.npm.taobao.org/purgecss/download/purgecss-4.0.3.tgz?cache=0&sync_timestamp=1616279696360&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpurgecss%2Fdownload%2Fpurgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
@@ -4916,7 +4835,7 @@ sugarss@^2.0.0:
  dependencies:
    postcss "^7.0.2"

-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -5271,10 +5190,10 @@ vite-plugin-html@^2.0.7:
    fs-extra "^9.1.0"
    html-minifier-terser "^5.1.1"

-vite-plugin-mock@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.nlark.com/vite-plugin-mock/download/vite-plugin-mock-2.8.0.tgz?cache=0&sync_timestamp=1623830070857&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvite-plugin-mock%2Fdownload%2Fvite-plugin-mock-2.8.0.tgz#497ab0018a73b8fd0e9165d3800566d6a4f240cc"
-  integrity sha1-SXqwAYpzuP0OkWXTgAVm1qTyQMw=
+vite-plugin-mock@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.nlark.com/vite-plugin-mock/download/vite-plugin-mock-2.9.1.tgz?cache=0&sync_timestamp=1625545918347&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvite-plugin-mock%2Fdownload%2Fvite-plugin-mock-2.9.1.tgz#bc67868082c0a7bfa13a3deb97f6a1bf57be12ff"
+  integrity sha1-vGeGgILAp7+hOj3rl/ahv1e+Ev8=
  dependencies:
    "@rollup/plugin-node-resolve" "^13.0.0"
    "@types/mockjs" "^1.0.3"
@@ -5283,24 +5202,24 @@ vite-plugin-mock@^2.8.0:
    connect "^3.7.0"
    debug "^4.3.2"
    esbuild "0.11.3"
-    fast-glob "^3.2.5"
+    fast-glob "^3.2.6"
    path-to-regexp "^6.2.0"

-vite-plugin-style-import@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.10.1.tgz#8732d2c04c92b7e13a7afddcb8e4a34f289fc17c"
-  integrity sha512-3P7Jyf5+b1p26t6mOd6yn8ATNPTDGDRkE19aHicFpo3K7Of7ouJabiPfWE4QaicO6grtCfWGQ0SGMAPqxUSdRA==
+vite-plugin-style-import@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.nlark.com/vite-plugin-style-import/download/vite-plugin-style-import-1.0.1.tgz#bf61337dd11e4ebc0f355f271e06d374b1ca5c79"
+  integrity sha1-v2EzfdEeTrwPNV8nHgbTdLHKXHk=
  dependencies:
    "@rollup/pluginutils" "^4.1.0"
    change-case "^4.1.2"
    debug "^4.3.2"
-    es-module-lexer "^0.4.1"
+    es-module-lexer "^0.6.0"
    magic-string "^0.25.7"

-vite@2.4.0-beta.3:
-  version "2.4.0-beta.3"
-  resolved "https://registry.nlark.com/vite/download/vite-2.4.0-beta.3.tgz#81da5e6cbfb4cb710610e5757567cbe58b667c44"
-  integrity sha1-gdpebL+0y3EGEOV1dWfL5YtmfEQ=
+vite@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.nlark.com/vite/download/vite-2.4.2.tgz#07d00615775c808530bc9f65641062b349b67929"
+  integrity sha1-B9AGFXdcgIUwvJ9lZBBis0m2eSk=
  dependencies:
    esbuild "^0.12.8"
    postcss "^8.3.5"
@@ -5333,6 +5252,19 @@ vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.6.0:
    esquery "^1.4.0"
    lodash "^4.17.15"

+vue-eslint-parser@^7.8.0:
+  version "7.8.0"
+  resolved "https://registry.nlark.com/vue-eslint-parser/download/vue-eslint-parser-7.8.0.tgz#43850bf856c9a69d62c0e12769609c338423684b"
+  integrity sha1-Q4UL+FbJpp1iwOEnaWCcM4QjaEs=
+  dependencies:
+    debug "^4.1.1"
+    eslint-scope "^5.1.1"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.2.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^6.3.0"
+
 vue-router@^4.0.10:
  version "4.0.10"
  resolved "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz#ec8fda032949b2a31d3273170f8f376e86eb52ac"
Author	SHA1	Message	Date
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