update

src/assets/icons/components/IconFit.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconFit = createIcon(<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><g transform="translate(-0.111 -0.112)"><g transform="translate(1375.111 960.112)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M33,6h4.444v4.444" transform="translate(-19.444 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M37.444,33v4.444H33" transform="translate(-19.444 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M10.444,37.444H6V33" transform="translate(-6 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M6,10.444V6h4.444" transform="translate(-6 -6)"/></g><rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" width="6" height="6" transform="translate(1381.112 966.112)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -23,6 +23,7 @@ export * from "./components/IconCube";
 export * from "./components/IconCut";
 export * from "./components/IconDelete";
 export * from "./components/IconEmpty";
+export * from "./components/IconFit";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";

src/assets/icons/svg/fit.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><g transform="translate(-0.111 -0.112)"><g transform="translate(1375.111 960.112)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M33,6h4.444v4.444" transform="translate(-19.444 -6)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M37.444,33v4.444H33" transform="translate(-19.444 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M10.444,37.444H6V33" transform="translate(-6 -19.444)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M6,10.444V6h4.444" transform="translate(-6 -6)"/></g><rect fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" width="6" height="6" transform="translate(1381.112 966.112)"/></g></g></svg>

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -361,5 +361,5 @@ const divideStyle = css`
 `;
 
 const safeAreaStyles = css`
-  box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.3);
 `;

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,18 +309,18 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   onChange={changeVal}
                 />
               </>
-            ) : null}
+            ) : null} */}
             {/* 动效 */}
             <>
               <Divider />
-              {/* <div>
+              <div>
                 <span class="text-white">动效</span>
               </div>
               <FormUI
                 data={component}
                 columns={animateColumns}
                 onChange={changeVal}
-              /> */}
+              />
             </>
           </div>
         );

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

@@ -10,6 +10,7 @@ import { IconPlus, IconReduce } from "@queenjs/icons";
 import { InputNumber } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
+import { IconFit } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -74,12 +75,15 @@ export default defineUI({
             <div
               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)}
+              />
               <IconReduce
-                class="ml-5px text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                 onClick={() => editorCtrl.setScale(scale - 0.1)}
               />
               <IconPlus
-                class="text-light-50 text-30px cursor-pointer transition hover:bg-dark-800"
+                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                 onClick={() => editorCtrl.setScale(scale + 0.1)}
               />
               <InputNumber
@@ -88,7 +92,7 @@ export default defineUI({
                 bordered={false}
                 controls={false}
                 value={scale}
-                class="!w-60px !ml-10px text-center !bg-[#303030] rounded"
+                class="!w-60px text-center !bg-[#303030] rounded"
                 formatter={(v: any) => Math.floor(v * 100) + "%"}
                 onPressEnter={(e: any) => {
                   const newScale = e.target.value.split("%")[0] / 100;
@@ -128,14 +132,22 @@ const bottomBtnStyles = css`
 `;
 
 const group = css`
+  .ant-input-number,
+  .inficon {
+    transition: all 0.3s ease-in-out;
+  }
   .inficon {
-    transition: all 0.2s ease-in;
-    margin-right: -37px;
+    margin-right: -36px;
   }
   .ant-input-number-input {
+    height: 36px;
+    line-height: 36px;
     text-align: center;
   }
   &:hover {
+    .ant-input-number {
+      margin-left: 10px;
+    }
     .inficon {
       margin-right: 0;
     }