使用AI自动开发浏览器插件前述不知不觉接触AI也很久了，但说到使用也就从年后开始，那段时间听一个后端同事说使用curs

前述

不知不觉接触AI也很久了，但说到使用也就从年后开始，那段时间听一个后端同事说使用cursor写了个项目，感觉很不错。同组前端同事也开始使用，后面他们都开始说牛的一批，于是乎也加入了AI大军！

那段时间生活层面研究了各个平台提供的app，但是使用下来只能说一般，也就提供点小建议，错误太多，幻觉也太多。

同时工作中也开始研究ai编程，通义灵码、CodeGeex、Cursor、Github Copilot、Augment code、Trace、Trace cn、Code Buddy、Qoder

前面最好用的还是cursor，他的tab很智能，项目中tailwindcss推荐很准确，代码补全也很棒，但是生成项目感觉算是一般，后面官方封禁严重也就不咋研究了。

最近也在一直思考，用ai写一些项目看看效果怎么样，有没有进化的很厉害，于是想来想去，让ai写个浏览器插件玩一下

准备工作

豆包 | 元宝 | 其他
vscode | cursor | trace
我这里使用豆包和augment code

1、让豆包写一份需求文档

文案：

写个浏览器插件，点开插件，弹出面板，面板中有刷新按钮和复制按钮，点击刷新按钮随机出现一句话（正能量语句），要求使用vue3及vite最新脚手架，UI使用vant，帮我生成一份需求文档，以 Markdown格式提提供下载

具体信息生成如下：

# 正能量句子浏览器插件需求文档
## 文档信息
| 项目名称 | 正能量句子浏览器插件 | 文档版本 | V1.0 |
|----------|----------------------|----------|------|
| 编写日期 | 2025-11-04 | 编写人 | 豆包编程助手 |
| 适用范围 | 前端开发人员、测试人员 | 核心目标 | 开发一款轻量型浏览器插件，支持随机展示正能量句子及复制功能 |

## 1. 项目概述
### 1.1 项目背景
现代用户日常使用浏览器时，常面临工作压力、学习焦虑等场景，需要即时的正能量激励。本插件旨在提供轻量、便捷的正能量句子展示功能，无需跳转页面，点击插件即可获取激励内容。

### 1.2 核心价值
- 轻量无冗余：仅保留核心功能，不占用过多浏览器资源
- 便捷高效：一键刷新获取新句子，一键复制使用
- 视觉舒适：基于Vant UI打造简洁美观的交互界面
- 技术先进：采用Vue3 + Vite最新技术栈，保证开发效率和运行性能

### 1.3 目标用户
所有使用现代浏览器（Chrome、Edge、Firefox等）的用户，尤其适合职场人士、学生、需要日常激励的人群。

## 2. 功能需求
### 2.1 核心功能清单
| 功能模块 | 功能点 | 优先级 |
|----------|--------|--------|
| 插件启动 | 点击浏览器插件图标，弹出功能面板 | 高 |
| 句子展示 | 面板默认加载并显示一条随机正能量句子 | 高 |
| 刷新功能 | 点击"刷新"按钮，随机切换新的正能量句子 | 高 |
| 复制功能 | 点击"复制"按钮，复制当前显示的句子到剪贴板 | 高 |
| 交互反馈 | 复制成功/失败、刷新加载状态给予视觉提示 | 中 |

### 2.2 详细功能描述
#### 2.2.1 插件启动功能
- 触发条件：用户点击浏览器工具栏中的插件图标
- 功能表现：弹出固定尺寸的功能面板，面板加载完成后立即显示一条随机正能量句子
- 异常处理：若插件加载失败，面板显示"加载失败，请重试"提示，支持手动刷新

#### 2.2.2 句子展示功能
- 展示规则：句子居中显示，自动换行，字体清晰易读
- 内容要求：句子库包含至少50条正能量语句，涵盖激励、治愈、成长等主题
- 初始状态：插件首次启动或面板刷新后，随机从句子库中抽取一条展示

#### 2.2.3 刷新功能
- 触发方式：用户点击面板中的"刷新"按钮
- 功能表现：
  1. 点击瞬间显示加载状态（如按钮图标旋转或加载动画）
  2. 加载完成后替换为新的随机句子
  3. 避免连续两次出现相同句子
- 响应时间：加载新句子的响应时间≤300ms

#### 2.2.4 复制功能
- 触发方式：用户点击面板中的"复制"按钮
- 功能表现：
  1. 点击后复制当前显示的完整句子到系统剪贴板
  2. 复制成功：显示"复制成功！"提示，持续1.5秒后自动消失
  3. 复制失败：显示"复制失败，请重试"提示，持续2秒后自动消失
- 兼容性：支持Windows、macOS、Linux系统的剪贴板复制

#### 2.2.5 交互反馈功能
- 按钮状态：
  - 未操作时：按钮显示默认样式
  - 点击中：按钮显示按压状态
  - 加载中：刷新按钮显示加载动画
- 提示样式：提示信息居中显示在面板底部，不遮挡句子和按钮

## 3. 技术栈要求
### 3.1 核心技术栈
| 技术类别 | 技术选型 | 版本要求 |
|----------|----------|----------|
| 前端框架 | Vue.js | 3.x（最新稳定版） |
| 构建工具 | Vite | 最新稳定版 |
| UI组件库 | Vant | 4.x（最新稳定版） |
| 插件规范 | 浏览器扩展Manifest | V3（主流浏览器支持版本） |
| 语言 | JavaScript/TypeScript | ES6+ / TypeScript 5.x+ |

### 3.2 技术实现要求
- Vue3：使用Composition API进行开发，遵循Vue最佳实践
- Vite：配置合理的打包规则，确保插件体积≤500KB
- Vant：仅引入所需组件（Button、Toast等），避免不必要的体积冗余
- Manifest V3：
  - 配置正确的插件图标、名称、描述
  - 声明必要的权限（仅需剪贴板权限）
  - 弹出页面使用Vue3构建的HTML文件

## 4. UI/交互要求
### 4.1 整体风格
- 风格定位：简洁、清新、治愈，符合正能量主题
- 配色方案：
  - 主色调：浅蓝色（#409EFF，Vant primary色）
  - 背景色：白色（#FFFFFF）
  - 文字色：深灰色（#333333）
  - 提示色：成功色（#67C23A）、失败色（#F56C6C）
- 字体：使用系统默认无衬线字体，确保跨平台一致性

### 4.2 面板设计
- 尺寸：固定宽度320px，高度220px（适配主流浏览器插件弹窗尺寸）
- 布局：
  - 上半部分：句子展示区（占面板70%高度）
  - 下半部分：功能按钮区（占面板30%高度）
- 样式：面板带轻微圆角（8px）和阴影（rgba(0,0,0,0.1)），无边框

### 4.3 按钮设计
- 样式：使用Vant默认按钮样式，类型为"primary"（刷新按钮）和"default"（复制按钮）
- 尺寸：中等尺寸（Vant button size="middle"）
- 排列：两个按钮横向排列，间距20px，居中显示在按钮区
- 图标：
  - 刷新按钮：搭配Vant "refresh"图标
  - 复制按钮：搭配Vant "copy"图标
- 文字：按钮图标右侧显示文字（"刷新"、"复制"）

### 4.4 句子展示设计
- 字体大小：16px
- 行高：1.6
- 内边距：上下左右各16px
- 溢出处理：句子过长时自动换行，不出现横向滚动条

### 4.5 提示反馈设计
- 提示框样式：使用Vant Toast组件，类型对应成功/失败状态
- 位置：显示在面板底部中间位置，距离面板底部10px
- 透明度：90%，避免遮挡下方内容

## 5. 开发规范
### 5.1 代码规范
- 遵循ESLint + Prettier代码规范，确保代码风格一致
- Vue组件命名：使用PascalCase命名法（如SentencePanel.vue）
- 工具函数：抽取公共功能（如句子库、复制工具）到utils目录
- 注释要求：关键逻辑、组件功能、接口参数需添加中文注释

### 5.2 目录结构
```
plugin-positive-sentence/
├── public/                  # 静态资源（插件图标等）
├── src/
│   ├── components/          # 公共组件
│   │   └── SentencePanel.vue # 主面板组件
│   ├── views/               # 页面组件（弹窗页面）
│   │   └── Popup.vue        # 弹窗入口页面
│   ├── assets/              # 资源文件（如样式补充）
│   ├── utils/               # 工具函数
│   │   ├── sentenceBank.js  # 正能量句子库
│   │   └── copyUtil.js      # 复制工具函数
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── .eslintrc.js             # ESLint配置
├── .prettierrc              # Prettier配置
├── vite.config.js           # Vite配置
├── package.json             # 依赖配置
└── manifest.json            # 插件配置文件（Manifest V3）
```

### 5.3 兼容性要求
- 浏览器支持：Chrome（≥88）、Edge（≥88）、Firefox（≥91）、Opera（≥75）
- 系统支持：Windows 10+、macOS 10.15+、Linux（主流发行版）
- 响应式：适配不同屏幕分辨率，面板尺寸保持固定，内容自适应

### 5.4 数据要求
- 句子库：
  - 数量：至少50条正能量句子，无重复内容
  - 格式：按数组形式存储，每条句子为字符串（长度10-30字）
  - 可扩展性：句子库单独存储，支持后续手动添加或接口扩展

## 6. 交付物清单
| 交付物名称 | 说明 | 格式/类型 |
|------------|------|-----------|
| 源代码包 | 完整的项目源代码，包含所有配置文件和依赖描述 | 压缩包（.zip） |
| 插件安装包 | 打包后的浏览器插件文件，支持直接安装 | CRX格式（Chrome）、ZIP格式（通用） |
| 技术文档 | 开发说明、构建步骤、目录结构说明 | Markdown文件（.md） |
| 使用手册 | 插件安装教程、功能使用说明 | Markdown文件（.md） |
| 句子库文件 | 单独的正能量句子库文件（可扩展） | JavaScript文件（.js） |

## 7. 附录
### 7.1 正能量句子示例（部分）
1. 每一次努力，都是在为未来铺路
2. 保持热爱，奔赴下一场山海
3. 今日的沉淀，是明日的光芒
4. 慢慢来，谁还没个努力的过程
5. 生活明朗，万物可爱，未来可期
6. 你只管向前，时间自有答案
7. 平凡的日子里，也要闪闪发光
8. 困难是暂时的，成长是永恒的
9. 做自己的太阳，无需借谁的光
10. 每一次坚持，都离梦想更近一步

### 7.2 Manifest V3配置示例
```json
{
  "manifest_version": 3,
  "name": "正能量句子",
  "version": "1.0.0",
  "description": "一键获取正能量句子，治愈你的每一天",
  "action": {
    "default_popup": "dist/index.html",
    "default_icon": {
      "16": "public/icon16.png",
      "48": "public/icon48.png",
      "128": "public/icon128.png"
    }
  },
  "permissions": ["clipboardWrite"],
  "icons": {
    "16": "public/icon16.png",
    "48": "public/icon48.png",
    "128": "public/icon128.png"
  }
}
```

---

**下载说明**：将本文档复制到文本编辑器（如VS Code、记事本），保存为 `正能量句子浏览器插件需求文档.md` 即可完成下载。