@longzai-intelligence-layout/frames 0.0.0-stage → 0.0.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/dist/index.d.ts +249 -0
- package/dist/index.js +1 -0
- package/package.json +61 -4
- package/README.md +0 -3
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import { PreferenceDefinition } from "@longzai-intelligence-layout/preferences";
|
|
2
|
+
import { PropsWithChildren, ReactNode } from "react";
|
|
3
|
+
import { LucideIcon } from "lucide-react";
|
|
4
|
+
/**
|
|
5
|
+
* 管理壳导航条目
|
|
6
|
+
*/
|
|
7
|
+
type AdminNavItem = {
|
|
8
|
+
/**
|
|
9
|
+
* 目标路由路径
|
|
10
|
+
*/
|
|
11
|
+
to: string;
|
|
12
|
+
/**
|
|
13
|
+
* 条目图标组件
|
|
14
|
+
*/
|
|
15
|
+
Icon: LucideIcon;
|
|
16
|
+
/**
|
|
17
|
+
* 条目标签，折叠态转为悬停提示
|
|
18
|
+
*/
|
|
19
|
+
label: string;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* 管理壳导航分组
|
|
23
|
+
*/
|
|
24
|
+
type AdminNavGroup = {
|
|
25
|
+
/**
|
|
26
|
+
* 分组标题，折叠态隐藏，未提供时不渲染标题
|
|
27
|
+
*/
|
|
28
|
+
title?: string;
|
|
29
|
+
/**
|
|
30
|
+
* 分组导航条目表
|
|
31
|
+
*/
|
|
32
|
+
items: AdminNavItem[];
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* 管理壳导航侧栏组件属性
|
|
36
|
+
*/
|
|
37
|
+
type AdminSidebarProps = {
|
|
38
|
+
/**
|
|
39
|
+
* 导航分组表，分组顺序即栏内自上而下的呈现顺序
|
|
40
|
+
*/
|
|
41
|
+
groups: AdminNavGroup[];
|
|
42
|
+
/**
|
|
43
|
+
* 是否折叠为仅图标形态
|
|
44
|
+
*/
|
|
45
|
+
collapsed: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* 侧栏头部插槽，承载品牌区或团队切换，未提供时不渲染
|
|
48
|
+
*/
|
|
49
|
+
header?: ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* 侧栏底部插槽，承载用户区，未提供时不渲染
|
|
52
|
+
*/
|
|
53
|
+
footer?: ReactNode;
|
|
54
|
+
/**
|
|
55
|
+
* 导航栏无障碍名称
|
|
56
|
+
*
|
|
57
|
+
* @default '管理导航'
|
|
58
|
+
*/
|
|
59
|
+
ariaLabel?: string;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* 管理壳导航侧栏组件
|
|
63
|
+
*
|
|
64
|
+
* @param props - 组件属性
|
|
65
|
+
* @returns 左侧垂直导航栏
|
|
66
|
+
*/
|
|
67
|
+
declare function AdminSidebar(props: AdminSidebarProps): import("react").JSX.Element;
|
|
68
|
+
/**
|
|
69
|
+
* 管理壳下发给子页面的上下文
|
|
70
|
+
*/
|
|
71
|
+
type AdminOutletContext = {
|
|
72
|
+
/**
|
|
73
|
+
* 侧栏当前折叠开关
|
|
74
|
+
*/
|
|
75
|
+
sidebarCollapsed: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* 切换侧栏折叠态并记忆到存储
|
|
78
|
+
*
|
|
79
|
+
* @param next - 候选开关值
|
|
80
|
+
*/
|
|
81
|
+
changeSidebarCollapsed: (next: boolean) => void;
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* 管理壳布局组件属性
|
|
85
|
+
*/
|
|
86
|
+
type AdminShellProps = {
|
|
87
|
+
/**
|
|
88
|
+
* 导航分组表，分组顺序即栏内自上而下的呈现顺序
|
|
89
|
+
*/
|
|
90
|
+
groups: AdminNavGroup[];
|
|
91
|
+
/**
|
|
92
|
+
* 侧栏折叠偏好定义，提供时切换随写随存，未提供时仅内存态
|
|
93
|
+
*/
|
|
94
|
+
collapsedPreference?: PreferenceDefinition<boolean>;
|
|
95
|
+
/**
|
|
96
|
+
* 顶栏插槽，横贯内容区整宽渲染在页面出口上方，未提供时不渲染
|
|
97
|
+
*/
|
|
98
|
+
topbar?: ReactNode;
|
|
99
|
+
/**
|
|
100
|
+
* 侧栏头部插槽，承载品牌区或团队切换，未提供时不渲染
|
|
101
|
+
*/
|
|
102
|
+
sidebarHeader?: ReactNode;
|
|
103
|
+
/**
|
|
104
|
+
* 侧栏底部插槽，承载用户区，未提供时不渲染
|
|
105
|
+
*/
|
|
106
|
+
sidebarFooter?: ReactNode;
|
|
107
|
+
/**
|
|
108
|
+
* 导航栏无障碍名称
|
|
109
|
+
*
|
|
110
|
+
* @default '管理导航'
|
|
111
|
+
*/
|
|
112
|
+
sidebarAriaLabel?: string;
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* 管理壳布局组件
|
|
116
|
+
*
|
|
117
|
+
* @param props - 组件属性
|
|
118
|
+
* @returns 管理壳布局
|
|
119
|
+
*/
|
|
120
|
+
declare function AdminShell(props: AdminShellProps): import("react").JSX.Element;
|
|
121
|
+
/**
|
|
122
|
+
* 工作台导航条目
|
|
123
|
+
*/
|
|
124
|
+
type WorkbenchRailItem = {
|
|
125
|
+
/**
|
|
126
|
+
* 目标路由路径
|
|
127
|
+
*/
|
|
128
|
+
to: string;
|
|
129
|
+
/**
|
|
130
|
+
* 条目图标组件
|
|
131
|
+
*/
|
|
132
|
+
Icon: LucideIcon;
|
|
133
|
+
/**
|
|
134
|
+
* 栏内短标签
|
|
135
|
+
*/
|
|
136
|
+
label: string;
|
|
137
|
+
/**
|
|
138
|
+
* 无障碍名称与悬停提示
|
|
139
|
+
*/
|
|
140
|
+
fullName: string;
|
|
141
|
+
};
|
|
142
|
+
/**
|
|
143
|
+
* 工作台导航侧栏组件属性
|
|
144
|
+
*/
|
|
145
|
+
type WorkbenchRailProps = {
|
|
146
|
+
/**
|
|
147
|
+
* 导航条目表，条目顺序即栏内自上而下的呈现顺序
|
|
148
|
+
*/
|
|
149
|
+
items: WorkbenchRailItem[];
|
|
150
|
+
/**
|
|
151
|
+
* 栏底固定条目，典型为设置入口，未提供时不渲染
|
|
152
|
+
*/
|
|
153
|
+
footerItem?: WorkbenchRailItem;
|
|
154
|
+
/**
|
|
155
|
+
* 是否显示条目文字标签，假值为仅图标形态
|
|
156
|
+
*/
|
|
157
|
+
showLabels: boolean;
|
|
158
|
+
/**
|
|
159
|
+
* 导航栏无障碍名称
|
|
160
|
+
*
|
|
161
|
+
* @default '工作台导航'
|
|
162
|
+
*/
|
|
163
|
+
ariaLabel?: string;
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* 工作台导航侧栏组件
|
|
167
|
+
*
|
|
168
|
+
* @param props - 组件属性
|
|
169
|
+
* @returns 左侧垂直导航栏
|
|
170
|
+
*/
|
|
171
|
+
declare function WorkbenchRail(props: WorkbenchRailProps): import("react").JSX.Element;
|
|
172
|
+
/**
|
|
173
|
+
* 工作台布局壳下发给子页面的上下文
|
|
174
|
+
*/
|
|
175
|
+
type WorkbenchOutletContext = {
|
|
176
|
+
/**
|
|
177
|
+
* 侧栏文字标签当前显示开关
|
|
178
|
+
*/
|
|
179
|
+
showLabels: boolean;
|
|
180
|
+
/**
|
|
181
|
+
* 切换侧栏文字标签显示并记忆到存储
|
|
182
|
+
*
|
|
183
|
+
* @param next - 候选开关值
|
|
184
|
+
*/
|
|
185
|
+
changeShowLabels: (next: boolean) => void;
|
|
186
|
+
};
|
|
187
|
+
/**
|
|
188
|
+
* 工作台布局壳组件属性
|
|
189
|
+
*/
|
|
190
|
+
type WorkbenchShellProps = {
|
|
191
|
+
/**
|
|
192
|
+
* 导航条目表，条目顺序即栏内自上而下的呈现顺序
|
|
193
|
+
*/
|
|
194
|
+
railItems: WorkbenchRailItem[];
|
|
195
|
+
/**
|
|
196
|
+
* 栏底固定条目，典型为设置入口，未提供时不渲染
|
|
197
|
+
*/
|
|
198
|
+
railFooterItem?: WorkbenchRailItem;
|
|
199
|
+
/**
|
|
200
|
+
* 侧栏文字标签显示偏好定义，提供时切换随写随存，未提供时仅内存态
|
|
201
|
+
*/
|
|
202
|
+
labelPreference?: PreferenceDefinition<boolean>;
|
|
203
|
+
/**
|
|
204
|
+
* 自定义导航侧栏插槽，提供时取代壳内默认侧栏装配，标签开关上下文仍正常下发
|
|
205
|
+
*/
|
|
206
|
+
rail?: ReactNode;
|
|
207
|
+
/**
|
|
208
|
+
* 底部停靠区插槽，渲染在内容区与状态栏之间，未提供时不渲染
|
|
209
|
+
*/
|
|
210
|
+
dock?: ReactNode;
|
|
211
|
+
/**
|
|
212
|
+
* 底部状态栏插槽，未提供时不渲染状态栏
|
|
213
|
+
*/
|
|
214
|
+
statusBar?: ReactNode;
|
|
215
|
+
/**
|
|
216
|
+
* 导航栏无障碍名称
|
|
217
|
+
*
|
|
218
|
+
* @default '工作台导航'
|
|
219
|
+
*/
|
|
220
|
+
railAriaLabel?: string;
|
|
221
|
+
};
|
|
222
|
+
/**
|
|
223
|
+
* 工作台布局壳组件
|
|
224
|
+
*
|
|
225
|
+
* @param props - 组件属性
|
|
226
|
+
* @returns 工作台布局壳
|
|
227
|
+
*/
|
|
228
|
+
declare function WorkbenchShell(props: WorkbenchShellProps): import("react").JSX.Element;
|
|
229
|
+
/**
|
|
230
|
+
* 底部状态栏组件属性
|
|
231
|
+
*/
|
|
232
|
+
type StatusBarProps = PropsWithChildren<{
|
|
233
|
+
/**
|
|
234
|
+
* 右对齐状态区插槽，未提供时不渲染
|
|
235
|
+
*/
|
|
236
|
+
right?: ReactNode;
|
|
237
|
+
/**
|
|
238
|
+
* 附加类名，叠加在栏体基线样式之后
|
|
239
|
+
*/
|
|
240
|
+
className?: string;
|
|
241
|
+
}>;
|
|
242
|
+
/**
|
|
243
|
+
* 底部状态栏组件
|
|
244
|
+
*
|
|
245
|
+
* @param props - 组件属性
|
|
246
|
+
* @returns 底部状态栏组件
|
|
247
|
+
*/
|
|
248
|
+
declare function StatusBar(props: StatusBarProps): import("react").JSX.Element;
|
|
249
|
+
export { type AdminNavGroup, type AdminNavItem, type AdminOutletContext, AdminShell, type AdminShellProps, AdminSidebar, type AdminSidebarProps, StatusBar, type StatusBarProps, type WorkbenchOutletContext, WorkbenchRail, type WorkbenchRailItem, type WorkbenchRailProps, WorkbenchShell, type WorkbenchShellProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{NavLink as e,Outlet as t}from"react-router-dom";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{readPreference as i,writePreference as a}from"@longzai-intelligence-layout/preferences";import{useState as o}from"react";function s(t){let i=t.collapsed?`w-14`:`w-60`;return/* @__PURE__ */ r(`aside`,{"aria-label":t.ariaLabel??`管理导航`,className:`flex ${i} shrink-0 flex-col border-r border-border bg-card transition-[width]`,children:[t.header!==void 0&&/* @__PURE__ */ n(`div`,{className:`flex h-14 shrink-0 items-center border-b border-border px-3`,children:t.header}),/* @__PURE__ */ n(`nav`,{className:`flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-2 py-3`,children:t.groups.map((i,a)=>/* @__PURE__ */ r(`div`,{className:`flex flex-col gap-1`,children:[i.title!==void 0&&!t.collapsed&&/* @__PURE__ */ n(`div`,{className:`px-2 text-xs font-medium text-muted-foreground`,children:i.title}),i.items.map(({to:i,Icon:a,label:o})=>/* @__PURE__ */ r(e,{to:i,title:o,className:({isActive:e})=>`flex items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors ${e?`bg-accent text-foreground`:`text-muted-foreground hover:bg-accent hover:text-foreground`}`,children:[/* @__PURE__ */ n(a,{size:18,"aria-hidden":`true`,className:`shrink-0`}),!t.collapsed&&/* @__PURE__ */ n(`span`,{className:`truncate`,children:o})]},i))]},i.title??a))}),t.footer!==void 0&&/* @__PURE__ */ n(`div`,{className:`shrink-0 border-t border-border p-2`,children:t.footer})]})}function c(e){let[c,l]=o(()=>e.collapsedPreference!==void 0&&i(e.collapsedPreference));function u(t){l(t),e.collapsedPreference!==void 0&&a(e.collapsedPreference,t)}let d={sidebarCollapsed:c,changeSidebarCollapsed:u};return/* @__PURE__ */ r(`div`,{className:`flex h-screen overflow-hidden`,children:[/* @__PURE__ */ n(s,{groups:e.groups,collapsed:c,header:e.sidebarHeader,footer:e.sidebarFooter,ariaLabel:e.sidebarAriaLabel}),/* @__PURE__ */ r(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[e.topbar!==void 0&&/* @__PURE__ */ n(`header`,{className:`flex h-14 shrink-0 items-center border-b border-border bg-card px-4`,children:e.topbar}),/* @__PURE__ */ n(`main`,{className:`min-w-0 flex-1 overflow-y-auto`,children:/* @__PURE__ */ n(t,{context:d})})]})]})}function l(t,i,a=``){return/* @__PURE__ */ r(e,{to:i.to,"aria-label":i.fullName,title:i.fullName,className:({isActive:e})=>`flex w-full flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors ${a} ${e?`bg-accent text-foreground`:`text-muted-foreground hover:bg-accent hover:text-foreground`}`,children:[/* @__PURE__ */ n(i.Icon,{size:20,"aria-hidden":`true`}),t.showLabels&&/* @__PURE__ */ n(`span`,{className:`text-center leading-none`,children:i.label})]},i.to)}function u(e){let t=e.showLabels?`w-20`:`w-14`;return/* @__PURE__ */ r(`nav`,{"aria-label":e.ariaLabel??`工作台导航`,className:`flex ${t} shrink-0 flex-col items-center gap-2 border-r border-border bg-card px-2 py-3`,children:[e.items.map(t=>l(e,t)),e.footerItem!==void 0&&l(e,e.footerItem,`mt-auto`)]})}function d(e){let[s,c]=o(()=>e.labelPreference===void 0||i(e.labelPreference));function l(t){c(t),e.labelPreference!==void 0&&a(e.labelPreference,t)}let d={showLabels:s,changeShowLabels:l};return/* @__PURE__ */ r(`div`,{className:`flex h-screen flex-col overflow-hidden`,children:[/* @__PURE__ */ r(`div`,{className:`flex min-h-0 flex-1`,children:[e.rail===void 0?/* @__PURE__ */ n(u,{items:e.railItems,footerItem:e.railFooterItem,showLabels:s,ariaLabel:e.railAriaLabel}):e.rail,/* @__PURE__ */ n(`main`,{className:`flex min-w-0 flex-1 flex-col`,children:/* @__PURE__ */ n(t,{context:d})})]}),e.dock,e.statusBar]})}function f(e){let t=[`flex h-7 shrink-0 items-center border-t border-border bg-card px-4`,e.className].filter(Boolean).join(` `);return/* @__PURE__ */ r(`footer`,{"aria-label":`状态栏`,className:t,children:[/* @__PURE__ */ n(`div`,{className:`flex min-w-0 items-center gap-x-3`,children:e.children}),e.right!==void 0&&e.right!==null?/* @__PURE__ */ n(`div`,{className:`ml-auto flex items-center gap-x-3 pl-3`,children:e.right}):null]})}export{c as AdminShell,s as AdminSidebar,f as StatusBar,u as WorkbenchRail,d as WorkbenchShell};
|
package/package.json
CHANGED
|
@@ -1,6 +1,63 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@longzai-intelligence-layout/frames",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Longzai Intelligence 布局壳成品包：管理壳与工具壳",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"app-shell",
|
|
7
|
+
"frames",
|
|
8
|
+
"layout",
|
|
9
|
+
"longzai-intelligence"
|
|
10
|
+
],
|
|
11
|
+
"license": "UNLICENSED",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"type": "module",
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"main": "./dist/index.js",
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"import": "./dist/index.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "lzi-builder",
|
|
27
|
+
"build:prod": "NODE_ENV=production bun run build",
|
|
28
|
+
"prepublishOnly": "bun run build:prod",
|
|
29
|
+
"typecheck": "bun run typecheck:app && bun run typecheck:node && bun run typecheck:test",
|
|
30
|
+
"typecheck:app": "lzi-tsgo typecheck tsconfig/app.json",
|
|
31
|
+
"typecheck:node": "lzi-tsgo typecheck tsconfig/node.json",
|
|
32
|
+
"typecheck:test": "lzi-tsgo typecheck tsconfig/test.json",
|
|
33
|
+
"lint": "oxlint && oxfmt --check",
|
|
34
|
+
"lint:fix": "oxlint --fix && oxfmt",
|
|
35
|
+
"test": "bun test",
|
|
36
|
+
"test:watch": "bun test --watch",
|
|
37
|
+
"test:coverage": "bun test --coverage",
|
|
38
|
+
"test:unit": "bun test src/__tests__/unit/",
|
|
39
|
+
"clean": "lzi-dev-cli clean"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"@longzai-intelligence-layout/preferences": "0.0.1",
|
|
43
|
+
"@longzai-intelligence-layout/primitives": "0.0.1",
|
|
44
|
+
"clsx": "^2.1.1",
|
|
45
|
+
"lucide-react": "^1.17.0",
|
|
46
|
+
"tailwind-merge": "^3.6.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@happy-dom/global-registrator": "^20.11.2",
|
|
50
|
+
"@testing-library/react": "^16.3.2",
|
|
51
|
+
"@types/react": "^19.2.17",
|
|
52
|
+
"@types/react-dom": "^19.3.0",
|
|
53
|
+
"happy-dom": "^20.11.2",
|
|
54
|
+
"react": "19.2.6",
|
|
55
|
+
"react-dom": "19.2.6",
|
|
56
|
+
"react-router-dom": "^7.18.4"
|
|
57
|
+
},
|
|
58
|
+
"peerDependencies": {
|
|
59
|
+
"react": "^19.2.6",
|
|
60
|
+
"react-dom": "^19.2.6",
|
|
61
|
+
"react-router-dom": "^7.18.4"
|
|
62
|
+
}
|
|
63
|
+
}
|
package/README.md
DELETED