docs: regenerate css vars document

package.json

@@ -45,6 +45,7 @@
     "test:snap-update": "cross-env NODE_ENV=test-snap vitest run -u",
     "test:update": "vitest run -u && npm run test:snap-update",
     "generate:coverage-badge": "npm run test:unit-coverage && node script/generate-coverage.js",
+    "update:css": "node script/generate-css-vars.js",
     "prebuild": "rimraf es/* lib/* dist/* esm/* cjs/*",
     "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc",
     "build:tsc": "concurrently \"npm:build:tsc-*\"",

script/generate-css-vars.js

@@ -1,73 +1,128 @@
 const fs = require('fs');
 const path = require('path');
 
-function resolveCwd(...args) {
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+
+const combine = {
+  avatar: ['avatar-group', 'avatar'],
+  cell: ['cell-group', 'cell'],
+  collapse: ['collapse', 'collapse-panel'],
+  'dropdown-menu': ['dropdown-menu', 'dropdown-item'],
+  tag: ['tag', 'check-tag'],
+  checkbox: ['checkbox-group', 'checkbox'],
+  indexes: ['indexes', 'indexes-anchor'],
+  picker: ['picker', 'picker-item'],
+  radio: ['radio-group', 'radio'],
+  'side-bar': ['side-bar', 'side-bar-item'],
+  steps: ['steps', 'step-item'],
+  swiper: ['swiper', 'swiper-nav'],
+  tabs: ['tabs', 'tab-panel'],
+  'tab-bar': ['tab-bar', 'tab-bar-item'],
+  grid: ['grid', 'grid-item'],
+  layout: ['row', 'col'],
+  form: ['form', 'form-item'],
+};
+
+const resolveCwd = (...args) => {
   args.unshift(process.cwd());
   return path.join(...args);
-}
-// node script/generate-css-vars.js --NAME Cell
-const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+};
 
-// 组件名作为参数传入
-function getStyleFilePath(componentName) {
-  // 构建目标文件路径
-  const styleIndexPath = resolveCwd(`src/${componentName}/style/index.js`);
-
-  try {
-    // 读取文件内容
-    const fileContent = fs.readFileSync(styleIndexPath, 'utf8');
-
-    // 使用正则表达式匹配 import 语句中的相对路径部分，并移除开头的相对路径符号
-    const regex = /^.*?'((?:\.\.(?:\/|\\))*)(.*)\/[^\\/]*?\.less'.*$/m;
-    const match = fileContent.match(regex);
-
-    if (match && match[2]) {
-      // 返回清理过的路径
-      return match[2];
-    }
-    console.error(`未找到有效的导入路径在 ${styleIndexPath}`);
-    return null;
-  } catch (err) {
-    console.error(`无法打开或读取文件: ${styleIndexPath}`, err.message);
-    return null;
-  }
-}
+const findFilePath = (componentName) => resolveCwd(`src/_common/style/mobile/components/${componentName}/_var.less`);
 
-// 示例调用
-const componentStylesDir = getStyleFilePath(COMPONENT_NAME);
+const getAllComponentName = async (dirPath) => {
+  const items = await fs.promises.readdir(dirPath, { withFileTypes: true });
+  return items.filter((item) => item.isDirectory()).map((item) => item.name);
+};
 
-const lessPath = [];
-lessPath.push(resolveCwd(`src/${componentStylesDir}/_var.less`));
+const generateCssVariables = async (componentName) => {
+  const lessPath = [];
 
-const matchReg = /(?<=var).*?(?=;)/g;
+  let cssVariableBodyContent = '';
 
-// 追加到文件
-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`;
+  if (combine[componentName]) {
+    combine[componentName].forEach((item) => {
+      lessPath.push(findFilePath(item));
+    });
+  } else {
+    lessPath.push(findFilePath(componentName));
+  }
 
-fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableHeadContent);
-fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableHeadContentEn);
+  const validPaths = lessPath.filter((item) => fs.existsSync(item));
 
-// 读取 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`;
-      });
-
-      // src/notice-bar/notice-bar.en-US.md
-      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableBodyContent);
-      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableBodyContent);
+  // 使用 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}/${name}.md`, cssVariableHeadContent, variables);
+        updateDocVariables(`src/${name}/${name}.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/action-sheet.en-US.md

@@ -22,3 +22,22 @@ defaultVisible | Boolean | false | uncontrolled property | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: ActionSheetTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
 onSelected | Function |  | Typescript：`(selected: ActionSheetItem \| string, index: number) => void`<br/> | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @component-stroke | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-height | 48px | - 
+--td-action-sheet-color | @text-color-primary | - 
+--td-action-sheet-description-color | @text-color-placeholder | - 
+--td-action-sheet-dot-active-color | @brand-color | - 
+--td-action-sheet-dot-color | @text-color-disabled | - 
+--td-action-sheet-dot-size | 8px | - 
+--td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | - 
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
+--td-action-sheet-list-item-height | 56px | - 
+--td-action-sheet-text-align | center | - 
+--td-action-sheet-text-weight | 400 | - 

src/action-sheet/action-sheet.md

@@ -22,3 +22,22 @@ defaultVisible | Boolean | false | 显示与隐藏。非受控属性 | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
 onClose | Function |  | TS 类型：`(trigger: ActionSheetTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
 onSelected | Function |  | TS 类型：`(selected: ActionSheetItem \| string, index: number) => void`<br/>选择菜单项时触发 | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-action-sheet-border-color | @component-stroke | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-height | 48px | - 
+--td-action-sheet-color | @text-color-primary | - 
+--td-action-sheet-description-color | @text-color-placeholder | - 
+--td-action-sheet-dot-active-color | @brand-color | - 
+--td-action-sheet-dot-color | @text-color-disabled | - 
+--td-action-sheet-dot-size | 8px | - 
+--td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | - 
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
+--td-action-sheet-list-item-height | 56px | - 
+--td-action-sheet-text-align | center | - 
+--td-action-sheet-text-weight | 400 | - 

src/avatar/avatar.en-US.md

@@ -32,3 +32,31 @@ max | Number | - | \- | N
 shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 size | String | - | size | N
 onCollapsedItemClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | @bg-color-container | - 
+--td-avatar-border-width-large | 3px | - 
+--td-avatar-border-width-medium | 2px | - 
+--td-avatar-border-width-small | 1px | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-group-line-spacing | 2px | - 
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -8px | - 
+--td-avatar-group-margin-left-small | -8px | - 
+--td-avatar-icon-large-font-size | 32px | - 
+--td-avatar-icon-medium-font-size | 24px | - 
+--td-avatar-icon-small-font-size | 20px | - 
+--td-avatar-large-width | 64px | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 48px | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 40px | - 
+--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 | - 

src/avatar/avatar.md

@@ -32,3 +32,31 @@ max | Number | - | 能够同时显示的最多头像数量 | N
 shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
 onCollapsedItemClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击头像折叠元素触发 | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | @bg-color-container | - 
+--td-avatar-border-width-large | 3px | - 
+--td-avatar-border-width-medium | 2px | - 
+--td-avatar-border-width-small | 1px | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-group-line-spacing | 2px | - 
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -8px | - 
+--td-avatar-group-margin-left-small | -8px | - 
+--td-avatar-icon-large-font-size | 32px | - 
+--td-avatar-icon-medium-font-size | 24px | - 
+--td-avatar-icon-small-font-size | 20px | - 
+--td-avatar-large-width | 64px | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 48px | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 40px | - 
+--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 | - 

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

@@ -17,3 +17,17 @@ text | String | '' | \- | N
 theme | String | round | options: round/half-round/round-dark/half-round-dark | N
 visibilityHeight | Number | 200 | \- | N
 onToTop | Function |  | Typescript：`() => void`<br/> | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-color | @gray-color-9 | - 
+--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 | - 

src/back-top/back-top.md

@@ -16,3 +16,17 @@ text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
 visibilityHeight | Number | 200 | 滚动高度达到此参数值才出现 | N
 onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-color | @gray-color-9 | - 
+--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 | - 

src/badge/badge.en-US.md

@@ -19,3 +19,22 @@ offset | Array | - | Typescript：`Array<string \| number>` | N
 shape | String | circle | options: circle/square/bubble/ribbon | N
 showZero | Boolean | false | \- | N
 size | String | medium | options: medium/large | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 16px | - 
+--td-badge-basic-padding | 4px | - 
+--td-badge-basic-width | 16px | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 2px | - 
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
+--td-badge-dot-size | 8px | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 20px | - 
+--td-badge-large-padding | 5px | - 
+--td-badge-text-color | @font-white-1 | - 

src/badge/badge.md

@@ -18,3 +18,22 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 showZero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-badge-basic-height | 16px | - 
+--td-badge-basic-padding | 4px | - 
+--td-badge-basic-width | 16px | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 2px | - 
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
+--td-badge-dot-size | 8px | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 20px | - 
+--td-badge-large-padding | 5px | - 
+--td-badge-text-color | @font-white-1 | -