fix: 1

src/sdk/association/index.ts

@@ -24,6 +24,7 @@ export const getSupperPanoModel = () => {
       const data = sdk.canTurnToPanoMode();
       if (data?.model) {
         const smodel = getFuseModel(data.model)!
+        console.log('?优质')
         supperModel.value = smodel;
       } else {
         supperModel.value = null;

src/views/security/index.vue

@@ -33,12 +33,15 @@
       </template>
     </div>
   </div>
+
+  <Mode />
 </template>
 
 <script setup lang="ts">
 import { computed, reactive, ref } from "vue";
 import { data, flyLink as flyLinkRaw } from "./store";
 import Link from "./link.vue";
+import Mode from "./mode.vue";
 
 const isFull = ref(false);
 const flyLink = async (name: string, type?: string) => {

src/views/security/mode.vue

@@ -0,0 +1,159 @@
+<template>
+  <Teleport to="body" v-if="panoModel && currentModel === fuseModel">
+    <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 tip="三维模型" tipV="top" />
+      </div>
+      <div
+        class="mode-icon-layout"
+        @click="modelChangeSelect(panoModel, 'pano')"
+        :class="{ active: custom.showMode === 'pano' }"
+      >
+        <ui-icon type="show_roaming_n" class="icon" ctrl tip="全景图" tipV="top" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, watchEffect } from "vue";
+import { custom } from "@/env";
+import { activeModel, getSupperPanoModel } from "@/sdk/association";
+import { fuseModels, getFuseModelShowVariable } from "@/store";
+import type { FuseModel } from "@/store";
+import { currentModel, fuseModel, loadModel } 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();
+watchEffect(() => {
+  console.error(panoModel.value);
+});
+const modelList = computed(() =>
+  fuseModels.value.map((model) => ({
+    raw: model,
+    select: custom.currentModel === model && currentModel.value === fuseModel,
+  }))
+);
+
+const modelChangeSelect = (model: FuseModel, mode: "pano" | "fuse", f = false) => {
+  if (getFuseModelShowVariable(model).value) {
+    if (custom.currentModel === model && mode === custom.showMode) {
+      if (!f) return;
+
+      activeModel({ showMode: "fuse", active: undefined });
+    } else {
+      activeModel({ showMode: mode, active: model });
+    }
+  }
+
+  if (currentModel.value !== fuseModel) {
+    loadModel(fuseModel);
+  }
+};
+
+watchEffect(() => {
+  if (custom.currentModel && !getFuseModelShowVariable(custom.currentModel).value) {
+    activeModel({ showMode: "fuse" });
+  }
+});
+const modelDelete = (model: FuseModel) => {
+  if (custom.currentModel === model) {
+    activeModel({ showMode: "fuse" });
+  }
+  const index = fuseModels.value.indexOf(model);
+  if (~index) {
+    fuseModels.value.splice(index, 1);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.model-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+
+  p {
+    font-size: 14px;
+    color: #fff;
+    height: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.model-desc {
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.model-action {
+  display: flex;
+  align-items: center;
+  flex: none;
+
+  .active {
+    color: var(--colors-primary-base) !important;
+  }
+
+  > * {
+    margin-left: 20px;
+  }
+}
+
+.sign-layout {
+  margin: -20px 0;
+  padding: 20px 0;
+}
+
+.mode-tab {
+  position: absolute;
+  z-index: 2;
+  background-color: var(--editor-menu-back);
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 34px;
+  border-radius: 17px;
+  margin-left: 10px;
+  bottom: 10px;
+  left: 10px;
+  padding: 0 5px;
+
+  .mode-icon-layout {
+    padding: 0 8px;
+
+    &.active .icon {
+      color: var(--color-main-normal) !important;
+    }
+  }
+
+  .icon {
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+  }
+}
+</style>