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

fix(portal): add tailwind @reference to ProfileView to fix build error

Browse Source
This commit is contained in:
Rogee
2025-12-26 11:46:06 +08:00
parent caaa8654b3
commit f8c312752e
1 changed files with 185 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
frontend/portal/src/views/user/ProfileView.vue
View File

@@ -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>