597 lines
29 KiB
Vue
597 lines
29 KiB
Vue
<script setup>
|
|
import {ref, onMounted, watch} from 'vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import AOS from 'aos'
|
|
import 'aos/dist/aos.css'
|
|
import {changePasswordApi, userMyInfoApi, userStatsApi} from "@/api/request/user.js";
|
|
import {collectionListApi} from "@/api/request/collection.js";
|
|
import {message} from "ant-design-vue";
|
|
|
|
// Initialize userStore outside of userData to avoid conditional hook call
|
|
const userStore = useUserStore()
|
|
|
|
// Initialize userData with default values
|
|
const userData = ref({
|
|
username: '张三',
|
|
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
|
createdAt: '2023-01-15',
|
|
lastLogin: '2023-06-20',
|
|
email: 'user@example.com',
|
|
phone: '138****1234',
|
|
role: '超级管理员',
|
|
projects: 5,
|
|
favorites: 12
|
|
})
|
|
|
|
const getMyInfo = () => {
|
|
userMyInfoApi().then((res) => {
|
|
userData.value = res;
|
|
})
|
|
}
|
|
|
|
getMyInfo();
|
|
|
|
onMounted(() => {
|
|
AOS.init({
|
|
duration: 800,
|
|
offset: 120,
|
|
easing: 'ease-out-cubic',
|
|
once: false
|
|
})
|
|
})
|
|
|
|
const userStats = ref([
|
|
{ label: '已购项目', value: 0, icon: 'shopping-bag' },
|
|
{ label: '收藏项目', value: 0, icon: 'heart' },
|
|
{ label: '账户类型', value: 0, icon: 'user' }
|
|
])
|
|
|
|
const getUserStats = () => {
|
|
userStatsApi().then((res) => {
|
|
userStats.value = res;
|
|
})
|
|
}
|
|
|
|
getUserStats();
|
|
const recentProjects = [
|
|
{ id: 1, title: '电商平台开发', date: '2023-05-15', status: '进行中' },
|
|
{ id: 2, title: 'CRM系统定制', date: '2023-04-10', status: '已完成' },
|
|
{ id: 3, title: '数据分析平台', date: '2023-03-22', status: '已完成' }
|
|
]
|
|
|
|
const myCollectionProjects = ref([]);
|
|
|
|
const getMyCollectionProjects = () => {
|
|
collectionListApi({
|
|
page: 1,
|
|
pageSize: 1000,
|
|
}).then((res) => {
|
|
myCollectionProjects.value = res.items;
|
|
})
|
|
}
|
|
|
|
|
|
const activeTab = ref('profile')
|
|
|
|
watch(() => activeTab.value, (newValue) => {
|
|
if (newValue === 'collection') {
|
|
getMyCollectionProjects();
|
|
}
|
|
})
|
|
|
|
const tabs = [
|
|
{ name: '个人资料', value: 'profile' },
|
|
{ name: '我的收藏', value: 'collection' },
|
|
// { name: '我的项目', value: 'projects' },
|
|
// { name: '我的订单', value: 'orders' },
|
|
// { name: '我的消息', value: 'messages' },
|
|
{ name: '我的设置', value: 'settings' }
|
|
]
|
|
|
|
|
|
const formatPrice = (price) => {
|
|
return '¥ ' + price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
|
|
const getAosEffect = (index) => {
|
|
const screenWidth = window.innerWidth;
|
|
let itemsPerRow;
|
|
if (screenWidth >= 1024) { // PC
|
|
itemsPerRow = 3;
|
|
} else if (screenWidth >= 768) { // 平板
|
|
itemsPerRow = 2;
|
|
} else { // 手机
|
|
itemsPerRow = 1;
|
|
}
|
|
const rowIndex = Math.floor(index / itemsPerRow);
|
|
const colIndex = index % itemsPerRow;
|
|
const aosEffects = [
|
|
['fade-up', 'fade-down', 'fade-left'],
|
|
['fade-right', 'zoom-in', 'zoom-out'],
|
|
['flip-left', 'flip-right', 'slide-up']
|
|
];
|
|
return aosEffects[rowIndex % aosEffects.length][colIndex % aosEffects[0].length];
|
|
}
|
|
|
|
const showChangePasswordModal = ref(false);
|
|
const changePasswordLoading = ref(false);
|
|
const oldPassword = ref('');
|
|
const newPassword = ref('');
|
|
const confirmPassword = ref('');
|
|
const passwordError = ref("")
|
|
|
|
const openChangePasswordModal = () => {
|
|
oldPassword.value = ''
|
|
newPassword.value = ''
|
|
confirmPassword.value = ''
|
|
showChangePasswordModal.value = true;
|
|
}
|
|
const closeChangePasswordModal = () => {
|
|
showChangePasswordModal.value = false;
|
|
}
|
|
|
|
const handleChangePassword = () => {
|
|
// 验证密码
|
|
if (!oldPassword.value) {
|
|
passwordError.value = "请输入旧密码"
|
|
return
|
|
}
|
|
// 验证密码
|
|
if (!newPassword.value) {
|
|
passwordError.value = "请输入新密码"
|
|
return
|
|
}
|
|
|
|
if (newPassword.value.length < 6) {
|
|
passwordError.value = "密码长度不能少于6位"
|
|
return
|
|
}
|
|
|
|
if (newPassword.value !== confirmPassword.value) {
|
|
passwordError.value = "两次输入的密码不一致"
|
|
return
|
|
}
|
|
|
|
changePasswordLoading.value = true
|
|
|
|
changePasswordApi({
|
|
old_password: oldPassword.value,
|
|
new_password: newPassword.value,
|
|
confirm_password: confirmPassword.value,
|
|
}).then(() => {
|
|
message.success(`密码修改成功`)
|
|
closeChangePasswordModal()
|
|
}).finally(() => {
|
|
passwordError.value = "";
|
|
changePasswordLoading.value = false
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
|
|
<div class="max-w-5xl mx-auto px-6">
|
|
<!-- 个人信息卡片 -->
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden mb-10"
|
|
data-aos="fade-up"
|
|
>
|
|
<div class="relative h-48 bg-gradient-to-r from-rose-400 to-rose-600">
|
|
<!-- 装饰图案 -->
|
|
<div class="absolute inset-0 opacity-20">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
|
<defs>
|
|
<pattern id="pattern" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<circle cx="20" cy="20" r="2" fill="white" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#pattern)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 编辑按钮 -->
|
|
<button class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white rounded-full p-2 hover:bg-white/30 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative px-8 pb-8">
|
|
<!-- 头像 -->
|
|
<div class="absolute -top-16 left-8">
|
|
<div class="relative">
|
|
<div class="absolute -inset-1 rounded-full bg-white dark:bg-gray-800"></div>
|
|
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-lg">
|
|
<img
|
|
:src="userData.avatar"
|
|
:alt="userData.username"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="pt-20">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">{{ userData?.nick_name }}</h1>
|
|
<p class="text-rose-600 dark:text-rose-400">{{ userData.roles?.name }}</p>
|
|
</div>
|
|
|
|
<div class="mt-4 md:mt-0">
|
|
<button @click="message.success('正在开发')" class="px-6 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-full shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
|
|
升级会员
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户统计 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<div
|
|
v-for="(stat, index) in userStats"
|
|
:key="index"
|
|
class="bg-gray-50 dark:bg-gray-700/50 rounded-2xl p-4 flex items-center"
|
|
>
|
|
<div class="w-12 h-12 rounded-xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mr-4">
|
|
<svg v-if="stat.icon === 'shopping-bag'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
|
</svg>
|
|
<svg v-else-if="stat.icon === 'heart'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
<svg v-else-if="stat.icon === 'user'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
|
|
<p class="text-lg font-bold text-gray-900 dark:text-white">{{ stat.value }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 标签页导航 -->
|
|
<div class="border-b border-gray-200 dark:border-gray-700">
|
|
<nav class="flex space-x-8">
|
|
<button
|
|
v-for="(item) in tabs"
|
|
:key="item.value"
|
|
@click="activeTab = item.value"
|
|
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 cursor-pointer"
|
|
:class="activeTab === item.value ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
>
|
|
{{item.name}}
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- 标签页内容 -->
|
|
<div class="mb-10" data-aos="fade-up">
|
|
<!-- 个人资料 -->
|
|
<div v-if="activeTab === 'profile'" class="space-y-6">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">基本信息</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">用户名</p>
|
|
<p class="text-gray-900 dark:text-white">{{ userData.nick_name }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">邮箱</p>
|
|
<p class="text-gray-900 dark:text-white">{{ userData.email }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">手机号</p>
|
|
<p class="text-gray-900 dark:text-white">{{ userData.account }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">注册时间</p>
|
|
<p class="text-gray-900 dark:text-white">{{ userData.created_day_at }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">账户安全</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">登录密码</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">上次修改时间: 2023-03-15</p>
|
|
</div>
|
|
<button @click="openChangePasswordModal" class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium cursor-pointer">
|
|
修改
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">手机验证</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">已绑定: {{ userData.phone }}</p>
|
|
</div>
|
|
<button @click="message.warn('正在开发~')" class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium cursor-pointer">
|
|
修改
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的收藏 -->
|
|
<div v-else-if="activeTab === 'collection'" class="space-y-6">
|
|
<!-- 项目卡片网格 -->
|
|
<div v-if="myCollectionProjects.length > 0" class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 mt-10">
|
|
<div
|
|
v-for="(project, index) in myCollectionProjects"
|
|
:key="project.project.id"
|
|
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
|
|
:data-aos="getAosEffect(index)"
|
|
@click="$router.push(`/project/${project.project.id}`)"
|
|
>
|
|
<div class="relative h-56 overflow-hidden">
|
|
<img
|
|
:src="project.project.cover"
|
|
class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
|
|
:alt="project.project.title"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
<div class="absolute top-4 right-4">
|
|
<span
|
|
class="px-3 py-1 bg-black/50 backdrop-blur-md text-white text-xs font-medium rounded-full"
|
|
>
|
|
{{ project.project.category.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span
|
|
v-for="label in project.project.labels"
|
|
:key="label.id"
|
|
class="px-2 py-1 bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-300 text-xs font-medium rounded-lg"
|
|
>
|
|
{{ label.name }}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors">
|
|
{{ project.project.title }}
|
|
</h3>
|
|
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">
|
|
{{ project.project.description }}
|
|
</p>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-lg font-bold text-rose-600 dark:text-rose-400">{{ formatPrice(project.project.price) }}</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">{{ project.project.created_at }}</p>
|
|
</div>
|
|
|
|
<button
|
|
class="w-10 h-10 rounded-full bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400 flex items-center justify-center hover:bg-rose-100 dark:hover:bg-rose-900/40 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的项目 -->
|
|
<div v-else-if="activeTab === 'projects'" class="space-y-6">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">最近项目</h2>
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="project in recentProjects"
|
|
:key="project.id"
|
|
class="flex items-center justify-between p-4 border border-gray-100 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
|
>
|
|
<div>
|
|
<h3 class="font-medium text-gray-900 dark:text-white">{{ project.title }}</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ project.date }}</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span
|
|
class="px-3 py-1 rounded-full text-xs font-medium"
|
|
:class="project.status === '进行中' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'"
|
|
>
|
|
{{ project.status }}
|
|
</span>
|
|
<button class="ml-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center">
|
|
<button class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium flex items-center mx-auto">
|
|
查看全部项目
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 账户设置 -->
|
|
<div v-else-if="activeTab === 'settings'" class="space-y-6">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">通知设置</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">系统通知</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">接收系统更新和安全提醒</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_sys_notifications === 1">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">项目更新</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">接收收藏的项目进度和更新通知</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_collection_notifications === 1">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">营销信息</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">接收优惠和促销信息</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_marketing_notifications === 1">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">隐私设置</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">个人资料可见性</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">控制谁可以查看您的个人资料</p>
|
|
</div>
|
|
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-rose-500 focus:border-rose-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
|
<option value="public">公开</option>
|
|
<option value="friends">仅好友</option>
|
|
<option value="private">私密</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 修改密码模态框 -->
|
|
<div v-if="showChangePasswordModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<!-- 背景遮罩 -->
|
|
<div
|
|
class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
|
|
aria-hidden="true"
|
|
@click="closeChangePasswordModal"
|
|
></div>
|
|
|
|
<!-- 使模态框居中 -->
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- 模态框内容 -->
|
|
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
|
|
<div class="bg-white dark:bg-gray-800 px-6 pt-5 pb-4 sm:p-6">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white" id="modal-title">
|
|
修改密码 - {{ changePasswordUsername }}
|
|
</h3>
|
|
<button
|
|
class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 cursor-pointer"
|
|
@click="closeChangePasswordModal"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleChangePassword" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">旧密码</label>
|
|
<input
|
|
v-model="oldPassword"
|
|
type="password"
|
|
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="请输入旧密码"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">新密码</label>
|
|
<input
|
|
v-model="newPassword"
|
|
type="password"
|
|
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="请输入新密码"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">确认密码</label>
|
|
<input
|
|
v-model="confirmPassword"
|
|
type="password"
|
|
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="请再次输入新密码"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="passwordError" class="text-sm text-red-600 dark:text-red-400">
|
|
{{ passwordError }}
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button
|
|
type="button"
|
|
class="px-5 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
|
|
@click="closeChangePasswordModal"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
|
|
:disabled="changePasswordLoading"
|
|
>
|
|
<span v-if="changePasswordLoading" class="mr-2">
|
|
<svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</span>
|
|
确认重置
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 添加轻奢风格的渐变背景和阴影效果 */
|
|
.bg-gradient-luxury {
|
|
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
|
}
|
|
|
|
/* 暗色模式下的轻奢风格 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.bg-gradient-luxury {
|
|
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
|
}
|
|
}
|
|
</style>
|