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

This commit is contained in:
2026-05-23 00:44:47 +08:00
parent c48d57df14
commit cc7125e681
16 changed files with 172 additions and 243 deletions
+1 -1
View File
@@ -58,7 +58,7 @@ defineExpose({ isCopied });
:variant="variant"
:size="size"
:disabled="disabled"
:class="cn('relative overflow-hidden pl-8', className)"
:class="cn('relative overflow-hidden pl-7', className)"
@click.prevent.stop="handleCopy"
>
<!-- 复制成功图标未复制时向上移出复制后滑入 -->
+35 -3
View File
@@ -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>
+5 -12
View File
@@ -3,10 +3,7 @@
import { RefreshCw, Trash2 } from "lucide-vue-next";
import { storeToRefs } from "pinia";
import {
Alert,
AlertDescription
} from "@/components/ui/alert";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -39,13 +36,7 @@ const overviewItems = computed(() => [
{
label: "模型",
value: stats.value?.model || health.value?.model || "-",
detail: stats.value?.cache_enabled ? "缓存已启用" : "缓存未启用",
loading: statsLoading.value && !stats.value
},
{
label: "缓存数量",
value: stats.value?.cache_size?.toString() ?? "0",
detail: "当前进程",
detail: "AI 模型",
loading: statsLoading.value && !stats.value
},
{
@@ -59,7 +50,9 @@ const overviewItems = computed(() => [
<template>
<section class="grid gap-4">
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div
class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
>
<div>
<h1 class="text-xl font-semibold text-foreground">Dashboard</h1>
<p class="mt-1 text-sm text-muted-foreground">
+27 -3
View File
@@ -1,5 +1,8 @@
<!-- app/components/home/OcsConfigCard.vue - OCS AnswererWrapper 配置片段 -->
<script lang="ts" setup>
import { RefreshCw } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import {
Card,
CardAction,
@@ -12,6 +15,14 @@ import { useAuthStore } from "@/stores/auth";
const authStore = useAuthStore();
const origin = ref("http://localhost:3000");
const refreshing = ref(false);
const handleRefreshToken = async () => {
refreshing.value = true;
await authStore.refreshApiToken();
refreshing.value = false;
};
/** 浏览器端读取当前站点地址,避免文档里写死 localhost 或生产域名 */
onMounted(() => {
origin.value = window.location.origin;
@@ -22,7 +33,8 @@ const configText = computed(() => {
const data: Record<string, string> = {
title: "${title}",
type: "${type}",
options: "${options}"
options: "${options}",
token: ""
};
if (authStore.user?.apiToken) {
@@ -53,13 +65,25 @@ const configText = computed(() => {
<CardHeader>
<CardTitle>OCS 配置</CardTitle>
<CardAction>
<CopyCom :text="configText" :timeout="1200" />
<div class="flex items-center gap-2">
<Button
v-if="authStore.user?.apiToken && authStore.isOnline"
variant="outline"
size="sm"
:disabled="refreshing"
@click="handleRefreshToken"
>
<RefreshCw :class="['size-4', refreshing ? 'animate-spin' : '']" />
刷新 Token
</Button>
<CopyCom :text="configText" :timeout="1200" :disabled="refreshing" />
</div>
</CardAction>
</CardHeader>
<CardContent>
<pre
class="max-h-120 overflow-auto rounded-2xl bg-muted p-4 text-xs leading-5 text-muted-foreground"
class="h-89.5 overflow-x-auto overflow-y-hidden rounded-2xl bg-muted p-4 text-xs leading-5 text-muted-foreground"
><code>{{ configText }}</code>
</pre>
</CardContent>
+2 -8
View File
@@ -47,13 +47,11 @@ export interface IHealthResponse {
message: string;
/** 服务版本 */
version: string;
/** 当前是否启用内存缓存 */
cache_enabled: boolean;
/** 当前模型名,不包含 API Key 或 baseURL */
model: string;
}
/** 服务统计响应,来自当前 Nuxt 进程的内存状态 */
/** 服务统计响应 */
export interface IStatsResponse {
/** 服务版本 */
version: string;
@@ -61,11 +59,7 @@ export interface IStatsResponse {
uptime: number;
/** 当前模型名 */
model: string;
/** 当前是否启用内存缓存 */
cache_enabled: boolean;
/** 当前有效缓存数量 */
cache_size: number;
/** 当前进程内问答记录数量 */
/** 当前用户的问答记录总数 */
qa_records_count: number;
}
-52
View File
@@ -1,25 +1,13 @@
<!-- app/pages/dashboard.vue - 运行状态与最近问答记录页面 -->
<script lang="ts" setup>
import { RefreshCw } from "lucide-vue-next";
import QaRecordDetail from "@/components/dashboard/QaRecordDetail.vue";
import QaRecordsTable from "@/components/dashboard/QaRecordsTable.vue";
import StatsOverview from "@/components/dashboard/StatsOverview.vue";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from "@/components/ui/card";
import { useAnswerStore } from "@/stores/answer";
import { useAuthStore } from "@/stores/auth";
definePageMeta({ middleware: "auth" });
const answerStore = useAnswerStore();
const authStore = useAuthStore();
useHead({
title: "Dashboard - OCS AI 答题服务"
@@ -36,50 +24,10 @@ if (import.meta.client) {
void answerStore.loadDashboard();
});
}
const refreshing = ref(false);
const handleRefreshToken = async () => {
refreshing.value = true;
await authStore.refreshApiToken();
refreshing.value = false;
};
</script>
<template>
<div class="grid gap-6">
<!-- OCS 油猴脚本 API token 配置卡片 -->
<Card v-if="authStore.user?.apiToken">
<CardHeader>
<CardTitle>OCS 脚本 Token</CardTitle>
<CardDescription>
OCS 油猴脚本的服务器配置中填入此
token脚本将以你的账号身份调用答题接口
</CardDescription>
</CardHeader>
<CardContent>
<div class="flex items-center gap-2">
<code
class="flex-1 overflow-x-auto bg-muted px-3 py-2 font-mono text-sm rounded-full"
>
{{ authStore.user.apiToken }}
</code>
<CopyCom :text="authStore.user.apiToken" :disabled="refreshing" />
<Button
variant="outline"
size="icon"
:disabled="refreshing"
title="刷新 Token"
class="flex items-center gap-1 w-fit px-2.5"
@click="handleRefreshToken"
>
<RefreshCw :class="['size-4', refreshing ? 'animate-spin' : '']" />
<span>刷新 Token</span>
</Button>
</div>
</CardContent>
</Card>
<StatsOverview />
<QaRecordsTable />
<QaRecordDetail />
+12 -1
View File
@@ -13,6 +13,9 @@ import { AnswerService } from "@/services";
/** Dashboard 最近记录表格每页数量,组件直接复用,避免多个地方写死 */
export const DASHBOARD_RECORD_PAGE_SIZE = 10;
/** 分页大小可选列表,与后端白名单保持一致 */
export const DASHBOARD_PAGE_SIZE_OPTIONS = [10, 50, 100] as const;
/** 题型下拉选项,value 保持 OCS / 旧 Python 服务使用的英文值 */
export const QUESTION_TYPE_OPTIONS: Array<{
label: string;
@@ -104,6 +107,13 @@ export const useAnswerStore = defineStore("answer", () => {
await getRecords(page);
};
/** 切换分页大小,重置到第 1 页后重新请求 */
const setRecordsPageSize = async (size: number) => {
if (recordsLoading.value || size === recordsPageSize.value) return;
recordsPageSize.value = size;
await getRecords(1);
};
/** 调用答题 API,返回 OCS 兼容结构但只在 store 中维护 UI 状态 */
const searchAnswer = async () => {
const title = question.value.trim();
@@ -245,6 +255,7 @@ export const useAnswerStore = defineStore("answer", () => {
loadDashboard,
clearCache,
selectRecord,
setRecordsPage
setRecordsPage,
setRecordsPageSize
};
});
+16 -11
View File
@@ -13,17 +13,19 @@ datasource db {
// Better Auth 标准用户表
// apiToken 由服务端注册 hook 生成,供 OCS 油猴脚本跨域身份验证
model User {
id String @id
name String
email String @unique
emailVerified Boolean
image String?
createdAt DateTime
updatedAt DateTime
apiToken String? @unique
sessions Session[]
accounts Account[]
qaRecords QaRecord[]
id String @id
name String
email String @unique
emailVerified Boolean
image String?
createdAt DateTime
updatedAt DateTime
apiToken String? @unique
/// 用户最近一次清缓存的时间;只有在此时间之后写入的记录才算缓存命中
cacheClearedAt DateTime?
sessions Session[]
accounts Account[]
qaRecords QaRecord[]
@@map("user")
}
@@ -85,7 +87,10 @@ model QaRecord {
type String
options String? @db.Text
answer String? @db.Text
/// 题目+题型+选项的 MD5,用于 DB 缓存查询;老记录为 null
hash String? @db.Char(32)
createdAt DateTime @default(now())
@@index([userId, hash])
@@map("qa_record")
}
+11 -16
View File
@@ -1,27 +1,22 @@
// server/api/cache/clear.post.ts - 清空答题缓存接口
import { answerCache } from "~~/server/utils/cache";
import { serverEnv } from "~~/server/utils/env";
// server/api/cache/clear.post.ts - 清空当前用户 DB 缓存接口
import { prisma } from "~~/server/utils/db";
import { createApiLogger } from "~~/server/utils/logging";
/**
* 清空内存缓存
* 清缓存:将当前用户的 cacheClearedAt 更新为当前时间
*
* 这是一个管理类接口,必须携带有效 session cookie(由 api-auth middleware 统一鉴权)
* 清理的是当前 Nuxt 进程内缓存;多实例部署时,每个实例都有自己的内存缓存
* 之后查 DB 缓存时只命中该时间之后写入的记录,历史记录全部保留。
* 必须携带有效 session cookie(由 api-auth middleware 统一鉴权)
*/
export default defineEventHandler((event) => {
export default defineEventHandler(async (event) => {
const logger = createApiLogger(event, "api.cache.clear");
const userId = event.context.auth!.user.id;
// 缓存被关闭时不报错,只明确告诉调用方当前没有缓存可清
if (!serverEnv.enableCache || !answerCache) {
return {
success: false,
message: "缓存未启用"
};
}
await prisma.user.update({
where: { id: userId },
data: { cacheClearedAt: new Date() }
});
// 清空当前进程内缓存,DB 记录不受影响
answerCache.clear();
logger.info("finish_success");
return {
+1 -2
View File
@@ -6,14 +6,13 @@ import { SERVICE_VERSION } from "~~/server/utils/runtimeState";
* 健康检查不需要鉴权
*
* 这个接口用于部署平台、Docker healthcheck 或人工确认服务是否启动;
* 返回模型名和缓存开关,但不返回 API Key、baseURL 或其他敏感配置
* 返回模型名,但不返回 API Key、baseURL 或其他敏感配置
*/
export default defineEventHandler(() => {
return {
status: "ok",
message: "AI题库服务运行正常",
version: SERVICE_VERSION,
cache_enabled: serverEnv.enableCache,
model: serverEnv.openAiModel
};
});
+3 -3
View File
@@ -18,9 +18,9 @@ export default defineEventHandler(async (event) => {
const query = getQuery(event);
const rawPage = Number.parseInt(query.page?.toString() || "1", 10);
const rawSize = Number.parseInt(query.size?.toString() || "10", 10);
const size = Number.isFinite(rawSize)
? Math.min(Math.max(rawSize, 1), 100)
: 10;
// size 只允许 10 / 50 / 100;传入其他值(含超出上限)一律退回 10
const ALLOWED_SIZES = new Set([10, 50, 100]);
const size = ALLOWED_SIZES.has(rawSize) ? rawSize : 10;
const page = Number.isFinite(rawPage) ? Math.max(rawPage, 1) : 1;
const { records, total } = await getQaRecords(event.context.auth!.user.id, {
+21 -17
View File
@@ -1,4 +1,6 @@
// server/api/search.ts - OCS AnswererWrapper 兼容搜索接口
import { createHash } from "node:crypto";
import {
getQuery,
type H3Event,
@@ -16,11 +18,10 @@ import {
type SearchParams
} from "~~/server/utils/answer";
import { getAuthSession } from "~~/server/utils/auth";
import { answerCache } from "~~/server/utils/cache";
import { prisma } from "~~/server/utils/db";
import { createApiLogger, toSafeLogError } from "~~/server/utils/logging";
import { askAnswerStream } from "~~/server/utils/openai";
import { addQaRecord } from "~~/server/utils/runtimeState";
import { addQaRecord, lookupCachedAnswer } from "~~/server/utils/runtimeState";
/**
* 把 query/body/form 中的值统一转成字符串
@@ -138,17 +139,25 @@ export default defineEventHandler(async (event) => {
// 鉴权:优先 session(浏览器登录),无 session 则用 body.token 查 apiToken
// OCS 油猴脚本跨域无法携带 cookie,需在 body 中传入用户自己的 apiToken
// 同时取出 cacheClearedAt,用于 DB 缓存过滤
let userId: string | null = null;
let cacheClearedAt: Date | null = null;
const session = await getAuthSession(event);
if (session) {
userId = session.user.id;
const userData = await prisma.user.findUnique({
where: { id: userId },
select: { cacheClearedAt: true }
});
cacheClearedAt = userData?.cacheClearedAt ?? null;
} else if (params.token) {
const user = await prisma.user.findUnique({
where: { apiToken: params.token },
select: { id: true }
select: { id: true, cacheClearedAt: true }
});
userId = user?.id ?? null;
cacheClearedAt = user?.cacheClearedAt ?? null;
}
if (!userId) {
@@ -167,12 +176,12 @@ export default defineEventHandler(async (event) => {
return createOcsErrorResponse("未提供问题内容");
}
// 缓存 key 包含题目题型选项;同题不同选项不能共用答案
const cachedAnswer = answerCache?.get(
params.title,
params.type,
params.options
);
// 计算缓存 key题目+题型+选项的 MD5;同题不同选项不能共用答案
const hash = createHash("md5")
.update(`${params.title}|${params.type}|${params.options}`, "utf8")
.digest("hex");
const cachedAnswer = await lookupCachedAnswer(userId, hash, cacheClearedAt);
if (cachedAnswer) {
logger.info("cache_hit");
@@ -191,19 +200,14 @@ export default defineEventHandler(async (event) => {
});
const processedAnswer = extractAnswer(streamResult.answer, params.type);
// 先缓存再记录;这两步失败风险很低,且都是内存操作,不会阻塞主链路
answerCache?.set(
params.title,
processedAnswer,
params.type,
params.options
);
// 写入 DB 记录(带 hash);记录本身即为后续缓存查询的来源
await addQaRecord({
userId,
question: params.title,
type: params.type,
options: params.options,
answer: processedAnswer
answer: processedAnswer,
hash
});
logger.info("finish_success", {
+11 -4
View File
@@ -1,16 +1,23 @@
// server/api/stats.get.ts - 服务运行统计接口
import { prisma } from "~~/server/utils/db";
import { createApiLogger } from "~~/server/utils/logging";
import { getRuntimeStats } from "~~/server/utils/runtimeState";
/**
* 运行统计接口
*
* 统计信息包含 uptime、模型名、缓存数量、最近问答记录数
* 返回进程 uptime、模型名以及当前用户的问答记录
* 必须携带有效 session cookie(由 api-auth middleware 统一鉴权)
*/
export default defineEventHandler((event) => {
export default defineEventHandler(async (event) => {
const logger = createApiLogger(event, "api.stats");
// getRuntimeStats 会实时清理过期缓存,再返回有效缓存数量
const userId = event.context.auth!.user.id;
const [runtimeStats, qa_records_count] = await Promise.all([
Promise.resolve(getRuntimeStats()),
prisma.qaRecord.count({ where: { userId } })
]);
logger.info("finish_success");
return getRuntimeStats();
return { ...runtimeStats, qa_records_count };
});
-100
View File
@@ -1,100 +0,0 @@
// server/utils/cache.ts - 简单内存缓存,按题目、题型和选项生成缓存键
import { createHash } from "node:crypto";
import { serverEnv } from "~~/server/utils/env";
/**
* 旧 Python 服务使用进程内字典缓存答案
*
* Nuxt 版保持同样的“内存缓存”语义:服务重启后缓存清空,不跨实例共享;
* 这对个人题库服务足够简单,也避免为了缓存引入数据库或 Redis
*/
export class SimpleCache {
/** Map key 是题目、题型和选项计算出的 md5;value 保存写入时间和答案 */
private readonly cache = new Map<
string,
{
timestamp: number;
value: string;
}
>();
constructor(private readonly expirationSeconds: number) {}
/**
* 根据题目、题型和选项生成缓存键
*
* 同一道题如果选项不同,不能复用旧答案,所以三个字段都参与计算
*/
private generateKey(question: string, questionType = "", options = "") {
return createHash("md5")
.update(`${question}|${questionType}|${options}`, "utf8")
.digest("hex");
}
/**
* 读取缓存答案
*
* 命中过期项时会顺手删除,避免长时间运行后堆积无效缓存
*/
get(question: string, questionType = "", options = "") {
const key = this.generateKey(question, questionType, options);
const item = this.cache.get(key);
if (!item) return undefined;
if (Date.now() - item.timestamp < this.expirationSeconds * 1000) {
return item.value;
}
this.cache.delete(key);
return undefined;
}
/** 写入答案缓存,时间戳使用当前进程时间即可 */
set(question: string, answer: string, questionType = "", options = "") {
const key = this.generateKey(question, questionType, options);
this.cache.set(key, {
timestamp: Date.now(),
value: answer
});
}
/** 清空全部缓存,对应 `/api/cache/clear` */
clear() {
this.cache.clear();
}
/**
* 批量移除过期项
*
* 目前在统计缓存大小时调用,避免 stats 返回已经过期的数量
*/
removeExpired() {
const now = Date.now();
let removedCount = 0;
for (const [key, item] of this.cache.entries()) {
if (now - item.timestamp >= this.expirationSeconds * 1000) {
this.cache.delete(key);
removedCount += 1;
}
}
return removedCount;
}
/** 获取当前有效缓存数量 */
size() {
this.removeExpired();
return this.cache.size;
}
}
/**
* 全局答案缓存实例
*
* 如果 `ENABLE_CACHE=false`,导出 undefined,调用处用可选链即可保持逻辑简洁
*/
export const answerCache = serverEnv.enableCache
? new SimpleCache(serverEnv.cacheExpiration)
: undefined;
-4
View File
@@ -73,10 +73,6 @@ export const serverEnv = {
maxTokens: readInteger("MAX_TOKENS", 500),
/** 模型采样温度,越低越稳定 */
temperature: readNumber("TEMPERATURE", 0.7),
/** 是否启用内存缓存 */
enableCache: readBoolean("ENABLE_CACHE", true),
/** 缓存过期时间,单位秒 */
cacheExpiration: readInteger("CACHE_EXPIRATION", 86_400),
/** 预留日志级别配置,目前日志工具只负责安全输出 */
logLevel: readString("LOG_LEVEL", "INFO"),
/** 单行 SSE data 的最大字节数,用于防止异常流无限堆内存 */
+27 -6
View File
@@ -1,5 +1,4 @@
// server/utils/runtimeState.ts - 服务启动时间内存状态 + 问答记录 DB 读写
import { answerCache } from "~~/server/utils/cache";
import { prisma } from "~~/server/utils/db";
import { serverEnv } from "~~/server/utils/env";
@@ -29,6 +28,7 @@ export const addQaRecord = async (record: {
type: string;
options: string;
answer: string;
hash: string;
}) => {
await prisma.qaRecord.create({
data: {
@@ -36,11 +36,34 @@ export const addQaRecord = async (record: {
question: record.question,
type: record.type,
options: record.options || null,
answer: record.answer || null
answer: record.answer || null,
hash: record.hash
}
});
};
/**
* 按用户 + hash 查找 DB 缓存答案
*
* 只返回 cacheClearedAt 之后写入的记录;未存入时间或 hash 为 null 的老记录不会命中
*/
export const lookupCachedAnswer = async (
userId: string,
hash: string,
cacheClearedAt: Date | null
): Promise<string | null> => {
const record = await prisma.qaRecord.findFirst({
where: {
userId,
hash,
...(cacheClearedAt ? { createdAt: { gt: cacheClearedAt } } : {})
},
orderBy: { createdAt: "desc" },
select: { answer: true }
});
return record?.answer ?? null;
};
/**
* 从数据库分页读取指定用户的问答记录,按创建时间倒序
*/
@@ -76,13 +99,11 @@ export const getQaRecords = async (
}));
return { records, total };
};
/** 生成 `/api/stats` 响应,实时计算 uptime 和有效缓存数量 */
/** 生成 `/api/stats` 的基础运行时信息,不包含用户相关数据 */
export const getRuntimeStats = () => {
return {
version: SERVICE_VERSION,
uptime: (Date.now() - startTime) / 1000,
model: serverEnv.openAiModel,
cache_enabled: serverEnv.enableCache,
cache_size: answerCache?.size() ?? 0
model: serverEnv.openAiModel
};
};