24kycj
2e6578247e
- lib/platform：网页 Electron 统一 bridge/web/electron，子目录 API 基路径、返回首页跳站点根、路径末尾斜杠兼容 - index/design*.web.html：网页入口，web.js 加缓存参数避免旧脚本缓存 - api：PHP 读写 soon；文档说明目录权限与 Nginx - lib/design*、lib/index：与 platformBridge 对接及网页侧逻辑 - 公共资源 JsBarcode/jr-qrcode；文档与 package/README/.gitignore 等同步更新 Co-authored-by: Cursor <cursoragent@cursor.com>
878 lines
49 KiB
HTML
878 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Soon Design</title>
|
|
<link rel="stylesheet" href="./layui/css/layui.css">
|
|
<link rel="stylesheet" href="./public/css/design.css">
|
|
<style>
|
|
/* ==================================================
|
|
1. 全局布局 (Flex 自适应：完美兼容 Windows/Mac)
|
|
================================================== */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
.layui-fluid,
|
|
.layui-row {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #1E1E1E;
|
|
/* 画布底色保持深黑 */
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* --- 左侧主区域 --- */
|
|
.col-left {
|
|
height: 100%;
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border-right: 1px solid #1E1E1E;
|
|
/* 分隔线 */
|
|
}
|
|
|
|
/* --- 右侧属性栏 (修复：恢复灰色背景) --- */
|
|
.col-right {
|
|
background-color: #31373D;
|
|
/* 【颜色修复】 */
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --- 顶部工具栏 (修复：恢复灰色背景) --- */
|
|
.tools-bar {
|
|
background-color: #31373D;
|
|
/* 【颜色修复】 */
|
|
flex-shrink: 0;
|
|
/* 保持你原有的高度或内边距设定，如果有的话 */
|
|
}
|
|
|
|
/* --- 修复切换按钮被挤压换行的问题 --- */
|
|
#version_change {
|
|
white-space: nowrap;
|
|
/* 【按钮修复】禁止文字换行 */
|
|
flex-shrink: 0;
|
|
/* 【按钮修复】禁止被压缩 */
|
|
min-width: 60px;
|
|
/* 给一个最小宽度 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 确保所有顶部图标容器不被压缩 */
|
|
.img-warp {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- 中间主要容器 --- */
|
|
.container {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
height: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 左侧工具箱 */
|
|
.container .left {
|
|
width: 50px;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
background-color: #31373D;
|
|
/* 保持灰色 */
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.container .left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 右侧画布区域 */
|
|
.container .right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background-color: #1E252D;
|
|
/* 画布背景深色 */
|
|
position: relative;
|
|
}
|
|
|
|
/* 画布容器 */
|
|
#canvas-div {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
/* 画布滚动包裹层 */
|
|
.canvas-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
position: relative;
|
|
}
|
|
|
|
/* 底部状态栏 (X: Y:) */
|
|
.footer {
|
|
height: 30px;
|
|
background-color: #31373D;
|
|
color: #ccc;
|
|
padding-left: 10px;
|
|
flex-shrink: 0;
|
|
z-index: 100;
|
|
border-top: 1px solid #1E1E1E;
|
|
|
|
/* 2. 使用 Flex 布局来控制文字位置 */
|
|
display: flex;
|
|
align-items: center;
|
|
/* 让文字垂直居中 */
|
|
|
|
/* 3. 【核心修复】增加底部内边距，把文字往上顶 */
|
|
/* 这样文字距离窗口底部就有 10px 的安全距离，不会被切掉 */
|
|
padding-bottom: 5px;
|
|
|
|
/* 4. 兼容性设置 */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ==================================================
|
|
2. 对象列表样式 (Flex 修复：序号靠右，不遮挡)
|
|
================================================== */
|
|
.obj_list {
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
/* 这里的背景色也跟随父容器，或者设为透明 */
|
|
background-color: #31373D;
|
|
}
|
|
|
|
.layer-row {
|
|
display: flex !important;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 36px;
|
|
padding: 0 5px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #444;
|
|
/* 线条稍微深一点 */
|
|
background-color: transparent;
|
|
/* 默认透明，显示底色 */
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.layer-row:hover {
|
|
background-color: #4A525A;
|
|
/* 悬停颜色稍微亮一点 */
|
|
}
|
|
|
|
.layer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 180px;
|
|
}
|
|
|
|
.layer-index {
|
|
min-width: 24px;
|
|
text-align: center;
|
|
color: #999;
|
|
border-left: 1px solid #444;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
/* ==================================================
|
|
3. 标尺与其他基础样式 (保留)
|
|
================================================== */
|
|
|
|
/* 1. 保留：背景图样式 (不动) */
|
|
#source_front,
|
|
#source_front2,
|
|
#source_back {
|
|
width: 2787px;
|
|
height: 2787px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ruler-container {
|
|
position: relative;
|
|
background-color: #2C2C2C;
|
|
border: 1px solid #1E1E1E;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 2. 替换：标尺样式 (改为更明显的颜色 + 增加鼠标手势) */
|
|
.ruler-horizontal {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 20px;
|
|
/* 改为更明显的颜色，不透明度提高到 0.9 */
|
|
background-color: rgba(44, 44, 44, 0.9) !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
z-index: 1000;
|
|
/* 鼠标移上去显示上下调整箭头，提示可拖拽 */
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.ruler-vertical {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
/* 改为更明显的颜色，不透明度提高到 0.9 */
|
|
background-color: rgba(44, 44, 44, 0.9) !important;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
z-index: 1000;
|
|
/* 鼠标移上去显示左右调整箭头 */
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.ruler-corner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: rgba(44, 44, 44, 0.9) !important;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* 3. 新增：拖拽过程中的辅助线样式 */
|
|
.guide-line-drag {
|
|
position: absolute;
|
|
background-color: #0066FF;
|
|
/* 深蓝色高亮 */
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
/* 让鼠标穿透，不影响拖拽事件 */
|
|
box-shadow: 0 0 6px #0066FF;
|
|
/* 增强发光效果 */
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-fluid main" style="display: none">
|
|
<div class="layui-row" style="height: 100%;width: 100%">
|
|
<div class="col-right">
|
|
<div class="tools-bar right-bar">
|
|
|
|
<div class="mode2">
|
|
<div class="tool">
|
|
<img src="public/images/top24.png" id="top_alignment" language="t" zh="顶部对齐" ozh="頂部對齊"
|
|
en="Top Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/bottom24.png" id="bottom_alignment" language="t" zh="底部对齐"
|
|
ozh="底部對齊" en="Bottom Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_y24.png" id="center_y_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
<div class="mode2" style="margin-left: 2px;border-right: 0px">
|
|
<div class="tool">
|
|
<img src="public/images/left24.png" id="left_alignment" language="t" zh="左对齐" ozh="左對齊"
|
|
en="Left Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/right24.png" id="right_alignment" language="t" zh="右对齐" ozh="右對齊"
|
|
en="Right Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_x24.png" id="center_x_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="object_attribute">
|
|
<div class="component-title" zh="对象属性" ozh="對象屬性" en="Object Properties" language="m"></div>
|
|
<div>
|
|
<div class="component-line">
|
|
<span class="name" zh="类型：" ozh="類型：" en="Type:" language="m"></span>
|
|
<span id="component_type" zh="背景" ozh="背景" en="Background" language="m"></span>
|
|
</div>
|
|
<div id="base_control">
|
|
<div class="component-line">
|
|
<div class="ui-button" id="up_obj" language="m" zh="移至上层" ozh="移至上層" en="upper layer">
|
|
</div>
|
|
<div class="ui-button" id="down_obj" language="m" zh="移至下层" ozh="移至下層" en="upper layer">
|
|
</div>
|
|
<div class="pic_bg" id="set_bg" language="m" zh="设为背景" ozh="設爲背景"
|
|
en="Set as background">
|
|
</div>
|
|
<!-- <div class="pic_bg" id="vertical_obj" language="m" zh="垂直旋转" ozh="垂直旋轉" en="vertical rotation">
|
|
</div>
|
|
<div class="pic_bg" id="align_obj" language="m" zh="水平旋转" ozh="水平旋轉" en="vertical rotation">
|
|
</div> -->
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">X:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_x" />
|
|
|
|
<span class="name">Y:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_y" />
|
|
<div style="height: 20px;width: 20px;display: inline-block;" class="ui-radio" id="lock">
|
|
<img src="public/images/unlock20.png" id="lock_img">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">H:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_h" />
|
|
<span class="name">W:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_w" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="角度：" ozh="角度：" en="Angle"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_r" />
|
|
<img src="public/images/rotate20.png" language="t" zh="旋转90°" ozh="旋轉90°"
|
|
en="Rotate 90°" id="rotate" />
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="text_black" id="text_black" class="radio">
|
|
</div> -->
|
|
</div>
|
|
<div id="pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="pic_black" id="pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="out_pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_pic_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="out_pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="out_pic_black" id="out_pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" style="position: relative;top:-45px" language="m" zh="文本：" ozh="文本："
|
|
en="Text:">文本:</span>
|
|
<textarea rows="3" style="height: 60px" id="text_text"></textarea>
|
|
</div>
|
|
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Fonts:"></span>
|
|
<select class="ui-select" id="text_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="text_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="text_color" class="input_color">
|
|
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="text_back_color" class="input_color">
|
|
<div class="transparent-button" id="text_back_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
</div>
|
|
<div id="circle_text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" style="position: relative;top:-45px" language="m" zh="圆形文本："
|
|
ozh="圆形文本：" en="Circle Text:">圆形文本:</span>
|
|
<textarea rows="3" style="height: 60px" id="circle_text_text"></textarea>
|
|
</div>
|
|
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Fonts:"></span>
|
|
<select class="ui-select" id="circle_text_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="中心辅助调整圆弧：" ozh="中心輔助調整圓弧："
|
|
en="Adjust the arc using the center:"></span>
|
|
<input type="checkbox" name="circle_text_center" id="circle_text_center" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<div id="circle_text_size"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span>
|
|
<div id="circle_text_diameter"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="circle_text_color" class="input_color">
|
|
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="circle_text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="circle_text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="circle_text_back_color" class="input_color">
|
|
<div class="transparent-button" id="circle_text_back_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div> -->
|
|
</div>
|
|
<div id="out_text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_text_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="out_text_text" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="out_text_font_family">
|
|
</select>
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="out_text_size" />
|
|
</div>
|
|
<div class="component-line"
|
|
style="margin-left: 2px;display: flex; align-items: center;gap: 10px;">
|
|
<span class="name" language="m" zh="对齐方式：" ozh="對齊方式：" en="Alignment:"></span>
|
|
<div class="mode2"
|
|
style="margin-left: 2px;border: none;display: flex; align-items: center;gap: 10px;">
|
|
<div class="tool">
|
|
<img src="public/images/left24.png" id="out_left_alignment" language="t"
|
|
zh="左对齐" ozh="左對齊" en="Left Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/right24.png" id="out_right_alignment" language="t"
|
|
zh="右对齐" ozh="右對齊" en="Right Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_x24.png" id="out_center_alignment" language="t"
|
|
zh="居中对齐" ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="out_text_color" class="input_color">
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="out_text_back_color" class="input_color">
|
|
<div class="transparent-button" id="out_text_back_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="如果文本被截断，则作业失败" ozh="如果文本被截斷，則作業失敗"
|
|
en="If the text is truncated, the operation fails"></span>
|
|
<input type="checkbox" name="exceed" id="exceed" class="radio">
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="自动换行：" ozh="自動換行：" en="Automatic line feed:"></span>
|
|
<input type="checkbox" name="autoWrap" id="autoWrap" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="固定大小：" ozh="固定大小：" en="Fixed Size:"></span>
|
|
<input type="checkbox" name="fixSize" id="fixSize" class="radio">
|
|
</div>
|
|
</div>
|
|
<div id="rect_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="rect_color" class="input_color">
|
|
<div class="transparent-button" id="rect_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="rect_stroke" class="input_color">
|
|
<div class="transparent-button" id="rect_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="粗细：" ozh="粗細：" en="Thickness:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="rect_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="圆角：" ozh="圓角：" en="Radius:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px" id="rect_radius" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="rect_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="line_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="line_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="虚线间距：" ozh="虛線間距：" en="Spacing:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="line_dist" />
|
|
</div>
|
|
</div>
|
|
<div id="circle_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="circle_color" class="input_color">
|
|
<div class="transparent-button" id="circle_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="circle_stroke" class="input_color">
|
|
<div class="transparent-button" id="circle_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="粗细：" ozh="粗細：" en="Thickness:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="circle_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="透明度：" ozh="透明度：" en="Opacity:"></span>
|
|
<div id="circle_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="qrcode_Controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="qrcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="qrcode_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="qrcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
</div>
|
|
<div id="barcode_controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="barcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="barcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="取消文字：" ozh="取消文字：" en="Cancel text:"></span>
|
|
<input type="checkbox" name="barcode_show" id="barcode_show" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="barcode_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="barcode_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="barcode_color" class="input_color">
|
|
</div>
|
|
</div>
|
|
<div id="counter_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="count_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
|
|
style="width: 50%" id="count_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="counter_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="起始：" ozh="起始：" en="Start:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_start" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="增量：" ozh="增量：" en="Incremental:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_add" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="obj_list">
|
|
<div class="component-title" language="m" zh="对象列表" ozh="對象列錶" en="Object List"></div>
|
|
<div class="obj_list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-left" style="height: 100%">
|
|
<div class="tools-bar left-bar">
|
|
<div class="mode-left">
|
|
<div class="mode-warp">
|
|
<div class="img-warp" id="new">
|
|
<img src="public/images/newfile24.png" language="t" zh="新建模板 CTRL+N" ozh="新建模闆"
|
|
en="New template" />
|
|
</div>
|
|
<div class="img-warp" id="open">
|
|
<img src="public/images/open24.png" language="t" zh="打开模板 CTRL+O" ozh="打開模闆 CTRL+O"
|
|
en="Open Template CTRL+O" />
|
|
</div>
|
|
|
|
<div class="img-warp" id="save">
|
|
<img src="public/images/save24.png" language="t" zh="保存模板 CTRL+S" ozh="保存模闆 CTRL+S"
|
|
en="Save Template CTRL+S" />
|
|
</div>
|
|
<div class="img-warp" id="output">
|
|
<img src="public/images/output24.png" language="t" zh="另存为 CTRL+SHIFT+S"
|
|
ozh="另存為 CTRL+SHIFT+S" en="Save as CTRL+SHIFT+S" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/previous24.png" id="previous" language="t" zh="撤销 CTRL+Z"
|
|
ozh="撤銷 CTRL+Z" en="Revocation CTRL+Z" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/next24.png" id="next" language="t" zh="恢复 CTRL+Y"
|
|
ozh="恢復 CTRL+Y" en="Recovery CTRL+Y" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/clean24.png" id="clean" language="t" zh="清空 CTRL+SHIFT+DEL"
|
|
ozh="清空 CTRL+SHIFT+DEL" en="Clear CTRL+SHIFT+DEL" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/delete24.png" id="delete" language="t" zh="删除 CTRL+DEL"
|
|
ozh="刪除 CTRL+DEL" en="Delete CTRL+DEL" />
|
|
</div>
|
|
<div class="img-warp" id="copy">
|
|
<img src="public/images/copy24.png" language="t" zh="复制 CTRL+C" ozh="複製 CTRL+C"
|
|
en="Copy CTRL+C" />
|
|
</div>
|
|
<div class="img-warp" id="paste">
|
|
<img src="public/images/paste24.png" language="t" zh="粘贴 CTRL+V" ozh="粘貼 CTRL+V"
|
|
en="Paste CTRL+V" />
|
|
</div>
|
|
<div class="ui-button ui-button-active img-warp img-warp1" id="front_side">
|
|
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
|
</div>
|
|
<div class="ui-button img-warp img-warp1" id="back_side">
|
|
<span language="m" zh="背面" ozh="背面" en="Back"></span>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<div class="ui-button img-warp" id="version_change">
|
|
<span language="m" zh="切换" ozh="切换" en="Swap"></span>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/about24.png" id="about" language="t" zh="关于我们" ozh="關於我們"
|
|
en="About Us" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/help24.png" id="help" language="t" zh="帮助文档" ozh="幫助文檔"
|
|
en="Help" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<select class="ui-select" id="language_select" style="margin-left: 10px">
|
|
<option value='zh'>中文-简体</option>
|
|
<option value='ozh'>中文-繁體</option>
|
|
<option value='en'>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mode3">
|
|
<button type="button" class="layui-btn layui-btn-primary white" id="display" language="m"
|
|
zh="预览效果" ozh="預覽效果" en="Display"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="tool" language="t" zh="图片" ozh="圖片" en="Picture">
|
|
<img src="public/images/images.svg" id="addPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成图片" ozh="合成圖片" en="Synthetic Picture">
|
|
<img src="public/images/images_add.svg" id="addOutPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="文本" ozh="文本" en="Text">
|
|
<img src="public/images/text.svg" id="addText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="圆形文本" ozh="圆形文本" en="Circle Text">
|
|
<img src="public/images/text3.svg" id="addCircleText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成文本" ozh="合成文本" en="Synthetic Text">
|
|
<img src="public/images/text2.svg" id="addOutText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="方块" ozh="方塊" en="Rect">
|
|
<img src="public/images/rect.svg" id="addRect" />
|
|
</div>
|
|
<div class="tool" language="t" zh="圆形" ozh="圓形" en="Circle">
|
|
<img src="public/images/round.svg" id="addCircle" />
|
|
</div>
|
|
<div class="tool" language="t" zh="直线" ozh="直線" en="Line">
|
|
<img src="public/images/line.svg" id="addLine" />
|
|
</div>
|
|
<div class="tool" language="t" zh="二维码" ozh="二維碼" en="QR Code">
|
|
<img src="public/images/qrcode.svg" id="addQrCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="条形码" ozh="條形碼" en="Bar Code">
|
|
<img src="public/images/barcode.svg" id="addBarCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="计数器" ozh="計數器" en="Counter">
|
|
<img src="public/images/counter.svg" id="addCounter" />
|
|
</div>
|
|
</div>
|
|
<div class="right" style="background-color: #1E252D">
|
|
<div style="background-color: #1E252D;" id="canvas-div">
|
|
<div class="canvas-wrapper">
|
|
<div class="ruler-corner"></div>
|
|
<canvas class="ruler-horizontal" id="ruler-h"></canvas>
|
|
<canvas class="ruler-vertical" id="ruler-v"></canvas>
|
|
<div class="canvas_box" style="margin-left: 20px; margin-top: 20px;">
|
|
<canvas id="canvas1"></canvas>
|
|
<canvas id="canvas2"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="canvas_bg">
|
|
<!-- 类型改变 -->
|
|
<img id="canvas_bg_img" class="canvas_bg_img" src="./public/images/bg_1.png" />
|
|
</div>
|
|
</div>
|
|
<div class="footer" style="background-color: #31373D">
|
|
<div id="posText" style="display: inline-block">X : Y : </div>
|
|
<div id="zoomSlide" style="width: 300px;display: none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas style="display: none" id="barcode"></canvas>
|
|
<!-- 类型改变 -->
|
|
<img id="source_front" src="./public/images/front_bg1_1.png" style="display: none" />
|
|
<img id="source_front2" src="./public/images/front_bg2_1.png" style="display: none" />
|
|
<img id="source_back" src="./public/images/back_bg_1.png" style="display: none" />
|
|
</div>
|
|
</div>
|
|
<script src="./public/js/fabric1.min.js"></script>
|
|
<script src="./public/js/guideLines1.js"></script>
|
|
<script src="./public/js/print.min.js"></script>
|
|
<script src="./public/js/crypto-js.min.js"></script>
|
|
<script src="./public/js/jspdf.umd.min.js"></script>
|
|
<script src="./layui/layui.js"></script>
|
|
<script src="./lib/platform/web.js?v=basepath2"></script>
|
|
<script src="./public/js/jr-qrcode.js"></script>
|
|
<script src="./public/js/JsBarcode.all.min.js"></script>
|
|
<script src="./lib/common/fabric-ext.js"></script>
|
|
<script src="./lib/design1.js"></script>
|
|
</body>
|
|
|
|
</html> |