CargoOwner_WebApp/src/components/Header.vue

<template>
  <div class="header">
    <div class="left">
      <!-- <img class="first" src="../assets/three.png" alt="" />
      <div class="shu"></div> -->
      <img
        class="logo pointer"
        src="../assets/white-logo.png"
        alt=""
        @click="goToIndex"
      />
      <div
        class="ml20"
        style="color: #fff; font-size: 18px; height: 60px; padding-top: 30px"
      >
        version：{{ timelineData[0]?.version }}
      </div>
    </div>
    <div class="right">
      <img class="user-icon" src="../assets/user.png" alt="" />
      <div class="user">{{ contactName }}</div>
      <el-popover placement="bottom" trigger="hover" :width="280">
        <div
          style="
            width: 100%;
            height: 60vh;
            overflow-y: auto;
            padding-right: 10px;
            margin-right: 10px;
          "
        >
          <el-timeline>
            <el-timeline-item
              v-for="item in timelineData"
              :key="item"
              center
              :timestamp="item.timer"
              placement="top"
            >
              <div class="log-card">
                <p style="margin-bottom: 10px">Version: {{ item.version }}</p>
                <div
                  style="margin-bottom: 5px; font-size: 12px"
                  v-for="(item1, index) in item.remarks"
                  :key="item1"
                >
                  {{ index + 1 }}. {{ item1.text }}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
        <template #reference>
          <el-badge value="new">
            <div class="log">新功能日志</div>
          </el-badge>
        </template>
      </el-popover>
      <div class="quit" @click="quit">[退出]</div>
    </div>
  </div>
</template>
<script>
import store from "../store";
import router from "../router";
import { onMounted, ref } from "vue";
import { AnonymousLogin, tcb } from "../apis/cloudLogin";
const db = tcb.database();
const v = db.collection("huihenduo_versions");
const __ = db.command;

export default {
  setup() {
    let contactName = localStorage.contactName;
    function quit() {
      localStorage.clear();
      store.commit("changeLogin", false);
      router.push({ path: "/login" });
    }

    function goToIndex() {
      router.replace({ path: "/" });
    }

    let timelineData = ref([]);
    onMounted(() => {
      cloudLogin();
    });
    async function getAbledVersions() {
      let res = await v
        .aggregate()
        .match({ deleted: __.neq(true) })
        .sort({
          createTime: -1,
        })
        .limit(10)
        .end();
      timelineData.value = res.data;
    }

    async function cloudLogin() {
      await AnonymousLogin();
      getAbledVersions();
    }
    return {
      quit,
      contactName,
      timelineData,
      goToIndex,
    };
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 60px;
  background: #212029;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.first {
  width: 22px;
  height: 20px;
  margin: 0 22px;
}

.shu {
  width: 1px;
  height: 60px;
  background: #101015;
  margin-right: 22px;
}

.logo {
  width: 120px;
  height: 40px;
  margin-left: 20px;
}

.title {
  font-size: 21px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 26px;
}

.user,
.quit,
.log {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-right: 16px;
}

.log-card p {
  font-size: 10px;
}
.user-icon {
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.log {
  margin-right: 4px;
}

.quit {
  margin-left: 26px;
}
</style>