1.9.0

2025-12-19 17:32:23 +08:00 · 2023-08-10 13:54:53 +08:00
parent 9b2effbc55
commit 347cd91735
35 changed files with 3485 additions and 10010 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # CHANGELOG

+## 1.9.0
+
+- 新增 `BasicForm` 组件，支持 `setLoading`, `setSchema` 方法
+- 新增 `countField` 总数字段名配置
+- 优化 `yarn` 切换至 `pnpm`
+- 优化 `BasicForm` 组件，验证返回值
+- 优化 `BasicTable` 组件
+- 修复 `TableAction组件，左右间隔不生效` 关闭[253](https://github.com/jekip/naive-ui-admin/issues/253)
+- 修复 `BasicTable组件没有数据会一直请求接口` 关闭[#251](https://github.com/jekip/naive-ui-admin/issues/251)
+- 修复 `useModal+useForm组件的bug` 关闭[#250](https://github.com/jekip/naive-ui-admin/issues/250)
+- 修复 `手机端侧边导航风格不一致bug` 关闭[#247](https://github.com/jekip/naive-ui-admin/issues/247
+- 移除 `yarn.lock` 文件
+- 依赖升级
 ## 1.8.2

 - ### ✨ Features
--- a/mock/table/list.ts
+++ b/mock/table/list.ts
@@ -27,12 +27,15 @@ export default [
    timeout: 1000,
    method: 'get',
    response: ({ query }) => {
-      const { page = 1, pageSize = 10 } = query;
+      const { page = 1, pageSize = 10, name } = query;
      const list = tableList(Number(pageSize));
+      //并非真实，只是为了模拟搜索结果
+      const count = name ? 30 : 60;
      return resultSuccess({
        page: Number(page),
        pageSize: Number(pageSize),
-        pageCount: 60,
+        pageCount: count,
+        itemCount: count * Number(pageSize),
        list,
      });
    },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "naive-ui-admin",
-  "version": "1.8.2",
+  "version": "1.9.0",
  "author": {
    "name": "Ahjung",
    "email": "735878602@qq.com",
@@ -8,11 +8,11 @@
  },
  "private": true,
  "scripts": {
-    "bootstrap": "yarn install",
-    "serve": "npm run dev",
+    "bootstrap": "pnpm install",
+    "serve": "pnpm run dev",
    "dev": "vite",
    "build": "vite build && esno ./build/script/postBuild.ts",
-    "build:no-cache": "yarn clean:cache && npm run build",
+    "build:no-cache": "pnpm clean:cache && npm run build",
    "report": "cross-env REPORT=true npm run build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
@@ -30,73 +30,73 @@
  "dependencies": {
    "@vicons/antd": "^0.12.0",
    "@vicons/ionicons5": "^0.12.0",
-    "@vueup/vue-quill": "^1.0.0",
-    "@vueuse/core": "^9.5.0",
-    "axios": "^1.1.3",
+    "@vueup/vue-quill": "^1.2.0",
+    "@vueuse/core": "^9.13.0",
+    "axios": "^1.4.0",
    "blueimp-md5": "^2.19.0",
-    "date-fns": "^2.29.3",
-    "echarts": "^5.4.0",
+    "date-fns": "^2.30.0",
+    "echarts": "^5.4.3",
    "element-resize-detector": "^1.2.4",
-    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
    "mockjs": "^1.1.0",
-    "naive-ui": "^2.34.2",
-    "pinia": "^2.0.23",
-    "qs": "^6.11.0",
+    "naive-ui": "^2.34.4",
+    "pinia": "^2.1.6",
+    "qs": "^6.11.2",
    "vfonts": "^0.0.3",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
    "vue-types": "^4.2.1"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@types/lodash": "^4.14.188",
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@commitlint/cli": "^17.7.0",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^18.17.4",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.13",
-    "commitizen": "^4.2.5",
-    "core-js": "^3.26.0",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "autoprefixer": "^10.4.14",
+    "commitizen": "^4.3.0",
+    "core-js": "^3.32.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.10.0",
    "eslint-define-config": "1.12.0",
-    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jest": "^27.2.3",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.17.0",
    "esno": "^0.16.3",
    "gh-pages": "^4.0.0",
-    "husky": "^8.0.2",
-    "jest": "^29.3.1",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.0",
-    "lint-staged": "^13.0.3",
-    "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
+    "husky": "^8.0.3",
+    "jest": "^29.6.2",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "lint-staged": "^13.2.3",
+    "postcss": "^8.4.27",
+    "prettier": "^2.8.8",
    "pretty-quick": "^3.1.3",
    "rimraf": "^3.0.2",
-    "stylelint": "^14.14.1",
-    "stylelint-config-prettier": "^9.0.4",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-standard": "^29.0.0",
    "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^4.3.0",
-    "tailwindcss": "^3.2.3",
-    "typescript": "^4.8.4",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
+    "stylelint-scss": "^4.7.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^4.9.5",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^3.2.7",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-mock": "^2.9.8",
    "vite-plugin-style-import": "^2.0.0",
    "vue-demi": "^0.13.11",
-    "vue-draggable-next": "^2.1.1",
-    "vue-eslint-parser": "^9.1.0",
+    "vue-draggable-next": "^2.2.1",
+    "vue-eslint-parser": "^9.3.1",
    "vuedraggable": "^4.1.0"
  },
  "lint-staged": {
@@ -127,6 +127,6 @@
  },
  "homepage": "https://github.com/jekip/naive-ui-admin",
  "engines": {
-    "node": "^12 || >=14"
+    "node": ">=16"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/CountTo/CountTo.vue
+++ b/src/components/CountTo/CountTo.vue
@@ -46,7 +46,7 @@
      const source = ref(props.startVal);
      const disabled = ref(false);
      let outputValue = useTransition(source);
-  
+
      const value = computed(() => formatNumber(unref(outputValue)));

      watchEffect(() => {
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -8,7 +8,7 @@
            {{ schema.label }}
            <n-tooltip trigger="hover" :style="schema.labelMessageStyle">
              <template #trigger>
-                <n-icon size="18" class="cursor-pointer text-gray-400">
+                <n-icon size="18" class="text-gray-400 cursor-pointer">
                  <QuestionCircleOutlined />
                </n-icon>
              </template>
--- a/src/components/Form/src/hooks/useForm.ts
+++ b/src/components/Form/src/hooks/useForm.ts
@@ -80,6 +80,15 @@ export function useForm(props?: Props): UseFormReturnType {
      const form = await getForm();
      return form.validate(nameList);
    },
+
+    setLoading: (value: boolean) => {
+      loadedRef.value = value;
+    },
+
+    setSchema: async (values) => {
+      const form = await getForm();
+      form.setSchema(values);
+    },
  };

  return [register, methods];
--- a/src/components/Form/src/hooks/useFormEvents.ts
+++ b/src/components/Form/src/hooks/useFormEvents.ts
@@ -32,24 +32,28 @@ export function useFormEvents({
  }

  // 提交
-  async function handleSubmit(e?: Event): Promise<void> {
+  async function handleSubmit(e?: Event): Promise<object | boolean> {
    e && e.preventDefault();
    loadingSub.value = true;
    const { submitFunc } = unref(getProps);
    if (submitFunc && isFunction(submitFunc)) {
      await submitFunc();
-      return;
+      loadingSub.value = false;
+      return false;
    }
    const formEl = unref(formElRef);
-    if (!formEl) return;
+    if (!formEl) return false;
    try {
      await validate();
+      const values = getFieldsValue();
      loadingSub.value = false;
-      emit('submit', formModel);
-      return;
-    } catch (error) {
+      emit('submit', values);
+      return values;
+    } catch (error: any) {
+      emit('submit', false);
      loadingSub.value = false;
-      return;
+      console.error(error);
+      return false;
    }
  }

@@ -96,6 +100,10 @@ export function useFormEvents({
    });
  }

+  function setLoading(value: boolean): void {
+    loadingSub.value = value;
+  }
+
  return {
    handleSubmit,
    validate,
@@ -103,5 +111,6 @@ export function useFormEvents({
    getFieldsValue,
    clearValidate,
    setFieldsValue,
+    setLoading,
  };
 }
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -47,11 +47,13 @@ export interface FormProps {
 export interface FormActionType {
  submit: () => Promise<any>;
  setProps: (formProps: Partial<FormProps>) => Promise<void>;
-  setFieldsValue: (values: Recordable) => Promise<void>;
+  setSchema: (schemaProps: Partial<FormSchema[]>) => Promise<void>;
+  setFieldsValue: (values: Recordable) => void;
  clearValidate: (name?: string | string[]) => Promise<void>;
  getFieldsValue: () => Recordable;
  resetFields: () => Promise<void>;
  validate: (nameList?: any[]) => Promise<any>;
+  setLoading: (status: boolean) => void;
 }

 export type RegisterFn = (formInstance: FormActionType) => void;
--- a/src/components/Modal/src/basicModal.vue
+++ b/src/components/Modal/src/basicModal.vue
@@ -21,16 +21,7 @@
 </template>

 <script lang="ts" setup>
-  import {
-    getCurrentInstance,
-    ref,
-    nextTick,
-    unref,
-    computed,
-    useAttrs,
-    defineEmits,
-    defineProps,
-  } from 'vue';
+  import { getCurrentInstance, ref, nextTick, unref, computed, useAttrs } from 'vue';
  import { basicProps } from './props';
  import startDrag from '@/utils/Drag';
  import { deepMerge } from '@/utils';
@@ -93,7 +84,6 @@

  function handleSubmit() {
    subLoading.value = true;
-    console.log(subLoading.value);
    emit('on-ok');
  }

--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -2,7 +2,7 @@
  <div class="tableAction">
    <div class="flex items-center justify-center">
      <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-        <n-button v-bind="action" class="mx-2">
+        <n-button v-bind="action" class="mx-1">
          {{ action.label }}
          <template #icon v-if="action.hasOwnProperty('icon')">
            <n-icon :component="action.icon" />
@@ -16,7 +16,7 @@
        @select="select"
      >
        <slot name="more"></slot>
-        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
+        <n-button v-bind="getMoreProps" class="mx-1" v-if="!$slots.more" icon-placement="right">
          <div class="flex items-center">
            <span>更多</span>
            <n-icon size="14" class="ml-1">
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -17,7 +17,7 @@
          :class="getWrapperClass"
          ref="elRef"
          @options-change="handleOptionsChange"
-          @pressEnter="handleEnter"
+          @press-enter="handleEnter"
        />
      </div>
      <div class="editable-cell-action" v-if="!getRowEditable">
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -31,8 +31,8 @@ export function useDataSource(
    return rowKey
      ? rowKey
      : () => {
-        return 'key';
-      };
+          return 'key';
+        };
  });

  const getDataSourceRef = computed(() => {
@@ -53,7 +53,7 @@ export function useDataSource(
      const sizeField = APISETTING.sizeField;
      const totalField = APISETTING.totalField;
      const listField = APISETTING.listField;
-
+      const itemCount = APISETTING.countField;
      let pageParams = {};
      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;

@@ -66,23 +66,27 @@ export function useDataSource(

      let params = {
        ...pageParams,
+        ...opt,
      };
      if (beforeRequest && isFunction(beforeRequest)) {
        // The params parameter can be modified by outsiders
        params = (await beforeRequest(params)) || params;
      }
      const res = await request(params);
-
-      const resultTotal = res[totalField] || 0;
+      const resultTotal = res[totalField];
      const currentPage = res[pageField];
+      const total = res[itemCount];
+      const results = res[listField] ? res[listField] : [];

      // 如果数据异常，需获取正确的页码再次执行
      if (resultTotal) {
-        if (page > resultTotal) {
+        const currentTotalPage = Math.ceil(total / pageSize);
+        if (page > currentTotalPage) {
          setPagination({
-            [pageField]: resultTotal,
+            page: currentTotalPage,
+            itemCount: total,
          });
-          fetch(opt);
+          return await fetch(opt);
        }
      }
      let resultInfo = res[listField] ? res[listField] : [];
@@ -92,12 +96,13 @@ export function useDataSource(
      }
      dataSourceRef.value = resultInfo;
      setPagination({
-        [pageField]: currentPage,
-        [totalField]: resultTotal,
+        page: currentPage,
+        pageCount: resultTotal,
+        itemCount: total,
      });
      if (opt && opt[pageField]) {
        setPagination({
-          [pageField]: opt[pageField] || 1,
+          page: opt[pageField] || 1,
        });
      }
      emit('fetch-success', {
@@ -108,9 +113,9 @@ export function useDataSource(
      console.error(error);
      emit('fetch-error', error);
      dataSourceRef.value = [];
-      // setPagination({
-      //   pageCount: 0,
-      // });
+      setPagination({
+        pageCount: 0,
+      });
    } finally {
      setLoading(false);
    }
--- a/src/components/Table/src/hooks/usePagination.ts
+++ b/src/components/Table/src/hooks/usePagination.ts
@@ -1,28 +1,40 @@
 import type { PaginationProps } from '../types/pagination';
 import type { BasicTableProps } from '../types/table';
-import { computed, unref, ref, ComputedRef } from 'vue';
+import { computed, unref, ref, ComputedRef, watch } from 'vue';

 import { isBoolean } from '@/utils/is';
-import { APISETTING, DEFAULTPAGESIZE, PAGESIZES } from '../const';
+import { DEFAULTPAGESIZE, PAGESIZES } from '../const';

 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
  const configRef = ref<PaginationProps>({});
  const show = ref(true);

+  watch(
+    () => unref(refProps).pagination,
+    (pagination) => {
+      if (!isBoolean(pagination) && pagination) {
+        configRef.value = {
+          ...unref(configRef),
+          ...(pagination ?? {}),
+        };
+      }
+    }
+  );
+
  const getPaginationInfo = computed((): PaginationProps | boolean => {
    const { pagination } = unref(refProps);
    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
      return false;
    }
-    const { totalField } = APISETTING;
    return {
-      pageSize: DEFAULTPAGESIZE,
-      pageSizes: PAGESIZES,
+      page: 1, //当前页
+      pageSize: DEFAULTPAGESIZE, //分页大小
+      pageSizes: PAGESIZES, // 每页条数
      showSizePicker: true,
      showQuickJumper: true,
+      prefix: (pagingInfo) => `共 ${pagingInfo.itemCount} 条`, // 不需要可以通过 pagination 重置或者删除
      ...(isBoolean(pagination) ? {} : pagination),
      ...unref(configRef),
-      pageCount: unref(configRef)[totalField],
    };
  });

--- a/src/components/Table/src/types/componentType.ts
+++ b/src/components/Table/src/types/componentType.ts
@@ -5,4 +5,5 @@ export type ComponentType =
  | 'NCheckbox'
  | 'NSwitch'
  | 'NDatePicker'
-  | 'NTimePicker';
+  | 'NTimePicker'
+  | 'NCascader';
--- a/src/components/Table/src/types/pagination.ts
+++ b/src/components/Table/src/types/pagination.ts
@@ -1,8 +1,10 @@
 export interface PaginationProps {
-  page?: number;
-  pageCount?: number;
-  pageSize?: number;
-  pageSizes?: number[];
-  showSizePicker?: boolean;
-  showQuickJumper?: boolean;
+  page?: number; //受控模式下的当前页
+  itemCount?: number; //总条数
+  pageCount?: number; //总页数
+  pageSize?: number; //受控模式下的分页大小
+  pageSizes?: number[]; //每页条数， 可自定义
+  showSizePicker?: boolean; //是否显示每页条数的选择器
+  showQuickJumper?: boolean; //是否显示快速跳转
+  prefix?: any; //分页前缀
 }
--- a/src/hooks/useDomWidth.ts
+++ b/src/hooks/useDomWidth.ts
@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';

 /**
 * description: 获取页面宽度
--- a/src/layout/components/Header/ProjectSetting.vue
+++ b/src/layout/components/Header/ProjectSetting.vue
@@ -259,8 +259,7 @@
        title: props.title,
        isDrawer: false,
        placement: 'right',
-        alertText:
-          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
+        alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置',
        appThemeList: designStore.appThemeList,
      });

--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -35,7 +35,7 @@
              <div
                :id="`tag${element.fullPath.split('/').join('\/')}`"
                class="tabs-card-scroll-item"
-                :class="{ 'active-item': activeKey === element.path }"
+                :class="{ 'active-item': activeKey === element.fullPath }"
                @click.stop="goPage(element)"
                @contextmenu="handleContextMenu($event, element)"
              >
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -26,8 +26,17 @@
      :placement="'left'"
      class="layout-side-drawer"
    >
-      <Logo :collapsed="collapsed" />
-      <AsideMenu @clickMenuItem="collapsed = false" />
+      <n-layout-sider
+        :position="fixedMenu"
+        :collapsed="false"
+        :width="menuWidth"
+        :native-scrollbar="false"
+        :inverted="inverted"
+        class="layout-sider"
+      >
+        <Logo :collapsed="collapsed" />
+        <AsideMenu v-model:location="getMenuLocation" />
+      </n-layout-sider>
    </n-drawer>

    <n-layout :inverted="inverted">
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -66,6 +66,7 @@ import {
  NTimePicker,
  NBackTop,
  NSkeleton,
+  NCascader,
 } from 'naive-ui';

 // https://www.naiveui.com/en-US/os-theme/docs/import-on-demand
@@ -136,6 +137,7 @@ const naive = create({
    NTimePicker,
    NBackTop,
    NSkeleton,
+    NCascader,
  ],
 });

--- a/src/settings/componentSetting.ts
+++ b/src/settings/componentSetting.ts
@@ -9,6 +9,8 @@ export default {
      listField: 'list',
      // 接口返回总页数字段名
      totalField: 'pageCount',
+      //总数字段名
+      countField: 'itemCount',
    },
    //默认分页数量
    defaultPageSize: 10,
--- a/src/utils/lib/echarts.ts
+++ b/src/utils/lib/echarts.ts
@@ -23,7 +23,7 @@ import {
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
-  GraphicComponent
+  GraphicComponent,
 } from 'echarts/components';

 import { SVGRenderer } from 'echarts/renderers';
@@ -49,7 +49,7 @@ echarts.use([
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
-  GraphicComponent
+  GraphicComponent,
 ]);

 export default echarts;
--- a/src/views/comp/form/basic.vue
+++ b/src/views/comp/form/basic.vue
@@ -153,6 +153,9 @@
  const message = useMessage();

  function handleSubmit(values: Recordable) {
+    if (!values) {
+      return message.error('请填写完整信息');
+    }
    console.log(values);
    message.success(JSON.stringify(values));
  }
--- a/src/views/comp/form/useForm.vue
+++ b/src/views/comp/form/useForm.vue
@@ -176,6 +176,9 @@
  });

  function handleSubmit(values: Recordable) {
+    if (!values) {
+      return message.error('请填写完整信息');
+    }
    console.log(values);
    message.success(JSON.stringify(values));
  }
--- a/src/views/comp/modal/index.vue
+++ b/src/views/comp/modal/index.vue
@@ -8,7 +8,7 @@
        方式，ref方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()
      </n-card>
    </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
      <n-alert title="Modal嵌套Form" type="info">
        使用 useModal 进行弹窗展示和操作，并演示了在Modal内和Form组件，组合使用方法
      </n-alert>
@@ -250,6 +250,7 @@
        const formRes = await submit();
        if (formRes) {
          closeModal();
+          console.log('formRes', formRes);
          message.success('提交成功');
        } else {
          message.error('验证失败，请填写完整信息');
--- a/src/views/comp/upload/index.vue
+++ b/src/views/comp/upload/index.vue
@@ -29,7 +29,7 @@
                name="files"
                :width="100"
                :height="100"
-                @uploadChange="uploadChange"
+                @upload-change="uploadChange"
                v-model:value="formValue.images"
                helpText="单个文件不超过2MB，最多只能上传10个文件"
              />
--- a/src/views/dashboard/console/console.vue
+++ b/src/views/dashboard/console/console.vue
@@ -12,11 +12,11 @@
          <template #header-extra>
            <n-tag type="success">日</n-tag>
          </template>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
          </div>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
@@ -61,7 +61,7 @@
          <template #header-extra>
            <n-tag type="info">周</n-tag>
          </template>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
@@ -71,8 +71,8 @@
              class="text-3xl"
            />
          </div>
-          <div class="py-2 px-2 flex justify-between">
-            <div class="text-sn flex-1">
+          <div class="flex justify-between px-2 py-2">
+            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                :percentage="saleroom.degree"
@@ -104,11 +104,11 @@
          <template #header-extra>
            <n-tag type="warning">周</n-tag>
          </template>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
          </div>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
@@ -153,11 +153,11 @@
          <template #header-extra>
            <n-tag type="error">月</n-tag>
          </template>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
          </div>
-          <div class="py-1 px-1 flex justify-between">
+          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
@@ -245,7 +245,7 @@
  const visits = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
-  const volume = ref({});
+  const volume = ref(<any>{});

  // 图标列表
  const iconList = [
--- a/src/views/dashboard/workplace/workplace.vue
+++ b/src/views/dashboard/workplace/workplace.vue
@@ -16,15 +16,15 @@
          </n-gi>
          <n-gi>
            <div class="flex justify-end w-full">
-              <div class="flex flex-1 flex-col justify-center text-right">
+              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">项目数</span>
                <span class="text-2xl">16</span>
              </div>
-              <div class="flex flex-1 flex-col justify-center text-right">
+              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">待办</span>
                <span class="text-2xl">3/15</span>
              </div>
-              <div class="flex flex-1 flex-col justify-center text-right">
+              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">消息</span>
                <span class="text-2xl">35</span>
              </div>
@@ -54,12 +54,12 @@
                    <GithubOutlined />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">Github</span>
+                <span class="ml-4 text-lg">Github</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400">
+              <div class="flex h-10 mt-2 text-gray-400">
                是一个面向开源及私有软件项目的托管平台。
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 开源君，2021-07-04 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 开源君，2021-07-04 </div>
            </n-card>
            <n-card
              size="small"
@@ -72,10 +72,10 @@
                    <LogoVue />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">Vue</span>
+                <span class="ml-4 text-lg">Vue</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 渐进式 JavaScript 框架 </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 学不动也要学，2021-07-04 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 渐进式 JavaScript 框架 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 学不动也要学，2021-07-04 </div>
            </n-card>
            <n-card
              size="small"
@@ -88,10 +88,10 @@
                    <Html5Outlined />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">Html5</span>
+                <span class="ml-4 text-lg">Html5</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> HTML5是互联网的下一代标准。 </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> HTML5是互联网的下一代标准。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
            </n-card>
            <n-card
              size="small"
@@ -104,10 +104,10 @@
                    <LogoAngular />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">Angular</span>
+                <span class="ml-4 text-lg">Angular</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。 </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 铁粉君 2021-07-04。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 铁粉君 2021-07-04。 </div>
            </n-card>
            <n-card
              size="small"
@@ -120,10 +120,10 @@
                    <LogoReact />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">React</span>
+                <span class="ml-4 text-lg">React</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 用于构建用户界面的 JavaScript 库。 </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 技术牛 2021-07-04。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 用于构建用户界面的 JavaScript 库。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 技术牛 2021-07-04。 </div>
            </n-card>
            <n-card
              size="small"
@@ -136,10 +136,10 @@
                    <LogoJavascript />
                  </n-icon>
                </span>
-                <span class="text-lg ml-4">Js</span>
+                <span class="ml-4 text-lg">Js</span>
              </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 路是走出来的，而不是空想出来的。 </div>
-              <div class="flex mt-2 h-10 text-gray-400"> 架构组 2021-07-04 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 路是走出来的，而不是空想出来的。 </div>
+              <div class="flex h-10 mt-2 text-gray-400"> 架构组 2021-07-04 </div>
            </n-card>
          </div>
        </n-card>
@@ -235,7 +235,7 @@
                    <DashboardOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">主控台</span>
+                <span class="text-center text-lx">主控台</span>
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
@@ -245,7 +245,7 @@
                    <ProfileOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">列表</span>
+                <span class="text-center text-lx">列表</span>
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
@@ -255,7 +255,7 @@
                    <FileProtectOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">表单</span>
+                <span class="text-center text-lx">表单</span>
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
@@ -265,7 +265,7 @@
                    <ApartmentOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">权限管理</span>
+                <span class="text-center text-lx">权限管理</span>
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
@@ -275,7 +275,7 @@
                    <SettingOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">系统管理</span>
+                <span class="text-center text-lx">系统管理</span>
              </div>
            </n-card>
            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
@@ -285,7 +285,7 @@
                    <DashboardOutlined />
                  </n-icon>
                </span>
-                <span class="text-lx text-center">主控台</span>
+                <span class="text-center text-lx">主控台</span>
              </div>
            </n-card>
          </div>
@@ -298,6 +298,10 @@
  </div>
 </template>

+<script lang="ts">
+  export default { name: 'DashboardWorkplace' };
+</script>
+
 <script lang="ts" setup>
  import schoolboy from '@/assets/images/schoolboy.png';
  import {
--- a/src/views/form/basicForm/index.vue
+++ b/src/views/form/basicForm/index.vue
@@ -63,7 +63,7 @@
                name="files"
                :width="100"
                :height="100"
-                @uploadChange="uploadChange"
+                @upload-change="uploadChange"
                v-model:value="uploadList"
                helpText="单个文件不超过20MB，最多只能上传10个文件"
              />
--- a/src/views/form/stepForm/stepForm.vue
+++ b/src/views/form/stepForm/stepForm.vue
@@ -12,9 +12,9 @@
          <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" />
+        <step1 v-if="currentTab === 1" @next-step="nextStep" />
+        <step2 v-if="currentTab === 2" @next-step="nextStep" @prevStep="prevStep" />
+        <step3 v-if="currentTab === 3" @prev-step="prevStep" @finish="finish" />
      </n-space>
    </n-card>
  </div>
--- a/src/views/list/basicList/index.vue
+++ b/src/views/list/basicList/index.vue
@@ -63,7 +63,6 @@

 <script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
-  // import { useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
@@ -217,7 +216,6 @@

  const router = useRouter();
  const formRef: any = ref(null);
-  // const message = useMessage();
  const actionRef = ref();

  const showModal = ref(false);
@@ -228,11 +226,6 @@
    date: null,
  });

-  const params = ref({
-    pageSize: 5,
-    name: 'xiaoMa',
-  });
-
  const actionColumn = reactive({
    width: 220,
    title: '操作',
@@ -285,7 +278,7 @@
    },
  });

-  const [register, {}] = useForm({
+  const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
@@ -296,7 +289,7 @@
  }

  const loadDataTable = async (res) => {
-    return await getTableList({ ...formParams, ...params.value, ...res });
+    return await getTableList({ ...getFieldsValue(), ...res });
  };

  function onCheckedRow(rowKeys) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,23 +1,7 @@
 module.exports = {
  content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
+  important: true,
  theme: {
-    extend: {
-      zIndex: {
-        '-1': '-1',
-      },
-      colors: {
-        primary: {
-          DEFAULT: '#0960bd',
-          // dark: primaryColorDark,
-        },
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px',
-      },
-    },
+    extend: {},
  },
 };
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,7 +22,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);
-  const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_GLOB_PROD_MOCK, VITE_PROXY } =
+  const { VITE_PUBLIC_PATH, VITE_PORT, VITE_GLOB_PROD_MOCK, VITE_PROXY } =
    viteEnv;
  const prodMock = VITE_GLOB_PROD_MOCK;
  const isBuild = command === 'build';
@@ -46,26 +46,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
-    // css: {
-    //   preprocessorOptions: {
-    //     less: {
-    //       modifyVars: {},
-    //       javascriptEnabled: true,
-    //       additionalData: `@import "src/styles/var.less";`,
-    //     },
-    //   },
-    // },
    server: {
      host: true,
      port: VITE_PORT,
      proxy: createProxy(VITE_PROXY),
-      // proxy: {
-      //     '/api': {
-      //         target: '',
-      //         changeOrigin: true,
-      //         rewrite: (path) => path.replace(/^\/api/, '/api/v1')
-      //     }
-      // }
    },
    optimizeDeps: {
      include: [],
@@ -75,12 +59,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
      target: 'es2015',
      cssTarget: 'chrome80',
      outDir: OUTPUT_DIR,
-      // terserOptions: {
-      //   compress: {
-      //     keep_infinity: true,
-      //     drop_console: VITE_DROP_CONSOLE,
-      //   },
-      // },
      reportCompressedSize: false,
      chunkSizeWarningLimit: 2000,
    },
--- a/yarn.lock
+++ b/yarn.lock