root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update the guide for adding worker

Browse Source
This commit is contained in:
jialin
2025-07-09 16:03:07 +08:00
parent af0aaddbfd
commit fd3eb513ff
8 changed files with 84 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/status-tag/index.tsx
+15 -10
View File
@@ -58,16 +58,21 @@ const StatusTag: React.FC<StatusTagProps> = ({
return StatusColorMap[status];
}, [status]);
const statusMessage = useMemo(() => {
return statusValue.message?.replace(linkReg, '');
const hasLink = useMemo(() => {
if (!statusValue.message) return false;
return linkReg.test(statusValue.message || '');
}, [statusValue.message]);
const messageLink = useMemo(() => {
const statusMessage = useMemo<string>(() => {
if (!statusValue.message) return '';
const link = statusValue.message?.match(linkReg);
if (link) {
return link?.[0].replace(linkReg, '<a $1 target="_blank">$2</a>');
return statusValue.message?.replace(
linkReg,
'<a $1 target="_blank">$2</a>'
);
}
return null;
return statusValue.message;
}, [statusValue.message]);
const renderContent = () => {
@@ -125,12 +130,12 @@ const StatusTag: React.FC<StatusTagProps> = ({
wordBreak: 'break-word'
}}
>
{statusMessage}
{statusMessage && <span className="m-r-5"></span>}
{extra}
{messageLink && (
<span dangerouslySetInnerHTML={{ __html: messageLink }}></span>
{hasLink ? (
<span dangerouslySetInnerHTML={{ __html: statusMessage }}></span>
) : (
statusMessage
)}
{extra && <span className="m-l-5">{extra}</span>}
</div>
</div>
);
src/locales/en-US/resources.ts
+5 -2
View File
@@ -87,6 +87,9 @@ export default {
'Paste the <span class="bold-text">Token</span>.',
'resources.register.worker.step7':
'Click <span class="bold-text">Restart</span> to apply the settings.',
'resources.register.install.title': 'Install GPUStack',
'resources.register.download': '<a>Download the package</a> and install it.'
'resources.register.install.title': 'Install GPUStack on {os}',
'resources.register.download':
'Download and install the <a>installer</a>. Currently supported: {versions}.',
'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
'resource.register.windows.support': 'win 10, win 11'
};
src/locales/ja-JP/resources.ts
+9 -4
View File
@@ -88,8 +88,11 @@ export default {
'Paste the <span class="bold-text">Token</span>.',
'resources.register.worker.step7':
'Click <span class="bold-text">Restart</span> to apply the settings.',
'resources.register.install.title': 'Install GPUStack',
'resources.register.download': '<a>Download the package</a> and install it.'
'resources.register.install.title': 'Install GPUStack on {os}',
'resources.register.download':
'Download and install the <a>installer</a>. Currently supported: {versions}.',
'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
'resource.register.windows.support': 'win 10, win 11'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -100,6 +103,8 @@ export default {
// 5. 'resources.register.worker.step5': 'Enter the <span class="bold-text">Server URL</span>.',
// 6. 'resources.register.worker.step6': 'Paste the <span class="bold-text">Token</span>.',
// 7. 'resources.register.worker.step7': 'Click <span class="bold-text">Restart</span> to apply the settings.',
// 8. 'resources.register.install.title': 'Install GPUStack',
// 9. 'resources.register.download': '<a>Download the package</a> and install it.'
// 8. 'resources.register.install.title': 'Install GPUStack on {os}',
// 9. 'resources.register.download':'Download and install the <a>installer</a>. Currently supported: {versions}.',
// 10. 'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
// 11. 'resource.register.windows.support': 'win 10, win 11'
// ========== End of To-Do List ==========
src/locales/ru-RU/resources.ts
+9 -4
View File
@@ -86,8 +86,11 @@ export default {
'Paste the <span class="bold-text">Token</span>.',
'resources.register.worker.step7':
'Click <span class="bold-text">Restart</span> to apply the settings.',
'resources.register.install.title': 'Install GPUStack',
'resources.register.download': '<a>Download the package</a> and install it.'
'resources.register.install.title': 'Install GPUStack on {os}',
'resources.register.download':
'Download and install the <a>installer</a>. Currently supported: {versions}.',
'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
'resource.register.windows.support': 'win 10, win 11'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -98,6 +101,8 @@ export default {
// 5. 'resources.register.worker.step5': 'Enter the <span class="bold-text">Server URL</span>.',
// 6. 'resources.register.worker.step6': 'Paste the <span class="bold-text">Token</span>.',
// 7. 'resources.register.worker.step7': 'Click <span class="bold-text">Restart</span> to apply the settings.',
// 8. 'resources.register.install.title': 'Install GPUStack',
// 9. 'resources.register.download': '<a>Download the package</a> and install it.'
// 8. 'resources.register.install.title': 'Install GPUStack on {os}',
// 9. 'resources.register.download':'Download and install the <a>installer</a>. Currently supported: {versions}.',
// 10. 'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
// 11. 'resource.register.windows.support': 'win 10, win 11'
// ========== End of To-Do List ==========
src/locales/zh-CN/resources.ts
+10 -7
View File
@@ -72,19 +72,22 @@ export default {
'resources.modelfiles.copy.tips': '复制完整路径',
'resources.filter.path': '路径查询',
'resources.register.worker.step1':
'点击菜单 <span class="bold-text">Copy Token</span>。',
'点击菜单<span class="bold-text">复制 Token</span>。',
'resources.register.worker.step2':
'点击菜单 <span class="bold-text">Quick Config</span>。',
'点击菜单<span class="bold-text">快速配置</span>。',
'resources.register.worker.step3':
'点击页签 <span class="bold-text">General</span>。',
'点击页签<span class="bold-text">通用</span>。',
'resources.register.worker.step4':
'选择 <span class="bold-text">Worker</span> 作为服务角色。',
'选择服务角色 <span class="bold-text">Worker</span>。',
'resources.register.worker.step5':
'输入 <span class="bold-text">Server URL</span>。',
'resources.register.worker.step6':
'粘贴 <span class="bold-text">Token</span>.',
'resources.register.worker.step7':
'点击 <span class="bold-text">Restart</span> 应用设置。',
'resources.register.install.title': '安装 GPUStack',
'resources.register.download': '<a>下载安装包</a> 并且安装。'
'点击<span class="bold-text">重启</span>应用设置。',
'resources.register.install.title': '在 {os} 上安装 GPUStack',
'resources.register.download':
'下载并安装<a>安装包</a>，目前仅支持 {versions}。',
'resource.register.maos.support': 'M 芯片，macOS 14+',
'resource.register.windows.support': 'win 10, win 11'
};
src/pages/resources/components/add-worker-macos.tsx
+18 -4
View File
@@ -6,18 +6,21 @@ const { Text } = Typography;
interface AddWorkerMacOSProps {
token?: string;
platform: {
os: string;
supportVersions: string;
};
}
const registerWorkerSteps = [
'resources.register.worker.step2',
// `resources.register.worker.step3`,
`resources.register.worker.step4`,
'resources.register.worker.step5',
'resources.register.worker.step6',
`resources.register.worker.step7`
];
const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = () => {
const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = ({ platform }) => {
const intl = useIntl();
const labels = useMemo(
() => ({
@@ -32,12 +35,23 @@ const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = () => {
return (
<div className="script-install">
<h3 className="font-size-14 font-600">
1. {intl.formatMessage({ id: 'resources.register.install.title' })}
1.{' '}
{intl.formatMessage(
{ id: 'resources.register.install.title' },
{ os: platform.os }
)}
</h3>
<Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
<span
dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'resources.register.download' })
__html: intl.formatMessage(
{ id: 'resources.register.download' },
{
versions: intl.formatMessage({
id: platform.supportVersions
})
}
)
}}
></span>
</Typography.Paragraph>
src/pages/resources/components/add-worker-windows.tsx
-91
View File
@@ -1,91 +0,0 @@
import { useIntl } from '@umijs/max';
import { Space, Typography } from 'antd';
import React, { useMemo } from 'react';
const { Text } = Typography;
interface AddWorkerProps {
token?: string;
}
const registerWorkerSteps = [
'resources.register.worker.step2',
// `resources.register.worker.step3`,
`resources.register.worker.step4`,
'resources.register.worker.step5',
'resources.register.worker.step6',
`resources.register.worker.step7`
];
const AddWorkerWindows: React.FC<AddWorkerProps> = () => {
const intl = useIntl();
const labels = useMemo(
() => ({
step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
}),
[intl]
);
return (
<div className="script-install">
<h3 className="font-size-14 font-600">
1. {intl.formatMessage({ id: 'resources.register.install.title' })}
</h3>
<Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
<span
dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'resources.register.download' })
}}
></span>
</Typography.Paragraph>
<h3 className="font-size-14 font-600">
2. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
</h3>
<Typography.Paragraph style={{ paddingLeft: 14 }}>
<div className="flex">
<Typography.Text type="secondary">
<span
dangerouslySetInnerHTML={{
__html: intl.formatMessage({
id: 'resources.register.worker.step1'
})
}}
></span>
</Typography.Text>
</div>
</Typography.Paragraph>
<h3 className="m-t-10 font-size-14 font-600">
3. {labels.step2}{' '}
<span
className="font-size-12"
style={{ color: 'var(--ant-color-text-tertiary)' }}
dangerouslySetInnerHTML={{
__html: `${labels.step2Tips}`
}}
></span>
</h3>
<Typography.Paragraph style={{ paddingLeft: 14 }}>
<div className="flex">
<Space direction="vertical">
{registerWorkerSteps.map((step, index) => (
<Typography.Text key={index} type="secondary">
{index + 1}.{' '}
<span
dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: step })
}}
></span>
</Typography.Text>
))}
</Space>
</div>
</Typography.Paragraph>
<h3 className="m-b-0 m-t-10 font-size-14 font-600">4. {labels.step3}</h3>
</div>
);
};
export default AddWorkerWindows;
src/pages/resources/components/add-worker.tsx
+18 -3
View File
@@ -7,7 +7,6 @@ import { useIntl } from '@umijs/max';
import { Modal, Tabs, TabsProps } from 'antd';
import React from 'react';
import MacOS from './add-worker-macos';
import Windows from './add-worker-windows';
import ContainerInstall from './container-install';
type ViewModalProps = {
@@ -32,13 +31,29 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
key: 'macos',
label: 'macOS',
icon: <AppleOutlined />,
children: <MacOS token={token} />
children: (
<MacOS
token={token}
platform={{
os: 'macOS',
supportVersions: 'resource.register.maos.support'
}}
/>
)
},
{
key: 'windows',
label: 'Windows',
icon: <WindowsOutlined />,
children: <Windows token={token} />
children: (
<MacOS
token={token}
platform={{
os: 'Windows',
supportVersions: 'resource.register.windows.support'
}}
/>
)
}
];