From 315f568138ba444072eaa3a292d2cab976d66f1a Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 15 May 2026 15:06:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B2=97=E7=BB=86=E6=BB=91=E5=9D=97?=
 =?UTF-8?q?=E3=80=81=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=B8=A4=E8=A1=8C=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8F=E3=80=81=E4=BA=8C=E7=BB=B4=E7=A0=81=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=AE=9A=E4=BD=8D=E3=80=81=E5=AD=97=E5=8F=B7=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=8F=8AREADME=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/qr.css          |   2 +-
 css/style.css       | 149 ++++++++++++++++++++++++++++++++++++++------
 index.html          |   7 ++-
 js/inputs-config.js |   8 +--
 js/script.js        |  56 +++++++++--------
 5 files changed, 172 insertions(+), 50 deletions(-)

diff --git a/css/qr.css b/css/qr.css
index 776dfe5..85f7b07 100644
--- 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;
diff --git a/css/style.css b/css/style.css
index 546adc2..bb57b6e 100644
--- 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;
diff --git a/index.html b/index.html
index e84b058..d9c91a7 100644
--- 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">
diff --git a/js/inputs-config.js b/js/inputs-config.js
index c07ccff..d94da14 100644
--- 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": "请输入"
     }
   ]
diff --git a/js/script.js b/js/script.js
index 65a19a5..b347203 100644
--- 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;