Skip to content

Commit 83789c6

Browse files
ymkiuxymkiux
committed
style(docs-panel): unify toolbar controls and tighten layout
1 parent 837a01c commit 83789c6

4 files changed

Lines changed: 55 additions & 108 deletions

File tree

‎tests/unit/config-tabs-ui.test.mjs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -684,3 +684,22 @@ test('session responsive styles keep mobile toolbar reachable without deprecated
684684
assert.doesNotMatch(responsiveStyles, /word-break:\s*break-word/);
685685
assert.match(responsiveStyles, /\.session-preview-title\s*\{[\s\S]*?overflow-wrap:\s*anywhere;[\s\S]*?\}/);
686686
});
687+
688+
test('docs panel uses segmented package manager control and drops summary strip', () => {
689+
const html = readBundledWebUiHtml();
690+
const pmSelectorCount = (html.match(/installPackageManager === '/g) || []).length;
691+
692+
assert.doesNotMatch(html, /docs-summary-strip/);
693+
assert.doesNotMatch(html, /docs-toolbar-card-wide/);
694+
assert.doesNotMatch(html, /docs-install-package-manager/);
695+
assert.doesNotMatch(html, /for="docs-install-package-manager"/);
696+
assert.strictEqual(pmSelectorCount, 3);
697+
assert.match(
698+
html,
699+
/<div class="install-action-tabs">[\s\S]*?installPackageManager === 'npm'[\s\S]*?installPackageManager === 'pnpm'[\s\S]*?installPackageManager === 'bun'/
700+
);
701+
assert.match(
702+
html,
703+
/<div class="docs-toolbar-card">\s*<label class="form-label">\{\{ t\('common\.packageManager'\) \}\}<\/label>\s*<div class="install-action-tabs">/
704+
);
705+
});

‎web-ui/partials/index/panel-docs.html‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111

1212
<div class="docs-toolbar-grid">
1313
<div class="docs-toolbar-card">
14-
<label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
15-
<select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
16-
<option value="npm">npm</option>
17-
<option value="pnpm">pnpm</option>
18-
<option value="bun">bun</option>
19-
</select>
14+
<label class="form-label">{{ t('common.packageManager') }}</label>
15+
<div class="install-action-tabs">
16+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'npm' }" @click="installPackageManager = 'npm'">npm</button>
17+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'pnpm' }" @click="installPackageManager = 'pnpm'">pnpm</button>
18+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'bun' }" @click="installPackageManager = 'bun'">bun</button>
19+
</div>
2020
</div>
21-
<div class="docs-toolbar-card docs-toolbar-card-wide">
21+
<div class="docs-toolbar-card">
2222
<label class="form-label">{{ t('common.mirror') }}</label>
2323
<div class="install-action-tabs">
2424
<button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
@@ -29,7 +29,7 @@
2929
<div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
3030
<div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
3131
</div>
32-
<div class="docs-toolbar-card docs-toolbar-card-wide">
32+
<div class="docs-toolbar-card">
3333
<label class="form-label">{{ t('common.action') }}</label>
3434
<div class="install-action-tabs">
3535
<button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
@@ -39,20 +39,6 @@
3939
</div>
4040
</div>
4141

42-
<div class="docs-summary-strip">
43-
<div class="docs-summary-item">
44-
<span class="docs-summary-label">{{ t('common.targets') }}</span>
45-
<strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
46-
</div>
47-
<div class="docs-summary-item">
48-
<span class="docs-summary-label">{{ t('common.currentPm') }}</span>
49-
<strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
50-
</div>
51-
<div class="docs-summary-item docs-summary-item-wide">
52-
<span class="docs-summary-label">{{ t('common.registry') }}</span>
53-
<strong class="docs-summary-value">{{ installRegistryPreview || 'npmmirror' }}</strong>
54-
</div>
55-
</div>
5642
</div>
5743

5844
<div class="selector-section">

‎web-ui/res/web-ui-render.precompiled.js‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5115,23 +5115,26 @@ return function render(_ctx, _cache) {
51155115
]),
51165116
_createElementVNode("div", { class: "docs-toolbar-grid" }, [
51175117
_createElementVNode("div", { class: "docs-toolbar-card" }, [
5118-
_createElementVNode("label", {
5119-
class: "form-label",
5120-
for: "docs-install-package-manager"
5121-
}, _toDisplayString(_ctx.t('common.packageManager')), 1 /* TEXT */),
5122-
_withDirectives(_createElementVNode("select", {
5123-
id: "docs-install-package-manager",
5124-
class: "form-input",
5125-
"onUpdate:modelValue": $event => ((_ctx.installPackageManager) = $event)
5126-
}, [
5127-
_createElementVNode("option", { value: "npm" }, "npm"),
5128-
_createElementVNode("option", { value: "pnpm" }, "pnpm"),
5129-
_createElementVNode("option", { value: "bun" }, "bun")
5130-
], 8 /* PROPS */, ["onUpdate:modelValue"]), [
5131-
[_vModelSelect, _ctx.installPackageManager]
5118+
_createElementVNode("label", { class: "form-label" }, _toDisplayString(_ctx.t('common.packageManager')), 1 /* TEXT */),
5119+
_createElementVNode("div", { class: "install-action-tabs" }, [
5120+
_createElementVNode("button", {
5121+
type: "button",
5122+
class: _normalizeClass(["btn-mini", { active: _ctx.installPackageManager === 'npm' }]),
5123+
onClick: $event => (_ctx.installPackageManager = 'npm')
5124+
}, "npm", 10 /* CLASS, PROPS */, ["onClick"]),
5125+
_createElementVNode("button", {
5126+
type: "button",
5127+
class: _normalizeClass(["btn-mini", { active: _ctx.installPackageManager === 'pnpm' }]),
5128+
onClick: $event => (_ctx.installPackageManager = 'pnpm')
5129+
}, "pnpm", 10 /* CLASS, PROPS */, ["onClick"]),
5130+
_createElementVNode("button", {
5131+
type: "button",
5132+
class: _normalizeClass(["btn-mini", { active: _ctx.installPackageManager === 'bun' }]),
5133+
onClick: $event => (_ctx.installPackageManager = 'bun')
5134+
}, "bun", 10 /* CLASS, PROPS */, ["onClick"])
51325135
])
51335136
]),
5134-
_createElementVNode("div", { class: "docs-toolbar-card docs-toolbar-card-wide" }, [
5137+
_createElementVNode("div", { class: "docs-toolbar-card" }, [
51355138
_createElementVNode("label", { class: "form-label" }, _toDisplayString(_ctx.t('common.mirror')), 1 /* TEXT */),
51365139
_createElementVNode("div", { class: "install-action-tabs" }, [
51375140
_createElementVNode("button", {
@@ -5172,7 +5175,7 @@ return function render(_ctx, _cache) {
51725175
}, _toDisplayString(_ctx.t('docs.registryHintCustom')), 1 /* TEXT */))
51735176
: _createCommentVNode("v-if", true)
51745177
]),
5175-
_createElementVNode("div", { class: "docs-toolbar-card docs-toolbar-card-wide" }, [
5178+
_createElementVNode("div", { class: "docs-toolbar-card" }, [
51765179
_createElementVNode("label", { class: "form-label" }, _toDisplayString(_ctx.t('common.action')), 1 /* TEXT */),
51775180
_createElementVNode("div", { class: "install-action-tabs" }, [
51785181
_createElementVNode("button", {
@@ -5192,20 +5195,6 @@ return function render(_ctx, _cache) {
51925195
}, _toDisplayString(_ctx.t('common.uninstall')), 11 /* TEXT, CLASS, PROPS */, ["onClick"])
51935196
])
51945197
])
5195-
]),
5196-
_createElementVNode("div", { class: "docs-summary-strip" }, [
5197-
_createElementVNode("div", { class: "docs-summary-item" }, [
5198-
_createElementVNode("span", { class: "docs-summary-label" }, _toDisplayString(_ctx.t('common.targets')), 1 /* TEXT */),
5199-
_createElementVNode("strong", { class: "docs-summary-value" }, _toDisplayString(_ctx.installTargetCards.length), 1 /* TEXT */)
5200-
]),
5201-
_createElementVNode("div", { class: "docs-summary-item" }, [
5202-
_createElementVNode("span", { class: "docs-summary-label" }, _toDisplayString(_ctx.t('common.currentPm')), 1 /* TEXT */),
5203-
_createElementVNode("strong", { class: "docs-summary-value" }, _toDisplayString(String(_ctx.installPackageManager || 'npm').toUpperCase()), 1 /* TEXT */)
5204-
]),
5205-
_createElementVNode("div", { class: "docs-summary-item docs-summary-item-wide" }, [
5206-
_createElementVNode("span", { class: "docs-summary-label" }, _toDisplayString(_ctx.t('common.registry')), 1 /* TEXT */),
5207-
_createElementVNode("strong", { class: "docs-summary-value" }, _toDisplayString(_ctx.installRegistryPreview || 'npmmirror'), 1 /* TEXT */)
5208-
])
52095198
])
52105199
]),
52115200
_createElementVNode("div", { class: "selector-section" }, [

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

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.docs-mode-content {
66
display: flex;
77
flex-direction: column;
8-
gap: 16px;
8+
gap: 14px;
99
}
1010

1111
/* ---- Toolbar grid ----
@@ -20,17 +20,17 @@
2020
.docs-toolbar-card {
2121
display: flex;
2222
flex-direction: column;
23-
gap: 8px;
23+
gap: 7px;
2424
padding: 14px;
2525
border: 1px solid var(--color-border-soft);
2626
border-radius: var(--radius-md);
2727
background: var(--color-surface);
2828
}
2929

30-
.docs-toolbar-card-wide {
31-
/* 历史遗留的宽卡类，等宽网格下不再需要额外跨度，
32-
保留类名以兼容模板中的引用。 */
33-
grid-column: auto;
30+
/* 三张卡统一承载分段控件：标签块级化，使相邻卡内
31+
install-action-tabs 的顶部基线保持一致。 */
32+
.docs-toolbar-card .form-label {
33+
display: block;
3434
}
3535

3636
/* Segmented control：把 install/registry 的散落 btn-mini
@@ -49,7 +49,7 @@
4949
border-color: transparent;
5050
background: transparent;
5151
box-shadow: none;
52-
padding: 6px 12px;
52+
padding: 5px 12px;
5353
}
5454

5555
.docs-toolbar-card .install-action-tabs .btn-mini:hover {
@@ -64,48 +64,6 @@
6464
box-shadow: var(--shadow-subtle);
6565
}
6666

67-
/* ---- Summary strip ----
68-
原为 4 列网格但仅有 3 个 item，末列长期空置。改为
69-
3 列等宽，composition 直接对齐内容数量。 */
70-
.docs-summary-strip {
71-
display: grid;
72-
grid-template-columns: repeat(3, minmax(0, 1fr));
73-
gap: 10px;
74-
margin-top: 2px;
75-
}
76-
77-
.docs-summary-item {
78-
display: flex;
79-
flex-direction: column;
80-
gap: 4px;
81-
padding: 14px 16px;
82-
border: 1px solid var(--color-border-soft);
83-
border-radius: var(--radius-md);
84-
background: var(--color-surface);
85-
}
86-
87-
/* 三列等宽后不再需要额外跨度，保留类名兼容模板引用。 */
88-
.docs-summary-item-wide {
89-
grid-column: auto;
90-
}
91-
92-
.docs-summary-label {
93-
font-size: 10px;
94-
font-weight: 700;
95-
color: var(--color-text-muted);
96-
letter-spacing: 0.06em;
97-
text-transform: uppercase;
98-
}
99-
100-
.docs-summary-value {
101-
font-size: 18px;
102-
font-weight: 700;
103-
color: var(--color-text-primary);
104-
line-height: 1.2;
105-
letter-spacing: -0.02em;
106-
word-break: break-word;
107-
}
108-
10967
/* ---- Install rows ---- */
11068
.docs-install-list {
11169
display: flex;
@@ -114,7 +72,7 @@
11472
}
11573

11674
.docs-install-row {
117-
padding: 16px;
75+
padding: 14px;
11876
border: 1px solid var(--color-border-soft);
11977
border-radius: var(--radius-md);
12078
background: var(--color-surface);
@@ -124,7 +82,7 @@
12482
display: flex;
12583
flex-direction: column;
12684
gap: 6px;
127-
margin-bottom: 10px;
85+
margin-bottom: 8px;
12886
}
12987

13088
.docs-command-row {
@@ -253,10 +211,6 @@
253211
.docs-toolbar-grid > .docs-toolbar-card:first-child {
254212
grid-column: span 2;
255213
}
256-
257-
.docs-summary-strip {
258-
grid-template-columns: repeat(3, minmax(0, 1fr));
259-
}
260214
}
261215

262216
@media (max-width: 720px) {
@@ -268,7 +222,6 @@
268222
grid-column: auto;
269223
}
270224

271-
.docs-summary-strip,
272225
.docs-help-grid {
273226
grid-template-columns: 1fr;
274227
}

0 commit comments

Comments
 (0)