fuse-code/src/views/guide/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>
    <GuideEdit v-if="current === 'guide'" ref="quiskObj" />
    <PathEdit v-if="current === 'path'" ref="quiskObj" />
  </RightFillPano>
  <Teleport to=".laser-layer">
    <div class="quisks" v-if="!isEdit && !currentIsFullView && !custom.full">
      <div class="quisk-item fun-ctrl" @click="quiskAdd('guide')">
        <ui-icon type="a-guide_s" />
        <span>{{ $t("guide.guide.name") }}</span>
      </div>
      <div class="quisk-item fun-ctrl" @click="quiskAdd('animation')">
        <ui-icon type="a-animation_s" />
        <span>{{ $t("am.name1") }}</span>
      </div>
      <div class="quisk-item fun-ctrl" @click="quiskAdd('path')">
        <ui-icon type="a-path_s" />
        <span>{{ $t("path.name1") }}</span>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { RightFillPano } from "@/layout";
import GuideEdit from "./guide/edit.vue";
import PathEdit from "./path/edit.vue";
import { nextTick, reactive, ref, watchEffect } from "vue";
import { guides, isEdit, paths } from "@/store";
import { ui18n } from "@/lang";
import router from "@/router";
import { currentIsFullView } from "@/utils/full";
import { custom } from "@/env";

const current = ref("path");
const tabs = reactive([
  { key: "path", text: ui18n.t("guide.pathName", { count: "0" }) },
  { key: "guide", text: ui18n.t("guide.guideName", { count: "0" }) },
]);
watchEffect(() => {
  tabs[0].text = ui18n.t("guide.pathName", { count: paths.value.length });
  tabs[1].text = ui18n.t("guide.guideName", { count: guides.value.length });
});
const quiskObj = ref<any>();
const quiskAdd = async (key: string) => {
  if (key === "animation") {
    router.push({ name: key });
  } else {
    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;
    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>