制作新需求

src/layout/model-list/index.vue

@@ -4,64 +4,77 @@
       <slot name="action" />
     </template>
     <template #atom="{ item }">
-      <ModelSign
-        :canChange="canChange"
-        :model="item.raw" 
-        @delete="modelDelete(item.raw)" 
-        @click="modelChangeSelect(item.raw)"
-      />
+      <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="custom.showMode = 'fuse'" :class="{ active: custom.showMode === 'fuse' }">
+        <ui-icon type="show_3d_n" class="icon" />
+      </div>
+      <div class="mode-icon-layout" @click="custom.showMode = 'pano'" :class="{ active: custom.showMode === 'pano' }">
+        <ui-icon type="show_roaming_n" class="icon" />
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
-import { computed, watchEffect } from 'vue'
-import { custom } from '@/env'
-import { getSceneModel } from '@/sdk'
-import List from '@/components/list/index.vue'
-import ModelSign from './sign.vue'
-import { fuseModels, getFuseModelShowVariable } from '@/store'
+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'
+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 }
-)
+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
-}>()
+  (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 => ({
+const modelList = computed(() =>
+  fuseModels.value.map((model) => ({
     raw: model,
-    select: custom.currentModel === model && currentModel.value === fuseModel
+    select: custom.currentModel === model && currentModel.value === fuseModel,
   }))
-)
+);
 
-const modelChangeSelect = (model: FuseModel) => {
+const modelChangeSelect = (model: FuseModel, mode: "pano" | "fuse") => {
   if (getFuseModelShowVariable(model).value) {
-    custom.currentModel = custom.currentModel !== model ? model : null
+    custom.currentModel = custom.currentModel !== model ? model : null;
   }
-}
+  custom.showMode = mode;
+};
 
 watchEffect(() => {
   if (custom.currentModel && !getFuseModelShowVariable(custom.currentModel).value) {
-    custom.currentModel = null
+    custom.currentModel = null;
   }
-})
-
+});
 const modelDelete = (model: FuseModel) => {
-  const index = fuseModels.value.indexOf(model)
+  const index = fuseModels.value.indexOf(model);
   if (~index) {
-    fuseModels.value.splice(index, 1)
+    fuseModels.value.splice(index, 1);
   }
-}
-</script>
+};
+</script>
+
+<style lang="scss" scoped src="./style.scss"></style>

src/layout/model-list/sign.vue

@@ -1,12 +1,18 @@
 <template>
   <div
-    @click="!model.error && !active && $emit('click')"
+    @click="!model.error && !active && $emit('click', 'fuse')"
     class="sign-layout"
     :class="{ disabled: model.error }"
   >
     <div class="model-header">
       <p>{{ model.title }}</p>
       <div class="model-action">
+        <ui-icon
+          type="show_roaming_n"
+          @click.stop="$emit('click', 'pano')"
+          class="icon"
+          v-if="getSceneModel(props.model)?.supportPano()"
+        />
         <ui-input
           type="checkbox"
           v-model="show"
@@ -29,30 +35,11 @@
       <p><span>拍摄时间：</span>{{ model.time }}</p>
     </div>
   </div>
-
-  <Teleport to="#left-pano" v-if="active && supperPano">
-    <div class="mode-tab strengthen">
-      <div
-        class="mode-icon-layout"
-        @click="custom.showMode = 'fuse'"
-        :class="{ active: custom.showMode === 'fuse' }"
-      >
-        <ui-icon type="show_3d_n" class="icon" />
-      </div>
-      <div
-        class="mode-icon-layout"
-        @click="custom.showMode = 'pano'"
-        :class="{ active: custom.showMode === 'pano' }"
-      >
-        <ui-icon type="show_roaming_n" class="icon" />
-      </div>
-    </div>
-  </Teleport>
 </template>
 
 <script lang="ts" setup>
 import { getFuseModelShowVariable, SceneTypeDesc, SceneType } from "@/store";
-import { custom, showModeStack } from "@/env";
+import { custom } from "@/env";
 import { getSceneModel } from "@/sdk";
 
 import type { FuseModel } from "@/store";
@@ -65,15 +52,11 @@ const props = defineProps<ModelProps>();
 const active = computed(
   () => custom.currentModel === props.model && currentModel.value === fuseModel
 );
-const supperPano = computed(() => {
-  console.log(props.model.title, getSceneModel(props.model)?.supportPano());
-  return getSceneModel(props.model)?.supportPano();
-});
 
 type ModelEmits = {
   (e: "changeSelect", selected: boolean): void;
   (e: "delete"): void;
-  (e: "click"): void;
+  (e: "click", mode: "pano" | "fuse"): void;
 };
 defineEmits<ModelEmits>();
 

src/sdk/association/fuseMode.ts

@@ -1,5 +1,5 @@
-import { SDK, SceneModel, ModelAttrRange } from "../sdk";
-import { toRaw, watch, reactive } from "vue";
+import { sdk, SDK, SceneModel, ModelAttrRange } from "../sdk";
+import { toRaw, watch, reactive, ref } from "vue";
 import { custom, getResource } from "@/env";
 import {
   diffArrayChange,
@@ -30,7 +30,7 @@ export const modelRange: ModelAttrRange = {
   scaleRange: { min: 0, max: 200, step: 0.1 },
 };
 
-const sceneModelMap = reactive(new WeakMap<FuseModel, SceneModel>());
+const sceneModelMap = reactive(new Map<FuseModel, SceneModel>());
 export const getSceneModel = (model?: FuseModel | null) =>
   model && sceneModelMap.get(toRaw(model));
 
@@ -141,9 +141,29 @@ const setModels = (sdk: SDK, models: FuseModels, oldModels: FuseModels) => {
   for (const item of deleted) {
     console.error("销毁", item);
     getSceneModel(item)?.destroy();
+    sceneModelMap.delete(item);
   }
 };
 
+export const getSupperPanoModel = () => {
+  const supperModel = ref<FuseModel | null>(null);
+
+  sdk.sceneBus.on("cameraChange", () => {
+    const data = sdk.canTurnToPanoMode();
+    if (data?.model) {
+      for (const [f, s] of sceneModelMap.entries()) {
+        if (toRaw(data.model) === toRaw(s)) {
+          supperModel.value = f;
+          return;
+        }
+      }
+    }
+    supperModel.value = null;
+  });
+
+  return supperModel;
+};
+
 export const associationModels = (sdk: SDK) => {
   // watch(
   //   () => custom.currentModel === item,

src/sdk/sdk.ts

@@ -1,142 +1,192 @@
-import cover from './cover'
-import { createLoadPack, loadLib } from '@/utils'
-
-import { FuseModelAttrs, FuseModel, GuidePath, MeasureType, Measure as StoreMeasure, MeasurePosition, SceneType, scenes, Scene } from '@/store'
-import type { Emitter } from 'mitt'
-import { SettingResourceType } from '@/api/setting-resource'
-
-
-type SceneModelAttrs = FuseModelAttrs & { select: boolean }
-export type SceneModel = ToChangeAPI<SceneModelAttrs>
-  & { 
-    bus: Emitter<
-      Pick<SceneModelAttrs, 'select'> & 
-      { 
-        loadError: void,
-        loadDone: void, 
-        loadProgress: number,
-        changeSelect: boolean,
-        transformChanged: {
-          position?: SceneLocalPos,
-          scale?: number,
-          rotation?: SceneLocalPos,
-          bottom?: number
-        }
-      }
-    > 
-    destroy: () => void 
-    enterRotateMode: () => void
-    enterMoveMode: () => void
-    leaveTransform: () => void
-    enterAlignment: () => void
-    leaveAlignment: () => void
-    enterScaleSet:() => ScaleSet
-    leaveScaleSet: () => void
-
-    supportPano: () => boolean;
-    flyInPano: () => void;
-    flyOutPano: () => void;
-  }
+import cover from "./cover/index";
+import { createLoadPack, loadLib } from "@/utils";
+
+import {
+  FuseModelAttrs,
+  FuseModel,
+  GuidePath,
+  MeasureType,
+  Measure as StoreMeasure,
+  MeasurePosition,
+  SceneType,
+  scenes,
+  Scene,
+} from "@/store";
+import type { Emitter } from "mitt";
+export enum SettingResourceType {
+  map = "map",
+  color = "color",
+  envImage = "img",
+  bottomImage = "bimg",
+  icon = "icon",
+}
+
+type SceneModelAttrs = FuseModelAttrs & { select: boolean };
+export type SceneModel = ToChangeAPI<SceneModelAttrs> & {
+  bus: Emitter<
+    Pick<SceneModelAttrs, "select"> & {
+      loadError: void;
+      loadDone: void;
+      loadProgress: number;
+      changeSelect: boolean;
+      transformChanged: {
+        position?: SceneLocalPos;
+        scale?: number;
+        rotation?: SceneLocalPos;
+        bottom?: number;
+      };
+    }
+  >;
+  destroy: () => void;
+  enterRotateMode: () => void;
+  enterMoveMode: () => void;
+  leaveTransform: () => void;
+  enterAlignment: () => void;
+  leaveAlignment: () => void;
+  enterScaleSet: () => ScaleSet;
+  leaveScaleSet: () => void;
+
+  supportPano: () => boolean;
+  flyInPano: () => void;
+  flyOutPano: () => void;
+};
 
 export interface ScaleSet {
-  setLength: (length: number) => void,
-  startMeasure: () => void
+  setLength: (length: number) => void;
+  startMeasure: () => void;
 }
-  
 
 export type ModelAttrRange = {
-  [key in 'opacity' | 'bottom' | 'scale' as `${key}Range`]: {
-    min: number,
-    max: number,
-    step: number
-  }
-}
-
-export type AddModelProps = Pick<FuseModel, 'url' | 'id'> 
-  & FuseModelAttrs 
-  & { type: string, isDynamicAdded: boolean, mode: 'many' | 'single', fromType: any }
-  & ModelAttrRange
-
-
-export type SceneGuidePath = Pick<GuidePath, 'position' | 'target' | 'speed' | 'time'>
+  [key in "opacity" | "bottom" | "scale" as `${key}Range`]: {
+    min: number;
+    max: number;
+    step: number;
+  };
+};
+
+export type AddModelProps = Pick<FuseModel, "url" | "id"> &
+  FuseModelAttrs & {
+    type: string;
+    isDynamicAdded: boolean;
+    mode: "many" | "single";
+    fromType: any;
+  } & ModelAttrRange;
+
+export type SceneGuidePath = Pick<
+  GuidePath,
+  "position" | "target" | "speed" | "time"
+>;
 export interface SceneGuide {
-  bus: Emitter<{ changePoint: number; playComplete: void }>
-  play: () => void
-  pause: () => void
-  clear: () => void
-}
-
-export type ScenePos = { localPos: SceneLocalPos, modelId: FuseModel['id'] }
-export type ScreenPos = { 
-  trueSide: boolean,
-  pos: ScreenLocalPos, 
-  modelId: FuseModel['id'] 
+  bus: Emitter<{ changePoint: number; playComplete: void }>;
+  play: () => void;
+  pause: () => void;
+  clear: () => void;
 }
 
-export interface CameraComeToProps { 
-  position: SceneLocalPos; 
-  target?: SceneLocalPos; 
-  dur?: number, 
-  modelId?: FuseModel['id'], 
-  distance?: 1 | 2 | 3 
+export type ScenePos = { localPos: SceneLocalPos; modelId: FuseModel["id"] };
+export type ScreenPos = {
+  trueSide: boolean;
+  pos: ScreenLocalPos;
+  modelId: FuseModel["id"];
+};
+
+export interface CameraComeToProps {
+  position: SceneLocalPos;
+  target?: SceneLocalPos;
+  dur?: number;
+  modelId?: FuseModel["id"];
+  distance?: 1 | 2 | 3;
 }
 
-export type CalcPathProps = [[SceneGuidePath, SceneGuidePath], Partial<Pick<SceneGuidePath, 'time' | 'speed'>>]
-
-
+export type CalcPathProps = [
+  [SceneGuidePath, SceneGuidePath],
+  Partial<Pick<SceneGuidePath, "time" | "speed">>
+];
 
 export interface MeasureBase {
-  destroy?: () => void
-  show: () => void
-  hide: () => void
-  fly: () => void
-  bus: Emitter<{ update: [MeasurePosition['point'][], MeasurePosition['modelId'][]]; highlight: boolean }>
-  changeSelect: (isHight: boolean) => void
-  setPositions: (points: MeasurePosition['point'][], modelIds: MeasurePosition['modelId'][]) => void
-} 
-
-export type Measure<T extends StoreMeasure['type'] = StoreMeasure['type']> = MeasureBase & (
-  T extends MeasureType.area
-    ? { getArea: () => {value: number} }
-    : { getDistance: () => {value: number} }
-)
-
-
-export type StartMeasure<T extends StoreMeasure['type']> = Measure<T> & {
-  bus: Emitter<{ submit: [MeasurePosition['point'][], MeasurePosition['modelId'][]]; cancel: void; invalidPoint: string }>
+  destroy?: () => void;
+  show: () => void;
+  hide: () => void;
+  fly: () => void;
+  bus: Emitter<{
+    update: [MeasurePosition["point"][], MeasurePosition["modelId"][]];
+    highlight: boolean;
+  }>;
+  changeSelect: (isHight: boolean) => void;
+  setPositions: (
+    points: MeasurePosition["point"][],
+    modelIds: MeasurePosition["modelId"][]
+  ) => void;
 }
 
+export type Measure<T extends StoreMeasure["type"] = StoreMeasure["type"]> =
+  MeasureBase &
+    (T extends MeasureType.area
+      ? { getArea: () => { value: number } }
+      : { getDistance: () => { value: number } });
+
+export type StartMeasure<T extends StoreMeasure["type"]> = Measure<T> & {
+  bus: Emitter<{
+    submit: [MeasurePosition["point"][], MeasurePosition["modelId"][]];
+    cancel: void;
+    invalidPoint: string;
+  }>;
+};
+
 export interface SDK {
-  layout: HTMLDivElement,
-  sceneBus: Emitter<{ 'cameraChange':  SceneLocalPos }>
-  setBackdrop: (drop: string, type: SettingResourceType, tb: {scale?: number, rotate?: number}) => void
-  compassVisibility: (visibility: boolean) => void
-  switchScene: (scene: {type: SceneType, num: string} | null) => Promise<void>
-  addModel: (props: AddModelProps) => SceneModel
-  setCameraFov: (fov: number) => void
-  enableMap(dom: HTMLDivElement, latlng: number[]): void
-  switchMapType: (type: string) => void
-  showGrid: () => void
-  hideGrid: () => void
-  calcPathInfo: (paths: CalcPathProps[0], info: CalcPathProps[1]) => Required<CalcPathProps[1]>
-  getPositionByScreen: (screenPos: ScreenLocalPos, modelId?: FuseModel['id']) => ScenePos & {worldPos: SceneLocalPos} | null
-  getScreenByPosition: (localPos: SceneLocalPos, modelId?: FuseModel['id']) => ScreenPos | null
-  screenshot: (width: number, height: number) => Promise<string>
-  getPose: () => { position: SceneLocalPos, target: SceneLocalPos }
-  comeTo: (pos: CameraComeToProps) => void
-  enterSceneGuide: (data: SceneGuidePath[]) => SceneGuide,
-
-  drawMeasure<T extends StoreMeasure['type']>(type: T, points: MeasurePosition['point'][], modelIds: MeasurePosition['modelId'][]): Measure<T>,
-  startMeasure<T extends StoreMeasure['type']>(type: T): StartMeasure<T> ,
+  layout: HTMLDivElement;
+  sceneBus: Emitter<{ cameraChange: SceneLocalPos }>;
+  setBackdrop: (
+    drop: string,
+    type: SettingResourceType,
+    tb: { scale?: number; rotate?: number }
+  ) => void;
+  compassVisibility: (visibility: boolean) => void;
+  switchScene: (
+    scene: { type: SceneType; num: string } | null
+  ) => Promise<void>;
+  addModel: (props: AddModelProps) => SceneModel;
+  setCameraFov: (fov: number) => void;
+  enableMap(dom: HTMLDivElement, latlng: number[]): void;
+  switchMapType: (type: string) => void;
+  showGrid: () => void;
+  canTurnToPanoMode: () => { model: SceneModel };
+  hideGrid: () => void;
+  calcPathInfo: (
+    paths: CalcPathProps[0],
+    info: CalcPathProps[1]
+  ) => Required<CalcPathProps[1]>;
+  getPositionByScreen: (
+    screenPos: ScreenLocalPos,
+    modelId?: FuseModel["id"]
+  ) => (ScenePos & { worldPos: SceneLocalPos }) | null;
+  getScreenByPosition: (
+    localPos: SceneLocalPos,
+    modelId?: FuseModel["id"]
+  ) => ScreenPos | null;
+  screenshot: (width: number, height: number) => Promise<string>;
+  getPose: () => { position: SceneLocalPos; target: SceneLocalPos };
+  comeTo: (pos: CameraComeToProps) => void;
+  enterSceneGuide: (data: SceneGuidePath[]) => SceneGuide;
+
+  drawMeasure<T extends StoreMeasure["type"]>(
+    type: T,
+    points: MeasurePosition["point"][],
+    modelIds: MeasurePosition["modelId"][]
+  ): Measure<T>;
+  startMeasure<T extends StoreMeasure["type"]>(type: T): StartMeasure<T>;
 }
 
-
-export let sdk: SDK
-export type InialSDKProps = { layout: HTMLDivElement, scenes: Scene[], lonlat?:number[] }
-export let initialed = false
+export let sdk: SDK;
+export type InialSDKProps = {
+  layout: HTMLDivElement;
+  scenes: Scene[];
+  lonlat?: number[];
+};
+export let initialed = false;
 export const initialSDK = async (props: InialSDKProps) => {
   if (initialed) return sdk;
-  initialed = true
+  initialed = true;
   const libs = [
     `./lib/proj4/proj4.js`,
     `./lib/jquery/jquery-3.1.1.min.js`,
@@ -148,24 +198,24 @@ export const initialSDK = async (props: InialSDKProps) => {
     `./lib/plasio/workers/laz-perf.js`,
     `./lib/Cesium/Cesium.js`,
     `./lib/shapefile/shapefile.js`,
-  ]
-  await Promise.all(libs.map(loadLib))
-  await loadLib(`./lib/potree/potree.js`)
+  ];
+  await Promise.all(libs.map(loadLib));
+  await loadLib(`./lib/potree/potree.js`);
 
-  console.log(props)
+  console.log(props);
   const localSdk = cover({
-    dom: props.layout, 
-    isLocal: false, 
+    dom: props.layout,
+    isLocal: false,
     scenes: props.scenes,
     lonlat: props.lonlat,
-    mapDom: null
-  }) as unknown as SDK
+    mapDom: null,
+  }) as unknown as SDK;
 
-  console.log(scenes.value)
-  ;(window as any).sdk = sdk = localSdk
-  sdk.layout = props.layout
+  console.log(scenes.value);
+  (window as any).sdk = sdk = localSdk;
+  sdk.layout = props.layout;
 
-  return sdk
-}
+  return sdk;
+};
 
-export default sdk!
+export default sdk!;

src/views/setting/index.vue

@@ -3,7 +3,7 @@
     <ui-group title="初始画面" borderBottom>
       <ui-group-option>
         <div class="init-pic" :class="{ disabled: isEdit }">
-          <img :src="getFileUrl(setting!.cover)" class="init-puc-cover">
+          <img :src="getFileUrl(setting!.cover)" class="init-puc-cover" />
           <div class="init-pic-set" @click="enterSetPic">设置</div>
         </div>
       </ui-group-option>
@@ -12,16 +12,16 @@
     <ui-group title="设置天空">
       <ui-group-option>
         <div class="back-layout">
-          <div 
-            v-for="back in backs" 
-            :key="back.value" 
-            class="back-item" 
+          <div
+            v-for="back in backs"
+            :key="back.value"
+            class="back-item"
             :class="{ [back.type]: true, active: setting!.back === back.value}"
             @click="setting!.back !== back.value && changeBack(back.value)"
           >
-            <img :src="back.image" v-if="back.type === 'img'">
+            <img :src="back.image" v-if="back.type === 'img'" />
             <i class="iconfont" :class="back.image" v-else-if="back.type === 'icon'" />
-            <span :style="{background: back.image}" v-else></span>
+            <span :style="{ background: back.image }" v-else></span>
             <p class="back-item-desc">{{ back.label }}</p>
           </div>
         </div>
@@ -31,28 +31,58 @@
 </template>
 
 <script lang="ts" setup>
-import { RightFillPano } from '@/layout'
-import { enterEdit, enterOld, setting, isEdit, updataSetting } from '@/store'
-import { reactive, ref, watchEffect } from 'vue'
-import { togetherCallback, getFileUrl, loadPack } from '@/utils'
-import { showRightPanoStack, showRightCtrlPanoStack } from '@/env'
-import { sdk } from '@/sdk'
-
-const backs = ref<{ label: string, type: string, image: string, value: string}[]>([])
+import { RightFillPano } from "@/layout";
+import { enterEdit, enterOld, setting, isEdit, updataSetting } from "@/store";
+import { reactive, ref, watchEffect } from "vue";
+import { togetherCallback, getFileUrl, loadPack } from "@/utils";
+import { showRightPanoStack, showRightCtrlPanoStack } from "@/env";
+import { sdk, SettingResourceType } from "@/sdk";
+
+const backs = ref<{ label: string; type: string; image: string; value: string }[]>([]);
 watchEffect(async () => {
   backs.value = [
-      { label: '无', type: 'icon', image: 'icon-without', value: 'none' },
-      { label: '蓝天白云', type: 'img', image: (await import("./images/pic_ltby@2x.png")).default, value: (await import("./images/蓝天白云.jpg")).default },
-      { label: '乌云密布', type: 'img', image: (await import("./images/pic_wymb@2x.png")).default, value: (await import("./images/乌云密布.jpg")).default},
-      { label: '夜空', type: 'img', image: (await import("./images/pic_yk@2x.png")).default, value: (await import("./images/夜空.jpg")).default },
-      { label: '草地', type: 'img', image: (await import("./images/pic_cd@2x.png")).default, value: (await import("./images/草地.jpg")).default },
-      { label: '道路', type: 'img', image: (await import("./images/pic_dl@2x.png")).default, value: (await import("./images/道路.jpg")).default },
-      { label: '傍晚', type: 'img', image: (await import("./images/pic_bw@2x.png")).default, value: (await import("./images/傍晚.jpg")).default },
-      { label: '灰色', type: 'color', image: '#333333', value: '#333' },
-      { label: '黑色', type: 'color', image: '#000000', value: '#000' },
-      { label: '白色', type: 'color', image: '#ffffff', value: '#fff' },
-  ]
-})
+    { label: "无", type: "icon", image: "icon-without", value: "none" },
+    {
+      label: "蓝天白云",
+      type: "img",
+      image: (await import("./images/pic_ltby@2x.png")).default,
+      value: (await import("./images/蓝天白云.jpg")).default,
+    },
+    {
+      label: "乌云密布",
+      type: "img",
+      image: (await import("./images/pic_wymb@2x.png")).default,
+      value: (await import("./images/乌云密布.jpg")).default,
+    },
+    {
+      label: "夜空",
+      type: "img",
+      image: (await import("./images/pic_yk@2x.png")).default,
+      value: (await import("./images/夜空.jpg")).default,
+    },
+    {
+      label: "草地",
+      type: "img",
+      image: (await import("./images/pic_cd@2x.png")).default,
+      value: (await import("./images/草地.jpg")).default,
+    },
+    {
+      label: "道路",
+      type: "img",
+      image: (await import("./images/pic_dl@2x.png")).default,
+      value: (await import("./images/道路.jpg")).default,
+    },
+    {
+      label: "傍晚",
+      type: "img",
+      image: (await import("./images/pic_bw@2x.png")).default,
+      value: (await import("./images/傍晚.jpg")).default,
+    },
+    { label: "灰色", type: "color", image: "#333333", value: "#333" },
+    { label: "黑色", type: "color", image: "#000000", value: "#000" },
+    { label: "白色", type: "color", image: "#ffffff", value: "#fff" },
+  ];
+});
 
 const enterSetPic = () => {
   enterEdit(
@@ -60,44 +90,43 @@ const enterSetPic = () => {
       showRightPanoStack.push(ref(false)),
       showRightCtrlPanoStack.push(ref(false)),
     ])
-  )
+  );
   enterOld(async () => {
-    const dataURL = await sdk.screenshot(300, 150)
-    const res = await fetch(dataURL)
-    const blob = await res.blob()
+    const dataURL = await sdk.screenshot(300, 150);
+    const res = await fetch(dataURL);
+    const blob = await res.blob();
     setting.value = {
       ...setting.value!,
       cover: { url: dataURL, blob },
-      pose: sdk.getPose()
-    }
-    await updataSetting()
-  })
-}
-
-const initBack = setting.value!.back
-let isFirst = true
+      pose: sdk.getPose(),
+    };
+    await updataSetting();
+  });
+};
+
+const initBack = setting.value!.back;
+let isFirst = true;
 const changeBack = (back: string) => {
-  setting.value!.back = back
-  sdk.setBackdrop(back)
+  setting.value!.back = back;
+  sdk.setBackdrop(back, SettingResourceType.envImage, {});
 
   if (isFirst) {
-    let isSave = false
-    isFirst = false
+    let isSave = false;
+    isFirst = false;
     enterEdit(() => {
       if (!isSave) {
-        setting.value!.back = initBack
-        sdk.setBackdrop(initBack)
+        setting.value!.back = initBack;
+        sdk.setBackdrop(initBack, "", {});
       }
-      isFirst = true
-    })
+      isFirst = true;
+    });
     enterOld(async () => {
-      isSave = true
+      isSave = true;
 
-      await loadPack(updataSetting())
-    })
+      await loadPack(updataSetting());
+    });
   }
-}
-
+};
 </script>
 
 <style scoped lang="scss">
@@ -111,8 +140,7 @@ const changeBack = (back: string) => {
 .init-puc-cover {
   width: 100%;
   height: 100%;
-  object-fit: cover
-  
+  object-fit: cover;
 }
 
 .init-pic-set {
@@ -120,7 +148,7 @@ const changeBack = (back: string) => {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   font-size: 12px;
   color: #fff;
   line-height: 32px;
@@ -136,12 +164,14 @@ const changeBack = (back: string) => {
 }
 
 .back-item {
-  > span, .iconfont, img {
+  > span,
+  .iconfont,
+  img {
     display: block;
     height: 88px;
     cursor: pointer;
     outline: 2px solid transparent;
-    transition: all .3s;
+    transition: all 0.3s;
     border-radius: 4px;
   }
   .iconfont {
@@ -157,8 +187,10 @@ const changeBack = (back: string) => {
   }
 
   &.active {
-    > span, .iconfont, img {
-      outline-color:  #00C8AF;
+    > span,
+    .iconfont,
+    img {
+      outline-color: #00c8af;
     }
   }
 }
@@ -169,4 +201,4 @@ const changeBack = (back: string) => {
   margin-top: 10px;
   text-align: center;
 }
-</style>
+</style>