From 8b75c80d1ab8179013a4e8811a5c5a88c6d94a84 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 19:01:56 +0800
Subject: [PATCH] feat(portal): refine channel settings page with single-column
 layout and improved tips

---
 .../portal/src/views/creator/SettingsView.vue | 129 +++++++++++++++++-
 1 file changed, 126 insertions(+), 3 deletions(-)

diff --git a/frontend/portal/src/views/creator/SettingsView.vue b/frontend/portal/src/views/creator/SettingsView.vue
index e28c0ff..649ff33 100644
--- a/frontend/portal/src/views/creator/SettingsView.vue
+++ b/frontend/portal/src/views/creator/SettingsView.vue
@@ -1,6 +1,129 @@
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-bold mb-4">Creator Settings</h1>
-    <p class="text-slate-400">(Tenant settings)</p>
+  <div class="p-8 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">
+          <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>
 </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>
\ No newline at end of file