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

<template>
  <LeftPano>
    <SceneList :current="currentModel" @update:current="loadModel" />
  </LeftPano>

  <RightFillPano>
    <template #header>
      <div class="tabs">
        <span
          v-for="tab in tabs"
          :key="tab.key"
          :class="{ active: tab.key === current }"
          @click="current = tab.key"
        >
          {{ tab.text }}
        </span>
      </div>
    </template>
    <Taggings v-if="current === TabKey.tagging" />
    <Guides v-if="current === TabKey.guide" />
    <Measures v-if="current === TabKey.measure" />
  </RightFillPano>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useViewStack } from "@/hook";
import { showRightCtrlPanoStack, showRightPanoStack } from "@/env";
import { currentModel, fuseModel, loadModel } from "@/model";
import { LeftPano, RightFillPano } from "@/layout";
import SceneList from "@/layout/scene-list/index.vue";
import Taggings from "@/views/tagging/hot/show.vue";
import Measures from "@/views/measure/show.vue";
import Guides from "@/views/guide/show.vue";

enum TabKey {
  tagging,
  measure,
  guide,
}
const tabs = [
  { key: TabKey.tagging, text: "标签" },
  { key: TabKey.measure, text: "测量" },
  { key: TabKey.guide, text: "路径" },
];
const current = ref(tabs[0].key);
const showRightCtrl = ref(true);

watchEffect((onclean) => {
  const isFuse = currentModel.value === fuseModel;
  if (!isFuse) {
    onclean(showRightPanoStack.push(ref(false)));
  }
  showRightCtrl.value = isFuse;
});
useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl));
</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;
    }
  }
}
</style>