@ptengine/design-components 0.5.0 → 0.5.1
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 +1 -1
- package/llms.txt +15 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -240,7 +240,7 @@ ZH `Noto Sans SC`。库侧在 `tokens.css` 以 `--font-sans` + `:lang()` 声明
|
|
|
240
240
|
代码展示场景仍保留等宽 `font-mono`，未用 Inter 覆盖。）
|
|
241
241
|
|
|
242
242
|
**字阶**（preset `fontSize` 整表覆盖，源自 Figma Text Styles，机读存档
|
|
243
|
-
`design/tokens.json
|
|
243
|
+
`design/tokens.json`，**在源码仓里、不随 npm 包分发**）：`2xs 12/16 · xs 13/20 · sm 14/20 · base 16/24 · lg 18/28 ·
|
|
244
244
|
xl 20/32 · 2xl 24/36 · 3xl 28/40 · 4xl 32/48 · 5xl 40/56 · 6xl 48/72 · 7xl 56/72 ·
|
|
245
245
|
8xl 64/96 · 9xl 72/128`。与 Tailwind 默认的差异：新增 `2xs`；**`xs` 为 13px**（非 12）；
|
|
246
246
|
`xl` 起行高/字号按设计表。字重五档：light 300 / normal 400 / medium 500 / semibold 600 / bold 700。
|
package/llms.txt
CHANGED
|
@@ -7,26 +7,26 @@
|
|
|
7
7
|
|
|
8
8
|
**A. 目标项目是 React + Tailwind,且能安装依赖** → 直接用现成组件库,不要重写组件:
|
|
9
9
|
```bash
|
|
10
|
-
pnpm add
|
|
11
|
-
# 或(仓库公开时)
|
|
12
|
-
pnpm add github:ptmafia/Design-components
|
|
10
|
+
pnpm add @ptengine/design-components
|
|
13
11
|
```
|
|
14
12
|
```js
|
|
15
13
|
// tailwind.config.js
|
|
16
|
-
import preset from '@
|
|
14
|
+
import preset from '@ptengine/design-components/tailwind-preset';
|
|
17
15
|
export default {
|
|
18
16
|
presets: [preset],
|
|
19
|
-
|
|
17
|
+
// 扫 src 而不是 dist：dist 是压缩产物、class 字符串可能被改写,扫它会漏类,
|
|
18
|
+
// 症状是组件渲染出来但部分样式缺失且零报错。包里带了全量 src 就是为了这个。
|
|
19
|
+
content: ['./src/**/*.{ts,tsx}', './node_modules/@ptengine/design-components/src/**/*.{js,ts,jsx,tsx}']
|
|
20
20
|
};
|
|
21
21
|
```
|
|
22
22
|
```ts
|
|
23
23
|
// 应用入口。库不写任何 :root 级样式:变量全部 --pt- 前缀、作用域在 .pt-ui 类下,
|
|
24
24
|
// 与宿主零撞名。推荐挂 <html>(浮层 portal 到 body 才取得到变量);暗色 = 再加 .dark 类
|
|
25
|
-
import '@
|
|
25
|
+
import '@ptengine/design-components/styles/tokens.css';
|
|
26
26
|
document.documentElement.classList.add('pt-ui');
|
|
27
27
|
```
|
|
28
28
|
```tsx
|
|
29
|
-
import { Button, Dialog, Tabs } from '@
|
|
29
|
+
import { Button, Dialog, Tabs } from '@ptengine/design-components';
|
|
30
30
|
```
|
|
31
31
|
使用规约:只从包入口 import;className 只做布局(宽度/间距/对齐),不改观感;
|
|
32
32
|
不硬编码色值、不覆盖 `--pt-*` 变量;缺组件先看下方组件清单,没有再新写。
|
|
@@ -185,7 +185,11 @@ data-table = Table + @tanstack/react-table。
|
|
|
185
185
|
|
|
186
186
|
## 源文件链接(需要完整定义时读取)
|
|
187
187
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
-
|
|
188
|
+
全部走 unpkg(公开、免登录、跟着 npm 包走)。源码仓 GitLab `PtmindDev/ptx/design-components`
|
|
189
|
+
是私有的,**不要给外部 AI 发那边的链接**——它读不到。
|
|
190
|
+
|
|
191
|
+
- 全量 CSS 变量:https://unpkg.com/@ptengine/design-components/src/styles/tokens.css
|
|
192
|
+
- Tailwind 预设(token→工具类映射):https://unpkg.com/@ptengine/design-components/tailwind.preset.js
|
|
193
|
+
- 组件源码目录:https://unpkg.com/browse/@ptengine/design-components/src/components/ui/
|
|
194
|
+
- 完整设计文档:https://www.npmjs.com/package/@ptengine/design-components
|
|
195
|
+
- 本文件自身:https://unpkg.com/@ptengine/design-components/llms.txt
|