53 lines
1.7 KiB
React
Raw Normal View History

/*
Copyright (C) 2025 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
♻️ refactor: restructure TaskLogsTable into modular component architecture Refactor the monolithic TaskLogsTable component (802 lines) into a modular, maintainable architecture following the established pattern from LogsTable and MjLogsTable refactors. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useTaskLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented modal components for user interactions ### 📁 New Structure ``` web/src/components/table/task-logs/ ├── index.jsx # Main page component orchestrator ├── TaskLogsTable.jsx # Pure table rendering component ├── TaskLogsActions.jsx # Actions area (task records + compact mode) ├── TaskLogsFilters.jsx # Search form component ├── TaskLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer for JSON data web/src/hooks/task-logs/ └── useTaskLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Task-Specific Features Preserved - All task type rendering with icons (MUSIC, LYRICS, video generation) - Platform-specific rendering (Suno, Kling, Jimeng) with distinct colors - Progress indicators for task completion status - Video preview links for successful video generation tasks - Admin-only columns for channel information - Status rendering with appropriate colors and icons ### 🔧 Technical Details - Centralized all business logic in `useTaskLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features - Optimized spacing and layout (reduced gap from 4 to 2 for better density) ### 🎮 Platform Support - **Suno**: Music and lyrics generation with music icons - **Kling**: Video generation with video icons - **Jimeng**: Video generation with distinct purple styling ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization - Streamlined export pattern using `export { default }` ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:33:05 +08:00
import React from 'react';
import { Layout } from '@douyinfe/semi-ui';
import CardPro from '../../common/ui/CardPro.js';
import TaskLogsTable from './TaskLogsTable.jsx';
import TaskLogsActions from './TaskLogsActions.jsx';
import TaskLogsFilters from './TaskLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import ContentModal from './modals/ContentModal.jsx';
import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
const TaskLogsPage = () => {
const taskLogsData = useTaskLogsData();
return (
<>
{/* Modals */}
<ColumnSelectorModal {...taskLogsData} />
<ContentModal {...taskLogsData} />
<Layout>
<CardPro
type="type2"
statsArea={<TaskLogsActions {...taskLogsData} />}
searchArea={<TaskLogsFilters {...taskLogsData} />}
🌟 feat(ui): reusable CompactModeToggle & mobile-friendly CardPro Summary ------- Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens. Removes duplicated code, adds i18n support, and refines overall responsiveness. Details ------- 🎨 UI / Components • Create `common/ui/CompactModeToggle.js` – Provides a single source of truth for switching between “Compact list” and “Adaptive list” – Automatically hides itself on mobile devices via `useIsMobile()` • Refactor table modules to use the new component – `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs` – Deletes legacy in-file toggle buttons & reduces repetition 📱 CardPro improvements • Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button • Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.) • Extend PropTypes to accept the `t` prop; supply a safe fallback • Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic 🔧 Integration • Pass the `t` translation function to every `CardPro` usage across table pages • Remove temporary custom class hooks after logic simplification Benefits -------- ✓ Consistent, DRY compact-mode handling across the entire dashboard ✓ Better mobile experience with decluttered headers ✓ Full translation support for newly added strings ✓ Easier future maintenance (single compact toggle, unified CardPro API)
2025-07-19 01:34:59 +08:00
t={taskLogsData.t}
♻️ refactor: restructure TaskLogsTable into modular component architecture Refactor the monolithic TaskLogsTable component (802 lines) into a modular, maintainable architecture following the established pattern from LogsTable and MjLogsTable refactors. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useTaskLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented modal components for user interactions ### 📁 New Structure ``` web/src/components/table/task-logs/ ├── index.jsx # Main page component orchestrator ├── TaskLogsTable.jsx # Pure table rendering component ├── TaskLogsActions.jsx # Actions area (task records + compact mode) ├── TaskLogsFilters.jsx # Search form component ├── TaskLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer for JSON data web/src/hooks/task-logs/ └── useTaskLogsData.js # Custom hook for state & logic ``` ### 🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ### 🎨 Task-Specific Features Preserved - All task type rendering with icons (MUSIC, LYRICS, video generation) - Platform-specific rendering (Suno, Kling, Jimeng) with distinct colors - Progress indicators for task completion status - Video preview links for successful video generation tasks - Admin-only columns for channel information - Status rendering with appropriate colors and icons ### 🔧 Technical Details - Centralized all business logic in `useTaskLogsData` custom hook - Extracted comprehensive column definitions with Lucide React icons - Split complex UI into focused components (table, actions, filters, modals) - Maintained responsive design patterns for mobile compatibility - Preserved admin permission handling for restricted features - Optimized spacing and layout (reduced gap from 4 to 2 for better density) ### 🎮 Platform Support - **Suno**: Music and lyrics generation with music icons - **Kling**: Video generation with video icons - **Jimeng**: Video generation with distinct purple styling ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization - Streamlined export pattern using `export { default }` ## Breaking Changes None - all existing imports and functionality preserved.
2025-07-18 22:33:05 +08:00
>
<TaskLogsTable {...taskLogsData} />
</CardPro>
</Layout>
</>
);
};
export default TaskLogsPage;