chore: Extract lint config

.eslintrc.js

 module.exports = {
   root: true,
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    jsxPragma: 'React',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  extends: [
-    'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-  ],
-  rules: {
-    'vue/script-setup-uses-vars': 'error',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    'vue/custom-event-name-casing': 'off',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      },
-    ],
-    'no-unused-vars': [
-      'error',
-      {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      },
-    ],
-    'space-before-function-paren': 'off',
-
-    'vue/attributes-order': 'off',
-    'vue/one-component-per-file': 'off',
-    'vue/html-closing-bracket-newline': 'off',
-    'vue/max-attributes-per-line': 'off',
-    'vue/multiline-html-element-content-newline': 'off',
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/attribute-hyphenation': 'off',
-    'vue/require-default-prop': 'off',
-    'vue/require-explicit-emits': 'off',
-    'vue/html-self-closing': [
-      'error',
-      {
-        html: {
-          void: 'always',
-          normal: 'never',
-          component: 'always',
-        },
-        svg: 'always',
-        math: 'always',
-      },
-    ],
-    'vue/multi-word-component-names': 'off',
-  },
+  extends: ['@vben'],
 };

.github/workflows/deploy.yml

@@ -98,7 +98,7 @@ jobs:
 
       - name: Build
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
+          NODE_OPTIONS: '--max_old_space_size=4096'
         run: |
           yarn install
           yarn run build
@@ -116,8 +116,3 @@ jobs:
           PUBLISH_BRANCH: gh-pages
           PUBLISH_DIR: ./dist
           CNAME: vben.vvbin.cn
-
-
-
-
-

.gitignore

 node_modules
 .DS_Store
 dist
-.npmrc
 .cache
+.turbo
 
 tests/server/static
 tests/server/static/upload

.husky/pre-commit

@@ -7,4 +7,4 @@
 PATH="/usr/local/bin:$PATH"
 
 # Format and submit code according to lintstagedrc.js configuration
-npm run lint:lint-staged
+pnpm exec lint-staged

.npmrc

+public-hoist-pattern[]=husky
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=lint-staged
+public-hoist-pattern[]=*stylelint*
+public-hoist-pattern[]=@commitlint/cli
+public-hoist-pattern[]=@vben/eslint-config

.prettierignore

-/dist/*
+dist
 .local
 .output.js
-/node_modules/**
+node_modules
 
 **/*.svg
 **/*.sh
 
-/public/*
+public
+.npmrc

.prettierrc.js

@@ -7,4 +7,5 @@ module.exports = {
   proseWrap: 'never',
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'auto',
+  plugins: ['prettier-plugin-packagejson'],
 };

.stylelintignore

-/dist/*
-/public/*
-public/*
+dist
+public

.stylelintrc.js

 module.exports = {
   root: true,
-  plugins: ['stylelint-order'],
-  extends: ['stylelint-config-standard'],
-  customSyntax: 'postcss-html',
-  rules: {
-    'function-no-unknown': null,
-    'selector-class-pattern': null,
-    'selector-pseudo-class-no-unknown': [
-      true,
-      {
-        ignorePseudoClasses: ['global', 'deep'],
-      },
-    ],
-    'selector-pseudo-element-no-unknown': [
-      true,
-      {
-        ignorePseudoElements: ['v-deep'],
-      },
-    ],
-    'at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'tailwind',
-          'apply',
-          'variants',
-          'responsive',
-          'screen',
-          'function',
-          'if',
-          'each',
-          'include',
-          'mixin',
-        ],
-      },
-    ],
-    'no-empty-source': null,
-    'string-quotes': null,
-    'named-grid-areas-no-invalid': null,
-    'unicode-bom': 'never',
-    'no-descending-specificity': null,
-    'font-family-no-missing-generic-family-keyword': null,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    // 'declaration-block-trailing-semicolon': 'always',
-    'rule-empty-line-before': [
-      'always',
-      {
-        ignore: ['after-comment', 'first-nested'],
-      },
-    ],
-    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
-    'order/order': [
-      [
-        'dollar-variables',
-        'custom-properties',
-        'at-rules',
-        'declarations',
-        {
-          type: 'at-rule',
-          name: 'supports',
-        },
-        {
-          type: 'at-rule',
-          name: 'media',
-        },
-        'rules',
-      ],
-      { severity: 'warning' },
-    ],
-  },
-  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
-  overrides: [
-    {
-      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
-      extends: ['stylelint-config-recommended'],
-      rules: {
-        'keyframes-name-pattern': null,
-        'selector-pseudo-class-no-unknown': [
-          true,
-          {
-            ignorePseudoClasses: ['deep', 'global'],
-          },
-        ],
-        'selector-pseudo-element-no-unknown': [
-          true,
-          {
-            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
-          },
-        ],
-      },
-    },
-    {
-      files: ['*.less', '**/*.less'],
-      customSyntax: 'postcss-less',
-      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
-    },
-  ],
+  extends: ['@vben/stylelint-config'],
 };

.vscode/settings.json

@@ -84,7 +84,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
   },
   "[vue]": {
     "editor.codeActionsOnSave": {
@@ -165,7 +166,7 @@
     "*.tsx": "$(capture).test.ts, $(capture).test.tsx",
     "*.env": "$(capture).env.*",
     "CHANGELOG.md": "CHANGELOG*",
-    "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,README*",
+    "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,README*,.npmrc",
     ".eslintrc.js": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.js,.prettierrc.js,.stylelintrc.js"
   },
   "terminal.integrated.scrollback": 10000

build/vite/plugin/mock.ts

@@ -6,7 +6,7 @@ import { viteMockServe } from 'vite-plugin-mock';
 
 export function configMockPlugin(isBuild: boolean) {
   return viteMockServe({
-    ignore: /^\_/,
+    ignore: /^_/,
     mockPath: 'mock',
     localEnabled: !isBuild,
     prodEnabled: isBuild,

index.html

@@ -34,39 +34,39 @@
 
         .app-loading {
           display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
           width: 100%;
           height: 100%;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
           background-color: #f4f7f9;
         }
 
         .app-loading .app-loading-wrap {
+          display: flex;
           position: absolute;
           top: 50%;
           left: 50%;
-          display: flex;
-          transform: translate3d(-50%, -50%, 0);
-          justify-content: center;
-          align-items: center;
           flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          transform: translate3d(-50%, -50%, 0);
         }
 
         .app-loading .dots {
           display: flex;
-          padding: 98px;
-          justify-content: center;
           align-items: center;
+          justify-content: center;
+          padding: 98px;
         }
 
         .app-loading .app-loading-title {
           display: flex;
+          align-items: center;
+          justify-content: center;
           margin-top: 30px;
-          font-size: 30px;
           color: rgb(0 0 0 / 85%);
-          justify-content: center;
-          align-items: center;
+          font-size: 30px;
         }
 
         .app-loading .app-loading-logo {
@@ -77,28 +77,28 @@
         }
 
         .dot {
-          position: relative;
           display: inline-block;
+          position: relative;
+          box-sizing: border-box;
           width: 48px;
           height: 48px;
           margin-top: 30px;
-          font-size: 32px;
           transform: rotate(45deg);
-          box-sizing: border-box;
-          animation: antRotate 1.2s infinite linear;
+          animation: ant-rotate 1.2s infinite linear;
+          font-size: 32px;
         }
 
         .dot i {
-          position: absolute;
           display: block;
+          position: absolute;
           width: 20px;
           height: 20px;
-          background-color: #0065cc;
-          border-radius: 100%;
-          opacity: 30%;
           transform: scale(0.75);
-          animation: antSpinMove 1s infinite linear alternate;
           transform-origin: 50% 50%;
+          animation: ant-spin-move 1s infinite linear alternate;
+          border-radius: 100%;
+          opacity: 0.3;
+          background-color: #0065cc;
         }
 
         .dot i:nth-child(1) {
@@ -123,24 +123,28 @@
           left: 0;
           animation-delay: 1.2s;
         }
-        @keyframes antRotate {
+
+        @keyframes ant-rotate {
           to {
             transform: rotate(405deg);
           }
         }
-        @keyframes antRotate {
+
+        @keyframes ant-rotate {
           to {
             transform: rotate(405deg);
           }
         }
-        @keyframes antSpinMove {
+
+        @keyframes ant-spin-move {
           to {
-            opacity: 100%;
+            opacity: 1;
           }
         }
-        @keyframes antSpinMove {
+
+        @keyframes ant-spin-move {
           to {
-            opacity: 100%;
+            opacity: 1;
           }
         }
       </style>

internal/eslint-config/build.config.ts

+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  entries: ['src/index'],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+});

internal/eslint-config/package.json

+{
+  "name": "@vben/eslint-config",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "pnpm rimraf .turbo node_modules dist",
+    "stub": "pnpm unbuild --stub"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.10.0",
+    "vue-eslint-parser": "^9.1.1"
+  }
+}

internal/eslint-config/src/index.ts

+export default {
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: './tsconfig.*?.json',
+    createDefaultProgram: false,
+    extraFileExtensions: ['.vue'],
+  },
+  plugins: ['vue', '@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'no-case-declarations': 'off',
+    'vue/script-setup-uses-vars': 'error',
+    'vue/no-reserved-component-names': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/multi-word-component-names': 'off',
+  },
+};

internal/stylelint-config/build.config.ts

+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  entries: ['src/index'],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+});

internal/stylelint-config/package.json

+{
+  "name": "@vben/stylelint-config",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "pnpm rimraf .turbo node_modules dist",
+    "stub": "pnpm unbuild --stub"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.21",
+    "postcss-html": "^1.5.0",
+    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.7",
+    "stylelint": "^15.4.0",
+    "stylelint-config-property-sort-order-smacss": "^9.1.0",
+    "stylelint-config-recommended": "^11.0.0",
+    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^32.0.0",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0"
+  }
+}

internal/stylelint-config/src/index.ts

+export default {
+  extends: ['stylelint-config-standard', 'stylelint-config-property-sort-order-smacss'],
+  plugins: ['stylelint-order', 'stylelint-prettier'],
+  // customSyntax: 'postcss-html',
+  overrides: [
+    {
+      files: ['**/*.(css|html|vue)'],
+      customSyntax: 'postcss-html',
+    },
+    {
+      files: ['*.less', '**/*.less'],
+      customSyntax: 'postcss-less',
+      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
+    },
+    {
+      files: ['*.scss', '**/*.scss'],
+      customSyntax: 'postcss-scss',
+      extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
+      rule: {
+        'scss/percent-placeholder-pattern': null,
+      },
+    },
+  ],
+  rules: {
+    'function-no-unknown': null,
+    'selector-class-pattern': null,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global', 'deep'],
+      },
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['v-deep'],
+      },
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin',
+          'extend',
+        ],
+      },
+    ],
+    'no-empty-source': null,
+    'string-quotes': null,
+    'named-grid-areas-no-invalid': null,
+    'no-descending-specificity': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'rule-empty-line-before': [
+      'always',
+      {
+        ignore: ['after-comment', 'first-nested'],
+      },
+    ],
+    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
+    'order/order': [
+      [
+        'dollar-variables',
+        'custom-properties',
+        'at-rules',
+        'declarations',
+        {
+          type: 'at-rule',
+          name: 'supports',
+        },
+        {
+          type: 'at-rule',
+          name: 'media',
+        },
+        'rules',
+      ],
+      { severity: 'error' },
+    ],
+  },
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+};

internal/ts-config/package.json

+{
+  "name": "@vben/ts-config",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "devDependencies": {}
+}

package.json

@@ -16,36 +16,36 @@
     "url": "https://github.com/anncwb"
   },
   "scripts": {
-    "commit": "czg",
     "bootstrap": "pnpm install",
-    "serve": "npm run dev",
-    "dev": "vite",
     "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
-    "build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
     "build:no-cache": "pnpm clean:cache && npm run build",
-    "report": "cross-env REPORT=true npm run build",
-    "type:check": "vue-tsc --noEmit --skipLibCheck",
-    "preview": "npm run build && vite preview",
-    "preview:dist": "vite preview",
-    "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "rimraf node_modules",
+    "commit": "czg",
+    "dev": "vite",
+    "gen:icon": "esno ./build/generate/icon/index.ts",
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "turbo run stub",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "lint:lint-staged": "lint-staged",
-    "test:unit": "jest",
-    "test:gzip": "npx http-server dist --cors --gzip -c-1",
-    "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",
-    "preinstall": "npx only-allow pnpm",
+    "lint:stylelint": "stylelint \"**/*.{vue,css,less.scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
+    "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "prepare": "husky install",
-    "gen:icon": "esno ./build/generate/icon/index.ts"
+    "preview": "npm run build && vite preview",
+    "preview:dist": "vite preview",
+    "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
+    "report": "cross-env REPORT=true npm run build",
+    "serve": "npm run dev",
+    "test:br": "npx http-server dist --cors --brotli -c-1",
+    "test:gzip": "npx http-server dist --cors --gzip -c-1",
+    "test:unit": "jest",
+    "type:check": "vue-tsc --noEmit --skipLibCheck"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
+      "prettier --write",
+      "eslint --fix"
     ],
     "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
       "prettier --write--parser json"
@@ -54,13 +54,13 @@
       "prettier --write"
     ],
     "*.vue": [
-      "eslint --fix",
       "prettier --write",
+      "eslint --fix",
       "stylelint --fix"
     ],
     "*.{scss,less,styl,html}": [
-      "stylelint --fix",
-      "prettier --write"
+      "prettier --write",
+      "stylelint --fix"
     ],
     "*.md": [
       "prettier --write"
@@ -133,8 +133,8 @@
     "@types/qs": "^6.9.7",
     "@types/showdown": "^2.0.0",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@vben/eslint-config": "workspace:*",
+    "@vben/stylelint-config": "workspace:*",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.47",
@@ -145,31 +145,24 @@
     "cz-git": "^1.6.1",
     "czg": "^1.6.1",
     "dotenv": "^16.0.3",
-    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.10.0",
     "esno": "^0.16.3",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "inquirer": "^9.1.5",
     "less": "^4.1.3",
     "lint-staged": "13.2.0",
-    "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.8.7",
+    "prettier-plugin-packagejson": "^2.4.3",
     "rimraf": "^4.4.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.60.0",
-    "stylelint": "^15.4.0",
-    "stylelint-config-recommended": "^11.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^32.0.0",
-    "stylelint-order": "^6.0.3",
+    "turbo": "^1.8.8",
     "typescript": "^5.0.3",
+    "unbuild": "^1.2.0",
     "vite": "^4.3.0-beta.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
@@ -177,7 +170,6 @@
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.10",
-    "vue-eslint-parser": "^9.1.1",
     "vue-tsc": "^1.2.0"
   },
   "packageManager": "pnpm@8.1.0",

pnpm-workspace.yaml

 packages:
-  - '_internal/*'
+  - 'internal/*'
+  - 'packages/*'

src/components/Application/src/AppDarkModeToggle.vue

@@ -44,26 +44,26 @@
   }
 
   .@{prefix-cls} {
-    position: relative;
     display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
     width: 50px;
     height: 26px;
-    padding: 0 6px;
     margin-left: auto;
-    cursor: pointer;
-    background-color: #151515;
+    padding: 0 6px;
     border-radius: 30px;
-    justify-content: space-between;
-    align-items: center;
+    background-color: #151515;
+    cursor: pointer;
 
     &-inner {
       position: absolute;
       z-index: 1;
       width: 18px;
       height: 18px;
-      background-color: #fff;
-      border-radius: 50%;
       transition: transform 0.5s, background-color 0.5s;
+      border-radius: 50%;
+      background-color: #fff;
       will-change: transform;
     }
 

src/components/Application/src/AppLogo.vue

@@ -64,8 +64,8 @@
     display: flex;
     align-items: center;
     padding-left: 7px;
-    cursor: pointer;
     transition: all 0.2s ease;
+    cursor: pointer;
 
     &.light {
       border-bottom: 1px solid @border-color-base;
@@ -84,9 +84,9 @@
     }
 
     &__title {
+      transition: all 0.5s;
       font-size: 16px;
       font-weight: 700;
-      transition: all 0.5s;
       line-height: normal;
     }
   }

src/components/Application/src/search/AppSearchFooter.vue

@@ -21,30 +21,30 @@
   @prefix-cls: ~'@{namespace}-app-search-footer';
 
   .@{prefix-cls} {
-    position: relative;
     display: flex;
+    position: relative;
+    flex-shrink: 0;
+    align-items: center;
     height: 44px;
     padding: 0 16px;
-    font-size: 12px;
-    color: #666;
-    background-color: @component-background;
     border-top: 1px solid @border-color-base;
     border-radius: 0 0 16px 16px;
-    align-items: center;
-    flex-shrink: 0;
+    background-color: @component-background;
+    color: #666;
+    font-size: 12px;
 
     &-item {
       display: flex;
+      align-items: center;
+      justify-content: center;
       width: 20px;
       height: 18px;
-      padding-bottom: 2px;
       margin-right: 0.4em;
-      background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+      padding-bottom: 2px;
       border-radius: 2px;
+      background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
       box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
         0 1px 2px 1px rgb(30 35 90 / 40%);
-      align-items: center;
-      justify-content: center;
 
       &:nth-child(2),
       &:nth-child(3),

src/components/Application/src/search/AppSearchModal.vue

@@ -77,7 +77,7 @@
   const emit = defineEmits(['close']);
 
   const scrollWrap = ref(null);
-  const inputRef = ref<Nullable<HTMLElement>>(null);
+  const inputRef = ref<HTMLElement | null>(null);
 
   const { t } = useI18n();
   const { prefixCls } = useDesign('app-search-modal');
@@ -117,16 +117,16 @@
   @prefix-cls: ~'@{namespace}-app-search-modal';
   @footer-prefix-cls: ~'@{namespace}-app-search-footer';
   .@{prefix-cls} {
+    display: flex;
     position: fixed;
+    z-index: 800;
     top: 0;
     left: 0;
-    z-index: 800;
-    display: flex;
+    justify-content: center;
     width: 100%;
     height: 100%;
     padding-top: 50px;
     background-color: rgb(0 0 0 / 25%);
-    justify-content: center;
 
     &--mobile {
       padding: 0;
@@ -159,7 +159,7 @@
 
         &__item {
           &-enter {
-            opacity: 0% !important;
+            opacity: 0 !important;
           }
         }
       }
@@ -167,27 +167,27 @@
 
     &-content {
       position: relative;
+      flex-direction: column;
       width: 632px;
       margin: 0 auto auto;
-      background-color: @component-background;
       border-radius: 16px;
+      background-color: @component-background;
       box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
-      flex-direction: column;
     }
 
     &-input__wrapper {
       display: flex;
-      padding: 14px 14px 0;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      padding: 14px 14px 0;
     }
 
     &-input {
       width: 100%;
       height: 48px;
-      font-size: 1.5em;
-      color: #1c1e21;
       border-radius: 6px;
+      color: #1c1e21;
+      font-size: 1.5em;
 
       span[role='img'] {
         color: #999;
@@ -196,43 +196,43 @@
 
     &-cancel {
       display: none;
-      font-size: 1em;
       color: #666;
+      font-size: 1em;
     }
 
     &-not-data {
       display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100px;
-      font-size: 0.9;
       color: rgb(150 159 175);
-      align-items: center;
-      justify-content: center;
+      font-size: 0.9;
     }
 
     &-list {
       max-height: 472px;
-      padding: 0 14px;
-      padding-bottom: 20px;
       margin: 0 auto;
       margin-top: 14px;
+      padding: 0 14px;
+      padding-bottom: 20px;
       overflow: auto;
 
       &__item {
-        position: relative;
         display: flex;
+        position: relative;
+        align-items: center;
         width: 100%;
         height: 56px;
+        margin-top: 8px;
         padding-bottom: 4px;
         padding-left: 14px;
-        margin-top: 8px;
-        font-size: 14px;
-        color: @text-color-base;
-        cursor: pointer;
-        background-color: @component-background;
         border-radius: 4px;
+        background-color: @component-background;
         box-shadow: 0 1px 3px 0 #d4d9e1;
-        align-items: center;
+        color: @text-color-base;
+        font-size: 14px;
+        cursor: pointer;
 
         > div:first-child,
         > div:last-child {
@@ -241,11 +241,11 @@
         }
 
         &--active {
-          color: #fff;
           background-color: @primary-color;
+          color: #fff;
 
           .@{prefix-cls}-list__item-enter {
-            opacity: 100%;
+            opacity: 1;
           }
         }
 
@@ -259,7 +259,7 @@
 
         &-enter {
           width: 30px;
-          opacity: 0%;
+          opacity: 0;
         }
       }
     }

src/components/Basic/src/BasicArrow.vue

@@ -52,10 +52,10 @@
 
   .@{prefix-cls} {
     display: inline-block;
-    cursor: pointer;
     transform: rotate(0deg);
-    transition: all 0.3s ease 0.1s;
     transform-origin: center center;
+    transition: all 0.3s ease 0.1s;
+    cursor: pointer;
 
     &--active {
       transform: rotate(90deg);

src/components/Basic/src/BasicHelp.vue

@@ -97,8 +97,8 @@
   .@{prefix-cls} {
     display: inline-block;
     margin-left: 6px;
-    font-size: 14px;
     color: @text-color-help-dark;
+    font-size: 14px;
     cursor: pointer;
 
     &:hover {

src/components/Basic/src/BasicTitle.vue

@@ -43,13 +43,13 @@
   @prefix-cls: ~'@{namespace}-basic-title';
 
   .@{prefix-cls} {
-    position: relative;
     display: flex;
+    position: relative;
     padding-left: 7px;
+    color: @text-color-base;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    color: @text-color-base;
     cursor: pointer;
     user-select: none;
 
@@ -59,6 +59,7 @@
     }
 
     &-show-span::before {
+      content: '';
       position: absolute;
       top: 4px;
       left: 0;
@@ -66,7 +67,6 @@
       height: 16px;
       margin-right: 4px;
       background-color: @primary-color;
-      content: '';
     }
 
     &-help {

src/components/Button/src/props.ts

 const validColors = ['primary', 'error', 'warning', 'success', ''] as const;
-type ButtonColorType = typeof validColors[number];
+type ButtonColorType = (typeof validColors)[number];
 
 export const buttonProps = {
   color: {

src/components/Container/src/collapse/CollapseContainer.vue

@@ -73,7 +73,9 @@
               {props.loading ? (
                 <Skeleton active={props.loading} />
               ) : (
-                <div class={`${prefixCls}__body`} v-show={show.value}>{slots.default?.()}</div>
+                <div class={`${prefixCls}__body`} v-show={show.value}>
+                  {slots.default?.()}
+                </div>
               )}
             </CollapseTransition>
           </div>
@@ -89,15 +91,15 @@
   @prefix-cls: ~'@{namespace}-collapse-container';
 
   .@{prefix-cls} {
-    background-color: @component-background;
-    border-radius: 2px;
     transition: all 0.3s ease-in-out;
+    border-radius: 2px;
+    background-color: @component-background;
 
     &__header {
       display: flex;
-      height: 32px;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      height: 32px;
       border-bottom: 1px solid @border-color-light;
     }
 
@@ -107,10 +109,10 @@
 
     &__action {
       display: flex;
-      text-align: right;
       flex: 1;
       align-items: center;
       justify-content: flex-end;
+      text-align: right;
     }
   }
 </style>

src/components/Container/src/collapse/CollapseHeader.vue

 <script lang="tsx">
-  import { defineComponent, computed, unref, type ExtractPropTypes } from 'vue';
+  import { defineComponent, computed, unref, type ExtractPropTypes, PropType } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { BasicArrow, BasicTitle } from '/@/components/Basic';
 
@@ -31,7 +31,7 @@
           </BasicTitle>
 
           <div class={`${unref(_prefixCls)}__action`}>
-             {slots.action
+            {slots.action
               ? slots.action({ expand: props.show, onClick: () => emit('expand') })
               : props.canExpan && (
                   <BasicArrow up expand={props.show} onClick={() => emit('expand')} />

src/components/ContextMenu/src/ContextMenu.vue

@@ -161,27 +161,27 @@
       }
 
       &:not(.ant-menu-item-disabled):hover {
-        color: @text-color-base;
         background-color: @item-hover-bg;
+        color: @text-color-base;
       }
     }
   }
 
   .context-menu {
+    display: block;
     position: fixed;
+    z-index: 200;
     top: 0;
     left: 0;
-    z-index: 200;
-    display: block;
     width: 156px;
     margin: 0;
-    list-style: none;
-    background-color: @component-background;
     border: 1px solid rgb(0 0 0 / 8%);
     border-radius: 0.25rem;
+    background-clip: padding-box;
+    background-color: @component-background;
     box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
       0 1px 5px 0 rgb(0 0 0 / 6%);
-    background-clip: padding-box;
+    list-style: none;
     user-select: none;
 
     &__item {

src/components/ContextMenu/src/createContextMenu.ts

@@ -50,7 +50,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
       menuManager.domList.forEach((dom: Element) => {
         try {
           dom && body.removeChild(dom);
-        } catch (error) {}
+        } catch (error) {
+          //
+        }
       });
       body.removeEventListener('click', handleClick);
       body.removeEventListener('scroll', handleClick);

src/components/CountDown/src/CountdownInput.vue

@@ -43,8 +43,8 @@
   .@{prefix-cls} {
     .ant-input-group-addon {
       padding-right: 0;
-      background-color: transparent;
       border: none;
+      background-color: transparent;
 
       button {
         font-size: 14px;

src/components/Cropper/src/CopperModal.vue

@@ -113,7 +113,7 @@
 <script lang="ts">
   import type { CropendResult, Cropper } from './typing';
 
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, PropType } from 'vue';
   import CropperImage from './Cropper.vue';
   import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -253,8 +253,8 @@
 
     &-toolbar {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       margin-top: 10px;
     }
 
@@ -274,11 +274,11 @@
 
     &-group {
       display: flex;
-      padding-top: 8px;
+      align-items: center;
+      justify-content: space-around;
       margin-top: 8px;
+      padding-top: 8px;
       border-top: 1px solid @border-color-base;
-      justify-content: space-around;
-      align-items: center;
     }
   }
 </style>

src/components/Cropper/src/CropperAvatar.vue

@@ -124,10 +124,10 @@
 
     &-image-wrapper {
       overflow: hidden;
-      cursor: pointer;
-      background: @component-background;
       border: 1px solid @border-color-base;
       border-radius: 50%;
+      background: @component-background;
+      cursor: pointer;
 
       img {
         width: 100%;
@@ -135,15 +135,15 @@
     }
 
     &-image-mask {
-      opacity: 0%;
       position: absolute;
       width: inherit;
       height: inherit;
-      border-radius: inherit;
+      transition: opacity 0.4s;
       border: inherit;
+      border-radius: inherit;
+      opacity: 0;
       background: rgb(0 0 0 / 40%);
       cursor: pointer;
-      transition: opacity 0.4s;
 
       ::v-deep(svg) {
         margin: auto;
@@ -151,7 +151,7 @@
     }
 
     &-image-mask:hover {
-      opacity: 4000%;
+      opacity: 40;
     }
 
     &-upload-btn {

src/components/Drawer/src/BasicDrawer.vue

@@ -62,7 +62,7 @@
     setup(props, { emit }) {
       const visibleRef = ref(false);
       const attrs = useAttrs();
-      const propsRef = ref<Partial<Nullable<DrawerProps>>>(null);
+      const propsRef = ref<Partial<DrawerProps | null>>(null);
 
       const { t } = useI18n();
       const { prefixVar, prefixCls } = useDesign('basic-drawer');
@@ -77,7 +77,7 @@
       instance && emit('register', drawerInstance, instance.uid);
 
       const getMergeProps = computed((): DrawerProps => {
-        return deepMerge(toRaw(props), unref(propsRef));
+        return deepMerge(toRaw(props), unref(propsRef)) as any;
       });
 
       const getProps = computed((): DrawerProps => {
@@ -153,7 +153,7 @@
       );
 
       // Cancel event
-      async function onClose(e: Recordable) {
+      async function onClose(e) {
         const { closeFunc } = unref(getProps);
         emit('close', e);
         if (closeFunc && isFunction(closeFunc)) {
@@ -215,8 +215,8 @@
       background-color: @component-background;
 
       .scrollbar__wrap {
-        padding: 16px !important;
         margin-bottom: 0 !important;
+        padding: 16px !important;
       }
 
       > .scrollbar > .scrollbar__bar.is-horizontal {
@@ -229,11 +229,11 @@
     position: absolute;
 
     .ant-drawer-header {
+      box-sizing: border-box;
       width: 100%;
       height: @detail-header-height;
       padding: 0;
       border-top: 1px solid @border-color-base;
-      box-sizing: border-box;
     }
 
     .ant-drawer-title {

src/components/Drawer/src/components/DrawerFooter.vue

@@ -71,9 +71,9 @@
     bottom: 0;
     width: 100%;
     padding: 0 12px 0 20px;
-    text-align: right;
-    background-color: @component-background;
     border-top: 1px solid @border-color-base;
+    background-color: @component-background;
+    text-align: right;
 
     > * {
       margin-right: 8px;

src/components/Drawer/src/components/DrawerHeader.vue

@@ -51,8 +51,8 @@
   @footer-height: 60px;
   .@{prefix-cls} {
     display: flex;
-    height: 100%;
     align-items: center;
+    height: 100%;
 
     &__back {
       padding: 0 12px;

src/components/Excel/src/ImportExcel.vue

@@ -196,7 +196,7 @@
       /**
        * @description 文件选择器关闭后,判断取消状态
        */
-       function handleFocusChange() {
+      function handleFocusChange() {
         const timeId = setInterval(() => {
           if (cancelRef.value === true) {
             emit('cancel');

src/components/FlowChart/src/FlowChartToolbar.vue

@@ -142,8 +142,8 @@
   }
   .@{prefix-cls} {
     height: 36px;
-    background-color: @app-content-background;
     border-bottom: 1px solid @border-color-base;
+    background-color: @app-content-background;
 
     .disabeld {
       color: @disabled-color;
@@ -151,8 +151,8 @@
 
     &__icon {
       display: inline-block;
-      padding: 2px 4px;
       margin-right: 10px;
+      padding: 2px 4px;
 
       &:hover {
         color: @primary-color;

src/components/Form/src/BasicForm.vue

@@ -71,7 +71,7 @@
     props: basicProps,
     emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
     setup(props, { emit, attrs }) {
-      const formModel = reactive<Recordable>({});
+      const formModel = reactive({});
       const modalFn = useModalContext();
 
       const advanceState = reactive<AdvanceState>({
@@ -81,17 +81,17 @@
         actionSpan: 6,
       });
 
-      const defaultValueRef = ref<Recordable>({});
+      const defaultValueRef = ref({});
       const isInitedDefaultRef = ref(false);
       const propsRef = ref<Partial<FormProps>>({});
-      const schemaRef = ref<Nullable<FormSchema[]>>(null);
-      const formElRef = ref<Nullable<FormActionType>>(null);
+      const schemaRef = ref<FormSchema[] | null>(null);
+      const formElRef = ref<FormActionType | null>(null);
 
       const { prefixCls } = useDesign('basic-form');
 
       // Get the basic configuration of the form
       const getProps = computed((): FormProps => {
-        return { ...props, ...unref(propsRef) } as FormProps;
+        return { ...props, ...unref(propsRef) };
       });
 
       const getFormClass = computed(() => {
@@ -104,7 +104,7 @@
       });
 
       // Get uniform row style and Row configuration for the entire form
-      const getRow = computed((): Recordable => {
+      const getRow = computed(() => {
         const { baseRowStyle = {}, rowProps } = unref(getProps);
         return {
           style: baseRowStyle,
@@ -112,9 +112,7 @@
         };
       });
 
-      const getBindValue = computed(
-        () => ({ ...attrs, ...props, ...unref(getProps) } as Recordable),
-      );
+      const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }));
 
       const getSchema = computed((): FormSchema[] => {
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
@@ -297,9 +295,7 @@
         formActionType: formActionType as any,
         setFormModel,
         getFormClass,
-        getFormActionBindProps: computed(
-          (): Recordable => ({ ...getProps.value, ...advanceState }),
-        ),
+        getFormActionBindProps: computed(() => ({ ...getProps.value, ...advanceState })),
         fieldsIsAdvancedMap,
         ...formActionType,
       };
@@ -334,10 +330,10 @@
 
         .suffix {
           display: inline-flex;
-          padding-left: 6px;
+          align-items: center;
           margin-top: 1px;
+          padding-left: 6px;
           line-height: 1;
-          align-items: center;
         }
       }
     }

src/components/Form/src/components/ApiTransfer.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, watch, ref, unref, watchEffect } from 'vue';
+  import { computed, defineComponent, watch, ref, unref, watchEffect, PropType } from 'vue';
   import { Transfer } from 'ant-design-vue';
   import { isFunction } from '/@/utils/is';
   import { get, omit } from 'lodash-es';
@@ -25,14 +25,14 @@
     props: {
       value: { type: Array as PropType<Array<string>> },
       api: {
-        type: Function as PropType<(arg?: Recordable) => Promise<TransferItem[]>>,
+        type: Function as PropType<(arg) => Promise<TransferItem[]>>,
         default: null,
       },
       params: { type: Object },
       dataSource: { type: Array as PropType<Array<TransferItem>> },
       immediate: propTypes.bool.def(true),
       alwaysLoad: propTypes.bool.def(false),
-      afterFetch: { type: Function as PropType<Fn> },
+      afterFetch: { type: Function },
       resultField: propTypes.string.def(''),
       labelField: propTypes.string.def('title'),
       valueField: propTypes.string.def('key'),
@@ -60,7 +60,7 @@
       const getdataSource = computed(() => {
         const { labelField, valueField } = props;
 
-        return unref(_dataSource).reduce((prev, next: Recordable) => {
+        return unref(_dataSource).reduce((prev, next) => {
           if (next) {
             prev.push({
               ...omit(next, [labelField, valueField]),
@@ -78,7 +78,7 @@
         if (Array.isArray(props.value)) {
           return props.value;
         }
-        if (Array.isArray(props.targetKeys)){
+        if (Array.isArray(props.targetKeys)) {
           return props.targetKeys;
         }
         return [];
@@ -125,7 +125,6 @@
           emitChange();
         } catch (error) {
           console.warn(error);
-        } finally {
         }
       }
       function emitChange() {

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

@@ -77,9 +77,9 @@ export function useFormValues({
       // Remove spaces
       if (isString(value)) {
         // remove params from URL
-        if(value === '') {
+        if (value === '') {
           value = undefined;
-        }else {
+        } else {
           value = value.trim();
         }
       }

src/components/Icon/src/Icon.vue

@@ -48,7 +48,7 @@
       prefix: propTypes.string.def(''),
     },
     setup(props) {
-      const elRef = ref<ElRef>(null);
+      const elRef = ref(null);
 
       const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
       const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
@@ -115,7 +115,7 @@
     display: block;
     min-width: 1em;
     min-height: 1em;
-    background-color: @iconify-bg-color;
     border-radius: 100%;
+    background-color: @iconify-bg-color;
   }
 </style>

src/components/Icon/src/SvgIcon.vue

@@ -55,8 +55,8 @@
   .@{prefix-cls} {
     display: inline-block;
     overflow: hidden;
+    fill: currentcolor;
     vertical-align: -0.15em;
-    fill: currentColor;
   }
 
   .svg-icon-spin {

src/components/Loading/src/Loading.vue

@@ -48,22 +48,22 @@
 </script>
 <style lang="less" scoped>
   .full-loading {
+    display: flex;
     position: fixed;
+    z-index: 200;
     top: 0;
     left: 0;
-    z-index: 200;
-    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
-    justify-content: center;
-    align-items: center;
     background-color: rgb(240 242 245 / 40%);
 
     &.absolute {
       position: absolute;
+      z-index: 300;
       top: 0;
       left: 0;
-      z-index: 300;
     }
   }
 

src/components/Menu/src/BasicMenu.vue

@@ -160,5 +160,5 @@
   });
 </script>
 <style lang="less">
-  @import './index.less';
+  @import url('./index.less');
 </style>

src/components/Modal/src/components/ModalClose.vue

@@ -66,8 +66,8 @@
   @prefix-cls: ~'@{namespace}-basic-modal-close';
   .@{prefix-cls} {
     display: flex;
-    height: 95%;
     align-items: center;
+    height: 95%;
 
     > span {
       margin-left: 48px;

src/components/Page/src/PageFooter.vue

@@ -28,20 +28,20 @@
   @prefix-cls: ~'@{namespace}-page-footer';
 
   .@{prefix-cls} {
+    display: flex;
     position: fixed;
+    z-index: @page-footer-z-index;
     right: 0;
     bottom: 0;
-    z-index: @page-footer-z-index;
-    display: flex;
-    width: 100%;
     align-items: center;
+    width: 100%;
     padding: 0 24px;
-    line-height: 44px;
-    background-color: @component-background;
+    transition: width 0.2s;
     border-top: 1px solid @border-color-base;
+    background-color: @component-background;
     box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
       0 -12px 48px 16px rgb(0 0 0 / 3%);
-    transition: width 0.2s;
+    line-height: 44px;
 
     &__left {
       flex: 1 1;

src/components/Preview/src/Functional.vue

 <script lang="tsx">
-  import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
+  import { defineComponent, ref, unref, computed, reactive, watchEffect, PropType } from 'vue';
   import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
   import resumeSvg from '/@/assets/svg/preview/resume.svg';
   import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
@@ -435,26 +435,23 @@
 <style lang="less">
   .img-preview {
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     z-index: @preview-comp-z-index;
+    inset: 0;
     background: rgb(0 0 0 / 50%);
     user-select: none;
 
     &-content {
       display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       color: @white;
-      justify-content: center;
-      align-items: center;
     }
 
     &-image {
-      cursor: pointer;
       transition: transform 0.3s;
+      cursor: pointer;
     }
 
     &__close {
@@ -464,11 +461,11 @@
       width: 80px;
       height: 80px;
       overflow: hidden;
+      transition: all 0.2s;
+      border-radius: 50%;
+      background-color: rgb(0 0 0 / 50%);
       color: @white;
       cursor: pointer;
-      background-color: rgb(0 0 0 / 50%);
-      border-radius: 50%;
-      transition: all 0.2s;
 
       &-icon {
         position: absolute;
@@ -487,32 +484,32 @@
       bottom: 5%;
       left: 50%;
       padding: 0 22px;
-      font-size: 16px;
-      background: rgb(109 109 109 / 60%);
-      border-radius: 15px;
       transform: translateX(-50%);
+      border-radius: 15px;
+      background: rgb(109 109 109 / 60%);
+      font-size: 16px;
     }
 
     &__controller {
+      display: flex;
       position: absolute;
       bottom: 10%;
       left: 50%;
-      display: flex;
+      justify-content: center;
       width: 260px;
       height: 44px;
-      padding: 0 22px;
       margin-left: -139px;
-      background: rgb(109 109 109 / 60%);
+      padding: 0 22px;
       border-radius: 22px;
-      justify-content: center;
+      background: rgb(109 109 109 / 60%);
 
       &-item {
         display: flex;
         height: 100%;
         padding: 0 9px;
+        transition: all 0.2s;
         font-size: 24px;
         cursor: pointer;
-        transition: all 0.2s;
 
         &:hover {
           transform: scale(1.2);
@@ -525,18 +522,18 @@
     }
 
     &__arrow {
+      display: flex;
       position: absolute;
       top: 50%;
-      display: flex;
       align-items: center;
       justify-content: center;
       width: 50px;
       height: 50px;
+      transition: all 0.2s;
+      border-radius: 50%;
+      background-color: rgb(0 0 0 / 50%);
       font-size: 28px;
       cursor: pointer;
-      background-color: rgb(0 0 0 / 50%);
-      border-radius: 50%;
-      transition: all 0.2s;
 
       &:hover {
         background-color: rgb(0 0 0 / 80%);

src/components/Scrollbar/src/Scrollbar.vue

@@ -148,20 +148,20 @@
           display: none;
           width: 0;
           height: 0;
-          opacity: 0%;
+          opacity: 0;
         }
       }
     }
 
     &__thumb {
-      position: relative;
       display: block;
+      position: relative;
       width: 0;
       height: 0;
-      cursor: pointer;
-      background-color: rgb(144 147 153 / 30%);
-      border-radius: inherit;
       transition: 0.3s background-color;
+      border-radius: inherit;
+      background-color: rgb(144 147 153 / 30%);
+      cursor: pointer;
 
       &:hover {
         background-color: rgb(144 147 153 / 50%);
@@ -170,12 +170,12 @@
 
     &__bar {
       position: absolute;
+      z-index: 1;
       right: 2px;
       bottom: 2px;
-      z-index: 1;
-      border-radius: 4px;
-      opacity: 0%;
       transition: opacity 80ms ease;
+      border-radius: 4px;
+      opacity: 0;
 
       &.is-vertical {
         top: 2px;
@@ -200,7 +200,7 @@
   .scrollbar:active > .scrollbar__bar,
   .scrollbar:focus > .scrollbar__bar,
   .scrollbar:hover > .scrollbar__bar {
-    opacity: 100%;
     transition: opacity 340ms ease-out;
+    opacity: 1;
   }
 </style>

src/components/SimpleMenu/src/SimpleMenu.vue

@@ -21,7 +21,7 @@
   import type { MenuState } from './types';
   import type { Menu as MenuType } from '/@/router/types';
   import type { RouteLocationNormalizedLoaded } from 'vue-router';
-  import { defineComponent, computed, ref, unref, reactive, toRefs, watch } from 'vue';
+  import { defineComponent, computed, ref, unref, reactive, toRefs, watch, PropType } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import Menu from './components/Menu.vue';
   import SimpleSubMenu from './SimpleSubMenu.vue';
@@ -74,8 +74,8 @@
         menuState,
         items,
         accordion,
-        mixSider,
-        collapse,
+        mixSider as any,
+        collapse as any,
       );
 
       const getBindValues = computed(() => ({ ...attrs, ...props }));
@@ -156,5 +156,5 @@
   });
 </script>
 <style lang="less">
-  @import './index.less';
+  @import url('./index.less');
 </style>

src/components/SimpleMenu/src/components/Menu.vue

@@ -154,5 +154,5 @@
   });
 </script>
 <style lang="less">
-  @import './menu.less';
+  @import url('./menu.less');
 </style>

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -47,7 +47,7 @@
         return score;
       });
 
-      function handleChange(e: ChangeEvent) {
+      function handleChange(e) {
         innerValueRef.value = e.target.value;
       }
 
@@ -79,21 +79,21 @@
       position: relative;
       height: 6px;
       margin: 10px auto 6px;
-      background-color: @disabled-color;
       border-radius: 6px;
+      background-color: @disabled-color;
 
       &::before,
       &::after {
+        content: '';
+        display: block;
         position: absolute;
         z-index: 10;
-        display: block;
         width: 20%;
         height: inherit;
-        background-color: transparent;
-        border-color: @white;
-        border-style: solid;
         border-width: 0 5px;
-        content: '';
+        border-style: solid;
+        border-color: @white;
+        background-color: transparent;
       }
 
       &::before {
@@ -108,9 +108,9 @@
         position: absolute;
         width: 0;
         height: inherit;
-        background-color: transparent;
-        border-radius: inherit;
         transition: width 0.5s ease-in-out, background 0.25s;
+        border-radius: inherit;
+        background-color: transparent;
 
         &[data-score='0'] {
           width: 20%;

src/components/Table/src/BasicTable.vue

@@ -102,7 +102,7 @@
     ],
     setup(props, { attrs, emit, slots, expose }) {
       const tableElRef = ref(null);
-      const tableData = ref<Recordable[]>([]);
+      const tableData = ref([]);
 
       const wrapRef = ref(null);
       const formRef = ref(null);
@@ -239,7 +239,7 @@
 
       const getBindValues = computed(() => {
         const dataSource = unref(getDataSourceRef);
-        let propsData: Recordable = {
+        let propsData: any = {
           ...attrs,
           customRow,
           ...unref(getProps),
@@ -379,10 +379,10 @@
 
       .ant-form {
         width: 100%;
-        padding: 12px 10px 6px;
         margin-bottom: 16px;
-        background-color: @component-background;
+        padding: 12px 10px 6px;
         border-radius: 2px;
+        background-color: @component-background;
       }
     }
 
@@ -394,8 +394,8 @@
 
     .ant-table-wrapper {
       padding: 6px;
-      background-color: @component-background;
       border-radius: 2px;
+      background-color: @component-background;
 
       .ant-table-title {
         min-height: 40px;
@@ -413,10 +413,10 @@
 
       &-title {
         display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding: 8px 6px;
         border-bottom: none;
-        justify-content: space-between;
-        align-items: center;
       }
 
       //.ant-table-tbody > tr.ant-table-row-selected td {

src/components/Table/src/components/TableHeader.vue

@@ -40,7 +40,7 @@
     },
     props: {
       title: {
-        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
+        type: [Function, String] as PropType<string | ((data) => string)>,
       },
       tableSetting: {
         type: Object as PropType<TableSetting>,
@@ -68,8 +68,8 @@
 
   .@{prefix-cls} {
     &__toolbar {
-      flex: 1;
       display: flex;
+      flex: 1;
       align-items: center;
       justify-content: flex-end;
 

src/components/Table/src/components/TableTitle.vue

@@ -14,10 +14,10 @@
     components: { BasicTitle },
     props: {
       title: {
-        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
+        type: [Function, String] as PropType<string | ((data) => string)>,
       },
       getSelectRows: {
-        type: Function as PropType<() => Recordable[]>,
+        type: Function as PropType<() => any[]>,
       },
       helpMessage: {
         type: [String, Array] as PropType<string | string[]>,
@@ -47,7 +47,7 @@
 
   .@{prefix-cls} {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
   }
 </style>

src/components/Table/src/components/editable/EditableCell.vue

@@ -2,7 +2,6 @@
   import type { CSSProperties, PropType } from 'vue';
   import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue';
   import type { BasicColumn } from '../../types/table';
-  import type { EditRecordRow } from './index';
   import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons-vue';
   import { CellComponent } from './CellComponent';
 
@@ -26,11 +25,13 @@
     },
     props: {
       value: {
-        type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
+        type: [String, Number, Boolean, Object] as PropType<
+          string | number | boolean | Record<string, any>
+        >,
         default: '',
       },
       record: {
-        type: Object as PropType<EditRecordRow>,
+        type: Object as any,
       },
       column: {
         type: Object as PropType<BasicColumn>,
@@ -44,7 +45,7 @@
       const elRef = ref();
       const ruleVisible = ref(false);
       const ruleMessage = ref('');
-      const optionsRef = ref<LabelValueOptions>([]);
+      const optionsRef = ref([]);
       const currentValueRef = ref<any>(props.value);
       const defaultValueRef = ref<any>(props.value);
       const spinning = ref<boolean>(false);
@@ -71,7 +72,7 @@
 
         const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
 
-        let compProps = props.column?.editComponentProps ?? {};
+        let compProps = props.column?.editComponentProps ?? ({} as any);
         const { record, column, index } = props;
 
         if (isFunction(compProps)) {
@@ -83,7 +84,7 @@
         delete compProps.onChange;
 
         const component = unref(getComponent);
-        const apiSelectProps: Recordable = {};
+        const apiSelectProps: Record<string, any> = {};
         if (component === 'ApiSelect') {
           apiSelectProps.cache = true;
         }
@@ -131,8 +132,7 @@
           return value;
         }
 
-        const options: LabelValueOptions =
-          unref(getComponentProps)?.options ?? (unref(optionsRef) || []);
+        const options = unref(getComponentProps)?.options ?? (unref(optionsRef) || []);
         const option = options.find((item) => `${item.value}` === `${value}`);
 
         return option?.label ?? value;
@@ -184,11 +184,11 @@
         if (!e) {
           currentValueRef.value = e;
         } else if (component === 'Checkbox') {
-          currentValueRef.value = (e as ChangeEvent).target.checked;
+          currentValueRef.value = e.target.checked;
         } else if (component === 'Switch') {
           currentValueRef.value = e;
         } else if (e?.target && Reflect.has(e.target, 'value')) {
-          currentValueRef.value = (e as ChangeEvent).target.value;
+          currentValueRef.value = e.target.value;
         } else if (isString(e) || isBoolean(e) || isNumber(e) || isArray(e)) {
           currentValueRef.value = e;
         }
@@ -216,8 +216,8 @@
             return false;
           }
           if (isFunction(editRule)) {
-            const res = await editRule(currentValue, record as Recordable);
-            if (!!res) {
+            const res = await editRule(currentValue, record);
+            if (res) {
               ruleMessage.value = res;
               ruleVisible.value = true;
               return false;
@@ -316,25 +316,25 @@
       }
 
       // only ApiSelect or TreeSelect
-      function handleOptionsChange(options: LabelValueOptions) {
+      function handleOptionsChange(options) {
         const { replaceFields } = unref(getComponentProps);
         const component = unref(getComponent);
         if (component === 'ApiTreeSelect') {
           const { title = 'title', value = 'value', children = 'children' } = replaceFields || {};
-          let listOptions: Recordable[] = treeToList(options, { children });
+          let listOptions = treeToList(options, { children });
           listOptions = listOptions.map((item) => {
             return {
               label: item[title],
               value: item[value],
             };
           });
-          optionsRef.value = listOptions as LabelValueOptions;
+          optionsRef.value = listOptions;
         } else {
           optionsRef.value = options;
         }
       }
 
-      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
+      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle) {
         if (props.record) {
           /* eslint-disable  */
           isArray(props.record[cbs])
@@ -476,9 +476,9 @@
   .edit-cell-rule-popover {
     .ant-popover-inner-content {
       padding: 4px 8px;
-      color: @error-color;
       // border: 1px solid @error-color;
       border-radius: 2px;
+      color: @error-color;
     }
   }
   .@{prefix-cls} {
@@ -506,20 +506,20 @@
 
     .ellipsis-cell {
       .cell-content {
-        overflow-wrap: break-word;
-        word-break: break-word;
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: nowrap;
+        overflow-wrap: break-word;
       }
     }
 
     &__normal {
       &-icon {
+        display: none;
         position: absolute;
         top: 4px;
         right: 0;
-        display: none;
         width: 20px;
         cursor: pointer;
       }

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -165,7 +165,7 @@
 
       const plainSortOptions = ref<Options[]>([]);
 
-      const columnListRef = ref<ComponentRef>(null);
+      const columnListRef = ref(null);
 
       const state = reactive<State>({
         checkAll: true,
@@ -291,7 +291,7 @@
         nextTick(() => {
           const columnListEl = unref(columnListRef);
           if (!columnListEl) return;
-          const el = columnListEl.$el as any;
+          const el = (columnListEl as any).$el;
           if (!el) return;
           // Drag and drop sort
           sortable = Sortablejs.create(unref(el), {
@@ -416,8 +416,8 @@
 
   .@{prefix-cls} {
     &__popover-title {
-      position: relative;
       display: flex;
+      position: relative;
       align-items: center;
       justify-content: space-between;
     }

src/components/Table/src/hooks/useTableForm.ts

@@ -30,7 +30,7 @@ export function useTableForm(
 
   function replaceFormSlotKey(key: string) {
     if (!key) return '';
-    return key?.replace?.(/form\-/, '') ?? '';
+    return key?.replace?.(/form-/, '') ?? '';
   }
 
   function handleSearchInfoChange(info: Recordable) {

src/components/Table/src/types/table.ts

@@ -311,7 +311,6 @@ export interface BasicTableProps<T = any> {
    * @type object
    */
   scroll?: { x?: number | string | true; y?: number | string };
-  
 
   /**
    * Whether to show table header

src/components/Tinymce/src/Editor.vue

@@ -62,6 +62,7 @@
     watch,
     onDeactivated,
     onBeforeUnmount,
+    PropType,
   } from 'vue';
   import ImgUpload from './ImgUpload.vue';
   import { toolbar, plugins } from './tinymce';
@@ -116,10 +117,10 @@
     props: tinymceProps,
     emits: ['change', 'update:modelValue', 'inited', 'init-error'],
     setup(props, { emit, attrs }) {
-      const editorRef = ref<Nullable<Editor>>(null);
+      const editorRef = ref<Editor | null>(null);
       const fullscreen = ref(false);
       const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
-      const elRef = ref<Nullable<HTMLElement>>(null);
+      const elRef = ref<HTMLElement | null>(null);
 
       const { prefixCls } = useDesign('tinymce-container');
 
@@ -245,7 +246,7 @@
         bindHandlers(e, attrs, unref(editorRef));
       }
 
-      function setValue(editor: Recordable, val: string, prevVal?: string) {
+      function setValue(editor: Record<string, any>, val: string, prevVal?: string) {
         if (
           editor &&
           typeof val === 'string' &&
@@ -339,8 +340,8 @@
     line-height: normal;
 
     textarea {
-      z-index: -1;
       visibility: hidden;
+      z-index: -1;
     }
   }
 </style>

src/components/Tinymce/src/ImgUpload.vue

@@ -49,7 +49,7 @@
         };
       });
 
-      function handleChange(info: Recordable) {
+      function handleChange(info: Record<string, any>) {
         const file = info.file;
         const status = file?.status;
         const url = file?.response?.url;
@@ -84,9 +84,9 @@
 
   .@{prefix-cls} {
     position: absolute;
+    z-index: 20;
     top: 4px;
     right: 10px;
-    z-index: 20;
 
     &.fullscreen {
       position: fixed;

src/components/Tree/src/TreeIcon.ts

 import type { VNode, FunctionalComponent } from 'vue';
-
 import { h } from 'vue';
-import { isString } from '@vue/shared';
+import { isString } from 'lodash-es';
 import { Icon } from '/@/components/Icon';
 
 export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {

src/components/Upload/src/ThumbUrl.vue

@@ -19,10 +19,10 @@
 <style lang="less">
   .thumb {
     img {
-      position: static;
       display: block;
-      cursor: zoom-in;
+      position: static;
       border-radius: 4px;
+      cursor: zoom-in;
       object-fit: cover;
     }
   }

src/components/Upload/src/UploadModal.vue

@@ -180,7 +180,7 @@
         }
         try {
           item.status = UploadResultStatus.UPLOADING;
-          const { data } = await props.api?.(
+          const ret = await props.api?.(
             {
               data: {
                 ...(props.uploadParams || {}),
@@ -194,6 +194,7 @@
               item.percent = complete;
             },
           );
+          const { data } = ret;
           item.status = UploadResultStatus.SUCCESS;
           item.responseData = data;
           return {
@@ -313,9 +314,9 @@
       margin-bottom: 8px;
 
       &__btn {
+        flex: 1;
         margin-left: 8px;
         text-align: right;
-        flex: 1;
       }
     }
   }

src/components/Verify/src/DragVerify.vue

@@ -291,17 +291,17 @@
   .darg-verify {
     position: relative;
     overflow: hidden;
-    text-align: center;
-    background-color: rgb(238 238 238);
     border: 1px solid #ddd;
     border-radius: @radius;
+    background-color: rgb(238 238 238);
+    text-align: center;
 
     &-bar {
       position: absolute;
       width: 0;
       height: 36px;
-      background-color: @success-color;
       border-radius: @radius;
+      background-color: @success-color;
 
       &.to-left {
         width: 0 !important;
@@ -312,8 +312,8 @@
     &-content {
       position: absolute;
       top: 0;
-      font-size: 12px;
-      text-size-adjust: none;
+      animation: slidetounlock 3s infinite;
+      background-clip: text;
       background-color: -webkit-gradient(
         linear,
         left top,
@@ -324,9 +324,9 @@
         color-stop(0.6, #333),
         color-stop(1, #333)
       );
-      animation: slidetounlock 3s infinite;
-      background-clip: text;
+      font-size: 12px;
       user-select: none;
+      text-size-adjust: none;
 
       &.success {
         -webkit-text-fill-color: @white;
@@ -338,15 +338,15 @@
     }
 
     &-action {
+      display: flex;
       position: absolute;
       top: 0;
       left: 0;
-      display: flex;
-      cursor: move;
-      background-color: @white;
-      border-radius: @radius;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      border-radius: @radius;
+      background-color: @white;
+      cursor: move;
 
       &__icon {
         cursor: inherit;

src/components/Verify/src/ImgRotate.vue

@@ -13,7 +13,7 @@
     props: rotateProps,
     emits: ['success', 'change', 'update:value'],
     setup(props, { emit, attrs, expose }) {
-      const basicRef = ref<Nullable<DragVerifyActionType>>(null);
+      const basicRef = ref<DragVerifyActionType | null>(null);
       const state = reactive({
         showTip: false,
         isPassing: false,
@@ -167,8 +167,8 @@
 </script>
 <style lang="less">
   .ir-dv {
-    position: relative;
     display: flex;
+    position: relative;
     flex-direction: column;
     align-items: center;
 
@@ -188,16 +188,16 @@
     }
 
     &-img__tip {
+      display: block;
       position: absolute;
+      z-index: 1;
       bottom: 10px;
       left: 0;
-      z-index: 1;
-      display: block;
       width: 100%;
       height: 30px;
+      color: @white;
       font-size: 12px;
       line-height: 30px;
-      color: @white;
       text-align: center;
 
       &.success {

src/components/VirtualScroll/src/VirtualScroll.vue

@@ -9,6 +9,7 @@
     watch,
     nextTick,
     CSSProperties,
+    PropType,
   } from 'vue';
   import { useEventListener } from '/@/hooks/event/useEventListener';
   import { getSlot } from '/@/utils/helper/tsxHelper';
@@ -31,7 +32,7 @@
       required: true,
     },
     items: {
-      type: Array as PropType<any[]>,
+      type: Array,
       default: () => [],
     },
   };
@@ -82,7 +83,7 @@
       });
 
       const getWrapStyleRef = computed((): CSSProperties => {
-        const styles: Recordable<string> = {};
+        const styles: Record<string, any> = {};
         const height = convertToUnit(props.height);
         const minHeight = convertToUnit(props.minHeight);
         const minWidth = convertToUnit(props.minWidth);
@@ -170,12 +171,12 @@
 </script>
 <style scoped lang="less">
   .virtual-scroll {
-    position: relative;
     display: block;
+    position: relative;
+    flex: 1 1 auto;
     width: 100%;
     max-width: 100%;
     overflow: auto;
-    flex: 1 1 auto;
 
     &__container {
       display: block;

src/hooks/setting/index.ts

@@ -12,7 +12,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_UPLOAD_URL,
   } = getAppEnvConfig();
 
-  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+  if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
     warn(
       `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
     );

src/layouts/default/content/index.vue

@@ -36,7 +36,7 @@
     position: relative;
     flex: 1 1 auto;
     min-height: 0;
-    
+
     // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ?
     &.fixed {
       width: 1200px;
@@ -46,8 +46,8 @@
 
     &-loading {
       position: absolute;
-      top: 200px;
       z-index: @page-loading-z-index;
+      top: 200px;
     }
   }
 </style>

src/layouts/default/feature/index.vue

@@ -62,18 +62,18 @@
   @prefix-cls: ~'@{namespace}-setting-drawer-feature';
 
   .@{prefix-cls} {
+    display: flex;
     position: absolute;
+    z-index: 10;
     top: 45%;
     right: 0;
-    z-index: 10;
-    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 10px;
+    border-radius: 6px 0 0 6px;
+    background-color: @primary-color;
     color: @white;
     cursor: pointer;
-    background-color: @primary-color;
-    border-radius: 6px 0 0 6px;
-    justify-content: center;
-    align-items: center;
 
     svg {
       width: 1em;

src/layouts/default/header/MultipleHeader.vue

@@ -109,8 +109,8 @@
   @prefix-cls: ~'@{namespace}-layout-multiple-header';
 
   .@{prefix-cls} {
-    transition: width 0.2s;
     flex: 0 0 auto;
+    transition: width 0.2s;
 
     &--dark {
       margin-left: -1px;
@@ -118,8 +118,8 @@
 
     &--fixed {
       position: fixed;
-      top: 0;
       z-index: @multiple-tab-fixed-z-index;
+      top: 0;
       width: 100%;
     }
   }

src/layouts/default/header/components/Breadcrumb.vue

@@ -154,8 +154,8 @@
 
   .@{prefix-cls} {
     display: flex;
-    padding: 0 8px;
     align-items: center;
+    padding: 0 8px;
 
     .ant-breadcrumb-link {
       .anticon {

src/layouts/default/header/components/notify/NoticeList.vue

@@ -151,17 +151,17 @@
     &-item {
       padding: 6px;
       overflow: hidden;
-      cursor: pointer;
       transition: all 0.3s;
+      cursor: pointer;
 
       .title {
         margin-bottom: 8px;
         font-weight: normal;
 
         .extra {
-          float: right;
           margin-top: -1.5px;
           margin-right: 0;
+          float: right;
           font-weight: normal;
 
           .tag {

src/layouts/default/header/components/user-dropdown/index.vue

@@ -126,13 +126,13 @@
   @prefix-cls: ~'@{namespace}-header-user-dropdown';
 
   .@{prefix-cls} {
+    align-items: center;
     height: @header-height;
     padding: 0 0 0 10px;
     padding-right: 10px;
     overflow: hidden;
     font-size: 12px;
     cursor: pointer;
-    align-items: center;
 
     img {
       width: 24px;

src/layouts/default/header/index.vue

@@ -197,5 +197,5 @@
   });
 </script>
 <style lang="less">
-  @import './index.less';
+  @import url('./index.less');
 </style>

src/layouts/default/index.vue

@@ -75,10 +75,10 @@
 
   .@{prefix-cls} {
     display: flex;
+    flex-direction: column;
     width: 100%;
     min-height: 100%;
     background-color: @content-bg;
-    flex-direction: column;
 
     > .ant-layout {
       min-height: 100%;

src/layouts/default/menu/index.vue

@@ -33,7 +33,7 @@
       isHorizontal: propTypes.bool,
       // menu Mode
       menuMode: {
-        type: [String] as PropType<Nullable<MenuModeEnum>>,
+        type: [String] as PropType<MenuModeEnum | null>,
         default: '',
       },
     },
@@ -189,7 +189,7 @@
     &--mobile {
       .@{logo-prefix-cls} {
         &__title {
-          opacity: 100%;
+          opacity: 1;
         }
       }
     }

src/layouts/default/setting/SettingDrawer.tsx

@@ -100,7 +100,7 @@ export default defineComponent({
         <>
           <TypePicker
             menuTypeList={menuTypeList}
-            handler={(item: typeof menuTypeList[0]) => {
+            handler={(item: (typeof menuTypeList)[0]) => {
               baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                 mode: item.mode,
                 type: item.type,

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -59,15 +59,15 @@
   .@{prefix-cls} {
     display: flex;
     flex-wrap: wrap;
-    margin: 16px 0;
     justify-content: space-around;
+    margin: 16px 0;
 
     &__item {
       width: 20px;
       height: 20px;
-      cursor: pointer;
       border: 1px solid #ddd;
       border-radius: 2px;
+      cursor: pointer;
 
       svg {
         display: none;
@@ -79,8 +79,8 @@
         svg {
           display: inline-block;
           margin: 0 0 3px 3px;
-          font-size: 12px;
           fill: @white !important;
+          font-size: 12px;
         }
       }
     }

src/layouts/default/setting/components/TypePicker.vue

@@ -34,7 +34,7 @@
         default: () => [],
       },
       handler: {
-        type: Function as PropType<Fn>,
+        type: Function,
         default: () => ({}),
       },
       def: {
@@ -63,27 +63,27 @@
       height: 48px;
       margin-right: 16px;
       overflow: hidden;
-      cursor: pointer;
-      background-color: #f0f2f5;
       border-radius: 4px;
+      background-color: #f0f2f5;
       box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+      cursor: pointer;
 
       &::before,
       &::after {
-        position: absolute;
         content: '';
+        position: absolute;
       }
 
       &--sidebar,
       &--light {
         &::before {
+          z-index: 1;
           top: 0;
           left: 0;
-          z-index: 1;
           width: 33%;
           height: 100%;
-          background-color: #273352;
           border-radius: 4px 0 0 4px;
+          background-color: #273352;
         }
 
         &::after {
@@ -101,14 +101,14 @@
           left: 0;
           width: 33%;
           height: 100%;
-          background-color: #fff;
           border-radius: 4px 0 0 4px;
+          background-color: #fff;
         }
 
         &::after {
+          z-index: 1;
           top: 0;
           left: 0;
-          z-index: 1;
           width: 100%;
           height: 25%;
           background-color: #273352;
@@ -131,13 +131,13 @@
 
       &--mix-sidebar {
         &::before {
+          z-index: 1;
           top: 0;
           left: 0;
-          z-index: 1;
           width: 25%;
           height: 100%;
-          background-color: #273352;
           border-radius: 4px 0 0 4px;
+          background-color: #273352;
         }
 
         &::after {

src/layouts/default/sider/DragBar.vue

@@ -45,14 +45,14 @@
 
   .@{prefix-cls} {
     position: absolute;
+    z-index: @side-drag-z-index;
     top: 0;
     right: -2px;
-    z-index: @side-drag-z-index;
     width: 2px;
     height: 100%;
-    cursor: col-resize;
     border-top: none;
     border-bottom: none;
+    cursor: col-resize;
 
     &--hide {
       display: none;

src/layouts/default/sider/LayoutSider.vue

@@ -44,8 +44,8 @@
     name: 'LayoutSideBar',
     components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
     setup() {
-      const dragBarRef = ref<ElRef>(null);
-      const sideRef = ref<ElRef>(null);
+      const dragBarRef = ref(null);
+      const sideRef = ref(null);
 
       const {
         getCollapsed,
@@ -153,12 +153,12 @@
       background-color: @sider-dark-bg-color;
 
       .ant-layout-sider-trigger {
-        color: darken(@white, 25%);
         background-color: @trigger-dark-bg-color;
+        color: darken(@white, 25%);
 
         &:hover {
-          color: @white;
           background-color: @trigger-dark-hover-bg-color;
+          color: @white;
         }
       }
     }
@@ -167,14 +167,14 @@
       // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
 
       .ant-layout-sider-trigger {
-        color: @text-color-base;
         border-top: 1px solid @border-color-light;
+        color: @text-color-base;
       }
     }
 
     .ant-layout-sider-zero-width-trigger {
-      top: 40%;
       z-index: 10;
+      top: 40%;
     }
 
     & .ant-layout-sider-trigger {

src/layouts/default/sider/MixSider.vue

@@ -117,9 +117,9 @@
       const activePath = ref('');
       const childrenMenus = ref<Menu[]>([]);
       const openMenu = ref(false);
-      const dragBarRef = ref<ElRef>(null);
-      const sideRef = ref<ElRef>(null);
-      const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
+      const dragBarRef = ref(null);
+      const sideRef = ref(null);
+      const currentRoute = ref<RouteLocationNormalized | null>(null);
 
       const { prefixCls } = useDesign('layout-mix-sider');
       const go = useGo();
@@ -347,13 +347,13 @@
   @width: 80px;
   .@{prefix-cls} {
     position: fixed;
+    z-index: @layout-mix-sider-fixed-z-index;
     top: 0;
     left: 0;
-    z-index: @layout-mix-sider-fixed-z-index;
     height: 100%;
     overflow: hidden;
-    background-color: @sider-dark-bg-color;
     transition: all 0.2s ease 0s;
+    background-color: @sider-dark-bg-color;
 
     &-dom {
       height: 100%;
@@ -363,9 +363,9 @@
 
     &-logo {
       display: flex;
+      justify-content: center;
       height: @header-height;
       padding-left: 0 !important;
-      justify-content: center;
 
       img {
         width: @logo-width;
@@ -386,12 +386,12 @@
 
       .@{prefix-cls}-module {
         &__item {
-          font-weight: normal;
           color: rgb(0 0 0 / 65%);
+          font-weight: normal;
 
           &--active {
-            color: @primary-color;
             background-color: unset;
+            color: @primary-color;
           }
         }
       }
@@ -427,9 +427,9 @@
         background-color: @sider-dark-bg-color;
 
         &__title {
-          color: @white;
           border-bottom: none;
           border-bottom: 1px solid @border-color;
+          color: @white;
         }
       }
     }
@@ -455,42 +455,42 @@
       &__item {
         position: relative;
         padding: 12px 0;
+        transition: all 0.3s ease;
         color: rgb(255 255 255 / 65%);
         text-align: center;
         cursor: pointer;
-        transition: all 0.3s ease;
 
         &:hover {
           color: @white;
         }
         // &:hover,
         &--active {
-          font-weight: 700;
-          color: @white;
           background-color: @sider-dark-darken-bg-color;
+          color: @white;
+          font-weight: 700;
 
           &::before {
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 3px;
             height: 100%;
             background-color: @primary-color;
-            content: '';
           }
         }
       }
 
       &__icon {
         margin-bottom: 8px;
-        font-size: 24px;
         transition: all 0.2s;
+        font-size: 24px;
       }
 
       &__name {
         margin-bottom: 0;
-        font-size: 12px;
         transition: all 0.2s;
+        font-size: 12px;
       }
     }
 
@@ -499,19 +499,19 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      font-size: 14px;
+      height: 36px;
+      background-color: @trigger-dark-bg-color;
       color: rgb(255 255 255 / 65%);
+      font-size: 14px;
+      line-height: 36px;
       text-align: center;
       cursor: pointer;
-      background-color: @trigger-dark-bg-color;
-      height: 36px;
-      line-height: 36px;
     }
 
     &.light &-trigger {
-      color: rgb(0 0 0 / 65%);
-      background-color: #fff;
       border-top: 1px solid #eee;
+      background-color: #fff;
+      color: rgb(0 0 0 / 65%);
     }
 
     &-menu-list {
@@ -519,25 +519,25 @@
       top: 0;
       width: 200px;
       height: calc(100%);
-      background-color: #fff;
       transition: all 0.2s;
+      background-color: #fff;
 
       &__title {
         display: flex;
+        align-items: center;
+        justify-content: space-between;
         height: @header-height;
+        transition: unset;
+        border-bottom: 1px solid rgb(238 238 238);
+        opacity: 0;
+        color: @primary-color;
         // margin-left: -6px;
         font-size: 18px;
-        color: @primary-color;
-        border-bottom: 1px solid rgb(238 238 238);
-        opacity: 0%;
-        transition: unset;
-        align-items: center;
-        justify-content: space-between;
 
         &.show {
           min-width: 130px;
-          opacity: 100%;
           transition: all 0.5s ease;
+          opacity: 1;
         }
 
         .pushpin {
@@ -581,11 +581,11 @@
       right: -1px;
       width: 1px;
       height: calc(100% - 50px);
-      cursor: ew-resize;
-      background-color: #f8f8f9;
       border-top: none;
       border-bottom: none;
+      background-color: #f8f8f9;
       box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+      cursor: ew-resize;
     }
   }
 </style>

src/layouts/default/tabs/index.vue

@@ -140,5 +140,5 @@
   });
 </script>
 <style lang="less">
-  @import './index.less';
+  @import url('./index.less');
 </style>

src/router/guard/permissionGuard.ts

@@ -41,7 +41,9 @@ export function createPermissionGuard(router: Router) {
             next((to.query?.redirect as string) || '/');
             return;
           }
-        } catch {}
+        } catch {
+          //
+        }
       }
       next();
       return;

src/utils/env.ts

@@ -30,7 +30,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_UPLOAD_URL,
   } = ENV;
 
-  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
+  if (!/^[a-zA-Z_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
     warn(
       `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
     );

src/utils/http/axios/Axios.ts

@@ -194,10 +194,10 @@ export class VAxios {
   request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
     let conf: CreateAxiosOptions = cloneDeep(config);
     // cancelToken 如果被深拷贝，会导致最外层无法使用cancel方法来取消请求
-    if(config.cancelToken){
-        conf.cancelToken = config.cancelToken
+    if (config.cancelToken) {
+      conf.cancelToken = config.cancelToken;
     }
-    
+
     const transform = this.getTransform();
 
     const { requestOptions } = this.options;

src/utils/http/axios/axiosRetry.ts

@@ -10,7 +10,7 @@ export class AxiosRetry {
   retry(axiosInstance: AxiosInstance, error: AxiosError) {
     // @ts-ignore
     const { config } = error.response;
-    const { waitTime, count } = config?.requestOptions?.retryRequest;
+    const { waitTime, count } = config?.requestOptions?.retryRequest ?? {};
     config.__retryCount = config.__retryCount || 0;
     if (config.__retryCount >= count) {
       return Promise.reject(error);

src/utils/is.ts

@@ -93,6 +93,6 @@ export const isServer = typeof window === 'undefined';
 export const isClient = !isServer;
 
 export function isUrl(path: string): boolean {
-  const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
+  const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
   return reg.test(path);
 }

src/utils/props.ts

 // copy from element-plus
 
 import { warn } from 'vue';
-import { isObject } from '@vue/shared';
-import { fromPairs } from 'lodash-es';
-import type { ExtractPropTypes, PropType } from '@vue/runtime-core';
+import { fromPairs, isObject } from 'lodash-es';
+import type { ExtractPropTypes, PropType } from 'vue';
 import type { Mutable } from './types';
 
 const wrapperKey = Symbol();

src/views/demo/comp/cropper/index.vue

@@ -82,8 +82,8 @@
 <style scoped>
   .container {
     display: flex;
-    width: 100vw;
     align-items: center;
+    width: 100vw;
   }
 
   .cropper-container {

src/views/demo/comp/lazy/Transition.vue

@@ -25,14 +25,14 @@
   .lazy-base-demo {
     &-wrap {
       display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       width: 50%;
       height: 2000px;
       margin: 20px auto;
-      text-align: center;
       background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
+      text-align: center;
     }
 
     &-box {
@@ -47,12 +47,12 @@
   }
 
   .custom-enter {
-    opacity: 0%;
     transform: scale(0.4) translate(100%);
+    opacity: 0;
   }
 
   .custom-enter-to {
-    opacity: 100%;
+    opacity: 1;
   }
 
   .custom-enter-active {
@@ -63,12 +63,12 @@
   }
 
   .custom-leave {
-    opacity: 100%;
+    opacity: 1;
   }
 
   .custom-leave-to {
-    opacity: 0%;
     transform: scale(0.4) translate(-100%);
+    opacity: 0;
   }
 
   .custom-leave-active {

src/views/demo/comp/lazy/index.vue

@@ -29,14 +29,14 @@
   .lazy-base-demo {
     &-wrap {
       display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       width: 50%;
       height: 2000px;
       margin: 20px auto;
-      text-align: center;
       background-color: @component-background;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
+      text-align: center;
     }
 
     &-box {

src/views/demo/comp/scroll/VirtualScroll.vue

@@ -29,8 +29,8 @@
 
   import { Divider } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
-  const data: Recordable[] = (() => {
-    const arr: Recordable[] = [];
+  const data = (() => {
+    const arr: any[] = [];
     for (let index = 1; index < 20000; index++) {
       arr.push({
         title: '列表项' + index,
@@ -49,16 +49,16 @@
   .virtual-scroll-demo {
     &-wrap {
       display: flex;
+      justify-content: center;
       margin: 0 30%;
       background-color: @component-background;
-      justify-content: center;
     }
 
     &__item {
       height: 40px;
       padding: 0 20px;
-      line-height: 40px;
       border-bottom: 1px solid @border-color-base;
+      line-height: 40px;
     }
   }
 </style>

src/views/demo/comp/strength-meter/index.vue

@@ -26,7 +26,7 @@
 <style lang="less" scoped>
   .demo-wrap {
     width: 50%;
-    background-color: @component-background;
     border-radius: 10px;
+    background-color: @component-background;
   }
 </style>