💬 评论列表网格卡片式布局优化

功能描述: 后台「评论」页面完全重构，采用网格卡片式布局，拟态玻璃质感UI设计，支持懒加载、多选批量操作、自定义确认弹窗等功能。

优化内容:

1. 网格卡片式布局

– 卡片显示评论者头像、名称、邮箱、评论内容 – 文章信息以勋章样式展示，14种明亮浅色随机分配 – 状态标签（已批准、待审核、垃圾、回收站） – 回复数量标识

2. 玻璃拟态UI设计

– 半透明背景配合 backdrop-filter: blur() 毛玻璃效果 – 渐变色彩头部区域 – 统一的圆角设计 var(--admin-radius-xl) – 悬停上浮动画效果

3. 懒加载机制

– 默认首次加载8条评论 – 向下滚动到底部附近（距离200px）自动加载8条 – 以此类推，直到加载完所有评论 – 滚动监听使用防抖处理（100ms）

4. 搜索功能优化

– 搜索模式下不受懒加载限制 – 直接加载所有匹配的搜索结果 – 实时搜索（300ms防抖） – 搜索框位于顶部工具栏右侧

5. 状态筛选栏

– 全部、待审核、已批准、垃圾评论、回收站筛选 – 显示各状态评论数量 – 点击切换筛选条件 – 「全部」分类包含所有状态（approve、hold、spam、trash）

6. 自定义排序

– 「全部」分类：待审核排最前，回收站排最后 – 其他分类：按日期倒序，最新的在前 – 使用 MySQL FIELD 函数实现自定义排序优先级

7. 多选批量操作

– 点击卡片或选择圆圈进入多选模式 – 批量操作工具栏显示已选择数量 – 支持功能：批准、驳回、标记垃圾、移至回收站、永久删除、取消选择

8. 自定义确认弹窗

– 批量删除、移至回收站、标记垃圾时使用自定义确认弹窗 – 与整体UI风格一致（玻璃拟态） – 显示选中的评论数量（高亮） – 不同类型操作不同颜色按钮（删除红色、垃圾紫色、回收站橙色、恢复绿色）

9. 快捷操作按钮

– 查看、编辑、回复、批准/驳回、标记垃圾、移至回收站/还原、永久删除 – 一行3个按钮布局，图标+文字垂直排列 – 悬停效果：背景色变化+轻微上浮

10. 回复评论弹窗

– 玻璃拟态设计风格 – 显示原文内容预览 – 文本框支持多行输入 – 发送回复后自动刷新列表

11. 响应式设计

– 桌面端：多列网格布局（auto-fill minmax 320px） – 平板端：减少列数，适配中等屏幕 – 移动端：单列布局，优化触摸区域

12. 隐藏原生元素

– 隐藏 WordPress 原生评论列表表格 – 隐藏原生分页导航 – 隐藏底部状态筛选链接（.subsubsub）

代码寻找:

• PHP后端: wp-content/themes/lolimeow/core/module/comment-grid/fun-comment-grid.php (Shiroki_Comment_Grid_UI类)

– ajax_get_comments() – 获取评论列表（支持分页和搜索） – 非搜索模式：per_page = 8，支持分页 – 搜索模式：不限制数量，加载所有结果 – format_comment_item() – 格式化评论数据 – ajax_approve_comment() / ajax_unapprove_comment() – 批准/驳回评论 – ajax_spam_comment() / ajax_unspam_comment() – 标记/恢复垃圾评论 – ajax_trash_comment() / ajax_untrash_comment() – 移至/还原回收站 – ajax_delete_comment() – 永久删除评论 – ajax_reply_comment() – 回复评论 – ajax_bulk_action_comments() – 批量操作评论

• JS前端: wp-content/themes/lolimeow/assets/js/admin/comment-grid/comment-grid.js (CommentGrid对象)

– perPage = 8 – 每页加载数量配置 – loadComments() / loadMoreComments() – 加载评论列表/懒加载 – appendComments() – 追加评论到现有列表 – initLazyLoad() – 初始化滚动监听 – showBulkConfirmModal() – 显示批量操作确认弹窗 – createCommentCard() – 创建评论卡片HTML – handleSingleAction() / executeAction() – 处理单个操作 – handleBulkAction() / executeBulkAction() – 处理批量操作 – openReplyModal() – 打开回复弹窗 – showToast() – 显示Toast提示

• CSS样式: wp-content/themes/lolimeow/assets/css/admin/comment-grid/comment-grid.css

– .shiroki-comment-wrapper – 评论网格容器 – .shiroki-comment-top-bar – 顶部工具栏（筛选 + 搜索 + 批量操作） – .shiroki-comment-grid – 网格容器 – .shiroki-comment-card – 评论卡片 – .shiroki-comment-select-circle – 多选圆圈 – .shiroki-comment-post-badge – 文章勋章（14种颜色） – .shiroki-comment-actions – 操作按钮区域（一行3个） – .shiroki-comment-bulk-actions – 批量操作工具栏 – .shiroki-comment-bulk-confirm-modal – 批量确认弹窗 – .shiroki-comment-reply-modal – 回复弹窗 – .shiroki-comment-load-more – 懒加载更多指示器

• 变量管理: wp-content/themes/lolimeow/assets/css/admin/admin-variables.css

– 复用短代码按钮颜色变量（–sc-btn-） – 玻璃拟态效果变量（–admin-glass-blur, –admin-border-glass）

AJAX 接口:

• shiroki_get_comments – 获取评论列表（支持分页、筛选、搜索）

– 参数: page, per_page, status, search, post_id – 返回: comments, current_page, has_more

• shiroki_approve_comment – 批准评论
• shiroki_unapprove_comment – 驳回评论
• shiroki_spam_comment – 标记垃圾评论
• shiroki_unspam_comment – 恢复垃圾评论
• shiroki_trash_comment – 移至回收站
• shiroki_untrash_comment – 还原评论
• shiroki_delete_comment – 永久删除评论
• shiroki_reply_comment – 回复评论
• shiroki_bulk_action_comments – 批量操作评论

文件变更:

• core/module/comment-grid/fun-comment-grid.php – 新增评论网格UI主类
• assets/js/admin/comment-grid/comment-grid.js – 新增评论网格交互逻辑
• assets/css/admin/comment-grid/comment-grid.css – 新增评论网格样式
• functions.php – 加载新模块

     

🪟 媒体弹窗优化

• 功能描述: 完全替换 WordPress 原生媒体弹窗，采用玻璃拟态UI设计，支持懒加载、详情抽屉、自动保存等功能。
• 优化内容:

– 玻璃拟态UI设计: 浅蓝色渐变主题，半透明背景配合毛玻璃效果，与后台整体风格统一。 – 懒加载机制: 默认每次加载21条附件，向下滚动自动加载更多，搜索模式下加载全部结果。 – 分类筛选: 支持所有多媒体项目、上传到本文章、图片、音频、视频、文档、试算表、归档、孤立、我的等分类筛选。 – 日期筛选: 支持按年月筛选附件。 – 搜索功能: 实时搜索（300ms防抖），搜索时加载所有匹配结果。 – 详情抽屉: 双击附件从右侧展开抽屉，显示完整附件信息（标题、题注、替代文本、描述、文件信息）。 – 自动保存: 关闭抽屉时检测变更，自动保存并同步更新网格显示。 – 复制链接: 详情抽屉内提供复制文件URL按钮，支持现代Clipboard API和降级方案。 – 插入功能: 根据文件类型智能插入（图片用img标签、视频用短代码、音频用短代码、其他文件用短代码）。 – 悬停提示: 鼠标悬停附件显示【双击可查看详情】气泡提示，跟随鼠标位置避免被裁剪。 – 顶部通知: 保存成功/失败提示从底部改为顶部显示。 – 响应式设计: 移动端适配，抽屉全屏显示。

• 代码寻找:

– PHP后端: wp-content/themes/lolimeow/core/module/media-library/fun-media-modal.php (Shiroki_Media_Modal类) – ajax_get_media_items() – 获取媒体列表（支持分页和搜索） – ajax_upload_media() – 处理文件上传 – ajax_get_media_detail() – 获取附件详情 – ajax_save_media_detail() – 保存附件详情 – ajax_delete_media() – 删除附件 – format_media_item() – 格式化媒体项数据 – JS前端: wp-content/themes/lolimeow/assets/js/admin/media-library/media-modal.js (ShirokiMediaModal对象) – loadMediaItems() / loadMoreItems() – 加载媒体列表/懒加载 – openDetailDrawer() / closeDetailDrawer() – 打开/关闭详情抽屉 – saveDetailData() – 保存详情数据 – copyUrlToClipboard() / fallbackCopyUrl() – 复制链接功能 – showTooltip() / hideTooltip() – 悬停提示气泡 – insertToEditor() – 插入到编辑器 – CSS样式: wp-content/themes/lolimeow/assets/css/admin/media-library/media-modal.css – .shiroki-media-modal-container – 弹窗容器 – .shiroki-media-modal-grid – 媒体网格 – .shiroki-media-detail-drawer – 详情抽屉 – .shiroki-media-tooltip – 悬停提示气泡 – .shiroki-media-save-notification – 保存通知 – 变量管理: wp-content/themes/lolimeow/assets/css/admin/admin-variables.css – --admin-gradient-light-blue – 浅蓝色渐变 – --admin-light-blue- – 浅蓝色系变量

• AJAX 接口:

– shiroki_get_media_modal_items – 获取媒体列表（支持分页、筛选、搜索） – shiroki_upload_media_modal – 上传文件 – shiroki_get_media_detail – 获取附件详情 – shiroki_save_media_detail – 保存附件详情 – shiroki_delete_media – 删除附件

       

📚 媒体库懒加载优化

功能描述: 后台「媒体 > 媒体库」页面改为懒加载模式，默认加载8条，滚动自动加载更多，搜索功能不受懒加载影响。

优化内容:

1. 懒加载机制

– 默认首次加载8条媒体文件 – 向下滚动到底部附近自动加载8条 – 以此类推，直到加载完所有媒体 – 滚动监听使用防抖处理（200ms）

2. 搜索功能优化

– 搜索模式下不受懒加载限制 – 直接加载所有匹配的搜索结果 – 实时搜索（300ms防抖） – 搜索时隐藏懒加载触发器

3. 筛选功能保持懒加载

– 分类筛选（全部、图片、视频、音频、文档、文件） – 筛选状态下保持每次加载8条 – 切换筛选条件重置分页

4. 排序功能

– 支持按日期、名称、大小、类型排序 – 点击排序按钮切换升序/降序 – 排序后重置分页重新加载

代码寻找:

• PHP后端: wp-content/themes/lolimeow/core/module/media-library/fun-media-library.php (Shiroki_Media_Library_UI类)

– ajax_get_media_items() – 获取媒体列表（支持分页和搜索） – 非搜索模式：posts_per_page = 8，支持分页 – 搜索模式：posts_per_page = -1，加载所有结果 – format_media_item() – 格式化媒体项数据 – filter_document_mime_type() – 文档类型筛选 – filter_file_mime_type() – 文件类型筛选

• JS前端: wp-content/themes/lolimeow/assets/js/admin/media-library/media-library.js (ShirokiMediaLibrary对象)

– state.perPage = 8 – 每页加载数量配置 – loadMediaItems() – 加载媒体列表 – 滚动监听事件 – 检测底部触发懒加载 – 搜索输入事件 – 搜索时禁用懒加载

• CSS样式: wp-content/themes/lolimeow/assets/css/admin/media-library/media-library.css

– .shiroki-media-grid – 媒体网格容器 – .shiroki-media-card – 媒体卡片 – .shiroki-media-loading – 加载状态

AJAX 接口:

• shiroki_get_media_items – 获取媒体列表（支持分页、筛选、搜索）

– 参数: page, per_page, search, filter, sort, order – 返回: items, has_more, total

文件变更:

• assets/js/admin/media-library/media-library.js – 添加懒加载逻辑和搜索模式判断
• core/module/media-library/fun-media-library.php – 后端分页逻辑，搜索模式返回全部

     

🎨 文章编辑页面玻璃拟态UI风格优化

问题描述: 文章编辑页面（post-new.php / post.php）需要与文章列表网格卡片式布局统一UI风格，采用玻璃拟态设计。

修复文件:

• assets/css/admin/post-edit/post-edit.css
• assets/css/markdown-editor.css
• assets/js/admin/post-edit/post-edit.js
• core/module/post-edit/fun-post-edit-layout.php

优化内容:

1. 双栏布局重构

– 左侧：元框区域（分类、标签、发布等）+ 工具栏 – 右侧：主编辑区域（标题、编辑器） – 使用 CSS Grid 实现响应式布局

2. 玻璃拟态效果

– 背景使用 backdrop-filter: blur() 实现毛玻璃效果 – 半透明背景色 rgba() 配合玻璃边框 – 统一的圆角设计 var(--admin-radius-lg)

3. 工具栏整合

– 添加媒体按钮、短代码选择器、MD工具栏、Quicktags工具栏 – 统一移动到左侧工具栏区域 – 彩色按钮样式，每个按钮不同颜色

4. 分类列表圆角按钮

– 分类复选框改为圆角按钮样式 – 默认淡灰色，选中高亮橙色 – 热门分类特殊标记（淡黄色）

5. 标签输入优化

– 输入框和添加按钮并排显示 – 输入框默认显示浅色边框，聚焦后加深 – 添加按钮蓝色渐变背景

6. 标签云同步

– 标签云改为圆角按钮风格 – 与分类列表保持一致的UI风格

7. 标题输入框

– 添加蓝色 # SVG图标 – 文本缩进避免盖住图标

8. 特色图片区域

– 设置特色图片按钮自适应宽度 – 虚线边框提示可点击

9. 发布区域优化

– 发布按钮自适应容器宽度 – 删除操作红色警告风格 – 复制文章按钮整合

10. 移动端适配

– 小屏幕改为单栏布局 – 工具栏改为浮动按钮+模态框 – 侧边栏隐藏，释放空间

11. textarea 移动端适配优化

– 问题描述: 在移动端、平板端时，textarea 编辑区域不能像桌面端一样根据内容长度自动扩展，且内容会超出页面宽度 – textarea 高度自适应 – 添加 field-sizing: content 支持现代浏览器根据内容自动调整高度 – 添加 resize: vertical 允许用户手动调整高度 – 设置合理的 min-height 确保编辑区域有足够空间 – 防止内容超出页面宽度 – 所有容器添加 max-width: 100% 限制最大宽度 – 添加 overflow-x: hidden 防止水平溢出 – textarea 添加 width: 100% 强制宽度为100% – 添加 word-wrap: break-word 和 white-space: pre-wrap 确保长文本自动换行 – 响应式适配 – 平板端 (max-width: 1024px): 分屏模式改为垂直堆叠 – 移动端 (max-width: 782px): 单栏布局，编辑器容器优化 – 超小屏幕 (max-width: 480px): 进一步压缩内边距，优化触摸区域

涉及的 CSS 选择器:

• .shiroki-editor-layout – 双栏布局主容器
• .shiroki-editor-sidebar – 左侧元框区域
• .shiroki-editor-main – 右侧编辑区域
• .shiroki-editor-toolbar – 工具栏容器
• #categorychecklist, #categorychecklist-pop – 分类列表
• .wp-tag-cloud – 标签云
• .newtag, .tagadd – 标签输入和添加按钮
• #title – 标题输入框
• #set-post-thumbnail – 特色图片按钮
• #publish – 发布按钮
• #delete-action – 删除操作区域
• .post-new-php .wp-editor-area, .post-php .wp-editor-area – 编辑器文本域
• .post-new-php textarea#content, .post-php textarea#content – 内容文本域
• #wp-content-editor-container textarea#content – 编辑器容器内文本域
• 各层父容器: #wpbody-content, .shiroki-editor-layout, .shiroki-editor-main, #postdivrich, #wp-content-wrap

涉及的 JS 功能:

• moveToolbarElements() – 移动工具栏元素到对应容器
• removeEmptyEditorTools() – 删除空的编辑器工具栏容器
• addMetaBoxIcons() – 为元框标题添加图标
• 移动端工具栏浮动按钮和模态框交互

     

📄 页面列表网格卡片式布局优化

问题描述: 后台「页面 > 所有页面」需要与「文章 > 所有文章」新UI风格保持一致，采用网格卡片式布局，支持多选批量操作。

修复文件:

• assets/css/admin/post-grid/post-grid.css
• assets/js/admin/page-grid/page-grid.js
• core/module/page-grid/fun-page-grid.php

优化内容:

1. 网格卡片式布局

– 复用文章网格的CSS样式，统一管理 – 卡片显示页面特色图片、标题、作者、父页面、日期 – 状态标签（已发布、草稿、待审核、回收站） – 密码保护标识、子页面数量标识

2. 状态筛选栏

– 全部、已发布、草稿、待审核、回收站筛选 – 显示各状态页面数量 – 点击切换筛选条件

3. 父页面筛选

– 支持按顶级页面筛选 – 支持按特定父页面筛选 – 按钮式切换，圆角设计

4. 搜索功能

– 独立搜索框，靠右显示 – 实时搜索（500ms防抖） – 支持按页面标题搜索

5. 多选批量操作

– 点击卡片或选择圆圈进入多选模式 – 批量操作工具栏显示已选择数量 – 支持功能：复制链接、复制页面、修改父级、批量删除、取消选择

6. 批量修改父级页面

– 模态框选择新父页面 – 支持搜索过滤父页面 – 排除已选中的页面（防止循环引用） – 提供「设为顶级页面」选项

7. 自定义确认对话框

– 批量删除时使用自定义确认对话框 – 与整体UI风格一致（玻璃拟态） – 显示选中的页面数量（高亮） – 危险操作红色警告风格

8. 快捷操作按钮

– 查看、编辑、复制链接、复制页面、回收站/还原 – 复制页面功能（创建副本为草稿）

9. 防止重复提交

– 批量操作添加状态锁 – 防止重复初始化 – 防止重复点击

10. 响应式设计

– 桌面端：多列网格布局 – 平板端：减少列数 – 移动端：单列布局，优化触摸区域

涉及的 CSS 选择器:

• .shiroki-post-wrapper – 页面网格容器
• .shiroki-post-top-bar – 顶部工具栏（筛选 + 批量操作）
• .shiroki-post-search-wrapper – 搜索框容器
• .shiroki-post-toolbar – 父页面筛选工具栏
• .shiroki-post-grid – 网格容器
• .shiroki-post-card – 页面卡片
• .shiroki-post-select-circle – 多选圆圈
• .shiroki-post-bulk-actions – 批量操作工具栏
• .shiroki-post-bulk-parent-modal – 批量修改父页面模态框
• .shiroki-confirm-dialog – 自定义确认对话框

涉及的 JS 功能:

• ShirokiPageGrid – 页面网格管理器主对象
• toggleSelection() – 切换卡片选择状态
• updateBulkActions() – 更新批量操作工具栏显示
• bulkCopyContent() – 批量复制页面
• bulkSetParent() – 批量修改父级页面
• openBulkParentModal() – 打开父页面选择模态框
• renderBulkParentOptions() – 渲染父页面选项
• bindBulkParentModalEvents() – 绑定模态框事件
• showConfirmDialog() – 显示自定义确认对话框
• bulkDelete() – 批量删除页面

AJAX 接口:

• shiroki_get_pages – 获取页面列表
• shiroki_trash_page – 单个页面移到回收站
• shiroki_restore_page – 还原页面
• shiroki_bulk_trash_pages – 批量移到回收站
• shiroki_clone_page – 复制单个页面
• shiroki_clone_pages – 批量复制页面
• shiroki_bulk_set_parent – 批量修改父级页面

     

📝 文章编辑页面工具栏布局优化

问题描述: 在1400px以下屏幕宽度时，左侧工具栏（媒体、短代码、MD工具、Quicktags）占用空间过大，需要优化为浮动按钮+模态框形式，释放编辑区域空间。

修复文件:

• assets/css/admin/post-edit/post-edit.css
• core/module/post-edit/fun-post-edit-layout.php

优化内容:

1. 响应式断点调整

– 断点从991px逐步调整为1400px – 1400px以下：隐藏侧边栏，释放空间给编辑器 – 1400px以下：原工具栏隐藏，显示浮动按钮

2. 浮动工具箱按钮

– 位置：页面顶部中间固定 (top: 50px, left: 50%) – 样式：圆角胶囊按钮，带阴影和玻璃拟态效果 – 图标：🧰 工具箱 / ✕ 关闭 – 点击切换显示/隐藏工具面板

3. 工具面板模态框

– 玻璃拟态设计风格 – 圆角卡片式布局 – 包含所有工具区域：媒体、短代码、MD工具、Quicktags – 标题栏：🧰 编辑工具箱 + 关闭按钮 – 背景模糊遮罩，点击背景可关闭

4. 内容克隆机制

– 使用 cloneNode(true) 复制原工具栏内容 – 保留所有按钮的事件绑定 – 只克隆一次，避免重复操作

5. 按钮事件委托处理

– 短代码按钮：直接调用 send_to_editor(code) 插入 – MD工具按钮：通过class匹配触发原按钮点击 – Quicktags按钮：通过ID匹配触发原按钮点击 – 添加媒体按钮：触发原媒体按钮点击

6. 自动关闭窗口

– 点击任意工具按钮后，延迟150ms自动关闭模态框 – 确保操作先执行完成再关闭

7. 布局调整

– 1400px以下：网格布局改为单列 grid-template-columns: 1fr – 编辑器区域占满全部宽度 – 侧边栏完全隐藏 display: none !important

涉及的 CSS 选择器:

• .shiroki-toolbar-float-btn – 浮动工具箱按钮
• .shiroki-toolbar-mobile-modal – 移动端工具面板模态框
• .shiroki-toolbar-mobile-modal-backdrop – 模态框背景
• .shiroki-toolbar-mobile-modal-content – 模态框内容区
• .shiroki-toolbar-mobile-modal-header – 模态框头部
• .shiroki-toolbar-mobile-modal-body – 模态框主体
• .shiroki-toolbar-mobile-modal-footer – 模态框底部
• @media screen and (max-width: 1400px) – 响应式断点

涉及的 JS 功能:

• cloneToolbarContent() – 克隆工具栏内容到模态框
• openModal() – 打开工具面板
• closeModal() – 关闭工具面板
• 事件委托处理模态框内按钮点击
• 各类型按钮的点击处理逻辑

交互流程:

1. 用户点击浮动按钮 “🧰 工具箱”
2. 克隆原工具栏内容到模态框（首次）
3. 显示模态框，按钮变为 “✕ 关闭”
4. 用户点击工具按钮（如短代码）
5. 触发对应功能（如插入短代码到编辑器）
6. 延迟150ms后自动关闭模态框
7. 按钮恢复为 “🧰 工具箱”