chore: update site for 1.0.0

CHANGELOG.md

@@ -5,6 +5,97 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.0.0 `2026-10-15`
+
+### 🚨 Breaking Changes
+
+- `Cascader`: 移除 `lazy` 属性，懒加载仅通过 `load`（配合节点 `children=true`）生效 @anlyyao ([#964](https://github.com/Tencent/tdesign-mobile-react/pull/964))
+- `ColorPicker`: 删除 `HSB` 颜色格式，移除无效的 `onClose` 属性 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Guide`: 调整 `GuideStep` 的 `body`、`title`、`content` 和 `highlightContent` 类型 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Icon`: `TdIconfontProps` 重命名为 `TdIconFontProps` @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `NoticeBar`: `onChange` 参数变更，支持监听垂直轮播切换事件 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Picker`: 移除无效的 `visible` 属性，`swipeDuration` 标记为废弃，建议使用 `wheelConfig.inertiaDuration` @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Swiper`: 传入 `current` 时不再强制进入受控模式，默认值改由 `defaultCurrent` 管理 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `TabBar`: `onChange` 从直接接收选中值调整为接收包含 `value` 的对象参数 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+
+### 🚀 Features
+
+- `ActionSheet`: `ActionSheetItem` 的 `icon` 字段补充 `string` 类型 @anlyyao ([#960](https://github.com/Tencent/tdesign-mobile-react/pull/960))
+- `Button`: 
+  - 优化点击态过度效果 @anlyyao ([common#2692](https://github.com/Tencent/tdesign-common/pull/2692))
+  - 新增 `tag`、`href` 和 `form` 属性 @anlyyao ([#959](https://github.com/Tencent/tdesign-mobile-react/pull/959))
+- `Cascader`: 
+  - 新增 `load` 属性，调整懒加载链路为基于 `load + children=true` @anlyyao ([#964](https://github.com/Tencent/tdesign-mobile-react/pull/964))
+  - 新增 `filterable`、`filter` 和 `filter-placeholder` 属性，支持搜索功能 @boomLL ([#976](https://github.com/Tencent/tdesign-mobile-react/pull/976))
+- `CheckboxGroup`: 新增 `direction` 属性，表示复选框按钮排列方式 @anlyyao ([#974](https://github.com/Tencent/tdesign-mobile-react/pull/974))
+- `ColorPicker`: 新增 `HEX8` 颜色格式支持 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Comment`: 新增 `Comment` 评论组件 @slatejack ([#978](https://github.com/Tencent/tdesign-mobile-react/pull/978))
+- `Dropdown`: `DropdownOption` 的 `disabled` 字段改为可选项 @anlyyao ([#987](https://github.com/Tencent/tdesign-mobile-react/pull/987))
+- `DropdownMenu`: 新增 `onOpen`，`onOpened`，`onClose` 与 `onClosed` 属性，弹层动画时长现与 `duration` 配置保持一致 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Fab`: 新增 `xBounds` 和 `magnet` 属性 @boomLL ([#979](https://github.com/Tencent/tdesign-mobile-react/pull/979))
+- `Guide`: 
+  - 新增 `hideBack` 属性，用于隐藏返回按钮。 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - `GuideStep` 新增 `children` @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - `GuideStep` 新增 `finishButtonProps` 属性，支持为不同步骤配置完成按钮 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Icon`: 新增 `tablet` 和 `tablet-filled` 图标 @RADWIMPS426 ([icons#293](https://github.com/Tencent/tdesign-icons/pull/293)) ([#951](https://github.com/Tencent/tdesign-mobile-react/pull/951))
+- `ImageViewer`: 
+  - 新增 `cover` 属性，支持自定义图片上层覆盖内容 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - 新增 `image` 属性，支持自定义图片渲染 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - 新增 `loop` 属性，控制是否循环预览 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - `ImageInfo` 新增 `extra` 扩展数据 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Indexes`: 新增受控属性 `current` 和非受控属性 `defaultCurrent`，支持根据当前索引同步滚动位置和激活状态 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `NoticeBar`: 新增 `interval`，用于配置垂直轮播间隔 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Picker`: 
+  - 新增 `wheelConfig`，支持配置惯性、回弹、过渡和点击阈值。 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - `PickerColumnItem` 新增 `disabled` @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `PullDownRefresh`: 新增 `successDuration`，用于配置刷新成功状态的展示时长，默认值为 500ms @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `Radio`: `RadioGroup.keys` 新增对 `disabled` 字段别名的支持 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+- `RadioGroup`: 新增 `direction` 属性，表示单选框按钮排列方式 @anlyyao ([#974](https://github.com/Tencent/tdesign-mobile-react/pull/974))
+- `Search`: 新增 `maxcharacter` 和 `maxlength` 属性 @anlyyao ([#963](https://github.com/Tencent/tdesign-mobile-react/pull/963))
+- `Slider`: 
+  - 实现 `onDragstart` 和 `onDragend` 拖动生命周期事件 @anlyyao ([#966](https://github.com/Tencent/tdesign-mobile-react/pull/966))
+  - 新增 `vertical` 属性，支持垂直滑块 @liweijie0812 ([#991](https://github.com/Tencent/tdesign-mobile-react/pull/991))
+- `SwipeCell`: 
+  - 新增 `onDragstart` 和 `onDragend` 事件 @boomLL ([#977](https://github.com/Tencent/tdesign-mobile-react/pull/977))
+  - 支持通过实例方法 `showSure` 展示二次确认内容 @liweijie0812 ([#981](https://github.com/Tencent/tdesign-mobile-react/pull/981))
+
+### 🐞 Bug Fixes
+
+- `ActionSheet`: 修复子项激活态样式缺失的问题 @anlyyao ([common#2691](https://github.com/Tencent/tdesign-common/pull/2691))
+- `Collapse`: 修复面板展开时底部线框样式错误 @anlyyao ([#962](https://github.com/Tencent/tdesign-mobile-react/pull/962))
+- `ConfigProvider`: 
+  - `TableConfig`全局配置项 `pullUpLoadingText` 重命名为 `loadingText` @anlyyao ([#945](https://github.com/Tencent/tdesign-mobile-react/pull/945))
+  - 修复语言包污染全局默认配置的问题 @anlyyao ([#962](https://github.com/Tencent/tdesign-mobile-react/pull/962))
+- `Form`: 
+  - 修复 `FormItem` 中 `arrow` 图标颜色错误 @yzh1002 ([common#2738](https://github.com/Tencent/tdesign-common/pull/2738))
+- `Icon`: 修复 usb 原始图标的图层 ID 错误,在深色模式下渲染错误 @uyarn ([icons#298](https://github.com/Tencent/tdesign-icons/pull/298)) ([#953](https://github.com/Tencent/tdesign-mobile-react/pull/953))
+- `Input`: 修复 `input` 密码框样式错误 @anlyyao ([#988](https://github.com/Tencent/tdesign-mobile-react/pull/988))
+- `NoticeBar`: 修复横向滚动动画异常与滚动速度不符 @anlyyao ([#962](https://github.com/Tencent/tdesign-mobile-react/pull/962))
+- `Rate`: 修复深色模式下的提示文本颜色 @liweijie0812 ([common#2706](https://github.com/Tencent/tdesign-common/pull/2706))
+- `Search`: 修复搜索框清空图标垂直居中问题 @anlyyao ([common#2663](https://github.com/Tencent/tdesign-common/pull/2663))
+- `Slider`: 修复滑块与进度条错位与胶囊模式滑轨圆角样式错误 @liweijie0812 ([#991](https://github.com/Tencent/tdesign-mobile-react/pull/991))
+- `Tag`: 修复圆角样式值错误 @anlyyao ([common#2716](https://github.com/Tencent/tdesign-common/pull/2716))
+- `Textarea`: 修复 `placeholder` 占位内容字号错误 @anlyyao ([common#2717](https://github.com/Tencent/tdesign-common/pull/2717))
+- `Toast`: `clear/destroy` 统一走 `unmount -> remove`，修复锁滚动残留导致的页面“禁用” @anlyyao ([#964](https://github.com/Tencent/tdesign-mobile-react/pull/964))
+- `Upload`: 
+  - 修复 `useMockProgress=false` 时真实上传进度不回调的问题 @anlyyao ([common#2690](https://github.com/Tencent/tdesign-common/pull/2690))
+  - 修复开启 `preview` 后点击图片无法触发预览及 `onPreview` 事件 @anlyyao ([#961](https://github.com/Tencent/tdesign-mobile-react/pull/961))
+
+### 📈 Performance
+
+- `Dialog`: plugin 模式移除写死的 zIndex 默认值（原 2500），层级统一由样式表提供（@z-index-popup = 1500） @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `DropdownMenu`: 规范层级默认值，由 11600 调整为 1600，由样式表提供（@z-index-dropdown-menu = 1600） @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `Message`: 规范层级默认值，由 15000 调整为 5000，由样式表提供（@z-index-message = 5000） @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `Overlay`: zIndex 移除内联默认值 1000，层级改由样式表 @z-index-overlay（1000）提供 @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `Popup`: 规范层级默认值，由 11500 调整为 1500，由样式表提供（@z-index-popup = 1500） @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `Toast`: 规范层级默认值，由 12001 调整为 2000，由样式表提供（@z-index-toast = 2000） @anlyyao ([#980](https://github.com/Tencent/tdesign-mobile-react/pull/980))
+- `Style`: 修正灰阶色值。深色主题：`--td-gray-color-11` 由 `#383838` 修正为 `#393939`；浅色主题：`--td-gray-color-3` 由 `#e7e7e7` 修正为 `#e8e8e8`，`--td-gray-color-4` 由 `#dcdcdc` 修正为 `#ddd`，`--td-gray-color-5` 由 `#c5c5c5` 修正为 `#c6c6c6`，`--td-gray-color-11` 由 `#383838` 修正为 `#393939` @anlyyao ([common#2715](https://github.com/Tencent/tdesign-common/pull/2715))
+
+### Other
+
+- `lib`: 修复 `lib` 产物中 `style/css.js` 引用不存在的 `index.css` 导致的样式断链问题 @anlyyao ([#967](https://github.com/Tencent/tdesign-mobile-react/pull/967))
+- `dist`: 修复 UMD 产物中 `react-dom/client` 被错误映射为 `global.client` 的问题 @anlyyao ([#967](https://github.com/Tencent/tdesign-mobile-react/pull/967))
+
 ## 🌈 0.23.3 `2026-08-03`
 
 ### 🐞 Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-mobile-react",
-  "version": "1.0.0-beta",
+  "version": "1.0.0",
   "description": "TDesign Component for Mobile React",
   "title": "tdesign-mobile-react",
   "main": "cjs/index.js",
@@ -116,7 +116,6 @@
     "concurrently": "^6.4.0",
     "cross-env": "^10.0.0",
     "cssnano": "^5.0.12",
-    "csstype": "^3.1.3",
     "cz-conventional-changelog": "^3.3.0",
     "dom-parser": "^1.1.5",
     "eslint": "^8.4.1",

site/docs/overview.en-US.md

@@ -277,6 +277,13 @@ spline: explain
       <p class="name">CountDown</p>
     </a>
   </div>
+  <div class="image-wrapper">
+    <a class="item" href="./components/comment">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-comment.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-comment-dark.png" />
+      <p class="name">Comment</p>
+    </a>
+  </div>
   <div class="image-wrapper">
     <a class="item" href="./components/empty-en">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
@@ -484,4 +491,4 @@ spline: explain
       <p class="name">Toast</p>
     </a>
   </div>
-</section>
+</section>

site/docs/overview.md

@@ -277,6 +277,13 @@ spline: explain
       <p class="name">CountDown 倒计时</p>
     </a>
   </div>
+  <div class="image-wrapper">
+    <a class="item" href="./components/comment">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-comment.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-comment-dark.png" />
+      <p class="name">Comment 评论</p>
+    </a>
+  </div>
   <div class="image-wrapper">
     <a class="item" href="./components/empty">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
@@ -484,4 +491,4 @@ spline: explain
       <p class="name">Toast 轻提示</p>
     </a>
   </div>
-</section>
+</section>

site/mobile/mobile.config.js

@@ -428,5 +428,11 @@ export default {
       name: 'typography',
       component: () => import('tdesign-mobile-react/typography/_example/index.tsx'),
     },
+    {
+      title: 'Comment 评论',
+      titleEn: 'Comment',
+      name: 'comment',
+      component: () => import('tdesign-mobile-react/comment/_example/index.tsx'),
+    },
   ],
 };

site/vite.config.mjs

@@ -8,6 +8,7 @@ import pwaConfig from './pwaConfig';
 
 import changelog2Json from './web/plugins/changelog-to-json';
 import tdocPlugin from './web/plugins/plugin-tdoc';
+import generateLlms from './web/plugins/generate-llms';
 
 const publicPathMap = {
   preview: '/',
@@ -65,6 +66,7 @@ export default ({ mode }) =>
       react(),
       tdocPlugin(),
       changelog2Json(),
+      generateLlms(),
       VitePWA(pwaConfig),
       disableTreeShakingPlugin(['style/']),
       replace({ __DATE__: new Date().toISOString() }),

site/web/plugins/generate-llms/index.js

@@ -0,0 +1,110 @@
+import { promises, readFileSync, existsSync } from 'fs';
+import path from 'path';
+
+import generateLlmsDocs, { createComponentDocParser } from '../../../../src/_common/docs/plugins/generate-llms';
+
+/** 列出 demo 的候选路径：_example/<demoName>.tsx（含 kebab/camelCase 双写）与 _example/<demoName>/index.tsx。 */
+function demoCandidates(componentDir, demoName) {
+  const camelName = demoName.includes('-') ? demoName.replace(/-([a-z0-9])/g, (_m, c) => c.toUpperCase()) : demoName;
+  const names = camelName === demoName ? [demoName] : [demoName, camelName];
+  return names.flatMap((name) => [
+    path.join(componentDir, '_example', `${name}.tsx`),
+    path.join(componentDir, '_example', name, 'index.tsx'),
+  ]);
+}
+
+/**
+ * 读取组件目录下的 demo 源码：_example/<demoName>.tsx，回退 _example/<demoName>/index.tsx。
+ * 输出 TSX 代码块。
+ */
+function readTsxDemo(componentDir, demoName) {
+  for (const candidate of demoCandidates(componentDir, demoName)) {
+    try {
+      const content = readFileSync(candidate, 'utf-8');
+      if (content.trim()) return `\`\`\`tsx\n${content.trim()}\n\`\`\``;
+    } catch {
+      // 继续尝试下一个候选路径
+    }
+  }
+  return '';
+}
+
+/**
+ * 判断是否为 demo 占位符：匹配 _example/<demoName>.tsx 或 _example/<demoName>/index.tsx。
+ * 本仓库 demo 为扁平 .tsx 文件（非目录），默认目录判断不命中，需自定义以正确替换 {{ demo }}。
+ */
+function isDemoSlot(componentDir, demoName) {
+  return demoCandidates(componentDir, demoName).some((candidate) => existsSync(candidate));
+}
+
+/**
+ * 将文档中 camelCase 的 {{ demoName }} 占位符归一化为 kebab-case（如 {{ iconDemo }} -> {{ icon-demo }}），
+ * 以命中通用占位符正则（仅匹配小写）；仅当对应 demo 文件确实存在时才改写，避免误伤正文内容。
+ */
+function normalizeDemoPlaceholders(doc, componentDir) {
+  return doc.replace(/\{\{\s*([a-zA-Z][a-zA-Z0-9]*)\s*\}\}/g, (match, name) => {
+    if (!/[A-Z]/.test(name) || !isDemoSlot(componentDir, name)) return match;
+    const kebabName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    return `{{ ${kebabName} }}`;
+  });
+}
+
+/**
+ * vite 插件：站点构建时，基于组件清单映射生成组件的 LLM Markdown 文档。
+ * 核心逻辑为纯 JS 方法 generateLlmsDocs（来自 common 的 docs/plugins/generate-llms），
+ * 此处仅负责 vite 构建钩子分发，并按 mobile-react 仓库约定注入组件文档与 demo 源码读取器。
+ */
+export default function generateLlmsPlugin() {
+  let config;
+  return {
+    name: 'generate-llms',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async closeBundle(error) {
+      if (error) return;
+      if (!config.env.PROD && config.env.MODE !== 'preview') return;
+
+      // 基于 config.root 推导路径，避免依赖 __dirname 多层回溯
+      const siteRoot = config.root;
+      const componentsRoot = path.resolve(siteRoot, '../src');
+      // common 子仓文档根目录（组件文档为 docs/mobile/api/<slug>.md，含 frontmatter 与 {{ demo }} 占位符）
+      const docsRoot = path.resolve(siteRoot, '../src/_common/docs');
+      // 产物输出目录：从 config.build.outDir 推导，避免硬编码 dist
+      const outputDir = path.resolve(siteRoot, config.build.outDir || 'dist');
+
+      // 组件文档读取器：common 子仓 docs/mobile/api/<slug>.md（frontmatter + 代码演示 + API），
+      // 并追加组件目录 <slug>.md 的 API 部分（站点构建时由 :: BASE_DOC :: 注入，此处手动拼接）
+      const readComponentDoc = async (componentDir, slug) => {
+        const docPath = path.join(docsRoot, 'mobile/api', `${slug}.md`);
+        try {
+          const raw = await promises.readFile(docPath, 'utf-8');
+          const apiDoc = await promises.readFile(path.join(componentDir, `${slug}.md`), 'utf-8').catch(() => '');
+          const apiBody = apiDoc.replace(/^[^\S\n]*::\s*BASE_DOC\s*::[^\S\n]*\n?/m, '').trim();
+          const doc = apiBody ? `${raw}\n\n${apiBody}\n` : raw;
+          return normalizeDemoPlaceholders(doc, componentDir);
+        } catch {
+          return null;
+        }
+      };
+
+      // 通用文档解析管道：读取 frontmatter -> 替换 demo -> 清理正文
+      const parseComponentDoc = createComponentDocParser({
+        readComponentDoc,
+        readDemoCode: readTsxDemo,
+        isDemoSlot,
+        transformers: [],
+      });
+
+      await generateLlmsDocs({
+        componentsRoot,
+        outputDir,
+        platform: 'mobile',
+        parseComponentDoc,
+        siteTitle: 'TDesign Mobile React',
+        siteDescription: 'TDesign 适配移动端的组件库，适合在 React 技术栈项目中使用。',
+        siteBaseUrl: config.base,
+      });
+    },
+  };
+}

site/web/site.config.js

@@ -375,6 +375,14 @@ export const docs = [
         component: () => import('tdesign-mobile-react/count-down/count-down.md'),
         componentEn: () => import('tdesign-mobile-react/count-down/count-down.en-US.md'),
       },
+      {
+        title: 'Comment 评论',
+        titleEn: 'Comment',
+        name: 'comment',
+        path: '/mobile-react/components/comment',
+        component: () => import('tdesign-mobile-react/comment/comment.md'),
+        componentEn: () => import('tdesign-mobile-react/comment/comment.en-US.md'),
+      },
       {
         title: 'Empty 空状态',
         titleEn: 'Empty',