fuse-code/src/views/tagging/index.vue

<template>
  <RightFillPano>
    <template #header>
      <div class="tabs" :class="{ disabled: isEdit }">
        <span
          v-for="tab in tabs"
          :key="tab.key"
          :class="{ active: tab.key === current }"
          @click="current = tab.key"
        >
          {{ tab.text }}
        </span>
      </div>
    </template>

    <Hot ref="quiskObj" v-if="current === 'tagging'" />
    <Monitor ref="quiskObj" v-if="current === 'monitor'" />
  </RightFillPano>

  <Teleport to=".laser-layer">
    <div class="quisks" v-if="!isEdit && !currentIsFullView">
      <div class="quisk-item fun-ctrl" @click="quiskAdd('tagging')">
        <ui-icon type="label" />
        <span>标签</span>
      </div>
      <!-- <div class="quisk-item fun-ctrl" @click="quiskAdd('monitor')">
        <ui-icon type="a-animation_s" />
        <span>监控</span>
      </div> -->
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { isEdit, monitors, taggings } from "@/store";
import Hot from "./hot/index.vue";
import Monitor from "./monitor/index.vue";
import { RightFillPano } from "@/layout";
import { nextTick, reactive, ref, watchEffect } from "vue";
import { currentIsFullView } from "@/utils/full";

const current = ref("tagging");
const tabs = reactive([
  { key: "tagging", text: "标签（）" },
  // { key: "monitor", text: "监控（）" },
]);
watchEffect(() => {
  tabs[0].text = `标签（${taggings.value.length}）`;
  // tabs[1].text = `监控（${monitors.value.length}）`;
});
const quiskObj = ref<any>();
const quiskAdd = async (key: string) => {
  current.value = key;
  await nextTick();
  quiskObj.value.add();
};
</script>

<style lang="scss" scoped>
.tabs {
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  margin: -20px;
  margin-bottom: 20px;

  > span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.3s ease;
    cursor: pointer;
    max-width: 50%;
    font-size: 16px;

    &::after {
      content: "";
      transition: height 0.3s ease;
      position: absolute;
      background-color: #00c8af;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0;
    }

    &:hover,
    &.active {
      color: #00c8af;
    }

    &.active::after {
      height: 3px;
    }
  }
}

.quisks {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;

  .quisk-item {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background: rgba(27, 27, 28, 0.8);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:not(:last-child) {
      margin-right: 20px;
    }

    span {
      margin-top: 6px;
      font-size: 14px;
    }
    .icon {
      font-size: 22px;
    }
  }
}
</style>