feat: add allowed models

src/pages/llmodels/components/access-control-modal/form.tsx

@@ -1,7 +1,8 @@
 import IconFont from '@/components/icon-font';
 import CheckboxField from '@/components/seal-form/checkbox-field';
+import TransferInner from '@/pages/_components/transfer';
 import { queryUsersList } from '@/pages/users/apis';
-import { Form, Transfer } from 'antd';
+import { Form } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import styled from 'styled-components';
 import { queryModelAccessUserList } from '../../apis';
@@ -9,29 +10,6 @@ import { AccessControlFormData, ListItem } from '../../config/types';
 
 type TransferKey = string | number | bigint;
 
-const TransferWrap = styled.div`
-  .ant-transfer-list {
-    width: 100%;
-    height: 400px;
-  }
-  .ant-transfer-list-content {
-    .ant-transfer-list-content-item {
-      &:hover {
-        background-color: var(--ant-control-item-bg-hover);
-      }
-      &.ant-transfer-list-content-item-checked {
-        background-color: unset;
-        &:hover {
-          background-color: var(--ant-control-item-bg-hover);
-        }
-      }
-    }
-  }
-  .ant-pagination {
-    justify-content: center;
-  }
-`;
-
 const Label = styled.div`
   font-weight: 500;
   margin-bottom: 16px;
@@ -138,21 +116,27 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
         ></CheckboxField>
       </Form.Item>
       {setPublic && (
-        <Form.Item<AccessControlFormData> name="users">
-          <TransferWrap>
-            <Transfer
-              dataSource={userList}
-              targetKeys={targetKeys}
-              showSelectAll
-              showSearch
-              pagination={totalPages > 1}
-              titles={['Available Users', 'Users with Access']}
-              render={(item) => item.title}
-              selectAllLabels={[]}
-              selectionsIcon={<IconFont type="icon-down"></IconFont>}
-              onChange={handleOnChange}
-            />
-          </TransferWrap>
+        <Form.Item<AccessControlFormData>
+          name="users"
+          rules={[
+            {
+              required: true,
+              message: 'Please select at least one user'
+            }
+          ]}
+        >
+          <TransferInner
+            dataSource={userList}
+            targetKeys={targetKeys}
+            showSelectAll
+            showSearch
+            pagination={totalPages > 1}
+            titles={['Available Users', 'Users with Access']}
+            render={(item) => item.title}
+            selectAllLabels={[]}
+            selectionsIcon={<IconFont type="icon-down"></IconFont>}
+            onChange={handleOnChange}
+          />
         </Form.Item>
       )}
     </Form>

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -45,7 +45,7 @@ const AccessControlModal: React.FC<
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={800}
+      width={600}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }