refactor: update user guide for add worker

chore: update resource locales

src/locales/en-US/resources.ts

@@ -72,5 +72,21 @@ export default {
   'resources.filter.source': 'Filter by Source',
   'resources.modelfiles.delete.tips': 'Also delete the file from disk',
   'resources.modelfiles.copy.tips': 'Copy Full Path',
-  'resources.filter.path': 'Filter by path'
+  'resources.filter.path': 'Filter by path',
+  'resources.register.worker.step1':
+    'Click the <span class="bold-text">Copy the token</span> menu.',
+  'resources.register.worker.step2':
+    'Click the <span class="bold-text">Quick Config</span> menu.',
+  'resources.register.worker.step3':
+    'Click the <span class="bold-text">General</span> tab.',
+  'resources.register.worker.step4':
+    'Select <span class="bold-text">Worker</span> as the service role.',
+  'resources.register.worker.step5':
+    'Enter the <span="bold-text">Server URL</span>.',
+  'resources.register.worker.step6':
+    '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.'
 };

src/locales/ja-JP/resources.ts

@@ -73,5 +73,33 @@ export default {
   'resources.filter.source': 'ソースでフィルタ',
   'resources.modelfiles.delete.tips': 'ディスクからファイルも削除します',
   'resources.modelfiles.copy.tips': 'フルパスをコピー',
-  'resources.filter.path': 'パスでフィルタ'
+  'resources.filter.path': 'パスでフィルタ',
+  'resources.register.worker.step1':
+    'Click the <span class="bold-text">Copy the token</span> menu.',
+  'resources.register.worker.step2':
+    'Click the <span class="bold-text">Quick Config</span> menu.',
+  'resources.register.worker.step3':
+    'Click the <span class="bold-text">General</span> tab.',
+  'resources.register.worker.step4':
+    'Select <span class="bold-text">Worker</span> as the service role.',
+  'resources.register.worker.step5':
+    'Enter the <span="bold-text">Server URL</span>.',
+  'resources.register.worker.step6':
+    '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.'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy the token</span> menu.',
+// 2. 'resources.register.worker.step2': 'Click the <span class="bold-text">Quick Config</span> menu.',
+// 3. 'resources.register.worker.step3': 'Click the <span class="bold-text">General</span> tab.',
+// 4. 'resources.register.worker.step4':  'Select <span class="bold-text">Worker</span> as the service role.',
+// 5. 'resources.register.worker.step5': 'Enter the <span="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.'
+// ========== End of To-Do List ==========

src/locales/ru-RU/resources.ts

@@ -71,9 +71,33 @@ export default {
   'resources.filter.source': 'Фильтровать по источнику',
   'resources.modelfiles.delete.tips': 'Также удалить файл с диска',
   'resources.modelfiles.copy.tips': 'Скопировать полный путь',
-  'resources.filter.path': 'Фильтрация по пути'
+  'resources.filter.path': 'Фильтрация по пути',
+  'resources.register.worker.step1':
+    'Click the <span class="bold-text">Copy the token</span> menu.',
+  'resources.register.worker.step2':
+    'Click the <span class="bold-text">Quick Config</span> menu.',
+  'resources.register.worker.step3':
+    'Click the <span class="bold-text">General</span> tab.',
+  'resources.register.worker.step4':
+    'Select <span class="bold-text">Worker</span> as the service role.',
+  'resources.register.worker.step5':
+    'Enter the <span="bold-text">Server URL</span>.',
+  'resources.register.worker.step6':
+    '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.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy the token</span> menu.',
+// 2. 'resources.register.worker.step2': 'Click the <span class="bold-text">Quick Config</span> menu.',
+// 3. 'resources.register.worker.step3': 'Click the <span class="bold-text">General</span> tab.',
+// 4. 'resources.register.worker.step4':  'Select <span class="bold-text">Worker</span> as the service role.',
+// 5. 'resources.register.worker.step5': 'Enter the <span="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.'
 // ========== End of To-Do List ==========

src/locales/zh-CN/resources.ts

@@ -70,5 +70,21 @@ export default {
   'resources.filter.source': '按来源筛选',
   'resources.modelfiles.delete.tips': '同时从磁盘删除文件',
   'resources.modelfiles.copy.tips': '复制完整路径',
-  'resources.filter.path': '路径查询'
+  'resources.filter.path': '路径查询',
+  'resources.register.worker.step1':
+    '点击菜单 <span class="bold-text">Copy token</span>。',
+  'resources.register.worker.step2':
+    '点击菜单 <span class="bold-text">Quick Config</span>。',
+  'resources.register.worker.step3':
+    '点击页签 <span class="bold-text">General</span>。',
+  'resources.register.worker.step4':
+    '选择 <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> 并且安装。'
 };

src/pages/resources/components/add-worker-macos.tsx

@@ -1,18 +1,22 @@
+import CopyToken from '@/assets/images/copy-token.png';
+import QuickConfig from '@/assets/images/quick-config.png';
 import { useIntl } from '@umijs/max';
-import { Space, Typography } from 'antd';
+import { Image, Space, Typography } from 'antd';
 import React, { useMemo } from 'react';
 
+const { Text } = Typography;
+
 interface AddWorkerMacOSProps {
   token?: string;
 }
 
 const registerWorkerSteps = [
-  'Open the quick configuration file.',
-  `Select the "General" option.`,
-  `Select "Worker" as the service role.`,
-  'Enter the Server URL.',
-  'Paste the Token.',
-  `Click "Restart".`
+  '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> = () => {
@@ -29,18 +33,35 @@ const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = () => {
   );
   return (
     <div className="script-install">
-      <h3 className="font-size-14 font-600">1. Install GPUStack</h3>
+      <h3 className="font-size-14 font-600">
+        1. {intl.formatMessage({ id: 'resources.register.install.title' })}
+      </h3>
       <Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
-        <Typography.Link>Download Package</Typography.Link> and install it on
-        your macOS machine.
+        <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 }}>
-        <Typography.Text type="secondary">
-          Click <span className="font-600">Copy the token</span>
-        </Typography.Text>
+        <div className="flex">
+          <Typography.Text
+            type="secondary"
+            style={{ width: 320, marginRight: 20 }}
+          >
+            <span
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage({
+                  id: 'resources.register.worker.step1'
+                })
+              }}
+            ></span>
+          </Typography.Text>
+          <Image src={CopyToken} style={{ width: 160 }}></Image>
+        </div>
       </Typography.Paragraph>
       <h3 className="m-t-10 font-size-14 font-600">
         3. {labels.step2}{' '}
@@ -53,13 +74,21 @@ const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = () => {
         ></span>
       </h3>
       <Typography.Paragraph style={{ paddingLeft: 14 }}>
-        <Space direction="vertical">
-          {registerWorkerSteps.map((step, index) => (
-            <Typography.Text key={index} type="secondary">
-              {index + 1}. {step}
-            </Typography.Text>
-          ))}
-        </Space>
+        <div className="flex">
+          <Space direction="vertical" style={{ width: 320, marginRight: 20 }}>
+            {registerWorkerSteps.map((step, index) => (
+              <Typography.Text key={index} type="secondary">
+                {index + 1}.{' '}
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: intl.formatMessage({ id: step })
+                  }}
+                ></span>
+              </Typography.Text>
+            ))}
+          </Space>
+          <Image src={QuickConfig} style={{ width: 160 }}></Image>
+        </div>
       </Typography.Paragraph>
       <h3 className="m-b-0 m-t-10 font-size-14 font-600">4. {labels.step3}</h3>
     </div>

src/pages/resources/components/add-worker.tsx

@@ -1,8 +1,14 @@
+import {
+  AppleOutlined,
+  LinuxOutlined,
+  WindowsOutlined
+} from '@ant-design/icons';
 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';
-import ScriptInstall from './script-install';
 
 type ViewModalProps = {
   open: boolean;
@@ -13,32 +19,27 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
   const { open, onCancel } = props || {};
   const intl = useIntl();
   const [token, setToken] = React.useState('');
-  const [activeKey, setActiveKey] = React.useState('script');
+  const [activeKey, setActiveKey] = React.useState('container');
 
   const items: TabsProps['items'] = [
-    {
-      key: 'script',
-      label: intl.formatMessage({ id: 'resources.worker.script.install' }),
-      children: <ScriptInstall token={token}></ScriptInstall>
-    },
     {
       key: 'container',
       label: 'Linux',
-      // icon: <LinuxOutlined />,
+      icon: <LinuxOutlined />,
       children: <ContainerInstall token={token} />
+    },
+    {
+      key: 'macos',
+      label: 'macOS(M series 14+)',
+      icon: <AppleOutlined />,
+      children: <MacOS token={token} />
+    },
+    {
+      key: 'windows',
+      label: 'Windows(win 10, win 11)',
+      icon: <WindowsOutlined />,
+      children: <Windows token={token} />
     }
-    // {
-    //   key: 'macos',
-    //   label: 'macOS',
-    //   icon: <AppleOutlined />,
-    //   children: <MacOS token={token} />
-    // },
-    // {
-    //   key: 'windows',
-    //   label: 'Windows',
-    //   icon: <WindowsOutlined />,
-    //   children: <Windows token={token} />
-    // }
   ];
 
   return (