feat: 新增鉴权

app/pages/dashboard.vue

@@ -1,11 +1,25 @@
 <!-- app/pages/dashboard.vue - 运行状态与最近问答记录页面 -->
 <script lang="ts" setup>
+import { ArrowPathIcon } from "@heroicons/vue/24/outline";
+
 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 答题服务"
@@ -22,10 +36,50 @@ 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" />
+          <Button
+            variant="outline"
+            size="icon"
+            :disabled="refreshing"
+            title="刷新 Token"
+            @click="handleRefreshToken"
+          >
+            <ArrowPathIcon
+              :class="['size-4', refreshing ? 'animate-spin' : '']"
+            />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+
     <StatsOverview />
     <QaRecordsTable />
     <QaRecordDetail />