xto-fronted 0.4.52 → 0.4.53

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 (11) hide show
  1. package/dist/components/Layout/Header.vue.d.ts +1 -1
  2. package/dist/index-BAOHlfVd.js +142 -0
  3. package/dist/index-CBKo6Enz.js +345 -0
  4. package/dist/index-DVS-5SZn.js +475 -0
  5. package/dist/index-DbEeir7h.js +2834 -0
  6. package/dist/index-Dtw-qZ0V.js +372 -0
  7. package/dist/index.es.js +1 -1
  8. package/dist/index.umd.js +1 -1
  9. package/dist/style.css +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Layout/Header.vue +934 -982
package/src/components/Layout/Header.vue CHANGED
@@ -1,983 +1,935 @@
1
- <script setup lang="ts">
2
- import { ref, computed, onMounted, onUnmounted } from 'vue'
3
- import { useRoute, useRouter } from 'vue-router'
4
- import { useAppStore } from '@/stores/app'
5
- import { useUserStore } from '@/stores/user'
6
- import { useAuthStore } from '@/stores/auth'
7
- import { useMenuStore } from '@/stores/menu'
8
- import { Icon } from '@xto/base'
9
- import { Drawer } from '@xto/feedback'
10
-
11
- type LayoutMode = 'sidebar' | 'top' | 'mix'
12
-
13
- const route = useRoute()
14
- const router = useRouter()
15
- const appStore = useAppStore()
16
- const userStore = useUserStore()
17
- const authStore = useAuthStore()
18
- const menuStore = useMenuStore()
19
-
20
- const dropdownVisible = ref(false)
21
- const drawerVisible = ref(false)
22
- const dropdownRef = ref<HTMLElement | null>(null)
23
- const isFullscreen = ref(false)
24
- const searchVisible = ref(false)
25
- const searchKeyword = ref('')
26
- const searchRef = ref<HTMLElement | null>(null)
27
-
28
- // 灰色模式状态
29
- const greyMode = ref(false)
30
-
31
- // 布局模式选项
32
- const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
33
- { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
34
- { value: 'top', label: '顶部菜单', icon: 'menu' },
35
- { value: 'mix', label: '混合菜单', icon: 'grid' }
36
- ]
37
-
38
- // 主题色选项
39
- const colorOptions = [
40
- { value: '#409eff', label: '默认蓝' },
41
- { value: '#1890ff', label: '科技蓝' },
42
- { value: '#52c41a', label: '极光绿' },
43
- { value: '#faad14', label: '日落橙' },
44
- { value: '#f5222d', label: '薄暮红' },
45
- { value: '#722ed1', label: '酱紫' }
46
- ]
47
-
48
- // 面包屑
49
- const breadcrumbs = computed(() => {
50
- const matched = route.matched.filter(item => item.meta && item.meta.title)
51
- return matched.map(item => ({
52
- title: item.meta.title as string,
53
- path: item.path
54
- }))
55
- })
56
-
57
- // 扁平化菜单用于搜索
58
- const flattenMenus = (menus: any[], parentTitle = ''): any[] => {
59
- const result: any[] = []
60
- menus.forEach(menu => {
61
- if (menu.children && menu.children.length > 0) {
62
- result.push(...flattenMenus(menu.children, menu.title))
63
- } else {
64
- result.push({ ...menu, parentTitle })
65
- }
66
- })
67
- return result
68
- }
69
-
70
- // 搜索结果
71
- const searchResults = computed(() => {
72
- if (!searchKeyword.value.trim()) return []
73
- const flatMenus = flattenMenus(menuStore.menuList)
74
- return flatMenus.filter(menu =>
75
- menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
76
- )
77
- })
78
-
79
- // 当前布局模式
80
- const currentLayout = computed(() => appStore.layout)
81
-
82
- // 切换折叠
83
- const toggleCollapse = () => {
84
- appStore.toggleCollapse()
85
- }
86
-
87
- // 切换主题
88
- const toggleTheme = () => {
89
- appStore.toggleTheme()
90
- }
91
-
92
- // 打开设置抽屉
93
- const openSettingsDrawer = () => {
94
- drawerVisible.value = true
95
- }
96
-
97
- // 切换布局模式
98
- const handleLayoutChange = (mode: LayoutMode) => {
99
- appStore.setLayout(mode)
100
- drawerVisible.value = false
101
- }
102
-
103
- // 切换灰色模式
104
- const handleGreyModeChange = (value: boolean) => {
105
- greyMode.value = value
106
- const html = document.documentElement
107
- if (value) {
108
- html.classList.add('grey-mode')
109
- } else {
110
- html.classList.remove('grey-mode')
111
- }
112
- }
113
-
114
- // 抽屉内灰色模式开关
115
- const handleGreyModeToggle = () => {
116
- handleGreyModeChange(!greyMode.value)
117
- drawerVisible.value = false
118
- }
119
-
120
- // 抽屉内暗黑模式开关
121
- const handleDarkModeToggle = () => {
122
- appStore.toggleTheme()
123
- drawerVisible.value = false
124
- }
125
-
126
- // 切换全屏
127
- const toggleFullscreen = () => {
128
- if (!document.fullscreenElement) {
129
- document.documentElement.requestFullscreen()
130
- } else {
131
- document.exitFullscreen()
132
- }
133
- }
134
-
135
- // 监听全屏变化
136
- const handleFullscreenChange = () => {
137
- isFullscreen.value = !!document.fullscreenElement
138
- }
139
-
140
- // 切换下拉菜单
141
- const toggleDropdown = () => {
142
- dropdownVisible.value = !dropdownVisible.value
143
- }
144
-
145
- // 关闭下拉菜单
146
- const closeDropdowns = () => {
147
- dropdownVisible.value = false
148
- }
149
-
150
- // 显示搜索
151
- const showSearch = () => {
152
- searchVisible.value = true
153
- }
154
-
155
- // 隐藏搜索
156
- const hideSearch = () => {
157
- searchVisible.value = false
158
- searchKeyword.value = ''
159
- }
160
-
161
- // 搜索结果点击
162
- const handleSearchItemClick = (path: string) => {
163
- router.push(path)
164
- hideSearch()
165
- }
166
-
167
- // 设置主题色
168
- const handleColorChange = (color: string) => {
169
- appStore.setPrimaryColor(color)
170
- drawerVisible.value = false
171
- }
172
-
173
- // 个人信息
174
- const handleProfile = () => {
175
- closeDropdowns()
176
- router.push('/profile')
177
- }
178
-
179
- // 修改密码
180
- const handleChangePassword = () => {
181
- closeDropdowns()
182
- router.push('/change-password')
183
- }
184
-
185
- // 退出登录
186
- const handleLogout = () => {
187
- closeDropdowns()
188
- authStore.logout()
189
- userStore.clearUserInfo()
190
- menuStore.clearMenu()
191
- router.push('/login')
192
- }
193
-
194
- // 点击外部关闭下拉菜单
195
- const handleClickOutside = (event: MouseEvent) => {
196
- if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
197
- closeDropdowns()
198
- }
199
- if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
200
- hideSearch()
201
- }
202
- }
203
-
204
- // 键盘快捷键
205
- const handleKeydown = (event: KeyboardEvent) => {
206
- if (event.key === 'Escape') {
207
- hideSearch()
208
- closeDropdowns()
209
- }
210
- // Ctrl+K 打开搜索
211
- if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
212
- event.preventDefault()
213
- showSearch()
214
- }
215
- }
216
-
217
- onMounted(() => {
218
- document.addEventListener('click', handleClickOutside)
219
- document.addEventListener('fullscreenchange', handleFullscreenChange)
220
- document.addEventListener('keydown', handleKeydown)
221
- appStore.initTheme()
222
- // 初始化灰色模式状态
223
- greyMode.value = document.documentElement.classList.contains('grey-mode')
224
- })
225
-
226
- onUnmounted(() => {
227
- document.removeEventListener('click', handleClickOutside)
228
- document.removeEventListener('fullscreenchange', handleFullscreenChange)
229
- document.removeEventListener('keydown', handleKeydown)
230
- })
231
- </script>
232
-
233
- <template>
234
- <div class="header">
235
- <!-- 左侧 -->
236
- <div class="header__left">
237
- <!-- 折叠按钮 -->
238
- <div class="header__collapse" @click="toggleCollapse">
239
- <Icon :name="appStore.isCollapsed ? 'menu-unfold' : 'menu-fold'" :size="18" />
240
- </div>
241
-
242
- <!-- 面包屑 -->
243
- <div v-if="appStore.showBreadcrumb" class="header__breadcrumb">
244
- <span v-for="(item, index) in breadcrumbs" :key="item.path">
245
- <span v-if="index > 0" class="breadcrumb-separator">/</span>
246
- <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
247
- {{ item.title }}
248
- </span>
249
- </span>
250
- </div>
251
- </div>
252
-
253
- <!-- 右侧 -->
254
- <div class="header__right">
255
- <!-- 搜索按钮 -->
256
- <div class="header__action" @click="showSearch" title="搜索 (Ctrl+K)">
257
- <Icon name="search" :size="16" />
258
- </div>
259
-
260
- <!-- 全屏切换 -->
261
- <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
262
- <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
263
- </div>
264
-
265
- <!-- 换肤设置 -->
266
- <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
267
- <Icon name="skin" :size="16" />
268
- </div>
269
-
270
- <!-- 主题切换 -->
271
- <div class="header__action" @click="toggleTheme" title="切换主题">
272
- <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
273
- </div>
274
-
275
- <!-- 用户头像 -->
276
- <div class="header__user" ref="dropdownRef">
277
- <div class="header__user-trigger" @click.stop="toggleDropdown">
278
- <div class="header__avatar">
279
- <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
280
- </div>
281
- <span class="header__user-name">{{ userStore.userName }}</span>
282
- <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
283
- </div>
284
-
285
- <!-- 下拉菜单 -->
286
- <Transition name="dropdown">
287
- <div v-if="dropdownVisible" class="header__dropdown">
288
- <div class="header__dropdown-header">
289
- <div class="header__dropdown-avatar">
290
- <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
291
- </div>
292
- <div class="header__dropdown-info">
293
- <div class="header__dropdown-name">{{ userStore.userName }}</div>
294
- <div class="header__dropdown-role">{{ userStore.departmentName }}</div>
295
- </div>
296
- </div>
297
- <div class="header__dropdown-divider"></div>
298
- <div class="header__dropdown-menu">
299
- <div class="header__dropdown-item" @click="handleProfile">
300
- <Icon name="user" :size="16" />
301
- <span>个人信息</span>
302
- </div>
303
- <div class="header__dropdown-item" @click="handleChangePassword">
304
- <Icon name="lock" :size="16" />
305
- <span>修改密码</span>
306
- </div>
307
- <div class="header__dropdown-divider"></div>
308
- <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
309
- <Icon name="logout" :size="16" />
310
- <span>退出登录</span>
311
- </div>
312
- </div>
313
- </div>
314
- </Transition>
315
- </div>
316
- </div>
317
-
318
- <!-- 全局搜索弹窗 -->
319
- <Transition name="search">
320
- <div v-if="searchVisible" class="header__search-modal" ref="searchRef">
321
- <div class="search-container">
322
- <div class="search-input-wrapper">
323
- <Icon class="search-icon" name="search" :size="20" />
324
- <input
325
- v-model="searchKeyword"
326
- type="text"
327
- class="search-input"
328
- placeholder="搜索菜单..."
329
- autofocus
330
- @keyup.enter="searchResults[0] && handleSearchItemClick(searchResults[0].path)"
331
- />
332
- <span class="search-shortcut">ESC 关闭</span>
333
- </div>
334
- <div v-if="searchResults.length > 0" class="search-results">
335
- <div
336
- v-for="(item, index) in searchResults"
337
- :key="item.path"
338
- :class="['search-result-item', { 'is-first': index === 0 }]"
339
- @click="handleSearchItemClick(item.path)"
340
- >
341
- <Icon class="search-result-icon" :name="item.icon || 'file'" :size="20" />
342
- <div class="search-result-info">
343
- <span class="search-result-title">{{ item.title }}</span>
344
- <span v-if="item.parentTitle" class="search-result-parent">{{ item.parentTitle }}</span>
345
- </div>
346
- </div>
347
- </div>
348
- <div v-else-if="searchKeyword" class="search-empty">
349
- 未找到匹配的菜单
350
- </div>
351
- </div>
352
- </div>
353
- </Transition>
354
-
355
- <!-- 换肤设置抽屉 -->
356
- <Drawer
357
- v-model="drawerVisible"
358
- title="换肤设置"
359
- direction="rtl"
360
- size="320px"
361
- >
362
- <div class="settings-drawer">
363
- <!-- 布局模式 -->
364
- <div class="settings-section">
365
- <div class="settings-title">布局模式</div>
366
- <div class="settings-layout-options">
367
- <div
368
- v-for="option in layoutOptions"
369
- :key="option.value"
370
- :class="['layout-option', { 'is-active': currentLayout === option.value }]"
371
- @click="handleLayoutChange(option.value)"
372
- >
373
- <div class="layout-option__preview">
374
- <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
375
- <div class="preview-aside"></div>
376
- <div class="preview-main">
377
- <div class="preview-header"></div>
378
- <div class="preview-content"></div>
379
- </div>
380
- </div>
381
- <div v-else-if="option.value === 'top'" class="layout-preview-top">
382
- <div class="preview-header-full"></div>
383
- <div class="preview-content-full"></div>
384
- </div>
385
- <div v-else class="layout-preview-mix">
386
- <div class="preview-header-mix">
387
- <div class="preview-mix-left"></div>
388
- </div>
389
- <div class="preview-mix-body">
390
- <div class="preview-mix-aside"></div>
391
- <div class="preview-mix-content"></div>
392
- </div>
393
- </div>
394
- </div>
395
- <span class="layout-option__label">{{ option.label }}</span>
396
- </div>
397
- </div>
398
- </div>
399
-
400
- <!-- 主题色 -->
401
- <div class="settings-section">
402
- <div class="settings-title">主题色</div>
403
- <div class="settings-color-options">
404
- <div
405
- v-for="color in colorOptions"
406
- :key="color.value"
407
- :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
408
- :style="{ backgroundColor: color.value }"
409
- :title="color.label"
410
- @click="handleColorChange(color.value)"
411
- >
412
- <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
413
- </div>
414
- </div>
415
- </div>
416
-
417
- <!-- 功能开关 -->
418
- <div class="settings-section">
419
- <div class="settings-title">功能设置</div>
420
- <div class="settings-switch-list">
421
- <div class="settings-switch-item">
422
- <span>灰色模式</span>
423
- <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
424
- <span class="switch-core"></span>
425
- </div>
426
- </div>
427
- <div class="settings-switch-item">
428
- <span>暗黑模式</span>
429
- <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
430
- <span class="switch-core"></span>
431
- </div>
432
- </div>
433
- </div>
434
- </div>
435
- </div>
436
- </Drawer>
437
- </div>
438
- </template>
439
-
440
- <style lang="scss" scoped>
441
- .header {
442
- display: flex;
443
- align-items: center;
444
- justify-content: space-between;
445
- padding: 0 20px;
446
- height: 100%;
447
- background-color: var(--bg-color);
448
- border-bottom: 1px solid var(--color-border-lighter);
449
-
450
- &__left {
451
- display: flex;
452
- align-items: center;
453
- gap: 15px;
454
- }
455
-
456
- &__collapse {
457
- width: 24px;
458
- height: 24px;
459
- display: flex;
460
- align-items: center;
461
- justify-content: center;
462
- cursor: pointer;
463
- color: var(--color-text-regular);
464
- transition: color 0.2s;
465
-
466
- &:hover {
467
- color: var(--color-primary);
468
- }
469
- }
470
-
471
- &__breadcrumb {
472
- font-size: 14px;
473
- color: var(--color-text-secondary);
474
-
475
- .breadcrumb-separator {
476
- margin: 0 8px;
477
- color: var(--color-text-placeholder);
478
- }
479
-
480
- .is-current {
481
- color: var(--color-text-primary);
482
- font-weight: 500;
483
- }
484
- }
485
-
486
- &__right {
487
- display: flex;
488
- align-items: center;
489
- gap: 8px;
490
- }
491
-
492
- &__action {
493
- width: 32px;
494
- height: 32px;
495
- display: flex;
496
- align-items: center;
497
- justify-content: center;
498
- cursor: pointer;
499
- border-radius: var(--border-radius-base);
500
- color: var(--color-text-regular);
501
- transition: all 0.2s;
502
-
503
- &:hover {
504
- background-color: var(--color-fill);
505
- color: var(--color-primary);
506
- }
507
- }
508
-
509
- &__user {
510
- position: relative;
511
- margin-left: 8px;
512
-
513
- &-trigger {
514
- display: flex;
515
- align-items: center;
516
- gap: 8px;
517
- cursor: pointer;
518
- padding: 4px 8px;
519
- border-radius: var(--border-radius-base);
520
- transition: background-color 0.2s;
521
-
522
- &:hover {
523
- background-color: var(--color-fill);
524
- }
525
- }
526
-
527
- &-name {
528
- font-size: 14px;
529
- color: var(--color-text-primary);
530
- max-width: 100px;
531
- overflow: hidden;
532
- text-overflow: ellipsis;
533
- white-space: nowrap;
534
- }
535
-
536
- &-arrow {
537
- font-size: 10px;
538
- color: var(--color-text-secondary);
539
- transition: transform 0.2s;
540
-
541
- &.is-active {
542
- transform: rotate(180deg);
543
- }
544
- }
545
- }
546
-
547
- &__avatar {
548
- width: 32px;
549
- height: 32px;
550
- border-radius: 50%;
551
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
552
- display: flex;
553
- align-items: center;
554
- justify-content: center;
555
- color: #fff;
556
- font-size: 14px;
557
- font-weight: 500;
558
- }
559
-
560
- &__dropdown {
561
- position: absolute;
562
- top: calc(100% + 8px);
563
- right: 0;
564
- min-width: 200px;
565
- background-color: var(--bg-color);
566
- border-radius: var(--border-radius-base);
567
- box-shadow: var(--box-shadow);
568
- overflow: hidden;
569
- z-index: 100;
570
-
571
- &-header {
572
- display: flex;
573
- align-items: center;
574
- gap: 12px;
575
- padding: 16px;
576
- }
577
-
578
- &-avatar {
579
- width: 40px;
580
- height: 40px;
581
- border-radius: 50%;
582
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
583
- display: flex;
584
- align-items: center;
585
- justify-content: center;
586
- color: #fff;
587
- font-size: 16px;
588
- font-weight: 500;
589
- }
590
-
591
- &-info {
592
- flex: 1;
593
- }
594
-
595
- &-name {
596
- font-size: 14px;
597
- font-weight: 500;
598
- color: var(--color-text-primary);
599
- }
600
-
601
- &-role {
602
- font-size: 12px;
603
- color: var(--color-text-secondary);
604
- margin-top: 2px;
605
- }
606
-
607
- &-divider {
608
- height: 1px;
609
- background-color: var(--color-border-lighter);
610
- }
611
-
612
- &-menu {
613
- padding: 8px 0;
614
- }
615
-
616
- &-item {
617
- display: flex;
618
- align-items: center;
619
- gap: 10px;
620
- padding: 10px 16px;
621
- cursor: pointer;
622
- font-size: 14px;
623
- color: var(--color-text-regular);
624
- transition: all 0.2s;
625
-
626
- &:hover {
627
- background-color: var(--color-fill);
628
- color: var(--color-text-primary);
629
- }
630
-
631
- &--danger {
632
- color: var(--color-danger);
633
-
634
- &:hover {
635
- background-color: var(--color-danger-light);
636
- color: var(--color-danger);
637
- }
638
- }
639
- }
640
- }
641
-
642
- &__search-modal {
643
- position: fixed;
644
- top: 0;
645
- left: 0;
646
- right: 0;
647
- bottom: 0;
648
- background-color: rgba(0, 0, 0, 0.5);
649
- display: flex;
650
- align-items: flex-start;
651
- justify-content: center;
652
- padding-top: 100px;
653
- z-index: 200;
654
- }
655
- }
656
-
657
- // 搜索容器
658
- .search-container {
659
- width: 600px;
660
- max-width: 90vw;
661
- background-color: var(--bg-color);
662
- border-radius: var(--border-radius-large);
663
- box-shadow: var(--box-shadow-dark);
664
- overflow: hidden;
665
- }
666
-
667
- .search-input-wrapper {
668
- display: flex;
669
- align-items: center;
670
- padding: 16px 20px;
671
- border-bottom: 1px solid var(--color-border-lighter);
672
-
673
- .search-icon {
674
- color: var(--color-text-secondary);
675
- margin-right: 12px;
676
- }
677
-
678
- .search-input {
679
- flex: 1;
680
- font-size: 16px;
681
- color: var(--color-text-primary);
682
- background: transparent;
683
- border: none;
684
- outline: none;
685
-
686
- &::placeholder {
687
- color: var(--color-text-placeholder);
688
- }
689
- }
690
-
691
- .search-shortcut {
692
- font-size: 12px;
693
- color: var(--color-text-secondary);
694
- padding: 4px 8px;
695
- background-color: var(--color-fill);
696
- border-radius: var(--border-radius-base);
697
- }
698
- }
699
-
700
- .search-results {
701
- max-height: 400px;
702
- overflow-y: auto;
703
- padding: 8px 0;
704
- }
705
-
706
- .search-result-item {
707
- display: flex;
708
- align-items: center;
709
- gap: 12px;
710
- padding: 12px 20px;
711
- cursor: pointer;
712
- transition: background-color 0.2s;
713
-
714
- &:hover {
715
- background-color: var(--color-fill);
716
- }
717
-
718
- &.is-first {
719
- background-color: var(--color-primary-light-9);
720
- }
721
-
722
- .search-result-icon {
723
- color: var(--color-text-secondary);
724
- }
725
-
726
- .search-result-info {
727
- flex: 1;
728
- display: flex;
729
- flex-direction: column;
730
- gap: 2px;
731
- }
732
-
733
- .search-result-title {
734
- font-size: 14px;
735
- color: var(--color-text-primary);
736
- }
737
-
738
- .search-result-parent {
739
- font-size: 12px;
740
- color: var(--color-text-secondary);
741
- }
742
- }
743
-
744
- .search-empty {
745
- padding: 40px 20px;
746
- text-align: center;
747
- color: var(--color-text-secondary);
748
- font-size: 14px;
749
- }
750
-
751
- // 设置抽屉内容
752
- .settings-drawer {
753
- .settings-section {
754
- margin-bottom: 24px;
755
- }
756
-
757
- .settings-title {
758
- font-size: 14px;
759
- font-weight: 500;
760
- color: var(--color-text-primary);
761
- margin-bottom: 12px;
762
- }
763
-
764
- .settings-layout-options {
765
- display: flex;
766
- gap: 12px;
767
- }
768
-
769
- .layout-option {
770
- flex: 1;
771
- display: flex;
772
- flex-direction: column;
773
- align-items: center;
774
- gap: 8px;
775
- padding: 12px;
776
- border: 1px solid var(--color-border);
777
- border-radius: var(--border-radius-base);
778
- cursor: pointer;
779
- transition: all 0.2s;
780
-
781
- &:hover {
782
- border-color: var(--color-primary-light-5);
783
- }
784
-
785
- &.is-active {
786
- border-color: var(--color-primary);
787
- background-color: var(--color-primary-light-9);
788
- }
789
-
790
- &__preview {
791
- width: 48px;
792
- height: 36px;
793
- border: 1px solid var(--color-border-light);
794
- border-radius: 2px;
795
- overflow: hidden;
796
- }
797
-
798
- &__label {
799
- font-size: 12px;
800
- color: var(--color-text-regular);
801
- }
802
- }
803
-
804
- // 布局预览样式
805
- .layout-preview-sidebar {
806
- display: flex;
807
- height: 100%;
808
-
809
- .preview-aside {
810
- width: 25%;
811
- height: 100%;
812
- background-color: var(--color-primary-light-7);
813
- }
814
-
815
- .preview-main {
816
- flex: 1;
817
- display: flex;
818
- flex-direction: column;
819
-
820
- .preview-header {
821
- height: 20%;
822
- background-color: var(--color-border-light);
823
- }
824
-
825
- .preview-content {
826
- flex: 1;
827
- background-color: var(--bg-color-page);
828
- }
829
- }
830
- }
831
-
832
- .layout-preview-top {
833
- display: flex;
834
- flex-direction: column;
835
- height: 100%;
836
-
837
- .preview-header-full {
838
- height: 25%;
839
- background-color: var(--color-primary-light-7);
840
- }
841
-
842
- .preview-content-full {
843
- flex: 1;
844
- background-color: var(--bg-color-page);
845
- }
846
- }
847
-
848
- .layout-preview-mix {
849
- display: flex;
850
- flex-direction: column;
851
- height: 100%;
852
-
853
- .preview-header-mix {
854
- height: 25%;
855
- background-color: var(--color-primary-light-7);
856
- display: flex;
857
-
858
- .preview-mix-left {
859
- width: 30%;
860
- background-color: var(--color-primary);
861
- }
862
- }
863
-
864
- .preview-mix-body {
865
- flex: 1;
866
- display: flex;
867
-
868
- .preview-mix-aside {
869
- width: 25%;
870
- background-color: var(--color-primary-light-8);
871
- }
872
-
873
- .preview-mix-content {
874
- flex: 1;
875
- background-color: var(--bg-color-page);
876
- }
877
- }
878
- }
879
-
880
- .settings-color-options {
881
- display: flex;
882
- gap: 12px;
883
- }
884
-
885
- .color-option {
886
- width: 24px;
887
- height: 24px;
888
- border-radius: 4px;
889
- cursor: pointer;
890
- display: flex;
891
- align-items: center;
892
- justify-content: center;
893
- transition: transform 0.2s;
894
-
895
- &:hover {
896
- transform: scale(1.1);
897
- }
898
-
899
- &.is-active {
900
- box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
901
- }
902
- }
903
-
904
- .settings-switch-list {
905
- display: flex;
906
- flex-direction: column;
907
- gap: 12px;
908
- }
909
-
910
- .settings-switch-item {
911
- display: flex;
912
- align-items: center;
913
- justify-content: space-between;
914
-
915
- span {
916
- font-size: 14px;
917
- color: var(--color-text-regular);
918
- }
919
- }
920
-
921
- .switch-wrapper {
922
- width: 44px;
923
- height: 22px;
924
- display: flex;
925
- align-items: center;
926
- cursor: pointer;
927
-
928
- .switch-core {
929
- width: 100%;
930
- height: 100%;
931
- border-radius: 11px;
932
- background-color: var(--color-border);
933
- position: relative;
934
- transition: background-color 0.2s;
935
-
936
- &::after {
937
- content: '';
938
- position: absolute;
939
- top: 2px;
940
- left: 2px;
941
- width: 18px;
942
- height: 18px;
943
- background-color: #fff;
944
- border-radius: 50%;
945
- transition: left 0.2s;
946
- }
947
- }
948
-
949
- &.is-checked {
950
- .switch-core {
951
- background-color: var(--color-primary);
952
-
953
- &::after {
954
- left: 24px;
955
- }
956
- }
957
- }
958
- }
959
- }
960
-
961
- // 下拉动画
962
- .dropdown-enter-active,
963
- .dropdown-leave-active {
964
- transition: all 0.2s ease;
965
- }
966
-
967
- .dropdown-enter-from,
968
- .dropdown-leave-to {
969
- opacity: 0;
970
- transform: translateY(-10px);
971
- }
972
-
973
- // 搜索弹窗动画
974
- .search-enter-active,
975
- .search-leave-active {
976
- transition: all 0.2s ease;
977
- }
978
-
979
- .search-enter-from,
980
- .search-leave-to {
981
- opacity: 0;
982
- }
1
+ <script setup lang="ts">
2
+ import { ref, computed, onMounted, onUnmounted } from 'vue'
3
+ import { useRoute, useRouter } from 'vue-router'
4
+ import { useAppStore } from '@/stores/app'
5
+ import { useUserStore } from '@/stores/user'
6
+ import { useAuthStore } from '@/stores/auth'
7
+ import { useMenuStore } from '@/stores/menu'
8
+ import { Icon } from '@xto/base'
9
+ import { Drawer } from '@xto/feedback'
10
+
11
+ type LayoutMode = 'sidebar' | 'top' | 'mix'
12
+
13
+ const route = useRoute()
14
+ const router = useRouter()
15
+ const appStore = useAppStore()
16
+ const userStore = useUserStore()
17
+ const authStore = useAuthStore()
18
+ const menuStore = useMenuStore()
19
+
20
+ const dropdownVisible = ref(false)
21
+ const drawerVisible = ref(false)
22
+ const dropdownRef = ref<HTMLElement | null>(null)
23
+ const isFullscreen = ref(false)
24
+ const searchVisible = ref(false)
25
+ const searchKeyword = ref('')
26
+ const searchRef = ref<HTMLElement | null>(null)
27
+
28
+ // 灰色模式状态
29
+ const greyMode = ref(false)
30
+
31
+ // 布局模式选项
32
+ const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
33
+ { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
34
+ { value: 'top', label: '顶部菜单', icon: 'menu' },
35
+ { value: 'mix', label: '混合菜单', icon: 'grid' }
36
+ ]
37
+
38
+ // 主题色选项
39
+ const colorOptions = [
40
+ { value: '#409eff', label: '默认蓝' },
41
+ { value: '#1890ff', label: '科技蓝' },
42
+ { value: '#52c41a', label: '极光绿' },
43
+ { value: '#faad14', label: '日落橙' },
44
+ { value: '#f5222d', label: '薄暮红' },
45
+ { value: '#722ed1', label: '酱紫' }
46
+ ]
47
+
48
+ // 面包屑
49
+ const breadcrumbs = computed(() => {
50
+ const matched = route.matched.filter(item => item.meta && item.meta.title)
51
+ return matched.map(item => ({
52
+ title: item.meta.title as string,
53
+ path: item.path
54
+ }))
55
+ })
56
+
57
+ // 扁平化菜单用于搜索
58
+ const flattenMenus = (menus: any[], parentTitle = ''): any[] => {
59
+ const result: any[] = []
60
+ menus.forEach(menu => {
61
+ if (menu.children && menu.children.length > 0) {
62
+ result.push(...flattenMenus(menu.children, menu.menuName))
63
+ } else {
64
+ result.push({ ...menu, parentTitle, title: menu.menuName, path: menu.menuUrl })
65
+ }
66
+ })
67
+ return result
68
+ }
69
+
70
+ // 搜索结果
71
+ const searchResults = computed(() => {
72
+ if (!searchKeyword.value.trim()) return []
73
+ const flatMenus = flattenMenus(menuStore.menuList)
74
+ return flatMenus.filter(menu =>
75
+ menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
76
+ )
77
+ })
78
+
79
+ // 当前布局模式
80
+ const currentLayout = computed(() => appStore.layout)
81
+
82
+ // 切换折叠
83
+ const toggleCollapse = () => {
84
+ appStore.toggleCollapse()
85
+ }
86
+
87
+ // 切换主题
88
+ const toggleTheme = () => {
89
+ appStore.toggleTheme()
90
+ }
91
+
92
+ // 打开设置抽屉
93
+ const openSettingsDrawer = () => {
94
+ drawerVisible.value = true
95
+ }
96
+
97
+ // 切换布局模式
98
+ const handleLayoutChange = (mode: LayoutMode) => {
99
+ appStore.setLayout(mode)
100
+ drawerVisible.value = false
101
+ }
102
+
103
+ // 切换灰色模式
104
+ const handleGreyModeChange = (value: boolean) => {
105
+ greyMode.value = value
106
+ const html = document.documentElement
107
+ if (value) {
108
+ html.classList.add('grey-mode')
109
+ } else {
110
+ html.classList.remove('grey-mode')
111
+ }
112
+ }
113
+
114
+ // 抽屉内灰色模式开关
115
+ const handleGreyModeToggle = () => {
116
+ handleGreyModeChange(!greyMode.value)
117
+ drawerVisible.value = false
118
+ }
119
+
120
+ // 抽屉内暗黑模式开关
121
+ const handleDarkModeToggle = () => {
122
+ appStore.toggleTheme()
123
+ drawerVisible.value = false
124
+ }
125
+
126
+ // 切换全屏
127
+ const toggleFullscreen = () => {
128
+ if (!document.fullscreenElement) {
129
+ document.documentElement.requestFullscreen()
130
+ } else {
131
+ document.exitFullscreen()
132
+ }
133
+ }
134
+
135
+ // 监听全屏变化
136
+ const handleFullscreenChange = () => {
137
+ isFullscreen.value = !!document.fullscreenElement
138
+ }
139
+
140
+ // 切换下拉菜单
141
+ const toggleDropdown = () => {
142
+ dropdownVisible.value = !dropdownVisible.value
143
+ }
144
+
145
+ // 关闭下拉菜单
146
+ const closeDropdowns = () => {
147
+ dropdownVisible.value = false
148
+ }
149
+
150
+ // 隐藏搜索
151
+ const hideSearch = () => {
152
+ searchVisible.value = false
153
+ searchKeyword.value = ''
154
+ }
155
+
156
+ // 搜索结果点击
157
+ const handleSearchItemClick = (path: string) => {
158
+ router.push(path)
159
+ hideSearch()
160
+ }
161
+
162
+ // 设置主题色
163
+ const handleColorChange = (color: string) => {
164
+ appStore.setPrimaryColor(color)
165
+ drawerVisible.value = false
166
+ }
167
+
168
+ // 个人信息
169
+ const handleProfile = () => {
170
+ closeDropdowns()
171
+ router.push('/profile')
172
+ }
173
+
174
+ // 修改密码
175
+ const handleChangePassword = () => {
176
+ closeDropdowns()
177
+ router.push('/change-password')
178
+ }
179
+
180
+ // 退出登录
181
+ const handleLogout = () => {
182
+ closeDropdowns()
183
+ authStore.logout()
184
+ userStore.clearUserInfo()
185
+ menuStore.clearMenu()
186
+ router.push('/login')
187
+ }
188
+
189
+ // 点击外部关闭下拉菜单
190
+ const handleClickOutside = (event: MouseEvent) => {
191
+ if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
192
+ closeDropdowns()
193
+ }
194
+ if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
195
+ hideSearch()
196
+ }
197
+ }
198
+
199
+ // 键盘快捷键
200
+ const handleKeydown = (event: KeyboardEvent) => {
201
+ if (event.key === 'Escape') {
202
+ hideSearch()
203
+ closeDropdowns()
204
+ }
205
+ }
206
+
207
+ onMounted(() => {
208
+ document.addEventListener('click', handleClickOutside)
209
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
210
+ document.addEventListener('keydown', handleKeydown)
211
+ appStore.initTheme()
212
+ // 初始化灰色模式状态
213
+ greyMode.value = document.documentElement.classList.contains('grey-mode')
214
+ })
215
+
216
+ onUnmounted(() => {
217
+ document.removeEventListener('click', handleClickOutside)
218
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
219
+ document.removeEventListener('keydown', handleKeydown)
220
+ })
221
+ </script>
222
+
223
+ <template>
224
+ <div class="header">
225
+ <!-- 左侧 -->
226
+ <div class="header__left">
227
+ <!-- 折叠按钮 -->
228
+ <div class="header__collapse" @click="toggleCollapse">
229
+ <Icon :name="appStore.isCollapsed ? 'menu-unfold' : 'menu-fold'" :size="18" />
230
+ </div>
231
+
232
+ <!-- 面包屑 -->
233
+ <div v-if="appStore.showBreadcrumb" class="header__breadcrumb">
234
+ <span v-for="(item, index) in breadcrumbs" :key="item.path">
235
+ <span v-if="index > 0" class="breadcrumb-separator">/</span>
236
+ <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
237
+ {{ item.title }}
238
+ </span>
239
+ </span>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- 右侧 -->
244
+ <div class="header__right">
245
+ <!-- 搜索输入框 -->
246
+ <div class="header__search" ref="searchRef">
247
+ <Icon name="search" :size="14" class="header__search-icon" />
248
+ <input
249
+ v-model="searchKeyword"
250
+ type="text"
251
+ class="header__search-input"
252
+ placeholder="搜索菜单..."
253
+ @focus="searchVisible = true"
254
+ />
255
+ <!-- 搜索结果下拉 -->
256
+ <Transition name="search-dropdown">
257
+ <div v-if="searchVisible && (searchResults.length > 0 || searchKeyword)" class="header__search-dropdown">
258
+ <div v-if="searchResults.length > 0" class="header__search-results">
259
+ <div
260
+ v-for="item in searchResults"
261
+ :key="item.path"
262
+ class="header__search-item"
263
+ @click="handleSearchItemClick(item.path)"
264
+ >
265
+ <Icon :name="item.icon || 'file'" :size="16" />
266
+ <span class="header__search-item-title">{{ item.title }}</span>
267
+ <span v-if="item.parentTitle" class="header__search-item-parent">{{ item.parentTitle }}</span>
268
+ </div>
269
+ </div>
270
+ <div v-else class="header__search-empty">
271
+ 未找到匹配的菜单
272
+ </div>
273
+ </div>
274
+ </Transition>
275
+ </div>
276
+
277
+ <!-- 全屏切换 -->
278
+ <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
279
+ <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
280
+ </div>
281
+
282
+ <!-- 换肤设置 -->
283
+ <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
284
+ <Icon name="skin" :size="16" />
285
+ </div>
286
+
287
+ <!-- 主题切换 -->
288
+ <div class="header__action" @click="toggleTheme" title="切换主题">
289
+ <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
290
+ </div>
291
+
292
+ <!-- 用户头像 -->
293
+ <div class="header__user" ref="dropdownRef">
294
+ <div class="header__user-trigger" @click.stop="toggleDropdown">
295
+ <div class="header__avatar">
296
+ <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
297
+ </div>
298
+ <span class="header__user-name">{{ userStore.userName }}</span>
299
+ <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
300
+ </div>
301
+
302
+ <!-- 下拉菜单 -->
303
+ <Transition name="dropdown">
304
+ <div v-if="dropdownVisible" class="header__dropdown">
305
+ <div class="header__dropdown-header">
306
+ <div class="header__dropdown-avatar">
307
+ <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
308
+ </div>
309
+ <div class="header__dropdown-info">
310
+ <div class="header__dropdown-name">{{ userStore.userName }}</div>
311
+ <div class="header__dropdown-role">{{ userStore.departmentName }}</div>
312
+ </div>
313
+ </div>
314
+ <div class="header__dropdown-divider"></div>
315
+ <div class="header__dropdown-menu">
316
+ <div class="header__dropdown-item" @click="handleProfile">
317
+ <Icon name="user" :size="16" />
318
+ <span>个人信息</span>
319
+ </div>
320
+ <div class="header__dropdown-item" @click="handleChangePassword">
321
+ <Icon name="lock" :size="16" />
322
+ <span>修改密码</span>
323
+ </div>
324
+ <div class="header__dropdown-divider"></div>
325
+ <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
326
+ <Icon name="logout" :size="16" />
327
+ <span>退出登录</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </Transition>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- 换肤设置抽屉 -->
336
+ <Drawer
337
+ v-model="drawerVisible"
338
+ title="换肤设置"
339
+ direction="rtl"
340
+ size="320px"
341
+ >
342
+ <div class="settings-drawer">
343
+ <!-- 布局模式 -->
344
+ <div class="settings-section">
345
+ <div class="settings-title">布局模式</div>
346
+ <div class="settings-layout-options">
347
+ <div
348
+ v-for="option in layoutOptions"
349
+ :key="option.value"
350
+ :class="['layout-option', { 'is-active': currentLayout === option.value }]"
351
+ @click="handleLayoutChange(option.value)"
352
+ >
353
+ <div class="layout-option__preview">
354
+ <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
355
+ <div class="preview-aside"></div>
356
+ <div class="preview-main">
357
+ <div class="preview-header"></div>
358
+ <div class="preview-content"></div>
359
+ </div>
360
+ </div>
361
+ <div v-else-if="option.value === 'top'" class="layout-preview-top">
362
+ <div class="preview-header-full"></div>
363
+ <div class="preview-content-full"></div>
364
+ </div>
365
+ <div v-else class="layout-preview-mix">
366
+ <div class="preview-header-mix">
367
+ <div class="preview-mix-left"></div>
368
+ </div>
369
+ <div class="preview-mix-body">
370
+ <div class="preview-mix-aside"></div>
371
+ <div class="preview-mix-content"></div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ <span class="layout-option__label">{{ option.label }}</span>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- 主题色 -->
381
+ <div class="settings-section">
382
+ <div class="settings-title">主题色</div>
383
+ <div class="settings-color-options">
384
+ <div
385
+ v-for="color in colorOptions"
386
+ :key="color.value"
387
+ :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
388
+ :style="{ backgroundColor: color.value }"
389
+ :title="color.label"
390
+ @click="handleColorChange(color.value)"
391
+ >
392
+ <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- 功能开关 -->
398
+ <div class="settings-section">
399
+ <div class="settings-title">功能设置</div>
400
+ <div class="settings-switch-list">
401
+ <div class="settings-switch-item">
402
+ <span>灰色模式</span>
403
+ <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
404
+ <span class="switch-core"></span>
405
+ </div>
406
+ </div>
407
+ <div class="settings-switch-item">
408
+ <span>暗黑模式</span>
409
+ <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
410
+ <span class="switch-core"></span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </Drawer>
417
+ </div>
418
+ </template>
419
+
420
+ <style lang="scss" scoped>
421
+ .header {
422
+ display: flex;
423
+ align-items: center;
424
+ justify-content: space-between;
425
+ padding: 0 20px;
426
+ height: 100%;
427
+ background-color: var(--bg-color);
428
+ border-bottom: 1px solid var(--color-border-lighter);
429
+
430
+ &__left {
431
+ display: flex;
432
+ align-items: center;
433
+ gap: 15px;
434
+ }
435
+
436
+ &__collapse {
437
+ width: 24px;
438
+ height: 24px;
439
+ display: flex;
440
+ align-items: center;
441
+ justify-content: center;
442
+ cursor: pointer;
443
+ color: var(--color-text-regular);
444
+ transition: color 0.2s;
445
+
446
+ &:hover {
447
+ color: var(--color-primary);
448
+ }
449
+ }
450
+
451
+ &__breadcrumb {
452
+ font-size: 14px;
453
+ color: var(--color-text-secondary);
454
+
455
+ .breadcrumb-separator {
456
+ margin: 0 8px;
457
+ color: var(--color-text-placeholder);
458
+ }
459
+
460
+ .is-current {
461
+ color: var(--color-text-primary);
462
+ font-weight: 500;
463
+ }
464
+ }
465
+
466
+ &__right {
467
+ display: flex;
468
+ align-items: center;
469
+ gap: 8px;
470
+ }
471
+
472
+ &__search {
473
+ position: relative;
474
+ display: flex;
475
+ align-items: center;
476
+ background-color: var(--color-fill-light);
477
+ border-radius: var(--border-radius-base);
478
+ padding: 0 12px;
479
+ height: 32px;
480
+ width: 200px;
481
+
482
+ &-icon {
483
+ color: var(--color-text-secondary);
484
+ }
485
+
486
+ &-input {
487
+ flex: 1;
488
+ height: 100%;
489
+ font-size: 14px;
490
+ color: var(--color-text-primary);
491
+ background: transparent;
492
+ border: none;
493
+ outline: none;
494
+ padding-left: 8px;
495
+
496
+ &::placeholder {
497
+ color: var(--color-text-placeholder);
498
+ }
499
+ }
500
+
501
+ &-dropdown {
502
+ position: absolute;
503
+ top: calc(100% + 4px);
504
+ left: 0;
505
+ right: 0;
506
+ min-width: 200px;
507
+ max-height: 300px;
508
+ overflow-y: auto;
509
+ background-color: var(--bg-color);
510
+ border-radius: var(--border-radius-base);
511
+ box-shadow: var(--box-shadow);
512
+ z-index: 100;
513
+ }
514
+
515
+ &-results {
516
+ padding: 8px 0;
517
+ }
518
+
519
+ &-item {
520
+ display: flex;
521
+ align-items: center;
522
+ gap: 8px;
523
+ padding: 8px 12px;
524
+ cursor: pointer;
525
+ transition: background-color 0.2s;
526
+
527
+ &:hover {
528
+ background-color: var(--color-fill);
529
+ }
530
+
531
+ &-title {
532
+ font-size: 14px;
533
+ color: var(--color-text-primary);
534
+ }
535
+
536
+ &-parent {
537
+ font-size: 12px;
538
+ color: var(--color-text-secondary);
539
+ margin-left: auto;
540
+ }
541
+ }
542
+
543
+ &-empty {
544
+ padding: 16px 12px;
545
+ text-align: center;
546
+ color: var(--color-text-secondary);
547
+ font-size: 14px;
548
+ }
549
+ }
550
+
551
+ &__action {
552
+ width: 32px;
553
+ height: 32px;
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: center;
557
+ cursor: pointer;
558
+ border-radius: var(--border-radius-base);
559
+ color: var(--color-text-regular);
560
+ transition: all 0.2s;
561
+
562
+ &:hover {
563
+ background-color: var(--color-fill);
564
+ color: var(--color-primary);
565
+ }
566
+ }
567
+
568
+ &__user {
569
+ position: relative;
570
+ margin-left: 8px;
571
+
572
+ &-trigger {
573
+ display: flex;
574
+ align-items: center;
575
+ gap: 8px;
576
+ cursor: pointer;
577
+ padding: 4px 8px;
578
+ border-radius: var(--border-radius-base);
579
+ transition: background-color 0.2s;
580
+
581
+ &:hover {
582
+ background-color: var(--color-fill);
583
+ }
584
+ }
585
+
586
+ &-name {
587
+ font-size: 14px;
588
+ color: var(--color-text-primary);
589
+ max-width: 100px;
590
+ overflow: hidden;
591
+ text-overflow: ellipsis;
592
+ white-space: nowrap;
593
+ }
594
+
595
+ &-arrow {
596
+ font-size: 10px;
597
+ color: var(--color-text-secondary);
598
+ transition: transform 0.2s;
599
+
600
+ &.is-active {
601
+ transform: rotate(180deg);
602
+ }
603
+ }
604
+ }
605
+
606
+ &__avatar {
607
+ width: 32px;
608
+ height: 32px;
609
+ border-radius: 50%;
610
+ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
611
+ display: flex;
612
+ align-items: center;
613
+ justify-content: center;
614
+ color: #fff;
615
+ font-size: 14px;
616
+ font-weight: 500;
617
+ }
618
+
619
+ &__dropdown {
620
+ position: absolute;
621
+ top: calc(100% + 8px);
622
+ right: 0;
623
+ min-width: 200px;
624
+ background-color: var(--bg-color);
625
+ border-radius: var(--border-radius-base);
626
+ box-shadow: var(--box-shadow);
627
+ overflow: hidden;
628
+ z-index: 100;
629
+
630
+ &-header {
631
+ display: flex;
632
+ align-items: center;
633
+ gap: 12px;
634
+ padding: 16px;
635
+ }
636
+
637
+ &-avatar {
638
+ width: 40px;
639
+ height: 40px;
640
+ border-radius: 50%;
641
+ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
642
+ display: flex;
643
+ align-items: center;
644
+ justify-content: center;
645
+ color: #fff;
646
+ font-size: 16px;
647
+ font-weight: 500;
648
+ }
649
+
650
+ &-info {
651
+ flex: 1;
652
+ }
653
+
654
+ &-name {
655
+ font-size: 14px;
656
+ font-weight: 500;
657
+ color: var(--color-text-primary);
658
+ }
659
+
660
+ &-role {
661
+ font-size: 12px;
662
+ color: var(--color-text-secondary);
663
+ margin-top: 2px;
664
+ }
665
+
666
+ &-divider {
667
+ height: 1px;
668
+ background-color: var(--color-border-lighter);
669
+ }
670
+
671
+ &-menu {
672
+ padding: 8px 0;
673
+ }
674
+
675
+ &-item {
676
+ display: flex;
677
+ align-items: center;
678
+ gap: 10px;
679
+ padding: 10px 16px;
680
+ cursor: pointer;
681
+ font-size: 14px;
682
+ color: var(--color-text-regular);
683
+ transition: all 0.2s;
684
+
685
+ &:hover {
686
+ background-color: var(--color-fill);
687
+ color: var(--color-text-primary);
688
+ }
689
+
690
+ &--danger {
691
+ color: var(--color-danger);
692
+
693
+ &:hover {
694
+ background-color: var(--color-danger-light);
695
+ color: var(--color-danger);
696
+ }
697
+ }
698
+ }
699
+ }
700
+ }
701
+
702
+ // 设置抽屉内容
703
+ .settings-drawer {
704
+ .settings-section {
705
+ margin-bottom: 24px;
706
+ }
707
+
708
+ .settings-title {
709
+ font-size: 14px;
710
+ font-weight: 500;
711
+ color: var(--color-text-primary);
712
+ margin-bottom: 12px;
713
+ }
714
+
715
+ .settings-layout-options {
716
+ display: flex;
717
+ gap: 12px;
718
+ }
719
+
720
+ .layout-option {
721
+ flex: 1;
722
+ display: flex;
723
+ flex-direction: column;
724
+ align-items: center;
725
+ gap: 8px;
726
+ padding: 12px;
727
+ border: 1px solid var(--color-border);
728
+ border-radius: var(--border-radius-base);
729
+ cursor: pointer;
730
+ transition: all 0.2s;
731
+
732
+ &:hover {
733
+ border-color: var(--color-primary-light-5);
734
+ }
735
+
736
+ &.is-active {
737
+ border-color: var(--color-primary);
738
+ background-color: var(--color-primary-light-9);
739
+ }
740
+
741
+ &__preview {
742
+ width: 48px;
743
+ height: 36px;
744
+ border: 1px solid var(--color-border-light);
745
+ border-radius: 2px;
746
+ overflow: hidden;
747
+ }
748
+
749
+ &__label {
750
+ font-size: 12px;
751
+ color: var(--color-text-regular);
752
+ }
753
+ }
754
+
755
+ // 布局预览样式
756
+ .layout-preview-sidebar {
757
+ display: flex;
758
+ height: 100%;
759
+
760
+ .preview-aside {
761
+ width: 25%;
762
+ height: 100%;
763
+ background-color: var(--color-primary-light-7);
764
+ }
765
+
766
+ .preview-main {
767
+ flex: 1;
768
+ display: flex;
769
+ flex-direction: column;
770
+
771
+ .preview-header {
772
+ height: 20%;
773
+ background-color: var(--color-border-light);
774
+ }
775
+
776
+ .preview-content {
777
+ flex: 1;
778
+ background-color: var(--bg-color-page);
779
+ }
780
+ }
781
+ }
782
+
783
+ .layout-preview-top {
784
+ display: flex;
785
+ flex-direction: column;
786
+ height: 100%;
787
+
788
+ .preview-header-full {
789
+ height: 25%;
790
+ background-color: var(--color-primary-light-7);
791
+ }
792
+
793
+ .preview-content-full {
794
+ flex: 1;
795
+ background-color: var(--bg-color-page);
796
+ }
797
+ }
798
+
799
+ .layout-preview-mix {
800
+ display: flex;
801
+ flex-direction: column;
802
+ height: 100%;
803
+
804
+ .preview-header-mix {
805
+ height: 25%;
806
+ background-color: var(--color-primary-light-7);
807
+ display: flex;
808
+
809
+ .preview-mix-left {
810
+ width: 30%;
811
+ background-color: var(--color-primary);
812
+ }
813
+ }
814
+
815
+ .preview-mix-body {
816
+ flex: 1;
817
+ display: flex;
818
+
819
+ .preview-mix-aside {
820
+ width: 25%;
821
+ background-color: var(--color-primary-light-8);
822
+ }
823
+
824
+ .preview-mix-content {
825
+ flex: 1;
826
+ background-color: var(--bg-color-page);
827
+ }
828
+ }
829
+ }
830
+
831
+ .settings-color-options {
832
+ display: flex;
833
+ gap: 12px;
834
+ }
835
+
836
+ .color-option {
837
+ width: 24px;
838
+ height: 24px;
839
+ border-radius: 4px;
840
+ cursor: pointer;
841
+ display: flex;
842
+ align-items: center;
843
+ justify-content: center;
844
+ transition: transform 0.2s;
845
+
846
+ &:hover {
847
+ transform: scale(1.1);
848
+ }
849
+
850
+ &.is-active {
851
+ box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
852
+ }
853
+ }
854
+
855
+ .settings-switch-list {
856
+ display: flex;
857
+ flex-direction: column;
858
+ gap: 12px;
859
+ }
860
+
861
+ .settings-switch-item {
862
+ display: flex;
863
+ align-items: center;
864
+ justify-content: space-between;
865
+
866
+ span {
867
+ font-size: 14px;
868
+ color: var(--color-text-regular);
869
+ }
870
+ }
871
+
872
+ .switch-wrapper {
873
+ width: 44px;
874
+ height: 22px;
875
+ display: flex;
876
+ align-items: center;
877
+ cursor: pointer;
878
+
879
+ .switch-core {
880
+ width: 100%;
881
+ height: 100%;
882
+ border-radius: 11px;
883
+ background-color: var(--color-border);
884
+ position: relative;
885
+ transition: background-color 0.2s;
886
+
887
+ &::after {
888
+ content: '';
889
+ position: absolute;
890
+ top: 2px;
891
+ left: 2px;
892
+ width: 18px;
893
+ height: 18px;
894
+ background-color: #fff;
895
+ border-radius: 50%;
896
+ transition: left 0.2s;
897
+ }
898
+ }
899
+
900
+ &.is-checked {
901
+ .switch-core {
902
+ background-color: var(--color-primary);
903
+
904
+ &::after {
905
+ left: 24px;
906
+ }
907
+ }
908
+ }
909
+ }
910
+ }
911
+
912
+ // 下拉动画
913
+ .dropdown-enter-active,
914
+ .dropdown-leave-active {
915
+ transition: all 0.2s ease;
916
+ }
917
+
918
+ .dropdown-enter-from,
919
+ .dropdown-leave-to {
920
+ opacity: 0;
921
+ transform: translateY(-10px);
922
+ }
923
+
924
+ // 搜索下拉动画
925
+ .search-dropdown-enter-active,
926
+ .search-dropdown-leave-active {
927
+ transition: all 0.2s ease;
928
+ }
929
+
930
+ .search-dropdown-enter-from,
931
+ .search-dropdown-leave-to {
932
+ opacity: 0;
933
+ transform: translateY(-4px);
934
+ }
983
935
  </style>