fix: issues
This commit is contained in:
yanghao05
@@ -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>
|
||||
Reference in New Issue
Block a user