|
|
@@ -0,0 +1,687 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>TSC 标签可视化编辑器</title>
|
|
|
+ <!-- QR Code 生成库 -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ background: #f5f5f5;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ background: #2c3e50;
|
|
|
+ color: white;
|
|
|
+ padding: 20px 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: #3498db;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ background: #2980b9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-success {
|
|
|
+ background: #27ae60;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-success:hover {
|
|
|
+ background: #229954;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ display: flex;
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ width: 300px;
|
|
|
+ border-right: 1px solid #ddd;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar h3 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-list {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-item {
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ border-left: 3px solid #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-item:hover {
|
|
|
+ background: #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-item.selected {
|
|
|
+ background: #d4e6f1;
|
|
|
+ border-left-color: #2980b9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-item .label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2c3e50;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .element-item .type {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #7f8c8d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-area {
|
|
|
+ flex: 1;
|
|
|
+ padding: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background: #ecf0f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-wrapper {
|
|
|
+ background: white;
|
|
|
+ box-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-container {
|
|
|
+ position: relative;
|
|
|
+ border: 2px solid #bdc3c7;
|
|
|
+ background: white;
|
|
|
+ cursor: crosshair;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-element {
|
|
|
+ position: absolute;
|
|
|
+ cursor: move;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-element:hover {
|
|
|
+ border-color: #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-element.selected {
|
|
|
+ border-color: #e74c3c;
|
|
|
+ box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-element.text-element {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ padding: 2px 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .canvas-element.qrcode-element {
|
|
|
+ background: #ecf0f1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #7f8c8d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .properties-panel {
|
|
|
+ width: 320px;
|
|
|
+ border-left: 1px solid #ddd;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .properties-panel h3 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .property-group {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .property-group label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #34495e;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .property-group input,
|
|
|
+ .property-group select {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .property-group input:focus,
|
|
|
+ .property-group select:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-bar {
|
|
|
+ padding: 10px 20px;
|
|
|
+ background: #34495e;
|
|
|
+ color: white;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-controls {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-btn {
|
|
|
+ padding: 5px 12px;
|
|
|
+ background: #7f8c8d;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-btn:hover {
|
|
|
+ background: #6c7a7d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-level {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #2c3e50;
|
|
|
+ min-width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .property-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <h1>TSC 标签可视化编辑器</h1>
|
|
|
+ <div class="header-actions">
|
|
|
+ <button class="btn btn-primary" onclick="loadConfig()">加载配置</button>
|
|
|
+ <button class="btn btn-success" onclick="saveConfig()">保存配置</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- 左侧元素列表 -->
|
|
|
+ <div class="sidebar">
|
|
|
+ <h3>📋 标签元素</h3>
|
|
|
+ <ul class="element-list" id="elementList"></ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中间画布区域 -->
|
|
|
+ <div class="canvas-area">
|
|
|
+ <div class="zoom-controls">
|
|
|
+ <button class="zoom-btn" onclick="zoomOut()">缩小 -</button>
|
|
|
+ <span class="zoom-level" id="zoomLevel">100%</span>
|
|
|
+ <button class="zoom-btn" onclick="zoomIn()">放大 +</button>
|
|
|
+ <button class="zoom-btn" onclick="resetZoom()">重置</button>
|
|
|
+ </div>
|
|
|
+ <div class="canvas-wrapper">
|
|
|
+ <div class="canvas-container" id="canvas"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧属性面板 -->
|
|
|
+ <div class="properties-panel">
|
|
|
+ <h3>⚙️ 属性设置</h3>
|
|
|
+ <div id="propertiesContent">
|
|
|
+ <p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-bar">
|
|
|
+ <span>标签尺寸: <span id="labelSize">76.2mm × 38.1mm</span></span>
|
|
|
+ <span>选中元素: <span id="selectedElement">无</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 全局变量
|
|
|
+ let config = null;
|
|
|
+ let selectedElementId = null;
|
|
|
+ let zoom = 1.0;
|
|
|
+ const DPI = 203 / 25.4; // 203 DPI，1mm = 8 dots
|
|
|
+ let isDragging = false;
|
|
|
+ let dragStartX = 0;
|
|
|
+ let dragStartY = 0;
|
|
|
+ let dragElement = null;
|
|
|
+
|
|
|
+ // 加载配置
|
|
|
+ async function loadConfig() {
|
|
|
+ try {
|
|
|
+ const response = await fetch('../config/label-config.json');
|
|
|
+ config = await response.json();
|
|
|
+ renderCanvas();
|
|
|
+ renderElementList();
|
|
|
+ showMessage('配置加载成功', 'success');
|
|
|
+ } catch (error) {
|
|
|
+ showMessage('配置加载失败: ' + error.message, 'error');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存配置
|
|
|
+ function saveConfig() {
|
|
|
+ if (!config) {
|
|
|
+ showMessage('没有配置可保存', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const json = JSON.stringify(config, null, 2);
|
|
|
+ const blob = new Blob([json], { type: 'application/json' });
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = url;
|
|
|
+ a.download = 'label-config.json';
|
|
|
+ a.click();
|
|
|
+ URL.revokeObjectURL(url);
|
|
|
+ showMessage('配置已下载', 'success');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染画布
|
|
|
+ function renderCanvas() {
|
|
|
+ if (!config) return;
|
|
|
+
|
|
|
+ const canvas = document.getElementById('canvas');
|
|
|
+ const widthPx = config.labelSize.width * DPI * zoom;
|
|
|
+ const heightPx = config.labelSize.height * DPI * zoom;
|
|
|
+
|
|
|
+ canvas.style.width = widthPx + 'px';
|
|
|
+ canvas.style.height = heightPx + 'px';
|
|
|
+ canvas.innerHTML = '';
|
|
|
+
|
|
|
+ config.elements.forEach(element => {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.className = 'canvas-element';
|
|
|
+ div.id = 'canvas-' + element.id;
|
|
|
+ div.dataset.id = element.id;
|
|
|
+
|
|
|
+ const x = element.x * zoom;
|
|
|
+ const y = element.y * zoom;
|
|
|
+
|
|
|
+ div.style.left = x + 'px';
|
|
|
+ div.style.top = y + 'px';
|
|
|
+
|
|
|
+ if (element.type === 'text') {
|
|
|
+ div.className += ' text-element';
|
|
|
+ div.textContent = element.text;
|
|
|
+ div.style.fontSize = (element.fontSize * zoom) + 'px';
|
|
|
+ div.style.fontFamily = element.fontFamily;
|
|
|
+ div.style.fontWeight = element.fontStyle === 1 ? 'bold' : 'normal';
|
|
|
+ } else if (element.type === 'qrcode') {
|
|
|
+ div.className += ' qrcode-element';
|
|
|
+ div.style.width = (element.width * zoom) + 'px';
|
|
|
+ div.style.height = (element.height * zoom) + 'px';
|
|
|
+ div.style.background = 'white';
|
|
|
+ div.style.padding = '0';
|
|
|
+
|
|
|
+ // 生成真实二维码
|
|
|
+ const qrData = element.text || '+KB60IS3031T811001201'; // 默认示例数据
|
|
|
+ try {
|
|
|
+ new QRCode(div, {
|
|
|
+ text: qrData,
|
|
|
+ width: element.width * zoom,
|
|
|
+ height: element.height * zoom,
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ correctLevel: QRCode.CorrectLevel.L
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ div.textContent = 'QR';
|
|
|
+ div.style.background = '#ecf0f1';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (element.id === selectedElementId) {
|
|
|
+ div.className += ' selected';
|
|
|
+ }
|
|
|
+
|
|
|
+ div.addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ selectElement(element.id);
|
|
|
+ });
|
|
|
+
|
|
|
+ div.addEventListener('mousedown', startDrag);
|
|
|
+
|
|
|
+ canvas.appendChild(div);
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('labelSize').textContent =
|
|
|
+ `${config.labelSize.width}mm × ${config.labelSize.height}mm`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 拖拽开始
|
|
|
+ function startDrag(e) {
|
|
|
+ isDragging = true;
|
|
|
+ dragElement = e.target;
|
|
|
+ dragStartX = e.clientX;
|
|
|
+ dragStartY = e.clientY;
|
|
|
+
|
|
|
+ const elementId = dragElement.dataset.id;
|
|
|
+ selectElement(elementId);
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', onDrag);
|
|
|
+ document.addEventListener('mouseup', stopDrag);
|
|
|
+
|
|
|
+ e.preventDefault();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 拖拽中
|
|
|
+ function onDrag(e) {
|
|
|
+ if (!isDragging || !dragElement) return;
|
|
|
+
|
|
|
+ const dx = (e.clientX - dragStartX) / zoom;
|
|
|
+ const dy = (e.clientY - dragStartY) / zoom;
|
|
|
+
|
|
|
+ const elementId = dragElement.dataset.id;
|
|
|
+ const element = config.elements.find(el => el.id === elementId);
|
|
|
+
|
|
|
+ if (element) {
|
|
|
+ element.x = Math.max(0, element.x + dx);
|
|
|
+ element.y = Math.max(0, element.y + dy);
|
|
|
+ renderCanvas();
|
|
|
+ updateProperties();
|
|
|
+ }
|
|
|
+
|
|
|
+ dragStartX = e.clientX;
|
|
|
+ dragStartY = e.clientY;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 拖拽结束
|
|
|
+ function stopDrag() {
|
|
|
+ isDragging = false;
|
|
|
+ dragElement = null;
|
|
|
+ document.removeEventListener('mousemove', onDrag);
|
|
|
+ document.removeEventListener('mouseup', stopDrag);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染元素列表
|
|
|
+ function renderElementList() {
|
|
|
+ const list = document.getElementById('elementList');
|
|
|
+ list.innerHTML = '';
|
|
|
+
|
|
|
+ config.elements.forEach(element => {
|
|
|
+ const li = document.createElement('li');
|
|
|
+ li.className = 'element-item';
|
|
|
+ li.dataset.id = element.id;
|
|
|
+ li.innerHTML = `
|
|
|
+ <span class="label">${element.label}</span>
|
|
|
+ <span class="type">${element.type === 'text' ? '文本' : '二维码'} - (${Math.round(element.x)}, ${Math.round(element.y)})</span>
|
|
|
+ `;
|
|
|
+ li.addEventListener('click', () => selectElement(element.id));
|
|
|
+ list.appendChild(li);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择元素
|
|
|
+ function selectElement(elementId) {
|
|
|
+ selectedElementId = elementId;
|
|
|
+
|
|
|
+ // 更新列表选中状态
|
|
|
+ document.querySelectorAll('.element-item').forEach(item => {
|
|
|
+ item.classList.toggle('selected', item.dataset.id === elementId);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新画布选中状态
|
|
|
+ document.querySelectorAll('.canvas-element').forEach(el => {
|
|
|
+ el.classList.toggle('selected', el.dataset.id === elementId);
|
|
|
+ });
|
|
|
+
|
|
|
+ const element = config.elements.find(el => el.id === elementId);
|
|
|
+ document.getElementById('selectedElement').textContent = element ? element.label : '无';
|
|
|
+
|
|
|
+ updateProperties();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新属性面板
|
|
|
+ function updateProperties() {
|
|
|
+ if (!selectedElementId) {
|
|
|
+ document.getElementById('propertiesContent').innerHTML =
|
|
|
+ '<p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const element = config.elements.find(el => el.id === selectedElementId);
|
|
|
+ if (!element) return;
|
|
|
+
|
|
|
+ let html = '';
|
|
|
+
|
|
|
+ // 位置属性
|
|
|
+ html += `
|
|
|
+ <div class="property-group">
|
|
|
+ <label>ID</label>
|
|
|
+ <input type="text" value="${element.id}" disabled>
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="property-row">
|
|
|
+ <div>
|
|
|
+ <label>X 坐标 (dots)</label>
|
|
|
+ <input type="number" value="${element.x}" onchange="updateElementProperty('x', parseFloat(this.value))">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label>Y 坐标 (dots)</label>
|
|
|
+ <input type="number" value="${element.y}" onchange="updateElementProperty('y', parseFloat(this.value))">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ if (element.type === 'text') {
|
|
|
+ html += `
|
|
|
+ <div class="property-group">
|
|
|
+ <label>文本内容</label>
|
|
|
+ <input type="text" value="${element.text}" onchange="updateElementProperty('text', this.value)">
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <label>字体大小 (pt)</label>
|
|
|
+ <input type="number" value="${element.fontSize}" onchange="updateElementProperty('fontSize', parseInt(this.value))">
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <label>字体</label>
|
|
|
+ <select value="${element.fontFamily}" onchange="updateElementProperty('fontFamily', this.value)">
|
|
|
+ <option value="Arial" ${element.fontFamily === 'Arial' ? 'selected' : ''}>Arial</option>
|
|
|
+ <option value="SimSun" ${element.fontFamily === 'SimSun' ? 'selected' : ''}>SimSun (宋体)</option>
|
|
|
+ <option value="SimHei" ${element.fontFamily === 'SimHei' ? 'selected' : ''}>SimHei (黑体)</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <label>字体样式</label>
|
|
|
+ <select value="${element.fontStyle}" onchange="updateElementProperty('fontStyle', parseInt(this.value))">
|
|
|
+ <option value="0" ${element.fontStyle === 0 ? 'selected' : ''}>正常</option>
|
|
|
+ <option value="1" ${element.fontStyle === 1 ? 'selected' : ''}>加粗</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ } else if (element.type === 'qrcode') {
|
|
|
+ html += `
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="property-row">
|
|
|
+ <div>
|
|
|
+ <label>宽度 (dots)</label>
|
|
|
+ <input type="number" value="${element.width}" onchange="updateElementProperty('width', parseInt(this.value))">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label>高度 (dots)</label>
|
|
|
+ <input type="number" value="${element.height}" onchange="updateElementProperty('height', parseInt(this.value))">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <label>纠错等级</label>
|
|
|
+ <select value="${element.eccLevel}" onchange="updateElementProperty('eccLevel', this.value)">
|
|
|
+ <option value="L" ${element.eccLevel === 'L' ? 'selected' : ''}>L (7%)</option>
|
|
|
+ <option value="M" ${element.eccLevel === 'M' ? 'selected' : ''}>M (15%)</option>
|
|
|
+ <option value="Q" ${element.eccLevel === 'Q' ? 'selected' : ''}>Q (25%)</option>
|
|
|
+ <option value="H" ${element.eccLevel === 'H' ? 'selected' : ''}>H (30%)</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="property-group">
|
|
|
+ <label>单元宽度</label>
|
|
|
+ <input type="number" value="${element.cellWidth}" onchange="updateElementProperty('cellWidth', this.value)">
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById('propertiesContent').innerHTML = html;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新元素属性
|
|
|
+ function updateElementProperty(property, value) {
|
|
|
+ if (!selectedElementId) return;
|
|
|
+
|
|
|
+ const element = config.elements.find(el => el.id === selectedElementId);
|
|
|
+ if (element) {
|
|
|
+ element[property] = value;
|
|
|
+ renderCanvas();
|
|
|
+ renderElementList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 缩放控制
|
|
|
+ function zoomIn() {
|
|
|
+ zoom = Math.min(zoom + 0.1, 2.0);
|
|
|
+ document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
|
|
|
+ renderCanvas();
|
|
|
+ }
|
|
|
+
|
|
|
+ function zoomOut() {
|
|
|
+ zoom = Math.max(zoom - 0.1, 0.5);
|
|
|
+ document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
|
|
|
+ renderCanvas();
|
|
|
+ }
|
|
|
+
|
|
|
+ function resetZoom() {
|
|
|
+ zoom = 1.0;
|
|
|
+ document.getElementById('zoomLevel').textContent = '100%';
|
|
|
+ renderCanvas();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示消息
|
|
|
+ function showMessage(message, type) {
|
|
|
+ const color = type === 'success' ? '#27ae60' : '#e74c3c';
|
|
|
+ const div = document.createElement('div');
|
|
|
+ div.style.cssText = `
|
|
|
+ position: fixed;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ background: ${color};
|
|
|
+ color: white;
|
|
|
+ padding: 15px 25px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
|
+ z-index: 1000;
|
|
|
+ animation: slideIn 0.3s ease-out;
|
|
|
+ `;
|
|
|
+ div.textContent = message;
|
|
|
+ document.body.appendChild(div);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ div.style.animation = 'slideOut 0.3s ease-out';
|
|
|
+ setTimeout(() => div.remove(), 300);
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化
|
|
|
+ window.addEventListener('load', loadConfig);
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ @keyframes slideIn {
|
|
|
+ from {
|
|
|
+ transform: translateX(400px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: translateX(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes slideOut {
|
|
|
+ from {
|
|
|
+ transform: translateX(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: translateX(400px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</body>
|
|
|
+</html>
|
wangxichen