feat: 添加用户购买作品数量统计功能

frontend/admin/src/pages/UserDetail.vue

@@ -3,8 +3,6 @@ import { userService } from '@/api/userService';
 import { formatDate } from '@/utils/date';
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
-import Column from 'primevue/column';
-import DataTable from 'primevue/datatable';
 import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -13,12 +11,6 @@ const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
 const user = ref(null);
-const userArticles = ref([]);
-const totalArticles = ref(0);
-const lazyParams = ref({
-    page: 1,
-    limit: 10
-});
 
 const fetchUserDetail = async () => {
     loading.value = true;
@@ -32,42 +24,15 @@ const fetchUserDetail = async () => {
     }
 };
 
-const fetchUserArticles = async () => {
-    try {
-        const response = await userService.getUserArticles(
-            route.params.id,
-            lazyParams.value.page,
-            lazyParams.value.limit
-        );
-        userArticles.value = response.data.items;
-        totalArticles.value = response.data.total;
-    } catch (error) {
-        console.error('Failed to fetch user articles:', error);
-    }
-};
-
 const handleBack = () => {
     router.push('/users');
 };
 
-const onPage = (event) => {
-    lazyParams.value = {
-        page: event.page + 1,
-        limit: event.rows
-    };
-    fetchUserArticles();
-};
-
 onMounted(() => {
     fetchUserDetail();
-    fetchUserArticles();
 });
 
 
-
-const formatPrice = (price) => {
-    return (price / 100).toFixed(2);
-};
 </script>
 
 <template>
@@ -121,25 +86,6 @@ const formatPrice = (price) => {
                 </div>
             </div>
 
-            <!-- 用户购买的曲谱列表 -->
-            <div class="card">
-                <h3 class="text-xl font-semibold mb-4">购买的曲谱</h3>
-                <DataTable :value="userArticles" stripedRows class="p-datatable-sm" responsiveLayout="scroll"
-                    :lazy="true" :totalRecords="totalArticles" :rows="lazyParams.limit" :loading="loading"
-                    @page="onPage" paginator :rows-per-page-options="[10, 20, 50]">
-                    <Column field="title" header="标题"></Column>
-                    <Column field="price" header="价格">
-                        <template #body="{ data }">
-                            &yen; {{ formatPrice(data.price) }}
-                        </template>
-                    </Column>
-                    <Column field="bought_at" header="购买时间">
-                        <template #body="{ data }">
-                            {{ formatDate(data.bought_at) }}
-                        </template>
-                    </Column>
-                </DataTable>
-            </div>
         </div>
     </div>
 </template>

frontend/admin/src/pages/UserPage.vue

@@ -42,6 +42,14 @@ const phoneSaving = ref(false);
 const phoneTargetUser = ref(null);
 const phoneInput = ref('');
 
+const articlesDialogVisible = ref(false);
+const articlesLoading = ref(false);
+const articlesUser = ref(null);
+const articlesItems = ref([]);
+const articlesFirst = ref(0);
+const articlesRows = ref(10);
+const articlesTotal = ref(0);
+
 const fetchUsers = async () => {
     loading.value = true;
     try {
@@ -114,6 +122,47 @@ const openPhoneDialog = (user) => {
 
 const normalizePhone = (v) => v.toString().replace(/\D/g, '').slice(0, 11);
 
+const formatMoney = (cents) => `¥${(cents / 100).toFixed(2)}`;
+
+const formatBoughtPrice = (priceCents) => {
+    if (priceCents < 0) return '赠送';
+    return formatMoney(priceCents);
+};
+
+const fetchUserArticles = async () => {
+    if (!articlesUser.value) return;
+    articlesLoading.value = true;
+    try {
+        const currentPage = (articlesFirst.value / articlesRows.value) + 1;
+        const response = await userService.getUserArticles(
+            articlesUser.value.id,
+            currentPage,
+            articlesRows.value
+        );
+        articlesItems.value = response.data.items || [];
+        articlesTotal.value = response.data.total || 0;
+    } catch (error) {
+        console.error('Failed to fetch user articles:', error);
+        toast.add({ severity: 'error', summary: '错误', detail: '加载购买作品失败', life: 3000 });
+    } finally {
+        articlesLoading.value = false;
+    }
+};
+
+const openUserArticles = async (user) => {
+    if (!user || !user.bought_count || user.bought_count <= 0) return;
+    articlesUser.value = user;
+    articlesFirst.value = 0;
+    articlesDialogVisible.value = true;
+    await fetchUserArticles();
+};
+
+const onArticlesPage = (event) => {
+    articlesFirst.value = event.first;
+    articlesRows.value = event.rows;
+    fetchUserArticles();
+};
+
 const savePhone = async () => {
     if (!phoneTargetUser.value) return;
     const phone = normalizePhone(phoneInput.value);
@@ -144,6 +193,50 @@ onMounted(() => {
 <template>
     <Toast />
     <ConfirmDialog />
+
+    <Dialog v-model:visible="articlesDialogVisible" modal header="已购作品" :style="{ width: '80vw' }">
+        <div class="flex flex-col gap-4">
+            <div class="text-sm text-gray-600" v-if="articlesUser">
+                用户：{{ articlesUser.username }}（ID: {{ articlesUser.id }}）
+            </div>
+
+            <DataTable :value="articlesItems" :loading="articlesLoading" :paginator="true" :rows="articlesRows"
+                :totalRecords="articlesTotal" :lazy="true" :first="articlesFirst" @page="onArticlesPage"
+                dataKey="id" class="p-datatable-sm" responsiveLayout="scroll" style="max-height: 60vh" scrollable>
+                <template #empty>
+                    <div class="text-center p-4">暂无购买记录</div>
+                </template>
+
+                <template #loading>
+                    <div class="flex flex-col items-center justify-center p-4">
+                        <ProgressSpinner style="width:50px;height:50px" />
+                        <span class="mt-2">加载购买数据...</span>
+                    </div>
+                </template>
+
+                <Column field="title" header="标题" />
+
+                <Column field="price" header="购买价格">
+                    <template #body="{ data }">
+                        {{ formatBoughtPrice(data.price) }}
+                    </template>
+                </Column>
+
+                <Column field="bought_at" header="购买时间">
+                    <template #body="{ data }">
+                        {{ formatDate(data.bought_at) }}
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <Button label="关闭" text @click="articlesDialogVisible = false" />
+            </div>
+        </template>
+    </Dialog>
+
     <Dialog v-model:visible="phoneDialogVisible" modal header="设置手机号" :style="{ width: '420px' }">
         <div class="space-y-3">
             <div class="text-sm text-gray-600" v-if="phoneTargetUser">
@@ -221,6 +314,14 @@ onMounted(() => {
 
                 <Column field="phone" header="Phone" sortable></Column>
 
+                <Column field="bought_count" header="购买数量" sortable>
+                    <template #body="{ data }">
+                        <Button v-if="data.bought_count > 0" text severity="info" class="p-0"
+                            :label="data.bought_count.toString()" @click="openUserArticles(data)" />
+                        <span v-else class="text-gray-500">{{ data.bought_count || 0 }}</span>
+                    </template>
+                </Column>
+
                 <Column field="status" header="状态" sortable>
                     <template #body="{ data }">
                         <Badge :value="data.status === 0 ? '活跃' : '禁用'"