From f8e4ab8cdbfd4716f473dda72037d39fac93a127 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Fri, 2 Jan 2026 11:24:11 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=A2=9E=E5=8A=A0=E7=9A=84?=
 =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/iconfont2/demo_index.html          |  75 +-
 src/assets/iconfont2/iconfont.css             |  18 +-
 src/assets/iconfont2/iconfont.js              |   2 +-
 src/assets/iconfont2/iconfont.json            |  21 +
 src/assets/iconfont2/iconfont.ttf             | Bin 9068 -> 10460 bytes
 src/assets/iconfont2/iconfont.woff            | Bin 5680 -> 6260 bytes
 src/assets/iconfont2/iconfont.woff2           | Bin 4752 -> 5268 bytes
 .../FillGroupLayerBackgroundCommand.js        |   6 +-
 .../commands/FillLayerBackgroundCommand.js    |   2 +-
 .../commands/FillRepeatCommand.js             | 301 ++++++
 .../CanvasEditor/commands/LayerCommands.js    | 138 ++-
 .../CanvasEditor/commands/ObjectCommands.js   |  50 +
 .../commands/ObjectLayerCommands.js           |   2 +-
 .../commands/RasterizeLayerCommand.js         |  20 +-
 .../CanvasEditor/commands/StateCommands.js    |   7 +-
 .../UpdateGroupMaskPositionCommand.js         |   2 +-
 .../CanvasEditor/components/CropImage.vue     |   7 +-
 .../components/LayersPanel/LayerItem.vue      |  48 +-
 .../components/LayersPanel/LayersPanel.vue    |  11 +-
 .../components/LayersPanel/layersPanel.less   |   8 +
 .../CanvasEditor/components/LiquifyPanel.vue  |   3 +-
 .../components/PalletPanel/index.vue          | 199 ++++
 .../components/PalletPanel/pallet.vue         | 666 +++++++++++++
 .../components/SelectMenuPanel.vue            | 744 ---------------
 .../SelectMenuPanel/RepeatSetting.vue         | 133 +++
 .../components/SelectMenuPanel/data.js        |  47 +
 .../components/SelectMenuPanel/index.vue      | 899 ++++++++++++++++++
 .../CanvasEditor/components/ToolsSidebar.vue  |   6 +-
 .../components/css/layersPanel.css            |   7 +
 .../components/tools/AngleTool.vue            | 121 +++
 .../components/tools/MySelect.vue             |  66 ++
 .../components/tools/OffsetTool.vue           | 190 ++++
 .../CanvasEditor/components/tools/Slider.vue  | 160 ++++
 src/component/Canvas/CanvasEditor/index.vue   |  92 +-
 .../CanvasEditor/managers/CanvasManager.js    | 476 +++++++++-
 .../CanvasEditor/managers/ExportManager.js    |  71 +-
 .../CanvasEditor/managers/LayerManager.js     |  63 +-
 .../CanvasEditor/managers/ThumbnailManager.js |  11 +-
 .../managers/animation/AnimationManager.js    |   8 +-
 .../managers/command/CommandManager.js        |   3 +
 .../managers/events/CanvasEventManager.js     |   1 -
 .../managers/events/KeyboardManager.js        |  15 +-
 .../managers/liquify/LiquifyCPUManager.js     | 189 ++--
 .../managers/liquify/LiquifyWebGLManager.js   |   2 +-
 .../Canvas/CanvasEditor/utils/LayerSort.js    |   3 +
 .../Canvas/CanvasEditor/utils/event.js        |  37 +
 .../Canvas/CanvasEditor/utils/helper.js       | 225 ++++-
 .../Canvas/CanvasEditor/utils/helperLine.js   |  14 +-
 .../Canvas/CanvasEditor/utils/layerHelper.js  |  15 +
 .../Canvas/CanvasEditor/utils/layerUtils.js   |   4 +
 .../Canvas/CanvasEditor/utils/objectHelper.js | 131 ++-
 .../CanvasEditor/utils/selectionToImage.js    |   6 +-
 .../Canvas/ExistsImageList/ToolButton.vue     |   3 +-
 src/component/Canvas/RedGreenModeExample.vue  |   2 +-
 src/component/Canvas/canvasExample.vue        | 182 ++--
 src/component/Detail/canvas/index.vue         |  14 +-
 .../Detail/detailLeft/colorBox/pallet.vue     |  14 +-
 src/lang/cn.ts                                |  37 +-
 src/lang/en.ts                                |  37 +-
 59 files changed, 4401 insertions(+), 1213 deletions(-)
 create mode 100644 src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js
 create mode 100644 src/component/Canvas/CanvasEditor/commands/ObjectCommands.js
 create mode 100644 src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue
 delete mode 100644 src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/SelectMenuPanel/data.js
 create mode 100644 src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/tools/MySelect.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
 create mode 100644 src/component/Canvas/CanvasEditor/components/tools/Slider.vue
 create mode 100644 src/component/Canvas/CanvasEditor/utils/event.js

diff --git a/src/assets/iconfont2/demo_index.html b/src/assets/iconfont2/demo_index.html
index 86fd4fdc..8f030666 100644
--- a/src/assets/iconfont2/demo_index.html
+++ b/src/assets/iconfont2/demo_index.html
@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe7a4;</span>
+                <div class="name">混合模式</div>
+                <div class="code-name">&amp;#xe7a4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8d7;</span>
+                <div class="name">平铺</div>
+                <div class="code-name">&amp;#xe8d7;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe650;</span>
                 <div class="name">裁剪</div>
@@ -276,9 +294,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
-       url('iconfont.woff?t=1762934152017') format('woff'),
-       url('iconfont.ttf?t=1762934152017') format('truetype');
+  src: url('iconfont.woff2?t=1766460927921') format('woff2'),
+       url('iconfont.woff?t=1766460927921') format('woff'),
+       url('iconfont.ttf?t=1766460927921') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -304,6 +322,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-hunhemoshi"></span>
+            <div class="name">
+              混合模式
+            </div>
+            <div class="code-name">.icon-hunhemoshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gengduo"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.icon-gengduo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-repeat"></span>
+            <div class="name">
+              平铺
+            </div>
+            <div class="code-name">.icon-repeat
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-caijian"></span>
             <div class="name">
@@ -637,6 +682,30 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hunhemoshi"></use>
+                </svg>
+                <div class="name">混合模式</div>
+                <div class="code-name">#icon-hunhemoshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gengduo"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#icon-gengduo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-repeat"></use>
+                </svg>
+                <div class="name">平铺</div>
+                <div class="code-name">#icon-repeat</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-caijian"></use>
diff --git a/src/assets/iconfont2/iconfont.css b/src/assets/iconfont2/iconfont.css
index 53b663ea..e3c0a129 100644
--- a/src/assets/iconfont2/iconfont.css
+++ b/src/assets/iconfont2/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4292253 */
-  src: url('iconfont.woff2?t=1762934152017') format('woff2'),
-       url('iconfont.woff?t=1762934152017') format('woff'),
-       url('iconfont.ttf?t=1762934152017') format('truetype');
+  src: url('iconfont.woff2?t=1766460927921') format('woff2'),
+       url('iconfont.woff?t=1766460927921') format('woff'),
+       url('iconfont.ttf?t=1766460927921') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-hunhemoshi:before {
+  content: "\e7a4";
+}
+
+.icon-gengduo:before {
+  content: "\e60f";
+}
+
+.icon-repeat:before {
+  content: "\e8d7";
+}
+
 .icon-caijian:before {
   content: "\e650";
 }
diff --git a/src/assets/iconfont2/iconfont.js b/src/assets/iconfont2/iconfont.js
index e883181a..322db4b4 100644
--- a/src/assets/iconfont2/iconfont.js
+++ b/src/assets/iconfont2/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_4292253='<svg><symbol id="icon-caijian" viewBox="0 0 1024 1024"><path d="M786.944 129.536a46.545455 46.545455 0 0 1 46.545455 46.545455v785.01236301a46.545455 46.545455 0 0 1-93.09091 0V222.626909H372.503273a46.545455 46.545455 0 0 1 0-93.090909zM241.175273 0a46.545455 46.545455 0 0 1 46.545454 46.545455v748.77672699h350.394182a46.545455 46.545455 0 0 1 0 93.09090901H241.175273a46.545455 46.545455 0 0 1-46.54545499-46.545455V46.545455a46.545455 46.545455 0 0 1 46.54545499-46.545455zM977.454545 795.32218201a46.545455 46.545455 0 0 1 0 93.09090899h-68.887272a46.545455 46.545455 0 0 1 0-93.09090901zM115.432727 129.536a46.545455 46.545455 0 0 1 0 93.090909H46.545455a46.545455 46.545455 0 0 1 0-93.090909z" fill="#4A4A4A" ></path></symbol><symbol id="icon-angle" viewBox="0 0 1228 1024"><path d="M123.71199969 872.31999969h576.96a606.07999969 606.07999969 0 0 0-193.27999969-383.67999938l-383.68000031 383.74399969z m-90.49599938 0L847.68000031 57.98400031l45.24799969 45.24799969-340.224 340.224a670.08 670.08 0 0 1 212.28799969 428.99200031H1184v63.99999938H32v-63.99999938h1.21600031z" fill="#2c2c2c" ></path></symbol><symbol id="icon-flip-horizontal" viewBox="0 0 1065 1024"><path d="M89.6528 217.65471688a30.91045406 30.91045406 0 0 0-44.78176031-1e-8A33.26233688 33.26233688 0 0 0 32.05568 243.23743812v543.95680219a30.23848781 30.23848781 0 0 0 32.01439969 32.01439969c6.38368125 0 19.19904 0 19.19904-6.38368125l294.36928125-268.78656094a30.91045406 30.91045406 0 0 0 0-44.78176031z m6.38368125 492.79136062V313.64991781L313.65759969 512.02399906zM1011.20672281 211.22303844a28.12659375 28.12659375 0 0 0-32.01439968 6.38368125l-294.36928125 268.78656094a30.91045406 30.91045406 0 0 0 0 44.78176031L979.19232313 800.00959906a30.91045406 30.91045406 0 0 0 44.78176125 0 23.51882438 23.51882438 0 0 0 6.38368031-19.19904V243.23743812a35.18224125 35.18224125 0 0 0-19.15104188-32.01439968z m-511.99040062 76.79616094h63.98080031v63.98080031H499.21632219z m0-128.00959969h63.98080031V224.03839813H499.21632219z m0 639.95200218h63.98080031v63.98080125H499.21632219z m0-767.96160187h63.98080031v63.98080125H499.21632219z m0 895.97120156h63.98080031V992H499.21632219z m0-511.99040062h63.98080031v63.98080125H499.21632219z m0 128.00959968h63.98080031V608.01919906H499.21632219z m0 128.00959969h63.98080031v63.98080031H499.21632219z" fill="#2c2c2c" ></path></symbol><symbol id="icon-flip-vertical" viewBox="0 0 1065 1024"><path d="M827.67861645 68.31946667a30.91045406 30.91045406 0 0 0 1e-8-44.78176031A33.26233688 33.26233688 0 0 0 802.09589521 10.72234667l-543.95680219 0a30.23848781 30.23848781 0 0 0-32.01439969 32.01439969c0 6.38368125 0 19.19904001 6.38368125 19.19904l268.78656094 294.36928124a30.91045406 30.91045406 0 0 0 44.78176031 0z m-492.79136062 6.38368126L731.68341552 74.70314792 533.30933427 292.32426636zM834.11029489 989.87338948a28.12659375 28.12659375 0 0 0-6.38368125-32.01439968l-268.78656094-294.36928125a30.91045406 30.91045406 0 0 0-44.78176031 0L245.32373427 957.8589898a30.91045406 30.91045406 0 0 0 0 44.78176125 23.51882438 23.51882438 0 0 0 19.19904 6.38368031L802.09589521 1009.02443136a35.18224125 35.18224125 0 0 0 32.01439968-19.15104188z m-76.79616094-511.99040062l0 63.98080031-63.98080031 0L693.33333364 477.88298886z m128.00959969 0l0 63.98080031L821.2949352 541.86378917 821.2949352 477.88298886z m-639.95200218 0l0 63.98080031-63.98080125 0L181.39093021 477.88298886z m767.96160187 0l0 63.98080031-63.98080125 0L949.35253208 477.88298886z m-895.97120156 0l0 63.98080031L53.33333333 541.86378917 53.33333333 477.88298886z m511.99040062 0l0 63.98080031-63.98080125 0L565.37173114 477.88298886z m-128.00959968 0l0 63.98080031L437.31413427 541.86378917 437.31413427 477.88298886z m-128.00959969 0l0 63.98080031-63.98080031 0L309.35253271 477.88298886z" fill="#2c2c2c" ></path></symbol><symbol id="icon-clothes" viewBox="0 0 1024 1024"><path d="M341.12 85.333333h373.845333a170.666667 170.666667 0 0 1 120.704 50.005334l130.986667 130.986666a46.933333 46.933333 0 0 1 8.789333 54.186667l-82.773333 165.546667a46.933333 46.933333 0 0 1-41.984 25.941333H810.666667v298.666667a128 128 0 0 1-128 128H341.333333a128 128 0 0 1-128-128v-298.666667h-40.021333a46.933333 46.933333 0 0 1-41.984-25.941333l-82.773333-165.546667a46.933333 46.933333 0 0 1 8.789333-54.186667l130.986667-130.986666A170.666667 170.666667 0 0 1 309.034667 85.333333h32.085333z m-18.944 85.333334h-13.141333a85.333333 85.333333 0 0 0-60.373334 25.002666L137.258667 307.072 197.034667 426.666667H251.733333A46.933333 46.933333 0 0 1 298.666667 473.6V810.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h341.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-337.066667a46.933333 46.933333 0 0 1 46.933334-46.933333h54.698666l59.776-119.594667-111.402666-111.402667A85.333333 85.333333 0 0 0 714.965333 170.666667h-13.141333l-126.037333 141.824a85.333333 85.333333 0 0 1-127.573334 0L322.176 170.666667z m114.176 0L512 255.786667 587.648 170.666667h-151.296z" fill="#1C1C1C" ></path></symbol><symbol id="icon-caizhi" viewBox="0 0 1024 1024"><path d="M955.751784 0H68.248216A68.248216 68.248216 0 0 0 0 68.248216v887.503568A68.248216 68.248216 0 0 0 68.248216 1024h887.503568A68.248216 68.248216 0 0 0 1024 955.751784V68.248216A68.248216 68.248216 0 0 0 955.751784 0z m3.653189 927.411892a31.93773 31.93773 0 0 1-31.93773 31.93773H96.588108a31.93773 31.93773 0 0 1-31.93773-31.93773V96.588108a31.93773 31.93773 0 0 1 31.93773-31.93773h830.823784a31.93773 31.93773 0 0 1 31.93773 31.93773z" fill="#666666" ></path><path d="M119.448216 809.79027l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865-83.414486 74.724324-169.651892 74.724324-256.83027 0z" fill="#666666" ></path><path d="M119.448216 569.620757l15.110919-58.672433c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.476324 51.421405c-142.031568-199.264865-322.421622-176.515459-493.734055-23.136864-83.414486 74.724324-169.651892 74.724324-256.83027 0z" fill="#666666" ></path><path d="M119.448216 329.451243l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865C292.864 404.064865 206.626595 404.064865 119.448216 329.451243z" fill="#666666" ></path></symbol><symbol id="icon-IC-yehua" viewBox="0 0 1024 1024"><path d="M658.9696 217.6H365.056c-20.608 0-37.632 0-51.456 1.1264-14.4128 1.152-27.648 3.6864-40.064 10.0096a102.4 102.4 0 0 0-44.7488 44.7488c-6.3232 12.4416-8.8576 25.6512-10.0352 40.064-1.1264 13.824-1.1264 30.848-1.1264 51.456v293.9648c0 20.608 0 37.6064 1.1264 51.456 1.1776 14.3872 3.712 27.6224 10.0352 40.0384a102.4 102.4 0 0 0 44.7488 44.7488c12.416 6.3488 25.6512 8.8576 40.0384 10.0352 13.8496 1.1264 30.8736 1.1264 51.456 1.1264h293.9648c20.608 0 37.632 0 51.456-1.1264 14.4128-1.1776 27.648-3.6864 40.064-10.0352a102.4 102.4 0 0 0 44.7488-44.7488c6.3232-12.416 8.8576-25.6512 10.0352-40.0384 1.1264-13.8496 1.1264-30.848 1.1264-51.456V365.0048c0-20.608 0-37.632-1.1264-51.456-1.1776-14.4128-3.712-27.648-10.0352-40.064a102.4 102.4 0 0 0-44.7488-44.7488c-12.416-6.3232-25.6512-8.8576-40.0384-10.0096-13.8496-1.152-30.8736-1.152-51.456-1.152z m-362.2144 56.7552c3.9936-2.048 9.728-3.6864 20.9664-4.608 11.52-0.9472 26.4192-0.9728 48.3584-0.9728h43.776c-6.528 15.7184-13.5168 33.536-19.968 51.5328-6.528 18.176-12.6208 36.8128-17.1264 53.8368-0.64 2.4576-1.28 4.9152-1.8688 7.3728-37.2992 5.6832-66.048 24.2688-88.32 45.184a251.3408 251.3408 0 0 0-13.7728 14.1312V366.08c0-21.9392 0-36.864 0.9728-48.384 0.896-11.2128 2.56-16.9472 4.608-20.9664a51.2 51.2 0 0 1 22.3744-22.3744zM268.8 523.5712c3.7632-4.864 7.424-9.8048 11.1104-14.7968 11.1104-15.0272 22.4768-30.3872 37.7856-44.8 13.6704-12.8512 29.0304-23.296 47.36-28.7744 0.9216 133.376 15.1296 233.856 37.8112 320H366.08c-21.9392 0-36.8384-0.0256-48.3584-0.9728-11.2128-0.9216-16.9728-2.56-20.9664-4.608a51.2 51.2 0 0 1-22.3744-22.4c-2.048-3.9936-3.712-9.728-4.608-20.9664-0.9472-11.52-0.9728-26.4192-0.9728-48.3584v-134.3232z m187.1104 231.6032c-23.6032-84.7872-38.8864-184.9344-39.68-322.7136 37.2992 5.3504 64.4096 24.3712 94.8224 46.8224l3.6608 2.7136c21.0944 15.5904 44.4416 32.8704 73.2672 43.9808v229.1968h-132.0704z m183.2704 0v-217.9328c3.7376 0.256 7.5776 0.384 11.4688 0.384H755.2v120.2688c0 21.9392 0 36.864-0.9728 48.384-0.896 11.2128-2.56 16.9472-4.608 20.9408a51.2 51.2 0 0 1-22.3744 22.3744c-3.9936 2.048-9.728 3.712-20.9664 4.608-11.52 0.9728-26.4192 0.9728-48.3584 0.9728h-18.7392zM755.2 486.4256h-104.5504c-3.9424 0-7.7568-0.1792-11.4688-0.512v-217.1392h18.7392c21.9392 0 36.8384 0.0256 48.3584 0.9728 11.2128 0.9216 16.9728 2.56 20.9664 4.608a51.2 51.2 0 0 1 22.3744 22.3744c2.048 4.0192 3.712 9.7536 4.608 20.992 0.9472 11.52 0.9728 26.4192 0.9728 48.3328v120.3712z m-167.2192-217.6512v200.7808c-15.1808-8.3456-29.952-19.2512-46.3872-31.36l-0.128-0.1024c-30.7712-22.7072-66.56-48.8448-117.7344-56.2688 3.84-13.7216 8.8576-28.9024 14.336-44.2112 9.1136-25.344 19.328-50.3808 27.392-68.8384h122.5216z"  ></path></symbol><symbol id="icon-shangyiceng" viewBox="0 0 1024 1024"><path d="M161.780764 544.275893a38.954652 38.954652 0 0 0 27.746948 11.465681 39.599597 39.599597 0 0 0 27.976263-11.580338L473.647296 288.075244v696.540141a39.441944 39.441944 0 0 0 78.826559 0V290.081738l254.136827 253.964841a39.463442 39.463442 0 0 0 55.723211-55.895196L542.900011 169.004143a46.736984 46.736984 0 0 0-29.810771-12.382936c-1.43321 0-2.52245 0.687941-3.898332 0.802598a39.155302 39.155302 0 0 0-28.320233 11.580338l-319.319225 319.605867a39.341619 39.341619 0 0 0 0.229314 55.723211zM38.86866 39.441944A39.441944 39.441944 0 0 1 78.310604 0h867.378792a39.441944 39.441944 0 0 1 0 78.826559H78.310604A39.441944 39.441944 0 0 1 38.86866 39.441944z m0 0"  ></path></symbol><symbol id="icon-shangyiceng1" viewBox="0 0 1024 1024"><path d="M862.219236 479.724107a38.954652 38.954652 0 0 0-27.74694801-11.465681 39.599597 39.599597 0 0 0-27.97626299 11.580338L550.352704 735.924756l0-696.540141a39.441944 39.441944 0 0 0-78.826559 0L471.526145 733.918262l-254.136827-253.964841a39.463442 39.463442 0 0 0-55.723211 55.895196L481.099989 854.995857a46.736984 46.736984 0 0 0 29.810771 12.382936c1.43321 0 2.52245-0.68794101 3.898332-0.802598a39.155302 39.155302 0 0 0 28.320233-11.58033801l319.319225-319.60586699a39.341619 39.341619 0 0 0-0.229314-55.723211zM985.13134 984.558056A39.441944 39.441944 0 0 1 945.689396 1024l-867.378792 0a39.441944 39.441944 0 0 1 0-78.826559L945.689396 945.173441A39.441944 39.441944 0 0 1 985.13134 984.558056z m0 0"  ></path></symbol><symbol id="icon-xiayiceng" viewBox="0 0 1024 1024"><path d="M523.52 888.192c3.8656-3.2768 6.8352-7.2448 8.8576-11.5968L815.36 539.52a33.6384 33.6384 0 0 0-4.1984-47.3088 33.6384 33.6384 0 0 0-47.3088 4.1984l-230.4 274.432V161.6128a33.5872 33.5872 0 1 0-67.2 0v606.0032L238.5408 496.1792a33.6384 33.6384 0 0 0-47.3088-4.1984 33.6384 33.6384 0 0 0-4.224 47.3088L470.016 876.5952c2.048 4.352 4.992 8.32 8.8576 11.5968 6.3488 5.3504 14.1056 7.8848 21.8368 7.808a33.28 33.28 0 0 0 22.8352-7.808z" fill="#848494" ></path></symbol><symbol id="icon-shangyiceng2" viewBox="0 0 1024 1024"><path d="M523.52 135.808c3.8656 3.2768 6.8352 7.2448 8.8576 11.5968L815.36 484.48a33.6384 33.6384 0 0 1-4.1984 47.3088 33.6384 33.6384 0 0 1-47.3088-4.1984l-230.4-274.432v609.2288a33.5872 33.5872 0 1 1-67.2 0V256.384L238.5408 527.8208a33.6384 33.6384 0 0 1-47.3088 4.1984 33.6384 33.6384 0 0 1-4.224-47.3088L470.016 147.4048c2.048-4.352 4.992-8.32 8.8576-11.5968 6.3488-5.3504 14.1056-7.8848 21.8368-7.808a33.28 33.28 0 0 1 22.8352 7.808z" fill="#848494" ></path></symbol><symbol id="icon-shenpi" viewBox="0 0 1024 1024"><path d="M422.399 601.6V493.323c-79.111-34.622-134.4-113.655-134.4-205.323 0-123.711 100.54-224 224-224 123.711 0 224 100.545 224 224 0 91.814-55.379 170.725-134.4 205.313V601.6h201.472c61.925 0 112.128 49.716 112.128 112.003V825.6H108.801V713.598c0-61.855 50.444-111.998 112.126-111.998h201.472zM153.601 870.4h716.793V960H153.6v-89.6z"  ></path></symbol><symbol id="icon-yonghu" viewBox="0 0 1070 1024"><path d="M951.215686 883.45098c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-112.941176-62.745098-214.588235-163.137255-267.294118-5.019608-2.509804-8.784314-7.529412-10.039216-13.803921s1.254902-12.54902 6.27451-16.313726c40.156863-37.647059 61.490196-87.843137 61.490196-143.058823 0-107.921569-87.843137-195.764706-195.764706-195.764706s-195.764706 87.843137-195.764706 195.764706c0 53.960784 22.588235 105.411765 61.490196 143.058823 5.019608 3.764706 6.27451 10.039216 6.27451 16.313726s-5.019608 11.294118-10.039215 13.803921c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529s-18.823529-8.784314-18.823529-18.823529c0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843137 0-129.254902 105.411765-233.411765 233.411764-233.411765s233.411765 105.411765 233.411765 233.411765c0 56.470588-20.078431 109.176471-56.470588 151.843137 100.392157 61.490196 161.882353 169.411765 161.882353 288.627451 0 11.294118-8.784314 18.823529-18.82353 18.823529zM120.470588 833.254902c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843138 0-129.254902 105.411765-233.411765 233.411764-233.411764 10.039216 0 18.823529 8.784314 18.82353 18.823529s-8.784314 18.823529-18.82353 18.823529c-107.921569 0-195.764706 87.843137-195.764706 195.764706 0 53.960784 22.588235 105.411765 61.490196 143.058824 5.019608 3.764706 6.27451 10.039216 6.27451 16.313725s-5.019608 11.294118-10.039215 13.803922c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529z" fill="#0B3155" ></path><path d="M951.215686 883.45098c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-112.941176-62.745098-214.588235-163.137255-267.294118-5.019608-2.509804-8.784314-7.529412-10.039216-13.803921s1.254902-12.54902 6.27451-16.313726c40.156863-37.647059 61.490196-87.843137 61.490196-143.058823 0-107.921569-87.843137-195.764706-195.764706-195.764706s-195.764706 87.843137-195.764706 195.764706c0 53.960784 22.588235 105.411765 61.490196 143.058823 5.019608 3.764706 6.27451 10.039216 6.27451 16.313726s-5.019608 11.294118-10.039215 13.803921c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529s-18.823529-8.784314-18.823529-18.823529c0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843137 0-129.254902 105.411765-233.411765 233.411764-233.411765s233.411765 105.411765 233.411765 233.411765c0 56.470588-20.078431 109.176471-56.470588 151.843137 100.392157 61.490196 161.882353 169.411765 161.882353 288.627451 0 11.294118-8.784314 18.823529-18.82353 18.823529z" fill="#0B3155" ></path></symbol><symbol id="icon-usetime" viewBox="0 0 1024 1024"><path d="M652.471707 232.850912l0 61.029934-479.462131 0 0-61.029934 479.462131 0Z" fill="" ></path><path d="M652.471707 401.380388l0 61.029934-479.462131 0 0-61.029934 479.462131 0Z" fill="" ></path><path d="M488.91377 569.909864l0 61.029934-315.904194 0 0-61.029934 315.904194 0Z" fill="" ></path><path d="M488.91377 738.427911l0 61.029934-315.904194 0 0-61.029934 315.904194 0Z" fill="" ></path><path d="M877.859595 743.833746a24.823411 24.823411 0 0 0-24.846269-24.903413H781.823166v-102.74515a24.857698 24.857698 0 0 0-49.715396 0V768.931449h120.905556a25.349137 25.349137 0 0 0 24.857698-25.143418z" fill="" ></path><path d="M148.883323 962.364338h590.961763c13.714592 0 28.674926-10.445947 27.920623-31.189267-0.662872-17.897542-13.920311-29.829237-27.680618-29.829237H148.883323c-33.063595 0-48.915378-26.789169-48.915377-59.841336V184.061251c0-33.063595 15.851782-59.841336 48.915377-59.841335h530.640416c33.063595 0 48.40108 27.029175 48.401081 59.841335v316.327061c0 13.714592 10.03451 28.823501 30.514967 29.394942s30.640684-15.646064 30.640684-29.394942V172.998147a109.888167 109.888167 0 0 0-109.796737-109.796736H148.883323a109.876738 109.876738 0 0 0-109.796736 109.796736v679.52374a109.888167 109.888167 0 0 0 109.796736 109.842451z" fill="" ></path><path d="M755.788299 498.548271c-127.854282 0-231.89089 104.002321-231.890891 231.890891 0.251434 127.842854 104.288042 231.925177 231.890891 231.925176 127.888569 0 231.89089-104.082323 231.89089-231.936605s-104.002321-231.879462-231.89089-231.879462z m0 401.894685c-93.544945 0-169.820934-76.275988-170.003795-170.003794 0-93.716378 76.275988-170.003795 170.003795-170.003795s170.003795 76.275988 170.003795 170.003795-76.275988 169.992366-170.003795 169.992365z" fill="" ></path></symbol><symbol id="icon-xiala" viewBox="0 0 1024 1024"><path d="M186.1632 373.418667a51.2 51.2 0 0 1 68.744533-3.345067l3.652267 3.310933 253.201067 253.201067 251.4944-254.8736a51.2 51.2 0 0 1 68.744533-3.754667l3.6864 3.2768a51.2 51.2 0 0 1 3.754667 68.744534l-3.2768 3.652266-287.744 291.566934a51.2 51.2 0 0 1-69.154134 3.413333l-3.4816-3.1744-289.621333-289.621333a51.2 51.2 0 0 1 0-72.430934z"  ></path></symbol><symbol id="icon-bianji" viewBox="0 0 1028 1024"><path d="M1018.319924 112.117535q4.093748 9.210934 6.652341 21.492179t2.558593 25.585928-5.117186 26.609365-16.374994 25.585928q-12.281245 12.281245-22.003898 21.492179t-16.886712 16.374994q-8.187497 8.187497-15.351557 14.32812l-191.382739-191.382739q12.281245-11.257808 29.167958-27.121083t28.144521-25.074209q14.32812-11.257808 29.679676-15.863275t30.191395-4.093748 28.656239 4.605467 24.050772 9.210934q21.492179 11.257808 47.589826 39.402329t40.425766 58.847634zM221.062416 611.554845q6.140623-6.140623 28.656239-29.167958t56.289041-56.80076l74.710909-74.710909 82.898406-82.898406 220.038979-220.038979 191.382739 192.406177-220.038979 220.038979-81.874969 82.898406q-40.937484 39.914047-73.687472 73.175753t-54.242167 54.753885-25.585928 24.562491q-10.234371 9.210934-23.539054 19.445305t-27.632802 16.374994q-14.32812 7.16406-41.960921 17.398431t-57.824197 19.957024-57.312478 16.886712-40.425766 9.210934q-27.632802 3.070311-36.843736-8.187497t-5.117186-37.867173q2.046874-14.32812 9.722653-41.449203t16.374994-56.289041 16.886712-53.730448 13.304682-33.773425q6.140623-14.32812 13.816401-26.097646t22.003898-26.097646z"  ></path></symbol><symbol id="icon-circle" viewBox="0 0 1024 1024"><path d="M62 512c0 248.528 201.472 450 450 450s450-201.472 450-450c0-248.528-201.472-450-450-450-248.528 0-450 201.472-450 450z"  ></path></symbol><symbol id="icon-sanjiaoxing" viewBox="0 0 1024 1024"><path d="M512 6.4C505.6 0 492.8 0 480 0s-25.6 0-32 6.4c-12.8 6.4-19.2 19.2-25.6 25.6L6.4 761.6c-12.8 19.2-12.8 44.8 0 64 6.4 12.8 12.8 12.8 25.6 19.2s19.2 6.4 32 6.4h819.2c12.8 0 25.6 0 32-6.4 12.8-6.4 19.2-12.8 25.6-19.2 12.8-19.2 12.8-44.8 0-64L537.6 32C531.2 25.6 524.8 12.8 512 6.4z" fill="" ></path></symbol><symbol id="icon-tuceng" viewBox="0 0 1024 1024"><path d="M917.947977 175.542857h-94.354286v-68.461714A106.569143 106.569143 0 0 0 718.267977 0H105.330834A106.057143 106.057143 0 0 0 0.00512 107.081143v625.371428a106.057143 106.057143 0 0 0 105.325714 107.081143h86.308572v76.507429A107.081143 107.081143 0 0 0 297.696549 1024h620.251428A107.081143 107.081143 0 0 0 1024.00512 916.041143V283.501714A107.081143 107.081143 0 0 0 917.947977 175.542857zM80.462263 732.452571v-625.371428a24.941714 24.941714 0 0 1 24.868571-25.234286h612.937143a24.941714 24.941714 0 0 1 24.868572 25.234286v625.371428a25.380571 25.380571 0 0 1-19.748572 24.722286 19.748571 19.748571 0 0 1-5.12 0.585143H105.330834a25.014857 25.014857 0 0 1-24.868571-25.307429z m863.085714 183.588572a25.526857 25.526857 0 0 1-25.6 26.112H297.696549a26.038857 26.038857 0 0 1-25.6-26.112v-72.265143l3.657142-4.242286h442.514286c3.657143 0 7.314286 0 10.971429-0.512a106.496 106.496 0 0 0 78.994285-50.688 110.884571 110.884571 0 0 0 15.36-55.881143V262.582857l5.12-5.193143h89.234286a25.526857 25.526857 0 0 1 25.6 26.112v632.539429z" fill="#333333" ></path></symbol><symbol id="icon-move" viewBox="0 0 1024 1024"><path d="M486.4 776.533333v-213.333333H247.466667v106.666667L85.333333 512l162.133334-162.133333V512h238.933333V247.466667H349.866667L512 85.333333l162.133333 162.133334h-132.266666V512h238.933333V349.866667L938.666667 512l-162.133334 162.133333v-106.666666h-238.933333v213.333333h132.266667L512 938.666667l-162.133333-162.133334h136.533333z"  ></path></symbol><symbol id="icon-xiangpi_huaban1" viewBox="0 0 1024 1024"><path d="M849.066667 466.773333a60.16 60.16 0 0 0 0-85.333333l-193.28-192.426667a59.733333 59.733333 0 0 0-42.666667-17.493333 61.44 61.44 0 0 0-42.666667 17.493333l-395.52 396.8a60.16 60.16 0 0 0 0 85.333334l144.64 143.786666a128 128 0 0 0 83.2 38.4H853.333333v-42.666666h-347.306666zM205.226667 640a17.493333 17.493333 0 0 1-5.12-11.946667 17.493333 17.493333 0 0 1 5.12-12.373333L384 436.053333l216.746667 217.173334L469.333333 784.64a85.333333 85.333333 0 0 1-120.746666 0z"  ></path></symbol><symbol id="icon-tx-fill-tuoyuanxing" viewBox="0 0 1024 1024"><path d="M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z"  ></path></symbol><symbol id="icon-zhixian" viewBox="0 0 1227 1024"><path d="M1227.922 489.545v44.91H0v-44.91h1227.922z"  ></path></symbol><symbol id="icon-xian" viewBox="0 0 1024 1024"><path d="M324.608 598.592l242.336 166.592a16 16 0 0 0 23.072-5.472L926.112 120.576a16 16 0 1 0-28.064-15.424L570.496 728.8l-241.44-165.984a16 16 0 0 0-22.56 4.608L99.136 903.04a16 16 0 0 0 27.008 17.184l198.464-321.664z" fill="#5D6D7E" ></path></symbol><symbol id="icon-checkbox-full" viewBox="0 0 1024 1024"><path d="M1024 127.937531v767.625183c0 70.665495-57.272035 127.937531-127.937531 127.93753h-767.625183c-70.665495 0-127.937531-57.272035-127.93753-127.93753v-767.625183c0-70.665495 57.272035-127.937531 127.93753-127.937531h767.625183c70.665495 0 127.937531 57.272035 127.937531 127.937531z"  ></path></symbol><symbol id="icon-tuceng1" viewBox="0 0 1024 1024"><path d="M298.688 234.688a64 64 0 0 0-64 64V896a64 64 0 0 0 64 64H896a64 64 0 0 0 64-64v-597.312a64 64 0 0 0-64-64h-597.312m0-64H896a128 128 0 0 1 128 128V896a128 128 0 0 1-128 128h-597.312a128 128 0 0 1-128-128v-597.312a128 128 0 0 1 128-128z" fill="#333333" ></path><path d="M0 0m128 0l597.312 0q128 0 128 128l0 597.312q0 128-128 128l-597.312 0q-128 0-128-128l0-597.312q0-128 128-128Z" fill="#333333" ></path><path d="M128 64a64 64 0 0 0-64 64v597.312a64 64 0 0 0 64 64h597.312a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128m0-64h597.312a128 128 0 0 1 128 128v597.312a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z" fill="#333333" ></path></symbol><symbol id="icon-dianwei" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m0 79.644444a432.355556 432.355556 0 1 0 0 864.711112A432.355556 432.355556 0 0 0 512 79.644444zM512 341.333333a170.666667 170.666667 0 1 1 0 341.333334 170.666667 170.666667 0 0 1 0-341.333334z" fill="#606266" ></path></symbol><symbol id="icon-bingji" viewBox="0 0 1024 1024"><path d="M677.744 167.881c-60.007 0-116.511 15.263-165.762 42.054 0 0-0.037 0-0.037 0.037-0.367 0.219-0.774 0.401-1.141 0.66-48.992-28.845-105.055-42.056-164.582-42.056C155.301 168.575 0 322.554 0 512.255c0 189.704 155.301 343.864 346.222 343.864 59.82 0 116.144-15.738 165.281-42.421 0.037 0 0.037-0.037 0.074-0.037 0.148 0.074 0.296 0.148 0.404 0.219 49.251 26.793 105.755 42.056 165.762 42.056 190.918 0 346.256-154.309 346.256-344.01 0.001-189.702-155.337-344.045-346.255-344.045z"  ></path></symbol><symbol id="icon-bingji1" viewBox="0 0 1026 1024"><path d="M339.584128 178.56c187.52 0 339.584 152.064 339.584 339.584S527.104128 857.728 339.584128 857.728 0.000128 705.664 0.000128 518.144c-0.128-187.52 151.936-339.584 339.584-339.584z m0 48.512c-160.768 0-291.072 130.304-291.072 291.072 0 160.768 130.304 291.072 291.072 291.072 160.768 0 291.072-130.304 291.072-291.072 0-160.768-130.304-291.072-291.072-291.072z m0 0"  ></path><path d="M679.168128 178.56c187.52 0 339.584 152.064 339.584 339.584S866.688128 857.728 679.168128 857.728 339.584128 705.792 339.584128 518.144c0-187.52 152.064-339.584 339.584-339.584z m0 48.512c-160.768 0-291.072 130.304-291.072 291.072 0 160.768 130.304 291.072 291.072 291.072 160.768 0 291.072-130.304 291.072-291.072 0-160.768-130.304-291.072-291.072-291.072z m0 0"  ></path><path d="M509.312128 224a339.6736 339.6736 0 0 1 169.856 294.144c0 121.344-64.64 233.472-169.856 294.144a339.6736 339.6736 0 0 1-1.664-587.392l1.664-0.896z m0 0"  ></path></symbol><symbol id="icon-biaoqian" viewBox="0 0 1024 1024"><path d="M510.89 943.11c-24.83 0-47.75-8.97-64.22-25.43L188.33 659.34c-19.16-19.16-28.16-47.05-24.71-76.53 3.18-27.15 16.39-53.55 37.18-74.34l364.55-364.55c6-6 14.15-9.33 22.63-9.22l349 3.96c17.14 0.19 30.98 14.06 31.14 31.21l3.19 348.23c0.08 8.45-3.25 16.58-9.23 22.56L597.54 905.21c-20.79 20.79-47.19 33.99-74.34 37.18-4.14 0.48-8.25 0.72-12.31 0.72z m89.64-745.27L245.35 553.02c-10.65 10.65-17.63 24.19-19.15 37.13-0.7 6-0.77 17.19 6.68 24.65l258.34 258.34c7.46 7.46 18.64 7.39 24.65 6.68 12.94-1.52 26.47-8.5 37.13-19.15l355.2-355.2-2.79-304.16-304.88-3.47z"  ></path><path d="M315.8 885.6c-8.06 0-16.12-3.08-22.27-9.23L81.04 663.89c-19.96-19.96-30.2-48.51-28.07-78.33 2.03-28.57 14.81-55.96 35.97-77.12L373.58 223.8c12.3-12.3 32.25-12.3 44.55 0 12.3 12.3 12.3 32.25 0 44.55L133.48 552.98c-10.29 10.29-16.73 23.79-17.67 37.04-0.84 11.76 2.64 22.17 9.78 29.31l212.49 212.49c12.3 12.3 12.3 32.25 0 44.55-6.16 6.16-14.22 9.23-22.28 9.23zM679.69 539.98c-29.12 0-58.24-11.08-80.41-33.25-21.48-21.48-33.31-50.03-33.31-80.41s11.83-58.93 33.31-80.41c44.34-44.33 116.48-44.34 160.81 0s44.34 116.48 0 160.81c-22.16 22.18-51.28 33.26-80.4 33.26z m58.13-55.52z m-58.13-108.83c-12.99 0-25.97 4.94-35.86 14.83-9.58 9.58-14.85 22.31-14.85 35.86s5.28 26.28 14.85 35.86c19.77 19.77 51.95 19.77 71.72 0 19.77-19.77 19.77-51.95 0-71.72-9.89-9.88-22.88-14.83-35.86-14.83z"  ></path></symbol><symbol id="icon-yuyan" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0zM130.752 409.472c-4.736 4.736-4.736 4.736 0 9.344-12.608 20.416-39.68 22.912-59.072 10.624a448.128 448.128 0 0 0 372.096 525.376l-0.384-0.32-7.68-3.84c14.4-4.608 33.472-4.608 47.68-4.608-4.736-28.032-4.736-51.264-4.736-79.36 0 0-109.568-79.232-109.568-125.952s14.272-69.952 0-69.952c-23.872 0-52.48 18.688-57.216 0-9.536-28.032-28.608-51.328-57.216-60.608-65.6 0-75.008-70.656-76.16-143.488l-0.064-19.84c0-23.424-28.608-23.424-47.68-37.376z m408.32-344.64l5.504 1.472c72.576 22.144 74.688 95.36 15.104 86.4 0 23.232 0 51.2-4.736 79.232-4.8 46.72-62.016 32.768-76.288 56.064-14.208 23.36 28.608 46.656 76.288 37.312 14.272 0 0-14.08 9.6-18.688 19.008-4.608 42.816-4.608 61.888 0a999.872 999.872 0 0 1-66.752 121.408c-9.6 13.952 0 41.984 0 60.608 0 140.096-66.752-32.64-76.288-27.968-9.536 9.344-52.352-9.344-71.424-9.344-19.072 0-9.6 37.312-28.608 37.312-38.144 0-28.608-9.344-28.608 4.608 0 18.688 4.672 56.064 4.672 112.064 0 18.688 38.144-4.608 61.952-4.608 28.608 0 47.68 23.296 66.752 32.64 33.28 14.08 66.688 60.736 90.496 65.28 23.808 4.8 4.736 42.048 33.28 37.376 14.272-4.608 33.344 4.736 42.88 18.688 14.336 18.688 4.8 42.112-14.272 56.064-28.544 27.968-38.08 60.608-52.352 125.952 7.808-2.56 17.024 3.968 24.64 11.84a448.64 448.64 0 0 0 318.144-277.504c-36.224 38.464-78.08 41.408-65.664 8.832-14.336-27.968-33.408-51.392-57.216-74.688-42.944-37.312-81.088-107.392 52.416-205.44-20.672-52.608 30.528-101.76 63.04-64.896a448 448 0 0 0-384.384-270.08z" fill="#666666" ></path></symbol><symbol id="icon-fanchehui" viewBox="0 0 1024 1024"><path d="M126.250667 576a256 256 0 0 0 256 256h416a32 32 0 0 0 0-64h-416a192 192 0 0 1 0-384h470.570666l-139.605333 139.392a30.592 30.592 0 0 0 0 43.392c12.032 11.946667 31.402667 11.946667 43.477333 0l194.304-194.048a30.592 30.592 0 0 0 0-43.392l-194.304-194.048a30.72 30.72 0 1 0-43.477333 43.349333L854.698667 320H382.250667a256 256 0 0 0-256 256z" fill="" ></path></symbol><symbol id="icon-chehui" viewBox="0 0 1024 1024"><path d="M704 320 231.552 320l141.504-141.376c12.032-11.968 12.032-31.36 0-43.328-12.032-12.032-31.424-12.032-43.456 0L135.296 329.344c-12.032 11.968-12.032 31.36 0 43.392L329.6 566.784c12.032 11.968 31.424 11.968 43.456 0 12.032-12.032 12.032-31.36 0-43.392L233.408 384 704 384c106.048 0 192 85.952 192 192s-85.952 192-192 192L288 768C270.336 768 256 782.336 256 800S270.336 832 288 832L704 832c141.376 0 256-114.624 256-256S845.376 320 704 320z"  ></path></symbol><symbol id="icon-a-waitao_changkuanwaitao11x" viewBox="0 0 1024 1024"><path d="M629.709639 2.182295h0.805771l1.175082 0.083935-1.980853-0.100722c1.091148 0 2.182295 0.083934 3.223082 0.235017l1.007213 0.167868a16.451148 16.451148 0 0 1 1.326164 0.268591l0.872918 0.235016c0.503607 0.134295 1.024 0.302164 1.527607 0.48682l0.671475 0.26859c0.48682 0.167869 0.956852 0.369311 1.410099 0.587541l0.705049 0.369311c1.947279 0.990426 3.743475 2.249443 5.355016 3.760263l0.386099 0.402885a16.484721 16.484721 0 0 1 1.175082 1.225442l0.386098 0.453246c0.671475 0.75541 1.259016 1.594754 1.812984 2.467672l0.53718 0.906492 0.251803 0.470033 0.402885 0.721836 38.979148 78.159738 52.777967 16.954754a130.736262 130.736262 0 0 1 88.231869 99.311213l0.839344 4.683541 52.005771 327.68a23.518426 23.518426 0 0 1-20.983607 27.094033l-2.249442 0.100721h-115.426623v428.602754c0 12.220852-9.316721 22.25941-21.23541 23.400918l-2.26623 0.117508H302.56682a23.518426 23.518426 0 0 1-23.400918-21.252196l-0.117509-2.26623V569.159344H163.672131c-13.681311 0-24.30741-11.582951-23.468065-24.945311l0.251803-2.249443 51.972197-327.68a130.736262 130.736262 0 0 1 84.605901-102.4l4.482099-1.544393 52.744393-16.988328L373.289967 15.192131l0.067148-0.167869c0.335738-0.654689 0.671475-1.275803 1.057574-1.880131l-0.235017 0.419672 0.318951-0.503606a18.96918 18.96918 0 0 1 1.175082-1.712263l0.302164-0.369311c0.352525-0.453246 0.75541-0.906492 1.175082-1.342951l0.402885-0.419672c0.386098-0.402885 0.772197-0.788984 1.191869-1.141508l0.587541-0.503607a19.422426 19.422426 0 0 1 2.115147-1.56118l0.285377-0.167869 0.503607-0.335738 0.570754-0.31895 0.167869-0.100722-1.24223 0.75541 1.645115-0.973639-0.335737 0.184655a28.034098 28.034098 0 0 1 3.525245-1.56118 24.173115 24.173115 0 0 1 3.407738-0.906492l1.191869-0.201442 0.75541-0.083935 0.386098-0.033573a23.33377 23.33377 0 0 1 1.225443-0.067148l0.788983-0.033574h235.385705zM341.915279 140.288l-45.996066 14.82282a83.69941 83.69941 0 0 0-56.336787 62.665442l-0.705049 3.860984-47.674754 300.485246h87.84577V288.163672h47.036853v686.08l116.165246-0.033574V284.436984c0-3.575607 0.80577-7.084066 2.350164-10.273574l1.29259-2.31659 20.21141-31.928656-75.490623-37.485115a23.501639 23.501639 0 0 1-7.100853-5.438951l-1.426885-1.745836-40.171016-54.943475z m340.169442 0L641.930492 195.231475c-0.721836 0.990426-1.51082 1.913705-2.383738 2.769836l-1.342951 1.24223-148.933246 126.908852 0.016787 648.057705 208.644197 0.016787V288.180459h47.036852v233.942033h87.845771l-47.674754-300.485246a83.69941 83.69941 0 0 0-53.281574-65.250623l-3.709902-1.29259-46.046426-14.806033zM537.700721 680.708197a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m0-118.045377a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m0-118.045377a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m89.558033-371.158033l-100.922754 159.273967 79.234098-67.483279 40.120656-54.859541-18.432-36.931147z m-230.534295 0.016787l-18.398426 36.931147 38.324459 52.408656 53.550164 26.590426-73.476197-115.930229zM586.953443 49.185574h-149.906886l74.936656 118.313967 74.97023-118.313967z" fill="#000000" ></path></symbol></svg>',(c=>{var a=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var i,t,o,h,e,n=function(a,l){l.parentNode.insertBefore(a,l)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}i=function(){var a,l=document.createElement("div");l.innerHTML=c._iconfont_svg_string_4292253,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?n(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),i()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=i,h=c.document,e=!1,s(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,m())})}function m(){e||(e=!0,o())}function s(){try{h.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}m()}})(window);
\ No newline at end of file
+window._iconfont_svg_string_4292253='<svg><symbol id="icon-hunhemoshi" viewBox="0 0 1024 1024"><path d="M362.02743055 127.68659148c147.54008027-147.54008027 386.74589772-147.54008027 534.28597797 0 147.54008027 147.54008027 147.54008027 386.74589772 0 534.28597797-42.035004 42.035004-91.5000363 72.086519-144.17303799 90.17442911-18.07465404 52.65974562-48.13279708 102.13803401-90.16780108 144.15978193-147.54008027 147.54008027-386.74589772 147.54008027-534.28597797 0-147.54008027-147.54008027-147.54008027-386.74589772 0-534.28597798 42.035004-42.02837596 91.50666433-72.086519 144.17966603-90.16780107 18.07465404-52.66637366 48.12616903-102.13803401 90.16117304-144.15978193z m-180.44165072 283.54737796c-120.36513285 120.36513285-120.36513285 315.50776732 0 435.86627215 120.36513285 120.36513285 315.50776732 120.36513285 435.85964411 0a308.00483062 308.00483062 0 0 0 56.31179344-77.09731418c-110.95332181 13.1102551-226.60592111-22.89986421-311.72978683-108.03035796-83.19510725-83.18847921-119.47697605-195.52706053-108.85223442-304.1473137a308.3892567 308.3892567 0 0 0-71.5894163 53.40871369z m234.33421103-234.33421103a308.04459884 308.04459884 0 0 0-55.76166645 76.05671253c107.89116921-9.88902963 219.22228907 26.47237558 301.81424504 109.07095961 84.50083034 84.4942023 120.60374215 199.0598037 108.31536351 309.25090138a307.60714847 307.60714847 0 0 0 81.49833005-58.51230137c120.36513285-120.36513285 120.36513285-315.50776732 0-435.86627215-120.36513285-120.36513285-315.50113929-120.36513285-435.85964411 0z m139.98411927 516.16492769a309.78114426 309.78114426 0 0 0 144.57072016 2.72412277 309.77451622 309.77451622 0 0 0-2.71749474-144.57072014z m-122.96332295-64.49741784a306.73224772 306.73224772 0 0 0 68.03016099 44.44098105l176.72332256-176.72332255a306.73224772 306.73224772 0 0 0-44.44098106-68.030161z m-80.23237518-107.25487775a306.41410199 306.41410199 0 0 0 43.12862993 69.35576818l199.51713819-199.51713818a306.41410199 306.41410199 0 0 0-69.34914016-43.12862993zM332.91046861 328.21119113l-0.17232893 0.7754802a309.82754051 309.82754051 0 0 0 1.03397361 136.29230325l136.19951075-136.19951075a309.82091247 309.82091247 0 0 0-137.06115543-0.8682727z"  ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M147.91111147 375.46666667a136.53333333 136.53333333 0 1 1 0 273.06666666 136.53333333 136.53333333 0 0 1 0-273.06666666z m364.08888853 0a136.53333333 136.53333333 0 1 1 0 273.06666666 136.53333333 136.53333333 0 0 1 0-273.06666666z m364.08888853 0a136.53333333 136.53333333 0 1 1 0 273.06666666 136.53333333 136.53333333 0 0 1 0-273.06666666zM147.91111147 443.73333333a68.26666667 68.26666667 0 1 0 0 136.53333334 68.26666667 68.26666667 0 0 0 0-136.53333334z m364.08888853 0a68.26666667 68.26666667 0 1 0 0 136.53333334 68.26666667 68.26666667 0 0 0 0-136.53333334z m364.08888853 0a68.26666667 68.26666667 0 1 0 0 136.53333334 68.26666667 68.26666667 0 0 0 0-136.53333334z" fill="#000614" ></path></symbol><symbol id="icon-repeat" viewBox="0 0 1024 1024"><path d="M262.77248711 13.54497321H63.39047619C35.21693156 13.54497321 13.54497321 35.21693156 13.54497321 63.39047619v199.38201092c0 28.17354463 21.67195733 49.84550298 49.84550298 49.84550197h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550197-49.84550197V63.39047619c0-28.17354463-21.67195733-49.84550298-49.84550197-49.84550298z m0 223.22116469c0 13.0031746-10.83597917 26.00634921-26.00634921 26.00634921H89.3968254c-13.0031746 0-26.00634921-10.83597917-26.00634921-26.00634921V89.3968254c0-13.0031746 10.83597917-26.00634921 26.00634921-26.00634921h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915378 26.00634921v147.3693125zM262.77248711 711.38201092H63.39047619c-28.17354463 0-49.84550298 21.67195733-49.84550298 49.84550197v199.38201092C13.54497321 988.78306844 35.21693156 1010.45502679 63.39047619 1010.45502679h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550197-49.84550298v-199.38201092c0-28.17354463-21.67195733-49.84550298-49.84550197-49.84550197z m0 223.22116368c0 13.0031746-10.83597917 26.00634921-26.00634921 26.00634921H89.3968254c-13.0031746 0-26.00634921-10.83597917-26.00634921-26.00634921v-149.53650793c0-13.0031746 10.83597917-23.83915378 26.00634921-23.83915378h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915378 23.83915378v149.53650793zM960.60952381 711.38201092h-199.38201092c-28.17354463 0-49.84550298 21.67195733-49.84550197 49.84550197v199.38201092c0 28.17354463 21.67195733 49.84550298 49.84550197 49.84550298h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550298-49.84550298v-199.38201092c0-28.17354463-21.67195733-49.84550298-49.84550298-49.84550197z m0 223.22116368c0 13.0031746-10.83597917 26.00634921-26.00634921 26.00634921h-149.53650793c-13.0031746 0-23.83915378-10.83597917-23.83915378-26.00634921v-149.53650793c0-13.0031746 10.83597917-23.83915378 23.83915378-23.83915378h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915378 23.83915378l2.16719543 149.53650793zM611.69100495 711.38201092h-199.3820099c-28.17354463 0-49.84550298 21.67195733-49.84550299 49.84550197v199.38201092c0 28.17354463 21.67195733 49.84550298 49.84550299 49.84550298h199.3820099c28.17354463 0 49.84550298-21.67195733 49.84550299-49.84550298v-199.38201092c0-28.17354463-21.67195733-49.84550298-49.84550299-49.84550197z m0 223.22116368c0 13.0031746-10.83597917 26.00634921-23.83915276 26.00634921h-149.53650794c-13.0031746 0-26.00634921-10.83597917-26.0063492-26.00634921v-149.53650793c0-13.0031746 10.83597917-23.83915378 26.0063492-23.83915378h149.53650794c13.0031746 0 23.83915378 10.83597917 23.83915276 23.83915378v149.53650793zM960.60952381 13.54497321h-199.38201092c-28.17354463 0-49.84550298 21.67195733-49.84550197 49.84550298v199.38201092c0 28.17354463 21.67195733 49.84550298 49.84550197 49.84550197h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550298-49.84550197V63.39047619C1010.45502679 35.21693156 988.78306844 13.54497321 960.60952381 13.54497321z m0 223.22116469c0 13.0031746-10.83597917 26.00634921-26.00634921 26.00634921h-149.53650793c-13.0031746 0-23.83915378-10.83597917-23.83915378-26.00634921V89.3968254c0-13.0031746 10.83597917-26.00634921 23.83915378-26.00634921h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915378 26.00634921l2.16719543 147.3693125zM611.69100495 13.54497321h-199.3820099c-28.17354463 0-49.84550298 21.67195733-49.84550299 49.84550298v199.38201092c0 28.17354463 21.67195733 49.84550298 49.84550299 49.84550197h199.3820099c28.17354463 0 49.84550298-21.67195733 49.84550299-49.84550197V63.39047619c0-28.17354463-21.67195733-49.84550298-49.84550299-49.84550298z m0 223.22116469c0 13.0031746-10.83597917 26.00634921-26.0063492 26.00634921h-149.53650794c-13.0031746 0-26.00634921-10.83597917-26.00634921-26.00634921V89.3968254c0-13.0031746 10.83597917-26.00634921 26.00634921-26.00634921h149.53650794c13.0031746 0 23.83915378 10.83597917 23.83915377 26.00634921v147.3693125zM262.77248711 362.46349206H63.39047619c-28.17354463 0-49.84550298 21.67195733-49.84550298 49.84550299v199.3820099c0 28.17354463 21.67195733 49.84550298 49.84550298 49.84550299h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550197-49.84550299v-199.3820099c0-28.17354463-21.67195733-49.84550298-49.84550197-49.84550299z m0 223.22116369c0 13.0031746-10.83597917 23.83915378-26.00634921 23.83915377H87.22962997c-13.0031746 0-26.00634921-10.83597917-26.00634921-23.83915377v-149.53650794c0-13.0031746 10.83597917-26.00634921 26.00634921-26.00634921h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915277 26.00634921v149.53650794zM960.60952381 362.46349206h-199.38201092c-28.17354463 0-49.84550298 21.67195733-49.84550197 49.84550299v199.3820099c0 28.17354463 21.67195733 49.84550298 49.84550197 49.84550299h199.38201092c28.17354463 0 49.84550298-21.67195733 49.84550298-49.84550299v-199.3820099c0-28.17354463-21.67195733-49.84550298-49.84550298-49.84550299z m0 223.22116369c0 13.0031746-10.83597917 23.83915378-26.00634921 23.83915377h-149.53650793c-13.0031746 0-23.83915378-10.83597917-23.83915378-23.83915377v-149.53650794c0-13.0031746 10.83597917-26.00634921 23.83915378-26.00634921h149.53650793c13.0031746 0 23.83915378 10.83597917 23.83915378 26.00634921l2.16719543 149.53650794zM611.69100495 362.46349206h-199.3820099c-28.17354463 0-49.84550298 21.67195733-49.84550299 49.84550299v199.3820099c0 28.17354463 21.67195733 49.84550298 49.84550299 49.84550299h199.3820099c28.17354463 0 49.84550298-21.67195733 49.84550299-49.84550299v-199.3820099c0-28.17354463-21.67195733-49.84550298-49.84550299-49.84550299z m0 223.22116369c0 13.0031746-10.83597917 23.83915378-23.83915276 23.83915377h-149.53650794c-13.0031746 0-26.00634921-10.83597917-26.0063492-23.83915377v-149.53650794c0-13.0031746 10.83597917-26.00634921 26.0063492-26.00634921h149.53650794c13.0031746 0 23.83915378 10.83597917 23.83915276 26.00634921v149.53650794z"  ></path></symbol><symbol id="icon-caijian" viewBox="0 0 1024 1024"><path d="M786.944 129.536a46.545455 46.545455 0 0 1 46.545455 46.545455v785.01236301a46.545455 46.545455 0 0 1-93.09091 0V222.626909H372.503273a46.545455 46.545455 0 0 1 0-93.090909zM241.175273 0a46.545455 46.545455 0 0 1 46.545454 46.545455v748.77672699h350.394182a46.545455 46.545455 0 0 1 0 93.09090901H241.175273a46.545455 46.545455 0 0 1-46.54545499-46.545455V46.545455a46.545455 46.545455 0 0 1 46.54545499-46.545455zM977.454545 795.32218201a46.545455 46.545455 0 0 1 0 93.09090899h-68.887272a46.545455 46.545455 0 0 1 0-93.09090901zM115.432727 129.536a46.545455 46.545455 0 0 1 0 93.090909H46.545455a46.545455 46.545455 0 0 1 0-93.090909z" fill="#4A4A4A" ></path></symbol><symbol id="icon-angle" viewBox="0 0 1228 1024"><path d="M123.71199969 872.31999969h576.96a606.07999969 606.07999969 0 0 0-193.27999969-383.67999938l-383.68000031 383.74399969z m-90.49599938 0L847.68000031 57.98400031l45.24799969 45.24799969-340.224 340.224a670.08 670.08 0 0 1 212.28799969 428.99200031H1184v63.99999938H32v-63.99999938h1.21600031z" fill="#2c2c2c" ></path></symbol><symbol id="icon-flip-horizontal" viewBox="0 0 1065 1024"><path d="M89.6528 217.65471688a30.91045406 30.91045406 0 0 0-44.78176031-1e-8A33.26233688 33.26233688 0 0 0 32.05568 243.23743812v543.95680219a30.23848781 30.23848781 0 0 0 32.01439969 32.01439969c6.38368125 0 19.19904 0 19.19904-6.38368125l294.36928125-268.78656094a30.91045406 30.91045406 0 0 0 0-44.78176031z m6.38368125 492.79136062V313.64991781L313.65759969 512.02399906zM1011.20672281 211.22303844a28.12659375 28.12659375 0 0 0-32.01439968 6.38368125l-294.36928125 268.78656094a30.91045406 30.91045406 0 0 0 0 44.78176031L979.19232313 800.00959906a30.91045406 30.91045406 0 0 0 44.78176125 0 23.51882438 23.51882438 0 0 0 6.38368031-19.19904V243.23743812a35.18224125 35.18224125 0 0 0-19.15104188-32.01439968z m-511.99040062 76.79616094h63.98080031v63.98080031H499.21632219z m0-128.00959969h63.98080031V224.03839813H499.21632219z m0 639.95200218h63.98080031v63.98080125H499.21632219z m0-767.96160187h63.98080031v63.98080125H499.21632219z m0 895.97120156h63.98080031V992H499.21632219z m0-511.99040062h63.98080031v63.98080125H499.21632219z m0 128.00959968h63.98080031V608.01919906H499.21632219z m0 128.00959969h63.98080031v63.98080031H499.21632219z" fill="#2c2c2c" ></path></symbol><symbol id="icon-flip-vertical" viewBox="0 0 1065 1024"><path d="M827.67861645 68.31946667a30.91045406 30.91045406 0 0 0 1e-8-44.78176031A33.26233688 33.26233688 0 0 0 802.09589521 10.72234667l-543.95680219 0a30.23848781 30.23848781 0 0 0-32.01439969 32.01439969c0 6.38368125 0 19.19904001 6.38368125 19.19904l268.78656094 294.36928124a30.91045406 30.91045406 0 0 0 44.78176031 0z m-492.79136062 6.38368126L731.68341552 74.70314792 533.30933427 292.32426636zM834.11029489 989.87338948a28.12659375 28.12659375 0 0 0-6.38368125-32.01439968l-268.78656094-294.36928125a30.91045406 30.91045406 0 0 0-44.78176031 0L245.32373427 957.8589898a30.91045406 30.91045406 0 0 0 0 44.78176125 23.51882438 23.51882438 0 0 0 19.19904 6.38368031L802.09589521 1009.02443136a35.18224125 35.18224125 0 0 0 32.01439968-19.15104188z m-76.79616094-511.99040062l0 63.98080031-63.98080031 0L693.33333364 477.88298886z m128.00959969 0l0 63.98080031L821.2949352 541.86378917 821.2949352 477.88298886z m-639.95200218 0l0 63.98080031-63.98080125 0L181.39093021 477.88298886z m767.96160187 0l0 63.98080031-63.98080125 0L949.35253208 477.88298886z m-895.97120156 0l0 63.98080031L53.33333333 541.86378917 53.33333333 477.88298886z m511.99040062 0l0 63.98080031-63.98080125 0L565.37173114 477.88298886z m-128.00959968 0l0 63.98080031L437.31413427 541.86378917 437.31413427 477.88298886z m-128.00959969 0l0 63.98080031-63.98080031 0L309.35253271 477.88298886z" fill="#2c2c2c" ></path></symbol><symbol id="icon-clothes" viewBox="0 0 1024 1024"><path d="M341.12 85.333333h373.845333a170.666667 170.666667 0 0 1 120.704 50.005334l130.986667 130.986666a46.933333 46.933333 0 0 1 8.789333 54.186667l-82.773333 165.546667a46.933333 46.933333 0 0 1-41.984 25.941333H810.666667v298.666667a128 128 0 0 1-128 128H341.333333a128 128 0 0 1-128-128v-298.666667h-40.021333a46.933333 46.933333 0 0 1-41.984-25.941333l-82.773333-165.546667a46.933333 46.933333 0 0 1 8.789333-54.186667l130.986667-130.986666A170.666667 170.666667 0 0 1 309.034667 85.333333h32.085333z m-18.944 85.333334h-13.141333a85.333333 85.333333 0 0 0-60.373334 25.002666L137.258667 307.072 197.034667 426.666667H251.733333A46.933333 46.933333 0 0 1 298.666667 473.6V810.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h341.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-337.066667a46.933333 46.933333 0 0 1 46.933334-46.933333h54.698666l59.776-119.594667-111.402666-111.402667A85.333333 85.333333 0 0 0 714.965333 170.666667h-13.141333l-126.037333 141.824a85.333333 85.333333 0 0 1-127.573334 0L322.176 170.666667z m114.176 0L512 255.786667 587.648 170.666667h-151.296z" fill="#1C1C1C" ></path></symbol><symbol id="icon-caizhi" viewBox="0 0 1024 1024"><path d="M955.751784 0H68.248216A68.248216 68.248216 0 0 0 0 68.248216v887.503568A68.248216 68.248216 0 0 0 68.248216 1024h887.503568A68.248216 68.248216 0 0 0 1024 955.751784V68.248216A68.248216 68.248216 0 0 0 955.751784 0z m3.653189 927.411892a31.93773 31.93773 0 0 1-31.93773 31.93773H96.588108a31.93773 31.93773 0 0 1-31.93773-31.93773V96.588108a31.93773 31.93773 0 0 1 31.93773-31.93773h830.823784a31.93773 31.93773 0 0 1 31.93773 31.93773z" fill="#666666" ></path><path d="M119.448216 809.79027l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865-83.414486 74.724324-169.651892 74.724324-256.83027 0z" fill="#666666" ></path><path d="M119.448216 569.620757l15.110919-58.672433c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.476324 51.421405c-142.031568-199.264865-322.421622-176.515459-493.734055-23.136864-83.414486 74.724324-169.651892 74.724324-256.83027 0z" fill="#666666" ></path><path d="M119.448216 329.451243l15.110919-58.672432c77.491892 66.421622 152.271568 66.421622 225.944216 0.276757 182.050595-163.065081 376.389189-187.419676 530.985514 29.612973l-21.531676 51.587459c-142.031568-199.264865-322.421622-176.515459-493.734054-23.136865C292.864 404.064865 206.626595 404.064865 119.448216 329.451243z" fill="#666666" ></path></symbol><symbol id="icon-IC-yehua" viewBox="0 0 1024 1024"><path d="M658.9696 217.6H365.056c-20.608 0-37.632 0-51.456 1.1264-14.4128 1.152-27.648 3.6864-40.064 10.0096a102.4 102.4 0 0 0-44.7488 44.7488c-6.3232 12.4416-8.8576 25.6512-10.0352 40.064-1.1264 13.824-1.1264 30.848-1.1264 51.456v293.9648c0 20.608 0 37.6064 1.1264 51.456 1.1776 14.3872 3.712 27.6224 10.0352 40.0384a102.4 102.4 0 0 0 44.7488 44.7488c12.416 6.3488 25.6512 8.8576 40.0384 10.0352 13.8496 1.1264 30.8736 1.1264 51.456 1.1264h293.9648c20.608 0 37.632 0 51.456-1.1264 14.4128-1.1776 27.648-3.6864 40.064-10.0352a102.4 102.4 0 0 0 44.7488-44.7488c6.3232-12.416 8.8576-25.6512 10.0352-40.0384 1.1264-13.8496 1.1264-30.848 1.1264-51.456V365.0048c0-20.608 0-37.632-1.1264-51.456-1.1776-14.4128-3.712-27.648-10.0352-40.064a102.4 102.4 0 0 0-44.7488-44.7488c-12.416-6.3232-25.6512-8.8576-40.0384-10.0096-13.8496-1.152-30.8736-1.152-51.456-1.152z m-362.2144 56.7552c3.9936-2.048 9.728-3.6864 20.9664-4.608 11.52-0.9472 26.4192-0.9728 48.3584-0.9728h43.776c-6.528 15.7184-13.5168 33.536-19.968 51.5328-6.528 18.176-12.6208 36.8128-17.1264 53.8368-0.64 2.4576-1.28 4.9152-1.8688 7.3728-37.2992 5.6832-66.048 24.2688-88.32 45.184a251.3408 251.3408 0 0 0-13.7728 14.1312V366.08c0-21.9392 0-36.864 0.9728-48.384 0.896-11.2128 2.56-16.9472 4.608-20.9664a51.2 51.2 0 0 1 22.3744-22.3744zM268.8 523.5712c3.7632-4.864 7.424-9.8048 11.1104-14.7968 11.1104-15.0272 22.4768-30.3872 37.7856-44.8 13.6704-12.8512 29.0304-23.296 47.36-28.7744 0.9216 133.376 15.1296 233.856 37.8112 320H366.08c-21.9392 0-36.8384-0.0256-48.3584-0.9728-11.2128-0.9216-16.9728-2.56-20.9664-4.608a51.2 51.2 0 0 1-22.3744-22.4c-2.048-3.9936-3.712-9.728-4.608-20.9664-0.9472-11.52-0.9728-26.4192-0.9728-48.3584v-134.3232z m187.1104 231.6032c-23.6032-84.7872-38.8864-184.9344-39.68-322.7136 37.2992 5.3504 64.4096 24.3712 94.8224 46.8224l3.6608 2.7136c21.0944 15.5904 44.4416 32.8704 73.2672 43.9808v229.1968h-132.0704z m183.2704 0v-217.9328c3.7376 0.256 7.5776 0.384 11.4688 0.384H755.2v120.2688c0 21.9392 0 36.864-0.9728 48.384-0.896 11.2128-2.56 16.9472-4.608 20.9408a51.2 51.2 0 0 1-22.3744 22.3744c-3.9936 2.048-9.728 3.712-20.9664 4.608-11.52 0.9728-26.4192 0.9728-48.3584 0.9728h-18.7392zM755.2 486.4256h-104.5504c-3.9424 0-7.7568-0.1792-11.4688-0.512v-217.1392h18.7392c21.9392 0 36.8384 0.0256 48.3584 0.9728 11.2128 0.9216 16.9728 2.56 20.9664 4.608a51.2 51.2 0 0 1 22.3744 22.3744c2.048 4.0192 3.712 9.7536 4.608 20.992 0.9472 11.52 0.9728 26.4192 0.9728 48.3328v120.3712z m-167.2192-217.6512v200.7808c-15.1808-8.3456-29.952-19.2512-46.3872-31.36l-0.128-0.1024c-30.7712-22.7072-66.56-48.8448-117.7344-56.2688 3.84-13.7216 8.8576-28.9024 14.336-44.2112 9.1136-25.344 19.328-50.3808 27.392-68.8384h122.5216z"  ></path></symbol><symbol id="icon-shangyiceng" viewBox="0 0 1024 1024"><path d="M161.780764 544.275893a38.954652 38.954652 0 0 0 27.746948 11.465681 39.599597 39.599597 0 0 0 27.976263-11.580338L473.647296 288.075244v696.540141a39.441944 39.441944 0 0 0 78.826559 0V290.081738l254.136827 253.964841a39.463442 39.463442 0 0 0 55.723211-55.895196L542.900011 169.004143a46.736984 46.736984 0 0 0-29.810771-12.382936c-1.43321 0-2.52245 0.687941-3.898332 0.802598a39.155302 39.155302 0 0 0-28.320233 11.580338l-319.319225 319.605867a39.341619 39.341619 0 0 0 0.229314 55.723211zM38.86866 39.441944A39.441944 39.441944 0 0 1 78.310604 0h867.378792a39.441944 39.441944 0 0 1 0 78.826559H78.310604A39.441944 39.441944 0 0 1 38.86866 39.441944z m0 0"  ></path></symbol><symbol id="icon-shangyiceng1" viewBox="0 0 1024 1024"><path d="M862.219236 479.724107a38.954652 38.954652 0 0 0-27.74694801-11.465681 39.599597 39.599597 0 0 0-27.97626299 11.580338L550.352704 735.924756l0-696.540141a39.441944 39.441944 0 0 0-78.826559 0L471.526145 733.918262l-254.136827-253.964841a39.463442 39.463442 0 0 0-55.723211 55.895196L481.099989 854.995857a46.736984 46.736984 0 0 0 29.810771 12.382936c1.43321 0 2.52245-0.68794101 3.898332-0.802598a39.155302 39.155302 0 0 0 28.320233-11.58033801l319.319225-319.60586699a39.341619 39.341619 0 0 0-0.229314-55.723211zM985.13134 984.558056A39.441944 39.441944 0 0 1 945.689396 1024l-867.378792 0a39.441944 39.441944 0 0 1 0-78.826559L945.689396 945.173441A39.441944 39.441944 0 0 1 985.13134 984.558056z m0 0"  ></path></symbol><symbol id="icon-xiayiceng" viewBox="0 0 1024 1024"><path d="M523.52 888.192c3.8656-3.2768 6.8352-7.2448 8.8576-11.5968L815.36 539.52a33.6384 33.6384 0 0 0-4.1984-47.3088 33.6384 33.6384 0 0 0-47.3088 4.1984l-230.4 274.432V161.6128a33.5872 33.5872 0 1 0-67.2 0v606.0032L238.5408 496.1792a33.6384 33.6384 0 0 0-47.3088-4.1984 33.6384 33.6384 0 0 0-4.224 47.3088L470.016 876.5952c2.048 4.352 4.992 8.32 8.8576 11.5968 6.3488 5.3504 14.1056 7.8848 21.8368 7.808a33.28 33.28 0 0 0 22.8352-7.808z" fill="#848494" ></path></symbol><symbol id="icon-shangyiceng2" viewBox="0 0 1024 1024"><path d="M523.52 135.808c3.8656 3.2768 6.8352 7.2448 8.8576 11.5968L815.36 484.48a33.6384 33.6384 0 0 1-4.1984 47.3088 33.6384 33.6384 0 0 1-47.3088-4.1984l-230.4-274.432v609.2288a33.5872 33.5872 0 1 1-67.2 0V256.384L238.5408 527.8208a33.6384 33.6384 0 0 1-47.3088 4.1984 33.6384 33.6384 0 0 1-4.224-47.3088L470.016 147.4048c2.048-4.352 4.992-8.32 8.8576-11.5968 6.3488-5.3504 14.1056-7.8848 21.8368-7.808a33.28 33.28 0 0 1 22.8352 7.808z" fill="#848494" ></path></symbol><symbol id="icon-shenpi" viewBox="0 0 1024 1024"><path d="M422.399 601.6V493.323c-79.111-34.622-134.4-113.655-134.4-205.323 0-123.711 100.54-224 224-224 123.711 0 224 100.545 224 224 0 91.814-55.379 170.725-134.4 205.313V601.6h201.472c61.925 0 112.128 49.716 112.128 112.003V825.6H108.801V713.598c0-61.855 50.444-111.998 112.126-111.998h201.472zM153.601 870.4h716.793V960H153.6v-89.6z"  ></path></symbol><symbol id="icon-yonghu" viewBox="0 0 1070 1024"><path d="M951.215686 883.45098c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-112.941176-62.745098-214.588235-163.137255-267.294118-5.019608-2.509804-8.784314-7.529412-10.039216-13.803921s1.254902-12.54902 6.27451-16.313726c40.156863-37.647059 61.490196-87.843137 61.490196-143.058823 0-107.921569-87.843137-195.764706-195.764706-195.764706s-195.764706 87.843137-195.764706 195.764706c0 53.960784 22.588235 105.411765 61.490196 143.058823 5.019608 3.764706 6.27451 10.039216 6.27451 16.313726s-5.019608 11.294118-10.039215 13.803921c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529s-18.823529-8.784314-18.823529-18.823529c0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843137 0-129.254902 105.411765-233.411765 233.411764-233.411765s233.411765 105.411765 233.411765 233.411765c0 56.470588-20.078431 109.176471-56.470588 151.843137 100.392157 61.490196 161.882353 169.411765 161.882353 288.627451 0 11.294118-8.784314 18.823529-18.82353 18.823529zM120.470588 833.254902c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843138 0-129.254902 105.411765-233.411765 233.411764-233.411764 10.039216 0 18.823529 8.784314 18.82353 18.823529s-8.784314 18.823529-18.82353 18.823529c-107.921569 0-195.764706 87.843137-195.764706 195.764706 0 53.960784 22.588235 105.411765 61.490196 143.058824 5.019608 3.764706 6.27451 10.039216 6.27451 16.313725s-5.019608 11.294118-10.039215 13.803922c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529z" fill="#0B3155" ></path><path d="M951.215686 883.45098c-10.039216 0-18.823529-8.784314-18.823529-18.823529 0-112.941176-62.745098-214.588235-163.137255-267.294118-5.019608-2.509804-8.784314-7.529412-10.039216-13.803921s1.254902-12.54902 6.27451-16.313726c40.156863-37.647059 61.490196-87.843137 61.490196-143.058823 0-107.921569-87.843137-195.764706-195.764706-195.764706s-195.764706 87.843137-195.764706 195.764706c0 53.960784 22.588235 105.411765 61.490196 143.058823 5.019608 3.764706 6.27451 10.039216 6.27451 16.313726s-5.019608 11.294118-10.039215 13.803921c-100.392157 52.705882-163.137255 154.352941-163.137255 267.294118 0 10.039216-8.784314 18.823529-18.82353 18.823529s-18.823529-8.784314-18.823529-18.823529c0-119.215686 61.490196-227.137255 161.882353-288.627451-36.392157-42.666667-56.470588-95.372549-56.470588-151.843137 0-129.254902 105.411765-233.411765 233.411764-233.411765s233.411765 105.411765 233.411765 233.411765c0 56.470588-20.078431 109.176471-56.470588 151.843137 100.392157 61.490196 161.882353 169.411765 161.882353 288.627451 0 11.294118-8.784314 18.823529-18.82353 18.823529z" fill="#0B3155" ></path></symbol><symbol id="icon-usetime" viewBox="0 0 1024 1024"><path d="M652.471707 232.850912l0 61.029934-479.462131 0 0-61.029934 479.462131 0Z" fill="" ></path><path d="M652.471707 401.380388l0 61.029934-479.462131 0 0-61.029934 479.462131 0Z" fill="" ></path><path d="M488.91377 569.909864l0 61.029934-315.904194 0 0-61.029934 315.904194 0Z" fill="" ></path><path d="M488.91377 738.427911l0 61.029934-315.904194 0 0-61.029934 315.904194 0Z" fill="" ></path><path d="M877.859595 743.833746a24.823411 24.823411 0 0 0-24.846269-24.903413H781.823166v-102.74515a24.857698 24.857698 0 0 0-49.715396 0V768.931449h120.905556a25.349137 25.349137 0 0 0 24.857698-25.143418z" fill="" ></path><path d="M148.883323 962.364338h590.961763c13.714592 0 28.674926-10.445947 27.920623-31.189267-0.662872-17.897542-13.920311-29.829237-27.680618-29.829237H148.883323c-33.063595 0-48.915378-26.789169-48.915377-59.841336V184.061251c0-33.063595 15.851782-59.841336 48.915377-59.841335h530.640416c33.063595 0 48.40108 27.029175 48.401081 59.841335v316.327061c0 13.714592 10.03451 28.823501 30.514967 29.394942s30.640684-15.646064 30.640684-29.394942V172.998147a109.888167 109.888167 0 0 0-109.796737-109.796736H148.883323a109.876738 109.876738 0 0 0-109.796736 109.796736v679.52374a109.888167 109.888167 0 0 0 109.796736 109.842451z" fill="" ></path><path d="M755.788299 498.548271c-127.854282 0-231.89089 104.002321-231.890891 231.890891 0.251434 127.842854 104.288042 231.925177 231.890891 231.925176 127.888569 0 231.89089-104.082323 231.89089-231.936605s-104.002321-231.879462-231.89089-231.879462z m0 401.894685c-93.544945 0-169.820934-76.275988-170.003795-170.003794 0-93.716378 76.275988-170.003795 170.003795-170.003795s170.003795 76.275988 170.003795 170.003795-76.275988 169.992366-170.003795 169.992365z" fill="" ></path></symbol><symbol id="icon-xiala" viewBox="0 0 1024 1024"><path d="M186.1632 373.418667a51.2 51.2 0 0 1 68.744533-3.345067l3.652267 3.310933 253.201067 253.201067 251.4944-254.8736a51.2 51.2 0 0 1 68.744533-3.754667l3.6864 3.2768a51.2 51.2 0 0 1 3.754667 68.744534l-3.2768 3.652266-287.744 291.566934a51.2 51.2 0 0 1-69.154134 3.413333l-3.4816-3.1744-289.621333-289.621333a51.2 51.2 0 0 1 0-72.430934z"  ></path></symbol><symbol id="icon-bianji" viewBox="0 0 1028 1024"><path d="M1018.319924 112.117535q4.093748 9.210934 6.652341 21.492179t2.558593 25.585928-5.117186 26.609365-16.374994 25.585928q-12.281245 12.281245-22.003898 21.492179t-16.886712 16.374994q-8.187497 8.187497-15.351557 14.32812l-191.382739-191.382739q12.281245-11.257808 29.167958-27.121083t28.144521-25.074209q14.32812-11.257808 29.679676-15.863275t30.191395-4.093748 28.656239 4.605467 24.050772 9.210934q21.492179 11.257808 47.589826 39.402329t40.425766 58.847634zM221.062416 611.554845q6.140623-6.140623 28.656239-29.167958t56.289041-56.80076l74.710909-74.710909 82.898406-82.898406 220.038979-220.038979 191.382739 192.406177-220.038979 220.038979-81.874969 82.898406q-40.937484 39.914047-73.687472 73.175753t-54.242167 54.753885-25.585928 24.562491q-10.234371 9.210934-23.539054 19.445305t-27.632802 16.374994q-14.32812 7.16406-41.960921 17.398431t-57.824197 19.957024-57.312478 16.886712-40.425766 9.210934q-27.632802 3.070311-36.843736-8.187497t-5.117186-37.867173q2.046874-14.32812 9.722653-41.449203t16.374994-56.289041 16.886712-53.730448 13.304682-33.773425q6.140623-14.32812 13.816401-26.097646t22.003898-26.097646z"  ></path></symbol><symbol id="icon-circle" viewBox="0 0 1024 1024"><path d="M62 512c0 248.528 201.472 450 450 450s450-201.472 450-450c0-248.528-201.472-450-450-450-248.528 0-450 201.472-450 450z"  ></path></symbol><symbol id="icon-sanjiaoxing" viewBox="0 0 1024 1024"><path d="M512 6.4C505.6 0 492.8 0 480 0s-25.6 0-32 6.4c-12.8 6.4-19.2 19.2-25.6 25.6L6.4 761.6c-12.8 19.2-12.8 44.8 0 64 6.4 12.8 12.8 12.8 25.6 19.2s19.2 6.4 32 6.4h819.2c12.8 0 25.6 0 32-6.4 12.8-6.4 19.2-12.8 25.6-19.2 12.8-19.2 12.8-44.8 0-64L537.6 32C531.2 25.6 524.8 12.8 512 6.4z" fill="" ></path></symbol><symbol id="icon-tuceng" viewBox="0 0 1024 1024"><path d="M917.947977 175.542857h-94.354286v-68.461714A106.569143 106.569143 0 0 0 718.267977 0H105.330834A106.057143 106.057143 0 0 0 0.00512 107.081143v625.371428a106.057143 106.057143 0 0 0 105.325714 107.081143h86.308572v76.507429A107.081143 107.081143 0 0 0 297.696549 1024h620.251428A107.081143 107.081143 0 0 0 1024.00512 916.041143V283.501714A107.081143 107.081143 0 0 0 917.947977 175.542857zM80.462263 732.452571v-625.371428a24.941714 24.941714 0 0 1 24.868571-25.234286h612.937143a24.941714 24.941714 0 0 1 24.868572 25.234286v625.371428a25.380571 25.380571 0 0 1-19.748572 24.722286 19.748571 19.748571 0 0 1-5.12 0.585143H105.330834a25.014857 25.014857 0 0 1-24.868571-25.307429z m863.085714 183.588572a25.526857 25.526857 0 0 1-25.6 26.112H297.696549a26.038857 26.038857 0 0 1-25.6-26.112v-72.265143l3.657142-4.242286h442.514286c3.657143 0 7.314286 0 10.971429-0.512a106.496 106.496 0 0 0 78.994285-50.688 110.884571 110.884571 0 0 0 15.36-55.881143V262.582857l5.12-5.193143h89.234286a25.526857 25.526857 0 0 1 25.6 26.112v632.539429z" fill="#333333" ></path></symbol><symbol id="icon-move" viewBox="0 0 1024 1024"><path d="M486.4 776.533333v-213.333333H247.466667v106.666667L85.333333 512l162.133334-162.133333V512h238.933333V247.466667H349.866667L512 85.333333l162.133333 162.133334h-132.266666V512h238.933333V349.866667L938.666667 512l-162.133334 162.133333v-106.666666h-238.933333v213.333333h132.266667L512 938.666667l-162.133333-162.133334h136.533333z"  ></path></symbol><symbol id="icon-xiangpi_huaban1" viewBox="0 0 1024 1024"><path d="M849.066667 466.773333a60.16 60.16 0 0 0 0-85.333333l-193.28-192.426667a59.733333 59.733333 0 0 0-42.666667-17.493333 61.44 61.44 0 0 0-42.666667 17.493333l-395.52 396.8a60.16 60.16 0 0 0 0 85.333334l144.64 143.786666a128 128 0 0 0 83.2 38.4H853.333333v-42.666666h-347.306666zM205.226667 640a17.493333 17.493333 0 0 1-5.12-11.946667 17.493333 17.493333 0 0 1 5.12-12.373333L384 436.053333l216.746667 217.173334L469.333333 784.64a85.333333 85.333333 0 0 1-120.746666 0z"  ></path></symbol><symbol id="icon-tx-fill-tuoyuanxing" viewBox="0 0 1024 1024"><path d="M112 512a400 240 0 1 0 800 0 400 240 0 1 0-800 0Z"  ></path></symbol><symbol id="icon-zhixian" viewBox="0 0 1227 1024"><path d="M1227.922 489.545v44.91H0v-44.91h1227.922z"  ></path></symbol><symbol id="icon-xian" viewBox="0 0 1024 1024"><path d="M324.608 598.592l242.336 166.592a16 16 0 0 0 23.072-5.472L926.112 120.576a16 16 0 1 0-28.064-15.424L570.496 728.8l-241.44-165.984a16 16 0 0 0-22.56 4.608L99.136 903.04a16 16 0 0 0 27.008 17.184l198.464-321.664z" fill="#5D6D7E" ></path></symbol><symbol id="icon-checkbox-full" viewBox="0 0 1024 1024"><path d="M1024 127.937531v767.625183c0 70.665495-57.272035 127.937531-127.937531 127.93753h-767.625183c-70.665495 0-127.937531-57.272035-127.93753-127.93753v-767.625183c0-70.665495 57.272035-127.937531 127.93753-127.937531h767.625183c70.665495 0 127.937531 57.272035 127.937531 127.937531z"  ></path></symbol><symbol id="icon-tuceng1" viewBox="0 0 1024 1024"><path d="M298.688 234.688a64 64 0 0 0-64 64V896a64 64 0 0 0 64 64H896a64 64 0 0 0 64-64v-597.312a64 64 0 0 0-64-64h-597.312m0-64H896a128 128 0 0 1 128 128V896a128 128 0 0 1-128 128h-597.312a128 128 0 0 1-128-128v-597.312a128 128 0 0 1 128-128z" fill="#333333" ></path><path d="M0 0m128 0l597.312 0q128 0 128 128l0 597.312q0 128-128 128l-597.312 0q-128 0-128-128l0-597.312q0-128 128-128Z" fill="#333333" ></path><path d="M128 64a64 64 0 0 0-64 64v597.312a64 64 0 0 0 64 64h597.312a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128m0-64h597.312a128 128 0 0 1 128 128v597.312a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z" fill="#333333" ></path></symbol><symbol id="icon-dianwei" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m0 79.644444a432.355556 432.355556 0 1 0 0 864.711112A432.355556 432.355556 0 0 0 512 79.644444zM512 341.333333a170.666667 170.666667 0 1 1 0 341.333334 170.666667 170.666667 0 0 1 0-341.333334z" fill="#606266" ></path></symbol><symbol id="icon-bingji" viewBox="0 0 1024 1024"><path d="M677.744 167.881c-60.007 0-116.511 15.263-165.762 42.054 0 0-0.037 0-0.037 0.037-0.367 0.219-0.774 0.401-1.141 0.66-48.992-28.845-105.055-42.056-164.582-42.056C155.301 168.575 0 322.554 0 512.255c0 189.704 155.301 343.864 346.222 343.864 59.82 0 116.144-15.738 165.281-42.421 0.037 0 0.037-0.037 0.074-0.037 0.148 0.074 0.296 0.148 0.404 0.219 49.251 26.793 105.755 42.056 165.762 42.056 190.918 0 346.256-154.309 346.256-344.01 0.001-189.702-155.337-344.045-346.255-344.045z"  ></path></symbol><symbol id="icon-bingji1" viewBox="0 0 1026 1024"><path d="M339.584128 178.56c187.52 0 339.584 152.064 339.584 339.584S527.104128 857.728 339.584128 857.728 0.000128 705.664 0.000128 518.144c-0.128-187.52 151.936-339.584 339.584-339.584z m0 48.512c-160.768 0-291.072 130.304-291.072 291.072 0 160.768 130.304 291.072 291.072 291.072 160.768 0 291.072-130.304 291.072-291.072 0-160.768-130.304-291.072-291.072-291.072z m0 0"  ></path><path d="M679.168128 178.56c187.52 0 339.584 152.064 339.584 339.584S866.688128 857.728 679.168128 857.728 339.584128 705.792 339.584128 518.144c0-187.52 152.064-339.584 339.584-339.584z m0 48.512c-160.768 0-291.072 130.304-291.072 291.072 0 160.768 130.304 291.072 291.072 291.072 160.768 0 291.072-130.304 291.072-291.072 0-160.768-130.304-291.072-291.072-291.072z m0 0"  ></path><path d="M509.312128 224a339.6736 339.6736 0 0 1 169.856 294.144c0 121.344-64.64 233.472-169.856 294.144a339.6736 339.6736 0 0 1-1.664-587.392l1.664-0.896z m0 0"  ></path></symbol><symbol id="icon-biaoqian" viewBox="0 0 1024 1024"><path d="M510.89 943.11c-24.83 0-47.75-8.97-64.22-25.43L188.33 659.34c-19.16-19.16-28.16-47.05-24.71-76.53 3.18-27.15 16.39-53.55 37.18-74.34l364.55-364.55c6-6 14.15-9.33 22.63-9.22l349 3.96c17.14 0.19 30.98 14.06 31.14 31.21l3.19 348.23c0.08 8.45-3.25 16.58-9.23 22.56L597.54 905.21c-20.79 20.79-47.19 33.99-74.34 37.18-4.14 0.48-8.25 0.72-12.31 0.72z m89.64-745.27L245.35 553.02c-10.65 10.65-17.63 24.19-19.15 37.13-0.7 6-0.77 17.19 6.68 24.65l258.34 258.34c7.46 7.46 18.64 7.39 24.65 6.68 12.94-1.52 26.47-8.5 37.13-19.15l355.2-355.2-2.79-304.16-304.88-3.47z"  ></path><path d="M315.8 885.6c-8.06 0-16.12-3.08-22.27-9.23L81.04 663.89c-19.96-19.96-30.2-48.51-28.07-78.33 2.03-28.57 14.81-55.96 35.97-77.12L373.58 223.8c12.3-12.3 32.25-12.3 44.55 0 12.3 12.3 12.3 32.25 0 44.55L133.48 552.98c-10.29 10.29-16.73 23.79-17.67 37.04-0.84 11.76 2.64 22.17 9.78 29.31l212.49 212.49c12.3 12.3 12.3 32.25 0 44.55-6.16 6.16-14.22 9.23-22.28 9.23zM679.69 539.98c-29.12 0-58.24-11.08-80.41-33.25-21.48-21.48-33.31-50.03-33.31-80.41s11.83-58.93 33.31-80.41c44.34-44.33 116.48-44.34 160.81 0s44.34 116.48 0 160.81c-22.16 22.18-51.28 33.26-80.4 33.26z m58.13-55.52z m-58.13-108.83c-12.99 0-25.97 4.94-35.86 14.83-9.58 9.58-14.85 22.31-14.85 35.86s5.28 26.28 14.85 35.86c19.77 19.77 51.95 19.77 71.72 0 19.77-19.77 19.77-51.95 0-71.72-9.89-9.88-22.88-14.83-35.86-14.83z"  ></path></symbol><symbol id="icon-yuyan" viewBox="0 0 1024 1024"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0zM130.752 409.472c-4.736 4.736-4.736 4.736 0 9.344-12.608 20.416-39.68 22.912-59.072 10.624a448.128 448.128 0 0 0 372.096 525.376l-0.384-0.32-7.68-3.84c14.4-4.608 33.472-4.608 47.68-4.608-4.736-28.032-4.736-51.264-4.736-79.36 0 0-109.568-79.232-109.568-125.952s14.272-69.952 0-69.952c-23.872 0-52.48 18.688-57.216 0-9.536-28.032-28.608-51.328-57.216-60.608-65.6 0-75.008-70.656-76.16-143.488l-0.064-19.84c0-23.424-28.608-23.424-47.68-37.376z m408.32-344.64l5.504 1.472c72.576 22.144 74.688 95.36 15.104 86.4 0 23.232 0 51.2-4.736 79.232-4.8 46.72-62.016 32.768-76.288 56.064-14.208 23.36 28.608 46.656 76.288 37.312 14.272 0 0-14.08 9.6-18.688 19.008-4.608 42.816-4.608 61.888 0a999.872 999.872 0 0 1-66.752 121.408c-9.6 13.952 0 41.984 0 60.608 0 140.096-66.752-32.64-76.288-27.968-9.536 9.344-52.352-9.344-71.424-9.344-19.072 0-9.6 37.312-28.608 37.312-38.144 0-28.608-9.344-28.608 4.608 0 18.688 4.672 56.064 4.672 112.064 0 18.688 38.144-4.608 61.952-4.608 28.608 0 47.68 23.296 66.752 32.64 33.28 14.08 66.688 60.736 90.496 65.28 23.808 4.8 4.736 42.048 33.28 37.376 14.272-4.608 33.344 4.736 42.88 18.688 14.336 18.688 4.8 42.112-14.272 56.064-28.544 27.968-38.08 60.608-52.352 125.952 7.808-2.56 17.024 3.968 24.64 11.84a448.64 448.64 0 0 0 318.144-277.504c-36.224 38.464-78.08 41.408-65.664 8.832-14.336-27.968-33.408-51.392-57.216-74.688-42.944-37.312-81.088-107.392 52.416-205.44-20.672-52.608 30.528-101.76 63.04-64.896a448 448 0 0 0-384.384-270.08z" fill="#666666" ></path></symbol><symbol id="icon-fanchehui" viewBox="0 0 1024 1024"><path d="M126.250667 576a256 256 0 0 0 256 256h416a32 32 0 0 0 0-64h-416a192 192 0 0 1 0-384h470.570666l-139.605333 139.392a30.592 30.592 0 0 0 0 43.392c12.032 11.946667 31.402667 11.946667 43.477333 0l194.304-194.048a30.592 30.592 0 0 0 0-43.392l-194.304-194.048a30.72 30.72 0 1 0-43.477333 43.349333L854.698667 320H382.250667a256 256 0 0 0-256 256z" fill="" ></path></symbol><symbol id="icon-chehui" viewBox="0 0 1024 1024"><path d="M704 320 231.552 320l141.504-141.376c12.032-11.968 12.032-31.36 0-43.328-12.032-12.032-31.424-12.032-43.456 0L135.296 329.344c-12.032 11.968-12.032 31.36 0 43.392L329.6 566.784c12.032 11.968 31.424 11.968 43.456 0 12.032-12.032 12.032-31.36 0-43.392L233.408 384 704 384c106.048 0 192 85.952 192 192s-85.952 192-192 192L288 768C270.336 768 256 782.336 256 800S270.336 832 288 832L704 832c141.376 0 256-114.624 256-256S845.376 320 704 320z"  ></path></symbol><symbol id="icon-a-waitao_changkuanwaitao11x" viewBox="0 0 1024 1024"><path d="M629.709639 2.182295h0.805771l1.175082 0.083935-1.980853-0.100722c1.091148 0 2.182295 0.083934 3.223082 0.235017l1.007213 0.167868a16.451148 16.451148 0 0 1 1.326164 0.268591l0.872918 0.235016c0.503607 0.134295 1.024 0.302164 1.527607 0.48682l0.671475 0.26859c0.48682 0.167869 0.956852 0.369311 1.410099 0.587541l0.705049 0.369311c1.947279 0.990426 3.743475 2.249443 5.355016 3.760263l0.386099 0.402885a16.484721 16.484721 0 0 1 1.175082 1.225442l0.386098 0.453246c0.671475 0.75541 1.259016 1.594754 1.812984 2.467672l0.53718 0.906492 0.251803 0.470033 0.402885 0.721836 38.979148 78.159738 52.777967 16.954754a130.736262 130.736262 0 0 1 88.231869 99.311213l0.839344 4.683541 52.005771 327.68a23.518426 23.518426 0 0 1-20.983607 27.094033l-2.249442 0.100721h-115.426623v428.602754c0 12.220852-9.316721 22.25941-21.23541 23.400918l-2.26623 0.117508H302.56682a23.518426 23.518426 0 0 1-23.400918-21.252196l-0.117509-2.26623V569.159344H163.672131c-13.681311 0-24.30741-11.582951-23.468065-24.945311l0.251803-2.249443 51.972197-327.68a130.736262 130.736262 0 0 1 84.605901-102.4l4.482099-1.544393 52.744393-16.988328L373.289967 15.192131l0.067148-0.167869c0.335738-0.654689 0.671475-1.275803 1.057574-1.880131l-0.235017 0.419672 0.318951-0.503606a18.96918 18.96918 0 0 1 1.175082-1.712263l0.302164-0.369311c0.352525-0.453246 0.75541-0.906492 1.175082-1.342951l0.402885-0.419672c0.386098-0.402885 0.772197-0.788984 1.191869-1.141508l0.587541-0.503607a19.422426 19.422426 0 0 1 2.115147-1.56118l0.285377-0.167869 0.503607-0.335738 0.570754-0.31895 0.167869-0.100722-1.24223 0.75541 1.645115-0.973639-0.335737 0.184655a28.034098 28.034098 0 0 1 3.525245-1.56118 24.173115 24.173115 0 0 1 3.407738-0.906492l1.191869-0.201442 0.75541-0.083935 0.386098-0.033573a23.33377 23.33377 0 0 1 1.225443-0.067148l0.788983-0.033574h235.385705zM341.915279 140.288l-45.996066 14.82282a83.69941 83.69941 0 0 0-56.336787 62.665442l-0.705049 3.860984-47.674754 300.485246h87.84577V288.163672h47.036853v686.08l116.165246-0.033574V284.436984c0-3.575607 0.80577-7.084066 2.350164-10.273574l1.29259-2.31659 20.21141-31.928656-75.490623-37.485115a23.501639 23.501639 0 0 1-7.100853-5.438951l-1.426885-1.745836-40.171016-54.943475z m340.169442 0L641.930492 195.231475c-0.721836 0.990426-1.51082 1.913705-2.383738 2.769836l-1.342951 1.24223-148.933246 126.908852 0.016787 648.057705 208.644197 0.016787V288.180459h47.036852v233.942033h87.845771l-47.674754-300.485246a83.69941 83.69941 0 0 0-53.281574-65.250623l-3.709902-1.29259-46.046426-14.806033zM537.700721 680.708197a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m0-118.045377a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m0-118.045377a23.921311 23.921311 0 1 1 0 47.842623 23.921311 23.921311 0 0 1 0-47.842623z m89.558033-371.158033l-100.922754 159.273967 79.234098-67.483279 40.120656-54.859541-18.432-36.931147z m-230.534295 0.016787l-18.398426 36.931147 38.324459 52.408656 53.550164 26.590426-73.476197-115.930229zM586.953443 49.185574h-149.906886l74.936656 118.313967 74.97023-118.313967z" fill="#000000" ></path></symbol></svg>',(l=>{var a=(c=(c=document.getElementsByTagName("script"))[c.length-1]).getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var i,h,t,o,e,m=function(a,c){c.parentNode.insertBefore(a,c)};if(a&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}i=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_4292253,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?m(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),i()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(t=i,o=l.document,e=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())})}function n(){e||(e=!0,t())}function s(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}n()}})(window);
\ No newline at end of file
diff --git a/src/assets/iconfont2/iconfont.json b/src/assets/iconfont2/iconfont.json
index 75657853..0362cb40 100644
--- a/src/assets/iconfont2/iconfont.json
+++ b/src/assets/iconfont2/iconfont.json
@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "42604348",
+      "name": "混合模式",
+      "font_class": "hunhemoshi",
+      "unicode": "e7a4",
+      "unicode_decimal": 59300
+    },
+    {
+      "icon_id": "45981931",
+      "name": "更多",
+      "font_class": "gengduo",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "17005660",
+      "name": "平铺",
+      "font_class": "repeat",
+      "unicode": "e8d7",
+      "unicode_decimal": 59607
+    },
     {
       "icon_id": "22138606",
       "name": "裁剪",
diff --git a/src/assets/iconfont2/iconfont.ttf b/src/assets/iconfont2/iconfont.ttf
index 91080201733e78c72c7681e75f8d9f2c27cee7a8..789133c3f3999303ddb4caf0de8504e051f960ad 100644
GIT binary patch
delta 2358
zcmbtUZERCj7=BJ~ciY}>ZP&Hk+O=EPwcR2zbSy1l&=JJBp_YAMG$v#nTUjw1UHF(7
zkQ)<Bh@vt|mc<y2iuzLt!5Fg;AO?x@L--+yXq-PhG-Q8_L5#xcd++IFqewK~)92jt
zew_E?Irns~^ZVW-jcNj5hXJI9#s<fS`yRFdhJ%1{)yU`z+a7B2UIt9%K;UpDJviKQ
z{>-1`J4=XVNMZiSxRcg1gm7kT_ue-{g_{&_j^ydl?9kw}<H!UcYxd;W;NEezp0$v@
zhUDOm!LhXCeczf-Xzw&79U0H=+U+@d>J-pKc6N1grty&|n6?I<zUtXNU|(|sRwF5Z
zpR=dcg?HgrK{Z~KULx5HgQlfN+ZSaaICCL3#%#GGES<9$%5yi^)bdf?3bqZBzIu?}
z3Y9PlBU?@TRv`!@YPgXr+@AZ?5cXU<o*&3x%3ryjol6x800*~_>AE3oTVxt26mplO
zxXLKPI;^MBSu(n?FgD`u0aT$9J~W^lVU$rXZdAiTwbi2$0eIkq1zxzQx*#H`K^-b!
zgA6;Y)Jcf?m*6*|7N(PDqza~9)Tp2*qLnN_Ilze>4U`R>7}G#`!6gBz0Gx={K($b_
z0#p?^F{Od(1GfuktaG;j)eP<tP^o<IBB&AYS^<r29u%PFz@q}xCirpzY8bp#fLaG{
z6Ce`69}^%tz@HExV!$^E5JliUP_>CZW)d<2#2fgifX>Q3S`&y%@RtRMRq$5?h+ptm
z1&C?zw*`oE@OK4>eO&7mpmV^r;{ssxiRK3c=x~s~BtXZ6{1pK@FkH_Hzz@ukzXm!(
z%%uciA{ls(ISmI4-x_|Gwn`U`tBqfjy;U|VhvjGF!}4j<A#;s+oq5VUWB$XEvAk|M
zXUSXC-;|KjshqP0t$o(H@&gsq72nxvZ09K$g)AJDZb|!z=9TD15}WZXQgm@*@mO^o
ztM-`Wh0)Z)nxb*i$77mGx9XxSEOJ~n75C^)y4ECDdDM8UsmxOykBWH(bIT;K=eoD1
zQbUtIuh-X|=<_F*iW6(xE|>fHo=wS~_D0WBz5V+GwdUrpL!SO*&py9jX$iM$4imk}
zWN&X*m%}-Kvp#adSv#Mv^nF<$J!^Ly+907@i>^)%rBYkF6aK!0F8?k5(5~&CaMRNs
zTBg+c_xC0H-Cu<sF#G-c`g=Be!gm~QpRICqcO`w!6OsBY(clGNrHgIYaEQKU`fJlB
z>4w2Vx5SGmT9KezjjGl<=CZMn+QQlrtf45C3S}W1bJekxt+BRf!#}K#MLNRaj*T6W
zNC%sYXs@MfGTwgD8FbRm-`vc47BAHWwZT%{rtdAC9(4x8L1*)-=DXk8Wh=ZU{VMIE
zue=^B(1A@DK$fo78+ZpF;|#vRPxyr~R>|mJgEfZa0CRcTS!--9Q`@2@m%NOHqH9@O
zjC3A%<r0Tdd*pxGmlU9~|C}Je%I;r5fc^UtRgHww5}4_N+wXT@a0dczyY-mjuv@1T
z+r4y#&vhr=q&wM^DT{6X!=hH(Z<#9YXIn~q)hVT7i8JL9$>u*;oNhsDm?;TyR|Lvm
zj3DhSc0hrC)O30uw~q#>FVWnrqKafTW#eM)eU*}Qudt8bOL^=?Eh=$9)2w1!U}E-;
zw*HP<ub}8_u@`+$ekOZsSu}UKp|gQSSd=wE$?VyYNsncBWwx6}(mO_m_hjXr>GAa7
K?vvh7Kl=+NWZzE!

delta 992
zcmZXTOK1~89LB%NZg%ssNvo}~t!<hVi}-+65tUMlmYRc9ix)v5jWsrurU_UiRv~!s
zpcaWPc<4d!fsb3E7r}ra9)x-+coGjDbPOSQtAZ5QZ!#7HXZY>R{C6JT|C`-U<Mq*U
zqI3ih3jii2bLoOTzf=Z1MZowmHFM?S%H^ROfb|lHmb01kg}rBELC*b54rCedJu~y{
zS4eL*H&?t9cYkufI>!q$`N?#~n!d;N1&))sbg>`~VukOc9LHwUxlH77``{ALo#dfY
zh5V(toiElyKo4W$)!j<sSOS7`$-c_3R4P2UhM>s+@b%Dld!u#N-IDp<xX!T;9u;L#
z>k@d4pc5B45q8QV;|S0FU1N<m5J?z~-fp%59zO<CbaKrAVldGnO&M_BdU_+(RCTqM
zuTQuxAR+zEZ%=RFZ!qP$PQTG#5?pl{gBbp=9>qo-!M_!Vpb1;i1wVSIxdmIW2{t-;
zdOJ2F3=3^&ro!!rqZJ+07^Kn=Gwg;J+YqHn2ur2vtQqSiwsel6=jzE4S9&!(43dT@
zcq}AMQcwV-p`jE=ZmFOsW~!k)NE)P2=E_zLB}2ApD82-#HY3afvO~j+AY&Tl2DwAS
zEFt%3m@njjhM7a|*U$sV;~KgFc|t>9AWv%O5acO^%3o!e)zCJ`8BN29tLzh63CT}d
zK~o`bY1AhmZ)<2Y<O2;YhkU3}{(c+R@ETA}X?P*1mR9*7yc^W`PbhdxsB@Bn_l5d|
zM%`SaoWVT4h%r&|j2d0WdE=?^(QGn@y#eo{_l*^`hOBE=&5qb3_OxBJpV;qwBfdwz
l5B^zx4DG>l!NpKg?d6tDEJs4k9U|ex`$h$pZ}y!Qe*oRp&Ak8s

diff --git a/src/assets/iconfont2/iconfont.woff b/src/assets/iconfont2/iconfont.woff
index 54a3be20a0cc4d16632ef7a11e36870a95a1d794..0b9a76c4363bad5dff5369a0b97198f048701a6b 100644
GIT binary patch
delta 5818
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
Euj(Kkn*aa+

delta 5209
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
Tmcj6Vv#gAwZ$pWGegFUf-Y(;%

diff --git a/src/assets/iconfont2/iconfont.woff2 b/src/assets/iconfont2/iconfont.woff2
index b9d64f8dcaf42dffbd064b0aa4c529ba60096094..2f967db596b66bd412aa32d608c447ee67eb4ec3 100644
GIT binary patch
literal 5268
zcmV;F6l?2uPew8T0RR9102Gt}3jhEB04Ur502D?50RR9100000000000000000000
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
aNDO@KLgySvfJb&h^t31t^XY@Zbfo~{i#g{2

literal 4752
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

diff --git a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
index 98eb683a..cc773d34 100644
--- a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
@@ -69,7 +69,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
         layer.clippingMask,
         this.canvas
       );
-      clippingMaskFabricObject.clipPath = null;
+    //   clippingMaskFabricObject.clipPath = null;
       clippingMaskFabricObject.set({ absolutePositioned: true });
       this.newFill = new fabric.Rect({
         width: clippingMaskFabricObject.width,
@@ -117,7 +117,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
           this.parent.clippingMask,
           this.canvas
         );
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
         clippingMaskFabricObject.set({ absolutePositioned: true });
         this.newFill = new fabric.Rect({
           width: clippingMaskFabricObject.width,
@@ -222,7 +222,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
           this.parent?.clippingMask,
           this.canvas
         );
-        clipPath.clipPath = null;
+        // clipPath.clipPath = null;
         clipPath.set({ absolutePositioned: true });
         this.group.clipPath = clipPath;
       }
diff --git a/src/component/Canvas/CanvasEditor/commands/FillLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillLayerBackgroundCommand.js
index 2ff386fd..9f1daeb2 100644
--- a/src/component/Canvas/CanvasEditor/commands/FillLayerBackgroundCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/FillLayerBackgroundCommand.js
@@ -56,7 +56,7 @@ export class FillLayerBackgroundCommand extends Command {
         layer.clippingMask,
         this.canvas
       );
-      clippingMaskFabricObject.clipPath = null;
+    //   clippingMaskFabricObject.clipPath = null;
 
       clippingMaskFabricObject.set({
         // 设置绝对定位
diff --git a/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js b/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js
new file mode 100644
index 00000000..617c4ea4
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js
@@ -0,0 +1,301 @@
+import { Command } from "./Command";
+import { findLayerRecursively } from "../utils/layerHelper";
+import { fabric } from "fabric-with-all";
+import {
+	findObjectById,
+	generateId,
+	insertObjectAtZIndex,
+	removeCanvasObjectByObject,
+	createPatternTransform,
+} from "../utils/helper";
+import { restoreFabricObject } from "../utils/objectHelper";
+
+const scale = 0.3;// 默认缩放比例
+
+export const FillSourceToBase64 = (source) => {
+	if (source?.toDataURL) {
+		return source.toDataURL?.();
+	} else if (source?.src) {
+		return source.src;
+	}
+	return source;
+}
+
+/**
+ * 填充图案平铺命令
+ * 填充重复属性：repeat | repeat-x | repeat-y | no-repeat
+ * 默认缩放比例：0.3
+ * 默认偏移量：50%
+ */
+export class FillRepeatCommand extends Command {
+	constructor(options) {
+		super({ name: "填充图案平铺", saveState: true });
+		this.canvas = options.canvas;
+		this.layers = options.layers;
+		this.canvasManager = options.canvasManager;
+		this.layerManager = options.layerManager;
+		this.layerId = options.layerId;
+		this.fillRepeat = options.fillRepeat;
+		this.oldObjects = null;
+		this.oldLocked = null;
+		this.oldIsDisableUnlock = null;
+	}
+
+	async execute() {
+		const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
+			console.warn("图层不存在或没有 fabric 对象");
+			return false;
+		}
+		const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
+		if (!object || (object.type !== "rect" && object.type !== "image")) {
+			console.warn("当前对象不能平铺", object.type);
+			return false;
+		}
+		this.oldObjects = object;
+		const img = await new Promise((resolve, reject) => {
+			if (object.type === "rect") {
+				let source = object.fill.source;
+				resolve(source);
+			} else if (object.type === "image") {
+				// resolve(object.getElement());
+				// fabric.Image.fromURL(
+				// 	object.src,
+				// 	v => resolve(v),
+				// 	{ crossOrigin: "anonymous" }
+				// );
+				const imgElement = object.getElement();
+				// 创建透明 Canvas
+				const tcanvas = document.createElement('canvas');
+				tcanvas.width = imgElement.width;
+				tcanvas.height = imgElement.height;
+				const ctx = tcanvas.getContext('2d');
+				ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
+				ctx.drawImage(imgElement, 0, 0);
+				resolve(tcanvas);
+			}
+		});
+		const fill_ = {
+			source: FillSourceToBase64(img),
+			gapX: 0,
+			gapY: 0,
+		};
+		const bgObject = this.canvasManager.getBackgroundLayerObject();
+		const pattern = new fabric.Pattern({
+			source: img,
+			repeat: this.fillRepeat,
+			patternTransform: object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale, 0),
+			offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : bgObject.width / 2, // 水平偏移
+			offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : bgObject.height / 2, // 垂直偏移
+		});
+		const rect = new fabric.Rect({
+			id: object.id,
+			layerId: object.layerId,
+			layerName: object.layerName,
+			fill_,
+		});
+		layer.fabricObjects = [rect.toObject(["id", "layerId", "layerName"])];
+		this.oldLocked = layer.locked;
+		// this.oldIsDisableUnlock = layer.isDisableUnlock;
+		// layer.isDisableUnlock = true;
+		if (this.oldObjects.type === "rect") {
+			rect.set({
+				width: object.width,
+				height: object.height,
+				top: object.top,
+				left: object.left,
+				originX: object.originX,
+				originY: object.originY,
+				angle: object.angle,
+				scaleX: object.scaleX,
+				scaleY: object.scaleY,
+				flipX: object.flipX,
+				flipY: object.flipY,
+			});
+		} else {
+			rect.set({
+				width: bgObject.width,
+				height: bgObject.height,
+				top: bgObject.top,
+				left: bgObject.left,
+				originX: bgObject.originX,
+				originY: bgObject.originY,
+			});
+			layer.locked = true;
+		}
+		rect.set("fill", pattern);
+		this.canvas.add(rect);
+		this.canvas.remove(object);
+		await this.layerManager?.updateLayersObjectsInteractivity();
+		await this.layerManager?.sortLayersWithTool?.();
+		await this.canvasManager.thumbnailManager?.generateLayerThumbnail(
+			this.layerId
+		);
+		await this.layerManager.selectLayerObjects(this.layerId);
+		return true;
+	}
+
+	async undo() {
+		if (!this.oldObjects) {
+			console.warn("没有旧对象可恢复");
+			return false;
+		}
+		const { layer } = findLayerRecursively(this.layers.value, this.oldObjects.layerId);
+		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
+			console.warn("图层不存在或没有 fabric 对象");
+			return false;
+		}
+		const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
+		this.canvas.remove(object);
+		this.canvas.add(this.oldObjects);
+		layer.fabricObjects = [this.oldObjects.toObject(["id", "layerId", "layerName"])];
+		layer.locked = this.oldLocked;
+		// layer.isDisableUnlock = this.oldIsDisableUnlock;
+		await this.layerManager?.updateLayersObjectsInteractivity();
+		await this.layerManager?.sortLayersWithTool?.();
+		this.canvas.renderAll();
+		this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layerId);
+		return true;
+	}
+}
+
+
+/**
+ * 填充图案更改参数
+ */
+export class FillRepeatChangeCommand extends Command {
+	constructor(options) {
+		super({ name: "填充图案更改参数", saveState: true });
+		this.canvas = options.canvas;
+		this.layers = options.layers;
+		this.canvasManager = options.canvasManager;
+		this.layerManager = options.layerManager;
+		this.layerId = options.layerId;
+		this.newPattern = options.newPattern;
+		this.oldPattern = null;
+	}
+
+	async execute() {
+		const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
+			console.warn("图层不存在或没有 fabric 对象");
+			return false;
+		}
+		const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
+		if (!object || object.type !== "rect") {
+			console.warn("当前对象不是矩形", object);
+			return false;
+		}
+		this.oldPattern = object.oldPattern || object.get("fill");
+		delete object.oldPattern;
+		const oldPattern = { ...this.oldPattern };
+		delete oldPattern.id;
+		const pattern = new fabric.Pattern({
+			...oldPattern,
+			...this.newPattern,
+		});
+		object.set("fill", pattern);
+		this.canvas.renderAll();
+		return true;
+	}
+
+	async undo() {
+		if (!this.oldPattern) {
+			console.warn("没有旧图案可恢复");
+			return false;
+		}
+		const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
+			console.warn("图层不存在或没有 fabric 对象");
+			return false;
+		}
+		const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
+		if (!object || object.type !== "rect") {
+			console.warn("当前对象不是矩形", object);
+			return false;
+		}
+		const pattern = new fabric.Pattern({
+			...this.oldPattern
+		});
+		object.set("fill", pattern);
+		this.canvas.renderAll();
+		return true;
+	}
+}
+
+/**
+ * 填充图案更改间隙
+ */
+export class FillRepeatGapChangeCommand extends Command {
+	constructor(options) {
+		super({ name: "填充图案更改间隙", saveState: true });
+		this.canvas = options.canvas;
+		this.layers = options.layers;
+		this.canvasManager = options.canvasManager;
+		this.layerManager = options.layerManager;
+		this.layerId = options.layerId;
+		this.newGapX = options.newGapX;
+		this.newGapY = options.newGapY;
+		this.record = !!options.record;
+		this.oldGapX = null;
+		this.oldGapY = null;
+	}
+
+	async execute(isUndo = false) {
+		const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
+			console.warn("图层不存在或没有 fabric 对象");
+			return false;
+		}
+		const { object } = findObjectById(this.canvas, layer?.fabricObjects?.[0]?.id);
+		if (!object || object.type !== "rect") {
+			console.warn("当前对象不是矩形", object);
+			return false;
+		}
+		if (!object.fill_) {
+			object.fill_ = {
+				source: FillSourceToBase64(object.fill.source),
+				gapX: 0,
+				gapY: 0,
+			}
+		}
+		if (isUndo) {
+			object.fill_.gapX = this.oldGapX;
+			object.fill_.gapY = this.oldGapY;
+		} else {
+			if (!object.oldFill_ && this.record) {
+				object.oldFill_ = { ...object.fill_ };
+			}
+			this.oldGapX = object.fill_.gapX;
+			this.oldGapY = object.fill_.gapY;
+			object.fill_.gapX = this.newGapX;
+			object.fill_.gapY = this.newGapY;
+		}
+		const image = new Image();
+		image.src = object.fill_.source;
+		await image.decode();
+		// 创建透明 Canvas
+		const tcanvas = document.createElement('canvas');
+		tcanvas.width = image.width + object.fill_.gapX;
+		tcanvas.height = image.height + object.fill_.gapY;
+		const ctx = tcanvas.getContext('2d');
+		ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
+		ctx.drawImage(image, 0, 0);
+
+		const fill = object.get("fill");
+		fill.source = tcanvas;
+		object.set("fill", new fabric.Pattern(fill));
+		this.canvas.renderAll();
+		return true;
+	}
+
+	async undo() {
+		if (this.oldGapX === null || this.oldGapY === null) {
+			console.warn("没有旧间隙可恢复");
+			return false;
+		}
+		await this.execute(true);
+		return true;
+	}
+
+}
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
index cec13748..524b2e37 100644
--- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js
@@ -10,6 +10,7 @@ import { AddObjectToLayerCommand } from "./ObjectLayerCommands";
 import { ToolCommand } from "./ToolCommands";
 import {
   findObjectById,
+  findObjectByLayerId,
   generateId,
   getObjectZIndex,
   insertObjectAtZIndex,
@@ -19,7 +20,7 @@ import {
 } from "../utils/helper";
 import { fabric } from "fabric-with-all";
 import { restoreFabricObject } from "../utils/objectHelper";
-
+import EventManager from "../utils/event.js";
 /**
  * 添加图层命令
  */
@@ -36,7 +37,7 @@ export class AddLayerCommand extends Command {
 
     this.insertIndex = options.insertIndex;
     this.oldActiveLayerId = null;
-    this.beforeLayers = [...this.layers.value]; // 备份原图层列表
+    this.beforeLayers = JSON.stringify(this.layers.value); // 备份原图层列表
 
     this.options = options.options || {};
   }
@@ -70,7 +71,7 @@ export class AddLayerCommand extends Command {
 
   undo() {
     // 从图层列表删除该图层
-	this.layers.value = [...this.beforeLayers];
+	this.layers.value = JSON.parse(this.beforeLayers);
 
     // 恢复原活动图层
     this.activeLayerId.value = this.oldActiveLayerId;
@@ -251,12 +252,12 @@ export class PasteLayerCommand extends Command {
         (await restoreFabricObject(groupLayer?.clippingMask, this.canvas)) ||
         null;
 
-      clippingMaskFabricObject.clipPath = null;
+    //   clippingMaskFabricObject.clipPath = null;
       clippingMaskFabricObject.set({
         absolutePositioned: true,
       });
 
-      clippingMaskFabricObject.dirty = true;
+    //   clippingMaskFabricObject.dirty = true;
       clippingMaskFabricObject.setCoords();
       // 添加所有对象到画布
       allObjects.forEach((obj) => {
@@ -802,15 +803,23 @@ export class ToggleLayerVisibilityCommand extends Command {
 
     // 切换可见性
     this.layer.visible = !this.layer.visible;
+	const ids = [this.layerId];
+	const childLayers = this.layer?.children || [];
+	childLayers.forEach((childLayer) => {
+		childLayer.visible = this.layer.visible;
+		ids.push(childLayer.id);
+	});
 
     // 更新画布上图层对象的可见性
     if (this.canvas) {
-      const layerObjects = this.canvas
-        .getObjects()
-        .filter((obj) => obj.layerId === this.layerId);
-      layerObjects.forEach((obj) => {
-        obj.visible = this.layer.visible;
-      });
+		this.canvas.getObjects().forEach((obj) => {
+			if (ids.includes(obj.layerId)) {
+				obj.getObjects?.()?.forEach((item) => {
+					item.visible = this.layer.visible;
+				});
+				obj.visible = this.layer.visible;
+			}
+		});
     }
     // 更新画布上对象的可选择状态
     await this.layerManager?.updateLayersObjectsInteractivity();
@@ -868,13 +877,14 @@ export class ToggleChildLayerVisibilityCommand extends Command {
 
     // 更新画布上图层对象的可见性
     if (this.canvas) {
-      const layerObjects = this.canvas
-        .getObjects()
-        .filter((obj) => obj.layerId === this.layerId);
-
-      layerObjects.forEach((obj) => {
-        obj.visible = this.childLayer.visible;
-      });
+		this.canvas.getObjects().forEach((obj) => {
+			if (obj.layerId === this.layerId) {
+				obj.getObjects?.()?.forEach((item) => {
+					item.visible = this.childLayer.visible;
+				});
+				obj.visible = this.childLayer.visible;
+			}
+		});
     }
 
     // 更新画布上对象的可选择状态
@@ -1007,9 +1017,8 @@ export class LayerLockCommand extends Command {
 
     // 如果是组图层，递归更新所有子图层
     if (
-      layer.type === "group" &&
       layer.children &&
-      Array.isArray(layer.children)
+      Array.isArray(layer.children) && layer.children.length > 0
     ) {
       layer.children.forEach((child) => {
         this._updateLayerLockState(child, locked);
@@ -1108,7 +1117,7 @@ export class SetLayerOpacityCommand extends Command {
 
       this.canvas.renderAll();
     }
-
+	EventManager.emit("object:opacity:execute", this.layerId, this.opacity);
     return true;
   }
 
@@ -1130,6 +1139,7 @@ export class SetLayerOpacityCommand extends Command {
         this.canvas.renderAll();
       }
     }
+	EventManager.emit("object:opacity:undo", this.layerId, this.opacity);
   }
 
   getInfo() {
@@ -1371,7 +1381,7 @@ export class GroupLayersCommand extends Command {
     // 备份原图层
     this.originalLayers = [...this.layers.value];
     // 新组ID
-    this.groupId =
+    this.groupId = options.id ||
       generateId("group_layer_") ||
       `group_layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
 
@@ -4434,3 +4444,87 @@ export class ChildLayerLockCommand extends Command {
     };
   }
 }
+/**
+ * 设置图层混合模式
+ */
+export class SetLayerCompositeCommand extends Command {
+  constructor(options) {
+    super({
+      name: "设置图层混合模式",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+	this.layers = options.layers;
+	this.layerManager = options.layerManager;
+	this.layerId = options.layerId;
+	this.newValue = options.newValue;
+	this.oldValue = options.oldValue;
+  }
+
+  execute(isUndo = false) {
+	const { layer } = findLayerRecursively(this.layers.value, this.layerId);
+	const { object } = findObjectByLayerId(this.canvas, this.layerId);
+    if (!layer || !object) {
+      console.error(`图层${this.layerId}不存在`);
+      return false;
+    }
+	// console.log("==========", this.newValue, this.oldValue);
+	const value = isUndo ? this.oldValue : this.newValue;
+	layer.blendMode = value;
+	object.set("globalCompositeOperation", value);
+	this.canvas.renderAll();
+	const event = isUndo ? "object:composite:undo" : "object:composite:execute";
+	EventManager.emit(event, object);
+    return true;
+  }
+
+  undo() {
+	return this.execute(true);
+  }
+}
+
+
+/**
+ * 设置颜色图层颜色
+ */
+export class SetColorLayerFillCommand extends Command {
+  constructor(options) {
+    super({
+      name: "设置颜色图层颜色",
+      saveState: false,
+    });
+    this.canvas = options.canvas;
+	this.layerManager = options.layerManager;
+	this.object = options.object;
+	this.layer = this.layerManager?.getLayerById(this.object.layerId);
+	this.newFill = options.newFill;
+	this.oldFill = JSON.parse(JSON.stringify(this.object.fill));
+  }
+
+  async execute(isUndo = false) {
+    if (!this.object) {
+      console.error(`颜色图层不存在`);
+      return false;
+    }
+	const isVisible = this.layer?.visible;
+	if(!isVisible && this.layer) this.layer.visible = true;
+	const gradient = new fabric.Gradient({
+		type: "linear",
+		gradientUnits: "percentage",
+		...(isUndo ? this.oldFill : this.newFill),
+	});
+	this.object.setFill(gradient);
+	this.canvas.renderAll();
+	await this.canvas?.thumbnailManager?.generateLayerThumbnail?.(
+      this.object.id
+    );
+	if(!isVisible && this.layer) this.layer.visible = false;
+	this.layerManager?.updateLayersObjectsInteractivity();
+    return true;
+  }
+
+  undo() {
+	this.execute(true);
+	return true;
+  }
+}
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectCommands.js
new file mode 100644
index 00000000..a8e5c33a
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/commands/ObjectCommands.js
@@ -0,0 +1,50 @@
+import { Command } from "./Command.js";
+
+/**
+ * 对象移动命令
+ * 轻量级命令，只记录对象的移动属性变化（位置）
+ */
+export class ObjectMoveCommand extends Command {
+  constructor(options) {
+    super({
+      name: options.name || "对象移动",
+      description: options.description || "移动对象",
+      saveState: false, // 自己管理状态，避免递归
+    });
+
+    this.canvas = options.canvas;
+    this.initPos = options.initPos;
+    this.finalPos = options.finalPos;
+  }
+
+  /**
+   * 执行命令
+   */
+  async execute() {
+	this.setObjectsPos(this.finalPos);
+    return true;
+  }
+  /**
+   * 撤销命令
+   * 应用初始状态
+   */
+  async undo() {
+    this.setObjectsPos(this.initPos);
+    return true;
+  }
+  
+  async setObjectsPos(pos) {
+	const objects = this.canvas.getObjects();
+	const arr = typeof pos === "object" ? [pos] : pos;
+    arr.forEach((item) => {
+      const obj = objects.find((o) => o.id === item.id);
+      if(obj) {
+        obj.set({
+          left: item.left,
+          top: item.top,
+        });
+      }
+    });
+    this.canvas.renderAll();
+  }
+}
diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
index 1243295a..fdf72140 100644
--- a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
@@ -234,7 +234,7 @@ export class AddObjectToLayerCommand extends Command {
               parent.clippingMask,
               this.canvas
             );
-            clippingMaskFabricObject.clipPath = null;
+            // clippingMaskFabricObject.clipPath = null;
             clippingMaskFabricObject.set({ absolutePositioned: true });
             this.fabricObject.clipPath = clippingMaskFabricObject;
             // 标记为脏对象
diff --git a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
index 54c6285b..e4cca18e 100644
--- a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
@@ -46,13 +46,13 @@ export class RasterizeLayerCommand extends Command {
       this.layerId
     );
     this.layer = layer;
-    this.parentLayer = parent;
+    // this.parentLayer = parent;
 
-    // 新增：如果有父图层，则栅格化父图层及其所有子图层
-    if (this.parentLayer) {
-      this.layer = this.parentLayer;
-      this.layerId = this.parentLayer.id;
-    }
+    // // 新增：如果有父图层，则栅格化父图层及其所有子图层
+    // if (this.parentLayer) {
+    //   this.layer = this.parentLayer;
+    //   this.layerId = this.parentLayer.id;
+    // }
 
     this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
 
@@ -153,7 +153,7 @@ export class RasterizeLayerCommand extends Command {
         });
 
         // 恢复原始图层结构
-        this.layers.value = [...this.originalLayerStructure];
+        this.layers.value = JSON.parse(this.originalLayerStructure);
 
         // 恢复原活动图层
         this.activeLayerId.value = this.layerId;
@@ -191,7 +191,7 @@ export class RasterizeLayerCommand extends Command {
    */
   _saveOriginalLayerStructure() {
     // 只保存相关的图层结构，而不是整个图层数组
-    this.originalLayerStructure = JSON.parse(JSON.stringify(this.layers.value));
+    this.originalLayerStructure = JSON.stringify(this.layers.value);
   }
 
   /**
@@ -517,12 +517,12 @@ export class ExportLayerToImageCommand extends Command {
           this.canvas
         );
 
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
         clippingMaskFabricObject.set({
           absolutePositioned: true,
         });
 
-        clippingMaskFabricObject.dirty = true;
+        // clippingMaskFabricObject.dirty = true;
         clippingMaskFabricObject.setCoords();
       }
 
diff --git a/src/component/Canvas/CanvasEditor/commands/StateCommands.js b/src/component/Canvas/CanvasEditor/commands/StateCommands.js
index 03ba2b41..40db92ac 100644
--- a/src/component/Canvas/CanvasEditor/commands/StateCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/StateCommands.js
@@ -2,6 +2,7 @@ import { findObjectById } from "../utils/helper";
 import { findLayerRecursively } from "../utils/layerHelper";
 import { restoreFabricObject } from "../utils/objectHelper";
 import { Command } from "./Command";
+import EventManager from "../utils/event.js";
 
 /**
  * 对象变换命令
@@ -75,7 +76,7 @@ export class TransformCommand extends Command {
 
     // 触发画布更新
     this.canvas.renderAll();
-
+	EventManager.emit("object:modified:execute", targetObject);
     return true;
   }
 
@@ -113,7 +114,7 @@ export class TransformCommand extends Command {
     }, 300);
     // 触发画布更新
     this.canvas.renderAll();
-
+	EventManager.emit("object:modified:undo", targetObject);
     return true;
   }
 
@@ -167,7 +168,7 @@ export class TransformCommand extends Command {
       );
 
       if (clippingMaskFabricObject) {
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
         clippingMaskFabricObject.set({
           absolutePositioned: true,
         });
diff --git a/src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js b/src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js
index cf6114a3..cd114d6c 100644
--- a/src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js
+++ b/src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js
@@ -233,7 +233,7 @@ export class UpdateGroupMaskPositionCommand extends Command {
         return;
       }
 
-      clippingMaskFabricObject.clipPath = null;
+    //   clippingMaskFabricObject.clipPath = null;
       clippingMaskFabricObject.set({
         absolutePositioned: true,
       });
diff --git a/src/component/Canvas/CanvasEditor/components/CropImage.vue b/src/component/Canvas/CanvasEditor/components/CropImage.vue
index 6eb5d7b7..eb49c6a7 100644
--- a/src/component/Canvas/CanvasEditor/components/CropImage.vue
+++ b/src/component/Canvas/CanvasEditor/components/CropImage.vue
@@ -1,5 +1,4 @@
 <template>
-	<!-- 图片列表面板 -->
 	<div v-if="showPanel" class="crop-image-overlay" @click.self="close">
 		<div class="crop-image-modal">
 			<div class="modal-header">
@@ -392,7 +391,7 @@
 <style scoped lang="less">
 	/* 弹窗遮罩层 */
 	.crop-image-overlay {
-		position: fixed;
+		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
@@ -420,8 +419,8 @@
 	.crop-image-modal {
 		background-color: #fff;
 		border-radius: 12px;
-		width: 80%;
-		height: 80%;
+		width: 90%;
+		height: 90%;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
index cf5b04aa..79bff827 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
+++ b/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"
           >
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
index b6971bb3..8575232c 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -81,14 +81,14 @@ const fillColorRef = ref(null);
 // 计算属性：可排序的根级图层（排除背景层和固定层）
 const sortableRootLayers = computed(() => {
   if (!layers) return [];
-  return layers.value.filter((layer) => !layer.parentId && !layer.isFixed && !layer.isBackground);
+  return layers.value.filter((layer) => !layer.parentId && !layer.isFixed && !layer.isBackground && !layer.isFixedOther);
 });
 
 // 计算属性：不可排序的固定图层（背景层和固定层）
 const fixedLayers = computed(() => {
   if (!layers) return [];
   return layers.value.filter((layer) => {
-    if (props.showFixedLayer) return !layer.parentId && (layer.isFixed || layer.isBackground);
+    if (props.showFixedLayer) return !layer.parentId && (layer.isFixed || layer.isBackground || layer.isFixedOther);
     return !layer.parentId && layer.isBackground; // 只显示背景层，不显示固定层 - 固定层用来做红绿图模式  和  放模特
   });
 });
@@ -576,7 +576,7 @@ function handleLayerClick(layer, event) {
   if (event.ctrlKey || event.metaKey || event.shiftKey || isMultiSelectMode.value) {
     toggleLayerSelection(layer, event);
   } else {
-    lastSelectLayerId.value = layer.id; // 更新最后选中的图层ID
+    if(!layer.isFixedClipMask) lastSelectLayerId.value = layer.id; // 更新最后选中的图层ID
     // 普通点击：进入单选模式
     // selectedLayerIds.value = [layer.id];
     // isMultiSelectMode.value = false;
@@ -596,7 +596,7 @@ function handleLayerClick(layer, event) {
         layerManager?.updateLayersObjectsInteractivity();
       }
     }
-    lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);
+    if(!layer.isFixedClipMask) lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);
   }
 }
 
@@ -999,7 +999,7 @@ function buildChildLayerContextMenuItems(childLayer) {
     {
       label: childLayer.locked ? "解锁图层" : "锁定图层",
       icon: childLayer.locked ? "CUnLock" : "CLock",
-      disabled: childLayer.isBackground || childLayer.isFixed,
+      disabled: childLayer.isBackground || childLayer.isFixed || childLayer.isDisableUnlock,
       action: () => toggleChildLayerLock(childLayer.id),
     },
     // 显示/隐藏
@@ -1633,7 +1633,6 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
       @delete-child="deleteChildLayer"
       @rename-child="renameChildLayer"
     />
-
     <!-- 固定层（背景层和固定层） -->
     <div v-if="fixedLayers.length > 0" class="fixed-layers">
       <!-- 遍历固定层 -->
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less b/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
index e90cbe5a..65f52ad7 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
@@ -340,6 +340,14 @@
   }
 }
 
+.layer-color-btn{
+	width: 30px;
+	height: 20px;
+	margin-right: 5px;
+	border-radius: 2px;
+	border: 1px solid #000;
+}
+
 // 图层操作
 .layer-actions {
   display: flex;
diff --git a/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue b/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
index 9e77c0e2..a97945db 100644
--- a/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue
@@ -384,7 +384,7 @@ async function prepareForLiquify(targetObj) {
       }
       updateAllParams();
 
-      console.log("液化环境准备完成");
+      console.log("液化环境准备完成",compositeCommand);
     }
   } catch (error) {
     console.error("准备液化环境失败:", error);
@@ -1614,6 +1614,7 @@ function close() {
  */
 function startPressTimer() {
   if (pressTimer.value) return;
+  if (currentMode.value === compositeCommand.value.liquifyManager.enhancedManager.modes.PUSH) return;
 
   pressTimer.value = setInterval(() => {
     // 计算按压持续时间
diff --git a/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue b/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue
new file mode 100644
index 00000000..3ea9eede
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue
@@ -0,0 +1,199 @@
+<template>
+	<!-- 颜色选择器模板 -->
+	<div v-show="showPanel" class="pallet-overlay" @click.self="close">
+		<div class="pallet-modal">
+			<!-- <div class="modal-header">
+				<h3></h3>
+				<button class="close-btn" @click="close">&times;</button>
+			</div> -->
+
+			<div class="modal-content">
+				<pallet
+					v-if="showPanel"
+					:selectColor="selectColor"
+					@selectUplpadColor="selectUplpadColor"
+				/>
+			</div>
+
+			<div class="modal-footer">
+				<div class="image-count" @click="close">
+					{{ $t("Canvas.close") }}
+				</div>
+				<div class="image-submit gallery_btn" @click="confirm">
+					{{ $t("Canvas.confirm") }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import {
+		ref,
+		watch,
+		computed,
+		defineProps,
+		onDeactivated,
+		reactive,
+		onMounted,
+		defineExpose,
+		nextTick,
+		onUnmounted,
+	} from "vue";
+	import pallet from "./pallet.vue";
+
+	import { useI18n } from "vue-i18n";
+
+	// Props
+	const props = defineProps([]);
+	const { t } = useI18n();
+	var resolveFn: (value: any) => void;
+	const showPanel = ref(false);
+	const open = (obj = {}) => {
+		selectColor.value = JSON.parse(JSON.stringify(obj));
+		showPanel.value = true;
+		return new Promise((resolve) => (resolveFn = resolve));
+	};
+	const close = () => {
+		showPanel.value = false;
+	};
+	//提交选中的T图片
+	const confirm = () => {
+		close();
+		resolveFn && resolveFn(JSON.parse(JSON.stringify(selectColor.value)));
+	};
+	const selectColor = ref({});
+	const selectUplpadColor = (item: any) => {
+		selectColor.value = JSON.parse(JSON.stringify(item));
+	};
+	defineExpose({
+		open,
+		close,
+	});
+</script>
+
+<style scoped lang="less">
+	/* 弹窗遮罩层 */
+	.pallet-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, 0.5);
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+		animation: fadeIn 0.3s ease;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* 弹窗主体 */
+	.pallet-modal {
+		background-color: #fff;
+		border-radius: 12px;
+		max-width: 90%;
+		max-height: 95%;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+		animation: modalSlideUp 0.3s ease;
+		overflow-y: auto;
+	}
+
+	@keyframes modalSlideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* 弹窗头部 */
+	.modal-header {
+		padding: 16px 20px;
+		background-color: rgba(255, 255, 255, 0.8);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+
+		h3 {
+			margin: 0;
+			font-size: 18px;
+			color: #333;
+			font-weight: 600;
+		}
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		font-size: 24px;
+		cursor: pointer;
+		color: #666;
+		padding: 0;
+		line-height: 1;
+		opacity: 0.7;
+		transition: all 0.2s;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover {
+			opacity: 1;
+			color: #333;
+			transform: scale(1.1);
+		}
+	}
+
+	/* 弹窗内容 */
+	.modal-content {
+		width: 35rem;
+		// max-width: 240px;
+		margin: 10px 20px;
+		background-color: #fff;
+		-webkit-overflow-scrolling: touch;
+		display: flex;
+	}
+
+	/* 弹窗底部 */
+	.modal-footer {
+		padding: 10px 20px;
+		background-color: rgba(255, 255, 255, 0.8);
+		// border-top: 1px solid rgba(0, 0, 0, 0.05);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+		> .image-submit {
+			font-size: 1.2rem;
+			line-height: 3.5rem;
+		}
+	}
+
+	.image-count {
+		font-size: 14px;
+		color: #666;
+		font-weight: 500;
+		cursor: pointer;
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue b/src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue
new file mode 100644
index 00000000..3bed7f61
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue
@@ -0,0 +1,666 @@
+<template>
+    <div class="pallet" ref="palletRef">
+		<div class="palletColo" @click="openPallet">
+			<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
+				{{ selectColor.hex }}
+			</div>
+			<div v-show="selectColor.gradient" class="palletBackColor" :style="{'background-image':`linear-gradient(${selectColor.gradient?.angle}deg,${setGradient(selectColor.gradient)})`}">
+			</div>
+		</div>
+		<div class="palletBox">
+			<div class="color_setting_block" @click.stop>
+				<Chrome class="chrome_color" v-model="color_"></Chrome>
+				<div class="color_setting_operateSingle">
+					<div class="color_setting_btn" :class="{active:!color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
+					<a-switch :checked="color?.gradient?.gradientShow"  @click="setOperate"/>
+					<div class="color_setting_btn" :class="{active:color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
+				</div>
+				<div class="color_setting_operate" v-if="color?.gradient?.gradientShow">
+					<div class="color_setting_operate_item color_setting_operate_control">
+						<div class="operate_item_box">
+							<div>{{ $t('ColorboardUpload.Alignment') }}</div>
+						</div>
+						<div class="operate_item_box operate_item_angle">
+							<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle(getMousePosition($event,false))" @touchstart="mousedownGradientAngle(getMousePosition($event,true))">
+								<div :style="{'transform':`rotate(${color.gradient.angle}deg)`}"></div>
+							</div>
+						</div>
+						<div class="operate_item_box operate_item_delete">
+							<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+						</div>
+					</div>
+					<div class="color_setting_operate_item color_setting_operate_input">
+						<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':color?.gradient?`linear-gradient(90deg,${setGradient(color.gradient)})`:'none'}">
+						</div>
+						<div v-for="item,index in color.gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == color.gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient(getMousePosition($event,false),item,index,)" @touchstart="mousedownGradient(getMousePosition($event,true),item,index,)"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,onMounted,onUnmounted,toRefs, reactive} from 'vue'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { message,Upload} from 'ant-design-vue';
+import { Sketch, Chrome} from '@ans1998/vue3-color'
+import { getMousePosition } from "@/tool/mdEvent";
+import { rgbaToHex } from "@/tool/util"
+import { color } from 'echarts/core';
+export default defineComponent({
+    components:{
+		Chrome,
+    },
+	props:{
+	    selectColor:{
+	        type:Object,
+			default:()=>{}
+	    },
+	},
+	emits:['selectUplpadColor'],
+    setup(props,{emit}) {
+		const {t} = useI18n()
+        const store = useStore();
+		const palletData = reactive({
+			palletShow: true,
+			palletList:[],
+			color_:{} as any,
+			color:{} as any,
+			updataSelectColorTime:null as any,
+			gradient:{
+				gradientList:[
+					{
+						rgba:{
+							r:117,
+							g:119,
+							b:255,
+							a:1,
+						},
+						left:'0%'
+					},{
+						rgba:{
+							r:0,
+							g:222,
+							b:152,
+							a:1,
+						},
+						left:'100%'
+					},
+				],
+				angle:45,
+				selectIndex:-1,
+				gradientShow:false,
+			},
+			setGradient:computed(()=>{
+				return (gradient:any)=>{
+					let gradientStr = ''
+					if(!gradient?.gradientList)return
+					gradient.gradientList.sort((a:any, b:any) => {
+						let aArr = a.left.split('%')[0]
+						let bArr = b.left.split('%')[0]
+						return aArr - bArr;
+					});
+					gradient.gradientList.forEach((item:any,index:any)=>{
+						let str = ','
+						if(gradient.gradientList.length == index+1)str = ''
+						let rgba = item.rgba?item.rgba:{r:255,g:255,b:255}
+						gradientStr += `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a}) ${item.left}${str}` 
+
+					})
+					return `${gradientStr}`
+				}
+			})
+			
+		})
+		const getpalletListDom = reactive({
+		})
+		const palletRef = ref(null)
+		watch(()=>palletData.color_,(newVal:any)=>{
+			if(!newVal?.rgba?.r)return
+			if(palletData.color?.gradient?.gradientShow){
+				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
+					r:newVal.rgba.r,
+					g:newVal.rgba.g,
+					b:newVal.rgba.b,
+					a:newVal.rgba.a,
+				}
+			}else{
+				palletData.color = newVal
+			}
+		})
+		watch(()=>palletData.color,(newVal:any)=>{
+			if(JSON.stringify(props.selectColor) != JSON.stringify(newVal)){
+				newVal.name = ''
+				newVal.tcx = ''
+				let rgba = [newVal.rgba.r,newVal.rgba.g,newVal.rgba.b]
+				let hex = rgbaToHex(rgba)
+				newVal.hex = hex
+				emit('selectUplpadColor',newVal)
+			}
+		},{deep: true })
+		const setOperate = ()=>{
+			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
+			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.gradient.selectIndex = 0
+			palletData.gradient.gradientShow = true
+			if(!palletData.color.gradient){
+				if(palletData.color.rgba.r){
+					palletData.gradient.gradientList[palletData.gradient.selectIndex].rgba = {
+						r:palletData.color.rgba.r,
+						g:palletData.color.rgba.g,
+						b:palletData.color.rgba.b,
+						a:1,
+					}
+				}
+				palletData.color.gradient = JSON.parse(JSON.stringify(palletData.gradient))
+			}else{
+				palletData.color.rgba = palletData.color.gradient.gradientList[0].rgba
+				palletData.color.gradient = null
+			}
+		}
+		const deleteGradientItem = ()=>{
+			if(palletData.color.gradient.gradientList.length <= 2)return
+			palletData.color.gradient.gradientList.splice(palletData.color.gradient.selectIndex,1)
+		}
+		const addGradient = (event:any)=>{
+			let gradientWidth = event.target.clientWidth
+			let left:any = event.offsetX/gradientWidth
+			palletData.color.gradient.gradientList.push({
+				rgba:palletData.color_.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		}
+		const mousedownGradientAngle = (event:any)=>{
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+			let mousedown = function(event:any){
+				let e = getMousePosition(event,false)
+				mouseDownOperation(e)
+			}
+
+			let touchstart = function(event:any){
+				let e = getMousePosition(event,true)
+				mouseDownOperation(e)
+			}
+			let mouseDownOperation = (e:any)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = (e.clientX) - X
+				let y = Y -( e.clientY)
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				palletData.color.gradient.angle = angle
+
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('touchmove',touchstart)
+				window.removeEventListener('touchend',mouseupGradientAngle)
+				
+				window.removeEventListener('mousemove',mousedown)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('touchmove',touchstart)
+			window.addEventListener('touchend',mouseupGradientAngle)
+
+			window.addEventListener('mousemove',mousedown)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		}
+
+		const mousedownGradient = (event:any,item:any,index:number)=>{
+			palletData.color.gradient.selectIndex = index
+			
+			
+            // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
+			let position = {
+				x:event.clientX,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedown = function(event:any){
+				let e = getMousePosition(event,false)
+				mousedownGradient(e)
+			}
+
+			let touchstart = function(event:any){
+				let e = getMousePosition(event,true)
+				mousedownGradient(e)
+			}
+			let mousedownGradient = (e:any)=>{
+				let left = ((e.clientX) - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('touchmove',touchstart)
+				window.removeEventListener('touchend',mouseupGradientAngle)
+				window.removeEventListener('mousemove',mousedown)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('touchmove',touchstart)
+			window.addEventListener('touchend',mouseupGradientAngle)
+
+			window.addEventListener('mousemove',mousedown)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+			
+			
+		}
+		const selectImgItem = ()=>{
+
+		}
+		const openPallet = ()=>{
+			if(palletData.palletShow && props.selectColor?.rgba?.r){
+				if(props.selectColor.gradient){
+					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
+				}else{
+					palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
+					palletData.gradient.gradientShow = false
+				}
+			
+				palletData.color = JSON.parse(JSON.stringify(props.selectColor))
+			}else{
+			}
+		}
+		// 点击外部区域关闭颜色选择器
+		const handleClickOutside = (event: Event) => {
+			const target = event.target as HTMLElement;
+			const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
+			const palletColo = palletRef.value.querySelector('.palletColo');
+			
+			// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
+			if (palletData.palletShow && colorSettingBlock && 
+				!colorSettingBlock.contains(target) && 
+				!palletColo?.contains(target)) {
+				palletData.palletShow = false;
+			}
+		}
+
+		onMounted(()=>{
+			// 添加点击外部区域监听器
+			// document.addEventListener('click', handleClickOutside);
+			
+			nextTick().then(()=>{
+				const backIcon = document.createElement('div');
+				backIcon.classList.add('vc-sketch-color-wrap')
+				let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
+				dropperDom.appendChild(backIcon);
+				backIcon.addEventListener('click',async ()=>{
+					try {
+						const dropper = new EyeDropper();
+						const result = await dropper.open();
+						let hex = result.sRGBHex.replace("#", "");
+						// 将十六进制颜色码拆分成红、绿、蓝三个部分
+						const r = parseInt(hex.substring(0, 2), 16);
+						const g = parseInt(hex.substring(2, 4), 16);
+						const b = parseInt(hex.substring(4, 6), 16);
+						palletData.color = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
+						// return `rgb(${r}, ${g}, ${b})`;
+						// box.style.backgroundColor = label.textContent = result.sRGBHex;
+					} catch (e) {
+						message.info(t('DesignDetailAlter.jsContent1'))
+					}
+				})
+				openPallet();
+			})
+		})
+
+		onUnmounted(()=>{
+			// 清理事件监听器
+			// document.removeEventListener('click', handleClickOutside);
+		})
+        return{
+			...toRefs(palletData),
+			...toRefs(getpalletListDom),
+			palletRef,
+			openPallet,
+			selectImgItem,
+			setOperate,
+			deleteGradientItem,
+			addGradient,
+			mousedownGradientAngle,
+			mousedownGradient,
+			getMousePosition,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .pallet{
+		// position: absolute;
+		width: 100%;
+		user-select: none;
+		> .palletColo{
+			width: 100%;
+			height: 7rem;
+			border-radius: .5rem;
+			border: 1px solid #000;
+			padding: .5rem .6rem;
+			cursor: pointer;
+			> .palletBackColor{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		> .palletBox{
+			margin-top: 1.5rem;
+			width: 100%;
+			z-index: 2;
+			> .color_setting_block{
+				margin: auto;
+				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+				width: 100%;
+				// border-radius: calc(1rem*1.2);
+				overflow: hidden;
+				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+				.vc-chrome{
+					background: rgba(0,0,0,0);
+					box-shadow:none;
+				}
+				:deep(.chrome_color){
+					width: 100%;
+					overflow: hidden;
+
+					.vc-chrome-saturation-wrap{
+						width: 30rem;
+						height: 30rem;
+						margin: 2rem auto;
+						padding-bottom: 0;
+					}
+					.vc-saturation-pointer{
+						pointer-events: none;
+					}
+					.vc-chrome-body{
+						padding: 0;
+						width: 90%;
+						margin: 2 auto;
+						margin: 0 auto;
+						background: rgba(0,0,0,0);
+						margin-bottom: 3rem;
+						// display: none;
+						.vc-chrome-fields-wrap{
+							margin-top: 5%;
+							padding: 0;
+							position: relative;
+							.vc-chrome-toggle-btn{
+								width: calc(3.2rem*1.2);
+								.vc-chrome-toggle-icon{
+									height: auto;
+									margin-right: calc(-0.4rem*1.2);
+									margin-top: calc(0rem*1.2);
+									display: flex;
+									flex-direction: column;
+									align-items: center;
+									svg{
+										width: calc(2.4rem*1.2) !important;
+										height: calc(2.4rem*1.2) !important;
+									}
+								}
+							}
+							.vc-chrome-fields{
+								.vc-chrome-field{
+									padding-left: calc(.6rem*1.2);
+								}
+								.vc-input__label{
+									font-size: calc(1.6rem*1.2);
+								}
+								.vc-input__input{
+									font-size: 2rem;
+									height: 4rem;
+								}
+							}
+							.ant-upload-list{
+								
+							}
+							.vc-sketch-color-wrap{
+								background-image: url(@/assets/images/homePage/dropper.png);
+								background-size: 3rem;
+								background-repeat: no-repeat;
+								background-position: 50%;
+								cursor: pointer;
+								margin: 0;
+								width: 4rem;
+								height: 4rem;
+								padding: calc(.7rem*1.2);
+								border: 1px solid;
+								position: absolute;
+								bottom: -2rem;
+								right: 0rem;
+								border-radius: calc(.5rem*1.2);
+								
+							}
+							.vc-chrome-fields{
+								.vc-input__label{
+									margin-top: calc(1rem*1.2);
+								}
+							}
+							.vc-chrome-fields:nth-child(2){
+								>:last-of-type {
+									display: none;
+								}
+							}
+							.vc-chrome-fields:nth-child(3){
+								>:last-of-type {
+									display: none;
+								}
+							}
+						}
+						.vc-chrome-controls{
+							align-items: center;
+							flex-direction: row-reverse;
+							.vc-chrome-color-wrap{
+								// width: 3.6rem*1.2);
+								margin-left: calc(2rem*1.2);
+								width: auto;
+								.vc-chrome-active-color{
+									border-radius: 50%;
+								}
+								.vc-chrome-active-color,.vc-checkerboard{
+									width: calc(3rem*1.2);
+									height: calc(3rem*1.2);
+								}
+							}
+							.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
+								.vc-hue{
+									border-radius: 15px;
+								}
+								.vc-alpha{
+									border-radius: 15px;
+									overflow: hidden;
+								}
+								height: 2rem;
+								margin: 0;
+								.vc-hue-pointer{
+									transform: translateX(-1.25rem);
+								}
+								.vc-hue-picker{
+									width: 2.5rem;
+									height: 2.5rem;
+									border-radius: 50%;
+									transform: translate(0px,-3px);
+								}
+							}
+							.vc-chrome-alpha-wrap{
+								display: none;
+							}
+						}
+					}
+					.vc-chrome-saturation-wrap .vc-saturation-circle{
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+					}
+				}
+				.color_block{
+						// margin-top: calc(1rem;
+						// display: flex;
+						// justify-content: space-between;
+						// font-size: calc(1.6rem;
+						width: 100%;
+						padding: 0 5%;
+						padding-bottom: 5%;
+						margin: calc(0.5rem*1.2) auto;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.color_right{
+							width: 13rem;
+							font-size: calc(1.2rem*1.2);
+							color: #666666;
+							.color_rgb_block{
+								display: flex;
+								.rgb_item{
+									margin-left: calc(.2rem*1.2);
+								}
+							}
+						}
+						.color_left{
+							cursor: pointer;
+							color: rgb(153, 153, 153);
+						}
+						.color_right,.color_left{
+							>div{
+								display: flex;
+								align-items: center;
+							}
+							.color_HEX_block,.color_rgb_block{
+								padding: .25rem .6rem;
+								box-shadow: inset 0 0 0 1px #ccc;
+								border-radius: .5rem;
+								justify-content: space-around;
+								text-transform:uppercase;
+								.color_block_bg{
+									width: 1.8rem;
+									height: 2.5rem;
+									// margin-right: .5rem;
+									display: flex;
+									justify-content: space-between;
+								}
+							}
+							.color_block_bg{
+							}
+						}
+						
+					}
+					.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+						display: flex;
+						justify-content: center;
+						.color_setting_btn{
+							margin: 0 1rem;
+							color: rgba(0, 0, 0, 0.5);
+							&.active{
+								color: rgba(0, 0, 0, 0.7);
+			                    font-weight: 900;
+							}
+						}
+					}
+					.color_setting_operate{
+						*{
+							-webkit-touch-callout: none; /* iOS Safari */
+							-webkit-user-select: none; /* Safari */
+							-moz-user-select: none; /* Firefox */
+							-ms-user-select: none; /* Internet Explorer/Edge */
+							user-select: none;
+						}
+						.color_setting_operate_item{
+							display: flex;
+							justify-content: space-around;
+							align-items: center;
+							.operate_item_box{
+							}
+						}
+						.color_setting_operate_control{
+							.operate_item_delete,.operate_item_angle{
+								cursor: pointer;
+							}
+							.operate_item_delete{
+								i{
+								display: flex;
+									font-size: 3rem;
+								}
+							}
+							.operate_item_angle{
+								.operate_item_angle_box{
+									border-radius: 50%;
+									width: 4rem;
+									height: 4rem;
+									border: solid 2px #000;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									cursor: pointer;
+									>div{
+										height: 100%;
+										width: 1rem;
+										position: relative;
+										pointer-events:none;
+									}
+									>div::before{
+										position: absolute;
+										content: "";
+										top: 0.2rem;
+										left: 0;
+										width: 1rem;
+										height: 1rem;
+										border-radius: 50%;
+										background: #000;
+									}
+								}
+							}
+						}
+						.color_setting_operate_input{
+							width: 80%;
+							// padding: 0 10%;
+							margin: 1.2rem 10%;
+							border-radius: 10%;
+							position: relative;
+							height: 2.5rem;
+							.color_setting_operate_bg{
+								border-radius: .5rem;
+								width: 100%;
+								height: 2.5rem;
+								background: #fff;
+								position: absolute;
+							}
+						}
+						.color_setting_operate_btn{
+							position: absolute;
+							top: 50%;
+							transform: translate(-50%,-50%);
+							left: 0;
+							width: 1rem;
+							height: 110%;
+							border: .2rem solid;
+							border-radius: .5rem;
+							cursor: pointer;
+							box-sizing: content-box;
+							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}
+			}	
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
deleted file mode 100644
index c2b5755f..00000000
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue
+++ /dev/null
@@ -1,744 +0,0 @@
-<template>
-	<transition name="fade">
-		<div
-			class="select-menu-panel"
-			v-if="visible"
-			:class="{ active: !closePanel }"
-		>
-			<div class="btn" @click="setClosePanel">
-				<i class="fi fi-br-angle-left"></i>
-			</div>
-			<!-- 变换工具顶部 -->
-			<div class="panel-select">
-				<!-- <div class="panel-header">
-					<div class="header-title">变换工具</div>
-				</div> -->
-				<!-- 分割线 -->
-				<!-- <div class="panel-divider"></div> -->
-				<!-- 变换工具内容 -->
-				<div class="tool-content">
-					<div
-						class="object-item"
-						v-for="v in activeObjects"
-						:key="v.id"
-					>
-						<div class="title">{{ v.layer?.name }}</div>
-						<div class="list">
-							<div>
-								<span class="label">W</span>
-								<input
-									type="number"
-									:value="v.width"
-									disabled
-								/>
-							</div>
-							<div>
-								<span class="label">H</span>
-								<input
-									type="number"
-									:value="v.height"
-									disabled
-								/>
-							</div>
-							<!-- <div>
-								<span class="label">X</span>
-								<input type="number" :value="v.left" disabled />
-							</div>
-							<div>
-								<span class="label">Y</span>
-								<input type="number" :value="v.top" disabled />
-							</div> -->
-							<div>
-								<span class="label iconfont icon-angle"></span>
-								<input
-									type="number"
-									:value="Number(Number(v.angle).toFixed(3))"
-									@change="(e) => changeAngle(e, v)"
-								/>
-							</div>
-							<div class="btn" @click="clickflipHorizontal(v)">
-								<i class="iconfont icon-flip-horizontal"></i>
-								<p class="tip">
-									{{ t("Canvas.flipHorizontal") }}
-								</p>
-							</div>
-							<div class="btn" @click="clickflipVertical(v)">
-								<i class="iconfont icon-flip-vertical"></i>
-								<p class="tip">
-									{{ t("Canvas.flipVertical") }}
-								</p>
-							</div>
-							<div class="btn" @click="clickCropImage(v)">
-								<i class="iconfont icon-caijian"></i>
-								<p class="tip">
-									{{ t("Canvas.cropAndAdd") }}
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</transition>
-</template>
-
-<script setup>
-	import showViewVideo from "@/tool/mount";
-	import { ref, onMounted, watch, onUnmounted } from "vue";
-	import { useI18n } from "vue-i18n";
-	import { ToolCommand } from "../commands/ToolCommands";
-	import { OperationType } from "../utils/layerHelper";
-	import { loadImageUrlToLayer } from "../utils/imageHelper";
-	import { TransformCommand } from "../commands/StateCommands";
-	const props = defineProps({
-		canvas: {
-			type: Object,
-			required: true,
-		},
-		commandManager: {
-			type: Object,
-			required: true,
-		},
-		selectManager: {
-			type: Object,
-			required: true,
-		},
-		layerManager: {
-			type: Object,
-			required: true,
-		},
-		toolManager: {
-			type: Object,
-			required: true,
-		},
-		activeTool: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	});
-
-	// 响应式数据
-	const visible = ref(false);
-	//打开隐藏操作面板
-	const closePanel = ref(false);
-	const setClosePanel = () => {
-		closePanel.value = !closePanel.value;
-	};
-
-	// 国际化
-	const { t } = useI18n();
-
-	onMounted(() => {
-		setupCanvasListeners();
-	});
-	onUnmounted(() => {
-		removeCanvasListeners();
-	});
-
-	// 监听 activeTool 变化
-	watch(
-		() => props.activeTool,
-		(newTool) => {
-			if (newTool === OperationType.SELECT) {
-				show();
-			} else {
-				close();
-			}
-		},
-		{ immediate: true }
-	);
-
-	/**
-	 * 显示面板
-	 */
-	function show() {
-		if (activeObjects.value.length === 0) return;
-		visible.value = true;
-		closePanel.value = true;
-	}
-
-	/**
-	 * 关闭面板
-	 */
-	function close() {
-		visible.value = false;
-	}
-	// 获取当前选中的对象
-	const activeObjects = ref([]);
-	const getActiveObject = (e) => {
-		console.log("==========切换激活对象", e);
-		activeObjects.value = e.selected.map((v) => v);
-		activeObjects.value.forEach((v) => {
-			v.layer = props.layerManager.getLayerById(v.layerId);
-		});
-		if (activeObjects.value.length === 0) {
-			close();
-		} else {
-			show(false);
-		}
-	};
-	const lastSelectLayerId = inject("lastSelectLayerId");
-	const layers = inject("layers");
-	const transformObject = (activeObj, initialState, finalState) => {
-		const transformCmd = new TransformCommand({
-			canvas: props.canvas,
-			objectId: activeObj.id,
-			initialState,
-			finalState,
-			objectType: activeObj.type,
-			name: `变换 ${activeObj.type || "对象"}`,
-			layerManager: props.layerManager,
-			layers: layers,
-			lastSelectLayerId: lastSelectLayerId,
-		});
-		props.layerManager.commandManager.execute(transformCmd, {
-			name: "对象修改",
-		});
-	};
-
-	/**
-	 * 根据左上角坐标计算旋转后的新坐标
-	 * @param {number} W - 宽度
-	 * @param {number} H - 高度
-	 * @param {number} currentX - 当前左上角x坐标
-	 * @param {number} currentY - 当前左上角y坐标
-	 * @param {number} currentAngleDeg - 当前角度(度)
-	 * @param {number} newAngleDeg - 新角度(度)
-	 * @returns {Object} 旋转后的左上角坐标 {x, y}
-	 */
-	function calculateRotatedTopLeftDeg(
-		W,
-		H,
-		currentX,
-		currentY,
-		currentAngleDeg,
-		newAngleDeg
-	) {
-		const currentAngle = (currentAngleDeg * Math.PI) / 180;
-		const newAngle = (newAngleDeg * Math.PI) / 180;
-		// 1. 用当前角度计算中心点位置
-		const cosCurrent = Math.cos(currentAngle);
-		const sinCurrent = Math.sin(currentAngle);
-		const Cx = currentX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
-		const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
-
-		// 2. 用新角度计算旋转后的左上角位置
-		const cosNew = Math.cos(newAngle);
-		const sinNew = Math.sin(newAngle);
-		const newX = Cx + (-W / 2) * cosNew - (-H / 2) * sinNew;
-		const newY = Cy + (-W / 2) * sinNew + (-H / 2) * cosNew;
-
-		return { x: newX, y: newY };
-	}
-	// 改变角度
-	const changeAngle = (e, obj) => {
-		const initialState = TransformCommand.captureTransformState(obj);
-		const finalState = { ...initialState };
-		const angle = e.target.value;
-		if (obj.originX === "left" && obj.originY === "top") {
-			const width = obj.width * obj.scaleX;
-			const height = obj.height * obj.scaleY;
-			const left = obj.left;
-			const top = obj.top;
-			const { x, y } = calculateRotatedTopLeftDeg(
-				width,
-				height,
-				left,
-				top,
-				obj.angle,
-				angle
-			);
-			finalState.left = x;
-			finalState.top = y;
-		}
-		finalState.angle = angle;
-		transformObject(obj, initialState, finalState);
-	};
-	// 水平翻转
-	const clickflipHorizontal = (obj) => {
-		const initialState = TransformCommand.captureTransformState(obj);
-		const finalState = { ...initialState };
-		finalState.flipX = !finalState.flipX;
-		transformObject(obj, initialState, finalState);
-	};
-	// 垂直翻转
-	const clickflipVertical = (obj) => {
-		const initialState = TransformCommand.captureTransformState(obj);
-		const finalState = { ...initialState };
-		finalState.flipY = !finalState.flipY;
-		transformObject(obj, initialState, finalState);
-	};
-	// 裁剪图片
-	const cropImage = inject("cropImage");
-	const clickCropImage = async (obj) => {
-		const base64 = await props.layerManager.getLayerToBase64(obj.layerId);
-		if(base64) cropImage(base64).then((res) => {
-			loadImageUrlToLayer({
-				imageUrl: res,
-				layerManager: props.layerManager,
-				canvas: props.canvas,
-				toolManager: props.toolManager,
-			})
-		});
-	};
-
-	const updateActiveObjects = (arrs, keys) => {
-		arrs.forEach((v) => {
-			activeObjects.value.forEach((item) => {
-				if (item.id === v.id) {
-					keys.forEach((key) => (item[key] = v[key]));
-				}
-			});
-			activeObjects.value = [...activeObjects.value];
-		});
-	};
-
-	const objectRotatingChange = (e) => {
-		const arrs = [];
-		if (e.target._objects) {
-			e.target._objects.forEach((v) => arrs.push(v));
-		} else {
-			arrs.push(e.target);
-		}
-		updateActiveObjects(arrs, ["angle"]);
-	};
-
-	/**
-	 * 设置画布事件监听
-	 */
-	function setupCanvasListeners() {
-		if (!props.canvas) return;
-		// 鼠标事件
-		props.canvas.on("selection:created", getActiveObject);
-		props.canvas.on("selection:updated", getActiveObject);
-		props.canvas.on("selection:cleared", close);
-		props.canvas.on("object:rotating", objectRotatingChange);
-	}
-
-	/**
-	 * 移除画布事件监听
-	 */
-	function removeCanvasListeners() {
-		if (!props.canvas) return;
-
-		// 移除鼠标事件
-		props.canvas.off("selection:created", getActiveObject);
-		props.canvas.off("selection:updated", getActiveObject);
-		props.canvas.off("selection:cleared", close);
-		props.canvas.off("object:rotating", objectRotatingChange);
-	}
-</script>
-
-<style scoped lang="less">
-	.select-menu-panel {
-		position: absolute;
-		bottom: 22px;
-		left: 20px;
-		right: 20px;
-		max-width: min(90vw, 640px);
-		margin: 0 auto;
-		background-color: rgba(255, 255, 255, 0.95);
-		backdrop-filter: blur(15px);
-		-webkit-backdrop-filter: blur(15px);
-		border-radius: 8px;
-		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-		z-index: 1000;
-		color: #333;
-		border: 1px solid rgba(0, 0, 0, 0.05);
-		user-select: none;
-		&.active {
-			transform: translateY(100%);
-			> .btn {
-				> i {
-					transform: rotate(90deg);
-				}
-			}
-		}
-		> .btn {
-			width: 100%;
-			height: 22px;
-			text-align: center;
-			cursor: pointer;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			> i {
-				font-size: 1.4rem;
-				transform: rotate(270deg);
-			}
-		}
-	}
-
-	/* 平板和手机适配 */
-	@media screen and (max-width: 768px) {
-		.select-menu-panel {
-			bottom: 15px;
-			left: 15px;
-			right: 15px;
-			max-width: calc(100vw - 30px);
-			border-radius: 6px;
-		}
-	}
-
-	@media screen and (max-width: 480px) {
-		.select-menu-panel {
-			bottom: 10px;
-			left: 10px;
-			right: 10px;
-			max-width: calc(100vw - 20px);
-		}
-	}
-
-	.select-menu-panel.is-active {
-		transform: translateY(0);
-	}
-
-	.panel-header {
-		padding: 8px 15px;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-		background-color: rgba(255, 255, 255, 0.8);
-		border-radius: 8px 8px 0 0;
-	}
-
-	.header-title {
-		font-size: 13px;
-		font-weight: 500;
-		color: #333;
-		text-align: left;
-	}
-
-	.panel-select {
-		// padding: 0 0 10px;
-	}
-
-	/* 平板适配 */
-	@media screen and (max-width: 768px) {
-		.panel-header {
-			padding: 6px 12px;
-			border-radius: 6px 6px 0 0;
-		}
-	}
-
-	/* 手机适配 */
-	@media screen and (max-width: 480px) {
-		.panel-header {
-			padding: 5px 10px;
-		}
-
-		.header-title {
-			font-size: 12px;
-		}
-	}
-
-	.tool-btn {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(0, 0, 0, 0.05);
-		border: none;
-		border-radius: 6px;
-		padding: 6px;
-		color: #333;
-		cursor: pointer;
-		transition: all 0.2s;
-	}
-
-	.tool-btn span {
-		margin-top: 0;
-		font-size: 12px;
-	}
-
-	.tool-btn svg {
-		width: 24px;
-		height: 24px;
-	}
-
-	.tool-btn:hover {
-		background-color: rgba(0, 0, 0, 0.08);
-	}
-
-	.tool-btn.active {
-		background-color: #007aff;
-		color: white;
-	}
-
-	.panel-divider {
-		height: 1px;
-		background-color: rgba(0, 0, 0, 0.05);
-		margin: 0 10px 5px 10px;
-	}
-
-	.tool-content {
-		overflow-y: auto;
-		max-height: 220px;
-		margin-top: 10px;
-		padding: 0 10px;
-		> .object-item {
-			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-			padding: 10px 0;
-			&:last-child {
-				border-bottom: none;
-			}
-			> .title {
-				text-align: left;
-				margin-bottom: 5px;
-			}
-			> .list {
-				display: flex;
-				> div {
-					margin-right: 15px;
-					font-size: 14px;
-					color: #474747;
-					> .label {
-						margin-right: 5px;
-					}
-					> input {
-						width: 65px;
-					}
-					.iconfont {
-						font-size: 14px;
-					}
-				}
-				> div.btn {
-					position: relative;
-					min-width: 24px;
-					cursor: pointer;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 2px;
-					transition: background-color 0.2s;
-					background-color: rgba(0, 0, 0, 0);
-					> .tip {
-						position: absolute;
-						top: -5px;
-						left: 50%;
-						transform: translate(-50%, -100%);
-						background-color: rgba(0, 0, 0, 0.7);
-						color: white;
-						padding: 0.4rem 0.8rem;
-						border-radius: 0.4rem;
-						margin-left: 0.8rem;
-						font-size: 1.2rem;
-						white-space: nowrap;
-						pointer-events: none;
-						display: none;
-						&::after {
-							content: "";
-							position: absolute;
-							top: 97%;
-							left: 50%;
-							transform: translateX(-50%);
-							width: 0;
-							height: 0;
-							border-left: 5px solid transparent;
-							border-right: 5px solid transparent;
-							border-top: 5px solid rgba(0, 0, 0, 0.8);
-						}
-					}
-					&:hover {
-						background-color: rgba(0, 0, 0, 0.08);
-						> .tip {
-							display: block;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	/* 平板适配 - 每行4个按钮 */
-	@media screen and (max-width: 768px) {
-		.tool-content {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 8px 6px;
-			padding: 0 8px;
-		}
-	}
-
-	/* 手机适配 - 每行3个按钮 */
-	@media screen and (max-width: 480px) {
-		.tool-content {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 6px 4px;
-			padding: 0 6px;
-		}
-
-		.header-btn {
-			font-size: 11px;
-			padding: 2px 4px;
-			min-width: 28px;
-		}
-	}
-
-	.action-btn {
-		display: flex;
-		// flex-direction: column;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		background: none;
-		border: none;
-		color: #333;
-		cursor: pointer;
-		padding: 0;
-		gap: 4px;
-		.c-svg {
-			width: auto;
-		}
-	}
-
-	.action-btn svg {
-		width: 22px;
-		height: 22px;
-		margin-bottom: 8px;
-	}
-
-	.btn-text {
-		display: block;
-		font-size: 12px;
-		text-align: center;
-	}
-
-	.action-btn:hover {
-		color: #007aff;
-	}
-
-	.action-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* 对话框样式 */
-	.dialog-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba(0, 0, 0, 0.5);
-		backdrop-filter: blur(5px);
-		-webkit-backdrop-filter: blur(5px);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 2000;
-	}
-
-	.dialog-container {
-		background-color: #ffffff;
-		border-radius: 12px;
-		width: 280px;
-		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-		overflow: hidden;
-		border: 1px solid rgba(0, 0, 0, 0.05);
-	}
-
-	.dialog-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 12px 15px;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-	}
-
-	.dialog-header h3 {
-		margin: 0;
-		font-size: 15px;
-		color: #333;
-		font-weight: 500;
-	}
-
-	.close-dialog-btn {
-		background: none;
-		border: none;
-		color: #666;
-		font-size: 18px;
-		cursor: pointer;
-		padding: 0;
-		line-height: 1;
-	}
-
-	.dialog-content {
-		padding: 15px;
-	}
-
-	.feather-control {
-		display: flex;
-		align-items: center;
-		margin-bottom: 20px;
-	}
-
-	.slider-control {
-		flex: 1;
-		height: 4px;
-		background: rgba(0, 0, 0, 0.1);
-		border-radius: 2px;
-		-webkit-appearance: none;
-		appearance: none;
-		margin-right: 10px;
-	}
-
-	.slider-control::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		background: #007aff;
-		cursor: pointer;
-	}
-
-	.feather-value {
-		font-size: 14px;
-		color: #333;
-		min-width: 40px;
-		text-align: right;
-	}
-
-	.dialog-buttons {
-		display: flex;
-		justify-content: flex-end;
-		gap: 10px;
-		margin-top: 15px;
-	}
-
-	.cancel-btn,
-	.confirm-btn {
-		padding: 8px 16px;
-		border-radius: 6px;
-		font-size: 14px;
-		cursor: pointer;
-		border: none;
-	}
-
-	.cancel-btn {
-		background-color: rgba(0, 0, 0, 0.05);
-		color: #333;
-	}
-
-	.confirm-btn {
-		background-color: #007aff;
-		color: white;
-	}
-
-	.color-picker {
-		width: 100%;
-		height: 40px;
-		border: none;
-		border-radius: 6px;
-		cursor: pointer;
-	}
-
-	.fade-enter-active,
-	.fade-leave-active {
-		transition: opacity 0.3s, transform 0.3s;
-	}
-	.fade-enter-from,
-	.fade-leave-to {
-		opacity: 0;
-		transform: translateY(30px);
-	}
-</style>
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
new file mode 100644
index 00000000..dfd96563
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
@@ -0,0 +1,133 @@
+<template>
+	<div class="repeat-setting">
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.angle") }}</span>
+			<angle-tool
+				:angle="angle"
+				@input="(e) => emit('inputFillAngle', e)"
+				@change="(e) => emit('changeFillAngle', e)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.scale") }}</span>
+			<slider
+				:min="1"
+				:max="500"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${scale}%`"
+				:value="scale"
+				@input="inputFillScale"
+				@change="changeFillScale"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">Gap X</span>
+			<slider
+				:min="0"
+				:max="1000"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${v}px`"
+				:value="gapX"
+				@input="(e) => emit('inputFill_Gap', e, gapY)"
+				@change="(e) => emit('changeFill_Gap', e, gapY)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">Gap Y</span>
+			<slider
+				:min="0"
+				:max="1000"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${v}px`"
+				:value="gapY"
+				@input="(e) => emit('inputFill_Gap', gapX, e)"
+				@change="(e) => emit('changeFill_Gap', gapX, e)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.offset") }}</span>
+			<offset-tool
+				:top="(props.object.fill?.offsetY / props.object.height) * 100"
+				:left="(props.object.fill?.offsetX / props.object.width) * 100"
+				@input="(e) => emit('inputFillOffset', e)"
+				@change="(e) => emit('changeFillOffset', e)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, computed } from "vue";
+	import { getTransformScaleAngle } from "../../utils/helper";
+	import AngleTool from "../tools/AngleTool.vue";
+	import OffsetTool from "../tools/OffsetTool.vue";
+	import Slider from "../tools/Slider.vue";
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	const props = defineProps({
+		object: {
+			required: true,
+			type: Object,
+		},
+	});
+	const angle = computed(
+		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
+	);
+	const scale = computed(() => {
+		const patternTransform = props.object.fill?.patternTransform;
+		const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
+		return Number(Number(scaleValue).toFixed(2));
+	});
+	const gapX = computed(() => props.object.fill_?.gapX || 0);
+	const gapY = computed(() => props.object.fill_?.gapY || 0);
+	const emit = defineEmits([
+		"inputFillAngle",
+		"changeFillAngle",
+		"inputFillOffset",
+		"changeFillOffset",
+		"inputFillScale",
+		"changeFillScale",
+		"inputFill_Gap",
+		"changeFill_Gap",
+	]);
+	const inputFillScale = (e) => {
+		const scale = e / 100;
+		emit("inputFillScale", scale);
+	};
+	const changeFillScale = (e) => {
+		const scale = e / 100;
+		emit("changeFillScale", scale);
+	};
+</script>
+
+<style scoped lang="less">
+	.repeat-setting {
+		user-select: none;
+		> .repeat-setting-item {
+			display: flex;
+			align-items: center;
+			//虚线
+			> .label {
+				min-width: 50px;
+				font-size: 14px;
+			}
+			> .angle-tool {
+				width: 120px;
+			}
+		}
+		> p {
+			margin: 10px 0;
+			width: 100%;
+			height: 0;
+			border-bottom: 1px dashed #e5e5e5;
+		}
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/data.js b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/data.js
new file mode 100644
index 00000000..a5cdbf34
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/data.js
@@ -0,0 +1,47 @@
+import { ref } from "vue";
+import i18n from "@/lang/index.ts";
+const { t } = i18n.global;
+
+/** 填充重复模式 */
+export const getSelectOptions = () => ref([
+	{ value: "no-repeat", label: t("Canvas.noRepeat") },
+	{ value: "repeat", label: t("Canvas.repeat") },
+	{ value: "repeat-x", label: t("Canvas.repeatX") },
+	{ value: "repeat-y", label: t("Canvas.repeatY") },
+]);
+
+/** 图层混合模式 */
+export const getLayerCompositeOptions = () => ref([
+	{ value: "source-over", label: t("Canvas.CompositeNormal"), tip: t("Canvas.CompositeNormalTip") },// 正常
+	{ value: "darken", label: t("Canvas.CompositeDarken"), tip: t("Canvas.CompositeDarkenTip") },// 变暗
+	{ value: "multiply", label: t("Canvas.CompositeMultiply"), tip: t("Canvas.CompositeMultiplyTip") },// 正片叠底
+	{ value: "color-burn", label: t("Canvas.CompositeColorBurn"), tip: t("Canvas.CompositeColorBurnTip") },// 颜色加深
+
+	{ value: "lighten", label: t("Canvas.CompositeLighten"), tip: t("Canvas.CompositeLightenTip") },// 颜色减淡
+	{ value: "screen", label: t("Canvas.CompositeScreen"), tip: t("Canvas.CompositeScreenTip") },// 滤色
+	{ value: "color-dodge", label: t("Canvas.CompositeColorDodge"), tip: t("Canvas.CompositeColorDodgeTip") },// 颜色减淡
+	{ value: "lighter", label: t("Canvas.CompositeLighter"), tip: t("Canvas.CompositeLighterTip") },// 颜色减淡
+
+	{ value: "overlay", label: t("Canvas.CompositeOverlay"), tip: t("Canvas.CompositeOverlayTip") },// 叠加
+	{ value: "soft-light", label: t("Canvas.CompositeSoftLight"), tip: t("Canvas.CompositeSoftLightTip") },// 柔光
+	{ value: "hard-light", label: t("Canvas.CompositeHardLight"), tip: t("Canvas.CompositeHardLightTip") },// 强光
+
+	{ value: "difference", label: t("Canvas.CompositeDifference"), tip: t("Canvas.CompositeDifferenceTip") },// 差值
+	{ value: "exclusion", label: t("Canvas.CompositeExclusion"), tip: t("Canvas.CompositeExclusionTip") },// 排除
+
+	{ value: "hue", label: t("Canvas.CompositeHue"), tip: t("Canvas.CompositeHueTip") },// 色相
+	{ value: "saturation", label: t("Canvas.CompositeSaturation"), tip: t("Canvas.CompositeSaturationTip") },// 饱和度
+	{ value: "color", label: t("Canvas.CompositeColor"), tip: t("Canvas.CompositeColorTip") },// 颜色
+	{ value: "luminosity", label: t("Canvas.CompositeLuminosity"), tip: t("Canvas.CompositeLuminosityTip") },// 亮度
+
+	// { value: "destination-over", label: "背后", tip:"背后：新图形绘制到原内容下方" },
+	// { value: "source-in", label: "颜色加深", tip:"颜色加深：只显示重叠部分，其他透明" },
+	// { value: "destination-in", label: "颜色减淡", tip:"颜色减淡：只显示原内容与新图形重叠部分" },
+	// { value: "source-out", label: "排除", tip:"排除：只显示新图形中不重叠部分" },
+	// { value: "destination-out", label: "差值", tip:"差值：只清除原内容中与新图形重叠部分" },
+	// { value: "xor", label: "排除", tip:"排除：重叠部分透明" },
+	// { value: "copy", label: "正常", tip:"正常：完全忽略原内容，只显示新图形" },
+	// { value: "source-atop", label: "叠加", tip:"叠加：只在与现有内容重叠处绘制新图形" },
+	// { value: "destination-atop", label: "柔光", tip:"柔光：仅保留重叠部分，新图形在原内容后绘制" },
+	// { value: "darker", label: "变暗", tip:"变暗：重叠部分颜色减淡" },
+]);
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
new file mode 100644
index 00000000..b4e5d3a9
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -0,0 +1,899 @@
+<template>
+	<transition name="fade">
+		<div
+			class="select-menu-panel"
+			v-if="visible"
+			:class="{ active: !closePanel }"
+		>
+			<div class="btn" @click="setClosePanel">
+				<i class="fi fi-br-angle-left"></i>
+			</div>
+			<!-- 变换工具顶部 -->
+			<div class="panel-select">
+				<!-- <div class="panel-header">
+					<div class="header-title">变换工具</div>
+				</div> -->
+				<!-- 分割线 -->
+				<!-- <div class="panel-divider"></div> -->
+				<!-- 变换工具内容 -->
+				<div class="tool-content">
+					<div
+						class="object-item"
+						v-for="v in activeObjects"
+						:key="v.id"
+					>
+						<div class="title">{{ v.layer?.name }}</div>
+						<div class="list">
+							<div
+								class="input"
+								v-if="v.layerId !== SpecialLayerId.COLOR"
+							>
+								<angle-tool
+									:angle="Number(Number(v.angle).toFixed(3))"
+									@input="(e) => inputAngle(e, v)"
+									@change="(e) => changeAngle(e, v)"
+								/>
+							</div>
+							<div class="input">
+								<span class="label"
+									>{{ t("Canvas.opacity") }}:</span
+								>
+								<slider
+									:tipFormatter="
+										(v) => `${Math.round(v * 100)}%`
+									"
+									:value="v.opacity"
+									:min="0"
+									:max="1"
+									:step="0.01"
+									@change="(e) => changeOpacity(e, v)"
+									@input="(e) => inputOpacity(e, v)"
+								/>
+							</div>
+							<div
+								class="btn"
+								@click="clickflipHorizontal(v)"
+								v-if="v.layerId !== SpecialLayerId.COLOR"
+							>
+								<i class="iconfont icon-flip-horizontal"></i>
+								<p class="tip">
+									{{ t("Canvas.flipHorizontal") }}
+								</p>
+							</div>
+							<div
+								class="btn"
+								@click="clickflipVertical(v)"
+								v-if="v.layerId !== SpecialLayerId.COLOR"
+							>
+								<i class="iconfont icon-flip-vertical"></i>
+								<p class="tip">
+									{{ t("Canvas.flipVertical") }}
+								</p>
+							</div>
+							<!-- <div
+								class="btn"
+								@click="clickCropImage(v)"
+								v-if="v.layerId !== SpecialLayerId.COLOR"
+							>
+								<i class="iconfont icon-caijian"></i>
+								<p class="tip">
+									{{ t("Canvas.cropAndAdd") }}
+								</p>
+							</div> -->
+							<!-- <div
+								class="btn"
+								@click="clickRasterizeLayer(v)"
+								v-if="v.type !== 'image'"
+							>
+								<span class="label">{{ t("Canvas.RasterizedLayer") }}</span>
+							</div> -->
+							<div class="select">
+								<!-- 混合模式 -->
+								<i class="iconfont icon-hunhemoshi"></i>
+								<my-select
+									:defaultValue="
+										v.layer?.blendMode ||
+										v.globalCompositeOperation
+									"
+									:list="layerCompositeOptions"
+									@change="
+										(n, o) => setLayerComposite(n, o, v, 1)
+									"
+									@active="
+										(n, o) => setLayerComposite(n, o, v, 0)
+									"
+								/>
+							</div>
+							<!-- <div
+								class="btn"
+								@click="clickTest(v)"
+							>
+								<span class="label">测试</span>
+							</div> -->
+							<div
+								class="select"
+								v-if="v.type === 'rect' || v.type === 'image'"
+							>
+								<!-- 平铺 -->
+								<i class="iconfont icon-repeat"></i>
+								<a-select
+									size="small"
+									:defaultValue="
+										typeof v.fill === 'object'
+											? v.fill?.repeat || 'no-repeat'
+											: 'no-repeat'
+									"
+									:options="selectOptions"
+									@change="(e) => changeFillRepeat(e, v)"
+								/>
+							</div>
+							<!-- 平铺设置 -->
+							<a-popover
+								v-if="v.type === 'rect'"
+								trigger="click"
+								destroyTooltipOnHide
+								:title="t('Canvas.repeatSetting')"
+							>
+								<template #content>
+									<repeat-setting
+										:object="v"
+										@inputFillAngle="
+											(e) => inputFillAngle(e, v)
+										"
+										@changeFillAngle="
+											(e) => changeFillAngle(e, v)
+										"
+										@inputFillOffset="
+											(e) => inputFillOffset(e, v)
+										"
+										@changeFillOffset="
+											(e) => changeFillOffset(e, v)
+										"
+										@inputFillScale="
+											(e) => inputFillScale(e, v)
+										"
+										@changeFillScale="
+											(e) => changeFillScale(e, v)
+										"
+										@inputFill_Gap="
+											(x, y) => inputFill_Gap(x, y, v)
+										"
+										@changeFill_Gap="
+											(x, y) => changeFill_Gap(x, y, v)
+										"
+									/>
+								</template>
+								<div class="btn">
+									<i class="iconfont icon-gengduo"></i>
+								</div>
+							</a-popover>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script setup>
+	import { ref, onMounted, watch, onUnmounted, reactive } from "vue";
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+	import { OperationType, SpecialLayerId } from "../../utils/layerHelper";
+	import { loadImageUrlToLayer } from "../../utils/imageHelper";
+	import {
+		calculateRotatedTopLeftDeg,
+		createPatternTransform,
+		getTransformScaleAngle,
+	} from "../../utils/helper";
+	import { TransformCommand } from "../../commands/StateCommands";
+	import {
+		FillRepeatCommand,
+		FillRepeatChangeCommand,
+		FillRepeatGapChangeCommand,
+	} from "../../commands/FillRepeatCommand";
+	import { SetLayerCompositeCommand } from "../../commands/LayerCommands.js";
+	import RepeatSetting from "./RepeatSetting.vue";
+	import Slider from "../tools/Slider.vue";
+	import AngleTool from "../tools/AngleTool.vue";
+	import MySelect from "../tools/MySelect.vue";
+	import EventManager from "../../utils/event.js";
+	import { getSelectOptions, getLayerCompositeOptions } from "./data.js";
+	const selectOptions = getSelectOptions();
+	const layerCompositeOptions = getLayerCompositeOptions();
+	const props = defineProps({
+		canvas: {
+			type: Object,
+			required: true,
+		},
+		commandManager: {
+			type: Object,
+			required: true,
+		},
+		selectManager: {
+			type: Object,
+			required: true,
+		},
+		layerManager: {
+			type: Object,
+			required: true,
+		},
+		canvasManager: {
+			type: Object,
+			required: true,
+		},
+		toolManager: {
+			type: Object,
+			required: true,
+		},
+		activeTool: {
+			type: String,
+			required: false,
+			default: null,
+		},
+	});
+	// 响应式数据
+	const visible = ref(false);
+	//打开隐藏操作面板
+	const closePanel = ref(false);
+	const setClosePanel = () => {
+		closePanel.value = !closePanel.value;
+	};
+
+	onMounted(() => {
+		setupCanvasListeners();
+	});
+	onUnmounted(() => {
+		removeCanvasListeners();
+	});
+
+	// 监听 activeTool 变化
+	watch(
+		() => props.activeTool,
+		(newTool) => {
+			if (newTool === OperationType.SELECT) {
+				show();
+			} else {
+				close();
+			}
+		},
+		{ immediate: true }
+	);
+
+	/**
+	 * 显示面板
+	 */
+	function show() {
+		if (activeObjects.length === 0) return;
+		visible.value = true;
+		closePanel.value = true;
+	}
+
+	/**
+	 * 关闭面板
+	 */
+	function close() {
+		visible.value = false;
+	}
+	// 获取当前选中的对象
+	const activeObjects = reactive([]);
+	const getActiveObject = (e) => {
+		console.log("==========切换激活对象", e, activeObjects);
+		activeObjects.splice(0, activeObjects.length, ...e.selected);
+		activeObjects.forEach((v) => {
+			v.layer = props.layerManager.getLayerById(v.layerId);
+		});
+		if (activeObjects.length === 0) {
+			close();
+		} else {
+			show();
+		}
+	};
+	//取消当前选中
+	const cancelSelect = () => {
+		activeObjects.splice(0, activeObjects.length);
+		close();
+	};
+	const lastSelectLayerId = inject("lastSelectLayerId");
+	const layers = inject("layers");
+	const transformObject = (
+		activeObj,
+		initialState,
+		finalState,
+		isCommand = true
+	) => {
+		const cmd = new TransformCommand({
+			canvas: props.canvas,
+			objectId: activeObj.id,
+			initialState,
+			finalState,
+			objectType: activeObj.type,
+			name: `变换 ${activeObj.type || "对象"}`,
+			layerManager: props.layerManager,
+			layers: layers,
+			lastSelectLayerId: lastSelectLayerId,
+		});
+		if (isCommand) {
+			props.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	};
+	// 改变不透明度
+	const changeOpacity = (opacity, obj) => {
+		props.layerManager?.setLayerOpacity(obj.layerId, opacity);
+	};
+	const inputOpacity = (opacity, obj) => {
+		obj.opacity = opacity;
+		props.canvas.renderAll();
+	};
+	// 改变角度
+	const inputAngle = (angle, obj) => {
+		const initialState = TransformCommand.captureTransformState(obj);
+		const finalState = computeAngleState(angle, obj, initialState);
+		transformObject(obj, initialState, finalState, false);
+		if (!obj.hasOwnProperty("oldState")) obj.oldState = initialState;
+	};
+	const changeAngle = (angle, obj) => {
+		var initialState;
+		if (obj.hasOwnProperty("oldState")) {
+			initialState = obj.oldState;
+			delete obj.oldState;
+		} else {
+			initialState = TransformCommand.captureTransformState(obj);
+		}
+		const finalState = computeAngleState(angle, obj, initialState);
+		transformObject(obj, initialState, finalState);
+	};
+	const computeAngleState = (angle, obj, initialState) => {
+		const finalState = { ...initialState };
+		if (obj.originX === "left" && obj.originY === "top") {
+			const width = obj.width * obj.scaleX;
+			const height = obj.height * obj.scaleY;
+			const left = obj.left;
+			const top = obj.top;
+			const { x, y } = calculateRotatedTopLeftDeg(
+				width,
+				height,
+				left,
+				top,
+				obj.angle,
+				angle
+			);
+			finalState.left = x;
+			finalState.top = y;
+		}
+		finalState.angle = angle;
+		return finalState;
+	};
+
+	// 水平翻转
+	const clickflipHorizontal = (obj) => {
+		const initialState = TransformCommand.captureTransformState(obj);
+		const finalState = { ...initialState };
+		finalState.flipX = !finalState.flipX;
+		transformObject(obj, initialState, finalState);
+	};
+	// 垂直翻转
+	const clickflipVertical = (obj) => {
+		const initialState = TransformCommand.captureTransformState(obj);
+		const finalState = { ...initialState };
+		finalState.flipY = !finalState.flipY;
+		transformObject(obj, initialState, finalState);
+	};
+	// 裁剪图片
+	const cropImage = inject("cropImage");
+	const clickCropImage = async (obj) => {
+		const base64 = await props.layerManager.getLayerToBase64(obj.layerId);
+		if (base64)
+			cropImage(base64).then((res) => {
+				loadImageUrlToLayer({
+					imageUrl: res,
+					layerManager: props.layerManager,
+					canvas: props.canvas,
+					toolManager: props.toolManager,
+				});
+			});
+	};
+
+	// 栅格化图层
+	const clickRasterizeLayer = (obj) => {
+		props.layerManager.rasterizeLayer(obj.layerId);
+	};
+
+	// 改变填充重复
+	const changeFillRepeat = async (value, obj) => {
+		console.log("==========改变填充重复", obj.type);
+		const cmd = new FillRepeatCommand({
+			canvas: props.canvas,
+			layers: layers,
+			canvasManager: props.canvasManager,
+			layerManager: props.layerManager,
+			layerId: obj.layerId,
+			fillRepeat: value,
+		});
+		props.commandManager.execute(cmd);
+	};
+	// 改变填充角度
+	const inputFillAngle = (angle, obj) => {
+		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
+		const fill = obj.get("fill");
+		const scale = getTransformScaleAngle(fill?.patternTransform).scale;
+		const pattern = new fabric.Pattern({
+			...fill,
+			patternTransform: createPatternTransform(scale, angle),
+		});
+		obj.set("fill", pattern);
+		props.canvas.renderAll();
+	};
+	const changeFillAngle = (angle, obj) => {
+		const fill = obj.get("fill");
+		const scale = getTransformScaleAngle(fill?.patternTransform).scale;
+		const pattern = {
+			patternTransform: createPatternTransform(scale, angle),
+		};
+		changeFill(obj, pattern);
+	};
+	// 改变填充便宜
+	const inputFillOffset = (value, obj) => {
+		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
+		const pattern = new fabric.Pattern({
+			...obj.get("fill"),
+			offsetX: (value.left / 100) * obj.width,
+			offsetY: (value.top / 100) * obj.height,
+		});
+		obj.set("fill", pattern);
+		props.canvas.renderAll();
+	};
+	const changeFillOffset = (value, obj) => {
+		const pattern = new fabric.Pattern({
+			offsetX: (value.left / 100) * obj.width,
+			offsetY: (value.top / 100) * obj.height,
+		});
+		changeFill(obj, pattern);
+	};
+	// 改变填充缩放
+	const inputFillScale = (scale, obj) => {
+		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
+		const fill = obj.get("fill");
+		const angle = getTransformScaleAngle(fill?.patternTransform).angle;
+		const pattern = new fabric.Pattern({
+			...fill,
+			patternTransform: createPatternTransform(scale, angle),
+		});
+		obj.set("fill", pattern);
+		props.canvas.renderAll();
+	};
+	const changeFillScale = (scale, obj) => {
+		const fill = obj.get("fill");
+		const angle = getTransformScaleAngle(fill?.patternTransform).angle;
+		const pattern = {
+			patternTransform: createPatternTransform(scale, angle),
+		};
+		changeFill(obj, pattern);
+	};
+	const changeFill = (obj, pattern) => {
+		const cmd = new FillRepeatChangeCommand({
+			canvas: props.canvas,
+			layers: layers,
+			canvasManager: props.canvasManager,
+			layerManager: props.layerManager,
+			layerId: obj.layerId,
+			newPattern: pattern,
+		});
+		props.commandManager.execute(cmd);
+	};
+	// 改变填充间隙
+	const inputFill_Gap = (gapX, gapY, obj) => {
+		const cmd = new FillRepeatGapChangeCommand({
+			canvas: props.canvas,
+			layers: layers,
+			canvasManager: props.canvasManager,
+			layerManager: props.layerManager,
+			layerId: obj.layerId,
+			newGapX: gapX,
+			newGapY: gapY,
+			record: true,
+		});
+		cmd.execute();
+	};
+	const changeFill_Gap = (gapX, gapY, obj) => {
+		if (obj.oldFill_) {
+			obj.fill_ = { ...obj.oldFill_ };
+			delete obj.oldFill_;
+		}
+		const cmd = new FillRepeatGapChangeCommand({
+			canvas: props.canvas,
+			layers: layers,
+			canvasManager: props.canvasManager,
+			layerManager: props.layerManager,
+			layerId: obj.layerId,
+			newGapX: gapX,
+			newGapY: gapY,
+		});
+		props.commandManager.execute(cmd);
+	};
+
+	const setLayerComposite = (newValue, oldValue, obj, isCmd) => {
+		const cmd = new SetLayerCompositeCommand({
+			canvas: props.canvas,
+			layers: layers,
+			layerManager: props.layerManager,
+			layerId: obj.layerId,
+			newValue: newValue,
+			oldValue: oldValue,
+		});
+		if (isCmd) {
+			props.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	};
+
+	const clickTest = (obj) => {
+		console.log("==========点击测试", obj);
+	};
+
+	// 更新选中对象属性
+	const updateActiveObjects = (arrs, keys, isNumber = true) => {
+		arrs.forEach((v) => {
+			activeObjects.forEach((item) => {
+				if (item.id === v.id) {
+					keys.forEach(
+						(key) => (item[key] = isNumber ? Number(v[key]) : v[key])
+					);
+				}
+			});
+		});
+	};
+
+	// 旋转对象时更新角度
+	const objectRotatingChange = (e) => {
+		const arrs = [];
+		if (e.target._objects) {
+			e.target._objects.forEach((v) => arrs.push(v));
+		} else {
+			arrs.push(e.target);
+		}
+		updateActiveObjects(arrs, ["angle"]);
+	};
+
+	// 对象属性修改后触发
+	const objectModifiedChange = (e) => {
+		console.log("==========object:modified", e.target);
+	};
+	// 不透明度撤销时触发
+	const objectOpacityUndo = (layerId, opacity) => {
+		const layerObjects = props.canvas
+			.getObjects()
+			.filter((obj) => obj.layerId === layerId);
+		updateActiveObjects(layerObjects, ["opacity"]);
+	};
+	// 对象属性修改撤销时触发
+	const objectModifiedUndo = (object) => {
+		updateActiveObjects([object], ["angle"]);
+	};
+	// 组合操作撤销时触发
+	const objectCompositeChange = (object) => {
+		updateActiveObjects([object], ["globalCompositeOperation"], false);
+	};
+	/**
+	 * 设置画布事件监听
+	 */
+	function setupCanvasListeners() {
+		if (!props.canvas) return;
+		// 注册事件
+		props.canvas.on("selection:created", getActiveObject);
+		props.canvas.on("selection:updated", getActiveObject);
+		props.canvas.on("selection:cleared", cancelSelect);
+		props.canvas.on("object:rotating", objectRotatingChange);
+		props.canvas.on("object:modified", objectModifiedChange);
+		EventManager.on("object:opacity:execute", objectOpacityUndo);
+		EventManager.on("object:opacity:undo", objectOpacityUndo);
+		EventManager.on("object:modified:execute", objectModifiedUndo);
+		EventManager.on("object:modified:undo", objectModifiedUndo);
+		EventManager.on("object:composite:execute", objectCompositeChange);
+		EventManager.on("object:composite:undo", objectCompositeChange);
+	}
+
+	/**
+	 * 移除画布事件监听
+	 */
+	function removeCanvasListeners() {
+		if (!props.canvas) return;
+		// 移除事件
+		props.canvas.off("selection:created", getActiveObject);
+		props.canvas.off("selection:updated", getActiveObject);
+		props.canvas.off("selection:cleared", cancelSelect);
+		props.canvas.off("object:rotating", objectRotatingChange);
+		props.canvas.off("object:modified", objectModifiedChange);
+		EventManager.off("object:opacity:execute", objectOpacityUndo);
+		EventManager.off("object:opacity:undo", objectOpacityUndo);
+		EventManager.off("object:modified:execute", objectModifiedUndo);
+		EventManager.off("object:modified:undo", objectModifiedUndo);
+		EventManager.off("object:composite:execute", objectCompositeChange);
+		EventManager.off("object:composite:undo", objectCompositeChange);
+	}
+</script>
+
+<style scoped lang="less">
+	.select-menu-panel {
+		position: absolute;
+		bottom: 22px;
+		left: 0;
+		right: 0;
+		// max-width: min(90vw, 640px);
+		max-width: 95%;
+		width: 80rem;
+		margin: 0 auto;
+		background-color: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
+		border-radius: 8px;
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+		z-index: 1000;
+		color: #333;
+		border: 1px solid rgba(0, 0, 0, 0.05);
+		user-select: none;
+		&.active {
+			transform: translateY(100%);
+			> .btn {
+				> i {
+					transform: rotate(90deg);
+				}
+			}
+		}
+		> .btn {
+			width: 100%;
+			height: 22px;
+			text-align: center;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			> i {
+				font-size: 1.4rem;
+				transform: rotate(270deg);
+			}
+		}
+	}
+
+	/* 平板和手机适配 */
+	@media screen and (max-width: 768px) {
+		.select-menu-panel {
+			bottom: 15px;
+			left: 15px;
+			right: 15px;
+			max-width: calc(100vw - 30px);
+			border-radius: 6px;
+		}
+	}
+
+	@media screen and (max-width: 480px) {
+		.select-menu-panel {
+			bottom: 10px;
+			left: 10px;
+			right: 10px;
+			max-width: calc(100vw - 20px);
+		}
+	}
+
+	.select-menu-panel.is-active {
+		transform: translateY(0);
+	}
+
+	.panel-header {
+		padding: 8px 15px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+		background-color: rgba(255, 255, 255, 0.8);
+		border-radius: 8px 8px 0 0;
+	}
+
+	.header-title {
+		font-size: 13px;
+		font-weight: 500;
+		color: #333;
+		text-align: left;
+	}
+
+	.panel-select {
+		// padding: 0 0 10px;
+	}
+
+	/* 平板适配 */
+	@media screen and (max-width: 768px) {
+		.panel-header {
+			padding: 6px 12px;
+			border-radius: 6px 6px 0 0;
+		}
+	}
+
+	/* 手机适配 */
+	@media screen and (max-width: 480px) {
+		.panel-header {
+			padding: 5px 10px;
+		}
+
+		.header-title {
+			font-size: 12px;
+		}
+	}
+
+	.tool-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(0, 0, 0, 0.05);
+		border: none;
+		border-radius: 6px;
+		padding: 6px;
+		color: #333;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.tool-btn span {
+		margin-top: 0;
+		font-size: 12px;
+	}
+
+	.tool-btn svg {
+		width: 24px;
+		height: 24px;
+	}
+
+	.tool-btn:hover {
+		background-color: rgba(0, 0, 0, 0.08);
+	}
+
+	.tool-btn.active {
+		background-color: #007aff;
+		color: white;
+	}
+
+	.panel-divider {
+		height: 1px;
+		background-color: rgba(0, 0, 0, 0.05);
+		margin: 0 10px 5px 10px;
+	}
+
+	.tool-content {
+		overflow-y: auto;
+		max-height: 20rem;
+		margin-top: 1rem;
+		padding: 0 1.5rem;
+		> .object-item {
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+			padding: 1rem 0;
+			&:last-child {
+				border-bottom: none;
+			}
+			> .title {
+				text-align: left;
+				margin-bottom: 0.5rem;
+			}
+			> .list {
+				display: flex;
+				> div {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-right: 1.5rem;
+					position: relative;
+					&:last-child {
+						margin-right: 0;
+					}
+					> .iconfont {
+						font-size: 1.8rem;
+					}
+					> .label {
+						font-size: 1.3rem;
+						margin: 0 0.5rem;
+					}
+					> .angle-tool {
+						width: 9rem;
+					}
+					> .tip {
+						position: absolute;
+						top: -5px;
+						left: 50%;
+						transform: translate(-50%, -100%);
+						background-color: rgba(0, 0, 0, 0.7);
+						color: white;
+						padding: 0.4rem 0.8rem;
+						border-radius: 0.4rem;
+						// margin-left: 0.8rem;
+						font-size: 1.2rem;
+						white-space: nowrap;
+						pointer-events: none;
+						display: none;
+						&::after {
+							content: "";
+							position: absolute;
+							top: 97%;
+							left: 50%;
+							transform: translateX(-50%);
+							width: 0;
+							height: 0;
+							border-left: 5px solid transparent;
+							border-right: 5px solid transparent;
+							border-top: 5px solid rgba(0, 0, 0, 0.8);
+						}
+					}
+					&:hover {
+						> .tip {
+							display: block;
+						}
+					}
+				}
+				> div.input {
+					font-size: 1.4rem;
+					color: #474747;
+					> .label {
+						margin-right: 0.5rem;
+						font-size: 1.4rem;
+					}
+					> .iconfont {
+						margin-right: 0.4rem;
+					}
+					> .slider {
+						width: 8rem;
+					}
+				}
+				> div.select {
+					> .iconfont {
+						margin-right: 4px;
+					}
+					> .my-select,
+					> .ant-select {
+						width: 12rem;
+						text-align: left;
+						font-size: 1.4rem;
+					}
+				}
+				> div.btn {
+					min-width: 2.8rem;
+					cursor: pointer;
+					border-radius: 2px;
+					transition: background-color 0.2s;
+					background-color: rgba(0, 0, 0, 0);
+					&:hover {
+						background-color: rgba(0, 0, 0, 0.08);
+					}
+				}
+				> div.color {
+					width: 4rem;
+					height: 2.5rem;
+					cursor: pointer;
+					background-image: linear-gradient(to bottom, #ff0000, #ffff00);
+				}
+			}
+		}
+	}
+
+	/* 平板适配 - 每行4个按钮 */
+	@media screen and (max-width: 768px) {
+		.tool-content {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 8px 6px;
+			padding: 0 8px;
+		}
+	}
+
+	/* 手机适配 - 每行3个按钮 */
+	@media screen and (max-width: 480px) {
+		.tool-content {
+			grid-template-columns: repeat(3, 1fr);
+			gap: 6px 4px;
+			padding: 0 6px;
+		}
+
+		.header-btn {
+			font-size: 11px;
+			padding: 2px 4px;
+			min-width: 28px;
+		}
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
index 8e0361c4..583a4cf9 100644
--- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
+++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
@@ -412,8 +412,12 @@ const handleToolClick = (tool) => {
 	overflow-y: auto;
 	overflow-x: hidden;
 }
+.tools-list::-webkit-scrollbar {
+  display: none;
+}
+
 .red-green-mode {
-  background-color: #fff4f4;
+  background-color: #060505;
 }
 
 .mode-indicator {
diff --git a/src/component/Canvas/CanvasEditor/components/css/layersPanel.css b/src/component/Canvas/CanvasEditor/components/css/layersPanel.css
index 047214da..aeb58a56 100644
--- a/src/component/Canvas/CanvasEditor/components/css/layersPanel.css
+++ b/src/component/Canvas/CanvasEditor/components/css/layersPanel.css
@@ -270,6 +270,13 @@
   color: #ccc;
   cursor: not-allowed;
 }
+.layer-color-btn {
+  width: 30px;
+  height: 20px;
+  margin-right: 5px;
+  border-radius: 2px;
+  border: 1px solid #000;
+}
 .layer-actions {
   display: flex;
   gap: 0.6rem;
diff --git a/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue b/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
new file mode 100644
index 00000000..4c2063a5
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="angle-tool">
+		<div
+			ref="dishRef"
+			class="dish"
+			@mousedown.stop="mousedown"
+			@touchmove.stop="mousedown"
+		>
+			<div class="pointer" :style="{ transform: `rotate(${angle}deg)` }">
+				<span></span>
+			</div>
+		</div>
+		<div class="input">
+			<input type="number" v-model="angle" @input="onInput" @change="onChange" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	import { calculateAngle } from "../../utils/helper";
+	// Props
+	const props = defineProps({
+		angle: {
+			type: Number,
+			default: 0,
+		},
+	});
+	const emit = defineEmits(["change", "input"]);
+	const angle = ref(props.angle);
+	watch(() => props.angle, (value) => {
+		angle.value = value;
+	});
+	const dishRef = ref<HTMLDivElement>();
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return;
+			const { left, top, width, height } =
+				dishRef.value.getBoundingClientRect();
+			const centerX = left + width / 2;
+			const centerY = top + height / 2;
+			const { clientX, clientY } = e?.touches?.[0] || e;
+			angle.value = calculateAngle(centerX, centerY, clientX, clientY, true);
+			onInput();
+		};
+		mousemove(e);
+		const mouseup = () => {
+			onChange();
+			document.removeEventListener("mousemove", mousemove);
+			document.removeEventListener("touchmove", mousemove);
+			document.removeEventListener("mouseup", mouseup);
+			document.removeEventListener("touchend", mouseup);
+		};
+		document.addEventListener("mousemove", mousemove);
+		document.addEventListener("touchmove", mousemove);
+		document.addEventListener("mouseup", mouseup);
+		document.addEventListener("touchend", mouseup);
+	};
+	const onInput = () => emit("input", angle.value);
+	var changeTime: any = null;
+	const onChange = () => {
+		clearTimeout(changeTime);
+		changeTime = setTimeout(() => emit("change", angle.value), 500);
+	};
+	// var angleTime = null;
+	// watch(angle, (value) => {
+	// 	emit("input", value);
+	// 	clearTimeout(angleTime);
+	// 	angleTime = setTimeout(() => emit("change", value), 50);
+	// });
+	// defineExpose({
+	// 	open,
+	// 	close,
+	// });
+</script>
+
+<style scoped lang="less">
+	.angle-tool {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		> .dish {
+			width: 24px;
+			height: 24px;
+			border: 1px solid #000;
+			border-radius: 50%;
+			cursor: pointer;
+			> .pointer {
+				pointer-events: none;
+				user-select: none;
+				position: relative;
+				width: 100%;
+				height: 100%;
+				> span {
+					position: absolute;
+					top: 10%;
+					left: 50%;
+					transform: translate(-50%, 0);
+					width: 35%;
+					height: 35%;
+					background-color: #000;
+					border-radius: 50%;
+				}
+			}
+		}
+		> .input {
+			margin-left: 5px;
+			font-size: 14px;
+			color: #000;
+			flex: 1;
+			// min-width: 45px;
+			// max-width: 80px;
+			// width: 50px;
+			> input {
+				width: 100%;
+				border-radius: 3px;
+				outline: none;
+			}
+		}
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/tools/MySelect.vue b/src/component/Canvas/CanvasEditor/components/tools/MySelect.vue
new file mode 100644
index 00000000..146a7d8d
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/tools/MySelect.vue
@@ -0,0 +1,66 @@
+<template>
+	<a-select
+		class="my-select"
+		:size="size"
+		@change="change"
+		:defaultValue="defaultValue"
+		@dropdownVisibleChange="dropdownVisibleChange"
+	>
+		<a-select-option
+			v-for="v in list"
+			:key="v.value"
+			:value="v.value"
+			:title="v.tip"
+			@mouseover.stop.prevent="mouseover(v)"
+			@mouseleave="mouseleave(v)"
+			>{{ v.label }}</a-select-option
+		>
+	</a-select>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	const props = defineProps({
+		defaultValue: {
+			default: "",
+		},
+		list: {
+			type: Array,
+			default: () => [],
+		},
+		size: {
+			type: String,
+			default: "small",
+		},
+	});
+	const emit = defineEmits(["change", "active"]);
+	const isChange = ref(false);
+	const initValue = ref(props.defaultValue);
+	const activeValue = ref(props.defaultValue);
+	const timeout = ref(null);
+	const mouseover = (v) => {
+		clearTimeout(timeout.value);
+		if (v.value === activeValue.value) return;
+		emit("active", v.value, activeValue.value);
+		activeValue.value = v.value;
+	};
+	const mouseleave = () => {
+		clearTimeout(timeout.value);
+		timeout.value = setTimeout(() => {
+			dropdownVisibleChange(false);
+		}, 100);
+	};
+	const change = (v) => {
+		isChange.value = true;
+		emit("change", v, initValue.value);
+	};
+	const dropdownVisibleChange = (v) => {
+		if (v) {
+			isChange.value = false;
+			initValue.value = props.defaultValue;
+		} else if (!isChange.value) {
+			emit("active", initValue.value, activeValue.value);
+			activeValue.value = initValue.value;
+		}
+	};
+</script>
diff --git a/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue b/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
new file mode 100644
index 00000000..00288da3
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/tools/OffsetTool.vue
@@ -0,0 +1,190 @@
+<template>
+	<div class="offset-tool">
+		<div
+			class="dish"
+			@mousedown="mousedown"
+			@touchstart="mousedown"
+			ref="dishRef"
+		>
+			<span
+				:style="{ top: data.top + '%', left: data.left + '%' }"
+			></span>
+		</div>
+		<input
+			class="top"
+			type="range"
+			:min="0"
+			:max="100"
+			:step="0.1"
+			v-model="data.top"
+			@input="onInput"
+			@change="onChange"
+		/>
+		<input
+			class="left"
+			type="range"
+			:min="0"
+			:max="100"
+			:step="0.1"
+			v-model="data.left"
+			@input="onInput"
+			@change="onChange"
+		/>
+		<span class="tip"
+			>x:{{ tofix(data.left) }}% y:{{ tofix(data.top) }}%</span
+		>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	const props = defineProps({
+		top: {
+			type: Number,
+			default: 50,
+		},
+		left: {
+			type: Number,
+			default: 50,
+		},
+	});
+	const tofix = (v: number | string) => Number(Number(v).toFixed(1));
+	const emit = defineEmits(["change", "input"]);
+	const data = reactive({
+		top: tofix(props.top),
+		left: tofix(props.left),
+	});
+	watch(
+		() => props.top,
+		(v) => (data.top = tofix(v))
+	);
+	watch(
+		() => props.left,
+		(v) => (data.left = tofix(v))
+	);
+	const dishRef = ref<HTMLDivElement>();
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (!dishRef.value) return;
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return;
+			const { left, top, width, height } =
+				dishRef.value.getBoundingClientRect();
+			const X = e.clientX || (e as TouchEvent).touches[0].clientX;
+			const Y = e.clientY || (e as TouchEvent).touches[0].clientY;
+			var x = ((X - left) / width) * 100;
+			var y = ((Y - top) / height) * 100;
+			if (x < 0) x = 0;
+			if (x > 100) x = 100;
+			if (y < 0) y = 0;
+			if (y > 100) y = 100;
+			data.left = tofix(x);
+			data.top = tofix(y);
+			onInput();
+		};
+		mousemove(e);
+		const mouseup = () => {
+			onChange();
+			document.removeEventListener("mousemove", mousemove);
+			document.removeEventListener("touchmove", mousemove);
+			document.removeEventListener("mouseup", mouseup);
+			document.removeEventListener("touchend", mouseup);
+		};
+		document.addEventListener("mousemove", mousemove);
+		document.addEventListener("touchmove", mousemove);
+		document.addEventListener("mouseup", mouseup);
+		document.addEventListener("touchend", mouseup);
+	};
+	const onInput = () => emit("input", { ...data });
+	var changeTime: any = null;
+	const onChange = () => {
+		clearTimeout(changeTime);
+		changeTime = setTimeout(() => emit("change", { ...data }), 500);
+	};
+	// var offsetTime = null;
+	// watch(data, (v) => {
+	// 	const obj = { ...v };
+	// 	emit("input", obj);
+	// 	clearTimeout(offsetTime);
+	// 	offsetTime = setTimeout(() => emit("change", obj), 50);
+	// });
+
+	// defineExpose({
+	// 	open,
+	// 	close,
+	// });
+</script>
+
+<style scoped lang="less">
+	.offset-tool {
+		width: 125px;
+		height: 125px;
+		display: flex;
+		position: relative;
+		overflow: hidden;
+		--gap: 15px;
+		> .dish {
+			margin: var(--gap) 0 0 var(--gap);
+			flex: 1;
+			border: 1px solid #000;
+			border-radius: 5px;
+			cursor: pointer;
+			position: relative;
+			background-color: #fff;
+			> span {
+				pointer-events: none;
+				user-select: none;
+				position: absolute;
+				top: 0%;
+				left: 0%;
+				transform: translate(-50%, -50%);
+				width: 8px;
+				height: 8px;
+				background-color: #000;
+				border-radius: 50%;
+			}
+		}
+		> .tip {
+			position: absolute;
+			right: 4px;
+			bottom: 0;
+			font-size: 10px;
+			pointer-events: none;
+			user-select: none;
+			color: #666;
+		}
+		> input.left {
+			right: 0;
+		}
+		> input.top {
+			bottom: 0;
+			left: 0;
+			transform-origin: left bottom;
+			transform: rotate(90deg) translateX(-100%);
+		}
+		> input {
+			position: absolute;
+			width: calc(100% - var(--gap));
+			-webkit-appearance: none;
+			appearance: none;
+			height: 8px;
+			border-radius: 8px;
+			background: rgba(0, 0, 0, 0.1); /* 更柔和的颜色 */
+			// outline: none;
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				appearance: none;
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				background: #4285f4; /* 蓝色滑块 */
+				cursor: pointer;
+				transition: all 0.2s;
+				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			}
+			&::-webkit-slider-thumb:hover {
+				background: #3b77db;
+				transform: scale(1.1);
+			}
+		}
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/components/tools/Slider.vue b/src/component/Canvas/CanvasEditor/components/tools/Slider.vue
new file mode 100644
index 00000000..d3de2145
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/components/tools/Slider.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="slider">
+		<div class="input-range">
+			<span
+				class="tip"
+				:style="{
+					'--progress': (value - props.min) / (props.max - props.min),
+				}"
+				>{{ props.tipFormatter(value) }}</span
+			>
+			<input
+				type="range"
+				v-model="value"
+				:min="props.min"
+				:max="props.max"
+				:step="props.step"
+				@input="onInput"
+				@change="onChange"
+			/>
+		</div>
+		<div class="input" v-show="isInput">
+			<input
+				type="number"
+				v-model="value"
+				:min="props.min"
+				:max="props.max"
+				:step="props.step"
+				@input="onInput"
+				@change="onChange"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	const props = defineProps({
+		value: {
+			type: Number,
+			default: 0,
+		},
+		min: {
+			type: Number,
+			default: 0,
+		},
+		max: {
+			type: Number,
+			default: 100,
+		},
+		step: {
+			type: Number,
+			default: 1,
+		},
+		tipFormatter: {
+			type: Function,
+			default: (v) => v,
+		},
+		isInput: {
+			type: Boolean,
+			default: false,
+		},
+	});
+	const emit = defineEmits(["change", "input"]);
+	const value = ref(props.value);
+	watch(
+		() => props.value,
+		(v) => (value.value = v)
+	);
+	const onInput = () => emit("input", Number(value.value));
+	var changeTime: any = null;
+	const onChange = () => {
+		clearTimeout(changeTime);
+		changeTime = setTimeout(() => emit("change", Number(value.value)), 500);
+	};
+</script>
+
+<style scoped lang="less">
+	.slider {
+		position: relative;
+		display: flex;
+		align-items: center;
+		--input-thumb-size: 12px;
+		width: 150px;
+		// &:focus-within,
+		&:hover {
+			> .input-range > .tip {
+				display: block;
+			}
+		}
+		> .input-range {
+			position: relative;
+			flex: 2;
+			> input {
+				width: 100%;
+				-webkit-appearance: none;
+				appearance: none;
+				height: 5px;
+				border-radius: 5px;
+				background: rgba(0, 0, 0, 0.1); /* 更柔和的颜色 */
+				outline: none;
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none;
+					appearance: none;
+					width: var(--input-thumb-size);
+					height: var(--input-thumb-size);
+					border-radius: 50%;
+					background: #4285f4; /* 蓝色滑块 */
+					cursor: pointer;
+					transition: all 0.2s;
+					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+				}
+				&::-webkit-slider-thumb:hover {
+					background: #3b77db;
+					transform: scale(1.1);
+				}
+			}
+			> .tip {
+				position: absolute;
+				font-size: 10px;
+				pointer-events: none;
+				user-select: none;
+				color: #666;
+				top: 0;
+				left: calc(
+					(100% - var(--input-thumb-size)) * var(--progress) +
+						var(--input-thumb-size) / 2
+				);
+				transform: translate(-50%, -100%);
+				background-color: rgba(0, 0, 0, 0.7);
+				color: white;
+				padding: 0.4rem 0.8rem;
+				border-radius: 0.4rem;
+				font-size: 1.2rem;
+				white-space: nowrap;
+				pointer-events: none;
+				display: none;
+				&::after {
+					content: "";
+					position: absolute;
+					top: 97%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 0;
+					height: 0;
+					border-left: 5px solid transparent;
+					border-right: 5px solid transparent;
+					border-top: 5px solid rgba(0, 0, 0, 0.8);
+				}
+			}
+		}
+		> .input {
+			flex: 1;
+			margin-left: 10px;
+			> input {
+				border-radius: 3px;
+				width: 100%;
+			}
+		}
+	}
+</style>
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index eecafc6f..7e1bd2f3 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -35,7 +35,8 @@ import LayersPanel from "./components/LayersPanel/LayersPanel.vue";
 import BrushControlPanel from "./components/BrushControlPanel.vue";
 import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本编辑面板
 import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板
-import SelectMenuPanel from "./components/SelectMenuPanel.vue"; // 引入选择工具菜单组件
+import PalletPanel from "./components/PalletPanel/index.vue";
+import SelectMenuPanel from "./components/SelectMenuPanel/index.vue"; // 引入选择工具菜单组件
 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
 import { LayerType, OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/ToolManager.js";
@@ -64,6 +65,10 @@ const props = defineProps({
     type: [Object, String],
     default: "", // 默认空
   },
+  otherData: {
+    type: [Object, null],
+    default: null, // 默认空对象
+  },
   config: {
     type: Object,
     default: () => CanvasConfig, // 默认配置
@@ -78,7 +83,11 @@ const props = defineProps({
   },
   clothingImageUrl: {
     type: String,
-    default: "", // 衣服底图URL
+    default: "", // 衣服底图URL-线稿
+  },
+  clothingImageUrl2: {
+    type: String,
+    default: "", // 衣服底图URL-上色
   },
   redGreenImageUrl: {
     type: String,
@@ -250,6 +259,7 @@ onMounted(async () => {
     canvasColor,
     enabledRedGreenMode: props.enabledRedGreenMode,
     isFixedErasable: props.isFixedErasable,
+	props,
   });
   canvasManager.canvas.activeLayerId = activeLayerId;
   canvasManager.activeLayerId = activeLayerId;
@@ -307,6 +317,7 @@ onMounted(async () => {
     canvas: canvasManager.canvas,
     commandManager,
     layerManager,
+    canvasManager,
     toolManager,
 	isRedGreenMode,
 	pasteText: (text) => {
@@ -435,6 +446,12 @@ onMounted(async () => {
       canvasManager.canvas.width,
       canvasManager.canvas.height
     );
+
+	if(props.otherData && !props.otherData.canvasId) {
+		await canvasManager?.createOtherLayers(props.otherData);
+		await layerManager?.layerSort?.rearrangeObjects();
+	}
+
   }
 
   // // 设置固定图层是否可擦除
@@ -720,42 +737,7 @@ function deleteFun() {
 }
 
 function removeLayer(layerId) {
-  // Check if this is the last layer - prevent deletion
-	var isChild = false;
-	var parentLength = 0;
-	layers.value.forEach((layer) => {
-		if(layer.children.some(v => v.id == layerId)){
-			isChild = true;
-			parentLength = layer.children.length;
-		}
-	})
-	if(isChild && parentLength == 1 || layers.value.length <= 3){
-		console.warn(
-      "Cannot delete the last layer. At least one layer must remain."
-    );
-    return;
-	}
-
 	layerManager.removeLayer(layerId);
-//   此处删除画布上内容导致撤回操作无效（多余）
-//   if (canvasManager && canvasManager.canvas) {
-//     const layerToRemove = layers.value.find((l) => l.id === layerId);
-//     if (layerToRemove) {
-//       const elementIds = layerToRemove?.fabricObjects?.map((e) => e.id);
-//       elementIds.forEach((elementId) => {
-//         const objectToRemove = canvasManager.canvas
-//           .getObjects()
-//           .find((obj) => obj.id === elementId);
-//         if (objectToRemove) {
-//           canvasManager.canvas.remove(objectToRemove);
-//         }
-//       });
-//       if (activeLayerId.value === layerId) {
-//         activeElementId.value = null;
-//       }
-//       canvasManager.canvas.renderAll();
-//     }
-//   }
 }
 
 function triggerImageUpload() {
@@ -902,13 +884,17 @@ const changeCanvas = async (command) => {
     ...command, // 传递完整的命令数据
   };
   emit("changeCanvas", commandData);
-  if (command.canUndo || command.canRedo) {
+  if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
     setTimeout(async () => {
-      const imageData = await canvasManager.exportImage({
-        restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
-        isCropByBg: true,
-      });
-      emit("trigger-red-green-mouseup", imageData);
+	  try {
+		const imageData = await canvasManager.exportImage({
+			restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度
+			isCropByBg: true,
+		});
+		emit("trigger-red-green-mouseup", imageData);
+	  } catch (error) {
+		
+	  }
     }, 100);
   }
 };
@@ -918,6 +904,14 @@ const cropImage = (url) => {
   return cropImageRef.value.open(url)
 };
 provide("cropImage", cropImage); // 提供给子组件使用
+// 颜色选择器组件
+const palletPanelRef = ref(null);
+const palletPanel = (url) => {
+  return palletPanelRef.value.open(url)
+};
+provide("palletPanel", palletPanel); // 提供给子组件使用
+
+
 
 // 处理画布容器的拖放事件
 const isDragOver = ref(false);
@@ -1030,6 +1024,10 @@ defineExpose({
       isEnhanceImg,
     });
   },
+  // 导出颜色图层
+  exportColorLayer: () => {
+    return canvasManager.exportColorLayer();
+  },
   /**
    * 移动图层位置
    * @param {string} layerId 图层ID
@@ -1245,6 +1243,7 @@ defineExpose({
           :commandManager="commandManager"
           :selectionManager="selectionManager"
           :layerManager="layerManager"
+          :canvasManager="canvasManager"
           :toolManager="toolManager"
           :activeTool="activeTool"
         />
@@ -1269,6 +1268,7 @@ defineExpose({
             ?
           </button>
         </div>
+
       </div>
 
       <!-- 图层面板组件 -->
@@ -1298,9 +1298,11 @@ defineExpose({
         </div>
       </transition>
 
-	  <!-- 裁剪图片组件 -->
-	  <CropImage ref="cropImageRef" />
     </div>
+	<!-- 裁剪图片组件 -->
+	<CropImage ref="cropImageRef" />
+	<!-- 颜色选择器组件 -->
+	<PalletPanel ref="palletPanelRef" />
 
     <!-- <div class="footer-actions">
       <button class="share-btn">Share</button>
diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
index f17c8d75..eef846ec 100644
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -9,7 +9,12 @@ import {
   isGroupLayer,
   OperationType,
   OperationTypes,
+  findLayer,
+  createLayer,
+  LayerType,
+  SpecialLayerId,
 } from "../utils/layerHelper";
+import { ObjectMoveCommand } from "../commands/ObjectCommands";
 import { AnimationManager } from "./animation/AnimationManager";
 import { createCanvas } from "../utils/canvasFactory";
 import { CanvasEventManager } from "./events/CanvasEventManager";
@@ -21,6 +26,10 @@ import {
   findObjectById,
   generateId,
   optimizeCanvasRendering,
+  palletToFill,
+  fillToCssStyle,
+  calculateRotatedTopLeftDeg,
+  createPatternTransform,
 } from "../utils/helper";
 import { ChangeFixedImageCommand } from "../commands/ObjectLayerCommands";
 import { isFunction } from "lodash-es";
@@ -30,6 +39,11 @@ import {
   validateLayerAssociations,
 } from "../utils/layerUtils";
 import { imageModeHandler } from "../utils/imageHelper";
+import { getObjectAlphaToCanvas } from "../utils/objectHelper";
+import { AddLayerCommand } from "../commands/LayerCommands";
+import { fa, id } from "element-plus/es/locales.mjs";
+import i18n from "@/lang/index.ts";
+const {t} = i18n.global;
 
 export class CanvasManager {
   constructor(canvasElement, options) {
@@ -50,6 +64,7 @@ export class CanvasManager {
     this.isFixedErasable = options.isFixedErasable || false; // 是否允许擦除固定图层
     this.eraserStateManager = null; // 橡皮擦状态管理器引用
     this.handleCanvasInit = null; // 画布初始化回调函数
+	this.props = options.props || {};
     // 初始化画布
     this.initializeCanvas();
   }
@@ -83,10 +98,10 @@ export class CanvasManager {
 
     this.canvas.thumbnailManager = this.thumbnailManager; // 将缩略图管理器绑定到画布
 
-    // // 设置画布辅助线
-    // initAligningGuidelines(this.canvas);
+    // 设置画布辅助线
+    initAligningGuidelines(this.canvas);
 
-    // // 设置画布中心线
+    // 设置画布中心线
     // initCenteringGuidelines(this.canvas);
 
     // 初始化画布事件监听器
@@ -431,7 +446,7 @@ export class CanvasManager {
    * 以背景层为参照，计算背景层的偏移量并应用到所有对象上
    * 这样可以保持对象间的相对位置关系不变
    */
-  centerAllObjects() {
+  async centerAllObjects() {
     if (!this.canvas) return;
 
     // 获取所有可见对象（不是背景元素的对象）
@@ -448,8 +463,8 @@ export class CanvasManager {
     // 获取背景对象
     const backgroundObject = visibleObjects.find((obj) => obj.isBackground);
 
-    !this.canvas?.clipPath &&
-      this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
+    // !this.canvas?.clipPath &&
+    //   this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
 
     this.canvas?.clipPath?.set?.({
       left: this.width / 2,
@@ -496,7 +511,6 @@ export class CanvasManager {
     // 计算背景层的偏移量
     const deltaX = backgroundObject.left - backgroundOldLeft;
     const deltaY = backgroundObject.top - backgroundOldTop;
-
     // 将相同的偏移量应用到所有其他对象上
     const otherObjects = visibleObjects.filter(
       (obj) => obj !== backgroundObject
@@ -549,8 +563,21 @@ export class CanvasManager {
       this.updateMaskPosition(backgroundObject);
     }
 
+	// 更新颜色层信息
+	const fixedLayerObj = this.getFixedLayerObject();
+	const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
+	if(colorObject && fixedLayerObj){
+		await this.setColorObjectInfo(colorObject, fixedLayerObj);
+	}
+	const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
+	if(groupLayer && fixedLayerObj){
+		const groupRect = new fabric.Rect({});
+		await this.setColorObjectInfo(groupRect, fixedLayerObj);
+		groupLayer.clippingMask = groupRect.toObject();
+	}
+
     // 重新渲染画布
-    // this.canvas.renderAll();
+    this.canvas.renderAll();
   }
 
   /**
@@ -600,7 +627,7 @@ export class CanvasManager {
    * @param {Number} canvasWidth 画布宽度
    * @param {Number} canvasHeight 画布高度
    */
-  centerBackgroundLayer(canvasWidth, canvasHeight) {
+  async centerBackgroundLayer(canvasWidth, canvasHeight) {
     const backgroundLayerObject = this.getBackgroundLayer();
     if (!backgroundLayerObject) return false;
 
@@ -646,6 +673,11 @@ export class CanvasManager {
     if (this.maskLayer) {
       this.canvas.remove(this.maskLayer);
     }
+	this.canvas.getObjects().forEach((obj) => {
+      if (obj.id === "canvasMaskLayer") {
+        this.canvas.remove(obj);
+      }
+    })
 
     // 创建蒙层 - 使用透明矩形作为裁剪区域
     this.maskLayer = new fabric.Rect({
@@ -706,6 +738,75 @@ export class CanvasManager {
 
     return backgroundLayerByBgLayer;
   }
+  getFixedLayerObject() {
+    if (!this.canvas) return null;
+    const fixedLayer = this.canvas.getObjects().find((obj) => {
+      return obj.isFixed;
+    });
+
+    if (fixedLayer) return fixedLayer;
+
+    // 如果没有找到固定层，则根据图层ID查找
+    const fixedLayerId = this.layers.value.find((layer) => {
+      return layer.isFixed;
+    })?.id;
+
+    const fixedLayerByFixedLayer = this.canvas.getObjects().find((obj) => {
+      return obj.isFixed || obj.id === fixedLayerId;
+    });
+    if (!fixedLayerByFixedLayer) {
+      console.warn(
+        "CanvasManager.js  = >getFixedLayerObject 方法没有找到固定层"
+      );
+    }
+
+    return fixedLayerByFixedLayer;
+  }
+  getBackgroundLayerObject() {
+    if (!this.canvas) return null;
+    const backgroundLayer = this.canvas.getObjects().find((obj) => {
+      return obj.isBackground;
+    });
+
+    if (backgroundLayer) return backgroundLayer;
+
+    // 如果没有找到背景层，则根据图层ID查找
+    const backgroundLayerId = this.layers.value.find((layer) => {
+      return layer.isBackground;
+    })?.id;
+
+    const backgroundLayerByBgLayer = this.canvas.getObjects().find((obj) => {
+      return obj.isBackground || obj.id === backgroundLayerId;
+    });
+    if (!backgroundLayerByBgLayer) {
+      console.warn(
+        "CanvasManager.js  = >getBackgroundLayerObject 方法没有找到背景层"
+      );
+    }
+
+    return backgroundLayerByBgLayer;
+  }
+  getLayerObjectById(layerId) {
+    if (!this.canvas) return null;
+
+    const layerObject = this.canvas.getObjects().find((obj) => {
+      return obj.id === layerId;
+    });
+
+    if (layerObject) return layerObject;
+
+    // 如果没有找到图层对象，则根据图层ID查找
+    const layerObjectByLayerId = this.canvas.getObjects().find((obj) => {
+      return obj.id === layerId;
+    });
+    if (!layerObjectByLayerId) {
+      console.warn(
+        "CanvasManager.js  = >getLayerObjectById 方法没有找到图层对象"
+      );
+    }
+
+    return layerObjectByLayerId;
+  }
   /**
    * 更新蒙层位置
    * @param {Object} backgroundLayerObject 背景层对象
@@ -798,7 +899,7 @@ export class CanvasManager {
 
     // 如果找到了图层，则生成缩略图
     findLayer && this.thumbnailManager?.generateLayerThumbnail(findLayer.id);
-
+	this.layerManager?.sortLayers?.();
     return result;
   }
 
@@ -812,6 +913,7 @@ export class CanvasManager {
    * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
    * @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
 	 * @param {Boolean} options.isEnhanceImg 是否是增强图片
+	 * @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
    * @returns {String} 导出的图片数据URL
    */
   async exportImage(options = {}) {
@@ -857,11 +959,55 @@ export class CanvasManager {
       }
       return await this.exportManager.exportImage(enhancedOptions);
     } catch (error) {
-      console.error("CanvasManager导出图片失败:", error);
+      console.warn("CanvasManager导出图片失败:", error);
       throw error;
     }
   }
 
+  /**
+   * 导出颜色图层
+   * @returns {Object} 导出的颜色图层数据URL
+   */
+  async exportColorLayer() {
+    if (!this.exportManager) {
+      console.warn("导出管理器未初始化，请确保已设置图层管理器");
+	  return Promise.reject("颜色图层不存在");
+    }
+	const object = this.getLayerObjectById(SpecialLayerId.COLOR);
+	if(!object){
+		console.warn("颜色图层不存在，请确保已添加颜色图层");
+		return Promise.reject("颜色图层不存在");
+	}
+	const color = fillToCssStyle(object.fill)
+    const canvas = new fabric.StaticCanvas();
+    canvas.setDimensions({
+      width: object.width,
+      height: object.height,
+	  backgroundColor: null,
+	//   enableRetinaScaling: true,
+	  imageSmoothingEnabled: true,
+    });
+	const cloneObject = await new Promise((resolve, reject) => {
+		object.clone(resolve);
+	});
+	cloneObject.set({
+		left: canvas.width / 2,
+		top: canvas.height / 2,
+		scaleX: 1,
+		scaleY: 1,
+		visible: true,
+		clipPath: null,
+	});
+	canvas.add(cloneObject);
+	canvas.renderAll();
+	const base64 = canvas.toDataURL({
+		format: "png",
+		quality: 1,
+	});
+	canvas.clear();
+    return {color, base64};
+  }
+
   dispose() {
     // 释放导出管理器资源
     if (this.exportManager) {
@@ -956,14 +1102,13 @@ export class CanvasManager {
     // };
     try {
       // 清除画布中选中状态
-      this.canvas.discardActiveObject();
+    //   this.canvas.discardActiveObject();
       this.canvas.renderAll();
 
       const simplifyLayersData = simplifyLayers(
         JSON.parse(JSON.stringify(this.layers.value))
       );
-      console.log("获取画布JSON数据...", simplifyLayersData);
-      return JSON.stringify({
+      const data = JSON.stringify({
         canvas: this.canvas.toJSON([
           "id",
           "type",
@@ -978,6 +1123,7 @@ export class CanvasManager {
           "eraserable",
           "erasable",
           "customType",
+		  "fill_",
         ]),
         layers: simplifyLayersData, // 简化图层数据
         // layers: JSON.stringify(JSON.parse(JSON.stringify(this.layers.value))), // 全数据
@@ -988,6 +1134,8 @@ export class CanvasManager {
         canvasColor: this.canvasColor.value,
         activeLayerId: this.layerManager?.activeLayerId?.value,
       });
+      console.log("获取画布JSON数据...", data);
+	  return data;
     } catch (error) {
       console.error("获取画布JSON失败:", error);
       throw new Error("获取画布JSON失败");
@@ -1070,8 +1218,10 @@ export class CanvasManager {
             // }
             try {
               // 重置画布数据
-              this.setCanvasSize(this.canvas.width, this.canvas.height);
-              this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
+              await this.setCanvasSize(this.canvas.width, this.canvas.height);
+              await this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
+			  await this.createOtherLayers(this.props.otherData);
+
               // 重新构建对象关系
               // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
               // 验证图层关联关系  -  稳定后可以注释
@@ -1099,9 +1249,7 @@ export class CanvasManager {
               await calllBack?.();
 
               // 确保所有对象的交互性正确设置
-              await this.layerManager?.updateLayersObjectsInteractivity?.(
-                false
-              );
+              await this.layerManager?.updateLayersObjectsInteractivity?.();
               console.log(this.layerManager.layers.value);
 
               // 更新所有缩略图
@@ -1126,6 +1274,253 @@ export class CanvasManager {
     }
   }
 
+  /**
+   * 创建其他图层：印花、颜色、元素...
+   * @param {Object} otherData - 其他图层数据
+  */
+  async createOtherLayers(otherData) {
+	if (!otherData) return console.warn("otherData 为空不需要添加");
+	const otherData_ = JSON.parse(JSON.stringify(otherData));
+	console.log("==========创建其他图层", otherData_);
+	// 创建颜色图层
+	await this.createColorLayer(otherData_.color);
+
+	if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)){
+		console.warn("画布中已存在印花和元素组图层");
+	}else{
+		const printTrimsLayers = [];// 印花和元素图层
+		const singleLayers = [];// 平铺图层
+		otherData_?.printObject?.prints?.forEach((print, index) => {
+			print.name = t("Canvas.Print") + (index + 1);
+			if(print.ifSingle){
+				printTrimsLayers.unshift({...print});
+			}else{
+				singleLayers.unshift({...print});
+			}
+		})
+		otherData_?.trims?.prints?.forEach((print, index) => {
+			print.name = t("Canvas.Elements") + (index + 1);
+			printTrimsLayers.unshift({...print});
+		})
+		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
+	}
+  }
+
+  async setColorObjectInfo(colorRect, fixedLayerObj){
+	colorRect.set({
+	  top: fixedLayerObj.top,
+	  left: fixedLayerObj.left,
+	  width: fixedLayerObj.width,
+	  height: fixedLayerObj.height,
+	  originX: fixedLayerObj.originX,
+	  originY: fixedLayerObj.originY,
+	  scaleX: fixedLayerObj.scaleX,
+	  scaleY: fixedLayerObj.scaleY,
+	});
+	var object = fixedLayerObj;
+	const imageUrl = this.props.clothingImageUrl2;
+	if(imageUrl){
+		object = await new Promise((resolve, reject) => {
+			fabric.Image.fromURL(imageUrl, (imgObject) => {
+				colorRect.set({
+					width: imgObject.width,
+					height: imgObject.height,
+				});
+				resolve(imgObject);
+			}, { crossOrigin: "anonymous" });
+		});
+	}
+	const canvas = getObjectAlphaToCanvas(object);
+	const transparentMask = new fabric.Image(canvas, {
+        top: 0,
+        left: 0,
+		originX: fixedLayerObj.originX,
+		originY: fixedLayerObj.originY,
+    });
+    colorRect.set('clipPath', transparentMask);
+  }
+  async createColorLayer(color){
+	if(!color) return console.warn("颜色为空不需要添加");
+	if(findLayer(this.layers.value, SpecialLayerId.COLOR)) return console.warn("画布中已存在颜色图层");
+	console.log("==========添加颜色图层", color, this.layers.value.length)
+	const fixedLayerObj = this.getFixedLayerObject();
+	// 创建颜色图层对象
+	const colorRect = new fabric.Rect({
+	  id: SpecialLayerId.COLOR,
+      layerId: SpecialLayerId.COLOR,
+      layerName: t("Canvas.color"),
+      isVisible: true,
+	  isLocked: true,
+	});
+	await this.setColorObjectInfo(colorRect, fixedLayerObj);
+	const gradientObj = palletToFill(color);
+	const gradient = new fabric.Gradient({
+	  type: 'linear',
+	  gradientUnits: 'percentage',
+	  ...gradientObj,
+	})
+	colorRect.set('fill', gradient);
+	this.canvas.add(colorRect);
+	// 创建颜色图层
+	const colorLayer = createLayer({
+	  id: colorRect.layerId,
+	  name: colorRect.layerName,
+	  type: LayerType.SHAPE,
+	  visible: colorRect.isVisible,
+	  locked: colorRect.isLocked,
+	  opacity: 1.0,
+	  isFixedOther: true,
+	  fabricObjects: [colorRect.toObject(["id", "layerId", "layerName"])],
+	})
+	const groupIndex = this.layers.value.findIndex(layer => layer.isFixed || layer.isBackground);
+	this.layers.value.splice(groupIndex, 0, colorLayer);
+  }
+
+  // 创建印花和元素图层
+  async createPrintTrimsLayers(printTrimsLayers, singleLayers){
+	console.log("==========添加印花和元素图层组", printTrimsLayers, singleLayers)
+	const fixedLayerObj = this.getFixedLayerObject();
+	const flWidth = fixedLayerObj.width
+	const flHeight = fixedLayerObj.height
+	const flTop = fixedLayerObj.top
+	const flLeft = fixedLayerObj.left
+	const flScaleX = fixedLayerObj.scaleX
+	const flScaleY = fixedLayerObj.scaleY
+	const children = [];
+	// 添加印花和元素图层
+	for(let index = 0; index < printTrimsLayers.length; index++){
+	  let print = printTrimsLayers[index];
+	  let id = generateId("layer_image_");
+	  let name = print.name;
+	  let image = await new Promise(resolve => {
+        fabric.Image.fromURL(print.path, (fabricImage)=>{
+          const left = flLeft - flWidth * flScaleX / 2 + (print.location?.[0] || 0) * flScaleX
+		  const top = flTop - flHeight * flScaleY / 2 + (print.location?.[1] || 0) * flScaleY
+		  const scaleX = flWidth * (print.scale?.[0] || 1) / fabricImage.width * flScaleX
+		  const scaleY = flHeight * (print.scale?.[1] || 1) / fabricImage.height * flScaleY
+		  const {x, y} = calculateRotatedTopLeftDeg(
+			fabricImage.width * scaleX,
+			fabricImage.height * scaleY,
+			left,
+			top,
+			0,
+			print.angle || 0
+		  )
+		  const angle = print.angle || 0
+		  fabricImage.set({
+			left: x,
+			top: y,
+			scaleX: scaleX,
+			scaleY: scaleY,
+			angle: angle,
+			id: id,
+			layerId: id,
+			layerName: name,
+            selectable: true,
+            hasControls: true,
+            hasBorders: true,
+		  });
+		  resolve(fabricImage);
+		}, { crossOrigin: "anonymous" });
+	  })
+      this.canvas.add(image);
+	  let layer = createLayer({
+	    id: id,
+	    name: name,
+	    type: LayerType.BITMAP,
+	    visible: true,
+	    locked: false,
+	    opacity: 1.0,
+	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
+	  })
+	  children.push(layer);
+	};
+	// 添加平铺图层
+	for(let index = 0; index < singleLayers.length; index++){
+	  let print = singleLayers[index];
+	  let id = generateId("layer_image_");
+	  let name = print.name;
+	  let image = await new Promise(resolve => {
+        fabric.Image.fromURL(print.path, (fabricImage)=>{
+			const imgElement = fabricImage.getElement();
+            const tcanvas = document.createElement('canvas');
+			tcanvas.width = imgElement.width;
+			tcanvas.height = imgElement.height;
+			const ctx = tcanvas.getContext('2d');
+			ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
+			ctx.drawImage(imgElement, 0, 0);
+			resolve(tcanvas);
+		}, { crossOrigin: "anonymous" });
+	  })
+	  console.log("==========添加平铺图层", fixedLayerObj.width,image.width)
+	  let scaleX = fixedLayerObj.width / image.width * (print.scale?.[0] || 1) / 5;
+	  let scaleY = fixedLayerObj.height / image.height * (print.scale?.[1] || 1) / 5;
+	  let scale = fixedLayerObj.width > fixedLayerObj.height ? scaleX : scaleY;
+      let left = (print.location?.[0] || 0) - image.width * scale / 2
+      let top = (print.location?.[1] || 0) - image.height * scale / 2
+      let rect = new fabric.Rect({
+      	id: id,
+      	layerId: id,
+      	layerName: name,
+      	width: fixedLayerObj.width,
+      	height: fixedLayerObj.height,
+      	top: fixedLayerObj.top,
+      	left: fixedLayerObj.left,
+		scaleX: fixedLayerObj.scaleX,
+      	scaleY: fixedLayerObj.scaleY,
+      	originX: fixedLayerObj.originX,
+      	originY: fixedLayerObj.originY,
+      	fill: new fabric.Pattern({
+          source: image,
+          repeat: "repeat",
+          patternTransform: createPatternTransform(scale, print.angle || 0),
+          offsetX: left, // 水平偏移
+          offsetY: top, // 垂直偏移
+      	}),
+      });
+      this.canvas.add(rect);
+	  let layer = createLayer({
+	    id: id,
+	    name: name,
+	    type: LayerType.BITMAP,
+	    visible: true,
+	    locked: true,
+	    opacity: 1,
+	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
+	  })
+	  children.push(layer);
+	};
+	if(children.length === 0){
+	  let layer = createLayer({
+	    id: generateId("layer_image_"),
+	    name: t("Canvas.EmptyLayer"),
+	    type: LayerType.BITMAP,
+	    visible: true,
+	    locked: false,
+	    opacity: 1.0,
+	    fabricObjects: [],
+	  })
+	  children.push(layer);
+	}
+	const groupRect = new fabric.Rect({});
+	await this.setColorObjectInfo(groupRect, fixedLayerObj);
+	// 插入组图层
+	const groupIndex = this.layers.value.findIndex(layer => layer.isFixedOther || layer.isFixed || layer.isBackground);
+	const groupLayer = createLayer({
+		id: SpecialLayerId.SPECIAL_GROUP,
+		name: t("Canvas.PrintAndElementsGroup"),
+		type: LayerType.GROUP,
+		visible: true,
+		locked: false,
+		opacity: 1.0,
+		fabricObjects: [],
+		children: children,
+		clippingMask: groupRect.toObject(),
+		isFixedClipMask: true,
+	});
+	this.layers.value.splice(groupIndex, 0, groupLayer);
+  }
+
   /**
    * 缩放红绿图模式内容以适应当前画布大小
    * 确保衣服底图和红绿图永远在画布内可见
@@ -1249,6 +1644,7 @@ export class CanvasManager {
     return fixedLayer.fabricObject || null;
   }
 
+
   /**
    * 获取所有普通图层对象（包括红绿图）
    * @returns {Array} 普通图层对象数组
@@ -1315,4 +1711,46 @@ export class CanvasManager {
 
     return sizeMatch && positionMatch;
   }
+
+  /**
+   * 键盘移动激活对象
+   * @param {String} direction 移动方向（up, down, left, right）
+   * @param {<Number>} step 移动步长
+   * @private
+  */
+  moveActiveObject(direction, step = 1) {
+	const objects = [];
+	const activeObject = this.canvas.getActiveObject();
+	if(!activeObject) return;
+	const initPos = {
+		id: activeObject.id,
+		left: activeObject.left,
+		top: activeObject.top,
+	};
+	switch(direction) {
+		case "up":
+			activeObject.top -= step;
+			break;
+		case "down":
+			activeObject.top += step;
+			break;
+		case "left":
+			activeObject.left -= step;
+			break;
+		case "right":
+			activeObject.left += step;
+			break;
+	}
+	if(!activeObject.id) return this.canvas.renderAll();
+	const cmd = new ObjectMoveCommand({
+		canvas: this.canvas,
+		initPos,
+		finalPos: {
+			id: activeObject.id,
+			left: activeObject.left,
+			top: activeObject.top,
+		},
+	});
+	this.commandManager.executeCommand(cmd);
+  }
 }
diff --git a/src/component/Canvas/CanvasEditor/managers/ExportManager.js b/src/component/Canvas/CanvasEditor/managers/ExportManager.js
index 14bca2bd..ae398bfd 100644
--- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js
@@ -1,6 +1,7 @@
 import { fabric } from "fabric-with-all";
 import { findObjectById } from "../utils/helper";
 import { createRasterizedImage } from "../utils/selectionToImage";
+	import { OperationType, SpecialLayerId } from "../utils/layerHelper";
 
 /**
  * 图片导出管理器
@@ -18,7 +19,7 @@ export class ExportManager {
    * @param {Object} options 导出选项
    * @param {Boolean} options.isContainBg 是否包含背景图层
    * @param {Boolean} options.isContainFixed 是否包含固定图层
-	 * @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
+	* @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
    * @param {String} options.layerId 导出具体图层ID
    * @param {Array} options.layerIdArray 导出多个图层ID数组
    * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
@@ -26,7 +27,7 @@ export class ExportManager {
 	 * @param {Boolean} options.isEnhanceImg 是否是增强图片
    * @returns {String} 导出的图片数据URL
    */
-  exportImage(options = {}) {
+  async exportImage(options = {}) {
     const {
       isContainBg = false,
       isContainFixed = false,
@@ -35,9 +36,16 @@ export class ExportManager {
       layerIdArray = [],
       expPicType = "png",
       restoreOpacityInRedGreen = true,
-			isEnhanceImg, // 是否是增强图片
+	  isEnhanceImg, // 是否是增强图片
     } = options;
     try {
+      // 查找颜色图层并隐藏
+      const colorLayer = this.layerManager.getLayerById(SpecialLayerId.COLOR);
+      if (colorLayer && colorLayer.visible) {
+        colorLayer.visible = false;
+        await this.layerManager?.updateLayersObjectsInteractivity();
+      }
+
       // 检查是否为红绿图模式
       const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;
       // 如果指定了具体图层ID，导出指定图层
@@ -48,7 +56,7 @@ export class ExportManager {
           isRedGreenMode,
           restoreOpacityInRedGreen,
           isCropByBg,
-					isEnhanceImg, // 是否是增强图片
+		  isEnhanceImg, // 是否是增强图片
         );
       }
 
@@ -62,7 +70,7 @@ export class ExportManager {
           isRedGreenMode,
           restoreOpacityInRedGreen,
           isCropByBg,
-					isEnhanceImg, // 是否是增强图片
+		  isEnhanceImg, // 是否是增强图片
         );
       }
 
@@ -74,7 +82,7 @@ export class ExportManager {
         isRedGreenMode,
         restoreOpacityInRedGreen,
         isCropByBg,
-				isEnhanceImg, // 是否是增强图片
+		isEnhanceImg, // 是否是增强图片
       );
     } catch (error) {
       console.error("导出图片失败:", error);
@@ -128,8 +136,6 @@ export class ExportManager {
         objectsToExport,
         expPicType,
         restoreOpacityInRedGreen,
-				isCropByBg, // 是否使用背景大小裁剪
-				isEnhanceImg, // 是否是增强图片
       );
     }
 
@@ -555,37 +561,22 @@ export class ExportManager {
       );
     }
 
-    // 获取固定图层对象的边界矩形（包含位置、尺寸、缩放等信息）
-    const fixedBounds = fixedLayerObject?.getBoundingRect?.();
-
     // 使用固定图层的实际显示尺寸作为导出画布尺寸
-    const canvasWidth = Math.round(fixedBounds.width);
-    const canvasHeight = Math.round(fixedBounds.height);
+    const canvasWidth = (fixedLayerObject.width);
+    const canvasHeight = (fixedLayerObject.height);
 
     console.log(`红绿图模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
-    console.log("固定图层边界:", fixedBounds);
-
-    // 创建固定尺寸的临时画布
-    const scaleFactor = 2; // 高清导出
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = canvasWidth * scaleFactor;
-    tempCanvas.height = canvasHeight * scaleFactor;
-    tempCanvas.style.width = canvasWidth + "px";
-    tempCanvas.style.height = canvasHeight + "px";
-
-    const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
+    const tempFabricCanvas = new fabric.StaticCanvas()
+	tempFabricCanvas.setDimensions({
       width: canvasWidth,
       height: canvasHeight,
       backgroundColor: null,
-      enableRetinaScaling: true,
+    //   enableRetinaScaling: true,
       imageSmoothingEnabled: true,
     });
-    tempFabricCanvas.setZoom(1);
-
+    // tempFabricCanvas.setZoom(1);
+	console.log("==========", fixedLayerObject)
     try {
-      // 获取裁剪路径对象（如果存在）
-      const clipPathObject = await this._getClipPathObject(fixedBounds);
-
       // 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
       for (let i = 0; i < objectsToExport.length; i++) {
         const obj = objectsToExport[i];
@@ -596,18 +587,16 @@ export class ExportManager {
         if (cloned) {
           // 调整对象位置：将原画布坐标转换为以固定图层为原点的相对坐标
           cloned.set({
-            left: cloned.left - fixedBounds.left,
-            top: cloned.top - fixedBounds.top,
+            left: canvasWidth / 2,
+            top: canvasHeight / 2,
+			scaleX: cloned.scaleX / fixedLayerObject.scaleX,
+			scaleY: cloned.scaleY / fixedLayerObject.scaleY,
+			originX: "center",
+			originY: "center",
           });
-
+		  console.log("==========", {...cloned})
           // 更新对象坐标
           cloned.setCoords();
-
-          // 设置裁剪路径到对象
-          if (clipPathObject) {
-            cloned.clipPath = clipPathObject;
-          }
-
           tempFabricCanvas.add(cloned);
         }
       }
@@ -616,7 +605,7 @@ export class ExportManager {
       tempFabricCanvas.renderAll();
 
       // 生成图片
-      return this._generateHighQualityDataURL(tempCanvas, expPicType);
+      return this._generateHighQualityDataURL(tempFabricCanvas, expPicType);
     } finally {
       this._cleanupTempCanvas(tempFabricCanvas);
     }
@@ -736,7 +725,7 @@ export class ExportManager {
    */
   _cloneObjectAsync(
     obj,
-    propertiesToInclude = ["id", "layerId", "layerName", "name"]
+    propertiesToInclude = ["id", "layerId", "layerName", "name", "scaleX", "scaleY"]
   ) {
     return new Promise((resolve, reject) => {
       if (!obj) {
diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
index ee2d6cc0..272c22fc 100644
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -31,6 +31,7 @@ import {
 } from "../commands/ObjectLayerCommands";
 import {
   LayerType,
+  SpecialLayerId,
   BlendMode,
   createLayer,
   createBackgroundLayer,
@@ -343,35 +344,36 @@ export class LayerManager {
     });
 
     // 批量更新对象
-    objects.forEach(async (obj) => {
-      const layer = layerMap[obj.layerId];
+	for(let obj of objects){
+      let layer = layerMap[obj.layerId];
 
       if (!obj.layerId) {
         // 没有关联图层的对象使用默认设置
         obj.selectable = false;
         obj.evented = false;
         obj.erasable = false; // 未关联图层的对象不可擦除
-        return;
+        break;
       }
 
-      if (!layer) return;
+      if (!layer) break;
 
       // 设置一级图层对象的交互性
       await this._setObjectInteractivity(obj, layer, editorMode);
 
       // 设置子图层对象的交互性
-      layer?.children?.forEach(async (childLayer) => {
-        const childObj = this.canvas
+	  for(let childLayer of layer.children){
+        let childObj = this.canvas
           .getObjects()
           .find((o) => o.layerId === childLayer.id);
         if (childObj) {
           await this._setObjectInteractivity(childObj, childLayer, editorMode);
         }
-      });
-    });
-
+	  };
+    };
+	
     // 设置裁剪对象
-    layers.forEach(async (layer) => {
+	for(let layer of layers){
+      if(layer.id === SpecialLayerId.COLOR) break;
       let clippingMaskFabricObject = null;
       if (layer.clippingMask) {
         // 反序列化 clippingMask
@@ -379,7 +381,7 @@ export class LayerManager {
           layer.clippingMask,
           this.canvas
         );
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
 
         clippingMaskFabricObject.set({
           // 设置绝对定位
@@ -403,7 +405,7 @@ export class LayerManager {
             .find((o) => o.layerId === childLayer.id);
           if (childObj) {
             childObj.clipPath = clippingMaskFabricObject;
-            childObj.dirty = true; // 标记为脏对象
+            // childObj.dirty = true; // 标记为脏对象
             childObj.setCoords();
           }
 
@@ -499,7 +501,7 @@ export class LayerManager {
           isOldSelectObject
         );
       }
-    });
+    };
   }
 
   /**
@@ -952,18 +954,28 @@ export class LayerManager {
     // 查找要删除的图层
     const { layer, parent } = findLayerRecursively(this.layers.value, layerId);
     // 如果是背景层或固定层，不允许删除
-    if (layer && (layer.isBackground || layer.isFixed)) {
+    if (layer && (layer.isBackground || layer.isFixed || layer.isFixedOther)) {
       console.warn(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
-      message.warning(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
+      message.warning(layer.isBackground ? this.t("Canvas.backLayerCannotDelete") : this.t("Canvas.fixedLayerCannotDelete"));
       return false;
     }
 
+
     // 检查是否是唯一的普通图层
-    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+	var isChild = false;
+	var parentLength = 0;
+	const normalLayers = this.layers.value.filter((layer) => {
+		if(layer.children.some(v => v.id == layerId)){
+			isChild = true;
+			parentLength = layer.children.length;
+		}
+		return !layer.isFixed && !layer.isFixedOther && !layer.isBackground
+	})
+    // const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
 	console.log("普通图层:", normalLayers)
-    if (normalLayers.length === 1) {
+    if (isChild ? parentLength <= 1 : normalLayers.length <= 1) {
       console.warn("不能删除唯一的普通图层");
-      message.warning("不能删除唯一的普通图层");
+      message.warning(this.t("Canvas.cannotDeleteOnlyLayer"));
       return false;
     }
     // // 如果图层有子图层，提示确认
@@ -1132,7 +1144,7 @@ export class LayerManager {
 
       return acc;
     }, []);
-
+	console.log("==========", allObjects)
     // if (layer.fill) {
     //   // 如果图层有填充颜色，设置所有对象的填充颜色
     //   const { object } = findObjectById(this.canvas, layer.fill.id);
@@ -1578,6 +1590,12 @@ export class LayerManager {
       // 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
       if (b.isFixed && !a.isFixed) return -1;
 
+	  // 如果a是固定图层而b不是固定图层，a应该排在后面（固定图层在普通图层下方）
+      if (a.isFixedOther && !b.isFixedOther) return 1;
+      // 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
+      if (b.isFixedOther && !a.isFixedOther) return -1;
+
+	  
       // 其他情况保持原有顺序
       return 0;
     });
@@ -1848,9 +1866,9 @@ export class LayerManager {
     }
 
     // 检查是否是唯一的普通图层
-    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
 	console.log("普通图层:", normalLayers)
-    if (normalLayers.length === 1) {
+    if (normalLayers.length <= 1) {
       console.warn("不能剪切唯一的普通图层");
       return null;
     }
@@ -3250,7 +3268,7 @@ export class LayerManager {
    * @private
    */
   _setupGroupMaskMovementSync(activeSelection, layer) {
-    if (!activeSelection || !layer || !layer.clippingMask) {
+    if (!activeSelection || !layer || !layer.clippingMask || layer.isFixedClipMask) {
       return;
     }
 
@@ -3314,7 +3332,6 @@ export class LayerManager {
             // 计算移动距离
             const deltaX = target.left - initialLeft;
             const deltaY = target.top - initialTop;
-
             // 创建更新遮罩位置的命令
             const command = new UpdateGroupMaskPositionCommand({
               canvas: this.canvas,
diff --git a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
index ba0d01d8..2f6010fc 100644
--- a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
@@ -91,12 +91,12 @@ export class ThumbnailManager {
         // 重新创建遮罩对象
         clippingMaskFabricObject = await restoreFabricObject(layer?.clippingMask, this.canvas);
 
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
         clippingMaskFabricObject.set({
           absolutePositioned: true,
         });
 
-        clippingMaskFabricObject.dirty = true;
+        // clippingMaskFabricObject.dirty = true;
         clippingMaskFabricObject.setCoords();
       }
 
@@ -128,8 +128,13 @@ export class ThumbnailManager {
     }
 
     const { layer } = findLayerRecursively(this.layers.value, layerId);
-    let layersToRasterize = [];
 
+	if (!layer) {
+      console.warn("⚠️ 无效的图层，无法收集对象");
+      return [];
+    }
+
+    let layersToRasterize = [];
     if (layer.children && layer.children.length > 0) {
       // 组图层：收集自身和所有子图层
       layersToRasterize = this._collectLayersToRasterize(layer);
diff --git a/src/component/Canvas/CanvasEditor/managers/animation/AnimationManager.js b/src/component/Canvas/CanvasEditor/managers/animation/AnimationManager.js
index fae2d949..b8ed055d 100644
--- a/src/component/Canvas/CanvasEditor/managers/animation/AnimationManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/animation/AnimationManager.js
@@ -69,7 +69,7 @@ export class AnimationManager {
 
     // 如果变化太小，直接应用缩放
     if (Math.abs(targetZoom - currentZoom) < 0.01) {
-    //   this._applyZoom(point, targetZoom);
+      this._applyZoom(point, targetZoom);
       return;
     }
 
@@ -121,7 +121,7 @@ export class AnimationManager {
           this._zoomAnimation = null;
 
           // 确保最终状态准确
-        //   this._applyZoom(point, targetZoom, true);
+          this._applyZoom(point, targetZoom, true);
         },
       };
 
@@ -173,7 +173,7 @@ export class AnimationManager {
         this._zoomAnimation = null;
 
         // 确保最终状态准确
-        // this._applyZoom(point, targetZoom, true);
+        this._applyZoom(point, targetZoom, true);
       },
     };
 
@@ -817,7 +817,7 @@ export class AnimationManager {
         this._wasZooming = false;
 
         // 确保最终状态准确
-        // this._applyZoom(point, targetZoom, true);
+        this._applyZoom(point, targetZoom, true);
       },
     });
   }
diff --git a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js
index c2728277..c6984c9b 100644
--- a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js
@@ -8,6 +8,7 @@ import { PerformanceManager } from "./PerformanceManager.js";
  */
 export class CommandManager {
   constructor(options = {}) {
+	this.canvas = options.canvas;
     this.undoStack = [];
     this.redoStack = [];
     this.maxHistorySize = options.maxHistorySize || 50;
@@ -205,6 +206,7 @@ export class CommandManager {
     const startTime = performance.now();
 
     try {
+      this.canvas?.discardActiveObject();
       const command = this.undoStack.pop();
       console.log(`↩️ 撤销命令: ${command.constructor.name}`);
 
@@ -243,6 +245,7 @@ export class CommandManager {
     const startTime = performance.now();
 
     try {
+      this.canvas?.discardActiveObject();
       const command = this.redoStack.pop();
       console.log(`↪️ 重做命令: ${command.constructor.name}`);
 
diff --git a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
index fd6e22b8..270c3003 100644
--- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
@@ -688,7 +688,6 @@ export class CanvasEventManager {
           this.layerManager.commandManager.execute(transformCmd, {
             name: "对象修改",
           });
-
           // 清除临时状态记录
           delete activeObj._initialTransformState;
         }
diff --git a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
index 49c1e110..8e1b9408 100644
--- a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
@@ -10,6 +10,7 @@ export class KeyboardManager {
    * @param {Object} options.toolManager 工具管理器实例
    * @param {Object} options.commandManager 命令管理器实例
    * @param {Object} options.layerManager 图层管理器实例
+   * @param {Object} options.canvasManager 画布管理器实例
    * @param {Function} options.pasteText 粘贴文本回调函数
    * @param {Function} options.pasteImage 粘贴图片回调函数
    * @param {Ref<Boolean>} options.isRedGreenMode 是否为红绿模式
@@ -19,6 +20,7 @@ export class KeyboardManager {
     this.toolManager = options.toolManager;
     this.commandManager = options.commandManager;
     this.layerManager = options.layerManager;
+    this.canvasManager = options.canvasManager;
     this.container = options.container || document;
 	this.pasteText = options.pasteText || (() => {});
 	this.pasteImage = options.pasteImage || (() => {});
@@ -125,6 +127,10 @@ export class KeyboardManager {
       // 删除
       delete: { action: "delete", description: "删除" },
       backspace: { action: "delete", description: "删除" },
+      up: { action: "up", description: "上" },
+      down: { action: "down", description: "下" },
+      left: { action: "left", description: "左" },
+      right: { action: "right", description: "右" },
 
       // 选择
       [`${cmdOrCtrl}+a`]: { action: "selectAll", description: "全选" },
@@ -488,6 +494,14 @@ export class KeyboardManager {
         }
         break;
 
+	  case "up":
+	  case "down":
+	  case "left":
+	  case "right":
+        // 方向键逻辑
+		this.canvasManager.moveActiveObject(action);
+	    break;
+
       case "increaseBrushSize":
         // 增大画笔尺寸
         if (this.toolManager && this.toolManager.brushManager) {
@@ -639,7 +653,6 @@ export class KeyboardManager {
     if (event.altKey) shortcutKey += "alt+";
 
     const key = event.key.toLowerCase();
-
     // 特殊键处理
     switch (key) {
       case " ":
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
index cb91dcae..4838b57e 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyCPUManager.js
@@ -12,7 +12,7 @@ export class LiquifyCPUManager {
 			sharpenAmount: 0.3, // 添加锐化强度参数
 			...options,
 		};
-		console.log("CPU版本的液化管理器config",this.config);
+		console.log("CPU版本的液化管理器config", this.config);
 
 		this.params = {
 			size: 60, // 增大默认尺寸
@@ -63,7 +63,8 @@ export class LiquifyCPUManager {
 		// 新增：持续按压相关状态
 		this.pressStartTime = 0; // 按压开始时间
 		this.pressDuration = 0; // 按压持续时间
-		this.accumulatedRotation = 0; // 累积旋转角度（用于顺时针/逆时针）
+		this.accumulatedRotation = 0; // 累积旋转角度（用于顺时针/逆时针）--废除使用固定角度
+		this.fixedRotationAngle = 0.32; // 固定旋转角度
 		this.accumulatedScale = 0; // 累积缩放量（用于捏合/展开）
 		this.lastApplyTime = 0; // 上次应用时间
 		this.continuousApplyInterval = 50; // 持续应用间隔（毫秒）
@@ -189,7 +190,7 @@ export class LiquifyCPUManager {
 		this.isHolding = true;
 
 		// 启动持续效果定时器（对于所有模式都支持持续按压）
-		this.startContinuousEffect();
+		// this.startContinuousEffect();
 
 		console.log(`开始液化操作，初始点: (${x}, ${y})`);
 	}
@@ -220,7 +221,6 @@ export class LiquifyCPUManager {
 	// 新增：启动持续效果
 	startContinuousEffect() {
 		this.stopContinuousEffect(); // 先停止已有的定时器
-
 		this.continuousTimer = setInterval(() => {
 			if (this.isHolding && this.initialized) {
 				// 更新持续时间
@@ -273,7 +273,6 @@ export class LiquifyCPUManager {
 	 */
 	_applyEnhancedRotationDeformation(centerX, centerY, radius, strength, isClockwise) {
 		if (!this.currentImageData) return;
-
 		const data = this.currentImageData.data;
 		const width = this.currentImageData.width;
 		const height = this.currentImageData.height;
@@ -286,6 +285,7 @@ export class LiquifyCPUManager {
 		const rotationAngle =
 			(isClockwise ? 1 : -1) * baseRotationSpeed * pressure * power * (1.0 + timeFactor * 0.5);
 
+		console.log("持续应用旋转效果");
 		// 累积旋转角度 - 关键：这确保了持续旋转效果
 		this.accumulatedRotation += rotationAngle;
 
@@ -309,13 +309,14 @@ export class LiquifyCPUManager {
 
 					// 计算旋转后的源位置 - 关键算法
 					const angle = Math.atan2(dy, dx);
-					const newAngle = angle + this.accumulatedRotation * falloff;
+					// const newAngle = angle + this.accumulatedRotation * falloff;
+					const newAngle = angle + (isClockwise ? this.fixedRotationAngle : -this.fixedRotationAngle) * falloff;
 
 					const sourceX = centerX + Math.cos(newAngle) * distance;
 					const sourceY = centerY + Math.sin(newAngle) * distance;
 
 					// 双线性插值采样 - 确保像素连续性
-					const color = this._bilinearSample(tempData, width, height, sourceX, sourceY);
+					const color = this._bicubicInterpolate(tempData, width, height, sourceX, sourceY);
 
 					if (color) {
 						const targetIdx = (y * width + x) * 4;
@@ -376,7 +377,7 @@ export class LiquifyCPUManager {
 					const sourceY = centerY + dy * scale;
 
 					// 双线性插值采样
-					const color = this._bilinearSample(tempData, width, height, sourceX, sourceY);
+					const color = this._bicubicInterpolate(tempData, width, height, sourceX, sourceY);
 
 					if (color) {
 						const targetIdx = (y * width + x) * 4;
@@ -401,16 +402,17 @@ export class LiquifyCPUManager {
 	 */
 	_applyEnhancedPushDeformation(centerX, centerY, radius, strength) {
 		if (!this.currentImageData) return;
-
 		const data = this.currentImageData.data;
 		const width = this.currentImageData.width;
 		const height = this.currentImageData.height;
 		const tempData = new Uint8ClampedArray(data);
 
 		// 计算推拉方向
-		const deltaX = this.currentMouseX - this.initialMouseX;
-		const deltaY = this.currentMouseY - this.initialMouseY;
+		const deltaX = this.currentMouseX - this.lastMouseX;
+		const deltaY = this.currentMouseY - this.lastMouseY;
 		const dragLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+		this.lastMouseX = this.currentMouseX;
+		this.lastMouseY = this.currentMouseY;
 
 		const processRadius = Math.min(radius, Math.min(width, height) / 2);
 		const minX = Math.max(0, Math.floor(centerX - processRadius));
@@ -426,6 +428,7 @@ export class LiquifyCPUManager {
 
 				for (let y = minY; y < maxY; y++) {
 					for (let x = minX; x < maxX; x++) {
+						// 此处循环4万次
 						const dx = x - centerX;
 						const dy = y - centerY;
 						const distance = Math.sqrt(dx * dx + dy * dy);
@@ -442,7 +445,7 @@ export class LiquifyCPUManager {
 							const sourceX = x - pushX;
 							const sourceY = y - pushY;
 
-							const color = this._bilinearSample(tempData, width, height, sourceX, sourceY);
+							const color = this._bicubicInterpolate(tempData, width, height, sourceX, sourceY);
 
 							if (color) {
 								const targetIdx = (y * width + x) * 4;
@@ -461,9 +464,9 @@ export class LiquifyCPUManager {
 		// 有拖拽时的推拉效果
 		const dirX = deltaX / dragLength;
 		const dirY = deltaY / dragLength;
-
 		for (let y = minY; y < maxY; y++) {
 			for (let x = minX; x < maxX; x++) {
+				// 此处循环4万次
 				const dx = x - centerX;
 				const dy = y - centerY;
 				const distance = Math.sqrt(dx * dx + dy * dy);
@@ -473,13 +476,13 @@ export class LiquifyCPUManager {
 					const falloff = 1 - normalizedDistance * normalizedDistance;
 					const factor = falloff * strength;
 
-					const offsetX = dirX * factor * Math.min(dragLength * 0.3, 15);
-					const offsetY = dirY * factor * Math.min(dragLength * 0.3, 15);
+					const offsetX = dirX * factor * Math.min(dragLength * 2, 30);
+					const offsetY = dirY * factor * Math.min(dragLength * 2, 30);
 
 					const sourceX = x - offsetX;
 					const sourceY = y - offsetY;
 
-					const color = this._bilinearSample(tempData, width, height, sourceX, sourceY);
+					const color = this._bicubicInterpolate(tempData, width, height, sourceX, sourceY);
 
 					if (color) {
 						const targetIdx = (y * width + x) * 4;
@@ -527,7 +530,7 @@ export class LiquifyCPUManager {
 				break;
 
 			case this.modes.PUSH:
-				this._applyEnhancedPushDeformation(x, y, radius, strength);
+				// this._applyEnhancedPushDeformation(x, y, radius, strength);
 				break;
 
 			default: {
@@ -553,101 +556,7 @@ export class LiquifyCPUManager {
 	}
 
 	/**
-	 * 应用液化变形 - 主要入口，集成增强算法
-	 */
-	// applyDeformation(x, y) {
-	//   if (!this.initialized || !this.originalImageData) {
-	//     console.warn("液化管理器未初始化或缺少必要数据");
-	//     return this.currentImageData;
-	//   }
-
-	//   // 更新鼠标位置
-	//   this.currentMouseX = x;
-	//   this.currentMouseY = y;
-
-	//   // 计算拖拽参数
-	//   const deltaX = this.currentMouseX - this.initialMouseX;
-	//   const deltaY = this.currentMouseY - this.initialMouseY;
-	//   this.dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-	//   this.dragAngle = Math.atan2(deltaY, deltaX);
-
-	//   // 获取当前参数
-	//   const { size, pressure, power } = this.params;
-	//   const mode = this.currentMode;
-	//   const radius = size;
-	//   const strength = pressure * power;
-
-	//   // 根据模式选择算法
-	//   const pixelModes = [
-	//     this.modes.CLOCKWISE,
-	//     this.modes.COUNTERCLOCKWISE,
-	//     this.modes.PINCH,
-	//     this.modes.EXPAND,
-	//     this.modes.PUSH,
-	//   ];
-
-	//   if (pixelModes.includes(mode)) {
-	//     // 使用增强的像素算法
-	//     switch (mode) {
-	//       case this.modes.CLOCKWISE:
-	//         this._applyEnhancedRotationDeformation(x, y, radius, strength, false);
-	//         break;
-	//       case this.modes.COUNTERCLOCKWISE:
-	//         this._applyEnhancedRotationDeformation(x, y, radius, strength, true);
-	//         break;
-	//       case this.modes.PINCH:
-	//         this._applyEnhancedPinchDeformation(x, y, radius, strength, true);
-	//         break;
-	//       case this.modes.EXPAND:
-	//         this._applyEnhancedPinchDeformation(x, y, radius, strength, false);
-	//         break;
-	//       case this.modes.PUSH:
-	//         this._applyEnhancedPushDeformation(x, y, radius, strength);
-	//         break;
-	//     }
-
-	//     // 更新最后应用时间
-	//     this.lastApplyTime = Date.now();
-	//     this.isFirstApply = false;
-
-	//     return this.currentImageData;
-	//   } else {
-	//     // 使用原有的网格算法处理其他模式
-	//     if (!this.mesh) {
-	//       console.warn("网格未初始化");
-	//       return this.currentImageData;
-	//     }
-
-	//     const finalStrength = (strength * this.config.maxStrength) / 100;
-
-	//     // 应用变形
-	//     this._applyDeformation(
-	//       x,
-	//       y,
-	//       radius,
-	//       finalStrength,
-	//       mode,
-	//       this.params.distortion,
-	//     );
-
-	//     // 平滑处理
-	//     if (this.config.smoothingIterations > 0) {
-	//       this._smoothMesh();
-	//     }
-
-	//     // 更新图像数据
-	//     const result = this._applyMeshToImage();
-
-	//     // 更新最后应用时间
-	//     this.lastApplyTime = Date.now();
-	//     this.isFirstApply = false;
-
-	//     return result;
-	//   }
-	// }
-
-	/**
-	 * 双线性插值采样 - 用于像素级算法
+	 * 双线性插值函数
 	 * @param {Uint8ClampedArray} data 图像数据
 	 * @param {number} width 图像宽度
 	 * @param {number} height 图像高度
@@ -655,19 +564,55 @@ export class LiquifyCPUManager {
 	 * @param {number} y Y坐标
 	 * @returns {Array|null} RGBA颜色值数组或null
 	 */
-	_bilinearSample(data, width, height, x, y) {
-		return this._bicubicInterpolate(data, width, height, x, y);
+	_bilinearInterpolate(data, width, height, x, y) {
+		const x1 = Math.floor(x);
+		const y1 = Math.floor(y);
+		const x2 = Math.min(width - 1, x1 + 1);
+		const y2 = Math.min(height - 1, y1 + 1);
+
+		const dx = x - x1;
+		const dy = y - y1;
+		const dx1 = 1 - dx;
+		const dy1 = 1 - dy;
+		const index1 = (y1 * width + x1) * 4;
+		const index2 = (y1 * width + x2) * 4;
+		const index3 = (y2 * width + x1) * 4;
+		const index4 = (y2 * width + x2) * 4;
+		const r =
+			data[index1] * dx1 * dy1 +
+			data[index2] * dx * dy1 +
+			data[index3] * dx1 * dy +
+			data[index4] * dx * dy;
+		const g =
+			data[index1 + 1] * dx1 * dy1 +
+			data[index2 + 1] * dx * dy1 +
+			data[index3 + 1] * dx1 * dy +
+			data[index4 + 1] * dx * dy;
+		const b =
+			data[index1 + 2] * dx1 * dy1 +
+			data[index2 + 2] * dx * dy1 +
+			data[index3 + 2] * dx1 * dy +
+			data[index4 + 2] * dx * dy;
+		const a =
+			data[index1 + 3] * dx1 * dy1 +
+			data[index2 + 3] * dx * dy1 +
+			data[index3 + 3] * dx1 * dy +
+			data[index4 + 3] * dx * dy;
+		return [Math.round(r), Math.round(g), Math.round(b), Math.round(a)];
 	}
+
 	/**
- * 双三次插值实现 - 确保正确处理Alpha通道
- * @param {Uint8ClampedArray} data 图像数据
- * @param {number} width 图像宽度
- * @param {number} height 图像高度
- * @param {number} x X坐标
- * @param {number} y Y坐标
- * @returns {Array|null} RGBA颜色值数组或null
- */
+	 * 三次插值实现 - 确保正确处理Alpha通道
+	 * @param {Uint8ClampedArray} data 图像数据
+	 * @param {number} width 图像宽度
+	 * @param {number} height 图像高度
+	 * @param {number} x X坐标
+	 * @param {number} y Y坐标
+	 * @returns {Array|null} RGBA颜色值数组或null
+	 */
 	_bicubicInterpolate(data, width, height, x, y) {
+		// return this._bilinearInterpolate(data, width, height, x, y);
+
 		// 获取周围16个像素点
 		const x1 = Math.floor(x) - 1;
 		const y1 = Math.floor(y) - 1;
diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
index 84645536..cd1fb2c7 100644
--- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
@@ -310,7 +310,7 @@ export class LiquifyWebGLManager {
     this.isHolding = true;
 
     // 启动持续效果定时器
-    this.startContinuousEffect();
+    // this.startContinuousEffect();
 
     console.log(`WebGL液化开始，初始点: (${x}, ${y})`);
   }
diff --git a/src/component/Canvas/CanvasEditor/utils/LayerSort.js b/src/component/Canvas/CanvasEditor/utils/LayerSort.js
index fba7372b..eb87403c 100644
--- a/src/component/Canvas/CanvasEditor/utils/LayerSort.js
+++ b/src/component/Canvas/CanvasEditor/utils/LayerSort.js
@@ -79,6 +79,9 @@ export class LayerSort {
       } else if (layer.isFixed && layer.fabricObject) {
         // 固定图层对象
         zIndexMap.set(layer.fabricObject.id, currentZIndex++);
+      } else if (layer.isFixedOther && layer.fabricObject) {
+        // 其他固定图层对象
+        zIndexMap.set(layer.fabricObject.id, currentZIndex++);
       } else if (!layer.isBackground && !layer.isFixed) {
         // 普通图层
         currentZIndex = this.processLayerObjects(
diff --git a/src/component/Canvas/CanvasEditor/utils/event.js b/src/component/Canvas/CanvasEditor/utils/event.js
new file mode 100644
index 00000000..853645f2
--- /dev/null
+++ b/src/component/Canvas/CanvasEditor/utils/event.js
@@ -0,0 +1,37 @@
+class EventManager {
+	constructor() {
+		this.eventMap = {};
+	}
+	/**
+	 * 注册事件
+	 * @param {string} eventName - 事件名称
+	 * @param {function} callback - 事件回调函数
+	 */
+	on(eventName, callback) {
+		if (!this.eventMap[eventName]) {
+			this.eventMap[eventName] = [];
+		}
+		this.eventMap[eventName].push(callback);
+	}
+	/**
+	 * 触发事件
+	 * @param {string} eventName - 事件名称
+	 * @param {...any} args - 事件参数
+	 */
+	emit(eventName, ...args) {
+		if (this.eventMap[eventName]) {
+			this.eventMap[eventName].forEach(callback => callback(...args));
+		}
+	}
+	/**
+	 * 移除事件
+	 * @param {string} eventName - 事件名称
+	 * @param {function} callback - 事件回调函数
+	 */
+	off(eventName, callback) {
+		if (this.eventMap[eventName]) {
+			this.eventMap[eventName] = this.eventMap[eventName].filter(cb => cb !== callback);
+		}
+	}
+}
+export default new EventManager();
diff --git a/src/component/Canvas/CanvasEditor/utils/helper.js b/src/component/Canvas/CanvasEditor/utils/helper.js
index 04368809..729298ad 100644
--- a/src/component/Canvas/CanvasEditor/utils/helper.js
+++ b/src/component/Canvas/CanvasEditor/utils/helper.js
@@ -429,7 +429,8 @@ export function objectIsInCanvas(canvas, targetObj) {
   }
 
   const targetId = targetObj.id;
-  if (!targetId) {
+  const targetLayerId = targetObj.layerId;
+  if (!targetId && !targetLayerId) {
     return { flag: false, object: null, parent: null };
   }
 
@@ -437,7 +438,11 @@ export function objectIsInCanvas(canvas, targetObj) {
   const topLevelObjects = canvas.getObjects();
 
   // 直接在顶层查找
-  const directMatch = topLevelObjects.find((obj) => obj.id === targetId);
+  const directMatch = topLevelObjects.find((obj) => {
+	const isId = !targetId ? true : obj.id === targetId;
+	const isLayerId = !targetLayerId ? true : obj.layerId === targetLayerId;
+	return isId && isLayerId;
+  });
   if (directMatch) {
     return { flag: true, object: directMatch, parent: null };
   }
@@ -500,6 +505,22 @@ export function findObjectById(canvas, objectId) {
   return { object: result.object, parent: result.parent };
 }
 
+/**
+ * 通过layerID查找对象（增强版）
+ * @param {fabric.Canvas} canvas 画布实例
+ * @param {string} layerId 图层ID
+ * @returns {Object} { object: fabric.Object|null, parent: fabric.Group|null }
+ */
+export function findObjectByLayerId(canvas, layerId) {
+  if (!canvas || !layerId) {
+    return { object: null, parent: null };
+  }
+
+  const result = objectIsInCanvas(canvas, { layerId: layerId });
+  return { object: result.object, parent: result.parent };
+}
+
+
 /**
  * 安全移除画布对象（包括组内对象）
  * @param {fabric.Canvas} canvas 画布实例
@@ -738,3 +759,203 @@ export function getLayerObjectsZIndex(canvas, layerId) {
   const allInfo = getAllObjectsZIndex(canvas);
   return allInfo.filter((info) => info.layerId === layerId);
 }
+
+
+/**
+ * 计算两点之间的角度
+ * @param {number} x1 第一个点的x坐标
+ * @param {number} y1 第一个点的y坐标
+ * @param {number} x2 第二个点的x坐标
+ * @param {number} y2 第二个点的y坐标
+ * @returns {number} 角度值（-90 - 270度）
+*/
+export function calculateAngle(x1, y1, x2, y2, int = false) {
+    // 计算两点之间的差值
+    const deltaX = x2 - x1;
+    const deltaY = y2 - y1;
+    
+    // 使用Math.atan2计算弧度，然后转换为角度
+    let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI + 90;
+        
+    return int ? Math.round(angle) : angle;
+}
+
+/**
+ * 通过角度计算直线上的两点坐标返回0-1范围的坐标
+ * @param {number} angle 角度值（0-360度）
+ * @returns {{x1: number, y1: number, x2: number, y2: number}} 包含两个点坐标
+*/
+export function calculateLinePoints(angle) {
+    // 将角度转换为弧度
+    const radian = (angle - 90) * Math.PI / 180;
+    
+    // 计算直线上的两点坐标
+    const x1 = 0.5 - 0.5 * Math.cos(radian);
+    const y1 = 0.5 - 0.5 * Math.sin(radian);
+    const x2 = 0.5 + 0.5 * Math.cos(radian);
+    const y2 = 0.5 + 0.5 * Math.sin(radian);
+    
+    return {x1, y1, x2, y2};
+}
+
+export function rgbaToHex(rgba){
+    const r = rgba.r.toString(16).padStart(2, "0");
+    const g = rgba.g.toString(16).padStart(2, "0");
+    const b = rgba.b.toString(16).padStart(2, "0");
+    return `#${r}${g}${b}`;
+}
+
+export function fillToPallet(fill) {
+    if(!fill.coords || !fill.colorStops) return {};
+	const angle = calculateAngle(fill.coords.x1, fill.coords.y1, fill.coords.x2, fill.coords.y2);
+	const colors = new Set();
+	// console.log("==========fill", fill);
+	const gradientList = fill.colorStops.map((stop) => {
+		colors.add(stop.color);
+		const rgbas = stop.color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(", ");
+		const rgba = {
+			r: parseInt(rgbas[0]),
+			g: parseInt(rgbas[1]),
+			b: parseInt(rgbas[2]),
+			a: parseFloat(rgbas[3]),
+		};
+		if(isNaN(rgba.r)) rgba.r = 0;
+		if(isNaN(rgba.g)) rgba.g = 0;
+		if(isNaN(rgba.b)) rgba.b = 0;
+		if(isNaN(rgba.a)) rgba.a = 1;
+		return {
+			rgba: rgba,
+			left: parseInt(stop.offset * 100) + "%",
+		};
+	});
+	const isGradient = colors.size > 1;
+	if(isGradient) {
+		return {
+			// hex: rgbaToHex(gradientList[0].rgba),
+			rgba: gradientList[0].rgba,
+			gradient:{ angle, selectIndex: 0, gradientShow: true, gradientList },
+		};
+	} else {
+		return {
+			hex: rgbaToHex(gradientList[0].rgba),
+			rgba: gradientList[0].rgba,
+		};
+	}
+}
+
+export function  palletToFill(pallet) {
+	const fill = {
+		coords: calculateLinePoints(0),
+		colorStops: [
+			{ offset: 0, color: "rgba(0, 0, 0, 0)" },
+			{ offset: 1, color: "rgba(0, 0, 0, 0)" }
+		]
+	}
+	if(pallet?.gradient){
+		let obj = pallet.gradient;
+		fill.coords = calculateLinePoints(obj.angle);
+		if(obj.gradientList.length >= 2){
+			fill.colorStops = obj.gradientList.map(item => ({
+				offset: parseInt(item.left) / 100,
+				color: `rgba(${item.rgba.r}, ${item.rgba.g}, ${item.rgba.b}, ${item.rgba.a})`,
+			}));
+		}
+	}else if(pallet?.rgba?.hasOwnProperty("r") && pallet?.rgba?.hasOwnProperty("g") && pallet?.rgba?.hasOwnProperty("b")){
+		let rgba = pallet.rgba;
+		fill.colorStops = [
+			{ offset: 0, color: `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})` },
+			{ offset: 1, color: `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})` }
+		]
+	}
+	return fill;
+}
+
+export function fillToCssStyle(fill) {
+    if(!fill.coords || !fill.colorStops) return "";
+	const angle = calculateAngle(fill.coords.x1, fill.coords.y1, fill.coords.x2, fill.coords.y2);
+	if(fill.colorStops.every(v => v.color === fill.colorStops[0].color)){
+		return fill.colorStops[0].color;
+	}else{
+		var str = "linear-gradient(" + angle + "deg, ";
+		fill.colorStops.forEach((v) => {
+			str += `${v.color} ${v.offset * 100}%, `
+		})
+		return str.slice(0, -2) + ")";
+	}
+}
+
+/**
+ * 根据左上角坐标计算旋转后的新坐标
+ * @param {number} W - 宽度
+ * @param {number} H - 高度
+ * @param {number} currentX - 当前左上角x坐标
+ * @param {number} currentY - 当前左上角y坐标
+ * @param {number} currentAngleDeg - 当前角度(度)
+ * @param {number} newAngleDeg - 新角度(度)
+ * @returns {Object} 旋转后的左上角坐标 {x, y}
+ */
+export function calculateRotatedTopLeftDeg(
+	W,
+	H,
+	currentX,
+	currentY,
+	currentAngleDeg,
+	newAngleDeg
+) {
+	const currentAngle = (currentAngleDeg * Math.PI) / 180;
+	const newAngle = (newAngleDeg * Math.PI) / 180;
+	// 1. 用当前角度计算中心点位置
+	const cosCurrent = Math.cos(currentAngle);
+	const sinCurrent = Math.sin(currentAngle);
+	const Cx = currentX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
+	const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
+
+	// 2. 用新角度计算旋转后的左上角位置
+	const cosNew = Math.cos(newAngle);
+	const sinNew = Math.sin(newAngle);
+	const newX = Cx + (-W / 2) * cosNew - (-H / 2) * sinNew;
+	const newY = Cy + (-W / 2) * sinNew + (-H / 2) * cosNew;
+
+	return { x: newX, y: newY };
+}
+
+/**
+ * 创建缩放+旋转的变换矩阵
+ * @param {number} scale - 缩放比例
+ * @param {number} angle - 旋转角度（度）
+ * @returns {Array} 变换矩阵 [a, b, c, d, e, f]
+*/
+export function createPatternTransform(scale, angle) {
+	// return fabric.util.composeMatrix({
+	// 	scaleX: scale,
+	// 	scaleY: scale,
+	// 	angle: angle,
+	// });
+	const angle_ = angle * Math.PI / 180;
+	const cos = Math.cos(angle_);
+	const sin = Math.sin(angle_);
+
+	// 先缩放，后旋转
+	return [
+		scale * cos,    // a
+		scale * sin,    // b
+		-scale * sin,   // c
+		scale * cos,    // d
+		0,              // e (水平位移)
+		0               // f (垂直位移)
+	];
+}
+/**
+ * 获取变换矩阵的缩放、旋转
+ * @param {Array} Transform - 变换矩阵、
+ * @returns {Object} 缩放、旋转角度 {scale, angle}
+*/
+export function getTransformScaleAngle(Transform) {
+	const a = Transform[0];
+	const b = Transform[1];
+	const c = Transform[2];
+	const d = Transform[3];
+	const scale = Math.sqrt(a * a + b * b);
+	const angle = Math.round(Math.atan2(b, a) * 180 / Math.PI);
+	return { scale, angle };
+}
diff --git a/src/component/Canvas/CanvasEditor/utils/helperLine.js b/src/component/Canvas/CanvasEditor/utils/helperLine.js
index 69a1c222..0f15b8f8 100644
--- a/src/component/Canvas/CanvasEditor/utils/helperLine.js
+++ b/src/component/Canvas/CanvasEditor/utils/helperLine.js
@@ -5,8 +5,8 @@
  */
 function initAligningGuidelines(canvas) {
   var ctx = canvas.getSelectionContext(),
-    aligningLineOffset = 5,
-    aligningLineMargin = 4,
+    aligningLineOffset = 1,
+    aligningLineMargin = 1,
     aligningLineWidth = 1,
     aligningLineColor = "rgb(0,255,0)",
     viewportTransform,
@@ -14,9 +14,9 @@ function initAligningGuidelines(canvas) {
 
   function drawVerticalLine(coords) {
     drawLine(
-      coords.x + 0.5,
+      coords.x,
       coords.y1 > coords.y2 ? coords.y2 : coords.y1,
-      coords.x + 0.5,
+      coords.x,
       coords.y2 > coords.y1 ? coords.y2 : coords.y1
     );
   }
@@ -24,9 +24,9 @@ function initAligningGuidelines(canvas) {
   function drawHorizontalLine(coords) {
     drawLine(
       coords.x1 > coords.x2 ? coords.x2 : coords.x1,
-      coords.y + 0.5,
+      coords.y,
       coords.x2 > coords.x1 ? coords.x2 : coords.x1,
-      coords.y + 0.5
+      coords.y
     );
   }
 
@@ -351,7 +351,7 @@ export function initCenteringGuidelines(canvas) {
     canvasHeightCenter = canvasHeight / 2,
     canvasWidthCenterMap = {},
     canvasHeightCenterMap = {},
-    centerLineMargin = 4,
+    centerLineMargin = 1,
     centerLineColor = "rgba(255,0,241,0.5)",
     centerLineWidth = 1,
     ctx = canvas.getSelectionContext(),
diff --git a/src/component/Canvas/CanvasEditor/utils/layerHelper.js b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
index 0d081e9f..8aee5ee7 100644
--- a/src/component/Canvas/CanvasEditor/utils/layerHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/layerHelper.js
@@ -18,6 +18,16 @@ export const LayerType = {
   BACKGROUND: "background", // 背景图层 - 位于固定图层之、普通图层之下
 };
 
+/**
+ * 特殊图层ID
+ */
+export const SpecialLayerId = {
+  SPECIAL_GROUP: "group_special", // 特殊组
+  COLOR: "special_color", // 颜色图层
+}
+
+
+
 /**
  * 画布操作模式枚举：draw(绘画)、select(选择)、pan(拖拽)....
  */
@@ -178,12 +188,17 @@ export function createLayer(options = {}) {
     locked: options.locked !== undefined ? options.locked : false,
     opacity: options.opacity !== undefined ? options.opacity : 1.0,
     blendMode: options.blendMode || BlendMode.NORMAL,
+    isHidenDragHandle: options.isHidenDragHandle || false,
+    isDisableUnlock: options.isDisableUnlock || false,
+	isFixedOther: options.isFixedOther || false,
+	isFixedClipMask: options.isFixedClipMask || false,
 
     // 确保不是背景图层
     isBackground: false,
 
     // Fabric.js 对象列表
     fabricObjects: options.fabricObjects || [],
+	fabricObject: options.fabricObject || null,
 
     // 嵌套结构 - 适用于组图层
     children: options.children || [],
diff --git a/src/component/Canvas/CanvasEditor/utils/layerUtils.js b/src/component/Canvas/CanvasEditor/utils/layerUtils.js
index 00bc1e68..1643eb8d 100644
--- a/src/component/Canvas/CanvasEditor/utils/layerUtils.js
+++ b/src/component/Canvas/CanvasEditor/utils/layerUtils.js
@@ -172,6 +172,10 @@ export function simplifyLayers(layers) {
       opacity: layer.opacity,
       isBackground: layer.isBackground || false,
       isFixed: layer.isFixed || false,
+	  isFixedOther: layer.isFixedOther || false,
+	  isFixedClipMask: layer.isFixedClipMask || false,
+      isHidenDragHandle: layer.isHidenDragHandle || false,
+      isDisableUnlock: layer.isDisableUnlock || false,
       clippingMask:
         layer.clippingMask?.toObject?.(["id", "layerId"]) ||
         layer.clippingMask ||
diff --git a/src/component/Canvas/CanvasEditor/utils/objectHelper.js b/src/component/Canvas/CanvasEditor/utils/objectHelper.js
index 0f7858fc..96fd3986 100644
--- a/src/component/Canvas/CanvasEditor/utils/objectHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/objectHelper.js
@@ -7,55 +7,92 @@ import { fabric } from "fabric-with-all";
  * @returns {Promise<fabric.Object>} 恢复的 fabric 对象
  */
 export async function restoreFabricObject(serializedObject, canvas) {
-  return new Promise((resolve, reject) => {
-    const objectType = serializedObject.type;
-    // 定义恢复后的处理函数
-    const handleRestoredObject = (fabricObject) => {
-      if (!fabricObject) {
-        reject(new Error(`无法恢复 ${objectType} 类型的对象`));
-        return;
-      }
+	return new Promise((resolve, reject) => {
+		const objectType = serializedObject.type;
+		// 定义恢复后的处理函数
+		const handleRestoredObject = (fabricObject) => {
+			if (!fabricObject) {
+				reject(new Error(`无法恢复 ${objectType} 类型的对象`));
+				return;
+			}
+			// 恢复自定义属性
+			if (serializedObject.id) fabricObject.id = serializedObject.id;
+			if (serializedObject.layerId) fabricObject.layerId = serializedObject.layerId;
+			if (serializedObject.layerName) fabricObject.layerName = serializedObject.layerName;
 
-      // 恢复自定义属性
-      if (serializedObject.id) fabricObject.id = serializedObject.id;
-      if (serializedObject.layerId) fabricObject.layerId = serializedObject.layerId;
-      if (serializedObject.layerName) fabricObject.layerName = serializedObject.layerName;
+			// 更新坐标
+			fabricObject.setCoords();
 
-      // 更新坐标
-      fabricObject.setCoords();
+			// 添加到画布
+			//   canvas.add(fabricObject);
 
-      // 添加到画布
-      //   canvas.add(fabricObject);
+			resolve(fabricObject);
+		};
 
-      resolve(fabricObject);
-    };
-
-    // 根据类型选择恢复方法
-    switch (objectType) {
-      case "rect":
-        fabric.Rect.fromObject(serializedObject, handleRestoredObject);
-        break;
-      case "circle":
-        fabric.Circle.fromObject(serializedObject, handleRestoredObject);
-        break;
-      case "path":
-        fabric.Path.fromObject(serializedObject, handleRestoredObject);
-        break;
-      case "image":
-        fabric.Image.fromObject(serializedObject, handleRestoredObject);
-        break;
-      case "group":
-        fabric.Group.fromObject(serializedObject, handleRestoredObject);
-        break;
-      default:
-        // 使用通用方法
-        fabric.util.enlivenObjects([serializedObject], (objects) => {
-          if (objects && objects[0]) {
-            handleRestoredObject(objects[0]);
-          } else {
-            reject(new Error("对象恢复失败"));
-          }
-        });
-    }
-  });
+		// 根据类型选择恢复方法
+		switch (objectType) {
+			case "rect":
+				fabric.Rect.fromObject(serializedObject, handleRestoredObject);
+				break;
+			case "circle":
+				fabric.Circle.fromObject(serializedObject, handleRestoredObject);
+				break;
+			case "path":
+				fabric.Path.fromObject(serializedObject, handleRestoredObject);
+				break;
+			case "image":
+				fabric.Image.fromObject(serializedObject, handleRestoredObject);
+				break;
+			case "group":
+				fabric.Group.fromObject(serializedObject, handleRestoredObject);
+				break;
+			default:
+				// 使用通用方法
+				fabric.util.enlivenObjects([serializedObject], (objects) => {
+					if (objects && objects[0]) {
+						handleRestoredObject(objects[0]);
+					} else {
+						reject(new Error("对象恢复失败"));
+					}
+				});
+		}
+	});
 }
+
+/**
+ * 获取对象黑白通道画布
+*/
+export function getObjectAlphaToCanvas(object) {
+	const image = object.getElement();
+	const { width, height } = image;
+	if(!width || !height){
+		console.warn("对象没有元素");
+		return null;
+	}
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d");
+	ctx.drawImage(image, 0, 0, width, height);
+	const data = ctx.getImageData(0, 0, width, height);
+	for (let i = 0; i < data.data.length; i += 4) {
+		const r = data.data[i + 0];
+		const g = data.data[i + 1];
+		const b = data.data[i + 2];
+		const a = data.data[i + 3];
+		if (r || g || b || a) {
+			data.data[i + 0] = 255;
+			data.data[i + 1] = 255;
+			data.data[i + 2] = 255;
+			data.data[i + 3] = 255;
+		}else{
+			data.data[i + 0] = 0;
+			data.data[i + 1] = 0;
+			data.data[i + 2] = 0;
+			data.data[i + 3] = 0;
+		}
+	}
+	ctx.clearRect(0, 0, width, height);
+	ctx.putImageData(data, 0, 0);
+	return canvas;
+}
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js
index 2f518624..34827db7 100644
--- a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js
+++ b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js
@@ -68,7 +68,7 @@ export const createRasterizedImage = async ({
       isReturenDataURL,
     });
   } catch (error) {
-    console.error("创建栅格化图像失败:", error);
+    console.warn("创建栅格化图像失败:", error);
     throw new Error(`栅格化失败: ${error.message}`);
   }
 };
@@ -163,7 +163,7 @@ const createClippedObjects = async ({
     console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
     return fabricImage;
   } catch (error) {
-    console.error("创建裁剪对象失败:", error);
+    console.warn("创建裁剪对象失败:", error);
     throw error;
   }
 };
@@ -1239,7 +1239,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
 
     return optimizedBounds;
   } catch (error) {
-    console.error("计算优化边界框失败:", error);
+    console.warn("计算优化边界框失败:", error);
     // 返回原始计算方式作为备选
     return clippingObject.getBoundingRect(true, true);
   }
diff --git a/src/component/Canvas/ExistsImageList/ToolButton.vue b/src/component/Canvas/ExistsImageList/ToolButton.vue
index f9606771..498deefd 100644
--- a/src/component/Canvas/ExistsImageList/ToolButton.vue
+++ b/src/component/Canvas/ExistsImageList/ToolButton.vue
@@ -101,7 +101,8 @@ onUnmounted(() => {
     :style="tool.style"
     @click="handleClick"
   >
-    <SvgIcon :name="tool.icon.name" :size="tool.icon.size"></SvgIcon>
+    <SvgIcon v-if="tool.icon" :name="tool.icon.name" :size="tool.icon.size"></SvgIcon>
+	<span v-else>{{ tool.label }}</span>
     <teleport to="body" v-if="tipBody">
       <div class="tool-tooltip" :id="tipId">{{ t(tool.title) }}</div>
     </teleport>
diff --git a/src/component/Canvas/RedGreenModeExample.vue b/src/component/Canvas/RedGreenModeExample.vue
index 33dc698a..d1501816 100644
--- a/src/component/Canvas/RedGreenModeExample.vue
+++ b/src/component/Canvas/RedGreenModeExample.vue
@@ -53,7 +53,7 @@ const changeFixedImage = () => {
   canvasEditor.value.changeFixedImage(changeImageUrl);
 };
 const frontBackChange = (value) =>{
-	console.log(value)
+	console.log("==========红绿图导出url", value)
 }
 
 // 组件挂载时绑定键盘事件
diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
index c32ee911..aebfa8ea 100644
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -9,7 +9,7 @@ import ToolButton from "@/component/Canvas/ExistsImageList/ToolButton.vue";
 const canvasEditor = ref();
 const currentView = ref("canvasEditor"); // 默认显示红绿图示例 canvasEditor      redGreenExample
 
-const clothingImageUrl = "/src/assets/work/3.PNG";
+const clothingImageUrl = "https://www.minio-api.aida.com.hk/aida-collection-element/24299/Printboard/4eba03bd-4367-4c69-b1a3-3f3177a1be1f.jpg?response-content-type=image%2Fjpeg&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251217%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251217T081126Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b8223ba37625370c9716024536a08ce1ee5c5a7aaefc47d9baf8bd1e0e4d2d91";
 const clothingImageUrlInit = "/src/assets/work/5.PNG";
 
 const imageData = [
@@ -84,6 +84,20 @@ const exportImage = async () => {
     document.body.removeChild(link); // 下载后移除链接元素
   }
 };
+// 导出颜色图层
+const exportColorLayer = async () => {
+  if (canvasEditor.value) {
+    const colorLayer = await canvasEditor.value.exportColorLayer();
+	console.log("导出颜色图层:",colorLayer);
+    // 模拟下载图片
+    const link = document.createElement("a");
+    link.href = colorLayer.base64;
+    link.download = "canvas_image.png"; // 设置下载文件名
+    document.body.appendChild(link);
+    link.click(); // 触发下载
+    document.body.removeChild(link); // 下载后移除链接元素
+  }
+};
 
 const changeCanvas = (command) => {
   console.log(command);
@@ -106,32 +120,6 @@ const loadImageUrlToLayer = async () => {
   }
 };
 
-// 自定义工具配置相关
-const customToolsList = ref([
-  {
-    id: "exportPNG",
-    title: "导出PNG", //导出画布图片
-    action: exportAsPNG,
-    icon: { name: "CExport", size: "24" },
-    class: "export-btn",
-  },
-  {
-    id: "saveCanvas",
-    title: "保存画布",
-    action: saveCanvas,
-    icon: { name: "CBottom", size: "24" },
-    class: "save-btn",
-  },
-
-  {
-    id: "readCanvas",
-    title: "读取画布",
-    action: canvasProject,
-    icon: { name: "CMiniMap", size: "24" },
-    class: "clear-btn",
-  },
-]);
-
 // 自定义工具方法
 function exportAsPNG() {
   console.log("导出PNG");
@@ -201,10 +189,89 @@ const canvasInit = () => {
 };
 
 const frontBackChange =(value)=>{
-	console.log(value)
 }
 
-const isShowLeft = ref(true);
+// 自定义工具配置相关
+const customToolsList = ref([
+  {
+    id: "exportPNG",
+    title: "导出颜色图层",
+    action: exportColorLayer,
+	label: "导颜",
+    class: "export-btn",
+  },
+  {
+    id: "exportPNG",
+    title: "导出PNG", //导出画布图片
+    action: exportAsPNG,
+    icon: { name: "CExport", size: "24" },
+    class: "export-btn",
+  },
+  {
+    id: "saveCanvas",
+    title: "保存画布",
+    action: saveCanvas,
+    icon: { name: "CBottom", size: "24" },
+    class: "save-btn",
+  },
+
+  {
+    id: "readCanvas",
+    title: "读取画布",
+    action: canvasProject,
+    icon: { name: "CMiniMap", size: "24" },
+    class: "clear-btn",
+  },
+  {
+    id: "loadImageUrlToLayer",
+    title: "添加画布图片",
+    action: loadImageUrlToLayer,
+	label: "🎨",
+    class: "export-btn",
+  },
+  {
+    id: "redGreenExample",
+    title: "红绿图模式",
+    action: () => switchView('redGreenExample'),
+	label: "红",
+    class: "export-btn",
+  },
+  {
+    id: "canvasEditor",
+    title: "普通模式",
+    action: () => switchView('canvasEditor'),
+	label: "普",
+    class: "export-btn",
+  },
+  {
+    id: "changeFixedImage",
+    title: "更换底图",
+    action: changeFixedImage,
+	label: "更",
+    class: "export-btn",
+  },
+  {
+    id: "exportJSON",
+    title: "导出JSON",
+    action: exportJSON,
+	label: "导J",
+    class: "export-btn",
+  },
+  {
+    id: "copyJSON",
+    title: "复制JSON",
+    action: copyJSON,
+	label: "复J",
+    class: "export-btn",
+  },
+  {
+    id: "getLayers",
+    title: "查询图层",
+    action: getLayers,
+	label: "查L",
+    class: "export-btn",
+  },
+]);
 </script>
 
 <template>
@@ -250,46 +317,15 @@ const isShowLeft = ref(true);
         <template #customToolsBottom="{ toolButtonProps }">
           <!-- 分隔线 -->
           <div class="tool-separator"></div>
-
-          <!-- 自定义工具按钮 -->
+		  <!-- 自定义工具按钮 -->
           <ToolButton
             v-for="tool in customToolsList"
             :key="tool.id"
             :tool="tool"
             :active-tool="toolButtonProps.activeTool"
             @click="handleCustomToolClick"
+			tipBody
           />
-
-          <!-- 也可以直接使用普通的按钮 -->
-          <div class="custom-tool-btn" @click="loadImageUrlToLayer">
-            <span>🎨</span>
-            <div class="tool-tooltip">添加画布图片</div>
-          </div>
-
-          <div class="custom-tool-btn" @click="switchView('redGreenExample')">
-            <span>红</span>
-            <div class="tool-tooltip">红绿图模式</div>
-          </div>
-          <div class="custom-tool-btn" @click="switchView('canvasEditor')">
-            <span>普</span>
-            <div class="tool-tooltip">普通模式</div>
-          </div>
-          <div class="custom-tool-btn" @click="changeFixedImage">
-            <span>更</span>
-            <div class="tool-tooltip">更换底图</div>
-          </div>
-          <div class="custom-tool-btn" @click="exportJSON">
-            <span>导</span>
-            <div class="tool-tooltip">导出JSON</div>
-          </div>
-          <div class="custom-tool-btn" @click="copyJSON">
-            <span>复</span>
-            <div class="tool-tooltip">复制JSON</div>
-          </div>
-          <div class="custom-tool-btn" @click="getLayers">
-            <span>查</span>
-            <div class="tool-tooltip">查询图层</div>
-          </div>
         </template>
       </CanvasEditor>
     </div>
@@ -424,15 +460,17 @@ body {
 
 .tool-tooltip {
   display: none;
+  pointer-events: none;
   position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
+  writing-mode: vertical-rl; /* 竖直排列 */
+  text-orientation: upright; /* 保持文字正常显示 *///   left: 100%;
+  left: 50%;
+  top: -0.8rem;
+  transform: translate(-50%, -100%);
+  background-color: rgba(0, 0, 0, 0.9);
   color: white;
-  padding: 0.4rem 0.8rem;
+  padding: 0.8rem 0.4rem;
   border-radius: 0.4rem;
-  margin-left: 0.8rem;
   white-space: nowrap;
   font-size: 1.2rem;
   z-index: 10;
@@ -441,12 +479,12 @@ body {
 .tool-tooltip:before {
   content: "";
   position: absolute;
-  top: 50%;
-  right: 100%;
-  margin-top: -0.5rem;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 100%);
   border-width: 0.5rem;
   border-style: solid;
-  border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
+  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
 }
 
 /* 深色模式适配 */
diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue
index a44e31ad..ce1ec6cb 100644
--- a/src/component/Detail/canvas/index.vue
+++ b/src/component/Detail/canvas/index.vue
@@ -5,14 +5,17 @@
 		 <div class="canvasContent" ref="canvasContent">
 			<div class="content-bottom" ref="canvasContent">
 				<div class="contet">
+							<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
 					<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							@canvasInit="canvasInit"
 							@changeCanvas="changeCanvas" 
 							is-edit
-							:clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path"
+							:clothingImageUrl="selectDetail.path"
+							:clothingImageUrl2="selectDetail.undividedLayer"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
+							:otherData="otherData"
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
@@ -108,6 +111,12 @@ export default defineComponent({
 			canvasInstance:null as any,
 			canvasJSON:'',
 			hideCanvas: computed(()=>store.state.Workspace.projectPath !== route.fullPath),
+			otherData:computed(()=>({
+				canvasId: store.state.DesignDetail.selectDetail.canvasId,
+				color: store.state.DesignDetail.selectDetail.color,
+				printObject: store.state.DesignDetail.selectDetail.printObject,
+				trims: store.state.DesignDetail.selectDetail.trims,
+			})),
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -117,7 +126,6 @@ export default defineComponent({
 		provide('canvasType',detailData.canvasType)
 		
 		const editFront = (str:any)=>{//编辑前后片
-
 			let canvasJSON = '' as any
 			if(detailData.currentView === 'canvasEditor'){
 				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
@@ -309,7 +317,7 @@ export default defineComponent({
 			sessionStorage.removeItem('frontBackEdit');
 			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
-			privewDetail()
+			// privewDetail()
 		})
 		onMounted(()=>{
 			nextTick(async ()=>{
diff --git a/src/component/Detail/detailLeft/colorBox/pallet.vue b/src/component/Detail/detailLeft/colorBox/pallet.vue
index 5447fe60..8e7c2f25 100644
--- a/src/component/Detail/detailLeft/colorBox/pallet.vue
+++ b/src/component/Detail/detailLeft/colorBox/pallet.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pallet">
+    <div class="pallet" ref="palletRef">
 		<div class="palletColo" @click="openPallet">
 			<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
 				{{ selectColor.hex }}
@@ -117,6 +117,7 @@ export default defineComponent({
 		})
 		const getpalletListDom = reactive({
 		})
+		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
 			if(!newVal?.rgba?.r)return
 			if(palletData.color?.gradient?.gradientShow){
@@ -221,7 +222,7 @@ export default defineComponent({
 			
 			
             // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
-			let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
+			let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
 			let position = {
 				x:event.clientX,
 				left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -276,8 +277,8 @@ export default defineComponent({
 		// 点击外部区域关闭颜色选择器
 		const handleClickOutside = (event: Event) => {
 			const target = event.target as HTMLElement;
-			const colorSettingBlock = document.querySelector('.color_setting_block');
-			const palletColo = document.querySelector('.palletColo');
+			const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
+			const palletColo = palletRef.value.querySelector('.palletColo');
 			
 			// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
 			if (palletData.palletShow && colorSettingBlock && 
@@ -294,7 +295,7 @@ export default defineComponent({
 			nextTick().then(()=>{
 				const backIcon = document.createElement('div');
 				backIcon.classList.add('vc-sketch-color-wrap')
-				let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
+				let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
 				dropperDom.appendChild(backIcon);
 				backIcon.addEventListener('click',async ()=>{
 					try {
@@ -322,7 +323,7 @@ export default defineComponent({
         return{
 			...toRefs(palletData),
 			...toRefs(getpalletListDom),
-
+			palletRef,
 			openPallet,
 			selectImgItem,
 			setOperate,
@@ -614,6 +615,7 @@ export default defineComponent({
 										position: absolute;
 										content: "";
 										top: 0.2rem;
+										left: 0;
 										width: 1rem;
 										height: 1rem;
 										border-radius: 50%;
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 6f49adb0..eb4a8584 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1433,7 +1433,42 @@ export default {
     selectTexture: '选择要使用的纹理',
     DeleteTexture: '删除纹理',
     TextureSettings: '纹理设置',
-    TextureSelector: '纹理选择'
+    TextureSelector: '纹理选择',
+	// 混合模式
+	CompositeNormal: '正常',
+	CompositeNormalTip: '正常：默认，新图形覆盖原内容',
+	CompositeDarken: '变暗',
+	CompositeDarkenTip: '变暗：取暗部颜色',
+	CompositeMultiply: '正片叠底',
+	CompositeMultiplyTip: '正片叠底：图像变暗',
+	CompositeColorBurn: '颜色加深',
+	CompositeColorBurnTip: '颜色加深：增加对比度，变暗底层颜色',
+	CompositeLighten: '变亮',
+	CompositeLightenTip: '变亮：取亮部颜色',
+	CompositeScreen: '滤色',
+	CompositeScreenTip: '滤色：图像变亮',
+	CompositeColorDodge: '颜色减淡',
+	CompositeColorDodgeTip: '颜色减淡：降低对比度，加亮底层颜色',
+	CompositeLighter: '颜色减淡（添加）',
+	CompositeLighterTip: '颜色减淡（添加）：重叠部分亮度叠加',
+	CompositeOverlay: '叠加',
+	CompositeOverlayTip: '叠加：高光效果',
+	CompositeSoftLight: '柔光',
+	CompositeSoftLightTip: '柔光：混合效果',
+	CompositeHardLight: '强光',
+	CompositeHardLightTip: '强光：高光效果',
+	CompositeDifference: '差值',
+	CompositeDifferenceTip: '差值：取两图像颜色差',
+	CompositeExclusion: '排除',
+	CompositeExclusionTip: '排除：取两图像颜色差的绝对值',
+	CompositeHue: '色相',
+	CompositeHueTip: '色相：保留原图像颜色，改变新图像色相',
+	CompositeSaturation: '饱和度',
+	CompositeSaturationTip: '饱和度：保留原图像色相，改变新图像饱和度',
+	CompositeColor: '颜色',
+	CompositeColorTip: '颜色：保留原图像饱和度，改变新图像颜色',
+	CompositeLuminosity: '亮度',
+	CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
   },
   speedList: {
     High: '高级',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index df0bb91d..bce9408c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1433,7 +1433,42 @@ export default {
     selectTexture: 'Select the texture you want to use',
     DeleteTexture: 'Delete Texture',
     TextureSettings: 'Texture Settings',
-    TextureSelector: 'Texture Selector'
+    TextureSelector: 'Texture Selector',
+	// 混合模式
+	CompositeNormal: 'Normal',
+	CompositeNormalTip: 'Normal: Default, new graphics cover original content',
+	CompositeDarken: 'Darken',
+	CompositeDarkenTip: 'Darken: Take the darkest color',
+	CompositeMultiply: 'Multiply',
+	CompositeMultiplyTip: 'Multiply: Darken the image',
+	CompositeColorBurn: 'Color Burn',
+	CompositeColorBurnTip: 'Color Burn: Increase contrast and darken the bottom color',
+	CompositeLighten: 'Lighten',
+	CompositeLightenTip: 'Lighten: Take the brightest color',
+	CompositeScreen: 'Screen',
+	CompositeScreenTip: 'Screen: Lighten the image',
+	CompositeColorDodge: 'Color Dodge',
+	CompositeColorDodgeTip: 'Color Dodge: Reduce contrast and lighten the bottom color',
+	CompositeLighter: 'Color Dodge (Add)',
+	CompositeLighterTip: 'Color Dodge (Add): Add the brightness of the overlapping parts',
+	CompositeOverlay: 'Overlay',
+	CompositeOverlayTip: 'Overlay: Highlight effect',
+	CompositeSoftLight: 'Soft Light',
+	CompositeSoftLightTip: 'Soft Light: Blend effect',
+	CompositeHardLight: 'Hard Light',
+	CompositeHardLightTip: 'Hard Light: Highlight effect',
+	CompositeDifference: 'Difference',
+	CompositeDifferenceTip: 'Difference: Take the color difference between the two images',
+	CompositeExclusion: 'Exclusion',
+	CompositeExclusionTip: 'Exclusion: Take the absolute value of the color difference between the two images',
+	CompositeHue: 'Hue',
+	CompositeHueTip: 'Hue: Preserve the original image color and change the hue of the new image',
+	CompositeSaturation: 'Saturation',
+	CompositeSaturationTip: 'Saturation: Preserve the original image hue and change the saturation of the new image',
+	CompositeColor: 'Color',
+	CompositeColorTip: 'Color: Preserve the original image saturation and change the color of the new image',
+	CompositeLuminosity: 'Luminosity',
+	CompositeLuminosityTip: 'Luminosity: Preserve the original image color and change the luminosity of the new image',
   },
   speedList: {
     High: 'High',