diff --git a/src/components/metadata-list/index.tsx b/src/components/metadata-list/index.tsx new file mode 100644 index 00000000..4ba73877 --- /dev/null +++ b/src/components/metadata-list/index.tsx @@ -0,0 +1,78 @@ +import { MinusOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; +import React from 'react'; +import styled from 'styled-components'; +import Wrapper from '../label-selector/wrapper'; + +const ItemContainer = styled.div` + display: flex; + margin-bottom: 12px; + align-items: center; + justify-content: flex-start; + + .seprator { + display: flex; + flex: none; + width: 12px; + align-items: center; + justify-content: center; + color: var(--ant-color-text-tertiary); + } + + .btn { + width: 24px; + margin-left: 10px; + flex: none; + } +`; + +interface MetadataListProps { + dataList: any[]; + label: React.ReactNode; + description?: React.ReactNode; + disabled?: boolean; + btnText?: string; + onAdd?: () => void; + onDelete?: (index: number, item: any) => void; + children?: (item: any, index: number) => React.ReactNode; +} + +const MetadataList: React.FC = ({ + dataList, + label, + description, + disabled, + btnText, + children, + onDelete, + onAdd +}) => { + return ( + + {dataList.map((item, index) => ( + + {children ? children(item, index) : null} + {!disabled && ( + + )} + + ))} + + ); +}; + +export default MetadataList; diff --git a/src/pages/model-access/config/mock.ts b/src/pages/model-access/config/mock.ts index 5587c103..2f761a85 100644 --- a/src/pages/model-access/config/mock.ts +++ b/src/pages/model-access/config/mock.ts @@ -4,31 +4,31 @@ import { AccessItem, AccessPointItem } from './types'; export const mockDataList: AccessItem[] = [ { id: 1, - name: 'Doubao Access', - source: 'Doubao', + name: 'model-A', + source: 'Deployments', accessPoints: 5 }, { id: 2, - name: 'Qwen Access', + name: 'model-B', source: 'Qwen', accessPoints: 3 }, { id: 3, - name: 'OpenAI Access', + name: 'model-C', source: 'OpenAI', accessPoints: 8 }, { id: 4, - name: 'Deepseek Access', + name: 'model-D', source: 'Deepseek', accessPoints: 2 }, { id: 5, - name: 'Anthropic Access', + name: 'model-E', source: 'Anthropic', accessPoints: 4 } diff --git a/src/pages/model-access/forms/basic.tsx b/src/pages/model-access/forms/basic.tsx index 1f9b17b1..434f3e6c 100644 --- a/src/pages/model-access/forms/basic.tsx +++ b/src/pages/model-access/forms/basic.tsx @@ -13,7 +13,7 @@ const Basic = () => { - + = forwardRef((props, ref) => { }} getScrollElementScrollableHeight={getScrollElementScrollableHeight} > -
+ ( - <> - - {maasProviderLabelMap[value]} - - - ) + span: 5 }, { title: intl.formatMessage({ id: 'accesses.table.accessPoints' }),