1.0发布，Fixes Bug，以及新增 ProTable组件

2026-02-04 13:42:27 +08:00 · 2021-07-12 16:16:51 +08:00
parent d423f27e94
commit 1e9b7074e5
43 changed files with 1375 additions and 65 deletions
--- 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/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 1.0 (2021-07-12)
+### 🐛 Bug Fixes
+- 修复页面切换面包屑未及时更新
+
+- ### ✨ Features
+- 1.0骨架发布 
+- Naive UI 升级至2.15.4  
+- 菜单新增排序字段  
+- 新增 `ProTable` 组件，封装了常用的分页列配置等逻辑，可查看组件示例页面
+- 持续更新中...
+
+
 # 0.1.1-beta (2021-07-07)
 ### 🐛 Bug Fixes
 - 修正黑色主题，页面背景色和导航风格问题
--- a/README.md
+++ b/README.md
@@ -16,8 +16,8 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - [ ] 监控页
 - [x] 工作台

-## 预览
- [naive-ui-admin](https://jekip.github.io/naive-ui-admin-preview)
+## 在线预览
+- [naive-ui-admin](https://jekip.github.io)

 账号：admin，密码：123456

--- 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
@@ -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.4",
    "nprogress": "^1.0.0-1",
    "pinia": "^2.0.0-beta.3",
    "qs": "^6.10.1",
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@
 <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/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,296 @@
+<template>
+  <div class="table-toolbar">
+
+    <!--顶部左侧区域-->
+    <n-space align="center" class="table-toolbar-left">
+      <div class="table-toolbar-left-title" v-if="title">
+        {{ title }}
+        <n-tooltip trigger="hover" v-if="titleTooltip">
+          <template #trigger>
+            <n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
+              <QuestionCircleOutlined/>
+            </n-icon>
+          </template>
+          {{ titleTooltip }}
+        </n-tooltip>
+      </div>
+      <slot name="tableTitle"></slot>
+    </n-space>
+
+    <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;
+      color: rgba(0, 0, 0, .85);
+    }
+  }
+
+  &-right {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+
+    &-icon {
+      height: 18px;
+      margin-left: 12px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, .75);
+      cursor: pointer;
+
+      :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,247 @@
+<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">
+            <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 :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>
+                </div>
+              </template>
+            </Draggable>
+
+          </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, VerticalAlignTopOutlined } from '@vicons/antd'
+import Draggable from 'vuedraggable/src/vuedraggable'
+
+interface Options {
+  title: string;
+  key: string;
+  fixed?: boolean | 'left' | 'right';
+}
+
+export default defineComponent({
+  name: 'ColumnSetting',
+  components: {
+    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, Draggable,
+    VerticalAlignTopOutlined
+  },
+  setup(props, { emit }) {
+    const table = useTableContext();
+    const columnsList = 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
+    }
+
+    //切换
+    function onChange(checkList) {
+      if (state.selection) {
+        checkList.unshift('selection')
+      }
+      setColumns(checkList)
+    }
+
+    //设置
+    function setColumns(columns) {
+      table.setColumns(columns)
+    }
+
+    //获取
+    function getColumns() {
+      const newArr = []
+      table.getColumns().forEach(item => {
+        newArr.push({ ...item })
+      })
+      return newArr
+    }
+
+    //重置
+    function resetColumns() {
+      state.checkList = [...state.defaultCheckList]
+      state.checkAll = true;
+      setColumns(table.getCacheColumns(true));
+    }
+
+    //全选
+    function onCheckAll(e) {
+      let checkList = table.getCacheColumns(true)
+      if (e) {
+        setColumns(checkList);
+        state.checkList = checkList
+      } else {
+        setColumns([]);
+        state.checkList = []
+      }
+    }
+
+    //拖拽排序
+    function draggableEnd(e) {
+      const newColumns = toRaw(unref(columnsList))
+      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(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);
+    }
+
+    return {
+      ...toRefs(state),
+      columnsList,
+      onChange,
+      onCheckAll,
+      onSelection,
+      resetColumns,
+      fixedColumn,
+      draggableEnd,
+      getSelection
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.table-toolbar {
+  &-right {
+    &-icon {
+      height: 18px;
+      margin-left: 12px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, .75);
+      cursor: pointer;
+
+      :hover {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.table-toolbar-inner {
+  &-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+
+    &: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;
+      }
+    }
+  }
+}
+</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?.filter((item) => !item.flag) ?? [];
+    }
+  );
+
+  //设置
+  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() {
+    const columns = toRaw(unref(propsRef).columns);
+    return columns.map(item => {
+      return { 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,165 @@
+import { ref, ComputedRef, unref, computed, onMounted, onBeforeMount, 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';
+
+export function useDataSource(
+  propsRef: ComputedRef<BasicTableProps>,
+  {
+    getPaginationInfo,
+    setPagination,
+    setLoading,
+    tableData,
+    getSelection
+  },
+  emit: EmitType
+) {
+  const dataSourceRef = ref<Recordable[]>([]);
+
+  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 } = unref(propsRef);
+    return rowKey ? rowKey : () => {
+      return 'key'
+    };
+  });
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    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);
+  });
+
+  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: Recordable = {};
+      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]
+
+      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+      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)
+  });
+
+  // onBeforeMount(()=> {
+  //   fetch()
+  // })
+
+  function setTableData<T = Recordable>(values: T[]) {
+    dataSourceRef.value = values;
+  }
+
+  function getDataSource<T = Recordable>() {
+    return getDataSourceRef.value as T[];
+  }
+
+  async function reload(opt?: FetchParams) {
+    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,46 @@
+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: Recordable) => 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/lockscreen/index.ts
+++ b/src/components/lockscreen/index.ts
@@ -1,3 +0,0 @@
-import LockScreen from './lockscreen.vue'
-
-export { LockScreen }
--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -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/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -139,7 +139,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 +165,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 })
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -126,8 +126,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,
@@ -545,7 +545,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/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -8,6 +8,7 @@ import {
  NButton,
  NForm,
  NFormItem,
+  NCheckboxGroup,
  NCheckbox,
  NIcon,
  NLayout,
@@ -57,6 +58,7 @@ const naive = create({
    NButton,
    NForm,
    NFormItem,
+    NCheckboxGroup,
    NCheckbox,
    NIcon,
    NLayout,
--- 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 { ProfileOutlined } 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(ProfileOutlined),
+      sort: 1
+    },
+    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/router-guards.ts
+++ b/src/router/router-guards.ts
@@ -128,7 +128,7 @@ export function createRouterGuards(router: Router) {
    const asyncRouteStore = useAsyncRouteStoreWidthOut();
    // 在这里设置需要缓存的组件名称
    const keepAliveComponents = asyncRouteStore.keepAliveComponents
-    const currentComName:any = to.matched.find((item) => item.name == to.name)?.name
+    const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
    if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
      // 需要缓存的组件
      keepAliveComponents.push(currentComName)
--- 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,18 @@ body .n-card {
  transition: all .2s ease-in-out;
 }

+body .proCard {
+  border-radius: 4px;
+
+  .n-card__content {
+    padding: 16px;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+  }
+}
+
 .n-layout-page-header {
  margin: 0 -10px;
 }
--- 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,57 @@
+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',
+    render(row) {
+      return 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,7 +41,8 @@
      <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"
+            <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>
              <div class="flex">
                <span>
@@ -58,7 +59,8 @@
                开源君，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"
+            <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>
              <div class="flex">
                <span>
@@ -75,12 +77,13 @@
                学不动也要学，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"
+            <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>
              <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,7 +95,8 @@
                撸码也是一种艺术 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"
+            <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>
              <div class="flex">
                <span>
@@ -109,7 +113,8 @@
                铁粉君 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"
+            <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>
              <div class="flex">
                <span>
@@ -126,7 +131,8 @@
                技术牛 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"
+            <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>
              <div class="flex">
                <span>
@@ -220,7 +226,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,7 +236,8 @@
        </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>
@@ -327,9 +336,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 +361,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/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/yarn.lock
+++ b/yarn.lock
@@ -3597,10 +3597,10 @@ mute-stream@0.0.7:
  resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=

-naive-ui@^2.15.2:
-  version "2.15.2"
-  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.2.tgz#11b6504c726d33b9f95c34826de12e2739858fcd"
-  integrity sha1-EbZQTHJtM7n5XDSCbeEuJzmFj80=
+naive-ui@^2.15.4:
+  version "2.15.4"
+  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.4.tgz#56c53b03e277ac9e55396bfb85dc2b49293ca6c3"
+  integrity sha1-VsU7A+J3rJ5VOWv7hdwrSSk8psM=
  dependencies:
    "@css-render/plugin-bem" "^0.15.4"
    "@css-render/vue3-ssr" "^0.15.4"
				`@@ -0,0 +1 @@`
				`export { default as ProTable } from './src/ProTable.vue';`