@lark-apaas/client-toolkit-lite 1.1.7 → 1.1.8-alpha.0
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 -49
- package/dist/index.cjs +211 -1410
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -90
- package/dist/index.d.ts +4 -90
- package/dist/index.js +199 -1392
- package/dist/index.js.map +1 -1
- package/package.json +8 -18
- package/dist/styles/font-family.css +0 -39
- package/dist/styles/index.css +0 -4
- package/dist/styles/inspector.dev.css +0 -5
- package/dist/styles/override.css +0 -18
- package/dist/styles/tailwind-theme.css +0 -361
- package/dist/styles/theme-layer.css +0 -8
package/README.md
CHANGED
|
@@ -19,14 +19,13 @@ npm install react react-dom react-router-dom @tanstack/react-query
|
|
|
19
19
|
### 1. 使用 AppContainer
|
|
20
20
|
|
|
21
21
|
`AppContainer` 是应用根容器，内部集成：
|
|
22
|
+
- **全局样式** — 自动导入主题样式（theme-layer / tailwind-theme / override / font-family），无需手动 import CSS
|
|
22
23
|
- **Safety** — 生产环境「妙搭构建」安全标识
|
|
23
24
|
- **QueryProvider** — React Query 数据管理
|
|
24
25
|
- **useAppInfo** — 自动同步 document title / favicon / OG meta
|
|
25
26
|
- **Tea 埋点** — 生产环境自动上报页面访问事件
|
|
26
27
|
- **Runtime** — React DevTools Hook + Axios CSRF 全局注入（防重复）
|
|
27
28
|
|
|
28
|
-
> 主题样式**不自动注入**，需在应用入口手动 import，详见下一节。
|
|
29
|
-
|
|
30
29
|
```tsx
|
|
31
30
|
// App.tsx
|
|
32
31
|
import { AppContainer } from '@lark-apaas/client-toolkit-lite';
|
|
@@ -54,53 +53,6 @@ import { QueryProvider } from '@lark-apaas/client-toolkit-lite';
|
|
|
54
53
|
<QueryProvider>{children}</QueryProvider>
|
|
55
54
|
```
|
|
56
55
|
|
|
57
|
-
### 2. 导入样式
|
|
58
|
-
|
|
59
|
-
主题样式包含 4 个片段：`theme-layer`（layer 顺序声明）/ `tailwind-theme`（色板变量 + `.dark` 模式）/ `override`（base 兜底）/ `font-family`（Lark 字体）。聚合入口需手动 import：
|
|
60
|
-
|
|
61
|
-
```ts
|
|
62
|
-
// main.ts / main.tsx
|
|
63
|
-
import '@lark-apaas/client-toolkit-lite/styles.css';
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
#### Tailwind v4 source 扫描
|
|
67
|
-
|
|
68
|
-
lite 的 `Drawer` / `Popover` / `ErrorRender` 等组件使用了 Tailwind class，由于 v4 默认不扫描 `node_modules`，需要在你自己的主 css 里显式声明 source（否则这些组件会没有视觉）：
|
|
69
|
-
|
|
70
|
-
```css
|
|
71
|
-
/* 你的 main.css */
|
|
72
|
-
@import 'tailwindcss';
|
|
73
|
-
@import '@lark-apaas/client-toolkit-lite/styles.css';
|
|
74
|
-
|
|
75
|
-
/* 路径相对于这个 css 文件所在位置 */
|
|
76
|
-
@source "../node_modules/@lark-apaas/client-toolkit-lite/dist";
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
#### shadcn 语义变量（按需补）
|
|
80
|
-
|
|
81
|
-
`override.css` 和 `Drawer` / `Popover` 用了 `--background` / `--foreground` / `--border` / `--ring` / `--popover` / `--popover-foreground` / `--muted-foreground` 等 shadcn 风格语义变量。lite 内置色板（`tailwind-theme.css`）**只提供 `--color-*` 全色板**，不包含这些语义变量 —— 需要你在自己的 css 里按业务主题补上：
|
|
82
|
-
|
|
83
|
-
```css
|
|
84
|
-
:root {
|
|
85
|
-
--background: var(--color-neutral-00);
|
|
86
|
-
--foreground: var(--color-neutral-950);
|
|
87
|
-
--border: var(--color-neutral-300);
|
|
88
|
-
--ring: var(--color-blue-500);
|
|
89
|
-
--popover: var(--color-neutral-00);
|
|
90
|
-
--popover-foreground: var(--color-neutral-950);
|
|
91
|
-
--muted-foreground: var(--color-neutral-700);
|
|
92
|
-
}
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
#### 按需导入子片段
|
|
96
|
-
|
|
97
|
-
只要色板或字体时可单独 import：
|
|
98
|
-
|
|
99
|
-
```ts
|
|
100
|
-
import '@lark-apaas/client-toolkit-lite/styles/tailwind-theme.css';
|
|
101
|
-
import '@lark-apaas/client-toolkit-lite/styles/font-family.css';
|
|
102
|
-
```
|
|
103
|
-
|
|
104
56
|
### 3. Hooks
|
|
105
57
|
|
|
106
58
|
#### useAppInfo
|