fuse-code/src/layout/model-list/index.vue

<template>
  <List :title="title" rawKey="id" :data="modelList" :showContent="showContent">
    <template #action>
      <slot name="action" />
    </template>
    <template #atom="{ item }">
      <ModelSign
        :canChange="canChange"
        :model="item.raw"
        @delete="modelDelete(item.raw)"
        @click="(mode: any) => modelChangeSelect(item.raw, mode)"
      />
    </template>
  </List>

  <Teleport to="#left-pano" v-if="panoModel">
    <div class="mode-tab strengthen">
      <div
        class="mode-icon-layout"
        @click="modelChangeSelect(panoModel, 'fuse')"
        :class="{ active: custom.showMode === 'fuse' }"
      >
        <ui-icon type="show_3d_n" class="icon" ctrl />
      </div>
      <div
        class="mode-icon-layout"
        @click="modelChangeSelect(panoModel, 'pano')"
        :class="{ active: custom.showMode === 'pano' }"
      >
        <ui-icon type="show_roaming_n" class="icon" ctrl />
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { computed, watchEffect } from "vue";
import { custom } from "@/env";
import List from "@/components/list/index.vue";
import ModelSign from "./sign.vue";
import { getSupperPanoModel } from "@/sdk/association";
import { fuseModels, getFuseModelShowVariable } from "@/store";

import type { FuseModel } from "@/store";
import { currentModel, fuseModel } from "@/model";

export type ModelListProps = {
  title?: string;
  canChange?: boolean;
  showContent?: boolean;
};
withDefaults(defineProps<ModelListProps>(), {
  title: "数据列表",
  change: false,
  showContent: true,
});
defineEmits<{
  (e: "deleteModel", model: FuseModel): void;
  (e: "clickModel", model: FuseModel): void;
}>();

const panoModel = getSupperPanoModel();
const modelList = computed(() =>
  fuseModels.value.map((model) => ({
    raw: model,
    select: custom.currentModel === model && currentModel.value === fuseModel,
  }))
);

const modelChangeSelect = (model: FuseModel, mode: "pano" | "fuse") => {
  if (getFuseModelShowVariable(model).value) {
    if (custom.currentModel === model && mode === custom.showMode) {
      custom.currentModel = null;
      custom.showMode = "fuse";
    } else {
      custom.currentModel = model;
      custom.showMode = mode;
    }
  }
};

watchEffect(() => {
  if (custom.currentModel && !getFuseModelShowVariable(custom.currentModel).value) {
    custom.currentModel = null;
  }
});
const modelDelete = (model: FuseModel) => {
  const index = fuseModels.value.indexOf(model);
  if (~index) {
    fuseModels.value.splice(index, 1);
  }
};
</script>

<style lang="scss" scoped src="./style.scss"></style>