chore: version info modal

2024-07-12 12:06:17 +08:00
parent c5327d3e56
commit 320db56fbe
38 changed files with 334 additions and 108 deletions
@@ -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);
+    }
+  }
+}
@@ -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;