From 6ad195b36024bfb7f5aa08b91f11d8783a8a4504 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 14:41:34 +0800
Subject: [PATCH] feat(portal): refine creator application page with simplified
 form and updated copy

---
 .../portal/src/views/creator/ApplyView.vue    | 156 +++++++++++++++++-
 1 file changed, 152 insertions(+), 4 deletions(-)

diff --git a/frontend/portal/src/views/creator/ApplyView.vue b/frontend/portal/src/views/creator/ApplyView.vue
index 2ec8b80..95fd290 100644
--- a/frontend/portal/src/views/creator/ApplyView.vue
+++ b/frontend/portal/src/views/creator/ApplyView.vue
@@ -1,7 +1,155 @@
 <template>
-  <div class="mx-auto max-w-3xl my-12 bg-white rounded-xl shadow-sm border border-slate-100 p-8">
-    <h1 class="text-2xl font-bold mb-4 text-center">Creator Application</h1>
-    <p class="text-slate-500 text-center mb-8">Join us and start your creative journey.</p>
-    <p class="text-slate-400 text-center">(Implementation pending based on PAGE_TENANT_APPLY.md)</p>
+  <!-- Main Container -->
+  <div class="mx-auto max-w-4xl my-8 bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden min-h-[600px]">
+    
+    <!-- Step 1: Landing -->
+    <div v-if="step === 1">
+       <div class="relative h-[400px] w-full overflow-hidden">
+          <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" class="w-full h-full object-cover">
+          <div class="absolute inset-0 bg-black/40 flex items-center justify-center p-12">
+             <div class="text-center text-white">
+                <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">开启您的内容创作之旅</h1>
+                <p class="text-xl md:text-2xl opacity-90 max-w-2xl mx-auto drop-shadow-md">加入我们，获得专属频道主页，通过优质戏曲内容获取收益，与百万戏迷互动。</p>
+             </div>
+          </div>
+       </div>
+
+       <div class="p-12">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+             <div class="p-6 bg-slate-50 rounded-xl text-center">
+                <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-wallet"></i></div>
+                <h3 class="font-bold text-slate-900 mb-2">内容变现</h3>
+                <p class="text-sm text-slate-500">灵活设置付费阅读与会员专栏，收益直接结算。</p>
+             </div>
+             <div class="p-6 bg-slate-50 rounded-xl text-center">
+                <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-home"></i></div>
+                <h3 class="font-bold text-slate-900 mb-2">专属频道</h3>
+                <p class="text-sm text-slate-500">拥有独立的品牌展示空间，积累私域粉丝。</p>
+             </div>
+             <div class="p-6 bg-slate-50 rounded-xl text-center">
+                <div class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-chart-bar"></i></div>
+                <h3 class="font-bold text-slate-900 mb-2">数据管理</h3>
+                <p class="text-sm text-slate-500">全方位的作品数据分析，助您优化创作方向。</p>
+             </div>
+          </div>
+
+          <div class="text-center">
+             <button @click="step = 2" class="px-12 py-4 bg-primary-600 text-white rounded-full font-bold text-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-200 cursor-pointer active:scale-95">
+                立即申请入驻
+             </button>
+          </div>
+       </div>
+    </div>
+
+    <!-- Step 2: Application Form -->
+    <div v-else-if="step === 2" class="p-8 md:p-12">
+       <h2 class="text-2xl font-bold text-slate-900 mb-8">填写申请资料</h2>
+
+       <div class="space-y-8 max-w-2xl mx-auto">
+          <!-- Avatar -->
+          <div class="flex items-center gap-6">
+             <div class="w-24 h-24 rounded-full bg-slate-100 flex items-center justify-center border-2 border-dashed border-slate-300 hover:border-primary-400 cursor-pointer transition-colors" @click="triggerUpload">
+                <img v-if="form.avatar" :src="form.avatar" class="w-full h-full rounded-full object-cover">
+                <i v-else class="pi pi-camera text-3xl text-slate-400"></i>
+             </div>
+             <div>
+                <div class="font-bold text-slate-900 mb-1">频道头像 <span class="text-red-500">*</span></div>
+                <p class="text-sm text-slate-500">建议使用清晰的个人照或 Logo</p>
+             </div>
+             <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
+          </div>
+
+          <!-- Name -->
+          <div>
+             <label class="block font-bold text-slate-900 mb-2">频道名称 <span class="text-red-500">*</span></label>
+             <input v-model="form.name" type="text" class="w-full h-12 px-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none transition-all text-lg" placeholder="给您的频道起个名字">
+          </div>
+
+          <!-- Bio -->
+          <div>
+             <label class="block font-bold text-slate-900 mb-2">频道介绍 <span class="text-red-500">*</span></label>
+             <textarea v-model="form.bio" rows="3" class="w-full p-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none transition-all text-base resize-none" placeholder="一句话介绍您的频道特色..."></textarea>
+          </div>
+
+          <!-- Agreement -->
+          <div class="flex items-center pt-4">
+             <input type="checkbox" id="agree" v-model="form.agreed" class="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer">
+             <label for="agree" class="ml-3 text-slate-600 cursor-pointer">
+                我已阅读并同意 <a href="#" class="text-primary-600 hover:underline">《创作者入驻协议》</a>
+             </label>
+          </div>
+
+          <!-- Actions -->
+          <div class="pt-6">
+             <button 
+               @click="submitForm" 
+               class="w-full py-4 bg-primary-600 text-white rounded-xl font-bold text-xl hover:bg-primary-700 transition-all shadow-lg disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer active:scale-95"
+               :disabled="!isValid"
+             >
+                {{ submitting ? '正在提交...' : '提交审核' }}
+             </button>
+          </div>
+       </div>
+    </div>
+
+    <!-- Step 3: Result -->
+    <div v-else-if="step === 3" class="p-20 text-center">
+       <div class="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl mx-auto mb-6 animate-in zoom-in duration-300">
+          <i class="pi pi-check"></i>
+       </div>
+       <h2 class="text-3xl font-bold text-slate-900 mb-4">申请已提交</h2>
+       <p class="text-lg text-slate-600 mb-12 max-w-lg mx-auto">您的入驻申请已成功提交，平台将在 1-3 个工作日内完成审核。审核结果将通过短信和系统通知发送给您。</p>
+       
+       <div class="flex justify-center gap-4">
+          <router-link to="/" class="px-8 py-3 bg-white border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 font-medium">返回首页</router-link>
+          <router-link to="/me" class="px-8 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium">查看个人中心</router-link>
+       </div>
+    </div>
+
   </div>
 </template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+
+const step = ref(1);
+const submitting = ref(false);
+const fileInput = ref(null);
+
+const form = reactive({
+    avatar: '',
+    name: '',
+    bio: '',
+    agreed: false
+});
+
+const isValid = computed(() => {
+    return form.avatar && form.name && form.bio && form.agreed;
+});
+
+const triggerUpload = () => {
+    fileInput.value.click();
+};
+
+const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            form.avatar = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+};
+
+const submitForm = () => {
+    if (!isValid.value) return;
+    
+    submitting.value = true;
+    // Simulate API
+    setTimeout(() => {
+        submitting.value = false;
+        step.value = 3;
+    }, 1500);
+};
+</script>