更新组件树UI的位置

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -3,12 +3,13 @@ import { computed, reactive } from "vue";
 
 import { IconImage, IconShape, IconTpl, IconVideo } from "@/assets/icons";
 import { css, cx } from "@linaria/core";
-import { IconCube } from "@queenjs/icons";
+import { IconCube, IconLayers } from "@queenjs/icons";
 import { defineUI } from "queenjs";
 import CustomComps from "./CustomComps";
 import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
+import { CompTree } from "../SliderRight/CompTree";
 
 const tabs = [
   {
@@ -69,6 +70,11 @@ const tabs = [
     icon: IconTpl,
     component: Templates,
   },
+  {
+    title: "图层",
+    icon: () => <IconLayers class="text-24px transform scale-170" />,
+    component: CompTree,
+  },
 ];
 
 export default defineUI({
@@ -93,21 +99,24 @@ export default defineUI({
 
       return (
         <div class="h-full flex">
-          <div class="w-70px pt-16px border-right !border-2px">
+          <div class="flex flex-col w-70px py-16px border-right !border-2px">
             {tabs.map((record, index) => {
               return (
-                <div
-                  key={index}
-                  class={cx(
-                    tabItem,
-                    "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
-                    state.tabIndex == index && "active"
-                  )}
-                  onClick={() => (state.tabIndex = index)}
-                >
-                  <record.icon class="text-24px" />
-                  <div class="text-center mt-2px">{record.title}</div>
-                </div>
+                <>
+                  {index === tabs.length - 1 && <div class="flex-1"></div>}
+                  <div
+                    key={index}
+                    class={cx(
+                      tabItem,
+                      "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
+                      state.tabIndex == index && "active"
+                    )}
+                    onClick={() => (state.tabIndex = index)}
+                  >
+                    <record.icon class="text-24px" />
+                    <div class="text-center mt-2px">{record.title}</div>
+                  </div>
+                </>
               );
             })}
           </div>
@@ -131,7 +140,7 @@ export default defineUI({
             )}
 
             <currComp.component
-              class="flex-1 h-1/1 px-16px my-10px overflow-y-auto"
+              class="flex-1 h-1/1 px-16px !my-10px overflow-y-auto"
               {...currComp.props}
             />
           </div>

src/modules/editor/components/Viewport/Slider/SliderRight/index.tsx

@@ -19,10 +19,10 @@ export default defineUI({
           <div class="flex-1 p-16px scrollbar">
             <Form component={currComp} />
           </div>
-          <div class="p-16px border-bottom !border-2px border-top">组件树</div>
+          {/* <div class="p-16px border-bottom !border-2px border-top">组件树</div>
           <div class="h-360px py-20px pr-20px scrollbar">
             <CompTree class={compTreeCls} />
-          </div>
+          </div> */}
         </div>
       );
     };