优化 后台本地文件存储和访问路径，配置文件添加本地文件域名配置项

新增 [ui]
1.图稿设计图形图库管理
2.工具栏节点更多属性配置
3.使用技巧提示功能
3.右键菜单功能，
4.动态属性功能，右侧查看节点，和动态属性组功能,
5.优化访问资源的路径问题

hangtag-module-infra/hangtag-module-infra-biz/src/main/java/cn/hangtag/module/infra/controller/admin/file/FileController.java

@@ -52,6 +52,12 @@ public class FileController {
         return success(fileService.getFilePresignedUrl(path));
     }
 
+    @GetMapping("/domain")
+    @Operation(summary = "获取本地文件的url了服务器地址", description = "本地文件服务的资源,前缀不一致时转换为当前服务器的的地址和端口地址")
+    public CommonResult<String> getDomain() {
+        return success(fileService.getDomain());
+    }
+
     @PostMapping("/create")
     @Operation(summary = "创建文件", description = "模式二：前端上传文件：配合 presigned-url 接口，记录上传了上传的文件")
     public CommonResult<Long> createFile(@Valid @RequestBody FileCreateReqVO createReqVO) {

hangtag-module-infra/hangtag-module-infra-biz/src/main/java/cn/hangtag/module/infra/framework/file/core/client/local/LocalFileClient.java

@@ -47,15 +47,8 @@ public class LocalFileClient extends AbstractFileClient<LocalFileClientConfig> {
     private static final String SAVE_DIRECTORY;
     static {
         // 将文件保存到项目上级目录下 uploads
-        String dir = System.getProperty("user.dir") + File.separator;
+        String dir = System.getProperty("user.dir") + File.separator+"uploads";
         File file = new File(dir);
-        String parent = file.getParent();
-        // 检查是否有父目录
-        if (parent != null) {
-            file = new File(parent, "uploads");
-        } else {
-            file = new File(dir, "uploads");
-        }
         if (!file.exists()) {
             file.mkdirs();
         }

hangtag-module-infra/hangtag-module-infra-biz/src/main/java/cn/hangtag/module/infra/service/config/YmlUtils.java

@@ -0,0 +1,37 @@
+package cn.hangtag.module.infra.service.config;
+
+import org.springframework.context.EnvironmentAware;
+import org.springframework.core.env.Environment;
+import org.springframework.stereotype.Component;
+
+/**
+ * 系统文件配置操作工具
+ */
+@Component
+public class YmlUtils implements EnvironmentAware {
+
+    private static Environment env;
+
+    /**
+     * 设置环境变量
+     *
+     * @author fzr
+     * @param environment 环境变量
+     */
+    @Override
+    public void setEnvironment(Environment environment) {
+        YmlUtils.env = environment;
+    }
+
+    /**
+     * 根据Key获取值
+     *
+     * @author fzr
+     * @param key 键
+     * @return String
+     */
+    public static String get(String key) {
+        return env.getProperty(key);
+    }
+
+}

hangtag-module-infra/hangtag-module-infra-biz/src/main/java/cn/hangtag/module/infra/service/file/FileService.java

@@ -63,4 +63,10 @@ public interface FileService {
      */
     FilePresignedUrlRespVO getFilePresignedUrl(String path) throws Exception;
 
+    /**
+     * 获取当前服务的资源域名
+     *
+     * @return {@link String}
+     */
+    String getDomain();
 }

hangtag-module-infra/hangtag-module-infra-biz/src/main/java/cn/hangtag/module/infra/service/file/FileServiceImpl.java

@@ -1,5 +1,7 @@
 package cn.hangtag.module.infra.service.file;
 
+import cn.hangtag.framework.common.util.FuncUtil;
+import cn.hangtag.module.infra.service.config.YmlUtils;
 import cn.hutool.core.lang.Assert;
 import cn.hutool.core.util.StrUtil;
 import cn.hangtag.framework.common.pojo.PageResult;
@@ -14,9 +16,16 @@ import cn.hangtag.module.infra.controller.admin.file.vo.file.FilePresignedUrlRes
 import cn.hangtag.module.infra.dal.dataobject.file.FileDO;
 import cn.hangtag.module.infra.dal.mysql.file.FileMapper;
 import lombok.SneakyThrows;
+import org.springframework.boot.autoconfigure.web.ServerProperties;
 import org.springframework.stereotype.Service;
+import org.springframework.web.context.request.RequestContextHolder;
+import org.springframework.web.context.request.ServletRequestAttributes;
 
 import javax.annotation.Resource;
+import javax.servlet.http.HttpServletRequest;
+
+import java.util.Arrays;
+import java.util.List;
 
 import static cn.hangtag.framework.common.exception.util.ServiceExceptionUtil.exception;
 import static cn.hangtag.module.infra.enums.ErrorCodeConstants.FILE_NOT_EXISTS;
@@ -35,6 +44,9 @@ public class FileServiceImpl implements FileService {
     @Resource
     private FileMapper fileMapper;
 
+    @Resource
+    private ServerProperties serverProperties;
+
     @Override
     public PageResult<FileDO> getFilePage(FilePageReqVO pageReqVO) {
         return fileMapper.selectPage(pageReqVO);
@@ -114,4 +126,48 @@ public class FileServiceImpl implements FileService {
                 object -> object.setConfigId(fileClient.getId()));
     }
 
+    @Override
+    public String getDomain() {
+        ServletRequestAttributes servletRequestAttributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
+        if(FuncUtil.isEmpty(servletRequestAttributes)){
+            return "";
+        }
+        HttpServletRequest request = servletRequestAttributes.getRequest();
+        // yml 配置 localupload: 8080
+        String port = YmlUtils.get("localupload.port");
+        if(FuncUtil.isEmpty(port)){
+            // 默认端口
+            port = FuncUtil.toStr(serverProperties.getPort());
+        }
+        String domain = domain(request);
+        if (!Arrays.asList("443","80","0").contains(port)) {
+            domain += ":" + port;
+        }
+        return domain;
+    }
+    public static String domain(HttpServletRequest request) {
+        String domain = YmlUtils.get("localupload.domain");
+        if(FuncUtil.isNotEmpty(domain)){
+            // 优先返回配置中的域名
+            return domain;
+        }
+        String port = YmlUtils.get("localupload.port");
+
+        if (request != null) {
+            String origin = request.getHeader("Origin");
+            if(FuncUtil.isEmpty(origin)){
+                origin = request.getRequestURL().toString();
+            }
+            List<String> urls = Arrays.asList(origin.split("/"));
+
+            String agree = "http:";
+
+            if (Arrays.asList("443","80","0").contains(port) || request.getServerPort() == 443) {
+                agree = "https:";
+            }
+
+            return agree + "//" + urls.get(2).split(":")[0];
+        }
+        return null;
+    }
 }

hangtag-module-oms/hangtag-module-oms-api/src/main/java/cn/hangtag/module/oms/enums/ErrorCodeConstants.java

@@ -6,4 +6,5 @@ public interface ErrorCodeConstants  extends cn.hangtag.module.system.enums.Erro
 
     // ========== 产品资料  TODO 补充编号 ==========
     ErrorCode PRODUCT_INFO_NOT_EXISTS = new ErrorCode(3200, "产品资料 不存在");
+    ErrorCode SHAPE_TEMPLATE_NOT_EXISTS = new ErrorCode(3200, "图形模板管理 不存在");
 }

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/shapetemplate/ShapeTemplateController.java

@@ -0,0 +1,95 @@
+package cn.hangtag.module.oms.controller.admin.shapetemplate;
+
+import org.springframework.web.bind.annotation.*;
+import javax.annotation.Resource;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.security.access.prepost.PreAuthorize;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import io.swagger.v3.oas.annotations.Parameter;
+import io.swagger.v3.oas.annotations.Operation;
+
+import javax.validation.constraints.*;
+import javax.validation.*;
+import javax.servlet.http.*;
+import java.util.*;
+import java.io.IOException;
+
+import cn.hangtag.framework.common.pojo.PageParam;
+import cn.hangtag.framework.common.pojo.PageResult;
+import cn.hangtag.framework.common.pojo.CommonResult;
+import cn.hangtag.framework.common.util.object.BeanUtils;
+import static cn.hangtag.framework.common.pojo.CommonResult.success;
+
+import cn.hangtag.framework.excel.core.util.ExcelUtils;
+
+import cn.hangtag.framework.apilog.core.annotation.ApiAccessLog;
+import static cn.hangtag.framework.apilog.core.enums.OperateTypeEnum.*;
+
+import cn.hangtag.module.oms.controller.admin.shapetemplate.vo.*;
+import cn.hangtag.module.oms.dal.dataobject.shapetemplate.ShapeTemplateDO;
+import cn.hangtag.module.oms.service.shapetemplate.ShapeTemplateService;
+
+@Tag(name = "管理后台 - 图形模板管理 ")
+@RestController
+@RequestMapping("/oms/shape-template")
+@Validated
+public class ShapeTemplateController {
+
+    @Resource
+    private ShapeTemplateService shapeTemplateService;
+
+    @PostMapping("/create")
+    @Operation(summary = "创建图形模板管理 ")
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:create')")
+    public CommonResult<Long> createShapeTemplate(@Valid @RequestBody ShapeTemplateSaveReqVO createReqVO) {
+        return success(shapeTemplateService.createShapeTemplate(createReqVO));
+    }
+
+    @PutMapping("/update")
+    @Operation(summary = "更新图形模板管理 ")
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:update')")
+    public CommonResult<Boolean> updateShapeTemplate(@Valid @RequestBody ShapeTemplateSaveReqVO updateReqVO) {
+        shapeTemplateService.updateShapeTemplate(updateReqVO);
+        return success(true);
+    }
+
+    @DeleteMapping("/delete")
+    @Operation(summary = "删除图形模板管理 ")
+    @Parameter(name = "id", description = "编号", required = true)
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:delete')")
+    public CommonResult<Boolean> deleteShapeTemplate(@RequestParam("id") Long id) {
+        shapeTemplateService.deleteShapeTemplate(id);
+        return success(true);
+    }
+
+    @GetMapping("/get")
+    @Operation(summary = "获得图形模板管理 ")
+    @Parameter(name = "id", description = "编号", required = true, example = "1024")
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:query')")
+    public CommonResult<ShapeTemplateRespVO> getShapeTemplate(@RequestParam("id") Long id) {
+        ShapeTemplateDO shapeTemplate = shapeTemplateService.getShapeTemplate(id);
+        return success(BeanUtils.toBean(shapeTemplate, ShapeTemplateRespVO.class));
+    }
+
+    @GetMapping("/page")
+    @Operation(summary = "获得图形模板管理 分页")
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:query')")
+    public CommonResult<PageResult<ShapeTemplateRespVO>> getShapeTemplatePage(@Valid ShapeTemplatePageReqVO pageReqVO) {
+        PageResult<ShapeTemplateDO> pageResult = shapeTemplateService.getShapeTemplatePage(pageReqVO);
+        return success(BeanUtils.toBean(pageResult, ShapeTemplateRespVO.class));
+    }
+
+    @GetMapping("/export-excel")
+    @Operation(summary = "导出图形模板管理  Excel")
+    @PreAuthorize("@ss.hasPermission('oms:shape-template:export')")
+    @ApiAccessLog(operateType = EXPORT)
+    public void exportShapeTemplateExcel(@Valid ShapeTemplatePageReqVO pageReqVO,
+              HttpServletResponse response) throws IOException {
+        pageReqVO.setPageSize(PageParam.PAGE_SIZE_NONE);
+        List<ShapeTemplateDO> list = shapeTemplateService.getShapeTemplatePage(pageReqVO).getList();
+        // 导出 Excel
+        ExcelUtils.write(response, "图形模板管理 .xls", "数据", ShapeTemplateRespVO.class,
+                        BeanUtils.toBean(list, ShapeTemplateRespVO.class));
+    }
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/shapetemplate/vo/ShapeTemplatePageReqVO.java

@@ -0,0 +1,31 @@
+package cn.hangtag.module.oms.controller.admin.shapetemplate.vo;
+
+import lombok.*;
+import java.util.*;
+import io.swagger.v3.oas.annotations.media.Schema;
+import cn.hangtag.framework.common.pojo.PageParam;
+import org.springframework.format.annotation.DateTimeFormat;
+import java.time.LocalDateTime;
+
+import static cn.hangtag.framework.common.util.date.DateUtils.FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND;
+
+@Schema(description = "管理后台 - 图形模板管理 分页 Request VO")
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class ShapeTemplatePageReqVO extends PageParam {
+
+    @Schema(description = "形状类型", example = "2")
+    private String shapeType;
+
+    @Schema(description = "名称", example = "张三")
+    private String name;
+
+    @Schema(description = "初始数据 json")
+    private String initData;
+
+    @Schema(description = "创建时间")
+    @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
+    private LocalDateTime[] createTime;
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/shapetemplate/vo/ShapeTemplateRespVO.java

@@ -0,0 +1,35 @@
+package cn.hangtag.module.oms.controller.admin.shapetemplate.vo;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.*;
+import java.util.*;
+import org.springframework.format.annotation.DateTimeFormat;
+import java.time.LocalDateTime;
+import com.alibaba.excel.annotation.*;
+
+@Schema(description = "管理后台 - 图形模板管理  Response VO")
+@Data
+@ExcelIgnoreUnannotated
+public class ShapeTemplateRespVO {
+
+    @Schema(description = "id", requiredMode = Schema.RequiredMode.REQUIRED, example = "17429")
+    @ExcelProperty("id")
+    private Long id;
+
+    @Schema(description = "形状类型", example = "2")
+    @ExcelProperty("形状类型")
+    private String shapeType;
+
+    @Schema(description = "名称", example = "张三")
+    @ExcelProperty("名称")
+    private String name;
+
+    @Schema(description = "初始数据 json")
+    @ExcelProperty("初始数据 json")
+    private String initData;
+
+    @Schema(description = "创建时间", requiredMode = Schema.RequiredMode.REQUIRED)
+    @ExcelProperty("创建时间")
+    private LocalDateTime createTime;
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/shapetemplate/vo/ShapeTemplateSaveReqVO.java

@@ -0,0 +1,24 @@
+package cn.hangtag.module.oms.controller.admin.shapetemplate.vo;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.*;
+import java.util.*;
+import javax.validation.constraints.*;
+
+@Schema(description = "管理后台 - 图形模板管理 新增/修改 Request VO")
+@Data
+public class ShapeTemplateSaveReqVO {
+
+    @Schema(description = "id", requiredMode = Schema.RequiredMode.REQUIRED, example = "17429")
+    private Long id;
+
+    @Schema(description = "形状类型", example = "2")
+    private String shapeType;
+
+    @Schema(description = "名称", example = "张三")
+    private String name;
+
+    @Schema(description = "初始数据 json")
+    private String initData;
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/dataobject/shapetemplate/ShapeTemplateDO.java

@@ -0,0 +1,43 @@
+package cn.hangtag.module.oms.dal.dataobject.shapetemplate;
+
+import lombok.*;
+import java.util.*;
+import java.time.LocalDateTime;
+import java.time.LocalDateTime;
+import com.baomidou.mybatisplus.annotation.*;
+import cn.hangtag.framework.mybatis.core.dataobject.BaseDO;
+
+/**
+ * 图形模板管理  DO
+ *
+ * @author YuanFeng
+ */
+@TableName("oms_shape_template")
+@KeySequence("oms_shape_template_seq") // 用于 Oracle、PostgreSQL、Kingbase、DB2、H2 数据库的主键自增。如果是 MySQL 等数据库，可不写。
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class ShapeTemplateDO extends BaseDO {
+
+    /**
+     * id
+     */
+    @TableId
+    private Long id;
+    /**
+     * 形状类型
+     */
+    private String shapeType;
+    /**
+     * 名称
+     */
+    private String name;
+    /**
+     * 初始数据 json
+     */
+    private String initData;
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/mysql/shapetemplate/ShapeTemplateMapper.java

@@ -0,0 +1,29 @@
+package cn.hangtag.module.oms.dal.mysql.shapetemplate;
+
+import java.util.*;
+
+import cn.hangtag.framework.common.pojo.PageResult;
+import cn.hangtag.framework.mybatis.core.query.LambdaQueryWrapperX;
+import cn.hangtag.framework.mybatis.core.mapper.BaseMapperX;
+import cn.hangtag.module.oms.dal.dataobject.shapetemplate.ShapeTemplateDO;
+import org.apache.ibatis.annotations.Mapper;
+import cn.hangtag.module.oms.controller.admin.shapetemplate.vo.*;
+
+/**
+ * 图形模板管理  Mapper
+ *
+ * @author YuanFeng
+ */
+@Mapper
+public interface ShapeTemplateMapper extends BaseMapperX<ShapeTemplateDO> {
+
+    default PageResult<ShapeTemplateDO> selectPage(ShapeTemplatePageReqVO reqVO) {
+        return selectPage(reqVO, new LambdaQueryWrapperX<ShapeTemplateDO>()
+                .eqIfPresent(ShapeTemplateDO::getShapeType, reqVO.getShapeType())
+                .likeIfPresent(ShapeTemplateDO::getName, reqVO.getName())
+                .eqIfPresent(ShapeTemplateDO::getInitData, reqVO.getInitData())
+                .betweenIfPresent(ShapeTemplateDO::getCreateTime, reqVO.getCreateTime())
+                .orderByDesc(ShapeTemplateDO::getId));
+    }
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/shapetemplate/ShapeTemplateService.java

@@ -0,0 +1,55 @@
+package cn.hangtag.module.oms.service.shapetemplate;
+
+import java.util.*;
+import javax.validation.*;
+import cn.hangtag.module.oms.controller.admin.shapetemplate.vo.*;
+import cn.hangtag.module.oms.dal.dataobject.shapetemplate.ShapeTemplateDO;
+import cn.hangtag.framework.common.pojo.PageResult;
+import cn.hangtag.framework.common.pojo.PageParam;
+
+/**
+ * 图形模板管理  Service 接口
+ *
+ * @author YuanFeng
+ */
+public interface ShapeTemplateService {
+
+    /**
+     * 创建图形模板管理 
+     *
+     * @param createReqVO 创建信息
+     * @return 编号
+     */
+    Long createShapeTemplate(@Valid ShapeTemplateSaveReqVO createReqVO);
+
+    /**
+     * 更新图形模板管理 
+     *
+     * @param updateReqVO 更新信息
+     */
+    void updateShapeTemplate(@Valid ShapeTemplateSaveReqVO updateReqVO);
+
+    /**
+     * 删除图形模板管理 
+     *
+     * @param id 编号
+     */
+    void deleteShapeTemplate(Long id);
+
+    /**
+     * 获得图形模板管理 
+     *
+     * @param id 编号
+     * @return 图形模板管理 
+     */
+    ShapeTemplateDO getShapeTemplate(Long id);
+
+    /**
+     * 获得图形模板管理 分页
+     *
+     * @param pageReqVO 分页查询
+     * @return 图形模板管理 分页
+     */
+    PageResult<ShapeTemplateDO> getShapeTemplatePage(ShapeTemplatePageReqVO pageReqVO);
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/shapetemplate/ShapeTemplateServiceImpl.java

@@ -0,0 +1,74 @@
+package cn.hangtag.module.oms.service.shapetemplate;
+
+import org.springframework.stereotype.Service;
+import javax.annotation.Resource;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.*;
+import cn.hangtag.module.oms.controller.admin.shapetemplate.vo.*;
+import cn.hangtag.module.oms.dal.dataobject.shapetemplate.ShapeTemplateDO;
+import cn.hangtag.framework.common.pojo.PageResult;
+import cn.hangtag.framework.common.pojo.PageParam;
+import cn.hangtag.framework.common.util.object.BeanUtils;
+
+import cn.hangtag.module.oms.dal.mysql.shapetemplate.ShapeTemplateMapper;
+
+import static cn.hangtag.framework.common.exception.util.ServiceExceptionUtil.exception;
+import static cn.hangtag.module.oms.enums.ErrorCodeConstants.*;
+
+/**
+ * 图形模板管理  Service 实现类
+ *
+ * @author YuanFeng
+ */
+@Service
+@Validated
+public class ShapeTemplateServiceImpl implements ShapeTemplateService {
+
+    @Resource
+    private ShapeTemplateMapper shapeTemplateMapper;
+
+    @Override
+    public Long createShapeTemplate(ShapeTemplateSaveReqVO createReqVO) {
+        // 插入
+        ShapeTemplateDO shapeTemplate = BeanUtils.toBean(createReqVO, ShapeTemplateDO.class);
+        shapeTemplateMapper.insert(shapeTemplate);
+        // 返回
+        return shapeTemplate.getId();
+    }
+
+    @Override
+    public void updateShapeTemplate(ShapeTemplateSaveReqVO updateReqVO) {
+        // 校验存在
+        validateShapeTemplateExists(updateReqVO.getId());
+        // 更新
+        ShapeTemplateDO updateObj = BeanUtils.toBean(updateReqVO, ShapeTemplateDO.class);
+        shapeTemplateMapper.updateById(updateObj);
+    }
+
+    @Override
+    public void deleteShapeTemplate(Long id) {
+        // 校验存在
+        validateShapeTemplateExists(id);
+        // 删除
+        shapeTemplateMapper.deleteById(id);
+    }
+
+    private void validateShapeTemplateExists(Long id) {
+        if (shapeTemplateMapper.selectById(id) == null) {
+            throw exception(SHAPE_TEMPLATE_NOT_EXISTS);
+        }
+    }
+
+    @Override
+    public ShapeTemplateDO getShapeTemplate(Long id) {
+        return shapeTemplateMapper.selectById(id);
+    }
+
+    @Override
+    public PageResult<ShapeTemplateDO> getShapeTemplatePage(ShapeTemplatePageReqVO pageReqVO) {
+        return shapeTemplateMapper.selectPage(pageReqVO);
+    }
+
+}

hangtag-module-oms/hangtag-module-oms-biz/src/main/resources/mapper/shapetemplate/ShapeTemplateMapper.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="cn.hangtag.module.oms.dal.mysql.shapetemplate.ShapeTemplateMapper">
+
+    <!--
+        一般情况下，尽可能使用 Mapper 进行 CRUD 增删改查即可。
+        无法满足的场景，例如说多表关联查询，才使用 XML 编写 SQL。
+        代码生成器暂时只生成 Mapper XML 文件本身，更多推荐 MybatisX 快速开发插件来生成查询。
+        文档可见：https://www.iocoder.cn/MyBatis/x-plugins/
+     -->
+
+</mapper>

hangtag-module-oms/hangtag-module-oms-biz/src/test/java/cn/hangtag/module/oms/service/shapetemplate/ShapeTemplateServiceImplTest.java

@@ -0,0 +1,142 @@
+package cn.hangtag.module.oms.service.shapetemplate;
+
+import org.junit.jupiter.api.Disabled;
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.mock.mockito.MockBean;
+
+import javax.annotation.Resource;
+
+import cn.hangtag.framework.test.core.ut.BaseDbUnitTest;
+
+import cn.hangtag.module.oms.controller.admin.shapetemplate.vo.*;
+import cn.hangtag.module.oms.dal.dataobject.shapetemplate.ShapeTemplateDO;
+import cn.hangtag.module.oms.dal.mysql.shapetemplate.ShapeTemplateMapper;
+import cn.hangtag.framework.common.pojo.PageResult;
+
+import javax.annotation.Resource;
+import org.springframework.context.annotation.Import;
+import java.util.*;
+import java.time.LocalDateTime;
+
+import static cn.hutool.core.util.RandomUtil.*;
+import static cn.hangtag.module.oms.enums.ErrorCodeConstants.*;
+import static cn.hangtag.framework.test.core.util.AssertUtils.*;
+import static cn.hangtag.framework.test.core.util.RandomUtils.*;
+import static cn.hangtag.framework.common.util.date.LocalDateTimeUtils.*;
+import static cn.hangtag.framework.common.util.object.ObjectUtils.*;
+import static cn.hangtag.framework.common.util.date.DateUtils.*;
+import static org.junit.jupiter.api.Assertions.*;
+import static org.mockito.Mockito.*;
+
+/**
+ * {@link ShapeTemplateServiceImpl} 的单元测试类
+ *
+ * @author YuanFeng
+ */
+@Import(ShapeTemplateServiceImpl.class)
+public class ShapeTemplateServiceImplTest extends BaseDbUnitTest {
+
+    @Resource
+    private ShapeTemplateServiceImpl shapeTemplateService;
+
+    @Resource
+    private ShapeTemplateMapper shapeTemplateMapper;
+
+    @Test
+    public void testCreateShapeTemplate_success() {
+        // 准备参数
+        ShapeTemplateSaveReqVO createReqVO = randomPojo(ShapeTemplateSaveReqVO.class).setId(null);
+
+        // 调用
+        Long shapeTemplateId = shapeTemplateService.createShapeTemplate(createReqVO);
+        // 断言
+        assertNotNull(shapeTemplateId);
+        // 校验记录的属性是否正确
+        ShapeTemplateDO shapeTemplate = shapeTemplateMapper.selectById(shapeTemplateId);
+        assertPojoEquals(createReqVO, shapeTemplate, "id");
+    }
+
+    @Test
+    public void testUpdateShapeTemplate_success() {
+        // mock 数据
+        ShapeTemplateDO dbShapeTemplate = randomPojo(ShapeTemplateDO.class);
+        shapeTemplateMapper.insert(dbShapeTemplate);// @Sql: 先插入出一条存在的数据
+        // 准备参数
+        ShapeTemplateSaveReqVO updateReqVO = randomPojo(ShapeTemplateSaveReqVO.class, o -> {
+            o.setId(dbShapeTemplate.getId()); // 设置更新的 ID
+        });
+
+        // 调用
+        shapeTemplateService.updateShapeTemplate(updateReqVO);
+        // 校验是否更新正确
+        ShapeTemplateDO shapeTemplate = shapeTemplateMapper.selectById(updateReqVO.getId()); // 获取最新的
+        assertPojoEquals(updateReqVO, shapeTemplate);
+    }
+
+    @Test
+    public void testUpdateShapeTemplate_notExists() {
+        // 准备参数
+        ShapeTemplateSaveReqVO updateReqVO = randomPojo(ShapeTemplateSaveReqVO.class);
+
+        // 调用, 并断言异常
+        assertServiceException(() -> shapeTemplateService.updateShapeTemplate(updateReqVO), SHAPE_TEMPLATE_NOT_EXISTS);
+    }
+
+    @Test
+    public void testDeleteShapeTemplate_success() {
+        // mock 数据
+        ShapeTemplateDO dbShapeTemplate = randomPojo(ShapeTemplateDO.class);
+        shapeTemplateMapper.insert(dbShapeTemplate);// @Sql: 先插入出一条存在的数据
+        // 准备参数
+        Long id = dbShapeTemplate.getId();
+
+        // 调用
+        shapeTemplateService.deleteShapeTemplate(id);
+       // 校验数据不存在了
+       assertNull(shapeTemplateMapper.selectById(id));
+    }
+
+    @Test
+    public void testDeleteShapeTemplate_notExists() {
+        // 准备参数
+        Long id = randomLongId();
+
+        // 调用, 并断言异常
+        assertServiceException(() -> shapeTemplateService.deleteShapeTemplate(id), SHAPE_TEMPLATE_NOT_EXISTS);
+    }
+
+    @Test
+    @Disabled  // TODO 请修改 null 为需要的值，然后删除 @Disabled 注解
+    public void testGetShapeTemplatePage() {
+       // mock 数据
+       ShapeTemplateDO dbShapeTemplate = randomPojo(ShapeTemplateDO.class, o -> { // 等会查询到
+           o.setShapeType(null);
+           o.setName(null);
+           o.setInitData(null);
+           o.setCreateTime(null);
+       });
+       shapeTemplateMapper.insert(dbShapeTemplate);
+       // 测试 shapeType 不匹配
+       shapeTemplateMapper.insert(cloneIgnoreId(dbShapeTemplate, o -> o.setShapeType(null)));
+       // 测试 name 不匹配
+       shapeTemplateMapper.insert(cloneIgnoreId(dbShapeTemplate, o -> o.setName(null)));
+       // 测试 initData 不匹配
+       shapeTemplateMapper.insert(cloneIgnoreId(dbShapeTemplate, o -> o.setInitData(null)));
+       // 测试 createTime 不匹配
+       shapeTemplateMapper.insert(cloneIgnoreId(dbShapeTemplate, o -> o.setCreateTime(null)));
+       // 准备参数
+       ShapeTemplatePageReqVO reqVO = new ShapeTemplatePageReqVO();
+       reqVO.setShapeType(null);
+       reqVO.setName(null);
+       reqVO.setInitData(null);
+       reqVO.setCreateTime(buildBetweenTime(2023, 2, 1, 2023, 2, 28));
+
+       // 调用
+       PageResult<ShapeTemplateDO> pageResult = shapeTemplateService.getShapeTemplatePage(reqVO);
+       // 断言
+       assertEquals(1, pageResult.getTotal());
+       assertEquals(1, pageResult.getList().size());
+       assertPojoEquals(dbShapeTemplate, pageResult.getList().get(0));
+    }
+
+}

hangtag-server/src/main/resources/application.yaml

@@ -1,3 +1,9 @@
+
+# 本地文件上传配置
+#localupload:
+#  port: 18080
+#  domain: http://127.0.0.1
+
 spring:
   application:
     name: hangtag-server

hangtag-ui/src/api/infra/file/index.ts

@@ -43,3 +43,9 @@ export const createFile = (data: any) => {
 export const updateFile = (data: any) => {
   return request.upload({ url: '/infra/file/upload', data })
 }
+/**
+ * 获取资源的域名
+ */
+export const getDomain = () => {
+  return request.get({ url: '/infra/file/domain'})
+}

hangtag-ui/src/api/oms/shapetemplate/index.ts

@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+// 图形模板管理  VO
+export interface ShapeTemplateVO {
+  id: number // id
+  shapeType: string // 形状类型
+  name: string // 名称
+  initData: string // 初始数据 json
+}
+
+// 图形模板管理  API
+export const ShapeTemplateApi = {
+  // 查询图形模板管理 分页
+  getShapeTemplatePage: async (params: any) => {
+    return await request.get({ url: `/oms/shape-template/page`, params })
+  },
+
+  // 查询图形模板管理 详情
+  getShapeTemplate: async (id: number) => {
+    return await request.get({ url: `/oms/shape-template/get?id=` + id })
+  },
+
+  // 新增图形模板管理 
+  createShapeTemplate: async (data: ShapeTemplateVO) => {
+    return await request.post({ url: `/oms/shape-template/create`, data })
+  },
+
+  // 修改图形模板管理 
+  updateShapeTemplate: async (data: ShapeTemplateVO) => {
+    return await request.put({ url: `/oms/shape-template/update`, data })
+  },
+
+  // 删除图形模板管理 
+  deleteShapeTemplate: async (id: number) => {
+    return await request.delete({ url: `/oms/shape-template/delete?id=` + id })
+  },
+
+  // 导出图形模板管理  Excel
+  exportShapeTemplate: async (params) => {
+    return await request.download({ url: `/oms/shape-template/export-excel`, params })
+  },
+}

hangtag-ui/src/components/DraftDesign/components/ColorPickerTool.vue

@@ -1,5 +1,8 @@
 <template>
   <div style="display: flex;align-items: center">
+    <slot name="prefix">
+
+    </slot>
     <el-color-picker
       v-model="localColor"
       @change="handleChange"

hangtag-ui/src/components/DraftDesign/components/DynamicPropConfig.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-dialog
+    v-model="that.show"
+    title="动态属性配置"
+    width="80vw"
+    append-to-body
+    @close="updateVisible(false)">
+    <div>
+      <el-alert
+        title="动态属性配置说明"
+        type="info"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 10px"
+      >
+        "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
+      </el-alert>
+      <el-form>
+        <el-row >
+          <el-col :span="6" :xs="12">
+            <el-form-item label="组名称">
+              <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6" :xs="12">
+            <el-form-item label="组id">
+              <el-input v-model="that.configInfo.groupId" disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="位置信息">
+          <div style="display: flex;flex-direction: column">
+            <div>
+              <el-button @click="append(1)">追加</el-button>
+              <el-button @click="append(10)">追加10个</el-button>
+              <el-button type="danger" @click="delLast">删除</el-button>
+            </div>
+            <el-scrollbar height="400px">
+              <div style=" box-shadow: 2px 0 0 1px #eee;" v-for="(item, index) in that.configInfo.pointList" :key="index">
+                <el-row>
+                  <el-col :span="2">{{index +1}}</el-col>
+                  <el-col :span="11">
+                    X向右
+                    <el-input-number v-model="that.configInfo.pointList[index].x"/>
+                  </el-col>
+                  <el-col :span="11">
+                    Y向下
+                    <el-input-number v-model="that.configInfo.pointList[index].y"/>
+                  </el-col>
+                  <hr/>
+                </el-row>
+
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="updateVisible(false)">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup name="DynamicPropConfig">
+import {ElAlert} from "element-plus";
+import {reactive, computed, watch} from 'vue'
+import {calculateVectorDifference} from "@/components/DraftDesign/utils/FuncUtil";
+import {useMessage} from "@/hooks/web/useMessage";
+// 动态属性配置
+
+const emit = defineEmits(['update:visible','submit'])
+
+const that = reactive({
+  allGroupList: [],
+  show: false,
+  configInfo:{
+    groupName: '', // 父节点名称
+    cellIds: [], // 节点id
+    groupId: `g_${Math.random().toString(36).substring(2)}`,
+    data: {}, //节点是数据
+    shape: '', // 是否是图片
+    pointList: [], //{ x:10,y:100}
+  }
+})
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+const delLast = () => {
+  if(that.configInfo.pointList.length === 1){
+    useMessage().warning(`至少需要1个位置信息`)
+    return;
+  }
+  that.configInfo.pointList.pop()
+  useMessage().success(`成功删除1个位置信息`)
+}
+const appendNode = () => {
+  const arr  = that.configInfo.pointList
+  const tmp = calculateVectorDifference(arr[arr.length - 1],arr[arr.length - 2])
+
+  const dx = arr[arr.length - 1].x + tmp.x
+  const dy = arr[arr.length - 1].y + tmp.y
+  that.configInfo.pointList.push({
+    x: dx,
+    y: dy,
+    angle: arr[arr.length - 1].angle,
+    size: {...arr[arr.length - 1].size}
+  })
+}
+const append = (count = 1)=>{
+  let i = 0;
+   while (i < count){
+     appendNode()
+     i++;
+   }
+  useMessage().success(`成功添加${count}个位置信息`)
+}
+const init = (allGroupList, data) => {
+  that.allGroupList = allGroupList;
+  that.configInfo = {
+    groupName: '', // 父节点名称
+    groupId: `g_${Math.random().toString(36).substring(2)}`,
+    cellIds: [], // 节点id
+    data: {}, //节点是数据
+    shape: '', // 节点类型
+    pointList: [], //位置点列表 { x:10,y:100}
+    ...data
+  };
+}
+const updateVisible = (value: boolean) => {
+  that.show = value;
+}
+const getConfig = () => {
+  return that.configInfo;
+}
+const submit = () => {
+  emit('submit', getConfig())
+}
+onMounted(() => {
+})
+defineExpose({
+  init,
+  updateVisible,
+  getConfig
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

hangtag-ui/src/components/DraftDesign/components/EmptyPrompt.vue

@@ -1,52 +0,0 @@
-<template>
-   <div class="context-box">
-       <div v-if="description" class="context-text">{{description}}</div>
-       <div v-else class="context-text">{{getRandomTip()}}</div>
-   </div>
-</template>
-
-<script>
-// 空元素
-const emptyElementTips =[
-    "🌟 这里什么都没有，你可以自己添加内容哦！",
-    "🎨 这里是一片空白的领域，等待你的创造！",
-    "😊 嗨，这里看起来有点空空如也，你来给它添加一些内容吧！",
-    "🔍 这是一个秘密的空间，等待你的探索和填充。",
-    "🌱 哇哦，这里是空荡荡的，快来为它增添生机吧！",
-    "🌈 嗨，这里是未知的领域，你可以让它变得充满活力！",
-    "💭 这里什么都没有，除了你的想象力！",
-    "🚀 欢迎来到这片空地，你是第一个来过的人！",
-    "🖼️ 嘘，这里是一片空白的画布，等待着你的艺术作品。",
-    "😴 哦，看起来这里有点无聊，快来填充它们，让它变得有趣起来吧！"
-];
-
-export default {
-    name:'EmptyPrompt',
-    props: {
-        description:{
-            type: String,
-            default: '',
-        }
-    },
-    methods:{
-        getRandomTip() {
-            const randomIndex = Math.floor(Math.random() * emptyElementTips.length);
-            return emptyElementTips[randomIndex];
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.context-box{
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
-.context-text{
-    font-size: 14px;
-    color: #5e6d82;
-    line-height: 1.5em;
-}
-
-</style>

hangtag-ui/src/components/DraftDesign/components/FlowContentMenu.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-card
+    v-reSize="changSize"
+    :id="that.elId"
+    class="flow-contextmenu"
+    ref="flowMenu"
+    v-show="visible"
+    :style="menuStyle"
+    body-style="padding: 0px 0 12px 12px"
+  >
+    <el-cascader-panel
+      :props="{ expandTrigger: 'hover' }"
+      :options="options"
+      :border="false"
+      v-model="that.select"
+      @change="handleMenuClick"
+    >
+      <template #default="{data }">
+        <div style="width: 100%; display: flex;align-items: center">
+          <i v-if="data.icon" :class="data.icon" style="margin-right: 10px;font-size: 18px;"></i>
+          <span class="flow-contextmenu__node">{{ data.label }}</span>
+        </div>
+      </template>
+    </el-cascader-panel>
+  </el-card>
+</template>
+
+<script setup>
+import {ElCascaderPanel} from "element-plus";
+import {reactive, computed, watch} from 'vue'
+
+const props = defineProps({
+  // 隐藏/显示
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  // 位置
+  position: {
+    type: Object,
+    default: () => ({})
+  },
+  options: {
+    type: Array,
+    default: () => ([])
+  }
+})
+const emit = defineEmits(['onMenuClick', 'update:visible'])
+const menuStyle = computed(() => ({
+  left: posInfo.value.posX + 'px',
+  top: posInfo.value.posY + 'px'
+}))
+const posInfo = computed(() => {
+  let posX = props.position.left
+  let posY = props.position.top
+  if (props.position.left > (that.vw - that.mainSize.width)) {
+    posX -= that.mainSize.width;
+  }
+  if (props.position.top > (that.vh - that.mainSize.height)) {
+    posY = that.vh - that.mainSize.height;
+  }
+  return {posX, posY}
+})
+watch(() => props.visible, (val) => {
+  that.select = []
+})
+const changSize = (size) => {
+  that.mainSize = size;
+}
+const that = reactive({
+  select: [],
+  vw: document.documentElement.clientWidth,
+  vh: document.documentElement.clientHeight,
+  mainSize: {
+    width: 0,
+    height: 0,
+  },
+  elId: Math.random().toString(36).substring(2)
+})
+const handleMenuClick = (action) => {
+  for (let i = 0; i < props.options.length; i++) {
+    if (props.options[i].value === action[0]) {
+      emit('onMenuClick', props.options[i])
+      emit('update:visible', false)
+    }
+  }
+}
+const mousedownHandler = function (e) {
+  const element = document.getElementById(that.elId);
+  if (element && element.contains(e.target)) {
+    console.log("Clicked inside the element or its child");
+  } else {
+    emit('update:visible', false)
+  }
+}
+const resizeHandler = function () {
+  that.vw = document.documentElement.clientWidth;
+  that.vh = document.documentElement.clientHeight;
+}
+onMounted(() => {
+  window.addEventListener('mousedown', mousedownHandler);
+  window.addEventListener('resize', resizeHandler);
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', mousedownHandler);
+  window.removeEventListener('resize', resizeHandler);
+})
+
+// 右键菜单
+
+</script>
+
+<style lang="scss" scoped>
+.flow-contextmenu {
+  min-width: 150px;
+  position: fixed;
+  user-select: none;
+  z-index: 999;
+
+  ::v-deep .el-cascader-menu__wrap.el-scrollbar__wrap {
+    height: 100%;
+    max-height: 210px;
+  }
+
+  ::v-deep .el-cascader-menu {
+    min-width: auto;
+
+    .el-cascader-node {
+      z-index: 10;
+      margin-right: 10px;
+      padding-right: 12px;
+      padding-left: 14px;
+    }
+  }
+
+  .flow-contextmenu__node {
+    display: inline-block;
+    min-width: 60px;
+  }
+}
+</style>

hangtag-ui/src/components/DraftDesign/components/FunctionPrompt.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-alert title="" type="info" show-icon>
+    <template #default>
+         <span v-if="showInfo" v-html="showInfo.info" style="cursor: pointer" @click="openDetails(showInfo)">
+         </span>
+    </template>
+  </el-alert>
+</template>
+
+<script setup name="FunctionPrompt">
+import {ElAlert} from "element-plus";
+import { reactive, computed, watch } from 'vue'
+// 使用功能提示菜单
+
+const emit = defineEmits(['clickDetails'])
+const that =reactive({
+  tipsList: [],
+  showIndex:0
+})
+const showInfo = computed(()=>{
+  return that.tipsList[that.showIndex]
+})
+const nextIndex=(nextTime=4500)=>{
+  that.showIndex = Math.floor(Math.random() * that.tipsList.length);
+  if(that.showIndex >= that.tipsList.length){
+    that.showIndex = 0;
+  }
+  setTimeout(()=>{
+    nextIndex();
+  },nextTime)
+}
+const openDetails = (info)=>{
+ // todo 查看更多技巧和问题
+  console.log("openDetails",info)
+  emit("clickDetails",info)
+}
+onMounted(()=>{
+  that.tipsList = [];
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '选择左侧图形按住鼠标左键拖入画布中',
+  })
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '选择中画布中图形后在顶部会出现工具栏',
+  })
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '按住Alt 进行框选图形',
+  })
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '按住Ctrl键 鼠标调整滚轮进行缩放比例调整',
+  })
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '按住Ctrl键 鼠标左键进行进行多选',
+  })
+  that.tipsList.push({
+    id: Math.random().toString(36).substring(2),
+    info: '点击左侧 <i class="icon-lk_shape_set" style="font-size: 1.5rem"></i> 展开更多图形',
+  })
+  setTimeout(()=>{
+    nextIndex();
+  },3500)
+
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

hangtag-ui/src/components/DraftDesign/components/ImageLibraryManage.vue

@@ -0,0 +1,373 @@
+<template>
+
+  <div class="upload-box">
+    <el-upload
+      v-model:file-list="fileList"
+      :accept="fileType.join(',')"
+      :action="uploadUrl"
+      :before-upload="beforeUpload"
+      :class="['upload', drag ? 'no-border' : '']"
+      :disabled="disabled"
+      :drag="drag"
+      :http-request="httpRequest"
+      :limit="limit"
+      :multiple="true"
+      :on-error="uploadError"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      list-type="picture-card"
+    >
+      <div class="upload-empty">
+        <slot name="empty">
+          <Icon icon="ep:plus" />
+          <span>{{tipsText}}</span>
+        </slot>
+
+      </div>
+      <template #file="{ file }">
+        <img :src="file.url" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="handlePictureCardPreview(file)">
+            <Icon icon="ep:zoom-in" />
+            <span>查看</span>
+          </div>
+          <div v-if="!disabled" class="handle-icon" @click="handleRemove(file)">
+            <Icon icon="ep:delete" />
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-button @click="uploadInfo">上传并关闭</el-button>
+    <el-image-viewer
+      v-if="imgViewVisible"
+      :url-list="[viewImageUrl]"
+      @close="imgViewVisible = false"
+    />
+  </div>
+
+</template>
+
+<script lang="ts" setup name="ImageLibraryManage">
+import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
+
+import { ElNotification } from 'element-plus'
+
+import { propTypes } from '@/utils/propTypes'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import {ShapeTemplateApi} from "@/api/oms/shapetemplate";
+import {ShapeType, VueCellShapeType} from "@/components/DraftDesign/config";
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+type FileTypes =
+| 'image/apng'
+| 'image/bmp'
+| 'image/gif'
+| 'image/jpeg'
+| 'image/pjpeg'
+| 'image/png'
+| 'image/svg+xml'
+| 'image/tiff'
+| 'image/webp'
+| 'image/x-icon'
+
+const props = defineProps({
+  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  limit: propTypes.number.def(100), // 最大图片上传数 ==> 非必传（默认为 100张）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
+  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
+  borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
+  tipsText: propTypes.string.def('点击选择图片上传'),
+})
+
+const { uploadUrl, httpRequest } = useUpload()
+
+const fileList = ref<UploadUserFile[]>([])
+const uploadNumber = ref<number>(0)
+const uploadList = ref<UploadUserFile[]>([])
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 上传的文件
+ * */
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+  ElNotification({
+    title: '温馨提示',
+    message: '上传图片不符合所需的格式！',
+    type: 'warning'
+  })
+  if (!imgSize)
+    ElNotification({
+      title: '温馨提示',
+      message: `上传图片大小不能超过 ${props.fileSize}M！`,
+      type: 'warning'
+    })
+  uploadNumber.value++
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+const emit = defineEmits( ["close",'update:modelValue'])
+const formData = ref({
+  id: undefined,
+  shapeType: undefined,
+  name: undefined,
+  initData: undefined,
+})
+
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  // 删除自身
+  const index = fileList.value.findIndex((item) => item.response?.data === res.data)
+  fileList.value.splice(index, 1)
+  uploadList.value.push({
+    filename: res.filename || res.data ,
+    name : res.data,
+    url: res.data })
+  if (uploadList.value.length == uploadNumber.value) {
+    fileList.value.push(...uploadList.value)
+    uploadList.value = []
+    uploadNumber.value = 0
+    emitUpdateModelValue()
+  }
+}
+
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  (val: string | string[]) => {
+    if (!val) {
+      fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      return
+    }
+    console.log("val",val)
+    fileList.value = [] // 保障数据为空
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
+  )
+  },
+  { immediate: true, deep: true }
+)
+const uploadInfo = async ()=>{
+  //绑定图库
+  await addNew();
+  fileList.value = [] //
+  emit('close', true)
+}
+const addNew = async () => {
+  for (let i = 0; i < fileList.value.length; i++) {
+    console.log("fileList.value",fileList.value[i])
+    let info  ={
+      key: ShapeType.vueShapeImage,
+      shape: ShapeType.vueShapeImage,
+      data: {
+        label: '',
+        width: 80,
+        height: 80,
+        shape: VueCellShapeType.Image,
+        style: {
+          shape:{
+            href: fileList.value[i].url,
+          },
+        }
+      },
+      icon: fileList.value[i].url,
+      label: fileList.value[i].filename || '未命名图片',
+      filterKeyword: function (){ return this.label }
+    };
+    const data = {
+      id: undefined,
+      shapeType: ShapeType.vueShapeImage,
+      name: fileList.value[i].filename,
+      initData: JSON.stringify(info),
+    }
+    await ShapeTemplateApi.createShapeTemplate(data)
+  }
+
+  message.success(t('common.createSuccess'))
+}
+// 发送图片链接列表更新
+const emitUpdateModelValue = () => {
+  let result: string[] = fileList.value.map((file) => file.url!)
+  emit('update:modelValue', result)
+
+}
+// 删除图片
+const handleRemove = (uploadFile: UploadFile) => {
+  fileList.value = fileList.value.filter(
+    (item) => item.url !== uploadFile.url || item.name !== uploadFile.name
+  )
+  emit('update:modelValue',fileList.value.map((file) => file.url!))
+  // 删除
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: '图片上传失败，请您重新上传！',
+    type: 'error'
+  })
+}
+
+// 文件数超出提示
+const handleExceed = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+    type: 'warning'
+  })
+}
+
+// 图片预览
+const viewImageUrl = ref('')
+const imgViewVisible = ref(false)
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+  viewImageUrl.value = uploadFile.url!
+    imgViewVisible.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+
+:deep(.disabled) {
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+
+.upload-box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderradius);
+
+      &:hover {
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+
+    .el-upload-dragger.is-dragover {
+      background-color: var(--el-color-primary-light-9);
+      border: 2px dashed var(--el-color-primary) !important;
+    }
+
+    .el-upload-list__item,
+    .el-upload--picture-card {
+      width: v-bind(width);
+      height: v-bind(height);
+      background-color: transparent;
+      border-radius: v-bind(borderradius);
+    }
+
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      box-sizing: border-box;
+      transition: var(--el-transition-duration-fast);
+      align-items: center;
+      justify-content: center;
+
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
+
+        .el-icon {
+          margin-bottom: 15%;
+          font-size: 140%;
+        }
+
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+
+    .upload-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      line-height: 30px;
+      color: var(--el-color-info);
+
+      .el-icon {
+        font-size: 28px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: center;
+  }
+}
+</style>
+

hangtag-ui/src/components/DraftDesign/components/layout/LeftPanel.vue

@@ -1,21 +1,80 @@
 <template>
-  <el-aside class="leftPanel" :class="{ 'close': !layout.leftPanelClose}">
-    <div style="height: 100%;">
-      <div class="leftPanel-content" :class="{
-              'close': !layout.leftPanelClose
-            }">
-        <div style="margin: 8px;padding-top: 12px">
-          组件列表
+
+  <el-dialog
+    v-model="that.showImageLib"
+    append-to-body
+    :destroy-on-close="false"
+    :close-on-click-modal="false">
+    <div>
+      <ImageLibraryManage @close="uploadSuccess"/>
+    </div>
+  </el-dialog>
+  <el-aside class="mainPanel" :class="{ 'close': !layout.mainPanelClose}">
+    <div style="height: 100%; box-shadow: inset -2px 0 0 0 #ccc7c7;">
+      <div class="mainPanel-content" :class="{ 'close': !layout.mainPanelClose }">
+        <div
+          v-loading="that.imgLoading"
+          style="margin: 8px;padding-top: 12px"
+          v-if="`shape_image` === layout.leftActive">
+          <el-input v-model="layout.searchKeyword" placeholder="输入关键字搜索"/>
+          <el-button @click="that.showImageLib = true">图片上传</el-button>
+          <div style="display: flex;flex-wrap: wrap">
+            <div
+              :title="item.label" class="image-item"
+              v-for="item in imageList"
+              :key="item.key"
+              @click="clickMenu(item)"
+              @mousedown.stop="addNode($event,item)"
+            >
+              <div class="image-content-item">
+                <img :src="item.icon" width="60px" height="60px"/>
+                <div style="width: 84px;">
+                  <span
+                    class="line-clamp-1"
+                    style="font-size: 0.8rem"
+                    v-html="toHighlightText(item.label,layout.searchKeyword)"></span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+
+        <div style="margin: 8px;padding-top: 12px" v-else>
+          <el-input v-model="layout.searchKeyword" placeholder="输入关键字搜索"/>
+          <div style="display: flex;flex-wrap: wrap">
+            <div
+              :title="item.label"
+              style="padding: 14px 2px; width: 80px; overflow: hidden"
+              v-for="item in showPanelList"
+              :key="item.key"
+              @click="clickMenu(item)"
+              @mousedown.stop="handlerAddNode($event,item)"
+            >
+              <div style="display: flex;  flex-direction: column; align-items: center;">
+                <i :class="item.icon" style="font-size: 2rem"></i>
+                <div>
+                  <span
+                    style="font-size: 0.8rem"
+                    v-html="toHighlightText(item.label,layout.searchKeyword)"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
       </div>
       <div style="position: absolute">
-        <div class="leftPanel-menu"
-             v-for="item in layout.leftBtnList"
-             :key="item.key"
-             @click="clickMenu(item)"
-             @mousedown.stop="handlerAddNode($event,item)"
+        <div
+          class="mainPanel-menu"
+          v-for="item in layout.leftBtnList"
+          :key="item.key"
+          @click="clickMenu(item)"
+          @mousedown.stop="handlerAddNode($event,item)"
         >
-          <div class="leftPanel-menu__button" :class="{
+          <div
+            class="mainPanel-menu__button"
+            :class="{
                   'active' : layout.leftActive === item.key
                 }">
             <i :class="item.icon" style="font-size: 2rem"></i>
@@ -25,9 +84,10 @@
           </div>
         </div>
       </div>
-      <div @click="layout.leftPanelClose = !layout.leftPanelClose"
-           class="leftPanel-mainContent-toggle" :class="{
-              'close': !layout.leftPanelClose
+      <div
+        @click="changeToggle"
+        class="mainPanel-mainContent-toggle" :class="{
+              'close': !layout.mainPanelClose
             }"></div>
     </div>
   </el-aside>
@@ -49,17 +109,28 @@ import {
 
 import {provide, computed, watch, onMounted} from 'vue'
 import '../../icons/style.css'
-import { ShapeType} from "@/components/DraftDesign/config";
+import {baseShape, ShapeType, VueCellShapeType} from "@/components/DraftDesign/config";
+import ImageLibraryManage from "../ImageLibraryManage.vue"
+import {toHighlightText} from "@/components/DraftDesign/utils/FuncUtil";
+import {ShapeTemplateApi} from "@/api/oms/shapetemplate";
+import * as FileApi from "@/api/infra/file";
+import {replaceDomain} from "@/utils";
 
-const emit = defineEmits(['onAddNode', 'changeZoom', 'onChangeCell'])
+const emit = defineEmits(['onAddNode'])
 
-const props = defineProps({})
 const clickMenu = (item) => {
   layout.leftActive = item.key
-  console.log(item)
+  if (layout.leftActive === 'shape_image') {
+    queryImage()
+  }
 }
 
-
+const changeToggle = () => {
+  layout.mainPanelClose = !layout.mainPanelClose
+  if (layout.mainPanelClose && layout.leftActive === '') {
+    layout.leftActive = 'shape_set'
+  }
+}
 const hasKey = (obj, path) => {
   if (!obj || !path) return null;
 
@@ -74,18 +145,112 @@ const hasKey = (obj, path) => {
       result = result[k];
     }
   }
+
   return false;
 }
 
 
 const that = reactive({
   effect: 'dark',
+  showImageLib: false,
+  queryParams: {
+    pageNo: 1,
+    pageSize: 80,
+    shapeType: ShapeType.vueShapeImage,
+    name: undefined,
+  },
+  imgLoading: false,
+  imageKeySet: [],
+  imageUrlList: [
+    // {
+    //   key: ShapeType.vueShapeImage,
+    //   shape: ShapeType.vueShapeImage,
+    //   data: {
+    //     label: '',
+    //     width: 80,
+    //     height: 80,
+    //     shape: VueCellShapeType.Image,
+    //     style: {
+    //       shape: {
+    //         href: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+    //       },
+    //     }
+    //   },
+    //   // icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+    //   icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+    //   label: 'Circle',
+    //   filterKeyword: function () {
+    //     return this.label
+    //   }
+    // },
+  ]
+})
+const showPanelList = computed(() => {
+  return allList.value.filter(item => {
+    return item.filterKeyword().toLowerCase().indexOf(layout.searchKeyword.toLowerCase()) !== -1
+  })
 })
 
+const imageList = computed(() => {
 
+  return that.imageUrlList.filter(item => {
+    return item.filterKeyword().toLowerCase().indexOf(layout.searchKeyword.toLowerCase()) !== -1
+  })
+})
+const uploadSuccess = () => {
+  that.showImageLib = false;
+  queryImage()
+}
+
+const queryImage = async () => {
+  that.imgLoading = true
+  const data = await ShapeTemplateApi.getShapeTemplatePage(that.queryParams)
+  const domain = await FileApi.getDomain();
+
+  for (let i = 0; i < data.list.length; i++) {
+    let config = JSON.parse(data.list[i].initData)
+    config.filterKeyword = function () {
+      return this.label
+    }
+    config.key = `${config.key}_${data.list[i].id}`
+    if (that.imageKeySet.includes(config.key)) {
+      continue;
+    }
+    that.imageKeySet.push(config.key)
+    // 替换域名
+    config.icon = replaceDomain(domain, config.icon)
+    config.data.style.shape.href = replaceDomain(domain, config.data.style.shape.href)
+    config.data.style.shape.label= config.label
+    that.imageUrlList.push(config)
+  }
+  that.imgLoading = false
+  // that.imageUrlList = data.list
+}
+const allList = computed(() => {
+
+  let arr = [];
+  let typeSet = shapeList.value.map(item => {return  item.shape});
+  for (let i = 0; i < layout.leftBtnList.length; i++) {
+    if (['shape_image', 'shape_set'].includes(layout.leftBtnList[i].key)) {
+      continue;
+    }
+    if(typeSet.includes(layout.leftBtnList[i].shape)){
+      continue;
+    }
+    typeSet.push(layout.leftBtnList[i].shape)
+    arr.push(layout.leftBtnList[i])
+  }
+  const res = [...arr, ...shapeList.value]
+  console.log("res", res)
+  return res;
+})
+const shapeList = computed(() => {
+  return [...baseShape]
+})
 const layout = reactive({
-  leftPanelClose: false,
+  mainPanelClose: false,
   leftActive: '',
+  searchKeyword: '',
   leftBtnList: [
     {
       key: 'text',
@@ -97,10 +262,13 @@ const layout = reactive({
         style: {
           fontSize: 12,
           color: '#000000',
-        }
+        },
       },
       icon: 'icon-lk_text',
-      label: 'Text'
+      label: 'Text',
+      filterKeyword: function () {
+        return this.label
+      }
     },
     {
       key: 'line',
@@ -115,70 +283,139 @@ const layout = reactive({
         }
       },
       icon: 'icon-lk_line',
-      label: 'Line'
-    }
+      label: 'Line',
+      filterKeyword: function () {
+        return this.label
+      }
+    },
+    {
+      key: 'shape_rect',
+      shape: ShapeType.vueShapeRect,
+      data: {
+        label: '',
+        width: 80,
+        height: 80,
+        shape: VueCellShapeType.Rect,
+        style: {
+          fontSize: 12,
+          shape: {
+            fillColor: '#0644c1',
+          },
+        }
+      },
+      icon: 'icon-lk_rect',
+      label: 'Rectangle',
+      filterKeyword: function () {
+        return this.label
+      }
+    },
+    {
+      key: 'shape_set',
+      shape: ShapeType.vueShapeRect,
+      data: {
+        label: '',
+        width: 80,
+        height: 80,
+        shape: VueCellShapeType.Rect,
+        style: {
+          fontSize: 12,
+          shape: {
+            fillColor: '#0644c1',
+          },
+        },
+
+      },
+      icon: 'icon-lk_shape_set',
+      label: 'Shapes',
+      filterKeyword: function () {
+        return this.label
+      }
+    },
+    {
+      key: 'shape_image',
+      shape: ShapeType.vueShapeRect,
+      data: {
+        label: '',
+        width: 80,
+        height: 80,
+        shape: VueCellShapeType.Rect,
+        style: {
+          fontSize: 12,
+          shape: {
+            fillColor: '#0644c1',
+          },
+        },
+
+      },
+      icon: 'icon-lk_image',
+      label: 'images',
+      filterKeyword: function () {
+        return this.label
+      }
+    },
   ]
 })
 onMounted(() => {
-
+  // that.imageKeySet = []
 })
 
 
 defineExpose({})
-const handlerAddNode = (e, item) => {
+const addNode = (e, item) => {
+
   emit("onAddNode", e, item)
 }
+const handlerAddNode = (e, item) => {
+  if (['shape_image', 'shape_set'].includes(item.key)) {
+    layout.leftActive = item.key;
+    layout.mainPanelClose = true;
+    return
+  }
+  addNode(e, item)
+}
 </script>
 
 <style scoped lang="scss">
 @import "./fontFamilyIcon.scss";
 
+
 $height: 600px;
-$leftPanelWidth: 368px;
-$leftPanelToggleLeft: 367px;
-$leftPanelLeft: 67px;
+$mainPanelWidth: 368px;
+$mainPanelToggleLeft: 367px;
+$mainPanelLeft: 67px;
 $panelZIndex: 10;
 
-.top-btn-active {
-  background-color: rgba(255, 199, 121, 0.88) !important;
-  border: 1px solid !important;
-}
 
-.common-layout {
-  position: relative;
-  z-index: $panelZIndex;
-}
-
-.leftPanel {
+.mainPanel {
   background-color: #ffffff;
-  width: $leftPanelWidth;
+  width: $mainPanelWidth;
   height: 600px;
   transition: width .3s ease;
 }
 
-.leftPanel-content {
+.mainPanel-content {
   border-left: 1px solid #eee;
   position: absolute;
-  left: $leftPanelLeft;
+  left: $mainPanelLeft;
   width: 300px;
   height: 100%;
 }
 
-.leftPanel-content.close {
+.mainPanel-content.close {
   left: -300px;
   width: 0;
 }
 
-.leftPanel.close {
+.mainPanel.close {
   width: 68px;
 }
 
-.leftPanel-mainContent-toggle {
+.mainPanel-mainContent-toggle {
   width: 10px;
   height: 88px;
   position: absolute;
   cursor: pointer;
-  left: $leftPanelToggleLeft;
+  left: $mainPanelToggleLeft;
   top: 50%;
   transform: translateY(-50%);
   transition: width 0.3s ease, left 0.3s ease, right 0.1s linear;
@@ -186,15 +423,15 @@ $panelZIndex: 10;
   background: url("/x6/tools/toggle.svg");
 }
 
-.leftPanel-mainContent-toggle.close {
-  left: $leftPanelLeft;
+.mainPanel-mainContent-toggle.close {
+  left: $mainPanelLeft;
 }
 
-.leftPanel-mainContent-toggle.close:after {
+.mainPanel-mainContent-toggle.close:after {
   transform: translate(-50%, -50%) rotate(180deg); /* 或者使用 scaleX(-1) */
 }
 
-.leftPanel-mainContent-toggle:after {
+.mainPanel-mainContent-toggle:after {
   background: url("/x6/tools/gt.svg");
   background-size: cover;
   content: "";
@@ -208,12 +445,12 @@ $panelZIndex: 10;
   width: 10px;
 }
 
-.leftPanel-menu {
+.mainPanel-menu {
   width: 68px;
   cursor: pointer;
 }
 
-.leftPanel-menu__button {
+.mainPanel-menu__button {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -224,51 +461,31 @@ $panelZIndex: 10;
   padding: 8px 0;
 }
 
-.leftPanel-menu__button.active {
+.mainPanel-menu__button.active {
   background-color: rgb(241, 243, 247);
 }
 
-.font-item {
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: 18px;
-  transform: translateY(10px);
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.top-tool-bar {
-  height: 50px;
-  width: 100%;
-  padding: 0;
+.image-item {
+  padding: 14px 2px;
+  width: 80px;
+  overflow: hidden;
+  border: 1px solid rgba(182, 181, 181, 0.7);
+  border-radius: 10px;
+  margin: 8px 2px;
 }
 
-.bottom-tool-bar {
-
-  height: 50px;
-  width: 100%;
+.image-content-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 
-.center-panel {
-  padding: 0;
-  width: 100%;
-  background-color: #6fa9ba;
-  height: 600px;
-}
-
-
-:deep(.x6-widget-transform-resize) {
-  width: 10px;
-  height: 10px;
-  border-radius: 0;
-}
-
-:deep(.x6-widget-transform-rotate) {
-  width: 16px;
-  height: 16px;
-  background: transparent;
-  border: 2px solid #fbab00;
-  border-radius: 50%;
-  border-top-color: transparent;
-  transform: rotate(133deg);
-
-}
 </style>

hangtag-ui/src/components/DraftDesign/components/layout/RightPanel.vue

@@ -0,0 +1,212 @@
+<template>
+
+  <el-aside class="mainPanel" :class="{ 'close': !layout.mainPanelOpen}">
+    <el-tabs
+      v-model="layout.activeName"
+      type="card"
+      class="demo-tabs"
+    >
+      <el-tab-pane label="All" name="first">
+        <div style="height: 100%; box-shadow: inset 0 0 2px 0 #635f5f;padding: 8px 10px;">
+        <div>
+          <el-input v-model="layout.searchKeyword" placeholder="搜索" clearable />
+        </div>
+        <div class="cell-item" v-for="item in allList" :key="item.id" @click="clickItem(item)">
+          <div style="display: flex">
+            <i style="padding-right: 8px;font-size: 28px" v-if="item.icon" :class="item.icon"></i>
+            <img style="width: 36px;height: 36px" v-if="item.href" :src="item.href" alt="" />
+            <span>{{item.label}}</span>
+            <span v-if="item.propGroupName" style="color: #9c9b9b;font-size: 0.6rem">({{item.propGroupName}})</span>
+          </div>
+        </div>
+      </div>
+      </el-tab-pane>
+      <el-tab-pane label="Group" name="second">
+        <div style="height: 100%; box-shadow: inset 0 0 2px 0 #635f5f;padding: 8px 10px;">
+          <div>
+            <el-input v-model="layout.searchKeyword" placeholder="搜索" clearable />
+          </div>
+          <div class="cell-item" v-for="item in allGroupList"  :key="item.id" @click="clickItem(item)">
+            <div style="display: flex">
+              <span v-if="item.propGroupName">({{item.propGroupName}})</span>
+              <span style="color: #9c9b9b;font-size: 0.6rem">({{item.propGroupId}})</span>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+
+    </el-tabs>
+
+  </el-aside>
+
+</template>
+<script setup lang="ts" name="DraftDesignRightPanel">
+//图稿设计器 DraftDesignRightPanel 右侧面板
+import {
+  ElTabs,
+  ElTabPane,
+  ElCollapseItem,
+  ElButton,
+  ElSelect,
+  ElPopover,
+  ElInput,
+  ElForm,
+  ElSelectV2
+} from "element-plus";
+
+import {provide, computed, watch, onMounted} from 'vue'
+import '../../icons/style.css'
+import {baseShape, ShapeType, VueCellShapeType} from "@/components/DraftDesign/config";
+import ImageLibraryManage from "../ImageLibraryManage.vue"
+import {toHighlightText} from "@/components/DraftDesign/utils/FuncUtil";
+import {ShapeTemplateApi} from "@/api/oms/shapetemplate";
+import * as FileApi from "@/api/infra/file";
+import {replaceDomain} from "@/utils";
+
+const emit = defineEmits(['clickItem'])
+
+const clickItem = (item)=>{
+  emit('clickItem', item)
+}
+const hasKey = (obj, path) => {
+  if (!obj || !path) return null;
+
+  const keys = path.split('.');
+  let result = obj;
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (result.hasOwnProperty(k) && i === keys.length - 1) {
+      return true;
+    }
+    if (result[k] !== undefined) {
+      result = result[k];
+    }
+  }
+  return false;
+}
+
+
+const that = reactive({
+  effect: 'dark',
+})
+const allGroupList = computed(()=>{
+  let arr = []
+  let tmp = []
+  for (let i = 0; i < allList.value.length; i++) {
+    if(allList.value[i].propGroupId){
+      if(tmp.includes(allList.value[i].propGroupId)){
+        continue;
+      }
+      tmp.push(allList.value[i].propGroupId)
+      arr.push(allList.value[i])
+    }
+  }
+  return arr;
+})
+const allList = computed(() => {
+  const res = []
+  layout.itemList.forEach(item => {
+    if(item.shape === ShapeType.vueShapeImage){
+      hasKey(item.data, "style.shape.label")
+      if (hasKey(item.data, "style.shape.label") && item.data.style.shape.label.indexOf(layout.searchKeyword) > -1) {
+        res.push({
+          id: item.id,
+          label: item.data.style.shape.label,
+          propGroupName: item.data.propGroupName,
+          propGroupId: item.data.propGroupId,
+          href: item.data.style.shape.href,
+        })
+      }
+    }else if(item.shape === ShapeType.vueTextCell){
+      if (item.data && item.data.label && item.data.label.indexOf(layout.searchKeyword) > -1) {
+        res.push({
+          id: item.id,
+          label: item.data.label,
+          propGroupName: item.data.propGroupName,
+          propGroupId: item.data.propGroupId,
+          icon: 'icon-lk_text',
+        })
+      }
+    }else {
+      console.log("item.shape",item.shape)
+      for (let i = 0; i < baseShape.length; i++) {
+        console.log("baseShape[i].shape === item.shape",baseShape[i].shape, item.shape )
+        if( baseShape[i].shape === item.shape){
+          res.push({
+            id: item.id,
+            icon: baseShape[i].icon,
+            propGroupName: item.data.propGroupName,
+            propGroupId: item.data.propGroupId,
+            label: baseShape[i].label,
+          })
+          break;
+          // if (baseShape[i].filterKeyword().indexOf(layout.searchKeyword) > -1) {
+          //
+          // }
+        }
+      }
+
+    }
+
+  })
+  return res;
+})
+
+onMounted(() => {
+  // that.imageKeySet = []
+})
+
+const layout = reactive({
+  mainPanelOpen: false,
+  searchKeyword: '',
+  activeName: 'first',
+  itemList:[],
+})
+const updateList = (list) => {
+  layout.itemList = []
+  layout.itemList = list
+}
+const toggle = (val) => {
+  layout.mainPanelOpen = val;
+}
+defineExpose({
+  toggle,
+  updateList
+})
+
+</script>
+
+<style scoped lang="scss">
+@import "./fontFamilyIcon.scss";
+
+
+$height: 600px;
+$mainPanelWidth: 260px;
+.mainPanel {
+  background-color: #ffffff;
+  width: $mainPanelWidth;
+  height: $height;
+  transition: width .3s ease;
+  position: absolute;
+  right: 0;
+  border-left: 1px solid #ccc7c7;
+}
+.mainPanel.close {
+  width: 0;
+}
+.cell-item{
+  cursor: pointer;
+  padding: 10px 0 5px 0;
+  border-bottom: 1px solid #d9d5d5;
+}
+.cell-item:hover{
+  background-color: rgba(214, 214, 214, 0.46);
+}
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/layout/svg.html

@@ -0,0 +1,3 @@
+<svg>
+    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>

hangtag-ui/src/components/DraftDesign/components/node/LineCellNode.vue

@@ -1,163 +1,172 @@
+<!-- eslint-disable vue/this-in-template -->
 <template>
-  <div :id="cellInfo.id" class="node-content" v-reSize="changSize">
-    <div  style="position: absolute;"
-          :style="cellInfo.style">
+  <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 {defineComponent} from 'vue'
+import {
+  filterUnsafeHtml,
+  getSafeValue,
+  mergeDeepObject,
+  nextId
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesign, 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
-
-      console.log("自定义节点",node.data)
-     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)
+export default defineComponent({
+  name: 'LineCellNode',
+  inject: ['getNode'],
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        style: {}
       },
-      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:{}
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
             }
           }
         }
-       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.changeFontSize();
-      }
-
+      },
+      fontSize: 12,
+      targetElement: null
     }
-  })
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    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();
+      this.changeFontSize();
+    }
+
+  }
+})
 </script>
 
 <style scoped lang="scss">
-.node-content{
+.node-content {
   width: 100%;
   height: 100%;
   position: relative;

hangtag-ui/src/components/DraftDesign/components/node/ShapeCellNode.vue

@@ -0,0 +1,412 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(1); "
+      :style="svgStyle"
+    >
+      <rect
+        v-if="cellInfo.shape === VueCellShapeType.Rect"
+        width="100%"
+        height="100%"
+        :x="cellInfo.style.shape.x"
+        :y="cellInfo.style.shape.y"
+        :rx="cellInfo.style.shape.rx"
+        :ry="cellInfo.style.shape.ry"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :stroke-dasharray="cellInfo.style.shape.strokeDasharray"
+        :stroke-dashoffset="cellInfo.style.shape.strokeDashoffset"
+        :stroke-linecap="cellInfo.style.shape.strokeLinecap"
+        :stroke-linejoin="cellInfo.style.shape.strokeLinejoin"
+        :opacity="cellInfo.style.shape.opacity"
+        :transform="cellInfo.style.shape.transform"
+        :clip-path="cellInfo.style.shape.clipPath"
+        :filter="cellInfo.style.shape.filter"
+      />
+      <circle
+        v-if="cellInfo.shape === VueCellShapeType.Circle"
+        cx="50%" cy="50%"
+        :r="(minShapeSize) / 2"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :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"
+      />
+
+      <ellipse
+        v-if="cellInfo.shape === VueCellShapeType.Ellipse"
+        :cx="ellipseStyle.cx"
+        :cy="ellipseStyle.cy"
+        :rx="ellipseStyle.rx"
+        :ry="ellipseStyle.ry"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :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"
+      />
+
+      <polygon
+        v-if="cellInfo.shape === VueCellShapeType.FivePointed"
+        points="100,10 40,198 190,78 10,78 160,198"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeCellNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      if (this.cellInfo.shape === VueCellShapeType.Rect) {
+        res.borderRadius = this.cellInfo.style.borderRadius;
+      }
+      if (this.cellInfo.shape === VueCellShapeType.FivePointed) {
+        const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height)
+        res.width = `${tmp * 5}px`;
+        res.height = `${tmp * 5}px`;
+      }
+
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      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: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            // minWidth: 'max-content',
+            // minHeight: 'max-content',
+            // fontSize: '14px',
+            // marginLeft: 'auto',
+            // fontWeight: 100,
+            // fontStyle: 'normal', // italic 斜体
+            // fontFamily: '仿宋',
+            // color: '#f3e00e',
+            // textAlign: 'left',
+            // top: '50%',
+            // left: '50%',
+            // padding: '0px 0px',
+            // transform: 'translate(-50%, -50%) scale(1)',
+            // textIndent: 0,
+            // textDecoration: 'none',
+            // textTransform: 'none',
+            // textShadow: 'none',
+            // textOverflow: 'clip',
+            // whiteSpace: 'normal',
+            // wordBreak: 'break-word',
+            // wordWrap: 'break-word',
+          }
+        }
+      }, info)
+      if (this.cellInfo.shape === VueCellShapeType.Rect) {
+        if (!objectHasKey(this.cellInfo.style, "borderRadius")) {
+          this.cellInfo.style.borderRadius = '0px'
+        }
+      }
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeCircleNode.vue

@@ -0,0 +1,269 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(1); ">
+      <circle
+        cx="50%" cy="50%"
+        :r="(minShapeSize) / 2"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeCircleNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Circle,
+        style: {
+          borderRadius: '',
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Circle,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeEllipseNode.vue

@@ -0,0 +1,278 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(1); ">
+      <ellipse
+        :cx="ellipseStyle.cx"
+        :cy="ellipseStyle.cy"
+        :rx="ellipseStyle.rx"
+        :ry="ellipseStyle.ry"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeEllipseNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    ellipseStyle() {
+      let res = {
+        cx: 0,
+        cy: 0,
+        rx: 0,
+        ry: 0,
+      };
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      // this.cellInfo.style.text.fontSize = `${this.fontSize }px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeFivePointedNode.vue

@@ -0,0 +1,282 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      transform-origin: left top;
+      transform: scale(1); "
+      :style="svgStyle"
+    >
+      <polygon
+        points="100,10 40,198 190,78 10,78 160,198"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+      />
+      <polygon
+        points="100,10 40,198 190,78 10,78 160,198"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeFivePointedNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        width: '',
+        height: '',
+        // transform: '',
+      }
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp * 5
+
+      res.width = `${Math.max(val, 200)}px`;
+      res.height = `${Math.max(val, 200)}px`;
+      const s = (val) / 1000;
+      res.transform = `scale(${(s)})`
+      return res;
+    },
+
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      // this.cellInfo.style.text.fontSize = `${this.fontSize }px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeImageNode.vue

@@ -0,0 +1,271 @@
+<!-- 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">
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      transform-origin: left top;
+      transform: scale(0.1); "
+      :style="svgStyle"
+    >
+      <image
+        :href="cellInfo.style.shape.href" x="0" y="0"
+        style="width: 100%;height: 100%;"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+<script lang="ts">
+//  图片
+import {defineComponent} from 'vue'
+import {
+  filterUnsafeHtml,
+  getSafeValue,
+  mergeDeepObject,
+  nextId, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeImageNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      res.width = `1000px`;
+      res.height = `1000px`;
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      res.transform = `scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      textElId: nextId(),
+      cellInfo: {
+        id: '',
+        label: '文字说明',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            href: '',
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("image#####", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            href: '',
+            label: '图片',
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+
+      setTimeout(() => {
+        if (this.nodeInfo.store && this.nodeInfo.store.data) {
+          this.nodeInfo.store.data.data = this.cellInfo
+        }
+      }, 300)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeLozengeNode.vue

@@ -0,0 +1,305 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 110%;height: 110%;
+      transform-origin: left top;
+      transform: scale(0.1); "
+      :style="svgStyle"
+    >
+      <path
+        d=" M 450 20 L 900 450 L 450 900 L 20 450 Z "
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeLozengeNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      res.width = `1000px`;
+      res.height = `1000px`;
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      console.log(this.sizeWInfo.width)
+      console.log(this.sizeWInfo.height)
+      let tx = 0;
+      let ty = 0;
+      if (this.sizeWInfo.width > 100) {
+        tx = 1
+      }
+      if (this.sizeWInfo.height > 100) {
+        ty = 1
+      }
+      res.transform = `translate(${tx}%, ${ty}%) scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeRectNode.vue

@@ -0,0 +1,283 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+     top: 50%; left: 50%;
+     transform: translate(-50%, -50%) scale(1); "
+      :style="svgStyle"
+    >
+      <rect
+        width="100%"
+        height="100%"
+        :x="cellInfo.style.shape.x"
+        :y="cellInfo.style.shape.y"
+        :rx="cellInfo.style.shape.rx"
+        :ry="cellInfo.style.shape.ry"
+        :fill="cellInfo.style.shape.fillColor"
+        :fill-opacity="cellInfo.style.shape.fillOpacity"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :stroke-dasharray="cellInfo.style.shape.strokeDasharray"
+        :stroke-dashoffset="cellInfo.style.shape.strokeDashoffset"
+        :stroke-linecap="cellInfo.style.shape.strokeLinecap"
+        :stroke-linejoin="cellInfo.style.shape.strokeLinejoin"
+        :opacity="cellInfo.style.shape.opacity"
+        :transform="cellInfo.style.shape.transform"
+        :clip-path="cellInfo.style.shape.clipPath"
+        :filter="cellInfo.style.shape.filter"
+      />
+    </svg>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeRectNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      return {
+        borderRadius: this.cellInfo.style.borderRadius
+      };
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          borderRadius: '',
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          borderRadius: '',
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeRightArrowNode.vue

@@ -0,0 +1,311 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+    transform-origin: left top;
+     transform: scale(0.1); "
+      :style="svgStyle"
+    >
+
+      <path
+        :d="pathVal"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeRightArrowNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    pathVal() {
+      //
+
+      // return `M 0 200 H 600 V 0 L 1000 500 L 600 1000 V 800 H 0 Z`
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      console.log(600 + 1000 * (1 - w), w)
+      let h = 800;
+      if (w <= 0.19) {
+        h = 680
+      }
+      if (w <= 0.1) {
+        h = 600
+      }
+
+      return `M 0 200 H ${h} V 0 L 1000 500 L ${h} 1000 V 800 H 0 Z`
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      res.width = `1000px`;
+      res.height = `1000px`;
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      res.transform = `scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeRightTriangleNode.vue

@@ -0,0 +1,295 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+    transform-origin: left top;
+     transform: scale(0.1); "
+      :style="svgStyle"
+    >
+      <polygon
+        points="50,960 50,50 960,50"
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeRightTriangleNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      res.width = `1000px`;
+      res.height = `1000px`;
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      res.transform = `scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+  // eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/ShapeTriangleNode.vue

@@ -0,0 +1,296 @@
+<!-- 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">
+
+    <svg
+      style="position: absolute;
+      width: 100%;height: 100%;
+      transform-origin: left top;
+      transform: scale(0.1); "
+      :style="svgStyle"
+    >
+      <path
+        d="M928.64 896a2.144 2.144 0 0 1-0.64 0H96a32.032 32.032 0 0 1-27.552-48.288l416-704c11.488-19.456 43.552-19.456 55.104 0l413.152 699.2A31.936 31.936 0 0 1 928.64 896zM152.064 832h719.84L512 222.912 152.064 832z"
+
+        :stroke="cellInfo.style.shape.strokeColor"
+        :stroke-width="cellInfo.style.shape.strokeWidth"
+        :fill="cellInfo.style.shape.fillColor"
+        :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>
+
+    <span
+      v-if="cellInfo.label"
+      style="position: absolute;"
+      :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, objectHasKey
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState, VueCellShapeType} from "@/components/DraftDesign/config";
+
+
+export default defineComponent({
+  name: 'ShapeTriangleNode',
+  computed: {
+    VueCellShapeType() {
+      return VueCellShapeType
+    },
+    minShapeSize() {
+      if (this.cellInfo.style.shape.strokeWidth) {
+        return this.minSize - this.toInt(this.cellInfo.style.shape.strokeWidth)
+      }
+      return this.minSize;
+    },
+    svgStyle() {
+      const res = {
+        borderRadius: '',
+      }
+      res.width = `1000px`;
+      res.height = `1000px`;
+      const tmp = Math.min(this.sizeWInfo.width, this.sizeWInfo.height) - (this.cellInfo.style.shape.strokeWidth * 2)
+      const val = tmp
+      const w = (Math.max(this.sizeWInfo.width, 0)) / 1000;
+      const h = (Math.max(this.sizeWInfo.height, 0)) / 1000;
+      res.transform = `scaleX(${w}) scaleY(${h})`
+      return res;
+    },
+    ellipseStyle() {
+      let res = {};
+      if (this.cellInfo.shape === VueCellShapeType.Ellipse) {
+        const w = this.sizeWInfo.width / 2
+        const h = this.sizeWInfo.height / 2
+        res.cx = w
+        res.cy = h
+        res.rx = w - this.cellInfo.style.shape.strokeWidth;
+        res.ry = h - this.cellInfo.style.shape.strokeWidth;
+      }
+      return res;
+    }
+  },
+// eslint-disable-next-line vue/order-in-components
+  inject: ['getNode'],
+  // eslint-disable-next-line vue/order-in-components
+  data() {
+    return {
+      cellInfo: {
+        id: '',
+        label: '',
+        showInput: false,
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {
+            minWidth: 'max-content',
+            minHeight: 'max-content',
+          }
+        }
+      },
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
+            }
+          }
+        }
+      },
+      fontSize: 12,
+      targetElement: null,
+      minSize: 2,
+      sizeWInfo: {
+        width: 0,
+        height: 0,
+      },
+    }
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("change:data", current)
+      this.setCellInfo(current)
+    })
+
+  },
+  unmounted() {
+  },
+  methods: {
+    toInt(val, defaultVal = 0) {
+      try {
+        return parseInt(val)
+      } catch (e) {
+        return defaultVal
+      }
+    },
+    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
+        this.nodeInfo.store.data.data = {
+          ...this.nodeInfo.store.data.data,
+          ...this.cellInfo
+        }
+      }
+    },
+    setInput(val: boolean) {
+      // this.cellInfo.showInput = val
+    },
+    changSize(size: any) {
+      console.log("cellInfo.label", this.cellInfo.label)
+      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.nodeInfo.store.data.size.width = size.width;
+      console.log(" this.nodeInfo.width", this.nodeInfo)
+      this.fontSize = s;
+      this.changeFontSize();
+    },
+    changeFontSize() {
+      this.cellInfo.style.text.fontSize = `${this.fontSize}px`
+    },
+    setCellInfo(info: any) {
+      if (!info) {
+        info = {
+          style: {
+            text: {}
+          }
+        }
+      }
+      console.log("text##", info)
+      this.cellInfo = mergeDeepObject({
+        showInput: false,
+        id: nextId(),
+        label: '',
+        shape: VueCellShapeType.Rect,
+        style: {
+          shape: {
+            x: 0, // 矩形左上角的 x 坐标
+            y: 0, // 矩形左上角的 y 坐标
+            rx: 0, // 矩形的圆角 x 半径
+            ry: 0, // 矩形的圆角 y 半径
+            fillColor: '#000000', // 填充颜色
+            fillOpacity: '', // 填充颜色的不透明度
+            opacity: '', // 元素的不透明度
+            strokeDashoffset: '', // 虚线起始偏移量
+            strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
+            strokeLinejoin: undefined, // 线段连接处的样式："round" | "inherit" | "miter" | "bevel" | undefined
+            strokeColor: '#000000', // 描边颜色
+            strokeWidth: 0, // 描边宽度
+            strokeDasharray: '', // 虚线模式
+            bottom: 0, // 元素的底部位置（用于定位）
+            transform: '', // 应用到元素的变换（如平移、旋转、缩放）
+            clipPath: '', // 应用到元素的裁剪路径
+            filter: '', // 应用到元素的滤镜效果
+          },
+          text: {}
+        }
+      }, info)
+      this.cellInfo.showInput = false;
+      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, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.node-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+</style>

hangtag-ui/src/components/DraftDesign/components/node/TextCellNode.vue

@@ -1,22 +1,33 @@
+<!-- eslint-disable vue/this-in-template -->
 <template>
-  <div :id="cellInfo.id" class="node-content" v-reSize="changSize">
-    <span  style="position: absolute;"
-    :style="cellInfo.style.text"
-    v-html="safeHtml(cellInfo.label)" >
+  <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"
+    <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"
+      <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>
@@ -26,213 +37,227 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'
-  import {
-    filterUnsafeHtml,
-    getSafeValue,
-    mergeDeepObject,
-    nextId
-  } from "@/components/DraftDesign/utils/FuncUtil";
+import {defineComponent} from 'vue'
+import {
+  filterUnsafeHtml,
+  getSafeValue,
+  mergeDeepObject,
+  nextId
+} from "@/components/DraftDesign/utils/FuncUtil";
+import {getDraftDesignState} from "@/components/DraftDesign/config";
 
-
-  export default defineComponent({
-    name: 'TextCellNode',
-    inject: ['getNode'],
-    data() {
-      return {
-        cellInfo:{
-          id: '',
-          label: '新文本',
-          showInput: false,
-          style:{
-            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-word',
-              wordWrap: 'break-word',
-            }
-          }
-        },
-        nodeInfo: {
-          store:{
-            data:{
-              data:{
-                label: ''
-              }
-            }
-          }
-        },
-        fontSize: 12,
-        targetElement: null
-      }
-    },
-
-    mounted() {
-      const node = (this as any).getNode()
-      this.nodeInfo = node
-
-      console.log("自定义节点",node.data)
-     if(node && node.data){
-       this.setCellInfo(node.data)
-      }
-      node.on('change:data', ({ current }) => {
-        console.log("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
-          this.nodeInfo.store.data.data = {
-            ...this.nodeInfo.store.data.data,
-            ...this.cellInfo
+export default defineComponent({
+  name: 'TextCellNode',
+  inject: ['getNode'],
+  data() {
+    return {
+      textElId: nextId(),
+      cellInfo: {
+        id: '',
+        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-word',
+            wordWrap: 'break-word',
           }
         }
       },
-      setInput(val:boolean){
-        this.cellInfo.showInput = val
-      },
-      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(){
-        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:{}
+      nodeInfo: {
+        store: {
+          data: {
+            data: {
+              label: ''
             }
           }
         }
-
-        this.cellInfo =  mergeDeepObject({
-          showInput: false,
-          id: nextId(),
-          label: '新文本',
-          style:{
-            text:{
-              minWidth: 'max-content',
-              minHeight: 'max-content',
-              fontSize: '14px',
-              marginLeft: 'auto',
-              fontWeight: 100,
-              fontStyle: 'normal', // italic 斜体
-              fontFamily: '仿宋',
-              color: '#d60808',
-              textAlign: 'left',
-              top: '50%',
-              left: '50%',
-              padding: '0px 0px',
-              transform: 'translate(-50%, -50%) scale(1)',
-              textIndent: 0,
-              textDecoration: 'none',
-              textTransform: 'none',
-              textShadow: 'none',
-              textOverflow: 'clip',
-              whiteSpace: 'normal',
-              wordBreak: 'break-word',
-              wordWrap: 'break-word',
-            }
-          }
-        }, info)
-        console.log("text##",this.nodeInfo)
-        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, 'fontSize') || '14')
-        this.setInput(this.cellInfo.showInput)
-        this.changeFontSize();
-      }
-
+      },
+      fontSize: 12,
+      fontTop: 12,
+      targetElement: null
     }
-  })
+  },
+
+  mounted() {
+    const node = (this as any).getNode()
+    this.nodeInfo = node
+
+    console.log("自定义节点", node.data)
+    if (node && node.data) {
+      this.setCellInfo(node.data)
+    }
+    node.on('change:data', ({current}) => {
+      console.log("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
+      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%`,
+            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-word',
+            wordWrap: 'break-word',
+          }
+        }
+      }, info)
+
+      console.log("text##", this.nodeInfo)
+      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')
+      console.log(" this.fontSize", this.cellInfo)
+      // this.fontSize = parseInt(getSafeValue(this.cellInfo.style.text, 'fontSize') || '14')
+      this.setInput(this.cellInfo.showInput)
+      this.cellInfo.editMode  = getDraftDesignState();
+      this.changeFontSize();
+    }
+
+  }
+})
 </script>
 
 <style scoped lang="scss">
-.node-content{
+.node-content {
   width: 100%;
   height: 100%;
   position: relative;

hangtag-ui/src/components/DraftDesign/config/index.ts

@@ -247,7 +247,6 @@ export const transformToPercent = (target:number, sum:number, font=12) => {
   return `${percent}${font ? 'px' : '%'}`
 }
 
-
 export const predefineColors = [
   '#ff4500',
   '#ff8c00',
@@ -268,5 +267,232 @@ export const predefineColors = [
 export const ShapeType = {
   'vueTextCell': 'vue-node_text_cell',
   'vueLineCell': 'vue-node_line_cell',
-
+  'vueShapeCell': 'vue-node_shape_cell',
+  'vueShapeRect': 'vue-node_shape_rect',
+  'vueShapeCircle': 'vue-node_shape_circle',
+  'vueShapeEllipse': 'vue-node_shape_ellipse',
+  'vueShapeFivePointed': 'vue-node_shape_five_pointed',
+  'vueShapeTriangle': 'vue-node_shape_triangle',
+  'vueShapeRightTriangle': 'vue-node_shape_right_triangle',
+  'vueShapeRightArrow': 'vue-node_shape_right_arrow',
+  'vueShapeLozenge': 'vue-node_shape_lozenge',
+  'vueShapeImage': 'vue-node_shape_image',
+}
+
+export enum VueCellShapeType {
+  Rect,
+  Circle,
+  Ellipse,
+  Polygon,
+  Polyline,
+  FivePointed,
+  Triangle,
+  RightTriangle,
+  RightArrow,
+  Lozenge,
+  Image,
+}
+export const baseShape = [
+  {
+    key: 'line',
+    shape: ShapeType.vueLineCell,
+    data: {
+      label: 'Line',
+      width: 80,
+      height: 6,
+      style: {
+        fontSize: 12,
+        backgroundColor: '#000000',
+      }
+    },
+    icon: 'icon-lk_line',
+    label: 'Line',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: 'shape_rect',
+    shape: ShapeType.vueShapeRect,
+    data: {
+      label: '',
+      width: 80,
+      height: 80,
+      shape: VueCellShapeType.Rect,
+      style: {
+        fontSize: 12,
+        shape: {
+          fillColor: '#0644c1',
+        },
+      }
+    },
+    icon: 'icon-lk_rect',
+    label: 'Rectangle',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeCircle,
+    shape: ShapeType.vueShapeCircle,
+    data: {
+      label: '',
+      width: 80,
+      height: 80,
+      shape: VueCellShapeType.Circle,
+      style: {
+        fontSize: 12,
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_circle',
+    label: 'Circle',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeEllipse,
+    shape: ShapeType.vueShapeEllipse,
+    data: {
+      label: '',
+      width: 80,
+      height: 40,
+      shape: VueCellShapeType.Ellipse,
+      style: {
+        fontSize: 12,
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_ellipse',
+    label: 'Ellipse',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeFivePointed,
+    shape: ShapeType.vueShapeFivePointed,
+    data: {
+      label: '',
+      width: 40,
+      height: 40,
+      shape: VueCellShapeType.FivePointed,
+      style: {
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_five_pointed',
+    label: 'FivePointed',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeTriangle,
+    shape: ShapeType.vueShapeTriangle,
+    data: {
+      label: '',
+      width: 40,
+      height: 40,
+      shape: VueCellShapeType.Triangle,
+      style: {
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_triangle',
+    label: 'Triangle',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeRightTriangle,
+    shape: ShapeType.vueShapeRightTriangle,
+    data: {
+      label: '',
+      width: 40,
+      height: 40,
+      shape: VueCellShapeType.RightTriangle,
+      style: {
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_right_triangle',
+    label: 'RightTriangle',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeRightArrow,
+    shape: ShapeType.vueShapeRightArrow,
+    data: {
+      label: '',
+      width: 40,
+      height: 40,
+      shape: VueCellShapeType.RightArrow,
+      style: {
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_right_arrow',
+    label: 'RectArrow',
+    filterKeyword: function () {
+      return this.label
+    }
+  },
+  {
+    key: ShapeType.vueShapeLozenge,
+    shape: ShapeType.vueShapeLozenge,
+    data: {
+      label: '',
+      width: 40,
+      height: 40,
+      shape: VueCellShapeType.Lozenge,
+      style: {
+        shape: {
+          fillColor: '#000000',
+          strokeWidth: 2,
+          strokeColor: '#00ff00',
+        },
+      }
+    },
+    icon: 'icon-lk_lozenge',
+    label: 'Lozenge',
+    filterKeyword: function () {
+      return this.label
+    }
+  }
+]
+
+export const getDraftDesignState = ()=>{
+  return sessionStorage.getItem("draftDesign_editState") === 'true'
+}
+export const setDraftDesignState = (editState = null)=>{
+  sessionStorage.setItem("draftDesign_editState",editState === true ? 'true' : '')
 }

hangtag-ui/src/components/DraftDesign/icons/demo.html

@@ -9,10 +9,444 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;33)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;62)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_cell_clear"></span>
+                <span class="mls"> icon-lk_cell_clear</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_cell_add"></span>
+                <span class="mls"> icon-lk_cell_add</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_cell_tree"></span>
+                <span class="mls"> icon-lk_cell_tree</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_delete"></span>
+                <span class="mls"> icon-lk_delete</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e93a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe93a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_to_bottom_layout"></span>
+                <span class="mls"> icon-lk_to_bottom_layout</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e938" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_to_top_layout"></span>
+                <span class="mls"> icon-lk_to_top_layout</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e939" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe939;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_paste"></span>
+                <span class="mls"> icon-lk_paste</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_horizontal"></span>
+                <span class="mls"> icon-lk_align_horizontal</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_vertical"></span>
+                <span class="mls"> icon-lk_align_vertical</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e937" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe937;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_image"></span>
+                <span class="mls"> icon-lk_image</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e936" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe936;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_lozenge"></span>
+                <span class="mls"> icon-lk_lozenge</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e935" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_set_size"></span>
+                <span class="mls"> icon-lk_set_size</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e933" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe933;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_right_arrow"></span>
+                <span class="mls"> icon-lk_right_arrow</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_right_triangle"></span>
+                <span class="mls"> icon-lk_right_triangle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e932" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_ellipse"></span>
+                <span class="mls"> icon-lk_ellipse</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_rect"></span>
+                <span class="mls"> icon-lk_rect</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e931" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe931;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_triangle"></span>
+                <span class="mls"> icon-lk_triangle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_five_pointed"></span>
+                <span class="mls"> icon-lk_five_pointed</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_circle"></span>
+                <span class="mls"> icon-lk_circle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e930" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe930;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_angular"></span>
+                <span class="mls"> icon-lk_angular</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_shape_stroke"></span>
+                <span class="mls"> icon-lk_shape_stroke</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_color_palette"></span>
+                <span class="mls"> icon-lk_color_palette</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_font_size"></span>
+                <span class="mls"> icon-lk_font_size</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e929" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe929;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_icon"></span>
+                <span class="mls"> icon-lk_align_icon</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e928" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe928;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_h_center"></span>
+                <span class="mls"> icon-lk_align_h_center</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e925" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe925;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_bottom"></span>
+                <span class="mls"> icon-lk_align_bottom</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e926" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe926;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_top"></span>
+                <span class="mls"> icon-lk_align_top</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e927" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe927;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_right"></span>
+                <span class="mls"> icon-lk_align_right</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e922" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe922;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_center"></span>
+                <span class="mls"> icon-lk_align_center</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e923" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe923;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_left"></span>
+                <span class="mls"> icon-lk_align_left</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e924" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe924;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_shape_set"></span>
+                <span class="mls"> icon-lk_shape_set</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e921" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe921;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-lk_layer_set"></span>
@@ -181,34 +615,6 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-lk_align_horizontal"></span>
-                <span class="mls"> icon-lk_align_horizontal</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e900" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-lk_align_vertical"></span>
-                <span class="mls"> icon-lk_align_vertical</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e901" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-lk_close_x"></span>

hangtag-ui/src/components/DraftDesign/icons/fonts/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

hangtag-ui/src/components/DraftDesign/icons/fonts/demo-files/demo.css

@@ -0,0 +1,152 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+

hangtag-ui/src/components/DraftDesign/icons/fonts/demo-files/demo.js

@@ -0,0 +1,30 @@
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());

hangtag-ui/src/components/DraftDesign/icons/fonts/demo.html

@@ -0,0 +1,794 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IcoMoon Demo</title>
+    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="demo-files/demo.css">
+    <link rel="stylesheet" href="style.css"></head>
+<body>
+    <div class="bgc1 clearfix">
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;54)</small></h1>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_lozenge"></span>
+                <span class="mls"> icon-lk_lozenge</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e935" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe935;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_set_size"></span>
+                <span class="mls"> icon-lk_set_size</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e933" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe933;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_right_arrow"></span>
+                <span class="mls"> icon-lk_right_arrow</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e934" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe934;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_right_triangle"></span>
+                <span class="mls"> icon-lk_right_triangle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e932" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe932;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_ellipse"></span>
+                <span class="mls"> icon-lk_ellipse</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_rect"></span>
+                <span class="mls"> icon-lk_rect</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e931" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe931;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_triangle"></span>
+                <span class="mls"> icon-lk_triangle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_five_pointed"></span>
+                <span class="mls"> icon-lk_five_pointed</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_circle"></span>
+                <span class="mls"> icon-lk_circle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e930" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe930;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_angular"></span>
+                <span class="mls"> icon-lk_angular</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_shape_stroke"></span>
+                <span class="mls"> icon-lk_shape_stroke</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_color_palette"></span>
+                <span class="mls"> icon-lk_color_palette</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e92d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe92d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_font_size"></span>
+                <span class="mls"> icon-lk_font_size</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e929" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe929;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_icon"></span>
+                <span class="mls"> icon-lk_align_icon</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e928" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe928;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_h_center"></span>
+                <span class="mls"> icon-lk_align_h_center</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e925" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe925;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_bottom"></span>
+                <span class="mls"> icon-lk_align_bottom</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e926" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe926;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_top"></span>
+                <span class="mls"> icon-lk_align_top</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e927" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe927;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_right"></span>
+                <span class="mls"> icon-lk_align_right</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e922" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe922;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_center"></span>
+                <span class="mls"> icon-lk_align_center</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e923" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe923;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_left"></span>
+                <span class="mls"> icon-lk_align_left</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e924" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe924;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_shape_set"></span>
+                <span class="mls"> icon-lk_shape_set</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e921" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe921;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_layer_set"></span>
+                <span class="mls"> icon-lk_layer_set</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e920" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe920;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_border_angle"></span>
+                <span class="mls"> icon-lk_border_angle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_line"></span>
+                <span class="mls"> icon-lk_line</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_text"></span>
+                <span class="mls"> icon-lk_text</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_warning_tips"></span>
+                <span class="mls"> icon-lk_warning_tips</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_data_output"></span>
+                <span class="mls"> icon-lk_data_output</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e919" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe919;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_data_input"></span>
+                <span class="mls"> icon-lk_data_input</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_start"></span>
+                <span class="mls"> icon-lk_start</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e91b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe91b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_step_flow"></span>
+                <span class="mls"> icon-lk_step_flow</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e918" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe918;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_success"></span>
+                <span class="mls"> icon-lk_success</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e915" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe915;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_failed"></span>
+                <span class="mls"> icon-lk_failed</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e916" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe916;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_running"></span>
+                <span class="mls"> icon-lk_running</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e917" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe917;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_horizontal"></span>
+                <span class="mls"> icon-lk_align_horizontal</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_align_vertical"></span>
+                <span class="mls"> icon-lk_align_vertical</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_close_x"></span>
+                <span class="mls"> icon-lk_close_x</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e902" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_color_eyedropper_tool"></span>
+                <span class="mls"> icon-lk_color_eyedropper_tool</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e903" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe903;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_color_fill"></span>
+                <span class="mls"> icon-lk_color_fill</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e904" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe904;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_down"></span>
+                <span class="mls"> icon-lk_down</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e905" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe905;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_file_template"></span>
+                <span class="mls"> icon-lk_file_template</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e906" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe906;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_font_bold"></span>
+                <span class="mls"> icon-lk_font_bold</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e907" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe907;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_font_color"></span>
+                <span class="mls"> icon-lk_font_color</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e908" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe908;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_font_italic"></span>
+                <span class="mls"> icon-lk_font_italic</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e909" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe909;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_icon_config"></span>
+                <span class="mls"> icon-lk_icon_config</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_minimap"></span>
+                <span class="mls"> icon-lk_minimap</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_open"></span>
+                <span class="mls"> icon-lk_open</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90c" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90c;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_plus_copy"></span>
+                <span class="mls"> icon-lk_plus_copy</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90d" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90d;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_recover"></span>
+                <span class="mls"> icon-lk_recover</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_save"></span>
+                <span class="mls"> icon-lk_save</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_tips"></span>
+                <span class="mls"> icon-lk_tips</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e910" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe910;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_to_center"></span>
+                <span class="mls"> icon-lk_to_center</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e911" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe911;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_undo"></span>
+                <span class="mls"> icon-lk_undo</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e912" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe912;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_zoom_in"></span>
+                <span class="mls"> icon-lk_zoom_in</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e913" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe913;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-lk_zoom_out"></span>
+                <span class="mls"> icon-lk_zoom_out</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e914" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe914;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+
+    <!--[if gt IE 8]><!-->
+    <div class="mhl clearfix mbl">
+        <h1>Font Test Drive</h1>
+        <label>
+            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
+            min="8" value="48" />
+            px
+        </label>
+        <input id="testText" type="text" class="phl size1of1 mvl"
+        placeholder="Type some text to test..." value=""/>
+        <div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
+        </div>
+    </div>
+    <!--<![endif]-->
+    <div class="bgc1 clearfix">
+        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+    </div>
+
+    <script src="demo-files/demo.js"></script>
+</body>
+</html>

hangtag-ui/src/components/DraftDesign/icons/fonts/fonts/icomoon.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="lk_align_horizontal" d="M146.286 45.714h-73.143v804.571h73.143zM950.857 630.857h-731.429v219.429h731.429zM804.571 338.286h-585.143v219.429h585.143zM950.857 45.678h-731.429v219.429h731.429z" />
+<glyph unicode="&#xe901;" glyph-name="lk_align_vertical" d="M914.286 82.286v-73.143h-804.571v73.143zM329.143 886.857v-731.429h-219.429v731.429zM621.714 740.571v-585.509h-219.429v585.509zM914.286 886.857v-731.429h-219.429v731.429z" />
+<glyph unicode="&#xe902;" glyph-name="lk_close_x" d="M563.8 448l262.5 312.9c4.4 5.2 0.7 13.1-6.1 13.1h-79.8c-4.7 0-9.2-2.1-12.3-5.7l-216.5-258.1-216.5 258.1c-3 3.6-7.5 5.7-12.3 5.7h-79.8c-6.8 0-10.5-7.9-6.1-13.1l262.5-312.9-262.5-312.9c-4.4-5.2-0.7-13.1 6.1-13.1h79.8c4.7 0 9.2 2.1 12.3 5.7l216.5 258.1 216.5-258.1c3-3.6 7.5-5.7 12.3-5.7h79.8c6.8 0 10.5 7.9 6.1 13.1l-262.5 312.9z" />
+<glyph unicode="&#xe903;" glyph-name="lk_color_eyedropper_tool" d="M994.763 868.259l-62.057 62.057c-18.325 18.314-43.634 29.64-71.589 29.64s-53.264-11.326-71.59-29.641l-144.073-144.073-69.542 69.67-137.804-137.868 57.386-57.322-393.26-393.324c-24.361-24.322-40.077-57.297-42.143-93.921l-0.017-0.379-22.903-22.839c-22.723-22.715-36.778-54.099-36.778-88.767 0-69.319 56.194-125.512 125.512-125.512 34.651 0 66.023 14.042 88.735 36.746v0l22.903 22.967c37.012 1.982 70.012 17.695 94.295 42.091l393.265 393.265 57.386-57.322 137.74 137.676-69.606 69.67 144.074 143.946c18.367 18.324 29.731 43.662 29.731 71.653s-11.363 53.329-29.729 71.651l-0.002 0.002zM268.188 101.443c-9.913-9.927-23.615-16.068-38.752-16.068-8.713 0-16.951 2.035-24.264 5.655l0.32-0.143-54.507-54.444c-6.338-5.969-14.901-9.638-24.321-9.638-19.61 0-35.507 15.897-35.507 35.507 0 9.404 3.656 17.954 9.624 24.307l-0.017-0.019 54.38 54.571c-3.464 6.982-5.491 15.205-5.491 23.902 0 15.158 6.158 28.878 16.11 38.793l393.262 393.262 102.361-102.489-393.196-393.196z" />
+<glyph unicode="&#xe904;" glyph-name="lk_color_fill" d="M877.158 320.614s-70.246-97.28-70.246-137.421c0-40.141 31.539-72.499 70.451-72.499s70.246 32.563 70.246 72.704c-0.205 39.731-70.451 137.216-70.451 137.216zM852.378 423.834l-352.87 364.339c-0.819 0.819-1.638 1.638-2.662 2.458l-105.472 108.954c-12.083 12.288-31.539 12.288-43.418 0-12.083-12.288-12.083-32.563 0-44.851l79.053-81.51-338.534-349.389c-15.974-16.589-15.974-43.213 0-59.802l353.075-364.544c7.987-8.192 18.432-12.288 28.877-12.288s20.89 4.096 28.877 12.288l353.075 364.544c15.974 16.384 15.974 43.213 0 59.802zM587.776 606.925l165.478-170.598h-565.658l282.624 291.84 117.555-121.242z" />
+<glyph unicode="&#xe905;" glyph-name="lk_down" d="M792.832 474.144c-12.512 12.544-32.8 12.48-45.248 0.032l-203.584-203.168v560.992c0 17.664-14.336 32-32 32s-32-14.336-32-32v-563.040l-234.048 235.456c-12.48 12.576-32.704 12.64-45.248 0.128-12.544-12.448-12.608-32.704-0.128-45.248l287.52-289.248c3.168-3.2 6.88-5.536 10.816-7.136 4-1.792 8.384-2.912 13.088-2.912 11.296 0 20.704 6.176 26.4 14.976l254.368 253.952c12.544 12.448 12.544 32.704 0.064 45.216zM864 32h-704c-17.664 0-32 14.304-32 32s14.336 32 32 32h704c17.696 0 32-14.304 32-32s-14.304-32-32-32z" />
+<glyph unicode="&#xe906;" glyph-name="lk_file_template" d="M682.667 960c0.001 0 0.002 0 0.004 0 9.802 0 18.833-3.306 26.037-8.863l-0.099 0.074 4.267-3.712 207.061-207.061c10.127-10.128 16.875-23.634 18.41-38.683l0.022-0.271 0.299-6.315v-332.501c-0.027-23.544-19.119-42.619-42.667-42.619-21.788 0-39.762 16.332-42.347 37.421l-0.021 0.206-0.299 4.992v323.669l-188.373 188.331h-494.293v-853.333h341.333c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992c-0.003-21.803-16.359-39.784-37.47-42.348l-0.205-0.020-4.992-0.299h-362.667c-33.181 0.002-60.464 25.254-63.68 57.59l-0.021 0.266-0.299 6.144v896c0.002 33.181 25.254 60.464 57.59 63.68l0.266 0.021 6.144 0.299h533.333zM640 960c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992v-213.333h213.333c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992c-0.003-21.803-16.359-39.784-37.47-42.348l-0.205-0.020-4.992-0.299h-234.667c-33.181 0.002-60.464 25.254-63.68 57.59l-0.021 0.266-0.299 6.144v234.667c0 23.564 19.103 42.667 42.667 42.667v0zM951.168 264.832c7.716 7.691 18.362 12.446 30.119 12.446 23.564 0 42.667-19.103 42.667-42.667 0-9.874-3.354-18.964-8.985-26.194l0.072 0.096-3.541-4.011-240.896-240.939c-11.583-11.591-27.59-18.761-45.271-18.761-15.375 0-29.483 5.421-40.518 14.456l0.114-0.090-4.864 4.395-112.896 112.939c-7.691 7.716-12.446 18.362-12.446 30.119 0 23.564 19.103 42.667 42.667 42.667 9.874 0 18.964-3.354 26.194-8.985l-0.096 0.072 4.011-3.541 97.835-97.792 225.835 225.792zM341.333 618.667h128q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-128q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667zM341.333 448h341.333q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-341.333q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667zM341.333 277.333h128q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-128q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667z" />
+<glyph unicode="&#xe907;" glyph-name="lk_font_bold" d="M517.292-63.395c6.424-0.385 13.937-0.604 21.5-0.604 90.201 0 173.113 31.206 238.53 83.411l-0.77-0.593c58.416 51.248 95.095 126.048 95.095 209.415 0 4.236-0.095 8.45-0.282 12.64l0.021-0.596c0.069 2.107 0.108 4.584 0.108 7.071 0 61.379-23.975 117.159-63.071 158.485l0.101-0.107c-42.717 43.621-100.156 72.677-164.265 79.117l-1.123 0.091v2.885c54.371 15.469 100.409 45.592 135.035 85.818l0.304 0.361c33.38 38.018 53.745 88.18 53.745 143.098 0 0.991-0.007 1.981-0.020 2.969l0.002-0.15c0.104 2.448 0.164 5.32 0.164 8.206 0 68.946-33.968 129.959-86.082 167.216l-0.623 0.423c-62.586 40.262-139 64.185-221.002 64.185-8.935 0-17.804-0.284-26.598-0.844l1.201 0.061h-348.084v-1022.558h366.114zM436.702 777.969q194.776 0 194.776-111.421c0.045-1.166 0.070-2.534 0.070-3.909 0-37.706-19.227-70.921-48.412-90.376l-0.397-0.249c-34.366-21.421-76.091-34.121-120.782-34.121-4.444 0-8.86 0.126-13.242 0.373l0.608-0.027h-117.551v239.729h104.99zM456.834 357.287c4.131 0.264 8.957 0.414 13.818 0.414 42.434 0 82.195-11.444 116.365-31.414l-1.094 0.591c27.575-17.492 45.613-47.857 45.613-82.435 0-1.19-0.021-2.375-0.064-3.555l0.005 0.171c0.044-1.137 0.069-2.471 0.069-3.811 0-35.923-17.99-67.645-45.453-86.646l-0.35-0.229c-32.469-20.732-72.057-33.044-114.521-33.044-4.322 0-8.614 0.128-12.872 0.379l0.587-0.028h-127.226v239.428h125.183z" />
+<glyph unicode="&#xe908;" glyph-name="lk_font_color" d="M413 322.5c-81.9-4.6-118.8 10.2-110.6 44.4 0 13.7 6.8 35.3 20.5 64.9 13.6 27.3 23.1 47.8 28.6 61.5h245.8c38.2-72.9 58.7-119.5 61.5-140 8.2-25.1-20.5-35.3-86-30.7v-30.7h295v30.7c-57.4-6.8-97 20.5-118.8 81.9l-229.4 491.6h-36.9l-213-481.4c-19.1-66-62.8-96.8-131.1-92.2v-30.7h274.4v30.7zM470.4 759.5l110.6-228.8h-217.1l106.5 228.8zM872.5 194.7h-728c-10.1 0-18.2-8.1-18.2-18.2v-157.8c0-10 8.1-18.2 18.2-18.2h728c10.1 0 18.2 8.2 18.2 18.2v157.8c0 10-8.2 18.2-18.2 18.2z" />
+<glyph unicode="&#xe909;" glyph-name="lk_font_italic" d="M832 864v-64c0-17.673-14.327-32-32-32v0h-125.52l-160-640h93.52c17.673 0 32-14.327 32-32v0-64c0-17.673-14.327-32-32-32v0h-384c-17.673 0-32 14.327-32 32v0 64c0 17.673 14.327 32 32 32v0h125.52l160 640h-93.52c-17.673 0-32 14.327-32 32v0 64c0 17.673 14.327 32 32 32v0h384c17.673 0 32-14.327 32-32v0z" />
+<glyph unicode="&#xe90a;" glyph-name="lk_icon_config" d="M117.333 618.667c0 17.673 14.327 32 32 32v0h426.667c17.673 0 32-14.327 32-32s-14.327-32-32-32v0h-426.667c-17.673 0-32 14.327-32 32v0zM768 554.667c-35.346 0-64 28.654-64 64s28.654 64 64 64v0c35.346 0 64-28.654 64-64s-28.654-64-64-64v0zM768 490.667c70.692 0 128 57.308 128 128s-57.308 128-128 128v0c-70.692 0-128-57.308-128-128s57.308-128 128-128v0zM928 277.333c0 17.673-14.327 32-32 32v0h-426.667c-17.673 0-32-14.327-32-32s14.327-32 32-32v0h426.667c17.673 0 32 14.327 32 32v0zM256 213.333c35.346 0 64 28.654 64 64s-28.654 64-64 64v0c-35.346 0-64-28.654-64-64s28.654-64 64-64v0zM256 149.333c-70.692 0-128 57.308-128 128s57.308 128 128 128v0c70.692 0 128-57.308 128-128s-57.308-128-128-128v0z" />
+<glyph unicode="&#xe90b;" glyph-name="lk_minimap" horiz-adv-x="1102" d="M1038.494 960c35.446 0 64.276-28.751 64.276-64.276v-377.935h-85.622v356.588h-931.525v-824.399h349.184v-85.701h-370.53c-35.498 0-64.276 28.777-64.276 64.276v867.249c0 35.367 28.751 64.197 64.276 64.197zM1043.85 395.225c32.532 0 58.919-26.388 58.919-58.841v-310.508c0-32.54-26.379-58.919-58.919-58.919h-422.912c-32.506 0.045-58.841 26.407-58.841 58.919 0 0 0 0 0 0v0 310.508c0 32.453 26.388 58.841 58.841 58.841zM1017.068 309.602h-369.27v-256.945h369.428v256.945zM252.455 767.409l128.788-128.709 116.972 116.972v-294.439h-294.518l116.815 116.972-128.63 128.551 60.495 60.652z" />
+<glyph unicode="&#xe90c;" glyph-name="lk_open" d="M0 896h404.288l107.072-134.4h512.64v-761.6h-1024v896zM82.432 704.448v-89.792h282.88l106.56-134.976h471.168v90.56h-430.4l-108.416 134.208h-321.792z" />
+<glyph unicode="&#xe90d;" glyph-name="lk_plus_copy" d="M853.333 736h-53.333v53.333c0 40.533-34.133 74.667-74.667 74.667h-554.667c-40.533 0-74.667-34.133-74.667-74.667v-554.667c0-40.533 34.133-74.667 74.667-74.667h53.333v-53.333c0-40.533 34.133-74.667 74.667-74.667h554.667c40.533 0 74.667 34.133 74.667 74.667v554.667c0 40.533-34.133 74.667-74.667 74.667zM160 234.667v554.667c0 6.4 4.267 10.667 10.667 10.667h554.667c6.4 0 10.667-4.267 10.667-10.667v-554.667c0-6.4-4.267-10.667-10.667-10.667h-554.667c-6.4 0-10.667 4.267-10.667 10.667zM864 106.667c0-6.4-4.267-10.667-10.667-10.667h-554.667c-6.4 0-10.667 4.267-10.667 10.667v53.333h437.333c40.533 0 74.667 34.133 74.667 74.667v437.333h53.333c6.4 0 10.667-4.267 10.667-10.667v-554.667zM576 544h-96v96c0 17.067-14.933 32-32 32s-32-14.933-32-32v-96h-96c-17.067 0-32-14.933-32-32s14.933-32 32-32h96v-96c0-17.067 14.933-32 32-32s32 14.933 32 32v96h96c17.067 0 32 14.933 32 32s-14.933 32-32 32z" />
+<glyph unicode="&#xe90e;" glyph-name="lk_recover" d="M604.27 452.14l0.14 335.98 0.070 166.020c0 4.3 5.18 6.47 8.24 3.46l353.94-347.4c5.27-5.18 5.3-13.67 0.050-18.87l-354.27-351.36c-3.060-3.030-8.26-0.87-8.26 3.44l0.090 208.73zM53.94 369.080c8.74 157.92 87.43 274.43 253.54 339.15 87.43 33.66 177.77 46.61 271.030 49.19 13.47 0 21.33 1.67 25.9 5.5l-0.14-298.21c-3.68 2.21-9.17 2.74-17.010 2.74-49.54-2.59-99.090-2.59-148.63-15.54-99.090-23.3-177.77-72.49-206.91-168.28-37.89-126.86 5.83-264.070 148.63-341.74 0-7.77-5.83-5.18-20.4 0-5.83 0-8.74 2.59-11.66 2.59-171.59 60.5-289.71 215.96-294.92 388.2v23.43c0.12 4.32 0.3 8.64 0.57 12.97z" />
+<glyph unicode="&#xe90f;" glyph-name="lk_save" d="M798.293 959.999h-712.959c-47.128 0-85.333-38.205-85.333-85.333v0-853.333c0-47.128 38.205-85.333 85.333-85.333v0h853.333c47.128 0 85.333 38.205 85.333 85.333v0 712.959c0 0.073 0.001 0.16 0.001 0.247 0 11.721-4.726 22.338-12.377 30.049l-183.037 183.037c-7.709 7.648-18.326 12.374-30.047 12.374-0.087 0-0.173 0-0.26-0.001h0.013zM213.333 883.199h597.333v-179.2c0-23.564-19.103-42.667-42.667-42.667v0h-512c-23.564 0-42.667 19.103-42.667 42.667v0zM875.519 12.8h-725.333v409.6c0 23.564 19.103 42.667 42.667 42.667v0h639.999c23.564 0 42.667-19.103 42.667-42.667v0zM633.599 834.133h76.8v-131.84h-76.8z" />
+<glyph unicode="&#xe910;" glyph-name="lk_tips" d="M512-64c-282.77 0-512 229.23-512 512s229.23 512 512 512v0c282.77 0 512-229.23 512-512s-229.23-512-512-512v0zM466.347 207.445c10.198-9.577 23.962-15.461 39.101-15.461 0.474 0 0.946 0.006 1.417 0.017l-0.070-0.001c0.289-0.005 0.631-0.007 0.973-0.007 15.608 0 29.913 5.58 41.028 14.853l-0.102-0.083c10.147 9.37 16.48 22.742 16.48 37.592 0 0.374-0.004 0.747-0.012 1.119l0.001-0.056c0.003 0.215 0.005 0.47 0.005 0.725 0 14.743-6.337 28.005-16.435 37.213l-0.040 0.036c-10.533 9.198-24.407 14.807-39.59 14.807-0.812 0-1.62-0.016-2.424-0.048l0.116 0.004c-0.691 0.030-1.502 0.048-2.317 0.048-14.717 0-28.119-5.627-38.172-14.848l0.042 0.038c-10.524-8.594-17.19-21.57-17.19-36.102 0-0.658 0.014-1.313 0.041-1.964l-0.003 0.093c0-15.872 5.717-28.587 17.152-37.973zM638.464 666.624c-29.44 24.832-68.864 37.291-118.187 37.291-54.869 0-98.56-14.763-130.987-44.288-32.427-29.099-48.555-69.888-48.555-122.368h85.248c0 30.464 6.229 53.675 18.688 69.632 14.933 18.773 38.4 28.16 70.315 28.16 25.941 0 45.909-6.571 59.904-19.712 12.972-13.427 20.965-31.736 20.965-51.912 0-1.040-0.021-2.075-0.063-3.105l0.005 0.148c-0.309-19.363-7.95-36.883-20.259-49.958l0.035 0.038-8.96-9.813c-48.896-40.789-78.080-70.571-87.552-89.344-9.984-18.261-14.933-41.216-14.933-68.864v-9.899h86.016v9.899c0 16.811 3.755 32.341 11.264 46.336 7.424 13.653 17.408 25.088 29.952 34.475 34.901 28.587 56.32 47.104 64.256 55.552 18.517 22.955 27.733 51.797 27.733 86.528 0 43.093-14.933 76.885-44.885 101.205z" />
+<glyph unicode="&#xe911;" glyph-name="lk_to_center" d="M213.333 320h-85.333v-170.667c0-46.933 38.4-85.333 85.333-85.333h170.667v85.333h-170.667v170.667zM213.333 746.667h170.667v85.333h-170.667c-46.933 0-85.333-38.4-85.333-85.333v-170.667h85.333v170.667zM810.667 832h-170.667v-85.333h170.667v-170.667h85.333v170.667c0 46.933-38.4 85.333-85.333 85.333zM810.667 149.333h-170.667v-85.333h170.667c46.933 0 85.333 38.4 85.333 85.333v170.667h-85.333v-170.667zM512 576c-70.827 0-128-57.173-128-128s57.173-128 128-128 128 57.173 128 128-57.173 128-128 128z" />
+<glyph unicode="&#xe912;" glyph-name="lk_undo" d="M761.856-64c113.728 206.048 132.896 520.32-313.856 509.824v-253.824l-384 384 384 384v-248.384c534.976 13.952 594.56-472.224 313.856-775.616z" />
+<glyph unicode="&#xe913;" glyph-name="lk_zoom_in" d="M637 517h-118v134c0 4.4-3.6 8-8 8h-60c-4.4 0-8-3.6-8-8v-134h-118c-4.4 0-8-3.6-8-8v-60c0-4.4 3.6-8 8-8h118v-134c0-4.4 3.6-8 8-8h60c4.4 0 8 3.6 8 8v134h118c4.4 0 8 3.6 8 8v60c0 4.4-3.6 8-8 8zM921 93l-146 146c122.1 148.9 113.6 369.5-26 509-148 148.1-388.4 148.1-537 0-148.1-148.6-148.1-389 0-537 139.5-139.6 360.1-148.1 509-26l146-146c3.2-2.8 8.3-2.8 11 0l43 43c2.8 2.7 2.8 7.8 0 11zM696 264c-118.8-118.7-311.2-118.7-430 0-118.7 118.8-118.7 311.2 0 430 118.8 118.7 311.2 118.7 430 0 118.7-118.8 118.7-311.2 0-430z" />
+<glyph unicode="&#xe914;" glyph-name="lk_zoom_out" d="M637 517h-312c-4.4 0-8-3.6-8-8v-60c0-4.4 3.6-8 8-8h312c4.4 0 8 3.6 8 8v60c0 4.4-3.6 8-8 8zM921 93l-146 146c122.1 148.9 113.6 369.5-26 509-148 148.1-388.4 148.1-537 0-148.1-148.6-148.1-389 0-537 139.5-139.6 360.1-148.1 509-26l146-146c3.2-2.8 8.3-2.8 11 0l43 43c2.8 2.7 2.8 7.8 0 11zM696 264c-118.8-118.7-311.2-118.7-430 0-118.7 118.8-118.7 311.2 0 430 118.8 118.7 311.2 118.7 430 0 118.7-118.8 118.7-311.2 0-430z" />
+<glyph unicode="&#xe915;" glyph-name="lk_success" d="M512 885.333c-241.067 0-437.333-196.267-437.333-437.333s196.267-437.333 437.333-437.333 437.333 196.267 437.333 437.333-196.267 437.333-437.333 437.333zM512 74.667c-204.8 0-373.333 168.533-373.333 373.333s168.533 373.333 373.333 373.333 373.333-168.533 373.333-373.333-168.533-373.333-373.333-373.333zM701.867 578.133l-253.867-256-125.867 125.867c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8l149.333-149.333c6.4-6.4 14.933-8.533 23.467-8.533s17.067 2.133 23.467 8.533l277.333 277.333c12.8 12.8 12.8 32 0 44.8-14.933 12.8-36.267 12.8-49.067 2.133z" />
+<glyph unicode="&#xe916;" glyph-name="lk_failed" d="M924.78 623.2c-69.897 162.92-228.929 274.96-414.13 274.96-248.169 0-449.35-201.181-449.35-449.35s201.181-449.35 449.35-449.35c248.169 0 449.35 201.181 449.35 449.35v0c0 0.187 0 0.408 0 0.628 0 62.754-12.953 122.482-36.332 176.657l1.112-2.895zM875.050 295.45c-61.511-143.353-201.448-241.935-364.41-241.935-218.379 0-395.41 177.031-395.41 395.41s177.031 395.41 395.41 395.41c218.379 0 395.41-177.031 395.41-395.41 0-0.040 0-0.081 0-0.121v0.006c0-0.128 0-0.28 0-0.431 0-55.23-11.401-107.798-31.979-155.477l0.979 2.548zM671.090 607.090c-4.886 4.885-11.635 7.906-19.090 7.906s-14.204-3.021-19.090-7.906l-120.91-120.91-120.91 120.91c-4.858 4.727-11.499 7.642-18.822 7.642-14.912 0-27-12.088-27-27 0-7.323 2.915-13.964 7.648-18.828l120.904-120.904-120.91-120.91c-5.047-4.911-8.178-11.769-8.178-19.358 0-14.912 12.088-27 27-27 7.589 0 14.447 3.131 19.352 8.172l120.916 120.916 120.91-120.91c4.858-4.727 11.499-7.642 18.822-7.642 14.912 0 27 12.088 27 27 0 7.323-2.915 13.964-7.648 18.828l-120.904 120.904 120.91 120.91c4.885 4.886 7.906 11.635 7.906 19.090s-3.021 14.204-7.906 19.090v0z" />
+<glyph unicode="&#xe917;" glyph-name="lk_running" d="M166.671 455.831c2.086 92.486 40.292 175.66 101.011 236.299l0.004 0.004c62.232 62.512 148.354 101.196 243.511 101.196 0.261 0 0.522 0 0.783-0.001h-0.041c0.253 0.001 0.553 0.001 0.852 0.001 95.047 0 181.058-38.689 243.143-101.178l0.018-0.018c9.939-9.939 19.275-20.48 27.889-31.503l-60.416-47.164c-1.912-1.491-3.13-3.794-3.13-6.382 0-0.598 0.065-1.181 0.189-1.743l-0.010 0.053c0.674-3.011 2.973-5.351 5.908-6.072l0.055-0.011 176.369-43.189c0.561-0.139 1.206-0.219 1.869-0.219 4.408 0 7.99 3.533 8.070 7.922v0.007l0.843 181.609c0 0.005 0 0.011 0 0.017 0 4.425-3.587 8.011-8.011 8.011-1.871 0-3.593-0.642-4.956-1.717l0.017 0.013-56.621-44.273c-77.878 98.981-197.664 161.961-332.159 161.961-229.909 0-416.835-184.035-421.498-412.828l-0.007-0.435c-0.001-0.054-0.002-0.117-0.002-0.181 0-4.425 3.587-8.011 8.011-8.011 0.001 0 0.001 0 0.002 0h60.235c0.019 0 0.040 0 0.062 0 4.361 0 7.908 3.485 8.009 7.821v0.009zM925.636 448h-60.235c-0.019 0-0.040 0-0.062 0-4.361 0-7.908-3.485-8.009-7.821v-0.009c-1.945-92.511-40.185-175.728-101.003-236.291l-0.012-0.012c-62.259-62.513-148.405-101.196-243.586-101.196-0.214 0-0.427 0-0.641 0.001h0.033c-0.238-0.001-0.52-0.001-0.802-0.001-109.934 0-207.811 51.622-270.713 131.947l-0.567 0.752 60.416 47.164c1.919 1.479 3.143 3.778 3.143 6.362 0 3.766-2.598 6.924-6.1 7.782l-0.055 0.011-176.369 43.189c-0.561 0.139-1.206 0.219-1.869 0.219-4.408 0-7.99-3.533-8.070-7.922v-0.007l-0.723-181.73c0-6.746 7.77-10.541 12.951-6.325l56.621 44.273c77.865-99.043 197.68-162.070 332.215-162.070 229.957 0 416.905 184.138 421.442 413.008l0.007 0.424c0.003 0.086 0.005 0.187 0.005 0.289 0 3.307-2.019 6.143-4.892 7.341l-0.053 0.019c-0.901 0.381-1.949 0.602-3.048 0.602-0.009 0-0.017 0-0.026 0h0.001z" />
+<glyph unicode="&#xe918;" glyph-name="lk_step_flow" d="M562.176 548.864c0-13.824 11.264-25.088 25.088-25.088s25.088 11.264 25.088 25.088-11.264 25.088-25.088 25.088-25.088-11.264-25.088-25.088zM335.872 724.48c-13.824 0-25.088-11.264-25.088-25.088s11.264-25.088 25.088-25.088 25.088 11.264 25.088 25.088c0.512 13.824-10.752 25.088-25.088 25.088zM436.224 372.224c13.824 0 25.6 11.264 25.6 25.088s-11.264 25.6-25.088 25.6-25.6-11.264-25.6-25.088 11.264-25.088 25.088-25.6zM839.168 877.056h-654.336c-41.472 0-75.264-33.792-75.776-75.264v-707.584c0-41.472 33.792-75.264 75.776-75.264h527.872v176.128c0 13.824 11.264 25.088 25.088 25.088h176.128v581.632c0 41.472-33.28 75.264-74.752 75.264zM486.912 119.296h-201.216c-13.824 0-25.088 11.264-25.088 25.088s11.264 25.088 25.088 25.088h201.216c13.824 0 25.088-11.264 25.088-25.088s-11.264-25.088-25.088-25.088zM260.608 245.248c0 13.824 11.264 25.088 25.088 25.088h100.864c13.824-1.024 24.064-13.312 23.040-27.136-1.024-12.288-10.752-22.016-23.040-23.040h-100.864c-13.824-0.512-25.088 10.752-25.088 25.088zM360.96 422.912h4.608c13.824 38.912 56.32 59.904 95.744 46.080 21.504-7.68 38.4-24.576 46.080-46.080h169.984l-7.168 7.168c-9.728 9.728-9.728 25.6 0 35.84 9.728 9.728 25.6 9.728 35.84 0l50.176-49.664c9.728-9.728 9.728-25.6 0-35.84l-50.176-50.688c-9.728-9.728-25.6-9.728-35.84 0s-9.728 25.6 0 35.84l7.168 7.168h-169.984c-13.824-38.912-56.32-59.904-95.744-46.080-21.504 7.68-38.4 24.576-46.080 46.080h-4.608c-55.808 0-100.864 45.056-100.864 100.864s45.056 100.864 100.864 100.864h155.648c13.312 38.912 56.32 59.904 95.232 46.592 22.016-7.68 38.912-24.576 46.592-46.592h4.608c27.648-1.536 51.712 19.456 53.248 47.616 1.536 27.648-19.456 51.712-47.616 53.248h-261.632c-13.824-39.424-56.832-59.904-96.256-46.080s-59.904 56.832-46.080 96.256c13.824 39.424 56.832 59.904 96.256 46.080 21.504-7.68 38.4-24.576 46.080-46.080h256c55.296 2.048 102.4-40.96 104.448-96.768 2.048-55.296-40.96-102.4-96.768-104.448h-12.8c-13.312-38.912-56.32-59.904-95.232-46.592-22.016 7.68-38.912 24.576-46.592 46.592h-155.648c-27.648 1.536-51.712-19.456-53.248-47.616-1.536-27.648 19.456-51.712 47.616-53.248 2.56-0.512 4.608-0.512 6.144-0.512zM763.392 33.28l136.192 136.192h-136.192v-136.192z" />
+<glyph unicode="&#xe919;" glyph-name="lk_data_output" d="M379.611 694.126c16.238-16.311 43.081-16.311 59.392 0l31.451 31.451v-190.757c0-23.113 18.944-42.057 42.057-42.057 23.179 0.083 41.943 18.872 41.984 42.053v190.907l31.451-31.525c16.311-16.311 43.154-16.311 59.465 0 7.55 7.622 12.215 18.114 12.215 29.696s-4.665 22.074-12.219 29.699l-103.202 103.128c-7.622 7.55-18.114 12.215-29.696 12.215s-22.074-4.665-29.699-12.219l-103.202-103.202c-7.603-7.599-12.306-18.098-12.306-29.696s4.703-22.098 12.305-29.696v0zM897.17 810.057h-240.274l48.64-48.64h184.832v-477.038h-755.931v477.038h183.954l48.64 48.567h-239.177c-26.925-0.083-48.735-21.867-48.859-48.774v-541.489c0-26.843 21.943-48.859 48.786-48.859h256.805v-72.85l-55.003-55.003s-5.998-11.995 8.997-11.995h347.794c14.994 0 8.997 11.995 8.997 11.995l-55.003 55.003v72.85h256.805c26.951 0.083 48.777 21.909 48.859 48.851v541.485c-0.124 26.919-21.934 48.704-48.851 48.786h-0.008z" />
+<glyph unicode="&#xe91a;" glyph-name="lk_data_input" d="M379.6 667.7c-16.3-16.3-16.3-43.1 0-59.4l103.2-103.2c16.3-16.3 43.1-16.3 59.4 0l103.2 103.2c16.3 16.3 16.3 43.1 0 59.4s-43.1 16.3-59.4 0l-31.5-31.5v190.8c0 23.1-18.9 42-42 42s-42-18.9-42-42v-190.8l-31.5 31.5c-16.4 16.3-43.1 16.3-59.4 0zM897.2 810h-293.2v-48.6h286.5v-477h-756v477h286.5v48.6h-293.2c-26.8 0-48.8-22-48.8-48.8v-541.5c0-26.8 22-48.8 48.8-48.8h256.8v-72.9l-55-55s-6-12 9-12h347.8c15 0 9 12 9 12l-55 55v72.9h256.8c26.8 0 48.8 22 48.8 48.8v541.5c0 26.8-22 48.8-48.8 48.8z" />
+<glyph unicode="&#xe91b;" glyph-name="lk_start" d="M924.059 493.195c-1.883 38.202-23.717 72.597-57.491 90.555l-607.086 325.411c-33.877 18.193-74.843 17.13-107.73-2.797-33.222-19.646-53.366-55.597-52.778-94.19l4.364-729.352c-0.059-40.136 22.209-76.97 57.772-95.579 14.543-8.045 31.886-12.78 50.334-12.78 0.198 0 0.396 0.001 0.594 0.002h-0.030c22.852 0.093 44.045 7.12 61.604 19.084l-0.382-0.246 602.849 404.131c31.703 21.278 49.913 57.631 47.979 95.763zM177.079 33.548l1.346 832.289 692.623-371.223-693.969-461.066z" />
+<glyph unicode="&#xe91c;" glyph-name="lk_warning_tips" d="M460.8 294.4h102.4v-102.4h-102.4v102.4zM460.8 704h102.4v-307.2h-102.4v307.2zM511.488 960c-282.624 0-511.488-229.376-511.488-512s228.864-512 511.488-512c283.136 0 512.512 229.376 512.512 512s-229.376 512-512.512 512zM512 38.4c-226.304 0-409.6 183.296-409.6 409.6s183.296 409.6 409.6 409.6 409.6-183.296 409.6-409.6-183.296-409.6-409.6-409.6z" />
+<glyph unicode="&#xe91d;" glyph-name="lk_text" d="M724.038 661.145h-424.077c-4.962 0-8.987-4.026-8.987-8.987v-141.376c0-2.434 0.986-4.763 2.732-6.458 1.746-1.689 4.109-2.56 6.54-2.526l18.751 0.59c4.423 0.143 8.081 3.479 8.634 7.871 5.911 47.374 45.467 80.044 65.949 85.028 6.049 1.48 14.476 2.224 25.053 2.224 12.941 0 26.145-1.147 34.21-2.004-0.091-50.063-0.581-317.876-0.581-336.347 0-11.676-16.415-18.719-20.795-20.388l-36.029-0.57c-4.828-0.082-8.732-3.953-8.845-8.78l-0.59-25.817c-0.056-2.418 0.867-4.758 2.555-6.484 1.691-1.737 4.010-2.712 6.428-2.712h234.059c4.962 0 8.988 4.028 8.988 8.988v25.187c0 4.963-4.027 8.988-8.988 8.988h-42.369c-10.383 1.199-19.057 13.291-22.532 19.6l0.513 341.292c4.22 0.375 10.123 0.737 17.359 0.737 14.281 0 28.964-1.346 43.645-3.996 30.609-5.527 61.849-66.544 71.302-89.584 1.385-3.376 4.669-5.583 8.321-5.583h18.751c4.962 0 8.987 4.027 8.987 8.989v143.128c0.004 4.966-4.023 8.991-8.984 8.991v0zM847.029 894.71h-670.063c-61.677 0-111.675-50.004-111.675-111.675v-687.47c8.415-53.352 55.962-94.274 111.675-94.274h670.068c61.676 0 111.675 50.004 111.675 111.676v670.068c-0.001 61.668-50 111.675-111.681 111.675v0zM847.033 168.806c0-30.843-24.998-55.84-55.84-55.84l-558.387 0.004c-30.838 0-55.84 24.999-55.84 55.84v0 558.383c0 30.838 24.998 55.841 55.84 55.841h558.387c30.838 0 55.84-24.998 55.84-55.841v0-558.387z" />
+<glyph unicode="&#xe91e;" glyph-name="lk_line" horiz-adv-x="1025" d="M1024.003 876.851l-940.851-940.851-83.149 83.149 940.851 940.851 83.149-83.149z" />
+<glyph unicode="&#xe91f;" glyph-name="lk_border_angle" d="M340.821 960c-188.192-0.097-340.724-152.63-340.821-340.812v-683.188h341.504v682.667h682.496v341.333h-683.179z" />
+<glyph unicode="&#xe920;" glyph-name="lk_layer_set" d="M938.633 389.784l-383.961-172.585c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.585c-20.383 10.827-25.879 50.887-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.131l392.179-180.788 392.192 180.788c0.662 0.166 35.629 17.786 60.32 30.131 0-22.369-6.933-63.908-25.879-72.746zM938.633 570.587l-383.961-172.599c-36.762-15.991-51.4-15.991-85.33 0l-383.976 172.599c-30.16 16.005-29.222 66.407 0 85.229l383.976 202.73c33.93 16.944 55.155 17.882 85.33 0l383.961-202.73c29.221-16.005 28.255-72.042 0-85.229zM511.999 824.135l-392.179-210.933 392.179-165.253 392.193 165.253-392.193 210.933zM511.999 70.797l392.192 180.815c0.662 0.166 35.629 17.786 60.32 30.13 0-22.369-6.932-63.908-25.879-72.746l-383.96-172.612c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.613c-20.383 10.827-25.879 50.873-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.13l392.178-180.816z" />
+<glyph unicode="&#xe921;" glyph-name="lk_shape_set" d="M458.5 782.7v-273h-288.2v273h288.2zM499.5 823.7h-370.3v-355h370.2v355h0.1zM305.7 338.5l137.1-237.4h-274.1l137 237.4zM305.7 420.5l-208-360.5h416.2l-208.2 360.5zM732.7 743.2l23.1-46.8 9.5-19.3 73-10.6-37.3-36.4-15.4-15.1 3.6-21.2 8.8-51.4-65.3 34.3-19.1-10-46.2-24.3 8.8 51.4 3.6 21.3-15.4 15.1-37.3 36.4 72.8 10.6 9.5 19.3 23.3 46.7zM732.7 835.9l-59.9-121.3-133.8-19.4 96.8-94.4-22.8-133.3 119.7 62.9 119.7-62.9-22.9 133.3 96.8 94.4-133.8 19.4-59.8 121.3zM732.7 364.2c72.5 0 131.5-59 131.5-131.5s-59-131.5-131.5-131.5-131.6 59-131.6 131.5 59 131.5 131.6 131.5zM732.7 405.2c-95.3 0-172.6-77.2-172.6-172.5s77.3-172.6 172.6-172.6 172.5 77.2 172.5 172.6c0 95.3-77.3 172.5-172.5 172.5z" />
+<glyph unicode="&#xe922;" glyph-name="lk_align_right" d="M928 960c17.673 0 32-14.327 32-32v0-960c0-17.673-14.327-32-32-32s-32 14.327-32 32v0 960c0 17.673 14.327 32 32 32v0zM352 768h448c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-448c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0zM96 384h704c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-704c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0z" />
+<glyph unicode="&#xe923;" glyph-name="lk_align_center" d="M477.312 384v128h-210.624c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h210.624v157.312c0 19.158 15.53 34.688 34.688 34.688s34.688-15.53 34.688-34.688v0-157.312h210.624c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-210.624v-128h349.312c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-349.312v-157.312c0-19.158-15.53-34.688-34.688-34.688s-34.688 15.53-34.688 34.688v157.312h-349.312c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h349.312z" />
+<glyph unicode="&#xe924;" glyph-name="lk_align_left" d="M96 960c17.673 0 32-14.327 32-32v0-960c0-17.673-14.327-32-32-32s-32 14.327-32 32v0 960c0 17.673 14.327 32 32 32v0zM224 768h448c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-448c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0zM224 384h704c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-704c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0z" />
+<glyph unicode="&#xe925;" glyph-name="lk_align_h_center" d="M960 480v-64h-896v64h896zM832 704v-512h-256v512h256zM448 832v-768h-256v768h256z" />
+<glyph unicode="&#xe926;" glyph-name="lk_align_bottom" horiz-adv-x="1170" d="M1170.286-27.429c0 20.198-16.374 36.571-36.571 36.571h-1097.143c-20.195-0.003-36.565-16.376-36.565-36.571s16.37-36.568 36.565-36.571h1097.143c20.198 0 36.571 16.374 36.571 36.571v0zM950.857 118.857v512c0 20.198-16.374 36.571-36.571 36.571v0h-219.429c-20.198 0-36.571-16.374-36.571-36.571v0-512c0-20.198 16.374-36.571 36.571-36.571h219.429c20.198 0 36.571 16.374 36.571 36.571v0zM512 118.857v804.571c0 20.198-16.374 36.571-36.571 36.571v0h-219.429c-20.198 0-36.571-16.374-36.571-36.571v0-804.571c0-20.198 16.374-36.571 36.571-36.571v0h219.429c20.198 0 36.571 16.374 36.571 36.571v0z" />
+<glyph unicode="&#xe927;" glyph-name="lk_align_top" horiz-adv-x="1170" d="M1170.286 923.429c0-20.198-16.374-36.571-36.571-36.571h-1097.143c-20.195 0.003-36.565 16.376-36.565 36.571s16.37 36.568 36.565 36.571h1097.143c20.198 0 36.571-16.374 36.571-36.571v0zM950.857 777.143v-512c0-20.198-16.374-36.571-36.571-36.571v0h-219.429c-20.198 0-36.571 16.374-36.571 36.571v0 512c0 20.198 16.374 36.571 36.571 36.571v0h219.429c20.198 0 36.571-16.374 36.571-36.571v0zM512 777.143v-804.571c0-20.198-16.374-36.571-36.571-36.571v0h-219.429c-20.198 0-36.571 16.374-36.571 36.571v0 804.571c0 20.198 16.374 36.571 36.571 36.571v0h219.429c20.198 0 36.571-16.374 36.571-36.571v0z" />
+<glyph unicode="&#xe928;" glyph-name="lk_align_icon" d="M128 64h768v-64h-768zM128 192h768v-64h-768zM128 320h768v-64h-768zM128 448h768v-64h-768zM0 896h64v-896h-64zM960 896h64v-896h-64zM440.2 512l-128 128h399.6l-128-128h184.2l192 192-192 192h-184.2l128-128h-399.6l128 128h-184.2l-192-192 192-192z" />
+<glyph unicode="&#xe929;" glyph-name="lk_font_size" d="M809.664 524.8v0.192h-72.32v-0.192l-64.448-177.024 36.16-99.392 64.448 176.96 72.192-198.4h-128.832l23.68-64.96h128.832l44.608-122.432c2.292-6.209 8.158-10.557 15.040-10.56h49.728c4.408 0.014 7.976 3.59 7.976 8 0 0.988-0.179 1.934-0.506 2.807l0.018-0.055-176.576 485.056zM427.776 884.224h-87.552c-0.008 0-0.017 0-0.026 0-1.163 0-2.154-0.739-2.528-1.773l-0.006-0.019-309.184-849.792c-0.112-0.285-0.177-0.615-0.177-0.96 0-1.485 1.203-2.688 2.688-2.688 0.017 0 0.035 0 0.052 0h74.301c6.857 0.031 12.692 4.371 14.94 10.449l0.036 0.111 79.36 217.984h368.64l79.36-217.984c2.292-6.209 8.158-10.557 15.040-10.56h74.304c0.015 0 0.032 0 0.049 0 1.485 0 2.688 1.203 2.688 2.688 0 0.345-0.065 0.675-0.184 0.979l0.006-0.018-309.312 849.792c-0.38 1.053-1.371 1.792-2.534 1.792-0.009 0-0.018 0-0.027 0h0.001zM228.736 337.472l155.264 426.56 155.2-426.56h-310.4z" />
+<glyph unicode="&#xe92a;" glyph-name="lk_shape_stroke" horiz-adv-x="1066" d="M554.667 576c0.002 0 0.004 0 0.007 0 23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667c-0.002 0-0.005 0-0.007 0v0c-23.561-0.004-42.66-19.105-42.66-42.667s19.099-42.663 42.66-42.667v0zM554.667 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM725.333 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM554.667 234.667c0.002 0 0.004 0 0.007 0 23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667c-0.002 0-0.005 0-0.007 0v0c-23.561-0.004-42.66-19.105-42.66-42.667s19.099-42.663 42.66-42.667v0zM896 832h-682.667c-23.564 0-42.667-19.103-42.667-42.667v-682.667c0-23.564 19.103-42.667 42.667-42.667h682.667c23.564 0 42.667 19.103 42.667 42.667v0 682.667c0 23.564-19.103 42.667-42.667 42.667v0zM853.333 149.333h-597.333v597.333h597.333v-597.333zM384 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0z" />
+<glyph unicode="&#xe92b;" glyph-name="lk_angular" d="M858.496 279.68v335.808c58.7 18.539 100.528 72.47 100.608 136.183v0.009c-0.073 78.687-63.841 142.455-142.521 142.528h-0.007c-64.448 0-119.040-43.008-136.576-101.888h-335.808c-18.205 59.311-72.415 101.717-136.556 101.888h-0.020c-78.687-0.073-142.455-63.841-142.528-142.521v-0.007c0.094-64.368 42.785-118.74 101.389-136.442l1.011-0.262v-334.72c-59.555-18.038-102.17-72.421-102.208-136.764v-0.004c0-78.592 63.936-142.464 142.528-142.464 63.872 0 118.080 42.176 136.064 100.288h336.896c18.643-58.546 72.51-100.224 136.12-100.288h0.008c78.664 0.073 142.419 63.805 142.528 142.454v0.010c-0.212 63.771-42.142 117.692-99.915 135.916l-1.013 0.276zM816.576 834.176c45.504 0 82.56-36.992 82.56-82.496-1.795-44.176-38.042-79.31-82.496-79.31s-80.701 35.133-82.491 79.148l-0.005 0.162c0 45.504 37.056 82.56 82.432 82.56zM125.12 751.68c0 45.504 36.992 82.56 82.496 82.56 44.176-1.795 79.31-38.042 79.31-82.496s-35.133-80.701-79.148-82.491l-0.162-0.005c0 0 0 0 0 0-45.552 0-82.487 36.89-82.56 82.425v0.007zM207.808 60.992c-45.597 0-82.56 36.963-82.56 82.56v0c1.795 44.176 38.042 79.31 82.496 79.31s80.701-35.133 82.491-79.148l0.005-0.162c0-45.568-37.056-82.56-82.432-82.56zM675.392 161.28h-326.272c-8.383 63.923-58.022 114.106-120.959 123.236l-0.769 0.092v325.952c63.034 9.254 112.227 58.577 121.19 120.898l0.090 0.766h326.72c9.109-63.695 59.165-113.382 122.276-121.84l0.732-0.080v-325.568c-64-8.32-114.88-59.328-123.008-123.52zM816.832 60.992c-45.597 0-82.56 36.963-82.56 82.56v0c1.795 44.176 38.042 79.31 82.496 79.31s80.701-35.133 82.491-79.148l0.005-0.162c0-45.568-36.992-82.56-82.496-82.56z" />
+<glyph unicode="&#xe92c;" glyph-name="lk_triangle" d="M213.333 106.667c-17.067 0-29.867 4.267-42.667 8.533-29.867 12.8-55.467 38.4-68.267 68.267s-12.8 68.267 0 98.133c0 0 0 4.267 4.267 4.267l298.667 524.8c12.8 21.333 29.867 38.4 51.2 51.2 59.733 34.133 140.8 12.8 174.933-51.2l298.667-520.533s0-4.267 4.267-4.267c4.267-12.8 8.533-25.6 8.533-42.667 0-34.133-8.533-68.267-34.133-93.867-21.333-25.6-55.467-38.4-89.6-42.667h-605.867zM179.2 247.467c-4.267-8.533-4.267-21.333 0-29.867s12.8-17.067 21.333-21.333c4.267-4.267 8.533-4.267 12.8-4.267h597.333c8.533 0 21.333 4.267 25.6 12.8s12.8 21.333 12.8 29.867c0 4.267 0 8.533-4.267 12.8l-298.667 520.533c-8.533 21.333-34.133 29.867-55.467 17.067-8.533-4.267-12.8-8.533-17.067-17.067l-294.4-520.533z" />
+<glyph unicode="&#xe92d;" glyph-name="lk_color_palette" d="M954.757 668.527c-3.61 3.685-8.041 5.583-13.168 5.641-12.515 0.141-26.509-10.942-36.036-20.255l-340.912-331.177c-12.501-12.229-58.516-86.966-60.468-90.143l-7.452-12.121 12.135 7.428c3.217 1.968 78.963 48.374 91.438 60.569l340.911 331.178c15.151 14.815 26.671 35.436 13.552 48.879v0zM741.987 565.522c0-27.609-22.407-50.015-50.015-50.015-27.613 0-50.021 22.406-50.021 50.015 0 27.61 22.408 50.018 50.021 50.018 27.608 0 50.015-22.408 50.015-50.018v0zM216.812 390.469c-27.61 0-50.016 22.403-50.016 50.012 0 27.612 22.406 50.020 50.016 50.020 27.608 0 50.017-22.408 50.017-50.020 0-27.609-22.409-50.012-50.017-50.012v0zM291.838 565.522c0 27.61 22.408 50.018 50.015 50.018 27.61 0 50.018-22.408 50.018-50.018 0-27.609-22.407-50.015-50.018-50.015-27.609 0-50.015 22.382-50.015 50.015v0zM466.896 615.54c0 27.609 22.406 50.015 50.015 50.015 27.612 0 50.019-22.406 50.019-50.015s-22.408-50.018-50.019-50.018c-27.609 0-50.015 22.385-50.015 50.018v0zM853.74 445.916c-22.989-148.967-158.732-299.942-351.947-299.942-36.782 0-75.999 7.275-107.598 19.959-33.607 13.49-48.851 29.354-51.907 39.693-1.594 5.398-3.092 11.296-4.68 17.542-4.65 18.302-9.922 39.045-20.252 56.259-18.376 30.618-44.815 37.045-63.76 37.045-7.166 0-14.798-0.914-22.675-2.712-12.865-2.936-25.363-4.424-37.141-4.424-25.123 0-67.464 6.665-68.765 51.308-6.59 227.942 180.734 351.748 369.298 373.326 13.337 1.525 27.603 2.296 42.403 2.296 53.124 0 111.543-10.001 152.463-26.099 9.248-3.638 14.375-6.016 39.204-18.184 25.653-12.57 46.348-30.432 62.898-47.642l30.158 53.075c-18.027 17.013-40.334 34.407-67.102 47.525-24.89 12.197-31.893 15.514-43.565 20.106-47.339 18.623-114.033 30.194-174.053 30.194-17.027 0-33.545-0.901-49.102-2.678-115.514-13.22-220.687-59.057-296.143-129.075-85.507-79.342-128.872-184.654-125.405-304.555 1.005-34.47 15.117-63.017 40.81-82.556 22.381-17.020 52.431-26.014 86.903-26.014 16.187 0 33.097 1.985 50.268 5.903 3.582 0.818 6.794 1.232 9.548 1.232 11.469 0 16.99-10.044 26.853-48.854 1.654-6.509 3.365-13.241 5.281-19.73 9.434-31.912 39.343-58.784 86.495-77.711 38.319-15.382 85.544-24.203 129.567-24.203 54.104 0 106.474 10.135 155.659 30.123 46.241 18.793 88.502 45.763 125.607 80.165 35.744 33.141 65.271 71.791 87.757 114.884 22.526 43.163 36.888 88.666 42.691 135.269 0.262 2.117 0.509 4.321 0.732 6.548l0.148 1.469v0.057c0.222 2.336 0.404 4.695 0.571 7.065l-61.218-16.661z" />
+<glyph unicode="&#xe92e;" glyph-name="lk_five_pointed" d="M231.867 35.44l99.624 315.316-254.598 217.71h320.431l114.726 293.374 128.642-293.375h306.415l-240.135-217.562 102.703-316.754-296.032 198.443-281.776-197.151zM513.135 272.173l238.918-159.045-81.227 247.13 196.016 176.485h-246.748l-106.382 242.59-94.867-242.59h-258.161l206.984-175.878-78.212-249.077 223.679 160.385z" />
+<glyph unicode="&#xe92f;" glyph-name="lk_ellipse" d="M512 192c233.92 0 416 121.408 416 256s-182.080 256-416 256-416-121.408-416-256c0-134.592 182.080-256 416-256zM512 128c-265.088 0-480 143.296-480 320s214.912 320 480 320c265.088 0 480-143.296 480-320s-214.912-320-480-320z" />
+<glyph unicode="&#xe930;" glyph-name="lk_circle" d="M512-21.312c-259.12 0.182-469.129 210.191-469.312 469.294v0.018c0.182 259.12 210.191 469.129 469.294 469.312h0.018c259.12-0.182 469.129-210.191 469.312-469.294v-0.018c-0.182-259.12-210.191-469.129-469.294-469.312h-0.018zM512 823.168c-1.457 0.020-3.177 0.032-4.9 0.032-207.2 0-375.168-167.968-375.168-375.168s167.968-375.168 375.168-375.168c1.723 0 3.443 0.012 5.161 0.035l-0.261-0.003c205.081 2.764 370.268 169.659 370.268 375.136s-165.187 372.372-370.007 375.133l-0.261 0.003z" />
+<glyph unicode="&#xe931;" glyph-name="lk_rect" d="M128 106.667h768c23.564 0 42.667 19.103 42.667 42.667v0 597.333c0 23.564-19.103 42.667-42.667 42.667v0h-768c-23.564 0-42.667-19.103-42.667-42.667v0-597.333c0-23.564 19.103-42.667 42.667-42.667v0zM170.667 704h682.667v-512h-682.667v512z" />
+<glyph unicode="&#xe932;" glyph-name="lk_right_triangle" d="M870.4 806.4l-691.2-691.2v691.2h691.2zM746.829 755.2h-516.429v-516.403l516.403 516.403z" />
+<glyph unicode="&#xe933;" glyph-name="lk_set_size" d="M874.24 355.502c22.292 2.14 42.977 11.735 59.238 27.566v-282.501c0-48.855-39.762-88.596-88.627-88.596h-634.982c-48.876 0-88.637 39.741-88.637 88.596v634.307c0 48.855 39.762 88.607 88.637 88.607h283.269c-15.247-15.647-25.385-36.291-27.607-59.228h-255.672c-16.21 0-29.399-13.179-29.399-29.379v-634.296c0-16.189 13.189-29.368 29.399-29.368h634.982c16.21 0 29.399 13.179 29.399 29.368v254.925zM890.153 829.553h-300.892c-24.535 0-44.421-19.886-44.421-44.431 0-24.535 19.886-44.421 44.421-44.421h191.212c-1.843-1.341-3.686-2.703-5.345-4.372l-313.457-313.436v193.638c0 24.535-19.886 44.421-44.421 44.421-12.268 0-23.378-4.956-31.416-13.005-8.038-8.059-13.015-19.139-13.015-31.416v-300.902c0-24.525 19.886-44.421 44.421-44.421h300.892c24.535 0 44.421 19.896 44.421 44.442 0 24.525-19.886 44.421-44.421 44.421h-191.191c1.843 1.341 3.676 2.703 5.335 4.362l313.436 313.446v-193.649c0-24.535 19.886-44.421 44.421-44.421 12.268 0 23.378 4.956 31.416 13.005 8.038 8.059 13.015 19.149 13.015 31.416v300.902c0.010 24.525-19.886 44.421-44.411 44.421z" />
+<glyph unicode="&#xe934;" glyph-name="lk_right_arrow" d="M589.523 543.172v154.985l290.635-253.71-290.635-253.591v154.744h-477.064v197.572h477.064zM529.288 830.735v-227.328h-477.064v-318.042h477.064v-227.087l442.488 386.108-442.488 386.35z" />
+<glyph unicode="&#xe935;" glyph-name="lk_lozenge" d="M534.073 948.964l426.553-479.403c5.571-5.578 9.017-13.281 9.017-21.788s-3.445-16.21-9.017-21.789v0l-426.553-479.346c-5.578-5.571-13.281-9.017-21.788-9.017s-16.21 3.445-21.789 9.017v0l-426.553 479.346c-5.571 5.578-9.017 13.281-9.017 21.788s3.445 16.21 9.017 21.789v0l426.553 479.403c5.578 5.571 13.281 9.017 21.788 9.017s16.21-3.445 21.789-9.017v0zM527.815 833.081c-3.98 3.962-9.469 6.411-15.531 6.411s-11.55-2.449-15.531-6.412l0.001 0.001-325.291-369.778c-3.962-3.98-6.411-9.469-6.411-15.531s2.449-11.55 6.412-15.531l-0.001 0.001 325.291-370.005c3.983-3.979 9.484-6.44 15.559-6.44s11.576 2.461 15.559 6.44v0l333.483 370.005c3.979 3.983 6.44 9.484 6.44 15.559s-2.461 11.576-6.44 15.559v0z" />
+</font></defs></svg>

hangtag-ui/src/components/DraftDesign/icons/fonts/icomoon.svg

@@ -7,8 +7,8 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="lk_align_horizontal" d="M146.286 45.714h-73.143v804.571h73.143zM950.857 630.857h-731.429v219.429h731.429zM804.571 338.286h-585.143v219.429h585.143zM950.857 45.678h-731.429v219.429h731.429z" />
-<glyph unicode="&#xe901;" glyph-name="lk_align_vertical" d="M914.286 82.286v-73.143h-804.571v73.143zM329.143 886.857v-731.429h-219.429v731.429zM621.714 740.571v-585.509h-219.429v585.509zM914.286 886.857v-731.429h-219.429v731.429z" />
+<glyph unicode="&#xe900;" glyph-name="lk_paste" d="M706.2 771.3h-516.4c-29.8 0-54-24.2-54-54v-450.3c0-2 0.1-3.9 0.3-5.9-0.4-9.9 3.2-19.8 10.5-27l2-2c0.9-1.1 1.9-2.2 3-3.2l212.8-212.6s0.1-0.1 0.2-0.1l5.1-5.1c6.9-6.9 16.1-10.5 25.5-10.5 1.1 0 2.3 0.1 3.4 0.2 1.3-0.1 2.7-0.2 4-0.2h303.5c29.8 0 54 24.2 54 54v662.7c0.1 29.8-24.2 54-53.9 54zM259 223.6h100.2v-100.2l-100.2 100.2zM688.2 72.4h-257v187.2c0 19.9-16.1 36-36 36h-187.4v403.7h480.3v-626.9zM819.4 302.5h72v-141.8h-72zM819.4 488.2h72v-141.8h-72zM819.4 673.9h72v-141.8h-72zM819.4 859.6h72v-141.8h-72zM642 895.6h131v-72h-131zM469.9 895.6h128.8v-72h-128.8zM297.1 895.6h127.9v-72h-127.9z" />
+<glyph unicode="&#xe901;" glyph-name="lk_align_horizontal" d="M914.286 82.286v-73.143h-804.571v73.143zM329.143 886.857v-731.429h-219.429v731.429zM621.714 740.571v-585.509h-219.429v585.509zM914.286 886.857v-731.429h-219.429v731.429z" />
 <glyph unicode="&#xe902;" glyph-name="lk_close_x" d="M563.8 448l262.5 312.9c4.4 5.2 0.7 13.1-6.1 13.1h-79.8c-4.7 0-9.2-2.1-12.3-5.7l-216.5-258.1-216.5 258.1c-3 3.6-7.5 5.7-12.3 5.7h-79.8c-6.8 0-10.5-7.9-6.1-13.1l262.5-312.9-262.5-312.9c-4.4-5.2-0.7-13.1 6.1-13.1h79.8c4.7 0 9.2 2.1 12.3 5.7l216.5 258.1 216.5-258.1c3-3.6 7.5-5.7 12.3-5.7h79.8c6.8 0 10.5 7.9 6.1 13.1l-262.5 312.9z" />
 <glyph unicode="&#xe903;" glyph-name="lk_color_eyedropper_tool" d="M994.763 868.259l-62.057 62.057c-18.325 18.314-43.634 29.64-71.589 29.64s-53.264-11.326-71.59-29.641l-144.073-144.073-69.542 69.67-137.804-137.868 57.386-57.322-393.26-393.324c-24.361-24.322-40.077-57.297-42.143-93.921l-0.017-0.379-22.903-22.839c-22.723-22.715-36.778-54.099-36.778-88.767 0-69.319 56.194-125.512 125.512-125.512 34.651 0 66.023 14.042 88.735 36.746v0l22.903 22.967c37.012 1.982 70.012 17.695 94.295 42.091l393.265 393.265 57.386-57.322 137.74 137.676-69.606 69.67 144.074 143.946c18.367 18.324 29.731 43.662 29.731 71.653s-11.363 53.329-29.729 71.651l-0.002 0.002zM268.188 101.443c-9.913-9.927-23.615-16.068-38.752-16.068-8.713 0-16.951 2.035-24.264 5.655l0.32-0.143-54.507-54.444c-6.338-5.969-14.901-9.638-24.321-9.638-19.61 0-35.507 15.897-35.507 35.507 0 9.404 3.656 17.954 9.624 24.307l-0.017-0.019 54.38 54.571c-3.464 6.982-5.491 15.205-5.491 23.902 0 15.158 6.158 28.878 16.11 38.793l393.262 393.262 102.361-102.489-393.196-393.196z" />
 <glyph unicode="&#xe904;" glyph-name="lk_color_fill" d="M877.158 320.614s-70.246-97.28-70.246-137.421c0-40.141 31.539-72.499 70.451-72.499s70.246 32.563 70.246 72.704c-0.205 39.731-70.451 137.216-70.451 137.216zM852.378 423.834l-352.87 364.339c-0.819 0.819-1.638 1.638-2.662 2.458l-105.472 108.954c-12.083 12.288-31.539 12.288-43.418 0-12.083-12.288-12.083-32.563 0-44.851l79.053-81.51-338.534-349.389c-15.974-16.589-15.974-43.213 0-59.802l353.075-364.544c7.987-8.192 18.432-12.288 28.877-12.288s20.89 4.096 28.877 12.288l353.075 364.544c15.974 16.384 15.974 43.213 0 59.802zM587.776 606.925l165.478-170.598h-565.658l282.624 291.84 117.555-121.242z" />
@@ -40,4 +40,33 @@
 <glyph unicode="&#xe91e;" glyph-name="lk_line" horiz-adv-x="1025" d="M1024.003 876.851l-940.851-940.851-83.149 83.149 940.851 940.851 83.149-83.149z" />
 <glyph unicode="&#xe91f;" glyph-name="lk_border_angle" d="M340.821 960c-188.192-0.097-340.724-152.63-340.821-340.812v-683.188h341.504v682.667h682.496v341.333h-683.179z" />
 <glyph unicode="&#xe920;" glyph-name="lk_layer_set" d="M938.633 389.784l-383.961-172.585c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.585c-20.383 10.827-25.879 50.887-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.131l392.179-180.788 392.192 180.788c0.662 0.166 35.629 17.786 60.32 30.131 0-22.369-6.933-63.908-25.879-72.746zM938.633 570.587l-383.961-172.599c-36.762-15.991-51.4-15.991-85.33 0l-383.976 172.599c-30.16 16.005-29.222 66.407 0 85.229l383.976 202.73c33.93 16.944 55.155 17.882 85.33 0l383.961-202.73c29.221-16.005 28.255-72.042 0-85.229zM511.999 824.135l-392.179-210.933 392.179-165.253 392.193 165.253-392.193 210.933zM511.999 70.797l392.192 180.815c0.662 0.166 35.629 17.786 60.32 30.13 0-22.369-6.932-63.908-25.879-72.746l-383.96-172.612c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.613c-20.383 10.827-25.879 50.873-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.13l392.178-180.816z" />
+<glyph unicode="&#xe921;" glyph-name="lk_shape_set" d="M458.5 782.7v-273h-288.2v273h288.2zM499.5 823.7h-370.3v-355h370.2v355h0.1zM305.7 338.5l137.1-237.4h-274.1l137 237.4zM305.7 420.5l-208-360.5h416.2l-208.2 360.5zM732.7 743.2l23.1-46.8 9.5-19.3 73-10.6-37.3-36.4-15.4-15.1 3.6-21.2 8.8-51.4-65.3 34.3-19.1-10-46.2-24.3 8.8 51.4 3.6 21.3-15.4 15.1-37.3 36.4 72.8 10.6 9.5 19.3 23.3 46.7zM732.7 835.9l-59.9-121.3-133.8-19.4 96.8-94.4-22.8-133.3 119.7 62.9 119.7-62.9-22.9 133.3 96.8 94.4-133.8 19.4-59.8 121.3zM732.7 364.2c72.5 0 131.5-59 131.5-131.5s-59-131.5-131.5-131.5-131.6 59-131.6 131.5 59 131.5 131.6 131.5zM732.7 405.2c-95.3 0-172.6-77.2-172.6-172.5s77.3-172.6 172.6-172.6 172.5 77.2 172.5 172.6c0 95.3-77.3 172.5-172.5 172.5z" />
+<glyph unicode="&#xe922;" glyph-name="lk_align_right" d="M928 960c17.673 0 32-14.327 32-32v0-960c0-17.673-14.327-32-32-32s-32 14.327-32 32v0 960c0 17.673 14.327 32 32 32v0zM352 768h448c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-448c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0zM96 384h704c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-704c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0z" />
+<glyph unicode="&#xe923;" glyph-name="lk_align_center" d="M477.312 384v128h-210.624c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h210.624v157.312c0 19.158 15.53 34.688 34.688 34.688s34.688-15.53 34.688-34.688v0-157.312h210.624c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-210.624v-128h349.312c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-349.312v-157.312c0-19.158-15.53-34.688-34.688-34.688s-34.688 15.53-34.688 34.688v157.312h-349.312c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h349.312z" />
+<glyph unicode="&#xe924;" glyph-name="lk_align_left" d="M96 960c17.673 0 32-14.327 32-32v0-960c0-17.673-14.327-32-32-32s-32 14.327-32 32v0 960c0 17.673 14.327 32 32 32v0zM224 768h448c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-448c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0zM224 384h704c17.673 0 32-14.327 32-32v0-192c0-17.673-14.327-32-32-32v0h-704c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0z" />
+<glyph unicode="&#xe925;" glyph-name="lk_align_h_center" d="M960 480v-64h-896v64h896zM832 704v-512h-256v512h256zM448 832v-768h-256v768h256z" />
+<glyph unicode="&#xe926;" glyph-name="lk_align_bottom" horiz-adv-x="1170" d="M1170.286-27.429c0 20.198-16.374 36.571-36.571 36.571h-1097.143c-20.195-0.003-36.565-16.376-36.565-36.571s16.37-36.568 36.565-36.571h1097.143c20.198 0 36.571 16.374 36.571 36.571v0zM950.857 118.857v512c0 20.198-16.374 36.571-36.571 36.571v0h-219.429c-20.198 0-36.571-16.374-36.571-36.571v0-512c0-20.198 16.374-36.571 36.571-36.571h219.429c20.198 0 36.571 16.374 36.571 36.571v0zM512 118.857v804.571c0 20.198-16.374 36.571-36.571 36.571v0h-219.429c-20.198 0-36.571-16.374-36.571-36.571v0-804.571c0-20.198 16.374-36.571 36.571-36.571v0h219.429c20.198 0 36.571 16.374 36.571 36.571v0z" />
+<glyph unicode="&#xe927;" glyph-name="lk_align_top" horiz-adv-x="1170" d="M1170.286 923.429c0-20.198-16.374-36.571-36.571-36.571h-1097.143c-20.195 0.003-36.565 16.376-36.565 36.571s16.37 36.568 36.565 36.571h1097.143c20.198 0 36.571-16.374 36.571-36.571v0zM950.857 777.143v-512c0-20.198-16.374-36.571-36.571-36.571v0h-219.429c-20.198 0-36.571 16.374-36.571 36.571v0 512c0 20.198 16.374 36.571 36.571 36.571v0h219.429c20.198 0 36.571-16.374 36.571-36.571v0zM512 777.143v-804.571c0-20.198-16.374-36.571-36.571-36.571v0h-219.429c-20.198 0-36.571 16.374-36.571 36.571v0 804.571c0 20.198 16.374 36.571 36.571 36.571v0h219.429c20.198 0 36.571-16.374 36.571-36.571v0z" />
+<glyph unicode="&#xe928;" glyph-name="lk_align_icon" d="M128 64h768v-64h-768zM128 192h768v-64h-768zM128 320h768v-64h-768zM128 448h768v-64h-768zM0 896h64v-896h-64zM960 896h64v-896h-64zM440.2 512l-128 128h399.6l-128-128h184.2l192 192-192 192h-184.2l128-128h-399.6l128 128h-184.2l-192-192 192-192z" />
+<glyph unicode="&#xe929;" glyph-name="lk_font_size" d="M809.664 524.8v0.192h-72.32v-0.192l-64.448-177.024 36.16-99.392 64.448 176.96 72.192-198.4h-128.832l23.68-64.96h128.832l44.608-122.432c2.292-6.209 8.158-10.557 15.040-10.56h49.728c4.408 0.014 7.976 3.59 7.976 8 0 0.988-0.179 1.934-0.506 2.807l0.018-0.055-176.576 485.056zM427.776 884.224h-87.552c-0.008 0-0.017 0-0.026 0-1.163 0-2.154-0.739-2.528-1.773l-0.006-0.019-309.184-849.792c-0.112-0.285-0.177-0.615-0.177-0.96 0-1.485 1.203-2.688 2.688-2.688 0.017 0 0.035 0 0.052 0h74.301c6.857 0.031 12.692 4.371 14.94 10.449l0.036 0.111 79.36 217.984h368.64l79.36-217.984c2.292-6.209 8.158-10.557 15.040-10.56h74.304c0.015 0 0.032 0 0.049 0 1.485 0 2.688 1.203 2.688 2.688 0 0.345-0.065 0.675-0.184 0.979l0.006-0.018-309.312 849.792c-0.38 1.053-1.371 1.792-2.534 1.792-0.009 0-0.018 0-0.027 0h0.001zM228.736 337.472l155.264 426.56 155.2-426.56h-310.4z" />
+<glyph unicode="&#xe92a;" glyph-name="lk_shape_stroke" horiz-adv-x="1066" d="M554.667 576c0.002 0 0.004 0 0.007 0 23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667c-0.002 0-0.005 0-0.007 0v0c-23.561-0.004-42.66-19.105-42.66-42.667s19.099-42.663 42.66-42.667v0zM554.667 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM725.333 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM554.667 234.667c0.002 0 0.004 0 0.007 0 23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667c-0.002 0-0.005 0-0.007 0v0c-23.561-0.004-42.66-19.105-42.66-42.667s19.099-42.663 42.66-42.667v0zM896 832h-682.667c-23.564 0-42.667-19.103-42.667-42.667v-682.667c0-23.564 19.103-42.667 42.667-42.667h682.667c23.564 0 42.667 19.103 42.667 42.667v0 682.667c0 23.564-19.103 42.667-42.667 42.667v0zM853.333 149.333h-597.333v597.333h597.333v-597.333zM384 405.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0z" />
+<glyph unicode="&#xe92b;" glyph-name="lk_angular" d="M858.496 279.68v335.808c58.7 18.539 100.528 72.47 100.608 136.183v0.009c-0.073 78.687-63.841 142.455-142.521 142.528h-0.007c-64.448 0-119.040-43.008-136.576-101.888h-335.808c-18.205 59.311-72.415 101.717-136.556 101.888h-0.020c-78.687-0.073-142.455-63.841-142.528-142.521v-0.007c0.094-64.368 42.785-118.74 101.389-136.442l1.011-0.262v-334.72c-59.555-18.038-102.17-72.421-102.208-136.764v-0.004c0-78.592 63.936-142.464 142.528-142.464 63.872 0 118.080 42.176 136.064 100.288h336.896c18.643-58.546 72.51-100.224 136.12-100.288h0.008c78.664 0.073 142.419 63.805 142.528 142.454v0.010c-0.212 63.771-42.142 117.692-99.915 135.916l-1.013 0.276zM816.576 834.176c45.504 0 82.56-36.992 82.56-82.496-1.795-44.176-38.042-79.31-82.496-79.31s-80.701 35.133-82.491 79.148l-0.005 0.162c0 45.504 37.056 82.56 82.432 82.56zM125.12 751.68c0 45.504 36.992 82.56 82.496 82.56 44.176-1.795 79.31-38.042 79.31-82.496s-35.133-80.701-79.148-82.491l-0.162-0.005c0 0 0 0 0 0-45.552 0-82.487 36.89-82.56 82.425v0.007zM207.808 60.992c-45.597 0-82.56 36.963-82.56 82.56v0c1.795 44.176 38.042 79.31 82.496 79.31s80.701-35.133 82.491-79.148l0.005-0.162c0-45.568-37.056-82.56-82.432-82.56zM675.392 161.28h-326.272c-8.383 63.923-58.022 114.106-120.959 123.236l-0.769 0.092v325.952c63.034 9.254 112.227 58.577 121.19 120.898l0.090 0.766h326.72c9.109-63.695 59.165-113.382 122.276-121.84l0.732-0.080v-325.568c-64-8.32-114.88-59.328-123.008-123.52zM816.832 60.992c-45.597 0-82.56 36.963-82.56 82.56v0c1.795 44.176 38.042 79.31 82.496 79.31s80.701-35.133 82.491-79.148l0.005-0.162c0-45.568-36.992-82.56-82.496-82.56z" />
+<glyph unicode="&#xe92c;" glyph-name="lk_triangle" d="M213.333 106.667c-17.067 0-29.867 4.267-42.667 8.533-29.867 12.8-55.467 38.4-68.267 68.267s-12.8 68.267 0 98.133c0 0 0 4.267 4.267 4.267l298.667 524.8c12.8 21.333 29.867 38.4 51.2 51.2 59.733 34.133 140.8 12.8 174.933-51.2l298.667-520.533s0-4.267 4.267-4.267c4.267-12.8 8.533-25.6 8.533-42.667 0-34.133-8.533-68.267-34.133-93.867-21.333-25.6-55.467-38.4-89.6-42.667h-605.867zM179.2 247.467c-4.267-8.533-4.267-21.333 0-29.867s12.8-17.067 21.333-21.333c4.267-4.267 8.533-4.267 12.8-4.267h597.333c8.533 0 21.333 4.267 25.6 12.8s12.8 21.333 12.8 29.867c0 4.267 0 8.533-4.267 12.8l-298.667 520.533c-8.533 21.333-34.133 29.867-55.467 17.067-8.533-4.267-12.8-8.533-17.067-17.067l-294.4-520.533z" />
+<glyph unicode="&#xe92d;" glyph-name="lk_color_palette" d="M954.757 668.527c-3.61 3.685-8.041 5.583-13.168 5.641-12.515 0.141-26.509-10.942-36.036-20.255l-340.912-331.177c-12.501-12.229-58.516-86.966-60.468-90.143l-7.452-12.121 12.135 7.428c3.217 1.968 78.963 48.374 91.438 60.569l340.911 331.178c15.151 14.815 26.671 35.436 13.552 48.879v0zM741.987 565.522c0-27.609-22.407-50.015-50.015-50.015-27.613 0-50.021 22.406-50.021 50.015 0 27.61 22.408 50.018 50.021 50.018 27.608 0 50.015-22.408 50.015-50.018v0zM216.812 390.469c-27.61 0-50.016 22.403-50.016 50.012 0 27.612 22.406 50.020 50.016 50.020 27.608 0 50.017-22.408 50.017-50.020 0-27.609-22.409-50.012-50.017-50.012v0zM291.838 565.522c0 27.61 22.408 50.018 50.015 50.018 27.61 0 50.018-22.408 50.018-50.018 0-27.609-22.407-50.015-50.018-50.015-27.609 0-50.015 22.382-50.015 50.015v0zM466.896 615.54c0 27.609 22.406 50.015 50.015 50.015 27.612 0 50.019-22.406 50.019-50.015s-22.408-50.018-50.019-50.018c-27.609 0-50.015 22.385-50.015 50.018v0zM853.74 445.916c-22.989-148.967-158.732-299.942-351.947-299.942-36.782 0-75.999 7.275-107.598 19.959-33.607 13.49-48.851 29.354-51.907 39.693-1.594 5.398-3.092 11.296-4.68 17.542-4.65 18.302-9.922 39.045-20.252 56.259-18.376 30.618-44.815 37.045-63.76 37.045-7.166 0-14.798-0.914-22.675-2.712-12.865-2.936-25.363-4.424-37.141-4.424-25.123 0-67.464 6.665-68.765 51.308-6.59 227.942 180.734 351.748 369.298 373.326 13.337 1.525 27.603 2.296 42.403 2.296 53.124 0 111.543-10.001 152.463-26.099 9.248-3.638 14.375-6.016 39.204-18.184 25.653-12.57 46.348-30.432 62.898-47.642l30.158 53.075c-18.027 17.013-40.334 34.407-67.102 47.525-24.89 12.197-31.893 15.514-43.565 20.106-47.339 18.623-114.033 30.194-174.053 30.194-17.027 0-33.545-0.901-49.102-2.678-115.514-13.22-220.687-59.057-296.143-129.075-85.507-79.342-128.872-184.654-125.405-304.555 1.005-34.47 15.117-63.017 40.81-82.556 22.381-17.020 52.431-26.014 86.903-26.014 16.187 0 33.097 1.985 50.268 5.903 3.582 0.818 6.794 1.232 9.548 1.232 11.469 0 16.99-10.044 26.853-48.854 1.654-6.509 3.365-13.241 5.281-19.73 9.434-31.912 39.343-58.784 86.495-77.711 38.319-15.382 85.544-24.203 129.567-24.203 54.104 0 106.474 10.135 155.659 30.123 46.241 18.793 88.502 45.763 125.607 80.165 35.744 33.141 65.271 71.791 87.757 114.884 22.526 43.163 36.888 88.666 42.691 135.269 0.262 2.117 0.509 4.321 0.732 6.548l0.148 1.469v0.057c0.222 2.336 0.404 4.695 0.571 7.065l-61.218-16.661z" />
+<glyph unicode="&#xe92e;" glyph-name="lk_five_pointed" d="M231.867 35.44l99.624 315.316-254.598 217.71h320.431l114.726 293.374 128.642-293.375h306.415l-240.135-217.562 102.703-316.754-296.032 198.443-281.776-197.151zM513.135 272.173l238.918-159.045-81.227 247.13 196.016 176.485h-246.748l-106.382 242.59-94.867-242.59h-258.161l206.984-175.878-78.212-249.077 223.679 160.385z" />
+<glyph unicode="&#xe92f;" glyph-name="lk_ellipse" d="M512 192c233.92 0 416 121.408 416 256s-182.080 256-416 256-416-121.408-416-256c0-134.592 182.080-256 416-256zM512 128c-265.088 0-480 143.296-480 320s214.912 320 480 320c265.088 0 480-143.296 480-320s-214.912-320-480-320z" />
+<glyph unicode="&#xe930;" glyph-name="lk_circle" d="M512-21.312c-259.12 0.182-469.129 210.191-469.312 469.294v0.018c0.182 259.12 210.191 469.129 469.294 469.312h0.018c259.12-0.182 469.129-210.191 469.312-469.294v-0.018c-0.182-259.12-210.191-469.129-469.294-469.312h-0.018zM512 823.168c-1.457 0.020-3.177 0.032-4.9 0.032-207.2 0-375.168-167.968-375.168-375.168s167.968-375.168 375.168-375.168c1.723 0 3.443 0.012 5.161 0.035l-0.261-0.003c205.081 2.764 370.268 169.659 370.268 375.136s-165.187 372.372-370.007 375.133l-0.261 0.003z" />
+<glyph unicode="&#xe931;" glyph-name="lk_rect" d="M128 106.667h768c23.564 0 42.667 19.103 42.667 42.667v0 597.333c0 23.564-19.103 42.667-42.667 42.667v0h-768c-23.564 0-42.667-19.103-42.667-42.667v0-597.333c0-23.564 19.103-42.667 42.667-42.667v0zM170.667 704h682.667v-512h-682.667v512z" />
+<glyph unicode="&#xe932;" glyph-name="lk_right_triangle" d="M870.4 806.4l-691.2-691.2v691.2h691.2zM746.829 755.2h-516.429v-516.403l516.403 516.403z" />
+<glyph unicode="&#xe933;" glyph-name="lk_set_size" d="M874.24 355.502c22.292 2.14 42.977 11.735 59.238 27.566v-282.501c0-48.855-39.762-88.596-88.627-88.596h-634.982c-48.876 0-88.637 39.741-88.637 88.596v634.307c0 48.855 39.762 88.607 88.637 88.607h283.269c-15.247-15.647-25.385-36.291-27.607-59.228h-255.672c-16.21 0-29.399-13.179-29.399-29.379v-634.296c0-16.189 13.189-29.368 29.399-29.368h634.982c16.21 0 29.399 13.179 29.399 29.368v254.925zM890.153 829.553h-300.892c-24.535 0-44.421-19.886-44.421-44.431 0-24.535 19.886-44.421 44.421-44.421h191.212c-1.843-1.341-3.686-2.703-5.345-4.372l-313.457-313.436v193.638c0 24.535-19.886 44.421-44.421 44.421-12.268 0-23.378-4.956-31.416-13.005-8.038-8.059-13.015-19.139-13.015-31.416v-300.902c0-24.525 19.886-44.421 44.421-44.421h300.892c24.535 0 44.421 19.896 44.421 44.442 0 24.525-19.886 44.421-44.421 44.421h-191.191c1.843 1.341 3.676 2.703 5.335 4.362l313.436 313.446v-193.649c0-24.535 19.886-44.421 44.421-44.421 12.268 0 23.378 4.956 31.416 13.005 8.038 8.059 13.015 19.149 13.015 31.416v300.902c0.010 24.525-19.886 44.421-44.411 44.421z" />
+<glyph unicode="&#xe934;" glyph-name="lk_right_arrow" d="M589.523 543.172v154.985l290.635-253.71-290.635-253.591v154.744h-477.064v197.572h477.064zM529.288 830.735v-227.328h-477.064v-318.042h477.064v-227.087l442.488 386.108-442.488 386.35z" />
+<glyph unicode="&#xe935;" glyph-name="lk_lozenge" d="M534.073 948.964l426.553-479.403c5.571-5.578 9.017-13.281 9.017-21.788s-3.445-16.21-9.017-21.789v0l-426.553-479.346c-5.578-5.571-13.281-9.017-21.788-9.017s-16.21 3.445-21.789 9.017v0l-426.553 479.346c-5.571 5.578-9.017 13.281-9.017 21.788s3.445 16.21 9.017 21.789v0l426.553 479.403c5.578 5.571 13.281 9.017 21.788 9.017s16.21-3.445 21.789-9.017v0zM527.815 833.081c-3.98 3.962-9.469 6.411-15.531 6.411s-11.55-2.449-15.531-6.412l0.001 0.001-325.291-369.778c-3.962-3.98-6.411-9.469-6.411-15.531s2.449-11.55 6.412-15.531l-0.001 0.001 325.291-370.005c3.983-3.979 9.484-6.44 15.559-6.44s11.576 2.461 15.559 6.44v0l333.483 370.005c3.979 3.983 6.44 9.484 6.44 15.559s-2.461 11.576-6.44 15.559v0z" />
+<glyph unicode="&#xe936;" glyph-name="lk_image" d="M853.333 746.667h-682.667v-597.333l396.459 396.544c7.721 7.718 18.386 12.492 30.165 12.492s22.445-4.774 30.165-12.492v0l225.877-226.304v427.093zM85.333 789.632c0.168 23.317 19.012 42.176 42.307 42.368h768.701c23.381 0 42.325-18.987 42.325-42.368v-683.264c-0.168-23.317-19.012-42.176-42.307-42.368h-768.701c-23.381 0.024-42.325 18.984-42.325 42.368v0 683.264zM341.333 490.667c-47.128 0-85.333 38.205-85.333 85.333s38.205 85.333 85.333 85.333v0c47.128 0 85.333-38.205 85.333-85.333s-38.205-85.333-85.333-85.333v0z" />
+<glyph unicode="&#xe937;" glyph-name="lk_align_vertical" d="M146.286 45.714h-73.143v804.571h73.143zM950.857 630.857h-731.429v219.429h731.429zM804.571 338.286h-585.143v219.429h585.143zM950.857 45.678h-731.429v219.429h731.429z" />
+<glyph unicode="&#xe938;" glyph-name="lk_to_bottom_layout" d="M500.224 271.417l-468.196 315.79 468.196 315.79 468.082-315.79-468.082-315.79zM184.661 587.264l315.563-212.935 315.506 212.935-315.506 212.821-315.563-212.821zM968.249 308.622l-468.196-315.733-468.196 315.733 178.062 120.036 290.702-195.129 295.253 191.716z" />
+<glyph unicode="&#xe939;" glyph-name="lk_to_top_layout" d="M980.196 587.378l-468.196-315.733-468.196 315.733 468.196 315.733zM512-6.997l-468.139 315.79 166.855 112.583 47.673-70.77-61.952-41.813 315.563-212.878 315.563 212.878-59.051 39.822 47.787 70.77 163.84-110.592z" />
+<glyph unicode="&#xe93a;" glyph-name="lk_delete" d="M820.224 613.329c19.28 0 34.909-15.629 34.909-34.909v0-498.129c-0.079-66.805-54.214-120.939-121.011-121.018h-428.715c-66.805 0.079-120.939 54.214-121.018 121.011v498.114c0 19.28 15.629 34.909 34.909 34.909s34.909-15.629 34.909-34.909v0-498.106c0-28.23 22.97-51.2 51.2-51.2h428.684c28.253 0 51.2 22.97 51.2 51.2v498.106c0 19.28 15.629 34.909 34.909 34.909v0zM410.857 564.899c19.28 0 34.909-15.629 34.909-34.909v0-390.865c0-19.28-15.629-34.909-34.909-34.909s-34.909 15.629-34.909 34.909v390.842c0 19.28 15.629 34.909 34.909 34.909v0zM628.666 564.899c19.28 0 34.909-15.629 34.909-34.909v0-390.865c0-19.28-15.629-34.909-34.909-34.909s-34.909 15.629-34.909 34.909v390.842c0 19.28 15.629 34.909 34.909 34.909v0zM623.988 913.455c56.797-0.066 102.823-46.091 102.889-102.882v-36.288c0-11.636-2.374-22.644-5.935-33.071h167.308c19.28 0 34.909-15.629 34.909-34.909s-15.629-34.909-34.909-34.909v0h-736.977c-19.28 0-34.909 15.629-34.909 34.909s15.629 34.909 34.909 34.909h167.308c-3.635 9.819-5.798 21.159-5.934 32.987l-0.001 0.060v36.329c0.079 56.787 46.1 102.799 102.882 102.865h0.006zM623.988 843.636h-208.454c-18.246 0-33.071-14.825-33.071-33.071v-36.282c0-18.223 14.825-33.071 33.071-33.071h208.454c18.223 0 33.071 14.848 33.071 33.047v36.329c0 18.246-14.848 33.047-33.071 33.047z" />
+<glyph unicode="&#xe93b;" glyph-name="lk_cell_clear" d="M389.6 115.2c-3.8-7.7-15.3-11.5-23-11.5h-3.8c-7.7 0-19.1 3.8-26.8 11.5l-160.7 160.6c-3.8 7.7-7.7 15.3-7.7 26.8s3.8 19.1 11.5 26.8l248.7 248.7c0-15.3 7.7-26.8 19.1-38.3l160.7-160.7c11.5-11.5 23-15.3 34.4-19.1l-252.4-244.8zM710.9 383l160.7 160.7c30.6 30.6 30.6 76.5 0 107.1l-160.7 160.6c-7.7 7.7-15.3 11.5-26.8 15.3-3.8 3.8-15.3 3.8-26.8 3.8s-19.1 0-26.8-3.8c-7.7-3.8-19.1-7.7-26.8-15.3l-156.7-164.5-294.6-294.5c-30.6-30.6-30.6-76.5 0-107.1l160.7-160.7c11.5-11.5 30.6-19.1 45.9-19.1h459v38.2h-382.5l275.4 279.3z" />
+<glyph unicode="&#xe93c;" glyph-name="lk_cell_tree" d="M807.36 209.6c-55.872 0-102.656-38.336-116.352-89.92h-382.272v243.648h384.896c16.77-47.653 61.297-81.242 113.7-81.472h0.028c66.687 0.036 120.75 54.032 120.896 120.69v0.014c-0.073 66.74-54.156 120.823-120.889 120.896h-0.007c-58.724-0.164-107.594-42.15-118.404-97.733l-0.124-0.763h-380.16v141.824c86.531 15.073 151.48 89.616 151.48 179.328 0 100.454-81.434 181.888-181.888 181.888-0.11 0-0.22 0-0.329 0h0.017c-100.614-0.073-182.163-81.599-182.272-182.198v-0.010c0.234-89.48 64.999-163.765 150.201-178.784l1.095-0.16v-509.76h61.632v0.96h382.272c14.057-52.065 60.772-89.781 116.329-89.984h0.023c65.049 2.149 116.964 55.397 116.964 120.77 0 65.329-51.844 118.548-116.634 120.76l-0.202 0.005zM807.36 461.76c32.64 0 59.264-26.56 59.264-59.2-1.512-31.524-27.438-56.511-59.2-56.511s-57.688 24.986-59.195 56.375l-0.005 0.135c0 32.64 26.496 59.2 59.136 59.2zM157.376 745.792c0 66.496 54.144 120.576 120.64 120.576 66.565-0.036 120.512-54.006 120.512-120.576 0-66.592-53.984-120.576-120.576-120.576s-120.576 53.984-120.576 120.576v0zM807.36 29.632c-32.654 0.055-59.104 26.538-59.104 59.2 0 32.695 26.505 59.2 59.2 59.2 0.034 0 0.067 0 0.101 0h-0.005c32.654-0.055 59.104-26.538 59.104-59.2 0-32.695-26.505-59.2-59.2-59.2-0.034 0-0.067 0-0.101 0h0.005z" />
+<glyph unicode="&#xe93d;" glyph-name="lk_cell_add" d="M694.857 539.429c-0.008 0-0.017 0-0.026 0-136.976 0-250.501-100.407-270.989-231.635l-0.199-1.544h-131.072c-0.022 0-0.047 0-0.073 0-17.653 0-31.963 14.311-31.963 31.963 0 0.026 0 0.051 0 0.077v-0.004 416.037h332.654c16.648-40.658 55.911-68.779 101.742-68.779 60.553 0 109.641 49.088 109.641 109.641 0 0.086 0 0.171 0 0.257v-0.013c-0.034 60.568-49.142 109.654-109.714 109.654-45.729 0-84.923-27.976-101.401-67.747l-0.267-0.728h-538.331v-82.286h123.465v-416.037c0-63.122 51.2-114.322 114.249-114.322h131.072c20.719-132.738 134.227-233.106 271.177-233.106 151.484 0 274.286 122.802 274.286 274.286 0 151.471-122.781 274.265-274.247 274.286h-0.002zM841.143 235.447c0-5.049-4.093-9.143-9.143-9.143v0h-98.304v-98.304c0-5.049-4.093-9.143-9.143-9.143v0h-59.392c-5.049 0-9.143 4.093-9.143 9.143v0 98.304h-98.304c-5.049 0-9.143 4.093-9.143 9.143v0 59.392c0 5.047 4.096 9.143 9.143 9.143h98.304v98.304c0 5.047 4.096 9.143 9.143 9.143h59.392c5.047 0 9.143-4.096 9.143-9.143v-98.304h98.304c5.047 0 9.143-4.096 9.143-9.143v-59.392z" />
 </font></defs></svg>

hangtag-ui/src/components/DraftDesign/icons/fonts/style.css

@@ -0,0 +1,189 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?7w83vl');
+  src:  url('fonts/icomoon.eot?7w83vl#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?7w83vl') format('truetype'),
+    url('fonts/icomoon.woff?7w83vl') format('woff'),
+    url('fonts/icomoon.svg?7w83vl#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lk_lozenge:before {
+  content: "\e935";
+}
+.icon-lk_set_size:before {
+  content: "\e933";
+}
+.icon-lk_right_arrow:before {
+  content: "\e934";
+}
+.icon-lk_right_triangle:before {
+  content: "\e932";
+}
+.icon-lk_ellipse:before {
+  content: "\e92f";
+}
+.icon-lk_rect:before {
+  content: "\e931";
+}
+.icon-lk_triangle:before {
+  content: "\e92c";
+}
+.icon-lk_five_pointed:before {
+  content: "\e92e";
+}
+.icon-lk_circle:before {
+  content: "\e930";
+}
+.icon-lk_angular:before {
+  content: "\e92b";
+}
+.icon-lk_shape_stroke:before {
+  content: "\e92a";
+}
+.icon-lk_color_palette:before {
+  content: "\e92d";
+}
+.icon-lk_font_size:before {
+  content: "\e929";
+}
+.icon-lk_align_icon:before {
+  content: "\e928";
+}
+.icon-lk_align_h_center:before {
+  content: "\e925";
+}
+.icon-lk_align_bottom:before {
+  content: "\e926";
+}
+.icon-lk_align_top:before {
+  content: "\e927";
+}
+.icon-lk_align_right:before {
+  content: "\e922";
+}
+.icon-lk_align_center:before {
+  content: "\e923";
+}
+.icon-lk_align_left:before {
+  content: "\e924";
+}
+.icon-lk_shape_set:before {
+  content: "\e921";
+}
+.icon-lk_layer_set:before {
+  content: "\e920";
+}
+.icon-lk_border_angle:before {
+  content: "\e91f";
+}
+.icon-lk_line:before {
+  content: "\e91e";
+}
+.icon-lk_text:before {
+  content: "\e91d";
+}
+.icon-lk_warning_tips:before {
+  content: "\e91c";
+}
+.icon-lk_data_output:before {
+  content: "\e919";
+}
+.icon-lk_data_input:before {
+  content: "\e91a";
+}
+.icon-lk_start:before {
+  content: "\e91b";
+}
+.icon-lk_step_flow:before {
+  content: "\e918";
+}
+.icon-lk_success:before {
+  content: "\e915";
+}
+.icon-lk_failed:before {
+  content: "\e916";
+}
+.icon-lk_running:before {
+  content: "\e917";
+}
+.icon-lk_align_horizontal:before {
+  content: "\e900";
+}
+.icon-lk_align_vertical:before {
+  content: "\e901";
+}
+.icon-lk_close_x:before {
+  content: "\e902";
+}
+.icon-lk_color_eyedropper_tool:before {
+  content: "\e903";
+}
+.icon-lk_color_fill:before {
+  content: "\e904";
+}
+.icon-lk_down:before {
+  content: "\e905";
+}
+.icon-lk_file_template:before {
+  content: "\e906";
+}
+.icon-lk_font_bold:before {
+  content: "\e907";
+}
+.icon-lk_font_color:before {
+  content: "\e908";
+}
+.icon-lk_font_italic:before {
+  content: "\e909";
+}
+.icon-lk_icon_config:before {
+  content: "\e90a";
+}
+.icon-lk_minimap:before {
+  content: "\e90b";
+}
+.icon-lk_open:before {
+  content: "\e90c";
+}
+.icon-lk_plus_copy:before {
+  content: "\e90d";
+}
+.icon-lk_recover:before {
+  content: "\e90e";
+}
+.icon-lk_save:before {
+  content: "\e90f";
+}
+.icon-lk_tips:before {
+  content: "\e910";
+}
+.icon-lk_to_center:before {
+  content: "\e911";
+}
+.icon-lk_undo:before {
+  content: "\e912";
+}
+.icon-lk_zoom_in:before {
+  content: "\e913";
+}
+.icon-lk_zoom_out:before {
+  content: "\e914";
+}

hangtag-ui/src/components/DraftDesign/icons/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?thc33j');
-  src:  url('fonts/icomoon.eot?thc33j#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?thc33j') format('truetype'),
-    url('fonts/icomoon.woff?thc33j') format('woff'),
-    url('fonts/icomoon.svg?thc33j#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?8dhkdr');
+  src:  url('fonts/icomoon.eot?8dhkdr#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?8dhkdr') format('truetype'),
+    url('fonts/icomoon.woff?8dhkdr') format('woff'),
+    url('fonts/icomoon.svg?8dhkdr#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,99 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-lk_cell_clear:before {
+  content: "\e93b";
+}
+.icon-lk_cell_add:before {
+  content: "\e93d";
+}
+.icon-lk_cell_tree:before {
+  content: "\e93c";
+}
+.icon-lk_delete:before {
+  content: "\e93a";
+}
+.icon-lk_to_bottom_layout:before {
+  content: "\e938";
+}
+.icon-lk_to_top_layout:before {
+  content: "\e939";
+}
+.icon-lk_paste:before {
+  content: "\e900";
+}
+.icon-lk_align_horizontal:before {
+  content: "\e901";
+}
+.icon-lk_align_vertical:before {
+  content: "\e937";
+}
+.icon-lk_image:before {
+  content: "\e936";
+}
+.icon-lk_lozenge:before {
+  content: "\e935";
+}
+.icon-lk_set_size:before {
+  content: "\e933";
+}
+.icon-lk_right_arrow:before {
+  content: "\e934";
+}
+.icon-lk_right_triangle:before {
+  content: "\e932";
+}
+.icon-lk_ellipse:before {
+  content: "\e92f";
+}
+.icon-lk_rect:before {
+  content: "\e931";
+}
+.icon-lk_triangle:before {
+  content: "\e92c";
+}
+.icon-lk_five_pointed:before {
+  content: "\e92e";
+}
+.icon-lk_circle:before {
+  content: "\e930";
+}
+.icon-lk_angular:before {
+  content: "\e92b";
+}
+.icon-lk_shape_stroke:before {
+  content: "\e92a";
+}
+.icon-lk_color_palette:before {
+  content: "\e92d";
+}
+.icon-lk_font_size:before {
+  content: "\e929";
+}
+.icon-lk_align_icon:before {
+  content: "\e928";
+}
+.icon-lk_align_h_center:before {
+  content: "\e925";
+}
+.icon-lk_align_bottom:before {
+  content: "\e926";
+}
+.icon-lk_align_top:before {
+  content: "\e927";
+}
+.icon-lk_align_right:before {
+  content: "\e922";
+}
+.icon-lk_align_center:before {
+  content: "\e923";
+}
+.icon-lk_align_left:before {
+  content: "\e924";
+}
+.icon-lk_shape_set:before {
+  content: "\e921";
+}
 .icon-lk_layer_set:before {
   content: "\e920";
 }
@@ -61,12 +154,6 @@
 .icon-lk_running:before {
   content: "\e917";
 }
-.icon-lk_align_horizontal:before {
-  content: "\e900";
-}
-.icon-lk_align_vertical:before {
-  content: "\e901";
-}
 .icon-lk_close_x:before {
   content: "\e902";
 }

hangtag-ui/src/components/DraftDesign/utils/FuncUtil.ts

@@ -1,13 +1,14 @@
-export const nextId = (len = 11)=>{
- return Math.random().toString(36).substring(2,2+len).padEnd(len,'s')
+export const nextId = (len = 11) => {
+  return Math.random().toString(36).substring(2, 2 + len).padEnd(len, 's')
 }
+
 /**
  *
  * @param node 对象
  * @param path 取值路径
  * @return {null|*}
  */
-export function getSafeValue(node:any, path:string) {
+export function getSafeValue(node: any, path: string) {
   if (!node || !path) return null;
 
   const keys = path.split('.');
@@ -23,11 +24,13 @@ export function getSafeValue(node:any, path:string) {
 
   return result;
 }
-export function logInfo(str){
+
+export function logInfo(str) {
   console.info("".concat("\n", " %c ")
     .concat(str, "")
     .concat("\n"), "color: #ffffff; font-size: 14px; background: linear-gradient(45deg, #ff0000 0%, #0092ff 80%);");
 }
+
 export function hexToRGBA(hex) {
   // 去除可能存在的 # 号
   hex = hex.replace('#', '');
@@ -36,27 +39,29 @@ export function hexToRGBA(hex) {
   let r, g, b, a;
 
   if (hex.length === 6) {
-      // 不带透明度的情况，默认完全不透明
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-      a = 1; // 默认完全不透明
+    // 不带透明度的情况，默认完全不透明
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = 1; // 默认完全不透明
   } else if (hex.length === 8) {
-      // 带透明度的情况
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-      a = parseInt(hex.slice(6, 8), 16) / 255; // 转换为 0-1 的透明度值
+    // 带透明度的情况
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16) / 255; // 转换为 0-1 的透明度值
   } else {
-      // 如果格式不正确，返回空字符串或其他处理方式
-      return '';
+    // 如果格式不正确，返回空字符串或其他处理方式
+    return '';
   }
 
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 }
+
 export function toPercentage(number, total) {
   return (number / total) * 100
 }
+
 export function angleToLinearGradient(angle) {
   const radians = angle * Math.PI / 180
 
@@ -67,25 +72,25 @@ export function angleToLinearGradient(angle) {
   // 计算起始点和结束点的坐标
   let x1, y1, x2, y2
   if (angle >= 0 && angle < 90) {
-      x1 = 0
-      y1 = 1
-      x2 = unitVectorX
-      y2 = 0
+    x1 = 0
+    y1 = 1
+    x2 = unitVectorX
+    y2 = 0
   } else if (angle >= 90 && angle < 180) {
-      x1 = 0
-      y1 = 1
-      x2 = 1
-      y2 = -unitVectorY
+    x1 = 0
+    y1 = 1
+    x2 = 1
+    y2 = -unitVectorY
   } else if (angle >= 180 && angle < 270) {
-      x1 = 1
-      y1 = 0
-      x2 = -unitVectorX
-      y2 = 1
+    x1 = 1
+    y1 = 0
+    x2 = -unitVectorX
+    y2 = 1
   } else {
-      x1 = 1
-      y1 = 0
-      x2 = 0
-      y2 = unitVectorY
+    x1 = 1
+    y1 = 0
+    x2 = 0
+    y2 = unitVectorY
   }
 
   // 将结束点的位置向内移动一点，以实现平滑的过渡
@@ -100,6 +105,7 @@ export function angleToLinearGradient(angle) {
   y2 *= 100
   return {x1: x1 + '%', y1: y1 + '%', x2: x2 + '%', y2: y2 + '%'}
 }
+
 /**
  * 过滤不安全的HTML标签和属性，以防止XSS攻击。
  *
@@ -108,7 +114,7 @@ export function angleToLinearGradient(angle) {
  */
 export function filterUnsafeHtml(html) {
 
-  if(!html){
+  if (!html) {
     return html;
   }
   // 过滤掉不安全的 HTML 标签和属性
@@ -133,35 +139,36 @@ export function filterUnsafeHtml(html) {
 
   return html;
 }
-export function  calculateGradientColor(startColor, endColor, steps) {
+
+export function calculateGradientColor(startColor, endColor, steps) {
   if (startColor && endColor) {
-      startColor = startColor.trim()
-      endColor = endColor.trim()
-      // 将十六进制颜色值转换成 RGBA 格式
-      startColor = (startColor.charAt(0) === '#') ? hexToRGBA(startColor) : startColor
-      endColor = (endColor.charAt(0) === '#') ? hexToRGBA(endColor) : endColor
-      // 解析开始颜色和结束颜色的 RGBA 值
-      const startRGBA = startColor.match(/\d+/g).map(Number)
-      const endRGBA = endColor.match(/\d+/g).map(Number)
+    startColor = startColor.trim()
+    endColor = endColor.trim()
+    // 将十六进制颜色值转换成 RGBA 格式
+    startColor = (startColor.charAt(0) === '#') ? hexToRGBA(startColor) : startColor
+    endColor = (endColor.charAt(0) === '#') ? hexToRGBA(endColor) : endColor
+    // 解析开始颜色和结束颜色的 RGBA 值
+    const startRGBA = startColor.match(/\d+/g).map(Number)
+    const endRGBA = endColor.match(/\d+/g).map(Number)
 
-      // 计算每个颜色通道的增量
-      const deltaRGBA = [
-          (endRGBA[0] - startRGBA[0]) / (steps - 1),
-          (endRGBA[1] - startRGBA[1]) / (steps - 1),
-          (endRGBA[2] - startRGBA[2]) / (steps - 1),
-          (endRGBA[3] - startRGBA[3]) / (steps - 1)
-      ]
+    // 计算每个颜色通道的增量
+    const deltaRGBA = [
+      (endRGBA[0] - startRGBA[0]) / (steps - 1),
+      (endRGBA[1] - startRGBA[1]) / (steps - 1),
+      (endRGBA[2] - startRGBA[2]) / (steps - 1),
+      (endRGBA[3] - startRGBA[3]) / (steps - 1)
+    ]
 
-      // 构建中间颜色的 RGBA 值数组
-      const gradientColors = Array.from({length: steps}, (_, i) => {
-          const r = Math.round(startRGBA[0] + deltaRGBA[0] * i)
-          const g = Math.round(startRGBA[1] + deltaRGBA[1] * i)
-          const b = Math.round(startRGBA[2] + deltaRGBA[2] * i)
-          const a = 1 // Convert alpha to range [0, 1]
-          return `rgba(${r}, ${g}, ${b}, ${a})`
-      })
-      console.log('gradientColors####', gradientColors)
-      return gradientColors
+    // 构建中间颜色的 RGBA 值数组
+    const gradientColors = Array.from({length: steps}, (_, i) => {
+      const r = Math.round(startRGBA[0] + deltaRGBA[0] * i)
+      const g = Math.round(startRGBA[1] + deltaRGBA[1] * i)
+      const b = Math.round(startRGBA[2] + deltaRGBA[2] * i)
+      const a = 1 // Convert alpha to range [0, 1]
+      return `rgba(${r}, ${g}, ${b}, ${a})`
+    })
+    console.log('gradientColors####', gradientColors)
+    return gradientColors
   }
   return []
 
@@ -189,3 +196,70 @@ export function mergeDeepObject(...objects) {
   });
   return result;
 }
+
+export function objectHasKey(obj, path) {
+  if (!obj || !path) return null;
+
+  const keys = path.split('.');
+  let result = obj;
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (result.hasOwnProperty(k) && i === keys.length - 1) {
+      return true;
+    }
+    if (result[k] !== undefined) {
+      result = result[k];
+    }
+  }
+  return false;
+}
+
+export function toHighlightText(originalText: string, keyword: string) {
+  if (originalText && keyword) {
+    const keyArray = parseKeywordList(keyword)
+    if (keyArray.length > 0) {
+      const arr = originalText.split("")
+      let highlightedText = ""
+      arr.forEach(s => {
+        // @ts-ignore
+        if (s && keyArray.includes(s.toUpperCase())) {
+          highlightedText += `<span style="color: #ff0000">${s}</span>`
+        } else {
+          highlightedText += `${s}`;
+        }
+      })
+      // 将高亮后的 HTML 插入到元素中
+      return highlightedText;
+    }
+  }
+  return originalText;
+}
+
+export const parseKeywordList = (keyword: string): [] => {
+  //@ts-ignore
+  const arr = [];
+  if (keyword) {
+    // 去空串
+    keyword = keyword.replace(/\s/g, '');
+    const strings = keyword.toUpperCase().split("");
+    strings.forEach(s => {
+      //@ts-ignore
+      if (!arr.includes(s)) {
+        arr.push(s);
+      }
+    })
+  }
+  //@ts-ignore
+  return arr;
+}
+
+/**
+ * 计算两个点之间的向量差 只计算最大差值，水平或者垂直的向量差
+ * @param pointA {x: number, y: number}
+ * @param pointB
+ */
+export function calculateVectorDifference(pointA : {x: number, y: number}, pointB: {x: number, y: number}) {
+
+
+  return {x: pointA.x - pointB.x, y: pointA.y - pointB.y };
+}

hangtag-ui/src/components/UploadFile/src/useUpload.ts

@@ -25,7 +25,7 @@ export const useUpload = () => {
         // 1.4. 记录文件信息到后端（异步）
         createFile(presignedInfo, fileName, options.file)
         // 通知成功，数据格式保持与后端上传的返回结果一致
-        return { data: presignedInfo.url }
+        return { data: presignedInfo.url , filename: options.file.name}
       })
     } else {
       // 模式二：后端上传
@@ -34,7 +34,10 @@ export const useUpload = () => {
         FileApi.updateFile({ file: options.file })
           .then((res) => {
             if (res.code === 0) {
-              resolve(res)
+              resolve({
+                ...res,
+                filename: options.file.name
+              })
             } else {
               reject(res)
             }

hangtag-ui/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { toNumber } from 'lodash-es'
+import {toNumber} from 'lodash-es'
 
 /**
  *
@@ -215,8 +215,8 @@ export const getUrlNumberValue = (key: string, urlStr: string = location.href):
  * @param prop 字段名称
  * @param order 顺序
  */
-export const buildSortingField = ({ prop, order }) => {
-  return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' }
+export const buildSortingField = ({prop, order}) => {
+  return {field: prop, order: order === 'ascending' ? 'asc' : 'desc'}
 }
 
 // ========== NumberUtils 数字方法 ==========
@@ -450,7 +450,8 @@ export function jsonParse(str: string) {
   }
 }
 
-export function copyToClip(content:string,calback = ()=>{}) {
+export function copyToClip(content: string, calback = () => {
+}) {
   const aux = document.createElement("input");
   aux.setAttribute("value", content);
   document.body.appendChild(aux);
@@ -459,3 +460,16 @@ export function copyToClip(content:string,calback = ()=>{}) {
   document.body.removeChild(aux);
   calback()
 }
+
+/**
+ * #  基本为固定 本地上传的是当前服务器的的地址，部署后将该地址替换为服务器的地址
+ * 'http://127.0.0.1:48080'
+ * @param domain 当前服务的域名
+ * @param url 完整的 url
+ */
+export function replaceDomain(domain, url) {
+  if (domain && url) {
+    return url.replace(`http://127.0.0.1:48080`, domain)
+  }
+  return url
+}

hangtag-ui/src/views/Home/Index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
+    <DraftDesign />
     <el-card shadow="never">
+
+
       <el-skeleton :loading="loading" animated>
         <el-row :gutter="16" justify="space-between">
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
@@ -175,6 +178,7 @@
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { formatTime } from '@/utils'
+import DraftDesign from '@/components/DraftDesign/index.vue'
 
 import { useUserStore } from '@/store/modules/user'
 import { useWatermark } from '@/hooks/web/useWatermark'

hangtag-ui/src/views/oms/order/index.vue

@@ -3,7 +3,9 @@
 </script>
 
 <template>
+  <div>
 
+  </div>
 </template>
 
 <style scoped lang="scss">

hangtag-ui/src/views/oms/shapetemplate/ShapeTemplateForm.vue

@@ -0,0 +1,103 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="形状类型" prop="shapeType">
+        <el-select v-model="formData.shapeType" placeholder="请选择形状类型">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="初始数据 json" prop="initData">
+        <el-input v-model="formData.initData" type="textarea" placeholder="请输入初始数据 json" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ShapeTemplateApi, ShapeTemplateVO } from '@/api/oms/shapetemplate'
+
+/** 图形模板管理  表单 */
+defineOptions({ name: 'ShapeTemplateForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  shapeType: undefined,
+  name: undefined,
+  initData: undefined,
+})
+const formRules = reactive({
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ShapeTemplateApi.getShapeTemplate(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ShapeTemplateVO
+    if (formType.value === 'create') {
+      await ShapeTemplateApi.createShapeTemplate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ShapeTemplateApi.updateShapeTemplate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    shapeType: undefined,
+    name: undefined,
+    initData: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>

hangtag-ui/src/views/oms/shapetemplate/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="形状类型" prop="shapeType">
+        <el-select
+          v-model="queryParams.shapeType"
+          placeholder="请选择形状类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['oms:shape-template:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['oms:shape-template:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="形状类型" align="center" prop="shapeType" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="初始数据 json" align="center" prop="initData" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['oms:shape-template:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['oms:shape-template:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ShapeTemplateForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ShapeTemplateApi, ShapeTemplateVO } from '@/api/oms/shapetemplate'
+import ShapeTemplateForm from './ShapeTemplateForm.vue'
+
+/** 图形模板管理  列表 */
+defineOptions({ name: 'ShapeTemplate' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ShapeTemplateVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  shapeType: undefined,
+  name: undefined,
+  initData: undefined,
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ShapeTemplateApi.getShapeTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ShapeTemplateApi.deleteShapeTemplate(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ShapeTemplateApi.exportShapeTemplate(queryParams)
+    download.excel(data, '图形模板管理 .xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

hangtag-ui/types/env.d.ts

@@ -23,6 +23,7 @@ interface ImportMetaEnv {
   readonly VITE_DROP_CONSOLE: string
   readonly VITE_SOURCEMAP: string
   readonly VITE_OUT_DIR: string
+  readonly LOCAL_DOMAIN: string
 }
 
 declare global {

sql/mysql/20240812/图稿形状模板管理.sql

@@ -0,0 +1,30 @@
+
+-- 图稿形状模板管理 建表语句
+DROP TABLE IF EXISTS oms_shape_template;
+CREATE TABLE oms_shape_template(
+    id BIGINT(19) NOT NULL AUTO_INCREMENT  COMMENT 'id' ,
+    shape_type VARCHAR(128)    COMMENT '形状类型' ,
+    name VARCHAR(32)    COMMENT '名称' ,
+    init_data VARCHAR(3072)    COMMENT '初始数据 json' ,
+    creator VARCHAR(64)    COMMENT '创建者' ,
+    create_time DATETIME NOT NULL  DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间' ,
+    updater VARCHAR(64)    COMMENT '更新者' ,
+    update_time DATETIME NOT NULL  DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间' ,
+    deleted BIT(1) NOT NULL  DEFAULT 0 COMMENT '是否删除' ,
+    tenant_id BIGINT(19) NOT NULL   COMMENT '租户编号' ,
+    PRIMARY KEY (id)
+) COMMENT = '图稿形状模板管理 ';
+
+
+INSERT INTO `oms_shape_template`(`id`, `shape_type`, `name`, `init_data`, `creator`, `create_time`, `updater`, `update_time`, `deleted`, `tenant_id`) VALUES (1, 'vue-node_shape_image', '低温烫120.jpg', '{\"key\":\"vue-node_shape_image\",\"shape\":\"vue-node_shape_image\",\"data\":{\"label\":\"\",\"width\":80,\"height\":80,\"shape\":10,\"style\":{\"shape\":{\"href\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/b27fdce1dd85bfede06baadc9fa5a3ea51fae9478f8da7d7718aaf86ed55602a.jpg\"}}},\"icon\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/b27fdce1dd85bfede06baadc9fa5a3ea51fae9478f8da7d7718aaf86ed55602a.jpg\",\"label\":\"低温烫120.jpg\"}', '1', '2024-07-25 21:19:54', '1', '2024-07-25 21:19:54', b'0', 1);
+INSERT INTO `oms_shape_template`(`id`, `shape_type`, `name`, `init_data`, `creator`, `create_time`, `updater`, `update_time`, `deleted`, `tenant_id`) VALUES (2, 'vue-node_shape_image', '高温烫210.jpg', '{\"key\":\"vue-node_shape_image\",\"shape\":\"vue-node_shape_image\",\"data\":{\"label\":\"\",\"width\":80,\"height\":80,\"shape\":10,\"style\":{\"shape\":{\"href\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/4e968ee42c70586242780cda44d7d45eaae3f4d9498889d68c248f220d00bdb7.jpg\"}}},\"icon\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/4e968ee42c70586242780cda44d7d45eaae3f4d9498889d68c248f220d00bdb7.jpg\",\"label\":\"高温烫210.jpg\"}', '1', '2024-07-25 21:43:40', '1', '2024-07-25 21:43:40', b'0', 1);
+INSERT INTO `oms_shape_template`(`id`, `shape_type`, `name`, `init_data`, `creator`, `create_time`, `updater`, `update_time`, `deleted`, `tenant_id`) VALUES (3, 'vue-node_shape_image', '中温烫160.jpg', '{\"key\":\"vue-node_shape_image\",\"shape\":\"vue-node_shape_image\",\"data\":{\"label\":\"\",\"width\":80,\"height\":80,\"shape\":10,\"style\":{\"shape\":{\"href\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/01ee612e334f0e059a0295793d538213c8cca7cc7f89e96106b4a568f8c7c29e.jpg\"}}},\"icon\":\"http://127.0.0.1:48080/admin-api/infra/file/23/get/01ee612e334f0e059a0295793d538213c8cca7cc7f89e96106b4a568f8c7c29e.jpg\",\"label\":\"中温烫160.jpg\"}', '1', '2024-07-25 21:45:47', '1', '2024-07-25 21:45:47', b'0', 1);
+
+
+--- 菜单语句
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2795, '图稿形状模板管理', '', 2, 0, 2758, 'shape-template', '', 'oms/shapetemplate/index', 'ShapeTemplate', 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '1', '2024-08-12 00:45:44', b'0');
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2796, '图稿形状模板管理 查询', 'oms:shape-template:query', 3, 1, 2795, '', '', '', NULL, 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '', '2024-08-12 00:45:47', b'0');
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2797, '图稿形状模板管理 创建', 'oms:shape-template:create', 3, 2, 2795, '', '', '', NULL, 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '', '2024-08-12 00:45:50', b'0');
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2798, '图稿形状模板管理 更新', 'oms:shape-template:update', 3, 3, 2795, '', '', '', NULL, 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '', '2024-08-12 00:45:52', b'0');
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2799, '图稿形状模板管理 删除', 'oms:shape-template:delete', 3, 4, 2795, '', '', '', NULL, 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '', '2024-08-12 00:45:55', b'0');
+INSERT INTO `system_menu`(`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `component_name`, `status`, `visible`, `keep_alive`, `always_show`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (2800, '图稿形状模板管理 导出', 'oms:shape-template:export', 3, 5, 2795, '', '', '', NULL, 0, b'1', b'1', b'1', '', '2024-07-25 20:19:26', '', '2024-08-12 00:46:00', b'0');