fix: build file warnings

config/theme.ts

@@ -25,6 +25,9 @@ export default {
     Select: {
       itemSelectedBg: 'rgba(0,0,0,0.06)'
     },
+    Message: {
+      contentPadding: '12px 16px'
+    },
     Slider: {
       handleSize: 8,
       handleSizeHover: 8,

package.json

@@ -31,6 +31,8 @@
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "query-string": "^9.0.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
     "react-hotkeys-hook": "^4.5.0",
     "umi-presets-pro": "^2.0.3"
   },

src/access.ts

@@ -1,6 +1,4 @@
 export default (initialState: { currentUser?: Global.UserInfo }) => {
-  // 在这里按照初始化数据定义项目中的权限，统一管理
-  // 参考文档 https://umijs.org/docs/max/access
   const canSeeAdmin = !!(
     initialState &&
     initialState.currentUser &&

src/app.tsx

@@ -11,14 +11,10 @@ const loginPath = '/login';
 let currentUserInfo: any = {};
 
 // 运行时配置
-
-// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
-// 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
 export async function getInitialState(): Promise<{
   fetchUserInfo: () => Promise<Global.UserInfo>;
   currentUser?: Global.UserInfo;
 }> {
-  // 如果不是登录页面，执行
   const { location } = history;
 
   const fetchUserInfo = async (): Promise<Global.UserInfo> => {
@@ -36,7 +32,6 @@ export async function getInitialState(): Promise<{
   const getAppVersionInfo = async () => {
     try {
       const data = await queryVersionInfo();
-      console.log('versioninfo=========', data);
       setAtomStorage(GPUStackVersionAtom, data);
     } catch (error) {
       console.error('queryVersionInfo error', error);

src/components/drop-down-buttons/index.tsx

@@ -25,7 +25,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   };
 
   if (!items?.length) {
-    return null;
+    return <span></span>;
   }
 
   return (

src/global.less

@@ -430,6 +430,41 @@ body {
   border-radius: 16px;
 }
 
+.ant-message-notice-wrapper {
+  .ant-message-notice-error {
+    .ant-message-notice-content {
+      background-color: var(--ant-color-error-bg);
+      color: var(--ant-color-error);
+    }
+  }
+
+  .ant-message-notice-success {
+    .ant-message-notice-content {
+      background-color: var(--ant-color-success-bg);
+      color: var(--ant-color-success);
+    }
+  }
+
+  .ant-message-notice-content {
+    border-radius: var(--border-radius-base) !important;
+    line-height: 2;
+    max-width: 300px;
+    text-align: left;
+    word-break: break-word;
+    box-shadow: var(--ant-box-shadow-secondary) !important;
+    max-height: 140px;
+    overflow-y: auto;
+
+    .anticon {
+      padding-top: 5px;
+    }
+  }
+
+  .ant-message-custom-content {
+    align-items: flex-start !important;
+  }
+}
+
 .background {
   position: fixed;
   top: 0;

src/models/global.ts

@@ -1,5 +1,3 @@
-// 全局共享数据示例
-// import { DEFAULT_NAME } from '@/constants';
 import { useState } from 'react';
 
 const useGlobalState = () => {

src/pages/api-keys/components/add-apikey.tsx

@@ -184,7 +184,13 @@ const AddModal: React.FC<AddModalProps> = ({
             <SealInput.Input
               label={intl.formatMessage({ id: 'apikeys.form.apikey' })}
               value={apikeyValue}
-              addAfter={<CopyButton text={apikeyValue}></CopyButton>}
+              addAfter={
+                <CopyButton
+                  text={apikeyValue}
+                  shape="default"
+                  size="small"
+                ></CopyButton>
+              }
             ></SealInput.Input>
           </Form.Item>
         )}

src/pages/api-keys/index.tsx

@@ -20,7 +20,7 @@ import {
 } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { deleteApisKey, queryApisKeysList } from './apis';
 import AddAPIKeyModal from './components/add-apikey';
 import { ListItem } from './config/types';
@@ -179,7 +179,7 @@ const Models: React.FC = () => {
   }, [queryParams]);
 
   return (
-    <>
+    <StrictMode>
       <PageContainer
         ghost
         header={{
@@ -308,7 +308,7 @@ const Models: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddAPIKeyModal>
-    </>
+    </StrictMode>
   );
 };
 

src/pages/dashboard/index.tsx

@@ -1,17 +1,19 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { Spin } from 'antd';
-import { memo, useState } from 'react';
+import { StrictMode, memo, useState } from 'react';
 import DashboardInner from './components/dahboard-inner';
 
 const Dashboard: React.FC = () => {
   const [loading, setLoading] = useState(false);
 
   return (
-    <PageContainer ghost extra={[]}>
-      <Spin spinning={loading}>
-        <DashboardInner setLoading={setLoading} />
-      </Spin>
-    </PageContainer>
+    <StrictMode>
+      <PageContainer ghost extra={[]}>
+        <Spin spinning={loading}>
+          <DashboardInner setLoading={setLoading} />
+        </Spin>
+      </PageContainer>
+    </StrictMode>
   );
 };
 

src/pages/llmodels/index.tsx

@@ -4,7 +4,7 @@ import useSetChunkRequest, {
 } from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import _ from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { StrictMode, useCallback, useEffect, useRef, useState } from 'react';
 import { MODELS_API, MODEL_INSTANCE_API, queryModelsList } from './apis';
 import TableList from './components/table-list';
 import { ListItem } from './config/types';
@@ -168,24 +168,26 @@ const Models: React.FC = () => {
   }, [queryParams]);
 
   return (
-    <TableContext.Provider
-      value={{
-        allChildren: modelInstances
-      }}
-    >
-      <TableList
-        dataSource={dataSource}
-        handleNameChange={handleNameChange}
-        handleSearch={handleSearch}
-        handleShowSizeChange={handleShowSizeChange}
-        handlePageChange={handlePageChange}
-        createModelsChunkRequest={createModelsChunkRequest}
-        queryParams={queryParams}
-        loading={loading}
-        total={total}
-        fetchData={fetchData}
-      ></TableList>
-    </TableContext.Provider>
+    <StrictMode>
+      <TableContext.Provider
+        value={{
+          allChildren: modelInstances
+        }}
+      >
+        <TableList
+          dataSource={dataSource}
+          handleNameChange={handleNameChange}
+          handleSearch={handleSearch}
+          handleShowSizeChange={handleShowSizeChange}
+          handlePageChange={handlePageChange}
+          createModelsChunkRequest={createModelsChunkRequest}
+          queryParams={queryParams}
+          loading={loading}
+          total={total}
+          fetchData={fetchData}
+        ></TableList>
+      </TableContext.Provider>
+    </StrictMode>
   );
 };
 

src/pages/playground/index.tsx

@@ -1,7 +1,7 @@
 import { PageContainer } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
 import { Divider } from 'antd';
-import { useState } from 'react';
+import { StrictMode, useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
 import './style/play-ground.less';
@@ -12,7 +12,7 @@ const Playground: React.FC = () => {
   const [params, setParams] = useState({});
 
   return (
-    <div>
+    <StrictMode>
       <PageContainer ghost extra={[]}>
         <div className="play-ground">
           <div className="chat">
@@ -27,7 +27,7 @@ const Playground: React.FC = () => {
           </div>
         </div>
       </PageContainer>
-    </div>
+    </StrictMode>
   );
 };
 

src/pages/profile/index.tsx

@@ -6,7 +6,6 @@ import { updatePassword } from '@/pages/login/apis';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Form, message } from 'antd';
-import { StrictMode } from 'react';
 
 interface ProfileProps {
   username?: string;
@@ -35,99 +34,97 @@ const Profile: React.FC = () => {
   };
 
   return (
-    <StrictMode>
-      <PageContainer
-        ghost
-        header={{
-          title: intl.formatMessage({ id: 'users.form.updatepassword' })
-        }}
-        extra={[]}
+    <PageContainer
+      ghost
+      header={{
+        title: intl.formatMessage({ id: 'users.form.updatepassword' })
+      }}
+      extra={[]}
+    >
+      <Form
+        style={{ width: '524px' }}
+        name="profileForm"
+        form={form}
+        onFinish={handleOnFinish}
+        onFinishFailed={handleOnFinishFailed}
       >
-        <Form
-          style={{ width: '524px' }}
-          name="profileForm"
-          form={form}
-          onFinish={handleOnFinish}
-          onFinishFailed={handleOnFinishFailed}
-        >
-          <Form.Item<ProfileProps>
-            name="current_password"
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage(
-                  { id: 'common.form.rule.input' },
-                  {
-                    name: intl.formatMessage({
-                      id: 'users.form.currentpassword'
-                    })
-                  }
-                )
-              }
-            ]}
-          >
-            <SealInput.Password
-              label={intl.formatMessage({ id: 'users.form.currentpassword' })}
-              required
-              style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Password>
-          </Form.Item>
-          <Form.Item<ProfileProps>
-            name="new_password"
-            rules={[
-              {
-                required: true,
-                pattern: PasswordReg,
-                message: intl.formatMessage({
-                  id: 'users.form.rule.password'
-                })
-              }
-            ]}
-          >
-            <SealInput.Password
-              label={intl.formatMessage({ id: 'users.form.newpassword' })}
-              required
-              style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Password>
-          </Form.Item>
-          <Form.Item
-            name="confirm_password"
-            dependencies={['new_password']}
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage({
-                  id: 'users.password.confirm.empty'
-                })
-              },
-              ({ getFieldValue }) => ({
-                validator(_, value) {
-                  if (!value || getFieldValue('new_password') === value) {
-                    return Promise.resolve();
-                  }
-                  return Promise.reject(
-                    new Error(
-                      intl.formatMessage({ id: 'users.password.confirm.error' })
-                    )
-                  );
+        <Form.Item<ProfileProps>
+          name="current_password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({
+                    id: 'users.form.currentpassword'
+                  })
                 }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            label={intl.formatMessage({ id: 'users.form.currentpassword' })}
+            required
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Password>
+        </Form.Item>
+        <Form.Item<ProfileProps>
+          name="new_password"
+          rules={[
+            {
+              required: true,
+              pattern: PasswordReg,
+              message: intl.formatMessage({
+                id: 'users.form.rule.password'
               })
-            ]}
-          >
-            <SealInput.Password
-              required={true}
-              style={{ width: INPUT_WIDTH.default }}
-              label={intl.formatMessage({ id: 'users.password.confirm' })}
-            />
-          </Form.Item>
-          <FormButtons
-            htmlType="submit"
-            onCancel={handleCancel}
-            showCancel={false}
-          ></FormButtons>
-        </Form>
-      </PageContainer>
-    </StrictMode>
+            }
+          ]}
+        >
+          <SealInput.Password
+            label={intl.formatMessage({ id: 'users.form.newpassword' })}
+            required
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Password>
+        </Form.Item>
+        <Form.Item
+          name="confirm_password"
+          dependencies={['new_password']}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'users.password.confirm.empty'
+              })
+            },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('new_password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error(
+                    intl.formatMessage({ id: 'users.password.confirm.error' })
+                  )
+                );
+              }
+            })
+          ]}
+        >
+          <SealInput.Password
+            required={true}
+            style={{ width: INPUT_WIDTH.default }}
+            label={intl.formatMessage({ id: 'users.password.confirm' })}
+          />
+        </Form.Item>
+        <FormButtons
+          htmlType="submit"
+          onCancel={handleCancel}
+          showCancel={false}
+        ></FormButtons>
+      </Form>
+    </PageContainer>
   );
 };
 

src/pages/resources/index.tsx

@@ -2,7 +2,7 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
-import { useState } from 'react';
+import { StrictMode, useState } from 'react';
 import GPUs from './components/gpus';
 import Workers from './components/workers';
 
@@ -29,23 +29,25 @@ const Resources = () => {
   };
 
   return (
-    <PageContainer
-      ghost
-      header={{
-        title: intl.formatMessage({ id: 'resources.title' })
-      }}
-      extra={[]}
-    >
-      <div style={{ marginTop: 60 }}>
-        <Tabs
-          type="card"
-          defaultActiveKey="workers"
-          items={items}
-          accessKey={activeKey}
-          onChange={handleChangeTab}
-        ></Tabs>
-      </div>
-    </PageContainer>
+    <StrictMode>
+      <PageContainer
+        ghost
+        header={{
+          title: intl.formatMessage({ id: 'resources.title' })
+        }}
+        extra={[]}
+      >
+        <div style={{ marginTop: 60 }}>
+          <Tabs
+            type="card"
+            defaultActiveKey="workers"
+            items={items}
+            accessKey={activeKey}
+            onChange={handleChangeTab}
+          ></Tabs>
+        </div>
+      </PageContainer>
+    </StrictMode>
   );
 };
 

src/pages/users/index.tsx

@@ -18,7 +18,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Input, Modal, Space, Table, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
@@ -201,7 +201,7 @@ const Users: React.FC = () => {
   }, [queryParams]);
 
   return (
-    <>
+    <StrictMode>
       <PageContainer
         ghost
         header={{
@@ -330,7 +330,7 @@ const Users: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>
-    </>
+    </StrictMode>
   );
 };