rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: issues

Browse Source
This commit is contained in:
yanghao05
2025-04-01 20:03:47 +08:00
parent 4918bcee16
commit 753cfde9d5
2 changed files with 116 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/admin/src/pages/PostCreatePage.vue
View File

@@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
// PrimeVue components // PrimeVue components
import Badge from 'primevue/badge'; import Badge from 'primevue/badge';
import Button from 'primevue/button'; import Button from 'primevue/button';
import Card from 'primevue/card';
import Column from 'primevue/column'; import Column from 'primevue/column';
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
@@ -216,73 +215,71 @@ const getFileIcon = (file) => {
</div> </div>
</div> </div>
<Card class="mb-6"> <div>
<template #content> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Title -->
<!-- Title --> <div class="col-span-2">
<div class="col-span-2"> <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
<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="输入文章标题" />
<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>
<small v-if="errors.title" class="p-error">{{ errors.title }}</small> </div>
</div>
<!-- Price --> <!-- Price -->
<div class="col-span-1"> <div class="col-span-1">
<label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label> <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" <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY" :minFractionDigits="2"
:minFractionDigits="2" class="w-full" /> class="w-full" />
</div> </div>
<!-- Introduction --> <!-- Introduction -->
<div class="col-span-2"> <div class="col-span-2">
<label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label> <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" <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
placeholder="输入文章介绍内容" /> placeholder="输入文章介绍内容" />
<small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small> <small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
</div> </div>
<!-- Media Selection --> <!-- Media Selection -->
<div class="col-span-2"> <div class="col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label> <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
<div class="p-4 border border-gray-200 rounded-md"> <div class="p-4 border border-gray-200 rounded-md">
<div v-if="post.selectedMedia.length === 0" <div v-if="post.selectedMedia.length === 0"
class="flex justify-center items-center flex-col space-y-3 py-6"> class="flex justify-center items-center flex-col space-y-3 py-6">
<i class="pi pi-image text-gray-400 text-3xl"></i> <i class="pi pi-image text-gray-400 text-3xl"></i>
<p class="text-gray-500">尚未选择任何媒体文件</p> <p class="text-gray-500">尚未选择任何媒体文件</p>
<Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined /> <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
<small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small> <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>
<div v-else> <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="mb-4"> <div v-for="media in post.selectedMedia" :key="media.id"
<Button label="添加更多媒体" icon="pi pi-plus" @click="openMediaDialog" outlined /> class="relative border border-gray-200 rounded-md p-2 flex items-center">
</div> <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
<div v-for="media in post.selectedMedia" :key="media.id" :alt="media.fileName">
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 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> </div>
</div> </div>
</div> </div>
</template> </div>
</Card> </div>
</div> </div>
<!-- Media Selection Dialog --> <!-- Media Selection Dialog -->
@@ -341,23 +338,4 @@ const getFileIcon = (file) => {
:disabled="selectedMediaItems.length === 0" /> :disabled="selectedMediaItems.length === 0" />
</template> </template>
</Dialog> </Dialog>
</template> </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>

153
frontend/admin/src/pages/PostEditPage.vue
View File

@@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
// PrimeVue components // PrimeVue components
import Badge from 'primevue/badge'; import Badge from 'primevue/badge';
import Button from 'primevue/button'; import Button from 'primevue/button';
import Card from 'primevue/card';
import Column from 'primevue/column'; import Column from 'primevue/column';
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
@@ -315,91 +314,78 @@ onMounted(() => {
<span class="mt-4">加载文章数据...</span> <span class="mt-4">加载文章数据...</span>
</div> </div>
<Card v-else class="mb-6"> <div v-else>
<template #content> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-0!">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Title -->
<!-- Title --> <div class="col-span-2">
<div class="col-span-2"> <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
<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="输入文章标题" />
<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>
<small v-if="errors.title" class="p-error">{{ errors.title }}</small> </div>
</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 --> <!-- Price -->
<div class="col-span-1"> <div class="col-span-1">
<label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label> <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" <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY" :minFractionDigits="2"
:minFractionDigits="2" class="w-full" /> class="w-full" />
</div> </div>
<!-- Status --> <!-- Status -->
<div class="col-span-1"> <div class="col-span-1">
<label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label> <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" /> <Dropdown id="status" v-model="post.status" :options="statusOptions" class="w-full" />
</div> </div>
<!-- ViewCount (readonly) --> <!-- Introduction -->
<div class="col-span-1"> <div class="col-span-2">
<label for="viewCount" class="block text-sm font-medium text-gray-700 mb-1">观看次数</label> <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label>
<InputText id="viewCount" v-model="post.viewCount" class="w-full" readonly /> <Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full"
</div> placeholder="输入文章介绍内容" />
<small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small>
</div>
<!-- Introduction --> <!-- Media Selection -->
<div class="col-span-2"> <div class="col-span-2">
<label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">文章介绍</label> <label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label>
<Textarea id="introduction" v-model="post.introduction" rows="5" class="w-full" <div class="p-4 border border-gray-200 rounded-md">
placeholder="输入文章介绍内容" /> <div v-if="post.selectedMedia.length === 0"
<small v-if="errors.introduction" class="p-error">{{ errors.introduction }}</small> class="flex justify-center items-center flex-col space-y-3 py-6">
</div> <i class="pi pi-image text-gray-400 text-3xl"></i>
<p class="text-gray-500">尚未选择任何媒体文件</p>
<!-- Media Selection --> <Button label="选择媒体" icon="pi pi-plus" @click="openMediaDialog" outlined />
<div class="col-span-2"> <small v-if="errors.selectedMedia" class="p-error">{{ errors.selectedMedia }}</small>
<label class="block text-sm font-medium text-gray-700 mb-1">媒体资源</label> </div>
<div class="p-4 border border-gray-200 rounded-md"> <div v-else>
<div v-if="post.selectedMedia.length === 0" <div class="mb-4">
class="flex justify-center items-center flex-col space-y-3 py-6"> <Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined />
<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>
<div v-else> <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="mb-4"> <div v-for="media in post.selectedMedia" :key="media.id"
<Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined /> class="relative border border-gray-200 rounded-md p-2 flex items-center">
</div> <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
<div v-for="media in post.selectedMedia" :key="media.id" :alt="media.fileName">
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 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> </div>
</div> </div>
</div> </div>
</template> </div>
</Card> </div>
</div> </div>
<!-- Media Selection Dialog --> <!-- Media Selection Dialog -->
@@ -459,22 +445,3 @@ onMounted(() => {
</template> </template>
</Dialog> </Dialog>
</template> </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>