画布增加的新功能

src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue

@@ -2,7 +2,9 @@
 import { ref, nextTick, computed, inject } from "vue";
 import { Checkbox } from "ant-design-vue";
 import { VueDraggable } from "vue-draggable-plus";
-import { isGroupLayer } from "../../utils/layerHelper";
+import { isGroupLayer, SpecialLayerId } from "../../utils/layerHelper";
+import { fillToCssStyle, palletToFill, fillToPallet } from "../../utils/helper";
+import { SetColorLayerFillCommand } from "../../commands/LayerCommands";
 import { useI18n } from 'vue-i18n'
 const {t} = useI18n()
 // 设置组件名称，用于递归渲染
@@ -183,6 +185,9 @@ function handleToggleVisibility() {
 }
 
 function handleToggleLock() {
+  // 禁用解锁的图层不能操作
+  if (props.layer.isDisableUnlock) return;
+  
   if (props.isChild) {
     // 子图层需要传递父图层ID - 从父级组件获取
     const parentId = props.layer.parentId || findParentLayerId();
@@ -348,6 +353,30 @@ function findParentLayerId() {
   console.warn("无法找到图层的父图层:", props.layer.id);
   return null;
 }
+const canvasManager = inject('canvasManager');
+const layerObject = computed(() => {
+  const layer = props.layer;
+  const id = layer.fabricObject?.id || layer.fabricObjects?.[0]?.id || layer.id;
+  return canvasManager.getLayerObjectById(id);
+});
+const palletPanel = inject("palletPanel");
+const clickColor = () => {
+  const fill = layerObject.value.fill;
+  if (fill) {
+    const obj = fillToPallet(fill);
+	console.log("===========:", obj);
+	palletPanel(obj).then((res) => {
+		console.log("===========:", res);
+		const cmd = new SetColorLayerFillCommand({
+			canvas: canvasManager.canvas,
+			layerManager: layerManager,
+			object: layerObject.value,
+			newFill: palletToFill(res),
+		});
+		layerManager.commandManager.execute(cmd);
+	});
+  }
+}
 </script>
 
 <template>
@@ -377,8 +406,8 @@ function findParentLayerId() {
       @contextmenu.prevent="handleContextMenu"
     >
       <!-- 拖拽手柄 -->
-      <div class="layer-drag-handle" :title="$t('拖拽排序')">
-        <SvgIcon v-if="!isHidenDragHandle" :name="isChild ? 'CSort' : 'CSort'" :size="32"></SvgIcon>
+      <div class="layer-drag-handle" :title="$t('拖拽排序')" v-if="!isHidenDragHandle">
+        <SvgIcon :name="isChild ? 'CSort' : 'CSort'" :size="32"></SvgIcon>
       </div>
 
       <!-- 图层头部 -->
@@ -417,9 +446,18 @@ function findParentLayerId() {
             />
           </div>
         </div>
+		<!-- 颜色图层按钮 -->
+		<div 
+			class="layer-color-btn"
+			v-if="layer.id === SpecialLayerId.COLOR"
+			@click.stop="clickColor"
+			:style="{
+				background: fillToCssStyle(layerObject.fill),
+			}"
+		></div>
 
         <!-- 图层操作按钮 -->
-        <div class="layer-actions" v-if="!(isGroupLayerType && !isChild)">
+        <div class="layer-actions" >
           <!-- 可见性切换 -->
           <div
             class="visibility-btn"
@@ -434,7 +472,7 @@ function findParentLayerId() {
           <span
             v-if="layer.locked"
             class="status-icon locked"
-            :class="{ disabled: layer.isBackground || layer.isFixed }"
+            :class="{ disabled: layer.isBackground || layer.isFixed || layer.isDisableUnlock || layer.isFixedOther }"
             :title="$t('锁定')"
             @click.stop="handleToggleLock"
           >