diff --git a/config/theme.ts b/config/theme.ts index 717a9db8..4625f1db 100644 --- a/config/theme.ts +++ b/config/theme.ts @@ -15,7 +15,7 @@ export default { iconSize: 16, iconMarginInlineEnd: 12, itemHeight: 44, - // itemColor: 'rgba(0,0,0,.88)', + itemColor: 'rgba(0,0,0,1)', itemHoverBg: 'rgba(0,0,0,0.04)', itemActiveBg: 'rgba(0,0,0,0.04)' }, diff --git a/src/components/seal-form/components/label-info.tsx b/src/components/seal-form/components/label-info.tsx index 0c319495..4e486685 100644 --- a/src/components/seal-form/components/label-info.tsx +++ b/src/components/seal-form/components/label-info.tsx @@ -10,23 +10,38 @@ interface NoteInfoProps { } const NoteInfo: React.FC = (props) => { const { required, description, label } = props || {}; + return ( - {label} - - {required && ( - - * - - )} - {description && ( - - + {description ? ( + + {label} + + {required && ( + + * + + )} + - + - )} - + + ) : ( + <> + {label} + + {required && ( + + * + + )} + + + )} ); }; diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index 5cd57a02..b523438d 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -39,8 +39,8 @@ const TableRow: React.FC< console.log('table row===='); const { updateChunkedList } = useUpdateChunkedList({ - setDataList: setChildrenData, - callback: (list) => renderChildren?.(list) + setDataList: setChildrenData + // callback: (list) => renderChildren?.(list) }); useEffect(() => { @@ -101,6 +101,7 @@ const TableRow: React.FC< setChildrenData([]); setLoading(false); } finally { + childrenDataRef.current = childrenData; setFirstLoad(false); } }; diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 5b61fb0c..e7351b65 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -30,10 +30,10 @@ const SealTable: React.FC = (props) => { useEffect(() => { if (rowSelection) { const { selectedRowKeys } = rowSelection; - if (selectedRowKeys.length === 0) { + if (selectedRowKeys?.length === 0) { setSelectAll(false); setIndeterminate(false); - } else if (selectedRowKeys.length === props.dataSource.length) { + } else if (selectedRowKeys?.length === props.dataSource.length) { setSelectAll(true); setIndeterminate(false); } else { @@ -45,12 +45,10 @@ const SealTable: React.FC = (props) => { const handleSelectAllChange = (e: any) => { if (e.target.checked) { - // update selectedRowKeys rowSelection?.onChange(props.dataSource.map((record) => record[rowKey])); setSelectAll(true); setIndeterminate(false); } else { - // update selectedRowKeys rowSelection?.onChange([]); setSelectAll(false); setIndeterminate(false); diff --git a/src/components/status-tag/index.less b/src/components/status-tag/index.less index 3214807b..eefa8cf6 100644 --- a/src/components/status-tag/index.less +++ b/src/components/status-tag/index.less @@ -12,7 +12,7 @@ overflow: hidden; &.download { - border: 1px solid var(--ant-color-border) !important; + border: 1px solid #93ecc5 !important; } .download { @@ -24,12 +24,14 @@ top: 0; bottom: 0; height: 100%; - background-color: rgba(0, 0, 0, 15%); + // background-color: rgba(0, 0, 0, 15%); + background-color: #e0f5ec; } .progress { position: relative; z-index: 10; - color: var(--ant-color-text); + // color: var(--ant-color-text); + color: var(--color-progress-green); } } diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx index 26f45c29..f38356b4 100644 --- a/src/components/status-tag/index.tsx +++ b/src/components/status-tag/index.tsx @@ -27,7 +27,11 @@ type StatusTagProps = { const StatusTag: React.FC = ({ statusValue, download }) => { const { text, status } = statusValue; - const [statusColor, setStatusColor] = useState<{ text: string; bg: string }>({ + const [statusColor, setStatusColor] = useState<{ + text: string; + bg: string; + border?: string; + }>({ text: '', bg: '' }); @@ -56,7 +60,7 @@ const StatusTag: React.FC = ({ statusValue, download }) => { })} style={{ color: statusColor?.text, - border: `1px solid ${statusColor?.text}` + border: `1px solid ${statusColor?.border || statusColor?.text}` }} > {statusValue.message ? ( diff --git a/src/config/index.ts b/src/config/index.ts index 2d022125..162d4cb8 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -6,29 +6,32 @@ export const PageAction: Record = { VIEW: 'view' }; -export const StatusColorMap: Record = - { - error: { - text: `var(--ant-red-6)`, - bg: `var(--ant-red-1)` - }, - warning: { - text: `var(--ant-orange-6)`, - bg: `var(--ant-orange-1)` - }, - transitioning: { - text: `var(--ant-blue-6)`, - bg: `var(--ant-blue-1)` - }, - success: { - text: `var(--color-progress-green)`, - bg: `var(--ant-green-1)` - }, - inactive: { - text: `var(--ant-color-text-secondary)`, - bg: `var(--ant-color-fill)` - } - }; +export const StatusColorMap: Record< + StatusType, + { text: string; bg: string; border?: string } +> = { + error: { + text: `var(--ant-red-6)`, + bg: `var(--ant-red-1)` + }, + warning: { + text: `var(--ant-orange-6)`, + bg: `var(--ant-orange-1)` + }, + transitioning: { + text: `var(--ant-blue-6)`, + bg: `var(--ant-blue-1)` + }, + success: { + text: `var(--color-progress-green)`, + bg: `var(--ant-green-1)` + }, + inactive: { + text: `var(--ant-color-text-tertiary)`, + border: `rgba(200,200,200,1)`, + bg: `var(--ant-color-fill)` + } +}; export const StatusMaps = { error: 'error', diff --git a/src/global.less b/src/global.less index f717513e..8424000c 100644 --- a/src/global.less +++ b/src/global.less @@ -50,6 +50,7 @@ html { --ant-input-hover-border-color: #2997ff; --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%); --ant-border-radius-lg: 8px; + --ant-menu-item-color: var(--color-text-1); // --box-shadow-base: none; .css-var-rf { @@ -283,7 +284,6 @@ body { .ant-pro-sider .ant-layout-sider-children { background-color: var(--color-fill-sider); - // box-shadow: var(--box-shadow-base); border-right: 1px solid var(--ant-color-border); } } @@ -300,9 +300,7 @@ body { .ant-table-tbody { .ant-table-row { border-radius: var(--table-td-radius); - // background-color: var(--color-white-1); background-color: var(--color-fill-sider); - // box-shadow: var(--box-shadow-base); > td { background-color: unset; @@ -348,6 +346,7 @@ body { .ant-menu { .ant-menu-item { border-radius: var(--border-radius-small); + color: var(--color-text-1) !important; &:active { background-color: var(--ant-menu-item-selected-bg); @@ -363,12 +362,12 @@ body { } .ant-menu-item.ant-menu-item-selected:hover { - color: var(--ant-color-primary); + color: var(--ant-color-primary) !important; background-color: var(--ant-menu-item-selected-bg); } .ant-menu-item.ant-menu-item-selected { - color: var(--ant-color-primary); + color: var(--ant-color-primary) !important; background-color: var(--ant-menu-item-selected-bg); } } @@ -380,6 +379,7 @@ body { .ant-menu-item-only-child { height: 40px; line-height: 40px; + color: var(--color-text-1); .anticon { font-size: var(--font-size-middle); @@ -392,6 +392,7 @@ body { .user-avatar.ant-menu-submenu { .ant-menu-submenu-title { padding-left: 10px; + color: var(--color-text-1) !important; } } @@ -413,6 +414,7 @@ body { display: flex; justify-content: flex-start; align-items: center; + color: var(--color-text-1) !important; } } diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 50f418f9..e422a24e 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -98,7 +98,7 @@ const ActiveTable = () => { } }, { - title: intl.formatMessage({ id: 'dashboard.runninginstances' }), + title: intl.formatMessage({ id: 'models.form.replicas' }), dataIndex: 'instance_count', key: 'instance_count' }, diff --git a/src/pages/dashboard/config/index.ts b/src/pages/dashboard/config/index.ts index 01fbe0e7..fe25e99c 100644 --- a/src/pages/dashboard/config/index.ts +++ b/src/pages/dashboard/config/index.ts @@ -2,31 +2,22 @@ export const overviewConfigs = [ { key: 'worker_count', label: 'dashboard.workers', - // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))' backgroundColor: 'var(--color-white-1)' }, { key: 'gpu_count', label: 'dashboard.totalgpus', backgroundColor: 'var(--color-white-1)' - // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))' }, - // { - // key: 'allocatedGpus', - // label: 'dashboard.allocategpus', - // backgroundColor: 'var(--color-white-1)' - // // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))' - // }, + { key: 'model_count', label: 'dashboard.models', backgroundColor: 'var(--color-white-1)' - // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))' }, { key: 'model_instance_count', - label: 'dashboard.instances', + label: 'models.form.replicas', backgroundColor: 'var(--color-white-1)' - // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))' } ]; diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index b28803df..4054827a 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -19,11 +19,17 @@ interface InstanceItemProps { ) => void; } +const testStatus = { + state: InstanceStatusMap.Downloading, + text: 'Downloading' +}; + const InstanceItem: React.FC = ({ list, handleChildSelect }) => { console.log('instance item===='); + const intl = useIntl(); const childActionList = [ { diff --git a/src/pages/login/components/styles.less b/src/pages/login/components/styles.less index ed807667..a9347ea2 100644 --- a/src/pages/login/components/styles.less +++ b/src/pages/login/components/styles.less @@ -4,7 +4,7 @@ width: max-content; height: max-content; padding: 32px; - background-color: rgba(255, 255, 255, 50%); + background-color: rgba(255, 255, 255, 90%); :global(.field-wrapper) { background-color: transparent !important; diff --git a/src/pages/playground/components/chat-footer.tsx b/src/pages/playground/components/chat-footer.tsx index 2ef0c43d..ccec36ae 100644 --- a/src/pages/playground/components/chat-footer.tsx +++ b/src/pages/playground/components/chat-footer.tsx @@ -26,6 +26,7 @@ interface ChatFooterProps { } const ChatFooter: React.FC = (props) => { + console.log('chat footer====='); const platform = platformCall(); const intl = useIntl(); const { diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index 8773995a..3c5aa1c6 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -69,12 +69,14 @@ const MessageList: React.FC = (props) => { }; const joinMessage = (chunk: any) => { + if (!chunk) { + return; + } if (_.get(chunk, 'choices.0.finish_reason')) { setTokenResult({ ...chunk?.usage }); - - return true; + return; } contentRef.current = contentRef.current + _.get(chunk, 'choices.0.delta.content', ''); @@ -86,8 +88,6 @@ const MessageList: React.FC = (props) => { uid: messageId.current } ]); - console.log('messageList=====', messageList, messageId.current, chunk); - return false; }; const handleStopConversation = () => { controllerRef.current?.abort?.(); diff --git a/src/pages/playground/components/message-item.tsx b/src/pages/playground/components/message-item.tsx index 741597ce..436ecfd3 100644 --- a/src/pages/playground/components/message-item.tsx +++ b/src/pages/playground/components/message-item.tsx @@ -3,7 +3,7 @@ import HotKeys from '@/config/hotkeys'; import { MinusCircleOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Input, Space } from 'antd'; -import { memo, useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { Roles } from '../config'; import '../style/message-item.less'; @@ -23,10 +23,7 @@ const MessageItem: React.FC<{ onDelete: () => void; }> = ({ message, isFocus, onDelete, updateMessage, onSubmit, loading }) => { const intl = useIntl(); - const [roleType, setRoleType] = useState(message.role); const [isTyping, setIsTyping] = useState(false); - const [messageContent, setMessageContent] = useState(message.content); - const isInitialRender = useRef(true); const [isAnimating, setIsAnimating] = useState(false); const [currentIsFocus, setCurrentIsFocus] = useState(isFocus); const inputRef = useRef(null); @@ -57,29 +54,20 @@ const MessageItem: React.FC<{ // return () => clearInterval(intervalId); // }, [message.content, isTyping]); - useEffect(() => { - setMessageContent(message.content); - }, [message.content]); - - useEffect(() => { - if (!isInitialRender.current) { - updateMessage({ - role: roleType, - content: messageContent, - uid: message.uid - }); - } else { - isInitialRender.current = false; - } - }, [roleType, messageContent]); - + const handleUpdateMessage = (params: { role: string; message: string }) => { + updateMessage({ + role: params.role, + content: params.message, + uid: message.uid + }); + }; const handleMessageChange = (e: any) => { - setIsTyping(true); - setMessageContent(e.target.value); + // setIsTyping(true); + handleUpdateMessage({ role: message.role, message: e.target.value }); }; const handleBlur = () => { - setIsTyping(true); + // setIsTyping(true); setCurrentIsFocus(false); }; @@ -88,11 +76,10 @@ const MessageItem: React.FC<{ }; const handleRoleChange = () => { - setRoleType((prevRoleType) => { - const newRoleType = - prevRoleType === Roles.User ? Roles.Assistant : Roles.User; - return newRoleType; - }); + const newRoleType = + message.role === Roles.User ? Roles.Assistant : Roles.User; + + handleUpdateMessage({ role: newRoleType, message: message.content }); }; const handleDelete = () => { @@ -116,14 +103,14 @@ const MessageItem: React.FC<{
- {messageContent && ( - + {message.content && ( + )}