feat: 粗细滑块、移动端两行工具栏、二维码底部定位、字号修复及README更新

2026-05-15 15:06:02 +08:00
parent 8789a76ecc
commit 315f568138
5 changed files with 172 additions and 50 deletions
--- a/css/qr.css
+++ b/css/qr.css
@@ -3,7 +3,7 @@
 /* ========== 悬浮按钮 ========== */
 #qr-btn {
    position: fixed;
-    bottom: 100px;
+    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
--- a/css/style.css
+++ b/css/style.css
@@ -188,39 +188,144 @@ html, body {
    z-index: 10000;
 }

-/* 移动端：允许横向滚动 */
+/* 移动端：两行整洁布局 @ 375px 友好 */
@media (max-width: 768px) {
    .editor-toolbar {
-        justify-content: flex-start;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-        padding: 8px;
-    }
-    .editor-toolbar::-webkit-scrollbar {
-        display: none;
+        justify-content: center;
+        overflow: visible;
+        padding: 6px 10px;
+        height: auto;
+        box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    }
    .toolbar-group {
-        gap: 2px;
-        flex-shrink: 0;
-        width: 100%;
+        gap: 6px;
+        flex-wrap: wrap;
        justify-content: center;
+        align-items: center;
+        width: 100%;
+        padding: 4px 0;
+    }
+    /* 分隔线在折叠布局中隐藏 */
+    .toolbar-divider {
+        display: none;
    }
    .toolbar-btn {
-        width: 32px;
-        height: 32px;
+        width: 30px;
+        height: 30px;
        font-size: 14px;
+        min-width: 0;
+        border-radius: 6px;
+        background: #f5f5f5;
+        border-color: #e0e0e0;
+    }
+    .toolbar-btn:active {
+        background: #e0e0e0;
+        transform: scale(0.95);
+    }
+    .toolbar-btn.active {
+        background: #4a90e2;
+        color: #fff;
+        border-color: #4a90e2;
+    }
+    .toolbar-btn.italic {
+        font-weight: normal;
+        font-style: italic;
+        font-family: 'Times New Roman', serif;
+        font-size: 17px;
    }
    .toolbar-label {
-        font-size: 12px;
+        font-size: 11px;
+        gap: 3px;
+        padding: 2px 6px;
+        background: #f8f8f8;
+        border-radius: 6px;
+        border: 1px solid #eee;
    }
    .toolbar-label span:first-child {
        display: inline;
+        color: #888;
+    }
+    .toolbar-label input[type="color"] {
+        width: 24px;
+        height: 24px;
+        padding: 1px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+        cursor: pointer;
+    }
+    .toolbar-label select {
+        max-width: 70px;
+        font-size: 11px;
+        padding: 2px 4px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+        background: #fff;
+    }
+    .toolbar-label select option {
+        font-size: 12px;
+    }
+    .weight-slider {
+        width: 56px;
+        accent-color: #4a90e2;
+    }
+    #weightValue {
+        min-width: 20px;
+        text-align: center;
+        font-size: 11px;
+        font-weight: bold;
+        color: #333;
    }
    .roller-picker {
-        min-width: 50px;
-        height: 32px;
-        padding: 2px 4px;
+        min-width: 44px;
+        height: 28px;
+        padding: 1px 4px;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+        background: #fff;
+    }
+    .roller-value {
+        font-size: 13px;
+        min-width: 20px;
+        font-weight: bold;
+    }
+    .roller-arrow {
+        font-size: 8px;
+        padding: 1px 3px;
+    }
+    /* 背景图工具栏仅两项，保持单行 */
+    .bg-tools {
+        flex-wrap: nowrap;
+    }
+
+    /* ===== 顶部工具栏 移动端优化 ===== */
+    .toolbar {
+        padding: 6px 8px;
+        gap: 2px;
+    }
+    .btn {
+        min-width: 44px;
+        height: 28px;
+        padding: 0 5px;
+        font-size: 11px;
+        border-radius: 4px;
+    }
+    .btn-primary {
+        min-width: 60px;
+        height: 28px;
+        padding: 0 8px;
+        font-size: 12px;
+    }
+    .toolbar-btn-icon {
+        width: 22px;
+        height: 22px;
+        font-size: 11px;
+    }
+    .toolbar-action-group {
+        gap: 1px;
+    }
+    .toolbar-divider-v {
+        height: 16px;
+        margin: 0 1px;
    }
 }

@@ -323,6 +428,14 @@ html, body {
    margin: 0;
 }

+.weight-slider {
+    width: 80px;
+    height: 32px;
+    cursor: pointer;
+    accent-color: #4a90e2;
+    margin: 0;
+}
+
 /* 旋转度数显示固定宽度 */
 #rotateValue {
    display: inline-block;
--- a/index.html
+++ b/index.html
@@ -30,7 +30,12 @@
            <div class="toolbar-group text-tools" id="textTools">
                <button class="toolbar-btn" id="lockBtn" title="锁定位置">🔒</button>
                <div class="toolbar-divider"></div>
-                <button class="toolbar-btn" id="boldBtn" title="加粗">B</button>
+                <label class="toolbar-label">
+                    <span>粗细</span>
+                    <input type="range" id="weightSlider" min="400" max="900" step="100" value="700" class="weight-slider">
+                    <span id="weightValue">700</span>
+                </label>
+                <div class="toolbar-divider"></div>
                <button class="toolbar-btn italic" id="italicBtn" title="斜体">I</button>
                <div class="toolbar-divider"></div>
                <label class="toolbar-label">
--- a/js/inputs-config.js
+++ b/js/inputs-config.js
@@ -7,7 +7,7 @@ var INPUTS_CONFIG = {
      "label": "企业",
      "left": 100,
      "top": 218.4,
-      "fontWeight": "bold",
+      "fontWeight": 700,
      "placeholder": "请输入"
    },
    {
@@ -15,15 +15,15 @@ var INPUTS_CONFIG = {
      "label": "嘉宾",
      "left": 100,
      "top": 261.4,
-      "fontWeight": "bold",
+      "fontWeight": 700,
      "placeholder": "请输入"
    },
    {
      "id": "input3",
      "label": "编号",
      "left": 100,
-      "top": 308.1,
-      "fontWeight": "bold",
+      "top": 306.4,
+      "fontWeight": 700,
      "placeholder": "请输入"
    }
  ]
--- a/js/script.js
+++ b/js/script.js
@@ -28,7 +28,8 @@
    const bgScaleValue = document.getElementById('bgScaleValue');
    const bgOpacitySlider = document.getElementById('bgOpacitySlider');
    const bgOpacityValue = document.getElementById('bgOpacityValue');
-    const boldBtn = document.getElementById('boldBtn');
+    const weightSlider = document.getElementById('weightSlider');
+    const weightValue = document.getElementById('weightValue');
    const italicBtn = document.getElementById('italicBtn');
    const lockBtn = document.getElementById('lockBtn');
    const colorPicker = document.getElementById('colorPicker');
@@ -1899,10 +1900,7 @@
        const fontFamily = style.fontFamily.replace(/['"]/g, '');
        const fontSize = parseInt(style.fontSize);

-        // 更新加粗按钮状态
-        boldBtn.classList.toggle('active', fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 700);
-
-        // 更新斜体按钮状态
+        // 更新颜色选择器
        italicBtn.classList.toggle('active', fontStyle === 'italic');

        // 更新颜色选择器
@@ -1925,6 +1923,19 @@
            fontPicker.value = fontPicker.options[0].value;
        }

+        // 更新字重滑动条（兼容关键字 bold/normal 和数值）
+        var numericWeight = parseInt(style.fontWeight);
+        if (!isNaN(numericWeight)) {
+            weightSlider.value = numericWeight;
+            weightValue.textContent = numericWeight;
+        } else if (fontWeight === 'bold') {
+            weightSlider.value = 700;
+            weightValue.textContent = '700';
+        } else {
+            weightSlider.value = 400;
+            weightValue.textContent = '400';
+        }
+
        // 更新锁定按钮状态
        lockBtn.classList.toggle('active', element.classList.contains('locked'));

@@ -2370,22 +2381,15 @@

    // 初始化文本编辑器工具栏
    function initTextEditorToolbar() {
-        // 加粗按钮
-        boldBtn.addEventListener('click', () => {
-            const targetInput = editingInput || selectedInput;
-            if (!targetInput) return;
-            const selection = window.getSelection();
-            if (selection.rangeCount > 0 && !selection.isCollapsed) {
-                document.execCommand('bold', false, null);
-            } else {
-                const isBold = boldBtn.classList.contains('active');
-                if (isBold) {
-                    targetInput.style.fontWeight = 'normal';
-                } else {
-                    targetInput.style.fontWeight = 'bold';
-                }
-                boldBtn.classList.toggle('active');
-            }
+        // 字重滑动条
+        weightSlider.addEventListener('input', function() {
+            var target = editingInput || selectedInput;
+            if (!target) return;
+            var val = parseInt(this.value);
+            target.style.fontWeight = val;
+            weightValue.textContent = val;
+        });
+        weightSlider.addEventListener('change', function() {
            saveState();
        });

@@ -3669,11 +3673,11 @@
            lineHeight = lineHeight * scale;
        }
        
-        // 处理字体粗细 - 统一转换为标准格式
-        let fontWeight = style.fontWeight;
-        // 数值转换为关键字
-        if (fontWeight === '400' || fontWeight === 'normal') fontWeight = 'normal';
-        else if (fontWeight === '700' || fontWeight === 'bold') fontWeight = 'bold';
+        // 处理字体粗细 - 直接使用原始数值（canvas 支持 1~1000 的数值权重）
+        var fontWeight = style.fontWeight;
+        // 仅将 CSS 关键字映射为对应数值
+        if (fontWeight === 'normal') fontWeight = '400';
+        else if (fontWeight === 'bold') fontWeight = '700';
        
        // 获取斜体样式
        let fontStyle = style.fontStyle;