chore: display the direct command in add worker

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

@@ -1,8 +1,8 @@
-import HighlightCode from '@/components/highlight-code';
 import { useIntl } from '@umijs/max';
-import { Modal } from 'antd';
+import { Modal, Tabs, TabsProps } from 'antd';
 import React from 'react';
-import { addWorkerGuide } from '../config';
+import ContainerInstall from './container-install';
+import ScriptInstall from './script-install';
 
 type ViewModalProps = {
   open: boolean;
@@ -12,8 +12,21 @@ type ViewModalProps = {
 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 origin = window.location.origin;
+  const items: TabsProps['items'] = [
+    {
+      key: 'script',
+      label: 'Script Installation',
+      children: <ScriptInstall token={token}></ScriptInstall>
+    },
+    {
+      key: 'container',
+      label: 'Container Installation',
+      children: <ContainerInstall token={token} />
+    }
+  ];
 
   return (
     <Modal
@@ -26,49 +39,19 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       maskClosable={false}
       keyboard={false}
       width={600}
+      styles={{
+        body: {
+          height: 310
+        }
+      }}
       footer={null}
     >
-      <div>
-        <h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
-        <h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
-        <HighlightCode
-          code={addWorkerGuide.mac.getToken}
-          theme="dark"
-        ></HighlightCode>
-        <h4>Windows </h4>
-        <HighlightCode
-          code={addWorkerGuide.win.getToken}
-          theme="dark"
-        ></HighlightCode>
-        <h3>
-          2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
-          <span
-            className="font-size-12"
-            style={{ color: 'var(--ant-color-text-tertiary)' }}
-            dangerouslySetInnerHTML={{
-              __html: `(${intl.formatMessage({
-                id: 'resources.worker.add.step2.tips'
-              })})`
-            }}
-          ></span>
-        </h3>
-        <h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
-        <HighlightCode
-          code={addWorkerGuide.mac.registerWorker(origin)}
-          theme="dark"
-        ></HighlightCode>
-        <h4>Windows </h4>
-        <HighlightCode
-          theme="dark"
-          code={addWorkerGuide.win.registerWorker(origin)}
-        ></HighlightCode>
-        <h4>Docker </h4>
-        <HighlightCode
-          theme="dark"
-          code={addWorkerGuide.docker.registerWorker(origin)}
-        ></HighlightCode>
-        <h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>
-      </div>
+      <Tabs
+        items={items}
+        activeKey={activeKey}
+        type="card"
+        onChange={(key) => setActiveKey(key)}
+      ></Tabs>
     </Modal>
   );
 };

src/pages/resources/components/container-install.tsx

@@ -0,0 +1,86 @@
+import { GPUStackVersionAtom } from '@/atoms/user';
+import { getAtomStorage } from '@/atoms/utils';
+import HighlightCode from '@/components/highlight-code';
+import { BulbOutlined, WarningOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Radio } from 'antd';
+import React from 'react';
+import { addWorkerGuide, containerInstallOptions } from '../config';
+import './styles/installation.less';
+
+type ViewModalProps = {
+  token: string;
+};
+
+const AddWorker: React.FC<ViewModalProps> = (props) => {
+  const intl = useIntl();
+
+  const origin = window.location.origin;
+  const [activeKey, setActiveKey] = React.useState('cuda');
+  const versionInfo = getAtomStorage(GPUStackVersionAtom);
+
+  const code = React.useMemo(() => {
+    let version = versionInfo?.version;
+    if (!version || !versionInfo.isProduction) {
+      version = 'main';
+    }
+    if (activeKey === 'cuda') {
+      return addWorkerGuide.docker.registerWorker({
+        server: origin,
+        tag: version,
+        token: props.token
+      });
+    }
+    return addWorkerGuide.docker.registerWorker({
+      server: origin,
+      tag: `${version}-${activeKey}`,
+      token: props.token
+    });
+  }, [versionInfo, activeKey, props.token, origin]);
+
+  return (
+    <div className="container-install">
+      <div className="notes">
+        <span>
+          1.{' '}
+          <span>
+            {intl.formatMessage({ id: 'resources.worker.container.supported' })}
+          </span>
+          <WarningOutlined
+            style={{ color: 'var(--ant-color-warning)' }}
+            className="font-size-14 m-l-5"
+          />
+        </span>
+        <span>
+          2.{' '}
+          {intl.formatMessage(
+            { id: 'resources.worker.current.version' },
+            { version: versionInfo.version }
+          )}
+        </span>
+        <span>
+          3. {intl.formatMessage({ id: 'resources.worker.select.command' })}
+        </span>
+      </div>
+      <div className="m-b-20">
+        <Radio.Group
+          block
+          options={containerInstallOptions}
+          defaultValue={activeKey}
+          value={activeKey}
+          optionType="button"
+          buttonStyle="solid"
+          onChange={(e) => setActiveKey(e.target.value)}
+          size="small"
+        />
+      </div>
+      <HighlightCode theme="dark" code={code}></HighlightCode>
+      <h3>
+        <BulbOutlined className="m-r-5"></BulbOutlined>
+        {intl.formatMessage({ id: 'resources.worker.add.step3' })}
+      </h3>
+    </div>
+  );
+};
+
+export default React.memo(AddWorker);

src/pages/resources/components/script-install.tsx

@@ -0,0 +1,40 @@
+import HighlightCode from '@/components/highlight-code';
+import { BulbOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+import { addWorkerGuide } from '../config';
+
+type ViewModalProps = { token: string };
+
+const AddWorker: React.FC<ViewModalProps> = (props) => {
+  const intl = useIntl();
+
+  const origin = window.location.origin;
+
+  return (
+    <div>
+      <h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
+      <HighlightCode
+        code={addWorkerGuide.mac.registerWorker({
+          server: origin,
+          token: props.token
+        })}
+        theme="dark"
+      ></HighlightCode>
+      <h4>Windows </h4>
+      <HighlightCode
+        theme="dark"
+        code={addWorkerGuide.win.registerWorker({
+          server: origin,
+          token: props.token
+        })}
+      ></HighlightCode>
+      <h3>
+        <BulbOutlined className="m-r-5"></BulbOutlined>
+        {intl.formatMessage({ id: 'resources.worker.add.step3' })}
+      </h3>
+    </div>
+  );
+};
+
+export default React.memo(AddWorker);

src/pages/resources/components/styles/installation.less

@@ -0,0 +1,13 @@
+.container-install {
+  .notes {
+    padding: 10px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    border-left: 2px solid var(--ant-color-split);
+    margin-bottom: 20px;
+    padding-left: 16px;
+    background: var(--color-fill-sider);
+    border-radius: 2px;
+  }
+}