为将产品串联成一个从“项目管理 -> 材料输入/配置 -> AI 大纲编排 -> 结构化排版工作台”的完整闭环,以下是新增界面的详细设计方案(包含产品交互流、线框布局与前端状态定义):
完整业务流转与架构闭环 (User Journey Flow)
[ 界面 1: 项目管理首页 ]
│ (点击 "+ 新建文章")
▼
[ 界面 2: 创建向导 Step 1 - 资料导入与属性配置 ]
- 粘贴粗稿 / 上传文档 / 录入主题
- 设置文章类型、受众、语气人设、默认排版主题
│ (点击 "下一步:AI 生成大纲")
▼
[ 界面 3: 创建向导 Step 2 - AI 大纲交互编排 ]
- 实时拆解 7 种语义分节 (Semantic Nodes)
- 增删改查、拖拽调序、局部 AI 扩充/精炼
│ (点击 "完成大纲,进入排版工作台")
▼
[ 界面 4: 结构化排版工作台 (核心功能) ]
- WYSIWYG 所见即所得排版、去 AI 味改写、智能插配图、一键同步微信
界面 1:项目管理与历史文章首页 (Projects Home)
1.1 界面线框与布局
+--------------------------------------------------------------------------------------------------+
| AI 公众号工作台 [微信账号: 智创科技 ▾] [⚙ 配置] |
+--------------------------------------------------------------------------------------------------+
| [+] 新建文章 | 筛选: [全部状态 ▾] [全部主题 ▾] [🔍 搜索文章标题/关键词...] | 视图: [⊞ 卡片] [≡ 列表] |
+--------------------------------------------------------------------------------------------------+
| |
| +---------------------------+ +---------------------------+ +---------------------------+ |
| | [封面缩略图: 2.35:1] | | [封面缩略图: 2.35:1] | | [封面缩略图: 2.35:1] | |
| | 直通金砖及全球市场!... | | 2026年AI硬件落地趋势解读 | | 深度:独立开发者的出海之路| |
| | ------------------------- | | ------------------------- | | ------------------------- | |
| | 状态: [已同步草稿箱] | | 状态: [排版编辑中] | | 状态: [草稿/仅大纲] | |
| | 字数: 1,105字 | 8个分节 | | 字数: 2,430字 | 12个分节 | | 字数: 650字 | 5个分节 | |
| | 主题: 商务科技蓝 (v1) | | 主题: 极简纯黑白 (v2) | | 主题: 活力新潮橙 (v1) | |
| | 更新时间: 10分钟前 | | 更新时间: 昨天 18:20 | | 更新时间: 3天前 | |
| | | | | | | |
| | [进入编辑] [复制] [···] | | [进入编辑] [复制] [···] | | [继续编排] [复制] [···] | |
| +---------------------------+ +---------------------------+ +---------------------------+ |
| |
+--------------------------------------------------------------------------------------------------+
1.2 核心功能与交互
快捷入口:
主按钮「+ 新建文章」:点击后弹出创建向导或进入 Step 1 路由。
快速复制副本(Duplicate):一键基于历史优秀排版复制一份新草稿。
卡片元信息:直观展示文章标题、封面缩略图、分节数量、字数、当前挂载的主题包版本、同步状态(草稿中 / 本地已备份 / 已同步微信)。
批量操作:支持多选批量删除、批量导出 Markdown / HTML / PDF。
界面 2:创建阶段 Step 1 - 资料导入与属性配置 (Import & Metadata Setup)
用户在此界面完成“素材喂入”与“排版风格/人设调优”的初始定义。
2.1 界面线框与布局
+--------------------------------------------------------------------------------------------------+
| < 返回首页 新建文章向导:(1) 资料导入与属性配置 ──► (2) 确认大纲 ──► (3) 排版工作台 |
+--------------------------------------------------------------------------------------------------+
| 左栏: 原始资料录入 (Input Material) | 右栏: 内容属性与排版预设 (Attributes & Tone) |
| | |
| 导入方式: [ 文本/粗稿 ] [ 上传文件 ] [ URL抓取 ] | 1. 目标发布账号: [ 官方订阅号 (默认) ▾ ] |
| | |
| +---------------------------------------+ | 2. 文章核心类型: |
| | 粘贴您的会议纪要、粗稿、核心要点或提示词...| | (•) 行业深度分析 ( ) 活动/会议宣发 |
| | | | ( ) 干货操作教程 ( ) 商业快讯/通报 |
| | 例: | | |
| | 本次活动聚焦新材料领域,面向金砖国家 | | 3. 语气人设 (Tone Profile): |
| | 及全球合作伙伴开展展示与路演... | | [ 极简技术干货风 (严谨、少废话、多数据) ▾ ] |
| | [支持直接粘贴 Markdown / 文本] | | |
| +---------------------------------------+ | 4. 目标阅读篇幅: [ 中篇 (1000~2000字 / 约3-5分钟) ▾ ] |
| 字数统计: 420 字 | |
| | 5. 初始排版主题包: |
| [📎 拖拽 PDF / Word / 音频转写文件至此] | [ 商务科技蓝 (默认) ▾ ] [👁 预览效果] |
| | |
| | 6. 去 AI 味强度预设: |
| | ( ) 轻度 (去套话) (•) 中度 (短句化) ( ) 深度口语|
+--------------------------------------------------------------------------------------------------+
| [ 取消 ] [ 下一步:智能生成大纲 ➔ ] |
+--------------------------------------------------------------------------------------------------+
2.2 核心逻辑
多源资料解析:
直接粘贴:支持纯文本或 Markdown。
文件上传:支持
.docx,.pdf,.txt,.md自动提取纯文本。URL 抓取:输入微信公众号文章或网页链接,自动解析正文结构。
参数绑定:选定的文章类型和人设会自动拼接为底层
Structure Agent的上下文约束。
界面 3:创建阶段 Step 2 - AI 交互大纲编排 (Outline Architect)
在正式生成完整富文本前,让用户以“低认知负荷”审阅并调整文章结构,避免一次性生成不对推倒重来的巨大成本。
3.1 界面线框与布局
+--------------------------------------------------------------------------------------------------+
| < 上一步 新建文章向导:(1) 资料导入与属性配置 ──► (2) 确认大纲 ──► (3) 排版工作台 |
+--------------------------------------------------------------------------------------------------+
| AI 建议标题方案 (点击选择): |
| (•) 直通金砖及全球市场!新材料产业国际合作通道正式开启 |
| ( ) 链接全球产业资源:新材料企业如何把握出海新机遇? |
| ( ) [✎ 手动输入自定义标题...] [ ↻ 重新生成标题 ] |
+--------------------------------------------------------------------------------------------------+
| 文章分节架构规划 (可拖拽调整顺序、增删修改): [ + 添加自定义分节 ] |
| |
| [≡] 01. [文章首屏/HEADER_LEAD] [ ↻ AI 扩写 ] [🗑] |
| 小节标题: 直通金砖及全球市场! |
| 核心要点: 提炼新材料合作背景与核心价值主张,配书本徽章主视觉。 |
| |
| [≡] 02. [开篇导语/INTRO_CONTEXT] [ ↻ AI 扩写 ] [🗑] |
| 小节标题: 国际通道开启与活动聚焦 |
| 核心要点: 面向金砖国家及全球伙伴,搭建展示与精准对接通道。 |
| |
| [≡] 03. [重点亮点/CORE_ARGUMENT] [ ↻ AI 扩写 ] [🗑] |
| 小节标题: 为什么值得新材料企业重点关注? |
| 核心要点: 涵盖技术路演、核心产品发布,拟遴选 8-10 家优质企业。 [已自动标记配图需求 🖼] |
| |
| [≡] 04. [事实信息/DATA_EVIDENCE] [ ↻ AI 扩写 ] [🗑] |
| 小节标题: 活动时间与参与形式 |
| 核心要点: 线上路演 + 线下对接结合,明确申报截止时间。 |
| |
| [≡] 05. [结尾行动/ACTION_CTA] [ ↻ AI 扩写 ] [🗑] |
| 小节标题: 报名咨询与通道 |
| 核心要点: 提供联系方式、二维码占位、引导关注公众号。 |
+--------------------------------------------------------------------------------------------------+
| 预估生成规格: 5 个分节 | 约 1,200 字 | 建议配图 2 张 [ 上一步 ] [ 生成全文并进入排版工作台 ➔ ]|
+--------------------------------------------------------------------------------------------------+
3.2 核心交互设计
标题矩阵选择:AI 同时提供 3~5 个不同风格的爆款标题(设问型、干货型、新闻型),支持直接勾选或二次编辑。
分节积木调整:
拖拽排序:鼠标按住
[≡]图标即可调整逻辑顺序。语义类型切换:点击标签可在 7 种语义类型间自由切换(如将
CORE_ARGUMENT改为DATA_EVIDENCE)。单节微调:点击
[↻ AI 扩写]仅重新生成该节大纲,不破坏其他部分。确认生成:点击“生成全文并进入排版工作台”,系统根据大纲树流式生成各节点正文,并自动初始化 Document AST,无缝进入核心排版工作台。
整体前端路由与数据模型设计 (Routing & State Spec)
1. 前端路由结构 (App Router)
app/
├── (dashboard)/
│ ├── page.tsx // 界面 1: 项目首页 (文章列表与管理)
│ └── settings/
│ └── ai/page.tsx // 全局设置: AI Provider & API Token 配置
└── editor/
├── new/
│ ├── step-1-import/page.tsx // 界面 2: 资料导入与属性配置
│ └── step-2-outline/page.tsx // 界面 3: AI 大纲交互编排
└── [articleId]/
└── page.tsx // 界面 4: 结构化排版工作台 (原核心界面)
2. 新建向导状态流转模型 (src/types/wizard.ts)
export interface ArticleDraftWizardState {
// Step 1: 导入与元信息
sourceMaterial: string;
sourceType: 'raw_text' | 'file_upload' | 'url';
targetAccountId?: string;
articleCategory: 'industry_analysis' | 'event_promo' | 'tutorial' | 'news';
toneProfile: 'tech_minimal' | 'storytelling' | 'official_gov' | 'casual_sharp';
targetWordCountRange: 'short' | 'medium' | 'long'; // short: <800, medium: 1000-2000, long: >2000
selectedThemeId: string;
deAILevel: 'light' | 'medium' | 'deep';
// Step 2: 大纲阶段
suggestedTitles: string[];
selectedTitle: string;
outlineSections: Array<{
tempId: string;
semanticType: SectionNode['semanticType'];
title: string;
keyPoints: string;
suggestVisual: boolean;
}>;
}