chore: version info modal

src/components/copy-button/index.tsx

@@ -5,14 +5,20 @@ import { Button } from 'antd';
 type CopyButtonProps = {
   text: string;
   disabled?: boolean;
+  fontSize?: string;
   type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
+  shape?: 'circle' | 'round' | 'default';
+  style?: React.CSSProperties;
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
   text,
   disabled,
   type = 'text',
+  shape = 'circle',
+  fontSize = '14px',
+  style,
   size = 'middle'
 }) => {
   const { copied, copyToClipboard } = useCopyToClipboard();
@@ -24,21 +30,20 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   return (
     <Button
       type={type}
-      shape="circle"
+      shape={shape}
       size={size}
       onClick={handleCopy}
       disabled={!!disabled}
-    >
-      {copied ? (
-        <CheckCircleFilled
-          style={{ color: 'var(--ant-color-success)', fontSize: '14px' }}
-        />
-      ) : (
-        <CopyOutlined
-          style={{ color: 'var(--ant-color-primary)', fontSize: '14px' }}
-        />
-      )}
-    </Button>
+      icon={
+        copied ? (
+          <CheckCircleFilled
+            style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
+          />
+        ) : (
+          <CopyOutlined style={{ fontSize: fontSize, ...style }} />
+        )
+      }
+    ></Button>
   );
 };
 

src/components/editor-wrap/index.tsx

@@ -22,7 +22,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
   showHeader = true
 }) => {
   const handleChangeLang = (value: string) => {
-    onChangeLang && onChangeLang(value);
+    onChangeLang?.(value);
   };
   const renderHeader = () => {
     if (header) {
@@ -39,7 +39,13 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
             options={langOptions}
             onChange={handleChangeLang}
           ></Select>
-          <CopyButton text={copyText} />
+          <CopyButton
+            text={copyText}
+            size="small"
+            style={{
+              color: 'rgba(255,255,255,.7)'
+            }}
+          />
         </div>
       );
     }

src/components/footer/index.less

@@ -7,4 +7,10 @@
   text-align: center;
   font-size: var(--font-size-middle);
   color: var(--color-text-2);
+
+  .footer-content-left-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

src/components/footer/index.tsx

@@ -1,9 +1,23 @@
+import { GPUStackVersionAtom } from '@/atoms/user';
+import { getAtomStorage } from '@/atoms/utils';
+import VersionInfo from '@/components/version-info';
+import externalLinks from '@/config/external-links';
 import { useIntl } from '@umijs/max';
-import { Space } from 'antd';
+import { Button, Modal, Space } from 'antd';
 import './index.less';
 
 const Footer: React.FC = () => {
   const intl = useIntl();
+
+  const showVersion = () => {
+    Modal.info({
+      icon: null,
+      centered: false,
+      width: 500,
+      content: <VersionInfo intl={intl} />
+    });
+  };
+
   return (
     <div className="footer">
       <div className="footer-content">
@@ -14,6 +28,19 @@ const Footer: React.FC = () => {
               <span> {new Date().getFullYear()}</span>
               <span> {intl.formatMessage({ id: 'settings.company' })}</span>
             </Space>
+            <Space size={8} style={{ marginLeft: 18 }}>
+              <Button
+                type="link"
+                size="small"
+                href={externalLinks.documentation}
+                target="_blank"
+              >
+                {intl.formatMessage({ id: 'common.button.help' })}
+              </Button>
+              <Button type="link" size="small" onClick={showVersion}>
+                {getAtomStorage(GPUStackVersionAtom)?.version}
+              </Button>
+            </Space>
           </div>
         </div>
       </div>

src/components/status-tag/index.tsx

@@ -20,12 +20,17 @@ type StatusTagProps = {
     text: string;
     message?: string;
   };
+  type?: 'tag' | 'circle';
   download?: {
     percent: number;
   };
 };
 
-const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
+const StatusTag: React.FC<StatusTagProps> = ({
+  statusValue,
+  download,
+  type = 'tag'
+}) => {
   const { text, status } = statusValue;
   const [statusColor, setStatusColor] = useState<{
     text: string;

src/components/version-info/index.less

@@ -0,0 +1,41 @@
+.version-box {
+  display: flex;
+  margin-bottom: 40px;
+  flex-direction: column;
+  align-items: center;
+
+  .img {
+    margin-top: 16px;
+    text-align: center;
+    height: 30px;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .title {
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    font-size: var(--font-size-middle);
+    margin-block: 30px 10px;
+  }
+
+  .ver {
+    line-height: 32px;
+    display: flex;
+    font-size: var(--font-size-middle);
+
+    .label {
+      display: flex;
+      justify-content: flex-start;
+      width: 60px;
+      font-size: var(--font-size-middle);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .val {
+      color: var(--ant-color-text-secondary);
+    }
+  }
+}

src/components/version-info/index.tsx

@@ -0,0 +1,39 @@
+import Logo from '@/assets/images/gpustack-logo.png';
+import { GPUStackVersionAtom } from '@/atoms/user';
+import { getAtomStorage } from '@/atoms/utils';
+import React from 'react';
+import './index.less';
+
+const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
+  // get the data attr from html
+  const version = document.documentElement.getAttribute('data-version');
+
+  return (
+    <div className="version-box">
+      <div className="img">
+        <img src={Logo} alt="logo" />
+      </div>
+      <div className="title">
+        {intl.formatMessage({ id: 'common.footer.version.title' })}
+      </div>
+      <div>
+        <div className="ver">
+          <span className="label">
+            {' '}
+            {intl.formatMessage({ id: 'common.footer.version.server' })}
+          </span>
+          <span className="val">
+            {getAtomStorage(GPUStackVersionAtom)?.version ||
+              getAtomStorage(GPUStackVersionAtom)?.git_commit}
+          </span>
+        </div>
+        <div className="ver">
+          <span className="label">UI </span>
+          <span className="val"> {version}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VersionInfo;