网页端：平台桥与部署修复（宝塔/Nginx）
- 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>
This commit is contained in:
24kycj
@@ -0,0 +1,668 @@
|
||||
<!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>
|
||||
/* 标尺样式 */
|
||||
.ruler-container {
|
||||
position: relative;
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #1E1E1E;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 拖拽过程中的辅助线样式 */
|
||||
.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>
|
||||
<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="300" 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="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="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="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="300" 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>
|
||||
<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>
|
||||
<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="300" 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="300" 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="line"></div>
|
||||
|
||||
<div class="ui-button ui-button-active img-warp" id="front_side">
|
||||
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
||||
</div>
|
||||
<div class="ui-button img-warp" 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 style="margin-left: 20px; margin-top: 20px;">
|
||||
<canvas id="canvas1"></canvas>
|
||||
<canvas id="canvas2"></canvas>
|
||||
</div>
|
||||
</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_2.png" style="display: none" />
|
||||
<img id="source_front2" src="./public/images/front_bg2_2.png" style="display: none" />
|
||||
<img id="source_back" src="./public/images/back_bg_2.png" style="display: none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./public/js/fabric2.min.js"></script>
|
||||
<script src="./public/js/guideLines2.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/design2.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user