fix(style): model status

config/theme.ts

@@ -22,6 +22,9 @@ export default {
     Progress: {
       lineBorderRadius: 4
     },
+    Select: {
+      itemSelectedBg: 'rgba(0,0,0,0.06)'
+    },
     Slider: {
       handleSize: 8,
       handleSizeHover: 8,

src/components/icon-font/index.tsx

@@ -0,0 +1,7 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_clxjnjvlf6m.js'
+});
+
+export default IconFont;

src/components/status-tag/index.less

@@ -12,7 +12,7 @@
   overflow: hidden;
 
   &.download {
-    background-color: var(--ant-blue-2);
+    border: 1px solid var(--ant-color-border) !important;
   }
 
   .download {
@@ -24,12 +24,12 @@
     top: 0;
     bottom: 0;
     height: 100%;
-    background-color: var(--ant-color-primary);
+    background-color: rgba(0, 0, 0, 15%);
   }
 
   .progress {
     position: relative;
     z-index: 10;
-    color: var(--color-white-1);
+    color: var(--ant-color-text);
   }
 }

src/components/status-tag/index.tsx

@@ -51,17 +51,10 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
       className={classNames('status-tag', {
         download: download?.percent
       })}
-      style={
+      style={{
-        download
+        color: statusColor?.text,
-          ? {
+        border: `1px solid ${statusColor?.text}`
-              color: StatusColorMap['success']['text'],
+      }}
-              border: `1px solid ${StatusColorMap['success']['text']}`
-            }
-          : {
-              color: statusColor?.text,
-              border: `1px solid ${statusColor?.text}`
-            }
-      }
     >
       {renderContent()}
     </span>

src/components/transition/index.less

@@ -16,7 +16,6 @@
 
     .transition-content-wrapper {
       background-color: var(--color-fill-1);
-      padding: 8px;
     }
   }
 

src/components/transition/index.tsx

@@ -73,7 +73,8 @@ const TransitionWrapper: React.FC<TransitionWrapProps> = forwardRef(
           className="transition-content-wrapper"
           style={{
             minHeight: isOpen ? height : 0,
-            height: isOpen ? 'auto' : 0
+            height: isOpen ? 'auto' : 0,
+            padding: isOpen ? '8px' : '0 8px'
           }}
           ref={contentRef}
         >

src/config/index.ts

@@ -25,7 +25,7 @@ export const StatusColorMap: Record<StatusType, { text: string; bg: string }> =
       bg: `var(--ant-green-1)`
     },
     inactive: {
-      text: `var(--ant-color-border)`,
+      text: `var(--ant-color-text-secondary)`,
       bg: `var(--ant-color-fill)`
     }
   };

src/layouts/rightRender.tsx

@@ -117,7 +117,8 @@ export function getRightRenderContent(opts: {
             <Avatar
               size={28}
               style={{
-                color: 'var(--ant-color-text)'
+                color: 'var(--ant-color-text)',
+                fontSize: 16
               }}
             >
               {_.toUpper(opts.initialState?.currentUser?.username?.charAt(0))}

src/locales/en-US/playground.ts

@@ -1,5 +1,5 @@
 export default {
-  'playground.system.tips': 'Enter system message here...',
+  'playground.system.tips': 'Enter system message here',
   'playground.title': 'Playground',
   'playground.system': 'System',
   'playground.user': 'User',

src/locales/zh-CN/playground.ts

@@ -1,5 +1,5 @@
 export default {
-  'playground.system.tips': '在这里输入系统消息...',
+  'playground.system.tips': '在这里输入系统消息',
   'playground.title': '试验场',
   'playground.system': '系统',
   'playground.user': '用户',

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

@@ -89,6 +89,7 @@ const AddModal: React.FC<AddModalProps> = ({
     <Modal
       title={title}
       open={open}
+      centered={true}
       onOk={handleSumit}
       onCancel={onCancel}
       afterOpenChange={handleAfterOpenChange}

src/pages/api-keys/index.tsx

@@ -259,6 +259,14 @@ const Models: React.FC = () => {
               return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
             }}
           />
+          <Column
+            title={intl.formatMessage({ id: 'common.table.description' })}
+            dataIndex="description"
+            key="description"
+            ellipsis={{
+              showTitle: true
+            }}
+          />
           <Column
             title={intl.formatMessage({ id: 'common.table.createTime' })}
             dataIndex="created_at"

src/pages/llmodels/components/add-modal.tsx

@@ -276,6 +276,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     <Modal
       title={title}
       open={open}
+      centered={true}
       onOk={handleSumit}
       onCancel={onCancel}
       destroyOnClose={true}

src/pages/llmodels/components/instance-item.tsx

@@ -7,7 +7,7 @@ import { Col, Row, Space } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React from 'react';
-import { status } from '../config';
+import { InstanceStatusMap, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
 
 interface InstanceItemProps {
@@ -33,6 +33,15 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       icon: <DeleteOutlined />
     }
   ];
+  const testStatus = {
+    state: InstanceStatusMap.Scheduled
+  };
+  const getWorkerIp = (item: ModelInstanceListItem) => {
+    if (item.worker_ip) {
+      return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
+    }
+    return '-';
+  };
   return (
     <Space size={16} direction="vertical" style={{ width: '100%' }}>
       {_.map(list, (item: ModelInstanceListItem, index: number) => {
@@ -40,18 +49,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
           <div
             key={`${item.id}`}
             style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
-            className={
-              item.download_progress !== 100 && item.state !== 'Running'
-                ? 'skeleton-loading'
-                : ''
-            }
           >
             <RowChildren key={`${item.id}_row`}>
               <Row style={{ width: '100%' }} align="middle">
                 <Col span={4}>{item.name}</Col>
-                <Col span={3}>
+                <Col span={3}>{getWorkerIp(item)}</Col>
-                  {item.worker_ip ? `${item.worker_ip}:${item.port}` : '-'}
-                </Col>
                 <Col span={4}>
                   <span>
                     {item.source === 'huggingface'
@@ -68,7 +70,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     {item.state && (
                       <StatusTag
                         download={
-                          item.state !== 'Running'
+                          item.state === InstanceStatusMap.Downloading
                             ? { percent: item.download_progress }
                             : undefined
                         }

src/pages/llmodels/components/view-logs-modal.tsx

@@ -21,13 +21,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     <Modal
       title={intl.formatMessage({ id: 'common.button.viewlog' })}
       open={open}
+      centered={true}
       onCancel={onCancel}
       destroyOnClose={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={'max(50%, 600px)'}
+      width={600}
-      style={{ top: '80px' }}
       footer={null}
     >
       <LogsViewer

src/pages/llmodels/config/index.ts

@@ -18,9 +18,24 @@ export const modelSourceMap: Record<string, string> = {
   s3: 'S3'
 };
 
+export const InstanceStatusMap = {
+  Initializing: 'Initializing',
+  Pending: 'Pending',
+  Running: 'Running',
+  Scheduled: 'Scheduled',
+  Error: 'Error',
+  Downloading: 'Downloading',
+  Unknown: 'Unknown'
+};
+
 export const status: any = {
-  Running: StatusMaps.success,
+  [InstanceStatusMap.Running]: StatusMaps.success,
-  Pending: StatusMaps.transitioning
+  [InstanceStatusMap.Pending]: StatusMaps.transitioning,
+  [InstanceStatusMap.Initializing]: StatusMaps.transitioning,
+  [InstanceStatusMap.Scheduled]: StatusMaps.success,
+  [InstanceStatusMap.Error]: StatusMaps.error,
+  [InstanceStatusMap.Downloading]: StatusMaps.transitioning,
+  [InstanceStatusMap.Unknown]: StatusMaps.inactive
 };
 
 export const ActionList = [
@@ -40,12 +55,3 @@ export const ActionList = [
     icon: EditOutlined
   }
 ];
-
-export const InstanceStatusMap = {
-  Initializing: 'Initializing',
-  Pending: 'Pending',
-  Running: 'Running',
-  Scheduled: 'Scheduled',
-  Error: 'Error',
-  Downloading: 'Downloading'
-};

src/pages/playground/components/chat-footer.tsx

@@ -1,9 +1,9 @@
+import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import {
   CodeOutlined,
   DeleteOutlined,
   EnterOutlined,
-  MacCommandOutlined,
   PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -74,7 +74,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
             <Button disabled={disabled} type="primary" onClick={onSubmit}>
               {intl.formatMessage({ id: 'common.button.submit' })}
               <span className="m-l-5 opct-7">
-                <MacCommandOutlined /> + <EnterOutlined />
+                <IconFont type="icon-command"></IconFont> + <EnterOutlined />
               </span>
             </Button>
           </Space>

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

@@ -85,6 +85,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
         uid: messageId.current
       }
     ]);
+    console.log('messageList=====', messageList, messageId.current, chunk);
     return false;
   };
   const submitMessage = async () => {
@@ -115,7 +116,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
         return;
       }
       const { reader, decoder } = result;
-
       await readStreamData(reader, decoder, (chunk: any) => {
         joinMessage(chunk);
       });
@@ -207,7 +207,10 @@ const MessageList: React.FC<MessageProps> = (props) => {
               autoSize={true}
               onFocus={handleFocus}
               onBlur={handleBlur}
-              placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
+              style={{ minHeight: 40 }}
+              placeholder={intl.formatMessage({
+                id: 'playground.system.tips'
+              })}
               onChange={handleSystemMessageChange}
             ></Input.TextArea>
           </TransitionWrapper>

src/pages/playground/components/message-item.tsx

@@ -31,18 +31,6 @@ const MessageItem: React.FC<{
   const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
   const inputRef = useRef<any>(null);
 
-  useHotkeys(
-    HotKeys.SUBMIT,
-    () => {
-      onSubmit();
-    },
-    {
-      enabled: currentIsFocus && !loading,
-      enableOnFormTags: currentIsFocus && !loading,
-      preventDefault: true
-    }
-  );
-
   useEffect(() => {
     if (inputRef.current && isFocus) {
       inputRef.current.focus();
@@ -110,6 +98,20 @@ const MessageItem: React.FC<{
   const handleDelete = () => {
     onDelete();
   };
+
+  useHotkeys(
+    HotKeys.SUBMIT,
+    () => {
+      inputRef.current.blur();
+      onSubmit();
+    },
+    {
+      enabled: currentIsFocus,
+      enableOnFormTags: currentIsFocus,
+      preventDefault: true
+    }
+  );
+
   return (
     <div className="message-item">
       <div className="role-type">
@@ -124,6 +126,7 @@ const MessageItem: React.FC<{
           value={messageContent}
           autoSize={true}
           variant="filled"
+          readOnly={loading}
           onChange={handleMessageChange}
           onFocus={handleFocus}
           onBlur={handleBlur}

src/pages/playground/components/view-code-modal.tsx

@@ -116,6 +116,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     },
     formatOnType: true,
     formatOnPaste: true,
+    fontWeight: '700',
     scrollbar: {
       verticalSliderSize: 8
     }
@@ -130,13 +131,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       <Modal
         title={title}
         open={open}
+        centered={true}
         onCancel={handleClose}
         destroyOnClose={true}
         closeIcon={true}
         maskClosable={false}
         keyboard={false}
-        width={'max(50%, 600px)'}
+        width={660}
-        style={{ top: '80px' }}
         footer={null}
       >
         <div style={{ marginBottom: '10px' }}>
@@ -151,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
             onChangeLang={handleOnChangeLang}
           >
             <Editor
-              height="500px"
+              height="min(500px, 90vh)"
               theme="vs-dark"
               className="monaco-editor"
               defaultLanguage="shell"

src/pages/profile/index.tsx

@@ -50,26 +50,6 @@ const Profile: React.FC = () => {
           onFinish={handleOnFinish}
           onFinishFailed={handleOnFinishFailed}
         >
-          {/* <Form.Item<ProfileProps>
-            name="username"
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage(
-                  { id: 'common.form.rule.input' },
-                  {
-                    name: intl.formatMessage({ id: 'common.form.username' })
-                  }
-                )
-              }
-            ]}
-          >
-            <SealInput.Input
-              label={intl.formatMessage({ id: 'common.form.username' })}
-              required
-              style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Input>
-          </Form.Item> */}
           <Form.Item<ProfileProps>
             name="current_password"
             rules={[
@@ -135,6 +115,7 @@ const Profile: React.FC = () => {
             ]}
           >
             <SealInput.Password
+              required={true}
               label={intl.formatMessage({ id: 'users.password.confirm' })}
             />
           </Form.Item>

src/pages/table/components/CreateForm.tsx

@@ -14,6 +14,7 @@ const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
       destroyOnClose
       title="新建"
       width={420}
+      centered={true}
       open={modalVisible}
       onCancel={() => onCancel()}
       footer={null}

src/pages/users/components/add-modal.tsx

@@ -54,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = ({
     <Modal
       title={title}
       open={open}
+      centered={true}
       onOk={handleSumit}
       onCancel={onCancel}
       destroyOnClose={true}

src/utils/fetch-chunk-data.ts

@@ -62,7 +62,7 @@ export const readStreamData = async (
   callback: (data: any) => void
 ) => {
   const { done, value } = await reader.read();
-
+  console.log('done====', done, value);
   if (done) {
     return;
   }

src/utils/index.ts

@@ -141,3 +141,17 @@ export const generateFluctuatingData = ({
 
   return y;
 };
+
+export const platformCall = () => {
+  const platform = navigator.userAgent;
+  const isMac = () => {
+    return platform.indexOf('Mac') !== -1;
+  };
+  const isWin = () => {
+    return platform.indexOf('Win') !== -1;
+  };
+  return {
+    isMac: isMac(),
+    isWin: isWin()
+  };
+};