fzty/src/layouts/components/VabLogo/index.vue

<template>
  <div :class="'logo-container-' + layout">
    <router-link to="/">
      <vab-remix-icon v-if="logo" class="logo" :icon-class="logo" />
      <span
        class="title"
        :class="{ 'hidden-xs-only': layout === 'horizontal' }"
        :title="title"
      >
        {{ title }}
      </span>
    </router-link>
    <!--时间展示区（包含毫秒）-->
    <span class="compact-time-display">
      <span class="time-line utc-time">
        {{ "天文时间：" + formattedUTCTime }}
      </span>
 &nbsp;&nbsp;
      <span class="time-line local-time">
        {{ "绝对时间：" + formattedLocalTime }}
      </span>
    </span>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    name: "VabLogo",
    data() {
      return {
        title: this.$baseTitle,
        timer: null,
        currentTime: new Date(),
      };
    },
    computed: {
      ...mapGetters({
        logo: "settings/logo",
        layout: "settings/layout",
      }),
      formattedUTCTime() {
        return this.formatUTCTime(this.currentTime);
      },
      formattedLocalTime() {
        return this.formatLocalTime(this.currentTime);
      },
    },
    mounted() {
      // 改为每10毫秒更新一次（确保毫秒级精度）
      this.timer = setInterval(() => {
        this.currentTime = new Date();
      }, 10);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      // 格式化UTC时间（包含毫秒）
      formatUTCTime(date) {
        const pad = (num, length = 2) => String(num).padStart(length, "0");
        return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
          date.getUTCDate()
        )} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(
          date.getUTCSeconds()
        )} UTC`;
      },
      // 格式化本地时间（包含毫秒）
      formatLocalTime(date) {
        const pad = (num, length = 2) => String(num).padStart(length, "0");
        const hours = date.getHours();
        const ampm = hours >= 12 ? "PM" : "AM";
        const displayHours = hours % 12 || 12;
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
          date.getDate()
        )} ${pad(displayHours)}:${pad(date.getMinutes())}:${pad(
          date.getSeconds()
        )} ${ampm}`;
      },
    },
  };
</script>

<style lang="scss" scoped>
  @mixin container {
    position: relative;
    height: $base-top-bar-height;
    overflow: hidden;
    line-height: $base-top-bar-height;
    background: $base-menu-background;
  }

  @mixin logo {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 3px;
    color: $base-title-color;
    vertical-align: middle;
  }

  @mixin title {
    display: inline-block;
    overflow: hidden;
    font-size: 20px;
    line-height: 55px;
    color: $base-title-color;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .logo-container-horizontal {
    @include container;

    .logo {
      @include logo;
    }

    .title {
      @include title;
    }
  }

  .logo-container-vertical {
    @include container;

    height: $base-logo-height;
    line-height: $base-logo-height;
    text-align: center;

    .logo {
      @include logo;
    }

    .title {
      @include title;

      max-width: calc(#{$base-left-menu-width} - 60px);
    }
  }

  .compact-time-display {
    font-size: 20px;
    font-family: "Courier New", monospace;
    padding: 12px;
    border-radius: 6px;
    background-color: transparent;
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;

    .time-line {
      font-weight: 800;
      white-space: nowrap;
      font-size: 12px;

      &.utc-time {
        color: #8d978f;
        font-size: 18px;
        font-weight: 800;

      }

      &.local-time {
        color: #8d978f;
        font-size: 18px;
      }
    }
  }

</style>