1e0b56ac51
Refactor the monolithic RedemptionsTable component (614 lines) into a clean, modular structure following the established tokens component pattern. ### Changes Made: **New Components:** - `RedemptionsColumnDefs.js` - Extract table column definitions and render logic - `RedemptionsActions.jsx` - Extract action buttons (add, batch copy, clear invalid) - `RedemptionsFilters.jsx` - Extract search and filter form components - `RedemptionsDescription.jsx` - Extract description area component - `redemptions/index.jsx` - Main container component managing state and composition **New Hook:** - `useRedemptionsData.js` - Extract all data management, CRUD operations, and business logic **New Constants:** - `redemption.constants.js` - Extract redemption status, actions, and form constants **Architecture Changes:** - Transform RedemptionsTable.jsx into pure table rendering component - Move state management and component composition to index.jsx - Implement consistent prop drilling pattern matching tokens module - Add memoization for performance optimization - Centralize translation function distribution ### Benefits: - **Maintainability**: Each component has single responsibility - **Reusability**: Components and hooks can be used elsewhere - **Testability**: Individual modules can be unit tested - **Team Collaboration**: Multiple developers can work on different modules - **Consistency**: Follows established architectural patterns ### File Structure: ``` redemptions/ ├── index.jsx # Main container (state + composition) ├── RedemptionsTable.jsx # Pure table component ├── RedemptionsActions.jsx # Action buttons ├── RedemptionsFilters.jsx # Search/filter form ├── RedemptionsDescription.jsx # Description area └── RedemptionsColumnDefs.js # Column definitions
52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Button, Space } from '@douyinfe/semi-ui';
|
|
|
|
const CopyTokensModal = ({ visible, onCancel, selectedKeys, copyText, t }) => {
|
|
// Handle copy with name and key format
|
|
const handleCopyWithName = async () => {
|
|
let content = '';
|
|
for (let i = 0; i < selectedKeys.length; i++) {
|
|
content += selectedKeys[i].name + ' sk-' + selectedKeys[i].key + '\n';
|
|
}
|
|
await copyText(content);
|
|
onCancel();
|
|
};
|
|
|
|
// Handle copy with key only format
|
|
const handleCopyKeyOnly = async () => {
|
|
let content = '';
|
|
for (let i = 0; i < selectedKeys.length; i++) {
|
|
content += 'sk-' + selectedKeys[i].key + '\n';
|
|
}
|
|
await copyText(content);
|
|
onCancel();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={t('复制令牌')}
|
|
icon={null}
|
|
visible={visible}
|
|
onCancel={onCancel}
|
|
footer={
|
|
<Space>
|
|
<Button
|
|
type='tertiary'
|
|
onClick={handleCopyWithName}
|
|
>
|
|
{t('名称+密钥')}
|
|
</Button>
|
|
<Button
|
|
onClick={handleCopyKeyOnly}
|
|
>
|
|
{t('仅密钥')}
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
{t('请选择你的复制方式')}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default CopyTokensModal;
|