diff --git a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/MybatisPlusUtil.java b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/MybatisPlusUtil.java
index 9ca4e3d..de8cc31 100644
--- a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/MybatisPlusUtil.java
+++ b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/MybatisPlusUtil.java
@@ -327,8 +327,7 @@ public class MybatisPlusUtil {
 				if (ignoreKeys.contains(orderField)) {
 					continue;
 				}
-
-				if ("desc".equalsIgnoreCase(QueryConfigUtils.toStr(s2[1],""))) {
+				if (s2.length > 1 && "desc".equalsIgnoreCase(QueryConfigUtils.toStr(s2[1],""))) {
 					queryWrapper.orderByDesc(orderField);
 				} else {
 					queryWrapper.orderByAsc(orderField);
@@ -366,6 +365,7 @@ public class MybatisPlusUtil {
 		// 条件查询
 		if (QueryConfigUtils.isNotEmpty(filter)) {
 			Set<String> keySet = options.keySet();
+			// 过滤配置
 			Map<String, FilterItem> filterMap = new HashMap<>();
 			for (String s : keySet) {
 				// 处理驼峰字段
diff --git a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/QueryConfigUtils.java b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/QueryConfigUtils.java
index b2977f4..f1abdd6 100644
--- a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/QueryConfigUtils.java
+++ b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/QueryConfigUtils.java
@@ -74,6 +74,7 @@ public class QueryConfigUtils {
 		registerWrapperHandler(new BetweenHandler<>());
 		registerWrapperHandler(new EqHandler<>());
 		registerWrapperHandler(new GeHandler<>());
+		registerWrapperHandler(new GtHandler<>());
 		registerWrapperHandler(new InHandler<>());
 		registerWrapperHandler(new InSetHandler<>());
 		registerWrapperHandler(new KeywordHandler<>());
@@ -447,7 +448,7 @@ public class QueryConfigUtils {
 	}
 
 	/**
-	 * 跳过数据
+	 * 跳过数据处理器
 	 *
 	 * @param str str
 	 * @return boolean
diff --git a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GeHandler.java b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GeHandler.java
index 13d1b93..d51560a 100644
--- a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GeHandler.java
+++ b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GeHandler.java
@@ -1,13 +1,11 @@
 package cn.hangtag.framework.mybatis.build.where.handler;
 
 
-import cn.hangtag.framework.mybatis.build.QueryConfigUtils;
 import cn.hangtag.framework.mybatis.build.WrapperInfo;
 import cn.hangtag.framework.mybatis.build.enums.QueryFilterTypeEnum;
 import cn.hangtag.framework.mybatis.build.where.WhereWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 
-import java.util.List;
 public class GeHandler<T> implements WhereWrapper<T> {
 	@Override
 	public QueryFilterTypeEnum getType() {
diff --git a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GtHandler.java b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GtHandler.java
new file mode 100644
index 0000000..a4c54fa
--- /dev/null
+++ b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/GtHandler.java
@@ -0,0 +1,19 @@
+package cn.hangtag.framework.mybatis.build.where.handler;
+
+
+import cn.hangtag.framework.mybatis.build.WrapperInfo;
+import cn.hangtag.framework.mybatis.build.enums.QueryFilterTypeEnum;
+import cn.hangtag.framework.mybatis.build.where.WhereWrapper;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+
+public class GtHandler<T> implements WhereWrapper<T> {
+	@Override
+	public QueryFilterTypeEnum getType() {
+		return QueryFilterTypeEnum.GT;
+	}
+
+	@Override
+	public QueryWrapper<T> handler(WrapperInfo<T> wrapperInfo) {
+		return wrapperInfo.getQueryWrapper().gt(wrapperInfo.getField(), wrapperInfo.getValue());
+	}
+}
diff --git a/hangtag-ui/hangtag-ui-admin/package.json b/hangtag-ui/hangtag-ui-admin/package.json
index 231a7ef..ea734b3 100644
--- a/hangtag-ui/hangtag-ui-admin/package.json
+++ b/hangtag-ui/hangtag-ui-admin/package.json
@@ -54,6 +54,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "diagram-js": "^12.8.0",
+    "dom-to-image": "^2.6.0",
     "driver.js": "^1.3.1",
     "echarts": "^5.5.0",
     "echarts-wordcloud": "^2.1.0",
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/DraftDesignImageLibDialog/index.vue b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/DraftDesignImageLibDialog/index.vue
index cf5d456..1d69648 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/DraftDesignImageLibDialog/index.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/DraftDesignImageLibDialog/index.vue
@@ -211,13 +211,8 @@ const updateVisible = (visible: boolean) => {
 defineExpose({}) // 提供 open 方法，用于打开弹窗
 
 const submit = () => {
-  // 转成base64
-  convertImageToBase64(that.iconUrl).then((res:string) => {
-    that.iconUrl = res;
-    emit("update:modelValue", that.iconUrl)
-    updateVisible(false)
-  })
-
+  emit("update:modelValue", that.iconUrl)
+  updateVisible(false)
 }
 const clearData = ()=>{
   that.iconUrl = '';
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
index ce2d9d4..1a1e3ce 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -13,7 +13,7 @@
     <template #footer>
         <span class="dialog-footer">
         <el-button @click="updateVisible(false)">取 消</el-button>
-        <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button type="primary" @click="submit">批稿</el-button>
       </span>
     </template>
   </Dialog>
@@ -60,10 +60,13 @@ const previewByDraftDesignId = (id: string | number,prop={})=>{
     that.loading = false;
   },100)
 }
-const submit = async ()=>{
- const res = await designPropEditRef.value.getPropInfo()
-  emit("submit",res);
-  updateVisible(false)
+const submit = ()=>{
+  useMessage().confirm("是否提交?").then(async (r) => {
+    const res = await designPropEditRef.value.getPropInfo()
+    emit("submit",res);
+    updateVisible(false)
+  })
+
 }
 defineExpose({
   preview,
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
index f8b1621..1d4945c 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -1,93 +1,88 @@
 <!-- eslint-disable vue/this-in-template -->
 <template>
-  <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
-     <span>
-         仅供参考(for reference only),绿色边框属于边界
-       </span>
-    <div style="padding-bottom: 4px">
-      <el-button @click="that.currentZoom -= 1" :disabled="that.currentZoom <= 1">-
-      </el-button>
-      <el-select v-model="that.currentZoom" style="width: 90px">
-        <el-option
-          v-for="item in zoomList"
-          :key="item.value"
-          :label="(Math.floor(item.value))"
-          :value="item.value"
-        />
-        <el-option
-          v-if="!zoomList.some(o => o.value === that.currentZoom)"
-          :label="(Math.floor(that.currentZoom))"
-          :value="that.currentZoom"
-        />
-      </el-select>
-      <el-button @click="that.currentZoom += 1" :disabled="that.currentZoom >= 30">+
-      </el-button>
-      <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
-      <el-button
-        v-show="!that.reView"
-        style="margin: 8px"
-        type="primary"
-        size="small"
-        @click="updateDesign">
-        <span>更新</span>
-        <span
-          style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
-            that.changeCount > 0 ? '*' : ''
-          }}</span>
-      </el-button>
-
-    </div>
-    <div v-if="that.sizeInfo" style="margin-left: 60px" :title="`${that.sizeInfo.width}mm`">
-      <span>
-        宽:{{ that.sizeInfo.width }}mm
-      </span>
-    </div>
+ <div>
     <div
-      style="display: flex;">
-      <div v-if="that.sizeInfo" :title="`${that.sizeInfo.height}mm`">
-      <span class="vertical-text">
-        高{{ that.sizeInfo.height }}
+      :class ="{ 'hidden-div': that.hideCreate}"
+          :id="that.svgId"
+          :style="{
+            width: `${imageSize.width * 6}px`,
+            height: `${imageSize.height * 6}px`,
+          }">
+      <div v-if="that.previewUrl" v-html="that.previewUrl" >
+      </div>
+    </div>
+   <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
+     <span>
+         仅供参考(for reference only)
+       </span>
+     <div style="padding-bottom: 4px">
+       <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
+       <el-button
+         v-show="!that.reView"
+         style="margin: 8px"
+         type="primary"
+         size="small"
+         @click="updateDesign">
+         <span>更新</span>
+         <span
+           style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
+             that.changeCount > 0 ? '*' : ''
+           }}</span>
+       </el-button>
+
+     </div>
+     <div>
+       <el-alert
+         title="按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大"
+         type="info" effect="dark"/>
+     </div>
+     <div v-if="that.sizeInfo" :title="`${that.sizeInfo.width}mm`">
+      <span>
+        宽:{{ that.sizeInfo.width }}mm  高{{ that.sizeInfo.height }}
       </span>
-        <span>mm</span>
-      </div>
-      <div v-if="that.previewUrl" style="margin: 2px; box-shadow: 0 0 1px 1px rgb(0,255,0)">
-        <el-image
-          :title="showImgTitle"
-          @click="imagePreview(that.previewUrl)"
-          v-loading="loading"
-          :src="that.previewUrl"/>
-      </div>
-        <div class="flex flex-col">
-          <div>
-            <el-form label-width="180px">
-              <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
-                <div class="flex ml-3">
-                  <div>
-                    <el-select class="min-w-100" v-model="that.draftDesignId" @change="changeType">
-                      <el-option
-                        v-for="(item) in that.draftDesignList"
-                        :key="item.id"
-                        :label="item.label"
-                        :value="item.id"
-                      />
-                    </el-select>
-                  </div>
-                </div>
-              </el-form-item>
-            </el-form>
-          </div>
-          <div style="width: 100%" v-if="that.propOrderByList && that.propOrderByList.length > 0">
-            <el-scrollbar height="600px">
-              <el-form label-width="180px">
-                <el-form-item
-                  v-for="(tmp) in  that.propOrderByList"
-                  :key="tmp.key"
-                  :label="getLabelName(that.propInfo[tmp.key])">
-                  <div
-                    v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
-                    <div
-                      style="padding: 4px">
-                      <div style="display: flex;align-items: center;">
+     </div>
+
+     <el-row>
+       <el-col :span="11">
+         <div
+           :class ="{ 'hidden-div': false }" style="width:100%;height: 580px; border: 1px solid #090805">
+           <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
+         </div>
+       </el-col>
+       <el-col :span="12">
+         <div style="display: flex;">
+
+           <div class="flex flex-col">
+             <div>
+               <el-form label-width="180px">
+                 <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
+                   <div class="flex ml-3">
+                     <div>
+                       <el-select class="min-w-100" v-model="that.draftDesignId" @change="changeType">
+                         <el-option
+                           v-for="(item) in that.draftDesignList"
+                           :key="item.id"
+                           :label="item.label"
+                           :value="item.id"
+                         />
+                       </el-select>
+                     </div>
+                   </div>
+                 </el-form-item>
+               </el-form>
+             </div>
+             <div style="width: 100%" v-if="that.propOrderByList && that.propOrderByList.length > 0">
+               <el-scrollbar height="600px">
+                 <el-form label-width="180px">
+                   <el-form-item
+                     v-for="(tmp) in  that.propOrderByList"
+                     :key="tmp.key"
+                     :label="getLabelName(that.propInfo[tmp.key])">
+                     <div
+                       v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
+                       <div
+                         style="padding: 4px">
+                         <div style="display: flex;align-items: center;">
                     <span>
                       <i
                         v-if="that.propInfo[tmp.key].canInput"
@@ -96,56 +91,56 @@
                       <i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
                     </span>
 
-                        <el-select-v2
-                          v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                          filterable
-                          :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                          placeholder="Please select"
-                          @change="changeData(-1,tmp.key)"
-                          size="large"
-                          style="min-width: 280px;width: 100%"
-                        />
-                        <div v-if="that.propInfo[tmp.key].groupType === '1'">
-                          <div
-                            style="display: flex;align-items: center; margin-left: 10px; width: 220px">
-                            <el-row>
-                              <el-col span="4">
-                                <div>占比</div>
-                              </el-col>
-                              <el-col span="14">
-                                <el-input-number
-                                  :min="-1" :max="100"
-                                  v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
-                                  @change="changeData(0,tmp.key)"
-                                />
-                              </el-col>
-                              <el-col span="4">
-                                <div> %</div>
-                              </el-col>
-                            </el-row>
-                          </div>
-                        </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="deleteList(that.propInfo[tmp.key],index)">
-                          <i class="icon-lk_delete"> </i>
-                        </el-button>
-                      </div>
-                    </div>
+                           <el-select-v2
+                             v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
+                             filterable
+                             :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
+                             placeholder="Please select"
+                             @change="changeData(-1,tmp.key)"
+                             size="large"
+                             style="min-width: 280px;width: 100%"
+                           />
+                           <div v-if="that.propInfo[tmp.key].groupType === '1'">
+                             <div
+                               style="display: flex;align-items: center; margin-left: 10px; width: 220px">
+                               <el-row>
+                                 <el-col span="4">
+                                   <div>占比</div>
+                                 </el-col>
+                                 <el-col span="14">
+                                   <el-input-number
+                                     :min="-1" :max="100"
+                                     v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
+                                     @change="changeData(0,tmp.key)"
+                                   />
+                                 </el-col>
+                                 <el-col span="4">
+                                   <div> %</div>
+                                 </el-col>
+                               </el-row>
+                             </div>
+                           </div>
+                           <el-button
+                             v-if="that.propInfo[tmp.key].canChange"
+                             @click="deleteList(that.propInfo[tmp.key],index)">
+                             <i class="icon-lk_delete"> </i>
+                           </el-button>
+                         </div>
+                       </div>
 
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
-                  </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
+                     </div>
 
-                  <div v-else-if="!that.propInfo[tmp.key].isCombo">
-                    <div
-                      v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
-                      :key="index"
-                      style="padding: 4px">
-                      <div style="display: flex;align-items: center;">
+                     <div v-else-if="!that.propInfo[tmp.key].isCombo">
+                       <div
+                         v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
+                         :key="index"
+                         style="padding: 4px">
+                         <div style="display: flex;align-items: center;">
                     <span>
                       <i
                         v-if="that.propInfo[tmp.key].canInput"
@@ -153,120 +148,119 @@
                         style="font-size: 20px"> </i>
                       <i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
                     </span>
-                        <el-autocomplete
-                          v-if="that.propInfo[tmp.key].canInput"
-                          v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                          :fetch-suggestions="querySearch"
-                          clearable
-                          class="inline-input w-50"
-                          placeholder="Please Input"
-                          @change="changeData"
-                          @select="changeData"
-                        />
+                           <el-autocomplete
+                             v-if="that.propInfo[tmp.key].canInput"
+                             v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
+                             :fetch-suggestions="querySearch"
+                             clearable
+                             class="inline-input w-50"
+                             placeholder="Please Input"
+                             @change="changeData"
+                             @select="changeData"
+                           />
 
-                        <el-select-v2
-                          v-else
-                          v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                          filterable
-                          :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                          placeholder="Please select"
-                          @change="changeData(index,tmp.key)"
-                          size="large"
-                          style="min-width: 280px;width: 100%"
-                        />
-                        <div v-if="that.propInfo[tmp.key].groupType === '1'">
+                           <el-select-v2
+                             v-else
+                             v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
+                             filterable
+                             :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
+                             placeholder="Please select"
+                             @change="changeData(index,tmp.key)"
+                             size="large"
+                             style="min-width: 280px;width: 100%"
+                           />
+                           <div v-if="that.propInfo[tmp.key].groupType === '1'">
 
-                          <div
-                            style="display: flex;align-items: center; margin-left: 10px; width: 220px">
-                            <el-row>
-                              <el-col span="4">
-                                <div>占比</div>
-                              </el-col>
-                              <el-col span="14">
-                                <el-input-number
-                                  :min="-1" :max="100"
-                                  v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
-                                  @change="changeData(index,tmp.key)"
-                                />
-                              </el-col>
-                              <el-col span="4">
-                                <div> %</div>
-                              </el-col>
-                            </el-row>
-                          </div>
-                        </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="deleteList(that.propInfo[tmp.key],index)">
-                          <i class="icon-lk_delete"> </i>
-                        </el-button>
-                      </div>
-                    </div>
+                             <div
+                               style="display: flex;align-items: center; margin-left: 10px; width: 220px">
+                               <el-row>
+                                 <el-col span="4">
+                                   <div>占比</div>
+                                 </el-col>
+                                 <el-col span="14">
+                                   <el-input-number
+                                     :min="-1" :max="100"
+                                     v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
+                                     @change="changeData(index,tmp.key)"
+                                   />
+                                 </el-col>
+                                 <el-col span="4">
+                                   <div> %</div>
+                                 </el-col>
+                               </el-row>
+                             </div>
+                           </div>
+                           <el-button
+                             v-if="that.propInfo[tmp.key].canChange"
+                             @click="deleteList(that.propInfo[tmp.key],index)">
+                             <i class="icon-lk_delete"> </i>
+                           </el-button>
+                         </div>
+                       </div>
 
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
-                  </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
+                     </div>
 
-                  <div v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
-                    <div
-                      v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
-                      :key="index" style="display: flex">
-                      <div class="img-box" v-if="img.url">
-                        <div style="display: flex">
-                          <img :src="img.url" width="60px" height="60px"/>
-                          <el-select-v2
-                            v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                            filterable
-                            :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
-                            placeholder="Please select"
-                            @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[0].showLabel)"
-                            size="large"
-                            style="min-width: 280px;width: 100%"
-                          >
-                            <template #default="{ item }">
-                              <div style="display: flex;">
-                                <img :src="item.url" width="30px" height="30px"/>
-                                <span>
+                     <div v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
+                       <div
+                         v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
+                         :key="index" style="display: flex">
+                         <div class="img-box" v-if="img.url">
+                           <div style="display: flex">
+                             <img :src="img.url" width="60px" height="60px"/>
+                             <el-select-v2
+                               v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
+                               filterable
+                               :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
+                               placeholder="Please select"
+                               @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[0].showLabel)"
+                               size="large"
+                               style="min-width: 280px;width: 100%"
+                             >
+                               <template #default="{ item }">
+                                 <div style="display: flex;">
+                                   <img :src="item.url" width="30px" height="30px"/>
+                                   <span>
                                 {{ item.label }}
                               </span>
-                              </div>
-                            </template>
-                          </el-select-v2>
-                        </div>
-                      </div>
-                      <div v-else-if="img.label">
-                        <el-input v-model="img.label" disabled/>
-                      </div>
-                      <el-button
-                        v-if="that.propInfo[tmp.key].canChange"
-                        @click="deleteList(that.propInfo[tmp.key],index)">
-                        <i class="icon-lk_delete"> </i>
-                      </el-button>
-                    </div>
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
+                                 </div>
+                               </template>
+                             </el-select-v2>
+                           </div>
+                         </div>
+                         <div v-else-if="img.label">
+                           <el-input v-model="img.label" disabled/>
+                         </div>
+                         <el-button
+                           v-if="that.propInfo[tmp.key].canChange"
+                           @click="deleteList(that.propInfo[tmp.key],index)">
+                           <i class="icon-lk_delete"> </i>
+                         </el-button>
+                       </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
 
-                  </div>
+                     </div>
 
-                </el-form-item>
-              </el-form>
-            </el-scrollbar>
-          </div>
-        </div>
+                   </el-form-item>
+                 </el-form>
+               </el-scrollbar>
+             </div>
+           </div>
 
-    </div>
+         </div>
+       </el-col>
 
-    <div
-      :class="{ 'hidden-div': true }">
-      <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
-    </div>
-  </div>
+     </el-row>
+   </div>
+ </div>
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
@@ -282,13 +276,14 @@ import {replaceDomain} from "@/utils";
 import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
-import {convertImageToBase64} from "@/components/DraftDesign/utils/Dpi";
-
+import domtoimage from 'dom-to-image';
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
 const draftDesignEditRef = ref()
 const that = reactive({
+  svgId: "svg_"+Math.random().toString(36).substring(2),
+  hideCreate: true,
   propInfo: {
     reView: true,
     groupName: '', // 节点名称
@@ -321,38 +316,7 @@ const that = reactive({
   data: {},
   show: false,
 })
-const showImgTitle = computed(() => {
-  if (that.sizeInfo) {
-    return '宽:' + that.sizeInfo.width + 'mm  高:' + that.sizeInfo.height + 'mm'
-  }
-})
-const zoomList = [
-  {
-    value: 1,
-    label: '1'
-  },
-  {
-    value: 5,
-    label: '5'
-  },
-  {
-    value: 6,
-    label: '6'
-  },
-  {
-    value: 10,
-    label: '10'
-  }, {
-    value: 15,
-    label: '15'
-  }, {
-    value: 20,
-    label: '20'
-  }, {
-    value: 30,
-    label: '30'
-  },
-]
+
 const currentLocale = computed(() => localeStore.getCurrentLocale)
 watch(() => that.currentZoom, () => {
   showPng();
@@ -364,7 +328,18 @@ const querySearch = (queryString: string, cb: any) => {
   }) : that.ingredientInfoList
   cb(results)
 }
-
+const imageSize =computed(()=>{
+  if(that.sizeInfo){
+    return {
+      width: that.sizeInfo.width,
+      height: that.sizeInfo.height
+    }
+  }
+  return {
+    width: 10,
+    height: 10
+  }
+})
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
     zIndex: 9999999,
@@ -469,6 +444,26 @@ const getIngredientInfoListByType = (type) => {
   return that.ingredientInfoList.filter(item => item.type === type)
 }
 
+const toBase64 = async () =>{
+  let svgElement = document.getElementById(that.svgId);
+  console.log("svg2canvas",domtoimage)
+  domtoimage.toPng(svgElement)
+    .then((dataUrl) => {
+      that.previewData = dataUrl;
+      that.previewUrl  =""
+      // 下载
+      // const link = document.createElement('a');
+      // link.href = dataUrl;
+      // link.download = 'image.png';
+      // link.click();
+    })
+    .catch((error) => {
+      console.error('转换失败:', error);
+    });
+
+
+}
+
 const deleteList = (item, index) => {
   item.dataInfo.splice(index, 1)
   resetData();
@@ -533,7 +528,6 @@ const loadConfig = (config: object, propData = {}) => {
   that.pageConfig = config.pageConfig
   that.data = config.data
   that.propInfo = {...propData}
-
   that.sizeInfo = that.pageConfig.editArea
   // true, conf.pageConfig, conf.data, test
   draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo)
@@ -594,11 +588,11 @@ const queryUseLabel = (label) => {
 
 }
 const showPng = () => {
-
+  that.hideCreate = true;
   if (that.pageConfig && that.pageConfig.background) {
     loading.value = true
     setTimeout(() => {
-      draftDesignEditRef.value.toPngUrl((url) => {
+      draftDesignEditRef.value.toSVGData((url) => {
         that.previewUrl = url
         const info = draftDesignEditRef.value.getPropInfo();
         that.propInfo = {
@@ -630,52 +624,37 @@ const changeType = () => {
   previewByDraftDesignId(that.draftDesignId, that.propInfo)
 }
 const getPropInfo = () => {
-  if (that.changeCount > 0) {
-    return new Promise((resolve) => {
-      draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo).then(() => {
-        setTimeout(() => {
-          // 成功后再获取图片
-          draftDesignEditRef.value.toPngUrl((url) => {
-            that.previewData = url
-            const info = draftDesignEditRef.value.getPropInfo();
-            resolve({
-              draftDesignData: draftDesignEditRef.value.getJson(),
-              propOrderByList: info.propOrderByList,
-              // 设计稿id
-              draftDesignId: that.draftDesignId,
-              previewImage: that.previewData,
-              propInfo: that.propInfo
-            })
-          }, {
-            widthScale: 6,
-            heightScale: 6
+  // 预览数据 保持缩放
+  return new Promise((resolve) => {
+    // 成功后再获取图片
+    draftDesignEditRef.value.toSVGData((url) => {
+      that.previewUrl = url
+      that.hideCreate = false;
+      let svgElement = document.getElementById(that.svgId);
+      domtoimage.toPng(svgElement)
+        .then((dataUrl) => {
+          that.previewData = dataUrl;
+          that.hideCreate = true;
+          that.previewUrl  =""
+          const info = draftDesignEditRef.value.getPropInfo();
+          resolve({
+            draftDesignData: draftDesignEditRef.value.getJson(),
+            propOrderByList: info.propOrderByList,
+            // 设计稿id
+            draftDesignId: that.draftDesignId,
+            previewImage: that.previewData,
+            propInfo: that.propInfo
           })
-        }, 400)
-      })
-    })
-  } else {
-    // 预览数据 保持缩放
-    return new Promise((resolve) => {
-      // 成功后再获取图片
-      draftDesignEditRef.value.toPngUrl((url) => {
-        that.previewData = url
-        const info = draftDesignEditRef.value.getPropInfo();
-        resolve({
-          draftDesignData: draftDesignEditRef.value.getJson(),
-          propOrderByList: info.propOrderByList,
-          // 设计稿id
-          draftDesignId: that.draftDesignId,
-          previewImage: that.previewData,
-          propInfo: that.propInfo
         })
-      }, {
-        widthScale: 6,
-        heightScale: 6
-      })
+        .catch((error) => {
+          console.error('转换失败:', error);
+        });
+
+    }, {
+      widthScale: 6,
+      heightScale: 6
     })
-  }
-
-
+  })
 }
 const submit = async () => {
   const info = await getPropInfo();
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/ImageLibraryManage.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/ImageLibraryManage.vue
index 4230cbd..0840854 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/ImageLibraryManage.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/ImageLibraryManage.vue
@@ -168,8 +168,8 @@ const addNew = async () => {
       shape: ShapeType.vueShapeImage,
       data: {
         label: '',
-        width: 40,
-        height: 40,
+        width: 32,
+        height: 32,
         shape: VueCellShapeType.Image,
         style: {
           shape:{
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/LineCellNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/LineCellNode.vue
deleted file mode 100644
index 9b6c70d..0000000
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/LineCellNode.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<!-- eslint-disable vue/this-in-template -->
-<template>
-  <div
-    :id="cellInfo.id"
-    class="node-content"
-    :class="{ 'node-content-group' : this.cellInfo.editMode && this.cellInfo.propGroupId }"
-    :title="this.cellInfo.propGroupName"
-    v-reSize="changSize">
-    <div
-      style="position: absolute;"
-      :style="cellInfo.style">
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {
-  filterUnsafeHtml,
-  getSafeValue,
-  mergeDeepObject,
-  nextId
-} from "@/components/DraftDesign/utils/FuncUtil";
-import {configInfo, getDraftDesignState} from "@/components/DraftDesign/config";
-
-
-export default defineComponent({
-  name: 'LineCellNode',
-  inject: ['getNode'],
-  data() {
-    return {
-      cellInfo: {
-        id: '',
-        label: '',
-        showInput: false,
-        style: {}
-      },
-      nodeInfo: {
-        store: {
-          data: {
-            data: {
-              label: ''
-            }
-          }
-        }
-      },
-      fontSize: 12,
-      targetElement: null
-    }
-  },
-
-  mounted() {
-    const node = (this as any).getNode()
-    this.nodeInfo = node
-
-
-    if (node && node.data) {
-      this.setCellInfo(node.data)
-    }
-    node.on('change:data', ({current}) => {
-      this.setCellInfo(current)
-    })
-
-  },
-  unmounted() {
-
-  },
-  methods: {
-    safeHtml(val) {
-      if (val) {
-        val = val.replace(/[\n\r]/g, "<br/>")
-      }
-      return filterUnsafeHtml(val)
-    },
-    inputBlur() {
-      this.cellInfo.showInput = false
-    },
-    inputChange() {
-      if (this.nodeInfo.store && this.nodeInfo.store.data) {
-        this.nodeInfo.store.data.data.label = this.cellInfo.label
-      }
-    },
-    setInput(val: boolean) {
-      this.cellInfo.showInput = val
-
-    },
-    changSize(size: any) {
-
-    },
-    changeFontSize() {
-      // this.cellInfo.style.height = `${this.fontSize }px`
-    },
-    removeTransform(val: string) {
-      let t = this.cellInfo.style.text.transform;
-      if (t) {
-        const split = t.split(' ');
-        const split1 = val.split("(");
-        let str = ""
-        for (let i = 0; i < split.length; i++) {
-          if (split[i].startsWith(split1[0])) {
-            continue
-          }
-          str += `${split[i]} `
-        }
-        this.cellInfo.style.text.transform = str;
-      }
-    },
-    addTransform(val: string) {
-      let t = this.cellInfo.style.text.transform;
-      if (t) {
-        const split = t.split(' ');
-        const split1 = val.split("(");
-        let add = true;
-        let str = ""
-        for (let i = 0; i < split.length; i++) {
-          if (split[i].startsWith(split1[0])) {
-            split[i] = val;
-            add = false
-          }
-          str += `${split[i]} `
-        }
-        if (add) {
-          str += `${val} `;
-        }
-        this.cellInfo.style.text.transform = str;
-      }
-
-    },
-    setCellInfo(info: any) {
-      if (!info) {
-        info = {
-          style: {
-            text: {}
-          }
-        }
-      }
-      const text = getSafeValue(info, 'style.text') || {}
-      const style = getSafeValue(info, 'style') || {}
-      this.cellInfo = mergeDeepObject({
-        showInput: false,
-        id: nextId(),
-        label: '',
-        style: {
-          bottom: 0,/* 直线在容器底部 */
-          width: '100%', /* 直线宽度匹配容器宽度 */
-          height: '20%', /* 直线的高度 */
-          backgroundColor: '#000', /* 直线的颜色 */
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%) scale(1)',
-          borderRadius: '0px 0px 0px 0px',
-        }
-      }, info)
-      setTimeout(() => {
-        if (this.nodeInfo.store && this.nodeInfo.store.data) {
-          this.nodeInfo.store.data.data = this.cellInfo
-        }
-      }, 300)
-      this.setInput(this.cellInfo.showInput)
-      this.cellInfo.editMode  = getDraftDesignState();
-      if(this.cellInfo.editMode && this.cellInfo.propGroupId){
-        const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
-        if(!showRandomGroupColor){
-          setTimeout(()=>{
-            const [type, id] = this.cellInfo.propGroupId.split("_")
-            if(id){
-              document.getElementById(this.cellInfo.id)?.style.setProperty(
-                "--lk-prop-group-color",
-                `#${id}`
-              );
-            }
-          },100)
-        }
-      }
-      this.changeFontSize();
-    }
-
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.node-content {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-}
-
-</style>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeCircleNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeCircleNode.vue
index fd89086..955d319 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeCircleNode.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeCircleNode.vue
@@ -181,20 +181,22 @@ export default defineComponent({
       // this.cellInfo.showInput = val
     },
     changSize(size: any) {
+      if(size && size.width){
+        this.sizeWInfo.width = size.width;
+        this.sizeWInfo.height = size.height;
+        this.minSize = Math.min(size.height, size.width)
+        let s = size.height + 12;
+        if (s > 60) {
+          s = s + s / 3
+        }
+        if (s < 6) {
+          s = 6
+        } else if (s >= 1000) {
+          s = 1000
+        }
+        this.fontSize = s;
+      }
 
-      this.sizeWInfo.width = size.width;
-      this.sizeWInfo.height = size.height;
-      this.minSize = Math.min(size.height, size.width)
-      let s = size.height + 12;
-      if (s > 60) {
-        s = s + s / 3
-      }
-      if (s < 6) {
-        s = 6
-      } else if (s >= 1000) {
-        s = 1000
-      }
-      this.fontSize = s;
       this.changeFontSize();
     },
     changeFontSize() {
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
index 5b2adbf..2675f46 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
@@ -6,6 +6,22 @@
    :class="{ 'node-content-group' : cellInfo.editMode && cellInfo.propGroupId }"
     :title="cellInfo.propGroupName"
     v-reSize="changSize">
+
+    <img
+      :src="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
+      style="width: 100%;height: 100%;"
+      :style="{
+          width: '100%',
+          height: '100%',
+          fillOpacity: cellInfo.style.shape.fillOpacity,
+          strokeDasharray: cellInfo.style.shape.strokeDasharray,
+          strokeDashoffset: cellInfo.style.shape.strokeDashoffset,
+          opacity: cellInfo.style.shape.opacity,
+          transform: cellInfo.style.shape.transform,
+          clipPath: cellInfo.style.shape.clipPath,
+          filter: cellInfo.style.shape.filter
+        }"
+    />
     <svg
       style="position: absolute;
       width: 100%;height: 100%;
@@ -13,20 +29,8 @@
       transform: scale(0.1); "
       :style="svgStyle"
 
-    >
+    />
 
-      <image
-        :href="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
-        style="width: 100%;height: 100%;"
-        :fill-opacity="cellInfo.style.shape.fillOpacity"
-        :stroke-dasharray="cellInfo.style.shape.strokeDasharray"
-        :stroke-dashoffset="cellInfo.style.shape.strokeDashoffset"
-        :opacity="cellInfo.style.shape.opacity"
-        :transform="cellInfo.style.shape.transform"
-        :clip-path="cellInfo.style.shape.clipPath"
-        :filter="cellInfo.style.shape.filter"
-      />
-    </svg>
   </div>
 </template>
 
@@ -110,7 +114,6 @@ export default defineComponent({
             fillColor: '', // 填充颜色
             fillOpacity: '', // 填充颜色的不透明度
             href: '',
-            hrefBase64: null,
             opacity: '', // 元素的不透明度
             strokeDashoffset: '', // 虚线起始偏移量
             strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
@@ -194,6 +197,9 @@ export default defineComponent({
     setInput(val: boolean) {
     },
     changSize(size: any) {
+      if(!size){
+        return;
+      }
       this.sizeWInfo.width = size.width;
       this.sizeWInfo.height = size.height;
       this.minSize = Math.min(size.height, size.width)
@@ -206,7 +212,6 @@ export default defineComponent({
       } else if (s >= 1000) {
         s = 1000
       }
-
       // this.nodeInfo.store.data.size.width = size.width;
       this.fontSize = s;
       this.changeFontSize();
@@ -235,7 +240,7 @@ export default defineComponent({
             y: 0, // 矩形左上角的 y 坐标
             rx: 0, // 矩形的圆角 x 半径
             ry: 0, // 矩形的圆角 y 半径
-            fillColor: '#000000', // 填充颜色
+            fillColor: 'rgba(0,0,0,0)', // 填充颜色
             href: '',
             label: '图片',
             fillOpacity: '', // 填充颜色的不透明度
@@ -253,11 +258,21 @@ export default defineComponent({
         }
       }, info)
 
-      if(this.cellInfo.style.shape.href){
+      if(!this.hrefBase64 && this.cellInfo.style.shape.href && this.cellInfo.style.shape.href.indexOf("data:image") < 0){
+        // DataUri.imageToDataUri(this.cellInfo.style.shape.href,
+        //   function (nu, url) {
+        //     console.log("base64 完成")
+        //     // 第一个参数无效，用的只是第二个参数，但是第一个参数不写不行
+        //     // @ts-ignore
+        //     this.hrefBase64 = url; // 给图片标签赋值
+        //   }
+
+        // );
         convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
-          // @ts-ignore
-          // 待优化 this.hrefBase64 = res
-          this.cellInfo.style.shape.href = res
+          // @ts-ignore 待优化
+          this.hrefBase64 = res
+          console.log("base64 完成")
+          // this.cellInfo.style.shape.href = res
         })
       }
       setTimeout(() => {
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue
deleted file mode 100644
index a6028b6..0000000
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/TextCellNode.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<!-- eslint-disable vue/this-in-template -->
-<template>
-  <div
-    :id="cellInfo.id"
-    class="node-content"
-    :style="{
-        'alignItems' :cellInfo.style.alignItems
-       }"
-     :class="{ 'node-content-group' : this.cellInfo.editMode && this.cellInfo.propGroupId }"
-    :title="this.cellInfo.propGroupName"
-    v-reSize="changSize">
-    <span
-      :id="textElId"
-      :style="cellInfo.style.text"
-      v-html="safeHtml(cellInfo.label)">
-    </span>
-    <el-dialog
-      v-model="cellInfo.showInput"
-      append-to-body
-    >
-      <el-input
-        v-if="cellInfo.showInput"
-        v-model="cellInfo.label"
-        @input="inputChange"
-        style="width:100%;height: 100%;z-index: 9999;"
-        autosize
-        resize="none"
-        placeholder="输入文字"
-        @blur="inputBlur"
-        type="textarea"
-      />
-      <template #footer>
-        <el-button type="primary" @click="setInput(false)">关闭</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {
-  filterUnsafeHtml,
-  getSafeValue,
-  mergeDeepObject,
-  nextId
-} from "@/components/DraftDesign/utils/FuncUtil";
-import {configInfo, getDraftDesignState} from "@/components/DraftDesign/config";
-
-export default defineComponent({
-  name: 'TextCellNode',
-  inject: ['getNode'],
-  data() {
-    return {
-
-      textElId: nextId(),
-      cellInfo: {
-        id:  nextId(),
-        label: '新文本',
-        showInput: false,
-        style: {
-          alignItems: 'start', // start end center
-          text: {
-            minWidth: 'max-content',
-            minHeight: 'max-content',
-            fontSize: '14px',
-            marginLeft: 'auto',
-            fontWeight: 600,
-            fontFamily: '仿宋',
-            color: '#ffffff',
-            textAlign: 'left',
-            top: '50%',
-            left: '50%',
-            padding: '0 0',
-            transform: 'scaleX(1) scaleY(1) translate(-50%, -50%)',
-            textIndent: 0,
-            textDecoration: 'none',
-            textTransform: 'none',
-            textShadow: 'none',
-            textOverflow: 'clip',
-            whiteSpace: 'normal',
-            wordBreak: 'break-all',
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }
-        }
-      },
-      nodeInfo: {
-        store: {
-          data: {
-            data: {
-              label: ''
-            }
-          }
-        }
-      },
-      fontSize: 12,
-      fontTop: 12,
-      targetElement: null
-    }
-  },
-
-  mounted() {
-    const node = (this as any).getNode()
-    this.nodeInfo = node
-    if (node && node.data) {
-      this.setCellInfo(node.data)
-    }
-    node.on('change:data', ({current}) => {
-      this.setCellInfo(current)
-    })
-  },
-
-  methods: {
-    safeHtml(val) {
-      if (val) {
-        val = val.replace(/[\n\r]/g, "<br/>")
-      }
-      return filterUnsafeHtml(val)
-    },
-    inputBlur() {
-      this.cellInfo.showInput = false
-      this.inputChange();
-    },
-    inputChange() {
-      if (this.nodeInfo.store && this.nodeInfo.store.data) {
-        // this.nodeInfo.store.data.data.label = this.cellInfo.label
-        this.nodeInfo.store.data.data = {
-          ...this.nodeInfo.store.data.data,
-          ...this.cellInfo
-        }
-      }
-    },
-    setInput(val: boolean) {
-      this.cellInfo.showInput = val;
-      this.inputChange();
-    },
-    changSize(size: any) {
-      // console.log("cellInfo.label",this.cellInfo.label)
-      // let s = size.height+12;
-      // if(s > 60){
-      //   s= s + s / 3
-      // }
-      // if(s < 6){
-      //   s = 6
-      // }else if(s >= 1000){
-      //   s = 1000
-      // }
-      //
-      // // this.nodeInfo.store.data.size.width = size.width;
-      // console.log(" this.nodeInfo.width", this.nodeInfo)
-      // this.fontSize = s;
-      // this.changeFontSize();
-    },
-    changeFontSize() {
-      // let c =  Math.floor((this.fontSize / 84))
-      //  this.fontTop = 12
-      //  if(c > 0){
-      //    c *= 24
-      //    this.fontTop = c;
-      //  }
-      //  this.cellInfo.style.text.top = `-${this.fontTop}px`
-      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
-    },
-    removeTransform(val: string) {
-      let t = this.cellInfo.style.text.transform;
-      if (t) {
-        const split = t.split(' ');
-        const split1 = val.split("(");
-        let str = ""
-        for (let i = 0; i < split.length; i++) {
-          if (split[i].startsWith(split1[0])) {
-            continue
-          }
-          str += `${split[i]} `
-        }
-        this.cellInfo.style.text.transform = str;
-      }
-    },
-    addTransform(val: string) {
-      let t = this.cellInfo.style.text.transform;
-      if (t) {
-        const split = t.split(' ');
-        const split1 = val.split("(");
-        let add = true;
-        let str = ""
-        for (let i = 0; i < split.length; i++) {
-          if (split[i].startsWith(split1[0])) {
-            split[i] = val;
-            add = false
-          }
-          str += `${split[i]} `
-        }
-        if (add) {
-          str += `${val} `;
-        }
-        this.cellInfo.style.text.transform = str;
-      }
-
-    },
-    setCellInfo(info: any) {
-      if (!info) {
-        info = {
-          style: {
-            text: {}
-          }
-        }
-      }
-      this.cellInfo = mergeDeepObject({
-        showInput: false,
-        id: nextId(),
-        label: '新文本',
-        style: {
-          alignItems: 'start', // start end center
-          text: {
-            width: `100%`,
-            height: '100%',
-            fontSizeVal: 12,
-            fontSize: '16px',
-            fontWeight: 100,
-            fontStyle: 'normal', // italic 斜体
-            fontFamily: '仿宋',
-            color: '#000000',
-            textAlign: 'center',
-            padding: '0px 0px',
-            textIndent: 0,
-            textDecoration: 'none',
-            textTransform: 'none',
-            textShadow: 'none',
-            textOverflow: 'clip',
-            whiteSpace: 'normal',
-            wordBreak: 'break-all',
-            overflow: 'visible', // hidden,
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }
-        }
-      }, info)
-      // setTimeout(() => {
-      //   if (this.nodeInfo.store && this.nodeInfo.store.data) {
-      //     this.nodeInfo.store.data.data = this.cellInfo
-      //   }
-      // }, 300)
-
-
-      this.fontSize = parseInt(getSafeValue(this.cellInfo.style.text, 'fontSizeVal') || '12')
-
-      // this.fontSize = parseInt(getSafeValue(this.cellInfo.style.text, 'fontSize') || '14')
-      this.setInput(this.cellInfo.showInput)
-      this.cellInfo.editMode  = getDraftDesignState();
-
-      if(this.cellInfo.editMode && this.cellInfo.propGroupId){
-        const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
-        if(!showRandomGroupColor){
-          setTimeout(()=>{
-            const [type, id] = this.cellInfo.propGroupId.split("_")
-            if(id){
-              document.getElementById(this.cellInfo.id)?.style.setProperty(
-                "--lk-prop-group-color",
-                `#${id}`
-              );
-            }
-          },100)
-        }
-      }
-
-      this.changeFontSize();
-    }
-
-  }
-})
-</script>
-
-<style scoped lang="scss">
-
-.node-content {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-}
-
-</style>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
index e5a11ea..a487301 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/index.ts
@@ -68,12 +68,12 @@ export const graphOptions = (elId:string, viewMode = false) => {
       vertexDeletable: true // 边的路径点是否可以被删除
 
     }, // 对齐线
-    snapline: true, // 撤销/重做
+    snapline: viewMode, // 撤销/重做
     history: !viewMode, //
 
     // 显示网格
     grid: {
-      visible: true,
+      visible: !viewMode,
       size: 2, // 网格大小
       type: 'doubleMesh', // // 'dot' | 'fixedDot' | 'mesh'
       args: [{
@@ -91,7 +91,7 @@ export const graphOptions = (elId:string, viewMode = false) => {
     },
     panning: {
       // 画布移动 
-      enabled: false,
+      enabled: viewMode,
       pageVisible: false, // 是否分页
       pageBreak: true,
       pannable: true,// 是否平移
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
index 3b46a23..951035e 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
@@ -277,7 +277,7 @@ const rightKeyMenu = computed(() => {
         value: 'mergeGroup',
         icon: 'icon-lk_cell_add',
         disabled: disabledMenu.value,
-        label: '设置洗涤说明',
+        label: '设置图文变量',
         handler: (item) => {
           const cells = that.selectedCellsList
           if (cells.length === 0) {
@@ -302,7 +302,7 @@ const rightKeyMenu = computed(() => {
         value: 'mergeGroup',
         icon: 'icon-lk_cell_tree',
         disabled: disabledMenu.value,
-        label: '设为属性项',
+        label: '设为变量',
         handler: (item) => {
           const cells = that.selectedCellsList
           if (cells.length === 0) {
@@ -470,7 +470,7 @@ const init = (isDesignMode: boolean, bgConfig: any, data = {}, propDataInfo = {}
       size: 'auto auto',
       opacity: 1,
       angle: 20,
-      color: '#F5F7FD',
+      color:  '#F5F7FD',
       ...bgConfig.background || {}
     },
   } as any
@@ -481,19 +481,22 @@ const init = (isDesignMode: boolean, bgConfig: any, data = {}, propDataInfo = {}
     height: maxSize,
   }
   graph = new Graph(options)
-// 画布拖动组件
-  graph.use(
-    new Scroller({
-      enabled: true,
-      pageVisible: true, // 是否分页
-      pageBreak: false,
-      pannable: true,// 是否平移
-      // pageWidth: that.pageConfig.editArea.width * 10,
-      // pageHeight: that.pageConfig.editArea.height * 10,
-      // modifiers: ['ctrl', 'meta'],
-    }),
-  )
+
   if (that.editState) {
+
+    // 画布拖动组件
+    graph.use(
+      new Scroller({
+        enabled: true,
+        pageVisible: true, // 是否分页
+        pageBreak: false,
+        pannable: true,// 是否平移
+        // pageWidth: that.pageConfig.editArea.width * 10,
+        // pageHeight: that.pageConfig.editArea.height * 10,
+        // modifiers: ['ctrl', 'meta'],
+      }),
+    )
+
     // 参考线
     graph.use(
       new Snapline({
@@ -700,6 +703,7 @@ const toPngUrl = (callback: (url: string) => void, options?: {
 
   let widthScale = options && options.widthScale ? options.widthScale : 5
   let heightScale = options && options.heightScale ? options.heightScale : 5
+
   graph.toPNG((dataUri) => {
     that.previewUrl = dataUri;
     callback(that.previewUrl)
@@ -714,9 +718,42 @@ const toPngUrl = (callback: (url: string) => void, options?: {
       bottom: 0
     },
     quality: 1,
+    copyStyles: true,
     ...options
   })
 }
+const toSVGData = (callback: (url: string) => void, options?: {
+  width: number,
+  height: number,
+  widthScale: number,
+  heightScale: number,
+  padding: {
+    top: number,
+    left: number,
+    right: number,
+    bottom: number
+  }
+}) => {
+
+  let widthScale = options && options.widthScale ? options.widthScale : 5
+  let heightScale = options && options.heightScale ? options.heightScale : 5
+
+  graph.toSVG((dataUri) => {
+    that.previewUrl = dataUri;
+    callback(that.previewUrl)
+  }, {
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: that.pageConfig.width * (widthScale),
+      height: that.pageConfig.height * (heightScale),
+    },
+    preserveDimensions:{
+      width: that.pageConfig.width * (widthScale),
+      height: that.pageConfig.height * (heightScale),
+    },
+  })
+}
 const setPropList = (propDataInfo) => {
   const keys = Object.keys(propDataInfo)
   for (let i = 0; i < keys.length; i++) {
@@ -937,7 +974,9 @@ const getDeviceDPI = () => {
 }
 let rulerContainer = document.createElement('div');
 const addDrawRuler = () => {
-
+  if(!that.editState){
+    return;
+  }
   // 计算每个像素对应的毫米数
   const dpi = getDeviceDPI();
   const mmPerInch = 25.4; // 1 英寸 = 25.4 毫米
@@ -1601,6 +1640,7 @@ defineExpose({
   init,
   getPropInfo,
   toPngUrl,
+  toSVGData,
   clearData,
   getJson,
 })
diff --git a/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/ProductCareItemForm.vue b/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/ProductCareItemForm.vue
index cba390e..2dd355c 100644
--- a/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/ProductCareItemForm.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/ProductCareItemForm.vue
@@ -85,28 +85,7 @@
                           <span>{{ scope.$index + 1 }}</span>
                         </template>
                       </el-table-column>
-                      <el-table-column prop="locale" label="地区语言" width="180">
-                        <template #header>
-                          <div>
-                            <span class="color-red">*</span>
-                            <span>地区语言</span>
-                          </div>
-                        </template>
-                        <template #default="scope">
 
-                          <div
-                            :class="{ 'duplicate-tips' : duplicateCheck(scope.row.locale) }">
-                            <el-select v-model="scope.row.locale" placeholder="地区语言">
-                              <el-option
-                                v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
-                                :key="`${dict.value}`"
-                                :label="dict.label"
-                                :value="dict.value"
-                              />
-                            </el-select>
-                          </div>
-                        </template>
-                      </el-table-column>
 
                       <el-table-column prop="value">
                         <template #header>
@@ -137,16 +116,7 @@
               </el-collapse>
             </div>
           </el-form-item>
-          <el-form-item label="地区标识" prop="locale">
-            <el-select v-model="formData.locale" placeholder="请选择语言标识">
-              <el-option
-                v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
-                :key="`${dict.value}`"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
+
           <el-form-item label="启用状态" prop="enabled">
             <el-checkbox v-model="formData.enabled">是否启用</el-checkbox>
           </el-form-item>
diff --git a/hangtag-ui/hangtag-ui-front/package.json b/hangtag-ui/hangtag-ui-front/package.json
index b3f1285..5178dcb 100644
--- a/hangtag-ui/hangtag-ui-front/package.json
+++ b/hangtag-ui/hangtag-ui-front/package.json
@@ -54,6 +54,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "diagram-js": "^12.8.0",
+    "dom-to-image": "^2.6.0",
     "driver.js": "^1.3.1",
     "echarts": "^5.5.0",
     "echarts-wordcloud": "^2.1.0",
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
index ce2d9d4..1a1e3ce 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -13,7 +13,7 @@
     <template #footer>
         <span class="dialog-footer">
         <el-button @click="updateVisible(false)">取 消</el-button>
-        <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button type="primary" @click="submit">批稿</el-button>
       </span>
     </template>
   </Dialog>
@@ -60,10 +60,13 @@ const previewByDraftDesignId = (id: string | number,prop={})=>{
     that.loading = false;
   },100)
 }
-const submit = async ()=>{
- const res = await designPropEditRef.value.getPropInfo()
-  emit("submit",res);
-  updateVisible(false)
+const submit = ()=>{
+  useMessage().confirm("是否提交?").then(async (r) => {
+    const res = await designPropEditRef.value.getPropInfo()
+    emit("submit",res);
+    updateVisible(false)
+  })
+
 }
 defineExpose({
   preview,
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
index f8b1621..1d4945c 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -1,93 +1,88 @@
 <!-- eslint-disable vue/this-in-template -->
 <template>
-  <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
-     <span>
-         仅供参考(for reference only),绿色边框属于边界
-       </span>
-    <div style="padding-bottom: 4px">
-      <el-button @click="that.currentZoom -= 1" :disabled="that.currentZoom <= 1">-
-      </el-button>
-      <el-select v-model="that.currentZoom" style="width: 90px">
-        <el-option
-          v-for="item in zoomList"
-          :key="item.value"
-          :label="(Math.floor(item.value))"
-          :value="item.value"
-        />
-        <el-option
-          v-if="!zoomList.some(o => o.value === that.currentZoom)"
-          :label="(Math.floor(that.currentZoom))"
-          :value="that.currentZoom"
-        />
-      </el-select>
-      <el-button @click="that.currentZoom += 1" :disabled="that.currentZoom >= 30">+
-      </el-button>
-      <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
-      <el-button
-        v-show="!that.reView"
-        style="margin: 8px"
-        type="primary"
-        size="small"
-        @click="updateDesign">
-        <span>更新</span>
-        <span
-          style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
-            that.changeCount > 0 ? '*' : ''
-          }}</span>
-      </el-button>
-
-    </div>
-    <div v-if="that.sizeInfo" style="margin-left: 60px" :title="`${that.sizeInfo.width}mm`">
-      <span>
-        宽:{{ that.sizeInfo.width }}mm
-      </span>
-    </div>
+ <div>
     <div
-      style="display: flex;">
-      <div v-if="that.sizeInfo" :title="`${that.sizeInfo.height}mm`">
-      <span class="vertical-text">
-        高{{ that.sizeInfo.height }}
+      :class ="{ 'hidden-div': that.hideCreate}"
+          :id="that.svgId"
+          :style="{
+            width: `${imageSize.width * 6}px`,
+            height: `${imageSize.height * 6}px`,
+          }">
+      <div v-if="that.previewUrl" v-html="that.previewUrl" >
+      </div>
+    </div>
+   <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
+     <span>
+         仅供参考(for reference only)
+       </span>
+     <div style="padding-bottom: 4px">
+       <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
+       <el-button
+         v-show="!that.reView"
+         style="margin: 8px"
+         type="primary"
+         size="small"
+         @click="updateDesign">
+         <span>更新</span>
+         <span
+           style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
+             that.changeCount > 0 ? '*' : ''
+           }}</span>
+       </el-button>
+
+     </div>
+     <div>
+       <el-alert
+         title="按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大"
+         type="info" effect="dark"/>
+     </div>
+     <div v-if="that.sizeInfo" :title="`${that.sizeInfo.width}mm`">
+      <span>
+        宽:{{ that.sizeInfo.width }}mm  高{{ that.sizeInfo.height }}
       </span>
-        <span>mm</span>
-      </div>
-      <div v-if="that.previewUrl" style="margin: 2px; box-shadow: 0 0 1px 1px rgb(0,255,0)">
-        <el-image
-          :title="showImgTitle"
-          @click="imagePreview(that.previewUrl)"
-          v-loading="loading"
-          :src="that.previewUrl"/>
-      </div>
-        <div class="flex flex-col">
-          <div>
-            <el-form label-width="180px">
-              <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
-                <div class="flex ml-3">
-                  <div>
-                    <el-select class="min-w-100" v-model="that.draftDesignId" @change="changeType">
-                      <el-option
-                        v-for="(item) in that.draftDesignList"
-                        :key="item.id"
-                        :label="item.label"
-                        :value="item.id"
-                      />
-                    </el-select>
-                  </div>
-                </div>
-              </el-form-item>
-            </el-form>
-          </div>
-          <div style="width: 100%" v-if="that.propOrderByList && that.propOrderByList.length > 0">
-            <el-scrollbar height="600px">
-              <el-form label-width="180px">
-                <el-form-item
-                  v-for="(tmp) in  that.propOrderByList"
-                  :key="tmp.key"
-                  :label="getLabelName(that.propInfo[tmp.key])">
-                  <div
-                    v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
-                    <div
-                      style="padding: 4px">
-                      <div style="display: flex;align-items: center;">
+     </div>
+
+     <el-row>
+       <el-col :span="11">
+         <div
+           :class ="{ 'hidden-div': false }" style="width:100%;height: 580px; border: 1px solid #090805">
+           <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
+         </div>
+       </el-col>
+       <el-col :span="12">
+         <div style="display: flex;">
+
+           <div class="flex flex-col">
+             <div>
+               <el-form label-width="180px">
+                 <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
+                   <div class="flex ml-3">
+                     <div>
+                       <el-select class="min-w-100" v-model="that.draftDesignId" @change="changeType">
+                         <el-option
+                           v-for="(item) in that.draftDesignList"
+                           :key="item.id"
+                           :label="item.label"
+                           :value="item.id"
+                         />
+                       </el-select>
+                     </div>
+                   </div>
+                 </el-form-item>
+               </el-form>
+             </div>
+             <div style="width: 100%" v-if="that.propOrderByList && that.propOrderByList.length > 0">
+               <el-scrollbar height="600px">
+                 <el-form label-width="180px">
+                   <el-form-item
+                     v-for="(tmp) in  that.propOrderByList"
+                     :key="tmp.key"
+                     :label="getLabelName(that.propInfo[tmp.key])">
+                     <div
+                       v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
+                       <div
+                         style="padding: 4px">
+                         <div style="display: flex;align-items: center;">
                     <span>
                       <i
                         v-if="that.propInfo[tmp.key].canInput"
@@ -96,56 +91,56 @@
                       <i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
                     </span>
 
-                        <el-select-v2
-                          v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                          filterable
-                          :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                          placeholder="Please select"
-                          @change="changeData(-1,tmp.key)"
-                          size="large"
-                          style="min-width: 280px;width: 100%"
-                        />
-                        <div v-if="that.propInfo[tmp.key].groupType === '1'">
-                          <div
-                            style="display: flex;align-items: center; margin-left: 10px; width: 220px">
-                            <el-row>
-                              <el-col span="4">
-                                <div>占比</div>
-                              </el-col>
-                              <el-col span="14">
-                                <el-input-number
-                                  :min="-1" :max="100"
-                                  v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
-                                  @change="changeData(0,tmp.key)"
-                                />
-                              </el-col>
-                              <el-col span="4">
-                                <div> %</div>
-                              </el-col>
-                            </el-row>
-                          </div>
-                        </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="deleteList(that.propInfo[tmp.key],index)">
-                          <i class="icon-lk_delete"> </i>
-                        </el-button>
-                      </div>
-                    </div>
+                           <el-select-v2
+                             v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
+                             filterable
+                             :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
+                             placeholder="Please select"
+                             @change="changeData(-1,tmp.key)"
+                             size="large"
+                             style="min-width: 280px;width: 100%"
+                           />
+                           <div v-if="that.propInfo[tmp.key].groupType === '1'">
+                             <div
+                               style="display: flex;align-items: center; margin-left: 10px; width: 220px">
+                               <el-row>
+                                 <el-col span="4">
+                                   <div>占比</div>
+                                 </el-col>
+                                 <el-col span="14">
+                                   <el-input-number
+                                     :min="-1" :max="100"
+                                     v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
+                                     @change="changeData(0,tmp.key)"
+                                   />
+                                 </el-col>
+                                 <el-col span="4">
+                                   <div> %</div>
+                                 </el-col>
+                               </el-row>
+                             </div>
+                           </div>
+                           <el-button
+                             v-if="that.propInfo[tmp.key].canChange"
+                             @click="deleteList(that.propInfo[tmp.key],index)">
+                             <i class="icon-lk_delete"> </i>
+                           </el-button>
+                         </div>
+                       </div>
 
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
-                  </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
+                     </div>
 
-                  <div v-else-if="!that.propInfo[tmp.key].isCombo">
-                    <div
-                      v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
-                      :key="index"
-                      style="padding: 4px">
-                      <div style="display: flex;align-items: center;">
+                     <div v-else-if="!that.propInfo[tmp.key].isCombo">
+                       <div
+                         v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
+                         :key="index"
+                         style="padding: 4px">
+                         <div style="display: flex;align-items: center;">
                     <span>
                       <i
                         v-if="that.propInfo[tmp.key].canInput"
@@ -153,120 +148,119 @@
                         style="font-size: 20px"> </i>
                       <i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
                     </span>
-                        <el-autocomplete
-                          v-if="that.propInfo[tmp.key].canInput"
-                          v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                          :fetch-suggestions="querySearch"
-                          clearable
-                          class="inline-input w-50"
-                          placeholder="Please Input"
-                          @change="changeData"
-                          @select="changeData"
-                        />
+                           <el-autocomplete
+                             v-if="that.propInfo[tmp.key].canInput"
+                             v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
+                             :fetch-suggestions="querySearch"
+                             clearable
+                             class="inline-input w-50"
+                             placeholder="Please Input"
+                             @change="changeData"
+                             @select="changeData"
+                           />
 
-                        <el-select-v2
-                          v-else
-                          v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                          filterable
-                          :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                          placeholder="Please select"
-                          @change="changeData(index,tmp.key)"
-                          size="large"
-                          style="min-width: 280px;width: 100%"
-                        />
-                        <div v-if="that.propInfo[tmp.key].groupType === '1'">
+                           <el-select-v2
+                             v-else
+                             v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
+                             filterable
+                             :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
+                             placeholder="Please select"
+                             @change="changeData(index,tmp.key)"
+                             size="large"
+                             style="min-width: 280px;width: 100%"
+                           />
+                           <div v-if="that.propInfo[tmp.key].groupType === '1'">
 
-                          <div
-                            style="display: flex;align-items: center; margin-left: 10px; width: 220px">
-                            <el-row>
-                              <el-col span="4">
-                                <div>占比</div>
-                              </el-col>
-                              <el-col span="14">
-                                <el-input-number
-                                  :min="-1" :max="100"
-                                  v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
-                                  @change="changeData(index,tmp.key)"
-                                />
-                              </el-col>
-                              <el-col span="4">
-                                <div> %</div>
-                              </el-col>
-                            </el-row>
-                          </div>
-                        </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="deleteList(that.propInfo[tmp.key],index)">
-                          <i class="icon-lk_delete"> </i>
-                        </el-button>
-                      </div>
-                    </div>
+                             <div
+                               style="display: flex;align-items: center; margin-left: 10px; width: 220px">
+                               <el-row>
+                                 <el-col span="4">
+                                   <div>占比</div>
+                                 </el-col>
+                                 <el-col span="14">
+                                   <el-input-number
+                                     :min="-1" :max="100"
+                                     v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
+                                     @change="changeData(index,tmp.key)"
+                                   />
+                                 </el-col>
+                                 <el-col span="4">
+                                   <div> %</div>
+                                 </el-col>
+                               </el-row>
+                             </div>
+                           </div>
+                           <el-button
+                             v-if="that.propInfo[tmp.key].canChange"
+                             @click="deleteList(that.propInfo[tmp.key],index)">
+                             <i class="icon-lk_delete"> </i>
+                           </el-button>
+                         </div>
+                       </div>
 
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
-                  </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
+                     </div>
 
-                  <div v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
-                    <div
-                      v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
-                      :key="index" style="display: flex">
-                      <div class="img-box" v-if="img.url">
-                        <div style="display: flex">
-                          <img :src="img.url" width="60px" height="60px"/>
-                          <el-select-v2
-                            v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                            filterable
-                            :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
-                            placeholder="Please select"
-                            @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[0].showLabel)"
-                            size="large"
-                            style="min-width: 280px;width: 100%"
-                          >
-                            <template #default="{ item }">
-                              <div style="display: flex;">
-                                <img :src="item.url" width="30px" height="30px"/>
-                                <span>
+                     <div v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
+                       <div
+                         v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
+                         :key="index" style="display: flex">
+                         <div class="img-box" v-if="img.url">
+                           <div style="display: flex">
+                             <img :src="img.url" width="60px" height="60px"/>
+                             <el-select-v2
+                               v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
+                               filterable
+                               :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
+                               placeholder="Please select"
+                               @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[0].showLabel)"
+                               size="large"
+                               style="min-width: 280px;width: 100%"
+                             >
+                               <template #default="{ item }">
+                                 <div style="display: flex;">
+                                   <img :src="item.url" width="30px" height="30px"/>
+                                   <span>
                                 {{ item.label }}
                               </span>
-                              </div>
-                            </template>
-                          </el-select-v2>
-                        </div>
-                      </div>
-                      <div v-else-if="img.label">
-                        <el-input v-model="img.label" disabled/>
-                      </div>
-                      <el-button
-                        v-if="that.propInfo[tmp.key].canChange"
-                        @click="deleteList(that.propInfo[tmp.key],index)">
-                        <i class="icon-lk_delete"> </i>
-                      </el-button>
-                    </div>
-                    <el-button
-                      v-if="that.propInfo[tmp.key].canChange"
-                      @click="appendList(that.propInfo[tmp.key])">
-                      添加
-                    </el-button>
+                                 </div>
+                               </template>
+                             </el-select-v2>
+                           </div>
+                         </div>
+                         <div v-else-if="img.label">
+                           <el-input v-model="img.label" disabled/>
+                         </div>
+                         <el-button
+                           v-if="that.propInfo[tmp.key].canChange"
+                           @click="deleteList(that.propInfo[tmp.key],index)">
+                           <i class="icon-lk_delete"> </i>
+                         </el-button>
+                       </div>
+                       <el-button
+                         v-if="that.propInfo[tmp.key].canChange"
+                         @click="appendList(that.propInfo[tmp.key])">
+                         添加
+                       </el-button>
 
-                  </div>
+                     </div>
 
-                </el-form-item>
-              </el-form>
-            </el-scrollbar>
-          </div>
-        </div>
+                   </el-form-item>
+                 </el-form>
+               </el-scrollbar>
+             </div>
+           </div>
 
-    </div>
+         </div>
+       </el-col>
 
-    <div
-      :class="{ 'hidden-div': true }">
-      <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
-    </div>
-  </div>
+     </el-row>
+   </div>
+ </div>
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
@@ -282,13 +276,14 @@ import {replaceDomain} from "@/utils";
 import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
-import {convertImageToBase64} from "@/components/DraftDesign/utils/Dpi";
-
+import domtoimage from 'dom-to-image';
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
 const draftDesignEditRef = ref()
 const that = reactive({
+  svgId: "svg_"+Math.random().toString(36).substring(2),
+  hideCreate: true,
   propInfo: {
     reView: true,
     groupName: '', // 节点名称
@@ -321,38 +316,7 @@ const that = reactive({
   data: {},
   show: false,
 })
-const showImgTitle = computed(() => {
-  if (that.sizeInfo) {
-    return '宽:' + that.sizeInfo.width + 'mm  高:' + that.sizeInfo.height + 'mm'
-  }
-})
-const zoomList = [
-  {
-    value: 1,
-    label: '1'
-  },
-  {
-    value: 5,
-    label: '5'
-  },
-  {
-    value: 6,
-    label: '6'
-  },
-  {
-    value: 10,
-    label: '10'
-  }, {
-    value: 15,
-    label: '15'
-  }, {
-    value: 20,
-    label: '20'
-  }, {
-    value: 30,
-    label: '30'
-  },
-]
+
 const currentLocale = computed(() => localeStore.getCurrentLocale)
 watch(() => that.currentZoom, () => {
   showPng();
@@ -364,7 +328,18 @@ const querySearch = (queryString: string, cb: any) => {
   }) : that.ingredientInfoList
   cb(results)
 }
-
+const imageSize =computed(()=>{
+  if(that.sizeInfo){
+    return {
+      width: that.sizeInfo.width,
+      height: that.sizeInfo.height
+    }
+  }
+  return {
+    width: 10,
+    height: 10
+  }
+})
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
     zIndex: 9999999,
@@ -469,6 +444,26 @@ const getIngredientInfoListByType = (type) => {
   return that.ingredientInfoList.filter(item => item.type === type)
 }
 
+const toBase64 = async () =>{
+  let svgElement = document.getElementById(that.svgId);
+  console.log("svg2canvas",domtoimage)
+  domtoimage.toPng(svgElement)
+    .then((dataUrl) => {
+      that.previewData = dataUrl;
+      that.previewUrl  =""
+      // 下载
+      // const link = document.createElement('a');
+      // link.href = dataUrl;
+      // link.download = 'image.png';
+      // link.click();
+    })
+    .catch((error) => {
+      console.error('转换失败:', error);
+    });
+
+
+}
+
 const deleteList = (item, index) => {
   item.dataInfo.splice(index, 1)
   resetData();
@@ -533,7 +528,6 @@ const loadConfig = (config: object, propData = {}) => {
   that.pageConfig = config.pageConfig
   that.data = config.data
   that.propInfo = {...propData}
-
   that.sizeInfo = that.pageConfig.editArea
   // true, conf.pageConfig, conf.data, test
   draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo)
@@ -594,11 +588,11 @@ const queryUseLabel = (label) => {
 
 }
 const showPng = () => {
-
+  that.hideCreate = true;
   if (that.pageConfig && that.pageConfig.background) {
     loading.value = true
     setTimeout(() => {
-      draftDesignEditRef.value.toPngUrl((url) => {
+      draftDesignEditRef.value.toSVGData((url) => {
         that.previewUrl = url
         const info = draftDesignEditRef.value.getPropInfo();
         that.propInfo = {
@@ -630,52 +624,37 @@ const changeType = () => {
   previewByDraftDesignId(that.draftDesignId, that.propInfo)
 }
 const getPropInfo = () => {
-  if (that.changeCount > 0) {
-    return new Promise((resolve) => {
-      draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo).then(() => {
-        setTimeout(() => {
-          // 成功后再获取图片
-          draftDesignEditRef.value.toPngUrl((url) => {
-            that.previewData = url
-            const info = draftDesignEditRef.value.getPropInfo();
-            resolve({
-              draftDesignData: draftDesignEditRef.value.getJson(),
-              propOrderByList: info.propOrderByList,
-              // 设计稿id
-              draftDesignId: that.draftDesignId,
-              previewImage: that.previewData,
-              propInfo: that.propInfo
-            })
-          }, {
-            widthScale: 6,
-            heightScale: 6
+  // 预览数据 保持缩放
+  return new Promise((resolve) => {
+    // 成功后再获取图片
+    draftDesignEditRef.value.toSVGData((url) => {
+      that.previewUrl = url
+      that.hideCreate = false;
+      let svgElement = document.getElementById(that.svgId);
+      domtoimage.toPng(svgElement)
+        .then((dataUrl) => {
+          that.previewData = dataUrl;
+          that.hideCreate = true;
+          that.previewUrl  =""
+          const info = draftDesignEditRef.value.getPropInfo();
+          resolve({
+            draftDesignData: draftDesignEditRef.value.getJson(),
+            propOrderByList: info.propOrderByList,
+            // 设计稿id
+            draftDesignId: that.draftDesignId,
+            previewImage: that.previewData,
+            propInfo: that.propInfo
           })
-        }, 400)
-      })
-    })
-  } else {
-    // 预览数据 保持缩放
-    return new Promise((resolve) => {
-      // 成功后再获取图片
-      draftDesignEditRef.value.toPngUrl((url) => {
-        that.previewData = url
-        const info = draftDesignEditRef.value.getPropInfo();
-        resolve({
-          draftDesignData: draftDesignEditRef.value.getJson(),
-          propOrderByList: info.propOrderByList,
-          // 设计稿id
-          draftDesignId: that.draftDesignId,
-          previewImage: that.previewData,
-          propInfo: that.propInfo
         })
-      }, {
-        widthScale: 6,
-        heightScale: 6
-      })
+        .catch((error) => {
+          console.error('转换失败:', error);
+        });
+
+    }, {
+      widthScale: 6,
+      heightScale: 6
     })
-  }
-
-
+  })
 }
 const submit = async () => {
   const info = await getPropInfo();
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/ImageLibraryManage.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/ImageLibraryManage.vue
index 4230cbd..0840854 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/ImageLibraryManage.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/ImageLibraryManage.vue
@@ -168,8 +168,8 @@ const addNew = async () => {
       shape: ShapeType.vueShapeImage,
       data: {
         label: '',
-        width: 40,
-        height: 40,
+        width: 32,
+        height: 32,
         shape: VueCellShapeType.Image,
         style: {
           shape:{
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeCircleNode.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeCircleNode.vue
index fd89086..955d319 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeCircleNode.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeCircleNode.vue
@@ -181,20 +181,22 @@ export default defineComponent({
       // this.cellInfo.showInput = val
     },
     changSize(size: any) {
+      if(size && size.width){
+        this.sizeWInfo.width = size.width;
+        this.sizeWInfo.height = size.height;
+        this.minSize = Math.min(size.height, size.width)
+        let s = size.height + 12;
+        if (s > 60) {
+          s = s + s / 3
+        }
+        if (s < 6) {
+          s = 6
+        } else if (s >= 1000) {
+          s = 1000
+        }
+        this.fontSize = s;
+      }
 
-      this.sizeWInfo.width = size.width;
-      this.sizeWInfo.height = size.height;
-      this.minSize = Math.min(size.height, size.width)
-      let s = size.height + 12;
-      if (s > 60) {
-        s = s + s / 3
-      }
-      if (s < 6) {
-        s = 6
-      } else if (s >= 1000) {
-        s = 1000
-      }
-      this.fontSize = s;
       this.changeFontSize();
     },
     changeFontSize() {
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
index 5b2adbf..2675f46 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
@@ -6,6 +6,22 @@
    :class="{ 'node-content-group' : cellInfo.editMode && cellInfo.propGroupId }"
     :title="cellInfo.propGroupName"
     v-reSize="changSize">
+
+    <img
+      :src="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
+      style="width: 100%;height: 100%;"
+      :style="{
+          width: '100%',
+          height: '100%',
+          fillOpacity: cellInfo.style.shape.fillOpacity,
+          strokeDasharray: cellInfo.style.shape.strokeDasharray,
+          strokeDashoffset: cellInfo.style.shape.strokeDashoffset,
+          opacity: cellInfo.style.shape.opacity,
+          transform: cellInfo.style.shape.transform,
+          clipPath: cellInfo.style.shape.clipPath,
+          filter: cellInfo.style.shape.filter
+        }"
+    />
     <svg
       style="position: absolute;
       width: 100%;height: 100%;
@@ -13,20 +29,8 @@
       transform: scale(0.1); "
       :style="svgStyle"
 
-    >
+    />
 
-      <image
-        :href="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
-        style="width: 100%;height: 100%;"
-        :fill-opacity="cellInfo.style.shape.fillOpacity"
-        :stroke-dasharray="cellInfo.style.shape.strokeDasharray"
-        :stroke-dashoffset="cellInfo.style.shape.strokeDashoffset"
-        :opacity="cellInfo.style.shape.opacity"
-        :transform="cellInfo.style.shape.transform"
-        :clip-path="cellInfo.style.shape.clipPath"
-        :filter="cellInfo.style.shape.filter"
-      />
-    </svg>
   </div>
 </template>
 
@@ -110,7 +114,6 @@ export default defineComponent({
             fillColor: '', // 填充颜色
             fillOpacity: '', // 填充颜色的不透明度
             href: '',
-            hrefBase64: null,
             opacity: '', // 元素的不透明度
             strokeDashoffset: '', // 虚线起始偏移量
             strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
@@ -194,6 +197,9 @@ export default defineComponent({
     setInput(val: boolean) {
     },
     changSize(size: any) {
+      if(!size){
+        return;
+      }
       this.sizeWInfo.width = size.width;
       this.sizeWInfo.height = size.height;
       this.minSize = Math.min(size.height, size.width)
@@ -206,7 +212,6 @@ export default defineComponent({
       } else if (s >= 1000) {
         s = 1000
       }
-
       // this.nodeInfo.store.data.size.width = size.width;
       this.fontSize = s;
       this.changeFontSize();
@@ -235,7 +240,7 @@ export default defineComponent({
             y: 0, // 矩形左上角的 y 坐标
             rx: 0, // 矩形的圆角 x 半径
             ry: 0, // 矩形的圆角 y 半径
-            fillColor: '#000000', // 填充颜色
+            fillColor: 'rgba(0,0,0,0)', // 填充颜色
             href: '',
             label: '图片',
             fillOpacity: '', // 填充颜色的不透明度
@@ -253,11 +258,21 @@ export default defineComponent({
         }
       }, info)
 
-      if(this.cellInfo.style.shape.href){
+      if(!this.hrefBase64 && this.cellInfo.style.shape.href && this.cellInfo.style.shape.href.indexOf("data:image") < 0){
+        // DataUri.imageToDataUri(this.cellInfo.style.shape.href,
+        //   function (nu, url) {
+        //     console.log("base64 完成")
+        //     // 第一个参数无效，用的只是第二个参数，但是第一个参数不写不行
+        //     // @ts-ignore
+        //     this.hrefBase64 = url; // 给图片标签赋值
+        //   }
+
+        // );
         convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
-          // @ts-ignore
-          // 待优化 this.hrefBase64 = res
-          this.cellInfo.style.shape.href = res
+          // @ts-ignore 待优化
+          this.hrefBase64 = res
+          console.log("base64 完成")
+          // this.cellInfo.style.shape.href = res
         })
       }
       setTimeout(() => {
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
index e5a11ea..a487301 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/index.ts
@@ -68,12 +68,12 @@ export const graphOptions = (elId:string, viewMode = false) => {
       vertexDeletable: true // 边的路径点是否可以被删除
 
     }, // 对齐线
-    snapline: true, // 撤销/重做
+    snapline: viewMode, // 撤销/重做
     history: !viewMode, //
 
     // 显示网格
     grid: {
-      visible: true,
+      visible: !viewMode,
       size: 2, // 网格大小
       type: 'doubleMesh', // // 'dot' | 'fixedDot' | 'mesh'
       args: [{
@@ -91,7 +91,7 @@ export const graphOptions = (elId:string, viewMode = false) => {
     },
     panning: {
       // 画布移动 
-      enabled: false,
+      enabled: viewMode,
       pageVisible: false, // 是否分页
       pageBreak: true,
       pannable: true,// 是否平移
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
index 3b46a23..951035e 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
@@ -277,7 +277,7 @@ const rightKeyMenu = computed(() => {
         value: 'mergeGroup',
         icon: 'icon-lk_cell_add',
         disabled: disabledMenu.value,
-        label: '设置洗涤说明',
+        label: '设置图文变量',
         handler: (item) => {
           const cells = that.selectedCellsList
           if (cells.length === 0) {
@@ -302,7 +302,7 @@ const rightKeyMenu = computed(() => {
         value: 'mergeGroup',
         icon: 'icon-lk_cell_tree',
         disabled: disabledMenu.value,
-        label: '设为属性项',
+        label: '设为变量',
         handler: (item) => {
           const cells = that.selectedCellsList
           if (cells.length === 0) {
@@ -470,7 +470,7 @@ const init = (isDesignMode: boolean, bgConfig: any, data = {}, propDataInfo = {}
       size: 'auto auto',
       opacity: 1,
       angle: 20,
-      color: '#F5F7FD',
+      color:  '#F5F7FD',
       ...bgConfig.background || {}
     },
   } as any
@@ -481,19 +481,22 @@ const init = (isDesignMode: boolean, bgConfig: any, data = {}, propDataInfo = {}
     height: maxSize,
   }
   graph = new Graph(options)
-// 画布拖动组件
-  graph.use(
-    new Scroller({
-      enabled: true,
-      pageVisible: true, // 是否分页
-      pageBreak: false,
-      pannable: true,// 是否平移
-      // pageWidth: that.pageConfig.editArea.width * 10,
-      // pageHeight: that.pageConfig.editArea.height * 10,
-      // modifiers: ['ctrl', 'meta'],
-    }),
-  )
+
   if (that.editState) {
+
+    // 画布拖动组件
+    graph.use(
+      new Scroller({
+        enabled: true,
+        pageVisible: true, // 是否分页
+        pageBreak: false,
+        pannable: true,// 是否平移
+        // pageWidth: that.pageConfig.editArea.width * 10,
+        // pageHeight: that.pageConfig.editArea.height * 10,
+        // modifiers: ['ctrl', 'meta'],
+      }),
+    )
+
     // 参考线
     graph.use(
       new Snapline({
@@ -700,6 +703,7 @@ const toPngUrl = (callback: (url: string) => void, options?: {
 
   let widthScale = options && options.widthScale ? options.widthScale : 5
   let heightScale = options && options.heightScale ? options.heightScale : 5
+
   graph.toPNG((dataUri) => {
     that.previewUrl = dataUri;
     callback(that.previewUrl)
@@ -714,9 +718,42 @@ const toPngUrl = (callback: (url: string) => void, options?: {
       bottom: 0
     },
     quality: 1,
+    copyStyles: true,
     ...options
   })
 }
+const toSVGData = (callback: (url: string) => void, options?: {
+  width: number,
+  height: number,
+  widthScale: number,
+  heightScale: number,
+  padding: {
+    top: number,
+    left: number,
+    right: number,
+    bottom: number
+  }
+}) => {
+
+  let widthScale = options && options.widthScale ? options.widthScale : 5
+  let heightScale = options && options.heightScale ? options.heightScale : 5
+
+  graph.toSVG((dataUri) => {
+    that.previewUrl = dataUri;
+    callback(that.previewUrl)
+  }, {
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: that.pageConfig.width * (widthScale),
+      height: that.pageConfig.height * (heightScale),
+    },
+    preserveDimensions:{
+      width: that.pageConfig.width * (widthScale),
+      height: that.pageConfig.height * (heightScale),
+    },
+  })
+}
 const setPropList = (propDataInfo) => {
   const keys = Object.keys(propDataInfo)
   for (let i = 0; i < keys.length; i++) {
@@ -937,7 +974,9 @@ const getDeviceDPI = () => {
 }
 let rulerContainer = document.createElement('div');
 const addDrawRuler = () => {
-
+  if(!that.editState){
+    return;
+  }
   // 计算每个像素对应的毫米数
   const dpi = getDeviceDPI();
   const mmPerInch = 25.4; // 1 英寸 = 25.4 毫米
@@ -1601,6 +1640,7 @@ defineExpose({
   init,
   getPropInfo,
   toPngUrl,
+  toSVGData,
   clearData,
   getJson,
 })
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
index dbeb648..ce87ca5 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
@@ -115,7 +115,6 @@ const delItem = () => {
 }
 const openItem = () => {
   designPreviewDialogRef.value.previewByProductId(formData.value.productId, JSON.parse(formData.value.propInfo || '{}'))
-
 }
 const getSizeInfo = computed(() => {
   if (formData.value.specInfo) {
@@ -140,11 +139,11 @@ const submit = (data:any) => {
   formData.value.propOrderByList = data.propOrderByList;
   formData.value.draftDesignId = data.draftDesignId;
   formData.value.previewImage = data.previewImage;
-  formData.value.draftDesignInfo = data.draftDesignInfo;
+  formData.value.draftDesignInfo = {...data.draftDesignInfo};
   // 将颜色信息保存到规格信息中
   formData.value.specInfo = {
     ...formData.value.specInfo,
-    mainColor: data.draftDesignInfo.label
+    mainColor: formData.value.draftDesignInfo.label || "默认"
   };
   change();
 }
diff --git a/sql/mysql/20241018/新增字段.sql b/sql/mysql/20241018/新增字段.sql
new file mode 100644
index 0000000..9cc5b4a
--- /dev/null
+++ b/sql/mysql/20241018/新增字段.sql
@@ -0,0 +1,5 @@
+ALTER TABLE  oms_brand ADD COLUMN  `product_count` int  DEFAULT 0 COMMENT '产品数量';
+ALTER TABLE  oms_draft_design_data ADD COLUMN  `product_count` int  DEFAULT 0 COMMENT '产品数量';
+
+ALTER TABLE  oms_saleorder ADD COLUMN  `delivery_address` int  DEFAULT 0 COMMENT '交货地址';
+ALTER TABLE  oms_saleorder ADD COLUMN  `delivery_remark` int  DEFAULT 0 COMMENT '交货备注';