feat: metadata list

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<MetadataListProps> = ({
+  dataList,
+  label,
+  description,
+  disabled,
+  btnText,
+  children,
+  onDelete,
+  onAdd
+}) => {
+  return (
+    <Wrapper
+      label={label}
+      description={description}
+      onAdd={onAdd}
+      disabled={disabled}
+      btnText={btnText}
+    >
+      {dataList.map((item, index) => (
+        <ItemContainer key={index}>
+          {children ? children(item, index) : null}
+          {!disabled && (
+            <Button
+              size="small"
+              className="btn"
+              type="default"
+              shape="circle"
+              onClick={() => onDelete?.(index, item)}
+            >
+              <MinusOutlined />
+            </Button>
+          )}
+        </ItemContainer>
+      ))}
+    </Wrapper>
+  );
+};
+
+export default MetadataList;

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
   }

src/pages/model-access/forms/basic.tsx

@@ -13,7 +13,7 @@ const Basic = () => {
       <Form.Item name="name" data-field="name">
         <SealInput.Input required label={'Model Name'} />
       </Form.Item>
-      <Form.Item name="category">
+      <Form.Item name="categories">
         <SealSelect
           options={modelCategories}
           label="Category"

src/pages/model-access/forms/index.tsx

@@ -84,7 +84,13 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <Form form={form} onFinish={onFinish}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        initialValues={{
+          categories: []
+        }}
+      >
         <Basic />
         <CollapsePanel
           activeKey={activeKey}

src/pages/model-access/hooks/use-access-columns.tsx

@@ -6,7 +6,7 @@ import { tableSorter } from '@/config/settings';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
-import { maasProviderLabelMap, rowActionList } from '../config';
+import { rowActionList } from '../config';
 import { AccessItem } from '../config/types';
 
 const useAccessColumns = (
@@ -33,14 +33,7 @@ const useAccessColumns = (
       {
         title: intl.formatMessage({ id: 'models.form.source' }),
         dataIndex: 'source',
-        span: 5,
-        render: (value: string) => (
-          <>
-            <AutoTooltip ghost minWidth={20}>
-              {maasProviderLabelMap[value]}
-            </AutoTooltip>
-          </>
-        )
+        span: 5
       },
       {
         title: intl.formatMessage({ id: 'accesses.table.accessPoints' }),