From 1439f591311042c3a495d46c8c2a6dad35543f5c Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 19 Jul 2024 09:33:34 +0800 Subject: [PATCH] fix: intl refresh in modal confirm --- src/components/delete-modal/index.less | 22 ++++++ src/components/delete-modal/index.tsx | 76 +++++++++++++++---- src/components/modal-footer/index.tsx | 12 ++- src/locales/en-US/common.ts | 3 +- src/locales/zh-CN/common.ts | 5 +- src/pages/api-keys/index.tsx | 21 ++--- src/pages/llmodels/components/table-list.tsx | 47 ++---------- .../playground/components/view-code-modal.tsx | 29 +++++-- src/pages/resources/components/workers.tsx | 23 +++--- src/pages/users/index.tsx | 21 ++--- 10 files changed, 156 insertions(+), 103 deletions(-) create mode 100644 src/components/delete-modal/index.less diff --git a/src/components/delete-modal/index.less b/src/components/delete-modal/index.less new file mode 100644 index 00000000..c6969d0b --- /dev/null +++ b/src/components/delete-modal/index.less @@ -0,0 +1,22 @@ +:local(.delete-modal-content) { + display: flex; + font-size: var(--font-size-middle); + + :global { + .anticon { + font-size: 20px; + margin-right: 10px; + color: var(--ant-color-warning); + } + + .title { + display: flex; + align-items: center; + } + } +} + +:local(.content) { + padding-top: 15px; + padding-left: 30px; +} diff --git a/src/components/delete-modal/index.tsx b/src/components/delete-modal/index.tsx index d6f5fd08..c9ba3fb1 100644 --- a/src/components/delete-modal/index.tsx +++ b/src/components/delete-modal/index.tsx @@ -1,29 +1,77 @@ -import ModalFooter from '@/components/modal-footer'; +import { ExclamationCircleFilled } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; -import { Modal, type ModalFuncProps } from 'antd'; -import { forwardRef } from 'react'; +import { Button, Modal, Space, message, type ModalFuncProps } from 'antd'; +import { forwardRef, useImperativeHandle, useState } from 'react'; +import Styles from './index.less'; -const DeleteModal: React.FC = forwardRef((props, ref) => { +const DeleteModal = forwardRef((props, ref) => { const intl = useIntl(); - const { title, open, onOk, onCancel, content } = props; + const [visible, setVisible] = useState(false); + const [config, setConfig] = useState( + {} + ); + + useImperativeHandle(ref, () => ({ + show: (data: ModalFuncProps & { content: string }) => { + setConfig(data); + setVisible(true); + }, + hide: () => { + setVisible(false); + } + })); + + const handleCancel = () => { + setVisible(false); + config.onCancel?.(); + }; + + const handleOk = async () => { + await config.onOk?.(); + message.success(intl.formatMessage({ id: 'common.message.success' })); + setVisible(false); + }; return ( } + footer={ + + + + + } > - {content} +
+ + + + {intl.formatMessage({ id: 'common.title.delete.confirm' })} + + +
+
+ {config.content && + intl.formatMessage( + { id: 'common.delete.confirm' }, + { type: intl.formatMessage({ id: config.content }) } + )} +
); }); diff --git a/src/components/modal-footer/index.tsx b/src/components/modal-footer/index.tsx index 7e88f29a..4db3c012 100644 --- a/src/components/modal-footer/index.tsx +++ b/src/components/modal-footer/index.tsx @@ -7,6 +7,8 @@ type ModalFooterProps = { cancelText?: string; okText?: string; htmlType?: 'button' | 'submit'; + okBtnProps?: any; + cancelBtnProps?: any; form?: any; loading?: boolean; }; @@ -15,6 +17,8 @@ const ModalFooter: React.FC = ({ onCancel, cancelText, okText, + okBtnProps, + cancelBtnProps, loading, htmlType = 'button', form @@ -22,7 +26,12 @@ const ModalFooter: React.FC = ({ const intl = useIntl(); return ( - diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index d8b8eaf7..fe084cf1 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -191,5 +191,6 @@ export default { 'common.button.help': 'Help', 'common.button.feedback': 'Feedback', 'common.button.docs': 'Documentation', - 'common.button.version': 'Version' + 'common.button.version': 'Version', + 'common.title.delete.confirm': 'Confirm delete' }; diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 4201f77d..27adc80e 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -175,7 +175,7 @@ export default { 'common.table.user': '用户', 'common.settings.instructions': '操作指引', 'common.settings.language': '语言', - 'common.delete.confirm': '确定删除选中的{type}吗？', + 'common.delete.confirm': '删除选中的{type}吗？', 'common.filter.name': '名称查询', 'common.form.password': '密码', 'common.form.username': '用户名', @@ -184,5 +184,6 @@ export default { 'common.button.help': '帮助', 'common.button.feedback': '反馈', 'common.button.docs': '文档', - 'common.button.version': '版本' + 'common.button.version': '版本', + 'common.title.delete.confirm': '确认删除' }; diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index c0febedb..7aaab7cf 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -1,7 +1,7 @@ +import DeleteModal from '@/components/delete-modal'; import PageTools from '@/components/page-tools'; import { PageAction } from '@/config'; import type { PageActionType } from '@/config/types'; -import useDeleteModal from '@/hooks/use-delete-modal'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; import { handleBatchRequest } from '@/utils'; @@ -11,7 +11,7 @@ import { useIntl } from '@umijs/max'; import { Button, Input, Space, Table, Tooltip } from 'antd'; import dayjs from 'dayjs'; import _ from 'lodash'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { deleteApisKey, queryApisKeysList } from './apis'; import AddAPIKeyModal from './components/add-apikey'; import { ListItem } from './config/types'; @@ -19,12 +19,12 @@ import { ListItem } from './config/types'; const { Column } = Table; const Models: React.FC = () => { - const { showDeleteModal } = useDeleteModal(); const rowSelection = useTableRowSelection(); const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); const intl = useIntl(); + const modalRef = useRef(null); const [dataSource, setDataSource] = useState([]); const [total, setTotal] = useState(0); const [openAddModal, setOpenAddModal] = useState(false); @@ -98,12 +98,9 @@ const Models: React.FC = () => { }; const handleDelete = (row: ListItem) => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) } - ), + content: 'apikeys.table.apikeys', async onOk() { console.log('OK'); await deleteApisKey(row.id); @@ -113,12 +110,9 @@ const Models: React.FC = () => { }; const handleDeleteBatch = () => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) } - ), + content: 'apikeys.table.apikeys', async onOk() { await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey); rowSelection.clearSelections(); @@ -262,6 +256,7 @@ const Models: React.FC = () => { onCancel={handleModalCancel} onOk={handleModalOk} > + ); }; diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index cd9f7713..933fecd5 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -5,7 +5,6 @@ import SealTable from '@/components/seal-table'; import SealColumn from '@/components/seal-table/components/seal-column'; import { PageAction } from '@/config'; import type { PageActionType } from '@/config/types'; -import useDeleteModal from '@/hooks/use-delete-modal'; import useExpandedRowKeys from '@/hooks/use-expanded-row-keys'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; @@ -66,7 +65,6 @@ const Models: React.FC = ({ const access = useAccess(); const intl = useIntl(); const [modal, contextHolder] = Modal.useModal(); - const { showDeleteModal } = useDeleteModal(); const navigate = useNavigate(); const rowSelection = useTableRowSelection(); const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } = @@ -82,8 +80,6 @@ const Models: React.FC = ({ undefined ); const [currentInstanceUrl, setCurrentInstanceUrl] = useState(''); - const [deleteModalVisible, setDeleteModalVisible] = useState(false); - const [deletConfig, setDeletConfig] = useState({}); const modalRef = useRef(null); const ActionList = [ @@ -152,41 +148,19 @@ const Models: React.FC = ({ setOpenLogModal(false); }, []); const handleDelete = async (row: any) => { - console.log('handleDelete=======111', row); - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'models.table.models' }) } - ), + content: 'models.table.models', async onOk() { await deleteModel(row.id); updateExpandedRowKeys([row.id]); } }); - // setDeleteModalVisible(true); - // setDeletConfig({ - // title: '', - // content: intl.formatMessage( - // { id: 'common.delete.confirm' }, - // { type: intl.formatMessage({ id: 'models.table.models' }) } - // ), - // async onOk() { - // await deleteModel(row.id); - // updateExpandedRowKeys([row.id]); - // }, - // onCancel: () => { - // setDeleteModalVisible(false); - // } - // }); }; const handleDeleteBatch = () => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'models.table.models' }) } - ), + content: 'models.table.models', async onOk() { await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel); rowSelection.clearSelections(); @@ -208,12 +182,9 @@ const Models: React.FC = ({ } }; const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'models.instances' }) } - ), + content: 'models.instances', async onOk() { await deleteModelInstance(row.id); if (list.length === 1) { @@ -430,11 +401,7 @@ const Models: React.FC = ({ open={openLogModal} onCancel={handleLogModalCancel} > - + ); }; diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index 7bbd0637..40b9e629 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/src/pages/playground/components/view-code-modal.tsx @@ -56,10 +56,15 @@ const ViewCodeModal: React.FC = (props) => { const systemList = systemMessage ? [{ role: 'system', content: systemMessage }] : []; - const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify( + const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer {YOUR_GUPSTACK_API_KEY}" \\\n-d '${JSON.stringify( { ...parameters, - messages: [...systemList, ...messageList] + messages: [ + ...systemList, + ..._.map(messageList, (item: any) => { + return { role: item.role, content: item.content }; + }) + ] }, null, 2 @@ -69,10 +74,15 @@ const ViewCodeModal: React.FC = (props) => { const systemList = systemMessage ? [{ role: 'system', content: systemMessage }] : []; - const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": $\{GUPSTACK_API_KEY},\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify( + const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": "YOUR_GUPSTACK_API_KEY",\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify( { ...parameters, - messages: [...systemList, ...messageList] + messages: [ + ...systemList, + ..._.map(messageList, (item: any) => { + return { role: item.role, content: item.content }; + }) + ] }, null, 2 @@ -95,7 +105,16 @@ const ViewCodeModal: React.FC = (props) => { const systemList = systemMessage ? [{ role: 'system', content: systemMessage }] : []; - const code = `from openai import OpenAI\n\nbaseURL = ${BaseURL}\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="$\{GUPSTACK_API_KEY}"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message.content)`; + const code = `from openai import OpenAI\n\nbaseURL = "${BaseURL}"\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="YOUR_GUPSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify( + [ + ...systemList, + ..._.map(messageList, (item: any) => { + return { role: item.role, content: item.content }; + }) + ], + null, + 2 + )})\nprint(completion.choices[0].message.content)`; setCodeValue(code); } formatCode(); diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 0ffd42d1..68474d40 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -1,7 +1,7 @@ +import DeleteModal from '@/components/delete-modal'; import PageTools from '@/components/page-tools'; import ProgressBar from '@/components/progress-bar'; import StatusTag from '@/components/status-tag'; -import useDeleteModal from '@/hooks/use-delete-modal'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; import { convertFileSize, handleBatchRequest } from '@/utils'; @@ -13,7 +13,7 @@ import { import { useIntl } from '@umijs/max'; import { Button, Input, Space, Table, Tooltip } from 'antd'; import _ from 'lodash'; -import { memo, useEffect, useState } from 'react'; +import { memo, useEffect, useRef, useState } from 'react'; import { deleteWorker, queryWorkersList } from '../apis'; import { WorkerStatusMapValue, status } from '../config'; import { Filesystem, GPUDeviceItem, ListItem } from '../config/types'; @@ -25,7 +25,7 @@ const Resources: React.FC = () => { const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); - const { showDeleteModal } = useDeleteModal(); + const modalRef = useRef(null); const rowSelection = useTableRowSelection(); const intl = useIntl(); const [total, setTotal] = useState(0); @@ -102,12 +102,9 @@ const Resources: React.FC = () => { }; const handleDelete = (row: ListItem) => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: ' worker ' } - ), + content: 'worker', async onOk() { console.log('OK'); await deleteWorker(row.id); @@ -117,12 +114,9 @@ const Resources: React.FC = () => { }; const handleDeleteBatch = () => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: ` wokers ` } - ), + content: 'wokers', async onOk() { await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker); rowSelection.clearSelections(); @@ -279,7 +273,7 @@ const Resources: React.FC = () => { className="m-r-5" style={{ display: 'flex', width: 25 }} > - [{index}] + [{item.index}] { }} /> + ); }; diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index 28109495..16a5891c 100644 --- a/src/pages/users/index.tsx +++ b/src/pages/users/index.tsx @@ -1,8 +1,8 @@ +import DeleteModal from '@/components/delete-modal'; import DropdownButtons from '@/components/drop-down-buttons'; import PageTools from '@/components/page-tools'; import { PageAction } from '@/config'; import type { PageActionType } from '@/config/types'; -import useDeleteModal from '@/hooks/use-delete-modal'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; import { handleBatchRequest } from '@/utils'; @@ -19,7 +19,7 @@ import { useIntl } from '@umijs/max'; import { Button, Input, Space, Table, message } from 'antd'; import dayjs from 'dayjs'; import _ from 'lodash'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { createUser, deleteUser, queryUsersList, updateUser } from './apis'; import AddModal from './components/add-modal'; import { FormData, ListItem } from './config/types'; @@ -31,8 +31,8 @@ const Users: React.FC = () => { const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); - const { showDeleteModal } = useDeleteModal(); const intl = useIntl(); + const modalRef = useRef(null); const [total, setTotal] = useState(0); const [openAddModal, setOpenAddModal] = useState(false); const [loading, setLoading] = useState(false); @@ -142,12 +142,9 @@ const Users: React.FC = () => { }; const handleDelete = (row: ListItem) => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'users.table.user' }) } - ), + content: 'users.table.user', async onOk() { console.log('OK'); await deleteUser(row.id); @@ -157,12 +154,9 @@ const Users: React.FC = () => { }; const handleDeleteBatch = () => { - showDeleteModal({ + modalRef.current.show({ title: '', - content: intl.formatMessage( - { id: 'common.delete.confirm' }, - { type: intl.formatMessage({ id: 'users.table.user' }) } - ), + content: 'users.table.user', async onOk() { await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser); rowSelection.clearSelections(); @@ -319,6 +313,7 @@ const Users: React.FC = () => { onCancel={handleModalCancel} onOk={handleModalOk} > + ); };