feat(auth): implement OTP login flow with toast notifications

feat(content): enhance detail view with dynamic content and comments
feat(order): add polling for payment status in the payment view
feat(user): update dashboard to display wallet and recent orders
feat(user): improve orders view with dynamic order fetching and status mapping
feat(api): create API modules for auth, content, order, user, and common functionalities
refactor(request): implement a centralized request utility for API calls

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

@@ -8,7 +8,7 @@
                   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 class="text-2xl font-bold text-slate-900">¥ {{ wallet.balance }}</div>
             </div>
             <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
          </router-link>
@@ -20,7 +20,7 @@
             </div>
             <div>
                <div class="text-sm text-slate-500">我的积分</div>
-               <div class="text-2xl font-bold text-slate-900">2,450</div>
+               <div class="text-2xl font-bold text-slate-900">{{ wallet.points }}</div>
             </div>
             <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
          </div>
@@ -32,7 +32,7 @@
             </div>
             <div>
                <div class="text-sm text-slate-500">优惠券</div>
-               <div class="text-2xl font-bold text-slate-900">3 张</div>
+               <div class="text-2xl font-bold text-slate-900">{{ couponCount }} 张</div>
             </div>
             <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
          </div>
@@ -48,46 +48,67 @@
          </div>
 
          <div class="space-y-4">
-            <div @click="$router.push('/me/orders/82934712')"
+            <div v-for="order in recentOrders" :key="order.id" @click="$router.push(`/me/orders/${order.id}`)"
                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"
+                  <img v-if="order.items && order.items.length > 0"
+                     :src="order.items[0].cover"
                      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>
+                     {{ order.items && order.items.length > 0 ? order.items[0].title : '未知商品' }}</h3>
+                  <div class="text-sm text-slate-500 mt-1">{{ order.create_time }} · 订单号: {{ order.id }}</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 class="font-bold text-slate-900">¥ {{ order.amount }}</div>
+                  <div class="text-sm text-green-600 mt-1">{{ order.status }}</div>
                </div>
             </div>
-            <!-- More items... -->
+            <div v-if="recentOrders.length === 0" class="text-center text-slate-400 py-4">暂无订单</div>
          </div>
       </div>
 
-      <!-- Recent Views -->
+      <!-- Recent Views (Mock) -->
       <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 class="text-center text-slate-400 col-span-full py-8">暂无浏览记录</div>
          </div>
       </div>
    </div>
 </template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { userApi } from '../../api/user';
+
+const wallet = ref({ balance: 0, points: 0 });
+const couponCount = ref(0);
+const recentOrders = ref([]);
+
+const fetchData = async () => {
+    try {
+        const w = await userApi.getWallet();
+        wallet.value.balance = w.balance || 0;
+        
+        const u = await userApi.getMe();
+        wallet.value.points = u.points || 0;
+        
+        const c = await userApi.getCoupons('unused');
+        couponCount.value = c.length;
+        
+        const o = await userApi.getOrders('all');
+        recentOrders.value = (o || []).slice(0, 3);
+    } catch (e) {
+        console.error(e);
+    }
+};
+
+onMounted(() => {
+    fetchData();
+});
+</script>

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

@@ -83,65 +83,50 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { userApi } from '../../api/user';
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const currentTab = ref('all');
 const tabs = [
   { label: '全部订单', value: 'all' },
-  { label: '待支付', value: 'unpaid' },
-  { label: '已完成', value: 'completed' },
-  { label: '退款/售后', value: 'refund' }
+  { label: '待支付', value: 'created' }, // Backend uses 'created' for unpaid? Check consts.
+  // Backend OrderStatusCreated = "created". OrderStatusPaid = "paid".
+  // So 'unpaid' in UI should map to 'created' in backend?
+  // Let's check `consts.gen.go`.
+  { label: '已完成', value: 'paid' },
+  { label: '退款/售后', value: 'refunded' } // or 'refunding'
 ];
 
-// Mock Data
-const orders = ref([
-  {
-    id: '82934712',
-    date: '2025-12-24 14:30',
-    tenantName: '梅派传人小林',
-    cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
-    title: '《霸王别姬》全本实录珍藏版',
-    type: 'video',
-    typeLabel: '戏曲视频',
-    isVirtual: true,
-    amount: '9.90',
-    status: 'completed'
-  },
-  {
-    id: '82934713',
-    date: '2025-12-23 09:15',
-    tenantName: '戏曲周边商城',
-    cover: 'https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
-    title: '京剧脸谱纪念书签 (一套4张)',
-    type: 'product',
-    typeLabel: '实体商品',
-    isVirtual: false,
-    amount: '45.00',
-    status: 'unpaid'
-  },
-  {
-    id: '82934711',
-    date: '2025-12-20 18:20',
-    tenantName: '豫剧李大师',
-    cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
-    title: '豫剧唱腔发音技巧专栏',
-    type: 'article',
-    typeLabel: '付费专栏',
-    isVirtual: true,
-    amount: '99.00',
-    status: 'refunded' // or refunding
-  }
-]);
+const orders = ref([]);
 
-const filteredOrders = computed(() => {
-  if (currentTab.value === 'all') return orders.value;
-  if (currentTab.value === 'refund') return orders.value.filter(o => ['refunded', 'refunding'].includes(o.status));
-  return orders.value.filter(o => o.status === currentTab.value);
+const fetchOrders = async () => {
+  try {
+    let status = currentTab.value;
+    // Map UI tab to Backend Status if needed
+    // Assuming backend accepts 'all', 'created', 'paid', 'refunded'.
+    const res = await userApi.getOrders(status);
+    orders.value = res || [];
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+onMounted(() => {
+  fetchOrders();
 });
 
+watch(currentTab, () => {
+  fetchOrders();
+});
+
+// Use orders directly (filtered by backend)
+const filteredOrders = computed(() => orders.value);
+
 const statusText = (status) => {
   const map = {
-    unpaid: '待支付',
+    created: '待支付',
     paid: '已支付',
     completed: '交易成功',
     refunding: '退款中',
@@ -153,7 +138,7 @@ const statusText = (status) => {
 
 const statusColor = (status) => {
   const map = {
-    unpaid: 'text-orange-600',
+    created: 'text-orange-600',
     paid: 'text-blue-600',
     completed: 'text-green-600',
     refunding: 'text-purple-600',