From 753cfde9d5a7dcc68f8fdb05e63294be4d84ed58 Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Tue, 1 Apr 2025 20:03:47 +0800
Subject: [PATCH] fix: issues

---
 frontend/admin/src/pages/PostCreatePage.vue | 134 +++++++----------
 frontend/admin/src/pages/PostEditPage.vue   | 153 ++++++++------------
 2 files changed, 116 insertions(+), 171 deletions(-)

diff --git a/frontend/admin/src/pages/PostCreatePage.vue b/frontend/admin/src/pages/PostCreatePage.vue
index 9a69023..eacdc56 100644
--- a/frontend/admin/src/pages/PostCreatePage.vue
+++ b/frontend/admin/src/pages/PostCreatePage.vue
@@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
 // PrimeVue components
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
-import Card from 'primevue/card';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import Dialog from 'primevue/dialog';
@@ -216,73 +215,71 @@ const getFileIcon = (file) => {
             </div>
         </div>
 
-        <Card class="mb-6">
-            <template #content>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <!-- Title -->
-                    <div class="col-span-2">
-                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
-                        <InputText id="title" v-model="post.title" class="w-full p-inputtext-lg" placeholder="输入文章标题" />
-                        <small v-if="errors.title" class="p-error">{{ errors.title }}</small>
-                    </div>
+        <div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Title -->
+                <div class="col-span-2">
+                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
+                    <InputText id="title" v-model="post.title" class="w-full p-inputtext-lg" placeholder="输入文章标题" />
+                    <small v-if="errors.title" class="p-error">{{ errors.title }}</small>
+                </div>
 
-                    <!-- Price -->
-                    <div class="col-span-1">
-                        <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
-                        <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY"
-                            :minFractionDigits="2" class="w-full" />
-                    </div>
+                <!-- Price -->
+                <div class="col-span-1">
+                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
+                    <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY" :minFractionDigits="2"
+                        class="w-full" />
+                </div>
 
-                    <!-- Introduction -->
-                    <div class="col-span-2">
-                        <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label>
-                        <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
-                            placeholder="输入文章介绍内容" />
-                        <small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
-                    </div>
+                <!-- Introduction -->
+                <div class="col-span-2">
+                    <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label>
+                    <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
+                        placeholder="输入文章介绍内容" />
+                    <small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
+                </div>
 
-                    <!-- Media Selection -->
-                    <div class="col-span-2">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
-                        <div class="p-4 border border-gray-200 rounded-md">
-                            <div v-if="post.selectedMedia.length === 0"
-                                class="flex justify-center items-center flex-col space-y-3 py-6">
-                                <i class="pi pi-image text-gray-400 text-3xl"></i>
-                                <p class="text-gray-500">尚未选择任何媒体文件</p>
-                                <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
-                                <small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small>
+                <!-- Media Selection -->
+                <div class="col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
+                    <div class="p-4 border border-gray-200 rounded-md">
+                        <div v-if="post.selectedMedia.length === 0"
+                            class="flex justify-center items-center flex-col space-y-3 py-6">
+                            <i class="pi pi-image text-gray-400 text-3xl"></i>
+                            <p class="text-gray-500">尚未选择任何媒体文件</p>
+                            <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
+                            <small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small>
+                        </div>
+                        <div v-else>
+                            <div class="mb-4">
+                                <Button label="添加更多媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
                             </div>
-                            <div v-else>
-                                <div class="mb-4">
-                                    <Button label="添加更多媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
-                                </div>
-                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-                                    <div v-for="media in post.selectedMedia" :key="media.id"
-                                        class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                        <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                            <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                                :alt="media.fileName">
-                                        </div>
-                                        <div v-else
-                                            class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                            <i :class="getFileIcon(media)" class="text-2xl"></i>
-                                        </div>
-                                        <div class="flex-1 overflow-hidden">
-                                            <div class="text-sm font-medium text-gray-900 truncate">{{ media.fileName }}
-                                            </div>
-                                            <Badge :value="media.fileType" :severity="getBadgeSeverity(media.fileType)"
-                                                class="text-xs" />
-                                        </div>
-                                        <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
-                                            @click="removeMedia(media)" aria-label="移除" />
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                                <div v-for="media in post.selectedMedia" :key="media.id"
+                                    class="relative border border-gray-200 rounded-md p-2 flex items-center">
+                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
+                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
+                                            :alt="media.fileName">
                                     </div>
+                                    <div v-else
+                                        class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
+                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                    </div>
+                                    <div class="flex-1 overflow-hidden">
+                                        <div class="text-sm font-medium text-gray-900 truncate">{{ media.fileName }}
+                                        </div>
+                                        <Badge :value="media.fileType" :severity="getBadgeSeverity(media.fileType)"
+                                            class="text-xs" />
+                                    </div>
+                                    <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
+                                        @click="removeMedia(media)" aria-label="移除" />
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </template>
-        </Card>
+            </div>
+        </div>
     </div>
 
     <!-- Media Selection Dialog -->
@@ -341,23 +338,4 @@ const getFileIcon = (file) => {
                 :disabled="selectedMediaItems.length === 0" />
         </template>
     </Dialog>
-</template>
-
-<style scoped>
-.p-card .p-card-content {
-    padding: 1.5rem;
-}
-
-.p-inputtext-lg {
-    font-size: 1.25rem;
-    padding: 0.75rem 1rem;
-}
-
-.p-inputnumber-input {
-    width: 100%;
-}
-
-.p-button-sm {
-    padding: 0.4rem;
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/frontend/admin/src/pages/PostEditPage.vue b/frontend/admin/src/pages/PostEditPage.vue
index f096672..207acc8 100644
--- a/frontend/admin/src/pages/PostEditPage.vue
+++ b/frontend/admin/src/pages/PostEditPage.vue
@@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
 // PrimeVue components
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
-import Card from 'primevue/card';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import Dialog from 'primevue/dialog';
@@ -315,91 +314,78 @@ onMounted(() => {
             <span class="mt-4">加载文章数据...</span>
         </div>
 
-        <Card v-else class="mb-6">
-            <template #content>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <!-- Title -->
-                    <div class="col-span-2">
-                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
-                        <InputText id="title" v-model="post.title" class="w-full p-inputtext-lg" placeholder="输入文章标题" />
-                        <small v-if="errors.title" class="p-error">{{ errors.title }}</small>
-                    </div>
+        <div v-else>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-0!">
+                <!-- Title -->
+                <div class="col-span-2">
+                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
+                    <InputText id="title" v-model="post.title" class="w-full p-inputtext-lg" placeholder="输入文章标题" />
+                    <small v-if="errors.title" class="p-error">{{ errors.title }}</small>
+                </div>
 
-                    <!-- Author -->
-                    <div class="col-span-1">
-                        <label for="author" class="block text-sm font-medium text-gray-700 mb-1">作者</label>
-                        <InputText id="author" v-model="post.author" class="w-full" />
-                    </div>
 
-                    <!-- Price -->
-                    <div class="col-span-1">
-                        <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
-                        <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY"
-                            :minFractionDigits="2" class="w-full" />
-                    </div>
+                <!-- Price -->
+                <div class="col-span-1">
+                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
+                    <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY" :minFractionDigits="2"
+                        class="w-full" />
+                </div>
 
-                    <!-- Status -->
-                    <div class="col-span-1">
-                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
-                        <Dropdown id="status" v-model="post.status" :options="statusOptions" class="w-full" />
-                    </div>
+                <!-- Status -->
+                <div class="col-span-1">
+                    <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
+                    <Dropdown id="status" v-model="post.status" :options="statusOptions" class="w-full" />
+                </div>
 
-                    <!-- ViewCount (readonly) -->
-                    <div class="col-span-1">
-                        <label for="viewCount" class="block text-sm font-medium text-gray-700 mb-1">观看次数</label>
-                        <InputText id="viewCount" v-model="post.viewCount" class="w-full" readonly />
-                    </div>
+                <!-- Introduction -->
+                <div class="col-span-2">
+                    <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label>
+                    <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
+                        placeholder="输入文章介绍内容" />
+                    <small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
+                </div>
 
-                    <!-- Introduction -->
-                    <div class="col-span-2">
-                        <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label>
-                        <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
-                            placeholder="输入文章介绍内容" />
-                        <small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
-                    </div>
-
-                    <!-- Media Selection -->
-                    <div class="col-span-2">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
-                        <div class="p-4 border border-gray-200 rounded-md">
-                            <div v-if="post.selectedMedia.length === 0"
-                                class="flex justify-center items-center flex-col space-y-3 py-6">
-                                <i class="pi pi-image text-gray-400 text-3xl"></i>
-                                <p class="text-gray-500">尚未选择任何媒体文件</p>
-                                <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
-                                <small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small>
+                <!-- Media Selection -->
+                <div class="col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
+                    <div class="p-4 border border-gray-200 rounded-md">
+                        <div v-if="post.selectedMedia.length === 0"
+                            class="flex justify-center items-center flex-col space-y-3 py-6">
+                            <i class="pi pi-image text-gray-400 text-3xl"></i>
+                            <p class="text-gray-500">尚未选择任何媒体文件</p>
+                            <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
+                            <small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small>
+                        </div>
+                        <div v-else>
+                            <div class="mb-4">
+                                <Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined />
                             </div>
-                            <div v-else>
-                                <div class="mb-4">
-                                    <Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined />
-                                </div>
-                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-                                    <div v-for="media in post.selectedMedia" :key="media.id"
-                                        class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                        <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                            <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                                :alt="media.fileName">
-                                        </div>
-                                        <div v-else
-                                            class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                            <i :class="getFileIcon(media)" class="text-2xl"></i>
-                                        </div>
-                                        <div class="flex-1 overflow-hidden">
-                                            <div class="text-sm font-medium text-gray-900 truncate">{{ media.fileName }}
-                                            </div>
-                                            <Badge :value="media.fileType" :severity="getBadgeSeverity(media.fileType)"
-                                                class="text-xs" />
-                                        </div>
-                                        <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
-                                            @click="removeMedia(media)" aria-label="移除" />
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                                <div v-for="media in post.selectedMedia" :key="media.id"
+                                    class="relative border border-gray-200 rounded-md p-2 flex items-center">
+                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
+                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
+                                            :alt="media.fileName">
                                     </div>
+                                    <div v-else
+                                        class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
+                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                    </div>
+                                    <div class="flex-1 overflow-hidden">
+                                        <div class="text-sm font-medium text-gray-900 truncate">{{ media.fileName }}
+                                        </div>
+                                        <Badge :value="media.fileType" :severity="getBadgeSeverity(media.fileType)"
+                                            class="text-xs" />
+                                    </div>
+                                    <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
+                                        @click="removeMedia(media)" aria-label="移除" />
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </template>
-        </Card>
+            </div>
+        </div>
     </div>
 
     <!-- Media Selection Dialog -->
@@ -459,22 +445,3 @@ onMounted(() => {
         </template>
     </Dialog>
 </template>
-
-<style scoped>
-.p-card .p-card-content {
-    padding: 1.5rem;
-}
-
-.p-inputtext-lg {
-    font-size: 1.25rem;
-    padding: 0.75rem 1rem;
-}
-
-.p-inputnumber-input {
-    width: 100%;
-}
-
-.p-button-sm {
-    padding: 0.4rem;
-}
-</style>