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

feat(portal): refine channel settings page with single-column layout and improved tips

Browse Source
This commit is contained in:
Rogee
2025-12-26 19:01:56 +08:00
parent db72ce84da
commit 8b75c80d1a
1 changed files with 126 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,129 @@
<template> <template>
<div class="p-8"> <div class="p-8 max-w-5xl mx-auto">
<h1 class="text-2xl font-bold mb-4">Creator Settings</h1> <div class="flex items-center justify-between mb-8">
<p class="text-slate-400">(Tenant settings)</p> <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">
<i class="pi pi-check"></i> 保存修改
</button>
</div>
<div class="max-w-4xl 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>
<div>
<h4 class="font-bold mb-1">频道设置须知</h4>
<ul class="list-disc list-inside space-y-1 opacity-90">
<li>建议封面图尺寸 1280x320px，重点内容居中。</li>
<li>频道名称修改后需人工审核，审核期间原名称仍可见。</li>
<li>优质的频道介绍和精美的视觉设计有助于大幅提升关注转化率。</li>
</ul>
</div>
</div>
<!-- 1. Basic Info -->
<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>
<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>
<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>
</div>
</div>
</div>
<!-- 2. Visual Style -->
<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>
<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> </div>
</template> </template>
<script setup>
import { ref, reactive } from 'vue';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const fileInput = ref(null);
const currentUploadType = ref('');
const form = reactive({
name: '梅派传人小林',
bio: '专注京剧程派艺术传承与推广',
description: '',
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'
});
const triggerUpload = (type) => {
currentUploadType.value = type;
fileInput.value.click();
};
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
if (currentUploadType.value === 'avatar') {
form.avatar = e.target.result;
} else {
form.cover = e.target.result;
}
};
reader.readAsDataURL(file);
}
};
const saveSettings = () => {
if (!form.name) {
toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 });
return;
}
toast.add({ severity: 'success', summary: '保存成功', detail: '部分信息正在审核中', life: 3000 });
};
</script>