feat: 大量优化和bug修复

app/components/home/OcsConfigCard.vue

@@ -10,6 +10,7 @@ import {
   CardHeader,
   CardTitle
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useAuthStore } from "@/stores/auth";
 
 const authStore = useAuthStore();
@@ -61,31 +62,46 @@ const configText = computed(() => {
 </script>
 
 <template>
-  <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>
+  <!-- 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>
+      <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>
+      </CardContent>
+    </Card>
+
+    <template #fallback>
+      <!-- SSR 占位，维持右侧列布局，高度与真实卡片近似 -->
+      <Skeleton class="h-115.5 rounded-4xl" />
+    </template>
+  </ClientOnly>
 </template>