@flun/html-template 4.4.1 → 4.4.3

package/customize/account.js

@@ -241,16 +241,28 @@ export const accountRouter = app => {
         if (publicPaths.some(p => req.path.startsWith(p))) return next();
         if (!req.session.userId) {
             if (req.path.startsWith('/api/')) return res.status(401).json({ message: '请先登录' });
-            return req.session.returnTo = req.originalUrl, res.redirect('/login');
+            req.session.returnTo = req.originalUrl;
+            return res.redirect('/login');
         }
 
+        const currentUser = getCurrentUser(req);
+        if (!currentUser) {
+            req.session.destroy(() => {
+                if (req.path.startsWith('/api/')) return res.status(401).json({ message: '用户不存在或已失效' });
+                return res.redirect('/login');
+            });
+            return;
+        }
+
+        const { user } = currentUser;
         // 检查密码是否在本次登录后被修改
-        const { user } = getCurrentUser(req);
         if (user?.passwordChangedAt) {
             const sessionLoginTime = req.session.loginTime || 0;
             if (user.passwordChangedAt > sessionLoginTime) {
                 req.session.destroy(() => {
-                    if (req.path.startsWith('/api/')) return res.status(401).json({ message: '密码已修改,请重新登录' });
+                    if (req.path.startsWith('/api/')) {
+                        return res.status(401).json({ message: '密码已修改,请重新登录' });
+                    }
                     return res.redirect('/login');
                 });
                 return;

package/f-CHANGELOG.md

@@ -1,10 +1,10 @@
 # 变更日志
-## [4.4.1] - 2026-05-31 14:39
-### 优化
-- 删除了 customize/routes.js 文件中上一次优化造成的冗余路由;
-## [4.4.0] - 2026-05-31 14:25
+## [4.4.3] - 2026-06-05 22:16
 ### 优化
-- 修改辅助功能(在线编辑css文件)中预览逻辑:删除单预览按钮,增加上、下、左、右和单页面预览按钮,及相关逻辑的全面优化,让体验更好;
-## [4.3.1] - 2026-05-30 11:42
+- 模板中用户页面的移动端样式适配;
+## [4.4.2] - 2026-05-31 15:08
+### 修复
+- 修复全局中间件中 `getCurrentUser(req)` 返回 `null` 时解构报错导致服务崩溃的问题,增加空值判断并自动清理无效登录态；
+## [4.4.1] - 2026-05-31 14:39
 ### 优化
-- https启用成功后,不在打印证书路径,只给出成功提示;
+- 删除了 customize/routes.js 文件中上一次优化造成的冗余路由;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flun/html-template",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "description": "一个HTML模板工具包,提供开发服务器和模板编译功能,支持自定义标签和快捷输入,变量定义,包含文件引用,帮助开发者模块化处理HTML;",
   "main": "index.js",
   "types": "index.d.ts",

package/templates/account/2fa.html

@@ -126,6 +126,61 @@
             color: var(--link-hover);
             text-decoration: underline;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                max-width: 100%;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 16px;
+            }
+
+            .card p {
+                font-size: 14px;
+                margin-bottom: 16px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                /* 防止iOS缩放 */
+                padding: 12px 12px;
+                letter-spacing: 2px;
+            }
+
+            .btn {
+                padding: 12px;
+                font-size: 16px;
+            }
+
+            .backup-link {
+                font-size: 13px;
+                margin-top: 18px;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 进一步微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+            }
+
+            .form-group input {
+                padding: 10px 10px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/forgot-password.html

@@ -132,6 +132,56 @@
         .hidden {
             display: none;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                max-width: 100%;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 8px;
+            }
+
+            .card p {
+                font-size: 13px;
+                margin-bottom: 24px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                /* 防止iOS缩放 */
+                padding: 12px 14px;
+            }
+
+            .btn {
+                padding: 12px;
+                font-size: 16px;
+            }
+
+            .links {
+                font-size: 13px;
+                margin-top: 20px;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/login.html

@@ -127,6 +127,70 @@
             color: var(--link-hover);
             text-decoration: underline;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                max-width: 100%;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 24px;
+            }
+
+            .form-group {
+                margin-bottom: 18px;
+            }
+
+            .form-group label {
+                font-size: 13px;
+                margin-bottom: 6px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                /* 防止iOS缩放 */
+                padding: 12px 14px;
+            }
+
+            .btn {
+                padding: 12px;
+                font-size: 16px;
+            }
+
+            .links {
+                margin-top: 20px;
+                font-size: 13px;
+            }
+
+            .links a {
+                margin: 0 8px;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+                margin-bottom: 20px;
+            }
+
+            .links a {
+                display: inline-block;
+                margin: 4px 6px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/profile.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>个人资料 - 安全账户中心</title>
 
     <!-- 引入公共主题变量与全局样式 -->
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/static/topImg.css" /> <!-- 返回顶部图标 -->
 
     <style>
+        /* ========== 基础移动优先增强 ========== */
         body {
             background: var(--body-bg);
             background-color: var(--bg-color);
@@ -82,6 +83,7 @@
         .info-value {
             flex: 1;
             color: var(--text-color);
+            word-break: break-word;
         }
 
         /* 通用按钮 */
@@ -96,6 +98,11 @@
             cursor: pointer;
             transition: background 0.2s, opacity 0.2s;
             margin-right: 10px;
+            text-align: center;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
         }
 
         .btn:hover {
@@ -215,6 +222,7 @@
             background: var(--li-bg);
             color: var(--text-color);
             transition: border-color 0.2s, background 0.5s ease, color 0.5s ease;
+            box-sizing: border-box;
         }
 
         .form-group input:focus {
@@ -285,6 +293,7 @@
             display: flex;
             align-items: center;
             gap: 8px;
+            word-break: break-word;
         }
 
         .btn-small {
@@ -347,6 +356,235 @@
                 color: #666;
             }
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px 12px;
+            }
+
+            .container {
+                max-width: 100%;
+                padding: 0;
+            }
+
+            .card {
+                padding: 20px 16px;
+                border-radius: 16px;
+                margin-bottom: 16px;
+            }
+
+            .card h2 {
+                font-size: 20px;
+                margin-bottom: 16px;
+                gap: 8px;
+            }
+
+            .card h2 .btn {
+                font-size: 12px;
+                padding: 6px 12px;
+                white-space: nowrap;
+            }
+
+            /* 信息行改为垂直布局，更易阅读 */
+            .info-row {
+                flex-direction: column;
+                padding: 12px 0;
+            }
+
+            .info-label {
+                width: auto;
+                margin-bottom: 6px;
+                font-weight: 600;
+                opacity: 0.8;
+            }
+
+            .info-value {
+                width: 100%;
+                font-size: 15px;
+            }
+
+            /* 主要操作按钮组 垂直排列 */
+            .action-buttons {
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .action-buttons .btn {
+                width: 100%;
+                margin-right: 0;
+                justify-content: center;
+                padding: 12px 16px;
+                font-size: 15px;
+            }
+
+            /* 所有内联 flex 按钮组（修改资料/修改密码/删除账户）强制垂直 + 全宽 */
+            #editProfileCard>form>div:first-of-type,
+            #changePasswordCard>form>div:first-of-type,
+            #deleteAccountForm>div:first-of-type {
+                flex-direction: column !important;
+                gap: 12px !important;
+                width: 100%;
+            }
+
+            #editProfileCard>form>div:first-of-type .btn,
+            #changePasswordCard>form>div:first-of-type .btn,
+            #deleteAccountForm>div:first-of-type .btn {
+                width: 100% !important;
+                margin-right: 0 !important;
+                margin-left: 0 !important;
+                box-sizing: border-box;
+            }
+
+            /* 双因素启用面板的按钮组 (flex-buttons) */
+            .flex-buttons {
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .flex-buttons .btn {
+                width: 100%;
+                margin-right: 0;
+            }
+
+            /* 备用码管理面板按钮组垂直排列 */
+            .backup-actions {
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .backup-actions .btn {
+                width: 100%;
+                margin-right: 0;
+            }
+
+            /* 硬件验证设备列表 手机端改为垂直紧凑 */
+            .device-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+                padding: 12px 6px;
+            }
+
+            .device-name {
+                width: 100%;
+                font-size: 14px;
+            }
+
+            .device-item .btn-small {
+                align-self: flex-start;
+                margin-top: 4px;
+                min-width: 80px;
+            }
+
+            /* 二维码适配移动屏幕 */
+            .qr-placeholder img {
+                max-width: 160px;
+                width: 100%;
+                height: auto;
+            }
+
+            /* 备用码列表展示优化 */
+            .backup-codes {
+                padding: 12px;
+                text-align: center;
+            }
+
+            .code-item {
+                display: inline-block;
+                font-size: 14px;
+                padding: 6px 10px;
+                margin: 6px 4px;
+                letter-spacing: 0.5px;
+            }
+
+            /* 表单输入框提升字体 ≥16px 避免 IOS 缩放 */
+            .form-group input,
+            input[type="text"],
+            input[type="email"],
+            input[type="password"] {
+                font-size: 16px;
+                padding: 12px 12px;
+            }
+
+            /* 加宽可点击区域 */
+            .btn {
+                min-height: 44px;
+                padding: 10px 16px;
+            }
+
+            /* 双因素认证 h2 内部按钮优化宽度 */
+            #twofaCard h2 .btn {
+                white-space: normal;
+                word-break: keep-all;
+            }
+
+            /* 管理面板内添加设备按钮自适应 */
+            #manageAddDeviceBtn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            /* 注销账户区块调整间距 */
+            #deleteAccountForm {
+                margin-top: 4px;
+            }
+
+            /* 硬件验证消息容器内边距 */
+            .webauthn-panel {
+                margin-top: 12px;
+            }
+
+            /* 备用码生成区域文案 */
+            #backupCodesPanel p.info {
+                font-size: 13px;
+            }
+
+            /* secret 密钥区域长文本换行 */
+            code#secretCode {
+                word-break: break-all;
+                display: inline-block;
+                max-width: 100%;
+            }
+        }
+
+        /* 针对极小屏幕 (≤480px) 微调边距 */
+        @media (max-width: 480px) {
+            body {
+                padding: 12px 10px;
+            }
+
+            .card {
+                padding: 16px 14px;
+            }
+
+            .card h2 {
+                font-size: 18px;
+                gap: 6px;
+            }
+
+            .info-label {
+                font-size: 13px;
+            }
+
+            .info-value {
+                font-size: 14px;
+            }
+
+            .btn {
+                font-size: 14px;
+                padding: 10px 12px;
+            }
+
+            .code-item {
+                font-size: 13px;
+                padding: 5px 8px;
+            }
+
+            .qr-placeholder img {
+                max-width: 140px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/register.html

@@ -133,6 +133,61 @@
         .hidden {
             display: none;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                max-width: 100%;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 24px;
+            }
+
+            .form-group {
+                margin-bottom: 18px;
+            }
+
+            .form-group label {
+                font-size: 13px;
+                margin-bottom: 6px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                /* 防止iOS缩放 */
+                padding: 12px 14px;
+            }
+
+            .btn {
+                padding: 12px;
+                font-size: 16px;
+            }
+
+            .links {
+                margin-top: 20px;
+                font-size: 13px;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+                margin-bottom: 20px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/reset-password.html

@@ -134,6 +134,57 @@
         .hidden {
             display: none;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                width: 100%;
+                min-width: auto;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 24px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                /* 防止iOS缩放 */
+                padding: 12px 14px;
+            }
+
+            .btn {
+                padding: 12px;
+                font-size: 16px;
+            }
+
+            .big-success {
+                font-size: 24px;
+                margin: 30px 0;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+                margin-bottom: 20px;
+            }
+
+            .big-success {
+                font-size: 20px;
+            }
+        }
     </style>
 </head>
 

package/templates/account/verify-email.html

@@ -104,6 +104,60 @@
         .hidden {
             display: none;
         }
+
+        /* ==================== 移动端样式适配 (≤640px) ==================== */
+        @media (max-width: 640px) {
+            body {
+                padding: 16px;
+            }
+
+            .card {
+                width: 100%;
+                min-width: auto;
+                padding: 28px 20px;
+                border-radius: 16px;
+            }
+
+            .card h2 {
+                font-size: 24px;
+                margin-bottom: 16px;
+            }
+
+            .message {
+                font-size: 14px;
+                margin: 16px 0;
+            }
+
+            .big-success {
+                font-size: 24px;
+                margin: 30px 0;
+                white-space: normal;
+            }
+
+            .btn {
+                padding: 10px 20px;
+                font-size: 15px;
+            }
+
+            .link {
+                font-size: 13px;
+            }
+        }
+
+        /* 极小屏幕 (≤480px) 微调 */
+        @media (max-width: 480px) {
+            .card {
+                padding: 24px 16px;
+            }
+
+            .card h2 {
+                font-size: 22px;
+            }
+
+            .big-success {
+                font-size: 20px;
+            }
+        }
     </style>
 </head>