chore: optimizing generate-css-vars.js

package.json

@@ -23,6 +23,7 @@
     "build:example": "gulp --gulpfile script/gulpfile.example.js --cwd ./",
     "build:assets": "cross-env NODE_ENV=production gulp assets:build --gulpfile script/gulpfile.dist.js --cwd ./",
     "update:icons": "node script/update-icons.js",
+    "update:css": "node script/generate-css-vars.js",
     "lintfix": "eslint '{src,example}/**/*.{js,ts}' --fix",
     "lint": "eslint '{src,example}/**/*.{js,ts}'",
     "format": "prettier {src,example,script}/**/*.{js,ts,wxss,less,wxml,html,json,md,wxs} --write",

script/generate-css-vars.js

@@ -1,6 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+
 const combine = {
   avatar: ['avatar-group', 'avatar'],
   cell: ['cell-group', 'cell'],
@@ -17,52 +19,110 @@ const combine = {
   tabs: ['tabs', 'tab-panel'],
   'tab-bar': ['tab-bar', 'tab-bar-item'],
   grid: ['grid', 'grid-item'],
+  layout: ['row', 'col'],
+  form: ['form', 'form-item'],
 };
 
-function resolveCwd(...args) {
+const resolveCwd = (...args) => {
   args.unshift(process.cwd());
   return path.join(...args);
-}
+};
 
-const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+const findFilePath = (componentName) => resolveCwd(`src/${componentName}/${componentName}.less`);
 
-const matchReg = /(?<=var).*?(?=;)/g;
+const getAllComponentName = async (dirPath) => {
+  const items = await fs.promises.readdir(dirPath, { withFileTypes: true });
+  return items.filter((item) => item.isDirectory()).map((item) => item.name);
+};
 
-// 使用 v2 文件夹下 _var.less 文件
-const lessPath = [];
-if (combine[COMPONENT_NAME]) {
-  combine[COMPONENT_NAME].forEach((item) => {
-    lessPath.push(resolveCwd(`src/${item}/${item}.less`));
-  });
-} else {
-  lessPath.push(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.less`));
-}
-
-// 追加到文件
-const cssVariableHeadContent = `\n\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
-const cssVariableHeadContentEn = `\n\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
-
-fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableHeadContent);
-fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableHeadContentEn);
-
-// 读取 less 文件内容
-lessPath.forEach((item) => {
-  if (fs.existsSync(item)) {
-    fs.readFile(item, 'utf8', (err, file) => {
-      if (err) {
-        console.log('please execute npm run update:css first!', err);
-        return;
-      }
-      const list = file.match(matchReg)?.sort();
-      let cssVariableBodyContent = '';
-      list?.forEach((item) => {
-        cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
-          item.indexOf(',') + 2,
-          item.length - 1,
-        )} | - \n`;
-      });
-      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableBodyContent);
-      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableBodyContent);
+const generateCssVariables = async (componentName) => {
+  const lessPath = [];
+
+  let cssVariableBodyContent = '';
+
+  if (combine[componentName]) {
+    combine[componentName].forEach((item) => {
+      lessPath.push(findFilePath(item));
     });
+  } else {
+    lessPath.push(findFilePath(componentName));
   }
-});
+
+  const validPaths = lessPath.filter((item) => fs.existsSync(item));
+
+  // 使用 fs.promises.readFile 并行读取文件
+  const fileContents = await Promise.all(validPaths.map((item) => fs.promises.readFile(item, 'utf8')));
+
+  fileContents.forEach((file) => {
+    const matchReg = /(?<=var)[\s\S]*?(?=;)/g;
+
+    const list = file.match(matchReg)?.sort();
+
+    list?.forEach((item) => {
+      cssVariableBodyContent += `${item.slice(1, item.indexOf(',')).trim()} | ${item
+        .slice(item.indexOf(',') + 2, item.length - 1)
+        .trim()} | - \n`;
+    });
+  });
+
+  return cssVariableBodyContent;
+};
+
+/**
+ * 替换文档中的 CSS 变量部分
+ * @param {string} filePath - 文档路径
+ * @param {string} headContent - 变量表头部内容
+ * @param {string} variables - 生成的变量内容
+ */
+const updateDocVariables = (filePath, headContent, variables) => {
+  const path = resolveCwd(filePath);
+
+  if (!fs.existsSync(path)) return;
+
+  const content = fs.readFileSync(path, 'utf8');
+  const cssVariablesSection = `\n${headContent}${variables}`;
+
+  // 检查是否存在 ### CSS Variables 部分
+  if (content.includes('### CSS Variables')) {
+    // 替换现有部分
+    const newContent = content.replace(/(^|\n+)### CSS Variables[\s\S]*?(?=###|$)/, cssVariablesSection);
+    fs.writeFileSync(path, newContent, 'utf8');
+  } else {
+    // 追加到文件末尾
+    const trimmedContent = content.trimEnd();
+    const newContent = `${trimmedContent}\n${cssVariablesSection}`;
+    fs.writeFileSync(path, newContent, 'utf8');
+  }
+};
+
+// 批量处理所有组件
+const processAllComponents = async () => {
+  const cssVariableHeadContent = `\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+  const cssVariableHeadContentEn = `\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+
+  let COMPONENT_NAMES = [];
+  if (COMPONENT_NAME === 'all') {
+    COMPONENT_NAMES = await getAllComponentName(resolveCwd('src'));
+  } else {
+    COMPONENT_NAMES = [COMPONENT_NAME];
+  }
+
+  // 并行处理所有组件
+  await Promise.all(
+    COMPONENT_NAMES.map(async (name) => {
+      const variables = await generateCssVariables(name);
+      if (variables) {
+        updateDocVariables(`src/${name}/README.md`, cssVariableHeadContent, variables);
+        updateDocVariables(`src/${name}/README.en-US.md`, cssVariableHeadContentEn, variables);
+        console.log(`✅ 组件 "${name}" 文档更新完成`);
+      } else {
+        console.log(`${name}" 没有找到 CSS 变量`);
+      }
+    }),
+  );
+};
+
+// 执行入口
+processAllComponents().catch((err) =>
+  console.error(`${COMPONENT_NAME === 'all' ? '❌ 批量处理失败:' : `${COMPONENT_NAME}处理失败`}`, err),
+);

src/action-sheet/README.en-US.md

@@ -42,12 +42,13 @@ t-class-content | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-color | @border-level-1-color | - 
 --td-action-sheet-border-radius | @radius-extra-large | - 
---td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-color | @text-color-primary | - 
 --td-action-sheet-cancel-height | 96rpx | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-color | @text-color-primary | - 
+--td-action-sheet-description-color | @text-color-placeholder | - 
+--td-action-sheet-gap-color | @bg-color-page | - 
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
 --td-action-sheet-list-item-height | 112rpx | - 
---td-action-sheet-text-align | center | -
+--td-action-sheet-text-align | center | - 

src/action-sheet/README.md

@@ -130,12 +130,13 @@ t-class-content | 内容样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-color | @border-level-1-color | - 
 --td-action-sheet-border-radius | @radius-extra-large | - 
---td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-color | @text-color-primary | - 
 --td-action-sheet-cancel-height | 96rpx | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-color | @text-color-primary | - 
+--td-action-sheet-description-color | @text-color-placeholder | - 
+--td-action-sheet-gap-color | @bg-color-page | - 
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
 --td-action-sheet-list-item-height | 112rpx | - 
---td-action-sheet-text-align | center | -
+--td-action-sheet-text-align | center | - 

src/avatar/README.en-US.md

@@ -88,4 +88,4 @@ Name | Default Value | Description
 --td-avatar-small-width | 80rpx | - 
 --td-avatar-text-large-font-size | @font-size-xl | - 
 --td-avatar-text-medium-font-size | @font-size-m | - 
---td-avatar-text-small-font-size | @font-size-base | -
+--td-avatar-text-small-font-size | @font-size-base | - 

src/avatar/README.md

@@ -148,4 +148,4 @@ t-class-image | 图片样式类
 --td-avatar-small-width | 80rpx | - 
 --td-avatar-text-large-font-size | @font-size-xl | - 
 --td-avatar-text-medium-font-size | @font-size-m | - 
---td-avatar-text-small-font-size | @font-size-base | -
+--td-avatar-text-small-font-size | @font-size-base | - 

src/back-top/README.en-US.md

@@ -33,9 +33,10 @@ t-class-text | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @bg-color-container | - 
 --td-back-top-round-border-color | @component-border | - 
 --td-back-top-round-border-radius | @radius-circle | - 
---td-back-top-round-color | @font-gray-1 | - 
---td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | -
+--td-back-top-round-color | @text-color-primary | - 
+--td-back-top-round-dark-bg-color | @gray-color-13 | - 
+--td-back-top-round-dark-color | @text-color-anti | - 

src/back-top/README.md

@@ -64,9 +64,10 @@ t-class-text | 文本样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @bg-color-container | - 
 --td-back-top-round-border-color | @component-border | - 
 --td-back-top-round-border-radius | @radius-circle | - 
---td-back-top-round-color | @font-gray-1 | - 
---td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | -
+--td-back-top-round-color | @text-color-primary | - 
+--td-back-top-round-dark-bg-color | @gray-color-13 | - 
+--td-back-top-round-dark-color | @text-color-anti | - 

src/badge/README.en-US.md

@@ -36,10 +36,11 @@ Name | Default Value | Description
 --td-badge-bg-color | @error-color | - 
 --td-badge-border-radius | 4rpx | - 
 --td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-content-text-color | @text-color-primary | - 
 --td-badge-dot-size | 16rpx | - 
 --td-badge-font-size | @font-size-xs | - 
 --td-badge-font-weight | 600 | - 
 --td-badge-large-font-size | @font-size-s | - 
 --td-badge-large-height | 40rpx | - 
 --td-badge-large-padding | 10rpx | - 
---td-badge-text-color | @font-white-1 | -
+--td-badge-text-color | @text-color-anti | - 

src/badge/README.md

@@ -77,10 +77,11 @@ t-class-count | 计数样式类
 --td-badge-bg-color | @error-color | - 
 --td-badge-border-radius | 4rpx | - 
 --td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-content-text-color | @text-color-primary | - 
 --td-badge-dot-size | 16rpx | - 
 --td-badge-font-size | @font-size-xs | - 
 --td-badge-font-weight | 600 | - 
 --td-badge-large-font-size | @font-size-s | - 
 --td-badge-large-height | 40rpx | - 
 --td-badge-large-padding | 10rpx | - 
---td-badge-text-color | @font-white-1 | -
+--td-badge-text-color | @text-color-anti | - 

src/calendar/README.en-US.md

@@ -48,8 +48,9 @@ Name | Default Value | Description
 --td-calendar-item-disabled-color | @text-color-disabled | - 
 --td-calendar-item-suffix-color | @text-color-placeholder | - 
 --td-calendar-radius | 24rpx | - 
+--td-calendar-selected-border-radius | @radius-default | - 
 --td-calendar-selected-color | @text-color-anti | - 
---td-calendar-switch-mode-icon-color | @brand-color | - 
---td-calendar-switch-mode-icon-disabled-color | @brand-color-disabled | - 
+--td-calendar-switch-mode-icon-color | @text-color-secondary | - 
+--td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | - 
 --td-calendar-title-color | @text-color-primary | - 
---td-calendar-title-font-size | 18px | -
+--td-calendar-title-font-size | 18px | - 

src/calendar/README.md

@@ -107,15 +107,16 @@ select | `(value: timestamp)` | `0.28.0`。点击日期时触发
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-calendar-active-color | @brand-color | 选中项背景色 
+--td-calendar-active-color | @brand-color | - 
 --td-calendar-bg-color | @bg-color-container | - 
 --td-calendar-days-color | @text-color-secondary | - 
 --td-calendar-item-centre-color | @brand-color-light | - 
 --td-calendar-item-disabled-color | @text-color-disabled | - 
 --td-calendar-item-suffix-color | @text-color-placeholder | - 
 --td-calendar-radius | 24rpx | - 
+--td-calendar-selected-border-radius | @radius-default | - 
 --td-calendar-selected-color | @text-color-anti | - 
---td-calendar-switch-mode-icon-color | @brand-color | - 
---td-calendar-switch-mode-icon-disabled-color | @brand-color-disabled | - 
+--td-calendar-switch-mode-icon-color | @text-color-secondary | - 
+--td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | - 
 --td-calendar-title-color | @text-color-primary | - 
---td-calendar-title-font-size | 18px | -
+--td-calendar-title-font-size | 18px | - 

src/cascader/README.en-US.md

@@ -47,4 +47,4 @@ Name | Default Value | Description
 --td-cascader-title-color | @text-color-primary | - 
 --td-cascader-title-height | 26rpx | - 
 --td-cascader-title-padding | @spacer-2 | - 
---td-cascder-title-font-size | 36rpx | -
+--td-cascder-title-font-size | 36rpx | - 

src/cascader/README.md

@@ -103,4 +103,4 @@ pick | `(value: string \| number, label: string, index: number, level: number)`
 --td-cascader-title-color | @text-color-primary | - 
 --td-cascader-title-height | 26rpx | - 
 --td-cascader-title-padding | @spacer-2 | - 
---td-cascder-title-font-size | 36rpx | -
+--td-cascder-title-font-size | 36rpx | - 

src/cell/README.en-US.md

@@ -97,4 +97,4 @@ Name | Default Value | Description
 --td-cell-right-icon-font-size | 48rpx | - 
 --td-cell-title-color | @text-color-primary | - 
 --td-cell-title-font-size | @font-size-m | - 
---td-cell-vertical-padding | 32rpx | -
+--td-cell-vertical-padding | 32rpx | - 

src/cell/README.md

@@ -142,4 +142,4 @@ t-class-title | 标题样式类
 --td-cell-right-icon-font-size | 48rpx | - 
 --td-cell-title-color | @text-color-primary | - 
 --td-cell-title-font-size | @font-size-m | - 
---td-cell-vertical-padding | 32rpx | -
+--td-cell-vertical-padding | 32rpx | - 

src/checkbox/README.en-US.md

@@ -85,4 +85,4 @@ Name | Default Value | Description
 --td-checkbox-title-color | @text-color-primary | - 
 --td-checkbox-title-disabled-color | @text-color-disabled | - 
 --td-checkbox-title-line-height | 48rpx | - 
---td-checkbox-vertical-padding | 32rpx | -
+--td-checkbox-vertical-padding | 32rpx | - 

src/checkbox/README.md

@@ -128,6 +128,7 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。
+
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
@@ -149,4 +150,4 @@ change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string,
 --td-checkbox-title-color | @text-color-primary | - 
 --td-checkbox-title-disabled-color | @text-color-disabled | - 
 --td-checkbox-title-line-height | 48rpx | - 
---td-checkbox-vertical-padding | 32rpx | -
+--td-checkbox-vertical-padding | 32rpx | -