🎨 用户管理页面UI优化 – 拟态玻璃质感设计

文件位置: core/module/user-grid/fun-user-grid.php · core/module/user-add/fun-user-add.php · assets/css/admin/user-grid/user-grid.css · assets/css/admin/user-add/user-add.css

优化内容

1. 用户列表页面（用户网格）

• 🎨 网格卡片布局：将传统表格布局改为现代化卡片网格展示
• 🔍 实时搜索功能：支持按用户名、邮箱、显示名称搜索
• 📊 角色筛选：按用户角色分类展示，显示各角色用户数量
• 📦 批量操作：支持批量删除和批量更改角色
• 🎭 角色管理：通过模态窗口快速更改用户角色
• 📄 分页功能：支持分页加载，默认每页12个用户
• ⏳ 加载动画：添加加载状态和空状态提示

• 📝 卡片式表单：将表单分为基本信息、语言设置、密码设置、角色设置、通知设置等卡片
• 🔐 密码生成：集成密码生成器和强度检测
• 🌐 语言选择：支持多语言界面设置
• 🎭 角色选择：可视化角色选择界面
• 📧 通知设置：可选择是否发送欢迎邮件
• ✅ 表单验证：实时密码强度检测和匹配验证

• ☀️ 亮色模式：使用拟态拟物设计，浅色背景搭配玻璃质感
• 🌆 暗色模式：深色背景，自动适配系统主题
• 🎨 玻璃拟态效果：使用 backdrop-filter: blur(20px) saturate(180%) 实现毛玻璃质感
• 🖼️ 图标系统：为不同角色和操作添加直观图标
• 📱 响应式设计：适配不同屏幕尺寸

实现方案

• 多方式页面检测：使用 hook 名称、get_current_screen() 确保样式正确加载
• CSS变量系统：定义统一的颜色、间距、圆角、阴影变量
• AJAX交互：实现无刷新的用户数据加载和操作
• 单例模式：使用单例模式管理UI实例
• 权限控制：严格的权限检查确保操作安全
• 性能优化：异步加载用户数据，分页展示

技术特点

1. 用户网格系统

• 实时搜索：输入时自动过滤用户列表
• 批量选择：支持多选用户进行批量操作
• 角色管理：通过模态窗口快速更改用户角色
• 用户统计：显示各角色用户数量统计
• 安全验证：所有AJAX操作都经过nonce验证

• 智能密码生成：自动生成强密码
• 密码强度检测：实时显示密码强度
• 多语言支持：根据已安装语言动态生成语言选项
• 权限适配：根据用户权限显示不同功能
• 表单记忆：保留表单提交失败时的输入值

效果说明

用户管理页面现在拥有现代化的网格卡片布局，添加用户页面采用直观的卡片式表单设计，两者都支持拟态玻璃质感和自动亮暗色切换，整体风格与主题统一。用户操作更加直观高效，视觉体验显著提升。

代码位置

• 用户网格功能：wp-content/themes/lolimeow-shiroki/core/module/user-grid/fun-user-grid.php
• 添加用户功能：wp-content/themes/lolimeow-shiroki/core/module/user-add/fun-user-add.php
• 用户网格样式：wp-content/themes/lolimeow-shiroki/assets/css/admin/user-grid/user-grid.css
• 添加用户样式：wp-content/themes/lolimeow-shiroki/assets/css/admin/user-add/user-add.css

🌙 暗色模式编辑器文本可读性修复

• 问题修复：后台写文章 / 编辑文章页在暗色模式（.wp-dark-mode）下，TinyMCE 编辑器与文本域前景色与背景色对比不足，导致文字难以辨认
• 文本域适配：为 #content、.wp-editor-area 强制设置深色背景（--admin-bg-dark-primary）与浅色文字（#f7fafc）
• 编辑器容器：工具栏（.mce-toolbar-grp）、编辑区域（.mce-edit-area）、iframe 背景同步使用 --admin-current-bg 变量
• 页面背景：暗色模式下 #post 容器背景统一为 --admin-bg-dark-primary，避免编辑器区域与页面底色冲突

• 暗色模式文本域：assets/css/admin/post-edit/post-edit.css（.wp-admin.wp-dark-mode .wp-editor-area 区块，约 817–831 行）
• 编辑器工具栏与 iframe：assets/css/admin/post-edit/post-edit.css（.mce-toolbar-grp、.mce-edit-area 区块，约 833–854 行）
• 页面暗色背景：assets/css/admin/post-edit/post-edit.css（.wp-admin.wp-dark-mode #post 区块，约 1838–1841 行）

• 后台开启暗色模式 → 文章 → 写文章 / 编辑文章
• 确认编辑器内文字、工具栏按钮在深色背景下清晰可读

🎬 极小屏幕视频控制栏交互优化

• 问题修复：≤576px 极小屏幕下自定义视频控制栏按钮拥挤、布局错乱
• 默认隐藏：小屏幕下 .video-controls 默认 opacity: 0、pointer-events: none，避免占用视口空间
• 点击显示：点击视频视口首次添加 .show 类显示控制栏，3 秒后自动隐藏；再次点击才触发播放 / 暂停
• 大屏逻辑不变：宽度 >576px 时点击视口直接播放 / 暂停，hover 时增强控制栏可见度
• 布局微调：小屏幕下缩小控制栏内边距、进度条高度与按钮尺寸，防止溢出

• 小屏幕 CSS 隐藏逻辑：assets/css/style.css（@media (max-width:576px) 内 .video-controls 区块，约 1382–1394 行）
• 点击交互逻辑：assets/js/boxmoe.js（container.addEventListener('click') 内 isMobile 判断，约 3553–3581 行）
• 视频播放器初始化：assets/js/boxmoe.js（.single-content video 自定义控件构建，约 2974 行起）

• 在手机或浏览器 DevTools 模拟 ≤576px 宽度，打开含视频的文章页
• 确认控制栏默认隐藏，点击视频区域后控制栏弹出，再次点击可播放 / 暂停

📝 编辑文章页右侧工具栏固定修复

• 问题修复：写文章 / 编辑文章时，右侧元框（发布、分类、标签等）无法随页面滚动固定在视口内
• 三栏 Grid 布局：左侧工具栏占位 + 中间编辑区 + 右侧元框（grid-template-areas: "toolbar main sidebar"）
• Sticky 定位：.shiroki-editor-sidebar 设置 position: sticky; top: 32px; height: calc(100vh - 80px)，内部独立滚动
• 容器高度：主布局容器 min-height: calc(100vh - 100px)，确保 sticky 有足够滚动空间生效
• PHP 布局注入：fun-post-edit-layout.php 在 edit_form_after_title / edit_form_after_editor 钩子间包裹双栏容器

• 布局 PHP 类：core/module/post-edit/fun-post-edit-layout.php（Shiroki_Post_Edit_Layout）
• Sticky 侧栏 CSS：assets/css/admin/post-edit/post-edit.css（.shiroki-editor-sidebar 区块，约 99–109 行）
• 资源加载：core/module/fun-admin.php（shiroki-post-edit 样式 / 脚本 enqueue，约 627–632 行）

• 后台 → 文章 → 写文章或编辑已有文章
• 向下滚动长文内容，确认右侧发布框、分类、标签等元框始终固定在屏幕右侧

🧩 后台小工具页面 UI 重构（拟态玻璃质感）

• 全面重构：widgets.php 页面替换为拟态玻璃质感拖拽式侧边栏配置 UI
• 双栏布局：左侧可用小工具库 + 右侧侧边栏区域（首页侧栏、文章页侧栏等），支持拖拽排序
• 小工具卡片：每个小工具以玻璃卡片展示，支持展开编辑、启用 / 停用、删除
• AJAX 操作：获取小工具列表、保存排序、激活 / 停用、更新设置、重置默认，均通过 AJAX 无刷新完成
• 媒体支持：视频 / 音频 / 图片类小工具内置媒体选择器
• Sticky 顶栏：页面顶部操作栏滚动时固定（position: sticky）

• 主类：core/module/widget-manager/fun-widget-manager.php（Shiroki_Widget_Manager_UI）
• 样式：assets/css/admin/widget-manager/widget-manager.css
• 交互脚本：assets/js/admin/widget-manager/widget-manager.js
• 模块注册：functions.php（require_once ... fun-widget-manager.php）

• 后台 → 外观 → 小工具（或主题设置中的小工具入口）
• 拖拽小工具到对应侧边栏区域，点击卡片编辑设置并保存
• 测试启用 / 停用、排序、重置功能

⏱️ 时钟小部件优化

• 自适应字体：时间数字使用 clamp() 实现响应式字号，避免窄容器内文字溢出或过小
• 渐变文字：亮色模式蓝绿渐变、暗色模式紫粉渐变，通过 -webkit-background-clip: text 实现
• 时区标题：未设置标题时自动使用时区中文名 + 英文标识（如「北京时间 (Asia/Shanghai)」）
• 主题字体联动：读取主题默认字体设置（boxmoe_default_font）应用于时钟数字
• 多断点适配：1200px / 992px / 768–1199px 三列布局 / 576px / 360px 逐级缩小字号与内边距
• 容器约束：.widget_clock_inner、.clock-display 强制 width: 100%、box-sizing: border-box，防止侧边栏溢出

• 小部件主文件：core/widgets/widget-clock.php（widget() 方法内样式与 JS 逻辑）
• 响应式断点：core/widgets/widget-clock.php（@media 区块，约 116–171 行）
• 时间更新脚本：core/widgets/widget-clock.php（<script> 内 setInterval 逻辑）

• 后台 → 外观 → 小工具 → 将「时钟小部件_shiroki」拖入侧边栏
• 设置时区与可选标题，在前台不同屏幕宽度下确认时间显示正常、不溢出

👤 后台个人资料页面 UI 重构（拟态玻璃质感）

• 全面重构：profile.php / user-edit.php 替换为拟态玻璃卡片式个人资料 UI
• 信息卡片分组：基本信息（用户名、显示名称、邮箱、网站、简介）、头像设置、密码设置
• 头部展示卡：大头像 + 显示名称 + @用户名 · UID + 角色徽章
• 头像上传：集成 WP 媒体库，支持自定义头像预览与上传
• 密码工具：一键生成强密码、显示 / 隐藏切换、实时强度检测
• 表单验证：前端校验 + AJAX 提交，禁用离开页面确认弹窗干扰

• 页面 HTML 渲染：core/module/fun-admin.php（boxmoe_admin_profile_ui 相关函数，约 1176 行起）
• 样式：assets/css/admin/user-profile/user-profile.css
• 交互脚本：assets/js/admin/user-profile/user-profile.js（ShirokiUserProfile）
• 资源加载：core/module/fun-admin.php（boxmoe_admin_profile_enqueue，约 448–466 行）

• 后台 → 用户 → 个人资料（或编辑其他用户）
• 修改基本信息、上传头像、更改密码并保存
• 管理员编辑他人资料时确认 UID 等扩展字段正常显示

📊 统计仪表盘页面（站点数据 · 自建统计）

• 新增菜单：后台左侧「站点数据」主菜单（dashicons-chart-area），默认打开统计仪表盘
• 数据采集：自建统计引擎记录文章阅读量、站点访问量、下载量，支持今日 / 昨日 / 7 天 / 30 天 / 年度维度
• 仪表盘展示：概览卡片、流量趋势图（Chart.js）、热门文章 TOP、访问来源、实时访客等
• 数据存储：独立数据表 wp_shiroki_site_stats、wp_shiroki_site_visits，带 transient 缓存批量写入
• 拟态玻璃 UI：与主题后台其他页面风格统一的卡片 + 图表布局

• 菜单注册与页面渲染：core/module/site-stats/fun-site-stats-dashboard.php（boxmoe_add_site_stats_menu、boxmoe_render_site_stats_dashboard）
• 统计核心类：core/module/site-stats/class-site-stats.php（Shiroki_Site_Stats）
• 前端图表：assets/js/admin/site-stats/site-stats.js
• 模块加载：core/module/fun-admin.php（顶部 require_once + boxmoe_admin_site_stats_enqueue）

• 后台 → 站点数据 → 📈 统计仪表盘
• 浏览各时间段 PV / UV、热门文章、流量趋势图
• 前台访问文章与站点，返回仪表盘确认数据实时更新

🌐 51LA 平台统计（站点数据 · 第三方 API）

• 新增子菜单：站点数据 → 🌐 51LA统计
• API 配置：支持自定义 Access Key、Secret Key、掩码 ID（maskId）、安全等级，配置项存储于 shiroki_51la_config
• 数据展示：概览（今日 PV/UV、本月 PV、总 PV）、实时在线访客、7 天流量趋势、来路分析、受访页面 / 入口页 TOP、浏览器 / 地域分布、搜索关键词
• 多 Tab 页：数据概览、访客明细（分页 + 日期筛选）、站点列表、使用指南
• 演示模式：未配置或 API 失败时显示演示数据并提示错误原因
• AJAX 刷新：支持无刷新拉取最新数据、保存配置

• API 封装类：core/module/site-stats/class-51la-api.php（Shiroki_51LA_API）
• 页面渲染：core/module/site-stats/fun-site-stats-dashboard.php（boxmoe_render_51la_stats_dashboard，约 513 行起）
• 样式与脚本：assets/css/admin/site-stats/51la-stats.css、assets/js/admin/site-stats/51la-stats.js
• 资源加载：core/module/fun-admin.php（boxmoe_admin_site_stats_enqueue 内 51LA 分支）

• 前往 51LA 开放接口 申请 API 权限并获取密钥
• 后台 → 站点数据 → 🌐 51LA统计 → 展开「API 配置」，填写 Access Key / Secret Key / maskId 并保存
• 切换各 Tab 查看流量概览、访客明细与站点列表；未配置时参考「使用指南」Tab

🎨 主题设置面板 UI 重构（拟态玻璃 + 卡片网格）

• 布局升级：由旧版渐变侧栏 + 单列长表单，改为「顶部栏 + 左侧 sticky 导航 + 右侧卡片网格」三栏结构
• 顶部栏：搜索框、在线文档链接、版本号与更新日期集中展示（.options-top-bar）
• 左侧导航：站点名称 + 独立玻璃风格导航项，滚动时整体固定（.options-sidebar，position: sticky）
• 右侧内容区：设置项以 CSS Grid 卡片排列（repeat(auto-fill, minmax(360px, 1fr))），卡片带拟态双向阴影与 hover 上浮效果
• 底部操作栏：保存 / 重置按钮改为居中悬浮（position: fixed + 毛玻璃背景）
• 表单控件：单选 / 多选改为自适应网格卡片；输入框统一内凹拟态样式；分组标题带 Dashicons
• 自定义看板列表：移除内联 style，改为 CSS 网格布局；JS 新增 buildCustomBoardItemHtml() 统一动态渲染
• 设置项排序：set-basis.php 中 LOGO / Favicon 移至看板形象分组之后；调整看板开关分组的 group start/end 结构
• 分组修复：class-options-interface.php 修复 group: end + type: info 时分组未正确闭合的问题

• 页面 HTML 结构：core/panel/includes/class-options-framework-admin.php（options_page()）
• 主样式定义：core/panel/css/optionsframework.css（#optionsframework-wrap 区块）
• 单选控件结构：core/panel/includes/class-options-interface.php（case 'radio'）
• 看板列表 JS：core/panel/js/options-custom.js（buildCustomBoardItemHtml）

• 后台 → 外观 → 盒子萌主题设置，浏览各 Tab 确认卡片布局与保存功能正常
• 测试单选 / 多选 / 上传 / 自定义看板增删改，以及底部「保存设置」「重置后台所有设置」
• 窄屏（≤960px）下确认侧栏堆叠与网格单列显示

🧭 导航栏设置页 UI（新模块）

• 全新模块：在 nav-menus.php 注入与主题设置一致的视觉壳层，保留 WordPress 原生双栏布局与拖拽逻辑
• DOM 壳层：JS 移除原生 H1 / 实时预览链接，重组为顶部栏（.boxmoe-nav-menus-top）+ 工作区（.boxmoe-nav-menus-workspace）
• 顶部快捷入口：「实时预览管理」（保留 WP 原生链接）、「返回主题设置」
• 文案统一：全页「菜单」→「导航」（gettext / ngettext / admin_title 过滤 + DOM 兜底翻译，约 60+ 条映射）
• 样式隔离：fun-admin.php 在 nav-menus.php 跳过全局 admin-flat-rounded 与新标签页脚本，避免布局冲突
• 拖拽性能：排序时添加 is-menu-dragging body class，临时关闭 box-shadow 减轻重绘卡顿
• 导航图标：fun-basis.php 文案同步为「导航图标」；修复 .item-edit 重复绑定（命名空间事件 click.shirokiMenuIcon）

• 模块入口与文案映射：core/module/nav-menu/fun-nav-menu-admin.php
• DOM 壳层逻辑：assets/js/admin/nav-menu/nav-menu.js（initNavMenuShell、bindMenuDragPerf）
• 样式定义：assets/css/admin/nav-menu/nav-menu.css
• 模块注册：functions.php（require_once ... fun-nav-menu-admin.php）

• 后台 → 外观 → 导航栏（或 盒子萌主题设置 中的导航入口）
• 确认顶部栏、双栏布局、拖拽排序、保存导航功能正常
• 检查页面文案是否均为「导航」而非「菜单」

📧 SMTP 邮局设置页重构

• UI 对齐：从原生 form-table 表格表单，重构为与主题设置一致的卡片网格 UI
• 统一字段渲染：新增 boxmoe_smtp_render_field()，每项含 Dashicons 标题 + 控件 + 说明文字
• 结构化通知：保存 / 测试邮件结果改为数组驱动（success / error + 可选跳转按钮），不再直接 echo
• 字段分组：SMTP 服务器配置（主机、端口、加密）→ 发件人信息（账号、密码、From、名称、通知邮箱）→ 测试邮件
• 侧栏导航：左侧提供 SMTP 设置 / 主题设置快捷切换
• 样式加载：新增 boxmoe_smtp_enqueue_assets()，仅在 SMTP 页加载 admin-variables + optionsframework.css

• 页面渲染：core/module/fun-smtp.php（boxmoe_smtp_settings_page()）
• 字段辅助函数：core/module/fun-smtp.php（boxmoe_smtp_render_field()）
• SMTP 专属样式：core/panel/css/optionsframework.css（#optionsframework-wrap.boxmoe-smtp-wrap）

• 后台 → 盒子萌 → SMTP 邮局设置（或主题设置中的 SMTP 入口）
• 填写 SMTP 参数并保存，确认卡片布局与成功提示
• 在「通知设置」中启用 SMTP 开关后，使用测试邮件功能验证配置

📰 文章网格列表页优化

• 样式精确隔离：新增 shiroki-post-grid-active body class；CSS 选择器从泛 .edit-php 收窄为 body.post-type-post.edit-php
• 首屏防闪烁：wp_add_inline_style 在 CSS 加载阶段即隐藏原生列表，避免盒子萌 flat-rounded 表格样式短暂闪现
• 禁用原生列冲突：移除 boxmoe_admin_post_thumbnail_column 过滤器，避免与自定义网格 UI 重复
• 隐藏范围扩大：JS 额外隐藏 #posts-filter、.subsubsub、.search-box、.wp-filter、hr.wp-header-end
• 标题与按钮：网格页标题、新建文章按钮样式与主题后台主色统一

• body class 与原生 UI 禁用：core/module/post-grid/fun-post-grid.php（admin_body_class、disable_native_list_ui）
• 首屏 inline CSS：core/module/post-grid/fun-post-grid.php（enqueue_scripts 内 wp_add_inline_style）
• 网格页覆盖样式：assets/css/admin/post-grid/post-grid.css（.shiroki-post-grid-active 区块）

• 后台 → 文章 → 所有文章，确认首屏无原生表格闪烁、网格正常加载
• 测试筛选、批量操作、新建文章按钮样式

🔴🌸 全局后台按钮语义色统一

• 删除按钮（浅红）：--admin-danger- 变量由深红改为柔和浅红，全局覆盖文章 / 用户 / 评论 / 媒体 / 小工具 / 自定义看板 / 字体管理等删除类按钮
• 替换按钮（浅粉红）：新增 --admin-replace- 变量，统一「替换」上传按钮与自定义看板替换按钮
• 类名标记：上传字段「替换」按钮增加 .of-btn-replace；media-uploader.js 在上传后自动添加 / 移除该类
• 移除 inline 样式：角色删除按钮等不再写死 border-color:#f44336，改由全局 CSS 控制

• CSS 变量与全局规则：assets/css/admin/admin-variables.css（--admin-danger-、--admin-replace- 及底部全局选择器）
• 替换按钮类名：core/panel/includes/class-options-interface.php（upload 字段）、core/panel/js/media-uploader.js

• 在主题设置、自定义看板、用户身份、媒体库等各页面确认删除按钮为浅红、替换按钮为浅粉红
• 上传图片后确认按钮自动切换为「替换」并呈现粉红色样式