108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<!-- 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,
|
||
CardContent,
|
||
CardHeader,
|
||
CardTitle
|
||
} from "@/components/ui/card";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
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;
|
||
});
|
||
|
||
/** 与旧 Python 项目的 ocs_config_example.json 保持同样字段；登录后自动填入 apiToken */
|
||
const configText = computed(() => {
|
||
const data: Record<string, string> = {
|
||
title: "${title}",
|
||
type: "${type}",
|
||
options: "${options}",
|
||
token: ""
|
||
};
|
||
|
||
if (authStore.user?.apiToken) {
|
||
data.token = authStore.user.apiToken;
|
||
}
|
||
|
||
return JSON.stringify(
|
||
[
|
||
{
|
||
name: "AI智能题库",
|
||
homepage: origin.value,
|
||
url: `${origin.value}/api/search`,
|
||
method: "get",
|
||
contentType: "json",
|
||
data,
|
||
handler:
|
||
"return (res)=> res.code === 1 ? [res.question, res.answer] : [res.msg, undefined]"
|
||
}
|
||
],
|
||
null,
|
||
2
|
||
);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<!-- auth 插件为 client-only，apiToken / isOnline 在 SSR 时不可用；
|
||
整张卡用 ClientOnly 包裹，避免 token 文本和条件渲染的水合不匹配 -->
|
||
<ClientOnly>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>OCS 配置</CardTitle>
|
||
<CardAction>
|
||
<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="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>
|
||
</Card>
|
||
|
||
<template #fallback>
|
||
<!-- SSR 占位，维持右侧列布局，高度与真实卡片近似 -->
|
||
<Skeleton class="h-115.5 rounded-4xl" />
|
||
</template>
|
||
</ClientOnly>
|
||
</template>
|