UI

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

@@ -65,7 +65,7 @@ export default defineUI({
                       src={item.thumbnail}
                       size={240}
                     />
-                    <div class="absolute w-1/1 h-1/1 top-0 left-0 bg-dark-500 bg-opacity-20 transition opacity-0 hover:(opacity-100) text-dark-500">
+                    <div class="absolute w-1/1 h-1/1 top-0 left-0 bg-dark-900 bg-opacity-30 transition opacity-0 hover:(opacity-100) text-dark-500">
                       <IconPreview
                         class="absolute right-6px top-6px text-22px bg-light-50 rounded-2px cursor-pointer hover:opacity-80 text-dark-500 transition"
                         onClick={(e: any) => {

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

@@ -29,7 +29,7 @@ export const CompTree = defineComponent({
 
         function getCompChildren(ids: string[], revert = false): TreeItem[] {
           if (revert) ids = ids.reverse();
-          
+
           return ids.map((id) => {
             const comp = helper.findComp(id) as DesignComp;
             return {
@@ -144,25 +144,27 @@ export const CompTree = defineComponent({
     };
 
     return () => (
-      <Tree
-        class={treeStyle}
-        treeData={state.treeData}
-        v-model={[state.expandedKeys, "expandedKeys"]}
-        selectedKeys={[store.currCompId]}
-        blockNode={true}
-        draggable={true}
-        onDrop={onDrop}
-        onSelect={(ids) => {
+      <div class="!overflow-x-auto">
+        <Tree
+          class={treeStyle}
+          treeData={state.treeData}
+          v-model={[state.expandedKeys, "expandedKeys"]}
+          selectedKeys={[store.currCompId]}
+          blockNode={true}
+          draggable={true}
+          onDrop={onDrop}
+          onSelect={(ids) => {
           const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
-          actions.pickComp(id);
-        }}
-      >
-        {{
-          title: (data: any) => {
-            return <CompNode title={data.title} id={data.key} />;
-          },
-        }}
-      </Tree>
+            actions.pickComp(id);
+          }}
+        >
+          {{
+            title: (data: any) => {
+              return <CompNode title={data.title} id={data.key} />;
+            },
+          }}
+        </Tree>
+      </div>
     );
   },
 });
@@ -188,8 +190,8 @@ const CompNode = defineComponent({
       return (
         <div class={nodeStyle}>
           <Image src={thumbnail} size={240} />
-          <span class="w-0 flex-1 truncate">{props.title}</span>
-          <span class="space-x-4px">
+          <span class="w-1/1 flex-1 whitespace-nowrap mr-30px">{props.title}</span>
+          <span class="space-x-4px whitespace-nowrap">
             {actions.map((action, i) =>
               action.getVisible.call(editor, comp) ? (
                 <action.component