# NoxUI 交互方案：内容监控 - 监控列表增强 (7.6.0 v1)

## Context for AI (Stitch Context)
> **Project Background**: NoxInfluencer 2.0 (v7.6.0). The "Content Monitor" provides real-time data tracking for specific social media posts.
> **Refactor Goal**: To improve the visibility and manageability of monitoring tasks, particularly those generated by "Auto-track" rules, and to provide intuitive health/progress indicators.
> **Key Pain Points**: 
> 1. Difficulty in distinguishing task sources (Manual vs. Auto).
> 2. No feedback loop for silent auto-tracked tasks.
> 3. Lack of quick actions for expiring tasks (Renewal).
> 4. Performance anomalies (spikes/stagnation) are hard to spot in large lists.
>
> **⚠️ IMPORTANT INSTRUCTION TO AI**: Please analyze this context to understand the domain and user goals. **DO NOT generate any UI screens yet.** Simply reply with "Context Received" to acknowledge that you have understood the background and are ready for specific design tasks.

## 1. 需求分析 (Requirement Analysis)
*   **核心逻辑**: 
    - **透明化**: 任务来源标签化 + 自动任务新生成的“未读”反馈。
    - **预警化**: 进度条颜色预警 + 关键数据波动的图标化提醒。
    - **效率化**: 集成单条/批量“续期”操作。

## 2. 交互方案 (Interaction Design)

### 2.1 来源组件 (Source Component)
- **Component**: Source Tag.
- **Visuals**:
    - **手动**: 灰色图标 `👤` + 文本“手动录入”。
    - **自动**: 蓝色图标 `🤖` + 文本“[规则名称]”。
- **Interaction**:
    - 点击自动追踪标签：触发“新建监控”弹窗并直接定位到 **Tab 2** 的该规则行（规则背景高亮 2s 后恢复）。

### 2.2 提醒与异常视觉 (Alerts & Indicators)
- **未读标记 (Unread)**: 在任务标题/缩略图左上角显示 4px 蓝点。查看详情或悬停 3s 后自动淡出。
- **爆发增长 (Growth)**: 在观看量/阅读量数据旁显示红色“🔥”图标（动画效果：微弱缩放）。
- **停滞预警 (Stagnation)**: 数据转灰，旁边显示橙色“⚠️”图标，Tooltip 提示“最近 48h 无数据更新”。

### 2.3 进度可视化 (Progress Indicator)
- **UI**: 位于“监控时长”单元格内。
- **形态**: 120px 宽的极简进度条。
    - **正常**: 品牌蓝 (`#2E5BFF`)。
    - **临期 (<48h)**: 警告橙 (`#FF9F43`)。
    - **已到期**: 错误红 (`#FF4D4F`)。
- **Label**: `12/60天` (12px 灰色字)。

### 2.4 续期交互 (Renewal Flow)
- **单条入口**: 位于列表行末尾操作列的 `[更多]` 下拉菜单中。
- **批量入口**: 勾选任务后，底部出现的蓝色 Action Bar 上的 `[批量续期]` 按钮。
- **对话框交互**: 弹出微型确认框。
    - 标题：“延长监控时长”。
    - 字段：`选择续期时长` (下拉框，默认 60d)。
    - 确认后，列表到期时间更新，Toast 提示成功。

### 2.5 数据汇总面板 (Summary Panel)
- **Visuals**: 一组数据指标卡片 (Stats Cards)。
- **Metrics**:
    - **总任务数**: 120 (运行中 115 / 已到期 5)。
    - **总播放量**: 5.2M。
    - **总互动量**: 240k。
    - **平均互动率**: 4.6%。

## 3. Stitch Prompting Strategy (投喂策略)
1.  **Step 1 (Context Setting)**: 发送 **Context for AI** 章节。
2.  **Step 2 (Execution)**: 按顺序投喂下方场景指令。

## 4. Stitch 原型生成指令集 (Stitch Commands)

> **全局视觉预设 (Global Preset)**: 
> "Design System: Material Design 3. Primary Color: #2E5BFF. **Visual Tokens**: Border Radius: Modal 12px, Button 8px, Card 10px; Button Height: 36px; Spacing: 16px; Density: Compact. **Language**: Simplified Chinese."

### 场景 A: [主界面] 监控列表全貌 (含汇总面板)
> "设计内容监控的‘任务列表’桌面端 Web 页面。布局顺序严格如下：
> 1. **顶部筛选区**:
>    - 第一行：包含搜索框（搜标题/链接）和一组下拉筛选（状态、地区、标签、负责人、监控时长、播放量、来源类型）。
>    - 第二行：紧跟在上方筛选器之后，是一排平台切换 TAB：‘全部 (120)’、‘YouTube (45)’、‘TikTok (30)’、‘Instagram (25)’、‘Twitter (20)’。当前选中 ‘全部’。
>    - 旁边附带 ‘仅看新任务’ 的 Switch。
> 2. **数据汇总面板**: 位于 TAB 下方，展示四张卡片：总任务数 (120)、总播放量 (5.2M)、总互动量 (240k)、平均互动率 (4.6%)。
> 3. **任务表格**: 位于汇总面板下方。

### 场景 B: [操作流] 批量续期确认
> "展示监控列表页底部出现了蓝色的批量操作栏 (Bulk Action Bar)。
> 1. 显示文案 ‘已选 5 项’。
> 2. 操作栏内有按钮 ‘批量续期’、‘批量导出’。
> 3. 屏幕中心显示一个小型弹窗，标题‘批量续期监控’，中间有一个‘选择时长’的下拉框。"