feat: 服务器时间显示

src/layouts/BasicLayout.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   ProLayout,
-  GlobalFooter,
   WaterMark,
   getMenuData,
   clearMenuItem,
@@ -9,7 +8,7 @@ import {
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import useLayoutStore from '@/store/modules/layout';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
@@ -17,6 +16,10 @@ import { useRouter } from 'vue-router';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
+import { getServerTime } from '@/api';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { onMounted } from 'vue';
+import { parseDateToStr } from '@/utils/date-utils';
 const { t } = useI18n();
 const routerStore = useRouterStore();
 const tabsStore = useTabsStore();
@@ -113,6 +116,57 @@ function fnComponentSetName(component: any, to: any) {
 
 // 清空导航栏标签
 tabsStore.clear();
+
+//
+onMounted(() => {
+  fnGetServerTime();
+});
+
+// ==== 服务器时间显示 start
+let serverTime = reactive({
+  timestamp: 0,
+  zone: '', // 时区 UTC
+  str: '', // 年月日时分秒
+  interval: 0 as any, // 定时器
+});
+
+// 获取服务器时间
+function fnGetServerTime() {
+  getServerTime().then(res => {
+    console.log(res.data);
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      // 时间戳
+      serverTime.timestamp = parseInt(res.data.timestamp);
+      serverTime.interval = setInterval(() => {
+        serverTime.timestamp += 1000;
+        serverTime.str = parseDateToStr(serverTime.timestamp);
+      }, 1000);
+
+      // 时区
+      const offsetHours = res.data.timeZone / 3600;
+      if (offsetHours === 0) {
+        serverTime.zone = 'UTC';
+      } else if (offsetHours > 0) {
+        serverTime.zone = `UTC +${offsetHours}`;
+      } else {
+        serverTime.zone = `UTC ${offsetHours}`;
+      }
+    }
+  });
+}
+
+// 监听可视改变
+document.addEventListener('visibilitychange', function () {
+  if (document.visibilityState == 'hidden') {
+    //切离该页面时执行
+    clearInterval(serverTime.interval);
+  }
+  if (document.visibilityState == 'visible') {
+    //切换到该页面时执行
+    fnGetServerTime();
+  }
+});
+// ==== 服务器时间显示 end
 </script>
 
 <template>
@@ -179,16 +233,17 @@ tabsStore.clear();
 
       <!--插槽-内容底部-->
       <template #footerRender>
-        <GlobalFooter
-          class="footer"
-          :links="[
-            { blankTarget: false, title: t('globalFooter.help'), href: '/' },
-            { blankTarget: false, title: t('globalFooter.privacy'), href: '/' },
-            { blankTarget: false, title: t('globalFooter.term'), href: '/' },
-          ]"
-          copyright="Copyright ©2023 For AGrand 千通"
-        >
-        </GlobalFooter>
+        <footer class="ant-pro-global-footer footer">
+          <div class="ant-pro-global-footer-links">
+            <a target="_self" href="/">{{ t('globalFooter.help') }}</a>
+            <a target="_self" href="/">{{ t('globalFooter.privacy') }}</a>
+            <a target="_self" href="/">{{ t('globalFooter.term') }}</a>
+          </div>
+          <div class="footer-time">{{ serverTime.str }} {{ serverTime.zone }}</div>
+          <div class="ant-pro-global-footer-copyright">
+            Copyright ©2023 For AGrand 千通
+          </div>
+        </footer>
       </template>
     </ProLayout>
   </WaterMark>
@@ -208,4 +263,9 @@ tabsStore.clear();
   white-space: nowrap;
   width: 180px;
 }
+
+.footer-time {
+  color: #00000075;
+  transition: all 0.3s;
+}
 </style>