wip: Upgrade ant-design-vue 3.0

.vscode/settings.json

 {
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
   "volar.tsPlugin": true,
   "volar.tsPluginStatus": false,
-  //===========================================
-  //============= Editor ======================
-  //===========================================
+  "npm.packageManager": "pnpm",
   "editor.tabSize": 2,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  //===========================================
-  //============= files =======================
-  //===========================================
   "files.eol": "\n",
   "search.exclude": {
     "**/node_modules": true,

package.json

@@ -30,118 +30,119 @@
     "test:br": "npx http-server dist --cors --brotli -c-1",
     "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
     "prepare": "husky install",
-    "gen:icon": "esno ./build/generate/icon/index.ts"
+    "gen:icon": "esno ./build/generate/icon/index.ts",
+    "preinstall": "npx only-allow pnpm -y"
   },
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons-vue": "^6.0.1",
-    "@iconify/iconify": "^2.0.4",
-    "@logicflow/core": "^0.7.5",
-    "@logicflow/extension": "^0.7.5",
-    "@vueuse/core": "^6.8.0",
-    "@vueuse/shared": "^6.8.0",
+    "@iconify/iconify": "^2.1.0",
+    "@logicflow/core": "^0.7.9",
+    "@logicflow/extension": "^0.7.9",
+    "@vueuse/core": "^7.0.3",
+    "@vueuse/shared": "^7.0.3",
     "@zxcvbn-ts/core": "^1.0.0",
-    "ant-design-vue": "2.2.8",
+    "ant-design-vue": "3.0.0-alpha.12",
     "axios": "^0.24.0",
-    "codemirror": "^5.63.3",
+    "codemirror": "^5.64.0",
     "cropperjs": "^1.5.12",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.10.7",
     "echarts": "^5.2.2",
     "intro.js": "^4.3.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
-    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
-    "pinia": "2.0.2",
+    "pinia": "2.0.4",
     "print-js": "^1.6.0",
-    "qrcode": "^1.4.4",
+    "qrcode": "^1.5.0",
     "qs": "^6.10.1",
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^1.9.1",
     "sortablejs": "^1.14.0",
-    "tinymce": "^5.10.1",
+    "tinymce": "^5.10.2",
     "vditor": "^3.8.7",
-    "vue": "^3.2.21",
+    "vue": "^3.2.22",
     "vue-i18n": "^9.1.9",
-    "vue-json-pretty": "^2.0.5",
+    "vue-json-pretty": "^2.0.6",
     "vue-router": "^4.0.12",
     "vue-types": "^4.1.1",
-    "xlsx": "^0.17.3"
+    "xlsx": "^0.17.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^14.1.0",
-    "@iconify/json": "^1.1.426",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@iconify/json": "^2.0.0",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.5",
     "@types/crypto-js": "^4.0.2",
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^8.1.3",
     "@types/intro.js": "^3.0.2",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.0.3",
     "@types/lodash-es": "^4.17.5",
     "@types/mockjs": "^1.0.4",
-    "@types/node": "^16.11.7",
+    "@types/node": "^16.11.10",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/showdown": "^1.9.4",
     "@types/sortablejs": "^1.10.7",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "@vitejs/plugin-legacy": "^1.6.2",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vitejs/plugin-vue-jsx": "^1.2.0",
-    "@vue/compiler-sfc": "3.2.21",
-    "@vue/test-utils": "^2.0.0-rc.16",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vitejs/plugin-legacy": "^1.6.3",
+    "@vitejs/plugin-vue": "^1.10.0",
+    "@vitejs/plugin-vue-jsx": "^1.3.0",
+    "@vue/compiler-sfc": "3.2.22",
+    "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.4.0",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^10.0.0",
-    "eslint": "^8.2.0",
+    "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-define-config": "^1.1.3",
-    "eslint-plugin-jest": "^25.2.4",
+    "eslint-define-config": "^1.1.4",
+    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "esno": "^0.12.0",
+    "eslint-plugin-vue": "^8.1.1",
+    "esno": "^0.12.1",
     "fs-extra": "^10.0.0",
     "husky": "^7.0.4",
     "inquirer": "^8.2.0",
     "jest": "^27.3.1",
     "less": "^4.1.2",
-    "lint-staged": "11.2.6",
+    "lint-staged": "12.1.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.0",
     "postcss-html": "^1.2.0",
     "postcss-less": "^5.0.0",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "rollup-plugin-visualizer": "^5.5.2",
-    "stylelint": "^14.0.1",
+    "stylelint": "^14.1.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^23.0.0",
+    "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.2",
     "vite": "^2.6.14",
     "vite-plugin-compression": "^0.3.5",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-imagemin": "^0.4.6",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.11.3",
+    "vite-plugin-pwa": "^0.11.7",
     "vite-plugin-style-import": "^1.3.0",
     "vite-plugin-svg-icons": "^1.0.5",
     "vite-plugin-theme": "^0.8.1",
     "vite-plugin-vue-setup-extend": "^0.1.0",
     "vite-plugin-windicss": "^1.5.1",
     "vue-eslint-parser": "^8.0.1",
-    "vue-tsc": "^0.29.3"
+    "vue-tsc": "^0.29.6"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",

src/components/CodeEditor/src/codemirror/codemirror.css

@@ -53,7 +53,7 @@
   color: var(--comment);
   text-align: right;
   white-space: nowrap;
-  opacity: 60%;
+  opacity: 0.6;
 }
 
 .CodeMirror-guttermarker {
@@ -90,7 +90,7 @@
   display: inline-block;
   font-size: 0.8em;
   content: '>';
-  opacity: 80%;
+  opacity: 0.8;
   transform: rotate(90deg);
   transition: transform 0.2s;
 }

src/components/Drawer/src/BasicDrawer.vue

@@ -94,7 +94,7 @@
             opt.width = '100%';
           }
           const detailCls = `${prefixCls}__detail`;
-          opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+          opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
 
           if (!getContainer) {
             // TODO type error?

src/components/Drawer/src/typing.ts

@@ -128,13 +128,12 @@ export interface DrawerProps extends DrawerFooterProps {
    * @type any (string | slot)
    */
   title?: VNodeChild | JSX.Element;
-
   /**
    * The class name of the container of the Drawer dialog.
    * @type string
    */
   wrapClassName?: string;
-
+  class?: string;
   /**
    * Style of wrapper element which **contains mask** compare to `drawerStyle`
    * @type object

src/components/Form/src/BasicForm.vue

@@ -122,7 +122,7 @@
             if (!Array.isArray(defaultValue)) {
               schema.defaultValue = dateUtil(defaultValue);
             } else {
-              const def: moment.Moment[] = [];
+              const def: any[] = [];
               defaultValue.forEach((item) => {
                 def.push(dateUtil(item));
               });

src/components/Form/src/hooks/useFormValues.ts

@@ -33,7 +33,8 @@ export function useFormValues({
       if (isObject(value)) {
         value = transformDateFunc?.(value);
       }
-      if (isArray(value) && value[0]?._isAMomentObject && value[1]?._isAMomentObject) {
+
+      if (isArray(value) && value[0]?.format && value[1]?.format) {
         value = value.map((item) => transformDateFunc?.(item));
       }
       // Remove spaces

src/components/Form/src/props.ts

@@ -53,7 +53,7 @@ export const basicProps = {
   transformDateFunc: {
     type: Function as PropType<Fn>,
     default: (date: any) => {
-      return date._isAMomentObject ? date?.format('YYYY-MM-DD HH:mm:ss') : date;
+      return date?.format?.('YYYY-MM-DD HH:mm:ss') ?? date;
     },
   },
   rulesMessageJoinLabel: propTypes.bool.def(true),

src/components/Tree/src/Tree.vue

 <script lang="tsx">
   import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './typing';
+  import type { CheckEvent } from './typing';
 
   import {
     defineComponent,
@@ -15,22 +16,17 @@
   } from 'vue';
   import { Tree, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
-  import TreeHeader from './TreeHeader.vue';
   import { ScrollContainer } from '/@/components/Container';
-
   import { omit, get, difference } from 'lodash-es';
   import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
   import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
   import { filter, treeToList } from '/@/utils/helper/treeHelper';
-
   import { useTree } from './useTree';
   import { useContextMenu } from '/@/hooks/web/useContextMenu';
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import { basicProps } from './props';
   import { CreateContextOptions } from '/@/components/ContextMenu';
-
-  import { CheckEvent } from './typing';
+  import TreeHeader from './TreeHeader.vue';
 
   interface State {
     expandedKeys: Keys;

src/components/Tree/src/TreeHeader.vue

@@ -168,9 +168,6 @@
           }
         },
       );
-      // function handleSearch(e: ChangeEvent): void {
-      //   debounceEmitChange(e.target.value);
-      // }
 
       return { t, toolbarList, handleMenuClick, searchValue, getInputSearchCls };
     },

src/components/Tree/src/props.ts

@@ -8,7 +8,7 @@ import type {
   TreeItem,
 } from './typing';
 import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+import type { TreeDataItem } from 'ant-design-vue/es/tree';
 import { propTypes } from '/@/utils/propTypes';
 
 export const basicProps = {

src/components/Tree/src/typing.ts

 import type { TreeDataItem, CheckEvent as CheckEventOrigin } from 'ant-design-vue/es/tree/Tree';
+
 import { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+
 export interface ActionItem {
   render: (record: Recordable) => any;
   show?: boolean | ((record: Recordable) => boolean);

src/components/Tree/src/useTree.ts

@@ -26,6 +26,7 @@ export function useTree(
     }
     return keys as Keys;
   }
+
   // get keys that can be checked and selected
   function getEnabledKeys(list?: TreeDataItem[]) {
     const keys: string[] = [];

src/components/Upload/src/BasicUpload.vue

 <template>
   <div>
-    <a-button-group>
+    <Space>
       <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
         {{ t('component.upload.upload') }}
       </a-button>
@@ -18,8 +18,7 @@
           </template>
         </a-button>
       </Tooltip>
-    </a-button-group>
-
+    </Space>
     <UploadModal
       v-bind="bindValue"
       :previewFileList="fileList"
@@ -38,19 +37,19 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, watch, unref, computed } from 'vue';
-  import UploadModal from './UploadModal.vue';
-  import UploadPreviewModal from './UploadPreviewModal.vue';
   import { Icon } from '/@/components/Icon';
-  import { Tooltip } from 'ant-design-vue';
+  import { Tooltip, Space } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import { uploadContainerProps } from './props';
   import { omit } from 'lodash-es';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { isArray } from '/@/utils/is';
+  import UploadModal from './UploadModal.vue';
+  import UploadPreviewModal from './UploadPreviewModal.vue';
 
   export default defineComponent({
     name: 'BasicUpload',
-    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
+    components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
     emits: ['change', 'delete', 'preview-delete', 'update:value'],
 

src/components/Upload/src/UploadModal.vue

@@ -9,7 +9,7 @@
     :closeFunc="handleCloseFunc"
     :maskClosable="false"
     :keyboard="false"
-    wrapClassName="upload-modal"
+    class="upload-modal"
     :okButtonProps="getOkButtonProps"
     :cancelButtonProps="{ disabled: isUploadingRef }"
   >

src/components/Upload/src/UploadPreviewModal.vue

@@ -2,7 +2,7 @@
   <BasicModal
     width="800px"
     :title="t('component.upload.preview')"
-    wrapClassName="upload-preview-modal"
+    class="upload-preview-modal"
     v-bind="$attrs"
     @register="register"
     :showOkBtn="false"

src/components/registerGlobComp.ts

 import type { App } from 'vue';
 import { Button } from './Button';
-import {
-  // Need
-  Button as AntButton,
-  Input,
-  Layout,
-} from 'ant-design-vue';
-
-const compList = [AntButton.Group];
+import { Input, Layout } from 'ant-design-vue';
 
 export function registerGlobComp(app: App) {
-  compList.forEach((comp) => {
-    app.component(comp.name || comp.displayName, comp);
-  });
-
   app.use(Input).use(Button).use(Layout);
 }

src/design/public.less

@@ -46,6 +46,6 @@
     width: 100%;
     height: 2px;
     background-color: @primary-color;
-    opacity: 75%;
+    opacity: 0.75;
   }
 }

src/design/transition/fade.less

@@ -5,7 +5,7 @@
 
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0%;
+  opacity: 0;
 }
 
 /* fade-slide */
@@ -15,12 +15,12 @@
 }
 
 .fade-slide-enter-from {
-  opacity: 0%;
+  opacity: 0;
   transform: translateX(-30px);
 }
 
 .fade-slide-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: translateX(30px);
 }
 
@@ -35,12 +35,12 @@
 }
 
 .fade-bottom-enter-from {
-  opacity: 0%;
+  opacity: 0;
   transform: translateY(-10%);
 }
 
 .fade-bottom-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: translateY(10%);
 }
 
@@ -51,12 +51,12 @@
 }
 
 .fade-scale-enter-from {
-  opacity: 0%;
+  opacity: 0;
   transform: scale(1.2);
 }
 
 .fade-scale-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: scale(0.8);
 }
 
@@ -71,11 +71,11 @@
 }
 
 .fade-top-enter-from {
-  opacity: 0%;
+  opacity: 0;
   transform: translateY(8%);
 }
 
 .fade-top-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: translateY(-8%);
 }

src/design/transition/scale.less

@@ -4,7 +4,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: scale(0);
   }
 }
@@ -15,7 +15,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: scale(0) rotate(-45deg);
   }
 }

src/design/transition/scroll.less

@@ -3,7 +3,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
   }
 
   &-enter-from {
@@ -20,7 +20,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
   }
 
   &-enter-from {
@@ -37,7 +37,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
   }
 
   &-enter-from {
@@ -54,7 +54,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
   }
 
   &-enter-from {

src/design/transition/slide.less

@@ -3,7 +3,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: translateY(-15px);
   }
 }
@@ -13,7 +13,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: translateY(15px);
   }
 }
@@ -23,7 +23,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: translateX(-15px);
   }
 }
@@ -33,7 +33,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0%;
+    opacity: 0;
     transform: translateX(15px);
   }
 }

src/design/transition/zoom.less

@@ -6,7 +6,7 @@
 
 .zoom-out-enter-from,
 .zoom-out-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: scale(0);
 }
 
@@ -17,11 +17,11 @@
 }
 
 .zoom-fade-enter-from {
-  opacity: 0%;
+  opacity: 0;
   transform: scale(0.92);
 }
 
 .zoom-fade-leave-to {
-  opacity: 0%;
+  opacity: 0;
   transform: scale(1.06);
 }

src/layouts/default/setting/SettingDrawer.tsx

@@ -401,7 +401,7 @@ export default defineComponent({
         {...attrs}
         title={t('layout.setting.drawerTitle')}
         width={330}
-        wrapClassName="setting-drawer"
+        class="setting-drawer"
       >
         {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
         {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}

src/layouts/default/tabs/index.less

@@ -28,7 +28,8 @@ html[data-theme='light'] {
   }
 
   .ant-tabs.ant-tabs-card {
-    .ant-tabs-card-bar {
+    .ant-tabs-nav {
+      padding-top: 2px;
       height: @multiple-height;
       margin: 0;
       background-color: @component-background;
@@ -49,18 +50,20 @@ html[data-theme='light'] {
         transition: none;
 
         &:hover {
-          .ant-tabs-close-x {
-            opacity: 100%;
+          .ant-tabs-tab-remove {
+            opacity: 1;
           }
         }
 
-        .ant-tabs-close-x {
+        .ant-tabs-tab-remove {
           width: 8px;
-          height: 12px;
+          height: 28px;
           font-size: 12px;
           color: inherit;
-          opacity: 0%;
+          opacity: 0;
           transition: none;
+          margin-left: 2px;
+          margin-right: -4px;
 
           &:hover {
             svg {
@@ -69,11 +72,11 @@ html[data-theme='light'] {
           }
         }
 
-        > div {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
+        // > div {
+        //   display: flex;
+        //   justify-content: center;
+        //   align-items: center;
+        // }
 
         svg {
           fill: @text-color-base;
@@ -89,13 +92,16 @@ html[data-theme='light'] {
       .ant-tabs-tab-active {
         position: relative;
         padding-left: 18px;
-        color: @white !important;
         background: @primary-color;
         border: 0;
         transition: none;
 
-        .ant-tabs-close-x {
-          opacity: 100%;
+        span {
+          color: @white !important;
+        }
+
+        .ant-tabs-tab-remove {
+          opacity: 1;
         }
 
         svg {
@@ -124,18 +130,13 @@ html[data-theme='light'] {
     }
   }
 
-  .ant-tabs-extra-content {
-    margin-top: 2px;
-    line-height: @multiple-height !important;
-  }
-
   .ant-dropdown-trigger {
     display: inline-flex;
   }
 
   &--hide-close {
-    .ant-tabs-close-x {
-      opacity: 0% !important;
+    .ant-tabs-tab-remove {
+      opacity: 0 !important;
     }
   }
 

src/layouts/default/tabs/index.vue

@@ -18,7 +18,7 @@
         </TabPane>
       </template>
 
-      <template #tabBarExtraContent v-if="getShowRedo || getShowQuick">
+      <template #rightExtra v-if="getShowRedo || getShowQuick">
         <TabRedo v-if="getShowRedo" />
         <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
         <FoldButton v-if="getShowFold" />
@@ -127,8 +127,6 @@
         tabStore.closeTabByKey(targetKey, router);
       }
       return {
-        prefixCls,
-        unClose,
         getWrapClass,
         handleEdit,
         handleChange,

src/locales/lang/en.ts

 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/en_US';
-// import momentLocale from 'moment/dist/locale/en-us';
 
 const modules = import.meta.globEager('./en/**/*.ts');
 export default {
@@ -8,6 +7,6 @@ export default {
     ...genMessage(modules, 'en'),
     antdLocale,
   },
-  momentLocale: null,
-  momentLocaleName: 'en',
+  dateLocale: null,
+  dateLocaleName: 'en',
 };

src/locales/lang/zh_CN.ts

 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/zh_CN';
-import momentLocale from 'moment/dist/locale/zh-cn';
 
 const modules = import.meta.globEager('./zh-CN/**/*.ts');
 export default {
@@ -8,6 +7,4 @@ export default {
     ...genMessage(modules, 'zh-CN'),
     antdLocale,
   },
-  momentLocale,
-  momentLocaleName: 'zh-cn',
 };

src/locales/useLocale.ts

@@ -3,8 +3,6 @@
  */
 import type { LocaleType } from '/#/config';
 
-import moment from 'moment';
-
 import { i18n } from './setupI18n';
 import { useLocaleStoreWithOut } from '/@/store/modules/locale';
 import { unref, computed } from 'vue';
@@ -12,8 +10,8 @@ import { loadLocalePool, setHtmlPageLang } from './helper';
 
 interface LangModule {
   message: Recordable;
-  momentLocale: Recordable;
-  momentLocaleName: string;
+  dateLocale: Recordable;
+  dateLocaleName: string;
 }
 
 function setI18nLanguage(locale: LocaleType) {
@@ -53,10 +51,9 @@ export function useLocale() {
     const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
     if (!langModule) return;
 
-    const { message, momentLocale, momentLocaleName } = langModule;
+    const { message } = langModule;
 
     globalI18n.setLocaleMessage(locale, message);
-    moment.updateLocale(momentLocaleName, momentLocale);
     loadLocalePool.push(locale);
 
     setI18nLanguage(locale);

src/utils/dateUtil.ts

 /**
  * Independent time operation tool to facilitate subsequent switch to dayjs
  */
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 const DATE_FORMAT = 'YYYY-MM-DD';
 
 export function formatToDateTime(
-  date: moment.MomentInput = undefined,
+  date: dayjs.Dayjs | undefined = undefined,
   format = DATE_TIME_FORMAT,
 ): string {
-  return moment(date).format(format);
+  return dayjs(date).format(format);
 }
 
-export function formatToDate(date: moment.MomentInput = undefined, format = DATE_FORMAT): string {
-  return moment(date).format(format);
+export function formatToDate(
+  date: dayjs.Dayjs | undefined = undefined,
+  format = DATE_FORMAT,
+): string {
+  return dayjs(date).format(format);
 }
 
-export const dateUtil = moment;
+export const dateUtil = dayjs;

src/utils/http/axios/helper.ts

@@ -27,7 +27,8 @@ export function formatRequestDate(params: Recordable) {
   }
 
   for (const key in params) {
-    if (params[key] && params[key]._isAMomentObject) {
+    const format = params[key]?.format ?? null;
+    if (format && typeof format === 'function') {
       params[key] = params[key].format(DATE_TIME_FORMAT);
     }
     if (isString(key)) {

src/views/demo/permission/back/index.vue

@@ -11,29 +11,30 @@
 
     <div class="mt-4">
       权限切换(请先切换权限模式为后台权限模式):
-      <a-button-group>
+      <Space>
         <a-button @click="switchToken(1)" :disabled="!isBackPremissionMode">
           获取用户id为1的菜单
         </a-button>
         <a-button @click="switchToken(2)" :disabled="!isBackPremissionMode">
           获取用户id为2的菜单
         </a-button>
-      </a-button-group>
+      </Space>
     </div>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
-  import CurrentPermissionMode from '../CurrentPermissionMode.vue';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useUserStore } from '/@/store/modules/user';
   import { PageWrapper } from '/@/components/Page';
   import { PermissionModeEnum } from '/@/enums/appEnum';
   import { useAppStore } from '/@/store/modules/app';
-  import { Alert } from 'ant-design-vue';
+  import { Alert, Space } from 'ant-design-vue';
+  import CurrentPermissionMode from '../CurrentPermissionMode.vue';
+
   export default defineComponent({
-    components: { Alert, CurrentPermissionMode, PageWrapper },
+    components: { Space, Alert, CurrentPermissionMode, PageWrapper },
     setup() {
       const { refreshMenu } = usePermission();
       const userStore = useUserStore();

src/views/demo/permission/front/Btn.vue

@@ -14,14 +14,14 @@
 
     <div class="mt-4">
       权限切换(请先切换权限模式为前端角色权限模式):
-      <a-button-group>
+      <Space>
         <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
           {{ RoleEnum.SUPER }}
         </a-button>
         <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
           {{ RoleEnum.TEST }}
         </a-button>
-      </a-button-group>
+      </Space>
     </div>
     <Divider>组件方式判断权限(有需要可以自行全局注册)</Divider>
     <Authority :value="RoleEnum.SUPER">
@@ -61,7 +61,7 @@
 </template>
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import { Alert, Divider } from 'ant-design-vue';
+  import { Alert, Divider, Space } from 'ant-design-vue';
   import CurrentPermissionMode from '../CurrentPermissionMode.vue';
   import { useUserStore } from '/@/store/modules/user';
   import { RoleEnum } from '/@/enums/roleEnum';
@@ -70,7 +70,7 @@
   import { PageWrapper } from '/@/components/Page';
 
   export default defineComponent({
-    components: { Alert, PageWrapper, CurrentPermissionMode, Divider, Authority },
+    components: { Alert, PageWrapper, Space, CurrentPermissionMode, Divider, Authority },
     setup() {
       const { changeRole, hasPermission } = usePermission();
       const userStore = useUserStore();

src/views/demo/permission/front/index.vue

@@ -14,28 +14,28 @@
 
     <div class="mt-4">
       权限切换(请先切换权限模式为前端角色权限模式):
-      <a-button-group>
+      <Space>
         <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
           {{ RoleEnum.SUPER }}
         </a-button>
         <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
           {{ RoleEnum.TEST }}
         </a-button>
-      </a-button-group>
+      </Space>
     </div>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
-  import CurrentPermissionMode from '../CurrentPermissionMode.vue';
+  import { Alert, Space } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { PageWrapper } from '/@/components/Page';
+  import CurrentPermissionMode from '../CurrentPermissionMode.vue';
 
   export default defineComponent({
-    components: { Alert, CurrentPermissionMode, PageWrapper },
+    components: { Space, Alert, CurrentPermissionMode, PageWrapper },
     setup() {
       const { changeRole } = usePermission();
       const userStore = useUserStore();

src/views/sys/lock/useNow.ts

 import { dateUtil } from '/@/utils/dateUtil';
 import { reactive, toRefs } from 'vue';
-import { useLocaleStore } from '/@/store/modules/locale';
 import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
 
 export function useNow(immediate = true) {
-  const localeStore = useLocaleStore();
-  const localData = dateUtil.localeData(localeStore.getLocale);
   let timer: IntervalHandle;
 
   const state = reactive({
@@ -28,13 +25,13 @@ export function useNow(immediate = true) {
 
     state.year = now.get('y');
     state.month = now.get('M') + 1;
-    state.week = localData.weekdays()[now.day()];
-    state.day = now.get('D');
+    state.week = '星期' + ['一', '二', '三', '四', '五', '六', '日'][now.day() - 1];
+    state.day = now.get('d');
     state.hour = h;
     state.minute = m;
     state.second = s;
 
-    state.meridiem = localData.meridiem(Number(h), Number(h), true);
+    state.meridiem = now.format('A');
   };
 
   function start() {

stylelint.config.js

 module.exports = {
   root: true,
   plugins: ['stylelint-order'],
-  customSyntax: 'postcss-less',
+  customSyntax: 'postcss-html',
   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
   rules: {
     'selector-class-pattern': null,

tests/server/package.json

@@ -24,13 +24,13 @@
     "@types/koa": "^2.13.4",
     "@types/koa-bodyparser": "^5.0.2",
     "@types/koa-router": "^7.4.4",
-    "@types/node": "^16.11.7",
+    "@types/node": "^16.11.10",
     "nodemon": "^2.0.15",
     "pm2": "^5.1.2",
     "rimraf": "^3.0.2",
     "ts-node": "^10.4.0",
-    "tsconfig-paths": "^3.11.0",
-    "tsup": "^5.6.0",
-    "typescript": "^4.4.4"
+    "tsconfig-paths": "^3.12.0",
+    "tsup": "^5.9.1",
+    "typescript": "^4.5.2"
   }
 }

tsconfig.json

@@ -4,6 +4,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
+    "noLib": false,
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
     "strictFunctionTypes": false,
@@ -17,10 +18,9 @@
     "noUnusedParameters": true,
     "experimentalDecorators": true,
     "lib": ["dom", "esnext"],
-    "types": ["vite/client", "jest"],
-    "typeRoots": ["./node_modules/@types/", "./types"],
     "noImplicitAny": false,
     "skipLibCheck": true,
+    "removeComments": true,
     "paths": {
       "/@/*": ["src/*"],
       "/#/*": ["types/*"]

types/module.d.ts

@@ -10,12 +10,6 @@ declare module 'ant-design-vue/es/locale/*' {
   export default locale as Locale & ReadonlyRecordable;
 }
 
-declare module 'moment/dist/locale/*' {
-  import { LocaleSpecification } from 'moment';
-  const locale: LocaleSpecification & ReadonlyRecordable;
-  export default locale;
-}
-
 declare module 'virtual:*' {
   const result: any;
   export default result;

vite.config.ts

 import type { UserConfig, ConfigEnv } from 'vite';
 import pkg from './package.json';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { loadEnv } from 'vite';
 import { resolve } from 'path';
 import { generateModifyVars } from './build/generate/generateModifyVars';
@@ -16,7 +16,7 @@ function pathResolve(dir: string) {
 const { dependencies, devDependencies, name, version } = pkg;
 const __APP_INFO__ = {
   pkg: { dependencies, devDependencies, name, version },
-  lastBuildTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 };
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
@@ -97,9 +97,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       include: [
         '@iconify/iconify',
         'ant-design-vue/es/locale/zh_CN',
-        'moment/dist/locale/zh-cn',
         'ant-design-vue/es/locale/en_US',
-        'moment/dist/locale/eu',
       ],
       exclude: ['vue-demi'],
     },

windi.config.ts

@@ -24,8 +24,8 @@ export default defineConfig({
 });
 
 /**
- * Used for animation when the element is displayed
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
+ * Used for animation when the element is displayed.
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
  */
 function createEnterPlugin(maxOutput = 6) {
   const createCss = (index: number, d = 'x') => {