comp tree

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -6,7 +6,7 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import HeadlessEditor from "./EditorCustom";
-
+import viewToPlainText from "@ckeditor/ckeditor5-clipboard/src/utils/viewtoplaintext";
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
@@ -177,6 +177,12 @@ const EditorComp = defineComponent({
         if (comp.value !== value) {
           actions.updateCompData(comp, "value", value);
           nextTick(() => {
+            const textView = editorRefVal?.editing.view.document.getRoot();
+            if (textView) {
+              const text = viewToPlainText(textView);
+              actions.updateCompData(comp, "title", text.substring(0, 10));
+            }
+
             const element = editorRefVal?.ui.view.editable.element || null;
             if (!element) {
               return;

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

@@ -63,7 +63,7 @@ export const CompTree = defineComponent({
     const onDrop = (info: any) => {
       const dragNode = info.dragNode; //被拖拽
       const dropNode = info.node; //拖拽落下
-      console.log(dragNode);
+
       const dragKey = dragNode.key;
       const dropKey = dropNode.key;
 
@@ -219,12 +219,12 @@ const CompNode = defineComponent({
           ? comp.value.url
           : comp.thumbnail || compOpts?.thumbnail;
       return (
-        <div class={nodeStyle}>
+        <div class={[nodeStyle, "flex"]}>
           <Image src={thumbnail} size={240} />
-          <span class="w-1/1 flex-1 whitespace-nowrap mr-30px">
+          <span class="flex-1 w-0 whitespace-nowrap overflow-hidden overflow-ellipsis pr-10px">
             {props.title}
           </span>
-          <span class="space-x-4px whitespace-nowrap">
+          <span class="actions space-x-4px whitespace-nowrap">
             {actions.map((action, i) =>
               action.getVisible.call(editor, comp) ? (
                 <action.component
@@ -251,6 +251,9 @@ const treeStyle = css`
     justify-content: center;
     align-items: center;
   }
+  .ant-tree-indent-unit {
+    width: 12px;
+  }
 `;
 
 const nodeStyle = css`
@@ -265,4 +268,12 @@ const nodeStyle = css`
     margin-right: 6px;
     object-fit: contain;
   }
+  .actions {
+    opacity: 0;
+  }
+  &:hover {
+    .actions {
+      opacity: 1;
+    }
+  }
 `;