show running version

.eslintignore

@@ -1 +1,3 @@
 node_modules
+
+/src/global.ts

config-overrides.js

@@ -10,6 +10,12 @@ const ArcoWebpackPlugin = require('@arco-plugins/webpack-react');
 const addLessLoader = require('customize-cra-less-loader');
 const setting = require('./src/settings.json');
 const CopyPlugin = require("copy-webpack-plugin");
+const webpack = require('webpack');
+// get git info from command line
+let commitHash = require('child_process')
+  .execSync('git rev-parse HEAD')
+  .toString()
+  .trim();
 
 if (process.env.DEV_MODE) {
   process.env.NODE_ENV = 'development';
@@ -47,9 +53,13 @@ module.exports = {
     addWebpackAlias({
       '@': path.resolve(__dirname, 'src'),
     }),
+    addWebpackPlugin(
+      new webpack.DefinePlugin({
+        '__GIT_COMMIT': JSON.stringify(commitHash)
+      })
+    ),
     (config) => {
       if (process.env.DEV_MODE) {
-        console.log(process.env.NODE_ENV);
         process.env.NODE_ENV = 'development';
         config.mode = 'development';
         config.optimization.minimize = false;

package.json

@@ -66,7 +66,8 @@
     "pretty-quick": "^3.1.2",
     "react-app-rewired": "^2.1.8",
     "react-scripts": "^5.0.0",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "webpack": "^5.64.4"
   },
   "browserslist": {
     "production": [

src/components/Footer/index.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
-import { Layout } from '@arco-design/web-react';
-import { FooterProps } from '@arco-design/web-react/es/Layout/interface';
+import {FooterProps} from '@arco-design/web-react/es/Layout/interface';
 import cs from 'classnames';
 import styles from './style/index.module.less';
+import {Layout} from "@arco-design/web-react";
+import {BACKEND_VERSION, GIT_COMMIT} from "@/global";
 
 function Footer(props: FooterProps = {}) {
-  const { className, ...restProps } = props;
+  const {className, ...restProps} = props;
   return (
     <Layout.Footer className={cs(styles.footer, className)} {...restProps}>
-      Arco Design Pro
+      <div className={styles['footer-left']}>
+        Yggdrasil Gateway
+      </div>
+      <div className={styles['footer-right']}>
+        Version: {BACKEND_VERSION}^{GIT_COMMIT.substring(0, 6)}
+      </div>
     </Layout.Footer>
   );
 }

src/components/Footer/style/index.module.less

@@ -1,8 +1,15 @@
 .footer {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  text-align: center;
+  padding: 16px 20px;
+  //height: 40px;
+  text-align: left;
   color: var(--color-text-2);
+  background-color: var(--color-bg-2);
 }
+
+.footer-left {
+  flex-grow: 1;
+}
+
+.footer-right {
+}

src/global.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+// @ts-ignore
+export const GIT_COMMIT: string = __GIT_COMMIT;
+
+export var BACKEND_VERSION: string = "UNKNOWN";
+
+let fetcher: any;
+
+fetcher = setInterval(() => {
+  axios.get('/api/system/version')
+    .then(result => {
+      if (result.status != 200) return
+      //console.log(result.data.data)
+      BACKEND_VERSION = result.data.data.backend;
+
+
+      clearInterval(fetcher)
+    })
+    .catch(() => {
+    })
+}, 1000);

src/pages/login/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import Footer from '@/components/Footer';
+import React, {useEffect} from 'react';
 import Logo from '@/assets/logo.svg';
 import LoginForm from './form';
 import LoginBanner from './banner';
@@ -13,20 +12,17 @@ function Login() {
   return (
     <div className={styles.container}>
       <div className={styles.logo}>
-        <Logo />
+        <Logo/>
         <div className={styles['logo-text']}>Yggdrasil Gateway</div>
       </div>
       <div className={styles.banner}>
         <div className={styles['banner-inner']}>
-          <LoginBanner />
+          <LoginBanner/>
         </div>
       </div>
       <div className={styles.content}>
         <div className={styles['content-inner']}>
-          <LoginForm />
-        </div>
-        <div className={styles.footer}>
-          <Footer />
+          <LoginForm/>
         </div>
       </div>
     </div>