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>