@flun/html-template 4.0.10

package/static/about.css

@@ -0,0 +1,118 @@
+.abt_content_main {
+    display: flex;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+/* 模板测试样式 */
+.template-test {
+    background: #f8e8e8;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    border-left: 4px solid #F44336;
+}
+
+.template-test h3 {
+    color: #F44336;
+    margin-top: 0;
+}
+
+.test-result {
+    background: rgb(145, 76, 76);
+    padding: 10px;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+/* 条件判断和循环测试样式 */
+.logic-test {
+    background: #fff8e8;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    border-left: 4px solid #FF9800;
+}
+
+.logic-test h3 {
+    color: #FF9800;
+    margin-top: 0;
+}
+
+.product-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 15px;
+    margin: 15px 0;
+}
+
+.product-card {
+    background: rgb(36, 119, 150);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.user-status {
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 5px;
+}
+
+.logged-in {
+    background: #5b3caa;
+    border-left: 4px solid #4CAF50;
+}
+
+.logged-out {
+    background: #ab4c4c;
+    border-left: 4px solid #F44336;
+}
+
+.team-list {
+    margin: 15px 0;
+}
+
+.team-member {
+    padding: 10px;
+    margin: 5px 0;
+    background: #425b72;
+    border-radius: 5px;
+    border-left: 4px solid #2196F3;
+}
+
+/* 复杂能测试样式 */
+.new-feature-test {
+    background: #a6c46e;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    border-left: 4px solid #2196F3;
+}
+
+.new-feature-test h3 {
+    color: #2196F3;
+    margin-top: 0;
+}
+
+.control-flow {
+    background: #432e96;
+    padding: 15px;
+    border-radius: 5px;
+    margin: 10px 0;
+    border-left: 4px solid #4CAF50;
+}
+
+.empty-state {
+    background: #b8965f;
+    padding: 15px;
+    border-radius: 5px;
+    margin: 10px 0;
+    border-left: 4px solid #FF9800;
+}
+
+hr {
+    border: none;
+    border-top: 2px solid #aa2c2c;
+    margin: 20px 0;
+}

package/static/auth.js

@@ -0,0 +1,27 @@
+// /static/auth.js
+
+(function () {
+    const userCenter = document.getElementById('userCenter');
+    if (!userCenter) return;
+
+    async function checkLoginStatus() {
+        try {
+            const res = await fetch('/api/user', {
+                method: 'GET', credentials: 'include'
+            }), data = await res.json();
+
+            if (data?.username) {
+                userCenter.style.display = 'flex';
+                const link = userCenter.querySelector('a');
+                if (link) link.innerHTML = `👤 ${data.username}`;
+                document.dispatchEvent(new CustomEvent('userCenterReady')); // 创建并派发自定义事件,通知用户中心已准备好
+            }
+            else userCenter.style.display = 'none';
+        } catch (err) {
+            userCenter.style.display = 'none';
+        }
+    }
+
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', checkLoginStatus);
+    else checkLoginStatus();
+})();

package/static/constants.css

@@ -0,0 +1,138 @@
+/* ================================================================ *
+ * 主题变量定义
+ * ================================================================ */
+
+/* 浅色主题变量定义 */
+:root {
+    /* 基础背景色 */
+    --bg-color: #f3f3f3;
+    /* 页面渐变背景色 */
+    --body-bg: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
+    /* 主要文字颜色 */
+    --text-color: #000000;
+
+    /* 头部渐变背景色 */
+    --header-bg: linear-gradient(to right, #f8f9fa, #e8f4fc);
+    /* 头部文字颜色 */
+    --header-text: #3498db;
+    /* 头部阴影 */
+    --header-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    /* 头部链接半透明背景 */
+    --header-link-bg: rgba(255, 255, 255, 0.2);
+    /* 头部链接悬停半透明背景 */
+    --header-link-hover-bg: rgba(255, 255, 255, 0.15);
+    /* 用户中心链接阴影 */
+    --link-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    /* 内容容器背景色 */
+    --container-bg: white;
+    /* 容器阴影 */
+    --container-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    /* 页脚背景色 */
+    --footer-bg: #a3c3e2;
+
+    /* 一级标题颜色 */
+    --h1-color: #2c3e50;
+    /* 一级标题下边框颜色 */
+    --h1-border: #3498db;
+    /* 二级标题颜色 */
+    --h2-color: #2980b9;
+    /* 段落文字颜色 */
+    --p-color: #000000;
+
+    /* 列表项背景色 */
+    --li-bg: #f8f9fa;
+    /* 列表项悬停背景色 */
+    --li-hover: #e8f4fc;
+    /* 列表项阴影 */
+    --item-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+
+    /* 链接颜色 */
+    --link-color: #3498db;
+    /* 链接悬停颜色 */
+    --link-hover: #2980b9;
+
+    /* 按钮渐变背景 */
+    --btn-bg: linear-gradient(to right, #3498db, #2980b9);
+    /* 按钮悬停渐变背景 */
+    --btn-hover: linear-gradient(to right, #2980b9, #2573a7);
+    /* 按钮阴影 */
+    --btn-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+    /* 按钮悬停阴影 */
+    --btn-shadow-hover: 0 6px 12px rgba(52, 152, 219, 0.4);
+
+    /* 内容区域渐变起始色 */
+    --content-bg-from: #ffffff;
+    /* 内容区域渐变结束色 */
+    --content-bg-to: #f8f9fa;
+    /* 内容区域边框色 */
+    --content-border: #5c738f;
+    /* 内容区域阴影颜色 */
+    --content-shadow: rgba(0, 0, 0, 0.05);
+}
+
+/* 深色主题变量定义 */
+[data-theme="dark"] {
+    /* 深色模式基础背景色 */
+    --bg-color: #121212;
+    /* 深色模式渐变背景 */
+    --body-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    /* 深色模式文字颜色 */
+    --text-color: #e0e0e0;
+
+    /* 深色模式头部渐变背景 */
+    --header-bg: linear-gradient(to right, #1e1e2e, #1e1e28);
+    /* 深色模式头部文字颜色 */
+    --header-text: #e0e0e0;
+    /* 深色模式头部阴影（更暗） */
+    --header-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    /* 深色模式头部链接半透明背景（降低透明度） */
+    --header-link-bg: rgba(255, 255, 255, 0.1);
+    --header-link-hover-bg: rgba(255, 255, 255, 0.15);
+    --link-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+    /* 深色模式内容容器背景 */
+    --container-bg: #222236;
+    /* 深色模式容器阴影 */
+    --container-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    /* 深色模式页脚背景 */
+    --footer-bg: #3a3a4a;
+
+    /* 深色模式一级标题颜色 */
+    --h1-color: #bb86fc;
+    /* 深色模式一级标题下边框颜色 */
+    --h1-border: #3700b3;
+    /* 深色模式二级标题颜色 */
+    --h2-color: #03dac6;
+    /* 深色模式段落文字颜色 */
+    --p-color: #cfd8dc;
+
+    /* 深色模式列表项背景 */
+    --li-bg: #2d2d3a;
+    /* 深色模式列表项悬停背景 */
+    --li-hover: #3a3a4a;
+    /* 深色模式列表项阴影 */
+    --item-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+
+    /* 深色模式链接颜色 */
+    --link-color: #bb86fc;
+    /* 深色模式链接悬停颜色 */
+    --link-hover: #9a67ea;
+
+    /* 深色模式按钮渐变背景 */
+    --btn-bg: linear-gradient(to right, #6200ea, #3700b3);
+    /* 深色模式按钮悬停渐变背景 */
+    --btn-hover: linear-gradient(to right, #3700b3, #1a006e);
+    /* 深色模式按钮阴影（匹配紫色系） */
+    --btn-shadow: 0 4px 8px rgba(98, 0, 234, 0.3);
+    --btn-shadow-hover: 0 6px 12px rgba(98, 0, 234, 0.4);
+
+    /* 深色模式内容区域渐变起始色 */
+    --content-bg-from: #252536;
+    /* 深色模式内容区域渐变结束色 */
+    --content-bg-to: #1d1d2c;
+    /* 深色模式内容区域边框色 */
+    --content-border: #353589;
+    /* 深色模式内容区域阴影颜色 */
+    --content-shadow: rgba(0, 0, 0, 0.2);
+}

package/static/index.css

@@ -0,0 +1,86 @@
+/* 内容区主样式 */
+.ind_content_main {
+  margin: 40px auto 0;
+  padding: 30px;
+  background: linear-gradient(to bottom, var(--content-bg-from), var(--content-bg-to));
+  border-radius: 10px;
+  max-width: 800px;
+  border: 1px solid var(--content-border);
+  box-shadow: 0 4px 15px var(--content-shadow);
+}
+
+.ind_content_main h2 {
+  margin-top: 0;
+}
+
+/* 模板测试样式 */
+.template-test {
+  background: #e8f4f8;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+  border-left: 4px solid #2196F3;
+}
+
+.template-test h3 {
+  color: #2196F3;
+  margin-top: 0;
+}
+
+.test-result {
+  background: rgb(98, 154, 92);
+  padding: 10px;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+/* 用户功能测试样式 */
+.user-function-test {
+  background: #f0e8f8;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+  border-left: 4px solid #9C27B0;
+}
+
+.user-function-test h3 {
+  color: #9C27B0;
+  margin-top: 0;
+}
+
+/* 路由测试样式 */
+.route-test {
+  background: #e8f8e8;
+  padding: 20px;
+  border-radius: 8px;
+  margin: 20px 0;
+  border-left: 4px solid #4CAF50;
+}
+
+.route-test h3 {
+  color: #4CAF50;
+  margin-top: 0;
+}
+
+.test-button {
+  background: #4CAF50;
+  color: var(--text-color);
+  border: none;
+  padding: 10px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.test-button:hover {
+  background: #45a049;
+}
+
+.api-result {
+  background: rgb(77, 106, 155);
+  padding: 10px;
+  border-radius: 4px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  font-family: monospace;
+}

package/static/mouseOrTouch.js

@@ -0,0 +1,156 @@
+// 项目/static/mouseOrTouch.js
+const devViewSize = `${window.innerWidth}x${window.innerHeight}`; // 使用设备视口作为设备唯一标识
+let zIndex = 1001; // 全局层级计数器
+/**
+ * 获取元素储存样式数据(位置)并通过API数据应用样式
+ * @param {HTMLElement} element - 需要设置位置的DOM元素
+ * @param {string} [api=null] - 获取位置信息的路由API
+ * @returns {void}
+ */
+function getStyle(element, api = null) {
+    fetch(api)
+        .then(res => res.ok ? res.json() : Promise.reject(`Network error:${element}`))
+        .then(position => Object.assign(element.style, position[devViewSize]?.style ?? {}))
+        .catch(error => console.error(`获取${devViewSize}的储存数据失败:`, error));
+}
+
+/**
+ * 为元素添加鼠标和触摸事件支持，实现拖拽和点击功能
+ * @param {HTMLElement} element - 需要添加交互功能的DOM元素
+ * @param {Function} onClick - 点击事件回调函数
+ * @param {string} [api=null] - 更新位置信息的路由API
+ * @param {boolean} [isEndShow=false] - 拖拽结束后是否显示元素
+ * @returns {void}
+ */
+function mouseOrTouch(element, onClick = null, api = null, isEndShow = false) {
+    let dragStartX, dragStartY, initialX, initialY, isDragging = false, hasDragged = false, touchStartTime = 0, touchIdentifier = null;
+    const originalZIndex = element.style.zIndex || getComputedStyle(element).zIndex;
+
+    setupEventBubbleBlocking();
+    element.onclick = e => {
+        if (hasDragged) return e.preventDefault();
+        if (onClick) onClick();
+    };
+
+    element.addEventListener('contextmenu', e => e.preventDefault());
+    element.addEventListener('mousedown', startDrag);
+    element.addEventListener('touchstart', handleTouchStart, { passive: true });
+
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', endDrag);
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    // ==================== 内部函数 ====================
+    function setupEventBubbleBlocking() {
+        const interactiveSelectors = ['textarea', 'input', 'select', 'a'];
+        interactiveSelectors.forEach(selector => {
+            document.querySelectorAll(selector).forEach(el => {
+                if (el.dataset.bubbleBlocked) return;
+                const stop = e => e.stopPropagation();
+                el.addEventListener('mousedown', stop);
+                el.addEventListener('touchstart', stop, { passive: true });
+                el.dataset.bubbleBlocked = true;
+            });
+        });
+    }
+
+    function handleTouchStart(e) {
+        touchStartTime = Date.now(), touchIdentifier = e.touches[0].identifier, startDrag(e);
+    }
+
+    function handleTouchMove(e) {
+        if (touchIdentifier === null) return;
+        if (Array.from(e.touches).some(touch => touch.identifier === touchIdentifier)) {
+            if (isDragging) e.preventDefault();
+            drag(e);
+        }
+    }
+
+    function handleTouchEnd(e) {
+        if (touchIdentifier === null) return;
+        const changed = Array.from(e.changedTouches);
+        if (changed.some(touch => touch.identifier === touchIdentifier)) {
+            const touchDuration = Date.now() - touchStartTime, touch = changed[0];
+            if (onClick && !hasDragged && touchDuration < 250) {
+                const clickEvent = new MouseEvent('click', {
+                    bubbles: true, cancelable: true, clientX: touch.clientX, clientY: touch.clientY
+                });
+                element.dispatchEvent(clickEvent), onClick();
+            }
+            endDrag(), touchIdentifier = null;
+        }
+    }
+
+    function startDrag(e) {
+        e.preventDefault(), isDragging = true, hasDragged = false;
+
+        const rect = element.getBoundingClientRect();
+        initialX = rect.left, initialY = rect.top, element.style.zIndex = zIndex++;
+
+        const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX,
+            clientY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
+
+        dragStartX = clientX, dragStartY = clientY;
+        element.style.transition = 'none', element.style.cursor = 'grabbing';
+    }
+
+    function drag(e) {
+        if (!isDragging) return;
+
+        let clientX, clientY;
+        if (e.type === 'mousemove') e.preventDefault(), clientX = e.clientX, clientY = e.clientY;
+        else {
+            const touch = Array.from(e.touches).find(t => t.identifier === touchIdentifier);
+            if (!touch) return;
+            clientX = touch.clientX, clientY = touch.clientY;
+        }
+
+        const deltaX = clientX - dragStartX, deltaY = clientY - dragStartY;
+        if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) hasDragged = true;
+
+        const newX = initialX + deltaX, newY = initialY + deltaY, minX = -element.offsetWidth + 20,
+            maxX = window.innerWidth - 20, minY = -element.offsetHeight + 20, maxY = window.innerHeight - 20;
+
+        element.style.left = `${Math.min(Math.max(minX, newX), maxX)}px`;
+        element.style.right = 'auto';
+        element.style.top = `${Math.min(Math.max(minY, newY), maxY)}px`;
+        element.style.bottom = 'auto';
+    }
+
+    function endDrag() {
+        if (!isDragging) return;
+        const { left, top, right, bottom } = element.style, finalPosition = { [devViewSize]: { style: { left, top, right, bottom } } };
+
+        isDragging = false, element.style.transition = '', element.style.cursor = '';
+        if (isEndShow) element.classList.add('show');
+        if (api && hasDragged) {
+            fetch(api, {
+                method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(finalPosition)
+            })
+                .then(res => res.ok ? res.json() : Promise.reject(`Network error:${element}`))
+                .catch(error => console.error(`更新${devViewSize}储存样式数据失败:`, error));
+        }
+
+        element.style.zIndex = originalZIndex, setTimeout(() => hasDragged = false, 100);
+    }
+}
+/**
+ * 为元素添加点击和触摸事件支持
+ * @param {HTMLElement} element - DOM元素
+ * @param {Function} handler - 事件处理函数
+ * @param {Object} options - 选项（阻止默认行为等）
+ */
+function addTapSupport(element, handler, options = { preventDefault: true }) {
+    if (!element || !handler) return;
+
+    element.addEventListener('click', handler); // 鼠标点击事件
+    // 触摸结束事件（模拟点击）
+    element.addEventListener('touchend', (e) => {
+        if (options.preventDefault && e.cancelable) e.preventDefault();
+        handler(e);
+    });
+    element.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') handler(e);
+    });
+}