From 77ac9d00b360d826ce8024d5470fd9da064327d2 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 23:23:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(creator):=20=E4=BC=98=E5=8C=96=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A6=82=E8=A7=88=E5=92=8C=E9=A2=91=E9=81=93=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E8=A7=86=E5=9B=BE=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C=E5=92=8C=E7=95=8C=E9=9D=A2=E7=BE=8E?=
 =?UTF-8?q?=E8=A7=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/creator/DashboardView.vue       | 235 ++++++++++--------
 .../portal/src/views/creator/SettingsView.vue | 138 ++++++----
 2 files changed, 212 insertions(+), 161 deletions(-)

diff --git a/frontend/portal/src/views/creator/DashboardView.vue b/frontend/portal/src/views/creator/DashboardView.vue
index 1323624..6e8fa3b 100644
--- a/frontend/portal/src/views/creator/DashboardView.vue
+++ b/frontend/portal/src/views/creator/DashboardView.vue
@@ -1,118 +1,139 @@
 <template>
-  <div class="p-8">
-    <div class="flex items-center justify-between mb-8">
-       <h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
-       <div class="flex gap-4">
-          <router-link to="/creator/contents/new" class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
-             <i class="pi pi-plus"></i> 发布新内容
-          </router-link>
-       </div>
-    </div>
+   <div>
+      <div class="flex items-center justify-between mb-8">
+         <h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
+         <div class="flex gap-4">
+            <router-link to="/creator/contents/new"
+               class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
+               <i class="pi pi-plus"></i> 发布新内容
+            </router-link>
+         </div>
+      </div>
 
-    <!-- Key Metrics -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-       <div v-for="metric in metrics" :key="metric.label" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow relative">
-          <div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
-          <div class="flex items-baseline gap-2">
-             <span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
-             <span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
-                <i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'" style="font-size: 0.7rem"></i>
-                {{ Math.abs(metric.trend) }}%
-             </span>
-          </div>
-          <div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
-          
-          <!-- Withdraw Button for Revenue Card -->
-          <button v-if="metric.label === '累计总收益'" @click="showWithdraw = true" class="absolute top-6 right-6 px-3 py-1.5 bg-green-50 text-green-700 text-xs font-bold rounded-lg hover:bg-green-100 transition-colors">
-             提现
-          </button>
-       </div>
-    </div>
+      <!-- Key Metrics -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+         <div v-for="metric in metrics" :key="metric.label"
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow relative">
+            <div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
+            <div class="flex items-baseline gap-2">
+               <span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
+               <span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
+                  <i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'"
+                     style="font-size: 0.7rem"></i>
+                  {{ Math.abs(metric.trend) }}%
+               </span>
+            </div>
+            <div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
 
-    <!-- Pending Orders (Quick Access) -->
-    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-       <h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
-       <div class="flex gap-4">
-          <div class="flex-1 p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors" @click="$router.push('/creator/orders')">
-             <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i class="pi pi-refresh"></i></div>
-                <div>
-                   <div class="font-bold text-slate-900">退款申请</div>
-                   <div class="text-xs text-orange-600">需要处理</div>
-                </div>
-             </div>
-             <div class="text-2xl font-bold text-orange-700">2</div>
-          </div>
-          <div class="flex-1 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors">
-             <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-full bg-blue-200 text-blue-700 flex items-center justify-center"><i class="pi pi-comments"></i></div>
-                <div>
-                   <div class="font-bold text-slate-900">新私信</div>
-                   <div class="text-xs text-blue-600">粉丝互动</div>
-                </div>
-             </div>
-             <div class="text-2xl font-bold text-blue-700">5</div>
-          </div>
-       </div>
-    </div>
+            <!-- Withdraw Button for Revenue Card -->
+            <button v-if="metric.label === '累计总收益'" @click="showWithdraw = true"
+               class="absolute top-6 right-6 px-3 py-1.5 bg-green-50 text-green-700 text-xs font-bold rounded-lg hover:bg-green-100 transition-colors">
+               提现
+            </button>
+         </div>
+      </div>
 
-    <!-- Withdraw Dialog -->
-    <Dialog v-model:visible="showWithdraw" modal header="收益提现" :style="{ width: '35rem' }">
-        <div class="space-y-6 pt-2">
-           
-           <div>
-              <label class="block text-sm font-bold text-slate-700 mb-3">提现方式</label>
-              <div class="grid grid-cols-1 gap-3">
-                 <label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all" :class="withdrawMethod === 'external' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
-                    <input type="radio" v-model="withdrawMethod" value="external" class="hidden">
-                    <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"><i class="pi pi-credit-card text-xl"></i></div>
-                    <div class="flex-1">
-                       <div class="font-bold text-slate-900">提现至银行卡/支付宝</div>
-                       <div class="text-xs text-slate-500" v-if="hasPayoutAccount">已绑定：招商银行 (8888)</div>
-                       <div class="text-xs text-orange-600 font-bold flex items-center gap-1" v-else>
-                          <i class="pi pi-exclamation-circle"></i> 未配置收款账户
-                          <router-link to="/creator/settings" class="underline hover:text-orange-800 ml-1">去配置</router-link>
-                       </div>
-                    </div>
-                    <i v-if="withdrawMethod === 'external'" class="pi pi-check-circle text-primary-600 text-xl"></i>
-                 </label>
+      <!-- Pending Orders (Quick Access) -->
+      <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+         <h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
+         <div class="flex gap-4">
+            <div
+               class="flex-1 p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors"
+               @click="$router.push('/creator/orders')">
+               <div class="flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i
+                        class="pi pi-refresh"></i></div>
+                  <div>
+                     <div class="font-bold text-slate-900">退款申请</div>
+                     <div class="text-xs text-orange-600">需要处理</div>
+                  </div>
+               </div>
+               <div class="text-2xl font-bold text-orange-700">2</div>
+            </div>
+            <div
+               class="flex-1 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors">
+               <div class="flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-full bg-blue-200 text-blue-700 flex items-center justify-center"><i
+                        class="pi pi-comments"></i></div>
+                  <div>
+                     <div class="font-bold text-slate-900">新私信</div>
+                     <div class="text-xs text-blue-600">粉丝互动</div>
+                  </div>
+               </div>
+               <div class="text-2xl font-bold text-blue-700">5</div>
+            </div>
+         </div>
+      </div>
 
-                 <label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all" :class="withdrawMethod === 'wallet' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
-                    <input type="radio" v-model="withdrawMethod" value="wallet" class="hidden">
-                    <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center"><i class="pi pi-wallet text-xl"></i></div>
-                    <div class="flex-1">
-                       <div class="font-bold text-slate-900">转入个人钱包余额</div>
-                       <div class="text-xs text-slate-500">实时到账，可用于平台消费</div>
-                    </div>
-                    <i v-if="withdrawMethod === 'wallet'" class="pi pi-check-circle text-primary-600 text-xl"></i>
-                 </label>
-              </div>
-           </div>
+      <!-- Withdraw Dialog -->
+      <Dialog v-model:visible="showWithdraw" modal header="收益提现" :style="{ width: '35rem' }">
+         <div class="space-y-6 pt-2">
 
-           <div>
-              <label class="block text-sm font-bold text-slate-700 mb-2">提现金额 (¥)</label>
-              <input type="number" placeholder="请输入金额" class="w-full h-12 px-4 border border-slate-200 rounded-lg text-lg font-bold outline-none focus:border-primary-500 transition-colors">
-              <div class="text-xs text-slate-400 mt-2 flex justify-between">
-                 <span>可提现收益: ¥ 8,920.50</span>
-                 <button class="text-primary-600 hover:underline">全部提现</button>
-              </div>
-           </div>
-        </div>
-        <template #footer>
-            <button @click="showWithdraw = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold">取消</button>
-            <button @click="handleWithdraw" class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 shadow-sm" :disabled="withdrawMethod === 'external' && !hasPayoutAccount" :class="{ 'opacity-50 cursor-not-allowed': withdrawMethod === 'external' && !hasPayoutAccount }">确认提现</button>
-        </template>
-    </Dialog>
+            <div>
+               <label class="block text-sm font-bold text-slate-700 mb-3">提现方式</label>
+               <div class="grid grid-cols-1 gap-3">
+                  <label
+                     class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all"
+                     :class="withdrawMethod === 'external' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
+                     <input type="radio" v-model="withdrawMethod" value="external" class="hidden">
+                     <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"><i
+                           class="pi pi-credit-card text-xl"></i></div>
+                     <div class="flex-1">
+                        <div class="font-bold text-slate-900">提现至银行卡/支付宝</div>
+                        <div class="text-xs text-slate-500" v-if="hasPayoutAccount">已绑定：招商银行 (8888)</div>
+                        <div class="text-xs text-orange-600 font-bold flex items-center gap-1" v-else>
+                           <i class="pi pi-exclamation-circle"></i> 未配置收款账户
+                           <router-link to="/creator/settings"
+                              class="underline hover:text-orange-800 ml-1">去配置</router-link>
+                        </div>
+                     </div>
+                     <i v-if="withdrawMethod === 'external'" class="pi pi-check-circle text-primary-600 text-xl"></i>
+                  </label>
 
-    <Toast />
-  </div>
+                  <label
+                     class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all"
+                     :class="withdrawMethod === 'wallet' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
+                     <input type="radio" v-model="withdrawMethod" value="wallet" class="hidden">
+                     <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center"><i
+                           class="pi pi-wallet text-xl"></i></div>
+                     <div class="flex-1">
+                        <div class="font-bold text-slate-900">转入个人钱包余额</div>
+                        <div class="text-xs text-slate-500">实时到账，可用于平台消费</div>
+                     </div>
+                     <i v-if="withdrawMethod === 'wallet'" class="pi pi-check-circle text-primary-600 text-xl"></i>
+                  </label>
+               </div>
+            </div>
+
+            <div>
+               <label class="block text-sm font-bold text-slate-700 mb-2">提现金额 (¥)</label>
+               <input type="number" placeholder="请输入金额"
+                  class="w-full h-12 px-4 border border-slate-200 rounded-lg text-lg font-bold outline-none focus:border-primary-500 transition-colors">
+               <div class="text-xs text-slate-400 mt-2 flex justify-between">
+                  <span>可提现收益: ¥ 8,920.50</span>
+                  <button class="text-primary-600 hover:underline">全部提现</button>
+               </div>
+            </div>
+         </div>
+         <template #footer>
+            <button @click="showWithdraw = false"
+               class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold">取消</button>
+            <button @click="handleWithdraw"
+               class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 shadow-sm"
+               :disabled="withdrawMethod === 'external' && !hasPayoutAccount"
+               :class="{ 'opacity-50 cursor-not-allowed': withdrawMethod === 'external' && !hasPayoutAccount }">确认提现</button>
+         </template>
+      </Dialog>
+
+      <Toast />
+   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import Dialog from 'primevue/dialog';
 import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
+import { ref } from 'vue';
 
 const toast = useToast();
 const showWithdraw = ref(false);
@@ -120,13 +141,13 @@ const withdrawMethod = ref('wallet');
 const hasPayoutAccount = ref(false); // Mock state
 
 const metrics = ref([
-    { label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
-    { label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
+   { label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
+   { label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
 ]);
 
 const handleWithdraw = () => {
-    showWithdraw.value = false;
-    const msg = withdrawMethod.value === 'wallet' ? '资金已转入您的个人钱包' : '提现申请已提交至银行处理';
-    toast.add({ severity: 'success', summary: '提现成功', detail: msg, life: 3000 });
+   showWithdraw.value = false;
+   const msg = withdrawMethod.value === 'wallet' ? '资金已转入您的个人钱包' : '提现申请已提交至银行处理';
+   toast.add({ severity: 'success', summary: '提现成功', detail: msg, life: 3000 });
 };
 </script>
\ No newline at end of file
diff --git a/frontend/portal/src/views/creator/SettingsView.vue b/frontend/portal/src/views/creator/SettingsView.vue
index 46be21a..7940b7e 100644
--- a/frontend/portal/src/views/creator/SettingsView.vue
+++ b/frontend/portal/src/views/creator/SettingsView.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="max-w-4xl mx-auto p-8">
+   <div>
       <h1 class="text-2xl font-bold text-slate-900 mb-8">频道设置</h1>
 
       <div class="space-y-8">
@@ -23,9 +23,11 @@
                <!-- Avatar & Name -->
                <div class="flex items-start gap-6">
                   <div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')">
-                     <div class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
+                     <div
+                        class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
                         <img :src="form.avatar" class="w-full h-full object-cover">
-                        <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <div
+                           class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <i class="pi pi-camera text-white text-2xl"></i>
                         </div>
                      </div>
@@ -33,11 +35,15 @@
                   <div class="flex-1 space-y-4">
                      <div>
                         <label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label>
-                        <input v-model="form.name" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="给您的频道起个名字">
+                        <input v-model="form.name" type="text"
+                           class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
+                           placeholder="给您的频道起个名字">
                      </div>
                      <div>
                         <label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label>
-                        <input v-model="form.bio" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="介绍一下您的频道特色...">
+                        <input v-model="form.bio" type="text"
+                           class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
+                           placeholder="介绍一下您的频道特色...">
                      </div>
                   </div>
                </div>
@@ -45,14 +51,19 @@
                <!-- Cover Image (Moved Here) -->
                <div>
                   <label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label>
-                  <div class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all" @click="triggerUpload('cover')">
+                  <div
+                     class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all"
+                     @click="triggerUpload('cover')">
                      <img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover">
-                     <div class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all" v-else>
+                     <div
+                        class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all"
+                        v-else>
                         <i class="pi pi-image text-3xl mb-2"></i>
                         <span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
                      </div>
                      <!-- Hover Overlay -->
-                     <div v-if="form.cover" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                     <div v-if="form.cover"
+                        class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                         <span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
                      </div>
                   </div>
@@ -61,12 +72,15 @@
                <!-- Intro Detail -->
                <div>
                   <label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label>
-                  <textarea v-model="form.description" rows="4" class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none" placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
+                  <textarea v-model="form.description" rows="4"
+                     class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none"
+                     placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
                </div>
 
                <!-- Save Button -->
                <div class="pt-6 border-t border-slate-100 flex justify-end">
-                  <button @click="saveSettings" class="px-8 py-3 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
+                  <button @click="saveSettings"
+                     class="px-8 py-3 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
                      <i class="pi pi-check"></i> 保存修改
                   </button>
                </div>
@@ -77,63 +91,79 @@
          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
             <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                <h2 class="text-lg font-bold text-slate-900">收款账户</h2>
-               <button @click="showAddAccount = true" class="text-sm font-bold text-primary-600 hover:text-primary-700 cursor-pointer flex items-center gap-1 px-3 py-1.5 rounded hover:bg-primary-50 transition-colors">
+               <button @click="showAddAccount = true"
+                  class="text-sm font-bold text-primary-600 hover:text-primary-700 cursor-pointer flex items-center gap-1 px-3 py-1.5 rounded hover:bg-primary-50 transition-colors">
                   <i class="pi pi-plus"></i> 添加账户
                </button>
             </div>
-            
+
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Mock Account Card -->
-               <div class="p-4 border border-slate-200 rounded-xl flex items-center gap-4 bg-white relative group hover:border-primary-200 transition-colors">
-                  <div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center"><i class="pi pi-briefcase"></i></div>
+               <div
+                  class="p-4 border border-slate-200 rounded-xl flex items-center gap-4 bg-white relative group hover:border-primary-200 transition-colors">
+                  <div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center"><i
+                        class="pi pi-briefcase"></i></div>
                   <div>
                      <div class="font-bold text-slate-900">招商银行</div>
                      <div class="text-sm text-slate-500">储蓄卡 (8888)</div>
                   </div>
-                  <button class="absolute top-4 right-4 text-slate-300 hover:text-red-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity p-2"><i class="pi pi-trash"></i></button>
+                  <button
+                     class="absolute top-4 right-4 text-slate-300 hover:text-red-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity p-2"><i
+                        class="pi pi-trash"></i></button>
                </div>
             </div>
          </div>
       </div>
 
       <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
-      
+
       <!-- Add Account Dialog -->
       <Dialog v-model:visible="showAddAccount" modal header="添加收款账户" :style="{ width: '25rem' }">
-          <div class="space-y-4">
-             <div>
-                <label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label>
-                <div class="flex gap-4">
-                   <label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
-                      <RadioButton v-model="newAccount.type" value="bank" />
-                      <span>银行卡</span>
-                   </label>
-                   <label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
-                      <RadioButton v-model="newAccount.type" value="alipay" />
-                      <span>支付宝</span>
-                   </label>
-                </div>
-             </div>
-             
-             <div v-if="newAccount.type === 'bank'">
-                <label class="block text-sm font-bold text-slate-700 mb-2">银行名称</label>
-                <input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="如：招商银行">
-             </div>
+         <div class="space-y-4">
+            <div>
+               <label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label>
+               <div class="flex gap-4">
+                  <label
+                     class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
+                     <RadioButton v-model="newAccount.type" value="bank" />
+                     <span>银行卡</span>
+                  </label>
+                  <label
+                     class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
+                     <RadioButton v-model="newAccount.type" value="alipay" />
+                     <span>支付宝</span>
+                  </label>
+               </div>
+            </div>
 
-             <div>
-                <label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' : '支付宝账号' }}</label>
-                <input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="请输入账号">
-             </div>
+            <div v-if="newAccount.type === 'bank'">
+               <label class="block text-sm font-bold text-slate-700 mb-2">银行名称</label>
+               <input type="text"
+                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
+                  placeholder="如：招商银行">
+            </div>
 
-             <div>
-                <label class="block text-sm font-bold text-slate-700 mb-2">真实姓名</label>
-                <input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="需与实名认证一致">
-             </div>
-          </div>
-          <template #footer>
-              <button @click="showAddAccount = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold cursor-pointer">取消</button>
-              <button @click="handleAddAccount" class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 cursor-pointer shadow-sm">保存</button>
-          </template>
+            <div>
+               <label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' :
+                  '支付宝账号' }}</label>
+               <input type="text"
+                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
+                  placeholder="请输入账号">
+            </div>
+
+            <div>
+               <label class="block text-sm font-bold text-slate-700 mb-2">真实姓名</label>
+               <input type="text"
+                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
+                  placeholder="需与实名认证一致">
+            </div>
+         </div>
+         <template #footer>
+            <button @click="showAddAccount = false"
+               class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold cursor-pointer">取消</button>
+            <button @click="handleAddAccount"
+               class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 cursor-pointer shadow-sm">保存</button>
+         </template>
       </Dialog>
 
       <Toast />
@@ -153,10 +183,10 @@ const currentUploadType = ref('');
 const showAddAccount = ref(false);
 
 const newAccount = reactive({
-    type: 'bank',
-    name: '',
-    account: '',
-    realname: ''
+   type: 'bank',
+   name: '',
+   account: '',
+   realname: ''
 });
 
 const form = reactive({
@@ -188,8 +218,8 @@ const handleFileChange = (event) => {
 };
 
 const handleAddAccount = () => {
-    showAddAccount.value = false;
-    toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
+   showAddAccount.value = false;
+   toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
 };
 
 const saveSettings = () => {