style(frontend): 统一 Views 模块代码风格

- 移除语句末尾分号，规范代码格式
- 优化组件结构和类型定义
- 改进视图文档和示例
- 提升代码一致性

frontend/src/views/NotFoundView.vue

 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-dark-950 px-4 relative overflow-hidden">
+  <div
+    class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
+  >
     <!-- Background Decoration -->
-    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-400/10 rounded-full blur-3xl"></div>
-      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-500/10 rounded-full blur-3xl"></div>
+    <div class="pointer-events-none absolute inset-0 overflow-hidden">
+      <div
+        class="absolute -right-40 -top-40 h-80 w-80 rounded-full bg-primary-400/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary-500/10 blur-3xl"
+      ></div>
     </div>
 
-    <div class="max-w-md w-full text-center relative z-10">
+    <div class="relative z-10 w-full max-w-md text-center">
       <!-- 404 Display -->
       <div class="mb-8">
         <div class="relative inline-block">
-          <span class="text-[12rem] font-bold text-gray-100 dark:text-dark-800 leading-none">404</span>
+          <span class="text-[12rem] font-bold leading-none text-gray-100 dark:text-dark-800"
+            >404</span
+          >
           <div class="absolute inset-0 flex items-center justify-center">
-            <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 flex items-center justify-center">
-              <svg class="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            <div
+              class="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30"
+            >
+              <svg
+                class="h-12 w-12 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                />
               </svg>
             </div>
           </div>
@@ -23,31 +43,43 @@
 
       <!-- Text Content -->
       <div class="mb-8">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">
-          Page Not Found
-        </h1>
+        <h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Page Not Found</h1>
         <p class="text-gray-500 dark:text-dark-400">
           The page you are looking for doesn't exist or has been moved.
         </p>
       </div>
 
       <!-- Action Buttons -->
-      <div class="flex flex-col sm:flex-row gap-3 justify-center">
-        <button
-          @click="goBack"
-          class="btn btn-secondary"
+      <div class="flex flex-col justify-center gap-3 sm:flex-row">
+        <button @click="goBack" class="btn btn-secondary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+            />
           </svg>
           Go Back
         </button>
-        <router-link
-          to="/dashboard"
-          class="btn btn-primary"
+        <router-link to="/dashboard" class="btn btn-primary">
+          <svg
+            class="mr-2 h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
           </svg>
           Go to Dashboard
         </router-link>
@@ -56,7 +88,10 @@
       <!-- Help Link -->
       <p class="mt-8 text-sm text-gray-400 dark:text-dark-500">
         Need help?
-        <a href="#" class="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">
+        <a
+          href="#"
+          class="text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
+        >
           Contact support
         </a>
       </p>
@@ -65,11 +100,11 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
+const router = useRouter()
 
 function goBack(): void {
-  router.back();
+  router.back()
 }
 </script>

frontend/src/views/admin/RedeemView.vue

@@ -10,23 +10,27 @@
           :title="t('common.refresh')"
         >
           <svg
-            :class="['w-5 h-5', loading ? 'animate-spin' : '']"
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
+            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
           </svg>
         </button>
-        <button
-          @click="showGenerateDialog = true"
-          class="btn btn-primary"
-        >
+        <button @click="showGenerateDialog = true" class="btn btn-primary">
           {{ t('admin.redeem.generateCodes') }}
         </button>
       </div>
 
       <!-- Filters and Actions -->
       <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div class="flex-1 max-w-md">
+        <div class="max-w-md flex-1">
           <input
             v-model="searchQuery"
             type="text"
@@ -48,10 +52,7 @@
             class="w-36"
             @change="loadCodes"
           />
-          <button
-            @click="handleExportCodes"
-            class="btn btn-secondary"
-          >
+          <button @click="handleExportCodes" class="btn btn-secondary">
             {{ t('admin.redeem.exportCsv') }}
           </button>
         </div>
@@ -62,20 +63,38 @@
         <DataTable :columns="columns" :data="codes" :loading="loading">
           <template #cell-code="{ value }">
             <div class="flex items-center space-x-2">
-              <code class="text-sm font-mono text-gray-900 dark:text-gray-100">{{ value }}</code>
+              <code class="font-mono text-sm text-gray-900 dark:text-gray-100">{{ value }}</code>
               <button
                 @click="copyToClipboard(value)"
                 :class="[
                   'flex items-center transition-colors',
-                  copiedCode === value ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                  copiedCode === value
+                    ? 'text-green-500'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
                 ]"
                 :title="copiedCode === value ? t('admin.redeem.copied') : t('keys.copyToClipboard')"
               >
-                <svg v-if="copiedCode !== value" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                <svg
+                  v-if="copiedCode !== value"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  />
                 </svg>
-                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
                 </svg>
               </button>
             </div>
@@ -85,8 +104,11 @@
             <span
               :class="[
                 'badge',
-                value === 'balance' ? 'badge-success' :
-                value === 'subscription' ? 'badge-warning' : 'badge-primary'
+                value === 'balance'
+                  ? 'badge-success'
+                  : value === 'subscription'
+                    ? 'badge-warning'
+                    : 'badge-primary'
               ]"
             >
               {{ value }}
@@ -98,7 +120,9 @@
               <template v-if="row.type === 'balance'">${{ value.toFixed(2) }}</template>
               <template v-else-if="row.type === 'subscription'">
                 {{ row.validity_days || 30 }}{{ t('admin.redeem.days') }}
-                <span v-if="row.group" class="text-gray-500 dark:text-gray-400 text-xs ml-1">({{ row.group.name }})</span>
+                <span v-if="row.group" class="ml-1 text-xs text-gray-500 dark:text-gray-400"
+                  >({{ row.group.name }})</span
+                >
               </template>
               <template v-else>{{ value }}</template>
             </span>
@@ -108,9 +132,11 @@
             <span
               :class="[
                 'badge',
-                value === 'unused' ? 'badge-success' :
-                value === 'used' ? 'badge-gray' :
-                'badge-danger'
+                value === 'unused'
+                  ? 'badge-success'
+                  : value === 'used'
+                    ? 'badge-gray'
+                    : 'badge-danger'
               ]"
             >
               {{ value }}
@@ -124,7 +150,9 @@
           </template>
 
           <template #cell-used_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">{{ value ? formatDate(value) : '-' }}</span>
+            <span class="text-sm text-gray-500 dark:text-dark-400">{{
+              value ? formatDate(value) : '-'
+            }}</span>
           </template>
 
           <template #cell-actions="{ row }">
@@ -132,11 +160,16 @@
               <button
                 v-if="row.status === 'unused'"
                 @click="handleDelete(row)"
-                class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                 :title="t('common.delete')"
               >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
                 </svg>
               </button>
               <span v-else class="text-gray-400 dark:text-dark-500">-</span>
@@ -156,10 +189,7 @@
 
       <!-- Batch Actions -->
       <div v-if="filters.status === 'unused'" class="flex justify-end">
-        <button
-          @click="showDeleteUnusedDialog = true"
-          class="btn btn-danger"
-        >
+        <button @click="showDeleteUnusedDialog = true" class="btn btn-danger">
           {{ t('admin.redeem.deleteAllUnused') }}
         </button>
       </div>
@@ -191,28 +221,27 @@
 
     <!-- Generate Codes Dialog -->
     <Teleport to="body">
+      <div v-if="showGenerateDialog" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="showGenerateDialog = false"></div>
         <div
-        v-if="showGenerateDialog"
-        class="fixed inset-0 z-50 flex items-center justify-center"
+          class="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dark-800"
         >
-        <div
-          class="fixed inset-0 bg-black/50"
-          @click="showGenerateDialog = false"
-        ></div>
-        <div class="relative z-10 w-full max-w-md bg-white dark:bg-dark-800 rounded-xl shadow-xl p-6">
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.redeem.generateCodesTitle') }}</h2>
+          <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+            {{ t('admin.redeem.generateCodesTitle') }}
+          </h2>
           <form @submit.prevent="handleGenerateCodes" class="space-y-4">
             <div>
               <label class="input-label">{{ t('admin.redeem.codeType') }}</label>
-              <Select
-                v-model="generateForm.type"
-                :options="typeOptions"
-              />
+              <Select v-model="generateForm.type" :options="typeOptions" />
             </div>
             <!-- 余额/并发类型：显示数值输入 -->
             <div v-if="generateForm.type !== 'subscription'">
               <label class="input-label">
-                {{ generateForm.type === 'balance' ? t('admin.redeem.amount') : t('admin.redeem.columns.value') }}
+                {{
+                  generateForm.type === 'balance'
+                    ? t('admin.redeem.amount')
+                    : t('admin.redeem.columns.value')
+                }}
               </label>
               <input
                 v-model.number="generateForm.value"
@@ -257,18 +286,10 @@
               />
             </div>
             <div class="flex justify-end gap-3 pt-2">
-              <button
-                type="button"
-                @click="showGenerateDialog = false"
-                class="btn btn-secondary"
-              >
+              <button type="button" @click="showGenerateDialog = false" class="btn btn-secondary">
                 {{ t('common.cancel') }}
               </button>
-              <button
-                type="submit"
-                :disabled="generating"
-                class="btn btn-primary"
-              >
+              <button type="submit" :disabled="generating" class="btn btn-primary">
                 {{ generating ? t('admin.redeem.generating') : t('admin.redeem.generate') }}
               </button>
             </div>
@@ -279,36 +300,51 @@
 
     <!-- Generated Codes Result Dialog -->
     <Teleport to="body">
+      <div v-if="showResultDialog" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="fixed inset-0 bg-black/50" @click="closeResultDialog"></div>
+        <div class="relative z-10 w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-dark-800">
+          <!-- Header -->
           <div
-        v-if="showResultDialog"
-        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-dark-600"
           >
-        <div
-          class="fixed inset-0 bg-black/50"
-          @click="closeResultDialog"
-        ></div>
-        <div class="relative z-10 w-full max-w-lg bg-white dark:bg-dark-800 rounded-xl shadow-xl">
-          <!-- Header -->
-          <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-dark-600">
             <div class="flex items-center gap-3">
-              <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+              >
+                <svg
+                  class="h-5 w-5 text-green-600 dark:text-green-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 13l4 4L19 7"
+                  />
                 </svg>
               </div>
               <div>
                 <h2 class="text-base font-semibold text-gray-900 dark:text-white">
                   {{ t('admin.redeem.generatedSuccessfully') }}
                 </h2>
-                <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}
+                </p>
               </div>
             </div>
             <button
               @click="closeResultDialog"
-              class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-dark-700 transition-colors"
+              class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
@@ -319,12 +355,14 @@
                 readonly
                 :value="generatedCodesText"
                 :style="{ height: textareaHeight }"
-                class="w-full p-3 font-mono text-sm bg-gray-50 dark:bg-dark-700 border border-gray-200 dark:border-dark-600 rounded-lg resize-none focus:outline-none text-gray-800 dark:text-gray-200"
+                class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 p-3 font-mono text-sm text-gray-800 focus:outline-none dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200"
               ></textarea>
             </div>
           </div>
           <!-- Footer -->
-          <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-700/50 rounded-b-xl">
+          <div
+            class="flex justify-end gap-2 rounded-b-xl border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-dark-600 dark:bg-dark-700/50"
+          >
             <button
               @click="copyGeneratedCodes"
               :class="[
@@ -332,20 +370,38 @@
                 copiedAll ? 'btn-success' : 'btn-secondary'
               ]"
             >
-              <svg v-if="!copiedAll" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              <svg
+                v-if="!copiedAll"
+                class="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
               </svg>
-              <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               {{ copiedAll ? t('admin.redeem.copied') : t('admin.redeem.copyAll') }}
             </button>
-            <button
-              @click="downloadGeneratedCodes"
-              class="btn btn-primary flex items-center gap-2"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            <button @click="downloadGeneratedCodes" class="btn btn-primary flex items-center gap-2">
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
               </svg>
               {{ t('admin.redeem.download') }}
             </button>
@@ -380,15 +436,15 @@ const subscriptionGroups = ref<Group[]>([])
 // 订阅类型分组选项
 const subscriptionGroupOptions = computed(() => {
   return subscriptionGroups.value
-    .filter(g => g.subscription_type === 'subscription')
-    .map(g => ({
+    .filter((g) => g.subscription_type === 'subscription')
+    .map((g) => ({
       value: g.id,
       label: g.name
     }))
 })
 
 const generatedCodesText = computed(() => {
-  return generatedCodes.value.map(code => code.code).join('\n')
+  return generatedCodes.value.map((code) => code.code).join('\n')
 })
 
 const textareaHeight = computed(() => {
@@ -397,7 +453,10 @@ const textareaHeight = computed(() => {
   const padding = 24 // top + bottom padding
   const minHeight = 60
   const maxHeight = 240
-  const calculatedHeight = Math.min(Math.max(lineCount * lineHeight + padding, minHeight), maxHeight)
+  const calculatedHeight = Math.min(
+    Math.max(lineCount * lineHeight + padding, minHeight),
+    maxHeight
+  )
   return `${calculatedHeight}px`
 })
 
@@ -497,15 +556,11 @@ const formatDate = (dateString: string): string => {
 const loadCodes = async () => {
   loading.value = true
   try {
-    const response = await adminAPI.redeem.list(
-      pagination.page,
-      pagination.page_size,
-      {
+    const response = await adminAPI.redeem.list(pagination.page, pagination.page_size, {
       type: filters.type as RedeemCodeType,
       status: filters.status as any,
       search: searchQuery.value || undefined
-      }
-    )
+    })
     codes.value = response.items
     pagination.total = response.total
     pagination.pages = response.pages
@@ -623,7 +678,7 @@ const confirmDeleteUnused = async () => {
   try {
     // Get all unused codes and delete them
     const unusedCodesResponse = await adminAPI.redeem.list(1, 1000, { status: 'unused' })
-    const unusedCodeIds = unusedCodesResponse.items.map(code => code.id)
+    const unusedCodeIds = unusedCodesResponse.items.map((code) => code.id)
 
     if (unusedCodeIds.length === 0) {
       appStore.showInfo(t('admin.redeem.noUnusedCodes'))

frontend/src/views/auth/README.md

@@ -9,6 +9,7 @@ This directory contains Vue 3 authentication views for the Sub2API frontend appl
 Login page for existing users to authenticate.
 
 **Features:**
+
 - Username and password inputs with validation
 - Remember me checkbox for persistent sessions
 - Form validation with real-time error display
@@ -18,26 +19,30 @@ Login page for existing users to authenticate.
 - Link to registration page for new users
 
 **Usage:**
+
 ```vue
 <template>
   <LoginView />
 </template>
 
 <script setup lang="ts">
-import { LoginView } from '@/views/auth';
+import { LoginView } from '@/views/auth'
 </script>
 ```
 
 **Route:**
+
 - Path: `/login`
 - Name: `Login`
 - Meta: `{ requiresAuth: false }`
 
 **Validation Rules:**
+
 - Username: Required, minimum 3 characters
 - Password: Required, minimum 6 characters
 
 **Behavior:**
+
 - Calls `authStore.login()` with credentials
 - Shows success toast on successful login
 - Shows error toast and inline error message on failure
@@ -49,6 +54,7 @@ import { LoginView } from '@/views/auth';
 Registration page for new users to create accounts.
 
 **Features:**
+
 - Username, email, password, and confirm password inputs
 - Comprehensive form validation
 - Password strength requirements (8+ characters, letters + numbers)
@@ -60,22 +66,25 @@ Registration page for new users to create accounts.
 - Link to login page for existing users
 
 **Usage:**
+
 ```vue
 <template>
   <RegisterView />
 </template>
 
 <script setup lang="ts">
-import { RegisterView } from '@/views/auth';
+import { RegisterView } from '@/views/auth'
 </script>
 ```
 
 **Route:**
+
 - Path: `/register`
 - Name: `Register`
 - Meta: `{ requiresAuth: false }`
 
 **Validation Rules:**
+
 - Username:
   - Required
   - 3-50 characters
@@ -92,6 +101,7 @@ import { RegisterView } from '@/views/auth';
   - Must match password
 
 **Behavior:**
+
 - Calls `authStore.register()` with user data
 - Shows success toast on successful registration
 - Shows error toast and inline error message on failure
@@ -131,6 +141,7 @@ Both views follow a consistent structure:
 ### State Management
 
 Both views use:
+
 - `useAuthStore()` - For authentication actions (login, register)
 - `useAppStore()` - For toast notifications and UI feedback
 - `useRouter()` - For navigation and redirects
@@ -138,12 +149,14 @@ Both views use:
 ### Validation Strategy
 
 **Client-side Validation:**
+
 - Real-time validation on form submission
 - Field-level error messages
 - Comprehensive validation rules
 - TypeScript type safety
 
 **Server-side Validation:**
+
 - Backend API validates all inputs
 - Error responses handled gracefully
 - User-friendly error messages displayed
@@ -151,6 +164,7 @@ Both views use:
 ### Styling
 
 **Design System:**
+
 - TailwindCSS utility classes
 - Consistent color scheme (indigo primary)
 - Responsive design
@@ -158,6 +172,7 @@ Both views use:
 - Loading states with spinner animations
 
 **Visual Feedback:**
+
 - Red border on invalid fields
 - Error messages below inputs
 - Global error banner for API errors
@@ -167,13 +182,16 @@ Both views use:
 ## Dependencies
 
 ### Components
+
 - `AuthLayout` - Layout wrapper for auth pages from `@/components/layout`
 
 ### Stores
+
 - `authStore` - Authentication state management from `@/stores/auth`
 - `appStore` - Application state and toasts from `@/stores/app`
 
 ### Libraries
+
 - Vue 3 Composition API
 - Vue Router for navigation
 - Pinia for state management
@@ -185,11 +203,11 @@ Both views use:
 
 ```typescript
 // User enters credentials
-formData.username = 'john_doe';
-formData.password = 'SecurePass123';
+formData.username = 'john_doe'
+formData.password = 'SecurePass123'
 
 // Submit form
-await handleLogin();
+await handleLogin()
 
 // On success:
 // - authStore.login() called
@@ -207,13 +225,13 @@ await handleLogin();
 
 ```typescript
 // User enters registration data
-formData.username = 'jane_smith';
-formData.email = 'jane@example.com';
-formData.password = 'SecurePass123';
-formData.confirmPassword = 'SecurePass123';
+formData.username = 'jane_smith'
+formData.email = 'jane@example.com'
+formData.password = 'SecurePass123'
+formData.confirmPassword = 'SecurePass123'
 
 // Submit form
-await handleRegister();
+await handleRegister()
 
 // On success:
 // - authStore.register() called
@@ -233,10 +251,10 @@ await handleRegister();
 
 ```typescript
 // Validation errors
-errors.username = 'Username must be at least 3 characters';
-errors.email = 'Please enter a valid email address';
-errors.password = 'Password must be at least 8 characters with letters and numbers';
-errors.confirmPassword = 'Passwords do not match';
+errors.username = 'Username must be at least 3 characters'
+errors.email = 'Please enter a valid email address'
+errors.password = 'Password must be at least 8 characters with letters and numbers'
+errors.confirmPassword = 'Passwords do not match'
 ```
 
 ### Server-side Errors
@@ -252,8 +270,8 @@ errors.confirmPassword = 'Passwords do not match';
 }
 
 // Displayed as:
-errorMessage.value = 'Username already exists';
-appStore.showError('Username already exists');
+errorMessage.value = 'Username already exists'
+appStore.showError('Username already exists')
 ```
 
 ## Accessibility
@@ -269,18 +287,21 @@ appStore.showError('Username already exists');
 ## Testing Considerations
 
 ### Unit Tests
+
 - Form validation logic
 - Error handling
 - State management
 - Router navigation
 
 ### Integration Tests
+
 - Full login flow
 - Full registration flow
 - Error scenarios
 - Redirect behavior
 
 ### E2E Tests
+
 - Complete user journeys
 - Form interactions
 - API integration
@@ -289,6 +310,7 @@ appStore.showError('Username already exists');
 ## Future Enhancements
 
 Potential improvements:
+
 - OAuth/SSO integration (Google, GitHub)
 - Two-factor authentication (2FA)
 - Password strength meter

frontend/src/views/auth/index.ts

@@ -3,5 +3,5 @@
  * Export all authentication-related views
  */
 
-export { default as LoginView } from './LoginView.vue';
-export { default as RegisterView } from './RegisterView.vue';
+export { default as LoginView } from './LoginView.vue'
+export { default as RegisterView } from './RegisterView.vue'