🎨 用户管理页面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个用户
• ⏳ 加载动画：添加加载状态和空状态提示

2. 添加用户页面

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

3. 视觉设计统一

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

实现方案

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

技术特点

1. 用户网格系统

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

2. 添加用户系统

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

效果说明

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

代码位置

• 用户网格功能：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

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

文件位置: assets/css/admin/post-edit/post-edit.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 行）

使用步骤

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

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

文件位置: assets/css/style.css · assets/js/boxmoe.js

• 问题修复：≤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 宽度，打开含视频的文章页
• 确认控制栏默认隐藏，点击视频区域后控制栏弹出，再次点击可播放 / 暂停

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

文件位置: core/module/post-edit/fun-post-edit-layout.php · assets/css/admin/post-edit/post-edit.css · core/module/fun-admin.php

• 问题修复：写文章 / 编辑文章时，右侧元框（发布、分类、标签等）无法随页面滚动固定在视口内
• 三栏 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 重构（拟态玻璃质感）

文件位置: core/module/widget-manager/fun-widget-manager.php · assets/css/admin/widget-manager/widget-manager.css · assets/js/admin/widget-manager/widget-manager.js · functions.php

• 全面重构：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）

使用步骤

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

⏱️ 时钟小部件优化

文件位置: core/widgets/widget-clock.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（