# 从0开发一套geo优化软件：前端工作台设计

用户看到的不应该是一堆技术概念，而应该是一套工作台：拓词、知识库、文章创作、自动运营、账号管理、软文投放。用户进入软件后，应该能很快理解每个模块是干什么的，而不是先研究系统架构。

所以 GEO 优化软件的前端不是普通后台管理系统。它需要让运营人员围绕「准备素材、生成文章、发布投放、复盘记录」连续工作。本文重点拆前端工作台怎么设计，既要承接 AI 生成能力，也要让真实运营流程跑得顺。

## 1. 模块入口

先看入口设计。主要页面集中在 `frontend/src/views/app`：

- `content-settings.vue`：创作设置入口。
- `keywords.vue`：关键词分组、AI 拓词、批量管理。
- `knowledge.vue`：知识库管理。
- `article-styles.vue`：文章风格。
- `conversion-targets.vue`：转化目标。
- `article-creation.vue`：文章列表和 AI 生成向导。
- `distribution.vue`：分发相关入口。
- `site-publish.vue`：站点发布配置。
- `accounts.vue`：社媒账号管理。
- `auto-operations.vue`：自动运营任务。
- `soft-articles.vue`：软文投放。

从 0 开发时，不要把这些都做成一个页面。运营系统最怕页面巨大、状态混乱、每次改动都影响全链路。按业务对象拆页面，用户使用时也更容易理解每个模块的作用。

## 2. 创作设置页

模块拆清楚之后，用户进入系统的第一步通常不是马上生成文章，而是先做创作准备。`content-settings.vue` 用 tabs 管理关键词、知识库、文章风格、转化目标。这个页面的作用是让用户先把「生成文章需要的上下文」准备好。对这类工具来说，前置配置越清楚，后续 AI 生成越稳定。

建议保留这个结构：

- 关键词拓词：确定内容覆盖方向。
- 知识库：沉淀事实和素材。
- 文章风格：控制表达方式。
- 转化目标：控制品牌和商业目标。

这四类配置相互独立，但在文章生成时组合使用。

页面结构可以保持非常简单，核心是用 tab 把上下文配置收拢起来：

```vue
<el-tabs v-model="activeTab" @tab-click="syncRoute">
  <el-tab-pane label="关键词拓词" name="keywords">
    <keep-alive><Keywords v-if="activeTab === 'keywords'" /></keep-alive>
  </el-tab-pane>
  <el-tab-pane label="知识库" name="knowledge">
    <keep-alive><Knowledge v-if="activeTab === 'knowledge'" /></keep-alive>
  </el-tab-pane>
  <el-tab-pane label="文章风格" name="article-styles">
    <keep-alive><ArticleStyles v-if="activeTab === 'article-styles'" /></keep-alive>
  </el-tab-pane>
  <el-tab-pane label="转化目标" name="conversion-targets">
    <keep-alive><ConversionTargets v-if="activeTab === 'conversion-targets'" /></keep-alive>
  </el-tab-pane>
</el-tabs>
```

这里的重点不是 UI 多复杂，而是让用户形成固定路径：先准备上下文，再生成内容。

## 3. 关键词页面

创作准备里最先被使用的通常是关键词。`keywords.vue` 采用左侧分组、右侧关键词列表的结构。关键交互包括：

- 创建分组。
- 切换分组。
- AI 挖掘拓词。
- 手动添加。
- 批量删除。
- 移动分组。
- 刷新和全选。

AI 拓词弹窗里展示剩余额度，并提示「提交后会先进入排队，不会卡住页面」。这是很实用的产品细节。用户对 AI 生成等待时间敏感，必须明确告诉他任务状态。

关键词拓词的前端调用可以这样封装。提交生成任务后，前端不要一直阻塞弹窗，而是轮询任务状态：

```js
async aiGenerate() {
  this.isGenerating = true
  const task = await generateKeywords({
    core_keyword: this.aiForm.core_keyword,
    explanation: this.aiForm.explanation,
    count: this.aiForm.count
  })

  this.aiGenerationStatus = '任务已提交，正在生成...'
  this.keywordTaskTimer = setInterval(async () => {
    const detail = await getAiGenerationTask(task.id)
    if (detail.status === 'completed') {
      this.generatedKeywords = detail.result_payload.keywords || []
      this.selectedGeneratedKeywords = [...this.generatedKeywords]
      clearInterval(this.keywordTaskTimer)
      this.isGenerating = false
    }
    if (detail.status === 'failed') {
      this.aiGenerationStatus = detail.error_message || '生成失败'
      clearInterval(this.keywordTaskTimer)
      this.isGenerating = false
    }
  }, 2000)
}
```

## 4. 文章创建向导

关键词和知识库准备好之后，文章创建页才是主战场。`article-creation.vue` 里不是一个简单表单，而是一个多步向导：

1. 选择关键词分组和关键词。
2. 选择知识库、标题风格和额外要求。
3. 生成并选择选题。
4. 选择内容风格、标题改写、转化目标。

这个顺序符合运营思考过程。先确定写什么，再确定参考什么，再确定标题，最后确定正文表达和转化目标。

文章列表还支持：

- 状态筛选。
- 批量删除。
- 失败重试。
- 编辑。
- 发布。
- 软文投放。
- Word 导出。
- 已发布记录展示。

这些功能让文章成为一个可管理资产，而不是生成后就丢失的一段文本。文章库设计也正是为了让内容可以继续编辑、发布、投放和复盘。

文章生成向导的关键在于表单数据不要一次性塞满，而是按步骤逐步补齐：

```js
const knowledgeForm = {
  keyword_ids: [],
  knowledge_base_ids: [],
  title_style_id: null,
  style_id: null,
  rewrite_title: false,
  conversion_target_id: null,
  requirements: ''
}

async function submitArticle(topic) {
  return generateArticle({
    topic,
    keyword_ids: knowledgeForm.keyword_ids,
    knowledge_base_ids: knowledgeForm.knowledge_base_ids,
    style_id: knowledgeForm.style_id,
    rewrite_title: knowledgeForm.rewrite_title,
    title_style_id: knowledgeForm.title_style_id,
    conversion_target_id: knowledgeForm.conversion_target_id,
    requirements: knowledgeForm.requirements
  })
}
```

## 5. 额度展示

当 AI 生成变成日常操作后，额度也必须进入前端体验。文章页和关键词页都展示 AI 额度。前端通过 `getAiQuotas` 获取额度信息。建议额度展示做到这几点：

- 显示剩余次数，而不是只显示已用。
- 区分关键词拓展、文章生成、知识增强生成、标题改写等用量类型。
- 在用户点击生成前展示。
- 失败、取消、重试时给出明确状态。

额度不只是商业化组件，也能减少用户误操作。

## 6. API 调用层

`frontend/src/api/business.js` 把业务接口封装成函数。页面不直接拼 URL，这一点值得保留。

建议规则：

- 页面只调用语义化函数，例如 `generateArticle`、`getKeywords`。
- token、app code、client mode 放在 axios 拦截器里统一处理。
- 文件上传和文件下载单独处理，因为它们不能完全依赖 JSON axios。
- 后端错误在拦截器转成 `Error`，页面只负责展示错误消息。

这样可以避免接口路径、鉴权头、响应结构散落在各个 Vue 文件里。

## 7. 本地 Electron 能力的使用

前端需要调用 Electron 时，通过 IPC route 调用。例如 AI 配置保存、自动运营重载、立即执行任务等。

从 0 开发时要注意：前端页面不应该直接依赖 Node API。应该封装成：

- 前端 API route。
- Electron controller。
- Electron service。

这样浏览器 Web 模式也能保留部分功能，不会因为 `window.require` 不存在导致整个页面崩掉。当前端工作台把流程承接住以后，下一步就可以考虑让系统自己按计划持续运行，也就是自动运营。

业务 API 层也要保持语义化，页面只关心“做什么”，不关心 URL 怎么拼：

```js
export const getKeywords = (params) => {
  const queryString = params ? '?' + new URLSearchParams(params).toString() : ''
  return backendApi.get(`/keywords${queryString}`).then(res => res.data)
}

export const generateArticle = (data) => {
  return backendApi.post('/articles/generate', data).then(res => res.data)
}

export const cancelAiGenerationTask = (id) => {
  return backendApi.post(`/ai-generation-tasks/${id}/cancel`).then(res => res.data)
}
```

用户看到的不应该是一堆技术概念，而应该是一套工作台：拓词、知识库、文章创作、自动运营、账号管理、软文投放。用户进入软件后，应该能很快理解每个模块是干什么的，而不是先研究系统架构。

从0开发一套geo优化软件：前端工作台设计

编程语言

GEO优化软件前端工作台设计聚焦运营流程，包含拓词、知识库、文章创作、自动运营等模块。采用分步向导式交互，先配置关键词和知识库，再生成内容，最后发布投放。页面按业务对象拆分，保持清晰结构，AI生成任务采用异步轮询机制，优化用户体验。工作台设计强调实用性和流程顺畅，让运营人员能高效完成内容生产全链路。

2026年中大促 | AI 领航 智绘未来

lexiang

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从0开发一套geo优化软件：前端工作台设计-腾讯云开发者社区-腾讯云

从0开发一套geo优化软件：前端工作台设计

从0开发一套geo优化软件：前端工作台设计

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐