nfx-ui 0.1.0 → 0.1.5
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 +231 -143
- package/package.json +11 -1
package/README.md
CHANGED
|
@@ -1,198 +1,293 @@
|
|
|
1
|
-
# NFX-UI — Unified Frontend UI Library
|
|
2
|
-
# NFX-UI — 统一前端 UI 库
|
|
1
|
+
# NFX-UI — Unified Frontend UI Library
|
|
3
2
|
|
|
4
|
-
**NFX-UI
|
|
5
|
-
**NFX-UI = NebulaForgeX 前端 UI 库**
|
|
3
|
+
**NFX-UI** is the shared frontend UI library of the NebulaForgeX ecosystem. It provides React components, design tokens, theme system, layout primitives, i18n, and utilities for a consistent look and behavior across NFX Console and other applications. Built with **React 18/19**, **TypeScript**, and **Vite** (library mode), NFX-UI is distributed as ESM/CJS with inlined styles and full type definitions—no separate CSS import required.
|
|
6
4
|
|
|
7
5
|
<div align="center">
|
|
8
|
-
<img src="
|
|
6
|
+
<img src="https://github.com/NebulaForgeX/NFX-UI/raw/main/docs/image1.png" alt="NFX-UI Logo" width="200">
|
|
9
7
|
</div>
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## How to use in your app
|
|
12
|
+
|
|
13
|
+
### 1. Install
|
|
14
|
+
|
|
15
|
+
- **Option A:** After publishing to npm, run `npm install nfx-ui` in your app.
|
|
16
|
+
- **Option B:** When unpublished, run `npm run build` and `npm link` in NFX-UI, then `npm link nfx-ui` in your app.
|
|
17
|
+
- If your environment requires a script (e.g. `source /volume1/use-menv.sh`) before npm, run it first.
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# Option A (in your app)
|
|
21
|
+
npm install nfx-ui
|
|
22
|
+
|
|
23
|
+
# Option B
|
|
24
|
+
# Step 1: in NFX-UI repo
|
|
25
|
+
cd /path/to/NFX-UI
|
|
26
|
+
npm run link
|
|
27
|
+
|
|
28
|
+
# Step 2: in your app
|
|
29
|
+
cd /path/to/your-app
|
|
30
|
+
npm link nfx-ui
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 2. Peer dependencies
|
|
34
|
+
|
|
35
|
+
Your project must have `react` and `react-dom` (^18.0.0 or ^19.0.0). For themes, charts, etc., you may need `lucide-react`, `recharts`, `@tanstack/react-query`, `zustand` (see NFX-UI `package.json` peerDependencies).
|
|
36
|
+
|
|
37
|
+
### 3. Usage
|
|
38
|
+
|
|
39
|
+
Use **subpath imports**; no separate CSS import. Components have typed props; use `import type { ... } from "nfx-ui/..."` for types; styles are inlined.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { ThemeProvider } from "nfx-ui/themes";
|
|
43
|
+
import { LanguageProvider } from "nfx-ui/languages";
|
|
44
|
+
import { LayoutProvider } from "nfx-ui/layouts";
|
|
45
|
+
import { Button, Input } from "nfx-ui/components";
|
|
46
|
+
import type { LanguageEnum } from "nfx-ui/languages";
|
|
47
|
+
import type { ApiErrorBody } from "nfx-ui/types";
|
|
48
|
+
|
|
49
|
+
export function App() {
|
|
50
|
+
return (
|
|
51
|
+
<ThemeProvider defaultTheme="default">
|
|
52
|
+
<LanguageProvider>
|
|
53
|
+
<LayoutProvider>
|
|
54
|
+
<Button>Confirm</Button>
|
|
55
|
+
<Input placeholder="Enter" />
|
|
56
|
+
</LayoutProvider>
|
|
57
|
+
</LanguageProvider>
|
|
58
|
+
</ThemeProvider>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 4. Full steps in another project
|
|
64
|
+
|
|
65
|
+
1. **Environment:** If required, run `source /volume1/use-menv.sh` (or your local equivalent) before any npm commands.
|
|
66
|
+
2. **Install or link:** Published: `npm install nfx-ui`. Unpublished: run `npm run link` in NFX-UI, then `npm link nfx-ui` in this project.
|
|
67
|
+
3. **Peer deps:** Ensure `react` and `react-dom` (v18 or v19) are in your project.
|
|
68
|
+
4. **Optional runtime deps:** When using themes, icons, charts, etc., install `lucide-react`, `@tanstack/react-query`, `recharts`, `zustand` in your app (versions compatible with NFX-UI’s `package.json`).
|
|
69
|
+
5. **Wrap with Providers:** Wrap your root with `ThemeProvider`, `LanguageProvider`, `LayoutProvider`, etc. (see code above).
|
|
70
|
+
6. **Import by subpath:** `import { Button } from "nfx-ui/components"`, `import { useTheme } from "nfx-ui/themes"`, etc.; use `import type { ... } from "nfx-ui/types"` for types.
|
|
71
|
+
7. **Build & run:** Use your usual scripts (`npm run dev` / `npm run build`); the bundler will resolve nfx-ui and tree-shake unused exports.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## What’s included
|
|
76
|
+
|
|
77
|
+
Main modules and contents below; full component and API docs: [docs/](./docs/).
|
|
78
|
+
|
|
79
|
+
| Module | Contents |
|
|
80
|
+
|---------------|----------|
|
|
81
|
+
| **themes** | ThemeProvider, useTheme, theme vars |
|
|
82
|
+
| **languages** | LanguageProvider, i18n, useLanguageLabel, useThemeLabel |
|
|
83
|
+
| **layouts** | LayoutProvider, Sidebar, Header, Footer, Background |
|
|
84
|
+
| **components**| Button, Input, Dropdown, Slider, VirtualList, SlideDownSwitcher, etc. |
|
|
85
|
+
| **animations**| WaveBackground, ECGLoading, TruckLoading, BounceLoading, etc. |
|
|
86
|
+
| **hooks** | makeUnifiedQuery, makeUnifiedInfiniteQuery |
|
|
87
|
+
| **preference**| User preference (e.g. profile.preference) |
|
|
88
|
+
| **types** | Shared TypeScript types |
|
|
89
|
+
| **utils** | getApiErrorMessage, formatDisplayDate, retry, etc. |
|
|
90
|
+
| **constants** | Query key factories, defineEnum |
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Development (this repo)
|
|
95
|
+
|
|
96
|
+
### Setup
|
|
97
|
+
|
|
98
|
+
This repo is library-only: no dev server or demo; test via `npm link` in a real app. Run `npm install` after clone.
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm install
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Build
|
|
105
|
+
|
|
106
|
+
Run `npm run build`. Output in `dist/`: ESM (`.mjs`), CJS (`.cjs`), and `.d.ts`; styles inlined.
|
|
107
|
+
|
|
108
|
+
```bash
|
|
109
|
+
npm run build
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Build messages and warnings
|
|
113
|
+
|
|
114
|
+
You may see these during build; both are safe to ignore:
|
|
115
|
+
1. **TypeScript version:** vite-plugin-dts uses an older TS in API Extractor; the “consider upgrading API Extractor” message does not affect type output.
|
|
116
|
+
2. **PLUGIN_TIMINGS:** Plugin timing breakdown; informational only.
|
|
117
|
+
|
|
118
|
+
### Test locally (npm link)
|
|
119
|
+
|
|
120
|
+
1. In NFX-UI: `npm run link`.
|
|
121
|
+
2. In your app: `npm link nfx-ui`.
|
|
122
|
+
3. After changing NFX-UI, run `npm run build` in NFX-UI again.
|
|
123
|
+
|
|
124
|
+
### Lint & format
|
|
125
|
+
|
|
126
|
+
`npm run lint` for ESLint; `npm run lint:code-format` for Prettier check; `npm run format` for Prettier write.
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
npm run lint
|
|
130
|
+
npm run lint:code-format
|
|
131
|
+
npm run format
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## Project structure
|
|
137
|
+
|
|
138
|
+
`src/` contains entry and modules; path alias `@/` (points to `src/`) is used in this repo.
|
|
139
|
+
|
|
140
|
+
```
|
|
141
|
+
src/
|
|
142
|
+
├── designs/ # layouts, components, animations
|
|
143
|
+
├── languages/ # i18n, LanguageProvider, useLanguageLabel, etc.
|
|
144
|
+
├── themes/ # ThemeProvider, useTheme, theme data
|
|
145
|
+
├── hooks/ # makeUnifiedQuery, makeUnifiedInfiniteQuery
|
|
146
|
+
├── preference/ # User preference
|
|
147
|
+
├── types/ # Shared types
|
|
148
|
+
├── utils/ # Helpers
|
|
149
|
+
├── constants/ # Query keys, enums
|
|
150
|
+
├── stores/ # Zustand stores
|
|
151
|
+
├── events/ # EventEmitter
|
|
152
|
+
├── apis/ # API path helpers
|
|
153
|
+
└── ...
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
UNLICENSED (private use). Change the license in `package.json` if you publish.
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
# NFX-UI — 统一前端 UI 库
|
|
13
167
|
|
|
14
|
-
**中文：**
|
|
15
168
|
**NFX-UI** 是 NebulaForgeX 生态的统一前端 UI 库，提供 React 组件、设计令牌、主题系统、布局基元、多语言与工具函数，为 NFX 控制台及其他应用提供一致的外观与交互。基于 **React 18/19**、**TypeScript** 与 **Vite**（库模式）构建，以 ESM/CJS 发布，样式内联、类型完整，使用方无需单独引入 CSS。
|
|
16
169
|
|
|
17
170
|
---
|
|
18
171
|
|
|
19
|
-
## 外部项目如何使用
|
|
172
|
+
## 外部项目如何使用
|
|
20
173
|
|
|
21
|
-
### 1. 安装
|
|
174
|
+
### 1. 安装
|
|
22
175
|
|
|
23
|
-
|
|
24
|
-
- **方式
|
|
25
|
-
- **方式 B**：未发布时，在 NFX-UI 目录执行 `npm run build` 与 `npm link`，在业务项目目录执行 `npm link nfx-ui`。
|
|
176
|
+
- **方式 A**：发布到 npm 后，在业务项目中执行 `npm install nfx-ui`。
|
|
177
|
+
- **方式 B**：未发布时，在 NFX-UI 目录执行 `npm run build` 与 `npm link`，在业务项目目录执行 `npm link nfx-ui`。
|
|
26
178
|
- 若本机约定先加载环境（如 `source /volume1/use-menv.sh`），请在执行任何 npm 命令前先执行。
|
|
27
179
|
|
|
28
|
-
**English:**
|
|
29
|
-
- **Option A:** After publishing to npm, run `npm install nfx-ui` in your app.
|
|
30
|
-
- **Option B:** When unpublished, run `npm run build` and `npm link` in NFX-UI, then `npm link nfx-ui` in your app.
|
|
31
|
-
- If your environment requires a script (e.g. `source /volume1/use-menv.sh`) before npm, run it first.
|
|
32
|
-
|
|
33
180
|
```bash
|
|
34
|
-
# 方式 A
|
|
181
|
+
# 方式 A（在业务项目）
|
|
35
182
|
npm install nfx-ui
|
|
36
183
|
|
|
37
|
-
# 方式 B
|
|
38
|
-
# 步骤 1：在 NFX-UI 仓库
|
|
184
|
+
# 方式 B
|
|
185
|
+
# 步骤 1：在 NFX-UI 仓库
|
|
39
186
|
cd /path/to/NFX-UI
|
|
40
187
|
npm run link
|
|
41
188
|
|
|
42
|
-
# 步骤 2：在要使用 NFX-UI 的项目
|
|
189
|
+
# 步骤 2：在要使用 NFX-UI 的项目
|
|
43
190
|
cd /path/to/your-app
|
|
44
191
|
npm link nfx-ui
|
|
45
192
|
```
|
|
46
193
|
|
|
47
|
-
### 2. 依赖要求
|
|
194
|
+
### 2. 依赖要求
|
|
48
195
|
|
|
49
|
-
|
|
50
|
-
你的项目需已安装 `react`、`react-dom`（^18.0.0 或 ^19.0.0）。若使用主题、图表等，可能还需按需安装 `lucide-react`、`recharts`、`@tanstack/react-query` 等（见 NFX-UI 的 `package.json`）。
|
|
196
|
+
你的项目需已安装 `react`、`react-dom`（^18.0.0 或 ^19.0.0）。若使用主题、图表等，可能还需按需安装 `lucide-react`、`recharts`、`@tanstack/react-query`、`zustand` 等（见 NFX-UI 的 `package.json` peerDependencies）。
|
|
51
197
|
|
|
52
|
-
|
|
53
|
-
Your project must have `react` and `react-dom` (^18.0.0 or ^19.0.0). For themes, charts, etc., you may need `lucide-react`, `recharts`, `@tanstack/react-query` (see NFX-UI `package.json`).
|
|
198
|
+
### 3. 在代码里使用
|
|
54
199
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
**中文：**
|
|
58
|
-
只需从 `nfx-ui` 引入组件或类型，无需单独引入 CSS。组件直接使用即有 props 类型提示；类型通过 `import type { ... } from "nfx-ui"` 获取；样式已内联，无需 `import "nfx-ui/dist/xxx.css"`。
|
|
59
|
-
|
|
60
|
-
**English:**
|
|
61
|
-
Import components or types from `nfx-ui`; no separate CSS import. Components have typed props; use `import type { ... } from "nfx-ui"` for types; styles are inlined.
|
|
200
|
+
使用**子路径导入**，无需单独引入 CSS。组件直接使用即有 props 类型提示；类型通过 `import type { ... } from "nfx-ui/..."` 获取；样式已内联。
|
|
62
201
|
|
|
63
202
|
```tsx
|
|
64
|
-
import {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
type ApiErrorBody,
|
|
71
|
-
} from "nfx-ui";
|
|
203
|
+
import { ThemeProvider } from "nfx-ui/themes";
|
|
204
|
+
import { LanguageProvider } from "nfx-ui/languages";
|
|
205
|
+
import { LayoutProvider } from "nfx-ui/layouts";
|
|
206
|
+
import { Button, Input } from "nfx-ui/components";
|
|
207
|
+
import type { LanguageEnum } from "nfx-ui/languages";
|
|
208
|
+
import type { ApiErrorBody } from "nfx-ui/types";
|
|
72
209
|
|
|
73
210
|
export function App() {
|
|
74
211
|
return (
|
|
75
|
-
<ThemeProvider>
|
|
212
|
+
<ThemeProvider defaultTheme="default">
|
|
76
213
|
<LanguageProvider>
|
|
77
|
-
<
|
|
78
|
-
|
|
214
|
+
<LayoutProvider>
|
|
215
|
+
<Button>确定</Button>
|
|
216
|
+
<Input placeholder="请输入" />
|
|
217
|
+
</LayoutProvider>
|
|
79
218
|
</LanguageProvider>
|
|
80
219
|
</ThemeProvider>
|
|
81
220
|
);
|
|
82
221
|
}
|
|
83
222
|
```
|
|
84
223
|
|
|
85
|
-
### 4. 其他项目中的完整步骤示例
|
|
224
|
+
### 4. 其他项目中的完整步骤示例
|
|
86
225
|
|
|
87
|
-
**中文：**
|
|
88
226
|
在「别的项目」里从零用上 NFX-UI 的推荐顺序：
|
|
89
227
|
|
|
90
|
-
1. **确保环境**：若团队要求，先执行 `source /volume1/use-menv.sh`（或你本机的等价命令）。
|
|
91
|
-
2.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
6. **按需按名引入**：`import { Button, Input, ... } from "nfx-ui"`；类型用 `import type { ... } from "nfx-ui"`。
|
|
98
|
-
7. **构建与运行**：按你项目原有方式（如 `npm run dev` / `npm run build`）即可，打包器会从 `nfx-ui` 的 `main`/`module` 解析，并做 tree-shaking。
|
|
99
|
-
|
|
100
|
-
**English:**
|
|
101
|
-
Recommended order to use NFX-UI in “another project” from scratch:
|
|
102
|
-
|
|
103
|
-
1. **Environment:** If required, run `source /volume1/use-menv.sh` (or your local equivalent) before any npm commands.
|
|
104
|
-
2. **Install or link:**
|
|
105
|
-
- Published: `npm install nfx-ui`
|
|
106
|
-
- Unpublished: run `npm run link` in NFX-UI, then `npm link nfx-ui` in this project
|
|
107
|
-
3. **Peer deps:** Ensure `react` and `react-dom` (v18 or v19) are in your project.
|
|
108
|
-
4. **Optional runtime deps:** When using themes, icons, charts, etc., install `lucide-react`, `@tanstack/react-query`, `recharts` in your app (versions compatible with NFX-UI’s `package.json`).
|
|
109
|
-
5. **Wrap with Providers:** Wrap your root with `ThemeProvider`, `LanguageProvider`, etc. (see code above).
|
|
110
|
-
6. **Import by name:** `import { Button, Input, ... } from "nfx-ui"`; use `import type { ... } from "nfx-ui"` for types.
|
|
111
|
-
7. **Build & run:** Use your usual scripts (`npm run dev` / `npm run build`); the bundler will resolve `nfx-ui` and tree-shake unused exports.
|
|
228
|
+
1. **确保环境**：若团队要求，先执行 `source /volume1/use-menv.sh`（或你本机的等价命令）。
|
|
229
|
+
2. **安装或链接**：已发布：`npm install nfx-ui`。未发布：在 NFX-UI 里执行 `npm run link`，再在本项目执行 `npm link nfx-ui`。
|
|
230
|
+
3. **确认 peer**：项目里已有 `react`、`react-dom`（版本 18 或 19）。
|
|
231
|
+
4. **按需装运行时依赖**：用到主题/图标/图表等时，在业务项目安装 `lucide-react`、`@tanstack/react-query`、`recharts`、`zustand` 等（与 NFX-UI 的 `package.json` 一致或兼容）。
|
|
232
|
+
5. **在入口外包一层 Provider**：在根组件外包上 `ThemeProvider`、`LanguageProvider`、`LayoutProvider` 等（见上面代码）。
|
|
233
|
+
6. **按子路径引入**：`import { Button } from "nfx-ui/components"`，`import { useTheme } from "nfx-ui/themes"` 等；类型用 `import type { ... } from "nfx-ui/types"`。
|
|
234
|
+
7. **构建与运行**：按你项目原有方式（如 `npm run dev` / `npm run build`）即可，打包器会从 nfx-ui 解析并做 tree-shaking。
|
|
112
235
|
|
|
113
236
|
---
|
|
114
237
|
|
|
115
|
-
## 包含模块
|
|
238
|
+
## 包含模块
|
|
116
239
|
|
|
117
|
-
**中文：**
|
|
118
240
|
下表为包内主要模块与内容；完整组件与 API 见 [docs/](./docs/)。
|
|
119
241
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
125
|
-
| **
|
|
126
|
-
| **
|
|
127
|
-
| **
|
|
128
|
-
| **
|
|
129
|
-
| **
|
|
130
|
-
| **
|
|
131
|
-
| **
|
|
132
|
-
| **types** | 共享 TypeScript 类型 / Shared types |
|
|
133
|
-
| **utils** | 地址、电话、价格、时间、Result、retry 等 / Helpers |
|
|
134
|
-
| **constants** | Query key 工厂、defineEnum 等 / Query keys, defineEnum |
|
|
242
|
+
| 模块 | 内容 |
|
|
243
|
+
|--------------|------|
|
|
244
|
+
| **themes** | ThemeProvider、useTheme、主题变量 |
|
|
245
|
+
| **languages**| LanguageProvider、i18n、useLanguageLabel、useThemeLabel |
|
|
246
|
+
| **layouts** | LayoutProvider、Sidebar、Header、Footer、Background |
|
|
247
|
+
| **components** | Button、Input、Dropdown、Slider、VirtualList、SlideDownSwitcher 等 |
|
|
248
|
+
| **animations** | WaveBackground、ECGLoading、TruckLoading、BounceLoading 等 |
|
|
249
|
+
| **hooks** | makeUnifiedQuery、makeUnifiedInfiniteQuery |
|
|
250
|
+
| **preference** | 用户偏好（如 profile.preference） |
|
|
251
|
+
| **types** | 共享 TypeScript 类型 |
|
|
252
|
+
| **utils** | getApiErrorMessage、formatDisplayDate、retry 等 |
|
|
253
|
+
| **constants**| Query key 工厂、defineEnum 等 |
|
|
135
254
|
|
|
136
255
|
---
|
|
137
256
|
|
|
138
|
-
## 本仓库开发
|
|
257
|
+
## 本仓库开发
|
|
139
258
|
|
|
140
|
-
### 安装依赖
|
|
259
|
+
### 安装依赖
|
|
141
260
|
|
|
142
|
-
**中文：**
|
|
143
261
|
本仓库为纯库，无 dev 服务器或 demo，需在真实应用中通过 `npm link` 测试。克隆后执行 `npm install` 安装依赖。
|
|
144
262
|
|
|
145
|
-
**English:**
|
|
146
|
-
This repo is library-only: no dev server or demo; test via `npm link` in a real app. Run `npm install` after clone.
|
|
147
|
-
|
|
148
263
|
```bash
|
|
149
264
|
npm install
|
|
150
265
|
```
|
|
151
266
|
|
|
152
|
-
### 构建
|
|
153
|
-
|
|
154
|
-
**中文：**
|
|
155
|
-
执行 `npm run build`，产物在 `dist/`：ESM（index.mjs）、CJS（index.cjs）、类型（index.d.ts），样式已内联。
|
|
267
|
+
### 构建
|
|
156
268
|
|
|
157
|
-
|
|
158
|
-
Run `npm run build`. Output in `dist/`: ESM, CJS, and `.d.ts`; styles inlined.
|
|
269
|
+
执行 `npm run build`，产物在 `dist/`：ESM（.mjs）、CJS（.cjs）、类型（.d.ts），样式已内联。
|
|
159
270
|
|
|
160
271
|
```bash
|
|
161
272
|
npm run build
|
|
162
273
|
```
|
|
163
274
|
|
|
164
|
-
### 构建时的提示与警告
|
|
275
|
+
### 构建时的提示与警告
|
|
165
276
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
2. **PLUGIN_TIMINGS**：Vite 输出的插件耗时统计（如 vite:dts 占 47%），仅作参考，无需处理。
|
|
277
|
+
构建过程中可能出现以下提示，均可忽略，不影响产物：
|
|
278
|
+
1. **TypeScript 版本提示**：vite-plugin-dts 内置的 API Extractor 使用较旧 TS 版本，项目使用 5.9.x 时会提示 “consider upgrading API Extractor”，类型仍会正确生成。
|
|
279
|
+
2. **PLUGIN_TIMINGS**：Vite 输出的插件耗时统计，仅作参考，无需处理。
|
|
170
280
|
|
|
171
|
-
|
|
172
|
-
You may see these during build; both are safe to ignore:
|
|
173
|
-
1. **TypeScript version**: vite-plugin-dts uses an older TS in API Extractor; the “consider upgrading API Extractor” message does not affect type output.
|
|
174
|
-
2. **PLUGIN_TIMINGS**: Plugin timing breakdown (e.g. vite:dts 47%); informational only.
|
|
281
|
+
### 本地联调（npm link）
|
|
175
282
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
**中文：**
|
|
179
|
-
1. 在 NFX-UI 目录执行 `npm run link`。
|
|
180
|
-
2. 在消费项目中执行 `npm link nfx-ui`。
|
|
283
|
+
1. 在 NFX-UI 目录执行 `npm run link`。
|
|
284
|
+
2. 在消费项目中执行 `npm link nfx-ui`。
|
|
181
285
|
3. 修改 NFX-UI 后需在 NFX-UI 目录再次执行 `npm run build` 才能生效。
|
|
182
286
|
|
|
183
|
-
|
|
184
|
-
1. In NFX-UI: `npm run link`.
|
|
185
|
-
2. In your app: `npm link nfx-ui`.
|
|
186
|
-
3. After changing NFX-UI, run `npm run build` in NFX-UI again.
|
|
187
|
-
|
|
188
|
-
### 代码检查与格式化 / Lint & format
|
|
287
|
+
### 代码检查与格式化
|
|
189
288
|
|
|
190
|
-
**中文：**
|
|
191
289
|
`npm run lint` 运行 ESLint；`npm run lint:code-format` 检查 Prettier；`npm run format` 执行 Prettier 格式化。
|
|
192
290
|
|
|
193
|
-
**English:**
|
|
194
|
-
`npm run lint` for ESLint; `npm run lint:code-format` for Prettier check; `npm run format` for Prettier write.
|
|
195
|
-
|
|
196
291
|
```bash
|
|
197
292
|
npm run lint
|
|
198
293
|
npm run lint:code-format
|
|
@@ -201,35 +296,28 @@ npm run format
|
|
|
201
296
|
|
|
202
297
|
---
|
|
203
298
|
|
|
204
|
-
## 项目结构
|
|
299
|
+
## 项目结构
|
|
205
300
|
|
|
206
|
-
**中文：**
|
|
207
301
|
`src/` 下为入口与各模块；本仓库内使用路径别名 `@/`（指向 `src/`）。
|
|
208
302
|
|
|
209
|
-
**English:**
|
|
210
|
-
`src/` contains entry and modules; path alias `@/` (points to `src/`) is used in this repo.
|
|
211
|
-
|
|
212
303
|
```
|
|
213
304
|
src/
|
|
214
|
-
├──
|
|
215
|
-
├── languages/
|
|
216
|
-
├── themes/
|
|
217
|
-
├──
|
|
218
|
-
├──
|
|
219
|
-
├──
|
|
220
|
-
├──
|
|
221
|
-
├──
|
|
222
|
-
├──
|
|
223
|
-
├──
|
|
224
|
-
|
|
305
|
+
├── designs/ # layouts、components、animations
|
|
306
|
+
├── languages/ # i18n、LanguageProvider、useLanguageLabel 等
|
|
307
|
+
├── themes/ # ThemeProvider、useTheme、主题数据
|
|
308
|
+
├── hooks/ # makeUnifiedQuery、makeUnifiedInfiniteQuery
|
|
309
|
+
├── preference/ # 用户偏好
|
|
310
|
+
├── types/ # 共享类型
|
|
311
|
+
├── utils/ # 工具函数
|
|
312
|
+
├── constants/ # Query keys、枚举等
|
|
313
|
+
├── stores/ # Zustand stores
|
|
314
|
+
├── events/ # EventEmitter
|
|
315
|
+
├── apis/ # API path 等
|
|
316
|
+
└── ...
|
|
225
317
|
```
|
|
226
318
|
|
|
227
319
|
---
|
|
228
320
|
|
|
229
|
-
##
|
|
321
|
+
## 许可证
|
|
230
322
|
|
|
231
|
-
**中文：**
|
|
232
323
|
UNLICENSED（仅内部使用）。若对外发布请在 `package.json` 中修改许可证。
|
|
233
|
-
|
|
234
|
-
**English:**
|
|
235
|
-
UNLICENSED (private use). Change the license in `package.json` if you publish.
|
package/package.json
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nfx-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Unified frontend UI library for the NFX product family: shared React components, design tokens, theme variables, and layout primitives for a consistent look and behavior across NFX console and other apps.",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/NebulaForgeX/NFX-UI"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/NebulaForgeX/NFX-UI#readme",
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/NebulaForgeX/NFX-UI/issues"
|
|
13
|
+
},
|
|
6
14
|
"exports": {
|
|
7
15
|
"./themes": {
|
|
8
16
|
"types": "./dist/themes.d.ts",
|
|
@@ -125,6 +133,8 @@
|
|
|
125
133
|
"ui",
|
|
126
134
|
"components",
|
|
127
135
|
"nfx",
|
|
136
|
+
"NebulaForgeX",
|
|
137
|
+
"NFX-UI",
|
|
128
138
|
"design-system"
|
|
129
139
|
],
|
|
130
140
|
"license": "UNLICENSED",
|