diff --git a/admin-frontend-vue/src/styles/main.css b/admin-frontend-vue/src/styles/main.css index b250ba3a..7ccffcd1 100644 --- a/admin-frontend-vue/src/styles/main.css +++ b/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; } diff --git a/admin-frontend-vue/tests/task-244.test.ts b/admin-frontend-vue/tests/task-244.test.ts new file mode 100644 index 00000000..f5538473 --- /dev/null +++ b/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') +})