Skip to content

feat: 新增组件样式结构(Semantic)文档,完善面向 AI Coding 的站点接入#3496

Open
alvinhui wants to merge 13 commits into
jdf2e:feat_v4.xfrom
alvinhui:feat/ai-coding-site
Open

feat: 新增组件样式结构(Semantic)文档,完善面向 AI Coding 的站点接入#3496
alvinhui wants to merge 13 commits into
jdf2e:feat_v4.xfrom
alvinhui:feat/ai-coding-site

Conversation

@alvinhui

@alvinhui alvinhui commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

功能说明

在已有 LLMs 文档能力基础上:

  • 补齐样式结构(Semantic)事实源:告诉 LLM 每个组件渲染产物中真实可用的 CSS class 与 design tokens,让 AI 在生成「改样式 / 写主题覆盖」代码时能精确定位,减少幻觉。
  • 把 AI 文档正式接入官网导航与路由(React + Taro 双站点)。

主要变更

一、补齐样式结构(Semantic)事实源

1. 新增 semantic 生成脚本 scripts/build-semantic.mjs

  • 编译各组件 scss(先注入 variables.scss),用 postcss 提取全部 .nut-* class
  • 按「定义文件 + 归一去重」把 class 归属到组件,解决以下问题:
    • 父子 @import 共享 class 的去重(判给更具体的子组件)
    • class↔id 不一致(如 nut-countup-*animatingnumbers)
    • 手工别名(如 nut-imgimage)
  • 产出:
    • meta/semantic.json(样式结构事实源)
    • llms-semantic-cn.txt / llms-semantic.txt(中英聚合单文件)
  • 全库 scss 已验证 100% 可编译;未归属的全局 class(如 nut-rtl)记为 orphan 丢弃

2. 扩展 scripts/build-llms.mjs

  • llms.txt 索引与 llms-full 中接入 semantic 链接与「样式结构」分区
  • 通过直接读 semantic.json 避免与 build-semantic 循环依赖;未生成时优雅跳过而非报错

3. 扩展 scripts/site/vite-plugin-llms.mjs

  • dev(中间件)与 build(generateBundle)两条路径统一产出 components/<id>/semantic.md

二、站点接入 AI 文档

  • Header 新增「AI」导航;Nav 新增 AI 侧边栏分支
  • React / Taro 双 router.ts 挂载 ai-react / ai-taro 中英路由,App.tsx 注入对应 routes
  • baseConfig.ts 增加 AI 导航项
  • 新增 4 篇 llms.md(react / taro × 中 / 英),介绍 LLMs.txt 用法与 AI 工具接入方式

构建流程 package.json

  • 新增 generate:semantic 脚本
  • 接入 prebuild:site / prebuild:taro:site,顺序为 generate:meta → generate:semantic → generate:llms

产物与使用

产物 说明
llms.txt 文档导航索引(含组件文档 + 样式结构链接)
llms-full-cn.txt / llms-full.txt 全部组件文档(中 / 英),可整体注入上下文
llms-semantic-cn.txt / llms-semantic.txt 全部组件样式结构(中 / 英),含 CSS class 与 CSS 变量
components/<id>.md 单组件文档
components/<id>/semantic.md 单组件样式结构

meta/ 全目录为构建产物,不落库(已在 .gitignore 中说明)。

验证点

  • npm run generate:semantic 全部 scss 编译成功、无异常 orphan
  • npm run build:site / build:taro:site 正常产出 semantic 虚拟文件
  • dev 与 build 两条路径产物一致(llms-semantic*.txtcomponents/<id>/semantic.md 均可访问)
  • 官网 Header「AI」入口与侧边栏在 React / Taro、中 / 英下均正常显示
h5-ai-en taro-ai-zh

Summary by CodeRabbit

  • 新功能
    • 新增 AI 使用指南入口(/zh-CN/ai/llms),支持 React 与 Taro 文档访问。
    • 新增语义样式文档资源:提供组件 CSS 类名与设计 token 的结构化信息,并可按组件获取。
    • 扩展 LLMs.txt 聚合与完整文档内容,使其包含语义资源分区与对应链接。
  • 文档
    • 新增中英文 AI 使用说明,附资源链接与 Cursor、GitHub Copilot、Claude 及自建 RAG/Agent 的提示示例。

alvinhui and others added 11 commits July 8, 2026 19:06
- Introduced a new script `build-meta.mjs` to aggregate component metadata from various sources.
- Added a new command `generate:meta` in `package.json` to run the metadata generation.
- Created `meta/components.json` to store the generated component metadata, including categories and global tokens.
- Replaced direct comparison of import.meta.url with pathToFileURL for improved URL handling.
# Conflicts:
#	.gitignore
#	scripts/build-llms.mjs
#	scripts/site/vite-plugin-llms.mjs
@github-actions github-actions Bot added the action:review This PR needs more reviews (less than 2 approvals) label Jul 10, 2026
@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 662bc706-3873-4ca6-96be-600d980ca7f0

📥 Commits

Reviewing files that changed from the base of the PR and between 530ef3c and 672494e.

📒 Files selected for processing (1)
  • scripts/build-semantic.mjs
🚧 Files skipped from review as they are similar to previous changes (1)
  • scripts/build-semantic.mjs

Walkthrough

本次变更新增组件样式语义数据生成流程,将语义信息接入 LLM 文档产物,并为 React、Taro 站点增加 AI 文档路由、导航入口及中英文使用说明。

Changes

语义文档与 AI 站点

Layer / File(s) Summary
语义数据生成与构建接入
.gitignore, package.json, scripts/build-semantic.mjs
新增 generate:semantic,编译组件 SCSS 提取样式类,生成 semantic.json 和语义聚合文档。
LLM 语义产物发布
scripts/build-llms.mjs, scripts/site/vite-plugin-llms.mjs
LLM 导航、全量文档及 Vite 构建和开发路径接入语义文档资源。
AI 文档路由与导航
src/sites/config/baseConfig.ts, src/sites/sites-react/doc*/..., src/sites/sites-react/doc/components/...
React 与 Taro 站点新增 AI 路由、LLM 导航入口及 AI 路径导航状态。
AI 使用文档
src/sites/sites-react/doc/docs/ai-react/*, src/sites/sites-react/doc/docs/ai-taro/*
新增中英文 LLMs.txt 资源说明、组件语义文档入口和 AI 工具使用示例。

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Prebuild
  participant SemanticGenerator
  participant LlmsPlugin
  participant Site
  Prebuild->>SemanticGenerator: 执行 generate:semantic
  SemanticGenerator->>SemanticGenerator: 生成 semantic.json
  LlmsPlugin->>SemanticGenerator: 读取语义数据
  LlmsPlugin->>Site: 提供 llms-semantic 与组件 semantic.md
Loading

Possibly related PRs

  • jdf2e/nutui-react#3495:在同一 build-llms.mjs 生成流程中扩展 LLM 文件产物,本次变更在该路径上接入语义入口。

Suggested reviewers: oasis-cloud, xiaoyatong, Alex-huxiyang

Poem

小兔敲键盘,语义长出来,
SCSS 变文档,类名排成排。
LLM 找得到,AI 路由开,
React 和 Taro,一起迎客来。

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed 标题准确概括了新增 Semantic 文档和 AI Coding 站点接入的主要改动。
Description check ✅ Passed 描述包含功能说明、主要变更、产物与验证点,核心信息较完整。
Docstring Coverage ✅ Passed Docstring coverage is 87.50% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.44%. Comparing base (a938cf8) to head (672494e).
⚠️ Report is 14 commits behind head on feat_v4.x.

Additional details and impacted files
@@              Coverage Diff              @@
##           feat_v4.x    #3496      +/-   ##
=============================================
+ Coverage      88.33%   88.44%   +0.10%     
=============================================
  Files            295      296       +1     
  Lines          19747    19812      +65     
  Branches        3117     3134      +17     
=============================================
+ Hits           17443    17522      +79     
+ Misses          2298     2284      -14     
  Partials           6        6              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
scripts/build-llms.mjs (1)

111-128: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

generateLlmsTxtgenerateLlmsFull 的 Semantic 标题不一致。

generateLlmsTxt 第 114 行使用 样式结构 (Semantic),而 generateLlmsFull 第 143 行使用 样式结构 (Semantic DOM)。两处指向同一类文档,标题用词不统一可能造成使用者困惑。建议统一为 样式结构 (Semantic)样式结构 (Semantic DOM)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/build-llms.mjs` around lines 111 - 128, 统一 generateLlmsTxt 与
generateLlmsFull 中 Semantic 文档分区的标题文本;将两处标题都改为同一表述,建议使用“样式结构
(Semantic)”,并检查相关生成内容保持一致。
scripts/build-semantic.mjs (1)

152-163: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

emptyComps 命名有误导性。

该过滤器选出的是「有 token 但无 class」的组件,并非「空组件」。建议更名为 tokenOnlyComps 以准确表达含义,避免后续维护者误解。

♻️ 建议的重命名
-    emptyComps: validIds.filter(
+    tokenOnlyComps: validIds.filter(
       (id) => !classesByComp[id]?.length && (meta.components[id].tokens || []).length
     ),

并在 main() 中相应更新日志输出:

-  if (stats.emptyComps.length) {
+  if (stats.tokenOnlyComps.length) {
     console.log(
-      `   仅 token 无 class 的组件 (${stats.emptyComps.length}): ${stats.emptyComps.join(', ')}`
+      `   仅 token 无 class 的组件 (${stats.tokenOnlyComps.length}): ${stats.tokenOnlyComps.join(', ')}`
     )
   }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/build-semantic.mjs` around lines 152 - 163, Rename the stats field
emptyComps to tokenOnlyComps in the stats construction and update all
references, including the corresponding log output in main(), while preserving
the existing filter logic for components with tokens but no classes.
scripts/site/vite-plugin-llms.mjs (1)

82-87: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Dev 中间件每次请求都重新读取磁盘文件。

collectFiles(platform)configureServer 中间件内被每次请求调用,会重复执行 loadMeta()tryLoadSemantic()collectLlmsFiles() 的磁盘读取和文档生成。对于 dev server 而言可以接受,但如果组件数量较多,可以考虑添加简单的内存缓存(如基于文件 mtime 或 Vite 的 server.watcher 触发刷新)以提升开发体验。

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/site/vite-plugin-llms.mjs` around lines 82 - 87, 在开发中间件处理逻辑中为
collectFiles(platform) 增加内存缓存,避免每次请求重复执行 loadMeta()、tryLoadSemantic() 和
collectLlmsFiles() 的磁盘读取与文档生成;可按平台缓存结果,并利用文件修改时间或 server.watcher 事件使缓存失效后重新生成。
src/sites/sites-react/doc-taro/router.ts (1)

51-51: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

正则 exec 结果的空值安全

RegExp.exec() 可能返回 nullas any[] 类型断言掩盖了这一风险。如果 glob 返回的路径不符合预期正则模式,[1] 会抛出 TypeError。虽然 glob 约束了文件路径使实际触发概率较低,但仍建议加入空值保护。

♻️ 建议的改进
-  let name = (/docs\/ai-taro\/(.*).md/.exec(path) as any[])[1];
+  const match = /docs\/ai-taro\/(.*).md/.exec(path);
+  if (!match) continue;
+  const name = match[1];

对第二个循环(line 60)同理:

-  let name = (/docs\/ai-taro\/(.*).en-US.md/.exec(path) as any[])[1];
+  const match = /docs\/ai-taro\/(.*).en-US.md/.exec(path);
+  if (!match) continue;
+  const name = match[1];

Also applies to: 60-60

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/sites/sites-react/doc-taro/router.ts` at line 51, 在路由路径解析逻辑中为两个
RegExp.exec 调用加入空值保护,避免匹配失败时直接访问 [1] 导致 TypeError;移除 let name 和对应解析表达式上的 as
any[],并在继续使用捕获组前处理 null(例如跳过该路径或采用安全回退值)。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@scripts/build-semantic.mjs`:
- Around line 34-52: 在 extractClasses 中构造 Sass entry 前,将 VARIABLES_PATH 和
scssPath 统一转换为 POSIX 路径格式,把反斜杠替换为正斜杠后再拼入两个 `@import`,确保 Windows 路径不会被 Sass 误解析。

---

Nitpick comments:
In `@scripts/build-llms.mjs`:
- Around line 111-128: 统一 generateLlmsTxt 与 generateLlmsFull 中 Semantic
文档分区的标题文本;将两处标题都改为同一表述,建议使用“样式结构 (Semantic)”,并检查相关生成内容保持一致。

In `@scripts/build-semantic.mjs`:
- Around line 152-163: Rename the stats field emptyComps to tokenOnlyComps in
the stats construction and update all references, including the corresponding
log output in main(), while preserving the existing filter logic for components
with tokens but no classes.

In `@scripts/site/vite-plugin-llms.mjs`:
- Around line 82-87: 在开发中间件处理逻辑中为 collectFiles(platform) 增加内存缓存,避免每次请求重复执行
loadMeta()、tryLoadSemantic() 和 collectLlmsFiles() 的磁盘读取与文档生成;可按平台缓存结果,并利用文件修改时间或
server.watcher 事件使缓存失效后重新生成。

In `@src/sites/sites-react/doc-taro/router.ts`:
- Line 51: 在路由路径解析逻辑中为两个 RegExp.exec 调用加入空值保护,避免匹配失败时直接访问 [1] 导致 TypeError;移除
let name 和对应解析表达式上的 as any[],并在继续使用捕获组前处理 null(例如跳过该路径或采用安全回退值)。
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0f3956b7-7858-4611-b7f0-f0cf2d2a5d23

📥 Commits

Reviewing files that changed from the base of the PR and between f292ac5 and b80f08c.

📒 Files selected for processing (16)
  • .gitignore
  • package.json
  • scripts/build-llms.mjs
  • scripts/build-semantic.mjs
  • scripts/site/vite-plugin-llms.mjs
  • src/sites/config/baseConfig.ts
  • src/sites/sites-react/doc-taro/App.tsx
  • src/sites/sites-react/doc-taro/router.ts
  • src/sites/sites-react/doc/App.tsx
  • src/sites/sites-react/doc/components/header/header.tsx
  • src/sites/sites-react/doc/components/nav/nav.tsx
  • src/sites/sites-react/doc/docs/ai-react/llms.en-US.md
  • src/sites/sites-react/doc/docs/ai-react/llms.md
  • src/sites/sites-react/doc/docs/ai-taro/llms.en-US.md
  • src/sites/sites-react/doc/docs/ai-taro/llms.md
  • src/sites/sites-react/doc/router.ts

Comment thread scripts/build-semantic.mjs
@alvinhui alvinhui changed the title [WIP]feat: 新增组件样式结构(Semantic)文档,完善面向 AI Coding 的站点接入 feat: 新增组件样式结构(Semantic)文档,完善面向 AI Coding 的站点接入 Jul 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action:review This PR needs more reviews (less than 2 approvals) size/XL

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant