diff --git a/ai_knowledge_base_v2/apps/admin-web/src/App.vue b/ai_knowledge_base_v2/apps/admin-web/src/App.vue index 4e320c9..bc7cda6 100644 --- a/ai_knowledge_base_v2/apps/admin-web/src/App.vue +++ b/ai_knowledge_base_v2/apps/admin-web/src/App.vue @@ -861,9 +861,14 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") { 有效期 -
+
启用 - +
diff --git a/ai_knowledge_base_v2/apps/admin-web/src/styles.css b/ai_knowledge_base_v2/apps/admin-web/src/styles.css index 904f9f4..2a06cdc 100644 --- a/ai_knowledge_base_v2/apps/admin-web/src/styles.css +++ b/ai_knowledge_base_v2/apps/admin-web/src/styles.css @@ -355,8 +355,35 @@ textarea { width: 100%; } -.student-expiry-field { +.student-form-grid .student-expiry-field { width: 100%; + min-width: 0; +} + +.student-status-field { + width: 100%; + min-width: 0; + height: 40px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 0 12px; + border: 1px solid #dcdfe6; + border-radius: 4px; + background: #ffffff; + color: #606266; +} + +.student-status-field > span { + overflow: hidden; + font-size: 13px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.student-status-field .el-switch { + flex: 0 0 auto; } .migration-overview { diff --git a/ai_knowledge_base_v2/design-qa.md b/ai_knowledge_base_v2/design-qa.md index 6e5d095..9aa0799 100644 --- a/ai_knowledge_base_v2/design-qa.md +++ b/ai_knowledge_base_v2/design-qa.md @@ -48,3 +48,47 @@ 参考图底部的水墨和莲花属于可选氛围元素。当前版本采用纯雾白背景,优先保证长回答阅读清晰度、加载性能和维护成本,不引入与业务无关的装饰图片。 final result: passed + +--- + +# 用户管理“启用”开关修复验收(2026-07-13) + +## 对照范围 + +- 视觉问题参考:`test_records/screenshots/用户管理启用开关_问题参考.png` +- 桌面完整页面:`test_records/screenshots/用户管理启用开关_桌面全页.png` +- 桌面修复截图:`test_records/screenshots/用户管理启用开关_桌面修复后.png` +- 窄屏修复截图:`test_records/screenshots/用户管理启用开关_窄屏修复后.png` +- 桌面视口:1338 × 768 +- 响应式视口:820 × 768 +- 页面状态:用户管理 / 手动添加学员 / 启用状态 + +## 完整视图与重点区域证据 + +- 完整视图确认手动添加区、批量导入区和用户列表未因修复发生结构变化。 +- 重点区域对照确认“有效期”和“启用”分别占据独立网格单元,两者桌面间距为 10px。 +- 两个字段均为 40px 高并垂直对齐;开关固定靠右,标签不换行、不挤压。 +- 820px 视口下两个字段改为上下整行排列,页面 `bodyScrollWidth=805`,没有由该表单产生横向溢出。 + +## 比较历史 + +- [P1] 修复前:通用 `.record-date-field` 的固定 210px 宽度覆盖用户表单宽度,日期字段跨入第三列并与“启用”重叠。 +- 修复:使用 `.student-form-grid .student-expiry-field` 限定有效期宽度为当前网格单元的 100%;新增独立 `.student-status-field`,统一高度、边框、内边距和开关对齐。 +- 修复后:有效期右边界为 605.52px,启用字段左边界为 615.52px,准确保留 10px 网格间距。 + +## 必查视觉面 + +- 字体与排版:沿用现有后台字体和 13px 字段标签,未发生异常换行。 +- 间距与布局:桌面三列对齐,窄屏单列对齐,字段高度均为 40px。 +- 颜色与设计令牌:沿用现有输入框边框、白色背景和 Element Plus 状态色。 +- 图片与资源:本次为原生表单控件修复,不涉及图片替换或新增图像资产。 +- 文案:保留“启用”,新增无障碍名称“启用学员账号”。 + +## 交互与工程检查 + +- 可见开关点击后 `aria-checked` 从 `true` 变为 `false`,再次点击恢复 `true`。 +- 浏览器控制台错误:0。 +- `npm run build`:通过。 +- 未发现剩余 P0、P1、P2 问题。 + +final result: passed diff --git a/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面修复后.png b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面修复后.png new file mode 100644 index 0000000..4745084 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面修复后.png differ diff --git a/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面全页.png b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面全页.png new file mode 100644 index 0000000..0e5eaea Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_桌面全页.png differ diff --git a/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_窄屏修复后.png b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_窄屏修复后.png new file mode 100644 index 0000000..0e38769 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_窄屏修复后.png differ diff --git a/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_问题参考.png b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_问题参考.png new file mode 100644 index 0000000..c3bcec4 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/用户管理启用开关_问题参考.png differ