chore: shortcut table

src/pages/llmodels/components/deploy-modal.tsx

@@ -11,6 +11,7 @@ import DataForm from './data-form';
 import HFModelFile from './hf-model-file';
 import ModelCard from './model-card';
 import SearchModel from './search-model';
+import Separator from './separator';
 import TitleWrapper from './title-wrapper';
 
 type AddModalProps = {
@@ -98,27 +99,33 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     >
       <div style={{ display: 'flex' }}>
         {props.source === modelSourceMap.huggingface_value && (
-          <ColumnWrapper>
-            <SearchModel
-              modelSource={props.source}
-              onSelectModel={handleOnSelectModel}
-              setLoadingModel={setLoadingModel}
-            ></SearchModel>
-          </ColumnWrapper>
+          <div style={{ display: 'flex', flex: 1 }}>
+            <ColumnWrapper>
+              <SearchModel
+                modelSource={props.source}
+                onSelectModel={handleOnSelectModel}
+                setLoadingModel={setLoadingModel}
+              ></SearchModel>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
         )}
         {props.source === modelSourceMap.huggingface_value && (
-          <ColumnWrapper>
-            <ModelCard
-              repo={huggingfaceRepoId}
-              onCollapse={setCollapsed}
-              collapsed={collapsed}
-            ></ModelCard>
-            <HFModelFile
-              repo={huggingfaceRepoId}
-              onSelectFile={handleSelectModelFile}
-              collapsed={collapsed}
-            ></HFModelFile>
-          </ColumnWrapper>
+          <div style={{ display: 'flex', flex: 1 }}>
+            <ColumnWrapper>
+              <ModelCard
+                repo={huggingfaceRepoId}
+                onCollapse={setCollapsed}
+                collapsed={collapsed}
+              ></ModelCard>
+              <HFModelFile
+                repo={huggingfaceRepoId}
+                onSelectFile={handleSelectModelFile}
+                collapsed={collapsed}
+              ></HFModelFile>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
         )}
         <ColumnWrapper
           footer={
@@ -137,6 +144,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             {source === modelSourceMap.huggingface_value && (
               <TitleWrapper>
                 {intl.formatMessage({ id: 'models.form.configurations' })}
+                <span style={{ display: 'flex', height: 24 }}></span>
               </TitleWrapper>
             )}
             <DataForm

src/pages/llmodels/components/separator.tsx

@@ -0,0 +1,18 @@
+import { Divider } from 'antd';
+import React from 'react';
+import '../style/separator.less';
+
+const Separator: React.FC = () => {
+  return (
+    <div className="separator">
+      <Divider
+        type="vertical"
+        style={{ height: 'calc(100vh - 89px)', marginInline: '0px' }}
+      ></Divider>
+      <span className="shape"></span>
+      {/* <span className="shape-s"></span> */}
+    </div>
+  );
+};
+
+export default Separator;

src/pages/llmodels/style/column-wrapper.less

@@ -1,6 +1,7 @@
 .column-wrapper {
   flex: 1;
-  border-left: 1px solid var(--ant-color-split);
+  position: relative;
+  // border-left: 1px solid var(--ant-color-split);
 }
 
 .simplebar-scrollbar::before {
@@ -11,7 +12,7 @@
   flex: 1;
   display: flex;
   position: relative;
-  border-left: 1px solid var(--ant-color-split);
+  // border-left: 1px solid var(--ant-color-split);
 
   .column-wrapper {
     border-left: none;

src/pages/llmodels/style/separator.less

@@ -0,0 +1,28 @@
+.separator {
+  position: relative;
+
+  .shape {
+    position: absolute;
+    top: 10px;
+    left: -10px;
+    width: 22px;
+    height: 22px;
+    border: 2px solid var(--ant-color-split);
+    transform: rotate(45deg);
+    border-left: none;
+    border-bottom: none;
+    background-color: var(--color-white-1);
+    z-index: 100;
+  }
+
+  .shape-s {
+    position: absolute;
+    top: 50%;
+    left: 4px;
+    width: 30px;
+    height: 30px;
+    border: 16px solid transparent;
+    border-left: 16px solid var(--color-fill-sider);
+    z-index: 100;
+  }
+}