task-244(admin.html观感对齐): 全局组件观感对齐（表头/行hover/输入焦点/弹窗圆角/分页色）

admin-frontend-vue/src/styles/main.css

@@ -138,6 +138,34 @@ button, input, textarea, select { font: inherit; }
 .global-error-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
 .admin-breadcrumb { margin-bottom: 14px; }
 
+/* ===== module13 全局组件观感对齐（admin.html 表格/输入/分页语义） ===== */
+.el-table {
+  --el-table-header-bg-color: #edf4fa;
+  --el-table-header-text-color: #4e6479;
+  --el-table-border-color: #e0e8ef;
+  --el-table-row-hover-bg-color: #f1f7fb;
+}
+.el-table th.el-table__cell {
+  background-color: #edf4fa;
+  color: #4e6479;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: .4px;
+}
+.el-table .el-table__row:hover > td.el-table__cell { background-color: #f1f7fb; }
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #f9fbfd; }
+.el-input__wrapper, .el-textarea__inner { border-radius: 9px; }
+.el-input__wrapper.is-focus,
+.el-select__wrapper.is-focused { box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16); }
+.el-pagination { --el-pagination-button-color: var(--admin-text); }
+.el-dialog { border-radius: 14px; }
+.el-dialog__header { padding-bottom: 12px; }
+.el-dialog__title { font-size: 16px; font-weight: 600; color: var(--admin-text); }
+.el-dialog__body { color: var(--admin-text); }
+.el-tag { border-radius: 6px; }
+.el-button { border-radius: 9px; }
+.el-message-box { border-radius: 14px; }
+
 @media (max-width: 820px) {
   .admin-sidebar { flex-basis: 64px; }
   .admin-brand-copy, .admin-menu .el-sub-menu__title span, .admin-menu .el-menu-item { display: none; }

admin-frontend-vue/tests/task-244.test.ts

@@ -0,0 +1,61 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+
+// module 13 task 244：全局组件观感对齐（Element 表格头/行 hover/输入焦点/弹窗圆角/分页色），
+// 让 15 页无需逐页内联即可获得 admin.html 的表格与输入观感。
+
+test('test_task_244_component_normal_primary_path', () => {
+  const css = readSource('src/styles/main.css')
+  assert.match(css, /--el-table-header-bg-color:\s*#edf4fa/, '表头底色应对齐 admin #edf4fa')
+  assert.match(css, /--el-table-header-text-color:\s*#4e6479/, '表头文字色应对齐 admin')
+  assert.match(css, /--el-table-row-hover-bg-color:\s*#f1f7fb/, '行 hover 应对齐 admin')
+})
+
+test('test_task_244_component_normal_variant_input', () => {
+  const css = readSource('src/styles/main.css')
+  assert.match(css, /th\.el-table__cell\s*\{[^}]*font-weight:\s*600/, '表头应为 600 字重')
+  assert.match(css, /th\.el-table__cell\s*\{[^}]*font-size:\s*12\.5px/, '表头应为 12.5px')
+})
+
+test('test_task_244_component_normal_repeated_operation_is_idempotent', () => {
+  const css = readSource('src/styles/main.css')
+  const re = /--el-table-header-bg-color:\s*#edf4fa/
+  assert.ok(re.test(css))
+  assert.ok(re.test(css))
+})
+
+test('test_task_244_component_boundary_empty_input', () => {
+  // 边界：输入/选择器焦点 ring 为 admin 蓝（rgba(95,133,173,.16)），非 Element 默认。
+  const css = readSource('src/styles/main.css')
+  assert.match(css, /rgba\(95,\s*133,\s*173,\s*0\.16\)/, '焦点 ring 需用 admin 蓝')
+  assert.match(css, /\.el-input__wrapper,?\s*\.el-textarea__inner\s*\{\s*border-radius:\s*9px/, '输入框圆角 9px')
+  assert.match(css, /\.el-input__wrapper\.is-focus,?\s*\.el-select__wrapper\.is-focused\s*\{[^}]*rgba\(95,\s*133,\s*173,\s*0\.16\)/, '焦点 ring 用 admin 蓝')
+})
+
+test('test_task_244_component_boundary_single_item', () => {
+  // 边界：斑马纹若存在则用极浅蓝，避免过重条纹。
+  const css = readSource('src/styles/main.css')
+  assert.match(css, /row--striped[^}]*background:\s*#f9fbfd/, '斑马纹底应接近 #f9fbfd')
+})
+
+test('test_task_244_component_boundary_limit_or_missing_field', () => {
+  // 边界上限：弹窗/消息盒圆角 14px、分页文字用正文色。
+  const css = readSource('src/styles/main.css')
+  assert.match(css, /\.el-dialog\s*\{[^}]*border-radius:\s*14px/, '弹窗圆角 14px')
+  assert.match(css, /\.el-message-box\s*\{[^}]*border-radius:\s*14px/, '消息盒圆角 14px')
+  assert.match(css, /\.el-pagination\s*\{[^}]*--el-pagination-button-color:\s*var\(--admin-text\)/)
+})
+
+test('test_task_244_component_invalid_input_rejected', () => {
+  // 异常：不残留旧的 Element 默认表头/圆角覆盖（6px 基础圆角已被 9px 取代）。
+  const css = readSource('src/styles/main.css')
+  assert.equal(/--el-border-radius-base:\s*6px/.test(css), false, '基础圆角应为 9px 而非 6px')
+})
+
+test('test_task_244_component_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败：Element 组件覆盖必须走 CSS 变量/语义色，不硬编码回默认红绿。
+  const css = readSource('src/styles/main.css')
+  assert.ok(!/#f56c6c|#67c23a|#e6a23c/.test(css), '不得残留 Element 默认红绿黄')
+  assert.match(css, /\.el-button\s*\{[^}]*border-radius:\s*9px/, '按钮圆角 9px')
+})