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

3
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">
<option value="all">全部</option>
<option value="completed">已完成</option>
<optiefunde value="refunding">退款申请中</optiefunde <option value="refunded">已退款</option>
<option value="refunding">退款申请中</option>
<option value="refunded">已退款</option>
</select>
</div>
<div class="ml-auto relative w-64">

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

@@ -1,13 +1,14 @@
<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">
<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"
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">
<i class="pi pi-check"></i> 保存修改
</button>
</div>
<div class="max-w-4xl mx-auto space-y-8">
<div class="max-w-5xl mx-auto space-y-8">
<!-- 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">
<i class="pi pi-info-circle text-xl mt-0.5"></i>
@@ -29,9 +30,11 @@
<!-- 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">
<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">
<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>
@@ -39,11 +42,15 @@
<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="给您的频道起个名字">
<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="介绍一下您的频道特色...">
<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>
@@ -51,7 +58,9 @@
<!-- Intro Detail -->
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label>
<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>
<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>
</div>
</div>
@@ -62,14 +71,19 @@
<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')">
<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>
<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">
<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>
@@ -83,9 +97,9 @@
</template>
<script setup>
import { ref, reactive } from 'vue';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { reactive, ref } from 'vue';
const toast = useToast();
const fileInput = ref(null);