xto-fronted 0.4.43 → 0.4.45

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 (20) hide show
  1. package/dist/index-B02xiP9g.js +372 -0
  2. package/dist/index-B5RdBQ-f.js +475 -0
  3. package/dist/index-C8DBDnxx.js +2836 -0
  4. package/dist/index-CD1ZEMzL.js +2836 -0
  5. package/dist/index-CbA8oUvZ.js +142 -0
  6. package/dist/index-Cb_m0zz1.js +475 -0
  7. package/dist/index-DmFL_GSt.js +142 -0
  8. package/dist/index-DqUuZC8f.js +372 -0
  9. package/dist/index-Dv3hIz8H.js +345 -0
  10. package/dist/index-hI3qofTF.js +345 -0
  11. package/dist/index.es.js +1 -1
  12. package/dist/index.umd.js +1 -1
  13. package/dist/style.css +1 -1
  14. package/package.json +1 -1
  15. package/src/components/Layout/MixTopMenu.vue +947 -926
  16. package/src/components/Layout/TopMenu.vue +21 -0
  17. package/src/components/Layout/index.vue +188 -188
  18. package/src/router/staticRoutes.ts +18 -18
  19. package/src/views/error/403.vue +1 -1
  20. package/src/views/error/404.vue +1 -1
package/src/components/Layout/MixTopMenu.vue CHANGED
@@ -1,927 +1,948 @@
1
- <script setup lang="ts">
2
- import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
3
- import { useRoute, useRouter } from 'vue-router'
4
- import { useMenuStore } from '@/stores/menu'
5
- import { useAppStore } from '@/stores/app'
6
- import { useUserStore } from '@/stores/user'
7
- import { useAuthStore } from '@/stores/auth'
8
- import { Menu, MenuItem } from '@xto/navigation'
9
- import { Icon } from '@xto/base'
10
- import { Drawer } from '@xto/feedback'
11
-
12
- const route = useRoute()
13
- const router = useRouter()
14
- const menuStore = useMenuStore()
15
- const appStore = useAppStore()
16
- const userStore = useUserStore()
17
- const authStore = useAuthStore()
18
-
19
- // 当前激活的一级菜单路径
20
- const activeTopMenuPath = ref<string>('')
21
-
22
- // 获取当前选中一级菜单的子菜单
23
- const currentSubMenuList = computed(() => {
24
- const topMenu = menuStore.menuList.find(menu => menu.menuUrl === activeTopMenuPath.value)
25
- return topMenu?.children || []
26
- })
27
-
28
- // 计算当前激活的一级菜单（根据当前路由）
29
- const currentTopMenu = computed(() => {
30
- return menuStore.menuList.find(menu => {
31
- // 检查当前路由是否属于该一级菜单
32
- if (route.path === menu.menuUrl) return true
33
- if (menu.children && menu.children.some(child => route.path.startsWith(child.menuUrl) || route.path === child.menuUrl)) return true
34
- return false
35
- })
36
- })
37
-
38
- // 初始化激活的一级菜单并更新子菜单
39
- const initActiveTopMenu = () => {
40
- // 先根据当前路由找到对应的一级菜单
41
- if (currentTopMenu.value) {
42
- activeTopMenuPath.value = currentTopMenu.value.menuUrl
43
- } else if (menuStore.menuList.length > 0) {
44
- // 默认选择第一个一级菜单
45
- activeTopMenuPath.value = menuStore.menuList[0].menuUrl
46
- }
47
- }
48
-
49
- // 一级菜单选择处理
50
- const handleTopMenuSelect = (index: string) => {
51
- activeTopMenuPath.value = index
52
- const topMenu = menuStore.menuList.find(menu => menu.menuUrl === index)
53
-
54
- if (topMenu) {
55
- // 如果有子菜单，必须导航到第一个子菜单（一级菜单URL本身通常没有页面）
56
- if (topMenu.children && topMenu.children.length > 0) {
57
- const firstChildUrl = topMenu.children[0].menuUrl
58
- if (route.path !== firstChildUrl) {
59
- router.push(firstChildUrl)
60
- }
61
- } else {
62
- // 如果没有子菜单，导航到该一级菜单路由
63
- if (route.path !== index) {
64
- router.push(index)
65
- }
66
- }
67
- }
68
- }
69
-
70
- // 菜单主题相关
71
- const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
72
- const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
73
- const menuActiveTextColor = computed(() => '#409eff')
74
-
75
- // 下拉菜单
76
- const dropdownVisible = ref(false)
77
- const dropdownRef = ref<HTMLElement | null>(null)
78
- const isFullscreen = ref(false)
79
- const drawerVisible = ref(false)
80
- const greyMode = ref(false)
81
-
82
- // 监听路由变化，更新激活的一级菜单
83
- watch(() => route.path, () => {
84
- initActiveTopMenu()
85
- appStore.setMixSubMenus(currentSubMenuList.value)
86
- })
87
-
88
- // 监听菜单列表变化
89
- watch(() => menuStore.menuList, (list) => {
90
- if (list && list.length > 0) {
91
- initActiveTopMenu()
92
- appStore.setMixSubMenus(currentSubMenuList.value)
93
- }
94
- }, { immediate: true })
95
-
96
- // 已知的图标名称列表
97
- const knownIcons = new Set([
98
- 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
99
- 'caret-down', 'caret-right', 'plus', 'minus', 'close', 'check',
100
- 'edit', 'delete', 'copy', 'download', 'upload', 'refresh', 'search',
101
- 'filter', 'more', 'setting', 'share', 'loading', 'info', 'success',
102
- 'warning', 'error', 'question', 'user', 'user-add', 'user-group',
103
- 'logout', 'login', 'file', 'folder', 'folder-open', 'document',
104
- 'image', 'video', 'music', 'camera', 'mail', 'phone', 'chat',
105
- 'bell', 'message', 'eye', 'eye-off', 'calendar', 'clock', 'history',
106
- 'timer', 'location', 'map', 'globe', 'star', 'heart', 'thumb-up',
107
- 'link', 'external-link', 'lock', 'unlock', 'key', 'home', 'menu',
108
- 'menu-fold', 'menu-unfold', 'sidebar-fold', 'sidebar-expand',
109
- 'sidebar-left', 'dashboard', 'chart', 'chart-pie', 'chart-line',
110
- 'report', 'analytics', 'system', 'permission', 'role', 'user-manage',
111
- 'log', 'notification', 'app', 'list', 'grid', 'fullscreen',
112
- 'fullscreen-exit', 'zoom-in', 'zoom-out', 'print', 'bookmark',
113
- 'tag', 'code', 'terminal', 'database', 'server', 'cloud', 'gift',
114
- 'moon', 'sun', 'theme', 'skin'
115
- ])
116
-
117
- // 获取菜单图标名称
118
- const getMenuIcon = (icon?: string): string => {
119
- if (!icon || icon === '') return ''
120
-
121
- if (icon.startsWith('tineco-icon-')) {
122
- const iconName = icon.replace('tineco-icon-', '')
123
- const tinecoIconMap: Record<string, string> = {
124
- home: 'home',
125
- dashboard: 'dashboard',
126
- system: 'system',
127
- user: 'user',
128
- role: 'role',
129
- menu: 'list',
130
- setting: 'setting',
131
- file: 'file',
132
- folder: 'folder',
133
- chart: 'chart',
134
- report: 'report',
135
- analytics: 'analytics'
136
- }
137
- return tinecoIconMap[iconName] || iconName
138
- }
139
-
140
- const iconMap: Record<string, string> = {
141
- dashboard: 'dashboard',
142
- system: 'system',
143
- user: 'user',
144
- role: 'role',
145
- menu: 'list',
146
- setting: 'setting',
147
- home: 'home',
148
- chart: 'chart',
149
- report: 'report',
150
- analytics: 'analytics',
151
- permission: 'permission',
152
- log: 'log',
153
- notification: 'notification',
154
- app: 'app',
155
- list: 'list',
156
- grid: 'grid'
157
- }
158
-
159
- return iconMap[icon] || icon
160
- }
161
-
162
- const getFirstChar = (name?: string): string => {
163
- if (!name) return ''
164
- return name.charAt(0)
165
- }
166
-
167
- const iconExists = (iconName: string): boolean => {
168
- return knownIcons.has(iconName)
169
- }
170
-
171
- // 切换主题
172
- const toggleTheme = () => {
173
- appStore.toggleTheme()
174
- drawerVisible.value = false
175
- }
176
-
177
- // 切换全屏
178
- const toggleFullscreen = () => {
179
- if (!document.fullscreenElement) {
180
- document.documentElement.requestFullscreen()
181
- } else {
182
- document.exitFullscreen()
183
- }
184
- }
185
-
186
- // 监听全屏变化
187
- const handleFullscreenChange = () => {
188
- isFullscreen.value = !!document.fullscreenElement
189
- }
190
-
191
- // 切换下拉菜单
192
- const toggleDropdown = () => {
193
- dropdownVisible.value = !dropdownVisible.value
194
- }
195
-
196
- // 关闭下拉菜单
197
- const closeDropdowns = () => {
198
- dropdownVisible.value = false
199
- }
200
-
201
- // 打开设置抽屉
202
- const openSettingsDrawer = () => {
203
- drawerVisible.value = true
204
- }
205
-
206
- // 切换灰色模式
207
- const handleGreyModeChange = (value: boolean) => {
208
- greyMode.value = value
209
- const html = document.documentElement
210
- if (value) {
211
- html.classList.add('grey-mode')
212
- } else {
213
- html.classList.remove('grey-mode')
214
- }
215
- }
216
-
217
- // 抽屉内灰色模式开关
218
- const handleGreyModeToggle = () => {
219
- handleGreyModeChange(!greyMode.value)
220
- drawerVisible.value = false
221
- }
222
-
223
- // 抽屉内暗黑模式开关
224
- const handleDarkModeToggle = () => {
225
- appStore.toggleTheme()
226
- drawerVisible.value = false
227
- }
228
-
229
- // 布局模式选项
230
- type LayoutMode = 'sidebar' | 'top' | 'mix'
231
- const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
232
- { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
233
- { value: 'top', label: '顶部菜单', icon: 'menu' },
234
- { value: 'mix', label: '混合菜单', icon: 'grid' }
235
- ]
236
-
237
- const currentLayout = computed(() => appStore.layout)
238
-
239
- // 切换布局模式
240
- const handleLayoutChange = (mode: LayoutMode) => {
241
- appStore.setLayout(mode)
242
- drawerVisible.value = false
243
- }
244
-
245
- // 主题色选项
246
- const colorOptions = [
247
- { value: '#409eff', label: '默认蓝' },
248
- { value: '#1890ff', label: '科技蓝' },
249
- { value: '#52c41a', label: '极光绿' },
250
- { value: '#faad14', label: '日落橙' },
251
- { value: '#f5222d', label: '薄暮红' },
252
- { value: '#722ed1', label: '酱紫' }
253
- ]
254
-
255
- // 设置主题色
256
- const handleColorChange = (color: string) => {
257
- appStore.setPrimaryColor(color)
258
- drawerVisible.value = false
259
- }
260
-
261
- // 个人信息
262
- const handleProfile = () => {
263
- closeDropdowns()
264
- router.push('/profile')
265
- }
266
-
267
- // 修改密码
268
- const handleChangePassword = () => {
269
- closeDropdowns()
270
- router.push('/change-password')
271
- }
272
-
273
- // 退出登录
274
- const handleLogout = () => {
275
- closeDropdowns()
276
- authStore.logout()
277
- userStore.clearUserInfo()
278
- menuStore.clearMenu()
279
- router.push('/login')
280
- }
281
-
282
- // 点击外部关闭下拉菜单
283
- const handleClickOutside = (event: MouseEvent) => {
284
- if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
285
- closeDropdowns()
286
- }
287
- }
288
-
289
- onMounted(() => {
290
- document.addEventListener('click', handleClickOutside)
291
- document.addEventListener('fullscreenchange', handleFullscreenChange)
292
- greyMode.value = document.documentElement.classList.contains('grey-mode')
293
- initActiveTopMenu()
294
- })
295
-
296
- onUnmounted(() => {
297
- document.removeEventListener('click', handleClickOutside)
298
- document.removeEventListener('fullscreenchange', handleFullscreenChange)
299
- })
300
- </script>
301
-
302
- <template>
303
- <div class="mix-top-menu">
304
- <!-- 左侧 Logo -->
305
- <div class="mix-top-menu__logo">
306
- <img src="/vite.svg" alt="Logo" class="mix-top-menu__logo-img" />
307
- <span class="mix-top-menu__logo-text">{{ appStore.appName }}</span>
308
- </div>
309
-
310
- <!-- 一级菜单（只显示一级菜单，不显示下拉子菜单） -->
311
- <Menu
312
- :default-active="activeTopMenuPath"
313
- mode="horizontal"
314
- :background-color="menuBgColor"
315
- :text-color="menuTextColor"
316
- :active-text-color="menuActiveTextColor"
317
- class="mix-top-menu__menu"
318
- @select="handleTopMenuSelect"
319
- >
320
- <MenuItem
321
- v-for="menu in menuStore.menuList"
322
- :key="menu.menuUrl"
323
- :index="menu.menuUrl"
324
- >
325
- <span class="mix-top-menu__menu-content">
326
- <span class="mix-top-menu__menu-icon">
327
- <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
328
- <span v-else class="mix-top-menu__menu-char">{{ getFirstChar(menu.menuName) }}</span>
329
- </span>
330
- <span class="mix-top-menu__menu-text">{{ menu.menuName }}</span>
331
- </span>
332
- </MenuItem>
333
- </Menu>
334
-
335
- <!-- 右侧操作区域 -->
336
- <div class="mix-top-menu__actions">
337
- <!-- 全屏切换 -->
338
- <div class="mix-top-menu__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
339
- <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
340
- </div>
341
-
342
- <!-- 换肤设置 -->
343
- <div class="mix-top-menu__action" @click="openSettingsDrawer" title="换肤设置">
344
- <Icon name="skin" :size="16" />
345
- </div>
346
-
347
- <!-- 主题切换 -->
348
- <div class="mix-top-menu__action" @click="toggleTheme" title="切换主题">
349
- <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
350
- </div>
351
-
352
- <!-- 用户头像 -->
353
- <div class="mix-top-menu__user" ref="dropdownRef">
354
- <div class="mix-top-menu__user-trigger" @click.stop="toggleDropdown">
355
- <div class="mix-top-menu__avatar">
356
- <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
357
- </div>
358
- <span class="mix-top-menu__user-name">{{ userStore.userName }}</span>
359
- <span class="mix-top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
360
- </div>
361
-
362
- <!-- 下拉菜单 -->
363
- <Transition name="dropdown">
364
- <div v-if="dropdownVisible" class="mix-top-menu__dropdown">
365
- <div class="mix-top-menu__dropdown-header">
366
- <div class="mix-top-menu__dropdown-avatar">
367
- <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
368
- </div>
369
- <div class="mix-top-menu__dropdown-info">
370
- <div class="mix-top-menu__dropdown-name">{{ userStore.userName }}</div>
371
- <div class="mix-top-menu__dropdown-role">{{ userStore.departmentName }}</div>
372
- </div>
373
- </div>
374
- <div class="mix-top-menu__dropdown-divider"></div>
375
- <div class="mix-top-menu__dropdown-menu">
376
- <div class="mix-top-menu__dropdown-item" @click="handleProfile">
377
- <Icon name="user" :size="16" />
378
- <span>个人信息</span>
379
- </div>
380
- <div class="mix-top-menu__dropdown-item" @click="handleChangePassword">
381
- <Icon name="lock" :size="16" />
382
- <span>修改密码</span>
383
- </div>
384
- <div class="mix-top-menu__dropdown-divider"></div>
385
- <div class="mix-top-menu__dropdown-item mix-top-menu__dropdown-item--danger" @click="handleLogout">
386
- <Icon name="logout" :size="16" />
387
- <span>退出登录</span>
388
- </div>
389
- </div>
390
- </div>
391
- </Transition>
392
- </div>
393
- </div>
394
-
395
- <!-- 换肤设置抽屉 -->
396
- <Drawer
397
- v-model="drawerVisible"
398
- title="换肤设置"
399
- direction="rtl"
400
- size="320px"
401
- >
402
- <div class="settings-drawer">
403
- <!-- 布局模式 -->
404
- <div class="settings-section">
405
- <div class="settings-title">布局模式</div>
406
- <div class="settings-layout-options">
407
- <div
408
- v-for="option in layoutOptions"
409
- :key="option.value"
410
- :class="['layout-option', { 'is-active': currentLayout === option.value }]"
411
- @click="handleLayoutChange(option.value)"
412
- >
413
- <div class="layout-option__preview">
414
- <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
415
- <div class="preview-aside"></div>
416
- <div class="preview-main">
417
- <div class="preview-header"></div>
418
- <div class="preview-content"></div>
419
- </div>
420
- </div>
421
- <div v-else-if="option.value === 'top'" class="layout-preview-top">
422
- <div class="preview-header-full"></div>
423
- <div class="preview-content-full"></div>
424
- </div>
425
- <div v-else class="layout-preview-mix">
426
- <div class="preview-header-mix">
427
- <div class="preview-mix-left"></div>
428
- </div>
429
- <div class="preview-mix-body">
430
- <div class="preview-mix-aside"></div>
431
- <div class="preview-mix-content"></div>
432
- </div>
433
- </div>
434
- </div>
435
- <span class="layout-option__label">{{ option.label }}</span>
436
- </div>
437
- </div>
438
- </div>
439
-
440
- <!-- 主题色 -->
441
- <div class="settings-section">
442
- <div class="settings-title">主题色</div>
443
- <div class="settings-color-options">
444
- <div
445
- v-for="color in colorOptions"
446
- :key="color.value"
447
- :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
448
- :style="{ backgroundColor: color.value }"
449
- :title="color.label"
450
- @click="handleColorChange(color.value)"
451
- >
452
- <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
453
- </div>
454
- </div>
455
- </div>
456
-
457
- <!-- 功能开关 -->
458
- <div class="settings-section">
459
- <div class="settings-title">功能设置</div>
460
- <div class="settings-switch-list">
461
- <div class="settings-switch-item">
462
- <span>灰色模式</span>
463
- <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
464
- <span class="switch-core"></span>
465
- </div>
466
- </div>
467
- <div class="settings-switch-item">
468
- <span>暗黑模式</span>
469
- <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
470
- <span class="switch-core"></span>
471
- </div>
472
- </div>
473
- </div>
474
- </div>
475
- </div>
476
- </Drawer>
477
- </div>
478
- </template>
479
-
480
- <style lang="scss" scoped>
481
- .mix-top-menu {
482
- width: 100%;
483
- height: 100%;
484
- display: flex;
485
- align-items: center;
486
- padding: 0 20px;
487
-
488
- &__logo {
489
- display: flex;
490
- align-items: center;
491
- gap: 10px;
492
- margin-right: 20px;
493
- }
494
-
495
- &__logo-img {
496
- width: 32px;
497
- height: 32px;
498
- }
499
-
500
- &__logo-text {
501
- font-size: 16px;
502
- font-weight: 600;
503
- color: var(--color-primary);
504
- }
505
-
506
- &__menu {
507
- flex: 1;
508
- border-bottom: none;
509
- height: 100%;
510
- }
511
-
512
- &__menu-content {
513
- display: inline-flex;
514
- align-items: center;
515
- line-height: 1;
516
- }
517
-
518
- &__menu-text {
519
- flex: 1;
520
- line-height: 1;
521
- }
522
-
523
- &__menu-icon {
524
- display: inline-flex;
525
- align-items: center;
526
- justify-content: center;
527
- width: 16px;
528
- height: 16px;
529
- margin-right: 8px;
530
- flex-shrink: 0;
531
- }
532
-
533
- &__menu-char {
534
- display: inline-flex;
535
- align-items: center;
536
- justify-content: center;
537
- width: 16px;
538
- height: 16px;
539
- font-size: 12px;
540
- font-weight: 600;
541
- color: var(--color-primary);
542
- background-color: var(--color-primary-light-8);
543
- border-radius: 4px;
544
- }
545
-
546
- // 右侧操作区域
547
- &__actions {
548
- display: flex;
549
- align-items: center;
550
- gap: 8px;
551
- }
552
-
553
- &__action {
554
- width: 32px;
555
- height: 32px;
556
- display: flex;
557
- align-items: center;
558
- justify-content: center;
559
- cursor: pointer;
560
- border-radius: var(--border-radius-base);
561
- color: var(--color-text-regular);
562
- transition: all 0.2s;
563
-
564
- &:hover {
565
- background-color: var(--color-fill);
566
- color: var(--color-primary);
567
- }
568
- }
569
-
570
- // 用户头像
571
- &__user {
572
- position: relative;
573
- margin-left: 8px;
574
-
575
- &-trigger {
576
- display: flex;
577
- align-items: center;
578
- gap: 8px;
579
- cursor: pointer;
580
- padding: 4px 8px;
581
- border-radius: var(--border-radius-base);
582
- transition: background-color 0.2s;
583
-
584
- &:hover {
585
- background-color: var(--color-fill);
586
- }
587
- }
588
-
589
- &-name {
590
- font-size: 14px;
591
- color: var(--color-text-primary);
592
- max-width: 100px;
593
- overflow: hidden;
594
- text-overflow: ellipsis;
595
- white-space: nowrap;
596
- }
597
-
598
- &-arrow {
599
- font-size: 10px;
600
- color: var(--color-text-secondary);
601
- transition: transform 0.2s;
602
-
603
- &.is-active {
604
- transform: rotate(180deg);
605
- }
606
- }
607
- }
608
-
609
- &__avatar {
610
- width: 32px;
611
- height: 32px;
612
- border-radius: 50%;
613
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
614
- display: flex;
615
- align-items: center;
616
- justify-content: center;
617
- color: #fff;
618
- font-size: 14px;
619
- font-weight: 500;
620
- }
621
-
622
- // 下拉菜单
623
- &__dropdown {
624
- position: absolute;
625
- top: calc(100% + 8px);
626
- right: 0;
627
- min-width: 200px;
628
- background-color: var(--bg-color);
629
- border-radius: var(--border-radius-base);
630
- box-shadow: var(--box-shadow);
631
- overflow: hidden;
632
- z-index: 100;
633
-
634
- &-header {
635
- display: flex;
636
- align-items: center;
637
- gap: 12px;
638
- padding: 16px;
639
- }
640
-
641
- &-avatar {
642
- width: 40px;
643
- height: 40px;
644
- border-radius: 50%;
645
- background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
646
- display: flex;
647
- align-items: center;
648
- justify-content: center;
649
- color: #fff;
650
- font-size: 16px;
651
- font-weight: 500;
652
- }
653
-
654
- &-info {
655
- flex: 1;
656
- }
657
-
658
- &-name {
659
- font-size: 14px;
660
- font-weight: 500;
661
- color: var(--color-text-primary);
662
- }
663
-
664
- &-role {
665
- font-size: 12px;
666
- color: var(--color-text-secondary);
667
- margin-top: 2px;
668
- }
669
-
670
- &-divider {
671
- height: 1px;
672
- background-color: var(--color-border-lighter);
673
- }
674
-
675
- &-menu {
676
- padding: 8px 0;
677
- }
678
-
679
- &-item {
680
- display: flex;
681
- align-items: center;
682
- gap: 10px;
683
- padding: 10px 16px;
684
- cursor: pointer;
685
- font-size: 14px;
686
- color: var(--color-text-regular);
687
- transition: all 0.2s;
688
-
689
- &:hover {
690
- background-color: var(--color-fill);
691
- color: var(--color-text-primary);
692
- }
693
-
694
- &--danger {
695
- color: var(--color-danger);
696
-
697
- &:hover {
698
- background-color: var(--color-danger-light);
699
- color: var(--color-danger);
700
- }
701
- }
702
- }
703
- }
704
- }
705
-
706
- // 设置抽屉内容
707
- .settings-drawer {
708
- .settings-section {
709
- margin-bottom: 24px;
710
- }
711
-
712
- .settings-title {
713
- font-size: 14px;
714
- font-weight: 500;
715
- color: var(--color-text-primary);
716
- margin-bottom: 12px;
717
- }
718
-
719
- .settings-layout-options {
720
- display: flex;
721
- gap: 12px;
722
- }
723
-
724
- .layout-option {
725
- flex: 1;
726
- display: flex;
727
- flex-direction: column;
728
- align-items: center;
729
- gap: 8px;
730
- padding: 12px;
731
- border: 1px solid var(--color-border);
732
- border-radius: var(--border-radius-base);
733
- cursor: pointer;
734
- transition: all 0.2s;
735
-
736
- &:hover {
737
- border-color: var(--color-primary-light-5);
738
- }
739
-
740
- &.is-active {
741
- border-color: var(--color-primary);
742
- background-color: var(--color-primary-light-9);
743
- }
744
-
745
- &__preview {
746
- width: 48px;
747
- height: 36px;
748
- border: 1px solid var(--color-border-light);
749
- border-radius: 2px;
750
- overflow: hidden;
751
- }
752
-
753
- &__label {
754
- font-size: 12px;
755
- color: var(--color-text-regular);
756
- }
757
- }
758
-
759
- // 布局预览样式
760
- .layout-preview-sidebar {
761
- display: flex;
762
- height: 100%;
763
-
764
- .preview-aside {
765
- width: 25%;
766
- height: 100%;
767
- background-color: var(--color-primary-light-7);
768
- }
769
-
770
- .preview-main {
771
- flex: 1;
772
- display: flex;
773
- flex-direction: column;
774
-
775
- .preview-header {
776
- height: 20%;
777
- background-color: var(--color-border-light);
778
- }
779
-
780
- .preview-content {
781
- flex: 1;
782
- background-color: var(--bg-color-page);
783
- }
784
- }
785
- }
786
-
787
- .layout-preview-top {
788
- display: flex;
789
- flex-direction: column;
790
- height: 100%;
791
-
792
- .preview-header-full {
793
- height: 25%;
794
- background-color: var(--color-primary-light-7);
795
- }
796
-
797
- .preview-content-full {
798
- flex: 1;
799
- background-color: var(--bg-color-page);
800
- }
801
- }
802
-
803
- .layout-preview-mix {
804
- display: flex;
805
- flex-direction: column;
806
- height: 100%;
807
-
808
- .preview-header-mix {
809
- height: 25%;
810
- background-color: var(--color-primary-light-7);
811
- display: flex;
812
-
813
- .preview-mix-left {
814
- width: 30%;
815
- background-color: var(--color-primary);
816
- }
817
- }
818
-
819
- .preview-mix-body {
820
- flex: 1;
821
- display: flex;
822
-
823
- .preview-mix-aside {
824
- width: 25%;
825
- background-color: var(--color-primary-light-8);
826
- }
827
-
828
- .preview-mix-content {
829
- flex: 1;
830
- background-color: var(--bg-color-page);
831
- }
832
- }
833
- }
834
-
835
- .settings-color-options {
836
- display: flex;
837
- gap: 12px;
838
- }
839
-
840
- .color-option {
841
- width: 24px;
842
- height: 24px;
843
- border-radius: 4px;
844
- cursor: pointer;
845
- display: flex;
846
- align-items: center;
847
- justify-content: center;
848
- transition: transform 0.2s;
849
-
850
- &:hover {
851
- transform: scale(1.1);
852
- }
853
-
854
- &.is-active {
855
- box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
856
- }
857
- }
858
-
859
- .settings-switch-list {
860
- display: flex;
861
- flex-direction: column;
862
- gap: 12px;
863
- }
864
-
865
- .settings-switch-item {
866
- display: flex;
867
- align-items: center;
868
- justify-content: space-between;
869
-
870
- span {
871
- font-size: 14px;
872
- color: var(--color-text-regular);
873
- }
874
- }
875
-
876
- .switch-wrapper {
877
- width: 44px;
878
- height: 22px;
879
- display: flex;
880
- align-items: center;
881
- cursor: pointer;
882
-
883
- .switch-core {
884
- width: 100%;
885
- height: 100%;
886
- border-radius: 11px;
887
- background-color: var(--color-border);
888
- position: relative;
889
- transition: background-color 0.2s;
890
-
891
- &::after {
892
- content: '';
893
- position: absolute;
894
- top: 2px;
895
- left: 2px;
896
- width: 18px;
897
- height: 18px;
898
- background-color: #fff;
899
- border-radius: 50%;
900
- transition: left 0.2s;
901
- }
902
- }
903
-
904
- &.is-checked {
905
- .switch-core {
906
- background-color: var(--color-primary);
907
-
908
- &::after {
909
- left: 24px;
910
- }
911
- }
912
- }
913
- }
914
- }
915
-
916
- // 下拉动画
917
- .dropdown-enter-active,
918
- .dropdown-leave-active {
919
- transition: all 0.2s ease;
920
- }
921
-
922
- .dropdown-enter-from,
923
- .dropdown-leave-to {
924
- opacity: 0;
925
- transform: translateY(-10px);
926
- }
1
+ <script setup lang="ts">
2
+ import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
3
+ import { useRoute, useRouter } from 'vue-router'
4
+ import { useMenuStore } from '@/stores/menu'
5
+ import { useAppStore } from '@/stores/app'
6
+ import { useUserStore } from '@/stores/user'
7
+ import { useAuthStore } from '@/stores/auth'
8
+ import { Menu, MenuItem } from '@xto/navigation'
9
+ import { Icon } from '@xto/base'
10
+ import { Drawer } from '@xto/feedback'
11
+
12
+ const route = useRoute()
13
+ const router = useRouter()
14
+ const menuStore = useMenuStore()
15
+ const appStore = useAppStore()
16
+ const userStore = useUserStore()
17
+ const authStore = useAuthStore()
18
+
19
+ // 当前激活的一级菜单路径
20
+ const activeTopMenuPath = ref<string>('')
21
+
22
+ // 获取当前选中一级菜单的子菜单
23
+ const currentSubMenuList = computed(() => {
24
+ const topMenu = menuStore.menuList.find(menu => menu.menuUrl === activeTopMenuPath.value)
25
+ return topMenu?.children || []
26
+ })
27
+
28
+ // 计算当前激活的一级菜单（根据当前路由）
29
+ const currentTopMenu = computed(() => {
30
+ return menuStore.menuList.find(menu => {
31
+ // 检查当前路由是否属于该一级菜单
32
+ if (route.path === menu.menuUrl) return true
33
+ if (menu.children && menu.children.some(child => route.path.startsWith(child.menuUrl) || route.path === child.menuUrl)) return true
34
+ return false
35
+ })
36
+ })
37
+
38
+ // 初始化激活的一级菜单并更新子菜单
39
+ const initActiveTopMenu = () => {
40
+ // 先根据当前路由找到对应的一级菜单
41
+ if (currentTopMenu.value) {
42
+ activeTopMenuPath.value = currentTopMenu.value.menuUrl
43
+ } else if (menuStore.menuList.length > 0) {
44
+ // 默认选择第一个一级菜单
45
+ activeTopMenuPath.value = menuStore.menuList[0].menuUrl
46
+ }
47
+ }
48
+
49
+ // 一级菜单选择处理
50
+ const handleTopMenuSelect = (index: string) => {
51
+ activeTopMenuPath.value = index
52
+ const topMenu = menuStore.menuList.find(menu => menu.menuUrl === index)
53
+
54
+ if (topMenu) {
55
+ // 如果有子菜单，必须导航到第一个子菜单（一级菜单URL本身通常没有页面）
56
+ if (topMenu.children && topMenu.children.length > 0) {
57
+ const firstChildUrl = topMenu.children[0].menuUrl
58
+ if (route.path !== firstChildUrl) {
59
+ router.push(firstChildUrl)
60
+ }
61
+ } else {
62
+ // 如果没有子菜单，导航到该一级菜单路由
63
+ if (route.path !== index) {
64
+ router.push(index)
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ // 菜单主题相关
71
+ const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
72
+ const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
73
+ const menuActiveTextColor = computed(() => '#409eff')
74
+
75
+ // 下拉菜单
76
+ const dropdownVisible = ref(false)
77
+ const dropdownRef = ref<HTMLElement | null>(null)
78
+ const isFullscreen = ref(false)
79
+ const drawerVisible = ref(false)
80
+ const greyMode = ref(false)
81
+
82
+ // 监听路由变化，更新激活的一级菜单
83
+ watch(() => route.path, () => {
84
+ initActiveTopMenu()
85
+ appStore.setMixSubMenus(currentSubMenuList.value)
86
+ })
87
+
88
+ // 监听菜单列表变化
89
+ watch(() => menuStore.menuList, (list) => {
90
+ if (list && list.length > 0) {
91
+ initActiveTopMenu()
92
+ appStore.setMixSubMenus(currentSubMenuList.value)
93
+ }
94
+ }, { immediate: true })
95
+
96
+ // 已知的图标名称列表
97
+ const knownIcons = new Set([
98
+ 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
99
+ 'caret-down', 'caret-right', 'plus', 'minus', 'close', 'check',
100
+ 'edit', 'delete', 'copy', 'download', 'upload', 'refresh', 'search',
101
+ 'filter', 'more', 'setting', 'share', 'loading', 'info', 'success',
102
+ 'warning', 'error', 'question', 'user', 'user-add', 'user-group',
103
+ 'logout', 'login', 'file', 'folder', 'folder-open', 'document',
104
+ 'image', 'video', 'music', 'camera', 'mail', 'phone', 'chat',
105
+ 'bell', 'message', 'eye', 'eye-off', 'calendar', 'clock', 'history',
106
+ 'timer', 'location', 'map', 'globe', 'star', 'heart', 'thumb-up',
107
+ 'link', 'external-link', 'lock', 'unlock', 'key', 'home', 'menu',
108
+ 'menu-fold', 'menu-unfold', 'sidebar-fold', 'sidebar-expand',
109
+ 'sidebar-left', 'dashboard', 'chart', 'chart-pie', 'chart-line',
110
+ 'report', 'analytics', 'system', 'permission', 'role', 'user-manage',
111
+ 'log', 'notification', 'app', 'list', 'grid', 'fullscreen',
112
+ 'fullscreen-exit', 'zoom-in', 'zoom-out', 'print', 'bookmark',
113
+ 'tag', 'code', 'terminal', 'database', 'server', 'cloud', 'gift',
114
+ 'moon', 'sun', 'theme', 'skin'
115
+ ])
116
+
117
+ // 获取菜单图标名称
118
+ const getMenuIcon = (icon?: string): string => {
119
+ if (!icon || icon === '') return ''
120
+
121
+ if (icon.startsWith('tineco-icon-')) {
122
+ const iconName = icon.replace('tineco-icon-', '')
123
+ const tinecoIconMap: Record<string, string> = {
124
+ home: 'home',
125
+ dashboard: 'dashboard',
126
+ system: 'system',
127
+ user: 'user',
128
+ role: 'role',
129
+ menu: 'list',
130
+ setting: 'setting',
131
+ file: 'file',
132
+ folder: 'folder',
133
+ chart: 'chart',
134
+ report: 'report',
135
+ analytics: 'analytics'
136
+ }
137
+ return tinecoIconMap[iconName] || iconName
138
+ }
139
+
140
+ const iconMap: Record<string, string> = {
141
+ dashboard: 'dashboard',
142
+ system: 'system',
143
+ user: 'user',
144
+ role: 'role',
145
+ menu: 'list',
146
+ setting: 'setting',
147
+ home: 'home',
148
+ chart: 'chart',
149
+ report: 'report',
150
+ analytics: 'analytics',
151
+ permission: 'permission',
152
+ log: 'log',
153
+ notification: 'notification',
154
+ app: 'app',
155
+ list: 'list',
156
+ grid: 'grid'
157
+ }
158
+
159
+ return iconMap[icon] || icon
160
+ }
161
+
162
+ const getFirstChar = (name?: string): string => {
163
+ if (!name) return ''
164
+ return name.charAt(0)
165
+ }
166
+
167
+ const iconExists = (iconName: string): boolean => {
168
+ return knownIcons.has(iconName)
169
+ }
170
+
171
+ // 切换主题
172
+ const toggleTheme = () => {
173
+ appStore.toggleTheme()
174
+ drawerVisible.value = false
175
+ }
176
+
177
+ // 切换全屏
178
+ const toggleFullscreen = () => {
179
+ if (!document.fullscreenElement) {
180
+ document.documentElement.requestFullscreen()
181
+ } else {
182
+ document.exitFullscreen()
183
+ }
184
+ }
185
+
186
+ // 监听全屏变化
187
+ const handleFullscreenChange = () => {
188
+ isFullscreen.value = !!document.fullscreenElement
189
+ }
190
+
191
+ // 切换下拉菜单
192
+ const toggleDropdown = () => {
193
+ dropdownVisible.value = !dropdownVisible.value
194
+ }
195
+
196
+ // 关闭下拉菜单
197
+ const closeDropdowns = () => {
198
+ dropdownVisible.value = false
199
+ }
200
+
201
+ // 打开设置抽屉
202
+ const openSettingsDrawer = () => {
203
+ drawerVisible.value = true
204
+ }
205
+
206
+ // 切换灰色模式
207
+ const handleGreyModeChange = (value: boolean) => {
208
+ greyMode.value = value
209
+ const html = document.documentElement
210
+ if (value) {
211
+ html.classList.add('grey-mode')
212
+ } else {
213
+ html.classList.remove('grey-mode')
214
+ }
215
+ }
216
+
217
+ // 抽屉内灰色模式开关
218
+ const handleGreyModeToggle = () => {
219
+ handleGreyModeChange(!greyMode.value)
220
+ drawerVisible.value = false
221
+ }
222
+
223
+ // 抽屉内暗黑模式开关
224
+ const handleDarkModeToggle = () => {
225
+ appStore.toggleTheme()
226
+ drawerVisible.value = false
227
+ }
228
+
229
+ // 布局模式选项
230
+ type LayoutMode = 'sidebar' | 'top' | 'mix'
231
+ const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
232
+ { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
233
+ { value: 'top', label: '顶部菜单', icon: 'menu' },
234
+ { value: 'mix', label: '混合菜单', icon: 'grid' }
235
+ ]
236
+
237
+ const currentLayout = computed(() => appStore.layout)
238
+
239
+ // 切换布局模式
240
+ const handleLayoutChange = (mode: LayoutMode) => {
241
+ appStore.setLayout(mode)
242
+ drawerVisible.value = false
243
+ }
244
+
245
+ // 主题色选项
246
+ const colorOptions = [
247
+ { value: '#409eff', label: '默认蓝' },
248
+ { value: '#1890ff', label: '科技蓝' },
249
+ { value: '#52c41a', label: '极光绿' },
250
+ { value: '#faad14', label: '日落橙' },
251
+ { value: '#f5222d', label: '薄暮红' },
252
+ { value: '#722ed1', label: '酱紫' }
253
+ ]
254
+
255
+ // 设置主题色
256
+ const handleColorChange = (color: string) => {
257
+ appStore.setPrimaryColor(color)
258
+ drawerVisible.value = false
259
+ }
260
+
261
+ // 个人信息
262
+ const handleProfile = () => {
263
+ closeDropdowns()
264
+ router.push('/profile')
265
+ }
266
+
267
+ // 修改密码
268
+ const handleChangePassword = () => {
269
+ closeDropdowns()
270
+ router.push('/change-password')
271
+ }
272
+
273
+ // 退出登录
274
+ const handleLogout = () => {
275
+ closeDropdowns()
276
+ authStore.logout()
277
+ userStore.clearUserInfo()
278
+ menuStore.clearMenu()
279
+ router.push('/login')
280
+ }
281
+
282
+ // 点击外部关闭下拉菜单
283
+ const handleClickOutside = (event: MouseEvent) => {
284
+ if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
285
+ closeDropdowns()
286
+ }
287
+ }
288
+
289
+ onMounted(() => {
290
+ document.addEventListener('click', handleClickOutside)
291
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
292
+ greyMode.value = document.documentElement.classList.contains('grey-mode')
293
+ initActiveTopMenu()
294
+ })
295
+
296
+ onUnmounted(() => {
297
+ document.removeEventListener('click', handleClickOutside)
298
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
299
+ })
300
+ </script>
301
+
302
+ <template>
303
+ <div class="mix-top-menu">
304
+ <!-- 左侧 Logo -->
305
+ <div class="mix-top-menu__logo">
306
+ <img src="/vite.svg" alt="Logo" class="mix-top-menu__logo-img" />
307
+ <span class="mix-top-menu__logo-text">{{ appStore.appName }}</span>
308
+ </div>
309
+
310
+ <!-- 一级菜单（只显示一级菜单，不显示下拉子菜单） -->
311
+ <Menu
312
+ :default-active="activeTopMenuPath"
313
+ mode="horizontal"
314
+ :background-color="menuBgColor"
315
+ :text-color="menuTextColor"
316
+ :active-text-color="menuActiveTextColor"
317
+ class="mix-top-menu__menu"
318
+ @select="handleTopMenuSelect"
319
+ >
320
+ <MenuItem
321
+ v-for="menu in menuStore.menuList"
322
+ :key="menu.menuUrl"
323
+ :index="menu.menuUrl"
324
+ >
325
+ <span class="mix-top-menu__menu-content">
326
+ <span class="mix-top-menu__menu-icon">
327
+ <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
328
+ <span v-else class="mix-top-menu__menu-char">{{ getFirstChar(menu.menuName) }}</span>
329
+ </span>
330
+ <span class="mix-top-menu__menu-text">{{ menu.menuName }}</span>
331
+ </span>
332
+ </MenuItem>
333
+ </Menu>
334
+
335
+ <!-- 右侧操作区域 -->
336
+ <div class="mix-top-menu__actions">
337
+ <!-- 全屏切换 -->
338
+ <div class="mix-top-menu__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
339
+ <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
340
+ </div>
341
+
342
+ <!-- 换肤设置 -->
343
+ <div class="mix-top-menu__action" @click="openSettingsDrawer" title="换肤设置">
344
+ <Icon name="skin" :size="16" />
345
+ </div>
346
+
347
+ <!-- 主题切换 -->
348
+ <div class="mix-top-menu__action" @click="toggleTheme" title="切换主题">
349
+ <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
350
+ </div>
351
+
352
+ <!-- 用户头像 -->
353
+ <div class="mix-top-menu__user" ref="dropdownRef">
354
+ <div class="mix-top-menu__user-trigger" @click.stop="toggleDropdown">
355
+ <div class="mix-top-menu__avatar">
356
+ <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
357
+ </div>
358
+ <span class="mix-top-menu__user-name">{{ userStore.userName }}</span>
359
+ <span class="mix-top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
360
+ </div>
361
+
362
+ <!-- 下拉菜单 -->
363
+ <Transition name="dropdown">
364
+ <div v-if="dropdownVisible" class="mix-top-menu__dropdown">
365
+ <div class="mix-top-menu__dropdown-header">
366
+ <div class="mix-top-menu__dropdown-avatar">
367
+ <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
368
+ </div>
369
+ <div class="mix-top-menu__dropdown-info">
370
+ <div class="mix-top-menu__dropdown-name">{{ userStore.userName }}</div>
371
+ <div class="mix-top-menu__dropdown-role">{{ userStore.departmentName }}</div>
372
+ </div>
373
+ </div>
374
+ <div class="mix-top-menu__dropdown-divider"></div>
375
+ <div class="mix-top-menu__dropdown-menu">
376
+ <div class="mix-top-menu__dropdown-item" @click="handleProfile">
377
+ <Icon name="user" :size="16" />
378
+ <span>个人信息</span>
379
+ </div>
380
+ <div class="mix-top-menu__dropdown-item" @click="handleChangePassword">
381
+ <Icon name="lock" :size="16" />
382
+ <span>修改密码</span>
383
+ </div>
384
+ <div class="mix-top-menu__dropdown-divider"></div>
385
+ <div class="mix-top-menu__dropdown-item mix-top-menu__dropdown-item--danger" @click="handleLogout">
386
+ <Icon name="logout" :size="16" />
387
+ <span>退出登录</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </Transition>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- 换肤设置抽屉 -->
396
+ <Drawer
397
+ v-model="drawerVisible"
398
+ title="换肤设置"
399
+ direction="rtl"
400
+ size="320px"
401
+ >
402
+ <div class="settings-drawer">
403
+ <!-- 布局模式 -->
404
+ <div class="settings-section">
405
+ <div class="settings-title">布局模式</div>
406
+ <div class="settings-layout-options">
407
+ <div
408
+ v-for="option in layoutOptions"
409
+ :key="option.value"
410
+ :class="['layout-option', { 'is-active': currentLayout === option.value }]"
411
+ @click="handleLayoutChange(option.value)"
412
+ >
413
+ <div class="layout-option__preview">
414
+ <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
415
+ <div class="preview-aside"></div>
416
+ <div class="preview-main">
417
+ <div class="preview-header"></div>
418
+ <div class="preview-content"></div>
419
+ </div>
420
+ </div>
421
+ <div v-else-if="option.value === 'top'" class="layout-preview-top">
422
+ <div class="preview-header-full"></div>
423
+ <div class="preview-content-full"></div>
424
+ </div>
425
+ <div v-else class="layout-preview-mix">
426
+ <div class="preview-header-mix">
427
+ <div class="preview-mix-left"></div>
428
+ </div>
429
+ <div class="preview-mix-body">
430
+ <div class="preview-mix-aside"></div>
431
+ <div class="preview-mix-content"></div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ <span class="layout-option__label">{{ option.label }}</span>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- 主题色 -->
441
+ <div class="settings-section">
442
+ <div class="settings-title">主题色</div>
443
+ <div class="settings-color-options">
444
+ <div
445
+ v-for="color in colorOptions"
446
+ :key="color.value"
447
+ :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
448
+ :style="{ backgroundColor: color.value }"
449
+ :title="color.label"
450
+ @click="handleColorChange(color.value)"
451
+ >
452
+ <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- 功能开关 -->
458
+ <div class="settings-section">
459
+ <div class="settings-title">功能设置</div>
460
+ <div class="settings-switch-list">
461
+ <div class="settings-switch-item">
462
+ <span>灰色模式</span>
463
+ <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
464
+ <span class="switch-core"></span>
465
+ </div>
466
+ </div>
467
+ <div class="settings-switch-item">
468
+ <span>暗黑模式</span>
469
+ <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
470
+ <span class="switch-core"></span>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </Drawer>
477
+ </div>
478
+ </template>
479
+
480
+ <style lang="scss" scoped>
481
+ .mix-top-menu {
482
+ width: 100%;
483
+ height: 100%;
484
+ display: flex;
485
+ align-items: center;
486
+ padding: 0 20px;
487
+
488
+ &__logo {
489
+ display: flex;
490
+ align-items: center;
491
+ gap: 10px;
492
+ margin-right: 20px;
493
+ }
494
+
495
+ &__logo-img {
496
+ width: 32px;
497
+ height: 32px;
498
+ }
499
+
500
+ &__logo-text {
501
+ font-size: 16px;
502
+ font-weight: 600;
503
+ color: var(--color-primary);
504
+ }
505
+
506
+ &__menu {
507
+ flex: 1;
508
+ border-bottom: none;
509
+ height: 100%;
510
+ display: flex;
511
+ align-items: center;
512
+
513
+ // 深度选择器：确保菜单项垂直居中
514
+ :deep(.xto-menu--horizontal) {
515
+ height: 100%;
516
+ display: flex;
517
+ align-items: center;
518
+ }
519
+
520
+ :deep(.xto-menu-item) {
521
+ height: 100%;
522
+ display: flex;
523
+ align-items: center;
524
+ }
525
+
526
+ :deep(.xto-sub-menu) {
527
+ height: 100%;
528
+ display: flex;
529
+ align-items: center;
530
+ }
531
+ }
532
+
533
+ &__menu-content {
534
+ display: inline-flex;
535
+ align-items: center;
536
+ line-height: 1;
537
+ }
538
+
539
+ &__menu-text {
540
+ flex: 1;
541
+ line-height: 1;
542
+ }
543
+
544
+ &__menu-icon {
545
+ display: inline-flex;
546
+ align-items: center;
547
+ justify-content: center;
548
+ width: 16px;
549
+ height: 16px;
550
+ margin-right: 8px;
551
+ flex-shrink: 0;
552
+ }
553
+
554
+ &__menu-char {
555
+ display: inline-flex;
556
+ align-items: center;
557
+ justify-content: center;
558
+ width: 16px;
559
+ height: 16px;
560
+ font-size: 12px;
561
+ font-weight: 600;
562
+ color: var(--color-primary);
563
+ background-color: var(--color-primary-light-8);
564
+ border-radius: 4px;
565
+ }
566
+
567
+ // 右侧操作区域
568
+ &__actions {
569
+ display: flex;
570
+ align-items: center;
571
+ gap: 8px;
572
+ }
573
+
574
+ &__action {
575
+ width: 32px;
576
+ height: 32px;
577
+ display: flex;
578
+ align-items: center;
579
+ justify-content: center;
580
+ cursor: pointer;
581
+ border-radius: var(--border-radius-base);
582
+ color: var(--color-text-regular);
583
+ transition: all 0.2s;
584
+
585
+ &:hover {
586
+ background-color: var(--color-fill);
587
+ color: var(--color-primary);
588
+ }
589
+ }
590
+
591
+ // 用户头像
592
+ &__user {
593
+ position: relative;
594
+ margin-left: 8px;
595
+
596
+ &-trigger {
597
+ display: flex;
598
+ align-items: center;
599
+ gap: 8px;
600
+ cursor: pointer;
601
+ padding: 4px 8px;
602
+ border-radius: var(--border-radius-base);
603
+ transition: background-color 0.2s;
604
+
605
+ &:hover {
606
+ background-color: var(--color-fill);
607
+ }
608
+ }
609
+
610
+ &-name {
611
+ font-size: 14px;
612
+ color: var(--color-text-primary);
613
+ max-width: 100px;
614
+ overflow: hidden;
615
+ text-overflow: ellipsis;
616
+ white-space: nowrap;
617
+ }
618
+
619
+ &-arrow {
620
+ font-size: 10px;
621
+ color: var(--color-text-secondary);
622
+ transition: transform 0.2s;
623
+
624
+ &.is-active {
625
+ transform: rotate(180deg);
626
+ }
627
+ }
628
+ }
629
+
630
+ &__avatar {
631
+ width: 32px;
632
+ height: 32px;
633
+ border-radius: 50%;
634
+ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
635
+ display: flex;
636
+ align-items: center;
637
+ justify-content: center;
638
+ color: #fff;
639
+ font-size: 14px;
640
+ font-weight: 500;
641
+ }
642
+
643
+ // 下拉菜单
644
+ &__dropdown {
645
+ position: absolute;
646
+ top: calc(100% + 8px);
647
+ right: 0;
648
+ min-width: 200px;
649
+ background-color: var(--bg-color);
650
+ border-radius: var(--border-radius-base);
651
+ box-shadow: var(--box-shadow);
652
+ overflow: hidden;
653
+ z-index: 100;
654
+
655
+ &-header {
656
+ display: flex;
657
+ align-items: center;
658
+ gap: 12px;
659
+ padding: 16px;
660
+ }
661
+
662
+ &-avatar {
663
+ width: 40px;
664
+ height: 40px;
665
+ border-radius: 50%;
666
+ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
667
+ display: flex;
668
+ align-items: center;
669
+ justify-content: center;
670
+ color: #fff;
671
+ font-size: 16px;
672
+ font-weight: 500;
673
+ }
674
+
675
+ &-info {
676
+ flex: 1;
677
+ }
678
+
679
+ &-name {
680
+ font-size: 14px;
681
+ font-weight: 500;
682
+ color: var(--color-text-primary);
683
+ }
684
+
685
+ &-role {
686
+ font-size: 12px;
687
+ color: var(--color-text-secondary);
688
+ margin-top: 2px;
689
+ }
690
+
691
+ &-divider {
692
+ height: 1px;
693
+ background-color: var(--color-border-lighter);
694
+ }
695
+
696
+ &-menu {
697
+ padding: 8px 0;
698
+ }
699
+
700
+ &-item {
701
+ display: flex;
702
+ align-items: center;
703
+ gap: 10px;
704
+ padding: 10px 16px;
705
+ cursor: pointer;
706
+ font-size: 14px;
707
+ color: var(--color-text-regular);
708
+ transition: all 0.2s;
709
+
710
+ &:hover {
711
+ background-color: var(--color-fill);
712
+ color: var(--color-text-primary);
713
+ }
714
+
715
+ &--danger {
716
+ color: var(--color-danger);
717
+
718
+ &:hover {
719
+ background-color: var(--color-danger-light);
720
+ color: var(--color-danger);
721
+ }
722
+ }
723
+ }
724
+ }
725
+ }
726
+
727
+ // 设置抽屉内容
728
+ .settings-drawer {
729
+ .settings-section {
730
+ margin-bottom: 24px;
731
+ }
732
+
733
+ .settings-title {
734
+ font-size: 14px;
735
+ font-weight: 500;
736
+ color: var(--color-text-primary);
737
+ margin-bottom: 12px;
738
+ }
739
+
740
+ .settings-layout-options {
741
+ display: flex;
742
+ gap: 12px;
743
+ }
744
+
745
+ .layout-option {
746
+ flex: 1;
747
+ display: flex;
748
+ flex-direction: column;
749
+ align-items: center;
750
+ gap: 8px;
751
+ padding: 12px;
752
+ border: 1px solid var(--color-border);
753
+ border-radius: var(--border-radius-base);
754
+ cursor: pointer;
755
+ transition: all 0.2s;
756
+
757
+ &:hover {
758
+ border-color: var(--color-primary-light-5);
759
+ }
760
+
761
+ &.is-active {
762
+ border-color: var(--color-primary);
763
+ background-color: var(--color-primary-light-9);
764
+ }
765
+
766
+ &__preview {
767
+ width: 48px;
768
+ height: 36px;
769
+ border: 1px solid var(--color-border-light);
770
+ border-radius: 2px;
771
+ overflow: hidden;
772
+ }
773
+
774
+ &__label {
775
+ font-size: 12px;
776
+ color: var(--color-text-regular);
777
+ }
778
+ }
779
+
780
+ // 布局预览样式
781
+ .layout-preview-sidebar {
782
+ display: flex;
783
+ height: 100%;
784
+
785
+ .preview-aside {
786
+ width: 25%;
787
+ height: 100%;
788
+ background-color: var(--color-primary-light-7);
789
+ }
790
+
791
+ .preview-main {
792
+ flex: 1;
793
+ display: flex;
794
+ flex-direction: column;
795
+
796
+ .preview-header {
797
+ height: 20%;
798
+ background-color: var(--color-border-light);
799
+ }
800
+
801
+ .preview-content {
802
+ flex: 1;
803
+ background-color: var(--bg-color-page);
804
+ }
805
+ }
806
+ }
807
+
808
+ .layout-preview-top {
809
+ display: flex;
810
+ flex-direction: column;
811
+ height: 100%;
812
+
813
+ .preview-header-full {
814
+ height: 25%;
815
+ background-color: var(--color-primary-light-7);
816
+ }
817
+
818
+ .preview-content-full {
819
+ flex: 1;
820
+ background-color: var(--bg-color-page);
821
+ }
822
+ }
823
+
824
+ .layout-preview-mix {
825
+ display: flex;
826
+ flex-direction: column;
827
+ height: 100%;
828
+
829
+ .preview-header-mix {
830
+ height: 25%;
831
+ background-color: var(--color-primary-light-7);
832
+ display: flex;
833
+
834
+ .preview-mix-left {
835
+ width: 30%;
836
+ background-color: var(--color-primary);
837
+ }
838
+ }
839
+
840
+ .preview-mix-body {
841
+ flex: 1;
842
+ display: flex;
843
+
844
+ .preview-mix-aside {
845
+ width: 25%;
846
+ background-color: var(--color-primary-light-8);
847
+ }
848
+
849
+ .preview-mix-content {
850
+ flex: 1;
851
+ background-color: var(--bg-color-page);
852
+ }
853
+ }
854
+ }
855
+
856
+ .settings-color-options {
857
+ display: flex;
858
+ gap: 12px;
859
+ }
860
+
861
+ .color-option {
862
+ width: 24px;
863
+ height: 24px;
864
+ border-radius: 4px;
865
+ cursor: pointer;
866
+ display: flex;
867
+ align-items: center;
868
+ justify-content: center;
869
+ transition: transform 0.2s;
870
+
871
+ &:hover {
872
+ transform: scale(1.1);
873
+ }
874
+
875
+ &.is-active {
876
+ box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
877
+ }
878
+ }
879
+
880
+ .settings-switch-list {
881
+ display: flex;
882
+ flex-direction: column;
883
+ gap: 12px;
884
+ }
885
+
886
+ .settings-switch-item {
887
+ display: flex;
888
+ align-items: center;
889
+ justify-content: space-between;
890
+
891
+ span {
892
+ font-size: 14px;
893
+ color: var(--color-text-regular);
894
+ }
895
+ }
896
+
897
+ .switch-wrapper {
898
+ width: 44px;
899
+ height: 22px;
900
+ display: flex;
901
+ align-items: center;
902
+ cursor: pointer;
903
+
904
+ .switch-core {
905
+ width: 100%;
906
+ height: 100%;
907
+ border-radius: 11px;
908
+ background-color: var(--color-border);
909
+ position: relative;
910
+ transition: background-color 0.2s;
911
+
912
+ &::after {
913
+ content: '';
914
+ position: absolute;
915
+ top: 2px;
916
+ left: 2px;
917
+ width: 18px;
918
+ height: 18px;
919
+ background-color: #fff;
920
+ border-radius: 50%;
921
+ transition: left 0.2s;
922
+ }
923
+ }
924
+
925
+ &.is-checked {
926
+ .switch-core {
927
+ background-color: var(--color-primary);
928
+
929
+ &::after {
930
+ left: 24px;
931
+ }
932
+ }
933
+ }
934
+ }
935
+ }
936
+
937
+ // 下拉动画
938
+ .dropdown-enter-active,
939
+ .dropdown-leave-active {
940
+ transition: all 0.2s ease;
941
+ }
942
+
943
+ .dropdown-enter-from,
944
+ .dropdown-leave-to {
945
+ opacity: 0;
946
+ transform: translateY(-10px);
947
+ }
927
948
  </style>