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/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',