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

fix: 修复订单视图中的下拉选项错误，优化设置视图的布局和样式

Browse Source
This commit is contained in:
Rogee
2025-12-26 21:49:14 +08:00
parent d4716b979f
commit 29d35b3106
2 changed files with 120 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/portal/src/views/creator/OrdersView.vue
View File

@@ -18,7 +18,8 @@
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer"> class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer">
<option value="all">全部</option> <option value="all">全部</option>
<option value="completed">已完成</option> <option value="completed">已完成</option>
<optiefunde value="refunding">退款申请中</optiefunde <option value="refunded">已退款</option> <option value="refunding">退款申请中</option>
<option value="refunded">已退款</option>
</select> </select>
</div> </div>
<div class="ml-auto relative w-64"> <div class="ml-auto relative w-64">
@@ -151,8 +152,8 @@
</div> </div>
<div class="space-y-3"> <div class="space-y-3">
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50" :class="refundAction === 'accept' <label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50" :class="refundAction === 'accept'
? 'border-green-500 bg-green-50' ? 'border-green-500 bg-green-50'
: 'border-slate-200' : 'border-slate-200'
"> ">
<RadioButton v-model="refundAction" value="accept" /> <RadioButton v-model="refundAction" value="accept" />
<span>同意退款</span> <span>同意退款</span>
@@ -265,4 +266,4 @@ const confirmRefund = () => {
}); });
// In real app, refresh list // In real app, refresh list
}; };
</script> </script>

216
frontend/portal/src/views/creator/SettingsView.vue
View File

@@ -1,129 +1,143 @@
<template> <template>
<div class="p-8 max-w-5xl mx-auto"> <div class="max-w-5xl mx-auto">
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold text-slate-900">频道设置</h1> <h1 class="text-2xl font-bold text-slate-900">频道设置</h1>
<button @click="saveSettings" class="px-8 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2"> <button @click="saveSettings"
<i class="pi pi-check"></i> 保存修改 class="px-8 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
</button> <i class="pi pi-check"></i> 保存修改
</div> </button>
</div>
<div class="max-w-4xl mx-auto space-y-8"> <div class="max-w-5xl mx-auto space-y-8">
<!-- 0. Tips --> <!-- 0. Tips -->
<div class="bg-blue-50 p-6 rounded-xl border border-blue-100 text-sm text-blue-700 flex items-start gap-4"> <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 text-sm text-blue-700 flex items-start gap-4">
<i class="pi pi-info-circle text-xl mt-0.5"></i> <i class="pi pi-info-circle text-xl mt-0.5"></i>
<div> <div>
<h4 class="font-bold mb-1">频道设置须知</h4> <h4 class="font-bold mb-1">频道设置须知</h4>
<ul class="list-disc list-inside space-y-1 opacity-90"> <ul class="list-disc list-inside space-y-1 opacity-90">
<li>建议封面图尺寸 1280x320px，重点内容居中。</li> <li>建议封面图尺寸 1280x320px，重点内容居中。</li>
<li>频道名称修改后需人工审核，审核期间原名称仍可见。</li> <li>频道名称修改后需人工审核，审核期间原名称仍可见。</li>
<li>优质的频道介绍和精美的视觉设计有助于大幅提升关注转化率。</li> <li>优质的频道介绍和精美的视觉设计有助于大幅提升关注转化率。</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 1. Basic Info --> <!-- 1. Basic Info -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
<h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">基本信息</h2> <h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">基本信息</h2>
<div class="space-y-6">
<!-- Avatar & Name -->
<div class="flex items-start gap-6">
<div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')">
<div class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
<img :src="form.avatar" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<i class="pi pi-camera text-white text-2xl"></i>
</div>
</div>
</div>
<div class="flex-1 space-y-4">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label>
<input v-model="form.name" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="给您的频道起个名字">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label>
<input v-model="form.bio" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="介绍一下您的频道特色...">
</div>
</div>
</div>
<!-- Intro Detail --> <div class="space-y-6">
<div> <!-- Avatar & Name -->
<label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label> <div class="flex items-start gap-6">
<textarea v-model="form.description" rows="4" class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none" placeholder="详细描述您的履历、师承或频道内容规划..."></textarea> <div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')">
</div> <div
</div> class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
</div> <img :src="form.avatar" class="w-full h-full object-cover">
<div
class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<i class="pi pi-camera text-white text-2xl"></i>
</div>
</div>
</div>
<div class="flex-1 space-y-4">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label>
<input v-model="form.name" type="text"
class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
placeholder="给您的频道起个名字">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label>
<input v-model="form.bio" type="text"
class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
placeholder="介绍一下您的频道特色...">
</div>
</div>
</div>
<!-- 2. Visual Style --> <!-- Intro Detail -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8"> <div>
<h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">视觉风格</h2> <label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label>
<textarea v-model="form.description" rows="4"
<div> class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none"
<label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label> placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
<div class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all" @click="triggerUpload('cover')"> </div>
<img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover"> </div>
<div class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all" v-else> </div>
<i class="pi pi-image text-3xl mb-2"></i>
<span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
</div>
<!-- Hover Overlay for replace -->
<div v-if="form.cover" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
</div>
</div>
</div>
</div>
</div>
<input type="file" ref="fileInput" class="hidden" @change="handleFileChange"> <!-- 2. Visual Style -->
<Toast /> <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
</div> <h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">视觉风格</h2>
<div>
<label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label>
<div
class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all"
@click="triggerUpload('cover')">
<img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover">
<div
class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all"
v-else>
<i class="pi pi-image text-3xl mb-2"></i>
<span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
</div>
<!-- Hover Overlay for replace -->
<div v-if="form.cover"
class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
</div>
</div>
</div>
</div>
</div>
<input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
<Toast />
</div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue';
import Toast from 'primevue/toast'; import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { reactive, ref } from 'vue';
const toast = useToast(); const toast = useToast();
const fileInput = ref(null); const fileInput = ref(null);
const currentUploadType = ref(''); const currentUploadType = ref('');
const form = reactive({ const form = reactive({
name: '梅派传人小林', name: '梅派传人小林',
bio: '专注京剧程派艺术传承与推广', bio: '专注京剧程派艺术传承与推广',
description: '', description: '',
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80' cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'
}); });
const triggerUpload = (type) => { const triggerUpload = (type) => {
currentUploadType.value = type; currentUploadType.value = type;
fileInput.value.click(); fileInput.value.click();
}; };
const handleFileChange = (event) => { const handleFileChange = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
if (currentUploadType.value === 'avatar') { if (currentUploadType.value === 'avatar') {
form.avatar = e.target.result; form.avatar = e.target.result;
} else { } else {
form.cover = e.target.result; form.cover = e.target.result;
} }
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}; };
const saveSettings = () => { const saveSettings = () => {
if (!form.name) { if (!form.name) {
toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 }); toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 });
return; return;
} }
toast.add({ severity: 'success', summary: '保存成功', detail: '部分信息正在审核中', life: 3000 }); toast.add({ severity: 'success', summary: '保存成功', detail: '部分信息正在审核中', life: 3000 });
}; };
</script> </script>