diff --git a/courseGrabber.js b/courseGrabber.js
index 1651257..167f6c3 100644
--- a/courseGrabber.js
+++ b/courseGrabber.js
@@ -2102,17 +2102,29 @@
const style = document.createElement("style");
style.textContent = `
#courseGrabberUI {
+ --cg-ink: #071a2d;
+ --cg-surface: #0c243a;
+ --cg-surface-raised: #112e47;
+ --cg-surface-quiet: #0a2034;
+ --cg-border: #2a4b66;
+ --cg-text: #f5f2e9;
+ --cg-muted: #a8b8c6;
+ --cg-success: #42d6a4;
+ --cg-warning: #f3b64d;
+ --cg-danger: #e75d64;
+ --cg-focus: #8ad9ff;
position: fixed;
top: 20px;
right: 20px;
- width: 420px;
- max-height: 90vh;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: 16px;
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+ width: min(440px, calc(100vw - 32px));
+ max-height: min(90vh, 760px);
+ background: var(--cg-ink);
+ border: 1px solid var(--cg-border);
+ border-radius: 18px;
+ box-shadow: 0 24px 70px rgba(4, 15, 27, 0.42), 0 2px 0 rgba(255, 255, 255, 0.05) inset;
z-index: 999999;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
- color: white;
+ font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+ color: var(--cg-text);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -2121,8 +2133,9 @@
box-sizing: border-box;
}
.cg-header {
- padding: 20px;
- background: rgba(0,0,0,0.2);
+ padding: 15px 16px;
+ background: #081e32;
+ border-bottom: 1px solid var(--cg-border);
cursor: move;
display: flex;
justify-content: space-between;
@@ -2130,226 +2143,259 @@
user-select: none;
}
.cg-title {
- font-size: 18px;
- font-weight: bold;
+ font-size: 16px;
+ font-weight: 700;
+ letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
}
- .cg-close {
- background: rgba(255,255,255,0.2);
- border: none;
- color: white;
- width: 32px;
- height: 32px;
+ .cg-controls {
+ display: flex;
+ gap: 6px;
+ }
+ .cg-close,
+ .cg-minimize {
+ background: #173750;
+ border: 1px solid #31536c;
+ color: var(--cg-text);
+ width: 30px;
+ height: 30px;
border-radius: 8px;
cursor: pointer;
- font-size: 18px;
- display: flex;
+ font-size: 17px;
+ display: inline-flex;
align-items: center;
justify-content: center;
- transition: all 0.3s;
+ transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cg-close:hover {
- background: rgba(255,255,255,0.3);
+ background: #5a2632;
+ border-color: var(--cg-danger);
transform: rotate(90deg);
}
+ .cg-minimize:hover {
+ background: #24506e;
+ border-color: var(--cg-focus);
+ }
.cg-body {
- padding: 20px;
+ padding: 14px;
overflow-y: auto;
flex: 1;
+ scrollbar-color: #496780 transparent;
}
.cg-section {
- background: rgba(255,255,255,0.1);
+ background: var(--cg-surface-raised);
+ border: 1px solid #244660;
border-radius: 12px;
- padding: 16px;
- margin-bottom: 16px;
- backdrop-filter: blur(10px);
+ padding: 13px;
+ margin-bottom: 12px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
+ }
+ .cg-section:last-child {
+ margin-bottom: 0;
}
.cg-section-title {
- font-size: 14px;
- font-weight: bold;
- margin-bottom: 12px;
- opacity: 0.9;
+ color: var(--cg-text);
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.cg-input {
width: 100%;
- padding: 10px 12px;
- border: 2px solid rgba(255,255,255,0.2);
- background: rgba(255,255,255,0.1);
+ padding: 10px 11px;
+ border: 1px solid #365873;
+ background: var(--cg-surface-quiet);
border-radius: 8px;
- color: white;
+ color: var(--cg-text);
font-size: 13px;
margin-bottom: 8px;
- transition: all 0.3s;
+ transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
+ }
+ .cg-input:hover {
+ border-color: #58809d;
}
.cg-input:focus {
outline: none;
- border-color: rgba(255,255,255,0.5);
- background: rgba(255,255,255,0.15);
+ border-color: var(--cg-focus);
+ background: #0d2940;
+ box-shadow: 0 0 0 3px rgba(138, 217, 255, 0.16);
}
.cg-input::placeholder {
- color: rgba(255,255,255,0.5);
+ color: #8398aa;
}
.cg-btn {
- padding: 10px 20px;
- border: none;
+ min-height: 36px;
+ padding: 9px 13px;
+ border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
- font-weight: bold;
- transition: all 0.3s;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
}
+ .cg-btn:hover:not(:disabled) {
+ transform: translateY(-1px);
+ }
+ .cg-btn:disabled {
+ cursor: not-allowed;
+ opacity: 0.48;
+ }
.cg-btn-primary {
- background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
- color: #333;
+ background: var(--cg-success);
+ border-color: #68e4ba;
+ color: #06261f;
+ box-shadow: 0 7px 18px rgba(66, 214, 164, 0.16);
}
- .cg-btn-primary:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(67,233,123,0.4);
+ .cg-btn-primary:hover:not(:disabled) {
+ background: #66e1b7;
+ box-shadow: 0 9px 20px rgba(66, 214, 164, 0.25);
}
.cg-btn-danger {
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
- color: white;
+ background: #9e3d49;
+ border-color: #d55a63;
+ color: #fff7f5;
}
- .cg-btn-danger:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 20px rgba(245,87,108,0.4);
+ .cg-btn-danger:hover:not(:disabled) {
+ background: var(--cg-danger);
}
.cg-btn-secondary {
- background: rgba(255,255,255,0.2);
- color: white;
+ background: #173a55;
+ border-color: #315873;
+ color: #dfeaf0;
}
- .cg-btn-secondary:hover {
- background: rgba(255,255,255,0.3);
+ .cg-btn-secondary:hover:not(:disabled) {
+ background: #24516f;
+ border-color: #56809d;
}
.cg-btn-small {
- padding: 6px 12px;
+ min-height: 32px;
+ padding: 6px 10px;
font-size: 12px;
}
.cg-btn-group {
display: flex;
gap: 8px;
- margin-top: 12px;
+ margin-top: 10px;
}
.cg-course-list {
- max-height: 200px;
+ max-height: 220px;
overflow-y: auto;
- margin-top: 12px;
+ margin-top: 10px;
+ scrollbar-color: #496780 transparent;
}
.cg-course-item {
- background: rgba(255,255,255,0.1);
- padding: 12px;
- border-radius: 8px;
+ background: #0d2941;
+ border: 1px solid #284c68;
+ padding: 11px;
+ border-radius: 9px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
- transition: all 0.3s;
+ gap: 10px;
+ transition: background-color 160ms ease, border-color 160ms ease;
+ }
+ .cg-course-item:last-child {
+ margin-bottom: 0;
}
.cg-course-item:hover {
- background: rgba(255,255,255,0.15);
+ background: #11334f;
+ border-color: #4e7795;
}
.cg-course-info {
flex: 1;
+ min-width: 0;
font-size: 13px;
}
.cg-course-code {
- font-weight: bold;
- margin-bottom: 4px;
+ color: var(--cg-text);
+ font-weight: 700;
+ margin-bottom: 5px;
+ overflow-wrap: anywhere;
}
.cg-course-meta {
+ color: var(--cg-muted);
font-size: 11px;
- opacity: 0.8;
}
.cg-status {
- padding: 8px 16px;
- background: rgba(255,255,255,0.1);
+ padding: 10px 11px;
+ background: #0c2b40;
+ border: 1px solid #28536a;
border-radius: 8px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
- margin-bottom: 8px;
}
.cg-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
- background: #43e97b;
- animation: pulse 2s infinite;
+ background: var(--cg-success);
+ box-shadow: 0 0 0 4px rgba(66, 214, 164, 0.13);
+ animation: cg-pulse 2s infinite;
}
- @keyframes pulse {
+ @keyframes cg-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.cg-log-area {
- background: rgba(0,0,0,0.3);
+ background: #061827;
+ border: 1px solid #203f57;
border-radius: 8px;
- padding: 12px;
- max-height: 150px;
+ padding: 11px;
+ max-height: 168px;
overflow-y: auto;
+ color: #d5e1e8;
font-size: 11px;
- font-family: 'Monaco', 'Menlo', monospace;
- line-height: 1.6;
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+ line-height: 1.65;
+ scrollbar-color: #496780 transparent;
}
.cg-log-item {
margin-bottom: 4px;
- opacity: 0.9;
}
- .cg-log-success { color: #43e97b; }
- .cg-log-error { color: #f5576c; }
- .cg-log-warning { color: #ffa500; }
- .cg-log-info { color: #38f9d7; }
+ .cg-log-success { color: var(--cg-success); }
+ .cg-log-error { color: #ff8c91; }
+ .cg-log-warning { color: var(--cg-warning); }
+ .cg-log-info { color: #86d5ff; }
.cg-badge {
display: inline-block;
- padding: 4px 8px;
- background: rgba(255,255,255,0.2);
- border-radius: 4px;
+ padding: 3px 7px;
+ background: #1d4059;
+ border: 1px solid #3b647e;
+ border-radius: 999px;
+ color: #d7e6ee;
font-size: 11px;
- margin-left: 8px;
+ margin-left: 6px;
}
.cg-badge-success {
- background: rgba(67,233,123,0.3);
+ background: rgba(66, 214, 164, 0.16);
+ border-color: rgba(66, 214, 164, 0.45);
+ color: #9bf0cf;
}
.cg-badge-running {
- background: rgba(56,249,215,0.3);
- }
- .cg-controls {
- display: flex;
- gap: 8px;
- }
- .cg-minimize {
- background: rgba(255,255,255,0.2);
- border: none;
- color: white;
- width: 32px;
- height: 32px;
- border-radius: 8px;
- cursor: pointer;
- font-size: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.3s;
- }
- .cg-minimize:hover {
- background: rgba(255,255,255,0.3);
+ background: rgba(66, 214, 164, 0.16);
+ border: 1px solid rgba(66, 214, 164, 0.45);
+ border-radius: 999px;
+ color: #9bf0cf;
+ padding: 3px 8px;
}
.cg-minimized {
height: auto !important;
- width: 60px !important;
- }
- .cg-minimized .cg-body {
- display: none !important;
+ width: 112px !important;
}
+ .cg-minimized .cg-body,
.cg-minimized .cg-title {
display: none !important;
}
@@ -2358,28 +2404,31 @@
margin-bottom: 4px;
}
.cg-help-text {
+ color: var(--cg-muted);
font-size: 11px;
- opacity: 0.7;
+ line-height: 1.5;
margin-top: 4px;
}
.cg-timer-display {
- background: rgba(255,255,255,0.15);
- padding: 16px;
+ background: #3d2e16;
+ border: 1px solid #9e7132;
+ color: #ffe0a4;
+ padding: 14px;
border-radius: 8px;
text-align: center;
font-size: 24px;
- font-weight: bold;
- letter-spacing: 2px;
- margin-top: 12px;
- font-family: 'Monaco', 'Menlo', monospace;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ margin-top: 10px;
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.cg-timer-active {
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
- animation: timerPulse 2s infinite;
+ background: #4a3516;
+ animation: cg-timer-pulse 2s infinite;
}
- @keyframes timerPulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.02); }
+ @keyframes cg-timer-pulse {
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 182, 77, 0.14); }
+ 50% { box-shadow: 0 0 0 8px rgba(243, 182, 77, 0); }
}
.cg-time-input-group {
display: flex;
@@ -2390,23 +2439,26 @@
flex: 1;
}
.cg-course-filters {
- background: rgba(0,0,0,0.2);
+ background: #0a2135;
+ border-left: 2px solid #3f6e8d;
padding: 8px;
- border-radius: 6px;
- margin-top: 6px;
+ border-radius: 0 6px 6px 0;
+ margin-top: 7px;
font-size: 11px;
}
.cg-course-filter-item {
+ color: #c3d1da;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 4px;
+ overflow-wrap: anywhere;
}
.cg-course-filter-item:last-child {
margin-bottom: 0;
}
.cg-filter-label {
- opacity: 0.8;
+ color: #93acc0;
min-width: 40px;
}
.cg-course-actions {
@@ -2414,6 +2466,46 @@
gap: 4px;
flex-direction: column;
}
+ #courseGrabberUI button:focus-visible,
+ #courseGrabberUI input:focus-visible {
+ outline: 2px solid var(--cg-focus);
+ outline-offset: 2px;
+ }
+ @media (max-width: 520px) {
+ #courseGrabberUI {
+ top: 12px;
+ right: 12px;
+ width: calc(100vw - 24px);
+ max-height: calc(100vh - 24px);
+ border-radius: 14px;
+ }
+ .cg-header {
+ padding: 12px;
+ }
+ .cg-body {
+ padding: 10px;
+ }
+ .cg-section {
+ padding: 11px;
+ margin-bottom: 10px;
+ }
+ .cg-course-item {
+ align-items: flex-start;
+ }
+ .cg-course-actions {
+ flex-direction: row;
+ }
+ }
+ @media (prefers-reduced-motion: reduce) {
+ #courseGrabberUI *,
+ #courseGrabberUI *::before,
+ #courseGrabberUI *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ scroll-behavior: auto !important;
+ transition-duration: 0.01ms !important;
+ }
+ }
`;
document.head.appendChild(style);
diff --git a/docs/superpowers/plans/2026-06-21-ui-control-panel-refresh.md b/docs/superpowers/plans/2026-06-21-ui-control-panel-refresh.md
new file mode 100644
index 0000000..bad7f6a
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-21-ui-control-panel-refresh.md
@@ -0,0 +1,297 @@
+# UI 控制面板视觉刷新 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在不改变自动选课行为或现有 DOM 调用契约的前提下，将注入式控制面板刷新为可访问、响应式的深色考场控制台。
+
+**Architecture:** 保持 `courseGrabber.js` 为唯一运行时文件，并只替换 `createUI()` 的样式字符串。使用 Node 内置测试对 DOM ID、事件绑定及视觉系统的静态约束做回归保护；用本地浏览器夹具验证已注入面板的实际呈现和交互。
+
+**Tech Stack:** 原生 JavaScript、CSS、Node.js 内置 `node:test`、本地浏览器夹具。
+
+---
+
+## 文件结构
+
+- `courseGrabber.js`：运行时 UI；只替换 `createUI()` 内的 `style.textContent` 内容。
+- `tests/ui-control-panel-contract.test.cjs`：不依赖第三方包的静态与运行时回归测试，保护 DOM 合约、设计约束和基础交互。
+- `tests/ui-control-panel-fixture.html`：加载真实脚本的本地手工验证页面，不参与生产运行。
+
+### Task 1: 建立 UI 合约回归测试
+
+**Files:**
+- Create: `tests/ui-control-panel-contract.test.cjs`
+- Verify: `courseGrabber.js:2095-2500`
+
+- [ ] **Step 1: 新增会失败的 UI 合约测试**
+
+```js
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const test = require("node:test");
+
+const source = fs.readFileSync(
+ path.join(__dirname, "..", "courseGrabber.js"),
+ "utf8",
+);
+
+const requiredIds = [
+ "cg-close-btn",
+ "cg-minimize-btn",
+ "cg-status-text",
+ "cg-course-code",
+ "cg-course-list",
+ "cg-schedule-time",
+ "cg-start-btn",
+ "cg-stop-btn",
+ "cg-log-area",
+];
+
+test("UI 保留业务代码依赖的 DOM 合约", () => {
+ assert.ok(source.includes('ui.id = "courseGrabberUI"'));
+
+ for (const id of requiredIds) {
+ assert.match(source, new RegExp(`id=["']${id}["']`));
+ }
+
+ for (const selector of [
+ ".cg-header",
+ "window.showGrabberUI",
+ "window.editCourseUI",
+ "window.removeCourseUI",
+ ]) {
+ assert.ok(source.includes(selector), `缺少 ${selector}`);
+ }
+});
+
+test("UI 使用可访问的响应式考场控制台样式", () => {
+ for (const token of [
+ "--cg-ink:",
+ "--cg-surface:",
+ "--cg-success:",
+ "--cg-warning:",
+ "--cg-danger:",
+ "@media (max-width: 520px)",
+ "@media (prefers-reduced-motion: reduce)",
+ ":focus-visible",
+ ]) {
+ assert.ok(source.includes(token), `缺少 ${token}`);
+ }
+
+ assert.doesNotMatch(source, /#667eea|#764ba2/);
+});
+```
+
+- [ ] **Step 2: 运行测试，确认它在当前主题上失败**
+
+Run: `node --test tests/ui-control-panel-contract.test.cjs`
+
+Expected: 第一个子测试通过，第二个子测试因缺少 `--cg-ink:`、响应式规则与减少动态效果规则而失败。
+
+### Task 2: 替换控制面板的视觉系统
+
+**Files:**
+- Modify: `courseGrabber.js:2103-2418`
+- Test: `tests/ui-control-panel-contract.test.cjs`
+
+- [ ] **Step 1: 用以下 CSS 完整替换 `style.textContent` 的模板内容**
+
+```css
+#courseGrabberUI {
+ --cg-ink: #071a2d;
+ --cg-surface: #0c243a;
+ --cg-surface-raised: #112e47;
+ --cg-surface-quiet: #0a2034;
+ --cg-border: #2a4b66;
+ --cg-text: #f5f2e9;
+ --cg-muted: #a8b8c6;
+ --cg-success: #42d6a4;
+ --cg-warning: #f3b64d;
+ --cg-danger: #e75d64;
+ --cg-focus: #8ad9ff;
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ width: min(440px, calc(100vw - 32px));
+ max-height: min(90vh, 760px);
+ background: var(--cg-ink);
+ border: 1px solid var(--cg-border);
+ border-radius: 18px;
+ box-shadow: 0 24px 70px rgba(4, 15, 27, 0.42), 0 2px 0 rgba(255, 255, 255, 0.05) inset;
+ z-index: 999999;
+ font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+ color: var(--cg-text);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+#courseGrabberUI * { box-sizing: border-box; }
+.cg-header {
+ padding: 15px 16px;
+ background: #081e32;
+ border-bottom: 1px solid var(--cg-border);
+ cursor: move;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ user-select: none;
+}
+.cg-title { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
+.cg-controls { display: flex; gap: 6px; }
+.cg-close, .cg-minimize {
+ background: #173750;
+ border: 1px solid #31536c;
+ color: var(--cg-text);
+ width: 30px;
+ height: 30px;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 17px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+.cg-close:hover { background: #5a2632; border-color: var(--cg-danger); transform: rotate(90deg); }
+.cg-minimize:hover { background: #24506e; border-color: var(--cg-focus); }
+.cg-body { padding: 14px; overflow-y: auto; flex: 1; scrollbar-color: #496780 transparent; }
+.cg-section { background: var(--cg-surface-raised); border: 1px solid #244660; border-radius: 12px; padding: 13px; margin-bottom: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset; }
+.cg-section:last-child { margin-bottom: 0; }
+.cg-section-title { color: var(--cg-text); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
+.cg-input { width: 100%; padding: 10px 11px; border: 1px solid #365873; background: var(--cg-surface-quiet); border-radius: 8px; color: var(--cg-text); font-size: 13px; margin-bottom: 8px; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
+.cg-input:hover { border-color: #58809d; }
+.cg-input:focus { outline: none; border-color: var(--cg-focus); background: #0d2940; box-shadow: 0 0 0 3px rgba(138, 217, 255, 0.16); }
+.cg-input::placeholder { color: #8398aa; }
+.cg-btn { min-height: 36px; padding: 9px 13px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
+.cg-btn:hover:not(:disabled) { transform: translateY(-1px); }
+.cg-btn:disabled { cursor: not-allowed; opacity: 0.48; }
+.cg-btn-primary { background: var(--cg-success); border-color: #68e4ba; color: #06261f; box-shadow: 0 7px 18px rgba(66, 214, 164, 0.16); }
+.cg-btn-primary:hover:not(:disabled) { background: #66e1b7; box-shadow: 0 9px 20px rgba(66, 214, 164, 0.25); }
+.cg-btn-danger { background: #9e3d49; border-color: #d55a63; color: #fff7f5; }
+.cg-btn-danger:hover:not(:disabled) { background: var(--cg-danger); }
+.cg-btn-secondary { background: #173a55; border-color: #315873; color: #dfeaf0; }
+.cg-btn-secondary:hover:not(:disabled) { background: #24516f; border-color: #56809d; }
+.cg-btn-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
+.cg-btn-group { display: flex; gap: 8px; margin-top: 10px; }
+.cg-course-list { max-height: 220px; overflow-y: auto; margin-top: 10px; scrollbar-color: #496780 transparent; }
+.cg-course-item { background: #0d2941; border: 1px solid #284c68; padding: 11px; border-radius: 9px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: background-color 160ms ease, border-color 160ms ease; }
+.cg-course-item:last-child { margin-bottom: 0; }
+.cg-course-item:hover { background: #11334f; border-color: #4e7795; }
+.cg-course-info { flex: 1; min-width: 0; font-size: 13px; }
+.cg-course-code { color: var(--cg-text); font-weight: 700; margin-bottom: 5px; overflow-wrap: anywhere; }
+.cg-course-meta { color: var(--cg-muted); font-size: 11px; }
+.cg-status { padding: 10px 11px; background: #0c2b40; border: 1px solid #28536a; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
+.cg-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-success); box-shadow: 0 0 0 4px rgba(66, 214, 164, 0.13); animation: cg-pulse 2s infinite; }
+@keyframes cg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.cg-log-area { background: #061827; border: 1px solid #203f57; border-radius: 8px; padding: 11px; max-height: 168px; overflow-y: auto; color: #d5e1e8; font-size: 11px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; line-height: 1.65; scrollbar-color: #496780 transparent; }
+.cg-log-item { margin-bottom: 4px; }
+.cg-log-success { color: var(--cg-success); }
+.cg-log-error { color: #ff8c91; }
+.cg-log-warning { color: var(--cg-warning); }
+.cg-log-info { color: #86d5ff; }
+.cg-badge { display: inline-block; padding: 3px 7px; background: #1d4059; border: 1px solid #3b647e; border-radius: 999px; color: #d7e6ee; font-size: 11px; margin-left: 6px; }
+.cg-badge-success { background: rgba(66, 214, 164, 0.16); border-color: rgba(66, 214, 164, 0.45); color: #9bf0cf; }
+.cg-badge-running { background: rgba(66, 214, 164, 0.16); border: 1px solid rgba(66, 214, 164, 0.45); border-radius: 999px; color: #9bf0cf; padding: 3px 8px; }
+.cg-minimized { height: auto !important; width: 112px !important; }
+.cg-minimized .cg-body, .cg-minimized .cg-title { display: none !important; }
+.cg-filter-input { font-size: 12px; margin-bottom: 4px; }
+.cg-help-text { color: var(--cg-muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
+.cg-timer-display { background: #3d2e16; border: 1px solid #9e7132; color: #ffe0a4; padding: 14px; border-radius: 8px; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 0.08em; margin-top: 10px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
+.cg-timer-active { background: #4a3516; animation: cg-timer-pulse 2s infinite; }
+@keyframes cg-timer-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 182, 77, 0.14); } 50% { box-shadow: 0 0 0 8px rgba(243, 182, 77, 0); } }
+.cg-time-input-group { display: flex; gap: 8px; align-items: center; }
+.cg-time-input-group input { flex: 1; }
+.cg-course-filters { background: #0a2135; border-left: 2px solid #3f6e8d; padding: 8px; border-radius: 0 6px 6px 0; margin-top: 7px; font-size: 11px; }
+.cg-course-filter-item { color: #c3d1da; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
+.cg-course-filter-item:last-child { margin-bottom: 0; }
+.cg-filter-label { color: #93acc0; min-width: 40px; }
+.cg-course-actions { display: flex; gap: 4px; flex-direction: column; }
+#courseGrabberUI button:focus-visible, #courseGrabberUI input:focus-visible { outline: 2px solid var(--cg-focus); outline-offset: 2px; }
+@media (max-width: 520px) {
+ #courseGrabberUI { top: 12px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 24px); border-radius: 14px; }
+ .cg-header { padding: 12px; }
+ .cg-body { padding: 10px; }
+ .cg-section { padding: 11px; margin-bottom: 10px; }
+ .cg-course-item { align-items: flex-start; }
+ .cg-course-actions { flex-direction: row; }
+}
+@media (prefers-reduced-motion: reduce) {
+ #courseGrabberUI *, #courseGrabberUI *::before, #courseGrabberUI *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
+}
+```
+
+- [ ] **Step 2: 运行静态测试，确认主题和 DOM 合约均通过**
+
+Run: `node --test tests/ui-control-panel-contract.test.cjs`
+
+Expected: 三个子测试均为 `ok`，测试进程以状态码 0 结束。
+
+- [ ] **Step 3: 执行 JavaScript 语法检查**
+
+Run: `node --check courseGrabber.js`
+
+Expected: 无输出，状态码 0。
+
+### Task 3: 添加真实脚本的本地浏览器夹具
+
+**Files:**
+- Create: `tests/ui-control-panel-fixture.html`
+- Verify: `courseGrabber.js`
+
+- [ ] **Step 1: 创建本地夹具页**
+
+```html
+
+
+
+
+
+ 自动抢课 UI 夹具
+
+
+
+
+ 正方教务系统
+ 此页面仅用于验证 courseGrabber 注入的控制面板。
+
+
+
+
+
+```
+
+- [ ] **Step 2: 在浏览器中验证夹具；浏览器通道不可用时切换运行时烟测**
+
+Run: 优先打开 `file:///Users/a86198/Desktop/project/Auto_courseGrabber/tests/ui-control-panel-fixture.html`；检查控制台无错误，并依次观察默认状态、添加一门课程后的课程卡片、最小化状态和 375px 宽视窗。若浏览器通道在脚本执行前被宿主拒绝，则运行 `node --test tests/ui-control-panel-contract.test.cjs` 中的 `UI 注入后仍可添加课程、最小化和关闭` 子测试。
+
+Expected: 浏览器可用时，面板始终完整显示，按钮与输入框可操作，控制台没有 error 级消息。回退时，最小 DOM 夹具必须实际执行完整脚本，并验证面板注入、添加课程、最小化和关闭；浏览器视觉检查标记为受宿主通道阻塞。
+
+### Task 4: 完成验证并提交
+
+**Files:**
+- Modify: `courseGrabber.js`
+- Create: `tests/ui-control-panel-contract.test.cjs`
+- Create: `tests/ui-control-panel-fixture.html`
+
+- [ ] **Step 1: 运行所有可用自动验证**
+
+Run: `node --test tests/ui-control-panel-contract.test.cjs && node --check courseGrabber.js && git diff --check`
+
+Expected: 测试输出三个 `ok` 子测试，语法检查与 `git diff --check` 均无输出，命令以状态码 0 结束。
+
+- [ ] **Step 2: 检查变更范围**
+
+Run: `git diff -- courseGrabber.js tests/ui-control-panel-contract.test.cjs tests/ui-control-panel-fixture.html docs/superpowers/plans/2026-06-21-ui-control-panel-refresh.md`
+
+Expected: 仅包含控制面板视觉系统、其无依赖合约测试、本地浏览器夹具和本实施计划。
+
+- [ ] **Step 3: 创建实现提交**
+
+Run: `git add courseGrabber.js tests/ui-control-panel-contract.test.cjs tests/ui-control-panel-fixture.html docs/superpowers/plans/2026-06-21-ui-control-panel-refresh.md && git commit -m "feat: refresh course grabber control panel UI"`
+
+Expected: 新提交包含且只包含上述四个文件。
diff --git a/docs/superpowers/specs/2026-06-21-ui-control-panel-refresh-design.md b/docs/superpowers/specs/2026-06-21-ui-control-panel-refresh-design.md
new file mode 100644
index 0000000..02ab42a
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-21-ui-control-panel-refresh-design.md
@@ -0,0 +1,68 @@
+# UI 控制面板视觉刷新设计
+
+关联 Issue：[#20](https://github.com/ceilf6/Auto_courseGrabber/issues/20)
+
+## 目标
+
+将 `courseGrabber.js` 注入的控制面板从通用紫色渐变样式调整为信息优先的深色「考场控制台」。改动必须让课程配置、运行状态和日志更易扫描，同时保持既有自动选课功能和调用接口不变。
+
+## 设计方向
+
+面板以深海军蓝为基底，避免与常见教务页面的浅色内容混淆：
+
+- 青绿色表示运行、成功和主操作；
+- 琥珀色表示定时、提示与等待；
+- 朱红色只表示停止、错误和破坏性操作；
+- 低饱和蓝灰用于分组边界、次级按钮和辅助信息。
+
+标题栏保留拖拽区域，但改为紧凑的应用栏；内容区使用清晰的卡片分组和紧凑网格。日志保持等宽字体，形成与表单区不同的信息层级。
+
+## 范围与边界
+
+仅修改 `createUI()` 中的 CSS，以及为表现层级所需的静态 HTML 标记。不会修改选课、定时、课程管理、拖拽、日志拦截或事件绑定的 JavaScript 行为。
+
+以下 DOM 合约必须保持不变：
+
+- `courseGrabberUI`、`cg-status-text`、`cg-course-list`、`cg-log-area` 和所有表单/按钮 ID；
+- `cg-header` 拖拽选择器，以及动态渲染课程列表所使用的 `cg-*` 类；
+- `window.showGrabberUI`、`window.editCourseUI`、`window.removeCourseUI` 和既有点击处理程序；
+- `TARGET_COURSES` 的数据格式与运行状态更新方式。
+
+不新增包、构建步骤、远程字体或图片资源。
+
+## 组件设计
+
+### 面板与标题栏
+
+- 维持右上角固定定位、可拖拽、可最小化和可关闭的交互。
+- 使用不透明深色表面、细边框和分层阴影，替代全局渐变及玻璃模糊效果。
+- 标题文字使用本机可用的中文优先字体栈；不依赖网络字体。
+
+### 状态、表单和课程列表
+
+- 状态采用高对比度徽标和呼吸指示点，运行/空闲状态有明确颜色区分。
+- 输入框在默认、悬停、聚焦和禁用状态均有可辨识边界；`focus-visible` 为键盘用户提供可见焦点。
+- 课程清单提升课程号、优先级和筛选条件的视觉层级，编辑和删除操作保持原有 ID/全局函数调用方式。
+
+### 定时、操作与日志
+
+- 定时器以琥珀色强调，倒计时仍沿用原有动态更新逻辑。
+- 开始操作为唯一高权重主按钮；停止操作持续为朱红色；次级动作降低视觉权重。
+- 日志区使用深色等宽背景和类型色，不改变日志条目的 class 或追加行为。
+
+### 响应式与动效
+
+- 在窄视窗下将面板宽度限制为可视区域，双列按钮仍保持可点按。
+- 动画只限状态点和倒计时等反馈；`prefers-reduced-motion: reduce` 会禁用非必要动画和过渡。
+
+## 验证策略
+
+1. 用 `node --check courseGrabber.js` 验证脚本语法。
+2. 静态核对所有绑定事件依赖的 DOM ID、关键 `cg-*` class 和全局 UI 函数未被移除。
+3. 在浏览器夹具中验证默认、运行、课程列表、定时、最小化和窄屏呈现；同时确认控制台没有脚本错误。
+4. 运行 `git diff --check`，确认补丁没有空白错误。
+
+## 非目标
+
+- 不改变业务流程、输入文案含义、功能可用性或任何自动选课策略。
+- 不引入主题切换、持久化设置、新表单字段或新的用户操作。
diff --git a/tests/ui-control-panel-contract.test.cjs b/tests/ui-control-panel-contract.test.cjs
new file mode 100644
index 0000000..66229cc
--- /dev/null
+++ b/tests/ui-control-panel-contract.test.cjs
@@ -0,0 +1,173 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const test = require("node:test");
+const vm = require("node:vm");
+
+const source = fs.readFileSync(
+ path.join(__dirname, "..", "courseGrabber.js"),
+ "utf8",
+);
+
+const requiredIds = [
+ "cg-close-btn",
+ "cg-minimize-btn",
+ "cg-status-text",
+ "cg-course-code",
+ "cg-course-list",
+ "cg-schedule-time",
+ "cg-start-btn",
+ "cg-stop-btn",
+ "cg-log-area",
+];
+
+function createClassList() {
+ const values = new Set();
+
+ return {
+ toggle(name) {
+ values.has(name) ? values.delete(name) : values.add(name);
+ },
+ contains(name) {
+ return values.has(name);
+ },
+ };
+}
+
+function createDocument() {
+ const elements = new Map();
+ const makeElement = () => {
+ const element = {
+ children: [],
+ style: {},
+ classList: createClassList(),
+ value: "",
+ textContent: "",
+ disabled: false,
+ appendChild(child) {
+ this.children.push(child);
+ return child;
+ },
+ querySelector(selector) {
+ return selector === ".cg-header" ? makeElement() : null;
+ },
+ };
+
+ Object.defineProperty(element, "id", {
+ get() {
+ return this._id;
+ },
+ set(value) {
+ this._id = value;
+ elements.set(value, this);
+ },
+ });
+ Object.defineProperty(element, "innerHTML", {
+ get() {
+ return this._innerHTML || "";
+ },
+ set(value) {
+ this._innerHTML = value;
+ for (const [, id] of value.matchAll(/id=["']([^"']+)["']/g)) {
+ if (!elements.has(id)) {
+ const child = makeElement();
+ child.id = id;
+ }
+ }
+ },
+ });
+
+ return element;
+ };
+
+ return {
+ readyState: "complete",
+ head: makeElement(),
+ body: makeElement(),
+ createElement: makeElement,
+ getElementById(id) {
+ return elements.get(id) || null;
+ },
+ addEventListener() {},
+ };
+}
+
+test("UI 保留业务代码依赖的 DOM 合约", () => {
+ assert.ok(source.includes('ui.id = "courseGrabberUI"'));
+
+ for (const id of requiredIds) {
+ assert.match(source, new RegExp(`id=["']${id}["']`));
+ }
+
+ for (const selector of [
+ ".cg-header",
+ "window.showGrabberUI",
+ "window.editCourseUI",
+ "window.removeCourseUI",
+ ]) {
+ assert.ok(source.includes(selector), `缺少 ${selector}`);
+ }
+});
+
+test("UI 使用可访问的响应式考场控制台样式", () => {
+ for (const token of [
+ "--cg-ink:",
+ "--cg-surface:",
+ "--cg-success:",
+ "--cg-warning:",
+ "--cg-danger:",
+ "@media (max-width: 520px)",
+ "@media (prefers-reduced-motion: reduce)",
+ ":focus-visible",
+ ]) {
+ assert.ok(source.includes(token), `缺少 ${token}`);
+ }
+
+ assert.doesNotMatch(source, /#667eea|#764ba2/);
+});
+
+test("UI 注入后仍可添加课程、最小化和关闭", () => {
+ const document = createDocument();
+ const window = { document, alert() {} };
+
+ vm.runInNewContext(source, {
+ window,
+ document,
+ console: { log() {}, warn() {}, error() {} },
+ setInterval: () => 1,
+ clearInterval() {},
+ alert() {},
+ Date,
+ Math,
+ Array,
+ Object,
+ String,
+ Number,
+ RegExp,
+ JSON,
+ Set,
+ Map,
+ });
+
+ const ui = document.getElementById("courseGrabberUI");
+ const addCourse = document.getElementById("cg-add-course");
+ const courseCode = document.getElementById("cg-course-code");
+ const courseList = document.getElementById("cg-course-list");
+ const minimize = document.getElementById("cg-minimize-btn");
+ const close = document.getElementById("cg-close-btn");
+
+ assert.ok(ui);
+ assert.ok(addCourse);
+ assert.ok(courseCode);
+ assert.ok(courseList);
+
+ courseCode.value = "CS101";
+ addCourse.onclick();
+ assert.match(courseList.innerHTML, /CS101/);
+
+ minimize.onclick();
+ assert.ok(ui.classList.contains("cg-minimized"));
+
+ close.onclick();
+ assert.equal(ui.style.display, "none");
+});
diff --git a/tests/ui-control-panel-fixture.html b/tests/ui-control-panel-fixture.html
new file mode 100644
index 0000000..19441df
--- /dev/null
+++ b/tests/ui-control-panel-fixture.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ 自动抢课 UI 夹具
+
+
+
+
+ 正方教务系统
+ 此页面仅用于验证 courseGrabber 注入的控制面板。
+
+
+
+
+