update

src/modules/editor/components/CompUI/basicUI/Map/component.tsx

@@ -13,7 +13,9 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { controls, actions, store } = useEditor();
+    const { controls, store } = useEditor();
+
+    const mapContainerRef = ref();
 
     const comp = useCompData(props.compId);
     const { value } = comp;
@@ -33,7 +35,7 @@ export const Component = defineComponent({
       // })
       //   .then((res) => {
       // AMap.value = res;
-      map.value = new AMap.Map(props.compId, {
+      map.value = new AMap.Map(mapContainerRef.value, {
         // viewMode: "3D",
         zoom: 11,
         center: value.addressInfo.lnglat,
@@ -44,10 +46,9 @@ export const Component = defineComponent({
           position: value.addressInfo.lnglat,
         });
         map.value.add(marker.value);
-        if (!store.isEditMode) {
-          const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
-          map.value.addControl(toolbar);
-        }
+
+        const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
+        map.value.addControl(toolbar);
       });
       // })
       // .catch((e: any) => {
@@ -61,11 +62,8 @@ export const Component = defineComponent({
       map.value.setZoomAndCenter(11, value.addressInfo.lnglat);
     }
 
-    // openMap(options) {
-    //   this.controls.wxCtrl.openMap(options);
-    // },
-
     function openMap() {
+      if (store.isEditMode) return;
       const options = {
         latitude: value.addressInfo.lnglat[1], // 纬度，浮点数，范围为90 ~ -90
         longitude: value.addressInfo.lnglat[0], // 经度，浮点数，范围为180 ~ -180。
@@ -87,22 +85,18 @@ export const Component = defineComponent({
     return () => (
       <View compId={props.compId}>
         <div
-          id={props.compId}
+          ref={mapContainerRef}
           class="w-1/1"
-          // style={{ aspectRatio: 1 }}
           style={{
             height: "calc(100% - 44px)",
           }}
         ></div>
-        {!store.isEditMode && (
-          <div
-            class="absolute right-20px bottom-50px rounded-1/2 w-40px h-40px flex items-center justify-center bg-[#0085fe]"
-            onClick={openMap}
-          >
-            <IconAirPlain class="text-20px" />
-          </div>
-        )}
-
+        <div
+          class="absolute right-20px bottom-50px rounded-1/2 w-40px h-40px flex items-center justify-center bg-[#0085fe]"
+          onClick={openMap}
+        >
+          <IconAirPlain class="text-20px" />
+        </div>
         <div class="text-14px text-[#666] py-15px text-center bg-light-50">
           {value.addressInfo.address}
         </div>

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -274,7 +274,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                 <Divider></Divider>
               </>
             ) : null}
-            {/* {columnsUI && <columnsUI component={component} />}
+            {columnsUI && <columnsUI component={component} />}
             <div>
               <span class="text-white">布局</span>
             </div>
@@ -309,7 +309,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   onChange={changeVal}
                 />
               </>
-            ) : null} */}
+            ) : null}
             {/* 动效 */}
             <>
               <Divider />

src/modules/editor/components/CompUI/formItems/NewColorPicker/Picker.tsx

@@ -3,7 +3,6 @@ import iro from "@jaames/iro";
 import { css, cx } from "@linaria/core";
 import { Input, InputNumber } from "ant-design-vue";
 import Color from "color";
-import { nanoid } from "nanoid";
 import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 import { string } from "vue-types";
 
@@ -21,8 +20,8 @@ export default defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const containerId = `id_${nanoid(5)}`;
     const pickr = ref<any>(null);
+    const containerRef = ref();
 
     const state = reactive({
       showPicker: false,
@@ -33,10 +32,9 @@ export default defineComponent({
 
     function initPicker() {
       if (window.EyeDropper) state.showPicker = true;
-      const element = document.querySelector(`.${containerId}`);
-      if (!element) return;
+      if (!containerRef.value) return;
       // @ts-ignore
-      pickr.value = new iro.ColorPicker(element, {
+      pickr.value = new iro.ColorPicker(containerRef.value, {
         width: 270,
         boxHeight: 150,
         color: props.value,
@@ -149,7 +147,7 @@ export default defineComponent({
 
       return (
         <div class={styles}>
-          <div class={containerId}></div>
+          <div ref={containerRef}></div>
           <div class="mt-15px flex items-center justify-between">
             <Input
               bordered={false}

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -76,7 +76,7 @@ export default defineUI({
               class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
             >
               <IconFit class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800" 
-              //  onClick={() => editorCtrl.setScale(scale - 0.1)}
+               onClick={() => editorCtrl.autoInScreen()}
               />
               <IconReduce
                 class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"