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

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;