@tfdesign/b-end 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -25
- package/package.json +1 -1
- package/skills/tfds/components.index.json +212 -51
- package/skills/tfds/components.summary.json +88 -49
- package/src/_b_end_runtime/components/ChatMessage.jsx +1 -1
- package/src/_b_end_runtime/components/Filter.jsx +390 -0
- package/src/_b_end_runtime/components/Filter.tokens.js +98 -0
- package/src/_b_end_runtime/components/Input.jsx +3 -1
- package/src/_b_end_runtime/components/Modal.jsx +10 -3
- package/src/_b_end_runtime/components.js +92 -1
- package/src/_b_end_runtime/page-patterns/McpManagementPage.jsx +14 -1
- package/src/_b_end_runtime/page-patterns/StrategyListPage.jsx +19 -12
- package/src/_b_end_runtime/page-patterns/TabTopBarListPage.jsx +14 -1
- package/src/_b_end_runtime/page-patterns/VariableManagementPage.jsx +15 -2
- package/src/_b_end_runtime/page-patterns/pageListShared.jsx +54 -36
- package/src/_b_end_runtime/patterns.js +2 -2
- package/src/_b_end_runtime/preview-registry.jsx +95 -0
- package/src/index.d.ts +27 -0
- package/src/index.js +2 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @tfdesign/b-end(B 端组件库 · 可安装包)
|
|
2
2
|
|
|
3
|
-
这个包的目标:**让对方在任意 Cursor + Vite/React 项目里安装后,可以直接 `import { … } from '@
|
|
3
|
+
这个包的目标:**让对方在任意 Cursor + Vite/React 项目里安装后,可以直接 `import { … } from '@tfdesign/b-end'` 使用**与 TFDS 平台一致的 **B 端全量组件**(见包内 `src/index.js`)、**页面模板 / PATTERNS**,并拿到与 TFDS 一致的 **Token / theme.css**。
|
|
4
4
|
|
|
5
|
-
> **独立 npm 安装**:发布时 `prepack` 会把主仓 `src/data/systems/b-end/` 打包到包内 `src/_b_end_runtime/`,因此对方 `npm i @
|
|
5
|
+
> **独立 npm 安装**:发布时 `prepack` 会把主仓 `src/data/systems/b-end/` 打包到包内 `src/_b_end_runtime/`,因此对方 `npm i @tfdesign/b-end` 后**不必 clone 主仓库**即可解析组件源码。
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -119,14 +119,13 @@ Skill 目录内的关键文件:
|
|
|
119
119
|
|
|
120
120
|
### 安装方式(任选一种)
|
|
121
121
|
|
|
122
|
-
- **
|
|
123
|
-
|
|
122
|
+
- **npmjs 公共包(推荐)**
|
|
123
|
+
如需发布权限,在本机或项目 `.npmrc` 配置 npm token;仅安装通常不需要额外 registry 配置:
|
|
124
124
|
```ini
|
|
125
|
-
|
|
126
|
-
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
|
|
125
|
+
//registry.npmjs.org/:_authToken=YOUR_NPM_TOKEN
|
|
127
126
|
```
|
|
128
127
|
```bash
|
|
129
|
-
npm i react react-dom lucide-react "@
|
|
128
|
+
npm i react react-dom lucide-react "@tfdesign/b-end@^1.0.0" --save
|
|
130
129
|
```
|
|
131
130
|
- **本地 `file:`(联调最快 / 平台分发 zip)**
|
|
132
131
|
```bash
|
|
@@ -139,9 +138,9 @@ Skill 目录内的关键文件:
|
|
|
139
138
|
|
|
140
139
|
```css
|
|
141
140
|
@import "tailwindcss";
|
|
142
|
-
@import "@
|
|
141
|
+
@import "@tfdesign/b-end/theme.css";
|
|
143
142
|
@source "./**/*.{js,jsx,ts,tsx}";
|
|
144
|
-
@source "../node_modules/@
|
|
143
|
+
@source "../node_modules/@tfdesign/b-end/**/*.{js,jsx}";
|
|
145
144
|
```
|
|
146
145
|
|
|
147
146
|
若入口 CSS **未找到** `@import "tailwindcss"` → 不改写文件,终端打印手动步骤提示。
|
|
@@ -150,16 +149,16 @@ Skill 目录内的关键文件:
|
|
|
150
149
|
|
|
151
150
|
```bash
|
|
152
151
|
# 跳过 CSS 自动补丁(保持 CSS 文件不变)
|
|
153
|
-
SKIP_TFDS_CSS_PATCH=1 npm i "@
|
|
152
|
+
SKIP_TFDS_CSS_PATCH=1 npm i "@tfdesign/b-end" --save
|
|
154
153
|
|
|
155
154
|
# 跳过 Skill 复制(如 CI 环境只需依赖不需 IDE Skill)
|
|
156
|
-
SKIP_TFDS_CURSOR_SKILL=1 npm i "@
|
|
155
|
+
SKIP_TFDS_CURSOR_SKILL=1 npm i "@tfdesign/b-end" --save
|
|
157
156
|
```
|
|
158
157
|
|
|
159
158
|
### 安装后验证(可选,只读)
|
|
160
159
|
|
|
161
160
|
```bash
|
|
162
|
-
node node_modules/@
|
|
161
|
+
node node_modules/@tfdesign/b-end/scripts/check-tfds-integration.mjs
|
|
163
162
|
```
|
|
164
163
|
|
|
165
164
|
---
|
|
@@ -183,15 +182,14 @@ npm i file:../TFDS-Design-Skill/packages/tfds-b-end
|
|
|
183
182
|
先在本机或项目 `.npmrc` 配置 GitHub Packages registry 与个人 token:
|
|
184
183
|
|
|
185
184
|
```ini
|
|
186
|
-
|
|
187
|
-
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
|
|
185
|
+
//registry.npmjs.org/:_authToken=YOUR_NPM_TOKEN
|
|
188
186
|
```
|
|
189
187
|
|
|
190
188
|
```bash
|
|
191
|
-
npm i react react-dom lucide-react "@
|
|
189
|
+
npm i react react-dom lucide-react "@tfdesign/b-end@^1.0.0" --save
|
|
192
190
|
```
|
|
193
191
|
|
|
194
|
-
安装者需要拥有该 package 的 Read 权限,token 至少需要 `
|
|
192
|
+
安装者需要拥有该 package 的 Read 权限,token 至少需要 `npm install` 权限。包页:[GitHub Packages 包页](https://github.com/orgs/TF-Designsystem/packages/npm/package/b-end)。维护者发版见仓库内 `packages/tfds-b-end/PUBLISH.md`。
|
|
195
193
|
|
|
196
194
|
---
|
|
197
195
|
|
|
@@ -201,11 +199,11 @@ npm i react react-dom lucide-react "@tf-designsystem/b-end@^1.0.0" --save
|
|
|
201
199
|
|
|
202
200
|
```css
|
|
203
201
|
@import "tailwindcss";
|
|
204
|
-
@import "@
|
|
202
|
+
@import "@tfdesign/b-end/theme.css";
|
|
205
203
|
|
|
206
204
|
/* Tailwind v4 推荐 @source(与 tailwind.config content 二选一) */
|
|
207
205
|
@source "./**/*.{js,jsx,ts,tsx}";
|
|
208
|
-
@source "../node_modules/@
|
|
206
|
+
@source "../node_modules/@tfdesign/b-end/**/*.{js,jsx}";
|
|
209
207
|
```
|
|
210
208
|
|
|
211
209
|
> `theme.css` 包含 `@theme { ... }` 的完整 token 定义(由 TFDS 的 `generateThemeCssVars()` 生成)。
|
|
@@ -221,7 +219,7 @@ export default {
|
|
|
221
219
|
content: [
|
|
222
220
|
'./index.html',
|
|
223
221
|
'./src/**/*.{js,jsx,ts,tsx}',
|
|
224
|
-
'./node_modules/@
|
|
222
|
+
'./node_modules/@tfdesign/b-end/**/*.{js,jsx}',
|
|
225
223
|
],
|
|
226
224
|
};
|
|
227
225
|
```
|
|
@@ -237,7 +235,7 @@ export default {
|
|
|
237
235
|
头像类组件默认使用包内本地成员头像素材:`Avatar` 图片态未传 `src` 时会随机取本地成员头像;需要稳定绑定时可从包内导出的 `getTeamMemberByIndex` / `getTeamAvatarBySeed` 获取本地头像后传给 `avatarSrc`。不要为默认头像使用 pravatar / Unsplash / placeholder 外链。
|
|
238
236
|
|
|
239
237
|
```jsx
|
|
240
|
-
import { NavBar, Button, Table, ChatInput } from '@
|
|
238
|
+
import { NavBar, Button, Table, ChatInput } from '@tfdesign/b-end';
|
|
241
239
|
|
|
242
240
|
export default function Demo() {
|
|
243
241
|
return (
|
|
@@ -253,7 +251,7 @@ export default function Demo() {
|
|
|
253
251
|
### 4.1 页面模板:IM 对话(静态片段)
|
|
254
252
|
|
|
255
253
|
```jsx
|
|
256
|
-
import { IMConversationPattern } from '@
|
|
254
|
+
import { IMConversationPattern } from '@tfdesign/b-end';
|
|
257
255
|
|
|
258
256
|
export default function ImDemoPage() {
|
|
259
257
|
return (
|
|
@@ -264,7 +262,7 @@ export default function ImDemoPage() {
|
|
|
264
262
|
}
|
|
265
263
|
```
|
|
266
264
|
|
|
267
|
-
> 重要:`IMConversationPattern` 会间接依赖 `ChatBubble → Avatar/Tooltip/...` 等链路。请确保 Tailwind 扫描覆盖到包内所有 `.jsx`(`node_modules/@
|
|
265
|
+
> 重要:`IMConversationPattern` 会间接依赖 `ChatBubble → Avatar/Tooltip/...` 等链路。请确保 Tailwind 扫描覆盖到包内所有 `.jsx`(`node_modules/@tfdesign/b-end/**/*.{js,jsx}` 通常足够)。
|
|
268
266
|
|
|
269
267
|
---
|
|
270
268
|
|
|
@@ -281,7 +279,7 @@ export default function ImDemoPage() {
|
|
|
281
279
|
### 5.2 跳过自动释放
|
|
282
280
|
|
|
283
281
|
```bash
|
|
284
|
-
SKIP_TFDS_CURSOR_SKILL=1 npm i @
|
|
282
|
+
SKIP_TFDS_CURSOR_SKILL=1 npm i @tfdesign/b-end
|
|
285
283
|
```
|
|
286
284
|
|
|
287
285
|
### 5.3 用户如何在 Cursor 里唤起(`/tfds`)
|
|
@@ -326,7 +324,7 @@ TFDS 规范只应在显式调用时读取,**不要**放进 `AGENTS.md`、`.tra
|
|
|
326
324
|
| **Cursor** | 重新打开项目 / 新开 Agent 会话后输入 `/tfds`;若未出现,确认 `.cursor/skills/tfds/SKILL.md` 后重启 Cursor | ✅ `.cursor/skills/tfds/` |
|
|
327
325
|
| **Claude Code** | 重启 Claude Code 会话后输入 `/tfds`;若不支持 Skill 热加载,直接引用 `skills/tfds/SKILL.md` | ✅ `.claude/skills/tfds/` |
|
|
328
326
|
| **Codex** | 必须新开/重启 Codex 会话后输入 `/tfds`;当前会话通常不会热加载新安装的 `~/.codex/skills/tfds/` | ✅ `~/.codex/skills/tfds/` + `.codex/skills/tfds/` |
|
|
329
|
-
| **Trae** | 不会自动出现 `/tfds`;把 `node_modules/@
|
|
327
|
+
| **Trae** | 不会自动出现 `/tfds`;把 `node_modules/@tfdesign/b-end/skills/tfds/` 加入项目知识库(命名 `tfds`),之后 `@tfds` 引用 | ❌ 故意不写 `.trae/rules/`(避免 always-on 污染) |
|
|
330
328
|
| **其他 IDE / Agent** | 不保证支持 `/tfds`;显式让 AI 先读 `AI_READ_FIRST.md`,再按其指引读取 `skills/tfds/SKILL.md` | — |
|
|
331
329
|
|
|
332
330
|
|
package/package.json
CHANGED