530 lines
13 KiB
Vue
530 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="profile-page">
|
|||
|
|
<div class="profile-shell">
|
|||
|
|
<header class="profile-hero">
|
|||
|
|
<div class="hero-text">
|
|||
|
|
<p class="eyebrow">Profile · 自定义你的身份</p>
|
|||
|
|
<h1 class="title">个人主页</h1>
|
|||
|
|
<p class="desc">管理头像、用户名、密码与个人资料</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn ghost" type="button" @click="goHome">返回首页</button>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="cards">
|
|||
|
|
<section class="card info-card">
|
|||
|
|
<div class="card-head">
|
|||
|
|
<div>
|
|||
|
|
<h2>基本信息</h2>
|
|||
|
|
<span class="muted">头像、用户名、简介</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="pill-btn" type="button" @click="saveProfile" :disabled="savingProfile">
|
|||
|
|
{{ savingProfile ? '保存中...' : '保存信息' }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="avatar-block">
|
|||
|
|
<button class="avatar-preview" type="button" @click="triggerAvatar">
|
|||
|
|
<img v-if="profileForm.image" :src="profileForm.image" alt="avatar" />
|
|||
|
|
<div v-else class="avatar-placeholder">上传头像</div>
|
|||
|
|
</button>
|
|||
|
|
<div class="avatar-meta">
|
|||
|
|
<div class="muted">点击头像上传，支持常见图片格式</div>
|
|||
|
|
<button class="btn ghost" type="button" @click="triggerAvatar">选择文件</button>
|
|||
|
|
<input ref="avatarInput" type="file" accept="image/*" hidden @change="onAvatarChange" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-grid">
|
|||
|
|
<label class="field">
|
|||
|
|
<span>用户名</span>
|
|||
|
|
<input v-model.trim="profileForm.username" type="text" placeholder="输入用户名" />
|
|||
|
|
</label>
|
|||
|
|
<label class="field">
|
|||
|
|
<span>邮箱</span>
|
|||
|
|
<input v-model.trim="profileForm.email" type="email" placeholder="邮箱（可选）" />
|
|||
|
|
</label>
|
|||
|
|
<label class="field">
|
|||
|
|
<span>手机号</span>
|
|||
|
|
<input v-model.trim="profileForm.phone" type="tel" placeholder="输入手机号" />
|
|||
|
|
</label>
|
|||
|
|
<label class="field">
|
|||
|
|
<span>身份类型</span>
|
|||
|
|
<div class="chip-row">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="chip-option"
|
|||
|
|
:class="{ active: profileForm.userType === 'personal' }"
|
|||
|
|
@click="profileForm.userType = 'personal'"
|
|||
|
|
>
|
|||
|
|
个人
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="chip-option"
|
|||
|
|
:class="{ active: profileForm.userType === 'company' }"
|
|||
|
|
@click="profileForm.userType = 'company'"
|
|||
|
|
>
|
|||
|
|
公司
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<label v-if="profileForm.userType === 'company'" class="field">
|
|||
|
|
<span>公司名称</span>
|
|||
|
|
<input v-model.trim="profileForm.companyName" type="text" placeholder="请输入公司全称" />
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<label class="field">
|
|||
|
|
<span>个人简介</span>
|
|||
|
|
<textarea v-model.trim="profileForm.bio" rows="3" placeholder="一句话介绍你自己" />
|
|||
|
|
</label>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="card password-card">
|
|||
|
|
<header class="card-head collapse-head" @click="showPassword = !showPassword">
|
|||
|
|
<div>
|
|||
|
|
<h2>密码与安全</h2>
|
|||
|
|
<span class="muted">设置新密码，至少 6 位</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="pill-btn ghost" type="button">
|
|||
|
|
{{ showPassword ? '收起' : '展开' }}
|
|||
|
|
</button>
|
|||
|
|
</header>
|
|||
|
|
<transition name="fade">
|
|||
|
|
<div v-if="showPassword" class="collapse-body">
|
|||
|
|
<label class="field">
|
|||
|
|
<span>新密码</span>
|
|||
|
|
<input v-model="passwordForm.newPassword" type="password" placeholder="输入新密码" />
|
|||
|
|
</label>
|
|||
|
|
<label class="field">
|
|||
|
|
<span>确认新密码</span>
|
|||
|
|
<input v-model="passwordForm.confirmPassword" type="password" placeholder="再次输入新密码" />
|
|||
|
|
</label>
|
|||
|
|
<div class="card-actions">
|
|||
|
|
<button class="btn primary" type="button" :disabled="savingPassword" @click="savePassword">
|
|||
|
|
{{ savingPassword ? '提交中...' : '更新密码' }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, reactive, ref } from 'vue'
|
|||
|
|
import type { Ref } from 'vue'
|
|||
|
|
import { useRouter, navigateTo } from '#app'
|
|||
|
|
import { useApi, useAuthToken } from '@/composables/useApi'
|
|||
|
|
import { useAuth } from '@/composables/useAuth'
|
|||
|
|
import { useUpload } from '@/composables/useUpload'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const api = useApi()
|
|||
|
|
const { token } = useAuthToken()
|
|||
|
|
|
|||
|
|
type AuthUserProfile = {
|
|||
|
|
username?: string | null
|
|||
|
|
email?: string | null
|
|||
|
|
bio?: string | null
|
|||
|
|
image?: string | null
|
|||
|
|
roles?: string[]
|
|||
|
|
phone?: string | null
|
|||
|
|
userType?: 'personal' | 'company' | null
|
|||
|
|
companyName?: string | null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { user: authUser, fetchMe } = useAuth() as unknown as {
|
|||
|
|
user: Ref<AuthUserProfile | null>
|
|||
|
|
fetchMe: () => Promise<any>
|
|||
|
|
}
|
|||
|
|
const { uploadImage } = useUpload()
|
|||
|
|
|
|||
|
|
interface ProfileForm {
|
|||
|
|
username: string
|
|||
|
|
email: string
|
|||
|
|
bio: string
|
|||
|
|
image: string
|
|||
|
|
phone: string
|
|||
|
|
userType: 'personal' | 'company'
|
|||
|
|
companyName: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const profileForm = reactive<ProfileForm>({
|
|||
|
|
username: '',
|
|||
|
|
email: '',
|
|||
|
|
bio: '',
|
|||
|
|
image: '',
|
|||
|
|
phone: '',
|
|||
|
|
userType: 'personal',
|
|||
|
|
companyName: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const passwordForm = reactive({
|
|||
|
|
newPassword: '',
|
|||
|
|
confirmPassword: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const savingProfile = ref(false)
|
|||
|
|
const savingPassword = ref(false)
|
|||
|
|
const avatarInput = ref<HTMLInputElement | null>(null)
|
|||
|
|
const showPassword = ref(false)
|
|||
|
|
|
|||
|
|
function goHome(): void {
|
|||
|
|
router.push('/')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ensureLoggedIn(): boolean {
|
|||
|
|
if (!token.value) {
|
|||
|
|
navigateTo('/login')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fillFormFromUser(): void {
|
|||
|
|
const u = authUser.value || null
|
|||
|
|
profileForm.username = u?.username || ''
|
|||
|
|
profileForm.email = u?.email || ''
|
|||
|
|
profileForm.bio = u?.bio || ''
|
|||
|
|
profileForm.image = u?.image || ''
|
|||
|
|
profileForm.phone = u?.phone || ''
|
|||
|
|
profileForm.userType = (u?.userType as 'personal' | 'company') || 'personal'
|
|||
|
|
profileForm.companyName = u?.companyName || ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function init(): Promise<void> {
|
|||
|
|
if (!ensureLoggedIn()) return
|
|||
|
|
if (!authUser.value) {
|
|||
|
|
try {
|
|||
|
|
await fetchMe()
|
|||
|
|
} catch (err) {
|
|||
|
|
console.warn('[Profile] fetchMe failed', err)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
fillFormFromUser()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function triggerAvatar(): void {
|
|||
|
|
avatarInput.value?.click()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function onAvatarChange(event: Event): Promise<void> {
|
|||
|
|
const target = event.target as HTMLInputElement
|
|||
|
|
const file = target.files?.[0]
|
|||
|
|
target.value = ''
|
|||
|
|
if (!file) return
|
|||
|
|
try {
|
|||
|
|
const url = await uploadImage(file)
|
|||
|
|
profileForm.image = url
|
|||
|
|
} catch (err: any) {
|
|||
|
|
alert(err?.message || '上传失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function saveProfile(): Promise<void> {
|
|||
|
|
if (!ensureLoggedIn()) return
|
|||
|
|
if (!profileForm.username.trim()) {
|
|||
|
|
alert('用户名不能为空')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
savingProfile.value = true
|
|||
|
|
try {
|
|||
|
|
await api.put('/user', {
|
|||
|
|
user: {
|
|||
|
|
username: profileForm.username.trim(),
|
|||
|
|
email: profileForm.email.trim() || undefined,
|
|||
|
|
bio: profileForm.bio.trim(),
|
|||
|
|
image: profileForm.image || undefined,
|
|||
|
|
phone: profileForm.phone.trim() || undefined,
|
|||
|
|
userType: profileForm.userType,
|
|||
|
|
companyName: profileForm.userType === 'company' ? profileForm.companyName.trim() || undefined : undefined,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
await fetchMe()
|
|||
|
|
alert('资料已保存')
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('[Profile] save profile failed', err)
|
|||
|
|
alert(err?.statusMessage || err?.message || '保存失败')
|
|||
|
|
} finally {
|
|||
|
|
savingProfile.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function savePassword(): Promise<void> {
|
|||
|
|
if (!ensureLoggedIn()) return
|
|||
|
|
if (!passwordForm.newPassword || passwordForm.newPassword.length < 6) {
|
|||
|
|
alert('新密码至少 6 位')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
|||
|
|
alert('两次输入的密码不一致')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
savingPassword.value = true
|
|||
|
|
try {
|
|||
|
|
await api.put('/user', {
|
|||
|
|
user: {
|
|||
|
|
password: passwordForm.newPassword,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
passwordForm.newPassword = ''
|
|||
|
|
passwordForm.confirmPassword = ''
|
|||
|
|
alert('密码已更新')
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('[Profile] update password failed', err)
|
|||
|
|
alert(err?.statusMessage || err?.message || '修改密码失败')
|
|||
|
|
} finally {
|
|||
|
|
savingPassword.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(init)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.profile-page {
|
|||
|
|
margin-top: 5%;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: var(--soft-page-bg);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 32px 16px 48px;
|
|||
|
|
}
|
|||
|
|
.profile-shell {
|
|||
|
|
width: min(1100px, 96vw);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.profile-hero {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
background: linear-gradient(120deg, #f5f7ff, #ecfdf3);
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 18px 20px;
|
|||
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|||
|
|
}
|
|||
|
|
.hero-text .eyebrow {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #6b7280;
|
|||
|
|
font-size: 12px;
|
|||
|
|
letter-spacing: 0.4px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 26px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
.desc {
|
|||
|
|
margin: 4px 0 0;
|
|||
|
|
color: #6b7280;
|
|||
|
|
}
|
|||
|
|
.cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1.6fr 1fr;
|
|||
|
|
gap: 18px;
|
|||
|
|
}
|
|||
|
|
.card {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
|
|||
|
|
padding: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.info-card {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.info-card::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.08), transparent 35%),
|
|||
|
|
radial-gradient(circle at 90% 20%, rgba(14, 165, 233, 0.08), transparent 30%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.info-card > * {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
.card-head {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
gap: 10px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.card-head h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
.muted {
|
|||
|
|
color: #9ca3af;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
.avatar-block {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 14px;
|
|||
|
|
}
|
|||
|
|
.avatar-preview {
|
|||
|
|
width: 104px;
|
|||
|
|
height: 104px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|||
|
|
}
|
|||
|
|
.avatar-preview:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
|
|||
|
|
}
|
|||
|
|
.avatar-preview img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.avatar-placeholder {
|
|||
|
|
color: #9ca3af;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.avatar-meta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
.form-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.field {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #4b5563;
|
|||
|
|
}
|
|||
|
|
.field input,
|
|||
|
|
.field textarea {
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 10px 12px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
outline: none;
|
|||
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|||
|
|
}
|
|||
|
|
.field input:focus,
|
|||
|
|
.field textarea:focus {
|
|||
|
|
border-color: #6366f1;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
|||
|
|
}
|
|||
|
|
.chip-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
.chip-option {
|
|||
|
|
flex: 1;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 10px 12px;
|
|||
|
|
background: #f9fafb;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.15s ease;
|
|||
|
|
}
|
|||
|
|
.chip-option.active {
|
|||
|
|
background: #111827;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #111827;
|
|||
|
|
box-shadow: 0 6px 16px rgba(17, 24, 39, 0.14);
|
|||
|
|
}
|
|||
|
|
.card-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid #d1d5db;
|
|||
|
|
background: #fff;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.18s ease;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.btn:hover {
|
|||
|
|
background: #f3f4f6;
|
|||
|
|
}
|
|||
|
|
.btn.primary {
|
|||
|
|
background: #111827;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #111827;
|
|||
|
|
}
|
|||
|
|
.btn.primary:hover {
|
|||
|
|
background: #0b1324;
|
|||
|
|
}
|
|||
|
|
.btn.ghost {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #111827;
|
|||
|
|
}
|
|||
|
|
.pill-btn {
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
background: #f9fafb;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
padding: 8px 14px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #111827;
|
|||
|
|
transition: all 0.18s ease;
|
|||
|
|
}
|
|||
|
|
.pill-btn:hover {
|
|||
|
|
background: #111827;
|
|||
|
|
color: #fff;
|
|||
|
|
border-color: #111827;
|
|||
|
|
}
|
|||
|
|
.pill-btn.ghost {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.collapse-head {
|
|||
|
|
cursor: pointer;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.collapse-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.password-card {
|
|||
|
|
align-self: start;
|
|||
|
|
}
|
|||
|
|
.fade-enter-active,
|
|||
|
|
.fade-leave-active {
|
|||
|
|
transition: opacity 0.18s ease;
|
|||
|
|
}
|
|||
|
|
.fade-enter-from,
|
|||
|
|
.fade-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 960px) {
|
|||
|
|
.cards {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
.profile-hero {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|