chore: version info modal

src/layouts/index.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 
 import { userAtom } from '@/atoms/user';
+import VersionInfo from '@/components/version-info';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
-
 import { ProLayout } from '@ant-design/pro-components';
 import {
   Link,
@@ -17,6 +17,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
+import { Modal } from 'antd';
 import { useAtom } from 'jotai';
 import { useMemo, useState } from 'react';
 import Exception from './Exception';
@@ -102,6 +103,15 @@ export default (props: any) => {
     return intl.formatMessage({ id: args.id });
   };
 
+  const showVersion = () => {
+    Modal.info({
+      icon: null,
+      centered: false,
+      width: 500,
+      content: <VersionInfo intl={intl} />
+    });
+  };
+
   const runtimeConfig = {
     ...initialInfo,
     logout: async (userInfo) => {
@@ -109,6 +119,9 @@ export default (props: any) => {
       await logout();
       navigate(loginPath);
     },
+    showVersion: () => {
+      return showVersion();
+    },
     notFound: <span>404 not found</span>
   };
 

src/layouts/rightRender.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 
 import avatarImg from '@/assets/images/avatar.png';
+import externalLinks from '@/config/external-links';
 import langConfigMap from '@/locales/lang-config-map';
 import {
   DiscordOutlined,
@@ -27,6 +28,7 @@ export function getRightRenderContent(opts: {
   intl: any;
 }) {
   const { intl, collapsed, siderWidth } = opts;
+
   const allLocals = getAllLocales();
   if (opts.runtimeConfig.rightRender) {
     return opts.runtimeConfig.rightRender(
@@ -73,22 +75,25 @@ export function getRightRenderContent(opts: {
       key: 'site',
       icon: <HomeOutlined />,
       label: 'GPUStack',
-      url: 'https://gpustack.ai/'
+      url: externalLinks.site
     },
     {
       key: 'github',
       icon: <GithubOutlined />,
-      label: 'GitHub'
+      label: 'GitHub',
+      url: externalLinks.github
     },
     {
       key: 'Discord',
       icon: <DiscordOutlined />,
-      label: 'Discord'
+      label: 'Discord',
+      url: externalLinks.discord
     },
     {
       key: 'docs',
       icon: <ReadOutlined />,
-      label: intl.formatMessage({ id: 'common.button.docs' })
+      label: intl.formatMessage({ id: 'common.button.docs' }),
+      url: externalLinks.documentation
     },
     {
       key: 'version',
@@ -118,11 +123,26 @@ export function getRightRenderContent(opts: {
           label: (
             <span className="flex flex-center">
               {item.icon}
-              <a className="m-l-8" href="#" target="_blank">
-                {item.label}
-              </a>
+              {item.key === 'version' ? (
+                <a className="m-l-8">{item.label}</a>
+              ) : (
+                <a
+                  className="m-l-8"
+                  href={item.url}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {item.label}
+                </a>
+              )}
             </span>
-          )
+          ),
+          onClick() {
+            if (item.key === 'version') {
+              // opts.runtimeConfig.showVersion();
+              opts.runtimeConfig.showVersion();
+            }
+          }
         }))
       }
     ]