feat: login page

config/config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
         },
         token: {
           colorPrimary: '#2fbf85',
-          borderRadius: 20,
+          borderRadius: 16,
           fontSize: 12,
           motion: true
         }

config/routes.ts

@@ -57,6 +57,14 @@ export default [
     component: './profile',
     icon: 'User'
   },
+  {
+    name: 'Login',
+    path: '/login',
+    key: 'login',
+    layout: false,
+    hideInMenu: true,
+    component: './login'
+  },
   {
     name: '404',
     path: '*',

package.json

@@ -20,6 +20,7 @@
     "antd": "^5.17.0",
     "antd-style": "^3.6.2",
     "classnames": "^2.5.1",
+    "crypto-js": "^4.2.0",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6"
   },

pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   classnames:
     specifier: ^2.5.1
     version: 2.5.1
+  crypto-js:
+    specifier: ^4.2.0
+    version: 4.2.0
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -5105,6 +5108,10 @@ packages:
       randomfill: 1.0.4
     dev: false
 
+  /crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+    dev: false
+
   /css-blank-pseudo@3.0.3(postcss@8.4.38):
     resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==}
     engines: {node: ^12 || ^14 || >=16}

src/access.ts

@@ -5,6 +5,7 @@ export default (initialState: API.UserInfo) => {
     initialState && initialState.name !== 'dontHaveAccess'
   );
   return {
-    canSeeAdmin
+    canSeeAdmin,
+    canDelete: true
   };
 };

src/components/form-buttons/index.tsx

@@ -1,20 +1,27 @@
 import { Button, Space } from 'antd';
 
 type FormButtonsProps = {
-  onOk: () => void;
+  onOk?: () => void;
-  onCancel: () => void;
+  onCancel?: () => void;
   cancelText?: string;
   okText?: string;
+  htmlType?: 'submit' | 'button';
 };
 const FormButtons: React.FC<FormButtonsProps> = ({
   onOk,
   onCancel,
   cancelText,
-  okText
+  okText,
+  htmlType = 'button'
 }) => {
   return (
     <Space size={40} style={{ marginTop: '80px' }}>
-      <Button type="primary" onClick={onOk} style={{ width: '120px' }}>
+      <Button
+        type="primary"
+        onClick={onOk}
+        style={{ width: '120px' }}
+        htmlType={htmlType}
+      >
         {okText || '保存'}
       </Button>
       <Button onClick={onCancel} style={{ width: '98px' }}>

src/components/seal-form/components/wrapper.less

@@ -1,6 +1,7 @@
 :local(.wrapper) {
   @wrapheight: 54px;
   @inputheight: 32px;
+  @borderRadius: 24px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9,7 +10,7 @@
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
-  border-radius: 28px;
+  border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
 
@@ -121,6 +122,13 @@
     height: @inputheight !important;
   }
   :global(.ant-input-outlined) {
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: 12px;
+    height: @inputheight !important;
     &.seal-textarea {
       min-height: 100px !important;
     }
@@ -138,7 +146,7 @@
   }
   :global(.ant-input-group-addon) {
     inset-inline-start: unset !important;
-    border-radius: 0 28px 28px 0;
+    border-radius: 0 @borderRadius @borderRadius 0;
     width: 30px;
     background-color: transparent;
   }
@@ -155,7 +163,7 @@
     position: absolute;
     top: -20px;
     right: -11px;
-    border-radius: 0 28px 28px 0 !important;
+    border-radius: 0 @borderRadius @borderRadius 0 !important;
     overflow: hidden;
     border: none;
     height: 52px;
@@ -170,4 +178,9 @@
   :global(.ant-input-group-addon) {
     border: none;
   }
+  :global(.ant-input-prefix) {
+    position: absolute;
+    top: 1px;
+    left: -4px;
+  }
 }

src/components/seal-form/input-number.tsx

@@ -20,7 +20,9 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };

src/components/seal-form/password.tsx

@@ -18,7 +18,9 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };

src/components/seal-form/seal-input.tsx

@@ -33,7 +33,9 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = useCallback(() => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   }, [props.disabled, isFocus]);
@@ -109,7 +111,9 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };

src/layouts/index.tsx

@@ -8,6 +8,7 @@ import { ProLayout } from '@ant-design/pro-components';
 import {
   Link,
   Outlet,
+  history,
   matchRoutes,
   useAppData,
   useLocation,
@@ -21,6 +22,8 @@ import Logo from './Logo';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
 
+const loginPath = '/login';
+
 // 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
 const filterRoutes = (
   routes: IRoute[],
@@ -150,6 +153,11 @@ export default (props: any) => {
       }}
       onPageChange={(route) => {
         console.log('onRouteChange', route);
+        const { location } = history;
+        // 如果没有登录，重定向到 login
+        // if (!initialState?.currentUser && location.pathname !== loginPath) {
+        //   history.push(loginPath);
+        // }
       }}
       formatMessage={userConfig.formatMessage || formatMessage}
       menu={{ locale: userConfig.locale }}

src/pages/llmodels/index.tsx

@@ -10,7 +10,7 @@ import {
   WechatWorkOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl, useNavigate } from '@umijs/max';
+import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
 import {
   App,
   Button,
@@ -48,6 +48,7 @@ const dataSource = [
 
 const Models: React.FC = () => {
   const { modal } = App.useApp();
+  const access = useAccess();
   const intl = useIntl();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
@@ -164,14 +165,16 @@ const Models: React.FC = () => {
               >
                 {intl?.formatMessage?.({ id: 'models.button.deploy' })}
               </Button>
-              <Button
+              <Access accessible={access.canDelete}>
-                icon={<DeleteOutlined />}
+                <Button
-                danger
+                  icon={<DeleteOutlined />}
-                onClick={handleDelete}
+                  danger
-                disabled={!rowSelection.selectedRowKeys.length}
+                  onClick={handleDelete}
-              >
+                  disabled={!rowSelection.selectedRowKeys.length}
-                Delete
+                >
-              </Button>
+                  Delete
+                </Button>
+              </Access>
             </Space>
           }
         ></PageTools>

src/pages/login/index.tsx

@@ -0,0 +1,61 @@
+import LogoIcon from '@/assets/images/logo.png';
+import SealInput from '@/components/seal-form/seal-input';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Form } from 'antd';
+
+const renderLogo = () => {
+  return (
+    <div
+      style={{
+        width: '400px',
+        display: 'flex',
+        marginBottom: 24,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <img src={LogoIcon} alt="logo" style={{ width: '44px' }} />
+      <span style={{ fontSize: 34, marginLeft: 12 }}>SEAL</span>
+    </div>
+  );
+};
+const Login = () => {
+  return (
+    <Form style={{ width: '400px', margin: '5% auto 0' }}>
+      <div>{renderLogo()}</div>
+      <Form.Item
+        name="username"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your Username!'
+          }
+        ]}
+      >
+        <SealInput.Input label="Username" prefix={<UserOutlined />} />
+      </Form.Item>
+
+      <Form.Item
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your Password!'
+          }
+        ]}
+      >
+        <SealInput.Password prefix={<LockOutlined />} label="Password" />
+      </Form.Item>
+      <Form.Item name="autoLogin">
+        <div style={{ paddingLeft: 10 }}>
+          <Checkbox>Auto login</Checkbox>
+        </div>
+      </Form.Item>
+      <Button htmlType="submit" type="primary" block>
+        Login
+      </Button>
+    </Form>
+  );
+};
+
+export default Login;

src/pages/playground/components/ground-left.tsx

@@ -1,3 +1,4 @@
+import SealInput from '@/components/seal-form/seal-input';
 import { PageContainer } from '@ant-design/pro-components';
 import { useState } from 'react';
 import '../style/ground-left.less';
@@ -54,6 +55,9 @@ const MessageList: React.FC = () => {
   return (
     <div className="ground-left">
       <PageContainer title={false} className="message-list-wrap">
+        <div style={{ marginBottom: '40px' }}>
+          <SealInput.TextArea label="Message"></SealInput.TextArea>
+        </div>
         <div>
           {messageList.map((item, index) => {
             return (

src/pages/profile/index.tsx

@@ -21,6 +21,9 @@ const Profile: React.FC = () => {
   const handleOnFinishFailed = (errorInfo: any) => {
     console.log('handleOnFinishFailed', errorInfo);
   };
+  const handleCancel = () => {
+    form.resetFields();
+  };
 
   return (
     <StrictMode>
@@ -69,8 +72,8 @@ const Profile: React.FC = () => {
               style={{ width: INPUT_WIDTH.default }}
             ></SealInput.Password>
           </Form.Item>
+          <FormButtons htmlType="submit" onCancel={handleCancel}></FormButtons>
         </Form>
-        <FormButtons></FormButtons>
       </PageContainer>
     </StrictMode>
   );