Skip to content

Commit 92e85fd

Browse files
ymkiuxymkiux
committed
style(web-ui): refine side-rail, docs-panel, nav parity
1 parent b62960e commit 92e85fd

4 files changed

Lines changed: 105 additions & 85 deletions

File tree

‎tests/unit/web-ui-behavior-parity.test.mjs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import assert from 'assert';
1+
import assert from 'assert';
22
import {
33
captureBehaviorParityBaselineAppOptions,
44
captureCurrentBundledAppOptions,
@@ -523,7 +523,8 @@ test('captured bundled app skeleton only exposes expected data key drift versus
523523
'syncTaskOrchestrationPolling',
524524
'resetTaskOrchestrationDraft',
525525
'appendTaskWorkflowId',
526-
'openClaudeMdEditor'
526+
'openClaudeMdEditor',
527+
'saveNavState'
527528
];
528529
allowedExtraCurrentMethodKeys.push(
529530
'hasActiveSessionFilters',

‎web-ui/modules/app.methods.navigation.mjs‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export function createNavigationMethods(options = {}) {
1+
export function createNavigationMethods(options = {}) {
22
const {
33
configModeSet,
44
switchMainTabHelper,
@@ -171,9 +171,6 @@ export function createNavigationMethods(options = {}) {
171171
ensureImmediateNavDomState() {
172172
if (typeof document === 'undefined') {
173173
return {
174-
saveNavState() {
175-
persistNavState(this);
176-
},
177174
navNodes: [],
178175
sessionPanelEl: null
179176
};
@@ -500,18 +497,12 @@ export function createNavigationMethods(options = {}) {
500497
if (typeof requestIdleCallback === 'function') {
501498
const id = requestIdleCallback(callback, { timeout });
502499
return {
503-
saveNavState() {
504-
persistNavState(this);
505-
},
506500
type: 'idle',
507501
id
508502
};
509503
}
510504
const id = setTimeout(callback, timeout);
511505
return {
512-
saveNavState() {
513-
persistNavState(this);
514-
},
515506
type: 'timeout',
516507
id
517508
};

‎web-ui/styles/docs-panel.css‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.docs-mode-content {
22
display: grid;
33
gap: 14px;
4-
/* CLI Install 是展示型面板：非输入区域不使用 I-beam（text）光标，避免误导为可编辑。 */
54
cursor: default;
65
}
76

@@ -41,17 +40,19 @@
4140
.docs-toolbar-grid {
4241
display: grid;
4342
grid-template-columns: repeat(12, minmax(0, 1fr));
44-
gap: 12px;
43+
gap: 10px;
4544
}
4645

4746
.docs-toolbar-card {
4847
grid-column: span 4;
4948
display: grid;
5049
gap: 8px;
51-
padding: 12px;
52-
border: 1px solid var(--color-border);
53-
border-radius: 10px;
54-
background: rgba(255, 253, 252, 0.76);
50+
padding: 14px;
51+
border: 1px solid var(--color-border-soft);
52+
border-radius: var(--radius-md);
53+
background: rgba(255, 255, 255, 0.42);
54+
box-shadow: var(--shadow-subtle);
55+
backdrop-filter: blur(8px);
5556
}
5657

5758
.docs-toolbar-card-wide {
@@ -62,33 +63,39 @@
6263
display: grid;
6364
grid-template-columns: repeat(4, minmax(0, 1fr));
6465
gap: 10px;
66+
margin-top: 2px;
6567
}
6668

6769
.docs-summary-item {
6870
display: grid;
6971
gap: 4px;
70-
padding: 12px;
71-
border: 1px solid var(--color-border);
72-
border-radius: 10px;
73-
background: rgba(255, 253, 252, 0.82);
72+
padding: 12px 14px;
73+
border: 1px solid var(--color-border-soft);
74+
border-radius: var(--radius-md);
75+
background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,251,247,0.78));
76+
box-shadow: var(--shadow-card);
7477
}
7578

7679
.docs-summary-item-wide {
7780
grid-column: span 2;
7881
}
7982

8083
.docs-summary-label {
81-
font-size: 11px;
84+
font-size: 10px;
85+
font-weight: 700;
8286
color: var(--color-text-muted);
83-
letter-spacing: 0.04em;
87+
letter-spacing: 0.06em;
8488
text-transform: uppercase;
89+
opacity: 0.82;
8590
}
8691

8792
.docs-summary-value {
88-
font-size: 14px;
93+
font-size: 15px;
94+
font-weight: 700;
8995
color: var(--color-text-primary);
90-
line-height: 1.4;
96+
line-height: 1.25;
9197
word-break: break-word;
98+
letter-spacing: -0.02em;
9299
}
93100

94101
.docs-install-list {
@@ -97,12 +104,16 @@
97104

98105
.docs-install-row {
99106
align-items: stretch;
100-
background: rgba(255, 253, 252, 0.8);
107+
background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,251,247,0.78));
108+
border: 1px solid var(--color-border-soft);
109+
border-radius: var(--radius-md);
110+
padding: 14px;
111+
box-shadow: var(--shadow-card);
101112
}
102113

103114
.docs-command-head {
104115
display: grid;
105-
gap: 4px;
116+
gap: 6px;
106117
}
107118

108119
.docs-command-row {
@@ -119,34 +130,38 @@
119130
grid-template-columns: 1fr auto;
120131
align-items: stretch;
121132
gap: 10px;
122-
padding: 10px 10px 10px 12px;
123-
border: 1px solid var(--color-border);
124-
border-radius: 10px;
125-
background: rgba(255, 253, 252, 0.9);
133+
padding: 10px 10px 10px 14px;
134+
border: 1px solid var(--color-border-soft);
135+
border-radius: var(--radius-sm);
136+
background: rgba(255,255,255,0.64);
137+
box-shadow: var(--shadow-subtle);
126138
}
127139

128140
.docs-command-row .install-command {
129141
min-width: 0;
130-
padding: 10px 12px;
131-
border-radius: 8px;
132-
background: rgba(18, 22, 35, 0.06);
142+
padding: 10px 14px;
143+
border-radius: var(--radius-sm);
144+
background: rgba(18,22,35,0.04);
145+
border: 1px solid rgba(18,22,35,0.05);
133146
overflow-x: auto;
134147
white-space: nowrap;
135148
user-select: text;
149+
font-size: 13px;
150+
line-height: 1.5;
136151
}
137152

138153
.docs-command-prefix {
139154
display: inline-flex;
140155
align-items: center;
141-
padding: 2px 8px;
156+
padding: 3px 10px;
142157
margin-right: 10px;
143158
border-radius: 999px;
144-
border: 1px solid rgba(0, 0, 0, 0.1);
145-
background: rgba(210, 107, 90, 0.10);
146-
color: var(--color-text-secondary);
159+
border: 1px solid rgba(200,121,99,0.18);
160+
background: var(--color-brand-light);
161+
color: var(--color-brand-dark);
147162
font-size: 11px;
148163
font-weight: 700;
149-
letter-spacing: 0.02em;
164+
letter-spacing: 0.03em;
150165
}
151166

152167
.docs-command-meta {
@@ -160,16 +175,23 @@
160175
.docs-meta-pill {
161176
display: inline-flex;
162177
align-items: center;
163-
padding: 4px 8px;
178+
padding: 3px 10px;
164179
border-radius: 999px;
165-
border: 1px solid rgba(0, 0, 0, 0.08);
166-
background: rgba(255, 255, 255, 0.6);
180+
border: 1px solid var(--color-border-soft);
181+
background: rgba(255,255,255,0.72);
182+
font-size: 11px;
183+
font-weight: 600;
184+
color: var(--color-text-secondary);
185+
letter-spacing: 0.01em;
167186
}
168187

169188
.docs-copy-btn {
170-
min-width: 76px;
189+
min-width: 72px;
171190
min-height: 40px;
172191
flex: 0 0 auto;
192+
border-radius: var(--radius-sm);
193+
font-weight: 600;
194+
letter-spacing: 0.01em;
173195
}
174196

175197
.docs-help-grid {
@@ -179,17 +201,19 @@
179201
}
180202

181203
.docs-note-card {
182-
padding: 14px;
183-
border: 1px solid var(--color-border);
184-
border-radius: 10px;
185-
background: rgba(255, 253, 252, 0.78);
204+
padding: 16px;
205+
border: 1px solid var(--color-border-soft);
206+
border-radius: var(--radius-md);
207+
background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,251,247,0.76));
208+
box-shadow: var(--shadow-card);
186209
}
187210

188211
.docs-note-title {
189212
font-size: 13px;
190213
font-weight: 700;
191214
color: var(--color-text-primary);
192-
margin-bottom: 8px;
215+
margin-bottom: 10px;
216+
letter-spacing: -0.02em;
193217
}
194218

195219
.docs-help-list {
@@ -201,11 +225,11 @@
201225
padding-left: 18px;
202226
color: var(--color-text-secondary);
203227
font-size: 13px;
204-
line-height: 1.55;
228+
line-height: 1.6;
205229
}
206230

207231
.docs-static-list li + li {
208-
margin-top: 6px;
232+
margin-top: 8px;
209233
}
210234

211235
@media (max-width: 1100px) {

0 commit comments

Comments
 (0)