chore: providers ux

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

@@ -0,0 +1,31 @@
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
+import { categoryOptions } from '@/pages/llmodels/config';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { FormData } from '../config/types';
+
+const Basic = () => {
+  const intl = useIntl();
+  const form = Form.useFormInstance<FormData>();
+  return (
+    <>
+      <Form.Item name="name" data-field="name">
+        <SealInput.Input required label={'Model Name'} />
+      </Form.Item>
+      <Form.Item name="category">
+        <SealSelect options={categoryOptions} label="Category"></SealSelect>
+      </Form.Item>
+      <Form.Item name="description">
+        <SealInput.TextArea
+          scaleSize={true}
+          label={intl.formatMessage({
+            id: 'common.table.description'
+          })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </>
+  );
+};
+
+export default Basic;

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

@@ -0,0 +1,38 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { FormData } from '../config/types';
+
+const Endpoints = () => {
+  const intl = useIntl();
+  const form = Form.useFormInstance<FormData>();
+  return (
+    <>
+      <Form.Item name="name" data-field="endpoints">
+        <SealInput.Input
+          required
+          label={intl.formatMessage({
+            id: 'common.table.name'
+          })}
+        />
+      </Form.Item>
+      <Form.Item name="provider" hidden>
+        <SealInput.Input
+          label={intl.formatMessage({
+            id: 'providers.table.providerName'
+          })}
+        />
+      </Form.Item>
+      <Form.Item name="description">
+        <SealInput.TextArea
+          scaleSize={true}
+          label={intl.formatMessage({
+            id: 'common.table.description'
+          })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </>
+  );
+};
+
+export default Endpoints;

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

@@ -1,17 +1,68 @@
+import IconFont from '@/components/icon-font';
 import { PageActionType } from '@/config/types';
+import CollapsePanel from '@/pages/_components/collapse-panel';
+import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
+import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
+import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import { forwardRef, useImperativeHandle } from 'react';
-import { MaasProviderItem as ListItem } from '../config/types';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { maasProviderType } from '../config';
+import { AccessItem as ListItem } from '../config/types';
+import Basic from './basic';
+import Endpoints from './endpoints';
+import MetaData from './meta-data';
 
 interface ProviderFormProps {
   ref?: any;
   action: PageActionType;
+  provider?: maasProviderType;
   currentData?: ListItem; // Used when action is EDIT
   onFinish: (values: FormData) => void;
 }
 
+const TABKeysMap = {
+  BASIC: 'basic',
+  METADATA: 'metadata',
+  ENDPOINTS: 'endpoints',
+  ADVANCED: 'advanced'
+};
+
 const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
+  const { action, provider, currentData, onFinish } = props;
+  const intl = useIntl();
+  const { getScrollElementScrollableHeight } = useWrapperContext();
+  const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
   const [form] = Form.useForm();
+  const scrollTabsRef = useRef<any>(null);
+
+  const segmentOptions = [
+    {
+      value: TABKeysMap.BASIC,
+      label: 'Basic',
+      icon: <IconFont type="icon-basic" />,
+      field: 'name'
+    },
+    {
+      value: TABKeysMap.METADATA,
+      label: 'Metadata',
+      icon: <IconFont type="icon-speed" />,
+      field: 'metadata'
+    },
+    {
+      value: TABKeysMap.ENDPOINTS,
+      label: 'Endpoints',
+      icon: <IconFont type="icon-settings" />,
+      field: 'endpoints'
+    }
+  ];
+
+  const handleActiveChange = (key: string[]) => {
+    setActiveKey(key);
+  };
+
+  const handleOnCollapseChange = (keys: string | string[]) => {
+    setActiveKey(Array.isArray(keys) ? keys : [keys]);
+  };
 
   useImperativeHandle(ref, () => ({
     submit: () => {
@@ -23,9 +74,43 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   }));
 
   return (
-    <Form form={form} layout="vertical">
-      {/* Form fields go here */}
-    </Form>
+    <ScrollSpyTabs
+      ref={scrollTabsRef}
+      defaultTarget="basic"
+      segmentOptions={segmentOptions}
+      activeKey={activeKey}
+      setActiveKey={handleActiveChange}
+      segmentedTop={{
+        top: 0,
+        offsetTop: 96
+      }}
+      getScrollElementScrollableHeight={getScrollElementScrollableHeight}
+    >
+      <Form form={form}>
+        <Basic />
+        <CollapsePanel
+          activeKey={activeKey}
+          accordion={false}
+          onChange={handleOnCollapseChange}
+          items={[
+            {
+              key: TABKeysMap.METADATA,
+              label: 'Metadata',
+              forceRender: true,
+              children: <MetaData></MetaData>
+            },
+            {
+              key: TABKeysMap.ENDPOINTS,
+              label: 'Endpoints',
+              forceRender: true,
+              children: (
+                <Endpoints action={action} provider={provider}></Endpoints>
+              )
+            }
+          ]}
+        ></CollapsePanel>
+      </Form>
+    </ScrollSpyTabs>
   );
 });
 

src/pages/model-access/forms/meta-data.tsx

@@ -0,0 +1,38 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { FormData } from '../config/types';
+
+const MetaData = () => {
+  const intl = useIntl();
+  const form = Form.useFormInstance<FormData>();
+  return (
+    <>
+      <Form.Item name="name" data-field="metadata">
+        <SealInput.Input
+          required
+          label={intl.formatMessage({
+            id: 'common.table.name'
+          })}
+        />
+      </Form.Item>
+      <Form.Item name="provider" hidden>
+        <SealInput.Input
+          label={intl.formatMessage({
+            id: 'providers.table.providerName'
+          })}
+        />
+      </Form.Item>
+      <Form.Item name="description">
+        <SealInput.TextArea
+          scaleSize={true}
+          label={intl.formatMessage({
+            id: 'common.table.description'
+          })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </>
+  );
+};
+
+export default MetaData;

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

@@ -19,8 +19,14 @@ const useCreateAccess = (options: { refresh: () => void }) => {
     provider: null
   });
 
-  const openModal = () => {
-    setOpenModalStatus({ ...openModalStatus, open: true });
+  const openModal = (action: PageActionType, currentData?: ListItem) => {
+    setOpenModalStatus({
+      ...openModalStatus,
+      open: true,
+      action,
+      currentData,
+      title: action === PageAction.CREATE ? 'Create Access' : 'Edit Access'
+    });
   };
 
   const closeModal = () => {

src/pages/model-access/index.tsx

@@ -67,7 +67,7 @@ const Accesses: React.FC = () => {
   });
 
   const handleClickDropdown = () => {
-    openAccessModal();
+    openAccessModal('create');
   };
 
   const handleModalOk = async (data: FormData) => {