4c673d2628
- **Code Organization & Architecture:** - Restructured component with clear sections (Hooks, Constants, Helper Functions, etc.) - Added comprehensive code organization comments for better maintainability - Extracted reusable helper functions and constants for better separation of concerns - **Performance Optimizations:** - Implemented extensive use of useCallback and useMemo hooks for expensive operations - Optimized data processing pipeline with dedicated processing functions - Memoized chart configurations, performance metrics, and grouped stats data - Cached helper functions like getTrendSpec, handleCopyUrl, and modal handlers - **UI/UX Enhancements:** - Added Empty state component with construction illustrations for better UX - Implemented responsive grid layout with conditional API info section visibility - Enhanced button styling with consistent rounded design and hover effects - Added mini trend charts to statistics cards for visual data representation - Improved form field consistency with reusable createFormField helper - **Feature Improvements:** - Added self-use mode detection to conditionally hide/show API information section - Enhanced chart configurations with centralized CHART_CONFIG constant - Improved time handling with dedicated helper functions (getTimeInterval, getInitialTimestamp) - Added comprehensive performance metrics calculation (RPM/TPM trends) - Implemented advanced data aggregation and processing workflows - **Code Quality & Maintainability:** - Extracted complex data processing logic into dedicated functions - Added proper prop destructuring and state organization - Implemented consistent naming conventions and helper utilities - Enhanced error handling and loading states management - Added comprehensive JSDoc-style comments for better code documentation - **Technical Debt Reduction:** - Replaced repetitive form field definitions with reusable components - Consolidated chart update logic into centralized updateChartSpec function - Improved data flow with better state management patterns - Reduced code duplication through strategic use of helper functions This refactor significantly improves component performance, maintainability, and user experience while maintaining backward compatibility and existing functionality.
88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import SystemSetting from '../../components/settings/SystemSetting.js';
|
|
import { isRoot } from '../../helpers';
|
|
import OtherSetting from '../../components/settings/OtherSetting';
|
|
import OperationSetting from '../../components/settings/OperationSetting.js';
|
|
import RateLimitSetting from '../../components/settings/RateLimitSetting.js';
|
|
import ModelSetting from '../../components/settings/ModelSetting.js';
|
|
import DashboardSetting from '../../components/settings/DashboardSetting.js';
|
|
|
|
const Setting = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [tabActiveKey, setTabActiveKey] = useState('1');
|
|
let panes = [];
|
|
|
|
if (isRoot()) {
|
|
panes.push({
|
|
tab: t('运营设置'),
|
|
content: <OperationSetting />,
|
|
itemKey: 'operation',
|
|
});
|
|
panes.push({
|
|
tab: t('速率限制设置'),
|
|
content: <RateLimitSetting />,
|
|
itemKey: 'ratelimit',
|
|
});
|
|
panes.push({
|
|
tab: t('模型相关设置'),
|
|
content: <ModelSetting />,
|
|
itemKey: 'models',
|
|
});
|
|
panes.push({
|
|
tab: t('系统设置'),
|
|
content: <SystemSetting />,
|
|
itemKey: 'system',
|
|
});
|
|
panes.push({
|
|
tab: t('其他设置'),
|
|
content: <OtherSetting />,
|
|
itemKey: 'other',
|
|
});
|
|
panes.push({
|
|
tab: t('仪表盘配置'),
|
|
content: <DashboardSetting />,
|
|
itemKey: 'dashboard',
|
|
});
|
|
}
|
|
const onChangeTab = (key) => {
|
|
setTabActiveKey(key);
|
|
navigate(`?tab=${key}`);
|
|
};
|
|
useEffect(() => {
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const tab = searchParams.get('tab');
|
|
if (tab) {
|
|
setTabActiveKey(tab);
|
|
} else {
|
|
onChangeTab('operation');
|
|
}
|
|
}, [location.search]);
|
|
return (
|
|
<div>
|
|
<Layout>
|
|
<Layout.Content>
|
|
<Tabs
|
|
type='line'
|
|
activeKey={tabActiveKey}
|
|
onChange={(key) => onChangeTab(key)}
|
|
>
|
|
{panes.map((pane) => (
|
|
<TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>
|
|
{tabActiveKey === pane.itemKey && pane.content}
|
|
</TabPane>
|
|
))}
|
|
</Tabs>
|
|
</Layout.Content>
|
|
</Layout>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Setting;
|