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

功能描述: 后台「评论」页面完全重构，采用网格卡片式布局，拟态玻璃质感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. 按钮恢复为 "🧰 工具箱"