diff --git a/.editorconfig b/.editorconfig
index 9a71884a30262edcd757ad75404b6f55a0b549b7..1ed2d57757299a401fb7ee10b886d39b4a8d1dd6 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,7 +3,7 @@ root = true
 [*]
 charset=utf-8
 end_of_line=lf
-insert_final_newline=false
+insert_final_newline=true
 indent_style=space
 indent_size=2
 
diff --git a/.eslintignore b/.eslintignore
index 114827805fef7fc0ece66babf90c2153522d488e..348631b27b0cf9027fcc4c89f4c790f9799bc014 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,25 +1,15 @@
 
 *.sh
 node_modules
-lib
 *.md
-*.scss
 *.woff
 *.ttf
 .vscode
 .idea
-/dist/
-/mock/
+dist
 /public
 /docs
-.vscode
+.husky
 .local
 /bin
-/build
-/config
 Dockerfile
-vue.config.js
-commit-lint.js
-postcss.config.js
-stylelint.config.js
-commitlint.config.js
diff --git a/.eslintrc.js b/.eslintrc.js
index 68cccde845d4944b686f69008a5ecc56ad8900ff..abda4d347568049a143d374916862c823beb59ee 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,21 +23,7 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     'vue/custom-event-name-casing': 'off',
     'no-use-before-define': 'off',
-    // 'no-setting-before-define': [
-    //   'error',
-    //   {
-    //     functions: false,
-    //     classes: true,
-    //   },
-    // ],
     '@typescript-eslint/no-use-before-define': 'off',
-    // '@typescript-eslint/no-setting-before-define': [
-    //   'error',
-    //   {
-    //     functions: false,
-    //     classes: true,
-    //   },
-    // ],
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 4ee3050fdee13ee727c1461bb4d80b49e536ce38..08d387c205169779cab0f9d707b20815b080cab2 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -4,5 +4,9 @@
 
 [ -n "$CI" ] && exit 0
 
+# Check the file name
+# ! ls-lint cannot be used normally in mac pro of M1 system.
 npm run lint:ls-lint
+
+# Format and submit code according to lintstagedrc.js configuration
 npm run lint:lint-staged
diff --git a/build/vite/optimizer.ts b/build/vite/optimizer.ts
index 0825be765463f6882f9500dead00314dcb257e74..518ea2ab8dc00853972dad61672808d7d87cbfca 100644
--- a/build/vite/optimizer.ts
+++ b/build/vite/optimizer.ts
@@ -1,3 +1,4 @@
+// TODO
 import type { GetManualChunk, GetManualChunkApi } from 'rollup';
 
 //
@@ -10,6 +11,7 @@ const vendorLibs: { match: string[]; output: string }[] = [
 
 // @ts-ignore
 export const configManualChunk: GetManualChunk = (id: string, api: GetManualChunkApi) => {
+  console.log(api);
   if (/[\\/]node_modules[\\/]/.test(id)) {
     const matchItem = vendorLibs.find((item) => {
       const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig');
diff --git a/build/vite/plugin/gzip.ts b/build/vite/plugin/gzip.ts
index b9cac8915120df37c25f326056b3f42fe8aaee26..600c35e17307e2da8d67c5c34f07a87e3a3d18e7 100644
--- a/build/vite/plugin/gzip.ts
+++ b/build/vite/plugin/gzip.ts
@@ -1,6 +1,11 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ */
+import type { Plugin } from 'vite';
+
 import gzipPlugin from 'rollup-plugin-gzip';
 import { isBuildGzip } from '../../utils';
-import { Plugin } from 'vite';
+
 export function configGzipPlugin(isBuild: boolean): Plugin | Plugin[] {
   const useGzip = isBuild && isBuildGzip();
 
diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts
index f90d35dd46c29d9fe31aae35e5860741da80cda9..6612dc8fbdc342c41f60596642b60299329bfba6 100644
--- a/build/vite/plugin/html.ts
+++ b/build/vite/plugin/html.ts
@@ -1,5 +1,10 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
 import type { Plugin } from 'vite';
 import type { ViteEnv } from '../../utils';
+
 import html from 'vite-plugin-html';
 
 import pkg from '../../../package.json';
@@ -7,22 +12,27 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
 
 export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
   const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
   const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
 
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
+  };
+
   const htmlPlugin: Plugin[] = html({
     minify: isBuild,
     inject: {
+      // Inject data into ejs template
       injectData: {
         title: VITE_GLOB_APP_TITLE,
       },
+      // Embed the generated app.config.js file
       tags: isBuild
         ? [
             {
               tag: 'script',
               attrs: {
-                src: `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${
-                  pkg.version
-                }-${new Date().getTime()}`,
+                src: getAppConfigSrc(),
               },
             },
           ]
diff --git a/build/vite/plugin/imagemin.ts b/build/vite/plugin/imagemin.ts
index f4c5532ccdc4de3832fa6cf32ddcbda5b398522d..1aa083cb749a7933d44105fc256e800f53442c2e 100644
--- a/build/vite/plugin/imagemin.ts
+++ b/build/vite/plugin/imagemin.ts
@@ -1,3 +1,5 @@
+// Image resource files used to compress the output of the production environment
+
 import viteImagemin from 'vite-plugin-imagemin';
 
 export function configImageminPlugin() {
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 3fbf28c35a226e280e26681203990f769c1d32b5..108c270a4d73a99d3ab1b7cdf4bcffb8b7be9af2 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -1,6 +1,9 @@
 import type { Plugin } from 'vite';
 
 import PurgeIcons from 'vite-plugin-purge-icons';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import legacy from '@vitejs/plugin-legacy';
 
 import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
@@ -12,11 +15,18 @@ import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 
-// gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK } = viteEnv;
+  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY } = viteEnv;
 
-  const vitePlugins: (Plugin | Plugin[])[] = [];
+  const vitePlugins: (Plugin | Plugin[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+  ];
+
+  // @vitejs/plugin-legacy
+  VITE_LEGACY && isBuild && vitePlugins.push(legacy());
 
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
@@ -36,6 +46,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   //vite-plugin-theme
   vitePlugins.push(configThemePlugin());
 
+  // The following plugins only work in the production environment
   if (isBuild) {
     //vite-plugin-imagemin
     VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
diff --git a/build/vite/plugin/mock.ts b/build/vite/plugin/mock.ts
index f55050a1b4aa5d8b5f6c67646a9d5c3f5ca57a44..c1d61ff2f8cca7e1ab85a2837da88981d5cdeac9 100644
--- a/build/vite/plugin/mock.ts
+++ b/build/vite/plugin/mock.ts
@@ -1,3 +1,7 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
 import { viteMockServe } from 'vite-plugin-mock';
 
 export function configMockPlugin(isBuild: boolean) {
diff --git a/build/vite/plugin/pwa.ts b/build/vite/plugin/pwa.ts
index 82b75e36f8ac8997d8802c5c04631b454448a48c..f273017845965a95167f5f9fe5ee71972ab0aa42 100644
--- a/build/vite/plugin/pwa.ts
+++ b/build/vite/plugin/pwa.ts
@@ -1,3 +1,8 @@
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+
 import { VitePWA } from 'vite-plugin-pwa';
 
 import { ViteEnv } from '../../utils';
diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts
index 4cce9095bd231954ae431ba5b91403f6a60dfb40..c656093415869e43046ac1d8f4421db472fcc761 100644
--- a/build/vite/plugin/styleImport.ts
+++ b/build/vite/plugin/styleImport.ts
@@ -1,3 +1,8 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+
 import styleImport from 'vite-plugin-style-import';
 
 export function configStyleImportPlugin() {
diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
index 865e748a87d041624209f0cbf890e092eeb8c4f6..beb8251be7a14baa4ea64cffb906329a67656c57 100644
--- a/build/vite/plugin/theme.ts
+++ b/build/vite/plugin/theme.ts
@@ -1,3 +1,7 @@
+/**
+ * Vite plugin for website theme color switching
+ * https://github.com/anncwb/vite-plugin-theme
+ */
 import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
 import { getThemeColors, generateColors } from '../../config/themeConfig';
 
diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts
index 52a3a536e7a2ffdc83779d184c58214c48e5666a..a0e2c343fc50bf0ad476f85f26029022c8ad39e5 100644
--- a/build/vite/plugin/visualizer.ts
+++ b/build/vite/plugin/visualizer.ts
@@ -1,3 +1,6 @@
+/**
+ * Package file volume analysis
+ */
 import visualizer from 'rollup-plugin-visualizer';
 import { isReportMode } from '../../utils';
 
diff --git a/build/vite/proxy.ts b/build/vite/proxy.ts
index 0cf1874fd89010271cd093fa1badf9d20bd4995e..4ec57b959f942457602c4ccfd293996e03198c27 100644
--- a/build/vite/proxy.ts
+++ b/build/vite/proxy.ts
@@ -1,3 +1,6 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
 import type { ServerOptions } from 'http-proxy';
 
 type ProxyItem = [string, string];
diff --git a/mock/_util.ts b/mock/_util.ts
index 4cd7d1c00d3e5acc6182ec259be8b444c7dc4131..912c544891a2b578ca00bf92a5a9af8edb985d8c 100644
--- a/mock/_util.ts
+++ b/mock/_util.ts
@@ -38,7 +38,7 @@ export function resultError(message = 'Request failed', { code = -1, result = nu
 }
 
 export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
-  let offset = (pageNo - 1) * Number(pageSize);
+  const offset = (pageNo - 1) * Number(pageSize);
   const ret =
     offset + Number(pageSize) >= array.length
       ? array.slice(offset, array.length)
diff --git a/mock/demo/select-demo.ts b/mock/demo/select-demo.ts
index d56440618f785de4826a37ccdcd14697218431b2..a785a1612153551a6907f51fbbc57bcce91cf93b 100644
--- a/mock/demo/select-demo.ts
+++ b/mock/demo/select-demo.ts
@@ -18,6 +18,7 @@ export default [
     timeout: 4000,
     method: 'get',
     response: ({ query }) => {
+      console.log(query);
       return resultSuccess(demoList);
     },
   },
diff --git a/package.json b/package.json
index 4d0d755bedf87fc6e7144485461025b111668027..5d321cb387abdc094d3b7ccaa2f62aa36e565a66 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,7 @@
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "npx rimraf node_modules",
     "typecheck": "vuedx-typecheck .",
-    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" ",
-    "lint:eslint:fix": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
+    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:ls-lint": "ls-lint",
diff --git a/prettier.config.js b/prettier.config.js
index e0f42b9d9509b9b918a5542b36908cf9f8fb06e9..0c20bc90f68d15ced95d488f199d566c393d81b8 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -17,12 +17,4 @@ module.exports = {
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'lf',
   rangeStart: 0,
-  overrides: [
-    {
-      files: '*.md',
-      options: {
-        tabWidth: 2,
-      },
-    },
-  ],
 };
diff --git a/src/components/Description/src/index.tsx b/src/components/Description/src/index.tsx
index ab03437fe26fef87606656e1ff0cee4812e0afa3..a6ab99559285922a70939b451487616822633662 100644
--- a/src/components/Description/src/index.tsx
+++ b/src/components/Description/src/index.tsx
@@ -84,35 +84,36 @@ export default defineComponent({
 
     function renderItem() {
       const { schema, data } = unref(getProps);
-      return unref(schema).map((item) => {
-        const { render, field, span, show, contentMinWidth } = item;
-
-        if (show && isFunction(show) && !show(data)) {
-          return null;
-        }
-
-        const getContent = () => {
-          const _data = unref(data);
-          const getField = get(_data, field);
-          return isFunction(render) ? render(getField, _data) : getField ?? '';
-        };
-
-        const width = contentMinWidth;
-        return (
-          <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
-            {() => {
-              if (!contentMinWidth) {
-                return getContent();
-              }
-              const style: CSSProperties = {
-                minWidth: `${width}px`,
-              };
-              return <div style={style}>{getContent()}</div>;
-            }}
-          </Descriptions.Item>
-        );
-      })
-      .filter((item) => !!item);
+      return unref(schema)
+        .map((item) => {
+          const { render, field, span, show, contentMinWidth } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          const getContent = () => {
+            const _data = unref(data);
+            const getField = get(_data, field);
+            return isFunction(render) ? render(getField, _data) : getField ?? '';
+          };
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
+              {() => {
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
     }
 
     const renderDesc = () => {
diff --git a/stylelint.config.js b/stylelint.config.js
index 297925cc869d2f8580fa5b227bb8b9a4bb1daee6..f76f7405975866e66c018ca4a050e1fd73566b8f 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -28,7 +28,7 @@ module.exports = {
         ignore: ['after-comment', 'first-nested'],
       },
     ],
-    // 指定声明块内属性的字母顺序
+    // Specify the alphabetical order of the attributes in the declaration block
     'order/properties-order': [
       'position',
       'top',
diff --git a/vite.config.ts b/vite.config.ts
index 71a4e53ae4d0cf93154fe1a2a51df89fe9a801a9..b344f6fd11d7138b4b60db7bda49060e96c3ac01 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,7 @@
 import type { UserConfig, ConfigEnv } from 'vite';
-import { resolve } from 'path';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import legacy from '@vitejs/plugin-legacy';
 
 import { loadEnv } from 'vite';
+import { resolve } from 'path';
 
 import { generateModifyVars } from './build/config/themeConfig';
 import { createProxy } from './build/vite/proxy';
@@ -18,11 +15,14 @@ function pathResolve(dir: string) {
   return resolve(__dirname, '.', dir);
 }
 
-const root = process.cwd();
-
 export default ({ command, mode }: ConfigEnv): UserConfig => {
+  const root = process.cwd();
+
   const env = loadEnv(mode, root);
+
+  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
   const viteEnv = wrapperEnv(env);
+
   const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
 
   const isBuild = command === 'build';
@@ -32,12 +32,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     root,
     alias: [
       {
+        // /@/xxxx  =>  src/xxx
         find: /^\/@\//,
         replacement: pathResolve('src') + '/',
       },
     ],
     server: {
       port: VITE_PORT,
+      // Load proxy configuration from .env
       proxy: createProxy(VITE_PROXY),
       hmr: {
         overlay: true,
@@ -50,9 +52,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       terserOptions: {
         compress: {
           keep_infinity: true,
+          // Used to delete console in production environment
           drop_console: VITE_DROP_CONSOLE,
         },
       },
+      // Turning off brotliSize display can slightly reduce packaging time
       brotliSize: false,
       chunkSizeWarningLimit: 1200,
     },
@@ -68,6 +72,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         less: {
           modifyVars: {
+            // Used for global import to avoid the need to import each style file separately
             // reference:  Avoid repeated references
             hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
             ...generateModifyVars(),
@@ -77,14 +82,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       },
     },
 
-    plugins: [
-      vue(),
-      vueJsx(),
-      ...(VITE_LEGACY && isBuild ? [legacy()] : []),
-      ...createVitePlugins(viteEnv, isBuild),
-    ],
+    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
+    plugins: createVitePlugins(viteEnv, isBuild),
 
     optimizeDeps: {
+      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
       include: ['@iconify/iconify'],
     },
   };