diff --git a/media/console/console.css b/media/console/console.css
index fa15be8..f54c2dd 100644
--- a/media/console/console.css
+++ b/media/console/console.css
@@ -1,58 +1,4 @@
-:root {
- color-scheme: light dark;
- --surface: var(--vscode-editorWidget-background, color-mix(in srgb, var(--vscode-editor-background) 92%, var(--vscode-foreground) 8%));
- --surface-raised: var(--vscode-sideBar-background, var(--surface));
- --surface-hover: var(--vscode-list-hoverBackground, color-mix(in srgb, var(--surface) 86%, var(--vscode-focusBorder) 14%));
- --border: var(--vscode-panel-border, color-mix(in srgb, var(--vscode-foreground) 18%, transparent));
- --border-strong: var(--vscode-focusBorder, #007acc);
- --muted: var(--vscode-descriptionForeground, color-mix(in srgb, var(--vscode-editor-foreground) 64%, transparent));
- --ok: var(--vscode-charts-green, #3fb950);
- --run: var(--vscode-charts-blue, #4a9eff);
- --warn: var(--vscode-charts-yellow, #d7a12c);
- --pause: var(--vscode-charts-orange, #d18616);
- --err: var(--vscode-errorForeground, #f44);
- --radius-sm: 5px;
- --radius-md: 8px;
- --radius-lg: 11px;
- --shadow: 0 4px 14px color-mix(in srgb, #000 15%, transparent);
-}
-
-* { box-sizing: border-box; }
-
-html, body { min-height: 100%; }
-
-body {
- margin: 0;
- color: var(--vscode-editor-foreground);
- background: var(--vscode-editor-background);
- font-family: var(--vscode-font-family);
- font-size: var(--vscode-font-size, 13px);
-}
-
-button,
-input,
-select,
-textarea { font: inherit; }
-
-button {
- min-height: 30px;
- border: 1px solid transparent;
- border-radius: var(--radius-sm);
- padding: 5px 11px;
- cursor: pointer;
- color: var(--vscode-button-foreground);
- background: var(--vscode-button-background);
- transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
-}
-
-button:hover:not(:disabled) { background: var(--vscode-button-hoverBackground); }
-button:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }
-button:disabled { cursor: not-allowed; opacity: .45; }
-button.secondary {
- color: var(--vscode-button-secondaryForeground);
- background: var(--vscode-button-secondaryBackground);
-}
-button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
+/* 依赖 media/shared/tokens.css + media/shared/controls.css（由宿主在 index.html 注入，顺序在前） */
/* ═══ 控制台骨架 ═══════════════════════════════════════════════ */
@@ -72,7 +18,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
margin: 0 -12px 4px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
- background: color-mix(in srgb, var(--vscode-editor-background) 94%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 94%, transparent);
backdrop-filter: blur(10px);
}
@@ -86,7 +32,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.gbar__row--link { cursor: pointer; border-radius: var(--radius-sm); }
.gbar__row--link:hover { background: var(--surface-hover); }
-.gbar__row--link:hover .gbar__val { color: var(--vscode-editor-foreground); }
+.gbar__row--link:hover .gbar__val { color: var(--text-primary); }
.gbar__ico {
flex: 0 0 auto;
@@ -109,11 +55,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
opacity: .4;
}
-.gbar__row.is-ok { color: var(--vscode-editor-foreground); }
+.gbar__row.is-ok { color: var(--text-primary); }
.gbar__row.is-ok .gbar__dot { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
-.gbar__row.is-run { color: var(--vscode-editor-foreground); }
+.gbar__row.is-run { color: var(--text-primary); }
.gbar__row.is-run .gbar__dot { background: var(--run); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--run) 18%, transparent); animation: gbar-pulse 1.8s ease-in-out infinite; }
-.gbar__row.is-warn { color: var(--vscode-editor-foreground); }
+.gbar__row.is-warn { color: var(--text-primary); }
.gbar__row.is-warn .gbar__dot { background: var(--pause); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pause) 18%, transparent); }
@keyframes gbar-pulse {
@@ -124,8 +70,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
flex: 1;
min-width: 0;
overflow: hidden;
- font-size: 12px;
- font-weight: 600;
+ font-size: var(--font-sm);
+ font-weight: var(--weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -140,40 +86,13 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.gbar__sub {
padding-left: 31px;
color: var(--muted);
- font-size: 11px;
+ font-size: var(--font-xs);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-/* 状态条迷你按钮（随执行器状态机整组显隐） */
-.mini-btn {
- min-height: 24px;
- padding: 2px 10px;
- border-radius: var(--radius-sm);
- color: var(--vscode-button-secondaryForeground);
- background: var(--vscode-button-secondaryBackground);
- font-size: 11px;
- font-weight: 500;
- white-space: nowrap;
-}
-.mini-btn:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
-.mini-btn--primary {
- color: var(--vscode-button-foreground);
- background: var(--vscode-button-background);
-}
-.mini-btn--primary:hover:not(:disabled) { background: var(--vscode-button-hoverBackground); }
-.mini-btn--danger {
- color: var(--err);
- background: transparent;
- border-color: var(--border);
-}
-.mini-btn--danger:hover:not(:disabled) {
- background: color-mix(in srgb, var(--err) 12%, transparent);
- border-color: color-mix(in srgb, var(--err) 45%, var(--border));
-}
-
/* 执行器状态文本：颜色随状态（圆点由 .gbar__dot 呈现） */
.executor-state { color: var(--muted); }
.executor-state.is-running { color: var(--run); }
@@ -195,20 +114,19 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
padding: 4px 0;
color: var(--muted);
background: transparent;
- font-size: 12px;
- font-weight: 600;
+ font-size: var(--font-sm);
+ font-weight: var(--weight-medium);
}
.seg__btn:hover:not(.is-active) {
background: var(--surface-hover);
- color: var(--vscode-editor-foreground);
+ color: var(--text-primary);
}
.seg__btn.is-active {
border-color: var(--border);
- background: var(--surface-raised);
- color: var(--vscode-editor-foreground);
- box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent);
+ background: var(--bg-control);
+ color: var(--text-primary);
}
/* ── 搜索框 ───────────────────────────────────────────────────── */
@@ -242,12 +160,12 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.search input {
width: 100%;
min-height: 30px;
- border: 1px solid var(--vscode-input-border, var(--border));
+ border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
padding: 5px 9px 5px 28px;
outline: none;
- color: var(--vscode-input-foreground);
- background: var(--vscode-input-background);
+ color: var(--input-fg);
+ background: var(--input-bg);
}
.search input:focus { border-color: var(--border-strong); }
@@ -261,8 +179,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
margin: 12px 2px 7px;
cursor: pointer;
color: var(--muted);
- font-size: 11px;
- font-weight: 700;
+ font-size: var(--font-xs);
+ font-weight: var(--weight-bold);
letter-spacing: .03em;
user-select: none;
}
@@ -290,7 +208,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
- box-shadow: 0 1px 0 color-mix(in srgb, var(--vscode-foreground) 4%, transparent);
+ box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
transition: border-color .14s ease, box-shadow .14s ease;
}
@@ -317,32 +235,32 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- font-size: 14px;
+ font-size: var(--font-lg);
font-weight: 650;
}
.task-card__kind {
flex: 0 0 auto;
border: 1px solid var(--border);
- border-radius: 999px;
+ border-radius: var(--radius-pill);
padding: 1px 7px;
color: var(--muted);
background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
- font-size: 10px;
+ font-size: var(--font-2xs);
font-weight: 500;
}
.task-card__status {
flex: 0 0 auto;
border: 1px solid currentColor;
- border-radius: 999px;
+ border-radius: var(--radius-pill);
padding: 1px 7px;
- font-size: 10px;
+ font-size: var(--font-2xs);
font-weight: 500;
white-space: nowrap;
}
.task-card__status.is-disabled { color: var(--muted); }
-.task-card__status.is-armed { color: var(--vscode-editor-foreground); border-style: dashed; }
+.task-card__status.is-armed { color: var(--text-primary); border-style: dashed; }
.task-card__status.is-enqueued { color: var(--run); }
.task-card__status.is-polling { color: var(--ok); }
.task-card__status.is-queued { color: var(--warn); }
@@ -355,7 +273,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
min-height: 30px;
padding: 0 4px;
cursor: pointer;
- font-size: 12px;
+ font-size: var(--font-sm);
white-space: nowrap;
}
.task-card__enable input[type='checkbox'] {
@@ -370,8 +288,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
margin-top: 3px;
overflow: hidden;
color: var(--muted);
- font-family: var(--vscode-editor-font-family);
- font-size: 10px;
+ font-family: var(--font-mono);
+ font-size: var(--font-2xs);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -379,7 +297,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.task-card__description {
margin-top: 7px;
color: var(--muted);
- font-size: 11px;
+ font-size: var(--font-xs);
line-height: 1.55;
white-space: pre-wrap;
}
@@ -392,32 +310,31 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.task-card__actions button { white-space: nowrap; }
-/* 参数入口：badge 样式按钮，点击把参数表单搬进抽屉 */
+/* 参数入口：统一「中性图标按钮」形态（design-system 第 3 条：默认态即可识别，
+ 不靠 hover 首次显形）。全部状态保持中性，不用警示色——「已修改」以描边强化表达。 */
.task-card__config {
display: inline-flex;
align-items: center;
gap: 5px;
- min-height: 24px;
- border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
- border-radius: 999px;
+ min-height: var(--control-h-sm, 24px);
+ border: var(--border-width, 1px) solid var(--border);
+ border-radius: var(--radius-pill, 999px);
padding: 2px 10px;
- color: var(--warn);
- background: color-mix(in srgb, var(--warn) 10%, transparent);
- font-size: 11px;
- font-weight: 600;
+ color: var(--text-primary);
+ background: var(--bg-control);
+ font-size: var(--font-xs, 11px);
+ font-weight: var(--weight-medium, 500);
}
.task-card__config:hover:not(:disabled) {
- background: color-mix(in srgb, var(--warn) 18%, transparent);
+ background: var(--bg-control-hover);
+ border-color: var(--border-strong);
}
.task-card__config.has-overrides {
- color: var(--vscode-editor-foreground);
- border-color: var(--border);
- background: var(--surface-raised);
+ border-color: var(--border-strong);
}
.task-card__config.is-open {
border-color: var(--border-strong);
- color: var(--vscode-editor-foreground);
- background: var(--surface-raised);
+ background: var(--bg-control-active);
}
/* 卡片内嵌的参数表单：不再就地展开，等待被搬运进抽屉 */
@@ -460,28 +377,28 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
background: color-mix(in srgb, var(--ok) 14%, transparent);
}
-.connect-card__title { font-size: 13.5px; font-weight: 650; }
+.connect-card__title { font-size: var(--font-md); font-weight: 650; }
.connect-card__sub {
margin: 4px auto 12px;
max-width: 340px;
color: var(--muted);
- font-size: 11px;
+ font-size: var(--font-xs);
line-height: 1.55;
}
.primary-btn {
width: 100%;
min-height: 32px;
- font-weight: 600;
+ font-weight: var(--weight-medium);
}
.secondary-btn {
width: 100%;
min-height: 32px;
- color: var(--vscode-button-secondaryForeground);
- background: var(--vscode-button-secondaryBackground);
- font-weight: 600;
+ color: var(--btn-secondary-fg);
+ background: var(--btn-secondary-bg);
+ font-weight: var(--weight-medium);
}
-.secondary-btn:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
+.secondary-btn:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }
.tool-row {
display: flex;
@@ -495,11 +412,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
}
.tool-row__body { flex: 1; min-width: 0; }
-.tool-row__title { font-size: 12.5px; font-weight: 650; }
+.tool-row__title { font-size: var(--font-sm); font-weight: 650; }
.tool-row__hint {
margin-top: 3px;
color: var(--muted);
- font-size: 10.5px;
+ font-size: var(--font-2xs);
line-height: 1.5;
}
@@ -525,8 +442,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.switch__track {
position: absolute;
inset: 0;
- border-radius: 9px;
- background: color-mix(in srgb, var(--vscode-foreground) 28%, transparent);
+ border-radius: var(--radius-lg);
+ background: color-mix(in srgb, var(--text-primary) 28%, transparent);
transition: background-color .15s ease;
pointer-events: none;
}
@@ -538,8 +455,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
width: 14px;
height: 14px;
border-radius: 50%;
- background: var(--vscode-editor-background);
- box-shadow: 0 1px 2px color-mix(in srgb, #000 30%, transparent);
+ background: var(--bg-page);
+ box-shadow: var(--shadow-sm);
transition: left .15s ease;
}
.switch input:checked + .switch__track { background: var(--border-strong); }
@@ -553,11 +470,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
align-items: flex-start;
margin-top: 14px;
padding: 9px 11px;
- border: 1px solid var(--vscode-inputValidation-infoBorder, var(--border));
+ border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
- background: var(--vscode-inputValidation-infoBackground, transparent);
+ background: var(--info-bg);
color: var(--muted);
- font-size: 11px;
+ font-size: var(--font-xs);
line-height: 1.5;
}
.hint-strip svg {
@@ -576,7 +493,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
position: fixed;
inset: 0;
z-index: 90;
- background: color-mix(in srgb, #000 38%, transparent);
+ background: var(--scrim);
opacity: 0;
transition: opacity .18s ease;
}
@@ -593,7 +510,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
width: min(430px, 100%);
border-left: 1px solid var(--border);
background: var(--surface-raised);
- box-shadow: -10px 0 26px color-mix(in srgb, #000 22%, transparent);
+ box-shadow: var(--shadow-lg);
transform: translateX(102%);
transition: transform .2s ease;
}
@@ -607,7 +524,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
border-bottom: 1px solid var(--border);
}
.drawer__title {
- font-size: 13.5px;
+ font-size: var(--font-md);
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
@@ -616,24 +533,10 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.drawer__sub {
margin-top: 2px;
color: var(--muted);
- font-size: 10.5px;
+ font-size: var(--font-2xs);
}
-.icon-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
- width: 28px;
- height: 28px;
- min-height: 28px;
- margin-left: auto;
- padding: 0;
- border-radius: var(--radius-sm);
- color: var(--muted);
- background: transparent;
-}
-.icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--vscode-editor-foreground); }
+.icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.icon-btn svg {
width: 14px;
height: 14px;
@@ -674,8 +577,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
gap: 7px;
margin: 14px 1px 7px;
color: var(--muted);
- font-size: 10px;
- font-weight: 700;
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-bold);
letter-spacing: .055em;
text-transform: uppercase;
}
@@ -683,11 +586,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.config-saved {
padding: 1px 8px;
- border-radius: 999px;
+ border-radius: var(--radius-pill);
color: var(--ok);
background: color-mix(in srgb, var(--ok) 14%, transparent);
- font-size: 10px;
- font-weight: 600;
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-medium);
letter-spacing: .02em;
text-transform: none;
}
@@ -708,13 +611,13 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.config-field__label {
display: block;
margin-bottom: 4px;
- font-size: 12px;
- font-weight: 600;
+ font-size: var(--font-sm);
+ font-weight: var(--weight-medium);
}
.config-field__description,
.config-field__hint {
color: var(--muted);
- font-size: 10px;
+ font-size: var(--font-2xs);
line-height: 1.45;
white-space: pre-wrap;
}
@@ -727,12 +630,12 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.config-field textarea {
width: 100%;
min-height: 30px;
- border: 1px solid var(--vscode-input-border, var(--border));
+ border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
padding: 5px 7px;
outline: none;
- color: var(--vscode-input-foreground);
- background: var(--vscode-input-background);
+ color: var(--input-fg);
+ background: var(--input-bg);
}
.config-field textarea { min-height: 78px; resize: vertical; line-height: 1.45; }
.config-field select[multiple] { min-height: 112px; }
@@ -748,7 +651,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
min-height: 28px;
cursor: pointer;
}
-.switch-field__state { color: var(--muted); font-size: 11px; }
+.switch-field__state { color: var(--muted); font-size: var(--font-xs); }
.config-group {
overflow: hidden;
@@ -763,21 +666,21 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
gap: 8px;
min-height: 38px;
padding: 5px 7px 5px 10px;
- background: color-mix(in srgb, var(--vscode-sideBarSectionHeader-background, var(--surface)) 88%, transparent);
+ background: var(--bg-container-raised);
}
.config-group__header:hover { background: var(--surface-hover); }
.config-group__header > .config-field { flex: 1; margin: -4px 0; padding: 5px 3px; }
.config-group__header > .config-field:hover { border-color: transparent; background: transparent; }
-.config-group__title { flex: 1; min-width: 0; font-size: 12px; font-weight: 650; }
+.config-group__title { flex: 1; min-width: 0; font-size: var(--font-sm); font-weight: 650; }
.config-group__toggle {
flex: 0 0 auto;
min-width: 30px;
min-height: 27px;
padding: 3px 7px;
- color: var(--vscode-button-secondaryForeground);
+ color: var(--btn-secondary-fg);
background: transparent;
}
-.config-group__toggle:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
+.config-group__toggle:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }
.config-group__body { display: none; padding: 8px; border-top: 1px solid var(--border); }
.config-group.open > .config-group__body { display: block; }
@@ -791,12 +694,12 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
margin: 14px -12px -12px;
padding: 9px 12px;
border-top: 1px solid var(--border);
- background: color-mix(in srgb, var(--vscode-editor-background) 94%, transparent);
+ background: color-mix(in srgb, var(--bg-page) 94%, transparent);
backdrop-filter: blur(8px);
}
.config-actions button { min-width: 112px; }
-.config-json-error { border-color: var(--vscode-inputValidation-errorBorder, #be1100) !important; }
+.config-json-error { border-color: var(--err) !important; }
.config-broken,
.config-empty {
margin: 4px 0;
@@ -812,13 +715,13 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 8px 10px;
- font-size: 11px;
+ font-size: var(--font-xs);
line-height: 1.45;
background: var(--surface-raised);
}
-.status-banner.warn { border-color: var(--vscode-inputValidation-warningBorder, #b89500); background: var(--vscode-inputValidation-warningBackground, var(--surface-raised)); }
-.status-banner.error { border-color: var(--vscode-inputValidation-errorBorder, #be1100); background: var(--vscode-inputValidation-errorBackground, var(--surface-raised)); }
-.status-banner.ok { border-color: var(--vscode-inputValidation-infoBorder, var(--border-strong)); background: var(--vscode-inputValidation-infoBackground, var(--surface-raised)); }
+.status-banner.warn { border-color: var(--warn); background: var(--warn-bg); }
+.status-banner.error { border-color: var(--err); background: var(--danger-bg); }
+.status-banner.ok { border-color: var(--border-strong); background: var(--info-bg); }
.status-banner.info { border-color: var(--border); background: var(--surface-raised); }
.empty-state {
@@ -864,7 +767,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
align-items: center;
justify-content: center;
padding: 18px;
- background: color-mix(in srgb, #000 45%, transparent);
+ background: var(--scrim);
}
.list-dialog {
display: flex;
@@ -879,7 +782,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
}
.list-dialog__title {
padding: 12px 14px 9px;
- font-size: 13px;
+ font-size: var(--font-md);
font-weight: 650;
border-bottom: 1px solid var(--border);
}
@@ -900,8 +803,8 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
min-height: 0;
}
.list-dialog__pane--narrow { flex: 0 0 44%; }
-.list-dialog__subtitle { font-size: 12px; font-weight: 650; }
-.list-dialog__hint { color: var(--muted); font-size: 11px; }
+.list-dialog__subtitle { font-size: var(--font-sm); font-weight: 650; }
+.list-dialog__hint { color: var(--muted); font-size: var(--font-xs); }
.list-dialog__search { min-height: 28px; }
.list-dialog__options {
flex: 1;
@@ -912,7 +815,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
gap: 6px;
padding: 2px;
}
-.list-dialog__option { min-height: 26px; padding: 3px 9px; font-size: 12px; }
+.list-dialog__option { min-height: 26px; padding: 3px 9px; font-size: var(--font-sm); }
.list-dialog__columns {
display: flex;
gap: 8px;
@@ -965,11 +868,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
/* ── 配置接管：全局配置组卡片 + 任务二级分组小节 ── */
.takeover-banner {
- border: 1px solid color-mix(in srgb, #3794ff 45%, transparent);
- background: color-mix(in srgb, #3794ff 12%, transparent);
+ border: var(--border-width) solid color-mix(in srgb, var(--border-strong) 45%, transparent);
+ background: color-mix(in srgb, var(--border-strong) 12%, transparent);
border-radius: var(--radius-sm);
padding: 8px 10px;
- font-size: 11.5px;
+ font-size: var(--font-xs);
line-height: 1.55;
margin-bottom: 10px;
}
@@ -988,10 +891,10 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-hover, var(--surface)) 55%, transparent);
}
-.gconfig-card__name { font-weight: 600; font-size: 12.5px; flex: 0 0 auto; min-width: 0; }
+.gconfig-card__name { font-weight: var(--weight-medium); font-size: var(--font-sm); flex: 0 0 auto; min-width: 0; }
.gconfig-card__desc {
flex: 1;
- font-size: 11px;
+ font-size: var(--font-xs);
color: var(--muted);
min-width: 0;
overflow: hidden;
@@ -999,24 +902,14 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
white-space: nowrap;
}
.gconfig-card__actions { display: flex; gap: 6px; flex: 0 0 auto; }
-.btn-mini {
- border: 1px solid var(--border);
- background: transparent;
- color: var(--muted);
- border-radius: var(--radius-sm);
- padding: 3px 8px;
- font-size: 11px;
- cursor: pointer;
-}
-.btn-mini:hover { background: var(--surface-hover); color: inherit; }
.gconfig-card__body { padding: 2px 0 4px; }
.subgroup-head {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 2px 4px;
- font-size: 11.5px;
- font-weight: 600;
+ font-size: var(--font-xs);
+ font-weight: var(--weight-medium);
color: var(--muted);
cursor: pointer;
user-select: none;
@@ -1025,17 +918,17 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.subgroup-head__chev { width: 11px; }
.subgroup-head__count {
font-weight: 400;
- font-size: 10.5px;
+ font-size: var(--font-2xs);
background: var(--surface-hover, var(--surface));
- border-radius: 8px;
+ border-radius: var(--radius-md);
padding: 1px 7px;
}
.subgroup-body { display: flex; flex-direction: column; gap: 8px; }
-.task-card__snap { min-width: 30px; font-size: 12px; }
+.task-card__snap { min-width: 30px; font-size: var(--font-sm); }
.tag--store {
- font-size: 10px;
+ font-size: var(--font-2xs);
border: 1px solid var(--border-strong, var(--border));
- border-radius: 8px;
+ border-radius: var(--radius-md);
padding: 1px 7px;
color: var(--muted);
margin-left: 6px;
@@ -1057,16 +950,15 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
cursor: pointer; user-select: none;
transition: background-color .12s ease;
}
-.gconfig-card__head--toggle:hover { background: var(--surface-hover); }
-.gconfig-card__head--toggle:hover .gconfig-card__chev { color: var(--vscode-focusBorder); }
+.gconfig-card__head--toggle:hover .gconfig-card__chev { color: var(--border-strong); }
.gconfig-card__head--toggle .gconfig-card__chev { transition: color .12s ease; }
.gconfig-card__chev { width: 11px; color: var(--muted); flex: 0 0 auto; }
.gconfig-card__meta {
flex: 0 0 auto;
- font-size: 10.5px;
+ font-size: var(--font-2xs);
color: var(--muted);
background: var(--surface-hover, var(--surface));
- border-radius: 8px;
+ border-radius: var(--radius-md);
padding: 1px 7px;
}
.account-override-form .config-panel { border-top: 1px solid var(--border); }
@@ -1089,11 +981,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
padding: 3px 6px;
border-radius: var(--radius-sm);
cursor: pointer;
- font-size: 12px;
+ font-size: var(--font-sm);
color: inherit;
}
.ms-list__item:hover { background: var(--surface-hover); }
-.ms-list__item input { accent-color: #3794ff; margin: 0; }
+.ms-list__item input { accent-color: var(--border-strong); margin: 0; }
.config-section-title--toggle { cursor: pointer; user-select: none; }
.config-section-title__chev { display: inline-block; width: 11px; margin-right: 2px; color: var(--muted); }
@@ -1112,7 +1004,7 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
max-height: 100vh;
padding: 6px 6px 6px 0;
border-right: 1px solid var(--border);
- background: var(--vscode-editor-background);
+ background: var(--bg-page);
}
.lay-side__item {
position: relative;
@@ -1122,25 +1014,25 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--muted);
- font-size: 13px;
+ font-size: var(--font-md);
cursor: pointer;
user-select: none;
}
-.lay-side__item:hover { background: var(--surface-hover); color: var(--vscode-editor-foreground); }
+.lay-side__item:hover { background: var(--surface-hover); color: var(--text-primary); }
.lay-side__item.is-active {
background: var(--surface-hover);
- color: var(--vscode-editor-foreground);
+ color: var(--text-primary);
box-shadow: inset 2px 0 0 var(--border-strong);
}
.lay-side__ico {
width: 14px; height: 14px;
flex: 0 0 auto;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
background: var(--border-strong);
opacity: .7;
}
.lay-side__item.is-active .lay-side__ico { opacity: 1; }
-.lay-side__foot { margin-top: auto; padding: 10px 12px; font-size: 11px; color: var(--muted); }
+.lay-side__foot { margin-top: auto; padding: 10px 12px; font-size: var(--font-xs); color: var(--muted); }
.lay-main { flex: 1; min-width: 0; }
/* ═══ 配置健康度条（任务分段顶部，真实快照数据） ══════════════ */
@@ -1156,11 +1048,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
background: var(--surface);
}
.rc-health__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; flex: 1; min-width: 0; }
-.rc-health__title { font-size: 12px; font-weight: 700; }
+.rc-health__title { font-size: var(--font-sm); font-weight: var(--weight-bold); }
.rc-health__cells { display: flex; gap: 8px; flex: 1; min-width: 0; }
.rc-cell { flex: 1; min-width: 96px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-hover); }
-.rc-cell__label { font-size: 10px; color: var(--muted); }
-.rc-cell__value { font-size: 16px; font-weight: 700; }
+.rc-cell__label { font-size: var(--font-2xs); color: var(--muted); }
+.rc-cell__value { font-size: var(--font-lg); font-weight: var(--weight-bold); }
.rc-cell.is-ok .rc-cell__value { color: var(--ok); }
.rc-cell.is-warn .rc-cell__value { color: var(--warn); }
@@ -1177,14 +1069,14 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
background: var(--surface);
}
.rc-queue__head { display: flex; align-items: baseline; gap: 8px; }
-.rc-queue__head b { font-size: 12px; }
+.rc-queue__head b { font-size: var(--font-sm); }
.rc-queue__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.rc-queue__chip {
padding: 3px 10px;
border: 1px solid var(--border);
- border-radius: 999px;
+ border-radius: var(--radius-pill);
background: var(--surface-hover);
- font-size: 11px;
+ font-size: var(--font-xs);
}
/* ═══ 运行状态灯（任务卡标题行） ══════════════════════════════ */
@@ -1215,11 +1107,11 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
overflow-y: auto;
padding: 10px 12px;
border: 1px solid var(--border-strong);
- border-radius: 10px;
+ border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-raised, var(--surface)) 88%, transparent);
backdrop-filter: blur(18px) saturate(1.5);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
- box-shadow: 0 14px 38px color-mix(in srgb, #000 40%, transparent);
+ box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(4px) scale(.98);
@@ -1237,50 +1129,50 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
.gpop::-webkit-scrollbar { width: 8px; }
.gpop::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--border-strong) 80%, transparent);
- border-radius: 4px;
+ border-radius: var(--radius-pill);
}
.gpop::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.gpop::-webkit-scrollbar-track { background: transparent; }
/* 条件组（field.type.sub_configs 显隐组）：与静态组一视同仁，蓝色系区分语义 */
.gpop .grp-tag {
padding: 1px 7px;
- border-radius: 999px;
- font-size: 10px;
- background: color-mix(in srgb, var(--vscode-charts-blue, #3794ff) 16%, transparent);
- color: var(--vscode-charts-blue, #3794ff);
+ border-radius: var(--radius-pill);
+ font-size: var(--font-2xs);
+ background: color-mix(in srgb, var(--run) 16%, transparent);
+ color: var(--run);
}
.gpop .it--rule {
- border-left-color: var(--vscode-charts-blue, #3794ff);
- background: color-mix(in srgb, var(--vscode-charts-blue, #3794ff) 10%, transparent);
- font-weight: 600;
+ border-left-color: var(--run);
+ background: color-mix(in srgb, var(--run) 10%, transparent);
+ font-weight: var(--weight-medium);
}
/* 条件组内的嵌套子组（条件组套条件组 / 静态组）保持节奏一致的间距 */
.gpop .grp-body .grp { margin: 6px 0 2px; }
@keyframes popfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gpop .pop-title {
display: flex; align-items: baseline; justify-content: space-between;
- margin-bottom: 2px; font-size: 12px; font-weight: 700;
+ margin-bottom: 2px; font-size: var(--font-sm); font-weight: var(--weight-bold);
animation: popfade .24s ease both;
}
-.gpop .pop-sub { font-size: 10px; font-weight: 400; color: var(--muted); }
+.gpop .pop-sub { font-size: var(--font-2xs); font-weight: var(--weight-regular); color: var(--muted); }
.gpop .grp { margin: 8px 0; animation: popfade .24s ease both; }
.gpop .grp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 2px 2px;
- font-size: 10px; letter-spacing: .08em; color: var(--muted);
+ font-size: var(--font-2xs); letter-spacing: .08em; color: var(--muted);
}
-.gpop .grp-head b { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--vscode-editor-foreground); }
+.gpop .grp-head b { font-size: var(--font-sm); font-weight: var(--weight-medium); letter-spacing: 0; color: var(--text-primary); }
.gpop .grp-head .cnt {
- padding: 1px 8px; border-radius: 999px;
+ padding: 1px 8px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--run) 14%, transparent);
- color: var(--run); font-size: 10px;
+ color: var(--run); font-size: var(--font-2xs);
}
.gpop .grp-body { position: relative; margin: 2px 0 0 8px; padding-left: 12px; }
.gpop .grp-body::before {
content: '';
position: absolute;
top: 2px; bottom: 6px; left: 0;
- width: 2px; border-radius: 1px;
+ width: 2px; border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--border-strong), transparent);
}
.gpop .it {
@@ -1288,9 +1180,9 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
display: flex; align-items: center;
margin: 4px 0; padding: 4px 9px;
border-left: 2px solid var(--border-strong);
- border-radius: 6px;
+ border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
- font-size: 12px; overflow: hidden;
+ font-size: var(--font-sm); overflow: hidden;
}
.gpop .it::before {
content: '';
@@ -1307,10 +1199,10 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
flex: 1 1 100%;
min-width: 0;
display: block;
- font-size: 10px;
+ font-size: var(--font-2xs);
line-height: 1.4;
max-height: 2.8em; /* 最长两条规则摘要封顶两行 */
- color: var(--vscode-charts-blue, #3794ff);
+ color: var(--run);
white-space: normal;
word-break: break-all;
overflow: hidden;
@@ -1326,3 +1218,63 @@ button.secondary:hover:not(:disabled) { background: var(--vscode-button-secondar
会覆盖 UA 的 [hidden]{display:none}，导致所有基于 hidden 的折叠/显隐在真机上失效
（jsdom 测试只查属性所以测不出来）。!important 确保 hidden 永远生效。 */
[hidden] { display: none !important; }
+
+/* ═══ 可点击元素适配（组件级；通用规范与控件基线见 shared/controls.css）═══ */
+
+/* 启动设置折叠头：行级可点击区（极浅色调 + 无描边）——有底色但不做方块 */
+.config-section-title--toggle {
+ border: 0;
+ border-radius: var(--radius-sm);
+ background: var(--bg-row);
+ padding: 4px 9px;
+ margin: var(--space-md, 10px) 1px var(--space-sm, 7px);
+}
+.config-section-title--toggle::after { display: none; }
+.config-section-title--toggle:hover {
+ background: var(--bg-row-hover);
+ color: var(--text-primary);
+}
+
+/* 任务业务分组头：行级可点击区（同上） */
+.subgroup-head {
+ border: 0;
+ border-radius: var(--radius-sm);
+ background: var(--bg-row);
+ padding: 5px 9px;
+ margin: 3px 0 4px;
+}
+.subgroup-head:hover {
+ background: var(--bg-row-hover);
+ color: var(--text-primary);
+}
+
+/* 卡片头折叠（全局组卡片 / 账号覆盖卡） */
+.gconfig-card__head--toggle:hover { background: var(--bg-row-hover); }
+.gconfig-card__head--toggle:focus-visible { outline: 1px solid var(--border-strong); outline-offset: -1px; }
+
+/* 配置分组折叠按键：只有 ▲/▼ 符号，描边 + 静态底色使其成为可见控件 */
+.config-group__toggle {
+ border: var(--border-width, 1px) solid var(--border);
+ background: var(--bg-control);
+}
+.config-group__toggle:hover:not(:disabled) { border-color: var(--border-strong); }
+
+/* kind 级任务组头（触发任务/一次性）：行级可点击区（同上） */
+.group-head {
+ border: 0;
+ border-radius: var(--radius-sm);
+ background: var(--bg-row);
+ padding: 6px 9px;
+ margin: 7px 0;
+}
+.group-head:hover {
+ background: var(--bg-row-hover);
+ color: var(--text-primary);
+}
+
+/* 行级可点击（游戏状态行等） */
+.gbar__row--link {
+ padding: 2px 7px;
+ border-radius: var(--radius-sm);
+ background: var(--bg-row);
+}
diff --git a/media/console/index.html b/media/console/index.html
index 30be6c2..8798c5e 100644
--- a/media/console/index.html
+++ b/media/console/index.html
@@ -5,6 +5,8 @@
+
+
diff --git a/media/shared/controls.css b/media/shared/controls.css
new file mode 100644
index 0000000..8aaac89
--- /dev/null
+++ b/media/shared/controls.css
@@ -0,0 +1,214 @@
+/* ═══════════════════════════════════════════════════════════════════════
+ ok-script-toolkit · 共享控件层（依赖 tokens.css，须在其后引入）
+
+ 提供全项目唯一的控件视觉语言：按钮家族、表单控件、卡片、标签、提示、
+ 空态/错误态、工具条。页面只允许组合这些类，不得自行重定义。
+ 详见 docs/design-system.md 第 3 / 7 / 8 条。
+ ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── Button（主）────────────────────────────────────────────────────── */
+button {
+ min-height: var(--control-h-md);
+ border: var(--border-width) solid transparent;
+ border-radius: var(--radius-sm);
+ padding: 5px 11px;
+ cursor: pointer;
+ font: inherit;
+ color: var(--btn-fg);
+ background: var(--btn-bg);
+ transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
+}
+button:hover:not(:disabled) { background: var(--btn-bg-hover); }
+button:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }
+button:disabled { cursor: not-allowed; opacity: .45; }
+
+/* ── Button（次）────────────────────────────────────────────────────── */
+button.secondary {
+ color: var(--btn-secondary-fg);
+ background: var(--btn-secondary-bg);
+}
+button.secondary:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }
+
+/* ── Button（迷你 / 工具条内）───────────────────────────────────────── */
+.mini-btn {
+ min-height: var(--control-h-sm);
+ padding: 2px 10px;
+ border-radius: var(--radius-sm);
+ font-size: var(--font-xs);
+ font-weight: var(--weight-medium);
+ white-space: nowrap;
+ color: var(--btn-secondary-fg);
+ background: var(--btn-secondary-bg);
+}
+.mini-btn:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }
+.mini-btn--primary {
+ color: var(--btn-fg);
+ background: var(--btn-bg);
+}
+.mini-btn--primary:hover:not(:disabled) { background: var(--btn-bg-hover); }
+/* 紧凑按钮的「已激活」态（工具条里的开关式按钮，如 绘制/坐标/轮播） */
+.mini-btn.is-active {
+ background: var(--btn-bg);
+ color: var(--btn-fg);
+}
+.mini-btn.is-active:hover:not(:disabled) { background: var(--btn-bg-hover); }
+.mini-btn--danger {
+ color: var(--err);
+ border-color: color-mix(in srgb, var(--err) 40%, var(--border));
+ background: var(--bg-control);
+}
+.mini-btn--danger:hover:not(:disabled) { background: var(--bg-control-hover); }
+
+/* ── Button（描边幽灵，静态底色 + 描边）────────────────────────────── */
+.btn-mini {
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 3px 8px;
+ font-size: var(--font-xs);
+ color: var(--text-muted);
+ background: var(--bg-control);
+}
+.btn-mini:hover { background: var(--bg-control-hover); color: var(--text-primary); border-color: var(--border-strong); }
+
+/* ── IconButton ─────────────────────────────────────────────────────── */
+.icon-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ min-height: 28px;
+ padding: 0;
+ border: var(--border-width) solid transparent;
+ border-radius: var(--radius-sm);
+ color: var(--text-muted);
+ background: var(--bg-control);
+ cursor: pointer;
+}
+.icon-btn:hover { background: var(--bg-control-hover); color: var(--text-primary); }
+
+/* ── 表单控件 ───────────────────────────────────────────────────────── */
+input, select, textarea { font: inherit; }
+
+input[type='text'],
+input[type='number'],
+input[type='search'],
+select,
+textarea {
+ min-height: var(--control-h-md);
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 4px 8px;
+ color: var(--input-fg);
+ background: var(--input-bg);
+ outline: none;
+}
+input:focus, select:focus, textarea:focus { border-color: var(--border-strong); }
+input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
+
+/* ── Checkbox / Radio / Switch（统一 accent）────────────────────────── */
+input[type='checkbox'],
+input[type='radio'] { accent-color: var(--border-strong); }
+
+/* ── Tag / Pill（计数、状态徽标）───────────────────────────────────── */
+.pill {
+ display: inline-flex;
+ align-items: center;
+ border-radius: var(--radius-pill);
+ padding: 1px 8px;
+ font-size: var(--font-xs);
+ color: var(--text-muted);
+ background: var(--bg-control);
+}
+
+/* ── Card ───────────────────────────────────────────────────────────── */
+.card {
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--radius-lg);
+ background: var(--bg-container);
+}
+
+/* ── 工具条（吸顶）──────────────────────────────────────────────────── */
+.panel-toolbar {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+ align-items: center;
+ padding: var(--space-sm) 0;
+ background: var(--bg-page);
+}
+
+/* ── 区块标题 ───────────────────────────────────────────────────────── */
+.panel-section-title {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ margin: var(--space-md) 1px var(--space-sm);
+ color: var(--text-muted);
+ font-size: var(--font-xs);
+ font-weight: var(--weight-medium);
+ letter-spacing: .04em;
+ text-transform: uppercase;
+}
+
+/* ── 空态 / 错误态 / 提示 ───────────────────────────────────────────── */
+.panel-empty {
+ padding: var(--space-xl) var(--space-md);
+ text-align: center;
+ color: var(--text-muted);
+ font-size: var(--font-sm);
+ white-space: pre-line;
+ line-height: 1.8;
+}
+.panel-broken {
+ border: var(--border-width) solid color-mix(in srgb, var(--err) 45%, var(--border));
+ border-radius: var(--radius-md);
+ padding: var(--space-md);
+ color: var(--err);
+ font-size: var(--font-sm);
+ white-space: pre-wrap;
+}
+.panel-hint {
+ color: var(--text-muted);
+ font-size: var(--font-xs);
+ line-height: 1.6;
+}
+
+/* ── 分隔线 ─────────────────────────────────────────────────────────── */
+.hr {
+ height: 1px;
+ border: 0;
+ background: var(--border);
+}
+
+/* ═══ 可点击性硬规范（docs/design-system.md 第 3 条）═══════════════════
+ ① 可点击控件必须与容器异色或有描边；
+ ② 不得只呈现一个光秃文字；
+ ③ 未悬浮状态就必须有底色；
+ ④ 行级可点击区必须有 hover 反馈。
+ 分层（2026-09-23 定案）：真按钮 = --bg-control + 描边；行级可点击区（组头/折叠
+ 标题行）= --bg-row（极浅色调、无描边）——两者都「默认可识别」，但权重不同，
+ 避免整个侧栏变成层层方块。 */
+
+[role='button'] { cursor: pointer; }
+[role='button']:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 1px; }
+
+/* 真按钮：控件面 + 描边 */
+.mini-btn--danger,
+.btn-mini,
+.icon-btn,
+.config-group__toggle {
+ background: var(--bg-control);
+}
+
+/* 行级可点击区（组头 / 折叠标题行 / tab）：极浅色调，不参与按钮权重 */
+.seg__btn:not(.is-active),
+.gbar__row--link,
+.group-head,
+.subgroup-head,
+.config-section-title--toggle {
+ background: var(--bg-row);
+}
diff --git a/media/shared/tokens.css b/media/shared/tokens.css
new file mode 100644
index 0000000..e76dd96
--- /dev/null
+++ b/media/shared/tokens.css
@@ -0,0 +1,137 @@
+/* ═══════════════════════════════════════════════════════════════════════
+ ok-script-toolkit · Design Tokens（全面板唯一视觉真源）
+
+ 规则（见 docs/design-system.md）：
+ - 颜色、间距、尺寸、圆角、边框、阴影一律引用本文件 token；
+ - 页面 / 组件不得自造颜色与尺寸，不得直引 --vscode-* 变量（本文件除外）；
+ - 层级：页面背景 > 一级容器 > 控件面 > Hover/Active；
+ - 真按钮（Button/IconButton）默认态用 --bg-control（控件面 + 描边）；
+ - 行级可点击区（组头 / 折叠标题行）用 --bg-row（极浅色调、无描边）——
+ 同样「未悬浮即有底色」，但不与按钮同权重，避免层层方块（2026-09-23 定案）。
+ ═══════════════════════════════════════════════════════════════════════ */
+
+:root {
+ color-scheme: light dark;
+
+ /* ── 1. 骨架与容器 ───────────────────────────────────────────────── */
+ --bg-page: var(--vscode-editor-background, #1e1e1e);
+ --bg-container: var(--vscode-editorWidget-background, color-mix(in srgb, var(--vscode-editor-background) 92%, var(--vscode-foreground) 8%));
+ --bg-container-raised: var(--vscode-sideBar-background, var(--bg-container));
+
+ /* 兼容别名（既有样式沿用，新代码请用上面的语义名） */
+ --surface: var(--bg-container);
+ --surface-raised: var(--bg-container-raised);
+
+ /* ── 2. 控件面与交互态 ───────────────────────────────────────────── */
+ --bg-control: color-mix(in srgb, var(--vscode-button-secondaryBackground, var(--bg-container-raised)) 80%, var(--vscode-foreground) 14%);
+ --bg-control-hover: color-mix(in srgb, var(--bg-control) 82%, var(--vscode-foreground) 18%);
+ --bg-control-active: color-mix(in srgb, var(--bg-control) 72%, var(--vscode-foreground) 26%);
+ --surface-hover: var(--vscode-list-hoverBackground, color-mix(in srgb, var(--bg-container) 86%, var(--vscode-focusBorder) 14%));
+
+ /* 行级可点击区（组头 / 折叠标题行）：极浅色调——默认可识别，但不形成方块墙 */
+ --bg-row: color-mix(in srgb, var(--bg-control) 42%, transparent);
+ --bg-row-hover: color-mix(in srgb, var(--bg-control) 70%, transparent);
+
+ /* ── 6. VS Code 主题映射（本文件是全项目唯一允许直引 --vscode-* 的地方）──
+ 面板 CSS 一律用下面这些语义 token，便于换主题/换宿主时一处调整。 */
+ --font-ui: var(--vscode-font-family, system-ui, 'Segoe UI', sans-serif);
+ --font-mono: var(--vscode-editor-font-family, ui-monospace, monospace);
+ --font-size-root: var(--vscode-font-size, 13px);
+ --btn-bg: var(--vscode-button-background, #0e639c);
+ --btn-fg: var(--vscode-button-foreground, #ffffff);
+ --btn-bg-hover: var(--vscode-button-hoverBackground, #1177bb);
+ --btn-secondary-bg: var(--vscode-button-secondaryBackground, color-mix(in srgb, var(--text-primary) 12%, transparent));
+ --btn-secondary-fg: var(--vscode-button-secondaryForeground, var(--text-primary));
+ --btn-secondary-bg-hover: var(--vscode-button-secondaryHoverBackground, color-mix(in srgb, var(--text-primary) 18%, transparent));
+ --input-bg: var(--vscode-input-background, var(--bg-container));
+ --input-fg: var(--vscode-input-foreground, var(--text-primary));
+ --input-border: var(--vscode-input-border, var(--border));
+ --input-placeholder: var(--vscode-input-placeholderForeground, var(--text-muted));
+ --badge-bg: var(--vscode-badge-background, var(--border-strong));
+ --badge-fg: var(--vscode-badge-foreground, var(--text-primary));
+ --selected-bg: var(--vscode-list-activeSelectionBackground, color-mix(in srgb, var(--border-strong) 26%, transparent));
+ --selected-fg: var(--vscode-list-activeSelectionForeground, var(--text-primary));
+ --danger-bg: var(--vscode-inputValidation-errorBackground, color-mix(in srgb, var(--err) 30%, var(--bg-container)));
+ --warn-bg: var(--vscode-inputValidation-warningBackground, color-mix(in srgb, var(--warn) 14%, var(--bg-container)));
+ --info-bg: var(--vscode-inputValidation-infoBackground, color-mix(in srgb, var(--border-strong) 12%, var(--bg-container)));
+ --scrollbar: var(--vscode-scrollbarSlider-background, color-mix(in srgb, var(--text-muted) 35%, transparent));
+
+ /* ── 遮罩与投影（跨主题统一，故不走语义色）───────────────────────── */
+ --scrim: color-mix(in srgb, #000 55%, transparent);
+ --scrim-strong: color-mix(in srgb, #000 82%, transparent);
+ --on-accent: color-mix(in srgb, #000 78%, transparent);
+ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 18%, transparent);
+ --shadow-lg: 0 12px 36px color-mix(in srgb, #000 42%, transparent);
+
+ /* 语法糖别名（历史命名，与上面等价） */
+ --clickable-bg: var(--bg-control);
+ --clickable-bg-hover: var(--bg-control-hover);
+
+ /* ── 3. 边框 ────────────────────────────────────────────────────── */
+ --border: var(--vscode-panel-border, color-mix(in srgb, var(--vscode-foreground) 18%, transparent));
+ --border-strong: var(--vscode-focusBorder, #007acc);
+ --border-width: 1px;
+
+ /* ── 4. 文字 ────────────────────────────────────────────────────── */
+ --text-primary: var(--vscode-editor-foreground);
+ --text-muted: var(--vscode-descriptionForeground, color-mix(in srgb, var(--vscode-editor-foreground) 64%, transparent));
+ --text-disabled: color-mix(in srgb, var(--vscode-editor-foreground) 38%, transparent);
+
+ /* 兼容别名 */
+ --muted: var(--text-muted);
+ --fg: var(--text-primary);
+
+ /* ── 5. 语义状态色 ──────────────────────────────────────────────── */
+ --ok: var(--vscode-charts-green, #3fb950);
+ --run: var(--vscode-charts-blue, #4a9eff);
+ --warn: var(--vscode-charts-yellow, #d7a12c);
+ --pause: var(--vscode-charts-orange, #d18616);
+ --err: var(--vscode-errorForeground, #f44);
+
+ /* ── 6. 间距（spacing scale）─────────────────────────────────────── */
+ --space-xs: 4px;
+ --space-sm: 6px;
+ --space-md: 10px;
+ --space-lg: 14px;
+ --space-xl: 20px;
+
+ /* ── 7. 圆角与阴影 ──────────────────────────────────────────────── */
+ --radius-sm: 5px;
+ --radius-md: 8px;
+ --radius-lg: 11px;
+ --radius-pill: 999px;
+ --shadow: 0 4px 14px color-mix(in srgb, #000 15%, transparent);
+
+ /* ── 8. 控件尺寸（高度）──────────────────────────────────────────── */
+ --control-h-sm: 24px;
+ --control-h-md: 30px;
+ --control-h-lg: 34px;
+
+ /* ── 9. 字号与字重 ──────────────────────────────────────────────── */
+ --font-2xs: 10px;
+ --font-xs: 11px;
+ --font-sm: 12px;
+ --font-md: 13px;
+ --font-lg: 15px;
+ --font-xl: 20px;
+ --weight-regular: 400;
+ --weight-medium: 500;
+ --weight-bold: 700;
+}
+
+* { box-sizing: border-box; }
+
+html, body { min-height: 100%; }
+
+body {
+ margin: 0;
+ color: var(--text-primary);
+ background: var(--bg-page);
+ font-family: var(--vscode-font-family);
+ font-size: var(--vscode-font-size, var(--font-md));
+ line-height: 1.5;
+}
+
+/* hidden 属性兜底：作者样式里的 display 会覆盖 UA 的 [hidden]{display:none}，
+ 导致所有基于 hidden 的折叠/显隐在真机上失效（jsdom 测试只查属性所以测不出来）。 */
+[hidden] { display: none !important; }
diff --git a/media/tempScreenshots/index.html b/media/tempScreenshots/index.html
index 94bc5b3..5c4a30a 100644
--- a/media/tempScreenshots/index.html
+++ b/media/tempScreenshots/index.html
@@ -3,14 +3,16 @@
+
+
-
-
-
+
+
@@ -48,8 +50,8 @@
-
-
+
+
diff --git a/media/tempScreenshots/style.css b/media/tempScreenshots/style.css
index b804021..3f87cd7 100644
--- a/media/tempScreenshots/style.css
+++ b/media/tempScreenshots/style.css
@@ -1,297 +1,266 @@
- * { box-sizing: border-box; margin: 0; padding: 0; }
- html, body { height: 100%; }
- body {
- color: var(--vscode-foreground);
- background: var(--vscode-sideBar-background, var(--vscode-editor-background));
- font-family: var(--vscode-font-family);
- font-size: var(--vscode-font-size, 13px);
- overflow: hidden;
- display: flex;
- flex-direction: column;
- }
+/* 临时截图面板（共享层见 media/shared/tokens.css + controls.css）
+ 工具条/底部操作条按钮用共享 .mini-btn；本文件保留舞台、选框、缩略图与提示条。 */
- /* ---------- 工具栏 ---------- */
- .toolbar {
- display: flex;
- align-items: center;
- gap: 4px;
- padding: 5px 6px;
- flex-shrink: 0;
- flex-wrap: wrap;
- }
- .toolbar button,
- .stage-bar button {
- padding: 3px 8px;
- border-radius: 3px;
- border: 1px solid var(--vscode-button-secondaryBackground, rgba(128,128,128,.35));
- background: var(--vscode-button-secondaryBackground);
- color: var(--vscode-button-secondaryForeground);
- cursor: pointer;
- font-size: 11px;
- white-space: nowrap;
- }
- .toolbar button:hover,
- .stage-bar button:hover { background: var(--vscode-button-secondaryHoverBackground); }
- .toolbar button.active,
- .stage-bar button.active {
- background: var(--vscode-button-background);
- color: var(--vscode-button-foreground);
- border-color: var(--vscode-button-background);
- }
- .spacer { flex: 1; }
- .toolbar .fg-check {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- font-size: 12px;
- color: var(--vscode-foreground);
- cursor: pointer;
- user-select: none;
- white-space: nowrap;
- }
- .toolbar .fg-check input { margin: 0; }
- .count { font-size: 11px; opacity: .65; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; }
+body {
+ color: var(--text-primary);
+ background: var(--bg-page);
+ font-family: var(--font-ui);
+ font-size: var(--font-size-root);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
- /* ---------- 舞台（单图预览 / 0.1s 轮播） ---------- */
- .stage {
- position: relative;
- flex: 1 1 45%;
- min-height: 110px;
- margin: 0 6px;
- overflow: hidden;
- border: 1px solid var(--vscode-panel-border, rgba(128,128,128,.3));
- border-radius: 4px;
- background:
- repeating-conic-gradient(rgba(128,128,128,.12) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
- cursor: crosshair;
- }
- .stage-inner {
- position: absolute;
- left: 0; top: 0;
- transform-origin: 0 0;
- }
- .stage-inner img {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- object-fit: contain;
- display: none;
- image-rendering: auto;
- -webkit-user-drag: none;
- user-select: none;
- }
- .stage-inner img.active { display: block; }
- .stage-overlay {
- position: absolute;
- inset: 0;
- z-index: 2;
- }
- .sel-box {
- position: absolute;
- display: none;
- border: 1px dashed var(--vscode-charts-green, #3fb950);
- background: rgba(63,185,80,.16);
- pointer-events: none;
- }
- .sel-box.visible { display: block; }
- /* 8 向手柄，纯视觉（命中判定在 JS 里按坐标做），由 CSS 自行定位 */
- .sel-handle {
- position: absolute;
- width: 8px;
- height: 8px;
- margin: -4px 0 0 -4px;
- border-radius: 2px;
- background: var(--vscode-charts-green, #3fb950);
- border: 1px solid rgba(0,0,0,.45);
- }
- .sel-handle[data-h="tl"] { left: 0; top: 0; }
- .sel-handle[data-h="t"] { left: 50%; top: 0; }
- .sel-handle[data-h="tr"] { left: 100%; top: 0; }
- .sel-handle[data-h="r"] { left: 100%; top: 50%; }
- .sel-handle[data-h="br"] { left: 100%; top: 100%; }
- .sel-handle[data-h="b"] { left: 50%; top: 100%; }
- .sel-handle[data-h="bl"] { left: 0; top: 100%; }
- .sel-handle[data-h="l"] { left: 0; top: 50%; }
- /* 拖拽预览阶段不显示手柄 */
- .sel-box.preview .sel-handle,
- .sel-box.preview .sel-coord { display: none; }
- .sel-coord {
- position: absolute;
- left: 0;
- top: -15px;
- font: bold 11px var(--vscode-editor-font-family, monospace);
- color: var(--vscode-charts-green, #3fb950);
- white-space: nowrap;
- text-shadow: 0 0 3px rgba(0,0,0,.85);
- }
- .stage-empty {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding: 8px;
- font-size: 11px;
- line-height: 1.5;
- opacity: .55;
- pointer-events: none;
- white-space: pre-line;
- }
+/* ── 工具栏 / 底部操作条 ─────────────────────────────────────────────── */
+.toolbar { flex-shrink: 0; }
+.toolbar .fg-check {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ color: var(--text-primary);
+ font-size: var(--font-sm);
+ cursor: pointer;
+ user-select: none;
+ white-space: nowrap;
+}
+.toolbar .fg-check input { margin: 0; }
+.spacer { flex: 1; }
+.count { color: var(--text-muted); font-size: var(--font-xs); }
- /* ---------- 舞台操作条 ---------- */
- .stage-bar {
- display: flex;
- align-items: center;
- gap: 4px;
- padding: 5px 6px;
- flex-shrink: 0;
- }
- .coord {
- font-size: 10px;
- opacity: .8;
- font-family: var(--vscode-editor-font-family, monospace);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 60%;
- }
+.stage-bar {
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+ padding: 5px 6px;
+ flex-shrink: 0;
+}
- /* ---------- 缩略图网格 ---------- */
- .grid {
- flex: 1 1 55%;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 0 6px 8px;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
- gap: 6px;
- align-content: start;
- }
- .card {
- position: relative;
- border: 1px solid var(--vscode-panel-border, rgba(128,128,128,.3));
- border-radius: 4px;
- overflow: hidden;
- background: var(--vscode-editor-background);
- cursor: pointer;
- user-select: none;
- }
- .card.active { border-color: var(--vscode-focusBorder, #0078d4); box-shadow: 0 0 0 1px var(--vscode-focusBorder, #0078d4); }
- .card.dragging { opacity: .45; }
- .card img {
- display: block;
- width: 100%;
- height: 56px;
- object-fit: contain;
- background: rgba(128,128,128,.1);
- -webkit-user-drag: none;
- }
- .card .name {
- font-size: 9px;
- opacity: .6;
- padding: 2px 3px;
- text-align: center;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- /* 操作按钮常驻可见：跨 webview 拖拽在 VS Code 里不可用，
- 「→ 添加到标注管理」是导入的主入口，不能只在 hover 时才露出 */
- .card .actions {
- position: absolute;
- top: 2px;
- right: 2px;
- display: flex;
- gap: 2px;
- opacity: .82;
- transition: opacity .12s ease;
- }
- .card:hover .actions { opacity: 1; }
- .card .actions button {
- width: 18px;
- height: 18px;
- line-height: 1;
- padding: 0;
- font-size: 12px;
- border-radius: 3px;
- border: none;
- cursor: pointer;
- background: rgba(0,0,0,.6);
- color: #fff;
- }
- .card .actions button:hover { background: rgba(0,0,0,.85); }
- .card .actions button.send { background: rgba(0,90,158,.85); }
- .card .actions button.send:hover { background: rgba(0,120,212,.95); }
+/* ── 舞台（单图预览 / 0.1s 轮播）─────────────────────────────────────── */
+.stage {
+ position: relative;
+ flex: 1 1 45%;
+ min-height: 110px;
+ margin: 0 6px;
+ overflow: hidden;
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--radius-md);
+ background: repeating-conic-gradient(
+ color-mix(in srgb, var(--text-muted) 12%, transparent) 0% 25%, transparent 0% 50%
+ ) 50% / 16px 16px;
+ cursor: crosshair;
+}
+.stage-inner {
+ position: absolute;
+ left: 0; top: 0;
+ transform-origin: 0 0;
+}
+.stage-inner img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: none;
+ image-rendering: auto;
+ -webkit-user-drag: none;
+ user-select: none;
+}
+.stage-inner img.active { display: block; }
+.stage-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 2;
+}
+.sel-box {
+ position: absolute;
+ display: none;
+ border: 1px dashed var(--ok);
+ background: color-mix(in srgb, var(--ok) 16%, transparent);
+ pointer-events: none;
+}
+.sel-box.visible { display: block; }
+/* 8 向手柄，纯视觉（命中判定在 JS 里按坐标做），由 CSS 自行定位 */
+.sel-handle {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ margin: -4px 0 0 -4px;
+ border-radius: var(--radius-sm);
+ background: var(--ok);
+ border: 1px solid var(--scrim);
+}
+.sel-handle[data-h="tl"] { left: 0; top: 0; }
+.sel-handle[data-h="t"] { left: 50%; top: 0; }
+.sel-handle[data-h="tr"] { left: 100%; top: 0; }
+.sel-handle[data-h="r"] { left: 100%; top: 50%; }
+.sel-handle[data-h="br"] { left: 100%; top: 100%; }
+.sel-handle[data-h="b"] { left: 50%; top: 100%; }
+.sel-handle[data-h="bl"] { left: 0; top: 100%; }
+.sel-handle[data-h="l"] { left: 0; top: 50%; }
+/* 拖拽预览阶段不显示手柄 */
+.sel-box.preview .sel-handle,
+.sel-box.preview .sel-coord { display: none; }
+.sel-coord {
+ position: absolute;
+ left: 0;
+ top: -15px;
+ font: var(--weight-bold) var(--font-xs) var(--font-mono);
+ color: var(--ok);
+ white-space: nowrap;
+ /* 文字压在截图上，两种主题都需要暗色底衬 */
+ text-shadow: 0 0 3px var(--scrim-strong);
+}
+.stage-empty {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: var(--space-sm);
+ color: var(--text-muted);
+ font-size: var(--font-xs);
+ line-height: 1.5;
+ pointer-events: none;
+ white-space: pre-line;
+}
- .empty {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding: 12px;
- font-size: 11px;
- line-height: 1.6;
- opacity: .55;
- white-space: pre-line;
- }
+.coord {
+ color: var(--text-muted);
+ font-size: var(--font-2xs);
+ font-family: var(--font-mono);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 60%;
+}
- /* ---------- 提示条 ---------- */
- .toast {
- position: fixed;
- left: 6px;
- right: 6px;
- bottom: 6px;
- padding: 5px 8px;
- border-radius: 4px;
- font-size: 11px;
- background: var(--vscode-editorWidget-background, #252526);
- color: var(--vscode-editorWidget-foreground, inherit);
- border: 1px solid var(--vscode-panel-border, rgba(128,128,128,.4));
- box-shadow: 0 2px 10px rgba(0,0,0,.3);
- opacity: 0;
- transform: translateY(6px);
- transition: opacity .15s ease, transform .15s ease;
- pointer-events: none;
- word-break: break-all;
- }
- .toast.visible { opacity: 1; transform: translateY(0); }
- .toast.error { border-color: var(--vscode-errorForeground, #f14c4c); }
+/* ── 缩略图网格 ─────────────────────────────────────────────────────── */
+.grid {
+ flex: 1 1 55%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 0 6px var(--space-sm);
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
+ gap: var(--space-sm);
+ align-content: start;
+}
+.card {
+ position: relative;
+ overflow: hidden;
+ background: var(--bg-container);
+ cursor: pointer;
+ user-select: none;
+}
+.card.active {
+ border-color: var(--border-strong);
+ box-shadow: 0 0 0 1px var(--border-strong);
+}
+.card.dragging { opacity: .45; }
+.card img {
+ display: block;
+ width: 100%;
+ height: 56px;
+ object-fit: contain;
+ background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+ -webkit-user-drag: none;
+}
+.card .name {
+ font-size: var(--font-2xs);
+ color: var(--text-muted);
+ padding: 2px 3px;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+/* 操作按钮常驻可见：跨 webview 拖拽在 VS Code 里不可用，
+ 「→ 添加到标注管理」是导入的主入口，不能只在 hover 时才露出 */
+.card .actions {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ display: flex;
+ gap: 2px;
+ opacity: .85;
+ transition: opacity .12s ease;
+}
+.card:hover .actions { opacity: 1; }
+.card .actions button {
+ width: 18px;
+ height: 18px;
+ min-height: 18px;
+ line-height: 1;
+ padding: 0;
+ font-size: var(--font-sm);
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--bg-control);
+ color: var(--text-primary);
+}
+.card .actions button:hover { background: var(--bg-control-hover); border-color: var(--border-strong); }
+.card .actions button.send {
+ border-color: color-mix(in srgb, var(--run) 55%, var(--border));
+ background: color-mix(in srgb, var(--run) 22%, var(--bg-control));
+}
+.card .actions button.send:hover { background: color-mix(in srgb, var(--run) 34%, var(--bg-control-hover)); }
- /* ---------- 内联确认条（webview 中不使用 window.confirm） ---------- */
- .confirm {
- position: fixed;
- left: 6px;
- right: 6px;
- bottom: 6px;
- display: none;
- flex-direction: column;
- gap: 6px;
- padding: 8px;
- border-radius: 4px;
- font-size: 11px;
- line-height: 1.5;
- background: var(--vscode-editorWidget-background, #252526);
- color: var(--vscode-editorWidget-foreground, inherit);
- border: 1px solid var(--vscode-panel-border, rgba(128,128,128,.4));
- box-shadow: 0 2px 10px rgba(0,0,0,.35);
- z-index: 20;
- }
- .confirm.visible { display: flex; }
- .confirm-actions { display: flex; justify-content: flex-end; gap: 6px; }
- .confirm-actions button {
- padding: 3px 10px;
- border-radius: 3px;
- font-size: 11px;
- cursor: pointer;
- border: 1px solid var(--vscode-button-secondaryBackground, rgba(128,128,128,.35));
- background: var(--vscode-button-secondaryBackground);
- color: var(--vscode-button-secondaryForeground);
- }
- .confirm-actions button.danger {
- background: var(--vscode-inputValidation-errorBorder, #a1260d);
- border-color: var(--vscode-inputValidation-errorBorder, #a1260d);
- color: #fff;
- }
+.empty {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: var(--space-md);
+ color: var(--text-muted);
+ font-size: var(--font-xs);
+ line-height: 1.6;
+ white-space: pre-line;
+}
+
+/* ── 提示条 ─────────────────────────────────────────────────────────── */
+.toast {
+ position: fixed;
+ left: 6px;
+ right: 6px;
+ bottom: 6px;
+ padding: 5px var(--space-sm);
+ border-radius: var(--radius-md);
+ font-size: var(--font-xs);
+ background: var(--bg-container-raised);
+ color: var(--text-primary);
+ border: var(--border-width) solid var(--border);
+ box-shadow: var(--shadow);
+ opacity: 0;
+ transform: translateY(6px);
+ transition: opacity .15s ease, transform .15s ease;
+ pointer-events: none;
+ word-break: break-all;
+}
+.toast.visible { opacity: 1; transform: translateY(0); }
+.toast.error { border-color: var(--err); }
+
+/* ── 内联确认条（webview 中不使用 window.confirm）───────────────────── */
+.confirm {
+ position: fixed;
+ left: 6px;
+ right: 6px;
+ bottom: 6px;
+ display: none;
+ flex-direction: column;
+ gap: var(--space-sm);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
+ font-size: var(--font-xs);
+ line-height: 1.5;
+ background: var(--bg-container-raised);
+ color: var(--text-primary);
+ border: var(--border-width) solid var(--border);
+ box-shadow: var(--shadow);
+ z-index: 20;
+}
+.confirm.visible { display: flex; }
+.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }
diff --git a/media/templateAssetPanel/index.html b/media/templateAssetPanel/index.html
index 64e774b..71a4ba6 100644
--- a/media/templateAssetPanel/index.html
+++ b/media/templateAssetPanel/index.html
@@ -3,14 +3,16 @@
+
+
-