mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-24 16:28:37 +00:00
♻️ refactor: restructure MjLogsTable into modular component architecture
Refactor the monolithic MjLogsTable component (971 lines) into a modular, maintainable architecture following the same pattern as LogsTable refactor. ## What Changed ### 🏗️ Architecture - Split large single file into focused, single-responsibility components - Introduced custom hook `useMjLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented specialized modal components for Midjourney-specific features ### 📁 New Structure ``` web/src/components/table/mj-logs/ ├── index.jsx # Main page component orchestrator ├── MjLogsTable.jsx # Pure table rendering component ├── MjLogsActions.jsx # Actions area (banner + compact mode) ├── MjLogsFilters.jsx # Search form component ├── MjLogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── ContentModal.jsx # Content viewer (text + image preview) web/src/hooks/mj-logs/ └── useMjLogsData.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 ### 🎨 Midjourney-Specific Features Preserved - All task type rendering with icons (IMAGINE, UPSCALE, VARIATION, etc.) - Status rendering with appropriate colors and icons - Image preview functionality for generated artwork - Progress indicators for task completion - Admin-only columns for channel and submission results - Banner notification system for callback settings ### 🔧 Technical Details - Centralized all business logic in `useMjLogsData` 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 ### 🐛 Fixes - Improved component prop passing patterns - Enhanced type safety through better state management - Optimized rendering performance with proper memoization ## Breaking Changes None - all existing imports and functionality preserved.
This commit is contained in:
47
web/src/components/table/mj-logs/MjLogsActions.jsx
Normal file
47
web/src/components/table/mj-logs/MjLogsActions.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { Button, Skeleton, Typography } from '@douyinfe/semi-ui';
|
||||
import { IconEyeOpened } from '@douyinfe/semi-icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const MjLogsActions = ({
|
||||
loading,
|
||||
showBanner,
|
||||
isAdminUser,
|
||||
compactMode,
|
||||
setCompactMode,
|
||||
t,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
|
||||
<div className="flex items-center text-orange-500 mb-2 md:mb-0">
|
||||
<IconEyeOpened className="mr-2" />
|
||||
{loading ? (
|
||||
<Skeleton.Title
|
||||
style={{
|
||||
width: 300,
|
||||
marginBottom: 0,
|
||||
marginTop: 0
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text>
|
||||
{isAdminUser && showBanner
|
||||
? t('当前未开启Midjourney回调,部分项目可能无法获得绘图结果,可在运营设置中开启。')
|
||||
: t('Midjourney 任务记录')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type='tertiary'
|
||||
className="w-full md:w-auto"
|
||||
onClick={() => setCompactMode(!compactMode)}
|
||||
size="small"
|
||||
>
|
||||
{compactMode ? t('自适应列表') : t('紧凑列表')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MjLogsActions;
|
||||
Reference in New Issue
Block a user