wui-components-v2 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/system-settings.vue +131 -0
- package/index.ts +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { useManualTheme } from '../composables/useManualTheme'
|
|
3
|
+
import type { LocaleOption, ThemeColorOption } from '../composables/useManualTheme'
|
|
4
|
+
|
|
5
|
+
defineOptions({
|
|
6
|
+
name: 'SystemSettings',
|
|
7
|
+
})
|
|
8
|
+
const {
|
|
9
|
+
theme,
|
|
10
|
+
toggleTheme,
|
|
11
|
+
currentThemeColor,
|
|
12
|
+
showThemeColorSheet,
|
|
13
|
+
themeColorOptions,
|
|
14
|
+
openThemeColorPicker,
|
|
15
|
+
closeThemeColorPicker,
|
|
16
|
+
selectThemeColor,
|
|
17
|
+
LocaleOptions,
|
|
18
|
+
primary,
|
|
19
|
+
currentLocale,
|
|
20
|
+
showLanguageSheet,
|
|
21
|
+
openLanguagePicker,
|
|
22
|
+
closeLanguagePicker,
|
|
23
|
+
selectLanguage,
|
|
24
|
+
} = useManualTheme()
|
|
25
|
+
console.log(primary, 'mmmmm')
|
|
26
|
+
const isDark = computed({
|
|
27
|
+
get() {
|
|
28
|
+
return theme.value === 'dark'
|
|
29
|
+
},
|
|
30
|
+
set() {
|
|
31
|
+
toggleTheme()
|
|
32
|
+
},
|
|
33
|
+
})
|
|
34
|
+
// 处理主题色选择
|
|
35
|
+
function handleThemeColorSelect(option: ThemeColorOption) {
|
|
36
|
+
selectThemeColor(option)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 处理语言选择
|
|
40
|
+
function handleLanguageSelect(option: LocaleOption) {
|
|
41
|
+
selectLanguage(option)
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<view>
|
|
47
|
+
<demo-block title="系统设置" transparent>
|
|
48
|
+
<wd-cell-group border custom-class="rounded-2! overflow-hidden">
|
|
49
|
+
<wd-cell title="暗黑模式">
|
|
50
|
+
<wd-switch v-model="isDark" size="18px" />
|
|
51
|
+
</wd-cell>
|
|
52
|
+
<wd-cell title="选择主题色" is-link @click="openThemeColorPicker">
|
|
53
|
+
<view class="flex items-center justify-end gap-2">
|
|
54
|
+
<view
|
|
55
|
+
class="h-4 w-4 rounded-full"
|
|
56
|
+
:style="{ backgroundColor: currentThemeColor.primary }"
|
|
57
|
+
/>
|
|
58
|
+
<text>{{ currentThemeColor.name }}</text>
|
|
59
|
+
</view>
|
|
60
|
+
</wd-cell>
|
|
61
|
+
<wd-cell title="选择语言" is-link @click="openLanguagePicker">
|
|
62
|
+
<view class="flex items-center justify-end gap-2">
|
|
63
|
+
<text>{{ currentLocale.name }}</text>
|
|
64
|
+
</view>
|
|
65
|
+
</wd-cell>
|
|
66
|
+
</wd-cell-group>
|
|
67
|
+
</demo-block>
|
|
68
|
+
<!-- 主题色选择 ActionSheet -->
|
|
69
|
+
<wd-action-sheet
|
|
70
|
+
v-model="showThemeColorSheet"
|
|
71
|
+
title="选择主题色"
|
|
72
|
+
:close-on-click-action="true"
|
|
73
|
+
@cancel="closeThemeColorPicker"
|
|
74
|
+
>
|
|
75
|
+
<view class="px-4 pb-4">
|
|
76
|
+
<view
|
|
77
|
+
v-for="option in themeColorOptions"
|
|
78
|
+
:key="option.value"
|
|
79
|
+
class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
|
|
80
|
+
@click="handleThemeColorSelect(option)"
|
|
81
|
+
>
|
|
82
|
+
<view class="flex items-center gap-3">
|
|
83
|
+
<view
|
|
84
|
+
class="h-6 w-6 border-2 border-gray-200 rounded-full dark:border-gray-600"
|
|
85
|
+
:style="{ backgroundColor: option.primary }"
|
|
86
|
+
/>
|
|
87
|
+
<text class="text-4 text-gray-800 dark:text-gray-200">
|
|
88
|
+
{{ option.name }}
|
|
89
|
+
</text>
|
|
90
|
+
</view>
|
|
91
|
+
<wd-icon
|
|
92
|
+
v-if="currentThemeColor.value === option.value"
|
|
93
|
+
name="check"
|
|
94
|
+
:color="option.primary"
|
|
95
|
+
size="20px"
|
|
96
|
+
/>
|
|
97
|
+
</view>
|
|
98
|
+
</view>
|
|
99
|
+
<wd-gap :height="50" />
|
|
100
|
+
</wd-action-sheet>
|
|
101
|
+
<!-- 语言选择选择 ActionSheet -->
|
|
102
|
+
<wd-action-sheet
|
|
103
|
+
v-model="showLanguageSheet"
|
|
104
|
+
title="选择语言"
|
|
105
|
+
:close-on-click-action="true"
|
|
106
|
+
@cancel="closeLanguagePicker"
|
|
107
|
+
>
|
|
108
|
+
<view class="px-4 pb-4">
|
|
109
|
+
<view
|
|
110
|
+
v-for="option in LocaleOptions"
|
|
111
|
+
:key="option.value"
|
|
112
|
+
class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
|
|
113
|
+
@click="handleLanguageSelect(option)"
|
|
114
|
+
>
|
|
115
|
+
<view class="flex items-center gap-3">
|
|
116
|
+
<text class="text-4 text-gray-800 dark:text-gray-200">
|
|
117
|
+
{{ option.name }}
|
|
118
|
+
</text>
|
|
119
|
+
</view>
|
|
120
|
+
<wd-icon
|
|
121
|
+
v-if="currentLocale.value === option.value"
|
|
122
|
+
name="check"
|
|
123
|
+
:color="primary"
|
|
124
|
+
size="20px"
|
|
125
|
+
/>
|
|
126
|
+
</view>
|
|
127
|
+
</view>
|
|
128
|
+
<wd-gap :height="50" />
|
|
129
|
+
</wd-action-sheet>
|
|
130
|
+
</view>
|
|
131
|
+
</template>
|
package/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { App } from 'vue'
|
|
2
|
-
|
|
2
|
+
import SystemSettings from './components/system-settings.vue'
|
|
3
3
|
// import { useLocale } from './composables/useLocale'
|
|
4
4
|
// import { useManualTheme } from './composables/useManualTheme'
|
|
5
5
|
// import request from './api'
|
|
@@ -7,6 +7,7 @@ import type { App } from 'vue'
|
|
|
7
7
|
import test from './test.vue'
|
|
8
8
|
|
|
9
9
|
const coms: any[] = [
|
|
10
|
+
SystemSettings,
|
|
10
11
|
test,
|
|
11
12
|
]
|
|
12
13
|
// 批量组件注册
|