@inf-monkeys-tech/monkeys-design 0.4.32 → 0.4.34
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/LICENSE +21 -21
- package/README.md +226 -226
- package/dist/components/base/index.d.mts +2 -2
- package/dist/components/base/index.d.ts +2 -2
- package/dist/components/base/index.js +990 -28
- package/dist/components/base/index.js.map +1 -1
- package/dist/components/base/index.mjs +987 -30
- package/dist/components/base/index.mjs.map +1 -1
- package/dist/components/data-explorer/index.js.map +1 -1
- package/dist/components/data-explorer/index.mjs.map +1 -1
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/index.mjs.map +1 -1
- package/dist/components/login/index.js.map +1 -1
- package/dist/components/login/index.mjs.map +1 -1
- package/dist/components/toolbar/index.js.map +1 -1
- package/dist/components/toolbar/index.mjs.map +1 -1
- package/dist/components/workbench/index.d.mts +193 -2
- package/dist/components/workbench/index.d.ts +193 -2
- package/dist/components/workbench/index.js +2164 -585
- package/dist/components/workbench/index.js.map +1 -1
- package/dist/components/workbench/index.mjs +2367 -813
- package/dist/components/workbench/index.mjs.map +1 -1
- package/dist/icons/oauth/index.js.map +1 -1
- package/dist/icons/oauth/index.mjs.map +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +1958 -170
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1950 -172
- package/dist/index.mjs.map +1 -1
- package/dist/palette/index.js.map +1 -1
- package/dist/palette/index.mjs.map +1 -1
- package/dist/registry/index.js.map +1 -1
- package/dist/registry/index.mjs.map +1 -1
- package/dist/styles/artist-login.scss +374 -374
- package/dist/styles/global.scss +21 -21
- package/dist/styles/workflow-board.scss +440 -440
- package/dist/styles/workflow-nodes.css +340 -340
- package/dist/{theme-CvbotXXr.d.ts → theme-Clm5dVb0.d.mts} +10 -3
- package/dist/{theme-6RDum855.d.mts → theme-sIoU5-YC.d.ts} +10 -3
- package/dist/theme-system/index.d.mts +1 -1
- package/dist/theme-system/index.d.ts +1 -1
- package/dist/theme-system/index.js +842 -18
- package/dist/theme-system/index.js.map +1 -1
- package/dist/theme-system/index.mjs +843 -19
- package/dist/theme-system/index.mjs.map +1 -1
- package/dist/themes/artist/index.js.map +1 -1
- package/dist/themes/artist/index.mjs.map +1 -1
- package/dist/themes/bsd/index.js.map +1 -1
- package/dist/themes/bsd/index.mjs.map +1 -1
- package/dist/themes/concept/index.js.map +1 -1
- package/dist/themes/concept/index.mjs.map +1 -1
- package/dist/themes/default/index.js.map +1 -1
- package/dist/themes/default/index.mjs.map +1 -1
- package/dist/{types-BgEEUqSm.d.mts → types-Bn6PEDsX.d.mts} +163 -1
- package/dist/{types-BgEEUqSm.d.ts → types-Bn6PEDsX.d.ts} +163 -1
- package/package.json +139 -138
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 inf-monkeys
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 inf-monkeys
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,226 +1,226 @@
|
|
|
1
|
-
# @inf-monkeys-tech/monkeys-design
|
|
2
|
-
|
|
3
|
-
Monkeys Design 是一个独立的 React 组件库,提供可复用的基础组件、数据展示组件、主题工具和样式资源。
|
|
4
|
-
|
|
5
|
-
## 安装
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
yarn add @inf-monkeys-tech/monkeys-design
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
或:
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
npm install @inf-monkeys-tech/monkeys-design
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## 使用
|
|
18
|
-
|
|
19
|
-
从主入口导入通用能力:
|
|
20
|
-
|
|
21
|
-
```tsx
|
|
22
|
-
import {
|
|
23
|
-
applyMonkeysTheme,
|
|
24
|
-
resolveMonkeysTheme,
|
|
25
|
-
} from '@inf-monkeys-tech/monkeys-design';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
从子路径导入组件:
|
|
29
|
-
|
|
30
|
-
```tsx
|
|
31
|
-
import {
|
|
32
|
-
BaseButton,
|
|
33
|
-
BasePanel,
|
|
34
|
-
type BaseAppearance,
|
|
35
|
-
} from '@inf-monkeys-tech/monkeys-design/components/base';
|
|
36
|
-
|
|
37
|
-
const appearance: BaseAppearance = {
|
|
38
|
-
preset: 'admin',
|
|
39
|
-
radius: 'lg',
|
|
40
|
-
border: 'subtle',
|
|
41
|
-
background: 'soft',
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export function Example() {
|
|
45
|
-
return (
|
|
46
|
-
<BasePanel
|
|
47
|
-
appearance={appearance}
|
|
48
|
-
title="Design System"
|
|
49
|
-
description="Composable UI primitives for Monkeys products."
|
|
50
|
-
footer={<BaseButton appearance={appearance} label="Refresh" />}
|
|
51
|
-
>
|
|
52
|
-
Content stays in the consuming application.
|
|
53
|
-
</BasePanel>
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## 包入口
|
|
59
|
-
|
|
60
|
-
| 路径 | 内容 |
|
|
61
|
-
|------|------|
|
|
62
|
-
| `@inf-monkeys-tech/monkeys-design` | 主入口,导出注册表、主题工具和公共类型 |
|
|
63
|
-
| `@inf-monkeys-tech/monkeys-design/components/base` | 基础组件 |
|
|
64
|
-
| `@inf-monkeys-tech/monkeys-design/components/data-explorer` | 数据展示与页面组合组件 |
|
|
65
|
-
| `@inf-monkeys-tech/monkeys-design/components/login` | 登录相关 UI 组件 |
|
|
66
|
-
| `@inf-monkeys-tech/monkeys-design/components/layout` | 布局组件 |
|
|
67
|
-
| `@inf-monkeys-tech/monkeys-design/components/toolbar` | 工具栏组件 |
|
|
68
|
-
| `@inf-monkeys-tech/monkeys-design/palette` | palette 工具 |
|
|
69
|
-
| `@inf-monkeys-tech/monkeys-design/theme-system` | 主题解析与应用工具 |
|
|
70
|
-
|
|
71
|
-
## 基础组件
|
|
72
|
-
|
|
73
|
-
基础组件从 `components/base` 子路径导入:
|
|
74
|
-
|
|
75
|
-
```tsx
|
|
76
|
-
import {
|
|
77
|
-
BaseButton,
|
|
78
|
-
BaseContextMenu,
|
|
79
|
-
BaseContextMenuContent,
|
|
80
|
-
BaseContextMenuItem,
|
|
81
|
-
BaseContextMenuTrigger,
|
|
82
|
-
BasePanel,
|
|
83
|
-
type BaseAppearance,
|
|
84
|
-
} from '@inf-monkeys-tech/monkeys-design/components/base';
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
当前包含:
|
|
88
|
-
|
|
89
|
-
- `BaseButton`
|
|
90
|
-
- `BaseBadge`
|
|
91
|
-
- `BasePanel`
|
|
92
|
-
- `BaseEmptyState`
|
|
93
|
-
- `BaseLoadingState`
|
|
94
|
-
- `BaseField`
|
|
95
|
-
- `BaseInput`
|
|
96
|
-
- `BaseTextarea`
|
|
97
|
-
- `BaseSelect`
|
|
98
|
-
- `BaseLayout`
|
|
99
|
-
- `BaseLayoutPane`
|
|
100
|
-
- `BaseLayoutSplit`
|
|
101
|
-
- `BaseLayoutResizeHandle`
|
|
102
|
-
- `BaseSwitch`
|
|
103
|
-
- `BaseCheckbox`
|
|
104
|
-
- `BaseRadioGroup`
|
|
105
|
-
- `BaseDialog`
|
|
106
|
-
- `BaseDropdownMenu`
|
|
107
|
-
- `BaseTooltip`
|
|
108
|
-
- `BaseTable`
|
|
109
|
-
- `BaseTableFooterBar`
|
|
110
|
-
- `BaseNotice`
|
|
111
|
-
- `BaseDivider`
|
|
112
|
-
- `BaseSectionHeader`
|
|
113
|
-
- `BaseTabs`
|
|
114
|
-
- `BaseSegmentedControl`
|
|
115
|
-
- `BaseProgress`
|
|
116
|
-
- `BaseSkeleton`
|
|
117
|
-
- `BaseAvatar`
|
|
118
|
-
- `BaseToolbar`
|
|
119
|
-
- `BaseBreadcrumb`
|
|
120
|
-
- `BasePagination`
|
|
121
|
-
- `BaseDescriptionList`
|
|
122
|
-
- `BaseAccordion`
|
|
123
|
-
- `BaseContextMenu`
|
|
124
|
-
|
|
125
|
-
`BaseAppearance` 用于控制 preset、density、radius、border、background、slot className 和 inline style 覆盖。
|
|
126
|
-
|
|
127
|
-
`BaseLayout` 提供中立布局 primitives:`BaseLayout` 管 header/sidebar/main/aside/footer 区域,`BaseLayoutPane` 管主题化区域表面,`BaseLayoutSplit` 管固定或可调的左右/上下分割。`gap` 可显式控制区域间距,number 按 px,string 原样作为 CSS 长度;不传时继续使用 `BaseAppearance` 的主题间距。可调分割支持 `defaultSize`、受控 `size`、`minSize`、`maxSize` 和 `onSizeChange`;尺寸是否持久化仍由使用方控制。
|
|
128
|
-
|
|
129
|
-
## Data Explorer
|
|
130
|
-
|
|
131
|
-
`components/data-explorer` 提供面向数据密集页面的组合组件。组件库负责可复用的控制、展示、预览、详情和布局结构;数据请求、权限、路由、弹窗和业务动作由使用方控制。
|
|
132
|
-
|
|
133
|
-
```tsx
|
|
134
|
-
import {
|
|
135
|
-
DataExplorerView,
|
|
136
|
-
type DataExplorerViewDefinition,
|
|
137
|
-
} from '@inf-monkeys-tech/monkeys-design/components/data-explorer';
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
常用组件包括:
|
|
141
|
-
|
|
142
|
-
- `DataExplorerView`
|
|
143
|
-
- `DataExplorerViewCollection`
|
|
144
|
-
- `DataExplorerDisplayCard`
|
|
145
|
-
- `DataExplorerDisplayCollectionView`
|
|
146
|
-
- `DataExplorerDisplayActionMenu`
|
|
147
|
-
- `DataExplorerDetailShell`
|
|
148
|
-
- `DataExplorerImagePreview`
|
|
149
|
-
- `DataExplorerToolbarShell`
|
|
150
|
-
- `DataExplorerActionBar`
|
|
151
|
-
- `DataExplorerTree`
|
|
152
|
-
- `DataExplorerPage`
|
|
153
|
-
|
|
154
|
-
## 主题系统
|
|
155
|
-
|
|
156
|
-
`theme-system` 提供主题配置解析和 DOM 应用入口,用于统一处理品牌信息、palette tokens、基础组件外观和 Data Explorer 外观。
|
|
157
|
-
|
|
158
|
-
```tsx
|
|
159
|
-
import {
|
|
160
|
-
applyMonkeysTheme,
|
|
161
|
-
resolveMonkeysTheme,
|
|
162
|
-
} from '@inf-monkeys-tech/monkeys-design/theme-system';
|
|
163
|
-
|
|
164
|
-
const theme = resolveMonkeysTheme(config);
|
|
165
|
-
|
|
166
|
-
applyMonkeysTheme(theme);
|
|
167
|
-
|
|
168
|
-
<BasePanel appearance={theme.appearances.base.input} />;
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
支持的配置包括 `tokens`、`brand`、`appearances.base` 和 `appearances.dataExplorer`。也兼容 `colors.primaryColor`、`themeMode`、`roundedSize`、`logo`、`favicon` 等常见配置形态。
|
|
172
|
-
|
|
173
|
-
## 样式资源
|
|
174
|
-
|
|
175
|
-
可从包内直接引用样式文件:
|
|
176
|
-
|
|
177
|
-
```ts
|
|
178
|
-
import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
|
|
179
|
-
import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
## Storybook
|
|
183
|
-
|
|
184
|
-
本仓库内置 Storybook,用于预览和调试组件:
|
|
185
|
-
|
|
186
|
-
```bash
|
|
187
|
-
npm run storybook
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
构建静态 Storybook:
|
|
191
|
-
|
|
192
|
-
```bash
|
|
193
|
-
npm run storybook:build
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
## 开发
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
# 安装依赖
|
|
200
|
-
npm install
|
|
201
|
-
|
|
202
|
-
# 开发模式
|
|
203
|
-
npm run dev
|
|
204
|
-
|
|
205
|
-
# 构建生产产物
|
|
206
|
-
npm run build
|
|
207
|
-
|
|
208
|
-
# 类型检查
|
|
209
|
-
npm run typecheck
|
|
210
|
-
|
|
211
|
-
# 代码检查
|
|
212
|
-
npm run lint
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
## 发布
|
|
216
|
-
|
|
217
|
-
> 需要 npmjs 账号拥有 `@inf-monkeys-tech` scope 的发布权限。
|
|
218
|
-
|
|
219
|
-
```bash
|
|
220
|
-
npm login --registry=https://registry.npmjs.org/
|
|
221
|
-
npm version patch
|
|
222
|
-
npm run build
|
|
223
|
-
npm publish --registry=https://registry.npmjs.org/ --access public
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
如果账号启用了浏览器钥匙串或 passkey,npm CLI 会给出一个浏览器验证链接。完成验证后发布会继续。
|
|
1
|
+
# @inf-monkeys-tech/monkeys-design
|
|
2
|
+
|
|
3
|
+
Monkeys Design 是一个独立的 React 组件库,提供可复用的基础组件、数据展示组件、主题工具和样式资源。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @inf-monkeys-tech/monkeys-design
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
或:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @inf-monkeys-tech/monkeys-design
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 使用
|
|
18
|
+
|
|
19
|
+
从主入口导入通用能力:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import {
|
|
23
|
+
applyMonkeysTheme,
|
|
24
|
+
resolveMonkeysTheme,
|
|
25
|
+
} from '@inf-monkeys-tech/monkeys-design';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
从子路径导入组件:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import {
|
|
32
|
+
BaseButton,
|
|
33
|
+
BasePanel,
|
|
34
|
+
type BaseAppearance,
|
|
35
|
+
} from '@inf-monkeys-tech/monkeys-design/components/base';
|
|
36
|
+
|
|
37
|
+
const appearance: BaseAppearance = {
|
|
38
|
+
preset: 'admin',
|
|
39
|
+
radius: 'lg',
|
|
40
|
+
border: 'subtle',
|
|
41
|
+
background: 'soft',
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export function Example() {
|
|
45
|
+
return (
|
|
46
|
+
<BasePanel
|
|
47
|
+
appearance={appearance}
|
|
48
|
+
title="Design System"
|
|
49
|
+
description="Composable UI primitives for Monkeys products."
|
|
50
|
+
footer={<BaseButton appearance={appearance} label="Refresh" />}
|
|
51
|
+
>
|
|
52
|
+
Content stays in the consuming application.
|
|
53
|
+
</BasePanel>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 包入口
|
|
59
|
+
|
|
60
|
+
| 路径 | 内容 |
|
|
61
|
+
|------|------|
|
|
62
|
+
| `@inf-monkeys-tech/monkeys-design` | 主入口,导出注册表、主题工具和公共类型 |
|
|
63
|
+
| `@inf-monkeys-tech/monkeys-design/components/base` | 基础组件 |
|
|
64
|
+
| `@inf-monkeys-tech/monkeys-design/components/data-explorer` | 数据展示与页面组合组件 |
|
|
65
|
+
| `@inf-monkeys-tech/monkeys-design/components/login` | 登录相关 UI 组件 |
|
|
66
|
+
| `@inf-monkeys-tech/monkeys-design/components/layout` | 布局组件 |
|
|
67
|
+
| `@inf-monkeys-tech/monkeys-design/components/toolbar` | 工具栏组件 |
|
|
68
|
+
| `@inf-monkeys-tech/monkeys-design/palette` | palette 工具 |
|
|
69
|
+
| `@inf-monkeys-tech/monkeys-design/theme-system` | 主题解析与应用工具 |
|
|
70
|
+
|
|
71
|
+
## 基础组件
|
|
72
|
+
|
|
73
|
+
基础组件从 `components/base` 子路径导入:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import {
|
|
77
|
+
BaseButton,
|
|
78
|
+
BaseContextMenu,
|
|
79
|
+
BaseContextMenuContent,
|
|
80
|
+
BaseContextMenuItem,
|
|
81
|
+
BaseContextMenuTrigger,
|
|
82
|
+
BasePanel,
|
|
83
|
+
type BaseAppearance,
|
|
84
|
+
} from '@inf-monkeys-tech/monkeys-design/components/base';
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
当前包含:
|
|
88
|
+
|
|
89
|
+
- `BaseButton`
|
|
90
|
+
- `BaseBadge`
|
|
91
|
+
- `BasePanel`
|
|
92
|
+
- `BaseEmptyState`
|
|
93
|
+
- `BaseLoadingState`
|
|
94
|
+
- `BaseField`
|
|
95
|
+
- `BaseInput`
|
|
96
|
+
- `BaseTextarea`
|
|
97
|
+
- `BaseSelect`
|
|
98
|
+
- `BaseLayout`
|
|
99
|
+
- `BaseLayoutPane`
|
|
100
|
+
- `BaseLayoutSplit`
|
|
101
|
+
- `BaseLayoutResizeHandle`
|
|
102
|
+
- `BaseSwitch`
|
|
103
|
+
- `BaseCheckbox`
|
|
104
|
+
- `BaseRadioGroup`
|
|
105
|
+
- `BaseDialog`
|
|
106
|
+
- `BaseDropdownMenu`
|
|
107
|
+
- `BaseTooltip`
|
|
108
|
+
- `BaseTable`
|
|
109
|
+
- `BaseTableFooterBar`
|
|
110
|
+
- `BaseNotice`
|
|
111
|
+
- `BaseDivider`
|
|
112
|
+
- `BaseSectionHeader`
|
|
113
|
+
- `BaseTabs`
|
|
114
|
+
- `BaseSegmentedControl`
|
|
115
|
+
- `BaseProgress`
|
|
116
|
+
- `BaseSkeleton`
|
|
117
|
+
- `BaseAvatar`
|
|
118
|
+
- `BaseToolbar`
|
|
119
|
+
- `BaseBreadcrumb`
|
|
120
|
+
- `BasePagination`
|
|
121
|
+
- `BaseDescriptionList`
|
|
122
|
+
- `BaseAccordion`
|
|
123
|
+
- `BaseContextMenu`
|
|
124
|
+
|
|
125
|
+
`BaseAppearance` 用于控制 preset、density、radius、border、background、slot className 和 inline style 覆盖。
|
|
126
|
+
|
|
127
|
+
`BaseLayout` 提供中立布局 primitives:`BaseLayout` 管 header/sidebar/main/aside/footer 区域,`BaseLayoutPane` 管主题化区域表面,`BaseLayoutSplit` 管固定或可调的左右/上下分割。`gap` 可显式控制区域间距,number 按 px,string 原样作为 CSS 长度;不传时继续使用 `BaseAppearance` 的主题间距。可调分割支持 `defaultSize`、受控 `size`、`minSize`、`maxSize` 和 `onSizeChange`;尺寸是否持久化仍由使用方控制。
|
|
128
|
+
|
|
129
|
+
## Data Explorer
|
|
130
|
+
|
|
131
|
+
`components/data-explorer` 提供面向数据密集页面的组合组件。组件库负责可复用的控制、展示、预览、详情和布局结构;数据请求、权限、路由、弹窗和业务动作由使用方控制。
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import {
|
|
135
|
+
DataExplorerView,
|
|
136
|
+
type DataExplorerViewDefinition,
|
|
137
|
+
} from '@inf-monkeys-tech/monkeys-design/components/data-explorer';
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
常用组件包括:
|
|
141
|
+
|
|
142
|
+
- `DataExplorerView`
|
|
143
|
+
- `DataExplorerViewCollection`
|
|
144
|
+
- `DataExplorerDisplayCard`
|
|
145
|
+
- `DataExplorerDisplayCollectionView`
|
|
146
|
+
- `DataExplorerDisplayActionMenu`
|
|
147
|
+
- `DataExplorerDetailShell`
|
|
148
|
+
- `DataExplorerImagePreview`
|
|
149
|
+
- `DataExplorerToolbarShell`
|
|
150
|
+
- `DataExplorerActionBar`
|
|
151
|
+
- `DataExplorerTree`
|
|
152
|
+
- `DataExplorerPage`
|
|
153
|
+
|
|
154
|
+
## 主题系统
|
|
155
|
+
|
|
156
|
+
`theme-system` 提供主题配置解析和 DOM 应用入口,用于统一处理品牌信息、palette tokens、基础组件外观和 Data Explorer 外观。
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import {
|
|
160
|
+
applyMonkeysTheme,
|
|
161
|
+
resolveMonkeysTheme,
|
|
162
|
+
} from '@inf-monkeys-tech/monkeys-design/theme-system';
|
|
163
|
+
|
|
164
|
+
const theme = resolveMonkeysTheme(config);
|
|
165
|
+
|
|
166
|
+
applyMonkeysTheme(theme);
|
|
167
|
+
|
|
168
|
+
<BasePanel appearance={theme.appearances.base.input} />;
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
支持的配置包括 `tokens`、`brand`、`appearances.base` 和 `appearances.dataExplorer`。也兼容 `colors.primaryColor`、`themeMode`、`roundedSize`、`logo`、`favicon` 等常见配置形态。
|
|
172
|
+
|
|
173
|
+
## 样式资源
|
|
174
|
+
|
|
175
|
+
可从包内直接引用样式文件:
|
|
176
|
+
|
|
177
|
+
```ts
|
|
178
|
+
import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
|
|
179
|
+
import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Storybook
|
|
183
|
+
|
|
184
|
+
本仓库内置 Storybook,用于预览和调试组件:
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
npm run storybook
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
构建静态 Storybook:
|
|
191
|
+
|
|
192
|
+
```bash
|
|
193
|
+
npm run storybook:build
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
## 开发
|
|
197
|
+
|
|
198
|
+
```bash
|
|
199
|
+
# 安装依赖
|
|
200
|
+
npm install
|
|
201
|
+
|
|
202
|
+
# 开发模式
|
|
203
|
+
npm run dev
|
|
204
|
+
|
|
205
|
+
# 构建生产产物
|
|
206
|
+
npm run build
|
|
207
|
+
|
|
208
|
+
# 类型检查
|
|
209
|
+
npm run typecheck
|
|
210
|
+
|
|
211
|
+
# 代码检查
|
|
212
|
+
npm run lint
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## 发布
|
|
216
|
+
|
|
217
|
+
> 需要 npmjs 账号拥有 `@inf-monkeys-tech` scope 的发布权限。
|
|
218
|
+
|
|
219
|
+
```bash
|
|
220
|
+
npm login --registry=https://registry.npmjs.org/
|
|
221
|
+
npm version patch
|
|
222
|
+
npm run build
|
|
223
|
+
npm publish --registry=https://registry.npmjs.org/ --access public
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
如果账号启用了浏览器钥匙串或 passkey,npm CLI 会给出一个浏览器验证链接。完成验证后发布会继续。
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as
|
|
2
|
-
export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as
|
|
1
|
+
export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseMultiSelect, F as BaseNotice, H as BasePagination, G as BasePanel, I as BaseProgress, J as BaseRadioGroup, L as BaseSectionHeader, M as BaseSegmentedControl, K as BaseSelect, N as BaseSkeleton, O as BaseSwitch, P as BaseTable, Q as BaseTableBody, R as BaseTableCaption, S as BaseTableCell, T as BaseTableContainer, U as BaseTableEmpty, V as BaseTableFooter, W as BaseTableFooterBar, X as BaseTableHead, Y as BaseTableHeader, Z as BaseTableLoading, _ as BaseTableRow, $ as BaseTabs, a0 as BaseTextarea, a2 as BaseToolbar, a1 as BaseTooltip, a3 as getBaseBadgeToneClassName, a4 as getBaseButtonToneClassName, a5 as getBaseMenuItemToneClassName, a6 as getBaseNoticeToneClassName, a7 as resolveBaseAppearance } from '../../theme-Clm5dVb0.mjs';
|
|
2
|
+
export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseMultiSelectClassNames, aa as BaseMultiSelectOption, ab as BaseMultiSelectProps, ac as BaseNoticeClassNames, ad as BaseNoticeProps, ag as BasePaginationClassNames, ah as BasePaginationProps, ae as BasePanelClassNames, af as BasePanelProps, ai as BaseProgressClassNames, aj as BaseProgressProps, al as BaseRadioGroupClassNames, am as BaseRadioGroupProps, an as BaseRadioOption, ak as BaseRadius, ao as BaseResolvedTheme, ap as BaseSectionHeaderClassNames, aq as BaseSectionHeaderProps, at as BaseSegmentedControlClassNames, au as BaseSegmentedControlOption, av as BaseSegmentedControlProps, ar as BaseSelectOption, as as BaseSelectProps, aw as BaseSkeletonClassNames, ax as BaseSkeletonProps, ay as BaseStateClassNames, az as BaseSwitchClassNames, aA as BaseSwitchProps, aB as BaseTableAlign, aC as BaseTableBodyProps, aD as BaseTableCaptionClassNames, aE as BaseTableCaptionProps, aF as BaseTableCellClassNames, aG as BaseTableCellProps, aH as BaseTableClassNames, aI as BaseTableColumnInteractionOptions, aJ as BaseTableColumnOrderChangeDetail, aK as BaseTableColumnSizeChangeDetail, aL as BaseTableColumnSizes, aM as BaseTableContainerClassNames, aN as BaseTableContainerProps, aO as BaseTableEmptyClassNames, aP as BaseTableEmptyProps, aQ as BaseTableFooterBarClassNames, aR as BaseTableFooterBarProps, aS as BaseTableFooterProps, aU as BaseTableHeadClassNames, aV as BaseTableHeadProps, aT as BaseTableHeaderProps, aW as BaseTableLoadingClassNames, aX as BaseTableLoadingProps, aY as BaseTableProps, aZ as BaseTableRowClassNames, a_ as BaseTableRowProps, a$ as BaseTableSectionClassNames, b0 as BaseTableSortDirection, b1 as BaseTabsClassNames, b2 as BaseTabsItem, b3 as BaseTabsProps, b4 as BaseTextareaProps, ba as BaseThemePresetId, bb as BaseThemeSlots, bc as BaseThemeStyles, b8 as BaseToolbarClassNames, b9 as BaseToolbarProps, b5 as BaseTooltipClassNames, b6 as BaseTooltipPlacement, b7 as BaseTooltipProps } from '../../types-Bn6PEDsX.mjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import '@radix-ui/react-context-menu';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as
|
|
2
|
-
export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as
|
|
1
|
+
export { B as BaseAccordion, a as BaseAvatar, b as BaseBadge, c as BaseBreadcrumb, d as BaseButton, e as BaseCheckbox, f as BaseContextMenu, g as BaseContextMenuCheckboxItem, h as BaseContextMenuContent, i as BaseContextMenuItem, j as BaseContextMenuLabel, k as BaseContextMenuRadioGroup, l as BaseContextMenuRadioItem, m as BaseContextMenuSeparator, n as BaseContextMenuSub, o as BaseContextMenuSubContent, p as BaseContextMenuSubTrigger, q as BaseContextMenuTrigger, r as BaseDescriptionList, s as BaseDialog, t as BaseDivider, u as BaseDropdownMenu, v as BaseEmptyState, w as BaseField, x as BaseInput, y as BaseLayout, z as BaseLayoutPane, A as BaseLayoutResizeHandle, C as BaseLayoutSplit, D as BaseLoadingState, E as BaseMultiSelect, F as BaseNotice, H as BasePagination, G as BasePanel, I as BaseProgress, J as BaseRadioGroup, L as BaseSectionHeader, M as BaseSegmentedControl, K as BaseSelect, N as BaseSkeleton, O as BaseSwitch, P as BaseTable, Q as BaseTableBody, R as BaseTableCaption, S as BaseTableCell, T as BaseTableContainer, U as BaseTableEmpty, V as BaseTableFooter, W as BaseTableFooterBar, X as BaseTableHead, Y as BaseTableHeader, Z as BaseTableLoading, _ as BaseTableRow, $ as BaseTabs, a0 as BaseTextarea, a2 as BaseToolbar, a1 as BaseTooltip, a3 as getBaseBadgeToneClassName, a4 as getBaseButtonToneClassName, a5 as getBaseMenuItemToneClassName, a6 as getBaseNoticeToneClassName, a7 as resolveBaseAppearance } from '../../theme-sIoU5-YC.js';
|
|
2
|
+
export { B as BaseAccordionClassNames, a as BaseAccordionItem, b as BaseAccordionProps, c as BaseAppearance, d as BaseAvatarClassNames, e as BaseAvatarProps, f as BaseBackground, g as BaseBadgeClassNames, h as BaseBadgeProps, i as BaseBorder, j as BaseBreadcrumbClassNames, k as BaseBreadcrumbItem, l as BaseBreadcrumbProps, m as BaseButtonClassNames, n as BaseButtonProps, o as BaseCheckboxClassNames, p as BaseCheckboxProps, s as BaseContextMenuCheckboxItemProps, t as BaseContextMenuClassNames, u as BaseContextMenuContentClassNames, v as BaseContextMenuContentProps, w as BaseContextMenuItemClassNames, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, z as BaseContextMenuProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, E as BaseContextMenuSubContentProps, F as BaseContextMenuSubProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, q as BaseControlClassNames, r as BaseControlTone, I as BaseDensity, J as BaseDescriptionListClassNames, K as BaseDescriptionListItem, L as BaseDescriptionListProps, M as BaseDialogClassNames, N as BaseDialogProps, O as BaseDividerClassNames, P as BaseDividerProps, Q as BaseDropdownMenuClassNames, R as BaseDropdownMenuItem, S as BaseDropdownMenuPlacement, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, V as BaseFieldClassNames, W as BaseFieldProps, X as BaseInputProps, Y as BaseLayoutClassNames, Z as BaseLayoutGap, _ as BaseLayoutOrientation, $ as BaseLayoutPaneClassNames, a0 as BaseLayoutPaneProps, a1 as BaseLayoutPaneSurface, a2 as BaseLayoutProps, a3 as BaseLayoutResizeHandleClassNames, a4 as BaseLayoutResizeHandleProps, a5 as BaseLayoutSize, a6 as BaseLayoutSplitClassNames, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, a9 as BaseMultiSelectClassNames, aa as BaseMultiSelectOption, ab as BaseMultiSelectProps, ac as BaseNoticeClassNames, ad as BaseNoticeProps, ag as BasePaginationClassNames, ah as BasePaginationProps, ae as BasePanelClassNames, af as BasePanelProps, ai as BaseProgressClassNames, aj as BaseProgressProps, al as BaseRadioGroupClassNames, am as BaseRadioGroupProps, an as BaseRadioOption, ak as BaseRadius, ao as BaseResolvedTheme, ap as BaseSectionHeaderClassNames, aq as BaseSectionHeaderProps, at as BaseSegmentedControlClassNames, au as BaseSegmentedControlOption, av as BaseSegmentedControlProps, ar as BaseSelectOption, as as BaseSelectProps, aw as BaseSkeletonClassNames, ax as BaseSkeletonProps, ay as BaseStateClassNames, az as BaseSwitchClassNames, aA as BaseSwitchProps, aB as BaseTableAlign, aC as BaseTableBodyProps, aD as BaseTableCaptionClassNames, aE as BaseTableCaptionProps, aF as BaseTableCellClassNames, aG as BaseTableCellProps, aH as BaseTableClassNames, aI as BaseTableColumnInteractionOptions, aJ as BaseTableColumnOrderChangeDetail, aK as BaseTableColumnSizeChangeDetail, aL as BaseTableColumnSizes, aM as BaseTableContainerClassNames, aN as BaseTableContainerProps, aO as BaseTableEmptyClassNames, aP as BaseTableEmptyProps, aQ as BaseTableFooterBarClassNames, aR as BaseTableFooterBarProps, aS as BaseTableFooterProps, aU as BaseTableHeadClassNames, aV as BaseTableHeadProps, aT as BaseTableHeaderProps, aW as BaseTableLoadingClassNames, aX as BaseTableLoadingProps, aY as BaseTableProps, aZ as BaseTableRowClassNames, a_ as BaseTableRowProps, a$ as BaseTableSectionClassNames, b0 as BaseTableSortDirection, b1 as BaseTabsClassNames, b2 as BaseTabsItem, b3 as BaseTabsProps, b4 as BaseTextareaProps, ba as BaseThemePresetId, bb as BaseThemeSlots, bc as BaseThemeStyles, b8 as BaseToolbarClassNames, b9 as BaseToolbarProps, b5 as BaseTooltipClassNames, b6 as BaseTooltipPlacement, b7 as BaseTooltipProps } from '../../types-Bn6PEDsX.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import '@radix-ui/react-context-menu';
|