From f8c312752ebf9413dfde7fdddd6fd522f47e9828 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 11:46:06 +0800
Subject: [PATCH] fix(portal): add tailwind @reference to ProfileView to fix
 build error

---
 .../portal/src/views/user/ProfileView.vue     | 188 +++++++++++++++++-
 1 file changed, 185 insertions(+), 3 deletions(-)

diff --git a/frontend/portal/src/views/user/ProfileView.vue b/frontend/portal/src/views/user/ProfileView.vue
index 84c6fdc..2fc2c8b 100644
--- a/frontend/portal/src/views/user/ProfileView.vue
+++ b/frontend/portal/src/views/user/ProfileView.vue
@@ -1,6 +1,188 @@
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-bold mb-4">Profile Settings</h1>
-    <p class="text-slate-400">(Edit profile)</p>
+  <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
+    <h1 class="text-2xl font-bold text-slate-900 mb-8">个人资料</h1>
+
+    <div class="max-w-2xl">
+       <!-- Avatar Section -->
+       <div class="flex items-center gap-6 mb-10">
+          <div class="relative group cursor-pointer" @click="triggerUpload">
+             <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-slate-200 group-hover:border-primary-200 transition-colors">
+                <img :src="form.avatar" class="w-full h-full object-cover">
+                <!-- Overlay -->
+                <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>
+             <!-- Mock File Input -->
+             <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
+          </div>
+          <div>
+             <div class="font-bold text-slate-900 text-lg mb-1">修改头像</div>
+             <p class="text-sm text-slate-500">支持 JPG, PNG 格式，文件小于 5MB</p>
+          </div>
+       </div>
+
+       <!-- Form Section -->
+       <div class="space-y-6">
+          <!-- Nickname -->
+          <div>
+             <label class="block text-sm font-bold text-slate-700 mb-2">昵称 <span class="text-red-500">*</span></label>
+             <input 
+               v-model="form.nickname" 
+               type="text" 
+               class="w-full h-12 px-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition-all"
+               placeholder="请输入昵称"
+             >
+             <p class="text-xs text-slate-400 mt-2">修改后需通过审核方可生效</p>
+          </div>
+
+          <!-- Bio -->
+          <div>
+             <label class="block text-sm font-bold text-slate-700 mb-2">个人简介</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-2 focus:ring-primary-100 outline-none transition-all resize-none"
+               placeholder="介绍一下你自己..."
+               maxlength="100"
+             ></textarea>
+             <div class="text-right text-xs text-slate-400 mt-1">{{ form.bio.length }}/100</div>
+          </div>
+
+          <!-- Gender -->
+          <div>
+             <label class="block text-sm font-bold text-slate-700 mb-3">性别</label>
+             <div class="flex gap-6">
+                <label class="flex items-center gap-2 cursor-pointer">
+                   <RadioButton v-model="form.gender" value="male" />
+                   <span class="text-slate-700">男</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                   <RadioButton v-model="form.gender" value="female" />
+                   <span class="text-slate-700">女</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                   <RadioButton v-model="form.gender" value="secret" />
+                   <span class="text-slate-700">保密</span>
+                </label>
+             </div>
+          </div>
+
+          <!-- Birthday -->
+          <div>
+             <label class="block text-sm font-bold text-slate-700 mb-2">生日</label>
+             <DatePicker v-model="form.birthday" showIcon fluid iconDisplay="input" dateFormat="yy-mm-dd" placeholder="选择日期" />
+          </div>
+
+          <!-- Location -->
+          <div class="grid grid-cols-2 gap-4">
+             <div>
+                <label class="block text-sm font-bold text-slate-700 mb-2">所在省份</label>
+                <Select v-model="form.province" :options="provinces" optionLabel="name" placeholder="选择省份" class="w-full" />
+             </div>
+             <div>
+                <label class="block text-sm font-bold text-slate-700 mb-2">所在城市</label>
+                <Select v-model="form.city" :options="cities" optionLabel="name" placeholder="选择城市" class="w-full" />
+             </div>
+          </div>
+       </div>
+
+       <!-- Action Footer -->
+       <div class="mt-10 pt-6 border-t border-slate-100">
+          <Button 
+            label="保存修改" 
+            icon="pi pi-check" 
+            :loading="saving" 
+            @click="saveProfile" 
+            class="w-full sm:w-auto px-8 h-12 text-lg font-bold" 
+          />
+       </div>
+    </div>
+    
+    <Toast />
   </div>
 </template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import RadioButton from 'primevue/radiobutton';
+import DatePicker from 'primevue/datepicker';
+import Select from 'primevue/select';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+const fileInput = ref(null);
+const saving = ref(false);
+
+const form = reactive({
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',
+    nickname: 'Felix Demo',
+    bio: '热爱戏曲，喜欢京剧程派艺术。',
+    gender: 'male',
+    birthday: null,
+    province: null,
+    city: null
+});
+
+// Mock Location Data
+const provinces = [
+    { name: '北京', code: 'BJ' },
+    { name: '上海', code: 'SH' },
+    { name: '广东', code: 'GD' }
+];
+const cities = [
+    { name: '朝阳区', code: 'CY' },
+    { name: '海淀区', code: 'HD' }
+];
+
+const triggerUpload = () => {
+    fileInput.value.click();
+};
+
+const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+        // Mock upload logic: Read as DataURL for preview
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            form.avatar = e.target.result;
+            toast.add({ severity: 'success', summary: '头像已更新', detail: '新头像已预览，请点击保存生效', life: 3000 });
+        };
+        reader.readAsDataURL(file);
+    }
+};
+
+const saveProfile = () => {
+    if (!form.nickname.trim()) {
+        toast.add({ severity: 'error', summary: '错误', detail: '昵称不能为空', life: 3000 });
+        return;
+    }
+
+    saving.value = true;
+    
+    // Simulate API call
+    setTimeout(() => {
+        saving.value = false;
+        toast.add({ severity: 'success', summary: '保存成功', detail: '个人资料已更新，部分信息正在审核中', life: 3000 });
+    }, 1000);
+};
+</script>
+
+<style scoped>
+@reference "../../assets/main.css";
+
+:deep(.p-select) {
+    @apply h-12 flex items-center border-slate-200 rounded-lg shadow-none;
+}
+:deep(.p-select:not(.p-disabled).p-focus) {
+    @apply border-primary-500 ring-2 ring-primary-100 shadow-none;
+}
+:deep(.p-datepicker-input) {
+    @apply h-12 border-slate-200 rounded-lg shadow-none w-full;
+}
+:deep(.p-datepicker-input:focus) {
+    @apply border-primary-500 ring-2 ring-primary-100;
+}
+</style>
\ No newline at end of file