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

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

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 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
-          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>
+          class="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dark-800"
+        >
+          <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 bg-white dark:bg-dark-800 rounded-xl shadow-xl">
+      <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 class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-dark-600">
+          <div
+            class="flex items-center justify-between border-b border-gray-200 px-5 py-4 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,
-      {
-        type: filters.type as RedeemCodeType,
-        status: filters.status as any,
-        search: searchQuery.value || undefined
-      }
-    )
+    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'))