From 6b71ac47d180ad449d1d1da264bb48d353e7a80e Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 10:25:26 +0800
Subject: [PATCH] feat(portal): complete user center pages and refine
 interactive feedback

---
 docs/design/portal/GLOBAL.md                  |   6 +
 frontend/portal/src/views/HomeView.vue        |  10 +-
 .../portal/src/views/order/DetailView.vue     |   6 +-
 .../portal/src/views/user/DashboardView.vue   |  18 +--
 .../portal/src/views/user/LibraryView.vue     | 133 +++++++++++++++++-
 frontend/portal/src/views/user/OrdersView.vue |  26 ++--
 frontend/portal/src/views/user/WalletView.vue |  12 +-
 7 files changed, 173 insertions(+), 38 deletions(-)

diff --git a/docs/design/portal/GLOBAL.md b/docs/design/portal/GLOBAL.md
index 9307fe3..9608e8d 100644
--- a/docs/design/portal/GLOBAL.md
+++ b/docs/design/portal/GLOBAL.md
@@ -106,6 +106,12 @@
 - **样式**: `text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2`。
 - **Label**: 必须显示 Label，字号 `text-base` 或 `text-lg`，不建议仅用 placeholder。
 
+### 4.5 交互反馈 (Interactive Feedback)
+- **鼠标手势**: 所有可点击元素（卡片、按钮、链接、自定义交互区）必须明确指定 `cursor: pointer`。
+- **视觉反馈**: 
+  - Hover 时应伴随背景色微调、阴影加深或缩放效果 (`transition-all`)。
+  - Active 时应有轻微的按下缩放效果 (`active:scale-[0.98]`)，增强操作确认感。
+
 ---
 
 ## 5. 响应式与可访问性 (Responsive & Accessibility)
diff --git a/frontend/portal/src/views/HomeView.vue b/frontend/portal/src/views/HomeView.vue
index 0d54a25..682a6fd 100644
--- a/frontend/portal/src/views/HomeView.vue
+++ b/frontend/portal/src/views/HomeView.vue
@@ -80,7 +80,7 @@
           </router-link>
 
           <!-- Card Variant 2: No Image (Text Only) -->
-          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
+          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
              <div class="flex items-center gap-2 mb-2">
                 <span class="px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-600 border border-green-100">限免</span>
                 <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[昆曲]</span>
@@ -102,17 +102,17 @@
           </div>
 
           <!-- Card Variant 3: 3 Images -->
-          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
+          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
              <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">[图集] 2024 新年京剧晚会后台探班：名角云集</h3>
              <div class="grid grid-cols-3 gap-2 mb-4">
                 <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
-                   <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
+                   <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                 </div>
                 <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
-                   <img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
+                   <img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                 </div>
                 <div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100 relative">
-                   <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
+                   <img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">+9</div>
                 </div>
              </div>
diff --git a/frontend/portal/src/views/order/DetailView.vue b/frontend/portal/src/views/order/DetailView.vue
index 700c062..31e761d 100644
--- a/frontend/portal/src/views/order/DetailView.vue
+++ b/frontend/portal/src/views/order/DetailView.vue
@@ -2,7 +2,7 @@
   <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
     <!-- Header -->
     <div class="flex items-center gap-4 mb-8">
-       <button @click="$router.back()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors">
+       <button @click="$router.back()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors cursor-pointer active:scale-90">
           <i class="pi pi-arrow-left text-lg"></i>
        </button>
        <div>
@@ -107,7 +107,7 @@
                 <div>
                    <h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">订单信息</h3>
                    <div class="space-y-3 text-slate-600">
-                      <p>订单编号: <span class="text-slate-900 select-all">{{ order.id }}</span> <button class="text-primary-600 ml-2 hover:underline font-medium">复制</button></p>
+                      <p>订单编号: <span class="text-slate-900 select-all">{{ order.id }}</span> <button class="text-primary-600 ml-2 hover:underline font-medium cursor-pointer">复制</button></p>
                       <p>创建时间: {{ order.createTime }}</p>
                       <p v-if="order.payTime">付款时间: {{ order.payTime }}</p>
                    </div>
@@ -130,7 +130,7 @@
                       <img :src="order.tenantAvatar" class="w-12 h-12 rounded-full">
                       <div>
                          <div class="font-bold text-slate-900">{{ order.tenantName }}</div>
-                         <button class="text-primary-600 text-sm mt-1 hover:underline">联系商家</button>
+                         <button class="text-primary-600 text-sm mt-1 hover:underline cursor-pointer">联系商家</button>
                       </div>
                    </div>
                 </div>
diff --git a/frontend/portal/src/views/user/DashboardView.vue b/frontend/portal/src/views/user/DashboardView.vue
index 719c721..5a94390 100644
--- a/frontend/portal/src/views/user/DashboardView.vue
+++ b/frontend/portal/src/views/user/DashboardView.vue
@@ -10,19 +10,21 @@
           </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">
-          <div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl"><i class="pi pi-star"></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-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">
-          <div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl"><i class="pi pi-ticket"></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>
 
@@ -30,16 +32,16 @@
     <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">查看全部 <i class="pi pi-angle-right"></i></router-link>
+          <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 class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-slate-300 transition-colors cursor-pointer">
+          <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">
+                <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">《霸王别姬》全本实录珍藏版</h3>
+                <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">
diff --git a/frontend/portal/src/views/user/LibraryView.vue b/frontend/portal/src/views/user/LibraryView.vue
index 2858a13..e7b10b0 100644
--- a/frontend/portal/src/views/user/LibraryView.vue
+++ b/frontend/portal/src/views/user/LibraryView.vue
@@ -1,6 +1,133 @@
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-bold mb-4">My Library</h1>
-    <p class="text-slate-400">(Purchased content)</p>
+  <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] 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">
+          <select class="h-10 pl-3 pr-8 rounded-lg border border-slate-200 bg-white text-sm focus:border-primary-500 focus:outline-none cursor-pointer hover:border-primary-300 transition-colors">
+             <option>全部类型</option>
+             <option>视频</option>
+             <option>音频</option>
+             <option>图文专栏</option>
+          </select>
+          <div class="relative">
+             <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
+             <input type="text" placeholder="搜索已购内容..." class="h-10 pl-9 pr-4 rounded-lg border border-slate-200 text-sm focus:border-primary-500 focus:outline-none w-48 transition-all focus:w-64">
+          </div>
+       </div>
+    </div>
+
+    <!-- Content List (Vertical Stack) -->
+    <div class="space-y-6">
+       <div 
+         v-for="item in libraryItems" 
+         :key="item.id" 
+         @click="item.status !== 'offline' ? $router.push(`/contents/${item.id}`) : null"
+         class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 flex flex-col sm:flex-row"
+         :class="item.status !== 'offline' ? 'cursor-pointer active:scale-[0.99]' : 'opacity-75 cursor-not-allowed'"
+       >
+          
+          <!-- Cover -->
+          <div class="w-full sm:w-64 aspect-video bg-slate-100 relative overflow-hidden flex-shrink-0">
+             <img :src="item.cover" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" :class="{ 'grayscale opacity-70': item.status === 'expired' || item.status === 'offline' }">
+             
+             <!-- Type Icon -->
+             <div class="absolute bottom-2 left-2 w-8 h-8 bg-black/60 rounded-full flex items-center justify-center text-white backdrop-blur-sm">
+                <i class="pi" :class="getTypeIcon(item.type)"></i>
+             </div>
+          </div>
+
+          <!-- Info -->
+          <div class="p-6 flex flex-col flex-1 min-w-0">
+             <div class="flex items-start justify-between gap-4 mb-2">
+                <h3 class="font-bold text-slate-900 text-lg sm:text-xl line-clamp-2 group-hover:text-primary-600 transition-colors">{{ item.title }}</h3>
+                <!-- Status Badges (Moved here for list layout) -->
+                <span v-if="item.status === 'active'" class="flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-bold rounded">永久有效</span>
+                <span v-else-if="item.status === 'expiring'" class="flex-shrink-0 px-2 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded">剩余 3 天</span>
+                <span v-else-if="item.status === 'expired'" class="flex-shrink-0 px-2 py-1 bg-slate-100 text-slate-500 text-xs font-bold rounded">已过期</span>
+                <span v-else-if="item.status === 'offline'" class="flex-shrink-0 px-2 py-1 bg-red-100 text-red-600 text-xs font-bold rounded">已下架</span>
+             </div>
+
+             <div class="flex items-center gap-3 text-sm text-slate-500 mb-4">
+                <img :src="item.tenantAvatar" class="w-6 h-6 rounded-full">
+                <span class="font-medium text-slate-700">{{ item.tenantName }}</span>
+                <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
+                <span>{{ item.purchaseDate }} 购买</span>
+             </div>
+
+             <!-- Action -->
+             <div class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-end">
+                <button v-if="item.status === 'active' || item.status === 'expiring'" class="px-6 py-2 bg-primary-600 text-white text-base font-bold rounded-lg hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200">
+                   立即阅读
+                </button>
+                <button v-else class="px-6 py-2 bg-slate-100 text-slate-400 text-base font-bold rounded-lg cursor-not-allowed">
+                   不可查看
+                </button>
+             </div>
+          </div>
+       </div>
+    </div>
+
+    <!-- Empty State (Hidden) -->
+    <!-- <div class="flex flex-col items-center justify-center py-20">
+       <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-4"><i class="pi pi-book text-3xl text-slate-300"></i></div>
+       <p class="text-slate-500">暂无已购内容</p>
+       <button class="mt-4 text-primary-600 font-medium hover:underline">去发现好内容</button>
+    </div> -->
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+const getTypeIcon = (type) => {
+    switch(type) {
+        case 'video': return 'pi-video';
+        case 'audio': return 'pi-volume-up';
+        default: return 'pi-file';
+    }
+};
+
+// Mock Data
+const libraryItems = ref([
+    {
+        id: 1,
+        title: '《锁麟囊》程派艺术解析专栏',
+        cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
+        tenantName: '梅派传人小林',
+        tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
+        purchaseDate: '2025-12-20',
+        type: 'article',
+        status: 'active'
+    },
+    {
+        id: 2,
+        title: '京剧打击乐基础教程 (视频课)',
+        cover: 'https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
+        tenantName: '戏曲学院官方',
+        tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=School',
+        purchaseDate: '2025-11-15',
+        type: 'video',
+        status: 'expiring'
+    },
+    {
+        id: 3,
+        title: '【已过期】2024 新年戏曲晚会直播回放',
+        cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
+        tenantName: 'CCTV 戏曲',
+        tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=TV',
+        purchaseDate: '2025-01-01',
+        type: 'video',
+        status: 'expired'
+    },
+    {
+        id: 4,
+        title: '【已下架】某某名家访谈录',
+        cover: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
+        tenantName: '未知用户',
+        tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Unknown',
+        purchaseDate: '2024-12-10',
+        type: 'audio',
+        status: 'offline'
+    }
+]);
+</script>
\ No newline at end of file
diff --git a/frontend/portal/src/views/user/OrdersView.vue b/frontend/portal/src/views/user/OrdersView.vue
index 28ca038..c51c24e 100644
--- a/frontend/portal/src/views/user/OrdersView.vue
+++ b/frontend/portal/src/views/user/OrdersView.vue
@@ -8,7 +8,7 @@
           v-for="tab in tabs" 
           :key="tab.value"
           @click="currentTab = tab.value"
-          class="pb-4 text-sm font-medium transition-colors border-b-2"
+          class="pb-4 text-sm font-medium transition-colors border-b-2 cursor-pointer focus:outline-none"
           :class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'"
         >
           {{ tab.label }}
@@ -22,33 +22,33 @@
       <div class="flex justify-end mb-4">
          <div class="relative w-64">
             <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
-            <input type="text" placeholder="搜索订单号或商品..." class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-primary-500">
+            <input type="text" placeholder="搜索订单号或商品..." class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-primary-500 transition-colors">
          </div>
       </div>
 
       <!-- List Items -->
       <div v-if="filteredOrders.length > 0" class="space-y-6">
-        <div v-for="order in filteredOrders" :key="order.id" class="border border-slate-200 rounded-lg overflow-hidden hover:border-slate-300 transition-colors">
+        <div v-for="order in filteredOrders" :key="order.id" class="border border-slate-200 rounded-lg overflow-hidden hover:border-slate-300 hover:shadow-sm transition-all group">
           <!-- Order Header -->
           <div class="bg-slate-50 px-4 py-3 flex items-center justify-between text-sm text-slate-500">
              <div class="flex items-center gap-4">
                 <span class="font-medium text-slate-900">{{ order.date }}</span>
-                <span>订单号: {{ order.id }}</span>
-                <span>{{ order.tenantName }}</span>
+                <span class="select-all">订单号: {{ order.id }}</span>
+                <span class="hover:text-primary-600 cursor-pointer transition-colors">{{ order.tenantName }} <i class="pi pi-angle-right text-xs"></i></span>
              </div>
              <div class="font-bold" :class="statusColor(order.status)">{{ statusText(order.status) }}</div>
           </div>
 
           <!-- Order Body -->
           <div class="p-4 flex flex-col sm:flex-row gap-6">
-             <!-- Product Info -->
-             <div class="flex-1 flex gap-4">
-                <div class="w-24 h-16 bg-slate-100 rounded object-cover flex-shrink-0 relative overflow-hidden">
+             <!-- Product Info (Clickable Area) -->
+             <div class="flex-1 flex gap-4 cursor-pointer" @click="$router.push(`/me/orders/${order.id}`)">
+                <div class="w-24 h-16 bg-slate-100 rounded object-cover flex-shrink-0 relative overflow-hidden group-hover:opacity-90 transition-opacity">
                    <img :src="order.cover" class="w-full h-full object-cover">
                    <div v-if="order.type === 'video'" class="absolute inset-0 flex items-center justify-center bg-black/20 text-white"><i class="pi pi-play-circle"></i></div>
                 </div>
                 <div>
-                   <h3 class="font-bold text-slate-900 line-clamp-1 mb-1">{{ order.title }}</h3>
+                   <h3 class="font-bold text-slate-900 line-clamp-1 mb-1 group-hover:text-primary-600 transition-colors">{{ order.title }}</h3>
                    <div class="text-xs text-slate-500 mb-2">{{ order.typeLabel }}</div>
                    <div v-if="order.isVirtual" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-600">虚拟发货</div>
                 </div>
@@ -61,10 +61,10 @@
                    <div class="text-xs text-slate-400">在线支付</div>
                 </div>
                 <div class="flex flex-col gap-2">
-                   <button v-if="order.status === 'unpaid'" class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">去支付</button>
-                   <router-link :to="`/me/orders/${order.id}`" v-if="order.status === 'paid' || order.status === 'completed'" class="px-4 py-1.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 inline-block text-center">查看详情</router-link>
-                   <button v-if="order.status === 'completed'" class="px-4 py-1.5 text-primary-600 text-sm hover:underline">申请售后</button>
-                   <button v-if="order.status === 'unpaid'" class="text-xs text-slate-400 hover:text-slate-600">取消订单</button>
+                   <button v-if="order.status === 'unpaid'" class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm active:scale-95 cursor-pointer">去支付</button>
+                   <router-link :to="`/me/orders/${order.id}`" v-if="order.status === 'paid' || order.status === 'completed'" class="px-4 py-1.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 hover:border-slate-400 transition-colors inline-block text-center cursor-pointer active:scale-95">查看详情</router-link>
+                   <button v-if="order.status === 'completed'" class="px-4 py-1.5 text-primary-600 text-sm hover:underline cursor-pointer">申请售后</button>
+                   <button v-if="order.status === 'unpaid'" class="text-xs text-slate-400 hover:text-slate-600 cursor-pointer">取消订单</button>
                 </div>
              </div>
           </div>
diff --git a/frontend/portal/src/views/user/WalletView.vue b/frontend/portal/src/views/user/WalletView.vue
index 56dd7ac..05adbd2 100644
--- a/frontend/portal/src/views/user/WalletView.vue
+++ b/frontend/portal/src/views/user/WalletView.vue
@@ -12,7 +12,7 @@
              <div class="text-blue-100 text-sm font-medium mb-1">账户余额 (元)</div>
              <div class="text-5xl font-bold font-mono">128.50</div>
           </div>
-          <button @click="showRecharge = !showRecharge" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95">
+          <button @click="showRecharge = !showRecharge" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95 cursor-pointer">
              立即充值
           </button>
        </div>
@@ -26,7 +26,7 @@
             v-for="amount in [10, 30, 50, 100, 200, 500]" 
             :key="amount"
             @click="selectedAmount = amount; customAmount = ''"
-            class="h-14 rounded-lg border-2 font-bold text-lg transition-all"
+            class="h-14 rounded-lg border-2 font-bold text-lg transition-all cursor-pointer active:scale-95"
             :class="selectedAmount === amount ? 'border-blue-600 bg-blue-50 text-blue-600' : 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'"
           >
             {{ amount }}元
@@ -37,22 +37,22 @@
                @focus="selectedAmount = null"
                type="number" 
                placeholder="自定义金额" 
-               class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold"
+               class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold transition-colors"
              >
           </div>
        </div>
 
        <h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
        <div class="flex gap-4 mb-8">
-          <button class="flex items-center gap-2 px-6 py-3 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium">
+          <button class="flex items-center gap-2 px-6 py-3 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium cursor-pointer active:scale-95 transition-transform">
              <i class="pi pi-wechat text-xl text-green-600"></i> 微信支付
           </button>
-          <button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white font-medium">
+          <button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white hover:border-slate-300 font-medium cursor-pointer active:scale-95 transition-all">
              <i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
           </button>
        </div>
 
-       <button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">
+       <button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 cursor-pointer active:scale-[0.98]">
           确认支付 ¥ {{ displayAmount }}
        </button>
     </div>