Implement compression quota refunds and admin manual subscription

frontend/src/pages/DocsPage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-2xl font-semibold tracking-tight text-slate-900">开发者</h1>
+      <p class="text-sm text-slate-600">对外 API + 计费 + 额度（硬配额）一体化。</p>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5 text-sm text-slate-700">
+      <div class="font-medium text-slate-900">快速开始</div>
+      <ol class="mt-2 list-decimal space-y-1 pl-5">
+        <li>登录后，在控制台创建 API Key（仅 Pro/Business）。</li>
+        <li>调用 <code>POST /api/v1/compress/direct</code> 获得二进制输出。</li>
+        <li>配额不足返回 <code>402 QUOTA_EXCEEDED</code>，请升级或等待周期重置。</li>
+      </ol>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5 text-sm text-slate-700">
+      <div class="font-medium text-slate-900">示例（curl）</div>
+      <pre class="mt-3 overflow-auto rounded-lg bg-slate-950 p-4 text-xs text-slate-100"><code>curl -X POST \\
+  -H \"X-API-Key: if_live_xxx\" \\
+  -F \"file=@./demo.png\" \\
+  -F \"compression_rate=70\" \\
+  https://your-domain.com/api/v1/compress/direct -o out.png</code></pre>
+    </div>
+
+    <div class="text-sm text-slate-600">
+      更完整的接口说明请查看仓库内文档：<code>docs/api.md</code>。
+    </div>
+  </div>
+</template>

frontend/src/pages/ForgotPasswordPage.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { forgotPassword } from '@/services/api'
+import { ApiError } from '@/services/http'
+
+const email = ref('')
+const busy = ref(false)
+const error = ref<string | null>(null)
+const success = ref<string | null>(null)
+
+async function submit() {
+  busy.value = true
+  error.value = null
+  success.value = null
+  try {
+    const resp = await forgotPassword(email.value.trim())
+    success.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '发送失败，请稍后再试'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">找回密码</h1>
+      <p class="mt-1 text-sm text-slate-600">输入邮箱，我们会发送重置链接。</p>
+
+      <div v-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+      <div
+        v-if="success"
+        class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900"
+      >
+        {{ success }}
+      </div>
+
+      <form class="mt-5 space-y-4" @submit.prevent="submit">
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">邮箱</div>
+          <input
+            v-model="email"
+            type="email"
+            autocomplete="email"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="you@example.com"
+            required
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="busy"
+        >
+          {{ busy ? '发送中…' : '发送重置链接' }}
+        </button>
+      </form>
+
+      <div class="mt-4 text-sm text-slate-600">
+        <router-link to="/login" class="text-indigo-600 hover:text-indigo-700">返回登录</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/pages/HomePage.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import { useAuthStore } from '@/stores/auth'
+import { compressFile, getSubscription, getUsage, sendVerification, type CompressResponse } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { formatBytes } from '@/utils/format'
+
+type ItemStatus = 'idle' | 'compressing' | 'done' | 'error'
+
+interface UploadItem {
+  id: string
+  file: File
+  previewUrl: string
+  status: ItemStatus
+  result?: CompressResponse
+  error?: string
+}
+
+const auth = useAuthStore()
+
+const options = reactive({
+  compressionRate: 60,
+  maxWidth: '' as string,
+  maxHeight: '' as string,
+})
+
+const dragActive = ref(false)
+
+const items = ref<UploadItem[]>([])
+const busy = computed(() => items.value.some((x) => x.status === 'compressing'))
+
+const alert = ref<{ type: 'info' | 'success' | 'error'; message: string } | null>(null)
+const sendingVerification = ref(false)
+const quotaLoading = ref(false)
+const quotaError = ref<string | null>(null)
+const usage = ref<Awaited<ReturnType<typeof getUsage>> | null>(null)
+const subscription = ref<Awaited<ReturnType<typeof getSubscription>>['subscription'] | null>(null)
+
+const needVerifyEmail = computed(() => auth.isLoggedIn && auth.user && !auth.user.email_verified)
+
+onMounted(async () => {
+  if (!auth.token) return
+  quotaLoading.value = true
+  quotaError.value = null
+  try {
+    const [u, s] = await Promise.all([getUsage(auth.token), getSubscription(auth.token)])
+    usage.value = u
+    subscription.value = s.subscription
+  } catch (err) {
+    if (err instanceof ApiError) {
+      quotaError.value = `[${err.code}] ${err.message}`
+    } else {
+      quotaError.value = '额度加载失败'
+    }
+  } finally {
+    quotaLoading.value = false
+  }
+})
+
+function addFiles(fileList: FileList | null) {
+  if (!fileList || fileList.length === 0) return
+  alert.value = null
+
+  for (const file of Array.from(fileList)) {
+    const id = crypto.randomUUID()
+    const previewUrl = URL.createObjectURL(file)
+    items.value.push({ id, file, previewUrl, status: 'idle' })
+  }
+}
+
+function handleFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  addFiles(input.files)
+  input.value = ''
+}
+
+function handleDrop(event: DragEvent) {
+  dragActive.value = false
+  if (busy.value) return
+  addFiles(event.dataTransfer?.files ?? null)
+}
+
+function removeItem(id: string) {
+  const idx = items.value.findIndex((x) => x.id === id)
+  if (idx === -1) return
+  const item = items.value[idx]
+  if (!item) return
+  URL.revokeObjectURL(item.previewUrl)
+  items.value.splice(idx, 1)
+}
+
+function clearAll() {
+  for (const item of items.value) URL.revokeObjectURL(item.previewUrl)
+  items.value = []
+  alert.value = null
+}
+
+function toInt(v: string): number | undefined {
+  const n = Number(v)
+  if (!Number.isFinite(n) || n <= 0) return undefined
+  return Math.floor(n)
+}
+
+async function runOne(item: UploadItem) {
+  item.status = 'compressing'
+  item.error = undefined
+
+  try {
+    const result = await compressFile(
+      item.file,
+      {
+        compression_rate: options.compressionRate,
+        max_width: toInt(options.maxWidth),
+        max_height: toInt(options.maxHeight),
+      },
+      auth.token,
+    )
+
+    item.result = result
+    item.status = 'done'
+  } catch (err) {
+    item.status = 'error'
+    if (err instanceof ApiError) {
+      item.error = `[${err.code}] ${err.message}`
+      return
+    }
+    item.error = '压缩失败，请稍后再试'
+  }
+}
+
+async function runAll() {
+  alert.value = null
+  for (const item of items.value) {
+    if (item.status === 'done') continue
+    await runOne(item)
+  }
+}
+
+async function download(item: UploadItem) {
+  if (!item.result) return
+  const url = item.result.download_url
+
+  if (!auth.token) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+    return
+  }
+
+  const res = await fetch(url, {
+    headers: { authorization: `Bearer ${auth.token}` },
+  })
+  if (!res.ok) {
+    alert.value = { type: 'error', message: `下载失败（HTTP ${res.status}）` }
+    return
+  }
+
+  const blob = await res.blob()
+  const objectUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = objectUrl
+  const base = item.file.name.replace(/\.[^/.]+$/, '')
+  const ext = item.result.format_out === 'jpeg' ? 'jpg' : item.result.format_out
+  a.download = `${base}.${ext}`
+  a.click()
+  URL.revokeObjectURL(objectUrl)
+}
+
+async function resendVerification() {
+  if (!auth.token) return
+  sendingVerification.value = true
+  alert.value = null
+  try {
+    const resp = await sendVerification(auth.token)
+    alert.value = { type: 'success', message: resp.message }
+  } catch (err) {
+    if (err instanceof ApiError) {
+      alert.value = { type: 'error', message: `[${err.code}] ${err.message}` }
+    } else {
+      alert.value = { type: 'error', message: '发送失败，请稍后再试' }
+    }
+  } finally {
+    sendingVerification.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-2xl font-semibold tracking-tight text-slate-900">图片压缩</h1>
+      <p class="text-sm text-slate-600">
+        默认移除 EXIF 等元数据；匿名试用每天 10 次（UTC+8，自然日，Cookie + IP 双限制）。
+      </p>
+    </div>
+
+    <div
+      v-if="needVerifyEmail"
+      class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900"
+    >
+      <div class="font-medium">你的邮箱尚未验证</div>
+      <div class="mt-1 text-amber-800">验证后才能使用登录态压缩与 API 能力。</div>
+      <div class="mt-3 flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="rounded-md bg-amber-600 px-3 py-1.5 font-medium text-white hover:bg-amber-700 disabled:opacity-50"
+          :disabled="sendingVerification"
+          @click="resendVerification"
+        >
+          重新发送验证邮件
+        </button>
+        <router-link class="text-amber-900 underline" to="/dashboard/settings">前往账号设置</router-link>
+      </div>
+    </div>
+
+    <div
+      v-if="alert"
+      class="rounded-lg border p-4 text-sm"
+      :class="{
+        'border-slate-200 bg-white text-slate-700': alert.type === 'info',
+        'border-emerald-200 bg-emerald-50 text-emerald-900': alert.type === 'success',
+        'border-rose-200 bg-rose-50 text-rose-900': alert.type === 'error',
+      }"
+    >
+      {{ alert.message }}
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
+      <div class="lg:col-span-7">
+        <div class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="flex items-center justify-between">
+            <div class="text-sm font-medium text-slate-900">上传图片</div>
+            <div class="text-xs text-slate-500">支持 PNG / JPG / JPEG / WebP / AVIF / GIF / BMP / TIFF / ICO（GIF 仅静态）</div>
+          </div>
+
+          <div class="mt-4 flex flex-col gap-3">
+            <div
+              class="relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-6 py-8 text-center transition"
+              :class="[
+                dragActive ? 'border-indigo-400 bg-indigo-50' : 'border-slate-200 bg-slate-50',
+                busy ? 'opacity-60' : '',
+              ]"
+              @dragenter.prevent="dragActive = true"
+              @dragover.prevent
+              @dragleave.prevent="dragActive = false"
+              @drop.prevent="handleDrop"
+            >
+              <div class="text-sm font-medium text-slate-700">拖拽图片到这里</div>
+              <div class="mt-1 text-xs text-slate-500">或点击选择文件，支持批量上传</div>
+              <input
+                class="absolute inset-0 cursor-pointer opacity-0"
+                type="file"
+                accept="image/png,image/jpeg,image/jpg,image/webp,image/avif,image/gif,image/bmp,image/x-ms-bmp,image/tiff,image/x-icon,image/vnd.microsoft.icon"
+                multiple
+                :disabled="busy"
+                @change="handleFileChange"
+              />
+            </div>
+
+            <div class="flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+                :disabled="busy || items.length === 0"
+                @click="runAll"
+              >
+                开始压缩
+              </button>
+              <button
+                type="button"
+                class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+                :disabled="busy || items.length === 0"
+                @click="clearAll"
+              >
+                清空
+              </button>
+            </div>
+          </div>
+
+          <div v-if="items.length" class="mt-6 space-y-3">
+            <div
+              v-for="item in items"
+              :key="item.id"
+              class="flex items-center gap-3 rounded-lg border border-slate-200 p-3"
+            >
+              <img :src="item.previewUrl" class="h-12 w-12 rounded object-cover" alt="" />
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-medium text-slate-900">{{ item.file.name }}</div>
+                <div class="text-xs text-slate-500">
+                  原始：{{ formatBytes(item.file.size) }}
+                  <template v-if="item.result">
+                    · 压缩后：{{ formatBytes(item.result.compressed_size) }} · 节省：
+                    {{ item.result.saved_percent.toFixed(2) }}%
+                  </template>
+                </div>
+                <div v-if="item.error" class="mt-1 text-xs text-rose-700">{{ item.error }}</div>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <span
+                  v-if="item.status === 'compressing'"
+                  class="rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-600"
+                >
+                  处理中
+                </span>
+                <span
+                  v-else-if="item.status === 'done'"
+                  class="rounded-full bg-emerald-50 px-2 py-1 text-xs text-emerald-700"
+                >
+                  完成
+                </span>
+                <span
+                  v-else-if="item.status === 'error'"
+                  class="rounded-full bg-rose-50 px-2 py-1 text-xs text-rose-700"
+                >
+                  失败
+                </span>
+
+                <button
+                  v-if="item.status !== 'compressing' && item.result"
+                  type="button"
+                  class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-700 hover:bg-slate-50"
+                  @click="download(item)"
+                >
+                  下载
+                </button>
+                <button
+                  v-if="item.status === 'error' && !busy"
+                  type="button"
+                  class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-700 hover:bg-slate-50"
+                  @click="runOne(item)"
+                >
+                  重试
+                </button>
+                <button
+                  type="button"
+                  class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-500 hover:bg-slate-50"
+                  :disabled="busy"
+                  @click="removeItem(item.id)"
+                >
+                  移除
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:col-span-5 space-y-6">
+        <div v-if="auth.isLoggedIn" class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="text-sm font-medium text-slate-900">我的额度</div>
+          <div v-if="quotaLoading" class="mt-2 text-sm text-slate-500">加载中…</div>
+          <div v-else-if="quotaError" class="mt-2 text-sm text-rose-600">{{ quotaError }}</div>
+          <div v-else class="mt-2 space-y-1 text-sm text-slate-700">
+            <div class="text-2xl font-semibold text-slate-900">
+              {{ usage?.remaining_units ?? 0 }} / {{ usage?.total_units ?? usage?.included_units ?? 0 }}
+            </div>
+            <div>当期已用 {{ usage?.used_units ?? 0 }}</div>
+            <div v-if="(usage?.bonus_units ?? 0) > 0" class="text-xs text-slate-500">
+              套餐额度 {{ usage?.included_units ?? 0 }} + 赠送 {{ usage?.bonus_units ?? 0 }}
+            </div>
+            <div>套餐：{{ subscription?.plan.name ?? 'Free' }}</div>
+            <router-link to="/dashboard/billing" class="mt-3 inline-flex text-sm text-indigo-600 hover:text-indigo-700">
+              充值额度
+            </router-link>
+          </div>
+        </div>
+
+        <div class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="text-sm font-medium text-slate-900">压缩参数</div>
+
+          <div class="mt-4 grid grid-cols-1 gap-4">
+            <label class="space-y-1">
+              <div class="flex items-center justify-between text-xs font-medium text-slate-600">
+                <span>压缩率</span>
+                <span class="text-slate-500">{{ options.compressionRate }}%</span>
+              </div>
+              <input
+                v-model.number="options.compressionRate"
+                type="range"
+                min="1"
+                max="100"
+                step="1"
+                class="w-full"
+              />
+              <div class="text-xs text-slate-500">数值越大压缩越强，输出保持原格式。</div>
+            </label>
+
+            <div class="grid grid-cols-2 gap-3">
+              <label class="space-y-1">
+                <div class="text-xs font-medium text-slate-600">最大宽度（px）</div>
+                <input
+                  v-model="options.maxWidth"
+                  inputmode="numeric"
+                  placeholder="例如 2000"
+                  class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+                />
+              </label>
+              <label class="space-y-1">
+                <div class="text-xs font-medium text-slate-600">最大高度（px）</div>
+                <input
+                  v-model="options.maxHeight"
+                  inputmode="numeric"
+                  placeholder="例如 2000"
+                  class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+                />
+              </label>
+            </div>
+
+            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4 text-xs text-slate-600">
+              <div class="font-medium text-slate-700">计量说明</div>
+              <ul class="mt-2 list-disc space-y-1 pl-4">
+                <li>成功压缩 1 个文件计 1 次。</li>
+                <li>超过当期配额将返回 <code>402 QUOTA_EXCEEDED</code>（硬配额）。</li>
+                <li>下载链接按套餐/匿名试用的保留期自动过期。</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/LoginPage.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { login } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+
+const email = ref('')
+const password = ref('')
+const busy = ref(false)
+const error = ref<string | null>(null)
+
+async function submit() {
+  error.value = null
+  busy.value = true
+  try {
+    const resp = await login(email.value.trim(), password.value)
+    auth.setAuth(resp.token, resp.user)
+
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+    await router.push(redirect)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '登录失败，请稍后再试'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">登录</h1>
+      <p class="mt-1 text-sm text-slate-600">登录后可查看用量、订阅与 API Keys。</p>
+
+      <div v-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+
+      <form class="mt-5 space-y-4" @submit.prevent="submit">
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">账号</div>
+          <input
+            v-model="email"
+            type="text"
+            autocomplete="username"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            required
+          />
+        </label>
+
+        <label class="block space-y-1">
+          <div class="flex items-center justify-between">
+            <div class="text-xs font-medium text-slate-600">密码</div>
+            <router-link to="/forgot-password" class="text-xs text-indigo-600 hover:text-indigo-700">
+              忘记密码？
+            </router-link>
+          </div>
+          <input
+            v-model="password"
+            type="password"
+            autocomplete="current-password"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="至少 8 位"
+            required
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="busy"
+        >
+          {{ busy ? '登录中…' : '登录' }}
+        </button>
+      </form>
+
+      <div class="mt-4 text-sm text-slate-600">
+        还没有账号？
+        <router-link to="/register" class="text-indigo-600 hover:text-indigo-700">去注册</router-link>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/NotFoundPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="mx-auto max-w-lg">
+    <div class="rounded-xl border border-slate-200 bg-white p-6 text-center">
+      <div class="text-2xl font-semibold text-slate-900">404</div>
+      <div class="mt-2 text-sm text-slate-600">页面不存在</div>
+      <div class="mt-5">
+        <router-link
+          to="/"
+          class="inline-flex items-center justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+        >
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/pages/PricingPage.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { listPlans, type PlanView } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { formatCents } from '@/utils/format'
+
+const loading = ref(true)
+const plans = ref<PlanView[]>([])
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  try {
+    const resp = await listPlans()
+    plans.value = resp.plans
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div class="space-y-1">
+      <h1 class="text-2xl font-semibold tracking-tight text-slate-900">价格</h1>
+      <p class="text-sm text-slate-600">硬配额计费：到达当期额度会直接返回 402 QUOTA_EXCEEDED。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+    <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div v-for="plan in plans" :key="plan.id" class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-sm font-medium text-slate-900">{{ plan.name }}</div>
+        <div class="mt-2 flex items-baseline gap-2">
+          <div class="text-2xl font-semibold text-slate-900">
+            {{ plan.amount_cents > 0 ? formatCents(plan.amount_cents, plan.currency) : '免费' }}
+          </div>
+          <div class="text-xs text-slate-500">/ {{ plan.interval }}</div>
+        </div>
+        <div class="mt-4 space-y-2 text-sm text-slate-700">
+          <div>当期额度：{{ plan.included_units_per_period.toLocaleString() }} 次</div>
+          <div>单文件：{{ plan.max_file_size_mb }} MB</div>
+          <div>批量：{{ plan.max_files_per_batch }} / 次</div>
+          <div>保留：{{ plan.retention_days }} 天</div>
+        </div>
+        <router-link
+          to="/dashboard/billing"
+          class="mt-5 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+        >
+          立即开始
+        </router-link>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5 text-sm text-slate-700">
+      <div class="font-medium text-slate-900">FAQ</div>
+      <ul class="mt-2 list-disc space-y-1 pl-4">
+        <li>计量单位：成功压缩 1 个文件计 1 次。</li>
+        <li>超额策略：硬配额（超额直接拒绝，不创建任务）。</li>
+        <li>隐私：默认移除 EXIF 等元数据；下载链接到期后自动删除。</li>
+      </ul>
+    </div>
+  </div>
+</template>
+

frontend/src/pages/PrivacyPage.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="prose prose-slate max-w-none">
+    <h1>隐私政策</h1>
+    <p>最后更新：2025-12-18</p>
+    <h2>1. 我们收集什么</h2>
+    <ul>
+      <li>账号信息：邮箱、用户名（用于登录与计费）。</li>
+      <li>调用信息：为防滥用与计费统计，可能记录请求时间、IP、用量等。</li>
+    </ul>
+    <h2>2. 图片与元数据</h2>
+    <p>默认会移除 EXIF 等元数据（可能包含定位/设备信息）。</p>
+    <h2>3. 保留期</h2>
+    <p>压缩结果仅在保留期内可下载，到期后自动删除。</p>
+    <h2>4. Cookie</h2>
+    <p>匿名试用会使用 Cookie（结合 IP）进行每日次数限制。</p>
+  </div>
+</template>
+

frontend/src/pages/RegisterPage.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { register } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const busy = ref(false)
+const error = ref<string | null>(null)
+
+async function submit() {
+  error.value = null
+  busy.value = true
+  try {
+    const resp = await register(email.value.trim(), password.value, username.value.trim())
+    auth.setAuth(resp.token, resp.user)
+    await router.push({ name: 'dashboard', query: { welcome: '1' } })
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '注册失败，请稍后再试'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">注册</h1>
+      <p class="mt-1 text-sm text-slate-600">注册后必须验证邮箱才能使用登录态压缩与 API 能力。</p>
+
+      <div v-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+
+      <form class="mt-5 space-y-4" @submit.prevent="submit">
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">邮箱</div>
+          <input
+            v-model="email"
+            type="email"
+            autocomplete="email"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="you@example.com"
+            required
+          />
+        </label>
+
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">用户名</div>
+          <input
+            v-model="username"
+            type="text"
+            autocomplete="username"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="例如 imagefan"
+            required
+          />
+        </label>
+
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">密码</div>
+          <input
+            v-model="password"
+            type="password"
+            autocomplete="new-password"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="至少 8 位"
+            required
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="busy"
+        >
+          {{ busy ? '注册中…' : '注册并进入控制台' }}
+        </button>
+      </form>
+
+      <div class="mt-4 text-sm text-slate-600">
+        已有账号？
+        <router-link to="/login" class="text-indigo-600 hover:text-indigo-700">去登录</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/pages/ResetPasswordPage.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { resetPassword } from '@/services/api'
+import { ApiError } from '@/services/http'
+
+const route = useRoute()
+const token = computed(() => (typeof route.query.token === 'string' ? route.query.token : ''))
+
+const newPassword = ref('')
+const busy = ref(false)
+const error = ref<string | null>(null)
+const success = ref<string | null>(null)
+
+async function submit() {
+  error.value = null
+  success.value = null
+  if (!token.value) {
+    error.value = '缺少 token'
+    return
+  }
+
+  busy.value = true
+  try {
+    const resp = await resetPassword(token.value, newPassword.value)
+    success.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '重置失败，请稍后再试'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">重置密码</h1>
+
+      <div v-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+      <div
+        v-if="success"
+        class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900"
+      >
+        {{ success }}
+      </div>
+
+      <form class="mt-5 space-y-4" @submit.prevent="submit">
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">新密码</div>
+          <input
+            v-model="newPassword"
+            type="password"
+            autocomplete="new-password"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="至少 8 位"
+            required
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="busy"
+        >
+          {{ busy ? '提交中…' : '重置密码' }}
+        </button>
+      </form>
+
+      <div class="mt-4 text-sm text-slate-600">
+        <router-link to="/login" class="text-indigo-600 hover:text-indigo-700">返回登录</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+

frontend/src/pages/TermsPage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="prose prose-slate max-w-none">
+    <h1>服务条款</h1>
+    <p>最后更新：2025-12-18</p>
+    <h2>1. 服务说明</h2>
+    <p>ImageForge 提供图片压缩与相关开发者 API 服务。你需要对上传内容拥有合法权利。</p>
+    <h2>2. 计费与配额</h2>
+    <ul>
+      <li>成功压缩 1 个文件计 1 次。</li>
+      <li>采用硬配额：当期额度不足时，新的压缩请求会被拒绝（HTTP 402 / QUOTA_EXCEEDED）。</li>
+    </ul>
+    <h2>3. 内容与合规</h2>
+    <p>禁止上传违法、侵权或包含敏感个人信息且未经授权的内容。</p>
+    <h2>4. 免责声明</h2>
+    <p>服务按“现状”提供，我们会尽力保证稳定，但不对不可抗力导致的服务中断承担责任。</p>
+    <h2>5. 联系方式</h2>
+    <p>如有问题请联系站点管理员。</p>
+  </div>
+</template>
+

frontend/src/pages/VerifyEmailPage.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { verifyEmail } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const route = useRoute()
+const token = computed(() => (typeof route.query.token === 'string' ? route.query.token : ''))
+
+const loading = ref(true)
+const message = ref<string>('')
+const error = ref<string | null>(null)
+
+const auth = useAuthStore()
+
+onMounted(async () => {
+  if (!token.value) {
+    loading.value = false
+    error.value = '缺少 token'
+    return
+  }
+
+  try {
+    const resp = await verifyEmail(token.value)
+    message.value = resp.message
+    auth.markEmailVerified()
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '验证失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">验证邮箱</h1>
+
+      <div v-if="loading" class="mt-4 text-sm text-slate-600">处理中…</div>
+      <div v-else-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+      <div v-else class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+        {{ message || '邮箱验证成功' }}
+      </div>
+
+      <div class="mt-5 text-sm text-slate-600">
+        <router-link to="/login" class="text-indigo-600 hover:text-indigo-700">去登录</router-link>
+        或
+        <router-link to="/" class="text-indigo-600 hover:text-indigo-700">返回首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminBillingPage.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import {
+  createAdminSubscription,
+  grantAdminCredits,
+  listAdminSubscriptions,
+  listAdminPlans,
+  type AdminManualSubscriptionResponse,
+  type AdminPlanView,
+  type AdminSubscriptionView,
+  type AdminCreditResponse,
+} from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+import { formatCents } from '@/utils/format'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const subscriptions = ref<AdminSubscriptionView[]>([])
+const plans = ref<AdminPlanView[]>([])
+const page = ref(1)
+const limit = ref(20)
+const total = ref(0)
+
+const subForm = ref({ user_id: '', plan_id: '', months: 1, note: '' })
+const subBusy = ref(false)
+const subMessage = ref<string | null>(null)
+const subError = ref<string | null>(null)
+const subResult = ref<AdminManualSubscriptionResponse | null>(null)
+
+const creditForm = ref({ user_id: '', units: 100, note: '' })
+const creditBusy = ref(false)
+const creditMessage = ref<string | null>(null)
+const creditError = ref<string | null>(null)
+const creditResult = ref<AdminCreditResponse | null>(null)
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit.value)))
+
+async function loadSubscriptions(targetPage = page.value) {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const resp = await listAdminSubscriptions(auth.token, { page: targetPage, limit: limit.value })
+    subscriptions.value = resp.subscriptions
+    page.value = resp.page
+    limit.value = resp.limit
+    total.value = resp.total
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPlans() {
+  if (!auth.token) return
+  try {
+    const resp = await listAdminPlans(auth.token)
+    plans.value = resp.plans
+    if (!subForm.value.plan_id) {
+      const active = resp.plans.find((plan) => plan.is_active)
+      if (active) subForm.value.plan_id = active.id
+    }
+  } catch (err) {
+    // Ignore plan load errors; subscription list can still render.
+  }
+}
+
+async function createSubscription() {
+  if (!auth.token) return
+  subBusy.value = true
+  subMessage.value = null
+  subError.value = null
+  subResult.value = null
+  try {
+    if (!subForm.value.user_id.trim()) {
+      subError.value = '请填写用户 ID'
+      return
+    }
+    if (!subForm.value.plan_id) {
+      subError.value = '请选择套餐'
+      return
+    }
+    if (!subForm.value.months || subForm.value.months <= 0) {
+      subError.value = '月份必须大于 0'
+      return
+    }
+    const resp = await createAdminSubscription(auth.token, {
+      user_id: subForm.value.user_id.trim(),
+      plan_id: subForm.value.plan_id,
+      months: Number(subForm.value.months),
+      note: subForm.value.note.trim() || undefined,
+    })
+    subResult.value = resp
+    subMessage.value = resp.message
+    await loadSubscriptions(1)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      subError.value = `[${err.code}] ${err.message}`
+    } else {
+      subError.value = '操作失败，请稍后再试'
+    }
+  } finally {
+    subBusy.value = false
+  }
+}
+
+async function grantCredits() {
+  if (!auth.token) return
+  creditBusy.value = true
+  creditMessage.value = null
+  creditError.value = null
+  creditResult.value = null
+  try {
+    if (!creditForm.value.user_id.trim()) {
+      creditError.value = '请填写用户 ID'
+      return
+    }
+    if (!creditForm.value.units || creditForm.value.units <= 0) {
+      creditError.value = '增加单位必须大于 0'
+      return
+    }
+    const resp = await grantAdminCredits(auth.token, {
+      user_id: creditForm.value.user_id.trim(),
+      units: Number(creditForm.value.units),
+      note: creditForm.value.note.trim() || undefined,
+    })
+    creditResult.value = resp
+    creditMessage.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      creditError.value = `[${err.code}] ${err.message}`
+    } else {
+      creditError.value = '操作失败，请稍后再试'
+    }
+  } finally {
+    creditBusy.value = false
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([loadSubscriptions(1), loadPlans()])
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">订阅与额度</h2>
+      <p class="text-sm text-slate-600">查看订阅列表，并为用户增加当期额度。</p>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5">
+      <div class="text-sm font-medium text-slate-900">手动开通套餐</div>
+      <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-4">
+        <label class="space-y-1 md:col-span-2">
+          <div class="text-xs font-medium text-slate-600">用户 ID / 邮箱 / 用户名</div>
+          <input
+            v-model="subForm.user_id"
+            type="text"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="UUID / 邮箱 / 用户名"
+          />
+        </label>
+        <label class="space-y-1">
+          <div class="text-xs font-medium text-slate-600">套餐</div>
+          <select
+            v-model="subForm.plan_id"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+          >
+            <option value="" disabled>请选择套餐</option>
+            <option v-for="plan in plans" :key="plan.id" :value="plan.id" :disabled="!plan.is_active">
+              {{ plan.name }} · {{ plan.code }}{{ plan.is_active ? '' : '（已停用）' }}
+            </option>
+          </select>
+        </label>
+        <label class="space-y-1">
+          <div class="text-xs font-medium text-slate-600">开通月数</div>
+          <input
+            v-model.number="subForm.months"
+            type="number"
+            min="1"
+            max="24"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+          />
+        </label>
+        <label class="space-y-1 md:col-span-2">
+          <div class="text-xs font-medium text-slate-600">备注</div>
+          <input
+            v-model="subForm.note"
+            type="text"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="可选"
+          />
+        </label>
+      </div>
+
+      <div class="mt-3 flex items-center gap-2">
+        <button
+          type="button"
+          class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="subBusy"
+          @click="createSubscription"
+        >
+          {{ subBusy ? '提交中…' : '立即开通' }}
+        </button>
+        <span class="text-xs text-slate-500">会取消该用户当前有效订阅，并按月数顺延。</span>
+      </div>
+
+      <div v-if="subMessage" class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+        {{ subMessage }}
+      </div>
+      <div v-if="subError" class="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ subError }}
+      </div>
+      <div v-if="subResult" class="mt-2 text-xs text-slate-500">
+        周期：{{ new Date(subResult.period_start).toLocaleString() }} →
+        {{ new Date(subResult.period_end).toLocaleString() }}，套餐 {{ subResult.plan_name }}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5">
+      <div class="text-sm font-medium text-slate-900">增加额度</div>
+      <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-4">
+        <label class="space-y-1 md:col-span-2">
+          <div class="text-xs font-medium text-slate-600">用户 ID / 邮箱 / 用户名</div>
+          <input
+            v-model="creditForm.user_id"
+            type="text"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="UUID / 邮箱 / 用户名"
+          />
+        </label>
+        <label class="space-y-1">
+          <div class="text-xs font-medium text-slate-600">增加单位</div>
+          <input
+            v-model.number="creditForm.units"
+            type="number"
+            min="1"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+          />
+        </label>
+        <label class="space-y-1">
+          <div class="text-xs font-medium text-slate-600">备注</div>
+          <input
+            v-model="creditForm.note"
+            type="text"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="可选"
+          />
+        </label>
+      </div>
+
+      <div class="mt-3 flex items-center gap-2">
+        <button
+          type="button"
+          class="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
+          :disabled="creditBusy"
+          @click="grantCredits"
+        >
+          {{ creditBusy ? '提交中…' : '提交增加' }}
+        </button>
+        <span class="text-xs text-slate-500">会增加赠送额度，叠加到当期总额度。</span>
+      </div>
+
+      <div v-if="creditMessage" class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+        {{ creditMessage }}
+      </div>
+      <div v-if="creditError" class="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ creditError }}
+      </div>
+      <div v-if="creditResult" class="mt-2 text-xs text-slate-500">
+        当前周期：{{ new Date(creditResult.period_start).toLocaleString() }} →
+        {{ new Date(creditResult.period_end).toLocaleString() }}，已用 {{ creditResult.used_units }} /
+        {{ creditResult.total_units }}（含赠送 {{ creditResult.bonus_units }}），剩余 {{ creditResult.remaining_units }}
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <div v-if="subscriptions.length === 0" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+        暂无订阅
+      </div>
+      <div v-else class="overflow-auto rounded-xl border border-slate-200 bg-white">
+        <table class="min-w-full text-left text-sm">
+          <thead class="text-xs text-slate-500">
+            <tr>
+              <th class="px-4 py-3">用户</th>
+              <th class="px-4 py-3">套餐</th>
+              <th class="px-4 py-3">状态</th>
+              <th class="px-4 py-3">周期</th>
+              <th class="px-4 py-3">金额</th>
+            </tr>
+          </thead>
+          <tbody class="text-slate-700">
+            <tr v-for="sub in subscriptions" :key="sub.id" class="border-t border-slate-100">
+              <td class="px-4 py-3">
+                <div class="text-sm font-medium text-slate-900">{{ sub.user_email }}</div>
+                <div class="text-xs text-slate-400">ID {{ sub.user_id.slice(0, 8) }}</div>
+              </td>
+              <td class="px-4 py-3">
+                {{ sub.plan_name }}
+                <div class="text-xs text-slate-400">{{ sub.plan_code }}</div>
+              </td>
+              <td class="px-4 py-3">{{ sub.status }}</td>
+              <td class="px-4 py-3">
+                {{ new Date(sub.current_period_start).toLocaleDateString() }} →
+                {{ new Date(sub.current_period_end).toLocaleDateString() }}
+              </td>
+              <td class="px-4 py-3">
+                {{ formatCents(sub.amount_cents, sub.currency) }}
+                <span class="text-xs text-slate-500">/ {{ sub.interval }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-slate-600">
+        <div>第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page <= 1 || loading"
+            @click="loadSubscriptions(page - 1)"
+          >
+            上一页
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page >= totalPages || loading"
+            @click="loadSubscriptions(page + 1)"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminConfigPage.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { listAdminConfig, updateAdminConfig, type AdminConfigEntry } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const configs = ref<AdminConfigEntry[]>([])
+const drafts = ref<Record<string, string>>({})
+const savingKey = ref<string | null>(null)
+const messages = ref<Record<string, string>>({})
+const errors = ref<Record<string, string>>({})
+
+function formatJson(value: unknown) {
+  try {
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return String(value ?? '')
+  }
+}
+
+function setDrafts(list: AdminConfigEntry[]) {
+  const next: Record<string, string> = {}
+  for (const item of list) {
+    next[item.key] = formatJson(item.value)
+  }
+  drafts.value = next
+}
+
+async function loadConfigs() {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const resp = await listAdminConfig(auth.token)
+    configs.value = resp.configs
+    setDrafts(resp.configs)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveConfig(key: string) {
+  if (!auth.token) return
+  savingKey.value = key
+  messages.value[key] = ''
+  errors.value[key] = ''
+  try {
+    const raw = drafts.value[key] ?? ''
+    let parsed: unknown
+    try {
+      parsed = JSON.parse(raw)
+    } catch {
+      throw new Error('JSON 解析失败，请检查格式')
+    }
+    const resp = await updateAdminConfig(auth.token, { key, value: parsed })
+    configs.value = configs.value.map((item) => (item.key === key ? resp : item))
+    messages.value[key] = '已更新'
+  } catch (err) {
+    if (err instanceof ApiError) {
+      errors.value[key] = `[${err.code}] ${err.message}`
+    } else {
+      errors.value[key] = err instanceof Error ? err.message : '更新失败'
+    }
+  } finally {
+    savingKey.value = null
+  }
+}
+
+onMounted(async () => {
+  await loadConfigs()
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">系统配置</h2>
+      <p class="text-sm text-slate-600">更新全局开关、限流与文件限制配置。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <div v-if="configs.length === 0" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+        暂无配置
+      </div>
+      <div v-else class="space-y-4">
+        <div v-for="item in configs" :key="item.key" class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <div class="text-sm font-medium text-slate-900">{{ item.key }}</div>
+              <div v-if="item.description" class="text-xs text-slate-500">{{ item.description }}</div>
+            </div>
+            <button
+              type="button"
+              class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+              :disabled="savingKey === item.key"
+              @click="saveConfig(item.key)"
+            >
+              {{ savingKey === item.key ? '保存中…' : '保存' }}
+            </button>
+          </div>
+
+          <textarea
+            v-model="drafts[item.key]"
+            class="mt-3 h-40 w-full rounded-md border border-slate-200 bg-white px-3 py-2 font-mono text-xs text-slate-800"
+          ></textarea>
+
+          <div v-if="messages[item.key]" class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+            {{ messages[item.key] }}
+          </div>
+          <div v-if="errors[item.key]" class="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+            {{ errors[item.key] }}
+          </div>
+          <div class="mt-2 text-xs text-slate-400">最近更新：{{ new Date(item.updated_at).toLocaleString() }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminHomePage.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { getAdminStats, type AdminStats } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const stats = ref<AdminStats | null>(null)
+
+onMounted(async () => {
+  if (!auth.token) return
+  try {
+    stats.value = await getAdminStats(auth.token)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">系统概览</h2>
+      <p class="text-sm text-slate-600">快速查看用户、任务与订阅的关键指标。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <div class="text-xs font-medium text-slate-500">总用户数</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ stats?.total_users ?? 0 }}</div>
+        <div class="mt-1 text-xs text-slate-500">活跃 {{ stats?.active_users ?? 0 }}</div>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <div class="text-xs font-medium text-slate-500">有效订阅</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ stats?.active_subscriptions ?? 0 }}</div>
+        <div class="mt-1 text-xs text-slate-500">含试用/欠费</div>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <div class="text-xs font-medium text-slate-500">24h 使用次数</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ stats?.usage_events_24h ?? 0 }}</div>
+        <div class="mt-1 text-xs text-slate-500">近 24 小时</div>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <div class="text-xs font-medium text-slate-500">任务处理中</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ stats?.processing_tasks ?? 0 }}</div>
+        <div class="mt-1 text-xs text-slate-500">排队 {{ stats?.pending_tasks ?? 0 }}</div>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <div class="text-xs font-medium text-slate-500">任务完成</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ stats?.completed_tasks ?? 0 }}</div>
+        <div class="mt-1 text-xs text-slate-500">失败 {{ stats?.failed_tasks ?? 0 }}</div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminIntegrationsPage.vue

@@ -0,0 +1,464 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import {
+  getMailConfig,
+  getStripeConfig,
+  listAdminPlans,
+  sendMailTest,
+  updateAdminPlan,
+  updateMailConfig,
+  updateStripeConfig,
+  type AdminMailConfig,
+  type AdminPlanView,
+  type AdminStripeConfig,
+  type MailCustomSmtp,
+} from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+import { formatCents } from '@/utils/format'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const stripeConfig = ref<AdminStripeConfig | null>(null)
+const stripeForm = ref({ secret_key: '', webhook_secret: '' })
+const stripeBusy = ref(false)
+const stripeMessage = ref<string | null>(null)
+
+const plans = ref<AdminPlanView[]>([])
+const planBusy = ref<string | null>(null)
+const planMessage = ref<string | null>(null)
+
+const mailConfig = ref<AdminMailConfig | null>(null)
+const mailForm = ref({
+  enabled: false,
+  provider: 'qq',
+  from: '',
+  from_name: 'ImageForge',
+  password: '',
+  log_links_when_disabled: false,
+  custom_smtp: {
+    host: '',
+    port: 465,
+    encryption: 'ssl',
+  } as MailCustomSmtp,
+})
+const mailBusy = ref(false)
+const mailMessage = ref<string | null>(null)
+const mailError = ref<string | null>(null)
+
+const testEmail = ref('')
+const testBusy = ref(false)
+const testMessage = ref<string | null>(null)
+const testError = ref<string | null>(null)
+
+const isCustomProvider = computed(() => mailForm.value.provider === 'custom')
+const intervalLabel = (interval: string) => {
+  switch (interval) {
+    case 'monthly':
+      return '月付'
+    case 'yearly':
+      return '年付'
+    case 'weekly':
+      return '周付'
+    default:
+      return interval
+  }
+}
+
+const providerOptions = [
+  { value: 'qq', label: 'QQ 邮箱' },
+  { value: '163', label: '163 邮箱' },
+  { value: 'aliyun_enterprise', label: '阿里企业邮' },
+  { value: 'tencent_enterprise', label: '腾讯企业邮' },
+  { value: 'gmail', label: 'Gmail' },
+  { value: 'outlook', label: 'Outlook' },
+  { value: 'custom', label: '自定义 SMTP' },
+]
+
+function applyMailConfig(config: AdminMailConfig) {
+  mailForm.value.enabled = config.enabled
+  mailForm.value.provider = config.provider || 'qq'
+  mailForm.value.from = config.from || ''
+  mailForm.value.from_name = config.from_name || 'ImageForge'
+  mailForm.value.log_links_when_disabled = config.log_links_when_disabled ?? false
+  if (config.custom_smtp) {
+    mailForm.value.custom_smtp = {
+      host: config.custom_smtp.host || '',
+      port: config.custom_smtp.port || 465,
+      encryption: config.custom_smtp.encryption || 'ssl',
+    }
+  }
+}
+
+async function loadAll() {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const [stripe, mailCfg, planResp] = await Promise.all([
+      getStripeConfig(auth.token),
+      getMailConfig(auth.token),
+      listAdminPlans(auth.token),
+    ])
+    stripeConfig.value = stripe
+    mailConfig.value = mailCfg
+    applyMailConfig(mailCfg)
+    plans.value = planResp.plans
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveStripe() {
+  if (!auth.token) return
+  stripeBusy.value = true
+  stripeMessage.value = null
+  try {
+    const payload: { secret_key?: string; webhook_secret?: string } = {}
+    if (stripeForm.value.secret_key.trim()) payload.secret_key = stripeForm.value.secret_key.trim()
+    if (stripeForm.value.webhook_secret.trim()) payload.webhook_secret = stripeForm.value.webhook_secret.trim()
+    const resp = await updateStripeConfig(auth.token, payload)
+    stripeConfig.value = resp
+    stripeMessage.value = 'Stripe 配置已更新'
+    stripeForm.value.secret_key = ''
+    stripeForm.value.webhook_secret = ''
+  } catch (err) {
+    if (err instanceof ApiError) {
+      stripeMessage.value = `[${err.code}] ${err.message}`
+    } else {
+      stripeMessage.value = '更新失败，请稍后再试'
+    }
+  } finally {
+    stripeBusy.value = false
+  }
+}
+
+async function savePlan(plan: AdminPlanView) {
+  if (!auth.token) return
+  planBusy.value = plan.id
+  planMessage.value = null
+  try {
+    const resp = await updateAdminPlan(auth.token, plan.id, {
+      stripe_price_id: plan.stripe_price_id?.trim() || undefined,
+      stripe_product_id: plan.stripe_product_id?.trim() || undefined,
+      is_active: plan.is_active,
+    })
+    plans.value = plans.value.map((p) => (p.id === resp.id ? resp : p))
+    planMessage.value = `已更新 ${resp.name}`
+  } catch (err) {
+    if (err instanceof ApiError) {
+      planMessage.value = `[${err.code}] ${err.message}`
+    } else {
+      planMessage.value = '更新失败，请稍后再试'
+    }
+  } finally {
+    planBusy.value = null
+  }
+}
+
+async function saveMail() {
+  if (!auth.token) return
+  mailBusy.value = true
+  mailMessage.value = null
+  mailError.value = null
+  try {
+    const payload: {
+      enabled: boolean
+      provider: string
+      from: string
+      from_name: string
+      password?: string
+      custom_smtp?: MailCustomSmtp | null
+      log_links_when_disabled?: boolean
+    } = {
+      enabled: mailForm.value.enabled,
+      provider: mailForm.value.provider,
+      from: mailForm.value.from.trim(),
+      from_name: mailForm.value.from_name.trim(),
+      log_links_when_disabled: mailForm.value.log_links_when_disabled,
+    }
+    if (mailForm.value.password.trim()) {
+      payload.password = mailForm.value.password.trim()
+    }
+    payload.custom_smtp = isCustomProvider.value ? { ...mailForm.value.custom_smtp } : null
+
+    const resp = await updateMailConfig(auth.token, payload)
+    mailConfig.value = resp
+    mailMessage.value = '邮件配置已保存'
+    mailForm.value.password = ''
+  } catch (err) {
+    if (err instanceof ApiError) {
+      mailError.value = `[${err.code}] ${err.message}`
+    } else {
+      mailError.value = '更新失败，请稍后再试'
+    }
+  } finally {
+    mailBusy.value = false
+  }
+}
+
+async function sendTest() {
+  if (!auth.token) return
+  testBusy.value = true
+  testMessage.value = null
+  testError.value = null
+  try {
+    const resp = await sendMailTest(auth.token, testEmail.value.trim() || undefined)
+    testMessage.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      testError.value = `[${err.code}] ${err.message}`
+    } else {
+      testError.value = '发送失败，请稍后再试'
+    }
+  } finally {
+    testBusy.value = false
+  }
+}
+
+onMounted(loadAll)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">支付与邮件配置</h2>
+      <p class="text-sm text-slate-600">配置 Stripe 密钥、套餐价格与邮件服务。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-6">
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="flex items-center justify-between gap-2">
+          <div class="text-sm font-medium text-slate-900">Stripe 配置</div>
+          <div class="text-xs text-slate-500">
+            {{ stripeConfig?.secret_key_configured ? '已配置' : '未配置' }}
+            <span v-if="stripeConfig?.secret_key_prefix">({{ stripeConfig?.secret_key_prefix }})</span>
+          </div>
+        </div>
+        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">Secret Key</div>
+            <input
+              v-model="stripeForm.secret_key"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="sk_live_..."
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">Webhook Secret</div>
+            <input
+              v-model="stripeForm.webhook_secret"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="whsec_..."
+            />
+          </label>
+        </div>
+        <div class="mt-3 flex items-center gap-3">
+          <button
+            type="button"
+            class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+            :disabled="stripeBusy"
+            @click="saveStripe"
+          >
+            {{ stripeBusy ? '保存中…' : '保存配置' }}
+          </button>
+          <div v-if="stripeMessage" class="text-xs text-slate-600">{{ stripeMessage }}</div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-sm font-medium text-slate-900">套餐价格配置</div>
+        <div v-if="plans.length === 0" class="mt-3 text-sm text-slate-600">暂无套餐</div>
+        <div v-else class="mt-4 space-y-3">
+          <div v-for="plan in plans" :key="plan.id" class="rounded-lg border border-slate-200 p-4">
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <div class="text-sm font-medium text-slate-900">{{ plan.name }}</div>
+                <div class="text-xs text-slate-500">
+                  {{ plan.code }} · {{ formatCents(plan.amount_cents, plan.currency) }} / {{ intervalLabel(plan.interval) }}
+                </div>
+              </div>
+              <label class="flex items-center gap-2 text-xs text-slate-600">
+                <input v-model="plan.is_active" type="checkbox" class="h-4 w-4 rounded border-slate-300" />
+                启用
+              </label>
+            </div>
+            <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+              <label class="space-y-1">
+                <div class="text-xs font-medium text-slate-600">Stripe 产品 ID</div>
+                <input
+                  v-model="plan.stripe_product_id"
+                  type="text"
+                  class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+                  placeholder="例如 prod_xxx"
+                />
+              </label>
+              <label class="space-y-1">
+                <div class="text-xs font-medium text-slate-600">Stripe 价格 ID</div>
+                <input
+                  v-model="plan.stripe_price_id"
+                  type="text"
+                  class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+                  placeholder="例如 price_xxx"
+                />
+              </label>
+            </div>
+            <div class="mt-3 flex items-center gap-3">
+              <button
+                type="button"
+                class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+                :disabled="planBusy === plan.id"
+                @click="savePlan(plan)"
+              >
+                {{ planBusy === plan.id ? '保存中…' : '保存' }}
+              </button>
+              <div v-if="planMessage && planBusy !== plan.id" class="text-xs text-slate-500">{{ planMessage }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-sm font-medium text-slate-900">邮件服务配置</div>
+        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label class="flex items-center gap-2 text-sm text-slate-700">
+            <input v-model="mailForm.enabled" type="checkbox" class="h-4 w-4 rounded border-slate-300" />
+            启用邮件服务
+          </label>
+          <label class="flex items-center gap-2 text-sm text-slate-700">
+            <input v-model="mailForm.log_links_when_disabled" type="checkbox" class="h-4 w-4 rounded border-slate-300" />
+            关闭时记录链接
+          </label>
+        </div>
+        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">服务商</div>
+            <select v-model="mailForm.provider" class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800">
+              <option v-for="opt in providerOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+            </select>
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">发件邮箱</div>
+            <input
+              v-model="mailForm.from"
+              type="email"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="noreply@example.com"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">发件人名称</div>
+            <input
+              v-model="mailForm.from_name"
+              type="text"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="ImageForge"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">授权码/密码</div>
+            <input
+              v-model="mailForm.password"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              :placeholder="mailConfig?.password_configured ? '已配置（留空不修改）' : '输入授权码'"
+            />
+          </label>
+        </div>
+
+        <div v-if="isCustomProvider" class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">SMTP Host</div>
+            <input
+              v-model="mailForm.custom_smtp.host"
+              type="text"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="smtp.example.com"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">端口</div>
+            <input
+              v-model.number="mailForm.custom_smtp.port"
+              type="number"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="465"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">加密方式</div>
+            <select
+              v-model="mailForm.custom_smtp.encryption"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            >
+              <option value="ssl">SSL</option>
+              <option value="starttls">STARTTLS</option>
+              <option value="none">无</option>
+            </select>
+          </label>
+        </div>
+
+        <div v-if="mailMessage" class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+          {{ mailMessage }}
+        </div>
+        <div v-if="mailError" class="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+          {{ mailError }}
+        </div>
+
+        <div class="mt-3 flex flex-wrap items-center gap-3">
+          <button
+            type="button"
+            class="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
+            :disabled="mailBusy"
+            @click="saveMail"
+          >
+            {{ mailBusy ? '保存中…' : '保存邮件配置' }}
+          </button>
+          <div class="text-xs text-slate-500">保存后可发送测试邮件确认</div>
+        </div>
+
+        <div class="mt-4 rounded-lg border border-slate-200 bg-slate-50 p-4">
+          <div class="text-sm font-medium text-slate-900">测试发送</div>
+          <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-end">
+            <label class="flex-1 space-y-1">
+              <div class="text-xs font-medium text-slate-600">收件人（可选）</div>
+              <input
+                v-model="testEmail"
+                type="email"
+                class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+                placeholder="留空则发送到当前管理员邮箱"
+              />
+            </label>
+            <button
+              type="button"
+              class="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+              :disabled="testBusy"
+              @click="sendTest"
+            >
+              {{ testBusy ? '发送中…' : '发送测试邮件' }}
+            </button>
+          </div>
+          <div v-if="testMessage" class="mt-3 text-sm text-emerald-700">{{ testMessage }}</div>
+          <div v-if="testError" class="mt-3 text-sm text-rose-700">{{ testError }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminTasksPage.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { cancelAdminTask, listAdminTasks, type AdminTaskView } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const tasks = ref<AdminTaskView[]>([])
+const page = ref(1)
+const limit = ref(20)
+const total = ref(0)
+const status = ref('')
+const cancelling = ref<string | null>(null)
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit.value)))
+
+const statusOptions = [
+  { value: '', label: '全部状态' },
+  { value: 'pending', label: '排队' },
+  { value: 'processing', label: '处理中' },
+  { value: 'completed', label: '已完成' },
+  { value: 'failed', label: '失败' },
+  { value: 'cancelled', label: '已取消' },
+]
+
+function statusLabel(value: string) {
+  return statusOptions.find((item) => item.value === value)?.label ?? value
+}
+
+function statusClass(value: string) {
+  switch (value) {
+    case 'completed':
+      return 'bg-emerald-50 text-emerald-700'
+    case 'processing':
+      return 'bg-indigo-50 text-indigo-700'
+    case 'failed':
+      return 'bg-rose-50 text-rose-700'
+    case 'cancelled':
+      return 'bg-slate-100 text-slate-600'
+    default:
+      return 'bg-amber-50 text-amber-700'
+  }
+}
+
+function progress(task: AdminTaskView) {
+  if (!task.total_files) return 0
+  return Math.round(((task.completed_files + task.failed_files) / task.total_files) * 100)
+}
+
+async function loadTasks(targetPage = page.value) {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const resp = await listAdminTasks(auth.token, {
+      page: targetPage,
+      limit: limit.value,
+      status: status.value || undefined,
+    })
+    tasks.value = resp.tasks
+    page.value = resp.page
+    limit.value = resp.limit
+    total.value = resp.total
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  loadTasks(1)
+}
+
+async function cancelTask(taskId: string) {
+  if (!auth.token) return
+  if (!confirm('确定取消该任务吗？')) return
+  cancelling.value = taskId
+  error.value = null
+  try {
+    await cancelAdminTask(auth.token, taskId)
+    await loadTasks(page.value)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '操作失败，请稍后再试'
+    }
+  } finally {
+    cancelling.value = null
+  }
+}
+
+onMounted(async () => {
+  await loadTasks(1)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">任务管理</h2>
+      <p class="text-sm text-slate-600">查看任务状态、失败原因并手动取消。</p>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <label class="space-y-1">
+          <div class="text-xs font-medium text-slate-600">状态</div>
+          <select v-model="status" class="w-44 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800">
+            <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+          </select>
+        </label>
+        <button
+          type="button"
+          class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="loading"
+          @click="applyFilters"
+        >
+          {{ loading ? '查询中…' : '查询' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <div v-if="tasks.length === 0" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+        暂无任务
+      </div>
+      <div v-else class="space-y-3">
+        <div v-for="task in tasks" :key="task.id" class="rounded-xl border border-slate-200 bg-white p-4">
+          <div class="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <div class="text-sm font-medium text-slate-900">任务 {{ task.id.slice(0, 8) }}</div>
+              <div class="mt-1 text-xs text-slate-500">
+                来源 {{ task.source }} · 用户 {{ task.user_email ?? '匿名' }} · 创建
+                {{ new Date(task.created_at).toLocaleString() }}
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="rounded-full px-2 py-1 text-xs" :class="statusClass(task.status)">
+                {{ statusLabel(task.status) }}
+              </span>
+              <button
+                v-if="task.status === 'pending' || task.status === 'processing'"
+                type="button"
+                class="rounded-md border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs text-rose-700 hover:bg-rose-100 disabled:opacity-50"
+                :disabled="cancelling === task.id"
+                @click="cancelTask(task.id)"
+              >
+                {{ cancelling === task.id ? '取消中…' : '取消任务' }}
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-3 space-y-2">
+            <div class="text-xs text-slate-500">
+              进度 {{ progress(task) }}% · 完成 {{ task.completed_files }}/{{ task.total_files }} · 失败
+              {{ task.failed_files }}
+            </div>
+            <div class="h-2 w-full rounded-full bg-slate-100">
+              <div class="h-2 rounded-full bg-indigo-500" :style="{ width: `${progress(task)}%` }"></div>
+            </div>
+            <div v-if="task.error_message" class="text-xs text-rose-600">错误：{{ task.error_message }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-slate-600">
+        <div>第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page <= 1 || loading"
+            @click="loadTasks(page - 1)"
+          >
+            上一页
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page >= totalPages || loading"
+            @click="loadTasks(page + 1)"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/admin/AdminUsersPage.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { listAdminUsers, type AdminUserView } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const users = ref<AdminUserView[]>([])
+const page = ref(1)
+const limit = ref(20)
+const total = ref(0)
+const search = ref('')
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit.value)))
+
+async function loadUsers(targetPage = page.value) {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const resp = await listAdminUsers(auth.token, {
+      page: targetPage,
+      limit: limit.value,
+      search: search.value.trim() || undefined,
+    })
+    users.value = resp.users
+    page.value = resp.page
+    limit.value = resp.limit
+    total.value = resp.total
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applySearch() {
+  loadUsers(1)
+}
+
+onMounted(async () => {
+  await loadUsers(1)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h2 class="text-lg font-semibold text-slate-900">用户管理</h2>
+      <p class="text-sm text-slate-600">支持检索用户、查看订阅状态与验证情况。</p>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <label class="flex-1 space-y-1">
+          <div class="text-xs font-medium text-slate-600">搜索邮箱/用户名</div>
+          <input
+            v-model="search"
+            type="text"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="输入关键词"
+          />
+        </label>
+        <button
+          type="button"
+          class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="loading"
+          @click="applySearch"
+        >
+          {{ loading ? '查询中…' : '查询' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <div v-if="users.length === 0" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+        暂无用户
+      </div>
+      <div v-else class="overflow-auto rounded-xl border border-slate-200 bg-white">
+        <table class="min-w-full text-left text-sm">
+          <thead class="text-xs text-slate-500">
+            <tr>
+              <th class="px-4 py-3">邮箱</th>
+              <th class="px-4 py-3">用户名</th>
+              <th class="px-4 py-3">角色</th>
+              <th class="px-4 py-3">状态</th>
+              <th class="px-4 py-3">验证</th>
+              <th class="px-4 py-3">订阅</th>
+              <th class="px-4 py-3">创建时间</th>
+            </tr>
+          </thead>
+          <tbody class="text-slate-700">
+            <tr v-for="user in users" :key="user.id" class="border-t border-slate-100">
+              <td class="px-4 py-3">
+                <div class="text-sm font-medium text-slate-900">{{ user.email }}</div>
+                <div class="text-xs text-slate-400">ID {{ user.id.slice(0, 8) }}</div>
+              </td>
+              <td class="px-4 py-3">{{ user.username }}</td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2 py-1 text-xs" :class="user.role === 'admin' ? 'bg-indigo-50 text-indigo-700' : 'bg-slate-100 text-slate-600'">
+                  {{ user.role }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <span
+                  class="rounded-full px-2 py-1 text-xs"
+                  :class="user.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'"
+                >
+                  {{ user.is_active ? '启用' : '禁用' }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <span
+                  class="rounded-full px-2 py-1 text-xs"
+                  :class="user.email_verified ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'"
+                >
+                  {{ user.email_verified ? '已验证' : '未验证' }}
+                </span>
+              </td>
+              <td class="px-4 py-3">{{ user.subscription_status ?? '—' }}</td>
+              <td class="px-4 py-3">{{ new Date(user.created_at).toLocaleString() }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-slate-600">
+        <div>第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page <= 1 || loading"
+            @click="loadUsers(page - 1)"
+          >
+            上一页
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page >= totalPages || loading"
+            @click="loadUsers(page + 1)"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/dashboard/DashboardApiKeysPage.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import {
+  createApiKey,
+  disableApiKey,
+  listApiKeys,
+  rotateApiKey,
+  type ApiKeyView,
+  type CreateApiKeyResponse,
+} from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const apiKeys = ref<ApiKeyView[]>([])
+
+const name = ref('')
+const creating = ref(false)
+const created = ref<CreateApiKeyResponse | null>(null)
+const createdContext = ref<'create' | 'rotate' | null>(null)
+const copyStatus = ref<string | null>(null)
+const rotating = ref<string | null>(null)
+
+async function refresh() {
+  if (!auth.token) return
+  error.value = null
+  try {
+    const resp = await listApiKeys(auth.token)
+    apiKeys.value = resp.api_keys
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  }
+}
+
+onMounted(async () => {
+  await refresh()
+  loading.value = false
+})
+
+async function create() {
+  if (!auth.token) return
+  creating.value = true
+  error.value = null
+  copyStatus.value = null
+  try {
+    const resp = await createApiKey(auth.token, name.value.trim())
+    created.value = resp
+    createdContext.value = 'create'
+    name.value = ''
+    await refresh()
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '创建失败，请稍后再试'
+    }
+  } finally {
+    creating.value = false
+  }
+}
+
+async function disable(keyId: string) {
+  if (!auth.token) return
+  if (!confirm('确定要禁用这个 Key 吗？')) return
+  try {
+    await disableApiKey(auth.token, keyId)
+    await refresh()
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '操作失败，请稍后再试'
+    }
+  }
+}
+
+async function rotate(keyId: string) {
+  if (!auth.token) return
+  if (!confirm('确定要轮换这个 Key 吗？旧 Key 将立即失效。')) return
+  rotating.value = keyId
+  error.value = null
+  copyStatus.value = null
+  try {
+    const resp = await rotateApiKey(auth.token, keyId)
+    created.value = resp
+    createdContext.value = 'rotate'
+    await refresh()
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '操作失败，请稍后再试'
+    }
+  } finally {
+    rotating.value = null
+  }
+}
+
+async function copyKey() {
+  if (!created.value?.key) return
+  try {
+    await navigator.clipboard.writeText(created.value.key)
+    copyStatus.value = '已复制'
+  } catch {
+    copyStatus.value = '复制失败'
+  }
+}
+
+function clearCreated() {
+  created.value = null
+  createdContext.value = null
+  copyStatus.value = null
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-xl font-semibold text-slate-900">API Keys</h1>
+      <p class="text-sm text-slate-600">仅 Pro/Business 可创建；创建时只展示一次完整 Key。</p>
+    </div>
+
+    <div v-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-if="created" class="rounded-xl border border-emerald-200 bg-emerald-50 p-5 text-sm text-emerald-950">
+      <div class="font-medium">{{ createdContext === 'rotate' ? '已轮换' : '已创建' }}：{{ created.name }}</div>
+      <div class="mt-2 text-xs text-emerald-900">请保存此 Key，它只会显示一次：</div>
+      <pre class="mt-2 overflow-auto rounded-lg bg-slate-950 p-3 text-xs text-slate-100"><code>{{ created.key }}</code></pre>
+      <div class="mt-3 flex items-center gap-2">
+        <button
+          type="button"
+          class="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700"
+          @click="copyKey"
+        >
+          一键复制
+        </button>
+        <div v-if="copyStatus" class="text-xs text-emerald-900">{{ copyStatus }}</div>
+        <button
+          type="button"
+          class="ml-auto rounded-md border border-emerald-200 bg-white px-3 py-1.5 text-sm text-emerald-800 hover:bg-emerald-100"
+          @click="clearCreated"
+        >
+          我已保存
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5">
+      <div class="text-sm font-medium text-slate-900">创建 API Key</div>
+      <div class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-end">
+        <label class="flex-1 space-y-1">
+          <div class="text-xs font-medium text-slate-600">名称</div>
+          <input
+            v-model="name"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="例如 CI / prod / local"
+          />
+        </label>
+        <button
+          type="button"
+          class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="creating || !name.trim()"
+          @click="create"
+        >
+          {{ creating ? '创建中…' : '创建' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5">
+      <div class="flex items-center justify-between">
+        <div class="text-sm font-medium text-slate-900">已有 Keys</div>
+        <button
+          type="button"
+          class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50"
+          @click="refresh"
+        >
+          刷新
+        </button>
+      </div>
+
+      <div v-if="loading" class="mt-3 text-sm text-slate-600">加载中…</div>
+      <div v-else-if="apiKeys.length === 0" class="mt-3 text-sm text-slate-600">暂无</div>
+      <div v-else class="mt-4 space-y-2">
+        <div
+          v-for="k in apiKeys"
+          :key="k.id"
+          class="flex flex-col gap-2 rounded-lg border border-slate-200 p-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <div class="min-w-0">
+            <div class="truncate text-sm font-medium text-slate-900">{{ k.name }}</div>
+            <div class="text-xs text-slate-500">
+              {{ k.key_prefix }} · rate: {{ k.rate_limit }}/min
+              <span v-if="k.last_used_at"> · 上次使用 {{ new Date(k.last_used_at).toLocaleString() }}</span>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <span
+              class="rounded-full px-2 py-1 text-xs"
+              :class="k.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+            >
+              {{ k.is_active ? '启用' : '禁用' }}
+            </span>
+            <button
+              v-if="k.is_active"
+              type="button"
+              class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-50"
+              :disabled="rotating === k.id"
+              @click="rotate(k.id)"
+            >
+              {{ rotating === k.id ? '轮换中…' : '轮换' }}
+            </button>
+            <button
+              v-if="k.is_active"
+              type="button"
+              class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-50"
+              @click="disable(k.id)"
+            >
+              禁用
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/dashboard/DashboardBillingPage.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import {
+  createCheckout,
+  createPortal,
+  getSubscription,
+  getUsage,
+  listInvoices,
+  listPlans,
+  type InvoiceView,
+  type PlanView,
+  type SubscriptionView,
+  type UsageResponse,
+} from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+import { formatCents } from '@/utils/format'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const plans = ref<PlanView[]>([])
+const subscription = ref<SubscriptionView | null>(null)
+const usage = ref<UsageResponse | null>(null)
+const invoices = ref<InvoiceView[]>([])
+
+const busy = ref(false)
+
+onMounted(async () => {
+  if (!auth.token) return
+  try {
+    const [p, s, u, inv] = await Promise.all([
+      listPlans(),
+      getSubscription(auth.token),
+      getUsage(auth.token),
+      listInvoices(auth.token),
+    ])
+    plans.value = p.plans
+    subscription.value = s.subscription
+    usage.value = u
+    invoices.value = inv.invoices
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+async function openCheckout(planId: string) {
+  if (!auth.token) return
+  busy.value = true
+  error.value = null
+  try {
+    const resp = await createCheckout(auth.token, planId)
+    window.location.href = resp.checkout_url
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '创建支付链接失败'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+
+async function openPortal() {
+  if (!auth.token) return
+  busy.value = true
+  error.value = null
+  try {
+    const resp = await createPortal(auth.token)
+    window.location.href = resp.url
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '打开 Portal 失败'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-xl font-semibold text-slate-900">订阅与额度</h1>
+      <p class="text-sm text-slate-600">充值额度或购买套餐通过 Stripe 完成。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-6">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <div class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="text-xs font-medium text-slate-500">当前套餐</div>
+          <div class="mt-2 text-2xl font-semibold text-slate-900">{{ subscription?.plan.name ?? 'Free' }}</div>
+          <div class="mt-1 text-sm text-slate-600">状态：{{ subscription?.status ?? 'free' }}</div>
+        </div>
+        <div class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="text-xs font-medium text-slate-500">当期用量</div>
+          <div class="mt-2 text-2xl font-semibold text-slate-900">
+            {{ usage?.used_units ?? 0 }} / {{ usage?.total_units ?? usage?.included_units ?? 0 }}
+          </div>
+          <div class="mt-1 text-sm text-slate-600">剩余 {{ usage?.remaining_units ?? 0 }}</div>
+          <div v-if="(usage?.bonus_units ?? 0) > 0" class="mt-1 text-xs text-slate-500">
+            套餐额度 {{ usage?.included_units ?? 0 }} + 赠送 {{ usage?.bonus_units ?? 0 }}
+          </div>
+        </div>
+        <div class="rounded-xl border border-slate-200 bg-white p-5">
+          <div class="text-xs font-medium text-slate-500">周期</div>
+          <div class="mt-2 text-sm text-slate-700">
+            {{ subscription?.current_period_start ? new Date(subscription.current_period_start).toLocaleString() : '—' }}
+            <span class="mx-1">→</span>
+            {{ subscription?.current_period_end ? new Date(subscription.current_period_end).toLocaleString() : '—' }}
+          </div>
+          <div class="mt-3">
+            <button
+              type="button"
+              class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+              :disabled="busy"
+              @click="openPortal"
+            >
+              打开 Stripe Portal
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-sm font-medium text-slate-900">充值额度 / 购买套餐</div>
+        <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
+          <div v-for="plan in plans" :key="plan.id" class="rounded-lg border border-slate-200 p-4">
+            <div class="text-sm font-medium text-slate-900">{{ plan.name }}</div>
+            <div class="mt-1 text-sm text-slate-700">
+              {{ plan.amount_cents > 0 ? formatCents(plan.amount_cents, plan.currency) : '免费' }}
+              <span class="text-xs text-slate-500">/ {{ plan.interval }}</span>
+            </div>
+            <div class="mt-2 text-xs text-slate-600">
+              含 {{ plan.included_units_per_period.toLocaleString() }} 次 / 周期
+            </div>
+            <button
+              type="button"
+              class="mt-3 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+              :disabled="busy || plan.amount_cents <= 0"
+              @click="openCheckout(plan.id)"
+            >
+              充值额度
+            </button>
+            <div v-if="plan.amount_cents <= 0" class="mt-2 text-xs text-slate-500">Free 无需订阅</div>
+          </div>
+        </div>
+        <div class="mt-3 text-xs text-slate-500">
+          提示：示例数据中的 Stripe Price ID 为占位符，接入真实 Price 后即可用。管理员赠送额度会直接叠加到当期总额度。
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-sm font-medium text-slate-900">发票</div>
+        <div v-if="invoices.length === 0" class="mt-3 text-sm text-slate-600">暂无发票</div>
+        <div v-else class="mt-3 overflow-auto">
+          <table class="min-w-full text-left text-sm">
+            <thead class="text-xs text-slate-500">
+              <tr>
+                <th class="py-2 pr-4">编号</th>
+                <th class="py-2 pr-4">状态</th>
+                <th class="py-2 pr-4">金额</th>
+                <th class="py-2 pr-4">创建时间</th>
+                <th class="py-2 pr-4">链接</th>
+              </tr>
+            </thead>
+            <tbody class="text-slate-700">
+              <tr v-for="inv in invoices" :key="inv.invoice_number" class="border-t border-slate-100">
+                <td class="py-2 pr-4">{{ inv.invoice_number }}</td>
+                <td class="py-2 pr-4">{{ inv.status }}</td>
+                <td class="py-2 pr-4">{{ formatCents(inv.total_amount_cents, inv.currency) }}</td>
+                <td class="py-2 pr-4">{{ new Date(inv.created_at).toLocaleString() }}</td>
+                <td class="py-2 pr-4">
+                  <a v-if="inv.hosted_invoice_url" :href="inv.hosted_invoice_url" target="_blank" rel="noreferrer">
+                    查看
+                  </a>
+                  <span v-else class="text-slate-400">—</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/dashboard/DashboardHistoryPage.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { listHistory, type HistoryTaskView } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+import { formatBytes } from '@/utils/format'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const downloadError = ref<string | null>(null)
+const downloadBusy = ref(false)
+const tasks = ref<HistoryTaskView[]>([])
+const page = ref(1)
+const limit = ref(10)
+const total = ref(0)
+const status = ref('')
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit.value)))
+
+const statusOptions = [
+  { value: '', label: '全部状态' },
+  { value: 'pending', label: '排队' },
+  { value: 'processing', label: '处理中' },
+  { value: 'completed', label: '已完成' },
+  { value: 'failed', label: '失败' },
+  { value: 'cancelled', label: '已取消' },
+]
+
+function statusLabel(value: string) {
+  return statusOptions.find((item) => item.value === value)?.label ?? value
+}
+
+function statusClass(value: string) {
+  switch (value) {
+    case 'completed':
+      return 'bg-emerald-50 text-emerald-700'
+    case 'processing':
+      return 'bg-indigo-50 text-indigo-700'
+    case 'failed':
+      return 'bg-rose-50 text-rose-700'
+    case 'cancelled':
+      return 'bg-slate-100 text-slate-600'
+    default:
+      return 'bg-amber-50 text-amber-700'
+  }
+}
+
+function formatDate(value?: string | null) {
+  if (!value) return '—'
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.getTime())) return value
+  return parsed.toLocaleString()
+}
+
+function formatPercent(value?: number | null) {
+  if (value === null || value === undefined) return '—'
+  return `${value.toFixed(1)}%`
+}
+
+function sourceLabel(value: string) {
+  switch (value) {
+    case 'web':
+      return '网页'
+    case 'api':
+      return 'API'
+    case 'batch':
+      return '批量'
+    default:
+      return value || '—'
+  }
+}
+
+function extractFilename(disposition: string | null) {
+  if (!disposition) return null
+  const match = /filename="([^"]+)"/i.exec(disposition)
+  return match?.[1] ?? null
+}
+
+function outputExt(format: string) {
+  return format.toLowerCase() === 'jpeg' ? 'jpg' : format.toLowerCase()
+}
+
+function buildFileName(originalName: string, outputFormat: string) {
+  const trimmed = originalName.trim()
+  const base = trimmed ? trimmed.replace(/\.[^/.]+$/, '') : 'download'
+  return `${base}.${outputExt(outputFormat)}`
+}
+
+async function downloadWithAuth(url: string, fallbackName: string) {
+  if (!auth.token) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+    return
+  }
+  downloadBusy.value = true
+  downloadError.value = null
+  try {
+    const res = await fetch(url, {
+      headers: { authorization: `Bearer ${auth.token}` },
+    })
+    if (!res.ok) {
+      downloadError.value = `下载失败（HTTP ${res.status}）`
+      return
+    }
+    const blob = await res.blob()
+    const filename = extractFilename(res.headers.get('content-disposition')) ?? fallbackName
+    const objectUrl = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = objectUrl
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(objectUrl)
+  } catch (err) {
+    downloadError.value = '下载失败，请稍后再试'
+  } finally {
+    downloadBusy.value = false
+  }
+}
+
+async function downloadTaskZip(task: HistoryTaskView) {
+  if (!task.download_all_url) return
+  await downloadWithAuth(task.download_all_url, `task_${task.task_id}.zip`)
+}
+
+async function downloadFile(file: HistoryTaskView['files'][number]) {
+  if (!file.download_url) return
+  const fallback = buildFileName(file.original_name, file.output_format)
+  await downloadWithAuth(file.download_url, fallback)
+}
+
+async function loadHistory(targetPage = page.value) {
+  if (!auth.token) return
+  loading.value = true
+  error.value = null
+  try {
+    const resp = await listHistory(auth.token, {
+      page: targetPage,
+      limit: limit.value,
+      status: status.value || undefined,
+    })
+    tasks.value = resp.tasks
+    page.value = resp.page
+    limit.value = resp.limit
+    total.value = resp.total
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  loadHistory(1)
+}
+
+function resetFilters() {
+  status.value = ''
+  limit.value = 10
+  loadHistory(1)
+}
+
+onMounted(async () => {
+  await loadHistory(1)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-xl font-semibold text-slate-900">历史任务</h1>
+      <p class="text-sm text-slate-600">查看压缩任务、下载结果与过期时间。</p>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-5">
+      <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <div class="flex flex-1 flex-wrap items-end gap-3">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">状态</div>
+            <select v-model="status" class="w-44 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800">
+              <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+            </select>
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">每页数量</div>
+            <select v-model.number="limit" class="w-32 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800">
+              <option :value="10">10</option>
+              <option :value="20">20</option>
+              <option :value="50">50</option>
+            </select>
+          </label>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+            :disabled="loading"
+            @click="applyFilters"
+          >
+            {{ loading ? '查询中…' : '查询' }}
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
+            :disabled="loading"
+            @click="resetFilters"
+          >
+            重置
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <div v-if="downloadError" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+        {{ downloadError }}
+      </div>
+      <div v-if="tasks.length === 0" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+        暂无历史任务
+      </div>
+
+      <div v-for="task in tasks" :key="task.task_id" class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="space-y-1">
+            <div class="text-sm font-medium text-slate-900">任务 {{ task.task_id.slice(0, 8) }}</div>
+            <div class="text-xs text-slate-500">
+              来源 {{ sourceLabel(task.source) }} · 创建 {{ formatDate(task.created_at) }} · 过期 {{ formatDate(task.expires_at) }}
+            </div>
+          </div>
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="rounded-full px-2 py-1 text-xs" :class="statusClass(task.status)">
+              {{ statusLabel(task.status) }}
+            </span>
+            <button
+              v-if="task.download_all_url"
+              type="button"
+              class="rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
+              :disabled="downloadBusy"
+              @click="downloadTaskZip(task)"
+            >
+              下载全部 ZIP
+            </button>
+            <span v-else class="rounded-md border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-400">
+              ZIP 未就绪
+            </span>
+          </div>
+        </div>
+
+        <div class="mt-4 space-y-2">
+          <div class="flex flex-wrap items-center justify-between text-xs text-slate-500">
+            <span>
+              进度 {{ task.progress }}% · 完成 {{ task.completed_files }}/{{ task.total_files }} · 失败
+              {{ task.failed_files }}
+            </span>
+            <span>完成时间 {{ formatDate(task.completed_at) }}</span>
+          </div>
+          <div class="h-2 w-full rounded-full bg-slate-100">
+            <div class="h-2 rounded-full bg-indigo-500" :style="{ width: `${task.progress}%` }"></div>
+          </div>
+        </div>
+
+        <div v-if="task.files.length > 0" class="mt-4 overflow-auto">
+          <table class="min-w-full text-left text-xs">
+            <thead class="text-slate-500">
+              <tr>
+                <th class="py-2 pr-4">文件</th>
+                <th class="py-2 pr-4">状态</th>
+                <th class="py-2 pr-4">原始大小</th>
+                <th class="py-2 pr-4">压缩后</th>
+                <th class="py-2 pr-4">节省</th>
+                <th class="py-2 pr-4">输出格式</th>
+                <th class="py-2 pr-4">下载/错误</th>
+              </tr>
+            </thead>
+            <tbody class="text-slate-700">
+              <tr v-for="file in task.files" :key="file.file_id" class="border-t border-slate-100">
+                <td class="py-2 pr-4">
+                  <div class="max-w-[240px] truncate text-sm font-medium text-slate-900">{{ file.original_name }}</div>
+                  <div class="text-[11px] text-slate-400">ID {{ file.file_id.slice(0, 8) }}</div>
+                </td>
+                <td class="py-2 pr-4">
+                  <span class="rounded-full px-2 py-1 text-[11px]" :class="statusClass(file.status)">
+                    {{ statusLabel(file.status) }}
+                  </span>
+                </td>
+                <td class="py-2 pr-4">{{ formatBytes(file.original_size) }}</td>
+                <td class="py-2 pr-4">
+                  {{ file.compressed_size ? formatBytes(file.compressed_size) : '—' }}
+                </td>
+                <td class="py-2 pr-4">{{ formatPercent(file.saved_percent) }}</td>
+                <td class="py-2 pr-4 uppercase">{{ file.output_format }}</td>
+                <td class="py-2 pr-4">
+                  <button
+                    v-if="file.download_url"
+                    type="button"
+                    class="text-indigo-600 hover:text-indigo-700 disabled:opacity-50"
+                    :disabled="downloadBusy"
+                    @click="downloadFile(file)"
+                  >
+                    下载
+                  </button>
+                  <span v-else-if="file.error_message" class="text-rose-600">{{ file.error_message }}</span>
+                  <span v-else class="text-slate-400">—</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-slate-600">
+        <div>第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page <= 1 || loading"
+            @click="loadHistory(page - 1)"
+          >
+            上一页
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+            :disabled="page >= totalPages || loading"
+            @click="loadHistory(page + 1)"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/dashboard/DashboardHomePage.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { getSubscription, getUsage, sendVerification } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const route = useRoute()
+
+const usage = ref<Awaited<ReturnType<typeof getUsage>> | null>(null)
+const subscription = ref<Awaited<ReturnType<typeof getSubscription>>['subscription'] | null>(null)
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const alert = ref<{ type: 'success' | 'error'; message: string } | null>(null)
+const sendingVerification = ref(false)
+
+onMounted(async () => {
+  if (!auth.token) return
+  try {
+    const [u, s] = await Promise.all([getUsage(auth.token), getSubscription(auth.token)])
+    usage.value = u
+    subscription.value = s.subscription
+
+    if (route.query.welcome === '1') {
+      alert.value = { type: 'success', message: '欢迎加入 ImageForge！请尽快完成邮箱验证。' }
+    }
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+async function resendVerification() {
+  if (!auth.token) return
+  sendingVerification.value = true
+  alert.value = null
+  try {
+    const resp = await sendVerification(auth.token)
+    alert.value = { type: 'success', message: resp.message }
+  } catch (err) {
+    if (err instanceof ApiError) {
+      alert.value = { type: 'error', message: `[${err.code}] ${err.message}` }
+    } else {
+      alert.value = { type: 'error', message: '发送失败，请稍后再试' }
+    }
+  } finally {
+    sendingVerification.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="flex items-start justify-between gap-3">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold text-slate-900">概览</h1>
+        <p class="text-sm text-slate-600">查看当期用量、套餐与订阅状态。</p>
+      </div>
+      <router-link
+        to="/"
+        class="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50"
+      >
+        返回首页工具
+      </router-link>
+    </div>
+
+    <div
+      v-if="alert"
+      class="rounded-lg border p-4 text-sm"
+      :class="{
+        'border-emerald-200 bg-emerald-50 text-emerald-900': alert.type === 'success',
+        'border-rose-200 bg-rose-50 text-rose-900': alert.type === 'error',
+      }"
+    >
+      {{ alert.message }}
+    </div>
+
+    <div
+      v-if="auth.user && !auth.user.email_verified"
+      class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900"
+    >
+      <div class="font-medium">邮箱未验证</div>
+      <div class="mt-1 text-amber-800">验证后才能使用登录态压缩与 API 能力。</div>
+      <div class="mt-3">
+        <button
+          type="button"
+          class="rounded-md bg-amber-600 px-3 py-1.5 font-medium text-white hover:bg-amber-700 disabled:opacity-50"
+          :disabled="sendingVerification"
+          @click="resendVerification"
+        >
+          重新发送验证邮件
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+    <div v-else-if="error" class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
+      {{ error }}
+    </div>
+    <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-xs font-medium text-slate-500">当期用量</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">
+          {{ usage?.used_units ?? 0 }} / {{ usage?.total_units ?? usage?.included_units ?? 0 }}
+        </div>
+        <div class="mt-1 text-sm text-slate-600">剩余 {{ usage?.remaining_units ?? 0 }}</div>
+        <div v-if="(usage?.bonus_units ?? 0) > 0" class="mt-1 text-xs text-slate-500">
+          含赠送 {{ usage?.bonus_units ?? 0 }}
+        </div>
+        <div class="mt-3">
+          <router-link to="/dashboard/billing" class="text-sm text-indigo-600 hover:text-indigo-700">
+            充值额度
+          </router-link>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-xs font-medium text-slate-500">当前套餐</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">{{ subscription?.plan.name ?? 'Free' }}</div>
+        <div class="mt-1 text-sm text-slate-600">状态：{{ subscription?.status ?? 'free' }}</div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-5">
+        <div class="text-xs font-medium text-slate-500">周期结束</div>
+        <div class="mt-2 text-2xl font-semibold text-slate-900">
+          {{ subscription?.current_period_end ? new Date(subscription.current_period_end).toLocaleDateString() : '—' }}
+        </div>
+        <div class="mt-1 text-sm text-slate-600">
+          <router-link to="/dashboard/billing" class="text-indigo-600 hover:text-indigo-700">管理订阅</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/pages/dashboard/DashboardSettingsPage.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { getProfile, sendVerification, updatePassword, updateProfile, type UserProfile } from '@/services/api'
+import { ApiError } from '@/services/http'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+
+const loading = ref(true)
+
+const profileForm = ref({ email: '', username: '' })
+const profileBusy = ref(false)
+const profileMessage = ref<string | null>(null)
+const profileError = ref<string | null>(null)
+
+const passwordForm = ref({ current: '', next: '', confirm: '' })
+const passwordBusy = ref(false)
+const passwordMessage = ref<string | null>(null)
+const passwordError = ref<string | null>(null)
+
+const verificationBusy = ref(false)
+const verificationMessage = ref<string | null>(null)
+const verificationError = ref<string | null>(null)
+
+const canResendVerification = computed(() => Boolean(auth.user && !auth.user.email_verified))
+
+function syncProfile(user: UserProfile) {
+  profileForm.value = { email: user.email ?? '', username: user.username ?? '' }
+}
+
+onMounted(async () => {
+  if (!auth.token) {
+    loading.value = false
+    return
+  }
+  try {
+    const user = await getProfile(auth.token)
+    auth.updateUser(user)
+    syncProfile(user)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      profileError.value = `[${err.code}] ${err.message}`
+    } else {
+      profileError.value = '加载失败，请稍后再试'
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+async function resendVerification() {
+  if (!auth.token) return
+  verificationBusy.value = true
+  verificationMessage.value = null
+  verificationError.value = null
+  try {
+    const resp = await sendVerification(auth.token)
+    verificationMessage.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      verificationError.value = `[${err.code}] ${err.message}`
+    } else {
+      verificationError.value = '发送失败，请稍后再试'
+    }
+  } finally {
+    verificationBusy.value = false
+  }
+}
+
+async function saveProfile() {
+  if (!auth.token || !auth.user) return
+  profileBusy.value = true
+  profileMessage.value = null
+  profileError.value = null
+  try {
+    const email = profileForm.value.email.trim().toLowerCase()
+    const username = profileForm.value.username.trim()
+    const payload: { email?: string; username?: string } = {}
+
+    if (email && email !== auth.user.email) payload.email = email
+    if (username && username !== auth.user.username) payload.username = username
+
+    if (!payload.email && !payload.username) {
+      profileMessage.value = '暂无更新'
+      return
+    }
+
+    const resp = await updateProfile(auth.token, payload)
+    auth.updateUser(resp.user)
+    syncProfile(resp.user)
+    profileMessage.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      profileError.value = `[${err.code}] ${err.message}`
+    } else {
+      profileError.value = '更新失败，请稍后再试'
+    }
+  } finally {
+    profileBusy.value = false
+  }
+}
+
+async function changePassword() {
+  if (!auth.token) return
+  passwordBusy.value = true
+  passwordMessage.value = null
+  passwordError.value = null
+  try {
+    const currentPassword = passwordForm.value.current.trim()
+    const nextPassword = passwordForm.value.next.trim()
+    const confirm = passwordForm.value.confirm.trim()
+
+    if (!currentPassword || !nextPassword) {
+      passwordError.value = '请填写当前密码与新密码'
+      return
+    }
+    if (nextPassword !== confirm) {
+      passwordError.value = '两次输入的新密码不一致'
+      return
+    }
+
+    const resp = await updatePassword(auth.token, currentPassword, nextPassword)
+    passwordMessage.value = resp.message
+    passwordForm.value = { current: '', next: '', confirm: '' }
+  } catch (err) {
+    if (err instanceof ApiError) {
+      passwordError.value = `[${err.code}] ${err.message}`
+    } else {
+      passwordError.value = '更新失败，请稍后再试'
+    }
+  } finally {
+    passwordBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="space-y-1">
+      <h1 class="text-xl font-semibold text-slate-900">账号设置</h1>
+      <p class="text-sm text-slate-600">更新个人资料、邮箱验证与密码。</p>
+    </div>
+
+    <div v-if="loading" class="text-sm text-slate-600">加载中…</div>
+
+    <div v-else class="space-y-6">
+      <div class="rounded-xl border border-slate-200 bg-white p-6">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="text-sm font-medium text-slate-900">账号资料</div>
+          <span
+            class="rounded-full px-2 py-1 text-xs"
+            :class="auth.user?.email_verified ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-800'"
+          >
+            {{ auth.user?.email_verified ? '邮箱已验证' : '邮箱未验证' }}
+          </span>
+        </div>
+
+        <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">邮箱</div>
+            <input
+              v-model="profileForm.email"
+              type="email"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="name@company.com"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">用户名</div>
+            <input
+              v-model="profileForm.username"
+              type="text"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="你的用户名"
+            />
+          </label>
+        </div>
+
+        <div v-if="profileMessage" class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+          {{ profileMessage }}
+        </div>
+        <div v-if="profileError" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+          {{ profileError }}
+        </div>
+
+        <div class="mt-4 flex flex-wrap items-center gap-3">
+          <button
+            type="button"
+            class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+            :disabled="profileBusy"
+            @click="saveProfile"
+          >
+            {{ profileBusy ? '保存中…' : '保存资料' }}
+          </button>
+
+          <div v-if="canResendVerification">
+            <button
+              type="button"
+              class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 hover:bg-amber-100 disabled:opacity-50"
+              :disabled="verificationBusy"
+              @click="resendVerification"
+            >
+              {{ verificationBusy ? '发送中…' : '重新发送验证邮件' }}
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-if="verificationMessage"
+          class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900"
+        >
+          {{ verificationMessage }}
+        </div>
+        <div v-if="verificationError" class="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+          {{ verificationError }}
+        </div>
+
+        <div class="mt-2 text-xs text-slate-500">开发环境邮件关闭时，链接会打印在后端日志中。</div>
+      </div>
+
+      <div class="rounded-xl border border-slate-200 bg-white p-6">
+        <div class="text-sm font-medium text-slate-900">修改密码</div>
+
+        <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">当前密码</div>
+            <input
+              v-model="passwordForm.current"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="当前密码"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">新密码</div>
+            <input
+              v-model="passwordForm.next"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="至少 8 位"
+            />
+          </label>
+          <label class="space-y-1">
+            <div class="text-xs font-medium text-slate-600">确认新密码</div>
+            <input
+              v-model="passwordForm.confirm"
+              type="password"
+              class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+              placeholder="再次输入新密码"
+            />
+          </label>
+        </div>
+
+        <div v-if="passwordMessage" class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900">
+          {{ passwordMessage }}
+        </div>
+        <div v-if="passwordError" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+          {{ passwordError }}
+        </div>
+
+        <div class="mt-4">
+          <button
+            type="button"
+            class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-950 disabled:opacity-50"
+            :disabled="passwordBusy"
+            @click="changePassword"
+          >
+            {{ passwordBusy ? '更新中…' : '更新密码' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>