dishui 0.0.79 → 0.0.80
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/Avatar/index.d.ts +6 -4
- package/dist/components/Avatar/index.js +39 -28
- package/dist/components/Avatar/index.js.map +1 -1
- package/dist/components/Card/index.d.ts +16 -8
- package/dist/components/Card/index.js +81 -99
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/DateTimeInput/index.js +3 -2
- package/dist/components/DateTimeInput/index.js.map +1 -1
- package/dist/components/GroupedTable/index.d.ts +2 -1
- package/dist/components/GroupedTable/index.js +96 -37
- package/dist/components/GroupedTable/index.js.map +1 -1
- package/dist/components/Input/index.d.ts +2 -2
- package/dist/components/Input/index.js +129 -111
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Label/index.js +1 -1
- package/dist/components/Label/index.js.map +1 -1
- package/dist/components/NavigationList/index.js +55 -24
- package/dist/components/NavigationList/index.js.map +1 -1
- package/dist/components/Resizable/index.d.ts +28 -0
- package/dist/components/Resizable/index.js +128 -0
- package/dist/components/Resizable/index.js.map +1 -0
- package/dist/components/Resizable/useResize.d.ts +21 -0
- package/dist/components/Resizable/useResize.js +60 -0
- package/dist/components/Resizable/useResize.js.map +1 -0
- package/dist/components/SidebarToggleButton/index.js +51 -43
- package/dist/components/SidebarToggleButton/index.js.map +1 -1
- package/dist/components/Slider/index.d.ts +17 -3
- package/dist/components/Slider/index.js +131 -28
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/dishui.css +1 -1
- package/dist/index-nostyled.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +123 -121
- package/dist/layouts/Sidebar.js +34 -45
- package/dist/layouts/Sidebar.js.map +1 -1
- package/dist/lite.d.ts +2 -0
- package/dist/lite.js +20 -18
- package/dist/utils/i18n.js +145 -75
- package/dist/utils/i18n.js.map +1 -1
- package/dist/utils/menu.js +85 -8
- package/dist/utils/menu.js.map +1 -1
- package/package.json +1 -1
package/dist/index-nostyled.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { Resizable, ResizablePanel, ResizableHandle, useResize } from './components/Resizable';
|
|
2
|
+
export type { ResizableProps, ResizablePanelProps, ResizableHandleProps, UseResizeOptions } from './components/Resizable';
|
|
1
3
|
export { default as Button } from './components/Button';
|
|
2
4
|
export type { ButtonProps, ButtonGroupProps, ButtonGroupSectionProps, ButtonState } from './components/Button';
|
|
3
5
|
export { default as Badge } from './components/Badge';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { Resizable, ResizablePanel, ResizableHandle, useResize } from './components/Resizable';
|
|
2
|
+
export type { ResizableProps, ResizablePanelProps, ResizableHandleProps, UseResizeOptions } from './components/Resizable';
|
|
1
3
|
export { default as GroupButton } from './components/GroupButton';
|
|
2
4
|
export type { GroupButtonProps, GroupButtonOption } from './components/GroupButton';
|
|
3
5
|
export { default as GroupedTable } from './components/GroupedTable';
|
package/dist/index.js
CHANGED
|
@@ -1,122 +1,124 @@
|
|
|
1
1
|
/* empty css */
|
|
2
|
-
import {
|
|
3
|
-
import t from "./components/
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import w from "./components/
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import I from "./components/
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
import
|
|
34
|
-
import
|
|
35
|
-
import
|
|
36
|
-
import
|
|
37
|
-
import
|
|
38
|
-
import J from "./components/
|
|
39
|
-
import {
|
|
40
|
-
import Q from "./
|
|
41
|
-
import
|
|
42
|
-
import
|
|
43
|
-
import
|
|
44
|
-
import
|
|
45
|
-
import
|
|
46
|
-
import
|
|
47
|
-
import {
|
|
48
|
-
import
|
|
49
|
-
import de from "./
|
|
50
|
-
import
|
|
51
|
-
import
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import
|
|
57
|
-
import
|
|
58
|
-
import je from "./
|
|
59
|
-
import
|
|
60
|
-
import
|
|
61
|
-
import
|
|
62
|
-
import
|
|
63
|
-
import
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import
|
|
71
|
-
import
|
|
72
|
-
import
|
|
73
|
-
import
|
|
74
|
-
import
|
|
75
|
-
import
|
|
76
|
-
import
|
|
77
|
-
import
|
|
78
|
-
import
|
|
79
|
-
import
|
|
80
|
-
import {
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
91
|
-
import {
|
|
92
|
-
import {
|
|
93
|
-
import
|
|
94
|
-
import
|
|
95
|
-
import
|
|
96
|
-
import
|
|
97
|
-
import {
|
|
98
|
-
import
|
|
99
|
-
import {
|
|
100
|
-
import {
|
|
101
|
-
import {
|
|
102
|
-
import qt from "./components/pro/Flow/
|
|
103
|
-
import
|
|
104
|
-
import
|
|
105
|
-
import
|
|
106
|
-
import
|
|
107
|
-
import
|
|
108
|
-
import
|
|
109
|
-
import
|
|
110
|
-
import {
|
|
111
|
-
import
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import
|
|
118
|
-
import {
|
|
119
|
-
import
|
|
120
|
-
import {
|
|
121
|
-
import
|
|
122
|
-
|
|
2
|
+
import { useResize as e } from "./components/Resizable/useResize.js";
|
|
3
|
+
import { Resizable as t, ResizableHandle as n, ResizablePanel as r } from "./components/Resizable/index.js";
|
|
4
|
+
import { cn as i } from "./utils/cn.js";
|
|
5
|
+
import a from "./components/Button/index.js";
|
|
6
|
+
import o from "./components/GroupButton/index.js";
|
|
7
|
+
import s from "./components/Table/index.js";
|
|
8
|
+
import c from "./components/Skeleton/index.js";
|
|
9
|
+
import l from "./components/GroupedTable/index.js";
|
|
10
|
+
import u from "./components/NavigationList/index.js";
|
|
11
|
+
import d from "./components/Section/index.js";
|
|
12
|
+
import f from "./components/Badge/index.js";
|
|
13
|
+
import p from "./components/Input/index.js";
|
|
14
|
+
import m from "./components/Label/index.js";
|
|
15
|
+
import h from "./components/Checkbox/index.js";
|
|
16
|
+
import g from "./components/Switch/index.js";
|
|
17
|
+
import _ from "./components/Tooltip/index.js";
|
|
18
|
+
import v from "./components/Divider/index.js";
|
|
19
|
+
import y from "./components/Select/index.js";
|
|
20
|
+
import b from "./components/Card/index.js";
|
|
21
|
+
import x from "./components/PageHeader/index.js";
|
|
22
|
+
import S, { PageBody as C, PageLeft as w, PageMain as T, PageRight as E } from "./components/Page/index.js";
|
|
23
|
+
import D from "./components/EmptyState/index.js";
|
|
24
|
+
import O from "./components/Avatar/index.js";
|
|
25
|
+
import k from "./components/Accordion/index.js";
|
|
26
|
+
import A from "./components/Modal/index.js";
|
|
27
|
+
import j from "./components/Tabs/index.js";
|
|
28
|
+
import M, { Container as N, Flex as P, Grid as F, GridItem as I, Group as L, Space as R } from "./components/Layout/index.js";
|
|
29
|
+
import z from "./components/List/index.js";
|
|
30
|
+
import B from "./components/Row/index.js";
|
|
31
|
+
import V from "./components/Column/index.js";
|
|
32
|
+
import H from "./components/Text/index.js";
|
|
33
|
+
import U from "./components/Image/index.js";
|
|
34
|
+
import W from "./components/Icon/index.js";
|
|
35
|
+
import G from "./components/Slider/index.js";
|
|
36
|
+
import K from "./components/DateTimeInput/index.js";
|
|
37
|
+
import q from "./components/MultipleChoice/index.js";
|
|
38
|
+
import J from "./components/ChoicePicker/index.js";
|
|
39
|
+
import { generateSidebarActiveStyles as Y, generateTreeActiveStyles as X, themeActiveStyles as Z } from "./styles/themeStyles.js";
|
|
40
|
+
import Q from "./components/Tree/Tree.js";
|
|
41
|
+
import { DesktopSidebarToggleButton as $, MobileSidebarToggleButton as ee, SidebarToggleButtons as te } from "./components/SidebarToggleButton/index.js";
|
|
42
|
+
import ne from "./layouts/Sidebar.js";
|
|
43
|
+
import re from "./layouts/headbar/Headbar.js";
|
|
44
|
+
import ie from "./layouts/headbar/HeadbarTitle.js";
|
|
45
|
+
import ae from "./layouts/headbar/HeadbarSearch.js";
|
|
46
|
+
import oe from "./layouts/headbar/HeadbarLangSwitcher.js";
|
|
47
|
+
import { getThemes as se } from "./utils/themes.js";
|
|
48
|
+
import ce from "./layouts/headbar/HeadbarThemeSwitcher.js";
|
|
49
|
+
import { AppLayoutWrapper as le, AppProvider as ue, AppShell as de, useAppContext as fe, useAuth as pe } from "./contexts/AppContext.js";
|
|
50
|
+
import me from "./hooks/useTableColumns.js";
|
|
51
|
+
import he from "./hooks/useTableData.js";
|
|
52
|
+
import { defineExtension as ge } from "./components/pro/DataTable/extension.js";
|
|
53
|
+
import { computePivot as _e } from "./components/pro/DataTable/pivotEngine.js";
|
|
54
|
+
import { PivotView as ve } from "./components/pro/DataTable/PivotView.js";
|
|
55
|
+
import { PivotPanel as ye } from "./components/pro/DataTable/PivotPanel.js";
|
|
56
|
+
import { usePivotExtension as be } from "./components/pro/DataTable/pivotExtension.js";
|
|
57
|
+
import { useRowDetailExtension as xe } from "./components/pro/DataTable/rowDetailExtension.js";
|
|
58
|
+
import Se, { createActionColumn as Ce, createColumn as we, createComputedColumn as Te, createSelectOptions as Ee, createSelectionColumn as De, dateSort as Oe, defaultFilterFunctions as ke, extractUniqueOptions as Ae, numericSort as je, stringSort as Me, treeSort as Ne } from "./data-table.js";
|
|
59
|
+
import Pe from "./components/Chart/Chart.js";
|
|
60
|
+
import Fe from "./components/Demo/index.js";
|
|
61
|
+
import Ie from "./components/pro/ArticleControl/ArticleControl2.js";
|
|
62
|
+
import Le from "./components/pro/ArticleContextMenu/index.js";
|
|
63
|
+
import Re from "./components/Markdown/Markdown.js";
|
|
64
|
+
import { getDefaultSnippets as ze, javascriptSnippets as Be, pythonSnippets as Ve } from "./components/pro/CodeEditor/langs/snippets.js";
|
|
65
|
+
import { jsJumpableKeywords as He, jsKeywords as Ue } from "./components/pro/CodeEditor/langs/javascript.js";
|
|
66
|
+
import { pyJumpableKeywords as We, pyKeywords as Ge } from "./components/pro/CodeEditor/langs/python.js";
|
|
67
|
+
import { getJumpableKeywords as Ke, getLanguageKeywords as qe } from "./components/pro/CodeEditor/langs/index.js";
|
|
68
|
+
import { bracketMatchingStyle as Je, jumpTargetHighlight as Ye, jumpToDefinition as Xe, lineHighlightStyle as Ze, smartAutocompletion as Qe } from "./components/pro/CodeEditor/extensions/index.js";
|
|
69
|
+
import { createThemeExtension as $e } from "./components/pro/CodeEditor/themes.js";
|
|
70
|
+
import { collectVariables as et, generateOutline as tt } from "./components/pro/CodeEditor/utils.js";
|
|
71
|
+
import { defaultContextMenu as nt } from "./components/pro/CodeEditor/extensions/contextMenu.js";
|
|
72
|
+
import rt from "./components/pro/CodeEditor/editors/CodeEditor.js";
|
|
73
|
+
import it from "./components/pro/CodeEditor/panels/TableOfContentsPanel.js";
|
|
74
|
+
import at from "./components/pro/CodeEditor/panels/FootnotePanel.js";
|
|
75
|
+
import ot from "./components/pro/CodeEditor/editors/MarkdownEditor.js";
|
|
76
|
+
import st from "./components/pro/CodeEditor/panels/OutlinePanel.js";
|
|
77
|
+
import ct from "./components/pro/CodeEditor/panels/VariablePanel.js";
|
|
78
|
+
import lt from "./layouts/MainLayout.js";
|
|
79
|
+
import ut from "./layouts/Navbar.js";
|
|
80
|
+
import { ProtectedRoute as dt } from "./components/ProtectedRoute/index.js";
|
|
81
|
+
import { buildRouter as ft, createRouterFromConfig as pt } from "./utils/routerBuilder.js";
|
|
82
|
+
import { DropZone as mt, formatFileSize as ht } from "./components/FileUploader/DropZone.js";
|
|
83
|
+
import { FileItem as gt } from "./components/FileUploader/FileItem.js";
|
|
84
|
+
import { UploadQueue as _t } from "./components/FileUploader/UploadQueue.js";
|
|
85
|
+
import { FileUploader as vt } from "./components/FileUploader/FileUploader.js";
|
|
86
|
+
import { FileIcon as yt } from "./components/pro/FileExplorer/FileIcon.js";
|
|
87
|
+
import { Breadcrumb as bt } from "./components/pro/FileExplorer/Breadcrumb.js";
|
|
88
|
+
import { Toolbar as xt } from "./components/pro/FileExplorer/Toolbar.js";
|
|
89
|
+
import { ListView as St } from "./components/pro/FileExplorer/ListView.js";
|
|
90
|
+
import { GridView as Ct } from "./components/pro/FileExplorer/GridView.js";
|
|
91
|
+
import { CreateDialog as wt } from "./components/pro/FileExplorer/CreateDialog.js";
|
|
92
|
+
import { FileExplorer as Tt } from "./components/pro/FileExplorer/FileExplorer.js";
|
|
93
|
+
import { defaultLabels as Et } from "./components/pro/RichTextEditor/types.js";
|
|
94
|
+
import { MarkdownBlockExtension as Dt } from "./components/pro/RichTextEditor/extensions/MarkdownBlock.js";
|
|
95
|
+
import Ot from "./components/pro/RichTextEditor/Toolbar/Toolbar.js";
|
|
96
|
+
import kt from "./components/pro/RichTextEditor/AIRewrite.js";
|
|
97
|
+
import { CodeBlockExtension as At } from "./components/pro/RichTextEditor/extensions/CodeBlockView.js";
|
|
98
|
+
import jt from "./components/pro/RichTextEditor/RichTextEditor.js";
|
|
99
|
+
import { BORDER_STYLE_OPTIONS as Mt, DASH_DENSITY_OPTIONS as Nt, DEFAULT_EDGE_DATA as Pt, DEFAULT_NODE_DATA as Ft, EDGE_LINE_STYLE_OPTIONS as It, EDGE_MARKER_OPTIONS as Lt, EDGE_TYPE_OPTIONS as Rt, GRADIENT_DIRECTION_OPTIONS as zt, PALETTE_ITEMS as Bt, ROOT_CANVAS_ID as Vt, createEmptyDocument as Ht } from "./components/pro/Flow/constants.js";
|
|
100
|
+
import { FlowProvider as Ut, useFlowContext as Wt } from "./components/pro/Flow/context/FlowContext.js";
|
|
101
|
+
import { FlowUIProvider as Gt, useFlowUI as Kt } from "./components/pro/Flow/context/FlowUIContext.js";
|
|
102
|
+
import { downloadDataURL as qt, exportCanvasToPNG as Jt, useFlowImportExport as Yt } from "./components/pro/Flow/hooks/useFlowImportExport.js";
|
|
103
|
+
import { useLayoutActions as Xt } from "./components/pro/Flow/hooks/useLayoutActions.js";
|
|
104
|
+
import Zt from "./components/pro/Flow/panels/FlowToolbar.js";
|
|
105
|
+
import Qt from "./components/pro/Flow/panels/ShapePalette.js";
|
|
106
|
+
import { FLOW_NODE_TYPES as $t } from "./components/pro/Flow/types.js";
|
|
107
|
+
import en from "./components/pro/Flow/panels/InspectorPanel.js";
|
|
108
|
+
import tn from "./components/pro/Flow/panels/OutlinePanel.js";
|
|
109
|
+
import nn from "./components/pro/Flow/panels/ContextMenu.js";
|
|
110
|
+
import { useClipboard as rn } from "./components/pro/Flow/hooks/useClipboard.js";
|
|
111
|
+
import an from "./components/pro/Flow/Flow.js";
|
|
112
|
+
import { useNodeMutations as on } from "./components/pro/Flow/hooks/useNodeMutations.js";
|
|
113
|
+
import { useEdgeMutations as sn } from "./components/pro/Flow/hooks/useEdgeMutations.js";
|
|
114
|
+
import { useLineMutations as cn } from "./components/pro/Flow/hooks/useLineMutations.js";
|
|
115
|
+
import { useSelection as ln } from "./components/pro/Flow/hooks/useSelection.js";
|
|
116
|
+
import { DEFAULT_CATEGORY_CONFIG as un, DEFAULT_SCALE_CONFIGS as dn, DEFAULT_TIME_WINDOW as fn, addDays as pn, addWorkingDays as mn, calculateWorkingDays as hn, computeDateRange as gn, dateToX as _n, daysBetween as vn, flattenTree as yn, formatDate as bn, generateDateRange as xn, generateHeaderGroups as Sn, getISOWeekNumber as Cn, getISOWeekYear as wn, isNonWorkingDay as Tn, isWeekend as En, parseDate as Dn, startOfDay as On, xToDate as kn } from "./components/pro/Gantt/utils.js";
|
|
117
|
+
import { useGanttState as An } from "./components/pro/Gantt/hooks/useGanttState.js";
|
|
118
|
+
import { useGanttDrag as jn } from "./components/pro/Gantt/hooks/useGanttDrag.js";
|
|
119
|
+
import Mn from "./components/pro/Gantt/Gantt.js";
|
|
120
|
+
import { DEFAULT_COLOR_OPTIONS as Nn, LABELS_EN as Pn, LABELS_ZH as Fn, SLOT_HEIGHT as In, TIME_GRID_HEIGHT as Ln, TIME_SLOTS as Rn, addDays as zn, clamp as Bn, formatDate as Vn, formatTime as Hn, generateId as Un, generateTimeSlots as Wn, getDaysInMonth as Gn, getFirstDayOfMonth as Kn, getHolidayEntry as qn, getMonthDates as Jn, getWeekDates as Yn, isHoliday as Xn, isNonWorkingDay as Zn, isSameDay as Qn, isToday as $n, isWeekend as er, minutesToTime as tr, parseDate as nr, parseTime as rr, timeToMinutes as ir, todayStr as ar } from "./components/pro/Calendar/utils.js";
|
|
121
|
+
import { useCalendarState as or } from "./components/pro/Calendar/hooks/useCalendarState.js";
|
|
122
|
+
import { useCalendarDrag as sr } from "./components/pro/Calendar/hooks/useCalendarDrag.js";
|
|
123
|
+
import cr from "./components/pro/Calendar/Calendar.js";
|
|
124
|
+
export { kt as AIRewrite, k as Accordion, le as AppLayoutWrapper, ue as AppProvider, de as AppShell, Le as ArticleContextMenu, Ie as ArticleControl, O as Avatar, Mt as BORDER_STYLE_OPTIONS, f as Badge, bt as Breadcrumb, a as Button, Nn as CALENDAR_DEFAULT_COLOR_OPTIONS, Pn as CALENDAR_LABELS_EN, Fn as CALENDAR_LABELS_ZH, In as CALENDAR_SLOT_HEIGHT, Ln as CALENDAR_TIME_GRID_HEIGHT, Rn as CALENDAR_TIME_SLOTS, cr as Calendar, b as Card, Pe as Chart, h as Checkbox, J as ChoicePicker, At as CodeBlockExtension, rt as CodeEditor, V as Column, N as Container, wt as CreateDialog, Nt as DASH_DENSITY_OPTIONS, un as DEFAULT_CATEGORY_CONFIG, Pt as DEFAULT_EDGE_DATA, Ft as DEFAULT_NODE_DATA, dn as DEFAULT_SCALE_CONFIGS, fn as DEFAULT_TIME_WINDOW, Se as DataTable, K as DateTimeInput, Fe as Demo, $ as DesktopSidebarToggleButton, v as Divider, mt as DropZone, It as EDGE_LINE_STYLE_OPTIONS, Lt as EDGE_MARKER_OPTIONS, Rt as EDGE_TYPE_OPTIONS, D as EmptyState, $t as FLOW_NODE_TYPES, Tt as FileExplorer, xt as FileExplorerToolbar, yt as FileIcon, vt as FileUploader, P as Flex, an as Flow, nn as FlowContextMenu, en as FlowInspectorPanel, tn as FlowOutlinePanel, Ut as FlowProvider, Qt as FlowShapePalette, Zt as FlowToolbar, Gt as FlowUIProvider, at as FootnotePanel, zt as GRADIENT_DIRECTION_OPTIONS, Mn as Gantt, F as Grid, I as GridItem, Ct as GridView, L as Group, o as GroupButton, l as GroupedTable, re as Headbar, oe as HeadbarLangSwitcher, ae as HeadbarSearch, ce as HeadbarThemeSwitcher, ie as HeadbarTitle, W as Icon, U as Image, p as Input, m as Label, M as Layout, z as List, St as ListView, lt as MainLayout, Re as Markdown, Dt as MarkdownBlockExtension, ot as MarkdownEditor, ee as MobileSidebarToggleButton, A as Modal, q as MultipleChoice, ut as Navbar, u as NavigationList, st as OutlinePanel, Bt as PALETTE_ITEMS, S as Page, C as PageBody, x as PageHeader, w as PageLeft, T as PageMain, E as PageRight, ye as PivotPanel, ve as PivotView, dt as ProtectedRoute, Vt as ROOT_CANVAS_ID, t as Resizable, n as ResizableHandle, r as ResizablePanel, jt as RichTextEditor, Ot as RichTextToolbar, B as Row, d as Section, y as Select, ne as Sidebar, te as SidebarToggleButtons, c as Skeleton, G as Slider, R as Space, g as Switch, s as Table, it as TableOfContentsPanel, j as Tabs, H as Text, _ as Tooltip, Q as Tree, gt as UploadFileItem, _t as UploadQueue, ct as VariablePanel, zn as addCalendarDays, pn as addGanttDays, mn as addWorkingDays, Je as bracketMatchingStyle, ft as buildRouter, hn as calculateWorkingDays, Bn as calendarClamp, tr as calendarMinutesToTime, ir as calendarTimeToMinutes, ar as calendarTodayStr, i as cn, et as collectVariables, gn as computeDateRange, _e as computePivot, Ce as createActionColumn, we as createColumn, Te as createComputedColumn, Ht as createEmptyDocument, pt as createRouterFromConfig, Ee as createSelectOptions, De as createSelectionColumn, $e as createThemeExtension, Oe as dateSort, vn as daysBetween, nt as defaultContextMenu, ke as defaultFilterFunctions, ge as defineExtension, qt as downloadDataURL, Jt as exportCanvasToPNG, Ae as extractUniqueOptions, yn as flattenGanttTree, Vn as formatCalendarDate, Hn as formatCalendarTime, ht as formatFileSize, bn as formatGanttDate, _n as ganttDateToX, kn as ganttXToDate, Un as generateCalendarId, Wn as generateCalendarTimeSlots, xn as generateDateRange, Sn as generateHeaderGroups, tt as generateOutline, Y as generateSidebarActiveStyles, X as generateTreeActiveStyles, Gn as getCalendarDaysInMonth, Kn as getCalendarFirstDayOfMonth, qn as getCalendarHolidayEntry, Jn as getCalendarMonthDates, Yn as getCalendarWeekDates, ze as getDefaultSnippets, Cn as getISOWeekNumber, wn as getISOWeekYear, Ke as getJumpableKeywords, qe as getLanguageKeywords, se as getThemes, Xn as isCalendarHoliday, Zn as isCalendarNonWorkingDay, Qn as isCalendarSameDay, $n as isCalendarToday, er as isCalendarWeekend, Tn as isGanttNonWorkingDay, En as isGanttWeekend, Be as javascriptSnippets, He as jsJumpableKeywords, Ue as jsKeywords, Ye as jumpTargetHighlight, Xe as jumpToDefinition, Ze as lineHighlightStyle, je as numericSort, nr as parseCalendarDate, rr as parseCalendarTime, Dn as parseGanttDate, We as pyJumpableKeywords, Ge as pyKeywords, Ve as pythonSnippets, Et as richTextDefaultLabels, Qe as smartAutocompletion, On as startOfGanttDay, Me as stringSort, Z as themeActiveStyles, Ne as treeSort, fe as useAppContext, pe as useAuth, sr as useCalendarDrag, or as useCalendarState, sn as useEdgeMutations, rn as useFlowClipboard, Wt as useFlowContext, Yt as useFlowImportExport, ln as useFlowSelection, Kt as useFlowUI, jn as useGanttDrag, An as useGanttState, Xt as useLayoutActions, cn as useLineMutations, on as useNodeMutations, be as usePivotExtension, e as useResize, xe as useRowDetailExtension, me as useTableColumns, he as useTableData };
|
package/dist/layouts/Sidebar.js
CHANGED
|
@@ -7,12 +7,17 @@ import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
|
7
7
|
import { useNavigate as u, useRouterState as d } from "@tanstack/react-router";
|
|
8
8
|
//#region src/layouts/Sidebar.tsx
|
|
9
9
|
var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange: g, initialWidth: _ = 280, collapsedWidth: v = 64, onToggle: y, minWidth: b = 160, maxWidth: x = 400 }) => {
|
|
10
|
-
let [S, C] = s([]), [w, T] = s(""), [E, D] = s(
|
|
10
|
+
let [S, C] = s([]), [w, T] = s(""), [E, D] = s(() => Math.max(b, Math.min(_, x))), O = o(null), k = o(null), A = d({ select: (e) => e.location }), j = u();
|
|
11
11
|
i(() => {
|
|
12
|
-
|
|
13
|
-
}, [
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
D(Math.max(b, Math.min(_, x)));
|
|
13
|
+
}, [
|
|
14
|
+
_,
|
|
15
|
+
b,
|
|
16
|
+
x
|
|
17
|
+
]);
|
|
18
|
+
let M = (e) => {
|
|
19
|
+
let t = Math.max(b, Math.min(e, x));
|
|
20
|
+
D(t), g?.(t);
|
|
16
21
|
};
|
|
17
22
|
i(() => {
|
|
18
23
|
C(m === void 0 ? h ? h(p) : n(p) : m);
|
|
@@ -23,14 +28,14 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
23
28
|
]), i(() => {
|
|
24
29
|
if (!w) return;
|
|
25
30
|
let e = setTimeout(() => {
|
|
26
|
-
|
|
31
|
+
k.current?.querySelector(".tree-node-content-active")?.scrollIntoView({
|
|
27
32
|
block: "nearest",
|
|
28
33
|
behavior: "smooth"
|
|
29
34
|
});
|
|
30
35
|
}, 350);
|
|
31
36
|
return () => clearTimeout(e);
|
|
32
37
|
}, [w]), i(() => {
|
|
33
|
-
let e =
|
|
38
|
+
let e = k.current;
|
|
34
39
|
if (!e) return;
|
|
35
40
|
let t = (t) => {
|
|
36
41
|
if (e.scrollHeight <= e.clientHeight) return;
|
|
@@ -41,7 +46,7 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
41
46
|
};
|
|
42
47
|
return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
|
|
43
48
|
}, []);
|
|
44
|
-
let
|
|
49
|
+
let N = (e, t = !0) => e.map((e) => ({
|
|
45
50
|
id: e.id,
|
|
46
51
|
label: e.label,
|
|
47
52
|
icon: e.icon || (t ? void 0 : /* @__PURE__ */ c("svg", {
|
|
@@ -57,9 +62,9 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
57
62
|
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
58
63
|
})
|
|
59
64
|
})),
|
|
60
|
-
children: e.children ?
|
|
65
|
+
children: e.children ? N(e.children, !1) : void 0,
|
|
61
66
|
meta: { path: e.path }
|
|
62
|
-
})),
|
|
67
|
+
})), P = a(() => N(S, !0), [S]), F = a(() => {
|
|
63
68
|
if (S.length === 0) return [];
|
|
64
69
|
let e = (t) => {
|
|
65
70
|
let n = [];
|
|
@@ -69,7 +74,7 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
69
74
|
return e(S);
|
|
70
75
|
}, [S]);
|
|
71
76
|
return i(() => {
|
|
72
|
-
let e =
|
|
77
|
+
let e = A.pathname, t = (n) => {
|
|
73
78
|
for (let r of n) {
|
|
74
79
|
if (r.path === e) return r.id;
|
|
75
80
|
if (r.children) {
|
|
@@ -80,39 +85,23 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
80
85
|
return null;
|
|
81
86
|
}, n = t(S);
|
|
82
87
|
n && T(n);
|
|
83
|
-
}, [S,
|
|
84
|
-
|
|
85
|
-
D(!1), document.body.style.userSelect = "", document.body.style.cursor = "";
|
|
86
|
-
}, t = (e) => {
|
|
87
|
-
if (E && A.current) {
|
|
88
|
-
let t = A.current.getBoundingClientRect().left, n = e.clientX - t, r = Math.max(160, Math.min(n, 400));
|
|
89
|
-
k(r), g && g(r);
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
return document.addEventListener("mouseup", e), document.addEventListener("mousemove", t), () => {
|
|
93
|
-
document.removeEventListener("mouseup", e), document.removeEventListener("mousemove", t);
|
|
94
|
-
};
|
|
95
|
-
}, [
|
|
96
|
-
E,
|
|
97
|
-
g,
|
|
98
|
-
A
|
|
99
|
-
]), f ? /* @__PURE__ */ l("div", {
|
|
100
|
-
ref: A,
|
|
88
|
+
}, [S, A.pathname]), f ? /* @__PURE__ */ l("div", {
|
|
89
|
+
ref: O,
|
|
101
90
|
className: "blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative",
|
|
102
91
|
style: { width: `${v}px` },
|
|
103
92
|
children: [y && /* @__PURE__ */ c(r, {
|
|
104
93
|
isCollapsed: f,
|
|
105
94
|
onToggle: y,
|
|
106
|
-
sidebarWidth:
|
|
95
|
+
sidebarWidth: E,
|
|
107
96
|
collapsedWidth: v,
|
|
108
|
-
onWidthChange: g ?
|
|
97
|
+
onWidthChange: g ? M : void 0,
|
|
109
98
|
minWidth: b,
|
|
110
99
|
maxWidth: x,
|
|
111
|
-
anchorRef:
|
|
100
|
+
anchorRef: O
|
|
112
101
|
}), /* @__PURE__ */ c("ul", {
|
|
113
102
|
className: "flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden",
|
|
114
103
|
children: S.map((e) => /* @__PURE__ */ c("li", { children: e.path ? /* @__PURE__ */ c("button", {
|
|
115
|
-
onClick: () =>
|
|
104
|
+
onClick: () => j({ to: e.path }),
|
|
116
105
|
"aria-label": e.label,
|
|
117
106
|
className: "flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full",
|
|
118
107
|
style: {
|
|
@@ -140,31 +129,31 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
140
129
|
}) }, e.id))
|
|
141
130
|
})]
|
|
142
131
|
}) : /* @__PURE__ */ l("div", {
|
|
143
|
-
ref:
|
|
132
|
+
ref: O,
|
|
144
133
|
className: "blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative",
|
|
145
134
|
style: {
|
|
146
|
-
width: `${
|
|
147
|
-
maxWidth:
|
|
148
|
-
minWidth:
|
|
135
|
+
width: `${E}px`,
|
|
136
|
+
maxWidth: x,
|
|
137
|
+
minWidth: b
|
|
149
138
|
},
|
|
150
139
|
children: [
|
|
151
140
|
y && /* @__PURE__ */ c(r, {
|
|
152
141
|
isCollapsed: f,
|
|
153
142
|
onToggle: y,
|
|
154
|
-
sidebarWidth:
|
|
143
|
+
sidebarWidth: E,
|
|
155
144
|
collapsedWidth: v,
|
|
156
|
-
onWidthChange: g ?
|
|
145
|
+
onWidthChange: g ? M : void 0,
|
|
157
146
|
minWidth: b,
|
|
158
147
|
maxWidth: x,
|
|
159
|
-
anchorRef:
|
|
148
|
+
anchorRef: O
|
|
160
149
|
}),
|
|
161
150
|
/* @__PURE__ */ c("div", {
|
|
162
|
-
ref:
|
|
151
|
+
ref: k,
|
|
163
152
|
className: "sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent",
|
|
164
153
|
children: /* @__PURE__ */ c(t, {
|
|
165
|
-
data:
|
|
154
|
+
data: P,
|
|
166
155
|
activeNodeId: w,
|
|
167
|
-
defaultExpandedIds:
|
|
156
|
+
defaultExpandedIds: F,
|
|
168
157
|
showSearch: !1,
|
|
169
158
|
showExpandAll: !1,
|
|
170
159
|
showIcon: !0,
|
|
@@ -176,7 +165,7 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
176
165
|
className: "sidebar-tree",
|
|
177
166
|
onNodeClick: (e) => {
|
|
178
167
|
if (e.meta?.path) {
|
|
179
|
-
T(e.id),
|
|
168
|
+
T(e.id), j({ to: e.meta.path });
|
|
180
169
|
return;
|
|
181
170
|
}
|
|
182
171
|
if (e.children && e.children.length > 0) {
|
|
@@ -190,7 +179,7 @@ var f = ({ isCollapsed: f, language: p, items: m, getMenuItems: h, onWidthChange
|
|
|
190
179
|
}
|
|
191
180
|
return null;
|
|
192
181
|
}, n = t(e.children);
|
|
193
|
-
n ? (T(n.id),
|
|
182
|
+
n ? (T(n.id), j({ to: n.meta.path })) : T(e.id);
|
|
194
183
|
} else T(e.id);
|
|
195
184
|
}
|
|
196
185
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","names":[],"sources":["../../src/layouts/Sidebar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { useNavigate, useRouterState } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { getMenuItems as defaultGetMenuItems } from '../utils/menu';\nimport { Tree, TreeNode } from '../components/Tree';\nimport { generateSidebarActiveStyles } from '../styles/themeStyles';\nimport { DesktopSidebarToggleButton } from '../components/SidebarToggleButton';\n\n// 组件属性\ntype SidebarProps = {\n isCollapsed: boolean;\n language: 'zh' | 'en';\n items?: MenuItem[];\n getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n onWidthChange?: (width: number) => void;\n initialWidth?: number;\n collapsedWidth?: number;\n /**\n * 折叠 / 展开切换回调。传入后，侧边栏会在其边缘渲染统一的悬浮 pill 控制条\n * （点击折叠、拖拽调节宽度），无需再在外层单独渲染 SidebarToggleButtons。\n */\n onToggle?: () => void;\n /** 拖拽调节宽度的最小值（px） */\n minWidth?: number;\n /** 拖拽调节宽度的最大值（px） */\n maxWidth?: number;\n};\n\nconst Sidebar: React.FC<SidebarProps> = ({\n isCollapsed,\n language,\n items: propItems,\n getMenuItems,\n onWidthChange,\n initialWidth = 280,\n collapsedWidth = 64,\n onToggle,\n minWidth = 160,\n maxWidth = 400,\n}) => {\n const [items, setItems] = useState<MenuItem[]>([]);\n const [activeNodeId, setActiveNodeId] = useState<string | number>('');\n const [isDragging, setIsDragging] = useState(false);\n const [sidebarWidth, setSidebarWidth] = useState(initialWidth); // 使用传入的初始宽度\n const sidebarRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n const routerState = useRouterState({ select: (s: { location: { pathname: string } }) => s.location });\n const navigate = useNavigate();\n\n // 当 initialWidth 改变时，更新侧边栏宽度\n useEffect(() => {\n setSidebarWidth(initialWidth);\n }, [initialWidth]);\n\n // 统一的宽度变更处理：同步内部状态并通知父组件。\n // pill 拖拽与外部同步都通过此入口，避免必须回传 initialWidth 才能生效。\n const handleInternalWidthChange = (width: number) => {\n setSidebarWidth(width);\n onWidthChange?.(width);\n };\n\n // 当语言改变或传入items prop时，更新菜单项\n useEffect(() => {\n if (propItems !== undefined) {\n setItems(propItems);\n } else if (getMenuItems) {\n setItems(getMenuItems(language));\n } else {\n setItems(defaultGetMenuItems(language));\n }\n }, [language, propItems, getMenuItems]);\n\n // 活跃节点变化时，自动滚动到可见区域（菜单过长时保证当前页可见）。\n // 延迟 350ms：Tree 展开动画（max-height 0.3s）期间布局仍在变化，立即\n // scrollIntoView 会计算到动画中途的位置而滚动不到位。\n useEffect(() => {\n if (!activeNodeId) return;\n const t = setTimeout(() => {\n scrollRef.current\n ?.querySelector('.tree-node-content-active')\n ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, 350);\n return () => clearTimeout(t);\n }, [activeNodeId]);\n\n // 兜底：确保鼠标悬停在菜单任意位置都能滚轮滚动。\n // 部分浏览器/嵌套滚动场景下原生滚轮可能不作用于该容器，这里用非被动\n // 监听手动滚动；成功滚动后 preventDefault，避免浏览器默认行为造成双重滚动。\n useEffect(() => {\n const el = scrollRef.current;\n if (!el) return;\n const onWheel = (e: WheelEvent) => {\n if (el.scrollHeight <= el.clientHeight) return;\n const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY; // 行模式 → 像素\n if (dy === 0) return;\n const before = el.scrollTop;\n el.scrollTop = before + dy;\n if (el.scrollTop !== before) e.preventDefault();\n };\n el.addEventListener('wheel', onWheel, { passive: false });\n return () => el.removeEventListener('wheel', onWheel);\n }, []);\n\n // 将 MenuItem 转换为 TreeNode\n const convertToTreeNodes = (menuItems: MenuItem[], isTopLevel: boolean = true): TreeNode[] => {\n return menuItems.map(item => ({\n id: item.id,\n label: item.label,\n icon: item.icon || (!isTopLevel ? (\n <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n ) : undefined),\n children: item.children ? convertToTreeNodes(item.children, false) : undefined,\n meta: {\n path: item.path,\n },\n }));\n };\n\n // 转换后的树形数据\n const treeData = useMemo(() => convertToTreeNodes(items, true), [items]);\n\n // 获取默认展开的节点ID（默认全部展开）\n const defaultExpandedIds = useMemo(() => {\n if (items.length === 0) return [];\n\n // 收集所有有子节点的项的ID，使其默认全展开\n const collectAllExpandableIds = (menuItems: MenuItem[]): string[] => {\n let result: string[] = [];\n for (const item of menuItems) {\n if (item.children?.length) {\n result.push(item.id);\n result = [...result, ...collectAllExpandableIds(item.children)];\n }\n }\n return result;\n };\n\n return collectAllExpandableIds(items);\n }, [items]);\n\n // 更新活跃节点ID\n useEffect(() => {\n const currentPath = routerState.pathname;\n const findNodeByPath = (menuItems: MenuItem[]): string | null => {\n for (const item of menuItems) {\n if (item.path === currentPath) {\n return item.id;\n }\n if (item.children) {\n const found = findNodeByPath(item.children);\n if (found) return found;\n }\n }\n return null;\n };\n\n const nodeId = findNodeByPath(items);\n if (nodeId) {\n setActiveNodeId(nodeId);\n }\n }, [items, routerState.pathname]);\n\n // 处理拖动调整宽度\n useEffect(() => {\n const handleMouseUp = () => {\n setIsDragging(false);\n document.body.style.userSelect = '';\n document.body.style.cursor = '';\n };\n\n const handleMouseMove = (e: MouseEvent) => {\n if (isDragging && sidebarRef.current) {\n // 宽度 = 指针位置 - 侧边栏左边缘（适配侧边栏内嵌于页面中的情况）。\n const sidebarLeft = sidebarRef.current.getBoundingClientRect().left;\n const newWidth = e.clientX - sidebarLeft;\n const clampedWidth = Math.max(160, Math.min(newWidth, 400));\n setSidebarWidth(clampedWidth);\n if (onWidthChange) {\n onWidthChange(clampedWidth);\n }\n }\n };\n\n document.addEventListener('mouseup', handleMouseUp);\n document.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n document.removeEventListener('mouseup', handleMouseUp);\n document.removeEventListener('mousemove', handleMouseMove);\n };\n }, [isDragging, onWidthChange, sidebarRef]);\n\n // 处理节点点击\n const handleNodeClick = (node: TreeNode) => {\n // 如果节点有路径，直接导航\n if (node.meta?.path) {\n setActiveNodeId(node.id);\n navigate({ to: node.meta.path });\n return;\n }\n\n // 如果没有路径但有子节点，寻找第一个有路径的后代节点\n if (node.children && node.children.length > 0) {\n const findFirstPath = (nodes: TreeNode[]): TreeNode | null => {\n for (const n of nodes) {\n if (n.meta?.path) return n;\n if (n.children && n.children.length > 0) {\n const found = findFirstPath(n.children);\n if (found) return found;\n }\n }\n return null;\n };\n\n const firstNodeWithPath = findFirstPath(node.children);\n if (firstNodeWithPath) {\n setActiveNodeId(firstNodeWithPath.id);\n navigate({ to: firstNodeWithPath.meta!.path });\n } else {\n // 全都没有路径则激活当前节点\n setActiveNodeId(node.id);\n }\n } else {\n setActiveNodeId(node.id);\n }\n };\n\n if (isCollapsed) {\n return (\n <div\n ref={sidebarRef}\n className=\"blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative\"\n style={{ width: `${collapsedWidth}px` }}\n >\n {onToggle && (\n <DesktopSidebarToggleButton\n isCollapsed={isCollapsed}\n onToggle={onToggle}\n sidebarWidth={sidebarWidth}\n collapsedWidth={collapsedWidth}\n onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n minWidth={minWidth}\n maxWidth={maxWidth}\n anchorRef={sidebarRef}\n />\n )}\n <ul className=\"flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden\">\n {items.map(item => (\n <li key={item.id}>\n {item.path ? (\n <button\n onClick={() => navigate({ to: item.path! })}\n aria-label={item.label}\n className=\"flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full\"\n style={{\n WebkitTapHighlightColor: 'transparent',\n height: `${Math.min(collapsedWidth - 16, 40)}px`,\n width: `${Math.min(collapsedWidth - 16, 40)}px`,\n margin: '0 auto'\n }}\n >\n {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n </button>\n ) : (\n <div\n className=\"flex justify-center items-center\"\n style={{\n WebkitTapHighlightColor: 'transparent',\n height: `${Math.min(collapsedWidth - 16, 40)}px`,\n width: `${Math.min(collapsedWidth - 16, 40)}px`,\n margin: '0 auto'\n }}\n >\n {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n </div>\n )}\n </li>\n ))}\n </ul>\n </div>\n );\n }\n\n return (\n <div\n ref={sidebarRef}\n className=\"blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative\"\n style={{ width: `${sidebarWidth}px`, maxWidth: '400px', minWidth: '160px' }}\n >\n {onToggle && (\n <DesktopSidebarToggleButton\n isCollapsed={isCollapsed}\n onToggle={onToggle}\n sidebarWidth={sidebarWidth}\n collapsedWidth={collapsedWidth}\n onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n minWidth={minWidth}\n maxWidth={maxWidth}\n anchorRef={sidebarRef}\n />\n )}\n <div ref={scrollRef} className=\"sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent\">\n <Tree\n data={treeData}\n activeNodeId={activeNodeId}\n defaultExpandedIds={defaultExpandedIds}\n showSearch={false}\n showExpandAll={false}\n showIcon={true}\n showCount={false}\n showLine={true}\n indent={1}\n togglePosition=\"right\"\n maxHeight=\"100%\"\n className=\"sidebar-tree\"\n onNodeClick={handleNodeClick}\n />\n </div>\n\n <style>{`\n /* Sidebar Tree 自定义样式 */\n .sidebar-tree {\n background: transparent;\n border: none;\n padding: 0.5rem;\n }\n \n .sidebar-tree .tree-node-content {\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* 活跃状态 - 为每个主题设置匹配的配色 */\n .sidebar-tree .tree-node-content-active {\n font-weight: 600 !important;\n padding-left: calc(1rem - 4px) !important;\n }\n \n /* 主题活跃状态样式 - 从共用配置生成 */\n ${generateSidebarActiveStyles()}\n \n /* 悬停状态 */\n .sidebar-tree .tree-node-content:hover:not(.tree-node-active .tree-node-content):not(.tree-node-content-active) {\n background-color: var(--color-base-200);\n }\n \n /* 右侧展开按钮样式 */\n .sidebar-tree .tree-node-toggle-right {\n width: auto;\n height: auto;\n min-width: auto;\n min-height: auto;\n padding: 0.25rem;\n opacity: 0.6;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 0.25rem;\n }\n \n .sidebar-tree .tree-node-toggle-right:hover {\n opacity: 1;\n background-color: var(--color-base-300);\n }\n \n /* 右侧按钮图标旋转 */\n .sidebar-tree .tree-node-toggle-right svg {\n width: 1rem;\n height: 1rem;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .sidebar-tree .tree-node-toggle-right.tree-node-toggle-expanded svg {\n transform: rotate(90deg);\n }\n \n /* 图标样式 */\n .sidebar-tree .tree-node-icon {\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.2s ease;\n }\n \n .sidebar-tree .tree-node-icon svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n \n /* 子节点图标稍小 */\n .sidebar-tree .tree-node-children .tree-node-icon svg {\n width: 1rem;\n height: 1rem;\n opacity: 0.8;\n }\n \n /* 标签样式 - 增大字体和行高 */\n .sidebar-tree .tree-node-label {\n font-size: 0.9375rem;\n line-height: 1.4rem;\n font-weight: 450;\n }\n \n /* 一级菜单标签更大 */\n .sidebar-tree > div > .tree-nodes > .tree-node .tree-node-label {\n font-size: 1rem;\n font-weight: 500;\n }\n \n /* 连接线样式 - 强制显示！向右移动并加粗，增加整体左边距 */\n /* 使用双重选择器增加优先级，避免被其他 Tree 组件样式覆盖 */\n .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded,\n .sidebar-tree.sidebar-tree .tree-node-children.tree-node-children-expanded,\n div.sidebar-tree .tree-show-line .tree-node-children-expanded,\n div.sidebar-tree .tree-node-children.tree-node-children-expanded {\n border-left: 3px solid rgba(128, 128, 128, 0.35) !important;\n margin-left: 24px !important;\n padding-left: 8px !important;\n box-sizing: border-box !important;\n }\n \n /* 隐藏 Tree 组件的圆点装饰 - 避免与 Sidebar 样式冲突 */\n .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded::before,\n div.sidebar-tree .tree-show-line .tree-node-children-expanded::before {\n display: none !important;\n }\n \n /* 隐藏 Tree 组件的标题和操作按钮 */\n .sidebar-tree .tree-header,\n .sidebar-tree .tree-search,\n .sidebar-tree .tree-actions {\n display: none;\n }\n \n /* 移除内边距 */\n .sidebar-tree > div:first-child {\n padding: 0;\n }\n \n /* 子节点动画优化 - 减小间距 */\n .sidebar-tree .tree-node-children {\n margin-top: 0.125rem !important;\n }\n \n /* 一级菜单项间距 */\n .sidebar-tree > div > .tree-nodes > .tree-node {\n margin-bottom: 0.375rem;\n }\n \n /* 二级菜单项间距 */\n .sidebar-tree .tree-node-children > .tree-node {\n margin-bottom: 0.125rem;\n }\n `}</style>\n </div>\n );\n};\n\nexport default Sidebar; "],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","names":[],"sources":["../../src/layouts/Sidebar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport { useNavigate, useRouterState } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { getMenuItems as defaultGetMenuItems } from '../utils/menu';\nimport { Tree, TreeNode } from '../components/Tree';\nimport { generateSidebarActiveStyles } from '../styles/themeStyles';\nimport { DesktopSidebarToggleButton } from '../components/SidebarToggleButton';\n\n// 组件属性\ntype SidebarProps = {\n isCollapsed: boolean;\n language: 'zh' | 'en';\n items?: MenuItem[];\n getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n onWidthChange?: (width: number) => void;\n initialWidth?: number;\n collapsedWidth?: number;\n /**\n * 折叠 / 展开切换回调。传入后，侧边栏会在其边缘渲染统一的悬浮 pill 控制条\n * （点击折叠、拖拽调节宽度），无需再在外层单独渲染 SidebarToggleButtons。\n */\n onToggle?: () => void;\n /** 拖拽调节宽度的最小值（px） */\n minWidth?: number;\n /** 拖拽调节宽度的最大值（px） */\n maxWidth?: number;\n};\n\nconst Sidebar: React.FC<SidebarProps> = ({\n isCollapsed,\n language,\n items: propItems,\n getMenuItems,\n onWidthChange,\n initialWidth = 280,\n collapsedWidth = 64,\n onToggle,\n minWidth = 160,\n maxWidth = 400,\n}) => {\n const [items, setItems] = useState<MenuItem[]>([]);\n const [activeNodeId, setActiveNodeId] = useState<string | number>('');\n const [sidebarWidth, setSidebarWidth] = useState(() => Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n const sidebarRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n const routerState = useRouterState({ select: (s: { location: { pathname: string } }) => s.location });\n const navigate = useNavigate();\n\n // 当 initialWidth 改变时，更新侧边栏宽度\n useEffect(() => {\n setSidebarWidth(Math.max(minWidth, Math.min(initialWidth, maxWidth)));\n }, [initialWidth, minWidth, maxWidth]);\n\n // 统一的宽度变更处理：同步内部状态并通知父组件。\n // pill 拖拽与外部同步都通过此入口，避免必须回传 initialWidth 才能生效。\n const handleInternalWidthChange = (width: number) => {\n const next = Math.max(minWidth, Math.min(width, maxWidth));\n setSidebarWidth(next);\n onWidthChange?.(next);\n };\n\n // 当语言改变或传入items prop时，更新菜单项\n useEffect(() => {\n if (propItems !== undefined) {\n setItems(propItems);\n } else if (getMenuItems) {\n setItems(getMenuItems(language));\n } else {\n setItems(defaultGetMenuItems(language));\n }\n }, [language, propItems, getMenuItems]);\n\n // 活跃节点变化时，自动滚动到可见区域（菜单过长时保证当前页可见）。\n // 延迟 350ms：Tree 展开动画（max-height 0.3s）期间布局仍在变化，立即\n // scrollIntoView 会计算到动画中途的位置而滚动不到位。\n useEffect(() => {\n if (!activeNodeId) return;\n const t = setTimeout(() => {\n scrollRef.current\n ?.querySelector('.tree-node-content-active')\n ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, 350);\n return () => clearTimeout(t);\n }, [activeNodeId]);\n\n // 兜底：确保鼠标悬停在菜单任意位置都能滚轮滚动。\n // 部分浏览器/嵌套滚动场景下原生滚轮可能不作用于该容器，这里用非被动\n // 监听手动滚动；成功滚动后 preventDefault，避免浏览器默认行为造成双重滚动。\n useEffect(() => {\n const el = scrollRef.current;\n if (!el) return;\n const onWheel = (e: WheelEvent) => {\n if (el.scrollHeight <= el.clientHeight) return;\n const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY; // 行模式 → 像素\n if (dy === 0) return;\n const before = el.scrollTop;\n el.scrollTop = before + dy;\n if (el.scrollTop !== before) e.preventDefault();\n };\n el.addEventListener('wheel', onWheel, { passive: false });\n return () => el.removeEventListener('wheel', onWheel);\n }, []);\n\n // 将 MenuItem 转换为 TreeNode\n const convertToTreeNodes = (menuItems: MenuItem[], isTopLevel: boolean = true): TreeNode[] => {\n return menuItems.map(item => ({\n id: item.id,\n label: item.label,\n icon: item.icon || (!isTopLevel ? (\n <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n ) : undefined),\n children: item.children ? convertToTreeNodes(item.children, false) : undefined,\n meta: {\n path: item.path,\n },\n }));\n };\n\n // 转换后的树形数据\n const treeData = useMemo(() => convertToTreeNodes(items, true), [items]);\n\n // 获取默认展开的节点ID（默认全部展开）\n const defaultExpandedIds = useMemo(() => {\n if (items.length === 0) return [];\n\n // 收集所有有子节点的项的ID，使其默认全展开\n const collectAllExpandableIds = (menuItems: MenuItem[]): string[] => {\n let result: string[] = [];\n for (const item of menuItems) {\n if (item.children?.length) {\n result.push(item.id);\n result = [...result, ...collectAllExpandableIds(item.children)];\n }\n }\n return result;\n };\n\n return collectAllExpandableIds(items);\n }, [items]);\n\n // 更新活跃节点ID\n useEffect(() => {\n const currentPath = routerState.pathname;\n const findNodeByPath = (menuItems: MenuItem[]): string | null => {\n for (const item of menuItems) {\n if (item.path === currentPath) {\n return item.id;\n }\n if (item.children) {\n const found = findNodeByPath(item.children);\n if (found) return found;\n }\n }\n return null;\n };\n\n const nodeId = findNodeByPath(items);\n if (nodeId) {\n setActiveNodeId(nodeId);\n }\n }, [items, routerState.pathname]);\n\n\n\n // 处理节点点击\n const handleNodeClick = (node: TreeNode) => {\n // 如果节点有路径，直接导航\n if (node.meta?.path) {\n setActiveNodeId(node.id);\n navigate({ to: node.meta.path });\n return;\n }\n\n // 如果没有路径但有子节点，寻找第一个有路径的后代节点\n if (node.children && node.children.length > 0) {\n const findFirstPath = (nodes: TreeNode[]): TreeNode | null => {\n for (const n of nodes) {\n if (n.meta?.path) return n;\n if (n.children && n.children.length > 0) {\n const found = findFirstPath(n.children);\n if (found) return found;\n }\n }\n return null;\n };\n\n const firstNodeWithPath = findFirstPath(node.children);\n if (firstNodeWithPath) {\n setActiveNodeId(firstNodeWithPath.id);\n navigate({ to: firstNodeWithPath.meta!.path });\n } else {\n // 全都没有路径则激活当前节点\n setActiveNodeId(node.id);\n }\n } else {\n setActiveNodeId(node.id);\n }\n };\n\n if (isCollapsed) {\n return (\n <div\n ref={sidebarRef}\n className=\"blade-sidebar h-full bg-base-200 overflow-visible transition-all duration-200 ease-in-out relative\"\n style={{ width: `${collapsedWidth}px` }}\n >\n {onToggle && (\n <DesktopSidebarToggleButton\n isCollapsed={isCollapsed}\n onToggle={onToggle}\n sidebarWidth={sidebarWidth}\n collapsedWidth={collapsedWidth}\n onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n minWidth={minWidth}\n maxWidth={maxWidth}\n anchorRef={sidebarRef}\n />\n )}\n <ul className=\"flex flex-col p-2 gap-1 h-full overflow-y-auto overflow-x-hidden\">\n {items.map(item => (\n <li key={item.id}>\n {item.path ? (\n <button\n onClick={() => navigate({ to: item.path! })}\n aria-label={item.label}\n className=\"flex justify-center items-center rounded-lg hover:bg-base-300 transition-colors w-full\"\n style={{\n WebkitTapHighlightColor: 'transparent',\n height: `${Math.min(collapsedWidth - 16, 40)}px`,\n width: `${Math.min(collapsedWidth - 16, 40)}px`,\n margin: '0 auto'\n }}\n >\n {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n </button>\n ) : (\n <div\n className=\"flex justify-center items-center\"\n style={{\n WebkitTapHighlightColor: 'transparent',\n height: `${Math.min(collapsedWidth - 16, 40)}px`,\n width: `${Math.min(collapsedWidth - 16, 40)}px`,\n margin: '0 auto'\n }}\n >\n {item.icon || <span className=\"text-sm\">{item.label.charAt(0)}</span>}\n </div>\n )}\n </li>\n ))}\n </ul>\n </div>\n );\n }\n\n return (\n <div\n ref={sidebarRef}\n className=\"blade-sidebar h-full bg-base-200 overflow-visible flex flex-col transition-colors duration-200 ease-in-out relative\"\n style={{ width: `${sidebarWidth}px`, maxWidth, minWidth }}\n >\n {onToggle && (\n <DesktopSidebarToggleButton\n isCollapsed={isCollapsed}\n onToggle={onToggle}\n sidebarWidth={sidebarWidth}\n collapsedWidth={collapsedWidth}\n onWidthChange={onWidthChange ? handleInternalWidthChange : undefined}\n minWidth={minWidth}\n maxWidth={maxWidth}\n anchorRef={sidebarRef}\n />\n )}\n <div ref={scrollRef} className=\"sidebar-scroll min-h-0 flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent\">\n <Tree\n data={treeData}\n activeNodeId={activeNodeId}\n defaultExpandedIds={defaultExpandedIds}\n showSearch={false}\n showExpandAll={false}\n showIcon={true}\n showCount={false}\n showLine={true}\n indent={1}\n togglePosition=\"right\"\n maxHeight=\"100%\"\n className=\"sidebar-tree\"\n onNodeClick={handleNodeClick}\n />\n </div>\n\n <style>{`\n /* Sidebar Tree 自定义样式 */\n .sidebar-tree {\n background: transparent;\n border: none;\n padding: 0.5rem;\n }\n \n .sidebar-tree .tree-node-content {\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n /* 活跃状态 - 为每个主题设置匹配的配色 */\n .sidebar-tree .tree-node-content-active {\n font-weight: 600 !important;\n padding-left: calc(1rem - 4px) !important;\n }\n \n /* 主题活跃状态样式 - 从共用配置生成 */\n ${generateSidebarActiveStyles()}\n \n /* 悬停状态 */\n .sidebar-tree .tree-node-content:hover:not(.tree-node-active .tree-node-content):not(.tree-node-content-active) {\n background-color: var(--color-base-200);\n }\n \n /* 右侧展开按钮样式 */\n .sidebar-tree .tree-node-toggle-right {\n width: auto;\n height: auto;\n min-width: auto;\n min-height: auto;\n padding: 0.25rem;\n opacity: 0.6;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 0.25rem;\n }\n \n .sidebar-tree .tree-node-toggle-right:hover {\n opacity: 1;\n background-color: var(--color-base-300);\n }\n \n /* 右侧按钮图标旋转 */\n .sidebar-tree .tree-node-toggle-right svg {\n width: 1rem;\n height: 1rem;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .sidebar-tree .tree-node-toggle-right.tree-node-toggle-expanded svg {\n transform: rotate(90deg);\n }\n \n /* 图标样式 */\n .sidebar-tree .tree-node-icon {\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.2s ease;\n }\n \n .sidebar-tree .tree-node-icon svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n \n /* 子节点图标稍小 */\n .sidebar-tree .tree-node-children .tree-node-icon svg {\n width: 1rem;\n height: 1rem;\n opacity: 0.8;\n }\n \n /* 标签样式 - 增大字体和行高 */\n .sidebar-tree .tree-node-label {\n font-size: 0.9375rem;\n line-height: 1.4rem;\n font-weight: 450;\n }\n \n /* 一级菜单标签更大 */\n .sidebar-tree > div > .tree-nodes > .tree-node .tree-node-label {\n font-size: 1rem;\n font-weight: 500;\n }\n \n /* 连接线样式 - 强制显示！向右移动并加粗，增加整体左边距 */\n /* 使用双重选择器增加优先级，避免被其他 Tree 组件样式覆盖 */\n .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded,\n .sidebar-tree.sidebar-tree .tree-node-children.tree-node-children-expanded,\n div.sidebar-tree .tree-show-line .tree-node-children-expanded,\n div.sidebar-tree .tree-node-children.tree-node-children-expanded {\n border-left: 3px solid rgba(128, 128, 128, 0.35) !important;\n margin-left: 24px !important;\n padding-left: 8px !important;\n box-sizing: border-box !important;\n }\n \n /* 隐藏 Tree 组件的圆点装饰 - 避免与 Sidebar 样式冲突 */\n .sidebar-tree.sidebar-tree .tree-show-line .tree-node-children-expanded::before,\n div.sidebar-tree .tree-show-line .tree-node-children-expanded::before {\n display: none !important;\n }\n \n /* 隐藏 Tree 组件的标题和操作按钮 */\n .sidebar-tree .tree-header,\n .sidebar-tree .tree-search,\n .sidebar-tree .tree-actions {\n display: none;\n }\n \n /* 移除内边距 */\n .sidebar-tree > div:first-child {\n padding: 0;\n }\n \n /* 子节点动画优化 - 减小间距 */\n .sidebar-tree .tree-node-children {\n margin-top: 0.125rem !important;\n }\n \n /* 一级菜单项间距 */\n .sidebar-tree > div > .tree-nodes > .tree-node {\n margin-bottom: 0.375rem;\n }\n \n /* 二级菜单项间距 */\n .sidebar-tree .tree-node-children > .tree-node {\n margin-bottom: 0.125rem;\n }\n `}</style>\n </div>\n );\n};\n\nexport default Sidebar; "],"mappings":"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"}
|
package/dist/lite.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { Resizable, ResizablePanel, ResizableHandle, useResize } from './components/Resizable';
|
|
2
|
+
export type { ResizableProps, ResizablePanelProps, ResizableHandleProps, UseResizeOptions } from './components/Resizable';
|
|
1
3
|
export { default as Button } from './components/Button';
|
|
2
4
|
export type { ButtonProps } from './components/Button';
|
|
3
5
|
export { default as Badge } from './components/Badge';
|