为将产品串联成一个从“项目管理 -> 材料输入/配置 -> AI 大纲编排 -> 结构化排版工作台”的完整闭环,以下是新增界面的详细设计方案(包含产品交互流、线

发布于 2026/08/27 15:57 · 更新于 2026/08/27 15:57

为将产品串联成一个从“项目管理 -> 材料输入/配置 -> 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 核心功能与交互


界面 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 核心逻辑


界面 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 核心交互设计


整体前端路由与数据模型设计 (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;
  }>;
}