comptree

src/modules/editor/components/TipIcons/index.ts

@@ -84,7 +84,7 @@ export const TipIcons = {
     tips: ["显示", "隐藏"],
   }),
   Lock: createTipIcon({
-    icons: [IconLock, IconUnlock],
+    icons: [IconUnlock, IconLock],
     tips: ["锁定", "未锁定"],
   }),
   Delete: createTipIcon({

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

@@ -136,8 +136,8 @@ export default defineUI({
           />
           <div
             class={[
-              "flex flex-1 relative transition-all w-280px",
-              tabIndex != -1 ? "max-w-280px" : "max-w-0",
+              "flex flex-1 relative transition-all w-210px",
+              tabIndex != -1 ? "max-w-210px" : "max-w-0",
             ]}
           >
             {tabs.map((tab, index) => {

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

@@ -226,26 +226,27 @@ const CompNode = defineComponent({
           : comp.thumbnail || compOpts?.thumbnail;
       const title =
         comp.compKey === "Text" ? textTitle(comp.value) : props.title;
+
       return (
         <div class={[nodeStyle, "flex"]}>
           <Image src={thumbnail} size={240} />
-          <span class="flex-1 w-0 whitespace-nowrap overflow-hidden overflow-ellipsis pr-10px">
+          <span class="flex-1 w-0 text-12px whitespace-nowrap overflow-hidden overflow-ellipsis pr-6px">
             {title}
           </span>
-          <span class="actions space-x-4px whitespace-nowrap transition">
-            {actions.map((action, i) =>
-              action.getVisible.call(editor, comp) ? (
+          <span class="actions space-x-2px whitespace-nowrap transition">
+            {actions.map((action, i) => {
+              return action.getVisible.call(editor, comp) ? (
                 <action.component
                   key={i}
-                  class="p-4px"
+                  class={["p-4px", action.getValue?.(comp) ? "active" : ""]}
                   value={action.getValue?.(comp)}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
                     action.onClick.call(editor, comp);
                   }}
                 />
-              ) : null
-            )}
+              ) : null;
+            })}
           </span>
         </div>
       );
@@ -256,32 +257,42 @@ const CompNode = defineComponent({
 const treeStyle = css`
   .ant-tree-switcher {
     display: flex;
+    width: 14px;
+    padding-right: 4px;
     justify-content: center;
     align-items: center;
   }
   .ant-tree-indent-unit {
-    width: 12px;
+    width: 4px;
   }
 `;
 
 const nodeStyle = css`
   display: flex;
   align-items: center;
-  padding: 6px;
+  padding: 6px 2px;
   @apply rounded;
 
   > img {
-    width: 24px;
-    height: 24px;
-    margin-right: 6px;
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
     object-fit: contain;
   }
   .actions {
-    opacity: 0;
+    .inficon {
+      opacity: 0;
+      font-size: 14px;
+      &.active {
+        opacity: 1;
+      }
+    }
   }
   &:hover {
     .actions {
-      opacity: 1;
+      .inficon {
+        opacity: 1;
+      }
     }
   }
 `;

src/modules/editor/objects/Toolbars/default.ts

@@ -112,7 +112,7 @@ export const toolbars = createToolbars({
   // 锁定
   lock: {
     component: TipIcons.Lock,
-    getValue: (comp) => (comp.layout.locked ? 0 : 1),
+    getValue: (comp) => (comp.layout.locked ? 1 : 0),
     onClick(comp) {
       this.actions.setCompLock(comp);
     },