feat: 添加分页功能和缓存管理，优化问答记录展示

app/components/dashboard/QaRecordsTable.vue

@@ -14,8 +14,19 @@ import {
   CardHeader,
   CardTitle
 } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
 import type { IQaRecord } from "@/interfaces";
-import { QUESTION_TYPE_LABELS, useAnswerStore } from "@/stores/answer";
+import {
+  DASHBOARD_PAGE_SIZE_OPTIONS,
+  QUESTION_TYPE_LABELS,
+  useAnswerStore
+} from "@/stores/answer";
 
 const answerStore = useAnswerStore();
 const {
@@ -78,8 +89,29 @@ const displayOptions = (record: IQaRecord) => {
 <template>
   <Card>
     <CardHeader>
-      <CardTitle>最近问答记录</CardTitle>
-      <CardDescription>当前进程最多保留最近 100 条。</CardDescription>
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <CardTitle>最近问答记录</CardTitle>
+          <CardDescription>分页展示，按创建时间倒序</CardDescription>
+        </div>
+        <Select
+          :model-value="String(recordsPageSize)"
+          @update:model-value="(v) => answerStore.setRecordsPageSize(Number(v))"
+        >
+          <SelectTrigger class="w-28">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="size in DASHBOARD_PAGE_SIZE_OPTIONS"
+              :key="size"
+              :value="String(size)"
+            >
+              {{ size }} 条/页
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </CardHeader>
 
     <CardContent>