关于增加版本信息展示

src/pages/setting/about.tsx

@@ -1,10 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Typography, Input, Form, Button, message } from 'antd';
+import { Typography, Input, Form, Button, message, Descriptions } from 'antd';
 import styles from './index.less';
+import { SharedContext } from '@/layouts';
+import dayjs from 'dayjs';
 
 const { Link } = Typography;
 
-const About = () => {
+enum TVersion {
+  'develop' = '开发版',
+  'master' = '正式版',
+}
+
+const About = ({ systemInfo }: { systemInfo: SharedContext['systemInfo'] }) => {
   return (
     <div className={styles.container}>
       <img
@@ -19,6 +26,17 @@ const About = () => {
           task management panel that supports typescript, javaScript, python3,
           and shell.）
         </span>
+        <Descriptions>
+          <Descriptions.Item label="版本" span={3}>
+            {TVersion[systemInfo.branch]} v{systemInfo.version}
+          </Descriptions.Item>
+          <Descriptions.Item label="更新时间" span={3}>
+            {dayjs(systemInfo.lastCommitTime).format('YYYY-MM-DD HH:mm:ss')}
+          </Descriptions.Item>
+          <Descriptions.Item label="更新ID" span={3}>
+            {systemInfo.lastCommitId}
+          </Descriptions.Item>
+        </Descriptions>
         <div>
           <Link
             href="https://github.com/whyour/qinglong"

src/pages/setting/index.less

@@ -18,5 +18,12 @@
     .desc {
       margin-bottom: 10px;
     }
+
+    :global {
+      .ant-descriptions-row > th,
+      .ant-descriptions-row > td {
+        padding-bottom: 10px;
+      }
+    }
   }
 }

src/pages/setting/index.tsx

@@ -40,8 +40,15 @@ const optionsWithDisabled = [
 ];
 
 const Setting = () => {
-  const { headerStyle, isPhone, user, reloadUser, reloadTheme, socketMessage } =
-    useOutletContext<SharedContext>();
+  const {
+    headerStyle,
+    isPhone,
+    user,
+    reloadUser,
+    reloadTheme,
+    socketMessage,
+    systemInfo,
+  } = useOutletContext<SharedContext>();
   const columns = [
     {
       title: '名称',
@@ -411,7 +418,7 @@ const Setting = () => {
           {
             key: 'about',
             label: '关于',
-            children: <About />,
+            children: <About systemInfo={systemInfo} />,
           },
         ]}
       ></Tabs>