chore: first login modify password

config/config.ts

@@ -98,7 +98,6 @@ export default defineConfig({
   hash: true,
   access: {},
   model: {},
-  valtio: {},
   initialState: {},
   request: {},
   locale: {

config/proxy.ts

@@ -12,7 +12,8 @@ export default function createProxyTable(target?: string) {
         ws: true,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}/`, `/${api}`),
         headers: {
-          origin: newTarget
+          origin: newTarget,
+          Connection: 'keep-alive'
         }
       };
       return obj;

src/assets/styles/common.less

@@ -34,6 +34,11 @@
   display: flex;
   justify-content: space-between;
 }
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
 // align-items: center
 .flex-center {
   display: flex;

src/atoms/user.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from 'jotai/utils';
+
+export const userAtom = atomWithStorage<any>('userInfo', null);

src/atoms/utils/index.ts

@@ -0,0 +1,17 @@
+import { getDefaultStore } from 'jotai';
+
+export const clearAtomStorage = (atom: any) => {
+  if (!atom) {
+    return;
+  }
+  const store = getDefaultStore();
+  store.set(atom, null);
+};
+
+export const getAtomStorage = (atom: any) => {
+  if (!atom) {
+    return null;
+  }
+  const store = getDefaultStore();
+  return store.get(atom);
+};

src/components/seal-table/components/table-row.tsx

@@ -1,3 +1,5 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
 import classNames from 'classnames';
@@ -18,16 +20,23 @@ const TableRow: React.FC<
     rowKey,
     columns,
     pollingChildren,
+    watchChildren,
     onExpand,
     renderChildren,
-    loadChildren
+    loadChildren,
+    loadChildrenAPI
   } = props;
-
+  const { setChunkRequest } = useSetChunkRequest();
   const [expanded, setExpanded] = useState(false);
   const [checked, setChecked] = useState(false);
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
+  const chunkRequestRef = useRef<any>(null);
+
+  const { updateChunkedList } = useUpdateChunkedList(childrenData, {
+    setDataList: setChildrenData
+  });
 
   useEffect(() => {
     if (rowSelection) {
@@ -45,6 +54,7 @@ const TableRow: React.FC<
       if (pollTimer.current) {
         clearInterval(pollTimer.current);
       }
+      chunkRequestRef.current?.current?.cancel?.();
     };
   }, []);
 
@@ -71,6 +81,31 @@ const TableRow: React.FC<
     }
   };
 
+  const updateChildrenHandler = (list: any) => {
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+  const createChunkRequest = () => {
+    chunkRequestRef.current?.current?.cancel?.();
+    if (!watchChildren) {
+      return;
+    }
+    const url = loadChildrenAPI?.(record) as string;
+    try {
+      chunkRequestRef.current = setChunkRequest({
+        url,
+        params: {
+          page: 1,
+          perPage: 100
+        },
+        handler: updateChildrenHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+
   const handleRowExpand = async () => {
     setExpanded(!expanded);
     onExpand?.(!expanded, record);
@@ -80,6 +115,7 @@ const TableRow: React.FC<
     }
 
     if (expanded) {
+      chunkRequestRef.current?.current?.cancel?.();
       return;
     }
 
@@ -88,6 +124,9 @@ const TableRow: React.FC<
       pollTimer.current = setInterval(() => {
         handlePolling();
       }, 1000);
+    } else if (watchChildren) {
+      await handleLoadChildren();
+      createChunkRequest();
     } else {
       handleLoadChildren();
     }
@@ -194,4 +233,4 @@ const TableRow: React.FC<
   );
 };
 
-export default TableRow;
+export default React.memo(TableRow);

src/components/seal-table/index.tsx

@@ -15,9 +15,11 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     loading,
     expandable,
     pollingChildren,
+    watchChildren,
     rowSelection,
     renderChildren,
-    loadChildren
+    loadChildren,
+    loadChildrenAPI
   } = props;
 
   const [selectAll, setSelectAll] = useState(false);
@@ -131,8 +133,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               expandable={expandable}
               rowKey={rowKey}
               pollingChildren={pollingChildren}
+              watchChildren={watchChildren}
               renderChildren={renderChildren}
               loadChildren={loadChildren}
+              loadChildrenAPI={loadChildrenAPI}
               onExpand={onExpand}
             ></TableRow>
           );

src/components/seal-table/types.ts

@@ -30,10 +30,12 @@ export interface SealTableProps {
   expandable?: React.ReactNode;
   dataSource: any[];
   pollingChildren?: boolean;
+  watchChildren?: boolean;
   loading?: boolean;
   onExpand?: (expanded: boolean, record: any) => void;
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;
+  loadChildrenAPI?: (record: any) => string;
   rowKey: string;
 }
 

src/components/util-bar/index.less

@@ -0,0 +1,17 @@
+.util-bar-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    font-weight: var(--font-weight-medium);
+    padding: 20px 0;
+  }
+
+  .ant-progress.ant-progress-circle .ant-progress-text {
+    font-size: 24px;
+  }
+}

src/components/util-bar/index.tsx

@@ -0,0 +1,52 @@
+import { Progress } from 'antd';
+import './index.less';
+
+interface UitilBarProps {
+  title?: string;
+  percent: number;
+  steps?: number;
+  gapDegree?: number;
+  strokeWidth?: number;
+  size?: number;
+  trailColor?: string;
+  strokeColor?: string;
+}
+const UitilBar: React.FC<UitilBarProps> = (props) => {
+  const {
+    percent,
+    steps = 10,
+    gapDegree = 170,
+    strokeWidth = 12,
+    title,
+    size = 160,
+    strokeColor,
+    trailColor = 'rgba(221,221,221,.5)'
+  } = props;
+
+  const strokeColorFunc = (percent: number) => {
+    if (percent <= 50) {
+      return 'var(--ant-color-primary)';
+    }
+    if (percent <= 80) {
+      return 'var(--ant-color-warning)';
+    }
+    return 'var(--ant-color-error)';
+  };
+  return (
+    <div className="util-bar-box">
+      {title && <span className="title">{title}</span>}
+      <Progress
+        type="dashboard"
+        steps={steps}
+        gapDegree={gapDegree}
+        strokeWidth={strokeWidth}
+        size={size}
+        percent={percent}
+        trailColor={trailColor}
+        strokeColor={strokeColor || strokeColorFunc(percent)}
+      ></Progress>
+    </div>
+  );
+};
+
+export default UitilBar;

src/config/index.ts

@@ -39,9 +39,9 @@ export const StatusMaps = {
 };
 
 export const WatchEventType = {
-  CREATE: 'ADDED',
+  CREATE: 1,
-  UPDATE: 'MODIFIED',
+  UPDATE: 2,
-  DELETE: 'DELETED'
+  DELETE: 3
 };
 
 export const PasswordReg =

src/global.less

@@ -15,6 +15,7 @@ html {
   --border-radius-small: 8px;
   --color-white-1: rgba(255, 255, 255, 100%);
   --font-weight-normal: 500;
+  --font-weight-medium: 600;
   --font-weight-bold: 700;
   --color-text-1: var(--ant-color-text);
   --color-bg-light-1: #f0fff6;

src/hooks/use-chunk-request.ts

@@ -162,6 +162,7 @@ const useSetChunkRequest = () => {
 
           let result = response;
           let cres = '';
+          console.log('chunkrequest============e==', e);
           if (contentType === 'json') {
             const currentRes = sliceData(response, e.loaded, loadedSize);
             result = parseData(currentRes);
@@ -183,6 +184,7 @@ const useSetChunkRequest = () => {
         retryCount.current -= 1;
       }
     } catch (error) {
+      console.log('error=============', error);
       if (!axios.isCancel(error)) {
         setRequestReadyState(4);
         if (retryCount.current > 0) {

src/hooks/use-event-source.ts

@@ -1,5 +1,5 @@
 import qs from 'query-string';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 export const createEventSourceURL = (url: string) => {
   const { host, protocol } = window.location;
@@ -42,9 +42,14 @@ export default function useEventSource() {
         onmessage(data);
       } catch (error) {
         // error
+        console.log('event source error: ', error);
       }
     };
 
+    eventSourceRef.current.onclose = () => {
+      console.log('event source closed...');
+    };
+
     eventSourceRef.current.onopen = () => {
       console.log('event source connected...');
     };
@@ -54,6 +59,12 @@ export default function useEventSource() {
     };
   };
 
+  useEffect(() => {
+    return () => {
+      eventSourceRef.current?.close?.();
+    };
+  }, []);
+
   return {
     eventSourceRef: eventSourceRef,
     createEventSourceConnection

src/layouts/index.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 
+import { userAtom } from '@/atoms/user';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
@@ -15,6 +16,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
+import { useAtom } from 'jotai';
 import { useMemo } from 'react';
 import Exception from './Exception';
 import './Layout.css';
@@ -77,6 +79,7 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 };
 
 export default (props: any) => {
+  const [userInfo] = useAtom(userAtom);
   const location = useLocation();
   const navigate = useNavigate();
   const intl = useIntl();
@@ -149,9 +152,21 @@ export default (props: any) => {
           navigate('/');
         }}
         onPageChange={(route) => {
-          console.log('onRouteChange', initialState, route);
           const { location } = history;
+
+          // 如果没有修改密码，重定向到修改密码
+          console.log('onPageChange', initialState);
+          if (
+            location.pathname !== loginPath &&
+            userInfo?.require_password_change
+          ) {
+            history.push(loginPath);
+
+            return;
+          }
+
           // 如果没有登录，重定向到 login
+
           if (!initialState?.currentUser && location.pathname !== loginPath) {
             history.push(loginPath);
           } else if (location.pathname === '/') {

src/locales/en-US/users.ts

@@ -18,5 +18,6 @@ export default {
   'users.password.lowercase': 'At least one lowercase letter',
   'users.password.number': 'At least one number',
   'users.password.special': 'At least one special character',
-  'users.password.length': 'Length between 6 and 12 characters'
+  'users.password.length': 'Length between 6 and 12 characters',
+  'users.password.modify.title': 'Modify Password'
 };

src/locales/zh-CN/users.ts

@@ -18,5 +18,6 @@ export default {
   'users.password.lowercase': '至少包含一个小写字母',
   'users.password.number': '至少包含一个数字',
   'users.password.special': '至少包含一个特殊字符',
-  'users.password.length': '长度在6至12个字符之间'
+  'users.password.length': '长度在6至12个字符之间',
+  'users.password.modify.title': '修改密码'
 };

src/pages/dashboard/components/system-load.tsx

@@ -1,11 +1,11 @@
 import CardWrapper from '@/components/card-wrapper';
-import LiquidChart from '@/components/charts/liquid';
 import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { Col, DatePicker, Row } from 'antd';
 import _ from 'lodash';
 import { useContext, useEffect, useState } from 'react';
+import UitilBar from '../../../components/util-bar';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
@@ -64,40 +64,28 @@ const SystemLoad = () => {
             <CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
               <Row style={{ height: largeChartHeight, width: '100%' }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <LiquidChart
+                  <UitilBar
                     title="GPU Compute Utilization"
-                    percent={_.round(data.gpu?.utilization_rate || 0, 2) / 100}
+                    percent={_.round(data.gpu?.utilization_rate || 0, 1)}
-                    thresholds={thresholds}
+                  ></UitilBar>
-                    rangColor={colors}
-                  ></LiquidChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <LiquidChart
+                  <UitilBar
                     title="GPU Memory Utilization"
-                    percent={
+                    percent={_.round(data.gpu_memory?.utilization_rate || 0, 1)}
-                      _.round(data.gpu_memory?.utilization_rate || 0, 2) / 100
+                  ></UitilBar>
-                    }
-                    thresholds={thresholds}
-                    rangColor={colors}
-                  ></LiquidChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <LiquidChart
+                  <UitilBar
                     title="CPU Compute Utilization"
-                    percent={_.round(data.cpu?.utilization_rate || 0, 2) / 100}
+                    percent={_.round(data.cpu?.utilization_rate || 0, 1)}
-                    thresholds={thresholds}
+                  ></UitilBar>
-                    rangColor={colors}
-                  ></LiquidChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
-                  <LiquidChart
+                  <UitilBar
                     title="CPU Memory Utilization"
-                    percent={
+                    percent={_.round(data.memory?.utilization_rate || 0, 1)}
-                      _.round(data.memory?.utilization_rate || 0, 2) / 100
+                  ></UitilBar>
-                    }
-                    thresholds={thresholds}
-                    rangColor={colors}
-                  ></LiquidChart>
                 </Col>
               </Row>
             </CardWrapper>

src/pages/llmodels/config/index.ts

@@ -11,6 +11,12 @@ export const ollamaModelOptions = [
   { label: 'deepseek-coder', value: 'deepseek-coder' }
 ];
 
+export const modelSourceMap = {
+  huggingface: 'huggingface',
+  ollama_library: 'ollama_library',
+  s3: 's3'
+};
+
 export const status: any = {
   Running: StatusMaps.success
 };

src/pages/llmodels/index.tsx

@@ -8,10 +8,12 @@ import type { PageActionType } from '@/config/types';
 import useSetChunkRequest, {
   createAxiosToken
 } from '@/hooks/use-chunk-request';
+import useEventSource from '@/hooks/use-event-source';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { handleBatchRequest } from '@/utils';
+import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -62,6 +64,7 @@ const Models: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const { createEventSourceConnection, eventSourceRef } = useEventSource();
   const [logContent, setLogContent] = useState('');
   const [openLogModal, setOpenLogModal] = useState(false);
   const [hoverChildIndex, setHoverChildIndex] = useState<string | number>(-1);
@@ -157,12 +160,9 @@ const Models: React.FC = () => {
     chunkRequedtRef.current?.current?.cancel?.();
     try {
       chunkRequedtRef.current = setChunkRequest({
-        url: MODELS_API,
+        url: `${MODELS_API}`,
         params: {
-          ..._.pickBy(
+          ..._.pickBy(queryParams, (val: any) => !!val)
-            _.omit(queryParams, ['page', 'perPage']),
-            (val: any) => !!val
-          )
         },
         handler: updateHandler
       });
@@ -171,6 +171,38 @@ const Models: React.FC = () => {
     }
   };
 
+  const createModelsDataByFetch = async () => {
+    const result = await fetchChunkedData({
+      params: {
+        ..._.pickBy(queryParams, (val: any) => !!val),
+        watch: true
+      },
+      method: 'GET',
+      url: `/v1${MODELS_API}`
+    });
+    if (!result) {
+      return;
+    }
+    const { reader, decoder } = result;
+
+    await readStreamData(reader, decoder, (data: any) => {
+      console.log('streamData=========', data);
+    });
+  };
+
+  const createModelEvent = () => {
+    createEventSourceConnection({
+      url: `v1${MODELS_API}`,
+      params: {
+        ..._.pickBy(queryParams, (val: any) => !!val),
+        watch: true
+      },
+      onmessage: (data: any) => {
+        console.log('event source message: ', data);
+      }
+    });
+  };
+
   const handleSearch = (e: any) => {
     fetchData();
   };
@@ -327,6 +359,10 @@ const Models: React.FC = () => {
     return data.items || [];
   }, []);
 
+  const generateChildrenRequestAPI = (params: any) => {
+    return `${MODELS_API}/${params.id}/instances`;
+  };
+
   const handleEdit = (row: ListItem) => {
     setCurrentData(row);
     setOpenAddModal(true);
@@ -336,9 +372,12 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     fetchData();
+    // createModelsDataByFetch();
+    createModelEvent();
   }, [queryParams]);
 
   useEffect(() => {
+    // watch models list
     createModelsChunkRequest();
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
@@ -359,7 +398,7 @@ const Models: React.FC = () => {
                 item.download_progress !== 100 ? 'skeleton-loading' : ''
               }
             >
-              <RowChildren>
+              <RowChildren key={`${item.id}_row`}>
                 <Row style={{ width: '100%' }} align="middle">
                   <Col span={6}>
                     <Tag>{item.gpu_index}</Tag>
@@ -385,7 +424,9 @@ const Models: React.FC = () => {
                     )}
                   </Col>
                   <Col span={5}>
-                    {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
+                    <span style={{ paddingLeft: 36 }}>
+                      {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
+                    </span>
                   </Col>
                   <Col span={5}>
                     {hoverChildIndex === `${item.id}-${index}` && (
@@ -483,7 +524,9 @@ const Models: React.FC = () => {
           expandable={true}
           onChange={handleTableChange}
           pollingChildren={false}
+          watchChildren={true}
           loadChildren={getModelInstances}
+          loadChildrenAPI={generateChildrenRequestAPI}
           renderChildren={renderChildren}
           pagination={{
             showSizeChanger: true,
@@ -497,17 +540,10 @@ const Models: React.FC = () => {
         >
           <SealColumn
             title={intl.formatMessage({ id: 'models.table.name' })}
-            dataIndex="huggingface_repo_id"
+            dataIndex="name"
-            key="huggingface_repo_id"
+            key="name"
             width={400}
             span={6}
-            render={(text, record) => {
-              return (
-                <>
-                  <Tooltip>{text}</Tooltip>
-                </>
-              );
-            }}
           />
           <SealColumn
             title={intl.formatMessage({ id: 'models.form.source' })}

src/pages/login/apis/index.ts

@@ -1,3 +1,5 @@
+import { userAtom } from '@/atoms/user';
+import { clearAtomStorage } from '@/atoms/utils';
 import { request } from '@umijs/max';
 import qs from 'query-string';
 
@@ -17,9 +19,11 @@ export const login = async (
 };
 
 export const logout = async (userInfo: any) => {
-  return request(`${AUTH_API}/logout`, {
+  await request(`${AUTH_API}/logout`, {
     method: 'POST'
   });
+  clearAtomStorage(userAtom);
+  return;
 };
 
 export const accessToken = async () => {

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

@@ -1,9 +1,10 @@
 import LogoIcon from '@/assets/images/logo.png';
+import { userAtom } from '@/atoms/user';
 import SealInput from '@/components/seal-form/seal-input';
 import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
 import { SelectLang, history, useIntl, useModel } from '@umijs/max';
 import { Button, Checkbox, Form } from 'antd';
-import { useEffect } from 'react';
+import { useAtom } from 'jotai';
 import { flushSync } from 'react-dom';
 import { login } from '../apis';
 
@@ -23,22 +24,16 @@ const renderLogo = () => {
     </div>
   );
 };
-const LoginForm: React.FC<{
+const LoginForm = () => {
-  setCurrentUser: (userInfo: any) => void;
+  const [userInfo, setUserInfo] = useAtom(userAtom);
-}> = ({ setCurrentUser }) => {
   const { initialState, setInitialState } = useModel('@@initialState');
   const { globalState, setGlobalState } = useModel('global');
   const intl = useIntl();
   const [form] = Form.useForm();
 
-  useEffect(() => {
-    console.log('initstate===', {
-      initialState,
-      globalState
-    });
-  }, []);
   const gotoDefaultPage = (userInfo: any) => {
-    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
+    const pathname =
+      userInfo && userInfo?.is_admin ? '/dashboard' : '/playground';
     history.push(pathname);
   };
   const fetchUserInfo = async () => {
@@ -66,13 +61,11 @@ const LoginForm: React.FC<{
       setGlobalState({
         userInfo
       });
-      // if (userInfo?.require_password_change) {
+      setUserInfo(userInfo);
-      //   setCurrentUser(userInfo);
+      if (!userInfo?.require_password_change) {
-      // } else {
+        gotoDefaultPage(userInfo);
-      //   setCurrentUser(null);
+      }
-      //   gotoDefaultPage(userInfo);
+      // gotoDefaultPage(userInfo);
-      // }
-      gotoDefaultPage(userInfo);
     } catch (error) {
       console.log('error====', error);
     }

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

@@ -1,23 +1,20 @@
+import { userAtom } from '@/atoms/user';
 import SealInput from '@/components/seal-form/seal-input';
+import { PasswordReg } from '@/config';
 import { GlobalOutlined, LockOutlined } from '@ant-design/icons';
-import { SelectLang, history, useIntl, useModel } from '@umijs/max';
+import { SelectLang, history, useIntl } from '@umijs/max';
 import { Button, Form, message } from 'antd';
-import { useEffect } from 'react';
+import { useAtom } from 'jotai';
 import { updatePassword } from '../apis';
 
 const PasswordForm: React.FC = () => {
-  const { globalState, setGlobalState } = useModel('global');
-  const [currentUser, setCurrentUser] = useState(null);
   const intl = useIntl();
   const [form] = Form.useForm();
 
-  useEffect(() => {
+  const [userInfo, setUserInfo] = useAtom(userAtom);
-    console.log('initstate===', {
-      globalState
-    });
-  }, []);
   const gotoDefaultPage = (userInfo: any) => {
-    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
+    const pathname =
+      userInfo && userInfo?.is_admin ? '/dashboard' : '/playground';
     history.push(pathname);
   };
 
@@ -26,9 +23,14 @@ const PasswordForm: React.FC = () => {
     try {
       await updatePassword({
         new_password: values.new_password,
-        comfirm_password: values.comfirm_password
+        current_password: values.current_password
       });
-      gotoDefaultPage(currentUser);
+
+      await setUserInfo({
+        ...userInfo,
+        require_password_change: false
+      });
+      gotoDefaultPage(userInfo);
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {
       console.log('error====', error);
@@ -45,40 +47,45 @@ const PasswordForm: React.FC = () => {
         style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
         onFinish={handleSubmit}
       >
-        <div>修改密码</div>
+        <h2 className="justify-center m-b-20">
+          {intl.formatMessage({ id: 'users.password.modify.title' })}
+        </h2>
 
+        <Form.Item
+          name="current_password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'users.form.currentpassword' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+          />
+        </Form.Item>
         <Form.Item
           name="new_password"
           rules={[
             {
               required: true,
+              pattern: PasswordReg,
               message: intl.formatMessage(
                 { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.password' }) }
+                { name: intl.formatMessage({ id: 'users.form.newpassword' }) }
               )
             }
           ]}
         >
           <SealInput.Password
             prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'common.form.password' })}
+            label={intl.formatMessage({ id: 'users.form.newpassword' })}
-          />
-        </Form.Item>
-        <Form.Item
-          name="comfirm_password"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                { name: intl.formatMessage({ id: 'common.form.password' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Password
-            prefix={<LockOutlined />}
-            label={intl.formatMessage({ id: 'common.form.password' })}
           />
         </Form.Item>
 

src/pages/login/index.tsx

@@ -1,13 +1,28 @@
-import { useState } from 'react';
+import { userAtom } from '@/atoms/user';
+import { history } from '@umijs/max';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
 import LoginForm from './components/login-form';
+import PasswordForm from './components/password-form';
 
 const Login = () => {
-  const [currentUser, setCurrentUser] = useState(null);
+  const [userInfo, setUserInfo] = useAtom(userAtom);
+
+  const gotoDefaultPage = (userInfo: any) => {
+    if (!userInfo || userInfo?.require_password_change) {
+      return;
+    }
+    const pathname = userInfo?.is_admin ? '/dashboard' : '/playground';
+
+    history.push(pathname, { replace: true });
+  };
+  useEffect(() => {
+    gotoDefaultPage(userInfo);
+  }, [userInfo]);
 
   return (
     <div>
-      <LoginForm setCurrentUser={setCurrentUser} />
+      {userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
-      {/* <PasswordForm /> */}
     </div>
   );
 };

src/request-config.ts

@@ -1,3 +1,5 @@
+import { userAtom } from '@/atoms/user';
+import { clearAtomStorage } from '@/atoms/utils';
 import { RequestConfig, history } from '@umijs/max';
 import { message } from 'antd';
 
@@ -9,14 +11,17 @@ export const requestConfig: RequestConfig = {
       // to do something
     },
     errorHandler: (error: any, opts: any) => {
-      if (opts?.skipErrorHandler) throw error;
       const { message: errorMessage, response } = error;
       const errMsg = response?.data?.message || errorMessage;
-      message.error(errMsg);
+      if (!opts?.skipErrorHandler) {
-      if (response.status === 401) {
+        message.error(errMsg);
-        history.push('/login', { replace: true });
       }
       console.log('errorHandler+++++++++++++++', error, opts);
+      if (response.status === 401) {
+        clearAtomStorage(userAtom);
+
+        history.push('/login', { replace: true });
+      }
     }
   },
   requestInterceptors: [