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

<template>
  <RightFillPano>
    <template #header>
      <div class="btns header-btns">
        <ui-button class="start" @click="getView">
          <ui-icon type="add" />
          视图提取
        </ui-button>
      </div>
    </template>

    <ui-group title="全部视图" class="tree">
      <Draggable :list="views" draggable=".sign" itemKey="id">
        <template #item="{ element: view }">
          <Sign
            :view="view"
            :key="view.id"
            @delete="() => deleteView(view)"
            @updateTitle="(title) => (view.title = title)"
            @updateCover="(cover) => (view.cover = cover)"
          />
        </template>
      </Draggable>
    </ui-group>
  </RightFillPano>
</template>

<script lang="ts" setup>
import {
  views,
  createView,
  autoSaveViews,
  // initialViews,
  initialTaggingStyles,
  initialTaggings,
  initialMeasures,
} from "@/store";
import { RightFillPano } from "@/layout";
import { useViewStack } from "@/hook";
import Draggable from "vuedraggable";
import Sign from "./sign.vue";
import { loadModel, currentModel, fuseModel } from "@/model";
import { loadPack, togetherCallback } from "@/utils";
import { Message } from "bill/index";
import { showLeftPanoStack, showRightPanoStack } from "@/env";
import { ref, watch } from "vue";

import type { View } from "@/store";

// initialViews();
initialTaggingStyles(), initialTaggings(), initialMeasures();
const getView = async () => {
  try {
    const { image, flyData } = await loadPack(async () => {
      const modelSDK = await loadModel(currentModel.value);
      return await modelSDK.getView();
    });

    const type =
      currentModel.value !== fuseModel
        ? { numType: currentModel.value.type, num: currentModel.value.num }
        : {};

    views.value.push(
      createView({
        flyData,
        cover: {
          blob: image,
          url: URL.createObjectURL(image),
        },
        ...type,
      })
    );
  } catch (e: any) {
    console.error(e);
    Message.error(e.message);
  }
};
const deleteView = (record: View) => {
  const index = views.value.indexOf(record);
  if (~index) {
    views.value.splice(index, 1);
  }
};

const showLeftPano = ref(true);
watch(currentModel, () => {
  if (currentModel.value) {
    showLeftPano.value = false;
  }
});

useViewStack(autoSaveViews);
useViewStack(() => togetherCallback([showLeftPanoStack.push(showLeftPano)]));
</script>

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