docs: 优化文档构建

.eslintrc

@@ -0,0 +1,65 @@
+{
+    "extends": "@antfu",
+    "rules": {
+        "no-console": "warn",
+        "semi": ["error", "always"],
+        "semi-spacing": ["error", { "before": false, "after": true }],
+        // 分号必须写在行尾，禁止写在行首
+        "semi-style": ["error", "last"],
+        "@typescript-eslint/semi": ["error", "always"],
+        "@typescript-eslint/indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1,
+                "VariableDeclarator": 1,
+                "outerIIFEBody": 1,
+                "MemberExpression": 1,
+                "FunctionDeclaration": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "FunctionExpression": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "CallExpression": {
+                    "arguments": 1
+                },
+                "ArrayExpression": 1,
+                "ObjectExpression": 1,
+                "ImportDeclaration": 1,
+                "flatTernaryExpressions": false,
+                "ignoreComments": false,
+                "offsetTernaryExpressions": true,
+                "ignoredNodes": [
+                    "TemplateLiteral *",
+                    "JSXElement",
+                    "JSXElement > *",
+                    "JSXAttribute",
+                    "JSXIdentifier",
+                    "JSXNamespacedName",
+                    "JSXMemberExpression",
+                    "JSXSpreadAttribute",
+                    "JSXExpressionContainer",
+                    "JSXOpeningElement",
+                    "JSXClosingElement",
+                    "JSXFragment",
+                    "JSXOpeningFragment",
+                    "JSXClosingFragment",
+                    "JSXText",
+                    "JSXEmptyExpression",
+                    "JSXSpreadChild",
+                    "TSTypeParameterInstantiation",
+                    "FunctionExpression > .params[decorators.length > 0]",
+                    "FunctionExpression > .params > :matches(Decorator, :not(:first-child))",
+                    "ClassBody.body > PropertyDefinition[decorators.length > 0] > .key"
+                ]
+            }
+        ],
+        "vue/one-component-per-file": "off",
+        "vue/component-tags-order": ["error", {
+            "order": ["template", "script", "style"]
+        }],
+    }
+}

.gitignore

@@ -11,6 +11,7 @@ lib
 /icon
 package-lock.json
 yarn.lock
+docs/.vitepress/cache
 docs/.vitepress/theme/components/demoCode.json
 docs/zh/components
 

.stylelintrc.js

@@ -1,19 +1,13 @@
 module.exports = {
-    extends: [
-        'stylelint-config-standard',
-        'stylelint-config-rational-order',
-        'stylelint-config-prettier', // 排除与 prettier 冲突的 rule
-    ],
-    plugins: [
-        'stylelint-declaration-block-no-ignored-properties'
-    ],
+    extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
+    plugins: ['stylelint-declaration-block-no-ignored-properties'],
     // https://stylelint.docschina.org/user-guide/rules/
     rules: {
-        "indentation": 4,
-        "no-empty-source": null,
-        "max-empty-lines": 2,
-        "no-duplicate-selectors": null,
-        "at-rule-no-unknown": null,
+        indentation: 4,
+        'no-empty-source': null,
+        'max-empty-lines': 2,
+        'no-duplicate-selectors': null,
+        'at-rule-no-unknown': null,
         'comment-empty-line-before': null,
         'no-invalid-double-slash-comments': null,
         'no-descending-specificity': null,
@@ -28,9 +22,9 @@ module.exports = {
     // https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-14.md
     overrides: [
         {
-          files: ["**/*.less"],
-          customSyntax: "postcss-less"
-        }
+            files: ['**/*.less'],
+            customSyntax: 'postcss-less',
+        },
     ],
     ignoreFiles: [],
-}
+};

.vscode/settings.json

@@ -5,26 +5,18 @@
     "stylelint.validate": [
         "less",
     ],
-    // 每次保存的时候将代码按 eslint 格式进行修复
+    "cSpell.words": [
+        "fesjs",
+        "unref"
+    ],
+    "files.associations": {
+        "*.css": "postcss"
+    },
+    "prettier.enable": false,
+    "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-        // For ESLint
-        "source.fixAll.eslint": true,
+      "source.fixAll.eslint": true,
         // 文件保存时开启 stylelint 自动修复程序
         "source.fixAll.stylelint": true,
     },
-    // json 文件按 prettier 规范格式化
-    "[json]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    // md 文件按 prettier 规范格式化
-    "[md]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "prettier.printWidth": 180,
-    "cSpell.words": [
-        "unref"
-    ],
 }

components/button/index.ts

@@ -1,7 +1,6 @@
 import { withInstall } from '../_util/withInstall';
-import Button from './button';
-
 import type { SFCWithInstall } from '../_util/interface';
+import Button from './button';
 
 export { buttonProps } from './button';
 export type { ButtonProps } from './button';

components/button/style/index.less

@@ -1,8 +1,8 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import './mixin.less';
+@import "../../style/themes/index";
+@import "../../style/mixins/index";
+@import "./mixin.less";
 
-@btn-prefix-cls: ~'@{cls-prefix}-btn';
+@btn-prefix-cls: ~"@{cls-prefix}-btn";
 
 @btn-height-lg: @data-input-height-base + 8;
 @btn-height-base: @data-input-height-base;

components/radio/radio.vue

@@ -1,24 +1,25 @@
 <template>
-    <label
-        :class="wrapperClass"
-        @click="handleClick"
-        @mouseover="handleMouseOver"
-        @mouseout="handleMouseOut"
-    >
-        <span :class="`${prefixCls}-inner`" />
-        <span :class="`${prefixCls}-content`">
-            <slot>{{ label }}</slot>
-        </span>
-    </label>
+  <label
+    :class="wrapperClass"
+    @click="handleClick"
+    @mouseover="handleMouseOver"
+    @mouseout="handleMouseOut"
+  >
+    <span :class="`${prefixCls}-inner`" />
+    <span :class="`${prefixCls}-content`">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import useSelect from '../_util/use/useSelect';
 import { name, radioGroupKey } from '../radio-group/const';
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../_util/constants';
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_util/constants';
 import type { ExtractPublicPropTypes } from '../_util/interface';
 
 const prefixCls = getPrefixCls('radio');
@@ -59,20 +60,19 @@ export default defineComponent({
         });
         const wrapperClass = computed(() => {
             const arr = [`${prefixCls}`];
-            if (checked.value) {
+            if (checked.value)
                 arr.push('is-checked');
-            }
-            if (innerDisabled.value) {
+
+            if (innerDisabled.value)
                 arr.push('is-disabled');
-            }
-            if (hover.value) {
+
+            if (hover.value)
                 arr.push('is-hover');
-            }
+
             if (isGroup) {
                 arr.push('is-item');
-                if (group.props.vertical) {
+                if (group.props.vertical)
                     arr.push('is-item-vertical');
-                }
             }
             return arr;
         });

components/style/index.less

@@ -1,2 +1,2 @@
-@import './themes/index.less';
-@import './core/index.less';
+@import "./themes/index.less";
+@import "./core/index.less";

docs/.vitepress/config.js

@@ -1,26 +1,26 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// eslint-disable-next-line import/no-extraneous-dependencies
+const path = require('node:path');
+const process = require('node:process');
 const vueJsx = require('@vitejs/plugin-vue-jsx');
-const path = require('path');
 const { navbar, sidebar } = require('./configs');
 const { genComponentDoc } = require('./scripts/genComponentDoc');
-const baseConfig = require('./vueTheme/vitepress/config/baseConfig');
 
-const ssrTransformCustomDir = () => ({
-    props: [],
-    needRuntime: true,
-});
+function ssrTransformCustomDir() {
+    return {
+        props: [],
+        needRuntime: true,
+    };
+}
 
 genComponentDoc();
 
 const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/';
 
 module.exports = {
     base: BASE_URL,
-    extends: baseConfig,
     lang: 'zh-CN',
     title: 'Fes Design',
     description: '微众银行中后台设计 Fes Design',
+    appearance: false,
     vite: {
         define: {
             __VUE_OPTIONS_API__: false,
@@ -30,13 +30,9 @@ module.exports = {
                 ignored: ['**/docs/.vitepress/components/**'],
             },
         },
-        optimizeDeps: {
-            exclude: ['@vue/repl'],
-        },
         ssr: {
             // lodash-es 模块是 esm，ssr 渲染的时候编译成 cjs 的引入方式，会引发 nodejs 的模块加载异常错误
             noExternal: ['lodash-es'],
-            external: ['@vue/repl'],
         },
         resolve: {
             extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
@@ -76,5 +72,13 @@ module.exports = {
         ],
         nav: navbar.zh,
         sidebar: sidebar.zh,
+
+        outline: {
+            label: '本页目录',
+        },
+
+        search: {
+            provider: 'local',
+        },
     },
 };

docs/.vitepress/theme/IconDoc/IconDoc.jsx

@@ -1,8 +1,7 @@
-import * as Icons from './icons';
-// eslint-disable-next-line import/no-unresolved
 import { FMessage } from '@fesjs/fes-design';
+import * as Icons from './icons';
 
-const copyToClipboard = (content) => {
+function copyToClipboard(content) {
     const input = document.createElement('input');
     document.body.appendChild(input);
     input.setAttribute('value', content);
@@ -13,9 +12,9 @@ const copyToClipboard = (content) => {
     }
     document.body.removeChild(input);
     return false;
-};
+}
 
-const IconItem = (props, { slots }) => {
+function IconItem(props, { slots }) {
     const copyIconCode = () => {
         FMessage.success(`复制成功 <${props.name} />`);
         copyToClipboard(`<${props.name} />`);
@@ -26,11 +25,11 @@ const IconItem = (props, { slots }) => {
             <span class="icon-name">{props.name}</span>
         </div>
     );
-};
+}
 
 export default () => (
     <div class="icon-doc">
-        {Object.keys(Icons).map((key) => (
+        {Object.keys(Icons).map(key => (
             <IconItem name={key}>{Icons[key]()}</IconItem>
         ))}
     </div>