From b9290661834799fd9a03e4496d3e487a62464b9f Mon Sep 17 00:00:00 2001
From: "yuekin.wang" <yuelin.wang@xbongbong.com>
Date: Thu, 21 Dec 2023 11:33:54 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=E5=9B=BE=E5=B1=82=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E5=8F=B3=E4=BE=A7=E8=99=9A=E6=8B=9F=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=87=BA=E7=8E=B0=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/panel/rightPanel/layers.vue       | 829 +++++++++---------
 1 file changed, 424 insertions(+), 405 deletions(-)

diff --git a/src/views/Editor/layouts/panel/rightPanel/layers.vue b/src/views/Editor/layouts/panel/rightPanel/layers.vue
index 3cd3517..26674aa 100644
--- a/src/views/Editor/layouts/panel/rightPanel/layers.vue
+++ b/src/views/Editor/layouts/panel/rightPanel/layers.vue
@@ -1,510 +1,529 @@
 <script setup lang="ts">
-import Tree, {DropEvent, DropPosition, TreeInstance, TreeNodeData, TreeNodeKey,} from '@/components/tree'
-import {RenderEvent} from 'leafer-ui'
-import {useEditor} from '@/views/Editor/app'
-import {Fn, isDefined, useMagicKeys, useResizeObserver} from '@vueuse/core'
-import type {SplitInstance} from '@arco-design/web-vue'
-import ContextMenu from '@/components/contextMenu'
-import {layerItems} from '@/views/Editor/utils/contextMenu'
-import {LinkedList} from '@/utils/linkedList'
-import IFolder from '@/assets/images/folder.svg?raw'
-import IBoard from '@/assets/images/board.svg?raw'
-import IText from '@/assets/images/text.svg?raw'
-import IImage from '@/assets/images/image.svg?raw'
-import IPenSvg from '@/assets/images/pen.svg?raw'
-import IHtmlTextSvg from '@/assets/images/htmlText.svg?raw'
-import {typeUtil} from "@/views/Editor/utils/utils";
-import {IUI} from "@leafer-ui/interface";
+import Tree, {
+  DropEvent,
+  DropPosition,
+  TreeInstance,
+  TreeNodeData,
+  TreeNodeKey,
+} from "@/components/tree";
+import { RenderEvent } from "leafer-ui";
+import { useEditor } from "@/views/Editor/app";
+import { Fn, isDefined, useMagicKeys, useResizeObserver } from "@vueuse/core";
+import type { SplitInstance } from "@arco-design/web-vue";
+import ContextMenu from "@/components/contextMenu";
+import { layerItems } from "@/views/Editor/utils/contextMenu";
+import { LinkedList } from "@/utils/linkedList";
+import IFolder from "@/assets/images/folder.svg?raw";
+import IBoard from "@/assets/images/board.svg?raw";
+import IText from "@/assets/images/text.svg?raw";
+import IImage from "@/assets/images/image.svg?raw";
+import IPenSvg from "@/assets/images/pen.svg?raw";
+import IHtmlTextSvg from "@/assets/images/htmlText.svg?raw";
+import { typeUtil } from "@/views/Editor/utils/utils";
+import { IUI } from "@leafer-ui/interface";
 
 interface ITreeNodeData extends TreeNodeData {
-    isCollection: boolean
-    visible: boolean
-    evented: boolean
-    setDirty: Fn
-    children?: ITreeNodeData[]
-    getSvg: Fn,
+  isCollection: boolean;
+  visible: boolean;
+  evented: boolean;
+  setDirty: Fn;
+  children?: ITreeNodeData[];
+  getSvg: Fn;
 }
 
-const {canvas, event, undoRedo} = useEditor()
+const { canvas, event, undoRedo } = useEditor();
 
 // 搜索词
-const searchKey = ref('')
+const searchKey = ref("");
 // 重命名
-const renameNodeKey = ref<string | number | undefined>(undefined)
+const renameNodeKey = ref<string | number | undefined>(undefined);
 // 展开的节点
-const expandedKeys = ref<TreeNodeKey[]>([])
+const expandedKeys = ref<TreeNodeKey[]>([]);
 
-const treeRef = ref<TreeInstance>()
+const treeRef = ref<TreeInstance>();
 
 // svg缓存
-const svgCacheMap = new Map<string, string>()
+const svgCacheMap = new Map<string, string>();
 
 const getSvg = (object) => {
-    if (canvas.objectIsTypes(object,'Text')) {
-        return IText
-    } else if (canvas.objectIsTypes(object,'Group','Frame')) {
-        return IFolder
-    } else if (canvas.objectIsTypes(object,'Rect')) {
-        return IBoard
-    } else if (canvas.objectIsTypes(object,'Image')) {
-        return IImage
-    } else if (canvas.objectIsTypes(object,'Pen')) {
-        return IPenSvg
-    } else if (canvas.objectIsTypes(object,'HTMLText')) {
-        return IHtmlTextSvg
-    }else{
-
-    }
-}
+  if (canvas.objectIsTypes(object, "Text")) {
+    return IText;
+  } else if (canvas.objectIsTypes(object, "Group", "Frame")) {
+    return IFolder;
+  } else if (canvas.objectIsTypes(object, "Rect")) {
+    return IBoard;
+  } else if (canvas.objectIsTypes(object, "Image")) {
+    return IImage;
+  } else if (canvas.objectIsTypes(object, "Pen")) {
+    return IPenSvg;
+  } else if (canvas.objectIsTypes(object, "HTMLText")) {
+    return IHtmlTextSvg;
+  } else {
+  }
+};
 
 /**
  * 获得树节点数据
  */
 const getTreeData = (
-    objects: any,
-    searchKey?: string,
-    parentVisible = true,
+  objects: any,
+  searchKey?: string,
+  parentVisible = true
 ): ITreeNodeData[] => {
-    const objs: ITreeNodeData[] = []
-    if (!objects) return objs
-    for (const object of objects) {
-        const isCollection = typeUtil.isCollection(object)
-        const proxyData = object.proxyData
-        const children = isCollection
-            ? getTreeData(object.children, searchKey, parentVisible && proxyData.visible)
-            : []
-        const nodeData = Object.assign(proxyData,{
-            key: object.innerId,
-            draggable: renameNodeKey.value !== object.id,
-            getSvg: getSvg.bind(this, object),
-            children:children
-        })
-        if (!searchKey || canAddToResult(nodeData, searchKey)) {
-            objs.unshift(nodeData)
-        }
+  const objs: ITreeNodeData[] = [];
+  if (!objects) return objs;
+  for (const object of objects) {
+    const isCollection = typeUtil.isCollection(object);
+    const proxyData = object.proxyData;
+    const children = isCollection
+      ? getTreeData(
+          object.children,
+          searchKey,
+          parentVisible && proxyData.visible
+        )
+      : [];
+    const nodeData = Object.assign(proxyData, {
+      key: object.innerId,
+      draggable: renameNodeKey.value !== object.id,
+      getSvg: getSvg.bind(this, object),
+      children: children,
+    });
+    if (!searchKey || canAddToResult(nodeData, searchKey)) {
+      objs.unshift(nodeData);
     }
-    return objs
-}
+  }
+  return objs;
+};
 
-const treeData: Ref<ITreeNodeData[]> = ref([])
+const treeData: Ref<ITreeNodeData[]> = ref([]);
 
 watchEffect(() => {
-    treeData.value = getTreeData(canvas.ref._children.value, searchKey.value)
-})
+  treeData.value = getTreeData(canvas.ref._children.value, searchKey.value);
+});
 
 /**
  * 节点搜索
  */
-const canAddToResult = (nodeData: ITreeNodeData, searchKey: string): boolean => {
-    // 广度优先搜索
-    const lowerSearchKey = searchKey.toLowerCase()
-    const queue = new LinkedList<ITreeNodeData>()
-    queue.push(nodeData)
-    let isMatched = false
-    while (!queue.isEmpty()) {
-        const currentNode = queue.shift()!
-        const currentTitle = currentNode.name?.toLowerCase()
-        if (currentTitle?.includes(lowerSearchKey)) {
-            isMatched = true
-        }
-        // 压入子元素
-        if (currentNode.children) {
-            for (const child of currentNode.children) {
-                queue.push(child)
-            }
-        }
-        if (isMatched) {
-            return true
-        }
+const canAddToResult = (
+  nodeData: ITreeNodeData,
+  searchKey: string
+): boolean => {
+  // 广度优先搜索
+  const lowerSearchKey = searchKey.toLowerCase();
+  const queue = new LinkedList<ITreeNodeData>();
+  queue.push(nodeData);
+  let isMatched = false;
+  while (!queue.isEmpty()) {
+    const currentNode = queue.shift()!;
+    const currentTitle = currentNode.name?.toLowerCase();
+    if (currentTitle?.includes(lowerSearchKey)) {
+      isMatched = true;
     }
-    return false
-}
+    // 压入子元素
+    if (currentNode.children) {
+      for (const child of currentNode.children) {
+        queue.push(child);
+      }
+    }
+    if (isMatched) {
+      return true;
+    }
+  }
+  return false;
+};
 
 /**
  * 节点是否允许放置
  */
-const allowDrop = ({dropNode}: { dropNode: TreeNodeData }) => {
-    return (dropNode as ITreeNodeData).isCollection
-}
+const allowDrop = ({ dropNode }: { dropNode: TreeNodeData }) => {
+  return (dropNode as ITreeNodeData).isCollection;
+};
 
 /**
  * 移动节点
  */
 const moveNode = (data: {
-    e: DragEvent
-    dragObject: IUI
-    dropObject: IUI
-    dropPosition: DropPosition
-    excludeGroupObject: boolean
+  e: DragEvent;
+  dragObject: IUI;
+  dropObject: IUI;
+  dropPosition: DropPosition;
+  excludeGroupObject: boolean;
 }) => {
-    const {dragObject, dropObject, dropPosition, excludeGroupObject} = data
-
-    // 如果该对象属于的分组也在拖拽列表，则中止操作。
-    // if (excludeGroupObject) {
-    //     const inGroup = dragObject.getAncestors(true).some((group) => {
-    //         return selectedkeys.value.includes((group as Group).id)
-    //     })
-    //     if (inGroup) {
-    //         return
-    //     }
-    // }
-
-    // 退出激活选区
-    // if (util.isActiveSelection(dragObject.group)) {
-    //     dragObject.group.remove(dragObject)
-    // }
-
-    // 获取对象的组
-    const dragGroup = dragObject.parent
-    let dropGroup = dropObject.parent
-    console.log('dragGroup=',dragGroup)
-    console.log('dropGroup=',dropGroup)
-    let dropIndex = dropGroup?.children.indexOf(dropObject)
-
-    // 画板不能进组
-    if ((dragGroup !== dropGroup || dropPosition === 0) && canvas.objectIsTypes(dragObject,'Leafer')) {
-        return false
-    }
-
-    // 对象同组
-    if (dragGroup === dropGroup) {
-        const dragIndex = dragGroup?.children?.indexOf(dragObject)
-        if (dragIndex < dropIndex) {
-            dropIndex--
-        }
-    }
+  const { dragObject, dropObject, dropPosition, excludeGroupObject } = data;
+
+  // 如果该对象属于的分组也在拖拽列表，则中止操作。
+  // if (excludeGroupObject) {
+  //     const inGroup = dragObject.getAncestors(true).some((group) => {
+  //         return selectedkeys.value.includes((group as Group).id)
+  //     })
+  //     if (inGroup) {
+  //         return
+  //     }
+  // }
+
+  // 退出激活选区
+  // if (util.isActiveSelection(dragObject.group)) {
+  //     dragObject.group.remove(dragObject)
+  // }
+
+  // 获取对象的组
+  const dragGroup = dragObject.parent;
+  let dropGroup = dropObject.parent;
+  console.log("dragGroup=", dragGroup);
+  console.log("dropGroup=", dropGroup);
+  let dropIndex = dropGroup?.children.indexOf(dropObject);
+
+  // 画板不能进组
+  if (
+    (dragGroup !== dropGroup || dropPosition === 0) &&
+    canvas.objectIsTypes(dragObject, "Leafer")
+  ) {
+    return false;
+  }
 
-    if (dropPosition === -1) {
-        dropIndex++
+  // 对象同组
+  if (dragGroup === dropGroup) {
+    const dragIndex = dragGroup?.children?.indexOf(dragObject);
+    if (dragIndex < dropIndex) {
+      dropIndex--;
     }
-    dragGroup?.remove(dragObject) as any[]
+  }
 
-    // dropObject是组，dropPosition 为 0 进入组
-    if (typeUtil.isCollection(dropObject) && dropPosition === 0) {
-        dropObject.add(dragObject)
-    } else {
+  if (dropPosition === -1) {
+    dropIndex++;
+  }
+  dragGroup?.remove(dragObject) as any[];
 
-        dropGroup?.addAt(dragObject,dropIndex)
-    }
+  // dropObject是组，dropPosition 为 0 进入组
+  if (typeUtil.isCollection(dropObject) && dropPosition === 0) {
+    dropObject.add(dragObject);
+  } else {
+    dropGroup?.addAt(dragObject, dropIndex);
+  }
 
-    // 回到激活选区
-    // if (canvas.getActiveObject() === canvas.getActiveSelection()) {
-    //     canvas.getActiveSelection().multiSelectAdd(_dragObject)
-    // } else {
-    //     canvas.setActiveObject(_dragObject)
-    // }
-}
+  // 回到激活选区
+  // if (canvas.getActiveObject() === canvas.getActiveSelection()) {
+  //     canvas.getActiveSelection().multiSelectAdd(_dragObject)
+  // } else {
+  //     canvas.setActiveObject(_dragObject)
+  // }
+};
 
 /**
  * tree节点放置事件
  */
 const onDrop = (data: DropEvent) => {
-    const {e, dragNode, dropNode, dropPosition} = data as DropEvent<ITreeNodeData>
-
-    if (!dragNode.key || !dropNode.key) return
-
-    // 多个拖拽
-    if (selectedkeys.value.includes(dragNode.key)) {
-        // 通过key查找对象
-        let dragObjects = canvas.findObjectsByIds([dropNode.key, ...selectedkeys.value])
-        const dropObject = dragObjects.shift()
-        if (!isDefined(dropObject)) return
-        // 由于列表是倒序，这里把列表翻转过来
-        if (dropPosition === -1) {
-            dragObjects = dragObjects.reverse()
-        }
-        for (let i = dragObjects.length - 1; i >= 0; i--) {
-            // 没找到则退出
-            const dragObject = dragObjects[i]
-            if (!isDefined(dragObject)) return
-            moveNode({
-                e,
-                dragObject,
-                dropObject,
-                dropPosition,
-                excludeGroupObject: true,
-            })
-        }
+  const { e, dragNode, dropNode, dropPosition } =
+    data as DropEvent<ITreeNodeData>;
+
+  if (!dragNode.key || !dropNode.key) return;
+
+  // 多个拖拽
+  if (selectedkeys.value.includes(dragNode.key)) {
+    // 通过key查找对象
+    let dragObjects = canvas.findObjectsByIds([
+      dropNode.key,
+      ...selectedkeys.value,
+    ]);
+    const dropObject = dragObjects.shift();
+    if (!isDefined(dropObject)) return;
+    // 由于列表是倒序，这里把列表翻转过来
+    if (dropPosition === -1) {
+      dragObjects = dragObjects.reverse();
     }
-    // 单个拖拽
-    else {
-        // 通过key查找对象
-        const [dropObject, dragObject] = canvas.findObjectsByIds([dropNode.key, dragNode.key])
-        // 没找到则退出
-        if (!isDefined(dropObject) || !isDefined(dragObject)) return
-        moveNode({
-            e,
-            dragObject,
-            dropObject,
-            dropPosition,
-            excludeGroupObject: false,
-        })
+    for (let i = dragObjects.length - 1; i >= 0; i--) {
+      // 没找到则退出
+      const dragObject = dragObjects[i];
+      if (!isDefined(dragObject)) return;
+      moveNode({
+        e,
+        dragObject,
+        dropObject,
+        dropPosition,
+        excludeGroupObject: true,
+      });
     }
-}
+  }
+  // 单个拖拽
+  else {
+    // 通过key查找对象
+    const [dropObject, dragObject] = canvas.findObjectsByIds([
+      dropNode.key,
+      dragNode.key,
+    ]);
+    // 没找到则退出
+    if (!isDefined(dropObject) || !isDefined(dragObject)) return;
+    moveNode({
+      e,
+      dragObject,
+      dropObject,
+      dropPosition,
+      excludeGroupObject: false,
+    });
+  }
+};
 
 /**
  * 点击图层锁定
  */
 const lockClick = (e: Event, node: any) => {
-    e.stopPropagation()
-    node.locked = !node.locked
-}
+  e.stopPropagation();
+  node.locked = !node.locked;
+};
 
 /**
  * 点击图层可视
  */
 const visibleClick = (e: Event, node: any) => {
-    e.stopPropagation()
-    node.visible = !node.visible
-    // node.setDirty()
-}
+  e.stopPropagation();
+  node.visible = !node.visible;
+  // node.setDirty()
+};
 
-const selectedkeys = ref<(string | number)[]>([])
+const selectedkeys = ref<(string | number)[]>([]);
 
 /**
  * tree节点选择
  */
 const onSelect = (_selectedkeys: (string | number)[] = selectedkeys.value) => {
-    const objects = canvas.findObjectsByIds(_selectedkeys)
-    console.log('objects=',objects)
-    if (objects.length) {
-        canvas.setActiveObjects(objects)
-    } else {
-        canvas.discardActiveObject()
-    }
-    // 控制器不会消失，更新一下画板
-    // canvas.requestRenderAll()
-}
+  const objects = canvas.findObjectsByIds(_selectedkeys);
+  console.log("objects=", objects);
+  if (objects.length) {
+    canvas.setActiveObjects(objects);
+  } else {
+    canvas.discardActiveObject();
+  }
+  // 控制器不会消失，更新一下画板
+  // canvas.requestRenderAll()
+};
 
 // 更新tree选中节点
 const updateSelectedkeys = async () => {
-    const activeObject = canvas.activeObject.value
-    const editor = canvas?.app?.editor
+  const activeObject = canvas.activeObject.value;
+  const editor = canvas?.app?.editor;
 
-    if (!editor || !editor.hasTarget) {
-        selectedkeys.value = []
-        return
-    }
+  if (!editor || !editor.hasTarget) {
+    selectedkeys.value = [];
+    return;
+  }
 
-    let needExpandedKeys: Set<string> = new Set()
+  let needExpandedKeys: Set<string> = new Set();
 
-    if (editor.hasTarget) {
-        const tempKeys: any[] = []
-        editor.list.forEach(obj => {
-            tempKeys.push(obj.innerId)
-        })
-        selectedkeys.value = tempKeys
-    } else {
-        selectedkeys.value = [activeObject.innerId]
-    }
+  if (editor.hasTarget) {
+    const tempKeys: any[] = [];
+    editor.list.forEach((obj) => {
+      tempKeys.push(obj.innerId);
+    });
+    selectedkeys.value = tempKeys;
+  } else {
+    selectedkeys.value = [activeObject.innerId];
+  }
 
-    if (needExpandedKeys) {
-        expandedKeys.value.push(...needExpandedKeys)
-        // 等待展开
-        await nextTick()
-    }
+  if (needExpandedKeys) {
+    expandedKeys.value.push(...needExpandedKeys);
+    // 等待展开
+    await nextTick();
+  }
 
-    const containerRect = treeRef.value?.virtualListRef.containerRef.getBoundingClientRect()
-    const nodeRect = document
-        .querySelector(`.arco-tree-node[data-key='${selectedkeys.value[0]}']`)
-        ?.getBoundingClientRect()
-    // TODO 数据太多时经常白屏不展示、无法混动？
-    // 判断是否在可视区域外
-    if (
-        !nodeRect ||
-        containerRect.top - nodeRect.top > nodeRect.height ||
-        nodeRect.top - containerRect.top > treeHeight.value
-    ) {
-        treeRef.value?.scrollIntoView({
-            key: selectedkeys.value[0],
-            align: 'auto',
-        })
-    }
-}
-canvas.app.on(RenderEvent.AFTER,arg => {
-    updateSelectedkeys()
-})
+  const containerRect =
+    treeRef.value?.virtualListRef.containerRef.getBoundingClientRect();
+  const nodeRect = document
+    .querySelector(`.arco-tree-node[data-key='${selectedkeys.value[0]}']`)
+    ?.getBoundingClientRect();
+  // TODO 数据太多时经常白屏不展示、无法混动？
+  // 判断是否在可视区域外
+  if (
+    !nodeRect ||
+    containerRect.top - nodeRect.top > nodeRect.height ||
+    nodeRect.top - containerRect.top > treeHeight.value
+  ) {
+    treeRef.value?.scrollIntoView({
+      key: selectedkeys.value[0],
+      align: "auto",
+    });
+  }
+};
+canvas.app.on(RenderEvent.AFTER, (arg) => {
+  updateSelectedkeys();
+});
 
-const splitRef = ref<SplitInstance>()
-const treeHeight = ref(0)
+const splitRef = ref<SplitInstance>();
+const treeHeight = ref(0);
 
 onMounted(() => {
-    // 默认展开第一层节点
-    treeData.value.forEach((data) => {
-        if (data.children && data.key) {
-            expandedKeys.value.push(data.key)
-        }
-    })
-
-    // 更新tree组件的高度
-    useResizeObserver(splitRef.value as HTMLDivElement, (entries) => {
-        const [entry] = entries
-        const {height} = entry.contentRect
-        treeHeight.value = height - 43
-    })
-})
+  // 默认展开第一层节点
+  treeData.value.forEach((data) => {
+    if (data.children && data.key) {
+      expandedKeys.value.push(data.key);
+    }
+  });
+
+  // 更新tree组件的高度
+  useResizeObserver(splitRef.value as HTMLDivElement, (entries) => {
+    const [entry] = entries;
+    const { height } = entry.contentRect;
+    treeHeight.value = height - 43;
+  });
+});
 
 // 多选
 // todo: shift键选择范围
-const multiple = ref(false)
-const {meta, ctrl,shift} = useMagicKeys()
+const multiple = ref(false);
+const { meta, ctrl, shift } = useMagicKeys();
 watchEffect(() => {
-    if (meta.value || ctrl.value || shift.value) {
-        multiple.value = true
-    } else {
-        multiple.value = false
-    }
-})
+  if (meta.value || ctrl.value || shift.value) {
+    multiple.value = true;
+  } else {
+    multiple.value = false;
+  }
+});
 
 const showContextMenu = (e: MouseEvent, node: TreeNodeData) => {
-    e.preventDefault()
-    e.stopImmediatePropagation()
+  e.preventDefault();
+  e.stopImmediatePropagation();
 
-    if (!node.key) return
+  if (!node.key) return;
 
-    if (!selectedkeys.value.includes(node.key)) {
-        selectedkeys.value = [node.key]
-        onSelect()
-    }
+  if (!selectedkeys.value.includes(node.key)) {
+    selectedkeys.value = [node.key];
+    onSelect();
+  }
 
-    ContextMenu.showContextMenu({
-        x: e.clientX,
-        y: e.clientY,
-        preserveIconWidth: false,
-        items: layerItems(),
-    })
-}
+  ContextMenu.showContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    preserveIconWidth: false,
+    items: layerItems(),
+  });
+};
 
-event.on('layerRename', (e) => {
-    renameNodeKey.value = e.id
-})
+event.on("layerRename", (e) => {
+  renameNodeKey.value = e.id;
+});
 
 const onNodeDbclick = (e: MouseEvent, _node: TreeNodeData) => {
-    e.preventDefault()
-    if (!_node.key) return
-    renameNodeKey.value = _node.key
-}
+  e.preventDefault();
+  if (!_node.key) return;
+  renameNodeKey.value = _node.key;
+};
 
 const onInputMounted = (vnode: VNode) => {
-    const el = vnode.el as HTMLDivElement | null
-    if (!el) return
-    const input = el.querySelector('input')
-    if (!input) return
-    input.focus()
-    // input.select()
-}
+  const el = vnode.el as HTMLDivElement | null;
+  if (!el) return;
+  const input = el.querySelector("input");
+  if (!input) return;
+  input.focus();
+  // input.select()
+};
 
 const onInputChange = (value: string, e: Event) => {
-    const key = renameNodeKey.value
-    const target = e.target as HTMLElement | null
-    target?.blur()
-    if (!key || !value) return
-    const object = canvas.findObjectById(key)
-    if (!object) return
-    object.proxyData.name = value
-    // treeRef.value?.updateTreeView()
-    // undoRedo.saveState()
-}
+  const key = renameNodeKey.value;
+  const target = e.target as HTMLElement | null;
+  target?.blur();
+  if (!key || !value) return;
+  const object = canvas.findObjectById(key);
+  if (!object) return;
+  object.proxyData.name = value;
+  // treeRef.value?.updateTreeView()
+  // undoRedo.saveState()
+};
 </script>
 
 <template>
-    <div
-        ref="splitRef"
-        class="h-[calc(100vh-90px)]">
-        <div style="padding:0 10px">
-            <a-input-search
-                placeholder="Search..."
-                style="margin-bottom: 8px;"
-                v-model="searchKey"
-            />
+  <div ref="splitRef" class="h-[calc(100vh-90px)]">
+    <div style="padding: 0 10px">
+      <a-input-search
+        placeholder="Search..."
+        style="margin-bottom: 8px"
+        v-model="searchKey"
+      />
+    </div>
+    <Tree
+      ref="treeRef"
+      size="small"
+      blockNode
+      draggable
+      :selected-keys="selectedkeys"
+      v-model:expanded-keys="expandedKeys"
+      :animation="false"
+      :multiple="multiple"
+      :data="treeData"
+      :allowDrop="allowDrop"
+      :virtualListProps="{
+        height: treeHeight,
+        fixedSize: true,
+        buffer: 30,
+      }"
+      @drop="onDrop"
+      @select="onSelect"
+      @node-contextmenu="showContextMenu"
+      @node-dbclick="onNodeDbclick"
+    >
+      <template #title="nodeData">
+        <div class="flex items-center">
+          <div v-html="nodeData.getSvg()" class="mr2 mt3px"></div>
+          <a-input
+            v-if="isDefined(nodeData.key) && renameNodeKey === nodeData.key"
+            class="bg-transparent! border-none! px0!"
+            size="mini"
+            v-model="nodeData.name"
+            :default-value="nodeData.name"
+            @blur="renameNodeKey = undefined"
+            @vue:mounted="onInputMounted"
+            @press-enter="renameNodeKey = undefined"
+          />
+          <span
+            v-else
+            class="text-truncate"
+            :class="{
+              'op-50': !nodeData.visible,
+            }"
+          >
+            {{ nodeData.name }}
+          </span>
         </div>
-        <Tree
-            ref="treeRef"
-            size="small"
-            blockNode
-            draggable
-            :selected-keys="selectedkeys"
-            v-model:expanded-keys="expandedKeys"
-            :animation="false"
-            :multiple="multiple"
-            :data="treeData"
-            :allowDrop="allowDrop"
-            :virtualListProps="{
-          height: treeHeight,
-          fixedSize: true,
-        }"
-            @drop="onDrop"
-            @select="onSelect"
-            @node-contextmenu="showContextMenu"
-            @node-dbclick="onNodeDbclick"
+      </template>
+      <template #extra="nodeData">
+        <div
+          v-if="renameNodeKey !== nodeData.key"
+          class="extra pr4px"
+          :class="{
+            show: !nodeData.visible || nodeData.locked,
+          }"
         >
-            <template #title="nodeData">
-                <div class="flex items-center">
-                    <div v-html="nodeData.getSvg()" class="mr2 mt3px"></div>
-                    <a-input
-                        v-if="isDefined(nodeData.key) && renameNodeKey === nodeData.key"
-                        class="bg-transparent! border-none! px0!"
-                        size="mini"
-                        v-model="nodeData.name"
-                        :default-value="nodeData.name"
-                        @blur="renameNodeKey = undefined"
-                        @vue:mounted="onInputMounted"
-                        @press-enter="renameNodeKey = undefined"
-                    />
-                    <span
-                        v-else
-                        class="text-truncate"
-                        :class="{
-                'op-50': !nodeData.visible,
-              }"
-                    >
-              {{ nodeData.name }}
-            </span>
-                </div>
-            </template>
-            <template #extra="nodeData">
-                <div
-                    v-if="renameNodeKey !== nodeData.key"
-                    class="extra pr4px"
-                    :class="{
-              show:  !nodeData.visible || nodeData.locked
+          <a-button
+            :class="{
+              show: !nodeData.locked,
             }"
-                >
-                    <a-button
-                        :class="{
-                show: !nodeData.locked,
-              }"
-                        size="mini"
-                        class="icon-btn"
-                        @click="lockClick($event, nodeData)"
-                    >
-                        <template #icon>
-                            <icon-unlock v-if="!nodeData.locked"/>
-                            <icon-lock v-else/>
-                        </template>
-                    </a-button>
-                    <a-button
-                        :class="{
-                show: nodeData.visible,
-              }"
-                        size="mini"
-                        class="icon-btn"
-                        @click="visibleClick($event, nodeData)"
-                    >
-                        <template #icon>
-                            <icon-eye v-if="nodeData.visible"/>
-                            <icon-eye-invisible v-else/>
-                        </template>
-                    </a-button>
-                </div>
+            size="mini"
+            class="icon-btn"
+            @click="lockClick($event, nodeData)"
+          >
+            <template #icon>
+              <icon-unlock v-if="!nodeData.locked" />
+              <icon-lock v-else />
             </template>
-            <template #empty>
-                <a-empty>
-                    暂无图层
-                </a-empty>
+          </a-button>
+          <a-button
+            :class="{
+              show: nodeData.visible,
+            }"
+            size="mini"
+            class="icon-btn"
+            @click="visibleClick($event, nodeData)"
+          >
+            <template #icon>
+              <icon-eye v-if="nodeData.visible" />
+              <icon-eye-invisible v-else />
             </template>
-        </Tree>
-    </div>
+          </a-button>
+        </div>
+      </template>
+      <template #empty>
+        <a-empty> 暂无图层 </a-empty>
+      </template>
+    </Tree>
+  </div>
 </template>
 
 <style scoped lang="less">

From aa12a1c9eef9a322d75dacc4e4baba42438c5204 Mon Sep 17 00:00:00 2001
From: "yuekin.wang" <yuelin.wang@xbongbong.com>
Date: Thu, 21 Dec 2023 14:38:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20icon=E7=BC=BA=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/layouts/panel/rightPanel/layers.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/Editor/layouts/panel/rightPanel/layers.vue b/src/views/Editor/layouts/panel/rightPanel/layers.vue
index 26674aa..f95ed8a 100644
--- a/src/views/Editor/layouts/panel/rightPanel/layers.vue
+++ b/src/views/Editor/layouts/panel/rightPanel/layers.vue
@@ -45,7 +45,7 @@ const treeRef = ref<TreeInstance>();
 // svg缓存
 const svgCacheMap = new Map<string, string>();
 
-const getSvg = (object) => {
+const getSvg = (object: any) => {
   if (canvas.objectIsTypes(object, "Text")) {
     return IText;
   } else if (canvas.objectIsTypes(object, "Group", "Frame")) {
@@ -59,6 +59,7 @@ const getSvg = (object) => {
   } else if (canvas.objectIsTypes(object, "HTMLText")) {
     return IHtmlTextSvg;
   } else {
+    return IPenSvg;
   }
 };
 

From c88e0bf638bcfcb61701d4c74fd9b457e417c674 Mon Sep 17 00:00:00 2001
From: "yuekin.wang" <yuelin.wang@xbongbong.com>
Date: Thu, 21 Dec 2023 14:43:59 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E9=9A=90=E8=97=8F=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/testPlugin/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/testPlugin/index.ts b/src/views/testPlugin/index.ts
index 5a9759e..e92d960 100644
--- a/src/views/testPlugin/index.ts
+++ b/src/views/testPlugin/index.ts
@@ -19,7 +19,7 @@ const myPlugin = createEditorPlugin((editor) => {
       console.log('myPlugin dispose')
     },
     slots: {
-      rightPanel: [TestSlot],
+      // rightPanel: [TestSlot],
     },
   }
 })

From 01874ffd74ee73a266ded106cd36b4b0fe4f689f Mon Sep 17 00:00:00 2001
From: "yuekin.wang" <yuelin.wang@xbongbong.com>
Date: Thu, 21 Dec 2023 16:38:11 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E8=89=B2=E6=9D=BF=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/colorPicker/Area/Hue/index.vue | 116 ++--
 .../colorPicker/Area/Picker/index.vue         | 155 ++---
 src/components/colorPicker/Area/index.vue     |   4 +-
 src/components/colorPicker/Gradient/index.vue | 625 +++++++++---------
 src/utils/color/color.ts                      |   1 +
 .../panel/rightPanel/attrs/canvasAttr.vue     | 231 +++----
 6 files changed, 579 insertions(+), 553 deletions(-)

diff --git a/src/components/colorPicker/Area/Hue/index.vue b/src/components/colorPicker/Area/Hue/index.vue
index 3a1925e..32f0e66 100644
--- a/src/components/colorPicker/Area/Hue/index.vue
+++ b/src/components/colorPicker/Area/Hue/index.vue
@@ -1,75 +1,81 @@
 <template>
-    <div class="hue">
-        <div ref="hueRef" class="hue-area">
-            <div class="picker-cursor" :style="pointerStyle"></div>
-        </div>
+  <div class="hue">
+    <div ref="hueRef" class="hue-area" @click="hueAreaClick">
+      <div class="picker-cursor" :style="pointerStyle"></div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, computed} from 'vue'
-import {isDefined, usePointerSwipe} from '@vueuse/core'
-import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
 const props = defineProps<{
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-}>()
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-const hueRef = ref<HTMLDivElement>()
+const hueRef = ref<HTMLDivElement>();
 
 const state = reactive({
-    width: 0,
-})
+  width: 0,
+});
 
 const pointerStyle = computed(() => {
-    const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
-    const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8
-    return {
-        left: `${offsetLeft}px`,
-        // background: `rgb(${r}, ${g}, ${b})`,
-        background: color.rgb,
-    }
-})
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
+  const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8;
+  return {
+    left: `${offsetLeft}px`,
+    // background: `rgb(${r}, ${g}, ${b})`,
+    background: color.rgb,
+  };
+});
 
 onMounted(() => {
-    if (isDefined(hueRef)) {
-        state.width = hueRef.value.clientWidth
-    }
-})
+  if (isDefined(hueRef)) {
+    state.width = hueRef.value.clientWidth;
+    rect = hueRef.value?.getBoundingClientRect()
+    props.updateColor(getColor(), "onChange");
+  }
+});
 
-let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
 const getColor = () => {
-    if (!isDefined(rect)) return
-    const value = posEnd.x - rect.x
-    const color = new Color(`hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`)
-    // const hsva = new HSVA((360 * value) / state.width, props.saturation, props.value, 1)
-    // const {r, g, b} = new Color(hsva).rgba
-    return {
-        r:color.getRgba().r,
-        g:color.getRgba().g,
-        b:color.getRgba().b,
-        hue: color.hue,
-    }
+  if (!isDefined(rect)) return;
+  const value = Math.max(0, posEnd.x - rect.x)
+  const color = new Color(
+    `hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`
+  );
+  return {
+    r: color.getRgba().r,
+    g: color.getRgba().g,
+    b: color.getRgba().b,
+    hue: color.hue,
+  };
 }
 
-const {posEnd} = usePointerSwipe(hueRef, {
-    threshold: 0,
-    onSwipeStart() {
-        rect = hueRef.value?.getBoundingClientRect()
-        props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onEndChange')
-    },
-})
+const hueAreaClick = () => {
+  props.updateColor(getColor(), "onChange")
+}
+
+const { posEnd } = usePointerSwipe(hueRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = hueRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/Picker/index.vue b/src/components/colorPicker/Area/Picker/index.vue
index f7f7a53..042ca53 100644
--- a/src/components/colorPicker/Area/Picker/index.vue
+++ b/src/components/colorPicker/Area/Picker/index.vue
@@ -1,93 +1,100 @@
 <template>
   <div ref="pickerAreaRef" class="spectrum-map" :style="pickerStyle">
-    <div class="spectrum"></div>
+    <div class="spectrum" @click="spectrumClick"></div>
     <div class="picker-cursor" :style="pointerStyle"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, computed } from 'vue'
-  import { clamp, isDefined, usePointerSwipe } from '@vueuse/core'
-  import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { clamp, isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
-  const props = defineProps<{
-    red: number
-    green: number
-    blue: number
-    alpha: number
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-  }>()
+const props = defineProps<{
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-  const pickerAreaRef = ref<HTMLDivElement>()
+const pickerAreaRef = ref<HTMLDivElement>();
 
-  const state = reactive({
-    width: 0,
-    height: 0,
-  })
+const state = reactive({
+  width: 0,
+  height: 0,
+});
 
-  const offsetLeft = computed(() => {
-    return Math.round(props.saturation * state.width - 8)
-  })
+const offsetLeft = computed(() => {
+  return Math.round(props.saturation * state.width - 8);
+});
 
-  const offsetTop = computed(() =>
-    Math.max(Math.round(state.height - props.value * state.height - 14), -6),
-  )
+const offsetTop = computed(() =>
+  Math.max(Math.round(state.height - props.value * state.height - 14), -6)
+);
 
-  const pointerStyle = computed(() => {
-    return {
-      backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
-      left: `${offsetLeft.value}px`,
-      top: `${offsetTop.value}px`,
-    }
-  })
+const pointerStyle = computed(() => {
+  return {
+    backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
+    left: `${offsetLeft.value}px`,
+    top: `${offsetTop.value}px`,
+  };
+});
 
-  const pickerStyle = computed(() => {
-      const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const color = new Color(new HSVA(props.hue, 1, 1, 1))
-    // const { r, g, b } = color.rgba
-    return {
-      backgroundColor: color.rgb,
-    }
-  })
+const pickerStyle = computed(() => {
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const color = new Color(new HSVA(props.hue, 1, 1, 1))
+  // const { r, g, b } = color.rgba
+  return {
+    backgroundColor: color.rgb,
+  };
+});
 
-  onMounted(() => {
-    if (isDefined(pickerAreaRef)) {
-      state.width = pickerAreaRef.value.clientWidth
-      state.height = pickerAreaRef.value.clientHeight
-    }
-  })
+onMounted(() => {
+  if (isDefined(pickerAreaRef)) {
+    state.width = pickerAreaRef.value.clientWidth;
+    state.height = pickerAreaRef.value.clientHeight;
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onChange")
+  }
+});
 
-  let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
-  const getColor = () => {
-    if (!isDefined(rect)) return
-    let x = clamp(posEnd.x - rect.x, 0, state.width)
-    let y = clamp(posEnd.y - rect.y, 0, state.height)
-    const saturation = x / state.width
-    const value = 1 - y / state.height
-      const color = new Color(`hsva(${props.hue},${saturation},${value},${props.alpha})`)
-    // const color = new Color(new HSVA(props.hue, saturation, value, props.alpha))
-    return {
-      ...color.getRgba(),
-      saturation,
-      value,
-    }
-  }
+const getColor = () => {
+  if (!isDefined(rect)) return;
+  let x = clamp(posEnd.x - rect.x, 0, state.width);
+  let y = clamp(posEnd.y - rect.y, 0, state.height);
+  const saturation = x / state.width;
+  const value = 1 - y / state.height;
+  const color = new Color(
+    `hsva(${props.hue},${saturation},${value},${props.alpha})`
+  );
+  return {
+    ...color.getRgba(),
+    saturation,
+    value,
+  };
+};
+
+const spectrumClick = (obj: any) => {
+  props.updateColor(getColor(), "onChange")
+}
 
-  const { posEnd } = usePointerSwipe(pickerAreaRef, {
-    threshold: 0,
-    onSwipeStart() {
-      rect = pickerAreaRef.value?.getBoundingClientRect()
-      props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-      props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-      props.updateColor(getColor(), 'onEndChange')
-    },
-  })
+const { posEnd } = usePointerSwipe(pickerAreaRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/index.vue b/src/components/colorPicker/Area/index.vue
index dc98329..2fcba01 100644
--- a/src/components/colorPicker/Area/index.vue
+++ b/src/components/colorPicker/Area/index.vue
@@ -24,7 +24,7 @@
       :update-color="updateColor"
     />
 
-    <div class="preview">
+    <!-- <div class="preview">
       <Preview
         :red="red"
         :green="green"
@@ -39,7 +39,7 @@
         <Hue :hue="hue" :saturation="saturation" :value="value" :update-color="updateColor" />
         <Alpha :alpha="alpha" :red="red" :green="green" :blue="blue" :update-color="updateColor" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
diff --git a/src/components/colorPicker/Gradient/index.vue b/src/components/colorPicker/Gradient/index.vue
index bde9f7d..9a8b95e 100644
--- a/src/components/colorPicker/Gradient/index.vue
+++ b/src/components/colorPicker/Gradient/index.vue
@@ -1,362 +1,373 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author: June
- * @Date: 2023-03-19 20:10:11
- * @LastEditors: June
- * @LastEditTime: 2023-05-12 22:58:54
--->
 <template>
-    <GradientControls
-            v-if="!solidColor"
-            :type="state.gradientType"
-            :change-gradient-control="changeGradientControl"
-    />
-
-    <template v-if="state.gradientType === 'pattern'">
-        <div class="pattern-box">
-            <div class="upload-box">
-                <m-a-upload :prefix="baseUrl"
-                            list-type="picture-card"
-                            :action="baseUrl+'/upload'"
-                            v-model="image"
-                            :limit="1"
-                            imagePreview
-                            :onSuccess="patternUploadSuccess"
-                            accept=".png,.jpg,.jpeg"/>
-
-<!--                <a-upload-->
-<!--                    list-type="picture-card"-->
-<!--                    image-preview-->
-<!--                    :limit="1"-->
-<!--                    :onSuccess="patternUploadSuccess"-->
-<!--                    :onError="patternUploadError"-->
-<!--                    :on-before-upload="patternUpload"-->
-<!--                />-->
-            </div>
-            <a-row>
-                <a-col>
-                    <a-select v-model="fit" :options="options">
-                        <template #prefix>
-                            填充模式
-                        </template>
-                    </a-select>
-                </a-col>
-            </a-row>
-            <a-row>
-                <a-col>
-                    <SwipeNumber size="small" v-model="newOpacity" :min="0" :max="100" :step="1" style="padding: 0 12px" label-width="68px">
-                        <template #label>
-                            <div style="text-align: right;padding-right: 12px"><icon-mosaic style="margin-right: 2px"/>透明度</div>
-                        </template>
-                        <template #suffix>
-                            <div>%</div>
-                        </template>
-                    </SwipeNumber>
-                </a-col>
-            </a-row>
-
-        </div>
-    </template>
-    <template v-else>
-        <Area
-                :red="state.colorRed"
-                :green="state.colorGreen"
-                :blue="state.colorBlue"
-                :alpha="state.colorAlpha"
-                :hue="state.colorHue"
-                :saturation="state.colorSaturation"
-                :value="state.colorValue"
-                :update-color="updateColor"
-                :is-gradient="true"
-                :type="state.gradientType"
-                :points="state.gradientPoints"
-                :active-point-index="state.activePointIndex"
-                :change-gradient-control="changeGradientControl"
-                :change-active-point-index="changeActivePointIndex"
-                :update-gradient-left="updateGradientLeft"
-                :add-point="addPoint"
-                :remove-point="removePoint"
-        />
-        <Preview
-                :red="state.colorRed"
-                :green="state.colorGreen"
-                :blue="state.colorBlue"
-                :alpha="state.colorAlpha"
-                :update-color="updateColor"
-                :mode="mode"
+  <GradientControls
+    v-if="!solidColor"
+    :type="state.gradientType"
+    :change-gradient-control="changeGradientControl"
+  />
+
+  <template v-if="state.gradientType === 'pattern'">
+    <div class="pattern-box">
+      <div class="upload-box">
+        <m-a-upload
+          :prefix="baseUrl"
+          list-type="picture-card"
+          :action="baseUrl + '/upload'"
+          v-model="image"
+          :limit="1"
+          imagePreview
+          :onSuccess="patternUploadSuccess"
+          accept=".png,.jpg,.jpeg"
         />
-    </template>
+      </div>
+      <a-row>
+        <a-col>
+          <a-select v-model="fit" :options="options">
+            <template #prefix> 填充模式 </template>
+          </a-select>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <SwipeNumber
+            size="small"
+            v-model="newOpacity"
+            :min="0"
+            :max="100"
+            :step="1"
+            style="padding: 0 12px"
+            label-width="68px"
+          >
+            <template #label>
+              <div style="text-align: right; padding-right: 12px">
+                <icon-mosaic style="margin-right: 2px" />透明度
+              </div>
+            </template>
+            <template #suffix>
+              <div>%</div>
+            </template>
+          </SwipeNumber>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+  <template v-else>
+    <Area
+      :red="state.colorRed"
+      :green="state.colorGreen"
+      :blue="state.colorBlue"
+      :alpha="state.colorAlpha"
+      :hue="state.colorHue"
+      :saturation="state.colorSaturation"
+      :value="state.colorValue"
+      :update-color="updateColor"
+      :is-gradient="true"
+      :type="state.gradientType"
+      :points="state.gradientPoints"
+      :active-point-index="state.activePointIndex"
+      :change-gradient-control="changeGradientControl"
+      :change-active-point-index="changeActivePointIndex"
+      :update-gradient-left="updateGradientLeft"
+      :add-point="addPoint"
+      :remove-point="removePoint"
+    />
+    <Preview
+      :red="state.colorRed"
+      :green="state.colorGreen"
+      :blue="state.colorBlue"
+      :alpha="state.colorAlpha"
+      :update-color="updateColor"
+      :mode="mode"
+    />
+  </template>
 </template>
 
 <script lang="ts" setup>
-import {reactive, onMounted, onBeforeUnmount} from 'vue'
-import GradientControls from './GradientControls/index.vue'
-import Preview from '../Preview/index.vue'
-import Area from '../Area/index.vue'
-import {clamp} from '@vueuse/core'
-import {ColorType, Props} from '@/components/colorPicker/interface'
-import {RGBA} from '@/utils/color'
-import {Color} from '@/utils/color/color'
-import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
-import {useEditor} from '@/views/Editor/app'
-import {typeUtil} from "@/views/Editor/utils/utils";
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import GradientControls from "./GradientControls/index.vue";
+import Preview from "../Preview/index.vue";
+import Area from "../Area/index.vue";
+import { clamp } from "@vueuse/core";
+import { ColorType, Props } from "@/components/colorPicker/interface";
+import { RGBA } from "@/utils/color";
+import { Color } from "@/utils/color/color";
+import { useActiveObjectModel } from "@/views/Editor/hooks/useActiveObjectModel";
+import { useEditor } from "@/views/Editor/app";
+import { typeUtil } from "@/views/Editor/utils/utils";
 import MAUpload from "@/components/upload/m-a-upload.vue";
-import {replaceElementToNewArr} from "@/utils/utils";
+import { replaceElementToNewArr } from "@/utils/utils";
 import SwipeNumber from "@/components/swipeNumber/swipeNumber.vue";
 import NP from "number-precision";
 const baseUrl = import.meta.env.VITE_UPLOAD_BASE_URL;
-const {canvas, undoRedo} = useEditor()
+const { canvas, undoRedo } = useEditor();
 const options = reactive([
-    {value: 'cover', label: '覆盖'},
-    {value: 'fit', label: '适应'},
-    {value: 'strench', label: '拉伸'},
-    {value: 'clip', label: '裁剪'},
-    {value: 'repeat', label: '平铺'},
-])
-const props = defineProps<Required<Props>>()
+  { value: "cover", label: "覆盖" },
+  { value: "fit", label: "适应" },
+  { value: "strench", label: "拉伸" },
+  { value: "clip", label: "裁剪" },
+  { value: "repeat", label: "平铺" },
+]);
+const props = defineProps<Required<Props>>();
 
 const state = reactive({
-    attr: props.attr,
-    index: props.index,
-    activePointIndex: 0,
-    gradientPoints: props.gradient.points,
-    activePoint: props.gradient.points[0],
-    colorRed: props.gradient.points[0].red,
-    colorGreen: props.gradient.points[0].green,
-    colorBlue: props.gradient.points[0].blue,
-    colorAlpha: props.gradient.points[0].alpha,
-    colorHue: 0,
-    colorSaturation: 1,
-    colorValue: 1,
-    gradientType: props.gradient.type,
-})
-
-const object = useActiveObjectModel(state.attr)
+  attr: props.attr,
+  index: props.index,
+  activePointIndex: 0,
+  gradientPoints: props.gradient.points,
+  activePoint: props.gradient.points[0],
+  colorRed: props.gradient.points[0].red,
+  colorGreen: props.gradient.points[0].green,
+  colorBlue: props.gradient.points[0].blue,
+  colorAlpha: props.gradient.points[0].alpha,
+  colorHue: 0,
+  colorSaturation: 1,
+  colorValue: 1,
+  gradientType: props.gradient.type,
+});
+
+const object = useActiveObjectModel(state.attr);
 const fit = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            return object.value.modelValue[state.index].mode
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            const elementVal : any= object.value.modelValue[state.index]
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                mode: value,
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      return object.value.modelValue[state.index].mode;
+    }
+  },
+  set(value) {
+    if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      const elementVal: any = object.value.modelValue[state.index];
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          mode: value,
         }
-    },
-})
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 const newOpacity = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            let opacity = 100
-            if (object.value.modelValue[state.index].opacity !== undefined){
-                opacity = NP.round((object.value.modelValue[state.index].opacity * 100),2)
-            }
-            return opacity
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value !== undefined) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            const elementVal : any= object.value.modelValue[state.index]
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                opacity: NP.round((value / 100),2),
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      let opacity = 100;
+      if (object.value.modelValue[state.index].opacity !== undefined) {
+        opacity = NP.round(
+          object.value.modelValue[state.index].opacity * 100,
+          2
+        );
+      }
+      return opacity;
+    }
+  },
+  set(value) {
+    if (
+      typeUtil.isPattern(object.value.modelValue[state.index]) &&
+      value !== undefined
+    ) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      const elementVal: any = object.value.modelValue[state.index];
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          opacity: NP.round(value / 100, 2),
         }
-    },
-})
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 const image = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            return object.value.modelValue[state.index].url
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            let elementVal : any= object.value.modelValue[state.index]
-            if (!elementVal.mode){
-                elementVal.mode = 'cover'
-            }
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                url: value,
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      return object.value.modelValue[state.index].url;
+    }
+  },
+  set(value) {
+    if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      let elementVal: any = object.value.modelValue[state.index];
+      if (!elementVal.mode) {
+        elementVal.mode = "cover";
+      }
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          url: value,
         }
-    },
-})
-
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 
 const getChangeData = () => ({
-    points:
-        state.gradientType === 'color'
-            ? [state.gradientPoints[state.activePointIndex]]
-            : state.gradientPoints,
-    type: state.gradientType,
-    // style: generateGradientStyle(state.gradientPoints, state.gradientType),
-})
+  points:
+    state.gradientType === "color"
+      ? [state.gradientPoints[state.activePointIndex]]
+      : state.gradientPoints,
+  type: state.gradientType,
+  // style: generateGradientStyle(state.gradientPoints, state.gradientType),
+});
 
 const onChange = () => {
-    props.onChange && props.onChange(getChangeData())
-}
+  props.onChange && props.onChange(getChangeData());
+};
 
 const removePoint = (index = state.activePointIndex) => {
-    if (state.gradientPoints.length <= 2) {
-        return
-    }
+  if (state.gradientPoints.length <= 2) {
+    return;
+  }
 
-    state.gradientPoints.splice(index, 1)
+  state.gradientPoints.splice(index, 1);
 
-    if (index > 0) {
-        state.activePointIndex = index - 1
-    }
+  if (index > 0) {
+    state.activePointIndex = index - 1;
+  }
 
-    onChange()
-}
+  onChange();
+};
 
 const keyUpHandler = (event: KeyboardEvent) => {
-    if (event.keyCode === 46 || event.keyCode === 8) {
-        removePoint(state.activePointIndex)
-    }
-}
+  if (event.keyCode === 46 || event.keyCode === 8) {
+    removePoint(state.activePointIndex);
+  }
+};
 
 const changeActivePointIndex = (index: number) => {
-    state.activePointIndex = index
-    state.activePoint = state.gradientPoints[index]
-    const {red, green, blue, alpha} = state.activePoint
-    state.colorRed = red
-    state.colorGreen = green
-    state.colorBlue = blue
-    state.colorAlpha = alpha
-
-    const color = new Color(`rgba(${red},${green},${blue},alpha)`)
-    const {h, s, v} = color.getHsva()
-
-    state.colorHue = h
-    state.colorSaturation = s
-    state.colorValue = v
-}
+  state.activePointIndex = index;
+  state.activePoint = state.gradientPoints[index];
+  const { red, green, blue, alpha } = state.activePoint;
+  state.colorRed = red;
+  state.colorGreen = green;
+  state.colorBlue = blue;
+  state.colorAlpha = alpha;
+
+  const color = new Color(`rgba(${red},${green},${blue},alpha)`);
+  const { h, s, v } = color.getHsva();
+
+  state.colorHue = h;
+  state.colorSaturation = s;
+  state.colorValue = v;
+};
 
 const changeGradientControl = (type: ColorType) => {
-    type = type ?? state.gradientType
+  type = type ?? state.gradientType;
 
-    state.gradientType = type
+  state.gradientType = type;
 
-    onChange()
-}
+  onChange();
+};
 
 const updateColor = (
-    {
-        r,
-        g,
-        b,
-        a,
-        hue,
-        saturation,
-        value,
-    }: {
-        r?: number
-        g?: number
-        b?: number
-        a?: number
-        hue?: number
-        saturation?: number
-        value?: number
-    },
-    actionName: 'onStartChange' | 'onChange' | 'onEndChange' = 'onChange',
+  {
+    r,
+    g,
+    b,
+    a,
+    hue,
+    saturation,
+    value,
+  }: {
+    r?: number;
+    g?: number;
+    b?: number;
+    a?: number;
+    hue?: number;
+    saturation?: number;
+    value?: number;
+  },
+  actionName: "onStartChange" | "onChange" | "onEndChange" = "onChange"
 ) => {
-    r = r ?? state.colorRed
-    g = g ?? state.colorGreen
-    b = b ?? state.colorBlue
-    a = a ?? state.colorAlpha
-    hue = hue ?? state.colorHue
-    saturation = saturation ?? state.colorSaturation
-    value = value ?? state.colorValue
-
-    const localGradientPoints = state.gradientPoints.slice()
-
-    localGradientPoints[state.activePointIndex] = {
-        ...localGradientPoints[state.activePointIndex],
-        red: r,
-        green: g,
-        blue: b,
-        alpha: a,
-    }
-
-    state.colorRed = r
-    state.colorGreen = g
-    state.colorBlue = b
-    state.colorAlpha = a
-    state.colorHue = hue
-    state.colorSaturation = saturation
-    state.colorValue = value
-    state.gradientPoints = localGradientPoints
-
-    const action = props[actionName]
-
-    action && action(getChangeData())
-}
+  r = r ?? state.colorRed;
+  g = g ?? state.colorGreen;
+  b = b ?? state.colorBlue;
+  a = a ?? state.colorAlpha;
+  hue = hue ?? state.colorHue;
+  saturation = saturation ?? state.colorSaturation;
+  value = value ?? state.colorValue;
+
+  const localGradientPoints = state.gradientPoints.slice();
+
+  localGradientPoints[state.activePointIndex] = {
+    ...localGradientPoints[state.activePointIndex],
+    red: r,
+    green: g,
+    blue: b,
+    alpha: a,
+  };
+
+  state.colorRed = r;
+  state.colorGreen = g;
+  state.colorBlue = b;
+  state.colorAlpha = a;
+  state.colorHue = hue;
+  state.colorSaturation = saturation;
+  state.colorValue = value;
+  state.gradientPoints = localGradientPoints;
+
+  console.log(props)
+  const action = props[actionName];
+
+  action && action(getChangeData());
+};
 
 const updateGradientLeft = (
-    left: number,
-    index: number,
-    actionName: 'onStartChange' | 'onChange' | 'onEndChange' = 'onChange',
+  left: number,
+  index: number,
+  actionName: "onStartChange" | "onChange" | "onEndChange" = "onChange"
 ) => {
-    state.gradientPoints[index].left = clamp(left, 0, 100)
+  state.gradientPoints[index].left = clamp(left, 0, 100);
 
-    const action = props[actionName]
+  const action = props[actionName];
 
-    action && action(getChangeData())
-}
+  action && action(getChangeData());
+};
 
 const addPoint = (left: number) => {
-    left = clamp(left, 0, 100)
-    state.gradientPoints.push({
-        ...state.gradientPoints[state.activePointIndex],
-        left,
-        // todo
-        alpha: 1,
-    })
-
-    state.activePointIndex = state.gradientPoints.length - 1
-
-    onChange()
-}
+  left = clamp(left, 0, 100);
+  state.gradientPoints.push({
+    ...state.gradientPoints[state.activePointIndex],
+    left,
+    // todo
+    alpha: 1,
+  });
+
+  state.activePointIndex = state.gradientPoints.length - 1;
+
+  onChange();
+};
 const patternUploadSuccess = (response: any) => {
-  console.log('response=',response)
-}
+  console.log("response=", response);
+};
 const patternUploadError = (response: any) => {
-  console.log('response=',response)
-}
+  console.log("response=", response);
+};
 const patternUpload = (files: File[]) => {
-    console.log('files=',files)
+  console.log("files=", files);
   // uploadFile().then(value => {
-      // files
+  // files
   // })
-}
+};
 
 onMounted(() => {
-
-    const color = new Color(`rgba(${state.colorRed},${state.colorGreen},${state.colorBlue},1)`)
-    // const color = new Color(new RGBA(state.colorRed, state.colorGreen, state.colorBlue, 1))
-    const {h, s, v} = color.getHsva()
-
-    state.colorHue = h
-    state.colorSaturation = s
-    state.colorValue = v
-    document.addEventListener('keyup', keyUpHandler)
-})
+  const color = new Color(
+    `rgba(${state.colorRed},${state.colorGreen},${state.colorBlue},1)`
+  );
+  // const color = new Color(new RGBA(state.colorRed, state.colorGreen, state.colorBlue, 1))
+  const { h, s, v } = color.getHsva();
+
+  state.colorHue = h;
+  state.colorSaturation = s;
+  state.colorValue = v;
+  document.addEventListener("keyup", keyUpHandler);
+});
 
 onBeforeUnmount(() => {
-    document.removeEventListener('keyup', keyUpHandler)
-})
+  document.removeEventListener("keyup", keyUpHandler);
+});
 </script>
diff --git a/src/utils/color/color.ts b/src/utils/color/color.ts
index 1a561cb..54b12ca 100644
--- a/src/utils/color/color.ts
+++ b/src/utils/color/color.ts
@@ -399,6 +399,7 @@ export class Color {
   }
 
   static hex2color(hex: string, a: number) {
+    console.log('in it')
     const color = tinyColor(hex);
     color.setAlpha(a);
     return color.toHexString();
diff --git a/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue b/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
index 531c863..5aacfbb 100644
--- a/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
+++ b/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
@@ -1,138 +1,139 @@
 <script setup lang="ts">
-import Panel from './panel.vue'
-import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
-import {useEditor} from '@/views/Editor/app'
-import {useColor} from '@/views/Editor/hooks/useActiveObjectColor'
-import {watch} from "vue";
+import Panel from "./panel.vue";
+import { useActiveObjectModel } from "@/views/Editor/hooks/useActiveObjectModel";
+import { useEditor } from "@/views/Editor/app";
+import { useColor } from "@/views/Editor/hooks/useActiveObjectColor";
+import { watch } from "vue";
 import SwipeNumber from "@/components/swipeNumber/swipeNumber.vue";
 
-const {canvas} = useEditor()
+const { canvas } = useEditor();
 
-const rotation = useActiveObjectModel('rotation')
-const width = useActiveObjectModel('width')
-const height = useActiveObjectModel('height')
-const fill = useActiveObjectModel('fill')
-const overflow = useActiveObjectModel('overflow')
+const rotation = useActiveObjectModel("rotation");
+const width = useActiveObjectModel("width");
+const height = useActiveObjectModel("height");
+const fill = useActiveObjectModel("fill");
+const overflow = useActiveObjectModel("overflow");
 
-const {formatValue, colorBlock, changeColor, closeColorPicker, openColorPicker, readonly} =
-    useColor(
-        computed(() => fill.value.modelValue),
-        {
-            attr: 'fill',
-            onChange() {
-                fill.value.onChange(fillArray.value)
-            },
-        },
-    )
+const {
+  formatValue,
+  colorBlock,
+  changeColor,
+  closeColorPicker,
+  openColorPicker,
+  readonly,
+} = useColor(
+  computed(() => fill.value.modelValue),
+  {
+    attr: "fill",
+    onChange() {
+      fill.value.onChange(fillArray.value);
+    },
+  }
+);
 
-watch(canvas.activeObject, () => closeColorPicker())
+watch(canvas.activeObject, () => closeColorPicker());
 
-
-const fillArray = ref([])
+const fillArray = ref([]);
 watchEffect(() => {
-    if (fill.value.modelValue) {
-        fillArray.value = <any>fill.value.modelValue
-    } else {
-        fillArray.value = []
-    }
-})
+  if (fill.value.modelValue) {
+    fillArray.value = <any>fill.value.modelValue;
+  } else {
+    fillArray.value = [];
+  }
+});
 
 const refreshFill = () => {
-    fill.value.onChange([])
-    fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value)
-}
+  fill.value.onChange([]);
+  fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value);
+};
 const addFill = () => {
-    fill.value.onChange([])
-    fillArray.value.push({
-        type: 'solid',
-        color: 'rgba(151,151,151,1)',
-    })
-    refreshFill()
-}
+  fill.value.onChange([]);
+  fillArray.value.push({
+    type: "solid",
+    color: "rgba(151,151,151,1)",
+  });
+  refreshFill();
+};
 const removeFill = (index) => {
-    fillArray.value.splice(index, 1)
-    refreshFill()
-}
-const overflowCheck = ref(false)
+  fillArray.value.splice(index, 1);
+  refreshFill();
+};
+const overflowCheck = ref(false);
 
 watchEffect(() => {
-    if (overflow.value.modelValue === 'hide') {
-        overflowCheck.value = true
-    } else {
-        overflowCheck.value = false
-    }
-})
+  if (overflow.value.modelValue === "hide") {
+    overflowCheck.value = true;
+  } else {
+    overflowCheck.value = false;
+  }
+});
 
 watchEffect(() => {
-    if (overflowCheck.value) {
-        overflow.value.onChange('hide')
-    } else {
-        overflow.value.onChange('show')
-    }
-})
+  if (overflowCheck.value) {
+    overflow.value.onChange("hide");
+  } else {
+    overflow.value.onChange("show");
+  }
+});
 </script>
 
 <template>
-    <div>
-        <div class="p2">
-            <a-row :gutter="[4, 4]" align="center">
-                <a-col :span="10">
-                    <SwipeNumber size="small" :min="0.5" label="宽" v-bind="width"/>
-                </a-col>
-                <a-col :span="10">
-                    <SwipeNumber size="small" :min="0.5" label="高" v-bind="height"/>
-                </a-col>
-                <a-col :span="16">
-                    <a-checkbox v-model="overflowCheck">超出画布隐藏</a-checkbox>
-                </a-col>
-<!--                <a-col :span="10">-->
-<!--                    <SwipeNumber size="small" v-bind="rotation">-->
-<!--                        <template #label>-->
-<!--                            <SvgIcon name="bx-revision"/>-->
-<!--                        </template>-->
-<!--                        <template #suffix>-->
-<!--                            <div class="absolute top-1 right-1">°</div>-->
-<!--                        </template>-->
-<!--                    </SwipeNumber>-->
-<!--                </a-col>-->
-            </a-row>
-        </div>
-        <Panel
-                title="背景"
-                @click-add="addFill"
-        >
-            <a-space direction="vertical">
-                <a-row :gutter="[8, 4]" v-for="(item,index) in fillArray" :key="index">
-                    <a-col :span="20">
-                        <a-col :span="20">
-                            <a-input
-                                    size="mini"
-                                    :model-value="formatValue(index)"
-                                    :readonly="readonly"
-                                    @change="changeColor"
-                                    class="pl0!"
-                            >
-                                <template #prefix>
-                                    <a-button size="mini" class="icon-btn" @click="openColorPicker(index)">
-                                        <template #icon>
-                                            <div v-bind="colorBlock(index)"></div>
-                                        </template>
-                                    </a-button>
-                                </template>
-                            </a-input>
-                        </a-col>
-                    </a-col>
-                    <a-col :span="3.5" class="mlauto">
-                        <a-button size="small" class="icon-btn" v-if="index!==0" @click="removeFill(index)">
-                            <template #icon>
-                                <icon-minus/>
-                            </template>
-                        </a-button>
-                    </a-col>
-                </a-row>
-            </a-space>
-        </Panel>
+  <div>
+    <div class="p2">
+      <a-row :gutter="[4, 4]" align="center">
+        <a-col :span="10">
+          <SwipeNumber size="small" :min="0.5" label="宽" v-bind="width" />
+        </a-col>
+        <a-col :span="10">
+          <SwipeNumber size="small" :min="0.5" label="高" v-bind="height" />
+        </a-col>
+        <a-col :span="16">
+          <a-checkbox v-model="overflowCheck">超出画布隐藏</a-checkbox>
+        </a-col>
+      </a-row>
     </div>
+    <Panel title="背景" @click-add="addFill">
+      <a-space direction="vertical">
+        <a-row :gutter="[8, 4]" v-for="(item, index) in fillArray" :key="index">
+          <a-col :span="20">
+            <a-col :span="20">
+              <a-input
+                size="mini"
+                :model-value="formatValue(index)"
+                :readonly="readonly"
+                @change="changeColor"
+                class="pl0!"
+              >
+                <template #prefix>
+                  <a-button
+                    size="mini"
+                    class="icon-btn"
+                    @click="openColorPicker(index)"
+                  >
+                    <template #icon>
+                      <div v-bind="colorBlock(index)"></div>
+                    </template>
+                  </a-button>
+                </template>
+              </a-input>
+            </a-col>
+          </a-col>
+          <a-col :span="3.5" class="mlauto">
+            <a-button
+              size="small"
+              class="icon-btn"
+              v-if="index !== 0"
+              @click="removeFill(index)"
+            >
+              <template #icon>
+                <icon-minus />
+              </template>
+            </a-button>
+          </a-col>
+        </a-row>
+      </a-space>
+    </Panel>
+  </div>
 </template>
 
 <style scoped lang="less"></style>