MagiQ - AI 辅助创作平台

本项目是一个基于 Vue 3 + TypeScript 开发的 AI 辅助创作平台（MagiQ），核心实现「帮我写作」功能模块，并支持多场景功能切换（新对话、AI 搜索、AI 编程、图像生成）。平台通过模板化编辑降低创作门槛，提供直观的交互体验，适配多设备显示。

核心特点

• 模块化架构设计：拆分导航、编辑器、模板列表等独立组件，便于维护扩展
• 丰富写作模板库：覆盖工作、商业、学习、社媒等 6 大类别 18 种场景
• 智能占位符编辑：支持 Tab 键导航切换占位符，实时同步编辑内容
• 响应式布局：适配电脑、平板等设备，优化不同屏幕尺寸体验
• 完整功能链路：模板选择 → 内容编辑 → 一键提交，流程闭环

目录结构说明

src/
├── components/            # 独立组件目录
│   ├── Sidebar.vue        # 左侧导航栏（功能切换、最近对话）
│   ├── Editor.vue         # 核心编辑器（内容编辑、功能按钮、占位符交互）
│   ├── TemplateList.vue   # 模板列表（分类筛选、模板展示）
│   └── TemplateCard.vue   # 单个模板卡片（视觉展示、点击交互）
├── data/                  # 数据配置目录
│   └── templateData.js    # 写作模板数据源（分离存储，便于维护）
├── router/                # 路由配置目录
│   └── index.ts           # 路由规则（默认页、功能页、404 重定向）
├── services/              # 服务接口目录（预留，用于后续 API 对接）
├── App.vue                # 应用入口组件（路由视图容器）
├── main.ts                # 应用入口文件（初始化 Vue、路由、全局样式）
└── WritePage.vue          # 核心功能页（整合导航、编辑器、模板列表）

核心功能

1. 多场景功能切换

通过左侧导航栏实现 5 大功能模块切换：

• 帮我写作（核心功能，默认展示）
• 新对话（基础聊天功能）
• AI 搜索（智能信息检索）
• AI 编程（代码生成与优化）
• 图像生成（AI 图像创作）

2. 模板化写作

• 分类筛选：支持「全部、工作、商业营销、学习 / 教育、社媒文章、文学艺术、回复和改写」7 类模板筛选
• 模板加载：点击模板卡片自动将内容填充到编辑器，生成可编辑的占位符（如 [主题]、[字数]）
• 占位符交互：
  • 点击占位符自动全选内容，支持直接编辑
  • Tab 键正向切换、Shift+Tab 反向切换占位符
  • 占位符激活时高亮显示，区分普通文本

3. 编辑器功能

• 内容编辑：支持普通文本修改、占位符个性化编辑
• 功能辅助：提供「深度思考、搜索资料、文档编辑器」3 类辅助功能入口
• 语音输入：预留麦克风图标，支持后续扩展语音转文字功能
• 一键提交：编辑完成后点击发送按钮提交，按钮状态随内容是否为空动态变化
• 提示引导：显示「点击高亮变量编辑，按 Tab 键跳转到下一个变量」引导文案

技术依赖

依赖库 / 框架	版本要求	用途说明
Vue	3.x	前端框架核心
TypeScript	4.x+	类型安全，提升代码可维护性
Vue Router	4.x	前端路由管理
Font Awesome	6.x	图标库（导航、按钮、功能标识）
Vite	3.x+	构建工具（开发热重载、生产打包）
pnpm/npm	8.x+	包管理工具

项目设置与启动

1. 环境准备

确保本地已安装：

• Node.js（16.x+，推荐 18.x）
• pnpm（8.x+）或 npm（8.x+）

2. 安装依赖

# 方式 1：使用 pnpm 安装（推荐，速度更快）
pnpm install

# 方式 2：使用 npm 安装
npm install

# 安装图标库依赖（若未自动安装）
pnpm install @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

3. 开发环境启动

# 启动开发服务器（默认端口 5173，支持热重载）
pnpm run dev
# 或
npm run dev

启动后访问 http://localhost:5173 即可进入应用，默认展示「帮我写作」功能页。

4. 生产环境构建

# 构建生产版本（输出到 dist 目录）
pnpm run build
# 或
npm run build

扩展与维护建议

1. 模板扩展

如需新增模板，直接在 src/data/templateData.js 中添加模板对象，例如：

{
  title: '产品介绍',         // 模板名称
  desc: '撰写产品核心卖点介绍', // 模板描述
  color: '#e0f2fe',         // 卡片图标背景色
  icon: 'el-icon-box',      // 卡片图标（Element UI 图标）
  content: '请为[产品名称]撰写介绍，突出[核心卖点]，面向[目标用户]，语言风格[风格要求]。', // 模板内容（含占位符）
  category: 'business'      // 所属分类
}

2. 功能扩展

• API 对接：在 services 目录下创建接口服务，如 writingService.ts，实现「提交创作需求」接口调用
• 语音输入：集成百度语音 / 讯飞语音 SDK，在 Editor.vue 的 voice-btn 绑定语音识别逻辑
• 历史记录：在 Sidebar.vue 的「最近对话」区域添加接口调用，加载历史创作记录

3. 样式定制

• 全局样式：修改 App.vue 中的全局样式（如字体、颜色主题）
• 组件样式：各组件的 scoped 样式独立维护，避免样式污染
• 响应式适配：调整 WritePage.vue 中的媒体查询，优化移动端体验