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

功能描述: 后台「评论」页面完全重构，采用网格卡片式布局，拟态玻璃质感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）

– 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. 按钮恢复为 “🧰 工具箱”