新媒体运营工作台搭建技能

概述

本技能为新媒体运营人员搭建一套完整的运营工作台，包含三大模块：
1. 商单运营区：商单录入（客户名称、金额、状态等全字段）、月历排期视图、月度收入折线图、收入统计表格
2. 账号数据区：多账号卡片展示、每日数据录入、数据趋势可视化、热点选题管理
3. 待办区：根据商单预计发布日期自动生成待办，按工作流程跟踪进度

工作台通过 WorkBuddy 资料库能力部署，数据云端存储、多设备自动同步。

搭建流程

前置条件

• 已加载 资料库 skill（library skill），获取 open_platform token
• 已读取资料库的 database 和 page 能力文档

Step 1: 读取数据库 Schema

读取 references/database-schemas.md，获取 3 张数据表的完整字段定义。

如果用户的账号平台不是"小红书大号/小红书小号"，应先询问用户的具体平台和账号名称，然后相应修改 schema 中以下字段的 select options：
- 商单管理表 → 接单账号
- 账号每日数据表 → 账号
- 热点选题表 → 平台

Step 2: 创建 3 张数据表

使用资料库的 create_database.py 脚本，按 references/database-schemas.md 中的 JSON schema 分别创建：
1. 商单管理表（11个字段）
2. 账号每日数据表（11个字段）
3. 热点选题表（8个字段）

创建后记录每张表的 database ID。

Step 3: 预置示例数据

读取 references/sample-data.md，使用资料库的 batch_add_database_records.py 脚本为每张表添加示例数据：
- 商单管理表：5条（含1条逾期商单）
- 账号每日数据表：4条
- 热点选题表：4条

示例数据让用户首屏即看到工作台效果。用户可后续删除或修改。

Step 4: 生成 HTML 页面

读取 assets/workspace-template.html 模板文件，将其中的 3 个占位符替换为实际创建的 database ID：
- {{DB_ORDERS_ID}} → 商单管理表 ID
- {{DB_ACCOUNT_ID}} → 账号每日数据表 ID
- {{DB_HOTSPOT_ID}} → 热点选题表 ID

如果用户自定义了账号名称，还需要修改 HTML 模板中 renderAccountCards() 函数里的账号卡片信息（平台名称、链接等）。

Step 5: 上传部署

使用资料库的 import_html.py 脚本上传 HTML 文件，关联 3 张数据表：

--databases '[{"id":"<orders_db_id>"},{"id":"<account_db_id>"},{"id":"<hotspot_db_id>"}]'

然后使用 publish_page.py 发布为公开可访问的在线页面，获取访问链接交付用户。

工作台功能说明

商单运营区

• 新增商单表单：客户名称、接单日期、预计发布日期、内容形式（图文/视频）、接单账号、下单金额、返点金额、平台税额、MCN费用、状态、备注
• 月历排期：按预计发布日期在月历中展示所有商单，支持翻月
• 月度收入折线图：红色实线=月度总收入（排除"放弃"状态），绿色虚线=已完成收入。每单收入 = 下单金额 - 返点金额 - 平台税额 - MCN收取费用
• 收入统计表格：展示近6个月的商单数、月度收入、完成收入、完成数

账号数据区

• 账号卡片：展示各账号最新粉丝数、新增粉丝、曝光量
• 每日数据录入：粉丝数、新增粉丝、曝光量、互动量、点赞/收藏/评论/笔记数
• 数据趋势图：曝光量、互动量、新增粉丝三条折线，可按账号筛选
• 热点选题管理：录入热点话题、选题方向、选题角度，按热度（高/中/低）标注

待办区

• 根据商单预计发布日期自动排列待办
• 按工作流程跟踪：刚接单 → 接收Brief → 大纲 → 图文制作 → 修改 → 待发布 → 已发布 → 已完成
• 分组展示：逾期（红色）、今日到期、本周到期、后续
• 可一键推进状态或通过下拉选择切换状态

其他功能

• "今天要处理"置顶：自动列出逾期/今日/3天内到期的商单
• 导出JSON备份 / 导入恢复：首屏按钮，防数据丢失
• 同步状态指示器：已同步/同步中/离线模式
• 离线降级：断网时自动切换localStorage，恢复后同步
• 表单输入缓存：未提交的表单内容自动保存到localStorage
• 响应式适配：手机/平板/桌面均可使用

技术实现要点

• HTML 通过 window.__SMART_PAGE__.database SDK 连接资料库数据表
• SDK 方法：getSchema(), query(), addRecord(), updateRecord(), deleteRecord()
• 所有图表使用纯 SVG 绘制，无外部依赖
• 全部 CSS/JS 内联，单文件部署
• select 字段值通过 getSchema() 动态获取 options，与数据表定义保持一致

资源文件