fix: 优化反馈日期筛选控件

ai_knowledge_base_v2/apps/admin-web/src/components/FeedbackManagementView.vue

@@ -15,7 +15,8 @@ const total = ref(0);
 const page = ref(1);
 const pageSize = ref(20);
 const readStatus = ref("all");
-const dateRange = ref<[string, string] | []>([]);
+const dateFrom = ref("");
+const dateTo = ref("");
 const detail = ref<FeedbackDetail | null>(null);
 
 async function load() {
@@ -23,8 +24,8 @@ async function load() {
   try {
     const result = await api.feedbackList({
       readStatus: readStatus.value,
-      startDate: dateRange.value[0],
-      endDate: dateRange.value[1],
+      startDate: dateFrom.value || undefined,
+      endDate: dateTo.value || undefined,
       page: page.value,
       pageSize: pageSize.value,
     });
@@ -42,6 +43,13 @@ function applyFilters() {
   void load();
 }
 
+function resetFilters() {
+  readStatus.value = "all";
+  dateFrom.value = "";
+  dateTo.value = "";
+  applyFilters();
+}
+
 function changePage(nextPage: number, nextPageSize: number) {
   page.value = nextPage;
   pageSize.value = nextPageSize;
@@ -49,7 +57,7 @@ function changePage(nextPage: number, nextPageSize: number) {
 }
 
 async function exportExcel() {
-  if (dateRange.value.length !== 2) {
+  if (!dateFrom.value || !dateTo.value) {
     ElMessage.warning("请先选择导出的时间范围");
     return;
   }
@@ -57,8 +65,8 @@ async function exportExcel() {
   try {
     await api.exportFeedback({
       readStatus: readStatus.value,
-      startDate: dateRange.value[0],
-      endDate: dateRange.value[1],
+      startDate: dateFrom.value,
+      endDate: dateTo.value,
     });
     ElMessage.success("反馈 Excel 已导出");
   } catch (error) {
@@ -89,10 +97,22 @@ onMounted(load);
     <header>
       <div><h2>反馈管理</h2><p>查看用户针对 AI 回答提交的问题与当时对话。</p></div>
     </header>
-    <section class="feedback-toolbar" aria-label="反馈筛选与导出">
-      <el-segmented v-model="readStatus" :options="[{ label: '全部', value: 'all' }, { label: '未读', value: 'unread' }, { label: '已读', value: 'read' }]" @change="applyFilters" />
-      <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="applyFilters" />
-      <el-button v-if="canExport" type="primary" :loading="exporting" @click="exportExcel">导出 Excel</el-button>
+    <section class="record-filter feedback-toolbar" aria-label="反馈筛选与导出">
+      <el-select v-model="readStatus" aria-label="反馈状态" @change="applyFilters">
+        <el-option label="全部反馈" value="all" />
+        <el-option label="未读反馈" value="unread" />
+        <el-option label="已读反馈" value="read" />
+      </el-select>
+      <div class="record-date-range" aria-label="反馈时间范围">
+        <label class="record-date-field"><span>开始日期</span><input v-model="dateFrom" type="date" aria-label="反馈开始日期" /></label>
+        <span class="record-date-sep">至</span>
+        <label class="record-date-field"><span>结束日期</span><input v-model="dateTo" type="date" aria-label="反馈结束日期" /></label>
+      </div>
+      <div class="record-filter-actions">
+        <el-button type="primary" @click="applyFilters">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+        <el-button v-if="canExport" :loading="exporting" @click="exportExcel">导出 Excel</el-button>
+      </div>
     </section>
     <el-table v-loading="loading" :data="items" stripe>
       <el-table-column label="状态" width="88"><template #default="{ row }"><el-tag :type="row.isRead ? 'info' : 'danger'">{{ row.isRead ? '已读' : '未读' }}</el-tag></template></el-table-column>
@@ -118,9 +138,9 @@ onMounted(load);
 <style scoped>
 .feedback-page header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:18px; }
 .feedback-page h2 { margin:0 0 6px; }.feedback-page header p { margin:0; color:#7b8494; }
-.feedback-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:14px 16px; border:1px solid #e7ebf0; border-radius:12px; background:#fafbfc; }
-.feedback-toolbar :deep(.el-date-editor) { width:300px; }
+.feedback-toolbar { align-items:center; margin-bottom:18px; padding:14px 16px; border:1px solid #e7ebf0; border-radius:12px; background:#fafbfc; }
+.feedback-toolbar > :deep(.el-select) { width:140px; }
 .feedback-summary { display:grid; gap:9px; padding:16px; border-radius:12px; background:#f7f9fc; }.feedback-summary span,.feedback-summary small { color:#87909f; }
 .feedback-history { display:grid; gap:12px; }.feedback-history article { padding:14px 16px; border:1px solid #e6eaf0; border-radius:12px; }.feedback-history article.user { margin-left:42px; background:#f5f8ff; }.feedback-history article.assistant { margin-right:42px; }.feedback-history article.target { border:2px solid #f0a020; background:#fffaf0; }.feedback-history article div { display:flex; align-items:center; justify-content:space-between; }.feedback-history p { white-space:pre-wrap; line-height:1.65; margin:8px 0 0; }
-@media (max-width: 900px) { .feedback-toolbar { align-items:stretch; }.feedback-toolbar :deep(.el-date-editor) { width:100%; } }
+@media (max-width: 900px) { .feedback-toolbar { align-items:stretch; }.feedback-toolbar .record-date-range { width:100%; }.feedback-toolbar .record-date-field { flex:1; width:auto; }.feedback-toolbar .record-filter-actions { width:100%; } }
 </style>

ai_knowledge_base_v2/design-qa.md

@@ -1,3 +1,48 @@
+# 反馈管理日期筛选控件修复验收（2026-08-11）
+
+## 对照范围
+
+- 问题截图：`/var/folders/hn/vg5lxj0j60d2cp0k6vv_k0mw0000gn/T/codex-clipboard-be50c66c-d924-4925-a90c-64b716ab635c.png`
+- 修复后截图：`design-qa-feedback-date-fixed.png`
+- 验收地址：`http://127.0.0.1:8080/`
+- 页面状态：系统管理员已登录 / 反馈管理 / 开始日期获得焦点
+- 浏览器视口：1280 × 720 CSS px；问题截图：1182 × 1064 px；实现截图：1280 × 720 px
+
+## 完整视图与重点区域证据
+
+- 修复前的双月日历缺失 Element Plus 内部样式，月份、星期、日期和翻页按钮挤在狭窄浮层中，遮挡反馈表格。
+- 修复后参考数据看板、记录审计等后台页面，统一为状态下拉框、开始日期、结束日期、查询、重置和导出操作的单行筛选栏。
+- 日期输入框均为 210 × 40px，标签、日期值和日历图标垂直居中；筛选栏为 1012 × 70px，与下方表格左右边界一致。
+- 1280px 视口下页面 `scrollWidth` 与 `clientWidth` 均为 1280px，无横向滚动，日期控件不会再弹出失控的双月面板。
+
+## 必查视觉面
+
+- 字体与排版：沿用后台现有标题、说明、字段标签和按钮字号，日期占位符由浏览器本地化展示。
+- 间距与布局：筛选项高度统一，字段间距、按钮间距和容器内边距与其他后台筛选栏一致。
+- 颜色与设计令牌：继续使用现有雾白背景、浅灰边框和蓝色主操作按钮，没有引入新色系。
+- 图片与资源：本次不涉及图片或外部资源；日历图标使用浏览器原生日期控件。
+- 文案与内容：状态选项明确为“全部反馈 / 未读反馈 / 已读反馈”，操作明确为“查询 / 重置 / 导出 Excel”。
+
+## 交互与工程检查
+
+- 已验证反馈状态、开始日期、结束日期、查询、重置和导出入口均可见且可操作。
+- 已验证反馈列表和分页在筛选栏重构后正常显示。
+- 浏览器控制台错误和警告：0。
+- `npm --prefix apps/admin-web run build`：通过。
+- `git diff --check`：通过。
+
+## 对比历史
+
+1. [P1] 初始问题：双月日历样式缺失，控件内容拥挤并遮挡主要内容。
+2. 修复：移除该页不稳定的双月浮层，改用其他后台页面已验证的原生日期范围输入模式。
+3. [P2] 初始问题：筛选动作依赖控件变更自动触发，缺少明确的查询和重置入口。
+4. 修复：增加查询与重置按钮，导出仍要求完整起止日期，避免误导出。
+5. 复验：全页布局、日期重点区域、横向溢出、控制台和生产构建均通过；未发现剩余 P0、P1、P2 问题。
+
+final result: passed
+
+---
+
 # 用户端聊天页设计验收
 
 ## 对照范围