feat: more language

src/pages/dashboard/components/model-nodes.tsx

@@ -36,7 +36,7 @@ const dataSource: NodeItem[] = [
     state: 'ALIVE'
   },
   {
-    id: 1,
+    id: 2,
     name: '192.168.1.2',
     address: '192.168.1.5',
     hostname: 'node-2',
@@ -81,7 +81,7 @@ const dataSource: NodeItem[] = [
   }
 ];
 
-const Models: React.FC = () => {
+const ModelNodes: React.FC = () => {
   const rowSelection = useTableRowSelection();
 
   const [selectName, setSelectName] = useState<string>('llama3:latest');
@@ -186,6 +186,7 @@ const Models: React.FC = () => {
         ></PageTools>
         <Table
           dataSource={dataSource}
+          rowKey={(record) => record.id}
           loading={loading}
           onChange={handleTableChange}
           pagination={false}
@@ -265,4 +266,4 @@ const Models: React.FC = () => {
   );
 };
 
-export default Models;
+export default ModelNodes;

src/pages/dashboard/components/over-view.tsx

@@ -25,9 +25,8 @@ const Overview: React.FC = (props) => {
   return (
     <Row gutter={[20, 20]} className={styles.row}>
       {overviewConfigs.map((config, index) => (
-        <Col span={5}>
+        <Col span={5} key={config.key}>
           <CardItem
-            key={config.key}
             label={config.label}
             value={data[config.key] || 0}
             bgColor={config.backgroundColor}

src/pages/dashboard/components/utilization-overtime.tsx

@@ -46,6 +46,7 @@ const UtilizationOvertime: React.FC = () => {
     color: ['red', 'blue', 'green'],
     colorField: 'type',
     slider: false,
+    shapeField: 'smooth',
     axis: {
       x: {
         textStyle: {
@@ -53,24 +54,22 @@ const UtilizationOvertime: React.FC = () => {
         }
       }
     },
-    xAxis: {
-      autoRotate: true
-    },
-    yAxis: {
-      nice: true,
-      label: {
-        autoRotate: true
-      }
-    },
     point: {
       shapeField: 'circle',
       sizeField: 2
     },
+    style: {
+      lineWidth: 1.4
+    },
     legend: {
       color: {
         layout: { justifyContent: 'center' }
       }
     },
+    tooltip: {
+      title: 'time',
+      items: [{ channel: 'y' }]
+    },
     label: {
       autoRotate: true
     }

src/pages/llm-models/components/add-modal.tsx

@@ -11,13 +11,12 @@ type AddModalProps = {
   onOk: () => void;
   onCancel: () => void;
 };
-const AddModal: React.FC<AddModalProps> = ({
-  title,
-  action,
-  open,
-  onOk,
-  onCancel
-}) => {
+const AddModal: React.FC<AddModalProps> = (props) => {
+  const { title, action, open, onOk, onCancel } = props || {};
+  if (!open) {
+    return null;
+  }
+  console.log('modal open', open);
   const [form] = Form.useForm();
   return (
     <Modal

src/pages/llm-models/index.tsx

@@ -10,8 +10,9 @@ import {
   WechatWorkOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useNavigate } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import {
+  App,
   Button,
   Input,
   Modal,
@@ -21,7 +22,7 @@ import {
   Tooltip,
   message
 } from 'antd';
-import { useState } from 'react';
+import { StrictMode, useState } from 'react';
 import AddModal from './components/add-modal';
 const { Column } = Table;
 
@@ -44,6 +45,8 @@ const dataSource = [
 ];
 
 const Models: React.FC = () => {
+  const { modal } = App.useApp();
+  const intl = useIntl();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
@@ -125,7 +128,7 @@ const Models: React.FC = () => {
     navigate('/playground');
   };
   return (
-    <>
+    <StrictMode>
       <PageContainer
         ghost
         header={{
@@ -157,7 +160,7 @@ const Models: React.FC = () => {
                 type="primary"
                 onClick={handleAddModal}
               >
-                Import Module
+                {intl?.formatMessage?.({ id: 'models.button.deploy' })}
               </Button>
               <Button
                 icon={<DeleteOutlined />}
@@ -246,7 +249,7 @@ const Models: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>
-    </>
+    </StrictMode>
   );
 };
 

src/pages/nodes/index.tsx

@@ -34,7 +34,7 @@ const dataSource: NodeItem[] = [
     state: 'ALIVE'
   },
   {
-    id: 1,
+    id: 2,
     name: '192.168.1.2',
     address: '192.168.1.5',
     hostname: 'node-2',
@@ -173,6 +173,7 @@ const Models: React.FC = () => {
           dataSource={dataSource}
           rowSelection={rowSelection}
           loading={loading}
+          rowKey="id"
           onChange={handleTableChange}
           pagination={{
             showSizeChanger: true,

src/pages/playground/index.tsx

@@ -44,7 +44,7 @@ const Playground: React.FC = () => {
     <PageContainer
       title={false}
       extra={[
-        <Space size={20}>
+        <Space size={20} key="space">
           <Select
             showSearch
             options={ModelList}
@@ -52,6 +52,7 @@ const Playground: React.FC = () => {
             value={selectedModel}
             onChange={handleSelectChange}
             variant="filled"
+            key="model-select"
           ></Select>
           <Popover
             content={
@@ -65,17 +66,19 @@ const Playground: React.FC = () => {
             overlayStyle={{ top: 70 }}
             overlayInnerStyle={{ paddingRight: 0 }}
             placement="bottomRight"
+            key="popover"
           >
             <Button
               onClick={handleTogglePopover}
               type="primary"
               shape="circle"
+              key="button"
               icon={<ControlOutlined />}
             ></Button>
           </Popover>
         </Space>
       ]}
-      footer={[<MessageInput />]}
+      footer={[<MessageInput key="message" />]}
     >
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <ChatContent messageList={messageList}></ChatContent>