itismyskillmarket 1.3.14 → 1.3.15
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 +14 -0
- package/gui/index.html +40 -19
- package/gui/style.css +51 -20
- package/package.json +1 -1
package/gui/app.js
CHANGED
|
@@ -21,9 +21,23 @@ const state = {
|
|
|
21
21
|
document.addEventListener('DOMContentLoaded', () => {
|
|
22
22
|
initializeNavigation();
|
|
23
23
|
initializeControls();
|
|
24
|
+
initializeCollapsibleSections();
|
|
24
25
|
loadSkills();
|
|
25
26
|
});
|
|
26
27
|
|
|
28
|
+
// -----------------------------------------------------------------------------
|
|
29
|
+
// 可折叠侧边栏分组
|
|
30
|
+
// -----------------------------------------------------------------------------
|
|
31
|
+
|
|
32
|
+
function initializeCollapsibleSections() {
|
|
33
|
+
// 默认全部展开
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function toggleSection(header) {
|
|
37
|
+
const group = header.parentElement;
|
|
38
|
+
group.classList.toggle('collapsed');
|
|
39
|
+
}
|
|
40
|
+
|
|
27
41
|
// -----------------------------------------------------------------------------
|
|
28
42
|
// 导航切换
|
|
29
43
|
// -----------------------------------------------------------------------------
|
package/gui/index.html
CHANGED
|
@@ -14,29 +14,50 @@
|
|
|
14
14
|
<h1>📦 SkillMarket</h1>
|
|
15
15
|
</div>
|
|
16
16
|
<nav>
|
|
17
|
-
<div class="nav-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
<div class="nav-group">
|
|
18
|
+
<div class="nav-section" onclick="toggleSection(this)">
|
|
19
|
+
<span>Browse</span>
|
|
20
|
+
<span class="nav-arrow">▼</span>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="nav-items">
|
|
23
|
+
<button class="nav-btn active" data-view="skills">
|
|
24
|
+
<span class="icon">📋</span> Skills
|
|
25
|
+
</button>
|
|
26
|
+
<button class="nav-btn" data-view="installed">
|
|
27
|
+
<span class="icon">✅</span> Installed
|
|
28
|
+
</button>
|
|
29
|
+
<button class="nav-btn" data-view="platforms">
|
|
30
|
+
<span class="icon">💻</span> Platforms
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
27
34
|
|
|
28
|
-
<div class="nav-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
35
|
+
<div class="nav-group">
|
|
36
|
+
<div class="nav-section" onclick="toggleSection(this)">
|
|
37
|
+
<span>Manage</span>
|
|
38
|
+
<span class="nav-arrow">▼</span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="nav-items">
|
|
41
|
+
<button class="nav-btn" data-view="admin">
|
|
42
|
+
<span class="icon">⚙️</span> Admin
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
32
46
|
|
|
33
|
-
<div class="nav-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
47
|
+
<div class="nav-group">
|
|
48
|
+
<div class="nav-section" onclick="toggleSection(this)">
|
|
49
|
+
<span>Support</span>
|
|
50
|
+
<span class="nav-arrow">▼</span>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="nav-items">
|
|
53
|
+
<button class="nav-btn" data-view="help">
|
|
54
|
+
<span class="icon">📖</span> Help
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
37
58
|
</nav>
|
|
38
59
|
<div class="sidebar-footer">
|
|
39
|
-
<span class="version" id="gui-version">v1.3.
|
|
60
|
+
<span class="version" id="gui-version">v1.3.15</span>
|
|
40
61
|
</div>
|
|
41
62
|
</aside>
|
|
42
63
|
|
package/gui/style.css
CHANGED
|
@@ -43,13 +43,13 @@ body {
|
|
|
43
43
|
border-right: 1px solid var(--border-color);
|
|
44
44
|
display: flex;
|
|
45
45
|
flex-direction: column;
|
|
46
|
-
padding:
|
|
46
|
+
padding: 12px 0;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.logo {
|
|
50
|
-
padding: 0
|
|
50
|
+
padding: 0 16px 12px;
|
|
51
51
|
border-bottom: 1px solid var(--border-color);
|
|
52
|
-
margin-bottom:
|
|
52
|
+
margin-bottom: 8px;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.logo h1 {
|
|
@@ -62,17 +62,57 @@ nav {
|
|
|
62
62
|
padding: 0 10px;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
+
.nav-group {
|
|
66
|
+
margin-bottom: 2px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.nav-group + .nav-group {
|
|
70
|
+
margin-top: 4px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.nav-section {
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
align-items: center;
|
|
77
|
+
padding: 10px 12px 4px;
|
|
78
|
+
font-size: 0.7rem;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
color: var(--text-muted);
|
|
81
|
+
text-transform: uppercase;
|
|
82
|
+
letter-spacing: 1px;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
user-select: none;
|
|
85
|
+
transition: color 0.2s;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nav-section:hover {
|
|
89
|
+
color: var(--text-secondary);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nav-arrow {
|
|
93
|
+
font-size: 0.55rem;
|
|
94
|
+
transition: transform 0.2s;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.nav-group.collapsed .nav-arrow {
|
|
98
|
+
transform: rotate(-90deg);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.nav-group.collapsed .nav-items {
|
|
102
|
+
display: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
65
105
|
.nav-btn {
|
|
66
106
|
width: 100%;
|
|
67
|
-
padding:
|
|
68
|
-
margin-bottom:
|
|
107
|
+
padding: 10px 14px;
|
|
108
|
+
margin-bottom: 2px;
|
|
69
109
|
background: transparent;
|
|
70
110
|
border: none;
|
|
71
111
|
color: var(--text-secondary);
|
|
72
112
|
text-align: left;
|
|
73
113
|
cursor: pointer;
|
|
74
|
-
border-radius:
|
|
75
|
-
font-size: 0.
|
|
114
|
+
border-radius: 6px;
|
|
115
|
+
font-size: 0.9rem;
|
|
76
116
|
transition: all 0.2s;
|
|
77
117
|
display: flex;
|
|
78
118
|
align-items: center;
|
|
@@ -89,16 +129,7 @@ nav {
|
|
|
89
129
|
}
|
|
90
130
|
|
|
91
131
|
.nav-btn .icon {
|
|
92
|
-
font-size: 1.
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.nav-section {
|
|
96
|
-
padding: 16px 20px 6px;
|
|
97
|
-
font-size: 0.7rem;
|
|
98
|
-
font-weight: 600;
|
|
99
|
-
color: var(--text-muted);
|
|
100
|
-
text-transform: uppercase;
|
|
101
|
-
letter-spacing: 1px;
|
|
132
|
+
font-size: 1.1rem;
|
|
102
133
|
}
|
|
103
134
|
|
|
104
135
|
.sidebar-footer {
|
|
@@ -119,7 +150,7 @@ nav {
|
|
|
119
150
|
flex: 1;
|
|
120
151
|
overflow-y: auto;
|
|
121
152
|
min-height: 0; /* flex 子项必须显式允许收缩 */
|
|
122
|
-
padding:
|
|
153
|
+
padding: 20px 28px;
|
|
123
154
|
}
|
|
124
155
|
|
|
125
156
|
.view {
|
|
@@ -136,11 +167,11 @@ nav {
|
|
|
136
167
|
display: flex;
|
|
137
168
|
justify-content: space-between;
|
|
138
169
|
align-items: center;
|
|
139
|
-
margin-bottom:
|
|
170
|
+
margin-bottom: 16px;
|
|
140
171
|
}
|
|
141
172
|
|
|
142
173
|
.view-header h2 {
|
|
143
|
-
font-size: 1.
|
|
174
|
+
font-size: 1.5rem;
|
|
144
175
|
color: var(--text-secondary);
|
|
145
176
|
}
|
|
146
177
|
|