1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <template>
| <div>
| <SectionTitle :title="$t('setting.basics.title')" class="mt-10" />
| <SettingItem
| v-for="config in basicSettingsConfig"
| :key="config.key"
| :config="config"
| :model-value="getSettingValue(config.key)"
| @change="handleSettingChange(config.handler, $event)"
| />
| </div>
| </template>
|
| <script setup>
| import SectionTitle from './SectionTitle.vue'
|
| import { useSettingStore } from '@/store/modules/setting'
| import { useSettingsConfig } from '../composables/useSettingsConfig'
| import { useSettingsHandlers } from '../composables/useSettingsHandlers'
| import { storeToRefs } from 'pinia'
| const settingStore = useSettingStore()
| const { basicSettingsConfig } = useSettingsConfig()
| const { basicHandlers } = useSettingsHandlers()
| const {
| uniqueOpened,
| showMenuButton,
| showFastEnter,
| showRefreshButton,
| showCrumbs,
| showWorkTab,
| showLanguage,
| showNprogress,
| colorWeak,
| watermarkVisible,
| menuOpenWidth,
| tabStyle,
| pageTransition,
| customRadius
| } = storeToRefs(settingStore)
| const settingValueMap = {
| uniqueOpened,
| showMenuButton,
| showFastEnter,
| showRefreshButton,
| showCrumbs,
| showWorkTab,
| showLanguage,
| showNprogress,
| colorWeak,
| watermarkVisible,
| menuOpenWidth,
| tabStyle,
| pageTransition,
| customRadius
| }
| const getSettingValue = (key) => {
| const settingRef = settingValueMap[key]
| return settingRef?.value ?? null
| }
| const handleSettingChange = (handlerName, value) => {
| const handler = basicHandlers[handlerName]
| if (typeof handler === 'function') {
| handler(value)
| } else {
| console.warn(`Handler "${handlerName}" not found in basicHandlers`)
| }
| }
| </script>
|
|
