@flun/html-template 4.0.10

package/customize/data.json

@@ -0,0 +1,484 @@
+{
+  "topImg": {
+    "1492x874": {
+      "style": {
+        "left": "1375px",
+        "top": "793.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x682": {
+      "style": {
+        "left": "321.722px",
+        "top": "602.178px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "357x669": {
+      "style": {
+        "left": "334.089px",
+        "top": "522.044px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    }
+  },
+  "themeImg": {
+    "1492x874": {
+      "style": {
+        "left": "22px",
+        "top": "24.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x682": {
+      "style": {
+        "left": "14.4px",
+        "top": "9.18329px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x332": {
+      "style": {
+        "left": "15px",
+        "top": "17px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x544": {
+      "style": {
+        "left": "26.5px",
+        "top": "23.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x359": {
+      "style": {
+        "left": "28.5px",
+        "top": "15px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x564": {
+      "style": {
+        "left": "50px",
+        "top": "70.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x273": {
+      "style": {
+        "left": "30.5px",
+        "top": "25.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1480x544": {
+      "style": {
+        "left": "136px",
+        "top": "129.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "700x800": {
+      "style": {
+        "left": "18px",
+        "top": "28px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x868": {
+      "style": {
+        "left": "25px",
+        "top": "25.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    }
+  },
+  "longPic": {
+    "1492x874": {
+      "style": {
+        "left": "50%",
+        "top": "50%",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x868": {
+      "style": {
+        "left": "931px",
+        "top": "246px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    }
+  },
+  "cssEditor": {
+    "1492x874": {
+      "style": {
+        "left": "721.5px",
+        "top": "50px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x682": {
+      "style": {
+        "left": "15.4555px",
+        "top": "14.4833px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x602": {
+      "style": {
+        "left": "390px",
+        "top": "24px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x288": {
+      "style": {
+        "left": "383px",
+        "top": "74px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x542": {
+      "style": {
+        "left": "400px",
+        "top": "17px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x544": {
+      "style": {
+        "left": "256px",
+        "top": "30.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x359": {
+      "style": {
+        "left": "563.5px",
+        "top": "71px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x564": {
+      "style": {
+        "left": "564px",
+        "top": "74px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x273": {
+      "style": {
+        "left": "766.5px",
+        "top": "35.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1500x849": {
+      "style": {
+        "left": "769px",
+        "top": "41px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "400x685": {
+      "style": {
+        "left": "730.5px",
+        "top": "38.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x691": {
+      "style": {
+        "left": "52.5333px",
+        "top": "-2.31111px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "357x669": {
+      "style": {
+        "left": "32.7722px",
+        "top": "6px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x868": {
+      "style": {
+        "left": "753px",
+        "top": "33.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x693": {
+      "style": {
+        "left": "24.2923px",
+        "top": "1.08228px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "desktop": {
+      "top": 27,
+      "left": 764
+    },
+    "1492x170": {
+      "style": {
+        "left": "764px",
+        "top": "25px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x606": {
+      "style": {
+        "left": "743.5px",
+        "top": "15px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x464": {
+      "style": {
+        "left": "750px",
+        "top": "40px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x150": {
+      "style": {
+        "left": "757px",
+        "top": "48px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x153": {
+      "style": {
+        "left": "753px",
+        "top": "34px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x271": {
+      "style": {
+        "left": "750px",
+        "top": "40px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x231": {
+      "style": {
+        "left": "741px",
+        "top": "33px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x182": {
+      "style": {
+        "left": "744px",
+        "top": "32px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x622": {
+      "style": {
+        "left": "745px",
+        "top": "43.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x194": {
+      "style": {
+        "left": "740px",
+        "top": "29.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x405": {
+      "style": {
+        "left": "766px",
+        "top": "29px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x336": {
+      "style": {
+        "left": "754px",
+        "top": "47px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x547": {
+      "style": {
+        "left": "756px",
+        "top": "34px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x161": {
+      "style": {
+        "left": "744px",
+        "top": "38px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    }
+  },
+  "preview": {
+    "1492x874": {
+      "style": {
+        "left": "31px",
+        "top": "53px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x682": {
+      "style": {
+        "left": "-236.989px",
+        "top": "52.5556px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x602": {
+      "style": {
+        "left": "390px",
+        "top": "24px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x288": {
+      "style": {
+        "left": "383px",
+        "top": "74px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x542": {
+      "style": {
+        "left": "400px",
+        "top": "17px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1479x544": {
+      "style": {
+        "left": "256px",
+        "top": "30.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x359": {
+      "style": {
+        "left": "563.5px",
+        "top": "71px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x564": {
+      "style": {
+        "left": "564px",
+        "top": "74px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x273": {
+      "style": {
+        "left": "766.5px",
+        "top": "35.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1500x849": {
+      "style": {
+        "left": "44px",
+        "top": "39px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "400x685": {
+      "style": {
+        "left": "-269px",
+        "top": "39px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "357x669": {
+      "style": {
+        "left": "-320px",
+        "top": "114.599px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "1492x868": {
+      "style": {
+        "left": "15px",
+        "top": "38.5px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "384x693": {
+      "style": {
+        "left": "-157.932px",
+        "top": "57.3333px",
+        "right": "auto",
+        "bottom": "auto"
+      }
+    },
+    "desktop": {
+      "top": 11,
+      "left": -3
+    }
+  }
+}

package/customize/functions.js

@@ -0,0 +1,48 @@
+// 自定义工具函数示例
+
+export default {
+	functions: {
+		// 简单计算器函数
+		add: (a, b) => {
+			return a + b;
+		},
+
+		subtract: (a, b) => {
+			return a - b;
+		},
+
+		multiply: (a, b) => {
+			return a * b;
+		},
+
+		divide: (a, b) => {
+			return b !== 0 ? a / b : '错误: 除零错误';
+		},
+
+		// 简单问候函数
+		greet: name => {
+			return `你好, ${name}!`;
+		},
+
+		// 带时间的问候
+		greetWithTime: name => {
+			return `你好, ${name}! 现在是 ${new Date().toLocaleTimeString()}`;
+		},
+
+		// 格式化日期
+		formatDate: date => {
+			// 处理无参数调用
+			if (date === undefined) return new Date().toLocaleDateString('zh-CN');
+
+			// 处理字符串输入
+			if (typeof date === 'string') {
+				const parsedDate = new Date(date);
+				return isNaN(parsedDate.getTime()) ? '字符串无效' : parsedDate.toLocaleDateString('zh-CN');
+			}
+
+			// 处理其他类型
+			const dateObj = new Date(date);
+			return isNaN(dateObj.getTime()) ? '无效日期' : dateObj.toLocaleDateString('zh-CN');
+		}
+	}
+};

package/customize/hotReloadInjector.js

@@ -0,0 +1,25 @@
+/**注入热重载脚本到 HTML 中
+ * > 查看定义:@see {@link injectScript}
+ * @param {string} html - 原始 HTML 内容
+ * @returns {string} 注入热重载脚本后的 HTML 内容
+ */
+const injectScript = html => {
+	if (/hot-reload-socket|socket\.io\.js/.test(html)) return html; // 避免重复注入
+	const socketScript = `
+       		<script src="/socket.io/socket.io.js"></script>
+       		<script>
+       		  (function() {
+       		    var socket = io();
+       		    socket.on('hot-reload', delay => {
+       		      console.log('[热重载] 检测到文件更改,' + delay + '毫秒后重新加载页面...');
+       		      setTimeout(() => window.location.reload(), delay);
+       		    });
+       		  })();
+       		</script>
+   		`;
+
+	if (html.includes('</body>')) return html.replace('</body>', `${socketScript}</body>`);
+	return html + socketScript;
+};
+
+export { injectScript };

package/customize/routes.js

@@ -0,0 +1,141 @@
+// /customize/routes.js
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url), __dirname = path.dirname(__filename),
+	dataFile = path.join(__dirname, 'data.json'), imgDir = path.join(__dirname, '../static/img');
+
+/** @type {(app: import('express').Express) => void} */
+let accountRouter;
+try {
+	/**
+	 * 尝试加载 account.js 中的 accountRouter 函数,如果文件不存在或没有导出该函数,则继续执行后续代码;
+	 * 当前的设计是为了兼容启用了登录模式的用户;只有启用登录模式才会创建 account.js;
+	 */
+	({ accountRouter } = await import('./account.js'));
+} catch { }
+
+// 非认证路由：元素样式、CSS编辑、图片管理、自定义API等
+export default {
+	setupRoutes: app => {
+		if (!accountRouter) {
+			app.get('/api/user', (req, res) => {
+				res.json({ message: '登录功能未启用' });
+			});
+		}
+		accountRouter?.(app);
+		app.use(express.json(), express.urlencoded({ extended: true }));
+
+		// ============ 元素样式 API ============
+		let data;
+		try {
+			data = JSON.parse(fs.readFileSync(dataFile, 'utf8'));
+		} catch (e) {
+			data = {};
+		}
+
+		const elements = ['topImg', 'themeImg', 'longPic', 'cssEditor', 'preview'],
+			getElementStyle = (elementKey) => {
+				return (req, res) => {
+					try {
+						res.json(data[elementKey] || {});
+					} catch (error) {
+						console.error(`读取${elementKey}样式失败:`, error);
+						res.status(500).json({ error: '服务器错误' });
+					}
+				};
+			},
+			updateElementStyle = (elementKey) => {
+				return (req, res) => {
+					try {
+						const devViewSize = Object.keys(req.body)[0];
+						if (!devViewSize) return res.status(400).json({ error: '缺少设备标识' });
+						if (!data[elementKey]) data[elementKey] = {};
+						data[elementKey][devViewSize] = req.body[devViewSize];
+						fs.writeFileSync(dataFile, JSON.stringify(data, null, 2));
+						res.json({ success: true, message: `${elementKey}已更新`, deviceId: devViewSize });
+					} catch (error) {
+						console.error(`更新${elementKey}失败:`, error);
+						res.status(500).json({ error: '服务器错误' });
+					}
+				};
+			};
+
+		elements.forEach(element => {
+			app.get(`/api/${element}`, getElementStyle(element));
+			app.post(`/api/${element}`, updateElementStyle(element));
+		});
+		console.log('✅ 元素样式路由已加载');
+
+		// ============ CSS 文件操作 ============
+		app.get('/api/css', (req, res) => {
+			const fileDir = req.query.fileDir;
+			if (!fileDir) return res.status(400).json({ error: '缺少文件路径' });
+			if (!fileDir.endsWith('.css')) return res.status(403).json({ error: '只允许操作 CSS 文件' });
+
+			try {
+				const normalizedPath = fileDir.startsWith('/') ? fileDir.slice(1) : fileDir,
+					filePath = path.resolve(normalizedPath);
+				if (!fs.existsSync(filePath)) return res.status(404).json({ error: '文件不存在' });
+				const content = fs.readFileSync(filePath, 'utf8');
+				res.type('text/plain').send(content);
+			} catch (error) {
+				console.error('读取 CSS 失败:', error);
+				res.status(500).json({ error: '服务器错误' });
+			}
+		});
+
+		app.post('/api/css', (req, res) => {
+			const { fileDir, content } = req.body;
+			if (!fileDir || content === undefined) return res.status(400).json({ error: '缺少参数' });
+			if (!fileDir.endsWith('.css')) return res.status(403).json({ error: '只允许操作 CSS 文件' });
+
+			try {
+				const normalizedPath = fileDir.startsWith('/') ? fileDir.slice(1) : fileDir,
+					filePath = path.resolve(normalizedPath),
+					dir = path.dirname(filePath);
+				if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+				fs.writeFileSync(filePath, content, 'utf8');
+				res.json({ success: true, message: 'CSS 已保存' });
+			} catch (error) {
+				console.error('保存 CSS 失败:', error);
+				res.status(500).json({ error: '服务器错误' });
+			}
+		});
+		console.log('✅ CSS 编辑路由已加载');
+
+		// ============ 图片列表 ============
+		app.get('/api/images', (req, res) => {
+			try {
+				if (!fs.existsSync(imgDir)) return res.json([]);
+				const files = fs.readdirSync(imgDir), imgs = files.filter((f) => /\.(jpg|jpeg|png|gif|webp|svg|ico)$/i.test(f));
+				res.json(imgs);
+			} catch (error) {
+				console.error('获取图片列表失败:', error);
+				res.status(500).json({ error: '服务器错误' });
+			}
+		});
+		console.log('✅ 非认证路由加载完成（routes.js）');
+
+		// ============ 其它自定义API路由 ============
+		app.get('/api/greeting', (req, res) => {
+			res.json({ message: '你好！这是来自用户自定义路由的问候！' });
+		});
+
+		app.get('/api/hi/:name', (req, res) => {
+			res.json({
+				message: `你好, ${req.params.name}!`, timestamp: new Date().toLocaleString('zh-CN'),
+			});
+		});
+
+		app.post('/api/contact', (req, res) => {
+			res.json({
+				success: true, message: '感谢您的留言！',
+			});
+		});
+
+		console.log('✅ 自定义路由已加载！');
+	},
+};