chore: version info modal

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>