refactor: 提取站点相关逻辑到自定义hook并优化类型定义

将多处重复的站点数据获取和处理的逻辑提取到自定义hook useSites中
修改origin_id类型为string以匹配实际使用场景
移除调试用的console.log语句
为用户名字段添加可复制功能
This commit is contained in:
tikkhun 2026-01-05 16:31:08 +08:00
parent 5471f7a038
commit 2467a0c3b2
4 changed files with 97 additions and 33 deletions

92
src/hooks/useSites.ts Normal file
View File

@ -0,0 +1,92 @@
import { useState, useEffect } from 'react';
import { sitecontrollerAll } from '@/servers/api/site';
// 站点数据的类型定义
interface Site {
id: number;
name: string;
[key: string]: any;
}
// 自定义 Hook管理站点数据
const useSites = () => {
// 添加站点数据状态
const [sites, setSites] = useState<Site[]>([]);
// 添加加载状态
const [loading, setLoading] = useState<boolean>(false);
// 添加错误状态
const [error, setError] = useState<string | null>(null);
// 获取站点数据
const fetchSites = async () => {
// 设置加载状态为 true
setLoading(true);
// 清空之前的错误信息
setError(null);
try {
// 调用 API 获取所有站点数据
const { data, success } = await sitecontrollerAll();
// 判断请求是否成功
if (success) {
// 将站点数据保存到状态中
setSites(data || []);
} else {
// 如果请求失败,设置错误信息
setError('获取站点数据失败');
}
} catch (error) {
// 捕获异常并打印错误日志
console.error('获取站点数据失败:', error);
// 设置错误信息
setError('获取站点数据时发生错误');
} finally {
// 无论成功与否,都将加载状态设置为 false
setLoading(false);
}
};
// 根据站点ID获取站点名称
const getSiteName = (siteId: number | undefined | null) => {
// 如果站点ID不存在返回默认值
if (!siteId) return '-';
// 如果站点ID是字符串类型直接返回
if (typeof siteId === 'string') {
return siteId;
}
// 在站点列表中查找对应的站点
const site = sites.find((s) => s.id === siteId);
// 如果找到站点返回站点名称否则返回站点ID的字符串形式
return site ? site.name : String(siteId);
};
// 根据站点ID获取站点对象
const getSiteById = (siteId: number | undefined | null) => {
// 如果站点ID不存在返回 null
if (!siteId) return null;
// 在站点列表中查找对应的站点
const site = sites.find((s) => s.id === siteId);
// 返回找到的站点对象,如果找不到则返回 null
return site || null;
};
// 组件加载时获取站点数据
useEffect(() => {
// 调用获取站点数据的函数
fetchSites();
}, []); // 空依赖数组表示只在组件挂载时执行一次
// 返回站点数据和相关方法
return {
sites, // 站点数据列表
loading, // 加载状态
error, // 错误信息
fetchSites, // 重新获取站点数据的方法
getSiteName, // 根据ID获取站点名称的方法
getSiteById, // 根据ID获取站点对象的方法
};
};
// 导出 useSites Hook
export default useSites;

View File

@ -115,34 +115,7 @@ const CustomerList: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const { message } = App.useApp(); const { message } = App.useApp();
const [syncModalVisible, setSyncModalVisible] = useState(false); const [syncModalVisible, setSyncModalVisible] = useState(false);
const [sites, setSites] = useState<any[]>([]); // 添加站点数据状态
// 获取站点数据
const fetchSites = async () => {
try {
const { data, success } = await sitecontrollerAll();
if (success) {
setSites(data || []);
}
} catch (error) {
console.error('获取站点数据失败:', error);
}
};
// 根据站点ID获取站点名称
const getSiteName = (siteId: number | undefined | null) => {
if (!siteId) return '-';
if (typeof siteId === 'string') {
return siteId;
}
const site = sites.find((s) => s.id === siteId);
return site ? site.name : String(siteId);
};
// 组件加载时获取站点数据
useEffect(() => {
fetchSites();
}, []);
const columns: ProColumns<API.GetCustomerDTO>[] = [ const columns: ProColumns<API.GetCustomerDTO>[] = [
{ {
@ -205,7 +178,7 @@ const CustomerList: React.FC = () => {
{ {
title: '用户名', title: '用户名',
dataIndex: 'username', dataIndex: 'username',
hideInSearch: true, copyable: true,
sorter: true, sorter: true,
}, },
{ {
@ -223,6 +196,7 @@ const CustomerList: React.FC = () => {
title: '账单地址', title: '账单地址',
dataIndex: 'billing', dataIndex: 'billing',
hideInSearch: true, hideInSearch: true,
width: 200, width: 200,
render: (billing) => <AddressCell address={billing} title="账单地址" />, render: (billing) => <AddressCell address={billing} title="账单地址" />,
}, },
@ -236,7 +210,6 @@ const CustomerList: React.FC = () => {
{ {
title: '评分', title: '评分',
dataIndex: 'rate', dataIndex: 'rate',
width: 120,
hideInSearch: true, hideInSearch: true,
sorter: true, sorter: true,
render: (_, record) => { render: (_, record) => {

View File

@ -191,10 +191,9 @@ const ListPage: React.FC = () => {
request: async () => { request: async () => {
try { try {
const result = await sitecontrollerAll(); const result = await sitecontrollerAll();
console.log('result',result)
const {success, data}= result const {success, data}= result
if (success && data) { if (success && data) {
return data.map((site: API.SiteConfig) => ({ return data.map((site: any) => ({
label: site.name, label: site.name,
value: site.id, value: site.id,
})); }));

View File

@ -213,7 +213,7 @@ declare namespace API {
/** 站点ID */ /** 站点ID */
site_id?: number; site_id?: number;
/** 原始ID */ /** 原始ID */
origin_id?: number; origin_id?: string;
/** 邮箱 */ /** 邮箱 */
email?: string; email?: string;
/** 名字 */ /** 名字 */