# 用户管理有效期日期控件统一

日期：2026-07-11

## 一、问题背景

管理后台首页数据看板已经使用稳定的原生日期输入控件，用户管理“手动添加学员”中的有效期仍使用 Element Plus 弹层型日期时间选择器。两处日期交互不一致，且弹层控件在部分窗口尺寸下容易出现定位、遮挡和操作体验问题。

## 二、处理决策

1. 用户管理有效期改为与数据看板相同类型的原生 `date` 输入控件。
2. 控件沿用看板日期输入的边框、聚焦态、文字层级和原生日历图标体验。
3. 有效期仍为可选项，留空表示账号不过期。
4. 管理员选择某一天后，提交接口时转换为该日期当天的 `23:59:59`，确保学员在所选日期全天有效。
5. 不修改后端接口字段，仍提交 `expiredAt`；不调整用户管理其他功能。

## 三、计划修改文件

- `apps/admin-web/src/App.vue`
- `apps/admin-web/src/styles.css`

## 四、验收标准

- 用户管理不再出现弹层型有效期选择器。
- 有效期控件的视觉和操作方式与数据看板日期控件一致。
- 留空可以正常添加长期有效学员。
- 选择日期后提交值为对应日期的 `23:59:59`。
- 管理后台构建和类型检查通过。

## 五、实施与验收结果

- 已将用户管理“手动添加学员”的有效期替换为原生 `date` 输入控件。
- 已复用数据看板日期输入的 `record-date-field` 样式，并补充用户管理表单的满宽适配。
- 已增加提交转换函数：留空提交 `null`，选择日期后提交对应日期的 `T23:59:59`。
- 已重建管理后台开发容器，并在用户管理页面实测日期选择和布局。
- 实测日期：`2026-07-31`；控件类型和值均正确。
- `npm run build` 和 Vue TypeScript 类型检查通过。
- 构建中仅出现第三方 `@vueuse/core` 的 Rollup PURE 注释位置提示，不影响构建产物或本次功能。
