425 lines
13 KiB
JavaScript
425 lines
13 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
import { Card, Tabs, Form, Input, Button, Avatar, Upload, Space, Typography, Modal } from 'antd'
|
||
import { UserOutlined, LockOutlined, UploadOutlined, ApiOutlined, CopyOutlined, ReloadOutlined } from '@ant-design/icons'
|
||
import ImgCrop from 'antd-img-crop'
|
||
import { getCurrentUser, updateProfile, changePassword, uploadAvatar, getMcpCredentials, rotateMcpSecret } from '@/api/auth'
|
||
import useUserStore from '@/stores/userStore'
|
||
import Toast from '@/components/Toast/Toast'
|
||
import './ProfilePage.css'
|
||
|
||
const { Paragraph, Text } = Typography
|
||
|
||
function ProfilePage() {
|
||
const [loading, setLoading] = useState(false)
|
||
const [userInfo, setUserInfo] = useState(null)
|
||
const [mcpCredentials, setMcpCredentials] = useState(null)
|
||
const [profileForm] = Form.useForm()
|
||
const [passwordForm] = Form.useForm()
|
||
const { setUser } = useUserStore()
|
||
|
||
useEffect(() => {
|
||
loadUserInfo()
|
||
loadMcpCredentials()
|
||
}, [])
|
||
|
||
// 加载用户信息
|
||
const loadUserInfo = async () => {
|
||
try {
|
||
const res = await getCurrentUser()
|
||
setUserInfo(res.data)
|
||
profileForm.setFieldsValue({
|
||
username: res.data.username,
|
||
nickname: res.data.nickname,
|
||
email: res.data.email,
|
||
phone: res.data.phone,
|
||
})
|
||
} catch (error) {
|
||
console.error('Load user info error:', error)
|
||
Toast.error('加载用户信息失败')
|
||
}
|
||
}
|
||
|
||
const loadMcpCredentials = async () => {
|
||
try {
|
||
const res = await getMcpCredentials()
|
||
setMcpCredentials(res.data)
|
||
} catch (error) {
|
||
console.error('Load MCP credentials error:', error)
|
||
Toast.error('加载失败', '获取 MCP 凭证失败')
|
||
}
|
||
}
|
||
|
||
// 更新资料
|
||
const handleUpdateProfile = async (values) => {
|
||
setLoading(true)
|
||
try {
|
||
const res = await updateProfile({
|
||
nickname: values.nickname,
|
||
email: values.email,
|
||
phone: values.phone,
|
||
})
|
||
setUserInfo(res.data)
|
||
setUser(res.data) // 更新全局用户信息
|
||
Toast.success('更新成功', '个人资料已更新')
|
||
} catch (error) {
|
||
console.error('Update profile error:', error)
|
||
Toast.error(error.response?.data?.detail || '更新失败')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 修改密码
|
||
const handleChangePassword = async (values) => {
|
||
setLoading(true)
|
||
try {
|
||
await changePassword({
|
||
old_password: values.old_password,
|
||
new_password: values.new_password,
|
||
})
|
||
Toast.success('修改成功', '密码已修改，请重新登录')
|
||
passwordForm.resetFields()
|
||
// 2秒后跳转到登录页
|
||
setTimeout(() => {
|
||
window.location.href = '/login'
|
||
}, 2000)
|
||
} catch (error) {
|
||
console.error('Change password error:', error)
|
||
Toast.error(error.response?.data?.detail || '修改密码失败')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 上传头像前的验证
|
||
const beforeAvatarUpload = (file) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||
if (!isJpgOrPng) {
|
||
Toast.error('格式错误', '仅支持 JPG、PNG 格式的图片')
|
||
return false
|
||
}
|
||
const isLt1M = file.size / 1024 / 1024 < 1
|
||
if (!isLt1M) {
|
||
Toast.error('文件过大', '图片大小不能超过 1MB')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
// 处理头像上传
|
||
const handleAvatarUpload = async (info) => {
|
||
const { file } = info
|
||
|
||
setLoading(true)
|
||
try {
|
||
const res = await uploadAvatar(file)
|
||
setUserInfo(res.data)
|
||
setUser(res.data) // 更新全局用户信息
|
||
Toast.success('上传成功', '头像已更新')
|
||
} catch (error) {
|
||
console.error('Upload avatar error:', error)
|
||
Toast.error('上传失败', error.response?.data?.detail || '头像上传失败')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 获取头像URL
|
||
const getAvatarUrl = () => {
|
||
if (!userInfo?.avatar) return null
|
||
// avatar 字段存储的是相对路径，如：2/avatar/xxx.jpg
|
||
// 需要转换为 API 端点: /api/v1/auth/avatar/{user_id}/{filename}
|
||
const parts = userInfo.avatar.split('/')
|
||
if (parts.length >= 3) {
|
||
const userId = parts[0]
|
||
const filename = parts[2]
|
||
return `/api/v1/auth/avatar/${userId}/${filename}`
|
||
}
|
||
return null
|
||
}
|
||
|
||
const handleCopy = async (value, label) => {
|
||
if (!value) return
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(value)
|
||
Toast.success('复制成功', `${label} 已复制到剪贴板`)
|
||
} catch (error) {
|
||
console.error('Copy credential error:', error)
|
||
Toast.error('复制失败', `无法复制 ${label}`)
|
||
}
|
||
}
|
||
|
||
const handleRotateSecret = () => {
|
||
Modal.confirm({
|
||
title: '重新生成 MCP Secret',
|
||
content: '旧 Secret 会立即失效，依赖该凭证的远程客户端需要同步更新。确认继续？',
|
||
okText: '重新生成',
|
||
cancelText: '取消',
|
||
okButtonProps: { danger: true },
|
||
onOk: async () => {
|
||
setLoading(true)
|
||
try {
|
||
const res = await rotateMcpSecret()
|
||
setMcpCredentials(res.data)
|
||
Toast.success('已生成', '新的 MCP Secret 已生效')
|
||
} catch (error) {
|
||
console.error('Rotate MCP secret error:', error)
|
||
Toast.error('生成失败', error.response?.data?.detail || '重新生成 MCP Secret 失败')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const tabItems = [
|
||
{
|
||
key: 'profile',
|
||
label: (
|
||
<span>
|
||
<UserOutlined />
|
||
个人资料
|
||
</span>
|
||
),
|
||
children: (
|
||
<div className="profile-tab-content">
|
||
<div className="avatar-section">
|
||
<Avatar
|
||
size={100}
|
||
icon={<UserOutlined />}
|
||
src={getAvatarUrl()}
|
||
/>
|
||
<ImgCrop
|
||
rotationSlider
|
||
aspect={1}
|
||
quality={1}
|
||
modalTitle="裁剪头像"
|
||
modalOk="确定"
|
||
modalCancel="取消"
|
||
>
|
||
<Upload
|
||
showUploadList={false}
|
||
beforeUpload={beforeAvatarUpload}
|
||
customRequest={({ file }) => handleAvatarUpload({ file })}
|
||
>
|
||
<Button icon={<UploadOutlined />} style={{ marginTop: 16 }} loading={loading}>
|
||
更换头像
|
||
</Button>
|
||
</Upload>
|
||
</ImgCrop>
|
||
<p className="avatar-tip">支持 JPG、PNG 格式，文件小于 1MB</p>
|
||
</div>
|
||
|
||
<Form
|
||
form={profileForm}
|
||
layout="vertical"
|
||
onFinish={handleUpdateProfile}
|
||
className="profile-form"
|
||
>
|
||
<Form.Item label="用户名" name="username">
|
||
<Input disabled />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="昵称"
|
||
name="nickname"
|
||
rules={[{ max: 50, message: '昵称最多50个字符' }]}
|
||
>
|
||
<Input placeholder="请输入昵称" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="邮箱"
|
||
name="email"
|
||
rules={[
|
||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||
]}
|
||
>
|
||
<Input placeholder="请输入邮箱" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="手机号"
|
||
name="phone"
|
||
rules={[
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' },
|
||
]}
|
||
>
|
||
<Input placeholder="请输入手机号" />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading}>
|
||
保存修改
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: 'password',
|
||
label: (
|
||
<span>
|
||
<LockOutlined />
|
||
修改密码
|
||
</span>
|
||
),
|
||
children: (
|
||
<div className="password-tab-content">
|
||
<Form
|
||
form={passwordForm}
|
||
layout="vertical"
|
||
onFinish={handleChangePassword}
|
||
className="password-form"
|
||
>
|
||
<Form.Item
|
||
label="当前密码"
|
||
name="old_password"
|
||
rules={[{ required: true, message: '请输入当前密码' }]}
|
||
>
|
||
<Input.Password placeholder="请输入当前密码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="新密码"
|
||
name="new_password"
|
||
rules={[
|
||
{ required: true, message: '请输入新密码' },
|
||
{ min: 6, message: '密码至少6个字符' },
|
||
{ max: 50, message: '密码最多50个字符' },
|
||
]}
|
||
>
|
||
<Input.Password placeholder="请输入新密码（至少6个字符）" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="确认新密码"
|
||
name="confirm_password"
|
||
dependencies={['new_password']}
|
||
rules={[
|
||
{ required: true, message: '请确认新密码' },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (!value || getFieldValue('new_password') === value) {
|
||
return Promise.resolve()
|
||
}
|
||
return Promise.reject(new Error('两次输入的密码不一致'))
|
||
},
|
||
}),
|
||
]}
|
||
>
|
||
<Input.Password placeholder="请再次输入新密码" />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={loading}>
|
||
修改密码
|
||
</Button>
|
||
<Button
|
||
style={{ marginLeft: 8 }}
|
||
onClick={() => passwordForm.resetFields()}
|
||
>
|
||
重置
|
||
</Button>
|
||
</Form.Item>
|
||
|
||
<div className="password-tips">
|
||
<h4>密码安全建议：</h4>
|
||
<ul>
|
||
<li>密码长度至少6个字符</li>
|
||
<li>包含字母、数字和特殊字符的组合更安全</li>
|
||
<li>不要使用过于简单的密码，如"123456"</li>
|
||
<li>定期更换密码，提高账户安全性</li>
|
||
</ul>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: 'mcp',
|
||
label: (
|
||
<span>
|
||
<ApiOutlined />
|
||
MCP 接入
|
||
</span>
|
||
),
|
||
children: (
|
||
<div className="mcp-tab-content">
|
||
<div className="mcp-panel">
|
||
<div className="mcp-panel-header">
|
||
<div>
|
||
<h3>MCP 访问凭证</h3>
|
||
<p>用于远程 MCP Client 通过 `X-Bot-Id` 与 `X-Bot-Secret` 接入你的账号。</p>
|
||
</div>
|
||
<Button
|
||
icon={<ReloadOutlined />}
|
||
onClick={handleRotateSecret}
|
||
loading={loading}
|
||
>
|
||
重新生成 Secret
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mcp-field-list">
|
||
<div className="mcp-field-card">
|
||
<label>X-Bot-Id</label>
|
||
<Paragraph copyable={false} className="mcp-value">
|
||
{mcpCredentials?.bot_id || '-'}
|
||
</Paragraph>
|
||
<Button
|
||
icon={<CopyOutlined />}
|
||
onClick={() => handleCopy(mcpCredentials?.bot_id, 'X-Bot-Id')}
|
||
disabled={!mcpCredentials?.bot_id}
|
||
>
|
||
复制 Bot ID
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mcp-field-card">
|
||
<label>X-Bot-Secret</label>
|
||
<Paragraph copyable={false} className="mcp-value mcp-secret">
|
||
{mcpCredentials?.bot_secret || '-'}
|
||
</Paragraph>
|
||
<Space>
|
||
<Button
|
||
icon={<CopyOutlined />}
|
||
onClick={() => handleCopy(mcpCredentials?.bot_secret, 'X-Bot-Secret')}
|
||
disabled={!mcpCredentials?.bot_secret}
|
||
>
|
||
复制 Secret
|
||
</Button>
|
||
<Text type="secondary">变更后旧 Secret 立即失效</Text>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mcp-config-tip">
|
||
<h4>客户端请求头</h4>
|
||
<pre>{`X-Bot-Id: ${mcpCredentials?.bot_id || 'your_bot_id'}\nX-Bot-Secret: ${mcpCredentials?.bot_secret || 'your_bot_secret'}`}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="profile-page">
|
||
<Card className="profile-card">
|
||
<h2 className="profile-title">个人中心</h2>
|
||
<Tabs
|
||
items={tabItems}
|
||
defaultActiveKey="profile"
|
||
tabPosition="left"
|
||
className="profile-tabs"
|
||
/>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ProfilePage
|