feat(user): add user data management system with global state

- Implement user store with Zustand for global state management
- Create UserDataProvider component to initialize user data on app load
- Add useUserData hook for accessing and managing user data
- Refactor knowledge base list page to use new hooks
This commit is contained in:
2025-10-11 17:18:40 +08:00
parent 6f0332c1ff
commit 836ee763e3
16 changed files with 1256 additions and 243 deletions

View File

@@ -0,0 +1,197 @@
import { useState, useEffect, useCallback } from 'react';
import knowledgeService from '@/services/knowledge_service';
import type { IKnowledge } from '@/interfaces/database/knowledge';
// 知识库列表查询参数接口
export interface KnowledgeListParams {
keywords?: string;
page?: number;
page_size?: number;
}
// 知识库列表响应接口
export interface KnowledgeListResponse {
kbs: IKnowledge[];
total: number;
}
// 知识库列表Hook状态接口
export interface UseKnowledgeListState {
knowledgeBases: IKnowledge[];
total: number;
loading: boolean;
error: string | null;
currentPage: number;
pageSize: number;
keywords: string;
}
// 知识库列表Hook返回值接口
export interface UseKnowledgeListReturn extends UseKnowledgeListState {
fetchKnowledgeBases: (params?: KnowledgeListParams) => Promise<void>;
setKeywords: (keywords: string) => void;
setCurrentPage: (page: number) => void;
setPageSize: (size: number) => void;
refresh: () => Promise<void>;
}
/**
* 知识库列表数据管理Hook
* 支持关键词搜索、分页等功能
*/
export const useKnowledgeList = (
initialParams?: KnowledgeListParams
): UseKnowledgeListReturn => {
const [knowledgeBases, setKnowledgeBases] = useState<IKnowledge[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [currentPage, setCurrentPage] = useState(initialParams?.page || 1);
const [pageSize, setPageSize] = useState(initialParams?.page_size || 10);
const [keywords, setKeywords] = useState(initialParams?.keywords || '');
/**
* 获取知识库列表
*/
const fetchKnowledgeBases = useCallback(async (params?: KnowledgeListParams) => {
try {
setLoading(true);
setError(null);
// 合并参数
const queryParams = {
keywords: params?.keywords ?? keywords,
page: params?.page ?? currentPage,
page_size: params?.page_size ?? pageSize,
};
// 构建请求体
const requestBody: any = {};
if (queryParams.keywords) {
requestBody.keywords = queryParams.keywords;
}
// 构建查询参数
const requestParams: any = {};
if (queryParams.page) {
requestParams.page = queryParams.page;
}
if (queryParams.page_size) {
requestParams.page_size = queryParams.page_size;
}
const response = await knowledgeService.getKnowledgeList(
Object.keys(requestParams).length > 0 ? requestParams : undefined,
Object.keys(requestBody).length > 0 ? requestBody : undefined
);
// 检查响应状态
if (response.data.code === 0) {
const data = response.data.data as KnowledgeListResponse;
setKnowledgeBases(data.kbs || []);
setTotal(data.total || 0);
} else {
throw new Error(response.data.message || '获取知识库列表失败');
}
} catch (err: any) {
const errorMessage = err.response?.data?.message || err.message || '获取知识库列表失败';
setError(errorMessage);
console.error('Failed to fetch knowledge bases:', err);
} finally {
setLoading(false);
}
}, [keywords, currentPage, pageSize]);
/**
* 刷新当前页面数据
*/
const refresh = useCallback(() => {
return fetchKnowledgeBases();
}, [fetchKnowledgeBases]);
/**
* 设置关键词并重置到第一页
*/
const handleSetKeywords = useCallback((newKeywords: string) => {
setKeywords(newKeywords);
setCurrentPage(1);
}, []);
/**
* 设置当前页
*/
const handleSetCurrentPage = useCallback((page: number) => {
setCurrentPage(page);
}, []);
/**
* 设置页面大小并重置到第一页
*/
const handleSetPageSize = useCallback((size: number) => {
setPageSize(size);
setCurrentPage(1);
}, []);
// 初始化时获取数据
useEffect(() => {
fetchKnowledgeBases();
}, [fetchKnowledgeBases]);
return {
knowledgeBases,
total,
loading,
error,
currentPage,
pageSize,
keywords,
fetchKnowledgeBases,
setKeywords: handleSetKeywords,
setCurrentPage: handleSetCurrentPage,
setPageSize: handleSetPageSize,
refresh,
};
};
/**
* 知识库详情Hook
*/
export const useKnowledgeDetail = (kbId: string) => {
const [knowledge, setKnowledge] = useState<IKnowledge | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const fetchKnowledgeDetail = useCallback(async () => {
if (!kbId) return;
try {
setLoading(true);
setError(null);
const response = await knowledgeService.getKnowledgeDetail({ kb_id: kbId });
if (response.data.code === 0) {
setKnowledge(response.data.data);
} else {
throw new Error(response.data.message || '获取知识库详情失败');
}
} catch (err: any) {
const errorMessage = err.response?.data?.message || err.message || '获取知识库详情失败';
setError(errorMessage);
console.error('Failed to fetch knowledge detail:', err);
} finally {
setLoading(false);
}
}, [kbId]);
useEffect(() => {
fetchKnowledgeDetail();
}, [fetchKnowledgeDetail]);
return {
knowledge,
loading,
error,
refresh: fetchKnowledgeDetail,
};
};