feat:conflict

src/styles/tdesign.css

@@ -204,8 +204,8 @@
   ul {
     padding: 16px 4px;
     font-size: 12px;
-    max-height: 300px;
-    overflow: scroll;
+    max-height: 360px;
+    overflow-y: auto;
     li {
       line-height: 30px;
       list-style: none;
@@ -588,7 +588,9 @@
         display: none;
       }
     }
-
+    .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
+      background-color: var(--color-background-popup-hover);
+    }
     .t-divider {
       margin: 4px 0;
       width: 100%;

src/views/components/ContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-menu class="context-menu" @change="onMenu">
+  <t-menu class="context-menu" @change="onMenu" expandType="popup">
     <template v-if="props.type === 'anchor'">
       <t-menu-item value="addAnchorHand">
         <div class="flex">{{$t('添加手柄')}} <span class="flex-grow"></span> H</div>
@@ -34,8 +34,39 @@
       <t-menu-item :disabled="!selections.mode" value="down">
         {{$t('下一个图层')}}
       </t-menu-item>
-      <t-divider></t-divider>
-
+      <template v-if="selections.mode === SelectionMode.Pens">
+        <t-submenu value="1-1-10" title="画布层">
+          <t-menu-item :disabled="!allImg()" value="4">
+            上层图片层
+          </t-menu-item>
+          <t-menu-item :disabled="hasDom()" value="3">
+            主画布层
+          </t-menu-item>
+          <t-menu-item :disabled="!allImg()" value="2">
+            下层图片层
+          </t-menu-item>
+          <t-menu-item :disabled="hasDom()" value="1">
+            模板层
+          </t-menu-item>
+        </t-submenu>
+      </template>
+      <template  v-if="selections.mode === SelectionMode.Pen">
+        <t-submenu value="1-1-10" title="画布层">
+          <t-menu-item :disabled="!isImg()" value="4">
+            上层图片层
+          </t-menu-item>
+          <t-menu-item value="3">
+            主画布层
+          </t-menu-item>
+          <t-menu-item :disabled="!isImg()" value="2">
+            下层图片层
+          </t-menu-item>
+          <t-menu-item value="1">
+            模板层
+          </t-menu-item>
+        </t-submenu>
+      </template>
+      <t-divider />
       <template v-if="selections.mode === SelectionMode.Pens">
         <t-menu-item value="group"> {{$t('组合')}} </t-menu-item>
         <t-menu-item value="states"> {{$t('组合为状态')}} </t-menu-item>
@@ -80,7 +111,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, getCurrentInstance } from 'vue';
-import { LockState, Pen, PenType } from '@meta2d/core';
+import { LockState, Pen, PenType, isDomShapes } from '@meta2d/core';
 import { useSelection, SelectionMode } from '@/services/selections';
 import { updateC } from '@/services/updateC';
 import { rootDomain } from '@/services/defaults';
@@ -126,6 +157,28 @@ onMounted(() => {
 
 const onMenu = (val: string) => {
   let id,url;
+  if(!isNaN(parseInt(val))){
+    const pens = meta2d.store.active;
+    if (Array.isArray(pens)) {
+      for (const pen of pens) {
+        meta2d.setValue(
+        {
+          id: pen.id,
+          canvasLayer: parseInt(val),
+        },
+        {
+          history: false,
+          render:false,
+          doEvent:false
+        }
+      );
+      }
+    }
+    meta2d.render();
+    meta2d.emit('layer');
+    return;
+  }
+
   switch (val) {
     case 'addAnchorHand':
       meta2d.addAnchorHand();
@@ -255,10 +308,44 @@ const isIframe = ()=>{
   return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe"
 }
 
+const isImg = ()=>{
+  return meta2d?.store.active[0].name==='image'
+}
+
+const hasDom = () => {
+  return selections.pens.some((item: Pen) => {
+    return isDomShapes.includes(item.name) ||
+      item.name.endsWith('Dom') ||
+      meta2d.store.options.domShapes.includes(item.name);
+  });
+};
+
+const allImg = () => {
+  return selections.pens.every((item: Pen) => {
+    return item.name === 'image';
+  });
+};
+
+
 </script>
 
 <style lang="postcss" scoped>
 .context-menu {
   height: auto !important;
 }
+:deep(.t-menu) {
+  .t-menu__item {
+    &.t-is-opened {
+      background-color: var(--color-background-popup-hover);
+      transition: none !important;
+    }
+  }
+  .t-fake-arrow {
+    transform: rotate(-90deg) !important;
+  }
+
+  .t-fake-arrow--active {
+    transform: rotate(90deg) !important;
+  }
+}
 </style>

src/views/components/PenProps.vue

@@ -3,7 +3,7 @@
     <t-tabs v-model="data.tab">
       <t-tab-panel :value="1" :label="$t('外观')">
         <t-space direction="vertical" class="py-16 w-full">
-          <div class="form-item px-12">
+          <!-- <div class="form-item px-12">
             <label style="width: 50px">ID</label>
             <t-input
               class="w-full"
@@ -11,7 +11,7 @@
               :value="data.pen.id"
               @change="changeID($event)"
             />
-          </div>
+          </div> -->
           <div class="form-item px-12" style="margin-top: -12px">
             <label style="width: 50px">{{$t('名称')}}</label>
             <t-input
@@ -51,21 +51,15 @@
               @change="changeValue('zIndex')"
             />
           </div>
-          <div v-else class="form-item px-12" style="margin-top: -12px">
+          <!-- <div v-else class="form-item px-12" style="margin-top: -12px">
             <label style="width: 50px">{{$t('画布层')}}</label>
-            <!-- <t-switch
-              class="mt-8 ml-8"
-              v-model="data.pen.template"
-              size="small"
-              @change="changeValue('template')"
-            /> -->
             <t-select v-model="data.pen.canvasLayer" @change="changeValue('canvasLayer')">
               <t-option :key="4" :disabled="data.pen.name!=='image'" :value="4" :label="$t('上层图片层')"> {{$t('上层图片层')}} </t-option>
               <t-option :key="3" :value="3" :label="$t('主画布层')"> {{$t('主画布层')}} </t-option>
               <t-option :key="2" :disabled="data.pen.name!=='image'" :value="2" :label="$t('下层图片层')"> {{$t('下层图片层')}} </t-option>
               <t-option :key="1" :value="1" :label="$t('模板层')"> {{$t('模板层')}} </t-option>
             </t-select>
-          </div>
+          </div> -->
           <t-divider style="margin: -8px 0"></t-divider>
           <div style="margin: 0 16px 16px 16px">
             <t-space direction="vertical" size="small" class="w-full">

src/views/components/PensProps.vue

@@ -68,7 +68,7 @@
               </template>
             </t-select-input>
           </div>
-          <div class="form-item px-16" style="margin-top: -12px">
+          <!-- <div class="form-item px-16" style="margin-top: -12px">
             <label style="width: 50px">{{$t('画布层')}}</label>
             <t-select v-model="data.canvasLayer" @change="changeValue('canvasLayer')">
               <t-option :key="4" :disabled="!allImg" :value="4" :label="$t('上层图片层')"> {{$t('上层图片层')}} </t-option>
@@ -76,7 +76,7 @@
               <t-option :key="2" :disabled="!allImg" :value="2" :label="$t('下层图片层')"> {{$t('下层图片层')}} </t-option>
               <t-option :key="1" :disabled="hasDom" :value="1" :label="$t('模板层')"> {{$t('模板层')}} </t-option>
             </t-select>
-          </div>
+          </div> -->
           <t-collapse :defaultValue="['1', '2', '3', '4']" expandIconPlacement="right" :borderless="true">
             <t-collapse-panel value="1" :header="$t('对齐')">
               <t-space direction="vertical" size="small" class="w-full">
@@ -982,7 +982,9 @@ const allImg = computed(() => {
 .props {
   .icons {
     display: flex;
-
+    .t-icon{
+      font-size:14px;
+    }
     svg:hover {
       cursor: pointer;
       color: var(--color-primary);