feat: 工具链就绪(bleak/pillow/pytest/capstone/androguard) + Web协议提取报告

analysis/web/moban.js

@@ -0,0 +1,943 @@
+
+    (function(){
+       
+        const canvas = document.getElementById('unifiedCanvas');
+        const ctx = canvas.getContext('2d');
+        // 获取当前选中的屏幕尺寸
+const screenSelect = document.getElementById('epdwh');
+let W = 800, H = 480;
+
+function updateCanvasSize() {
+    const [newW, newH] = screenSelect.value.split('x').map(Number);
+    W = newW;
+    H = newH;
+    canvas.width = W;
+    canvas.height = H;
+}
+
+// 初始化尺寸
+updateCanvasSize();
+
+        let currentTemplate = 'schedule';
+        let globalTitle = "◉ 输入内容·页眉";
+
+       
+        let presetLinesData = [];
+        let hitAreas = [];
+
+       
+        let courseData = {
+            days: ["周一", "周二", "周三", "周四", "周五"],
+            periods: ["第1节", "第2节", "第3节", "第4节"],
+            cells: {}
+        };
+        function initDefaultCourse() {
+            courseData.cells = {};
+            const defaults = {
+                "0,0": "语文", "0,1": "数学", "0,2": "英语", "0,3": "体育",
+                "1,0": "数学", "1,1": "语文", "1,2": "物理", "1,3": "历史",
+                "2,0": "英语", "2,1": "化学", "2,2": "语文", "2,3": "自习",
+                "3,0": "物理", "3,1": "英语", "3,2": "数学", "3,3": "政治",
+                "4,0": "历史", "4,1": "体育", "4,2": "化学", "4,3": "班会"
+            };
+            for(let k in defaults) courseData.cells[k] = defaults[k];
+        }
+        initDefaultCourse();
+        let courseHitAreas = [];
+
+   
+        function applyCourseCustomSettings() {
+            const dayCount = parseInt(document.getElementById('courseDaysCount').value) || 5;
+            const periodCount = parseInt(document.getElementById('coursePeriodsCount').value) || 4;
+            
+            const dayNames = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+            courseData.days = dayNames.slice(0, dayCount);
+            
+            courseData.periods = [];
+            for(let i=1; i<=periodCount; i++) {
+                courseData.periods.push(`第${i}节`);
+            }
+            
+            courseData.cells = {};
+            render();
+        }
+
+        
+        let qrText = "https://mspppclock.tech/";
+        let qrSize = 150;
+        let qrCodeImage = null;
+        let qrCaptionLines = [];
+        let qrCaptionStyle = { fontSize: 14, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "center" };
+        
+        function syncCaptionFromTextarea() {
+            const raw = document.getElementById('qrCaptionText').value;
+            const lines = raw.split(/\r?\n/).filter(l => l.trim() !== "" || l === "");
+            qrCaptionLines = lines.length ? lines : ["(点击添加文字)"];
+        }
+        function updateCaptionLinesToUI() {
+            document.getElementById('qrCaptionText').value = qrCaptionLines.join("\n");
+        }
+
+        async function generateQRCodeImage(text, size=90, colorDark="#000000", colorLight="#FFFFFF") {
+            return new Promise((resolve) => {
+                const tempDiv = document.createElement('div');
+                tempDiv.style.position = 'absolute';
+                tempDiv.style.left = '-9999px';
+                document.body.appendChild(tempDiv);
+                try {
+                    const qrcode = new QRCode(tempDiv, {
+                        text: text,
+                        width: size,
+                        height: size,
+                        colorDark: colorDark,
+                        colorLight: colorLight,
+                        correctLevel: QRCode.CorrectLevel.M
+                    });
+                    setTimeout(() => {
+                        const canvasQR = tempDiv.querySelector('canvas');
+                        if (canvasQR) {
+                            const imgData = canvasQR.toDataURL();
+                            resolve(imgData);
+                        } else resolve(null);
+                        document.body.removeChild(tempDiv);
+                    }, 60);
+                } catch(e) { resolve(null); document.body.removeChild(tempDiv); }
+            });
+        }
+
+        async function refreshQRImage() {
+            qrSize = parseInt(document.getElementById('qrSizeInput').value) || 84;
+            const img = await generateQRCodeImage(qrText, qrSize, "#000", "#fff");
+            qrCodeImage = img;
+            if(currentTemplate === 'qrcode') render();
+        }
+
+        
+        let customRawText = "小雨在放学路上捡到一枚【闪闪发亮的硬币】。\n她买了两颗【橘子味的糖果】，一颗塞进嘴里，\n甜得她眯起了眼睛；另一颗放在路边的长椅上。\n一只【唱歌的小鸟】飞过来，歪着脑袋看了看\n，叼起糖果飞走了。小雨有点失落，\n但还是继续往家走。第二天早上，她推开窗户，\n发现窗台上放着一朵【金黄色的小野花】，花瓣上还挂着露珠。小雨捧着花笑了：\n“原来快乐会【越分越多】呀。”\n从那天起，她每天都往长椅上放一颗糖。";
+        let customStyle = {
+            fontSize: 17, fontFamily: "宋体", baseColor: "#000000", invertMode: "none", alignment: "center"
+        };
+
+        const chineseFonts = ["宋体","微软雅黑","黑体","楷体","思源黑体","苹方"];
+        const invertModes = [
+            { value: "none", label: "无" }, { value: "red-black", label: "红字黑底" }, { value: "red-white", label: "红字白底" },
+            { value: "black-red", label: "黑字红底" }, { value: "black-white", label: "黑字白底" },
+            { value: "white-red", label: "白字红底" }, { value: "white-black", label: "白字黑底" }
+        ];
+
+        function applyInvertStyle(baseColor, invertMode) {
+            if (invertMode === "none") return { bgColor: null, textColor: baseColor };
+            if (invertMode === "red-black") return { bgColor: "#000000", textColor: "#FF0000" };
+            if (invertMode === "red-white") return { bgColor: "#FFFFFF", textColor: "#FF0000" };
+            if (invertMode === "black-red") return { bgColor: "#FF0000", textColor: "#000000" };
+            if (invertMode === "black-white") return { bgColor: "#FFFFFF", textColor: "#000000" };
+            if (invertMode === "white-red") return { bgColor: "#FF0000", textColor: "#FFFFFF" };
+            if (invertMode === "white-black") return { bgColor: "#000000", textColor: "#FFFFFF" };
+            return { bgColor: null, textColor: baseColor };
+        }
+
+        const templatePresets = {
+            schedule: [ { text: "✅ 今日核心议程", fontSize: 24, fontFamily: "微软雅黑", baseColor: "#FF0000", invertMode: "none", alignment: "center" },
+                { text: "【09:30】 敏捷站会 · 【需求对齐】", fontSize: 18,fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "left" },
+                { text: "11:00 前端架构评审会议", fontSize: 18, fontFamily: "黑体", baseColor: "#000000", invertMode: "black-red", alignment: "left" },
+                { text: "14:30 跨部门协作同步会", fontSize: 18, fontFamily: "微软雅黑", baseColor: "#FF0000", invertMode: "red-white", alignment: "left" },
+                { text: "16:45 代码审查 + 项目复盘", fontSize: 18, fontFamily: "楷体", baseColor: "#000000", invertMode: "none", alignment: "left" }
+            ],
+            businesscard: [ { text: "✦ 名 片 精 选 ✦", fontSize: 24, fontFamily: "微软雅黑", baseColor: "#FF0000", invertMode: "none", alignment: "center" },
+                { text: "欧阳 静澜", fontSize: 26, fontFamily: "黑体", baseColor: "#000000", invertMode: "black-white", alignment: "center" },
+                { text: "创意设计总监 / 合伙人", fontSize: 18, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "center" },
+                { text: "jinglan@art.cn", fontSize: 17, fontFamily: "宋体", baseColor: "#FF0000", invertMode: "red-black", alignment: "center" },
+                { text: "三色哲学 · 红黑白", fontSize: 16, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "center" }
+            ],
+            memo: [ { text: "📋 紧 急 备 忘 录", fontSize: 28, fontFamily: "微软雅黑", baseColor: "#FF0000", invertMode: "none", alignment: "center" },
+                { text: "• 季度总结报告 (周五截止)", fontSize: 24, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "black-red", alignment: "left" },
+                { text: "• 设计评审会议 14:00", fontSize: 24, fontFamily: "宋体", baseColor: "#000000", invertMode: "none", alignment: "left" },
+                { text: "• 前端组件库升级计划", fontSize: 24, fontFamily: "黑体", baseColor: "#FF0000", invertMode: "red-white", alignment: "left" },
+                { text: "• 团队建设活动策划", fontSize: 23, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "left" }
+            ]
+        };
+        function loadPresetData(templateId) {
+            if(templatePresets[templateId]) presetLinesData = JSON.parse(JSON.stringify(templatePresets[templateId]));
+            else presetLinesData = [{ text: "示例行", fontSize: 16, fontFamily: "微软雅黑", baseColor: "#000000", invertMode: "none", alignment: "left" }];
+        }
+
+       
+function renderCourseTable() {
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fillRect(0, 0, W, H);
+    
+    const isSmallScreen = (W === 296 && H === 128);
+    const isLargeScreen = (W === 800 && H === 480);
+    
+    if (!isSmallScreen) {
+        // 显示页眉
+        const headerFontSize = isLargeScreen ? 36 : 18;
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(4, 4, W-8, H-8);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(8, 8, 26, 4);
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(W-54, 12, 42, 4);
+        
+        let title = globalTitle.trim() || "输入学校班级学期等信息";
+        
+        // 页眉标题
+        ctx.font = `bold ${headerFontSize}px '微软雅黑'`;
+        ctx.fillStyle = "#FF0000";
+        ctx.fillText(title, 20, headerFontSize + 12);
+        
+        ctx.beginPath();
+        ctx.strokeStyle = "#FF0000";
+        ctx.moveTo(12, headerFontSize + 22);
+        ctx.lineTo(W-12, headerFontSize + 22);
+        ctx.stroke();
+        
+        var startY = headerFontSize + 30;
+    } else {
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(4, 4, W-8, H-8);
+        var startY = 8;
+    }
+    
+    const dayCount = courseData.days.length;
+    const periodCount = courseData.periods.length;
+    const startX = 12;
+    const cellW = (W - 24) / (dayCount + 1);
+    const cellH = (H - startY - 8) / (periodCount + 1);
+    
+    const headerTextFontSize = isLargeScreen ? 30 : 15;
+    const cellTextFontSize = isLargeScreen ? 28 : (isSmallScreen ? 11 : 14);
+    
+    // 绘制节次表头
+    ctx.font = `bold ${headerTextFontSize}px '微软雅黑'`;
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(startX, startY, cellW, cellH);
+    ctx.fillStyle = "#FF0000";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText("节次", startX + cellW/2, startY + cellH/2);
+    
+    // 绘制星期表头
+    for(let d=0; d<dayCount; d++) {
+        ctx.fillStyle = d%2===0 ? "#000000" : "#FF0000";
+        ctx.fillRect(startX + (d+1)*cellW, startY, cellW, cellH);
+        ctx.fillStyle = "#FFFFFF";
+        ctx.font = `bold ${headerTextFontSize}px '微软雅黑'`;
+        ctx.fillText(courseData.days[d], startX + (d+1)*cellW + cellW/2, startY + cellH/2);
+    }
+    
+    courseHitAreas = [];
+    
+    // 绘制课程内容
+    for(let p=0; p<periodCount; p++) {
+        const yPos = startY + (p+1)*cellH;
+        
+        // 节次列
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(startX, yPos, cellW, cellH);
+        ctx.fillStyle = "#FF0000";
+        ctx.font = `bold ${cellTextFontSize}px '微软雅黑'`;
+        ctx.fillText(courseData.periods[p], startX + cellW/2, yPos + cellH/2);
+        
+        for(let d=0; d<dayCount; d++) {
+            const x = startX + (d+1)*cellW;
+            const y = yPos;
+            const cellKey = `${d},${p}`;
+            let courseName = courseData.cells[cellKey] || "点击";
+            
+            ctx.fillStyle = "#F0F0F0";
+            ctx.fillRect(x, y, cellW, cellH);
+            
+            // 获取单元格样式（如果没有则使用默认值）
+            const cellStyle = courseData.cellStyles?.[cellKey] || { 
+                fontSize: cellTextFontSize, 
+                fontFamily: "微软雅黑", 
+                color: "#000000" 
+            };
+            
+            // 限制字体大小不超过单元格高度的60%
+            const finalFontSize = Math.min(cellStyle.fontSize, cellH * 0.6);
+            ctx.font = `${finalFontSize}px "${cellStyle.fontFamily}"`;
+            ctx.fillStyle = cellStyle.color;
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            
+            // 文字截断处理
+            let maxChars = isLargeScreen ? 6 : (isSmallScreen ? 2 : 4);
+            let displayName = courseName.length > maxChars ? courseName.slice(0, maxChars-1) + "…" : courseName;
+            
+            // 如果文字仍然太宽，进一步缩小字体
+            let tempFontSize = finalFontSize;
+            let textWidth = ctx.measureText(displayName).width;
+            while (textWidth > cellW - 8 && tempFontSize > 10) {
+                tempFontSize--;
+                ctx.font = `${tempFontSize}px "${cellStyle.fontFamily}"`;
+                textWidth = ctx.measureText(displayName).width;
+            }
+            
+            ctx.fillText(displayName, x + cellW/2, y + cellH/2);
+            
+            courseHitAreas.push({ row: p, col: d, x, y, w: cellW, h: cellH, cellKey, currentName: courseName });
+        }
+    }
+    
+    if (!isSmallScreen) {
+        // 底部装饰线
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(16, H-11, 42, 2);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(66, H-13, 26, 2);
+    }
+    
+   
+    ctx.textAlign = "left";
+    ctx.textBaseline = "alphabetic";
+    
+    
+    ctx.beginPath();
+    ctx.strokeStyle = "#ff0000";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]);
+    
+    for(let d = 1; d <= dayCount; d++){
+        ctx.beginPath();
+        ctx.moveTo(startX + d * cellW, startY);
+        ctx.lineTo(startX + d * cellW, startY + (periodCount + 1) * cellH);
+        ctx.stroke();
+    }
+    
+    for(let p = 1; p <= periodCount; p++){
+        ctx.beginPath();
+        ctx.moveTo(startX, startY + p * cellH);
+        ctx.lineTo(startX + (dayCount + 1) * cellW, startY + p * cellH);
+        ctx.stroke();
+    }
+}
+
+    function editCourseCell(row, col, currentName) {
+   
+    const cellKey = `${col},${row}`;
+    const existingStyle = courseData.cellStyles?.[cellKey] || {
+        fontSize: 16,
+        fontFamily: "微软雅黑",
+        color: "#000000"
+    };
+    
+    const modal = document.createElement('div');
+    modal.className = 'modal-mask';
+    modal.innerHTML = `
+        <div class="modal-card" style="width: 320px;">
+            <h3>编辑课程</h3>
+            <div class="modal-field"><label>课程名称</label><input id="courseNameInput" value="${escapeHtml(currentName)}" style="width:100%;"></div>
+            <div class="modal-field"><label>字体大小</label><input id="fontSizeInput" type="number" value="${existingStyle.fontSize}" min="10" max="48" step="1" style="width:100%;"></div>
+            <div class="modal-field"><label>字体</label><select id="fontFamilyInput" style="width:100%;">${chineseFonts.map(f => `<option value="${f}" ${existingStyle.fontFamily === f ? 'selected' : ''}>${f}</option>`).join('')}</select></div>
+            <div class="modal-field"><label>文字颜色</label><select id="colorInput" style="width:100%;"><option value="#000000" ${existingStyle.color === '#000000' ? 'selected' : ''}>黑色</option><option value="#FF0000" ${existingStyle.color === '#FF0000' ? 'selected' : ''}>红色</option></select></div>
+            <div class="modal-buttons"><button class="cancel" id="cancelBtn">取消</button><button id="confirmBtn">确认</button></div>
+        </div>
+    `;
+    document.body.appendChild(modal);
+    
+    modal.querySelector('#confirmBtn').onclick = () => {
+        const newName = modal.querySelector('#courseNameInput').value.trim() || "自习";
+        const newFontSize = parseInt(modal.querySelector('#fontSizeInput').value) || 16;
+        const newFontFamily = modal.querySelector('#fontFamilyInput').value;
+        const newColor = modal.querySelector('#colorInput').value;
+        
+        
+        courseData.cells[cellKey] = newName;
+        
+        
+        if (!courseData.cellStyles) courseData.cellStyles = {};
+        courseData.cellStyles[cellKey] = {
+            fontSize: Math.min(48, Math.max(10, newFontSize)),
+            fontFamily: newFontFamily,
+            color: newColor
+        };
+        
+        modal.remove();
+        render();
+    };
+    
+    modal.querySelector('.cancel').onclick = () => modal.remove();
+    modal.onclick = e => e.target === modal && modal.remove();
+}
+
+        
+    
+function renderPresetTemplate() {
+    ctx.fillStyle = "#ffffffff";
+    ctx.fillRect(0, 0, W, H);
+    
+    
+    const isSmallScreen = (W === 296 && H === 128);
+    const isLargeScreen = (W === 800 && H === 480);
+    
+    if (!isSmallScreen) {
+       
+        ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(4, 4, W-8, H-8);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(8, 8, 26, 4);
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(W-54, 12, 42, 4);
+        
+        let titleText = globalTitle.trim() || "输入内容·页眉";
+        
+       
+        let headerFontSize = isLargeScreen ? 52 : 26;  
+        ctx.font = `bold ${headerFontSize}px '微软雅黑'`;
+        
+        let titleWidth = ctx.measureText(titleText.slice(0,24)).width;
+        let bgX = (W - (titleWidth+40))/2;
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(bgX, 7, titleWidth+40, headerFontSize + 10);
+        ctx.fillStyle = "#FFF";
+        ctx.fillText(titleText.slice(0,24), (W-titleWidth)/2, headerFontSize + 5);
+        ctx.beginPath();
+        ctx.strokeStyle = "#FF0000";
+        ctx.moveTo(12, headerFontSize + 20);
+        ctx.lineTo(W-12, headerFontSize + 20);
+        ctx.stroke();
+        
+        var startY = headerFontSize + 50;
+    } else {
+          ctx.strokeStyle = "#FF0000";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(4, 4, W-8, H-8);
+        var startY = 10;
+    }
+    const lineHeightBase = 26;
+    let currentY = startY;
+    hitAreas = [];
+
+    for(let i=0; i<presetLinesData.length; i++) {
+        const line = presetLinesData[i];
+        
+        
+        const segments = parseColoredText(line.text);
+        
+        let { bgColor, textColor } = applyInvertStyle(line.baseColor, line.invertMode);
+        ctx.font = `${line.fontSize}px "${line.fontFamily}"`;
+        
+       
+        let totalWidth = 0;
+        segments.forEach(seg => {
+            ctx.font = `${line.fontSize}px "${line.fontFamily}"`;
+            totalWidth += ctx.measureText(seg.text).width;
+        });
+        
+        let startX = line.alignment === 'center' ? (W - totalWidth) / 2 : 
+                     (line.alignment === 'right' ? W - totalWidth - 18 : 22);
+        
+        let currentX = startX;
+        
+       
+        segments.forEach(seg => {
+            ctx.font = `${line.fontSize}px "${line.fontFamily}"`;
+            let textWidth = ctx.measureText(seg.text).width;
+            
+            if(bgColor) { 
+                ctx.fillStyle = bgColor; 
+                ctx.fillRect(currentX, currentY-line.fontSize, textWidth+2, line.fontSize+4); 
+            }
+            
+           
+            if(seg.isRed) {
+                ctx.fillStyle = "#FF0000";  
+            } else {
+                ctx.fillStyle = textColor;
+            }
+            
+            ctx.fillText(seg.text, currentX, currentY);
+            currentX += textWidth;
+        });
+        
+        hitAreas.push({ index:i, yTop: currentY-20, yBottom: currentY+10 });
+        currentY += line.fontSize + 8;
+        if(currentY > H-20) break;
+    }
+
+    ctx.fillStyle = "#000";
+    ctx.fillRect(16, H-11, 42, 2);
+    ctx.fillStyle = "#FF0000";
+    ctx.fillRect(66, H-13, 26, 2);
+}
+
+
+function parseColoredText(text) {
+   const segments = [];
+    let lastIndex = 0;
+    const regex = /【(.*?)】/g;
+    let match;
+    
+    while ((match = regex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            segments.push({
+                text: text.substring(lastIndex, match.index),
+                isRed: false
+            });
+        }
+        segments.push({
+            text: match[1],
+            isRed: true
+        });
+        lastIndex = match.index + match[0].length;
+    }
+    
+    if (lastIndex < text.length) {
+        segments.push({
+            text: text.substring(lastIndex),
+            isRed: false
+        });
+    }
+    
+    return segments.length ? segments : [{ text: text, isRed: false }];
+}
+
+        
+     async function renderQRCodeMode() {
+    ctx.fillStyle = "#ffffffff";
+    ctx.fillRect(0, 0, W, H);
+    
+    const isSmallScreen = (W === 296 && H === 128);
+    const isLargeScreen = (W === 800 && H === 480);
+    
+    if (!isSmallScreen) {
+        
+        ctx.strokeStyle = "#FF0000"; 
+        ctx.lineWidth = 2; 
+        ctx.strokeRect(4, 4, W-8, H-8);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(8, 8, 26, 4);
+        ctx.fillStyle = "#000";
+        ctx.fillRect(W-54, 12, 42, 4);
+        
+        const headerFontSize = isLargeScreen ? 36 : 18;
+        ctx.font = `bold ${headerFontSize}px '微软雅黑'`;
+        ctx.fillStyle = "#FF0000";
+        ctx.fillText(globalTitle.slice(0, 20), 33, headerFontSize + 10);
+        
+        ctx.beginPath();
+        ctx.moveTo(12, headerFontSize + 20);
+        ctx.lineTo(W-12, headerFontSize + 20);
+        ctx.stroke();
+        
+        var qrY = headerFontSize + 24;
+        var captionStartY = headerFontSize + qrSize + 30;
+    } else {
+          ctx.strokeStyle = "#FF0000"; 
+        ctx.lineWidth = 2; 
+        ctx.strokeRect(4, 4, W-8, H-8);
+       
+        var qrY = 8;
+        var captionStartY = qrSize + 12;
+    }
+    
+    if(qrCodeImage) {
+        const img = new Image();
+        img.src = qrCodeImage;
+        await new Promise(r => { img.onload = r; img.onerror = r; });
+        
+        
+        let drawSize = qrSize;
+        if (isSmallScreen && drawSize > 90) {
+            drawSize = 80;
+        }
+        ctx.drawImage(img, (W-drawSize)/2, qrY, drawSize, drawSize);
+    }
+    
+    let y = captionStartY;
+    const captionFontSize = isLargeScreen ? 32 : (isSmallScreen ? 12 : 18);
+    
+    for(let line of qrCaptionLines) {
+        if(!line.trim()) { y += captionFontSize + 4; continue; }
+        ctx.font = `${captionFontSize}px '微软雅黑'`;
+        let tw = ctx.measureText(line).width;
+        ctx.fillStyle = "#f00";
+        ctx.fillText(line, (W-tw)/2, y+(H/20));
+        y += captionFontSize + 6;
+    }
+    
+    if (!isSmallScreen) {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(16, H-11, 42, 2);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(66, H-13, 26, 2);
+    }
+}
+
+function renderCustomMode() {
+    ctx.fillStyle = "#ffffffff";
+    ctx.fillRect(0, 0, W, H);
+    
+    const isSmallScreen = (W === 296 && H === 128);
+    const isLargeScreen = (W === 800 && H === 480);
+    
+    if (!isSmallScreen) {
+       
+        ctx.strokeStyle = "#FF0000"; 
+        ctx.lineWidth = 2;
+        ctx.strokeRect(4, 4, W-8, H-8);
+        
+        const headerFontSize = isLargeScreen ? 40 : 20;  
+        const headerText = globalTitle.slice(0, 24);
+        ctx.font = `bold ${headerFontSize}px '微软雅黑'`;
+        const textWidth = ctx.measureText(headerText).width;
+        
+        const boxX = 14;
+        const boxY = 8;
+        const boxWidth = Math.max(textWidth + 30, 150);
+        const boxHeight = headerFontSize + 10;
+        
+        ctx.fillStyle = "#000";
+        ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillText(headerText, boxX + 15, boxY + headerFontSize + 3);
+        
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(8, 8, 26, 4);
+        ctx.fillStyle = "#000";
+        ctx.fillRect(W-54, 12, 42, 4);
+        
+        ctx.beginPath();
+        ctx.moveTo(12, headerFontSize + 30);
+        ctx.lineTo(W-12, headerFontSize + 30);
+        ctx.stroke();
+        
+        var startY = headerFontSize + 48;
+    } else {
+          ctx.strokeStyle = "#FF0000"; 
+        ctx.lineWidth = 2; 
+        ctx.strokeRect(4, 4, W-8, H-8);
+        
+        var startY = 8;
+    }
+    
+    const { fontSize, fontFamily, baseColor, invertMode, alignment } = customStyle;
+    const { bgColor, textColor } = applyInvertStyle(baseColor, invertMode);
+    ctx.font = `${fontSize}px "${fontFamily}"`;
+    
+    let rawLines = customRawText.split('\n');
+    let allLines = [];
+    
+    for(let line of rawLines) {
+        let segments = parseColoredText(line);
+        let currentLineSegments = [];
+        let currentLineWidth = 0;
+        
+        for(let seg of segments) {
+            ctx.font = `${fontSize}px "${fontFamily}"`;
+            let segWidth = ctx.measureText(seg.text).width;
+            
+            if(currentLineWidth + segWidth > W - 44 && currentLineSegments.length > 0) {
+                allLines.push([...currentLineSegments]);
+                currentLineSegments = [];
+                currentLineWidth = 0;
+            }
+            currentLineSegments.push(seg);
+            currentLineWidth += segWidth;
+        }
+        if(currentLineSegments.length > 0) {
+            allLines.push(currentLineSegments);
+        }
+    }
+    
+    let y = startY;
+    for(let lineSegments of allLines) {
+        if(!lineSegments.length) { y += fontSize + 6; continue; }
+        
+        let totalWidth = 0;
+        for(let seg of lineSegments) {
+            ctx.font = `${fontSize}px "${fontFamily}"`;
+            totalWidth += ctx.measureText(seg.text).width;
+        }
+        
+        let startX = alignment === 'center' ? (W - totalWidth) / 2 : 
+                     (alignment === 'right' ? W - totalWidth - 18 : 22);
+        
+        let currentX = startX;
+        
+        for(let seg of lineSegments) {
+            ctx.font = `${fontSize}px "${fontFamily}"`;
+            let textWidth = ctx.measureText(seg.text).width;
+            const textHeight = fontSize;
+            
+            if(bgColor) { 
+                ctx.fillStyle = bgColor; 
+                ctx.fillRect(currentX-2, y + fontSize/2 - textHeight+1, textWidth+4, textHeight + 4); 
+            }
+            
+            if(seg.isRed) {
+                ctx.fillStyle = "#FF0000";
+            } else {
+                ctx.fillStyle = textColor;
+            }
+            
+            ctx.fillText(seg.text, currentX, y + fontSize/2);
+            currentX += textWidth;
+        }
+        
+        y += fontSize + 6;
+        if(y > H-30) break;
+    }
+    
+    if (!isSmallScreen) {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(16, H-11, 42, 2);
+        ctx.fillStyle = "#FF0000";
+        ctx.fillRect(66, H-13, 26, 2);
+    }
+}
+
+        function render() {
+            if(currentTemplate === 'course') renderCourseTable();
+            else if(currentTemplate === 'qrcode') renderQRCodeMode();
+            else if(currentTemplate === 'customText') renderCustomMode();
+            else renderPresetTemplate();
+             const canvas = document.getElementById('unifiedCanvas');
+            applyImageAdjustmentsmb(canvas)
+        }
+         function applyImageAdjustmentsmb(canvas) {
+             const brightness = 0;
+            const contrast = 100;
+            const saturation = 100;
+            const diffusion = 0; 
+            const ctx = canvas.getContext('2d');
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+            if (brightness !== 0) {
+                const brightnessFactor = brightness / 100;
+                for (let i = 0; i < data.length; i += 4) {
+                    data[i] = clamp(data[i] + 255 * brightnessFactor, 0, 255);
+                    data[i + 1] = clamp(data[i + 1] + 255 * brightnessFactor, 0, 255);
+                    data[i + 2] = clamp(data[i + 2] + 255 * brightnessFactor, 0, 255);
+                }
+            }
+            if (contrast !== 0) {
+                const contrastFactor = (contrast + 100) / 100;
+                const contrastAdjust = (1 - contrastFactor) * 128;
+                for (let i = 0; i < data.length; i += 4) {
+                    data[i] = clamp(data[i] * contrastFactor + contrastAdjust, 0, 255);
+                    data[i + 1] = clamp(data[i + 1] * contrastFactor + contrastAdjust, 0, 255);
+                    data[i + 2] = clamp(data[i + 2] * contrastFactor + contrastAdjust, 0, 255);
+                }
+            }
+            if (saturation !== 100) {
+                const saturationFactor = saturation / 100;
+                for (let i = 0; i < data.length; i += 4) {
+                    const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+                    data[i] = clamp(gray + (data[i] - gray) * saturationFactor, 0, 255);
+                    data[i + 1] = clamp(gray + (data[i + 1] - gray) * saturationFactor, 0, 255);
+                    data[i + 2] = clamp(gray + (data[i + 2] - gray) * saturationFactor, 0, 255);
+                }
+            }
+            ctx.putImageData(imageData, 0, 0);
+            return diffusion;
+        }
+        
+        function handleCanvasClick(e) {
+            if(currentTemplate === 'course') {
+                const r = canvas.getBoundingClientRect();
+                const x = (e.clientX-r.left)*(W/r.width);
+                const y = (e.clientY-r.top)*(H/r.height);
+                for(let a of courseHitAreas) {
+                    if(x>=a.x&&x<=a.x+a.w&&y>=a.y&&y<=a.y+a.h) {
+                        editCourseCell(a.row,a.col,a.currentName); return;
+                    }
+                }
+                return;
+            }
+
+            if(currentTemplate === 'qrcode') {
+                const r = canvas.getBoundingClientRect();
+                const y = (e.clientY-r.top)*(H/r.height);
+                if(y>130) {
+                    const m = document.createElement('div');
+                    m.className='modal-mask';
+                    m.innerHTML=`<div class="modal-card"><h3>编辑文字</h3><textarea rows=4 style="width:100%;background:#000;color:#fff;border:1px solid red;border-radius:16px;padding:10px;">${qrCaptionLines.join('\n')}</textarea><div class="modal-buttons"><button class=cancel>取消</button><button class=ok>保存</button></div></div>`;
+                    document.body.appendChild(m);
+                    m.querySelector('.ok').onclick=()=>{
+                        qrCaptionLines = m.querySelector('textarea').value.split('\n');
+                        updateCaptionLinesToUI();
+                        render(); m.remove();
+                    };
+                    m.querySelector('.cancel').onclick=()=>m.remove();
+                }
+                return;
+            }
+
+            if(currentTemplate !== 'customText') {
+                const r = canvas.getBoundingClientRect();
+                const y = (e.clientY-r.top)*(H/r.height);
+                for(let a of hitAreas) {
+                    if(y>=a.yTop&&y<=a.yBottom) {
+                        editPresetModal(a.index); return;
+                    }
+                }
+               
+                 addPresetNewRow();
+            }
+        }
+        
+function addPresetNewRow() {
+            const modal = document.createElement('div');
+            modal.className = 'modal-mask';
+            modal.innerHTML = `
+                <div class="modal-card">
+                    <h3>➕ 添加新行</h3>
+                    <div class="modal-field"><label>文字内容</label><input id="modalText" value="新行内容"></div>
+                    <div class="modal-field"><label>大小</label><input id="modalFontSize" type="number" value="14" min="10" max="52"></div>
+                    <div class="modal-field"><label>字体</label><select id="modalFontFamily">${chineseFonts.map(f => `<option value="${f}">${f}</option>`).join('')}</select></div>
+                    <div class="modal-field"><label>基色</label><select id="modalBaseColor"><option value="#000000">黑色</option><option value="#FF0000">红色</option></select></div>
+                    <div class="modal-field"><label>反色</label><select id="modalInvert">${invertModes.map(m => `<option value="${m.value}">${m.label}</option>`).join('')}</select></div>
+                    <div class="modal-field"><label>对齐</label><select id="modalAlign"><option value="left">左</option><option value="center">中</option><option value="right">右</option></select></div>
+                    <div class="modal-buttons"><button class="cancel" id="cancelBtn">取消</button><button id="confirmBtn">确认</button></div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            const confirm = () => {
+                const newRow = {
+                    text: modal.querySelector('#modalText').value,
+                    fontSize: Math.min(52, Math.max(10, parseInt(modal.querySelector('#modalFontSize').value) || 14)),
+                    fontFamily: modal.querySelector('#modalFontFamily').value,
+                    baseColor: modal.querySelector('#modalBaseColor').value,
+                    invertMode: modal.querySelector('#modalInvert').value,
+                    alignment: modal.querySelector('#modalAlign').value
+                };
+                presetLinesData.push(newRow);
+                renderPresetTemplate();
+                modal.remove();
+            };
+            modal.querySelector('#confirmBtn').onclick = confirm;
+            modal.querySelector('#cancelBtn').onclick = () => modal.remove();
+            modal.onclick = (e) => { if(e.target === modal) modal.remove(); };
+        }
+        
+        function editPresetModal(idx) {
+            const line = presetLinesData[idx];
+            const modal = document.createElement('div');
+            modal.className = 'modal-mask';
+            modal.innerHTML = `
+                <div class="modal-card">
+                    <h3>编辑第 ${idx+1} 行</h3>
+                    <div class="modal-field"><label>文字内容</label><input id="modalText" value="${escapeHtml(line.text)}"></div>
+                    <div class="modal-field"><label>大小</label><input id="modalFontSize" type="number" value="${line.fontSize}" min="10" max="52"></div>
+                    <div class="modal-field"><label>字体</label><select id="modalFontFamily">${chineseFonts.map(f => `<option value="${f}" ${line.fontFamily===f?'selected':''}>${f}</option>`).join('')}</select></div>
+                    <div class="modal-field"><label>基色</label><select id="modalBaseColor"><option value="#000000" ${line.baseColor==='#000000'?'selected':''}>黑色</option><option value="#FF0000" ${line.baseColor==='#FF0000'?'selected':''}>红色</option></select></div>
+                    <div class="modal-field"><label>反色</label><select id="modalInvert">${invertModes.map(m => `<option value="${m.value}" ${line.invertMode===m.value?'selected':''}>${m.label}</option>`).join('')}</select></div>
+                    <div class="modal-field"><label>对齐</label><select id="modalAlign"><option value="left" ${line.alignment==='left'?'selected':''}>左</option><option value="center" ${line.alignment==='center'?'selected':''}>中</option><option value="right" ${line.alignment==='right'?'selected':''}>右</option></select></div>
+                    <div class="modal-buttons"><button class="cancel" id="cancelBtn">取消</button><button id="confirmBtn">确认</button></div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            const confirm = () => {
+                presetLinesData[idx] = {
+                    text: modal.querySelector('#modalText').value,
+                    fontSize: Math.min(52, Math.max(10, parseInt(modal.querySelector('#modalFontSize').value) || 14)),
+                    fontFamily: modal.querySelector('#modalFontFamily').value,
+                    baseColor: modal.querySelector('#modalBaseColor').value,
+                    invertMode: modal.querySelector('#modalInvert').value,
+                    alignment: modal.querySelector('#modalAlign').value
+                };
+                renderPresetTemplate();
+                modal.remove();
+            };
+            modal.querySelector('#confirmBtn').onclick = confirm;
+            modal.querySelector('#cancelBtn').onclick = () => modal.remove();
+            modal.onclick = (e) => { if(e.target === modal) modal.remove(); };
+        }
+
+        function switchTemplate(tpl) {
+            currentTemplate = tpl;
+            document.getElementById('customBlock').style.display = tpl==='customText'?'block':'none';
+            document.getElementById('qrcodeBlock').style.display = tpl==='qrcode'?'block':'none';
+            document.getElementById('courseBlock').style.display = tpl==='course'?'block':'none';
+            document.getElementById('presetHintBlock').style.display = (tpl!=='customText'&&tpl!=='qrcode')?'block':'none';
+            
+            if(tpl === 'course') { loadPresetData('schedule'); render(); }
+            else if(tpl === 'qrcode') { syncCaptionFromTextarea(); refreshQRImage(); }
+            else if(tpl === 'customText') { render(); }
+            else { loadPresetData(tpl); render(); }
+        }
+
+        function resetCurrent() {
+            if(currentTemplate === 'customText') {
+                customRawText =  "小雨在放学路上捡到一枚【闪闪发亮的硬币】。\n她买了两颗【橘子味的糖果】，一颗塞进嘴里，\n甜得她眯起了眼睛；另一颗放在路边的长椅上。\n一只【唱歌的小鸟】飞过来，歪着脑袋看了看\n，叼起糖果飞走了。小雨有点失落，\n但还是继续往家走。第二天早上，她推开窗户，\n发现窗台上放着一朵【金黄色的小野花】，花瓣上还挂着露珠。小雨捧着花笑了：\n“原来快乐会【越分越多】呀。”\n从那天起，她每天都往长椅上放一颗糖。";
+        document.getElementById('freeTextArea').value = customRawText;
+            } else if(currentTemplate === 'qrcode') {
+                qrText = "https://mspppclock.tech/";
+                document.getElementById('qrContentInput').value = qrText;
+                qrCaptionLines = ["扫码访问官网"];
+                updateCaptionLinesToUI();
+                refreshQRImage();
+            } else if(currentTemplate === 'course') {
+                initDefaultCourse();
+            } else {
+                loadPresetData(currentTemplate);
+            }
+            render();
+        }
+
+        function escapeHtml(s) {
+            return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+        }
+
+        function init() {
+          
+            const fsel = document.getElementById('customFontFamily');
+            chineseFonts.forEach(f=>{ let o=document.createElement('option');o.value=f;o.textContent=f;fsel.appendChild(o); });
+            const isel = document.getElementById('customInvertMode');
+            invertModes.forEach(m=>{ let o=document.createElement('option');o.value=m.value;o.textContent=m.label;isel.appendChild(o); });
+
+            document.getElementById('freeTextArea').value = customRawText;
+            document.getElementById('freeTextArea').oninput = e=>{ customRawText=e.target.value; render(); };
+            document.querySelectorAll('#customFontSize,#customFontFamily,#customBaseColor,#customInvertMode,#customAlign').forEach(i=>{
+                i.onchange=()=>{
+                    customStyle.fontSize = +document.getElementById('customFontSize').value;
+                    customStyle.fontFamily = document.getElementById('customFontFamily').value;
+                    customStyle.baseColor = document.getElementById('customBaseColor').value;
+                    customStyle.invertMode = document.getElementById('customInvertMode').value;
+                    customStyle.alignment = document.getElementById('customAlign').value;
+                    render();
+                };
+            });
+
+            document.getElementById('globalTitleInput').oninput = e=>{ globalTitle=e.target.value; render(); };
+            document.getElementById('forceRefreshBtn').onclick = render;
+            document.getElementById('resetCurrentBtn').onclick = resetCurrent;
+            document.getElementById('generateQRBtn').onclick = ()=>{ qrText=document.getElementById('qrContentInput').value; refreshQRImage(); };
+            document.getElementById('qrCaptionText').oninput = ()=>{ syncCaptionFromTextarea(); render(); };
+            document.getElementById('applyCourseSettingBtn').onclick = applyCourseCustomSettings;
+            canvas.onclick = handleCanvasClick;
+
+            document.querySelectorAll('.temp-btn').forEach(b=>{
+                b.onclick=()=>{
+                    document.querySelectorAll('.temp-btn').forEach(x=>x.classList.remove('active'));
+                    b.classList.add('active');
+                    switchTemplate(b.dataset.template);
+                };
+            });
+
+            document.getElementById('epdwh').addEventListener('change', function() {
+                const [newW, newH] = this.value.split('x').map(Number);
+                canvas.width = newW;
+                canvas.height = newH;
+                render();
+            });
+            // 监听屏幕尺寸变化
+                document.getElementById('epdwh').addEventListener('change', function() {
+                   updateCanvasSize();
+                    if (currentTemplate === 'qrcode') {
+                        refreshQRImage();  // 二维码模式需要重新生成
+                    } else {
+                        render();
+                    }
+                });
+            switchTemplate('schedule');
+        }
+
+        init();
+    })();