@flun/html-template 4.0.10

package/static/utils/foldgutter.js

@@ -0,0 +1,141 @@
+// CodeMirror库 - 折叠处理逻辑的优化和扩展 (https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js)
+
+(function (mod) {
+    if (typeof exports == "object" && typeof module == "object") mod(require("../../lib/codemirror"), require("./foldcode"));
+    else if (typeof define == "function" && define.amd) define(["../../lib/codemirror", "./foldcode"], mod);
+    else mod(CodeMirror);
+})((CodeMirror) => {
+    "use strict";
+
+    class State {
+        constructor(options) {
+            this.options = options, this.from = 0, this.to = 0;
+        }
+    };
+
+    CodeMirror.defineOption("foldGutter", false, (cm, val, old) => {
+        if (old && old != CodeMirror.Init) {
+            cm.clearGutter(cm.state.foldGutter.options.gutter), cm.state.foldGutter = null;
+            cm.off("gutterClick", onGutterClick).off("changes", onChange).off("viewportChange", onViewportChange)
+                .off("fold", onFold).off("unfold", onFold).off("swapDoc", onChange);
+        }
+        if (val) {
+            cm.state.foldGutter = new State(parseOptions(val)), updateInViewport(cm, cm.state.foldGutter);
+            cm.on("gutterClick", onGutterClick), cm.on("changes", onChange), cm.on("viewportChange", onViewportChange);
+            cm.on("fold", onFold), cm.on("unfold", onFold), cm.on("swapDoc", onChange);
+        }
+    });
+
+    const Pos = CodeMirror.Pos,
+        parseOptions = opts => {
+            if (opts === true) opts = {};
+            if (opts.gutter == null) opts.gutter = "CodeMirror-foldgutter";
+            if (opts.indicatorOpen == null) opts.indicatorOpen = "CodeMirror-foldgutter-open";
+            if (opts.indicatorFolded == null) opts.indicatorFolded = "CodeMirror-foldgutter-folded";
+            return opts;
+        },
+
+        // 安全获取 state 并注入回调
+        withFoldState = fn => (cm, ...args) => {
+            const state = cm.state.foldGutter;
+            if (!state) return;
+            return fn(cm, state, ...args);
+        },
+
+        isFolded = (cm, line) => {
+            const marks = cm.findMarks(Pos(line, 0), Pos(line + 1, 0));
+            for (let i = 0; i < marks.length; ++i) {
+                if (marks[i].__isFold) {
+                    const fromPos = marks[i].find(-1);
+                    if (fromPos && fromPos.line === line) return marks[i];
+                }
+            }
+        },
+
+        marker = spec => {
+            if (typeof spec == "string") {
+                const elt = document.createElement("div");
+                elt.className = `${spec} CodeMirror-guttermarker-subtle`;
+                return elt;
+            }
+            else return spec.cloneNode(true);
+        },
+        classTest = cls => new RegExp(`(^|\\s)${cls}(?:$|\\s)\\s*`),
+        updateFoldInfo = (cm, state, from, to) => {
+            const opts = state.options, minSize = cm.foldOption(opts, "minFoldSize"), func = cm.foldOption(opts, "rangeFinder"),
+                { indicatorFolded, indicatorOpen, gutter } = opts, clsOpen = typeof indicatorOpen == "string" && classTest(indicatorOpen),
+                clsFolded = typeof indicatorFolded == "string" && classTest(indicatorFolded);
+
+            // 根据条件返回应使用的标记元素
+            const getMarker = (shouldShow, clsTest, indicator, title, old) => {
+                if (shouldShow) {
+                    const { className, nodeType } = old || {};
+                    if (clsTest && old && clsTest.test(className)) {
+                        if (nodeType === 1) old.title = title;
+                        return old;
+                    }
+                    const mark = marker(indicator);
+                    if (mark?.nodeType === 1) mark.title = title;
+                    return mark;
+                }
+                return null;
+            };
+
+            let cur = from - 1;
+            cm.eachLine(from, to, line => {
+                ++cur;
+                const old = line.gutterMarkers?.[gutter], folded = isFolded(cm, cur);
+                let range = null, shouldShow = false, clsTest, indicator, title;
+
+                // 已折叠 → 应显示折叠标记
+                if (folded) shouldShow = true, clsTest = clsFolded, indicator = indicatorFolded, title = "点击展开";
+                // 未折叠，检查是否有可折叠范围
+                else {
+                    range = func?.(cm, Pos(cur, 0));
+                    if (range?.to.line - range?.from.line >= minSize)
+                        shouldShow = true, clsTest = clsOpen, indicator = indicatorOpen, title = "点击折叠";
+                }
+
+                const newMarker = getMarker(shouldShow, clsTest, indicator, title, old);
+                if (newMarker !== old) cm.setGutterMarker(line, gutter, newMarker);
+            });
+        },
+
+        updateInViewport = (cm, state) => {
+            const { from, to } = cm.getViewport();
+            cm.operation(() => updateFoldInfo(cm, state, from, to)), state.from = from, state.to = to;
+        },
+
+        onGutterClick = withFoldState((cm, state, line, gutter) => {
+            const opts = state.options;
+            if (gutter != opts.gutter) return;
+            const folded = isFolded(cm, line);
+            if (folded) folded.clear();
+            else cm.foldCode(Pos(line, 0), opts);
+        }),
+
+        onChange = withFoldState((cm, state) => {
+            const { foldOnChangeTimeSpan } = state.options;
+            state.from = state.to = 0, clearTimeout(state.changeUpdate);
+            state.changeUpdate = setTimeout(() => updateInViewport(cm, state), foldOnChangeTimeSpan || 600);
+        }),
+
+        onViewportChange = withFoldState((cm, state) => {
+            const { options, changeUpdate, from: sFrom, to: sTo } = state, { updateViewportTimeSpan } = options;
+            clearTimeout(changeUpdate);
+            state.changeUpdate = setTimeout(() => {
+                const { from, to } = cm.getViewport();
+                if (sFrom == sTo || from - sTo > 20 || sFrom - to > 20) updateInViewport(cm, state);
+                else
+                    cm.operation(() => {
+                        if (from < sFrom) updateFoldInfo(cm, state, from, sFrom), state.from = from;
+                        if (to > sTo) updateFoldInfo(cm, state, sTo, to), state.to = to;
+                    });
+            }, updateViewportTimeSpan || 400);
+        }),
+
+        onFold = withFoldState((cm, state, from) => {
+            const { from: stateFrom, to } = state, line = from.line;
+            if (line >= stateFrom && line < to) updateFoldInfo(cm, state, line, line + 1);
+        });
+});

package/static/utils/match-highlighter.js

@@ -0,0 +1,70 @@
+// 根目录/utils/match-highlighter.js
+/**
+ * 为 CodeMirror 编辑器附加自定义高亮功能;
+ * 当光标停留在某个单词上时,自动高亮编辑器中所有与之相同的独立单词;
+ *
+ * @param {Object} editor - CodeMirror 编辑器实例
+ * @returns {void}
+ */
+function attachCustomHighlight(editor) {
+    let currentMarks = []; // 存储当前高亮标记
+
+    function clearHighlights() {
+        currentMarks.forEach(mark => mark.clear()), currentMarks = [];
+    }
+
+    // 定义分隔符:空白字符 + CSS语法标点（不包括 . # - _ 这些可能出现在标识符中的字符）
+    function isSeparator(ch) {
+        if (!ch) return false;
+        if (/\s/.test(ch)) return true; // 空白字符
+        return '!"%&\'()*+,/:;<=>?@[\\]^{|}~`$'.indexOf(ch) !== -1; // 常见CSS分隔符
+    }
+
+    // 从光标位置获取完整的单词
+    function getWordAtCursor() {
+        const cursor = editor.getCursor(), line = editor.getLine(cursor.line), ch = cursor.ch;
+
+        // 如果光标在行尾或当前字符是分隔符,则返回空字符串(不高亮)
+        if (ch >= line.length) return '';
+        if (isSeparator(line[ch])) return '';
+
+        let start = ch, end = ch;
+        while (start > 0 && !isSeparator(line[start - 1])) start--; // 向左扩展直到遇到分隔符
+        while (end < line.length && !isSeparator(line[end])) end++; // 向右扩展直到遇到分隔符
+
+        return line.slice(start, end);
+    }
+
+    // 高亮指定单词
+    function highlightWord(word) {
+        clearHighlights();
+        if (!word || word.trim().length === 0) return;
+
+        const wordLen = word.length, lines = editor.lineCount();
+        for (let i = 0; i < lines; i++) {
+            const line = editor.getLine(i);
+            let pos = 0;
+            while (true) {
+                const index = line.indexOf(word, pos);
+                if (index === -1) break;
+                const endPos = index + wordLen, beforeChar = index > 0 ? line[index - 1] : '',
+                    afterChar = endPos < line.length ? line[endPos] : '',
+                    beforeOk = !beforeChar || isSeparator(beforeChar), afterOk = !afterChar || isSeparator(afterChar);
+
+                if (beforeOk && afterOk) {
+                    const from = { line: i, ch: index }, to = { line: i, ch: endPos },
+                        mark = editor.markText(from, to, { className: 'custom-highlight' });
+                    currentMarks.push(mark);
+                }
+
+                pos = index + 1;
+            }
+        }
+    }
+
+    // 绑定光标活动事件
+    editor.on('cursorActivity', () => {
+        const word = getWordAtCursor();
+        highlightWord(word);
+    });
+}

package/templates/about.html

@@ -0,0 +1,236 @@
+[extends base.html]<!-- 继承基础模板 -->
+
+[!title]关于我们 - 模板功能测试[~title]
+
+[!style]
+<link rel="stylesheet" href="/static/styling.css">
+<link rel="stylesheet" href="/static/about.css">
+[~style]
+
+[!content]
+[!test]<h1>关于我们的公司 - 模板功能测试</h1>[~test]
+
+<div class="abt_content_main">
+	<h2>主内容区</h2>
+	<p><a href="index.html">← 返回首页</a></p>
+</div>
+
+<!-- 复杂功能测试区域 -->
+<div class="new-feature-test">
+	<h3>复杂功能测试</h3>
+
+	<div class="test-result">
+		<h4>1. 复杂条件表达式测试</h4>
+
+		<!-- 复杂条件表达式测试 - 使用 else if 语法 -->
+		<div class="control-flow">
+			<h5>用户权限测试</h5>
+			{{if user.isLoggedIn && user.membershipLevel === 'VIP'}}
+			<p style="color:green;">✓ 您是已登录的VIP用户</p>
+			{{else if user.isLoggedIn || user.isGuest}}
+			<p style="color:blue;">✓ 您是已登录用户或访客</p>
+			{{else}}
+			<p style="color:red;">✗ 您未登录</p>
+			{{endif}}
+			<hr>
+			<h5>产品状态测试</h5>
+			{{if product.stock > 0 && product.price < 100}}
+			<p style="color:green;">✓ 产品有库存且价格低于100元</p>
+			{{else if product.stock === 0 || product.price >= 100}}
+			<p style="color:orange;">⚠ 产品缺货或价格较高</p>
+			{{endif}}
+			<hr>
+			<h5>团队技能测试</h5>
+			{{if teamMembers.length > 2 && teamMembers[0].skills.includes('JavaScript')}}
+			<p style="color:green;">✓ 团队规模大于2人且第一个成员懂JavaScript</p>
+			{{endif}}
+		</div>
+	</div>
+
+	<div class="test-result">
+		<h4>2. 循环控制语句测试</h4>
+
+		<div class="control-flow">
+			<h5>Break 语句测试 (遇到价格超过250元的产品停止)</h5>
+			<div class="product-list">
+				{{for product in products}}
+				{{if product.price > 250}}
+				{{break}}
+				{{endif}}
+				<div class="product-card">
+					<h5>{{product.name}}</h5>
+					<p>价格: ¥{{product.price}}</p>
+					<p>库存: {{product.stock}}件</p>
+				</div>
+				{{endfor}}
+			</div>
+			<hr>
+			<h5>Continue 语句测试 (跳过缺货产品)</h5>
+			<div class="product-list">
+				{{for product in products}}
+				{{if product.stock === 0}}
+				{{continue}}
+				{{endif}}
+				<div class="product-card">
+					<h5>{{product.name}}</h5>
+					<p>价格: ¥{{product.price}}</p>
+					<p>库存: {{product.stock}}件</p>
+				</div>
+				{{endfor}}
+			</div>
+		</div>
+	</div>
+
+	<div class="test-result">
+		<h4>3. 空状态处理测试</h4>
+
+		<div class="empty-state">
+			<h5>非空数组测试</h5>
+			{{for product in products}}
+			<div class="product-card" style="margin: 10px;">
+				<h5>{{product.name}}</h5>
+				<p>价格: ¥{{product.price}}</p>
+			</div>
+			{{empty}}
+			<p style="color:red;">✗ 错误: 应该显示产品列表</p>
+			{{endfor}}
+			<hr>
+			<h5>空数组测试</h5>
+			{{for item in emptyArray}}
+			<div class="product-card">
+				<h5>{{item.name}}</h5>
+			</div>
+			{{empty}}
+			<p style="color:green;">✓ 正确: 空数组显示空状态消息</p>
+			<p>暂无数据，请稍后再试</p>
+			{{endfor}}
+			<hr>
+			<h5>空对象测试</h5>
+			{{for key, value in emptyObject}}
+			<p><strong>{{key}}:</strong> {{value}}</p>
+			{{empty}}
+			<p style="color:green;">✓ 正确: 空对象显示空状态消息</p>
+			<p>暂无相关信息</p>
+			{{endfor}}
+		</div>
+	</div>
+</div>
+
+<!-- 条件判断和循环测试区域 -->
+<div class="logic-test">
+	<h3>条件判断和循环功能测试</h3>
+
+	<div class="test-result">
+		<h4>1. 条件判断测试</h4>
+
+		<!-- 用户登录状态判断 -->
+		<h5>嵌套条件判断</h5>
+		{{if user.isLoggedIn}}
+		<div class="user-status logged-in">
+			<p>欢迎回来, {{user.name}}!</p>
+			<p>您的会员等级: {{user.membershipLevel}}</p>
+			{{if user.membershipLevel === 'VIP'}}
+			<p>🎉 您是VIP会员，享受专属特权!</p>
+			{{endif}}
+		</div>
+		{{else}}
+		<div class="user-status logged-out">
+			<p>您尚未登录，<a href="/login">请先登录</a></p>
+		</div>
+		{{endif}}
+		<hr>
+		<h5>简单条件判断</h5>
+		<!-- 库存状态判断 -->
+		{{if product.stock > 0}}
+		<p>库存状态: <span style="color:rgb(54, 185, 54);">有货 ({{product.stock}}件)</span></p>
+		{{else}}
+		<p>库存状态: <span style="color:red;">缺货</span></p>
+		{{endif}}
+	</div>
+
+	<div class="test-result">
+		<h4>2. 循环测试 - 产品列表</h4>
+
+		<div class="product-list">
+			{{for product in products}}
+			<div class="product-card">
+				<h5>{{product.name}}</h5>
+				<p>价格: ¥{{product.price}}</p>
+				<p>库存: {{product.stock}}件</p>
+				{{if product.isNew}}
+				<span style="color:rgb(118, 62, 103);font-weight:bold;">新品!</span>
+				{{endif}}
+			</div>
+			{{endfor}}
+		</div>
+	</div>
+
+	<div class="test-result">
+		<h4>3. 循环测试 - 团队成员</h4>
+
+		<div class="team-list">
+			{{for member in teamMembers}}
+			<div class="team-member">
+				<h5>{{member.name}} {{member_isFirst ? '(团队负责人)' : ''}}</h5>
+				<p>职位: {{member.position}}</p>
+				<p>部门: {{member.department}}</p>
+				{{if member.skills && member.skills.length > 0}}
+				<p>技能: {{member.skills.join(', ')}}</p>
+				{{endif}}
+			</div>
+			{{endfor}}
+		</div>
+	</div>
+
+	<div class="test-result">
+		<h4>4. 键值对循环测试</h4>
+
+		<div style="background: #b13c3c; padding: 10px; border-radius: 5px;">
+			{{for key, value in companyInfo}}
+			<p><strong>{{key}}:</strong> {{value}}</p>
+			{{endfor}}
+		</div>
+	</div>
+</div>
+
+<!-- 模板功能测试区域 -->
+<div class="template-test">
+	<h3>关于页模板功能测试</h3>
+
+	<div class="test-result">
+		<h4>1. 模板继承与样式测试</h4>
+		<p>状态: <span style="color: green;">✓ 成功</span></p>
+		<p>此页面通过 <code>"[extends base.html]"</code> 正确继承了基础模板</p>
+		<p>此页面已成功添加了自定义样式区块</p>
+	</div>
+</div>
+
+<!-- 包含文件测试 -->
+<div style="background: #53a853; padding: 15px; margin: 20px 0; border-radius: 5px;">
+	<h3>包含文件测试</h3>
+	<p>下面将尝试测试包含文件:</p>
+	[include test-include.html]
+	[include footer-content.html]
+</div>
+[~content]
+
+[!footer]
+© {{year}} 我的网站 | 关于我们 | 模板测试
+[~footer]
+
+[!script]
+<script src="/static/styling.js" defer></script>
+<script>
+	// 获取当前样式文件路径
+	window.getCurrentStyleFile = () => {
+		return '/static/about.css';
+	}
+	// 关于页特定的模板测试脚本
+	console.log('关于页模板测试完成');
+
+	// 添加动态内容
+	const testDiv = document.createElement('div');
+	testDiv.innerHTML = '<p style="color:green;font-weight:bold;">动态内容添加测试成功!</p>';
+	document.querySelector('.template-test').appendChild(testDiv);
+</script>
+[~script]

package/templates/account/2fa.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>双因素验证处理页</title>
+    <!-- 引入公共主题变量与全局样式 -->
+    <link rel="stylesheet" href="/static/constants.css" /> <!-- 样式常量 -->
+    <link rel="stylesheet" href="/static/public.css" /> <!-- 公共样式 -->
+    <link rel="stylesheet" href="/static/themeImg.css" /> <!-- 主题图标 -->
+    <link rel="stylesheet" href="/static/topImg.css" /> <!-- 返回顶部图标 -->
+
+    <style>
+        /* 覆盖 body 布局：本页需要居中卡片，而非默认的纵向弹性布局 */
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            /* 背景由公共变量接管,自动适配深浅色 */
+            background-color: var(--bg-color);
+            background-image: var(--body-bg);
+        }
+
+        /* 卡片容器 */
+        .card {
+            background: var(--container-bg);
+            border-radius: 12px;
+            box-shadow: 0 20px 40px var(--content-shadow);
+            width: 100%;
+            max-width: 400px;
+            padding: 40px 30px;
+            transition: background 0.5s ease, box-shadow 0.5s ease;
+        }
+
+        /* 卡片标题 */
+        .card h2 {
+            color: var(--h2-color);
+            margin-bottom: 20px;
+            text-align: center;
+            font-weight: 600;
+            font-size: 28px;
+        }
+
+        /* 提示文字 */
+        .card p {
+            text-align: center;
+            margin-bottom: 20px;
+            color: var(--p-color);
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        /* 验证码输入框 */
+        .form-group input {
+            width: 100%;
+            padding: 12px 16px;
+            border: 1px solid var(--content-border);
+            border-radius: 8px;
+            font-size: 16px;
+            text-align: center;
+            letter-spacing: 4px;
+            background: var(--li-bg);
+            color: var(--text-color);
+            transition: border-color 0.3s ease, background 0.5s ease, color 0.5s ease;
+        }
+
+        .form-group input:focus {
+            border-color: var(--link-color);
+        }
+
+        /* 验证按钮 */
+        .btn {
+            width: 100%;
+            display: block;
+            padding: 14px;
+            background: var(--btn-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: 0;
+            box-shadow: 0 4px 12px var(--content-shadow);
+            transition: background 0.3s ease, transform 0.2s ease;
+        }
+
+        .btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+
+        .btn:disabled {
+            background: #b0b0b0;
+            cursor: not-allowed;
+            opacity: 0.65;
+            transform: none;
+        }
+
+        /* 消息提示 */
+        .error {
+            color: #e53e3e;
+            font-size: 14px;
+            margin-top: 10px;
+            text-align: center;
+        }
+
+        /* 备用码区域 */
+        .backup-link {
+            margin-top: 20px;
+            text-align: center;
+            font-size: 14px;
+            color: var(--text-color);
+        }
+
+        .backup-link a {
+            color: var(--link-color);
+            text-decoration: none;
+        }
+
+        .backup-link a:hover {
+            color: var(--link-hover);
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <h2>双因素验证</h2>
+        <form onsubmit="return false;">
+            <p style="text-align:center; margin-bottom:20px; color:#666;">请输入身份验证器中的6位数字验证码</p>
+            <div class="form-group">
+                <input type="text" id="token" placeholder="在此输入6位验证码" maxlength="6" autofocus
+                    autocomplete="one-time-code">
+            </div>
+            <button class="btn" id="verifyBtn">验证</button>
+        </form>
+        <div class="error" id="message"></div>
+        <div class="backup-link">
+            <a href="#" id="useBackup">使用备用码</a>
+        </div>
+    </div>
+
+    <!-- 公共逻辑 -->
+    <script src="/static/themeModule.js" defer></script><!-- 引入主题自适应模块 -->
+    <script src="/static/mouseOrTouch.js" defer></script><!-- 引入鼠标或触摸操作 -->
+    <script src="/static/themeImg.js" defer></script> <!-- 引入主题图标模块 -->
+    <script src="/static/topImg.js" defer></script> <!-- 引入返回顶部图标模块 -->
+    <script>
+        const [verifyBtn, tokenEl, messageDiv, useBackup] = ['verifyBtn', 'token', 'message', 'useBackup']
+            .map(id => document.getElementById(id)),
+            handleError = msg => {
+                messageDiv.textContent = msg, tokenEl.value = '', verifyBtn.disabled = false, tokenEl.focus();
+            },
+            verify = async () => {
+                verifyBtn.disabled = true; messageDiv.textContent = '';
+                const token = tokenEl.value.trim();
+                if (!token) return handleError('请输入验证码');
+                try {
+                    const response = await fetch('/api/verify-2fa', {
+                        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token })
+                    }), data = await response.json();
+                    if (response.ok) tokenEl.value = '', window.location.href = '/';
+                    else handleError(data.message);
+                } catch (err) { handleError('网络错误，请稍后重试') }
+            }
+        verifyBtn.addEventListener('click', verify);
+        useBackup.addEventListener('click', e => {
+            e.preventDefault(), tokenEl.placeholder = '请输入10位备用码', tokenEl.maxLength = 10, tokenEl.value = '';
+            useBackup.style.display = 'none'; tokenEl.focus();
+        });
+        tokenEl.addEventListener('keypress', e => {
+            if (e.key === 'Enter') verify();
+        });
+        tokenEl.addEventListener('input', () => messageDiv.textContent = '');
+    </script>
+</body>
+
+</html>