@robot-admin/layout 0.1.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.
Files changed (9) hide show
  1. package/README.md +635 -0
  2. package/dist/index.cjs +39 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.css +1 -0
  5. package/dist/index.d.ts +427 -0
  6. package/dist/index.js +888 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +67 -0
  9. package/src/styles/settings.scss +380 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,427 @@
1
+ import { App } from 'vue';
2
+ import { ComponentOptionsMixin } from 'vue';
3
+ import { ComponentProvideOptions } from 'vue';
4
+ import { ComputedRef } from 'vue';
5
+ import { DefineComponent } from 'vue';
6
+ import { PublicProps } from 'vue';
7
+ import { Ref } from 'vue';
8
+ import { StoreDefinition } from 'pinia';
9
+ import { ThemeMode } from '@robot-admin/theme';
10
+
11
+ declare type __VLS_Props = {
12
+ storageKey?: string;
13
+ };
14
+
15
+ declare type __VLS_PublicProps = {
16
+ "show"?: boolean;
17
+ } & __VLS_Props;
18
+
19
+ export declare const BORDER_RADIUS_MAP: {
20
+ readonly small: "4px";
21
+ readonly medium: "6px";
22
+ readonly large: "8px";
23
+ };
24
+
25
+ /**
26
+ * 圆角大小
27
+ */
28
+ export declare type BorderRadiusSize = "small" | "medium" | "large";
29
+
30
+ /** Color swatches for color picker */
31
+ export declare const COLOR_SWATCHES: string[];
32
+
33
+ /**
34
+ * 创建设置管理 Store
35
+ * @param options - 配置选项
36
+ */
37
+ export declare function createSettingsStore(options?: SettingsStoreOptions): StoreDefinition<"settings", Pick<{
38
+ themeMode: Ref<ThemeMode, ThemeMode>;
39
+ primaryColor: Ref<string, string>;
40
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
41
+ transitionType: Ref<TransitionType, TransitionType>;
42
+ enableTransition: Ref<boolean, boolean>;
43
+ layoutMode: Ref<LayoutMode, LayoutMode>;
44
+ fixedHeader: Ref<boolean, boolean>;
45
+ showBreadcrumb: Ref<boolean, boolean>;
46
+ showBreadcrumbIcon: Ref<boolean, boolean>;
47
+ showTagsView: Ref<boolean, boolean>;
48
+ tagsViewHeight: Ref<number, number>;
49
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
50
+ showFooter: Ref<boolean, boolean>;
51
+ sidebarWidth: Ref<number, number>;
52
+ sidebarCollapsedWidth: Ref<number, number>;
53
+ headerHeight: Ref<number, number>;
54
+ enableHotkeys: Ref<boolean, boolean>;
55
+ version: Ref<string, string>;
56
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
57
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
58
+ shouldEnableTransition: ComputedRef<boolean>;
59
+ settingsState: ComputedRef<SettingsState>;
60
+ syncCSSVariables: () => void;
61
+ applyPreset: (preset: ThemePreset) => Promise<void>;
62
+ resetSettings: () => void;
63
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
64
+ }, "themeMode" | "layoutMode" | "primaryColor" | "borderRadius" | "transitionType" | "enableTransition" | "fixedHeader" | "showBreadcrumb" | "showBreadcrumbIcon" | "showTagsView" | "tagsViewHeight" | "tagsViewStyle" | "showFooter" | "sidebarWidth" | "sidebarCollapsedWidth" | "headerHeight" | "enableHotkeys" | "version">, Pick<{
65
+ themeMode: Ref<ThemeMode, ThemeMode>;
66
+ primaryColor: Ref<string, string>;
67
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
68
+ transitionType: Ref<TransitionType, TransitionType>;
69
+ enableTransition: Ref<boolean, boolean>;
70
+ layoutMode: Ref<LayoutMode, LayoutMode>;
71
+ fixedHeader: Ref<boolean, boolean>;
72
+ showBreadcrumb: Ref<boolean, boolean>;
73
+ showBreadcrumbIcon: Ref<boolean, boolean>;
74
+ showTagsView: Ref<boolean, boolean>;
75
+ tagsViewHeight: Ref<number, number>;
76
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
77
+ showFooter: Ref<boolean, boolean>;
78
+ sidebarWidth: Ref<number, number>;
79
+ sidebarCollapsedWidth: Ref<number, number>;
80
+ headerHeight: Ref<number, number>;
81
+ enableHotkeys: Ref<boolean, boolean>;
82
+ version: Ref<string, string>;
83
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
84
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
85
+ shouldEnableTransition: ComputedRef<boolean>;
86
+ settingsState: ComputedRef<SettingsState>;
87
+ syncCSSVariables: () => void;
88
+ applyPreset: (preset: ThemePreset) => Promise<void>;
89
+ resetSettings: () => void;
90
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
91
+ }, "borderRadiusValue" | "transitionName" | "shouldEnableTransition" | "settingsState">, Pick<{
92
+ themeMode: Ref<ThemeMode, ThemeMode>;
93
+ primaryColor: Ref<string, string>;
94
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
95
+ transitionType: Ref<TransitionType, TransitionType>;
96
+ enableTransition: Ref<boolean, boolean>;
97
+ layoutMode: Ref<LayoutMode, LayoutMode>;
98
+ fixedHeader: Ref<boolean, boolean>;
99
+ showBreadcrumb: Ref<boolean, boolean>;
100
+ showBreadcrumbIcon: Ref<boolean, boolean>;
101
+ showTagsView: Ref<boolean, boolean>;
102
+ tagsViewHeight: Ref<number, number>;
103
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
104
+ showFooter: Ref<boolean, boolean>;
105
+ sidebarWidth: Ref<number, number>;
106
+ sidebarCollapsedWidth: Ref<number, number>;
107
+ headerHeight: Ref<number, number>;
108
+ enableHotkeys: Ref<boolean, boolean>;
109
+ version: Ref<string, string>;
110
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
111
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
112
+ shouldEnableTransition: ComputedRef<boolean>;
113
+ settingsState: ComputedRef<SettingsState>;
114
+ syncCSSVariables: () => void;
115
+ applyPreset: (preset: ThemePreset) => Promise<void>;
116
+ resetSettings: () => void;
117
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
118
+ }, "syncCSSVariables" | "applyPreset" | "resetSettings" | "updateThemeMode">>;
119
+
120
+ export declare const DEFAULT_SETTINGS: SettingsState;
121
+
122
+ export declare const LAYOUT_MODES: LayoutInfo[];
123
+
124
+ /**
125
+ * 布局模式信息
126
+ */
127
+ export declare interface LayoutInfo {
128
+ mode: LayoutMode;
129
+ label: string;
130
+ description: string;
131
+ icon: string;
132
+ }
133
+
134
+ /**
135
+ * 布局模式
136
+ */
137
+ export declare type LayoutMode = "side" | "top" | "mix" | "mix-top" | "reverse-horizontal-mix" | "card-layout";
138
+
139
+ export declare const PRESET_COLORS: PresetColor[];
140
+
141
+ /**
142
+ * 预设颜色
143
+ */
144
+ export declare interface PresetColor {
145
+ name: string;
146
+ value: string;
147
+ }
148
+
149
+ export declare const SettingsDrawer: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
150
+ "update:show": (value: boolean) => any;
151
+ }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
152
+ "onUpdate:show"?: ((value: boolean) => any) | undefined;
153
+ }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
154
+
155
+ /**
156
+ * 设置状态接口
157
+ */
158
+ export declare interface SettingsState {
159
+ /** 主题模式：浅色/深色/自动 */
160
+ themeMode: ThemeMode;
161
+ /** 主题色 */
162
+ primaryColor: string;
163
+ /** 圆角大小 */
164
+ borderRadius: BorderRadiusSize;
165
+ /** 页面动画 */
166
+ transitionType: TransitionType;
167
+ /** 启用页面动画 */
168
+ enableTransition: boolean;
169
+ /** 布局模式：左侧/顶部/混合 */
170
+ layoutMode: LayoutMode;
171
+ /** 固定头部 */
172
+ fixedHeader: boolean;
173
+ /** 显示面包屑 */
174
+ showBreadcrumb: boolean;
175
+ /** 显示面包屑图标 */
176
+ showBreadcrumbIcon: boolean;
177
+ /** 显示标签页 */
178
+ showTagsView: boolean;
179
+ /** 标签页高度 */
180
+ tagsViewHeight: number;
181
+ /** 标签页风格 */
182
+ tagsViewStyle: TagsViewStyle;
183
+ /** 显示页脚 */
184
+ showFooter: boolean;
185
+ /** 侧边栏宽度 */
186
+ sidebarWidth: number;
187
+ /** 侧边栏折叠宽度 */
188
+ sidebarCollapsedWidth: number;
189
+ /** 头部高度 */
190
+ headerHeight: number;
191
+ /** 启用快捷键 */
192
+ enableHotkeys: boolean;
193
+ /** 配置版本（用于迁移） */
194
+ version: string;
195
+ }
196
+
197
+ /**
198
+ * Settings Store 选项
199
+ */
200
+ export declare interface SettingsStoreOptions {
201
+ /** 默认配置 */
202
+ defaults?: Partial<SettingsState>;
203
+ /** localStorage 键名 */
204
+ storageKey?: string;
205
+ /** 主题模式变化回调（用于同步到 theme store） */
206
+ onThemeModeChange?: (mode: ThemeMode) => void | Promise<void>;
207
+ }
208
+
209
+ /**
210
+ * 初始化布局系统
211
+ *
212
+ * @example
213
+ * ```ts
214
+ * import { setupLayout } from '@robot-admin/layout'
215
+ * setupLayout(app, {
216
+ * onThemeModeChange: async (mode) => {
217
+ * const themeStore = useThemeStore()
218
+ * await themeStore.setMode(mode)
219
+ * }
220
+ * })
221
+ * ```
222
+ */
223
+ export declare function setupLayout(_app: App, options?: SettingsStoreOptions): StoreDefinition<"settings", Pick<{
224
+ themeMode: Ref<ThemeMode, ThemeMode>;
225
+ primaryColor: Ref<string, string>;
226
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
227
+ transitionType: Ref<TransitionType, TransitionType>;
228
+ enableTransition: Ref<boolean, boolean>;
229
+ layoutMode: Ref<LayoutMode, LayoutMode>;
230
+ fixedHeader: Ref<boolean, boolean>;
231
+ showBreadcrumb: Ref<boolean, boolean>;
232
+ showBreadcrumbIcon: Ref<boolean, boolean>;
233
+ showTagsView: Ref<boolean, boolean>;
234
+ tagsViewHeight: Ref<number, number>;
235
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
236
+ showFooter: Ref<boolean, boolean>;
237
+ sidebarWidth: Ref<number, number>;
238
+ sidebarCollapsedWidth: Ref<number, number>;
239
+ headerHeight: Ref<number, number>;
240
+ enableHotkeys: Ref<boolean, boolean>;
241
+ version: Ref<string, string>;
242
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
243
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
244
+ shouldEnableTransition: ComputedRef<boolean>;
245
+ settingsState: ComputedRef<SettingsState>;
246
+ syncCSSVariables: () => void;
247
+ applyPreset: (preset: ThemePreset) => Promise<void>;
248
+ resetSettings: () => void;
249
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
250
+ }, "themeMode" | "layoutMode" | "primaryColor" | "borderRadius" | "transitionType" | "enableTransition" | "fixedHeader" | "showBreadcrumb" | "showBreadcrumbIcon" | "showTagsView" | "tagsViewHeight" | "tagsViewStyle" | "showFooter" | "sidebarWidth" | "sidebarCollapsedWidth" | "headerHeight" | "enableHotkeys" | "version">, Pick<{
251
+ themeMode: Ref<ThemeMode, ThemeMode>;
252
+ primaryColor: Ref<string, string>;
253
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
254
+ transitionType: Ref<TransitionType, TransitionType>;
255
+ enableTransition: Ref<boolean, boolean>;
256
+ layoutMode: Ref<LayoutMode, LayoutMode>;
257
+ fixedHeader: Ref<boolean, boolean>;
258
+ showBreadcrumb: Ref<boolean, boolean>;
259
+ showBreadcrumbIcon: Ref<boolean, boolean>;
260
+ showTagsView: Ref<boolean, boolean>;
261
+ tagsViewHeight: Ref<number, number>;
262
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
263
+ showFooter: Ref<boolean, boolean>;
264
+ sidebarWidth: Ref<number, number>;
265
+ sidebarCollapsedWidth: Ref<number, number>;
266
+ headerHeight: Ref<number, number>;
267
+ enableHotkeys: Ref<boolean, boolean>;
268
+ version: Ref<string, string>;
269
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
270
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
271
+ shouldEnableTransition: ComputedRef<boolean>;
272
+ settingsState: ComputedRef<SettingsState>;
273
+ syncCSSVariables: () => void;
274
+ applyPreset: (preset: ThemePreset) => Promise<void>;
275
+ resetSettings: () => void;
276
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
277
+ }, "borderRadiusValue" | "transitionName" | "shouldEnableTransition" | "settingsState">, Pick<{
278
+ themeMode: Ref<ThemeMode, ThemeMode>;
279
+ primaryColor: Ref<string, string>;
280
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
281
+ transitionType: Ref<TransitionType, TransitionType>;
282
+ enableTransition: Ref<boolean, boolean>;
283
+ layoutMode: Ref<LayoutMode, LayoutMode>;
284
+ fixedHeader: Ref<boolean, boolean>;
285
+ showBreadcrumb: Ref<boolean, boolean>;
286
+ showBreadcrumbIcon: Ref<boolean, boolean>;
287
+ showTagsView: Ref<boolean, boolean>;
288
+ tagsViewHeight: Ref<number, number>;
289
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
290
+ showFooter: Ref<boolean, boolean>;
291
+ sidebarWidth: Ref<number, number>;
292
+ sidebarCollapsedWidth: Ref<number, number>;
293
+ headerHeight: Ref<number, number>;
294
+ enableHotkeys: Ref<boolean, boolean>;
295
+ version: Ref<string, string>;
296
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
297
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
298
+ shouldEnableTransition: ComputedRef<boolean>;
299
+ settingsState: ComputedRef<SettingsState>;
300
+ syncCSSVariables: () => void;
301
+ applyPreset: (preset: ThemePreset) => Promise<void>;
302
+ resetSettings: () => void;
303
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
304
+ }, "syncCSSVariables" | "applyPreset" | "resetSettings" | "updateThemeMode">>;
305
+
306
+ /**
307
+ * 标签页风格
308
+ */
309
+ export declare type TagsViewStyle = "default" | "card" | "smart";
310
+
311
+ export declare const THEME_PRESETS: ThemePreset[];
312
+
313
+ /**
314
+ * 主题预设方案接口
315
+ */
316
+ export declare interface ThemePreset {
317
+ /** 方案名称 */
318
+ name: string;
319
+ /** 方案描述 */
320
+ description?: string;
321
+ /** 方案图标（emoji 或图标名） */
322
+ icon: string;
323
+ /** 主题色 */
324
+ primaryColor: string;
325
+ /** 其他配置（可选） */
326
+ settings?: Partial<Omit<SettingsState, "themeMode" | "layoutMode" | "primaryColor">>;
327
+ }
328
+
329
+ export declare const TRANSITION_MAP: {
330
+ readonly fade: "fade-transform";
331
+ readonly slide: "fade-slide";
332
+ readonly zoom: "fade-zoom";
333
+ readonly none: "";
334
+ };
335
+
336
+ /**
337
+ * 页面动画类型
338
+ */
339
+ export declare type TransitionType = "fade" | "slide" | "zoom" | "none";
340
+
341
+ /**
342
+ * 默认的设置 Store（使用默认配置）
343
+ */
344
+ export declare const useSettingsStore: StoreDefinition<"settings", Pick<{
345
+ themeMode: Ref<ThemeMode, ThemeMode>;
346
+ primaryColor: Ref<string, string>;
347
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
348
+ transitionType: Ref<TransitionType, TransitionType>;
349
+ enableTransition: Ref<boolean, boolean>;
350
+ layoutMode: Ref<LayoutMode, LayoutMode>;
351
+ fixedHeader: Ref<boolean, boolean>;
352
+ showBreadcrumb: Ref<boolean, boolean>;
353
+ showBreadcrumbIcon: Ref<boolean, boolean>;
354
+ showTagsView: Ref<boolean, boolean>;
355
+ tagsViewHeight: Ref<number, number>;
356
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
357
+ showFooter: Ref<boolean, boolean>;
358
+ sidebarWidth: Ref<number, number>;
359
+ sidebarCollapsedWidth: Ref<number, number>;
360
+ headerHeight: Ref<number, number>;
361
+ enableHotkeys: Ref<boolean, boolean>;
362
+ version: Ref<string, string>;
363
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
364
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
365
+ shouldEnableTransition: ComputedRef<boolean>;
366
+ settingsState: ComputedRef<SettingsState>;
367
+ syncCSSVariables: () => void;
368
+ applyPreset: (preset: ThemePreset) => Promise<void>;
369
+ resetSettings: () => void;
370
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
371
+ }, "themeMode" | "layoutMode" | "primaryColor" | "borderRadius" | "transitionType" | "enableTransition" | "fixedHeader" | "showBreadcrumb" | "showBreadcrumbIcon" | "showTagsView" | "tagsViewHeight" | "tagsViewStyle" | "showFooter" | "sidebarWidth" | "sidebarCollapsedWidth" | "headerHeight" | "enableHotkeys" | "version">, Pick<{
372
+ themeMode: Ref<ThemeMode, ThemeMode>;
373
+ primaryColor: Ref<string, string>;
374
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
375
+ transitionType: Ref<TransitionType, TransitionType>;
376
+ enableTransition: Ref<boolean, boolean>;
377
+ layoutMode: Ref<LayoutMode, LayoutMode>;
378
+ fixedHeader: Ref<boolean, boolean>;
379
+ showBreadcrumb: Ref<boolean, boolean>;
380
+ showBreadcrumbIcon: Ref<boolean, boolean>;
381
+ showTagsView: Ref<boolean, boolean>;
382
+ tagsViewHeight: Ref<number, number>;
383
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
384
+ showFooter: Ref<boolean, boolean>;
385
+ sidebarWidth: Ref<number, number>;
386
+ sidebarCollapsedWidth: Ref<number, number>;
387
+ headerHeight: Ref<number, number>;
388
+ enableHotkeys: Ref<boolean, boolean>;
389
+ version: Ref<string, string>;
390
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
391
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
392
+ shouldEnableTransition: ComputedRef<boolean>;
393
+ settingsState: ComputedRef<SettingsState>;
394
+ syncCSSVariables: () => void;
395
+ applyPreset: (preset: ThemePreset) => Promise<void>;
396
+ resetSettings: () => void;
397
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
398
+ }, "borderRadiusValue" | "transitionName" | "shouldEnableTransition" | "settingsState">, Pick<{
399
+ themeMode: Ref<ThemeMode, ThemeMode>;
400
+ primaryColor: Ref<string, string>;
401
+ borderRadius: Ref<BorderRadiusSize, BorderRadiusSize>;
402
+ transitionType: Ref<TransitionType, TransitionType>;
403
+ enableTransition: Ref<boolean, boolean>;
404
+ layoutMode: Ref<LayoutMode, LayoutMode>;
405
+ fixedHeader: Ref<boolean, boolean>;
406
+ showBreadcrumb: Ref<boolean, boolean>;
407
+ showBreadcrumbIcon: Ref<boolean, boolean>;
408
+ showTagsView: Ref<boolean, boolean>;
409
+ tagsViewHeight: Ref<number, number>;
410
+ tagsViewStyle: Ref<TagsViewStyle, TagsViewStyle>;
411
+ showFooter: Ref<boolean, boolean>;
412
+ sidebarWidth: Ref<number, number>;
413
+ sidebarCollapsedWidth: Ref<number, number>;
414
+ headerHeight: Ref<number, number>;
415
+ enableHotkeys: Ref<boolean, boolean>;
416
+ version: Ref<string, string>;
417
+ borderRadiusValue: ComputedRef<"4px" | "6px" | "8px">;
418
+ transitionName: ComputedRef<"" | "fade-transform" | "fade-slide" | "fade-zoom">;
419
+ shouldEnableTransition: ComputedRef<boolean>;
420
+ settingsState: ComputedRef<SettingsState>;
421
+ syncCSSVariables: () => void;
422
+ applyPreset: (preset: ThemePreset) => Promise<void>;
423
+ resetSettings: () => void;
424
+ updateThemeMode: (mode: ThemeMode) => Promise<void>;
425
+ }, "syncCSSVariables" | "applyPreset" | "resetSettings" | "updateThemeMode">>;
426
+
427
+ export { }