From 6a6d00eea0eb111054ca577ae12622e0048007e0 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 26 Sep 2023 09:29:21 +0800 Subject: [PATCH 1/5] =?UTF-8?q?chore(docs):=20=E6=96=87=E6=A1=A3=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E6=94=AF=E6=8C=81=E6=96=B0=E7=9A=84=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/components/tag/index.md | 35 ++++++++++++++++------ docs/.vitepress/scripts/constants.js | 8 +---- docs/.vitepress/scripts/genComponentDoc.js | 29 +++++++++++------- 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/docs/.vitepress/components/tag/index.md b/docs/.vitepress/components/tag/index.md index 1732198e..299ebdde 100644 --- a/docs/.vitepress/components/tag/index.md +++ b/docs/.vitepress/components/tag/index.md @@ -14,45 +14,62 @@ app.use(FTag); ### 基础用法 ---BASIC +:::demo +basic.vue +::: ### 可移除标签 设置 `closable` 属性可以定义一个标签是否可移除。 ---CLOSABLE +:::demo +closable.vue +::: ### 动态编辑标签 动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现 ---EDIT +:::demo +edit.vue +::: ### 不同尺寸 Tag 组件提供了以下几种尺寸,可以在不同场景下选择合适的尺寸。 ---SIZE +:::demo +size.vue +::: ### 不同主题 Tag 组件提供了三个不同的主题。 ---THEME +:::demo +theme.vue +::: ### 带图标 ---WITHICON +:::demo +withIcon.vue +::: ### 结合 Form 组件 ---WITHFORM +:::demo +withForm.vue +::: ### 超长省略 ---TOOLTIP +:::demo +tooltip.vue +::: ---CODE +:::code +::: ## Tag Props diff --git a/docs/.vitepress/scripts/constants.js b/docs/.vitepress/scripts/constants.js index 2be71643..17ed94e6 100644 --- a/docs/.vitepress/scripts/constants.js +++ b/docs/.vitepress/scripts/constants.js @@ -1,12 +1,6 @@ exports.SCRIPT_TEMPLATE = ` - `; diff --git a/docs/.vitepress/scripts/genComponentDoc.js b/docs/.vitepress/scripts/genComponentDoc.js index da9caebb..dcf83a8b 100644 --- a/docs/.vitepress/scripts/genComponentDoc.js +++ b/docs/.vitepress/scripts/genComponentDoc.js @@ -113,15 +113,19 @@ async function genComponent(dir, name) { tempCode[`${name}.${demoName}`] = rawCode; tempCode[`${name}.${demoName}-code`] = await highlight(rawCode); - const matchStr = new RegExp( - `--${demoName.toLocaleUpperCase()}\\s`, - 'i', + const dashMatchRegExp = new RegExp(`--${demoName}`, 'ig'); + const nameMatchRegExp = new RegExp( + `:::demo[\\s]*${demoName}\.vue[\\s]*:::`, + 'g', ); - if (matchStr.test(fileContent)) { - fileContent = fileContent.replace( - matchStr, - demoContent.join('\n\n\n'), - ); + + if ( + dashMatchRegExp.test(fileContent) || + nameMatchRegExp.test(fileContent) + ) { + fileContent = fileContent + .replace(dashMatchRegExp, demoContent.join('\n\n\n')) + .replace(nameMatchRegExp, demoContent.join('\n\n\n')); } else { demoMDStrs.push(...demoContent); } @@ -131,13 +135,18 @@ async function genComponent(dir, name) { const scriptStr = SCRIPT_TEMPLATE.replace( 'IMPORT_EXPRESSION', scriptCode.imports.join('\n'), - ).replace('COMPONENTS', scriptCode.components.join(',\n')); + ); demoMDStrs.push(scriptStr); fse.outputFileSync( output, - fileContent.replace('--CODE', demoMDStrs.join('\n\n')), + fileContent + .replace('--CODE', demoMDStrs.join('\n\n')) + .replace( + new RegExp(`:::code[\\s\\S]*:::`), + demoMDStrs.join('\n\n'), + ), ); if (Object.keys(tempCode).length) { From 392c9ff0509b8d4441371acaf0fe60ca59ee4d0a Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 26 Sep 2023 09:29:51 +0800 Subject: [PATCH 2/5] =?UTF-8?q?style:=20=E4=BB=A3=E7=A0=81=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.js | 2 +- .stylelintrc.js | 22 ++++++++++------------ jest.setup.js | 2 +- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index 5b52bed2..5f5d0dda 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -5,4 +5,4 @@ module.exports = { tabWidth: 4, useTabs: false, printWidth: 80, -} \ No newline at end of file +}; diff --git a/.stylelintrc.js b/.stylelintrc.js index 8b69a928..e7a21793 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -4,16 +4,14 @@ module.exports = { 'stylelint-config-rational-order', 'stylelint-config-prettier', // 排除与 prettier 冲突的 rule ], - plugins: [ - 'stylelint-declaration-block-no-ignored-properties' - ], + 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 +26,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: [], -} \ No newline at end of file +}; diff --git a/jest.setup.js b/jest.setup.js index c6df8e11..f66f6239 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1 +1 @@ -import { config } from '@vue/test-utils'; +// import { config } from '@vue/test-utils'; From 9977839e01ad66136d96d6c6f50360f1d32b957c Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 26 Sep 2023 10:00:38 +0800 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20docs=E6=9E=84=E5=BB=BA=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/scripts/genComponentDoc.js | 53 +++++++++-------- docs/.vitepress/scripts/transform.js | 68 ---------------------- 2 files changed, 26 insertions(+), 95 deletions(-) delete mode 100644 docs/.vitepress/scripts/transform.js diff --git a/docs/.vitepress/scripts/genComponentDoc.js b/docs/.vitepress/scripts/genComponentDoc.js index dcf83a8b..5925354e 100644 --- a/docs/.vitepress/scripts/genComponentDoc.js +++ b/docs/.vitepress/scripts/genComponentDoc.js @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const path = require('path'); -const fs = require('fs'); const fse = require('fs-extra'); const shiki = require('shiki'); @@ -12,8 +11,8 @@ const CODE_PATH = path.join( ); function getDemoCode() { - if (fs.existsSync(CODE_PATH)) { - return JSON.parse(fs.readFileSync(CODE_PATH, 'utf-8')); + if (fse.existsSync(CODE_PATH)) { + return JSON.parse(fse.readFileSync(CODE_PATH, 'utf-8')); } return { @@ -65,14 +64,14 @@ const highlight = async (code, lang = 'vue') => { .replace(/^/, '
');
 };
 
-async function genComponent(dir, name) {
+async function genComponentExample(dir, name) {
     const output = genOutputPath(name);
     const indexPath = path.join(dir, 'index.md');
-    if (!fs.existsSync(indexPath)) return;
+    if (!fse.existsSync(indexPath)) return;
 
-    let fileContent = fs.readFileSync(indexPath, 'utf-8');
+    let fileContent = fse.readFileSync(indexPath, 'utf-8');
 
-    const demos = fs.readdirSync(dir);
+    const demos = fse.readdirSync(dir);
     const demoMDStrs = [];
     const scriptCode = {
         imports: [],
@@ -82,7 +81,7 @@ async function genComponent(dir, name) {
     for (const filename of demos) {
         const fullPath = path.join(dir, filename);
         if (
-            fs.statSync(fullPath).isFile() &&
+            fse.statSync(fullPath).isFile() &&
             path.extname(fullPath) === '.vue'
         ) {
             const demoContent = [];
@@ -100,7 +99,7 @@ async function genComponent(dir, name) {
             fse.outputFileSync(
                 tempCompPath,
                 handleCompDoc(
-                    fs.readFileSync(fullPath, 'utf-8'),
+                    fse.readFileSync(fullPath, 'utf-8'),
                     name,
                     demoName,
                 ),
@@ -109,7 +108,7 @@ async function genComponent(dir, name) {
 
             demoContent.push(`<${compName} />`);
 
-            const rawCode = fs.readFileSync(fullPath, 'utf-8');
+            const rawCode = fse.readFileSync(fullPath, 'utf-8');
             tempCode[`${name}.${demoName}`] = rawCode;
             tempCode[`${name}.${demoName}-code`] = await highlight(rawCode);
 
@@ -158,9 +157,9 @@ async function genComponent(dir, name) {
 }
 
 async function genComponents(src) {
-    const components = fs.readdirSync(src);
+    const components = fse.readdirSync(src);
     for (const name of components) {
-        await genComponent(path.join(src, name), name);
+        await genComponentExample(path.join(src, name), name);
     }
 }
 
@@ -169,14 +168,15 @@ async function watch(src) {
         dir: src,
         debounce: 50,
     });
+
     await watcher.init();
-    const gen = (data) => {
-        const fullPath = path.join(src, data.path);
+
+    const handleGen = (data) => {
         // 只监听目录变更
-        if (fs.statSync(fullPath).isDirectory()) {
+        if (data.stats.isDirectory()) {
             const pathSeps = data.path.split(path.sep);
-            const componentName = pathSeps[0];
-            genComponent(path.join(src, componentName), componentName);
+            const pkgName = pathSeps[0];
+            genComponentExample(path.join(src, pkgName), pkgName);
         }
     };
     const handleDelete = (data) => {
@@ -194,26 +194,25 @@ async function watch(src) {
             });
 
             if (hasDeleteCode) {
-                fs.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
+                fse.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
             }
             const outputPath = genOutputPath(name);
-            if (fs.existsSync(outputPath)) {
-                fs.unlinkSync(outputPath);
+            if (fse.existsSync(outputPath)) {
+                fse.unlinkSync(outputPath);
             }
         } else if (data.stats.isFile() && path.extname(data.path) === '.vue') {
+            const pkgName = pathSeps[0];
             // 删除组件属性
-            const codekey = `${pathSeps[0]}.${path.basename(
-                data.path,
-                '.vue',
-            )}`;
+            const codekey = `${pkgName}.${path.basename(data.path, '.vue')}`;
             if (code[codekey]) {
                 delete code[codekey];
-                fs.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
+                fse.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
             }
-            genComponent(path.join(src, pathSeps[0]), pathSeps[0]);
+            genComponentExample(path.join(src, pkgName), pkgName);
         }
     };
-    watcher.on('+', gen);
+
+    watcher.on('+', handleGen);
     watcher.on('-', handleDelete);
 }
 
diff --git a/docs/.vitepress/scripts/transform.js b/docs/.vitepress/scripts/transform.js
deleted file mode 100644
index 0e074cbf..00000000
--- a/docs/.vitepress/scripts/transform.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const fs = require('fs');
-const fse = require('fs-extra');
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function genComponent(dir, name) {
-    const indexPath = path.join(dir, 'index.md');
-    if (!fs.existsSync(indexPath)) return;
-
-    let fileContent = fs.readFileSync(indexPath, 'utf-8');
-
-    const demos = fs.readdirSync(dir);
-    const demoMDStrs = [];
-    for (const demoName of demos) {
-        const fullPath = path.join(dir, demoName);
-        if (fs.statSync(fullPath).isDirectory(fullPath)) {
-            const codePath = path.join(fullPath, 'index.vue');
-            const textPath = path.join(fullPath, 'index.md');
-            const demoContent = [];
-            if (fs.existsSync(textPath)) {
-                demoContent.push(fs.readFileSync(textPath, 'utf-8'));
-            }
-
-            if (fs.existsSync(codePath)) {
-                fs.writeFileSync(
-                    fullPath + '.vue',
-                    fs.readFileSync(codePath, 'utf-8'),
-                );
-                demoContent.push(`--${demoName.toLocaleUpperCase()}`);
-            }
-            if (
-                demoContent.length &&
-                fileContent.indexOf(
-                    `PREVIEW_${demoName.toLocaleUpperCase()}`,
-                ) !== -1
-            ) {
-                fileContent = fileContent.replace(
-                    `PREVIEW_${demoName.toLocaleUpperCase()}`,
-                    demoContent.join('\n\n'),
-                );
-            } else {
-                demoMDStrs.push(...demoContent);
-            }
-
-            fse.removeSync(fullPath);
-        }
-    }
-
-    demoMDStrs.push('--CODE');
-
-    fs.writeFileSync(
-        indexPath,
-        fileContent.replace('PREVIEW_CODE', demoMDStrs.join('\n\n')),
-    );
-}
-
-function genComponents(src) {
-    const components = fs.readdirSync(src);
-    for (const name of components) {
-        genComponent(path.join(src, name), name);
-    }
-}
-
-(() => {
-    const src = path.join(process.cwd(), './docs/.vitepress/components');
-    genComponents(src);
-})();

From eb05535624586a1658e9a4bc88fa77b31019b35f Mon Sep 17 00:00:00 2001
From: ocean-gao 
Date: Tue, 26 Sep 2023 10:03:56 +0800
Subject: [PATCH 4/5] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/components/tag/index.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/.vitepress/components/tag/index.md b/docs/.vitepress/components/tag/index.md
index 299ebdde..d0b44536 100644
--- a/docs/.vitepress/components/tag/index.md
+++ b/docs/.vitepress/components/tag/index.md
@@ -68,8 +68,7 @@ withForm.vue
 tooltip.vue
 :::
 
-:::code
-:::
+:::code:::
 
 ## Tag Props
 

From e589e95fe1cbb9f65c4dede578f7e22a44706fb9 Mon Sep 17 00:00:00 2001
From: ocean-gao 
Date: Tue, 26 Sep 2023 10:42:12 +0800
Subject: [PATCH 5/5] =?UTF-8?q?chore(docs):=20=E6=96=87=E6=A1=A3=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=A2=9E=E5=8A=A0code=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/components/tag/index.md    |  2 --
 docs/.vitepress/scripts/genComponentDoc.js | 24 ++++++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/docs/.vitepress/components/tag/index.md b/docs/.vitepress/components/tag/index.md
index d0b44536..55586838 100644
--- a/docs/.vitepress/components/tag/index.md
+++ b/docs/.vitepress/components/tag/index.md
@@ -68,8 +68,6 @@ withForm.vue
 tooltip.vue
 :::
 
-:::code:::
-
 ## Tag Props
 
 | 属性            | 说明                                                        | 类型    | 默认值    |
diff --git a/docs/.vitepress/scripts/genComponentDoc.js b/docs/.vitepress/scripts/genComponentDoc.js
index 5925354e..71836cb5 100644
--- a/docs/.vitepress/scripts/genComponentDoc.js
+++ b/docs/.vitepress/scripts/genComponentDoc.js
@@ -113,18 +113,18 @@ async function genComponentExample(dir, name) {
             tempCode[`${name}.${demoName}-code`] = await highlight(rawCode);
 
             const dashMatchRegExp = new RegExp(`--${demoName}`, 'ig');
-            const nameMatchRegExp = new RegExp(
+            const colonMatchRegExp = new RegExp(
                 `:::demo[\\s]*${demoName}\.vue[\\s]*:::`,
                 'g',
             );
 
             if (
                 dashMatchRegExp.test(fileContent) ||
-                nameMatchRegExp.test(fileContent)
+                colonMatchRegExp.test(fileContent)
             ) {
                 fileContent = fileContent
                     .replace(dashMatchRegExp, demoContent.join('\n\n\n'))
-                    .replace(nameMatchRegExp, demoContent.join('\n\n\n'));
+                    .replace(colonMatchRegExp, demoContent.join('\n\n\n'));
             } else {
                 demoMDStrs.push(...demoContent);
             }
@@ -138,14 +138,22 @@ async function genComponentExample(dir, name) {
 
     demoMDStrs.push(scriptStr);
 
+    const dashCodeMatchRegExp = new RegExp(`--CODE`);
+    const colonCodeMatchRegExp = new RegExp(`:::code[\\s\\S]*:::`);
+    if (
+        !(
+            dashCodeMatchRegExp.test(fileContent) ||
+            colonCodeMatchRegExp.test(fileContent)
+        )
+    ) {
+        const appendContent = '\n\n:::code:::\n\n';
+        fileContent = fileContent + appendContent;
+    }
     fse.outputFileSync(
         output,
         fileContent
-            .replace('--CODE', demoMDStrs.join('\n\n'))
-            .replace(
-                new RegExp(`:::code[\\s\\S]*:::`),
-                demoMDStrs.join('\n\n'),
-            ),
+            .replace(dashCodeMatchRegExp, demoMDStrs.join('\n\n'))
+            .replace(colonCodeMatchRegExp, demoMDStrs.join('\n\n')),
     );
 
     if (Object.keys(tempCode).length) {