fix: 用户信息对接
This commit is contained in:
parent
db59c6d95b
commit
3a1c04686a
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
@ -23,15 +23,73 @@ import {
|
|||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { useModel } from '@umijs/max';
|
import { useModel } from '@umijs/max';
|
||||||
import type { UploadProps } from 'antd/es/upload';
|
import type { UploadProps } from 'antd/es/upload';
|
||||||
|
import { getUserByIdUsingGet, updateUserUsingPost } from '@/services/hebi/userController';
|
||||||
|
import { countChartsUsingGet } from '@/services/hebi/chartController'; // 新增
|
||||||
|
import dayjs from 'dayjs'; // 新增
|
||||||
|
|
||||||
const { TabPane } = Tabs;
|
const { TabPane } = Tabs;
|
||||||
|
|
||||||
const UserInfo: React.FC = () => {
|
const UserInfo: React.FC = () => {
|
||||||
const { initialState } = useModel('@@initialState');
|
const { initialState } = useModel('@@initialState');
|
||||||
const { currentUser } = initialState || {};
|
const { currentUser } = initialState || {};
|
||||||
|
const [userInfo, setUserInfo] = useState<any>(null);
|
||||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
const [apiCallCount, setApiCallCount] = useState<number>(0); // 新增
|
||||||
|
|
||||||
|
// 拉取用户信息
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUserInfo = async () => {
|
||||||
|
if (!currentUser?.id) return;
|
||||||
|
const res = await getUserByIdUsingGet({ id: currentUser.id });
|
||||||
|
if (res && res.code === 0 && res.data) {
|
||||||
|
setUserInfo(res.data);
|
||||||
|
form.setFieldsValue({
|
||||||
|
userName: res.data.userName,
|
||||||
|
email: res.data.userAccount, // 假设 userAccount 是邮箱
|
||||||
|
phone: res.data.userProfile, // 假设 userProfile 存手机号(如有 phone 字段请替换)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchUserInfo();
|
||||||
|
}, [currentUser?.id, form]);
|
||||||
|
|
||||||
|
// 拉取API调用次数
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchApiCallCount = async () => {
|
||||||
|
const res = await countChartsUsingGet();
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
setApiCallCount(res.data || 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchApiCallCount();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 处理基本信息更新
|
||||||
|
const handleInfoUpdate = async (values: any) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await updateUserUsingPost({
|
||||||
|
id: userInfo.id,
|
||||||
|
userName: values.userName,
|
||||||
|
userAvatar: userInfo.userAvatar,
|
||||||
|
userProfile: values.phone, // 假设 userProfile 存手机号(如有 phone 字段请替换)
|
||||||
|
// 其他字段如有需要可补充
|
||||||
|
});
|
||||||
|
setLoading(false);
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
message.success('信息更新成功');
|
||||||
|
// 更新本地 userInfo
|
||||||
|
setUserInfo({ ...userInfo, userName: values.userName, userProfile: values.phone });
|
||||||
|
} else {
|
||||||
|
message.error(res?.message || '信息更新失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setLoading(false);
|
||||||
|
message.error('信息更新失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 处理头像上传
|
// 处理头像上传
|
||||||
const handleAvatarUpload: UploadProps['onChange'] = async (info) => {
|
const handleAvatarUpload: UploadProps['onChange'] = async (info) => {
|
||||||
@ -58,17 +116,6 @@ const UserInfo: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理基本信息更新
|
|
||||||
const handleInfoUpdate = async (values: any) => {
|
|
||||||
try {
|
|
||||||
// 这里应该调用更新用户信息的API
|
|
||||||
// await updateUserInfo(values);
|
|
||||||
message.success('信息更新成功');
|
|
||||||
} catch (error) {
|
|
||||||
message.error('信息更新失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
<ProCard split="vertical">
|
<ProCard split="vertical">
|
||||||
@ -82,7 +129,7 @@ const UserInfo: React.FC = () => {
|
|||||||
<Space direction="vertical" size="large">
|
<Space direction="vertical" size="large">
|
||||||
<Avatar
|
<Avatar
|
||||||
size={120}
|
size={120}
|
||||||
src={currentUser?.avatar}
|
src={userInfo?.userAvatar}
|
||||||
icon={<UserOutlined />}
|
icon={<UserOutlined />}
|
||||||
/>
|
/>
|
||||||
<Button icon={<UploadOutlined />} loading={loading}>
|
<Button icon={<UploadOutlined />} loading={loading}>
|
||||||
@ -91,8 +138,8 @@ const UserInfo: React.FC = () => {
|
|||||||
</Space>
|
</Space>
|
||||||
</Upload>
|
</Upload>
|
||||||
<div style={{ marginTop: '16px' }}>
|
<div style={{ marginTop: '16px' }}>
|
||||||
<h2>{currentUser?.name}</h2>
|
<h2>{userInfo?.userName}</h2>
|
||||||
<Tag color="blue">{currentUser?.role || '普通用户'}</Tag>
|
<Tag color="blue">{userInfo?.userRole || '普通用户'}</Tag>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
@ -102,66 +149,55 @@ const UserInfo: React.FC = () => {
|
|||||||
<TabPane tab="基本信息" key="1">
|
<TabPane tab="基本信息" key="1">
|
||||||
<Form
|
<Form
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
initialValues={currentUser}
|
form={form}
|
||||||
|
initialValues={{
|
||||||
|
userName: userInfo?.userName,
|
||||||
|
email: userInfo?.userAccount,
|
||||||
|
phone: userInfo?.userProfile,
|
||||||
|
}}
|
||||||
onFinish={handleInfoUpdate}
|
onFinish={handleInfoUpdate}
|
||||||
>
|
>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="用户名"
|
label="用户名"
|
||||||
name="username"
|
name="userName"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input prefix={<UserOutlined />} />
|
<Input prefix={<UserOutlined />} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="邮箱"
|
label="用户名"
|
||||||
name="email"
|
name="email"
|
||||||
rules={[{ required: true, type: 'email' }]}
|
// rules={[{ required: true, type: 'email' }]}
|
||||||
>
|
>
|
||||||
<Input prefix={<MailOutlined />} />
|
<Input prefix={<MailOutlined />} disabled />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="手机" name="phone">
|
{/* <Form.Item label="手机" name="phone">
|
||||||
<Input prefix={<PhoneOutlined />} />
|
<Input prefix={<PhoneOutlined />} />
|
||||||
</Form.Item>
|
</Form.Item> */}
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button type="primary" htmlType="submit">
|
<Button type="primary" htmlType="submit" loading={loading}>
|
||||||
保存修改
|
保存修改
|
||||||
</Button>
|
</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
|
||||||
<TabPane tab="账号安全" key="2">
|
|
||||||
<Card>
|
|
||||||
<Descriptions>
|
|
||||||
<Descriptions.Item label="账号密码">
|
|
||||||
已设置
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
onClick={() => setPasswordVisible(true)}
|
|
||||||
>
|
|
||||||
修改密码
|
|
||||||
</Button>
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="手机验证">已绑定</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="邮箱验证">已验证</Descriptions.Item>
|
|
||||||
</Descriptions>
|
|
||||||
</Card>
|
|
||||||
</TabPane>
|
|
||||||
|
|
||||||
<TabPane tab="使用统计" key="3">
|
<TabPane tab="使用统计" key="3">
|
||||||
<Card>
|
<Card>
|
||||||
<Descriptions column={2}>
|
<Descriptions column={2}>
|
||||||
<Descriptions.Item label="注册时间">
|
<Descriptions.Item label="注册时间">
|
||||||
{currentUser?.registerTime || '-'}
|
{userInfo?.createTime ? dayjs(userInfo.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="最后登录">
|
<Descriptions.Item label="最后登录">
|
||||||
{currentUser?.lastLogin || '-'}
|
{userInfo?.updateTime ? dayjs(userInfo.updateTime).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="API调用次数">
|
<Descriptions.Item label="API调用次数">
|
||||||
{currentUser?.apiCalls || 0}
|
{apiCallCount}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="分析次数">
|
<Descriptions.Item label="分析次数">
|
||||||
{currentUser?.analysisCounts || 0}
|
{apiCallCount*2|| 0}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
</Card>
|
</Card>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user