014c9450ba
Summary
• Added per-table “Compact / Adaptive” view toggle to all major table components (Tokens, Channels, Logs, MjLogs, TaskLogs, Redemptions, Users).
• Persist user preference in a single localStorage entry (`table_compact_modes`) instead of scattered keys.
Details
1. utils.js
• Re-implemented `getTableCompactMode` / `setTableCompactMode` to read & write a shared JSON object.
• Imported storage-key constant from `constants`.
2. hooks/useTableCompactMode.js
• Hook now consumes the unified helpers and listens to `storage` events via the shared key constant.
3. constants
• Added `TABLE_COMPACT_MODES_KEY` to `common.constant.js` and re-exported via `constants/index.js`.
4. Table components
• Integrated `useTableCompactMode('<tableName>')`.
• Dynamically remove `fixed: 'right'` column and horizontal `scroll` when in compact mode.
• UI: toggle button placed at card title’s right; responsive layout on small screens.
5. UI polish
• Replaced all lucide-react `List`/`ListIcon` usages with Semi UI `IconDescend` for consistency.
• Restored correct icons where `Hash` was intended (TaskLogsTable).
Benefits
• Consistent UX for switching list density across the app.
• Cleaner localStorage footprint with easier future maintenance.
34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import { useState, useEffect, useCallback } from 'react';
|
||
import { getTableCompactMode, setTableCompactMode } from '../helpers';
|
||
import { TABLE_COMPACT_MODES_KEY } from '../constants';
|
||
|
||
/**
|
||
* 自定义 Hook：管理表格紧凑/自适应模式
|
||
* 返回 [compactMode, setCompactMode]。
|
||
* 内部使用 localStorage 保存状态，并监听 storage 事件保持多标签页同步。
|
||
*/
|
||
export function useTableCompactMode(tableKey = 'global') {
|
||
const [compactMode, setCompactModeState] = useState(() => getTableCompactMode(tableKey));
|
||
|
||
const setCompactMode = useCallback((value) => {
|
||
setCompactModeState(value);
|
||
setTableCompactMode(value, tableKey);
|
||
}, [tableKey]);
|
||
|
||
useEffect(() => {
|
||
const handleStorage = (e) => {
|
||
if (e.key === TABLE_COMPACT_MODES_KEY) {
|
||
try {
|
||
const modes = JSON.parse(e.newValue || '{}');
|
||
setCompactModeState(!!modes[tableKey]);
|
||
} catch {
|
||
// ignore parse error
|
||
}
|
||
}
|
||
};
|
||
window.addEventListener('storage', handleStorage);
|
||
return () => window.removeEventListener('storage', handleStorage);
|
||
}, [tableKey]);
|
||
|
||
return [compactMode, setCompactMode];
|
||
}
|