feat: 完成布局优化 - 操作列固定、批量按钮自适应、分类标签带数量

优化内容:
1. 表格布局:
   - 使用 calc(100vw - 160px) 确保表格不超出视口
   - 操作列 fixed='right' 固定在右侧，宽度 300px
   - 按钮 3 个后自动换行 (max-width: 200px)
   - 恢复合理列宽，不再过度压缩

2. 批量操作区域:
   - 容器改为 inline-block，宽度自适应按钮内容
   - 背景宽度与按钮总宽度匹配

3. 分类标签:
   - 显示数量 (如 '待处理 (20)')
   - 点击切换筛选，去掉误导的 'X' 图标

4. 删除功能:
   - 操作列增加删除按钮
   - 删除前弹出确认对话框

5. 系统日志:
   - 修复后端日志路径 (parents[4])
   - 404 时显示友好提示

6. 其他:
   - 左侧菜单宽度 160px
   - 所有功能保留 (登录、用户管理、批量操作等)

frontend_optimization_notes.md

@@ -0,0 +1,240 @@
+# 前端页面优化说明
+
+## 🎯 优化目标
+从用户角度提升使用体验，优化布局和功能设计
+
+## ✨ 主要优化内容
+
+### 1. 视觉设计优化
+- **现代化渐变配色**：使用渐变色背景，提升视觉层次
+- **卡片阴影效果**：增加 hover 阴影，增强交互反馈
+- **统一间距**：所有卡片统一为 24px 间距
+- **响应式布局**：适配不同屏幕尺寸（移动端友好）
+- **状态可视化**：使用彩色渐变卡片展示统计数据
+
+### 2. 布局优化
+- **顶部导航栏**：
+  - 渐变蓝色背景
+  - 左侧 Logo + 标题
+  - 右侧快捷操作按钮组
+  - 固定高度，视觉更整洁
+
+- **系统概览卡片**：
+  - 4 列网格布局（移动端自动调整）
+  - 每个统计项独立彩色卡片
+  - 大号数字展示，一目了然
+
+- **流水线状态卡片**：
+  - 状态统计 4 列展示
+  - 模块状态表格更清晰
+  - 加载状态有 spinner 提示
+
+- **选题管理卡片**：
+  - 快速筛选标签（点击切换）
+  - 表格列宽优化
+  - 操作按钮分组更合理
+
+### 3. 功能增强
+
+#### 快速筛选标签
+```
+全部 (24) | 待处理 (15) | 待审查 (1) | 待发布 (7) | 已发布 (1)
+```
+- 点击标签快速筛选
+- 显示每个状态的数量
+- 高亮当前选中的标签
+
+#### 预览对话框增强
+- **平台切换**：知乎/微信公众号/小红书
+- **复制 HTML**：一键复制文章内容
+- **全屏查看**：全屏查看预览内容
+- **自动加载**：切换平台自动加载对应内容
+
+#### 操作按钮优化
+- **预览**：蓝色按钮，始终可用
+- **创作**：绿色按钮，仅"待处理"状态可用
+- **审查**：橙色按钮，仅"待审查"状态可用
+- 按钮带图标，更直观
+
+#### 状态标识优化
+- 使用彩色圆点 + 文字
+- 待处理：橙色
+- 待审查：红色
+- 待发布：绿色
+- 已发布：蓝色
+
+#### 合规分展示
+- 使用进度条展示
+- 百分比数字清晰可见
+- 颜色根据分数变化
+
+### 4. 交互优化
+- **加载状态**：
+  - 表格加载有 spinner
+  - 操作按钮有 loading 状态
+  - 全屏遮罩显示加载进度
+
+- **错误提示**：
+  - 统一使用 ElMessage 提示
+  - 成功/失败/警告分类明确
+  - 提示信息友好
+
+- **响应速度**：
+  - 操作后自动刷新
+  - 减少不必要的请求
+  - 优化 API 调用顺序
+
+### 5. 删除冗余功能
+- 移除重复的状态筛选器
+- 移除调试横幅（开发时可手动开启）
+- 简化日志对话框
+- 移除已删除的发布包相关功能
+
+### 6. 性能优化
+- 减少 DOM 节点数量
+- 优化计算属性
+- 合并 API 请求
+- 使用虚拟滚动（大表格时）
+
+## 📊 对比效果
+
+### 优化前
+- ❌ 重复筛选器占用空间
+- ❌ 按钮分组不清晰
+- ❌ 预览功能不完善
+- ❌ 视觉层次不明显
+- ❌ 缺少快速筛选
+- ❌ 加载状态不友好
+
+### 优化后
+- ✅ 简洁清晰的布局
+- ✅ 功能分组明确
+- ✅ 预览功能完善（复制 + 全屏）
+- ✅ 视觉层次分明
+- ✅ 快速筛选便捷
+- ✅ 加载状态友好
+
+## 🎨 视觉改进
+
+### 配色方案
+- **主色调**：蓝色 (#409EFF)
+- **成功色**：绿色 (#67C23A)
+- **警告色**：橙色 (#E6A23C)
+- **危险色**：红色 (#F56C6C)
+- **信息色**：紫色 (#909399)
+
+### 卡片设计
+- 圆角 12px
+- 阴影 0 2px 12px rgba(0,0,0,0.08)
+- hover 阴影增强
+- 渐变背景（统计卡片）
+
+### 字体大小
+- 标题：2xl (1.875rem)
+- 统计数字：2.5rem
+- 正文：默认
+- 辅助文字：0.9rem
+
+## 🔧 技术实现
+
+### 使用的技术
+- Vue 3 (Composition API)
+- Element Plus
+- Tailwind CSS
+- 响应式布局
+
+### 关键代码
+```javascript
+// 快速筛选
+const filteredTopics = computed(() => {
+  if (!filterStatus.value) return topics.value || [];
+  return topics.value.filter(t => t.status === filterStatus.value);
+});
+
+// 复制 HTML
+const copyPreviewHtml = async () => {
+  await navigator.clipboard.writeText(previewHtml.value);
+  ElMessage.success('HTML 已复制到剪贴板');
+};
+
+// 全屏查看
+const expandPreview = () => {
+  fullScreenPreview.value = true;
+};
+```
+
+## 📱 响应式支持
+
+### 断点
+- **移动端** (< 768px)：单列布局
+- **平板** (768-1024px)：2 列布局
+- **桌面** (> 1024px)：4 列布局
+
+### 适配内容
+- 统计卡片网格
+- 按钮组换行
+- 表格列宽自适应
+- 对话框宽度调整
+
+## 🚀 使用建议
+
+### 日常操作
+1. **查看概览**：顶部卡片快速了解系统状态
+2. **筛选选题**：点击快速筛选标签
+3. **预览文章**：点击"预览"按钮，选择平台
+4. **复制内容**：点击"复制 HTML"按钮
+5. **创作/审查**：根据状态点击对应按钮
+
+### 批量操作
+- 使用"全量刷新"同步最新数据
+- 使用"创作"启动批量生成
+- 使用"优化"进行合规审查
+
+### 日志查看
+- 选择日期和日志类型
+- 点击"加载日志"查看
+- 支持滚动查看历史日志
+
+## 📝 版本历史
+
+### v2.0 (2026-04-21)
+- 全新视觉设计
+- 快速筛选标签
+- 增强预览功能
+- 优化交互体验
+- 移除冗余功能
+
+### v1.0 (2026-04-20)
+- 基础功能实现
+- 预览对话框
+- 日志查看
+
+## 🔄 回滚方法
+
+如需回滚到旧版本：
+```bash
+cd /root/.openclaw/workspaces/yzr-yxl/projects/yu-zhi-ran/platform/frontend
+cp index.html.backup-optimize-* index.html
+```
+
+## ✅ 测试清单
+
+- [x] 页面正常加载
+- [x] 统计数据正确显示
+- [x] 快速筛选功能正常
+- [x] 预览功能正常
+- [x] 复制 HTML 功能正常
+- [x] 创作/审查按钮正常
+- [x] 日志查看功能正常
+- [x] 响应式布局正常
+- [x] 无控制台错误
+
+## 🎉 总结
+
+本次优化从用户角度出发，重点改进：
+1. **视觉体验**：现代化设计，层次清晰
+2. **操作效率**：快速筛选，一键操作
+3. **功能完善**：预览增强，复制便捷
+4. **交互友好**：加载提示，错误反馈
+
+优化后的页面更加简洁、高效、易用，大幅提升用户体验！