@hlw-uni-mp/use 1.1.5 → 1.1.7
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/dist/index.d.mts +29 -82
- package/dist/index.d.ts +29 -82
- package/dist/index.js +29 -72
- package/dist/index.mjs +31 -74
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { App, Ref } from 'vue';
|
|
1
3
|
import * as pinia from 'pinia';
|
|
2
|
-
import { App, Ref, ComputedRef } from 'vue';
|
|
3
4
|
|
|
4
5
|
declare module "pinia" {
|
|
5
6
|
interface DefineStoreOptionsBase<S, Store> {
|
|
@@ -7,114 +8,65 @@ declare module "pinia" {
|
|
|
7
8
|
unistorage?: boolean | object;
|
|
8
9
|
}
|
|
9
10
|
}
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* 外观模式型
|
|
13
|
-
*/
|
|
11
|
+
/** 外观模式 */
|
|
14
12
|
type ThemeMode = "light" | "dark" | "system";
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* 字体大小型
|
|
18
|
-
*/
|
|
13
|
+
/** 字体大小 */
|
|
19
14
|
type FontSize = "small" | "standard" | "large" | "extra-large";
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* 字体样式型
|
|
23
|
-
*/
|
|
15
|
+
/** 字体样式 */
|
|
24
16
|
type FontFamily = "system" | "sans" | "serif" | "kaiti";
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* 主题色彩项
|
|
28
|
-
*/
|
|
17
|
+
/** 主题色彩项 */
|
|
29
18
|
interface ThemeColor {
|
|
30
19
|
name: string;
|
|
31
20
|
value: string;
|
|
32
21
|
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* 主题状态表
|
|
36
|
-
*/
|
|
22
|
+
/** 主题状态表 */
|
|
37
23
|
interface ThemeState {
|
|
38
24
|
mode: ThemeMode;
|
|
39
25
|
color: string;
|
|
40
26
|
fontSize: FontSize;
|
|
41
27
|
fontFamily: FontFamily;
|
|
42
28
|
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* 初始配置项
|
|
46
|
-
*/
|
|
29
|
+
/** 初始配置项 */
|
|
47
30
|
interface InitThemeOptions {
|
|
48
31
|
sync?: boolean;
|
|
49
32
|
defaultTheme?: Partial<ThemeState>;
|
|
50
33
|
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* 字体大小项
|
|
54
|
-
*/
|
|
34
|
+
/** 字体大小预设项 */
|
|
55
35
|
interface FontSizePreset {
|
|
56
36
|
id: string;
|
|
57
37
|
name: string;
|
|
58
38
|
class: string;
|
|
59
39
|
}
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* 字体样式项
|
|
63
|
-
*/
|
|
40
|
+
/** 字体样式预设项 */
|
|
64
41
|
interface FontFamilyPreset {
|
|
65
42
|
id: string;
|
|
66
43
|
name: string;
|
|
67
44
|
class: string;
|
|
68
45
|
}
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* 字体大小表
|
|
72
|
-
*/
|
|
73
|
-
declare const fontSizePresets: FontSizePreset[];
|
|
74
|
-
/**
|
|
75
|
-
* 字体样式表
|
|
76
|
-
*/
|
|
77
|
-
declare const fontFamilyPresets: FontFamilyPreset[];
|
|
78
|
-
/**
|
|
79
|
-
* 主题状态库
|
|
80
|
-
*/
|
|
81
|
-
declare const useThemeStore: pinia.StoreDefinition<"theme", {
|
|
82
|
-
mode: string;
|
|
83
|
-
color: string;
|
|
84
|
-
fontSize: string;
|
|
85
|
-
fontFamily: string;
|
|
86
|
-
}, {}, {}>;
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* 默认主题配置
|
|
90
|
-
*/
|
|
46
|
+
/** 默认主题配置 */
|
|
91
47
|
declare const DEFAULT_THEME: ThemeState;
|
|
92
|
-
/**
|
|
93
|
-
* 预设色彩库
|
|
94
|
-
*/
|
|
48
|
+
/** 预设色彩库 */
|
|
95
49
|
declare const THEME_COLORS: ThemeColor[];
|
|
96
|
-
/**
|
|
97
|
-
|
|
98
|
-
*/
|
|
50
|
+
/** 字体大小预设表 */
|
|
51
|
+
declare const fontSizePresets: FontSizePreset[];
|
|
52
|
+
/** 字体样式预设表 */
|
|
53
|
+
declare const fontFamilyPresets: FontFamilyPreset[];
|
|
54
|
+
/** 主题状态 Store */
|
|
55
|
+
declare const useThemeStore: pinia.StoreDefinition<"theme", ThemeState, {}, {}>;
|
|
56
|
+
/** 获取存储配置 */
|
|
99
57
|
declare function getTheme(): ThemeState;
|
|
100
|
-
/**
|
|
101
|
-
* 应用主题状态
|
|
102
|
-
*/
|
|
58
|
+
/** 应用主题状态 */
|
|
103
59
|
declare function applyTheme(themeState: Partial<ThemeState>): void;
|
|
104
|
-
/**
|
|
105
|
-
* 注册主题器
|
|
106
|
-
*/
|
|
60
|
+
/** 初始化主题系统 */
|
|
107
61
|
declare function initTheme(app: App, options?: InitThemeOptions): void;
|
|
108
|
-
/**
|
|
109
|
-
* 主题组合钩子
|
|
110
|
-
*/
|
|
62
|
+
/** 主题组合式函数 */
|
|
111
63
|
declare function useTheme(): {
|
|
112
|
-
mode: Ref<ThemeMode, ThemeMode>;
|
|
113
|
-
color: Ref<string, string>;
|
|
114
|
-
fontSize: Ref<
|
|
115
|
-
fontSizeClass: ComputedRef<string>;
|
|
116
|
-
fontFamily: Ref<
|
|
117
|
-
fontFamilyClass: ComputedRef<string>;
|
|
64
|
+
mode: vue.Ref<ThemeMode, ThemeMode>;
|
|
65
|
+
color: vue.Ref<string, string>;
|
|
66
|
+
fontSize: vue.Ref<FontSize, FontSize>;
|
|
67
|
+
fontSizeClass: vue.ComputedRef<string>;
|
|
68
|
+
fontFamily: vue.Ref<FontFamily, FontFamily>;
|
|
69
|
+
fontFamilyClass: vue.ComputedRef<string>;
|
|
118
70
|
colors: ThemeColor[];
|
|
119
71
|
fontSizePresets: FontSizePreset[];
|
|
120
72
|
fontFamilyPresets: FontFamilyPreset[];
|
|
@@ -126,12 +78,7 @@ declare function useTheme(): {
|
|
|
126
78
|
applyTheme: typeof applyTheme;
|
|
127
79
|
getTheme: typeof getTheme;
|
|
128
80
|
initTheme: typeof initTheme;
|
|
129
|
-
store: pinia.Store<"theme", {
|
|
130
|
-
mode: string;
|
|
131
|
-
color: string;
|
|
132
|
-
fontSize: string;
|
|
133
|
-
fontFamily: string;
|
|
134
|
-
}, {}, {}>;
|
|
81
|
+
store: pinia.Store<"theme", ThemeState, {}, {}>;
|
|
135
82
|
};
|
|
136
83
|
|
|
137
84
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { App, Ref } from 'vue';
|
|
1
3
|
import * as pinia from 'pinia';
|
|
2
|
-
import { App, Ref, ComputedRef } from 'vue';
|
|
3
4
|
|
|
4
5
|
declare module "pinia" {
|
|
5
6
|
interface DefineStoreOptionsBase<S, Store> {
|
|
@@ -7,114 +8,65 @@ declare module "pinia" {
|
|
|
7
8
|
unistorage?: boolean | object;
|
|
8
9
|
}
|
|
9
10
|
}
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* 外观模式型
|
|
13
|
-
*/
|
|
11
|
+
/** 外观模式 */
|
|
14
12
|
type ThemeMode = "light" | "dark" | "system";
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* 字体大小型
|
|
18
|
-
*/
|
|
13
|
+
/** 字体大小 */
|
|
19
14
|
type FontSize = "small" | "standard" | "large" | "extra-large";
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* 字体样式型
|
|
23
|
-
*/
|
|
15
|
+
/** 字体样式 */
|
|
24
16
|
type FontFamily = "system" | "sans" | "serif" | "kaiti";
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* 主题色彩项
|
|
28
|
-
*/
|
|
17
|
+
/** 主题色彩项 */
|
|
29
18
|
interface ThemeColor {
|
|
30
19
|
name: string;
|
|
31
20
|
value: string;
|
|
32
21
|
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* 主题状态表
|
|
36
|
-
*/
|
|
22
|
+
/** 主题状态表 */
|
|
37
23
|
interface ThemeState {
|
|
38
24
|
mode: ThemeMode;
|
|
39
25
|
color: string;
|
|
40
26
|
fontSize: FontSize;
|
|
41
27
|
fontFamily: FontFamily;
|
|
42
28
|
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* 初始配置项
|
|
46
|
-
*/
|
|
29
|
+
/** 初始配置项 */
|
|
47
30
|
interface InitThemeOptions {
|
|
48
31
|
sync?: boolean;
|
|
49
32
|
defaultTheme?: Partial<ThemeState>;
|
|
50
33
|
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* 字体大小项
|
|
54
|
-
*/
|
|
34
|
+
/** 字体大小预设项 */
|
|
55
35
|
interface FontSizePreset {
|
|
56
36
|
id: string;
|
|
57
37
|
name: string;
|
|
58
38
|
class: string;
|
|
59
39
|
}
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* 字体样式项
|
|
63
|
-
*/
|
|
40
|
+
/** 字体样式预设项 */
|
|
64
41
|
interface FontFamilyPreset {
|
|
65
42
|
id: string;
|
|
66
43
|
name: string;
|
|
67
44
|
class: string;
|
|
68
45
|
}
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* 字体大小表
|
|
72
|
-
*/
|
|
73
|
-
declare const fontSizePresets: FontSizePreset[];
|
|
74
|
-
/**
|
|
75
|
-
* 字体样式表
|
|
76
|
-
*/
|
|
77
|
-
declare const fontFamilyPresets: FontFamilyPreset[];
|
|
78
|
-
/**
|
|
79
|
-
* 主题状态库
|
|
80
|
-
*/
|
|
81
|
-
declare const useThemeStore: pinia.StoreDefinition<"theme", {
|
|
82
|
-
mode: string;
|
|
83
|
-
color: string;
|
|
84
|
-
fontSize: string;
|
|
85
|
-
fontFamily: string;
|
|
86
|
-
}, {}, {}>;
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* 默认主题配置
|
|
90
|
-
*/
|
|
46
|
+
/** 默认主题配置 */
|
|
91
47
|
declare const DEFAULT_THEME: ThemeState;
|
|
92
|
-
/**
|
|
93
|
-
* 预设色彩库
|
|
94
|
-
*/
|
|
48
|
+
/** 预设色彩库 */
|
|
95
49
|
declare const THEME_COLORS: ThemeColor[];
|
|
96
|
-
/**
|
|
97
|
-
|
|
98
|
-
*/
|
|
50
|
+
/** 字体大小预设表 */
|
|
51
|
+
declare const fontSizePresets: FontSizePreset[];
|
|
52
|
+
/** 字体样式预设表 */
|
|
53
|
+
declare const fontFamilyPresets: FontFamilyPreset[];
|
|
54
|
+
/** 主题状态 Store */
|
|
55
|
+
declare const useThemeStore: pinia.StoreDefinition<"theme", ThemeState, {}, {}>;
|
|
56
|
+
/** 获取存储配置 */
|
|
99
57
|
declare function getTheme(): ThemeState;
|
|
100
|
-
/**
|
|
101
|
-
* 应用主题状态
|
|
102
|
-
*/
|
|
58
|
+
/** 应用主题状态 */
|
|
103
59
|
declare function applyTheme(themeState: Partial<ThemeState>): void;
|
|
104
|
-
/**
|
|
105
|
-
* 注册主题器
|
|
106
|
-
*/
|
|
60
|
+
/** 初始化主题系统 */
|
|
107
61
|
declare function initTheme(app: App, options?: InitThemeOptions): void;
|
|
108
|
-
/**
|
|
109
|
-
* 主题组合钩子
|
|
110
|
-
*/
|
|
62
|
+
/** 主题组合式函数 */
|
|
111
63
|
declare function useTheme(): {
|
|
112
|
-
mode: Ref<ThemeMode, ThemeMode>;
|
|
113
|
-
color: Ref<string, string>;
|
|
114
|
-
fontSize: Ref<
|
|
115
|
-
fontSizeClass: ComputedRef<string>;
|
|
116
|
-
fontFamily: Ref<
|
|
117
|
-
fontFamilyClass: ComputedRef<string>;
|
|
64
|
+
mode: vue.Ref<ThemeMode, ThemeMode>;
|
|
65
|
+
color: vue.Ref<string, string>;
|
|
66
|
+
fontSize: vue.Ref<FontSize, FontSize>;
|
|
67
|
+
fontSizeClass: vue.ComputedRef<string>;
|
|
68
|
+
fontFamily: vue.Ref<FontFamily, FontFamily>;
|
|
69
|
+
fontFamilyClass: vue.ComputedRef<string>;
|
|
118
70
|
colors: ThemeColor[];
|
|
119
71
|
fontSizePresets: FontSizePreset[];
|
|
120
72
|
fontFamilyPresets: FontFamilyPreset[];
|
|
@@ -126,12 +78,7 @@ declare function useTheme(): {
|
|
|
126
78
|
applyTheme: typeof applyTheme;
|
|
127
79
|
getTheme: typeof getTheme;
|
|
128
80
|
initTheme: typeof initTheme;
|
|
129
|
-
store: pinia.Store<"theme", {
|
|
130
|
-
mode: string;
|
|
131
|
-
color: string;
|
|
132
|
-
fontSize: string;
|
|
133
|
-
fontFamily: string;
|
|
134
|
-
}, {}, {}>;
|
|
81
|
+
store: pinia.Store<"theme", ThemeState, {}, {}>;
|
|
135
82
|
};
|
|
136
83
|
|
|
137
84
|
/**
|
package/dist/index.js
CHANGED
|
@@ -35,69 +35,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
35
35
|
|
|
36
36
|
// src/theme/index.ts
|
|
37
37
|
var import_vue = require("vue");
|
|
38
|
-
|
|
39
|
-
// src/theme/store.ts
|
|
40
|
-
var import_pinia2 = require("pinia");
|
|
41
|
-
|
|
42
|
-
// src/theme/types.d.ts
|
|
43
38
|
var import_pinia = require("pinia");
|
|
44
|
-
|
|
45
|
-
// src/theme/store.ts
|
|
46
|
-
var fontSizePresets = [
|
|
47
|
-
{
|
|
48
|
-
id: "small",
|
|
49
|
-
name: "\u8F83\u5C0F",
|
|
50
|
-
class: "font-size-small"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
id: "standard",
|
|
54
|
-
name: "\u6807\u51C6",
|
|
55
|
-
class: "font-size-standard"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
id: "large",
|
|
59
|
-
name: "\u8F83\u5927",
|
|
60
|
-
class: "font-size-large"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
id: "extra-large",
|
|
64
|
-
name: "\u8D85\u5927",
|
|
65
|
-
class: "font-size-extra-large"
|
|
66
|
-
}
|
|
67
|
-
];
|
|
68
|
-
var fontFamilyPresets = [
|
|
69
|
-
{
|
|
70
|
-
id: "system",
|
|
71
|
-
name: "\u7CFB\u7EDF\u9ED8\u8BA4",
|
|
72
|
-
class: "font-family-system"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
id: "sans",
|
|
76
|
-
name: "\u73B0\u4EE3\u9ED1\u4F53",
|
|
77
|
-
class: "font-family-sans"
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
id: "serif",
|
|
81
|
-
name: "\u7ECF\u5178\u5B8B\u4F53",
|
|
82
|
-
class: "font-family-serif"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
id: "kaiti",
|
|
86
|
-
name: "\u4F18\u96C5\u6977\u4F53",
|
|
87
|
-
class: "font-family-kaiti"
|
|
88
|
-
}
|
|
89
|
-
];
|
|
90
|
-
var useThemeStore = (0, import_pinia2.defineStore)("theme", {
|
|
91
|
-
state: () => ({
|
|
92
|
-
mode: "light",
|
|
93
|
-
color: "#08c060",
|
|
94
|
-
fontSize: "standard",
|
|
95
|
-
fontFamily: "system"
|
|
96
|
-
}),
|
|
97
|
-
unistorage: true
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
// src/theme/index.ts
|
|
101
39
|
var DEFAULT_THEME = {
|
|
102
40
|
mode: "light",
|
|
103
41
|
color: "#08c060",
|
|
@@ -115,6 +53,27 @@ var THEME_COLORS = [
|
|
|
115
53
|
{ name: "\u7ECF\u5178\u9ED1", value: "#334155" },
|
|
116
54
|
{ name: "\u8537\u8587\u7C89", value: "#ec4899" }
|
|
117
55
|
];
|
|
56
|
+
var fontSizePresets = [
|
|
57
|
+
{ id: "small", name: "\u8F83\u5C0F", class: "font-size-small" },
|
|
58
|
+
{ id: "standard", name: "\u6807\u51C6", class: "font-size-standard" },
|
|
59
|
+
{ id: "large", name: "\u8F83\u5927", class: "font-size-large" },
|
|
60
|
+
{ id: "extra-large", name: "\u8D85\u5927", class: "font-size-extra-large" }
|
|
61
|
+
];
|
|
62
|
+
var fontFamilyPresets = [
|
|
63
|
+
{ id: "system", name: "\u7CFB\u7EDF\u9ED8\u8BA4", class: "font-family-system" },
|
|
64
|
+
{ id: "sans", name: "\u73B0\u4EE3\u9ED1\u4F53", class: "font-family-sans" },
|
|
65
|
+
{ id: "serif", name: "\u7ECF\u5178\u5B8B\u4F53", class: "font-family-serif" },
|
|
66
|
+
{ id: "kaiti", name: "\u4F18\u96C5\u6977\u4F53", class: "font-family-kaiti" }
|
|
67
|
+
];
|
|
68
|
+
var useThemeStore = (0, import_pinia.defineStore)("theme", {
|
|
69
|
+
state: () => ({
|
|
70
|
+
mode: "light",
|
|
71
|
+
color: "#08c060",
|
|
72
|
+
fontSize: "standard",
|
|
73
|
+
fontFamily: "system"
|
|
74
|
+
}),
|
|
75
|
+
unistorage: true
|
|
76
|
+
});
|
|
118
77
|
function getTheme() {
|
|
119
78
|
const store = useThemeStore();
|
|
120
79
|
return {
|
|
@@ -126,8 +85,12 @@ function getTheme() {
|
|
|
126
85
|
}
|
|
127
86
|
function applyTheme(themeState) {
|
|
128
87
|
const store = useThemeStore();
|
|
129
|
-
if (themeState.mode)
|
|
130
|
-
|
|
88
|
+
if (themeState.mode) {
|
|
89
|
+
store.mode = themeState.mode;
|
|
90
|
+
}
|
|
91
|
+
if (themeState.color) {
|
|
92
|
+
store.color = themeState.color;
|
|
93
|
+
}
|
|
131
94
|
if (themeState.fontSize && ["small", "standard", "large", "extra-large"].includes(themeState.fontSize)) {
|
|
132
95
|
store.fontSize = themeState.fontSize;
|
|
133
96
|
}
|
|
@@ -145,10 +108,7 @@ function initTheme(app, options = {}) {
|
|
|
145
108
|
}
|
|
146
109
|
function useTheme() {
|
|
147
110
|
const store = useThemeStore();
|
|
148
|
-
const mode = (0,
|
|
149
|
-
const color = (0, import_vue.toRef)(store, "color");
|
|
150
|
-
const fontSize = (0, import_vue.toRef)(store, "fontSize");
|
|
151
|
-
const fontFamily = (0, import_vue.toRef)(store, "fontFamily");
|
|
111
|
+
const { mode, color, fontSize, fontFamily } = (0, import_pinia.storeToRefs)(store);
|
|
152
112
|
const fontSizeClass = (0, import_vue.computed)(() => {
|
|
153
113
|
return fontSizePresets.find((item) => item.id === store.fontSize)?.class || "font-size-standard";
|
|
154
114
|
});
|
|
@@ -172,10 +132,7 @@ function useTheme() {
|
|
|
172
132
|
}
|
|
173
133
|
}
|
|
174
134
|
function resetTheme() {
|
|
175
|
-
store
|
|
176
|
-
store.color = DEFAULT_THEME.color;
|
|
177
|
-
store.fontSize = DEFAULT_THEME.fontSize;
|
|
178
|
-
store.fontFamily = DEFAULT_THEME.fontFamily;
|
|
135
|
+
Object.assign(store, DEFAULT_THEME);
|
|
179
136
|
}
|
|
180
137
|
return {
|
|
181
138
|
mode,
|
package/dist/index.mjs
CHANGED
|
@@ -1,68 +1,6 @@
|
|
|
1
1
|
// src/theme/index.ts
|
|
2
|
-
import { computed
|
|
3
|
-
|
|
4
|
-
// src/theme/store.ts
|
|
5
|
-
import { defineStore } from "pinia";
|
|
6
|
-
|
|
7
|
-
// src/theme/types.d.ts
|
|
8
|
-
import "pinia";
|
|
9
|
-
|
|
10
|
-
// src/theme/store.ts
|
|
11
|
-
var fontSizePresets = [
|
|
12
|
-
{
|
|
13
|
-
id: "small",
|
|
14
|
-
name: "\u8F83\u5C0F",
|
|
15
|
-
class: "font-size-small"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
id: "standard",
|
|
19
|
-
name: "\u6807\u51C6",
|
|
20
|
-
class: "font-size-standard"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
id: "large",
|
|
24
|
-
name: "\u8F83\u5927",
|
|
25
|
-
class: "font-size-large"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: "extra-large",
|
|
29
|
-
name: "\u8D85\u5927",
|
|
30
|
-
class: "font-size-extra-large"
|
|
31
|
-
}
|
|
32
|
-
];
|
|
33
|
-
var fontFamilyPresets = [
|
|
34
|
-
{
|
|
35
|
-
id: "system",
|
|
36
|
-
name: "\u7CFB\u7EDF\u9ED8\u8BA4",
|
|
37
|
-
class: "font-family-system"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
id: "sans",
|
|
41
|
-
name: "\u73B0\u4EE3\u9ED1\u4F53",
|
|
42
|
-
class: "font-family-sans"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
id: "serif",
|
|
46
|
-
name: "\u7ECF\u5178\u5B8B\u4F53",
|
|
47
|
-
class: "font-family-serif"
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
id: "kaiti",
|
|
51
|
-
name: "\u4F18\u96C5\u6977\u4F53",
|
|
52
|
-
class: "font-family-kaiti"
|
|
53
|
-
}
|
|
54
|
-
];
|
|
55
|
-
var useThemeStore = defineStore("theme", {
|
|
56
|
-
state: () => ({
|
|
57
|
-
mode: "light",
|
|
58
|
-
color: "#08c060",
|
|
59
|
-
fontSize: "standard",
|
|
60
|
-
fontFamily: "system"
|
|
61
|
-
}),
|
|
62
|
-
unistorage: true
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
// src/theme/index.ts
|
|
2
|
+
import { computed } from "vue";
|
|
3
|
+
import { defineStore, storeToRefs } from "pinia";
|
|
66
4
|
var DEFAULT_THEME = {
|
|
67
5
|
mode: "light",
|
|
68
6
|
color: "#08c060",
|
|
@@ -80,6 +18,27 @@ var THEME_COLORS = [
|
|
|
80
18
|
{ name: "\u7ECF\u5178\u9ED1", value: "#334155" },
|
|
81
19
|
{ name: "\u8537\u8587\u7C89", value: "#ec4899" }
|
|
82
20
|
];
|
|
21
|
+
var fontSizePresets = [
|
|
22
|
+
{ id: "small", name: "\u8F83\u5C0F", class: "font-size-small" },
|
|
23
|
+
{ id: "standard", name: "\u6807\u51C6", class: "font-size-standard" },
|
|
24
|
+
{ id: "large", name: "\u8F83\u5927", class: "font-size-large" },
|
|
25
|
+
{ id: "extra-large", name: "\u8D85\u5927", class: "font-size-extra-large" }
|
|
26
|
+
];
|
|
27
|
+
var fontFamilyPresets = [
|
|
28
|
+
{ id: "system", name: "\u7CFB\u7EDF\u9ED8\u8BA4", class: "font-family-system" },
|
|
29
|
+
{ id: "sans", name: "\u73B0\u4EE3\u9ED1\u4F53", class: "font-family-sans" },
|
|
30
|
+
{ id: "serif", name: "\u7ECF\u5178\u5B8B\u4F53", class: "font-family-serif" },
|
|
31
|
+
{ id: "kaiti", name: "\u4F18\u96C5\u6977\u4F53", class: "font-family-kaiti" }
|
|
32
|
+
];
|
|
33
|
+
var useThemeStore = defineStore("theme", {
|
|
34
|
+
state: () => ({
|
|
35
|
+
mode: "light",
|
|
36
|
+
color: "#08c060",
|
|
37
|
+
fontSize: "standard",
|
|
38
|
+
fontFamily: "system"
|
|
39
|
+
}),
|
|
40
|
+
unistorage: true
|
|
41
|
+
});
|
|
83
42
|
function getTheme() {
|
|
84
43
|
const store = useThemeStore();
|
|
85
44
|
return {
|
|
@@ -91,8 +50,12 @@ function getTheme() {
|
|
|
91
50
|
}
|
|
92
51
|
function applyTheme(themeState) {
|
|
93
52
|
const store = useThemeStore();
|
|
94
|
-
if (themeState.mode)
|
|
95
|
-
|
|
53
|
+
if (themeState.mode) {
|
|
54
|
+
store.mode = themeState.mode;
|
|
55
|
+
}
|
|
56
|
+
if (themeState.color) {
|
|
57
|
+
store.color = themeState.color;
|
|
58
|
+
}
|
|
96
59
|
if (themeState.fontSize && ["small", "standard", "large", "extra-large"].includes(themeState.fontSize)) {
|
|
97
60
|
store.fontSize = themeState.fontSize;
|
|
98
61
|
}
|
|
@@ -110,10 +73,7 @@ function initTheme(app, options = {}) {
|
|
|
110
73
|
}
|
|
111
74
|
function useTheme() {
|
|
112
75
|
const store = useThemeStore();
|
|
113
|
-
const mode =
|
|
114
|
-
const color = toRef(store, "color");
|
|
115
|
-
const fontSize = toRef(store, "fontSize");
|
|
116
|
-
const fontFamily = toRef(store, "fontFamily");
|
|
76
|
+
const { mode, color, fontSize, fontFamily } = storeToRefs(store);
|
|
117
77
|
const fontSizeClass = computed(() => {
|
|
118
78
|
return fontSizePresets.find((item) => item.id === store.fontSize)?.class || "font-size-standard";
|
|
119
79
|
});
|
|
@@ -137,10 +97,7 @@ function useTheme() {
|
|
|
137
97
|
}
|
|
138
98
|
}
|
|
139
99
|
function resetTheme() {
|
|
140
|
-
store
|
|
141
|
-
store.color = DEFAULT_THEME.color;
|
|
142
|
-
store.fontSize = DEFAULT_THEME.fontSize;
|
|
143
|
-
store.fontFamily = DEFAULT_THEME.fontFamily;
|
|
100
|
+
Object.assign(store, DEFAULT_THEME);
|
|
144
101
|
}
|
|
145
102
|
return {
|
|
146
103
|
mode,
|