6799daacd1
1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
• `channels/index.jsx` – composition entry
• `ChannelsTable.jsx` – pure `<Table>` rendering
• `ChannelsActions.jsx` – bulk & settings toolbar
• `ChannelsFilters.jsx` – search / create / column-settings form
• `ChannelsTabs.jsx` – type tabs
• `ChannelsColumnDefs.js` – column definitions & render helpers
• `modals/` – BatchTag, ColumnSelector, ModelTest modals
2. Extract domain hook
• Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
– centralises state, API calls, pagination, filters, batch ops
– now exports `setActivePage`, fixing tab / status switch errors
3. Update wiring
• All sub-components consume data via `useChannelsData` props
• Adjusted import paths after hook relocation
4. Clean legacy file
• Legacy `components/table/ChannelsTable.js` now re-exports new module
5. Bug fixes
• Tab switching, status filter & tag aggregation restored
• Column selector & batch actions operate via unified hook
This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.
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];
|
||
}
|