refactor: enhance HomeView layout and styling; improve PaymentView with new payment methods and QR code handling; clean up SecurityView by removing unused sections

frontend/portal/src/views/user/DashboardView.vue

@@ -1,74 +1,93 @@
 <template>
-  <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-       <!-- Stat Cards -->
-       <router-link to="/me/wallet" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer">
-          <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i class="pi pi-wallet"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">账户余额</div>
-             <div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </router-link>
-       <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
-          <div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-star"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">我的积分</div>
-             <div class="text-2xl font-bold text-slate-900">2,450</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </div>
-       <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
-          <div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-ticket"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">优惠券</div>
-             <div class="text-2xl font-bold text-slate-900">3 张</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </div>
-    </div>
+   <div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+         <!-- Stat Cards -->
+         <router-link to="/me/wallet"
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer">
+            <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i
+                  class="pi pi-wallet"></i></div>
+            <div>
+               <div class="text-sm text-slate-500">账户余额</div>
+               <div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </router-link>
+         <div
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
+            <div
+               class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110">
+               <i class="pi pi-star"></i>
+            </div>
+            <div>
+               <div class="text-sm text-slate-500">我的积分</div>
+               <div class="text-2xl font-bold text-slate-900">2,450</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </div>
+         <div
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
+            <div
+               class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110">
+               <i class="pi pi-ticket"></i>
+            </div>
+            <div>
+               <div class="text-sm text-slate-500">优惠券</div>
+               <div class="text-2xl font-bold text-slate-900">3 张</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </div>
+      </div>
 
-    <!-- Recent Orders -->
-    <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-       <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl font-bold text-slate-900">最近订单</h2>
-          <router-link to="/me/orders" class="text-sm text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors">查看全部 <i class="pi pi-angle-right"></i></router-link>
-       </div>
-       
-       <div class="space-y-4">
-          <div @click="$router.push('/me/orders/82934712')" class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-primary-100 hover:shadow-sm transition-all cursor-pointer active:scale-[0.99] group">
-             <div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
-                <img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
-             </div>
-             <div class="flex-1 min-w-0">
-                <h3 class="font-bold text-slate-900 truncate group-hover:text-primary-600 transition-colors">《霸王别姬》全本实录珍藏版</h3>
-                <div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
-             </div>
-             <div class="text-right">
-                <div class="font-bold text-slate-900">¥ 9.90</div>
-                <div class="text-sm text-green-600 mt-1">交易成功</div>
-             </div>
-          </div>
-          <!-- More items... -->
-       </div>
-    </div>
+      <!-- Recent Orders -->
+      <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+         <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-slate-900">最近订单</h2>
+            <router-link to="/me/orders"
+               class="text-sm text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors">查看全部
+               <i class="pi pi-angle-right"></i></router-link>
+         </div>
 
-    <!-- Recent Views -->
-    <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-       <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
-          <button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
-       </div>
-       <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-          <div v-for="i in 5" :key="i" class="group cursor-pointer">
-             <div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
-                <img :src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
-                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
-             </div>
-             <h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">京剧名家谈戏曲传承与创新发展的思考</h4>
-             <div class="text-xs text-slate-400 mt-1">10分钟前</div>
-          </div>
-       </div>
-    </div>
-  </div>
+         <div class="space-y-4">
+            <div @click="$router.push('/me/orders/82934712')"
+               class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-primary-100 hover:shadow-sm transition-all cursor-pointer active:scale-[0.99] group">
+               <div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
+                  <img
+                     src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60"
+                     class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
+               </div>
+               <div class="flex-1 min-w-0">
+                  <h3 class="font-bold text-slate-900 truncate group-hover:text-primary-600 transition-colors">
+                     《霸王别姬》全本实录珍藏版</h3>
+                  <div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
+               </div>
+               <div class="text-right">
+                  <div class="font-bold text-slate-900">¥ 9.90</div>
+                  <div class="text-sm text-green-600 mt-1">交易成功</div>
+               </div>
+            </div>
+            <!-- More items... -->
+         </div>
+      </div>
+
+      <!-- Recent Views -->
+      <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+         <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
+            <button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
+         </div>
+         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <div v-for="i in 5" :key="i" class="group cursor-pointer">
+               <div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
+                  <img
+                     :src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`"
+                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                  <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
+               </div>
+               <h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">
+                  京剧名家谈戏曲传承与创新发展的思考</h4>
+               <div class="text-xs text-slate-400 mt-1">10分钟前</div>
+            </div>
+         </div>
+      </div>
+   </div>
 </template>

frontend/portal/src/views/user/SecurityView.vue

@@ -15,18 +15,6 @@
 
     <!-- Security Items -->
     <div class="space-y-6">
-       <!-- Password -->
-       <div class="flex items-center justify-between py-4 border-b border-slate-50">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-lock text-xl text-slate-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">登录密码</div>
-                <div class="text-sm text-slate-500">已设置，建议定期更换</div>
-             </div>
-          </div>
-          <button @click="openVerify('password')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">修改</button>
-       </div>
-
        <!-- Phone -->
        <div class="flex items-center justify-between py-4 border-b border-slate-50">
           <div class="flex items-center gap-4">
@@ -39,18 +27,6 @@
           <button @click="openVerify('phone')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">更换</button>
        </div>
 
-       <!-- Email -->
-       <div class="flex items-center justify-between py-4 border-b border-slate-50">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-envelope text-xl text-slate-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">邮箱绑定</div>
-                <div class="text-sm text-slate-500">未绑定</div>
-             </div>
-          </div>
-          <button @click="openVerify('email')" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">立即绑定</button>
-       </div>
-
        <!-- Real-name Auth -->
        <div class="flex items-center justify-between py-4 border-b border-slate-50">
           <div class="flex items-center gap-4">
@@ -62,18 +38,6 @@
           </div>
           <button @click="$router.push('/creator/apply')" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">去认证</button>
        </div>
-
-       <!-- Delete Account -->
-       <div class="flex items-center justify-between py-4 pt-8">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-exclamation-circle text-xl text-red-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">注销账号</div>
-                <div class="text-sm text-slate-500">注销后账号及资产将无法找回，请谨慎操作</div>
-             </div>
-          </div>
-          <button @click="confirmDelete" class="px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 text-sm font-medium transition-colors">注销</button>
-       </div>
     </div>
 
     <!-- Verification Dialog -->