diff --git a/src/api/cardKeys.js b/src/api/cardKeys.js
index a8810b3..2215dfe 100644
--- a/src/api/cardKeys.js
+++ b/src/api/cardKeys.js
@@ -1,15 +1,14 @@
 import { apiRequest } from "./client.js";
 
 /**
- * @param {string} token
- * @param {string} serialNumber
+ * @param {{ username: string, serialNumber: string }} payload
  */
-export function activateCardKeyApi(token, serialNumber) {
+export function activateCardKeyApi({ username, serialNumber }) {
   return apiRequest("/card-keys/activate", {
     method: "POST",
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify({ serial_number: serialNumber }),
+    body: JSON.stringify({
+      username: username.trim(),
+      serial_number: serialNumber.trim().toUpperCase(),
+    }),
   });
 }
diff --git a/src/main.js b/src/main.js
index a5ea7d7..cc0a89f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,12 +88,19 @@ function setupHeartbeatLogoutListener() {
     if (!authStore.isAuthenticated) {
       return;
     }
-      authStore.currentUser.vip_end_time="2022-06-28T16:01:13";
-      await router.replace({ name: "card-activate" });
-    
+    authStore.redirectToCardActivate(router);
+  });
+}
+
+function setupVipWatch() {
+  authStore.$subscribe(() => {
+    if (!authStore.needsVipActivation) return;
+    if (router.currentRoute.value.name === "card-activate") return;
+    authStore.redirectToCardActivate(router);
   });
 }
 
 setupHeartbeatLogoutListener();
+setupVipWatch();
 
 app.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index 4e04c91..dec765f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -390,6 +390,10 @@ router.beforeEach((to) => {
 
   const auth = useAuthStore();
 
+  if (to.name === "card-activate") {
+    return true;
+  }
+
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
 
 
@@ -402,6 +406,17 @@ router.beforeEach((to) => {
 
 
 
+  if (auth.needsVipActivation) {
+
+    return {
+      name: "card-activate",
+      query: { username: auth.currentUser?.username ?? "" },
+    };
+
+  }
+
+
+
   if ((to.name === "login" || to.name === "register") && auth.isAuthenticated) {
 
     return { name: "home" };
@@ -417,8 +432,6 @@ router.beforeEach((to) => {
     .find((role) => role != null);
 
 
-  console.log('requiredRole',requiredRole);
-  console.log('auth.roleId',auth.roleId);
   if (requiredRole != null && auth.roleId !== requiredRole) {
 
     return { name: "home" };
diff --git a/src/stores/auth.js b/src/stores/auth.js
index af56a43..8fdd4c8 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -5,11 +5,24 @@ import { fetchMeApi, loginApi, logoutApi, registerApi } from "../api/auth.js";
 const TOKEN_KEY = "aiclient_token";
 const USER_KEY = "aiclient_current_user";
 
+/** 普通用户 */
+export const ROLE_USER = 0;
 /** 管理员 */
 export const ROLE_ADMIN = 1;
 /** 代理 */
 export const ROLE_AGENT = 2;
-export const ROLE_OEM=3;
+export const ROLE_OEM = 3;
+
+export function isVipExpired(vipEndTime) {
+  if (!vipEndTime) return true;
+  const d = new Date(vipEndTime);
+  if (Number.isNaN(d.getTime())) return true;
+  return d.getTime() <= Date.now();
+}
+
+function isStaffRole(roleId) {
+  return roleId === ROLE_ADMIN || roleId === ROLE_AGENT || roleId === ROLE_OEM;
+}
 
 
 async function syncAuthSessionToRust(token, user) {
@@ -32,7 +45,6 @@ function applyTokenResponse(store, res, fallbackMessage) {
   if (!data?.access_token || !data?.user) {
     return { ok: false, message: "服务器返回数据异常" };
   }
-  console.log(data.user);
   store.setSession(data.access_token, {
     id: data.user.id,
     username: data.user.username,
@@ -62,7 +74,13 @@ export const useAuthStore = defineStore("auth", {
     roleId: (state) => state.currentUser?.role_id ?? null,
     isAdmin: (state) => state.currentUser?.role_id === ROLE_ADMIN,
     isAgent: (state) => state.currentUser?.role_id === ROLE_AGENT,
-    isOEM : (state) => state.currentUser?.role_id === ROLE_OEM,
+    isOEM: (state) => state.currentUser?.role_id === ROLE_OEM,
+    isVipExpired: (state) => isVipExpired(state.currentUser?.vip_end_time),
+    needsVipActivation: (state) => {
+      if (!state.token || !state.currentUser) return false;
+      if (isStaffRole(state.currentUser.role_id ?? ROLE_USER)) return false;
+      return isVipExpired(state.currentUser.vip_end_time);
+    },
   },
 
   actions: {
@@ -87,6 +105,19 @@ export const useAuthStore = defineStore("auth", {
       syncAuthSessionToRust(this.token, this.currentUser);
     },
 
+    cardActivateQuery() {
+      return {
+        username: this.currentUser?.username ?? "",
+      };
+    },
+
+    redirectToCardActivate(router) {
+      router.replace({
+        name: "card-activate",
+        query: this.cardActivateQuery(),
+      });
+    },
+
     async register({ username, password, confirmPassword }) {
       const name = username?.trim();
       if (!name || !password) {
diff --git a/src/views/CardActivateView.vue b/src/views/CardActivateView.vue
index e6b4b5e..6f8216d 100644
--- a/src/views/CardActivateView.vue
+++ b/src/views/CardActivateView.vue
@@ -1,16 +1,22 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useAuthStore } from "../stores/auth.js";
 import { activateCardKeyApi } from "../api/cardKeys.js";
+import AuthLayout from "../components/AuthLayout.vue";
 
+const route = useRoute();
+const router = useRouter();
 const auth = useAuthStore();
 
+const username = ref("");
 const serialNumber = ref("");
 const loading = ref(false);
 const feedback = ref({ severity: "", message: "" });
+const resultSnapshot = ref(null);
 
 const vipEndLabel = computed(() => {
-  const raw = auth.currentUser?.vip_end_time;
+  const raw = resultSnapshot.value?.vip_end_time ?? auth.currentUser?.vip_end_time;
   if (!raw) return "未开通";
   const d = new Date(raw);
   if (Number.isNaN(d.getTime())) return "—";
@@ -18,11 +24,25 @@ const vipEndLabel = computed(() => {
 });
 
 const pointsLabel = computed(() => {
-  const p = auth.currentUser?.points;
+  const p = resultSnapshot.value?.points ?? auth.currentUser?.points;
   if (p == null || Number.isNaN(Number(p))) return "0";
   return String(p);
 });
 
+const showStatus = computed(() => auth.isAuthenticated || resultSnapshot.value != null);
+
+watch(
+  () => route.query.username,
+  (value) => {
+    if (typeof value === "string" && value.trim()) {
+      username.value = value.trim();
+    } else if (auth.currentUser?.username) {
+      username.value = auth.currentUser.username;
+    }
+  },
+  { immediate: true },
+);
+
 function showMessage(severity, message) {
   feedback.value = { severity, message };
 }
@@ -39,7 +59,12 @@ function formatActivateDetail(data) {
 }
 
 async function onSubmit() {
+  const name = username.value.trim();
   const serial = serialNumber.value.trim().toUpperCase();
+  if (!name) {
+    showMessage("warn", "请输入用户名");
+    return;
+  }
   if (!serial) {
     showMessage("warn", "请输入卡密");
     return;
@@ -48,7 +73,7 @@ async function onSubmit() {
   loading.value = true;
   feedback.value = { severity: "", message: "" };
 
-  const res = await activateCardKeyApi(auth.token, serial);
+  const res = await activateCardKeyApi({ username: name, serialNumber: serial });
   loading.value = false;
 
   if (!res.ok) {
@@ -57,82 +82,86 @@ async function onSubmit() {
   }
 
   serialNumber.value = "";
-  await auth.refreshProfile();
+  resultSnapshot.value = res.data ?? null;
+
+  if (auth.isAuthenticated && auth.currentUser?.username === name) {
+    await auth.refreshProfile();
+  }
 
   const detail = formatActivateDetail(res.data);
   showMessage("success", detail ? `${res.message}（${detail}）` : res.message || "激活成功");
+
+  if (auth.isAuthenticated && auth.currentUser?.username === name && !auth.isVipExpired) {
+    router.replace({ name: "home" });
+  }
+}
+
+function goLogin() {
+  router.push({ name: "login" });
 }
 </script>
 
 <template>
-  <div class="card-activate-page">
-    <div class="card-activate-page__header">
-      <h1 class="gradient-text text-xl font-semibold">卡密激活</h1>
-      <p class="mt-1 text-sm text-slate-400">输入卡密序列号，兑换会员时长或点数</p>
-    </div>
+  <AuthLayout title="卡密激活" subtitle="输入用户名与卡密序列号，兑换会员时长或点数">
+    <Message
+      v-if="feedback.message"
+      :severity="feedback.severity"
+      :closable="true"
+      class="mb-4 w-full"
+      @close="feedback.message = ''"
+    >
+      {{ feedback.message }}
+    </Message>
 
-    <div class="card-activate-page__panel">
-      <div class="card-activate-page__status">
-        <div class="card-activate-page__status-item">
-          <span class="text-xs uppercase text-slate-500">会员到期</span>
-          <span class="text-sm text-slate-200">{{ vipEndLabel }}</span>
-        </div>
-        <div class="card-activate-page__status-item">
-          <span class="text-xs uppercase text-slate-500">当前点数</span>
-          <span class="text-sm text-slate-200">{{ pointsLabel }}</span>
-        </div>
+    <div v-if="showStatus" class="card-activate-page__status mb-4">
+      <div class="card-activate-page__status-item">
+        <span class="text-xs uppercase text-slate-500">会员到期</span>
+        <span class="text-sm text-slate-200">{{ vipEndLabel }}</span>
+      </div>
+      <div class="card-activate-page__status-item">
+        <span class="text-xs uppercase text-slate-500">当前点数</span>
+        <span class="text-sm text-slate-200">{{ pointsLabel }}</span>
       </div>
-
-      <Message
-        v-if="feedback.message"
-        :severity="feedback.severity"
-        :closable="true"
-        class="w-full"
-        @close="feedback.message = ''"
-      >
-        {{ feedback.message }}
-      </Message>
-
-      <form class="flex flex-col gap-4" @submit.prevent="onSubmit">
-        <div class="flex flex-col gap-2">
-          <label for="card-serial" class="text-xs uppercase text-slate-500">卡密序列号</label>
-          <InputText
-            id="card-serial"
-            v-model="serialNumber"
-            placeholder="请输入卡密"
-            class="w-full font-mono uppercase tracking-wider"
-            autocomplete="off"
-            :disabled="loading"
-            @keyup.enter="onSubmit"
-          />
-        </div>
-        <Button type="submit" label="立即激活" :loading="loading" class="w-full" />
-      </form>
     </div>
-  </div>
+
+    <form class="flex flex-col gap-4" @submit.prevent="onSubmit">
+      <div class="flex flex-col gap-2">
+        <label for="card-username" class="font-mono text-xs text-text-muted uppercase">用户名</label>
+        <InputText
+          id="card-username"
+          v-model="username"
+          placeholder="请输入要激活的用户名"
+          autocomplete="username"
+          class="w-full"
+          :disabled="loading"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="card-serial" class="font-mono text-xs text-text-muted uppercase">卡密序列号</label>
+        <InputText
+          id="card-serial"
+          v-model="serialNumber"
+          placeholder="请输入卡密"
+          class="w-full font-mono uppercase tracking-wider"
+          autocomplete="off"
+          :disabled="loading"
+        />
+      </div>
+      <Button type="submit" label="立即激活" :loading="loading" class="w-full" />
+      <Button
+        v-if="!auth.isAuthenticated"
+        type="button"
+        label="已有账号，去登录"
+        severity="secondary"
+        text
+        class="w-full"
+        @click="goLogin"
+      />
+    </form>
+  </AuthLayout>
 </template>
 
 <style scoped>
-.card-activate-page {
-  max-width: 28rem;
-  margin: 0 auto;
-  padding: 1.5rem 1rem 2rem;
-}
-
-.card-activate-page__header {
-  margin-bottom: 1.5rem;
-}
-
-.card-activate-page__panel {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border-radius: 0.75rem;
-  border: 1px solid rgb(255 255 255 / 0.1);
-  background: rgb(255 255 255 / 0.05);
-}
-
 .card-activate-page__status {
   display: grid;
   grid-template-columns: 1fr 1fr;