@tsingroc/tsingroc-components 4.2.0 → 4.3.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/dist/components/Sidebar.js +38 -19
- package/dist/components/Sidebar.js.map +1 -1
- package/package.json +11 -11
- package/src/components/Sidebar.tsx +89 -64
|
@@ -26,6 +26,28 @@ const DEFAULT_MENU_ITEMS = [
|
|
|
26
26
|
menuItem("购电合约管理", "purchase-contract"),
|
|
27
27
|
]),
|
|
28
28
|
];
|
|
29
|
+
/**
|
|
30
|
+
* 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
31
|
+
* 如果没有指定 {@linkcode SidebarProps.footer | footer} 属性，
|
|
32
|
+
* 那么还需要包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后
|
|
33
|
+
* 才能正常显示边栏底部的用户信息按钮。
|
|
34
|
+
*
|
|
35
|
+
* 一般来说，使用该组件时至少需要提供 `logo`、`items` 和 `onSelect` 三个属性，具体用法请参照范例。
|
|
36
|
+
*
|
|
37
|
+
* 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
|
|
38
|
+
*
|
|
39
|
+
* [1]: https://ant-design.antgroup.com/components/layout-cn
|
|
40
|
+
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
41
|
+
*/
|
|
42
|
+
function Sidebar(props) {
|
|
43
|
+
const { width = 260, collapsible = false, logo, title, headerHeight = 116, header, items = DEFAULT_MENU_ITEMS, footer = (collapsed) => (_jsx(UserButton, { compact: collapsed, style: { marginBottom: token.paddingSM } })), className, style, ...rest } = props;
|
|
44
|
+
const [collapsed, setCollapsed] = useState(false);
|
|
45
|
+
// 默认展开到 selectedKeys
|
|
46
|
+
const [openKeys, setOpenKeys] = useState(() => rest.selectedKeys?.flatMap((key) => findKeyPath(items, key) ?? []) ?? []);
|
|
47
|
+
const { cx, styles, theme: token } = useStyles(collapsed);
|
|
48
|
+
return (_jsxs(Layout.Sider, { theme: "light", width: width, collapsed: collapsible ? collapsed : false, collapsible: collapsible, trigger: null, className: cx(styles.sidebar, className), style: style, children: [header === null ? null : header ? (header(collapsed)) : (_jsxs(Flex, { vertical: true, align: "center", justify: "center", className: cx(styles.sidebarHeader), style: { height: headerHeight }, children: [_jsx("img", { alt: "logo", src: logo }), _jsx("h1", { style: { color: token.colorText }, children: title })] })), _jsx(Menu, { mode: "inline", items: items, inlineCollapsed: collapsible ? collapsed : false, openKeys: openKeys, onOpenChange: (openKeys) => setOpenKeys(openKeys), className: cx(styles.sidebarMenu), ...rest }), footer === null ? null : footer?.(collapsed), collapsible && (_jsx(Button, { className: cx(styles.sidebarBtn), icon: collapsed ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}), onClick: () => setCollapsed(!collapsed) }))] }));
|
|
49
|
+
}
|
|
50
|
+
export default Sidebar;
|
|
29
51
|
const useStyles = createStyles(({ token, css, cx, prefixCls }, collapsed) => {
|
|
30
52
|
const sidebarHeader = css `
|
|
31
53
|
margin-top: ${token.marginXXS}px;
|
|
@@ -87,24 +109,21 @@ const useStyles = createStyles(({ token, css, cx, prefixCls }, collapsed) => {
|
|
|
87
109
|
sidebarBtn,
|
|
88
110
|
};
|
|
89
111
|
});
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
const { cx, styles, theme: token } = useStyles(collapsed);
|
|
107
|
-
return (_jsxs(Layout.Sider, { theme: "light", width: width, collapsed: collapsible ? collapsed : false, collapsible: collapsible, trigger: null, className: cx(styles.sidebar, className), style: style, children: [header === null ? null : header ? (header(collapsed)) : (_jsxs(Flex, { vertical: true, align: "center", justify: "center", className: cx(styles.sidebarHeader), style: { height: headerHeight }, children: [_jsx("img", { alt: "logo", src: logo }), _jsx("h1", { style: { color: token.colorText }, children: title })] })), _jsx(Menu, { mode: "inline", items: items, inlineCollapsed: collapsible ? collapsed : false, className: cx(styles.sidebarMenu), ...rest }), footer === null ? null : footer?.(collapsed), collapsible && (_jsx(Button, { className: cx(styles.sidebarBtn), icon: collapsed ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}), onClick: () => setCollapsed(!collapsed) }))] }));
|
|
112
|
+
function findKeyPath(items, key) {
|
|
113
|
+
for (const item of items) {
|
|
114
|
+
if (!item) {
|
|
115
|
+
continue;
|
|
116
|
+
}
|
|
117
|
+
if (item.key === key) {
|
|
118
|
+
return [];
|
|
119
|
+
}
|
|
120
|
+
if ("children" in item) {
|
|
121
|
+
const childrenResult = findKeyPath(item.children ?? [], key);
|
|
122
|
+
if (childrenResult) {
|
|
123
|
+
return [item.key, ...childrenResult];
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
return null;
|
|
108
128
|
}
|
|
109
|
-
export default Sidebar;
|
|
110
129
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAkB,MAAM,MAAM,CAAC;AAClE,OAAO,EAAgD,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,6DAA6D;AAC7D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,UAAU,MAAM,cAAc,CAAC;AAItC,MAAM,QAAQ,GAAG,CACf,KAAgB,EAChB,GAAQ,EACR,IAAgB,EAChB,QAAqB,EACX,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAEhD,yBAAyB;AACzB,MAAM,kBAAkB,GAAe;IACrC,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,KAAC,gBAAgB,KAAG,EAAE;QACnD,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;QAC9B,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC;QACrC,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;KAChC,CAAC;IACF,QAAQ,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAC,YAAY,KAAG,EAAE;QACrD,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;QACnC,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;QAC9B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;KACrC,CAAC;IACF,QAAQ,CAAC,MAAM,EAAE,qBAAqB,EAAE,KAAC,YAAY,KAAG,EAAE;QACxD,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC;QACrC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;QACpC,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAC;QACxC,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KACxC,CAAC;CACH,CAAC;AAgEF
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsingroc/tsingroc-components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"author": "",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"description": "",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"jwt-decode": "^4.0.0",
|
|
39
39
|
"react-icons": "^5.5.0",
|
|
40
40
|
"rollup-plugin-worker-factory": "^0.5.7",
|
|
41
|
-
"weatherlayers-gl": "^2025.
|
|
41
|
+
"weatherlayers-gl": "^2025.7.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@ant-design/icons": "^6.0.0",
|
|
@@ -53,29 +53,29 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@ant-design/icons": "^6.0.0",
|
|
55
55
|
"@eslint/js": "^9.21.0",
|
|
56
|
-
"@rsbuild/core": "^1.3
|
|
57
|
-
"@rsbuild/plugin-react": "^1.3.
|
|
56
|
+
"@rsbuild/core": "^1.4.3",
|
|
57
|
+
"@rsbuild/plugin-react": "^1.3.3",
|
|
58
58
|
"@rspress/plugin-preview": "2.0.0-beta.2",
|
|
59
|
-
"@types/node": "^22.
|
|
59
|
+
"@types/node": "^22.16.0",
|
|
60
60
|
"@types/react": "^18.3.23",
|
|
61
61
|
"@types/react-dom": "^18.3.7",
|
|
62
|
-
"antd": "^5.
|
|
62
|
+
"antd": "^5.26.3",
|
|
63
63
|
"antd-style": "^3.7.1",
|
|
64
64
|
"echarts": "^5.6.0",
|
|
65
65
|
"echarts-for-react": "^3.0.2",
|
|
66
66
|
"echarts-gl": "^2.0.9",
|
|
67
|
-
"eslint": "^9.
|
|
67
|
+
"eslint": "^9.30.1",
|
|
68
68
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
69
|
-
"globals": "^16.
|
|
70
|
-
"prettier": "^3.
|
|
69
|
+
"globals": "^16.3.0",
|
|
70
|
+
"prettier": "^3.6.2",
|
|
71
71
|
"react": "^18.3.1",
|
|
72
72
|
"react-dom": "^18.3.1",
|
|
73
73
|
"react-markdown": "^10.1.0",
|
|
74
74
|
"remark-gfm": "^4.0.1",
|
|
75
75
|
"rspress": "2.0.0-beta.2",
|
|
76
|
-
"typedoc": "^0.28.
|
|
76
|
+
"typedoc": "^0.28.7",
|
|
77
77
|
"typescript": "^5.8.3",
|
|
78
|
-
"typescript-eslint": "^8.
|
|
78
|
+
"typescript-eslint": "^8.35.1"
|
|
79
79
|
},
|
|
80
80
|
"prettier": {
|
|
81
81
|
"trailingComma": "all"
|
|
@@ -104,70 +104,6 @@ export interface SidebarProps extends MenuProps {
|
|
|
104
104
|
style?: CSSProperties;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
const useStyles = createStyles(
|
|
108
|
-
({ token, css, cx, prefixCls }, collapsed: boolean) => {
|
|
109
|
-
const sidebarHeader = css`
|
|
110
|
-
margin-top: ${token.marginXXS}px;
|
|
111
|
-
|
|
112
|
-
> img {
|
|
113
|
-
width: 40%;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
> h1 {
|
|
117
|
-
margin: ${collapsed ? 0 : token.marginXXS}px 0 0 0;
|
|
118
|
-
font-size: ${collapsed ? 0 : token.fontSize}px;
|
|
119
|
-
font-weight: normal;
|
|
120
|
-
line-height: 1;
|
|
121
|
-
transition:
|
|
122
|
-
margin-top ${token.motionDurationMid},
|
|
123
|
-
font-size ${token.motionDurationMid};
|
|
124
|
-
}
|
|
125
|
-
`;
|
|
126
|
-
const sidebarMenu = css`
|
|
127
|
-
flex-basis: 100%;
|
|
128
|
-
overflow-y: auto;
|
|
129
|
-
`;
|
|
130
|
-
const sidebarBtn = css`
|
|
131
|
-
position: absolute;
|
|
132
|
-
top: 75%;
|
|
133
|
-
right: 0;
|
|
134
|
-
transform: translate(50%, -50%);
|
|
135
|
-
|
|
136
|
-
font-size: ${token.sizeSM}px;
|
|
137
|
-
|
|
138
|
-
transition: opacity ${token.motionDurationMid};
|
|
139
|
-
opacity: 0%;
|
|
140
|
-
`;
|
|
141
|
-
const sidebar = css`
|
|
142
|
-
position: relative;
|
|
143
|
-
box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
|
|
144
|
-
|
|
145
|
-
> .${prefixCls}-layout-sider-children {
|
|
146
|
-
display: flex;
|
|
147
|
-
flex-direction: column;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* 为了提高权重 */
|
|
151
|
-
& .${cx(sidebarBtn)} {
|
|
152
|
-
width: ${token.controlHeightXS}px;
|
|
153
|
-
}
|
|
154
|
-
& .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
|
|
155
|
-
border-inline-end: none;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
&:hover .${cx(sidebarBtn)} {
|
|
159
|
-
opacity: 100%;
|
|
160
|
-
}
|
|
161
|
-
`;
|
|
162
|
-
return {
|
|
163
|
-
sidebar,
|
|
164
|
-
sidebarHeader,
|
|
165
|
-
sidebarMenu,
|
|
166
|
-
sidebarBtn,
|
|
167
|
-
};
|
|
168
|
-
},
|
|
169
|
-
);
|
|
170
|
-
|
|
171
107
|
/**
|
|
172
108
|
* 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
173
109
|
* 如果没有指定 {@linkcode SidebarProps.footer | footer} 属性，
|
|
@@ -202,6 +138,11 @@ function Sidebar(props: SidebarProps) {
|
|
|
202
138
|
} = props;
|
|
203
139
|
|
|
204
140
|
const [collapsed, setCollapsed] = useState(false);
|
|
141
|
+
// 默认展开到 selectedKeys
|
|
142
|
+
const [openKeys, setOpenKeys] = useState<string[]>(
|
|
143
|
+
() =>
|
|
144
|
+
rest.selectedKeys?.flatMap((key) => findKeyPath(items, key) ?? []) ?? [],
|
|
145
|
+
);
|
|
205
146
|
const { cx, styles, theme: token } = useStyles(collapsed);
|
|
206
147
|
|
|
207
148
|
return (
|
|
@@ -232,6 +173,8 @@ function Sidebar(props: SidebarProps) {
|
|
|
232
173
|
mode="inline"
|
|
233
174
|
items={items}
|
|
234
175
|
inlineCollapsed={collapsible ? collapsed : false}
|
|
176
|
+
openKeys={openKeys}
|
|
177
|
+
onOpenChange={(openKeys) => setOpenKeys(openKeys)}
|
|
235
178
|
className={cx(styles.sidebarMenu)}
|
|
236
179
|
{...rest}
|
|
237
180
|
/>
|
|
@@ -248,3 +191,85 @@ function Sidebar(props: SidebarProps) {
|
|
|
248
191
|
}
|
|
249
192
|
|
|
250
193
|
export default Sidebar;
|
|
194
|
+
|
|
195
|
+
const useStyles = createStyles(
|
|
196
|
+
({ token, css, cx, prefixCls }, collapsed: boolean) => {
|
|
197
|
+
const sidebarHeader = css`
|
|
198
|
+
margin-top: ${token.marginXXS}px;
|
|
199
|
+
|
|
200
|
+
> img {
|
|
201
|
+
width: 40%;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
> h1 {
|
|
205
|
+
margin: ${collapsed ? 0 : token.marginXXS}px 0 0 0;
|
|
206
|
+
font-size: ${collapsed ? 0 : token.fontSize}px;
|
|
207
|
+
font-weight: normal;
|
|
208
|
+
line-height: 1;
|
|
209
|
+
transition:
|
|
210
|
+
margin-top ${token.motionDurationMid},
|
|
211
|
+
font-size ${token.motionDurationMid};
|
|
212
|
+
}
|
|
213
|
+
`;
|
|
214
|
+
const sidebarMenu = css`
|
|
215
|
+
flex-basis: 100%;
|
|
216
|
+
overflow-y: auto;
|
|
217
|
+
`;
|
|
218
|
+
const sidebarBtn = css`
|
|
219
|
+
position: absolute;
|
|
220
|
+
top: 75%;
|
|
221
|
+
right: 0;
|
|
222
|
+
transform: translate(50%, -50%);
|
|
223
|
+
|
|
224
|
+
font-size: ${token.sizeSM}px;
|
|
225
|
+
|
|
226
|
+
transition: opacity ${token.motionDurationMid};
|
|
227
|
+
opacity: 0%;
|
|
228
|
+
`;
|
|
229
|
+
const sidebar = css`
|
|
230
|
+
position: relative;
|
|
231
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
|
|
232
|
+
|
|
233
|
+
> .${prefixCls}-layout-sider-children {
|
|
234
|
+
display: flex;
|
|
235
|
+
flex-direction: column;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* 为了提高权重 */
|
|
239
|
+
& .${cx(sidebarBtn)} {
|
|
240
|
+
width: ${token.controlHeightXS}px;
|
|
241
|
+
}
|
|
242
|
+
& .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
|
|
243
|
+
border-inline-end: none;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&:hover .${cx(sidebarBtn)} {
|
|
247
|
+
opacity: 100%;
|
|
248
|
+
}
|
|
249
|
+
`;
|
|
250
|
+
return {
|
|
251
|
+
sidebar,
|
|
252
|
+
sidebarHeader,
|
|
253
|
+
sidebarMenu,
|
|
254
|
+
sidebarBtn,
|
|
255
|
+
};
|
|
256
|
+
},
|
|
257
|
+
);
|
|
258
|
+
|
|
259
|
+
function findKeyPath(items: MenuItem[], key: string): string[] | null {
|
|
260
|
+
for (const item of items) {
|
|
261
|
+
if (!item) {
|
|
262
|
+
continue;
|
|
263
|
+
}
|
|
264
|
+
if (item.key === key) {
|
|
265
|
+
return [];
|
|
266
|
+
}
|
|
267
|
+
if ("children" in item) {
|
|
268
|
+
const childrenResult = findKeyPath(item.children ?? [], key);
|
|
269
|
+
if (childrenResult) {
|
|
270
|
+
return [item.key as string, ...childrenResult];
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
return null;
|
|
275
|
+
}
|