feat: 添加字体样式工具栏，支持加粗、斜体、颜色、字体、字号调整

js/script.js

@@ -12,6 +12,12 @@
     const exportCanvas = document.getElementById('exportCanvas');
     const longPressTip = document.getElementById('longPressTip');
     const canvasArea = document.getElementById('canvasArea');
+    const textEditorToolbar = document.getElementById('textEditorToolbar');
+    const boldBtn = document.getElementById('boldBtn');
+    const italicBtn = document.getElementById('italicBtn');
+    const colorPicker = document.getElementById('colorPicker');
+    const fontPicker = document.getElementById('fontPicker');
+    const fontSizePicker = document.getElementById('fontSizePicker');
 
     let currentImage = null;
     let selectedInput = null;
@@ -80,6 +86,9 @@
         // 初始化右键菜单（只在3:5预览区域）
         initContextMenu();
 
+        // 初始化文本编辑器工具栏
+        initTextEditorToolbar();
+
         // 显示长按提示
         setTimeout(() => {
             longPressTip.classList.add('show');
@@ -429,6 +438,9 @@
         element.contentEditable = 'true';
         element.focus();
 
+        // 更新工具栏状态
+        updateToolbarState(element);
+
         // 光标定位到末尾
         const range = document.createRange();
         const sel = window.getSelection();
@@ -450,6 +462,44 @@
         editingInput = null;
     }
 
+    // 更新工具栏状态
+    function updateToolbarState(element) {
+        const style = window.getComputedStyle(element);
+        const fontWeight = style.fontWeight;
+        const fontStyle = style.fontStyle;
+        const color = style.color;
+        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');
+
+        // 更新颜色选择器
+        colorPicker.value = rgbToHex(color);
+
+        // 更新字体选择器
+        for (let option of fontPicker.options) {
+            if (option.value === fontFamily || fontFamily.includes(option.value)) {
+                fontPicker.value = option.value;
+                break;
+            }
+        }
+
+        // 更新字号选择器
+        fontSizePicker.value = fontSize.toString();
+    }
+
+    // RGB转十六进制
+    function rgbToHex(rgb) {
+        if (rgb.startsWith('#')) return rgb;
+        const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        if (!match) return '#000000';
+        return '#' + [match[1], match[2], match[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
+    }
+
     // 取消所有选中
     function deselectAll() {
         if (editingInput) {
@@ -512,6 +562,51 @@
         });
     }
 
+    // 初始化文本编辑器工具栏
+    function initTextEditorToolbar() {
+        // 加粗按钮
+        boldBtn.addEventListener('click', () => {
+            if (!editingInput) return;
+            const isBold = boldBtn.classList.contains('active');
+            if (isBold) {
+                editingInput.style.fontWeight = 'normal';
+            } else {
+                editingInput.style.fontWeight = 'bold';
+            }
+            boldBtn.classList.toggle('active');
+        });
+
+        // 斜体按钮
+        italicBtn.addEventListener('click', () => {
+            if (!editingInput) return;
+            const isItalic = italicBtn.classList.contains('active');
+            if (isItalic) {
+                editingInput.style.fontStyle = 'normal';
+            } else {
+                editingInput.style.fontStyle = 'italic';
+            }
+            italicBtn.classList.toggle('active');
+        });
+
+        // 颜色选择器
+        colorPicker.addEventListener('input', () => {
+            if (!editingInput) return;
+            editingInput.style.color = colorPicker.value;
+        });
+
+        // 字体选择器
+        fontPicker.addEventListener('change', () => {
+            if (!editingInput) return;
+            editingInput.style.fontFamily = fontPicker.value + ', sans-serif';
+        });
+
+        // 字号选择器
+        fontSizePicker.addEventListener('change', () => {
+            if (!editingInput) return;
+            editingInput.style.fontSize = fontSizePicker.value + 'px';
+        });
+    }
+
     // 显示右键菜单
     function showContextMenu(x, y) {
         hideContextMenu();