itismyskillmarket 1.3.44 → 1.3.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.
- package/gui/app.js +42 -0
- package/gui/index.html +18 -6
- package/gui/style.css +158 -3
- package/package.json +1 -1
package/gui/app.js
CHANGED
|
@@ -693,6 +693,34 @@ function applyI18nToStaticElements() {
|
|
|
693
693
|
}
|
|
694
694
|
}
|
|
695
695
|
|
|
696
|
+
// -----------------------------------------------------------------------------
|
|
697
|
+
// 主题切换
|
|
698
|
+
// -----------------------------------------------------------------------------
|
|
699
|
+
|
|
700
|
+
const THEMES = ['ocean', 'purple', 'forest', 'amber', 'sepia', 'gray', 'teal', 'dusk'];
|
|
701
|
+
|
|
702
|
+
function detectTheme() {
|
|
703
|
+
const saved = localStorage.getItem('skm-theme');
|
|
704
|
+
if (saved && THEMES.includes(saved)) return saved;
|
|
705
|
+
return 'ocean';
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
function applyTheme(theme) {
|
|
709
|
+
// Remove all theme classes from body
|
|
710
|
+
THEMES.forEach(t => document.body.classList.remove(`theme-${t}`));
|
|
711
|
+
// Add the selected theme class
|
|
712
|
+
document.body.classList.add(`theme-${theme}`);
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
function setTheme(theme) {
|
|
716
|
+
if (!THEMES.includes(theme)) return;
|
|
717
|
+
applyTheme(theme);
|
|
718
|
+
localStorage.setItem('skm-theme', theme);
|
|
719
|
+
|
|
720
|
+
const themeSelect = document.getElementById('theme-select');
|
|
721
|
+
if (themeSelect) themeSelect.value = theme;
|
|
722
|
+
}
|
|
723
|
+
|
|
696
724
|
// -----------------------------------------------------------------------------
|
|
697
725
|
// 版本号加载
|
|
698
726
|
// -----------------------------------------------------------------------------
|
|
@@ -748,6 +776,12 @@ function reRenderCurrentView() {
|
|
|
748
776
|
// -----------------------------------------------------------------------------
|
|
749
777
|
|
|
750
778
|
document.addEventListener('DOMContentLoaded', () => {
|
|
779
|
+
// 初始化主题
|
|
780
|
+
const initialTheme = detectTheme();
|
|
781
|
+
applyTheme(initialTheme);
|
|
782
|
+
const themeSelect = document.getElementById('theme-select');
|
|
783
|
+
if (themeSelect) themeSelect.value = initialTheme;
|
|
784
|
+
|
|
751
785
|
initializeNavigation();
|
|
752
786
|
initializeControls();
|
|
753
787
|
initializeCollapsibleSections();
|
|
@@ -907,6 +941,14 @@ function initializeControls() {
|
|
|
907
941
|
});
|
|
908
942
|
}
|
|
909
943
|
|
|
944
|
+
// 主题切换
|
|
945
|
+
const themeSelect = document.getElementById('theme-select');
|
|
946
|
+
if (themeSelect) {
|
|
947
|
+
themeSelect.addEventListener('change', () => {
|
|
948
|
+
setTheme(themeSelect.value);
|
|
949
|
+
});
|
|
950
|
+
}
|
|
951
|
+
|
|
910
952
|
// 语言切换
|
|
911
953
|
const langSelect = document.getElementById('lang-select');
|
|
912
954
|
if (langSelect) {
|
package/gui/index.html
CHANGED
|
@@ -22,12 +22,24 @@
|
|
|
22
22
|
<button class="nav-btn" data-view="admin">⚙️ Admin</button>
|
|
23
23
|
<button class="nav-btn" data-view="help">📖 Help</button>
|
|
24
24
|
</nav>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
<div class="theme-switch">
|
|
26
|
+
<select id="theme-select">
|
|
27
|
+
<option value="ocean">🌊 海洋</option>
|
|
28
|
+
<option value="purple">🔮 深紫</option>
|
|
29
|
+
<option value="forest">🌿 森林</option>
|
|
30
|
+
<option value="amber">🔥 琥珀</option>
|
|
31
|
+
<option value="sepia">🕯 暖棕</option>
|
|
32
|
+
<option value="gray">🌫 柔灰</option>
|
|
33
|
+
<option value="teal">🦆 墨青</option>
|
|
34
|
+
<option value="dusk">🌆 暮紫</option>
|
|
35
|
+
</select>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="lang-switch">
|
|
38
|
+
<select id="lang-select">
|
|
39
|
+
<option value="en">EN</option>
|
|
40
|
+
<option value="zh">中</option>
|
|
41
|
+
</select>
|
|
42
|
+
</div>
|
|
31
43
|
</header>
|
|
32
44
|
|
|
33
45
|
<!-- 主内容区 -->
|
package/gui/style.css
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
SkillMarket GUI - Styles
|
|
3
3
|
============================================================================= */
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/* =============================================================================
|
|
6
|
+
主题系统 - 通过 body.theme-xxx 切换
|
|
7
|
+
============================================================================= */
|
|
8
|
+
|
|
9
|
+
/* 海洋蓝（默认） */
|
|
10
|
+
:root,
|
|
11
|
+
body.theme-ocean {
|
|
6
12
|
--bg-primary: #1a1a2e;
|
|
7
13
|
--bg-secondary: #16213e;
|
|
8
14
|
--bg-card: #0f3460;
|
|
@@ -19,6 +25,125 @@
|
|
|
19
25
|
--topbar-height: 52px;
|
|
20
26
|
}
|
|
21
27
|
|
|
28
|
+
/* 深空紫 */
|
|
29
|
+
body.theme-purple {
|
|
30
|
+
--bg-primary: #1a0a2e;
|
|
31
|
+
--bg-secondary: #2d1b4e;
|
|
32
|
+
--bg-card: #3d2a6a;
|
|
33
|
+
--bg-hover: #4d3a7a;
|
|
34
|
+
--text-primary: #d4a5ff;
|
|
35
|
+
--text-secondary: #ffffff;
|
|
36
|
+
--text-muted: #a080b0;
|
|
37
|
+
--border-color: #3d2a6a;
|
|
38
|
+
--accent: #b388ff;
|
|
39
|
+
--accent-hover: #c9a8ff;
|
|
40
|
+
--success: #4caf50;
|
|
41
|
+
--warning: #ff9800;
|
|
42
|
+
--danger: #f44336;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* 森林绿 */
|
|
46
|
+
body.theme-forest {
|
|
47
|
+
--bg-primary: #0d2818;
|
|
48
|
+
--bg-secondary: #1a3d2a;
|
|
49
|
+
--bg-card: #2d5a3a;
|
|
50
|
+
--bg-hover: #3a7a4a;
|
|
51
|
+
--text-primary: #8bc34a;
|
|
52
|
+
--text-secondary: #ffffff;
|
|
53
|
+
--text-muted: #8a9a8a;
|
|
54
|
+
--border-color: #2d5a3a;
|
|
55
|
+
--accent: #66bb6a;
|
|
56
|
+
--accent-hover: #81c784;
|
|
57
|
+
--success: #4caf50;
|
|
58
|
+
--warning: #ff9800;
|
|
59
|
+
--danger: #f44336;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* 暖琥珀 */
|
|
63
|
+
body.theme-amber {
|
|
64
|
+
--bg-primary: #2a1f0a;
|
|
65
|
+
--bg-secondary: #3d301a;
|
|
66
|
+
--bg-card: #5a452a;
|
|
67
|
+
--bg-hover: #7a5a3a;
|
|
68
|
+
--text-primary: #ffb74d;
|
|
69
|
+
--text-secondary: #ffffff;
|
|
70
|
+
--text-muted: #b0a080;
|
|
71
|
+
--border-color: #5a452a;
|
|
72
|
+
--accent: #ffa726;
|
|
73
|
+
--accent-hover: #ffb74d;
|
|
74
|
+
--success: #4caf50;
|
|
75
|
+
--warning: #ff9800;
|
|
76
|
+
--danger: #f44336;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* 暖棕 - 仿纸质感，低蓝光护眼 */
|
|
80
|
+
body.theme-sepia {
|
|
81
|
+
--bg-primary: #2d2416;
|
|
82
|
+
--bg-secondary: #352b1c;
|
|
83
|
+
--bg-card: #3d3223;
|
|
84
|
+
--bg-hover: #4a3d2c;
|
|
85
|
+
--text-primary: #e6c9a8;
|
|
86
|
+
--text-secondary: #f5ede0;
|
|
87
|
+
--text-muted: #a09080;
|
|
88
|
+
--border-color: #4a3d2c;
|
|
89
|
+
--accent: #d4a76a;
|
|
90
|
+
--accent-hover: #e0b87a;
|
|
91
|
+
--success: #6b8e23;
|
|
92
|
+
--warning: #cd853f;
|
|
93
|
+
--danger: #b55343;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* 柔灰 - 极简低对比 */
|
|
97
|
+
body.theme-gray {
|
|
98
|
+
--bg-primary: #1e1e1e;
|
|
99
|
+
--bg-secondary: #262626;
|
|
100
|
+
--bg-card: #2d2d2d;
|
|
101
|
+
--bg-hover: #383838;
|
|
102
|
+
--text-primary: #c0c0c0;
|
|
103
|
+
--text-secondary: #e0e0e0;
|
|
104
|
+
--text-muted: #808080;
|
|
105
|
+
--border-color: #383838;
|
|
106
|
+
--accent: #a0a0a0;
|
|
107
|
+
--accent-hover: #b0b0b0;
|
|
108
|
+
--success: #5a8a5a;
|
|
109
|
+
--warning: #a09040;
|
|
110
|
+
--danger: #8a4a4a;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* 墨青 - 舒缓蓝绿 */
|
|
114
|
+
body.theme-teal {
|
|
115
|
+
--bg-primary: #0d2b2e;
|
|
116
|
+
--bg-secondary: #123538;
|
|
117
|
+
--bg-card: #1a3f42;
|
|
118
|
+
--bg-hover: #224f52;
|
|
119
|
+
--text-primary: #8ed1cc;
|
|
120
|
+
--text-secondary: #d4ecea;
|
|
121
|
+
--text-muted: #609090;
|
|
122
|
+
--border-color: #224f52;
|
|
123
|
+
--accent: #5bc0be;
|
|
124
|
+
--accent-hover: #6cd4d2;
|
|
125
|
+
--success: #4a8a5a;
|
|
126
|
+
--warning: #b0a040;
|
|
127
|
+
--danger: #b55343;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* 暮紫 - 柔和紫灰 */
|
|
131
|
+
body.theme-dusk {
|
|
132
|
+
--bg-primary: #1a1423;
|
|
133
|
+
--bg-secondary: #221a2e;
|
|
134
|
+
--bg-card: #2a1f33;
|
|
135
|
+
--bg-hover: #352840;
|
|
136
|
+
--text-primary: #d4c0e8;
|
|
137
|
+
--text-secondary: #ede0f5;
|
|
138
|
+
--text-muted: #9080a0;
|
|
139
|
+
--border-color: #352840;
|
|
140
|
+
--accent: #c4a7d1;
|
|
141
|
+
--accent-hover: #d4b8e0;
|
|
142
|
+
--success: #6b8a6b;
|
|
143
|
+
--warning: #a09060;
|
|
144
|
+
--danger: #b55373;
|
|
145
|
+
}
|
|
146
|
+
|
|
22
147
|
* {
|
|
23
148
|
margin: 0;
|
|
24
149
|
padding: 0;
|
|
@@ -1156,11 +1281,41 @@ body {
|
|
|
1156
1281
|
}
|
|
1157
1282
|
|
|
1158
1283
|
/* -----------------------------------------------------------------------------
|
|
1159
|
-
语言切换
|
|
1284
|
+
主题切换 & 语言切换
|
|
1160
1285
|
----------------------------------------------------------------------------- */
|
|
1161
1286
|
|
|
1287
|
+
.theme-switch {
|
|
1288
|
+
display: flex;
|
|
1289
|
+
align-items: center;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
#theme-select {
|
|
1293
|
+
padding: 6px 28px 6px 10px;
|
|
1294
|
+
background: var(--bg-card);
|
|
1295
|
+
border: 1px solid var(--border-color);
|
|
1296
|
+
color: var(--text-secondary);
|
|
1297
|
+
border-radius: 6px;
|
|
1298
|
+
font-size: 0.85rem;
|
|
1299
|
+
cursor: pointer;
|
|
1300
|
+
appearance: none;
|
|
1301
|
+
-webkit-appearance: none;
|
|
1302
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
1303
|
+
background-repeat: no-repeat;
|
|
1304
|
+
background-position: right 8px center;
|
|
1305
|
+
padding-right: 28px;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
#theme-select:focus {
|
|
1309
|
+
outline: none;
|
|
1310
|
+
border-color: var(--accent);
|
|
1311
|
+
}
|
|
1312
|
+
|
|
1313
|
+
#theme-select option {
|
|
1314
|
+
background: var(--bg-secondary);
|
|
1315
|
+
color: var(--text-secondary);
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1162
1318
|
.lang-switch {
|
|
1163
|
-
margin-left: auto;
|
|
1164
1319
|
display: flex;
|
|
1165
1320
|
align-items: center;
|
|
1166
1321
|
padding-left: 8px;
|