feat: add access list

config/routes.ts

@@ -115,6 +115,16 @@ export default [
         access: 'canSeeAdmin',
         component: './maas-provider/index'
       },
+      {
+        name: 'accesses',
+        path: '/models/accesses',
+        key: 'accesses',
+        icon: 'icon-extension-outline',
+        selectedIcon: 'icon-extension-filled',
+        defaultIcon: 'icon-extension-outline',
+        access: 'canSeeAdmin',
+        component: './model-access/index'
+      },
       {
         name: 'userModels',
         path: '/models/user-models',

src/locales/en-US/accesses.ts

@@ -0,0 +1,6 @@
+export default {
+  'accesses.title': 'Accesses',
+  'accesses.button.add': 'Add Access',
+  'accesses.table.accessPoints': 'Access Points',
+  'accesses.table.traffic': 'Traffic Share'
+};

src/locales/en-US/menu.ts

@@ -16,8 +16,8 @@ export default {
   'menu.models.userModels': 'My Models',
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
-  'menu.models.provider': 'Provider',
+  'menu.models.providers': 'Providers',
-  'menu.models.providers': 'Provider',
+  'menu.models.accesses': 'Accesses',
   'menu.modelCatalog': 'Catalog',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',

src/locales/en-US/no-result.ts

@@ -45,5 +45,8 @@ export default {
   'noresult.benchmark.nofound': 'No matching benchmarks found.',
   'noresult.provider.title': 'No Providers',
   'noresult.provider.subTitle': 'No providers have been added yet.',
-  'noresult.provider.nofound': 'No matching providers found.'
+  'noresult.provider.nofound': 'No matching providers found.',
+  'noresult.accesses.title': 'No Accesses',
+  'noresult.accesses.subTitle': 'No accesses have been added yet.',
+  'noresult.accesses.nofound': 'No matching accesses found.'
 };

src/locales/ja-JP/accesses.ts

@@ -0,0 +1,6 @@
+export default {
+  'accesses.title': 'Accesses',
+  'accesses.button.add': 'Add Access',
+  'accesses.table.accessPoints': 'Access Points',
+  'accesses.table.traffic': 'Traffic Share'
+};

src/locales/ja-JP/menu.ts

@@ -16,7 +16,8 @@ export default {
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
   'menu.modelCatalog': 'カタログ',
-  'menu.models.providers': 'Provider',
+  'menu.models.providers': 'Providers',
+  'menu.models.accesses': 'Accesses',
   'menu.resources': 'リソース',
   'menu.apikeys': 'APIキー',
   'menu.users': 'ユーザー',

src/locales/ja-JP/no-result.ts

@@ -45,5 +45,8 @@ export default {
   'noresult.benchmark.nofound': 'No matching benchmarks found.',
   'noresult.provider.title': 'No Providers',
   'noresult.provider.subTitle': 'No providers have been added yet.',
-  'noresult.provider.nofound': 'No matching providers found.'
+  'noresult.provider.nofound': 'No matching providers found.',
+  'noresult.accesses.title': 'No Accesses',
+  'noresult.accesses.subTitle': 'No accesses have been added yet.',
+  'noresult.accesses.nofound': 'No matching accesses found.'
 };

src/locales/ru-RU/accesses.ts

@@ -0,0 +1,6 @@
+export default {
+  'accesses.title': 'Accesses',
+  'accesses.button.add': 'Add Access',
+  'accesses.table.accessPoints': 'Access Points',
+  'accesses.table.traffic': 'Traffic Share'
+};

src/locales/ru-RU/menu.ts

@@ -16,7 +16,8 @@ export default {
   'menu.models.benchmark': 'Benchmarks',
   'menu.models.benchmarkDetail': 'Benchmark Details',
   'menu.models.provider': 'Provider',
-  'menu.models.providers': 'Provider',
+  'menu.models.providers': 'Providers',
+  'menu.models.accesses': 'Accesses',
   'menu.modelCatalog': 'Каталог',
   'menu.resources': 'Ресурсы',
   'menu.apikeys': 'API-ключи',
@@ -42,10 +43,15 @@ export default {
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 <<<<<<< HEAD
+<<<<<<< HEAD
 // 1. 'menu.models.benchmark': 'Benchmarks',
 // 2. 'menu.models.benchmarkDetail': 'Benchmark Details',
 // 1. 'menu.models.provider': 'Provider',
 =======
 // 1. 'menu.models.providers': 'Provider',
 >>>>>>> ddf1a270 (feat: provider lsit)
+=======
+// 1. 'menu.models.providers': 'Providers',
+// 2. 'menu.models.accesses': 'Accesses',
+>>>>>>> 11d2c02d (feat: add access list)
 // ========== End of To-Do List ==========

src/locales/ru-RU/no-result.ts

@@ -46,7 +46,10 @@ export default {
   'noresult.benchmark.nofound': 'No matching benchmarks found.',
   'noresult.provider.title': 'No Providers',
   'noresult.provider.subTitle': 'No providers have been added yet.',
-  'noresult.provider.nofound': 'No matching providers found.'
+  'noresult.provider.nofound': 'No matching providers found.',
+  'noresult.accesses.title': 'No Accesses',
+  'noresult.accesses.subTitle': 'No accesses have been added yet.',
+  'noresult.accesses.nofound': 'No matching accesses found.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -59,5 +62,8 @@ export default {
 // 7. 'noresult.benchmark.nofound': 'No matching benchmarks found.'
 // 5. 'noresult.provider.title': 'No Providers',
 // 6. 'noresult.provider.subTitle': 'No providers have been added yet.',
-// 7. 'noresult.provider.nofound': 'No matching providers found.'
+// 7. 'noresult.provider.nofound': 'No matching providers found.',
+// 8. 'noresult.accesses.title': 'No Accesses',
+// 9. 'noresult.accesses.subTitle': 'No accesses have been added yet.',
+// 10. 'noresult.accesses.nofound': 'No matching accesses found.'
 // ========================================================================

src/locales/zh-CN/accesses.ts

@@ -0,0 +1,6 @@
+export default {
+  'accesses.title': '接入',
+  'accesses.button.add': '添加接入',
+  'accesses.table.accessPoints': '接入点',
+  'accesses.table.traffic': '流量'
+};

src/locales/zh-CN/menu.ts

@@ -17,6 +17,7 @@ export default {
   'menu.models.benchmarkDetail': '基准测试详情',
   'menu.models.provider': '渠道',
   'menu.models.providers': '渠道',
+  'menu.models.accesses': '接入',
   'menu.modelCatalog': '模型库',
   'menu.models.catalog': '模型库',
   'menu.resources': '资源',

src/locales/zh-CN/no-result.ts

@@ -43,5 +43,8 @@ export default {
   'noresult.benchmark.nofound': '未找到匹配的基准测试',
   'noresult.provider.title': '暂无渠道',
   'noresult.provider.subTitle': '尚未添加任何渠道。',
-  'noresult.provider.nofound': '未找到匹配的渠道'
+  'noresult.provider.nofound': '未找到匹配的渠道',
+  'noresult.accesses.title': '暂无接入',
+  'noresult.accesses.subTitle': '尚未添加任何接入。',
+  'noresult.accesses.nofound': '未找到匹配的接入'
 };

src/pages/model-access/apis/index.ts

@@ -0,0 +1,47 @@
+import { request } from '@umijs/max';
+import { AccessItem, FormData } from '../config/types';
+
+export const ACCESS_API = '/accesses';
+
+export const ACCESS_POINTS_API = '/models';
+
+export async function queryModelAccesses(
+  params: Global.SearchParams,
+  options?: any
+) {
+  return request<Global.PageResponse<AccessItem>>(ACCESS_API, {
+    params,
+    method: 'GET',
+    cancelToken: options?.token
+  });
+}
+
+export async function createAccess(params: { data: FormData }) {
+  return request(`${ACCESS_API}`, {
+    method: 'POST',
+    data: params.data
+  });
+}
+
+export async function updateAccess(params: { id: number; data: FormData }) {
+  return request(`${ACCESS_API}/${params.id}`, {
+    method: 'PUT',
+    data: params.data
+  });
+}
+
+export async function deleteAccess(id: number) {
+  return request(`${ACCESS_API}/${id}`, {
+    method: 'DELETE'
+  });
+}
+
+export async function queryAccessPoints(params: { id: string }, options?: any) {
+  return request<Global.BaseOption<string>[]>(
+    `${ACCESS_API}/${params.id}/points`,
+    {
+      method: 'GET',
+      cancelToken: options?.token
+    }
+  );
+}

src/pages/model-access/components/access-points.tsx

@@ -0,0 +1,117 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
+import RowChildren from '@/components/seal-table/components/row-children';
+import StatusTag from '@/components/status-tag';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Col, Row } from 'antd';
+import dayjs from 'dayjs';
+import React from 'react';
+import styled from 'styled-components';
+
+const CellContent = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+interface ProviderModelProps {
+  dataList: any[];
+  provider: string;
+  providerId: number;
+}
+
+interface AccessItemProps {
+  onSelect: (val: any, record: any) => void;
+  data: any;
+}
+
+export const childActionList = [
+  {
+    key: 'viewlog',
+    label: 'common.button.viewlog',
+    icon: <IconFont type="icon-logs" />
+  },
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: <DeleteOutlined />,
+    props: {
+      danger: true
+    }
+  }
+];
+
+const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
+  return (
+    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
+      <RowChildren>
+        <Row gutter={16} style={{ width: '100%' }}>
+          <Col span={5}>
+            <CellContent
+              style={{
+                paddingInline: 'var(--ant-table-cell-padding-inline)'
+              }}
+            >
+              <AutoTooltip ghost>qwen3-0.6b-zduxy</AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={5}>
+            <CellContent style={{ paddingLeft: 44 }}>
+              <AutoTooltip ghost>Traffic: 20%</AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={5}>
+            <CellContent style={{ paddingLeft: 44 }}>
+              <AutoTooltip ghost>
+                <StatusTag
+                  statusValue={{
+                    status: 'success',
+                    text: 'Ready',
+                    message: ''
+                  }}
+                />
+              </AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={5}>
+            <CellContent style={{ paddingLeft: 44 }}>
+              <AutoTooltip ghost minWidth={20}>
+                {dayjs().format('YYYY-MM-DD HH:mm:ss')}
+              </AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={3}>
+            <CellContent style={{ paddingLeft: 36 }}>
+              <DropdownButtons
+                items={childActionList}
+                onSelect={onSelect}
+              ></DropdownButtons>
+            </CellContent>
+          </Col>
+        </Row>
+      </RowChildren>
+    </div>
+  );
+};
+
+const AccessPoints: React.FC<ProviderModelProps> = ({ dataList }) => {
+  console.log('AccessPoints dataList:', dataList);
+  return (
+    <div>
+      {Array(2)
+        .fill(1)
+        .map((item, index) => (
+          <AccessItem
+            data={item}
+            key={index}
+            onSelect={(val, record) => {
+              console.log('Selected action:', val, 'on record:', record);
+            }}
+          ></AccessItem>
+        ))}
+    </div>
+  );
+};
+
+export default AccessPoints;

src/pages/model-access/components/add-access-modal.tsx

@@ -0,0 +1,62 @@
+import { PageActionType } from '@/config/types';
+import FormDrawer from '@/pages/_components/form-drawer';
+import React, { useRef } from 'react';
+import { FormData, AccessItem as ListItem } from '../config/types';
+
+import { maasProviderType } from '../config';
+import ProviderForm from '../forms';
+
+type AddModalProps = {
+  title: string;
+  action: PageActionType;
+  open: boolean;
+  currentData?: ListItem; // Used when action is EDIT
+  provider: maasProviderType | null;
+  onOk: (values: FormData) => void;
+  onCancel: () => void;
+};
+const AddProvider: React.FC<AddModalProps> = ({
+  title,
+  action,
+  open,
+  provider,
+  currentData,
+  onOk,
+  onCancel
+}) => {
+  const form = useRef<any>(null);
+
+  const handleSubmit = () => {
+    form.current?.submit();
+  };
+
+  const handleOk = async (data: FormData) => {
+    onOk({
+      ...data
+    });
+  };
+
+  const handleCancel = () => {
+    form.current?.resetFields();
+    onCancel();
+  };
+
+  return (
+    <FormDrawer
+      title={title}
+      open={open}
+      onCancel={handleCancel}
+      onSubmit={handleSubmit}
+      width={600}
+    >
+      <ProviderForm
+        ref={form}
+        action={action}
+        currentData={currentData}
+        onFinish={handleOk}
+      />
+    </FormDrawer>
+  );
+};
+
+export default AddProvider;

src/pages/model-access/config/index.ts

@@ -0,0 +1,76 @@
+import icons from '@/components/icon-font/icons';
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
+
+export type maasProviderType =
+  | 'doubao'
+  | 'qwen'
+  | 'openai'
+  | 'deepseek'
+  | 'anthropic';
+
+export const maasProviderValueMap = {
+  Doubao: 'doubao',
+  Qwen: 'qwen',
+  OpenAI: 'openai',
+  Deepseek: 'deepseek',
+  Anthropic: 'anthropic'
+};
+
+export const maasProviderLabelMap = {
+  [maasProviderValueMap.Doubao]: 'Doubao',
+  [maasProviderValueMap.Qwen]: 'Qwen',
+  [maasProviderValueMap.OpenAI]: 'OpenAI',
+  [maasProviderValueMap.Deepseek]: 'Deepseek',
+  [maasProviderValueMap.Anthropic]: 'Anthropic'
+};
+
+export const providerIconsMap = {
+  [maasProviderValueMap.Doubao]: 'icon-doubao',
+  [maasProviderValueMap.Qwen]: 'icon-qwen',
+  [maasProviderValueMap.OpenAI]: 'icon-openai',
+  [maasProviderValueMap.Deepseek]: 'icon-deepseek',
+  [maasProviderValueMap.Anthropic]: 'icon-anthropic'
+};
+
+export const maasProviderOptions = Object.entries(maasProviderValueMap).map(
+  ([key, value]) => ({
+    label: maasProviderLabelMap[value],
+    value: value,
+    key: value,
+    locale: false,
+    icon: providerIconsMap[value]
+  })
+);
+
+export const ProviderStatusValueMap: Record<string, string> = {
+  Ready: 'Ready',
+  InActive: 'Inactive'
+};
+
+export const ProviderStatusLabelMap = {
+  [ProviderStatusValueMap.Ready]: 'Ready',
+  [ProviderStatusValueMap.InActive]: 'Inactive'
+};
+
+export const ProviderStatus: Record<string, StatusType> = {
+  [ProviderStatusValueMap.Ready]: StatusMaps.success,
+  [ProviderStatusValueMap.InActive]: StatusMaps.error
+};
+
+// actions for each row
+export const rowActionList = [
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: icons.EditOutlined
+  },
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: icons.DeleteOutlined,
+    props: {
+      danger: true
+    }
+  }
+];

src/pages/model-access/config/mock.ts

@@ -0,0 +1,35 @@
+import { AccessItem } from './types';
+
+// mock data for AccessItem 5 items
+export const mockDataList: AccessItem[] = [
+  {
+    id: 1,
+    name: 'Doubao Access',
+    source: 'Doubao',
+    accessPoints: 5
+  },
+  {
+    id: 2,
+    name: 'Qwen Access',
+    source: 'Qwen',
+    accessPoints: 3
+  },
+  {
+    id: 3,
+    name: 'OpenAI Access',
+    source: 'OpenAI',
+    accessPoints: 8
+  },
+  {
+    id: 4,
+    name: 'Deepseek Access',
+    source: 'Deepseek',
+    accessPoints: 2
+  },
+  {
+    id: 5,
+    name: 'Anthropic Access',
+    source: 'Anthropic',
+    accessPoints: 4
+  }
+];

src/pages/model-access/config/types.ts

@@ -0,0 +1,12 @@
+export interface AccessItem {
+  id: number;
+  name: string;
+  source: string;
+  accessPoints?: number;
+}
+
+export interface FormData {
+  name: string;
+  category: string;
+  description: string;
+}

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

@@ -0,0 +1,32 @@
+import { PageActionType } from '@/config/types';
+import { Form } from 'antd';
+import { forwardRef, useImperativeHandle } from 'react';
+import { MaasProviderItem as ListItem } from '../config/types';
+
+interface ProviderFormProps {
+  ref?: any;
+  action: PageActionType;
+  currentData?: ListItem; // Used when action is EDIT
+  onFinish: (values: FormData) => void;
+}
+
+const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
+  const [form] = Form.useForm();
+
+  useImperativeHandle(ref, () => ({
+    submit: () => {
+      form.submit();
+    },
+    resetFields: () => {
+      form.resetFields();
+    }
+  }));
+
+  return (
+    <Form form={form} layout="vertical">
+      {/* Form fields go here */}
+    </Form>
+  );
+});
+
+export default ProviderForm;

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

@@ -0,0 +1,92 @@
+// columns.ts
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
+import { SealColumnProps } from '@/components/seal-table/types';
+import { tableSorter } from '@/config/settings';
+import { useIntl } from '@umijs/max';
+import { Tag } from 'antd';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import {
+  maasProviderLabelMap,
+  providerIconsMap,
+  rowActionList
+} from '../config';
+import { AccessItem } from '../config/types';
+
+const useAccessColumns = (
+  handleSelect: (val: string, record: AccessItem) => void,
+  onCellClick?: (record: AccessItem, dataIndex: string) => void
+): SealColumnProps[] => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        sorter: tableSorter(1),
+        span: 5,
+        render: (text: string, record: AccessItem) => (
+          <>
+            <AutoTooltip ghost title={text}>
+              {text}
+            </AutoTooltip>
+            {record.builtIn && (
+              <Tag color="blue" style={{ marginLeft: 8 }}>
+                BuiltIn
+              </Tag>
+            )}
+          </>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'models.form.source' }),
+        dataIndex: 'source',
+        span: 5,
+        render: (value: string) => (
+          <>
+            <IconFont
+              type={providerIconsMap[value]}
+              style={{ marginRight: 8, fontSize: 16 }}
+            ></IconFont>
+            <AutoTooltip ghost minWidth={20}>
+              {maasProviderLabelMap[value]}
+            </AutoTooltip>
+          </>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'accesses.table.accessPoints' }),
+        dataIndex: 'accessPoints',
+        span: 5,
+        render: (value: number) => <span>{value}</span>
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        sorter: tableSorter(6),
+        span: 5,
+        render: (value: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        dataIndex: 'operations',
+        span: 4,
+        render: (value: string, record: AccessItem) => (
+          <DropdownButtons
+            items={rowActionList}
+            onSelect={(val) => handleSelect(val, record)}
+          ></DropdownButtons>
+        )
+      }
+    ];
+  }, [handleSelect, onCellClick]);
+};
+
+export default useAccessColumns;

src/pages/model-access/hooks/use-create-access.ts

@@ -0,0 +1,39 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+import { maasProviderType } from '../config';
+import { AccessItem as ListItem } from '../config/types';
+
+const useCreateAccess = (options: { refresh: () => void }) => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    currentData?: ListItem;
+    title: string;
+    provider: maasProviderType | null;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    currentData: undefined,
+    title: '',
+    provider: null
+  });
+
+  const openModal = () => {
+    setOpenModalStatus({ ...openModalStatus, open: true });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({ ...openModalStatus, open: false });
+    options.refresh();
+  };
+
+  return {
+    openAccessModalStatus: openModalStatus,
+    setOpenAccessModalStatus: setOpenModalStatus,
+    openAccessModal: openModal,
+    closeAccessModal: closeModal
+  };
+};
+
+export default useCreateAccess;

src/pages/model-access/index.tsx

@@ -0,0 +1,259 @@
+import { expandKeysAtom } from '@/atoms/clusters';
+import DeleteModal from '@/components/delete-modal';
+import IconFont from '@/components/icon-font';
+import { FilterBar } from '@/components/page-tools';
+import SealTable from '@/components/seal-table';
+import TableContext from '@/components/seal-table/table-context';
+import { TableOrder } from '@/components/seal-table/types';
+import { PageAction } from '@/config';
+import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
+import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
+import useTableFetch from '@/hooks/use-table-fetch';
+import useWatchList from '@/hooks/use-watch-list';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { message } from 'antd';
+import { useAtom } from 'jotai';
+import _ from 'lodash';
+import NoResult from '../_components/no-result';
+import PageBox from '../_components/page-box';
+import {
+  ACCESS_API,
+  ACCESS_POINTS_API,
+  deleteAccess,
+  queryModelAccesses,
+  updateAccess
+} from './apis';
+import AccessPoints from './components/access-points';
+import AddAccessModal from './components/add-access-modal';
+import { maasProviderOptions } from './config';
+import { mockDataList } from './config/mock';
+import { FormData, AccessItem as ListItem } from './config/types';
+import useAccessColumns from './hooks/use-access-columns';
+import useCreateAccess from './hooks/use-create-access';
+
+const Accesses: React.FC = () => {
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    modalRef,
+    handleTableChange,
+    handleDelete,
+    handleDeleteBatch,
+    fetchData,
+    handlePageChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryModelAccesses,
+    deleteAPI: deleteAccess,
+    watch: false,
+    API: ACCESS_API,
+    contentForDelete: 'menu.models.access'
+  });
+  const { watchDataList: allAccessPoints } = useWatchList(ACCESS_POINTS_API);
+  const [expandAtom] = useAtom(expandKeysAtom);
+  const { handleExpandChange, handleExpandAll, expandedRowKeys } =
+    useExpandedRowKeys(expandAtom);
+  const intl = useIntl();
+  const {
+    openAccessModalStatus,
+    setOpenAccessModalStatus,
+    openAccessModal,
+    closeAccessModal
+  } = useCreateAccess({
+    refresh: handleSearch
+  });
+
+  const handleClickDropdown = () => {
+    openAccessModal();
+  };
+
+  const handleModalOk = async (data: FormData) => {
+    const params = {
+      ...data
+    };
+    try {
+      if (openAccessModalStatus.action === PageAction.EDIT) {
+        await updateAccess({
+          data: params,
+          id: openAccessModalStatus.currentData!.id
+        });
+      }
+      fetchData();
+      setOpenAccessModalStatus({
+        open: false,
+        action: PageAction.CREATE,
+        currentData: undefined,
+        title: '',
+        provider: null
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {}
+  };
+
+  const handleModalCancel = () => {
+    console.log('handleModalCancel');
+    setOpenAccessModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      currentData: undefined,
+      title: '',
+      provider: null
+    });
+  };
+
+  const handleEditProvider = (row: ListItem) => {
+    setOpenAccessModalStatus({
+      open: true,
+      action: PageAction.EDIT,
+      currentData: row,
+      title: intl.formatMessage(
+        { id: 'clusters.edit.cluster' },
+        { cluster: row.name }
+      ),
+      provider: row.provider
+    });
+  };
+
+  const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
+    if (val === 'edit') {
+      handleEditProvider(row);
+    } else if (val === 'delete') {
+      handleDelete({ ...row, name: row.name });
+    }
+  });
+
+  const handleOnToggleExpandAll = () => {
+    // do nothing
+  };
+
+  const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
+    const keys = dataSource.dataList?.map((item) => item.id);
+    handleExpandAll(expanded, keys);
+    if (expanded) {
+      handleOnToggleExpandAll();
+    }
+  });
+
+  const loadChildrenData = useMemoizedFn(
+    async (row: ListItem, options?: any) => {
+      const params = {
+        cluster_id: row.id,
+        page: -1
+      };
+      // const data = await queryAccessPoints(params, {
+      //   token: options?.token
+      // });
+      return [1];
+    }
+  );
+
+  const handleOnSortChange = (order: TableOrder | Array<TableOrder>) => {
+    handleTableChange({}, {}, order, { action: 'sort' });
+  };
+
+  const renderChildren = (
+    list: any,
+    options: { parent?: any; [key: string]: any }
+  ) => {
+    return (
+      <AccessPoints
+        dataList={list}
+        provider={options.parent?.provider}
+        providerId={options.parent?.id}
+      />
+    );
+  };
+
+  const columns = useAccessColumns(handleSelect);
+
+  return (
+    <>
+      <PageBox>
+        <FilterBar
+          actionType="dropdown"
+          showSelect={false}
+          marginBottom={22}
+          marginTop={30}
+          widths={{ input: 300 }}
+          buttonText={intl.formatMessage({ id: 'accesses.button.add' })}
+          rowSelection={rowSelection}
+          handleInputChange={handleNameChange}
+          handleSearch={handleSearch}
+          handleDeleteByBatch={handleDeleteBatch}
+          handleClickPrimary={handleClickDropdown}
+          actionItems={maasProviderOptions.map((option) => ({
+            ...option,
+            icon: (
+              <IconFont type={option.icon as string} style={{ fontSize: 14 }} />
+            )
+          }))}
+        ></FilterBar>
+        <TableContext.Provider
+          value={{
+            allChildren: allAccessPoints
+          }}
+        >
+          <SealTable
+            rowKey="id"
+            loadChildren={loadChildrenData}
+            sortDirections={TABLE_SORT_DIRECTIONS}
+            expandedRowKeys={expandedRowKeys}
+            onExpand={handleExpandChange}
+            onExpandAll={handleToggleExpandAll}
+            renderChildren={renderChildren}
+            onTableSort={handleOnSortChange}
+            showSorterTooltip={false}
+            dataSource={mockDataList}
+            loading={dataSource.loading}
+            loadend={dataSource.loadend}
+            rowSelection={rowSelection}
+            columns={columns}
+            childParentKey="access_id"
+            expandable={true}
+            empty={
+              <NoResult
+                loading={dataSource.loading}
+                loadend={dataSource.loadend}
+                dataSource={dataSource.dataList}
+                image={<IconFont type="icon-extension-outline" />}
+                filters={_.omit(queryParams, ['sort_by'])}
+                noFoundText={intl.formatMessage({
+                  id: 'noresult.accesses.nofound'
+                })}
+                title={intl.formatMessage({ id: 'noresult.accesses.title' })}
+                subTitle={intl.formatMessage({
+                  id: 'noresult.accesses.subTitle'
+                })}
+                onClick={handleClickDropdown}
+                buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
+              ></NoResult>
+            }
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
+            }}
+          ></SealTable>
+        </TableContext.Provider>
+      </PageBox>
+      <AddAccessModal
+        provider={openAccessModalStatus.provider}
+        open={openAccessModalStatus.open}
+        action={openAccessModalStatus.action}
+        title={openAccessModalStatus.title}
+        currentData={openAccessModalStatus.currentData}
+        onCancel={handleModalCancel}
+        onOk={handleModalOk}
+      ></AddAccessModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
+    </>
+  );
+};
+
+export default Accesses;