feat: 增强表格交互体验和数据展示
- 新增每页数量localStorage缓存,刷新后保持用户选择 - 增加表格显示高度从600px到800px,显示更多数据 - 支持点击表格行进行选择,提升操作便利性 - 格式化创建时间显示为详细时间(年/月/日 时:分) - 优化复选框和操作按钮的点击事件冲突 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -58,9 +58,24 @@ export function useAccounts(): UseAccountsReturn {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
||||
|
||||
// 从 localStorage 获取缓存的分页大小,默认为 20
|
||||
const getInitialPageSize = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const saved = localStorage.getItem('accounts-page-size');
|
||||
if (saved) {
|
||||
const pageSize = parseInt(saved, 10);
|
||||
// 验证是否为有效值
|
||||
if ([20, 100, 1000, 10000].includes(pageSize)) {
|
||||
return pageSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 20;
|
||||
};
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
pageSize: getInitialPageSize(),
|
||||
total: 0,
|
||||
totalPages: 0
|
||||
});
|
||||
@@ -92,7 +107,6 @@ export function useAccounts(): UseAccountsReturn {
|
||||
|
||||
// 获取账户列表
|
||||
const fetchAccounts = useCallback(async () => {
|
||||
console.log('fetchAccounts called with pagination:', pagination);
|
||||
setLoading(true);
|
||||
try {
|
||||
const body: ListAccountsBody = {
|
||||
@@ -104,10 +118,8 @@ export function useAccounts(): UseAccountsReturn {
|
||||
sort
|
||||
};
|
||||
|
||||
console.log('Sending request with body:', body);
|
||||
const response = await apiClient.getAccountsList(body);
|
||||
if (response.code === BusinessCode.Success && response.data) {
|
||||
console.log('Response received:', response.data.list.length, 'accounts');
|
||||
setAccounts(response.data.list);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
@@ -136,12 +148,16 @@ export function useAccounts(): UseAccountsReturn {
|
||||
|
||||
// 处理每页大小变化
|
||||
const handlePageSizeChange = (pageSize: number) => {
|
||||
console.log('handlePageSizeChange called with:', pageSize);
|
||||
setPagination(prev => {
|
||||
const newPagination = { ...prev, pageSize, page: 1 };
|
||||
console.log('Setting new pagination:', newPagination);
|
||||
return newPagination;
|
||||
});
|
||||
// 保存到 localStorage
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('accounts-page-size', pageSize.toString());
|
||||
}
|
||||
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
pageSize,
|
||||
page: 1
|
||||
}));
|
||||
};
|
||||
|
||||
// 处理排序
|
||||
|
||||
Reference in New Issue
Block a user