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;
+  }
+}

src/pages/login/components/login-form.tsx

@@ -125,7 +125,6 @@ const LoginForm = () => {
       });
       const userInfo = await fetchUserInfo();
       setUserInfo(userInfo);
-      setInitialPassword(values.password);
       if (values.autoLogin) {
         await callRememberMe(values);
       } else {
@@ -133,6 +132,8 @@ const LoginForm = () => {
       }
       if (!userInfo?.require_password_change) {
         gotoDefaultPage(userInfo);
+      } else {
+        setInitialPassword(encryptPassword(values.password));
       }
     } catch (error) {
       // to do something

src/pages/login/components/password-form.tsx

@@ -4,9 +4,12 @@ import { PasswordReg } from '@/config';
 import { GlobalOutlined, LockOutlined } from '@ant-design/icons';
 import { SelectLang, history, useIntl } from '@umijs/max';
 import { Button, Form, message } from 'antd';
+import CryptoJS from 'crypto-js';
 import { useAtom } from 'jotai';
 import { updatePassword } from '../apis';
 
+const CRYPT_TEXT = 'seal';
+
 const PasswordForm: React.FC = () => {
   const intl = useIntl();
   const [form] = Form.useForm();
@@ -19,12 +22,18 @@ const PasswordForm: React.FC = () => {
     history.push(pathname);
   };
 
+  const decryptPassword = (password: string) => {
+    const bytes = CryptoJS.AES?.decrypt?.(password, CRYPT_TEXT);
+    const res = bytes.toString(CryptoJS.enc.Utf8);
+    return res;
+  };
+
   const handleSubmit = async (values: any) => {
     console.log('values', values, form);
     try {
       await updatePassword({
         new_password: values.new_password,
-        current_password: initialPassword
+        current_password: decryptPassword(initialPassword)
       });
 
       await setUserInfo({