chore: update the guide for adding worker

src/components/status-tag/index.tsx

@@ -58,16 +58,21 @@ const StatusTag: React.FC<StatusTagProps> = ({
     return StatusColorMap[status];
   }, [status]);
 
-  const statusMessage = useMemo(() => {
+  const hasLink = useMemo(() => {
-    return statusValue.message?.replace(linkReg, '');
+    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}
+          {hasLink ? (
-          {statusMessage && <span className="m-r-5"></span>}
+            <span dangerouslySetInnerHTML={{ __html: statusMessage }}></span>
-          {extra}
+          ) : (
-          {messageLink && (
+            statusMessage
-            <span dangerouslySetInnerHTML={{ __html: messageLink }}></span>
           )}
+          {extra && <span className="m-l-5">{extra}</span>}
         </div>
       </div>
     );

src/locales/en-US/resources.ts

@@ -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.install.title': 'Install GPUStack on {os}',
-  'resources.register.download': '<a>Download the package</a> and install it.'
+  '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

@@ -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.install.title': 'Install GPUStack on {os}',
-  'resources.register.download': '<a>Download the package</a> and install it.'
+  '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',
+// 8. 'resources.register.install.title': 'Install GPUStack on {os}',
-// 9. 'resources.register.download': '<a>Download the package</a> and install it.'
+// 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

@@ -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.install.title': 'Install GPUStack on {os}',
-  'resources.register.download': '<a>Download the package</a> and install it.'
+  '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',
+// 8. 'resources.register.install.title': 'Install GPUStack on {os}',
-// 9. 'resources.register.download': '<a>Download the package</a> and install it.'
+// 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

@@ -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> 应用设置。',
+    '点击<span class="bold-text">重启</span>应用设置。',
-  'resources.register.install.title': '安装 GPUStack',
+  'resources.register.install.title': '在 {os} 上安装 GPUStack',
-  'resources.register.download': '<a>下载安装包</a> 并且安装。'
+  '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

@@ -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

@@ -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

@@ -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'
+          }}
+        />
+      )
     }
   ];