chore: add some notes

.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
 

.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

.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',

.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

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');

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();
 

build/vite/plugin/html.ts

@@ -1,28 +1,38 @@
+/**
+ * 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';
 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(),
               },
             },
           ]

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() {

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());

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) {

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';

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() {

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';
 

build/vite/plugin/visualizer.ts

@@ -1,3 +1,6 @@
+/**
+ * Package file volume analysis
+ */
 import visualizer from 'rollup-plugin-visualizer';
 import { isReportMode } from '../../utils';
 

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];

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)

mock/demo/select-demo.ts

@@ -18,6 +18,7 @@ export default [
     timeout: 4000,
     method: 'get',
     response: ({ query }) => {
+      console.log(query);
       return resultSuccess(demoList);
     },
   },

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",

prettier.config.js

@@ -17,12 +17,4 @@ module.exports = {
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'lf',
   rangeStart: 0,
-  overrides: [
-    {
-      files: '*.md',
-      options: {
-        tabWidth: 2,
-      },
-    },
-  ],
 };

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 = () => {

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',