AI原生前端开发（029）：AI辅助的文档自动生成

前言

写文档是重要但容易被忽略的工作！AI可以帮我们自动生成高质量文档！

1. 组件文档生成

1.1 为组件生成JSDoc/TSDoc

javascript 复制代码

/* 提示词：
"为这个组件生成完整的TSDoc注释：
import { useState } from 'react';

interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  disabled?: boolean;
}

export default function Button({ 
  children, 
  variant = 'primary', 
  size = 'md', 
  onClick, 
  disabled = false 
}: ButtonProps) {
  const styles = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
    danger: 'bg-red-600 hover:bg-red-700 text-white'
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${styles[variant]} ${sizes[size]} rounded font-medium disabled:opacity-50`}
    >
      {children}
    </button>
  );
}"
*/

// AI生成注释后的代码
import { useState } from 'react';

/**
 * Button组件属性接口
 * @interface ButtonProps
 * @property {React.ReactNode} children - 按钮内容，必填
 * @property {'primary' | 'secondary' | 'danger'} [variant='primary'] - 按钮样式变体
 * @property {'sm' | 'md' | 'lg'} [size='md'] - 按钮尺寸
 * @property {() => void} [onClick] - 点击事件回调
 * @property {boolean} [disabled=false] - 是否禁用
 */
interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  disabled?: boolean;
}

/**
 * 通用按钮组件
 * 
 * @description 支持多种样式和尺寸的可复用按钮组件
 * @example
 * ```tsx
 * // 主要按钮
 * <Button onClick={() => console.log('点击')}>
 *   主要按钮
 * </Button>
 * 
 * // 危险按钮（大尺寸）
 * <Button variant="danger" size="lg">
 *   删除
 * </Button>
 * ```
 * 
 * @param {ButtonProps} props - 组件属性
 * @returns {JSX.Element} 按钮组件
 */
export default function Button({ 
  children, 
  variant = 'primary', 
  size = 'md', 
  onClick, 
  disabled = false 
}: ButtonProps) {
  const styles = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
    danger: 'bg-red-600 hover:bg-red-700 text-white'
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${styles[variant]} ${sizes[size]} rounded font-medium disabled:opacity-50`}
    >
      {children}
    </button>
  );
}

1.2 生成README.md

javascript 复制代码

/* 提示词：
"为这个项目生成一个完整的README.md：
项目名：智能笔记助手
技术栈：React 19 + TypeScript + Vite + Tailwind CSS
功能：笔记CRUD、AI写作助手、本地存储"
*/

// AI生成的README
# 智能笔记助手

> AI驱动的笔记应用，让写作更高效

## ✨ 功能特性

- 📝 **笔记管理**：创建、编辑、删除笔记
- 🤖 **AI助手**：续写、润色、总结笔记内容
- 🏷️ **标签系统**：笔记分类管理
- 💾 **本地存储**：数据保存在浏览器本地
- 📱 **响应式设计**：适配各种设备

## 🛠️ 技术栈

- **前端框架**：React 19
- **类型系统**：TypeScript
- **构建工具**：Vite 5
- **样式方案**：Tailwind CSS
- **AI能力**：Chrome AI API

## 🚀 快速开始

### 安装依赖

```bash
npm install

启动开发服务器

bash 复制代码

npm run dev

构建生产版本

bash 复制代码

npm run build

📖 使用说明

创建笔记

点击"+新建笔记"按钮开始写作

AI写作助手

在编辑器中选择需要的AI功能：

✍️ 续写：继续写笔记
✨ 润色：优化表达方式
📝 总结：提取笔记要点

📁 项目结构

复制代码

src/
├── components/     # 组件
├── pages/         # 页面
├── hooks/         # 自定义Hook
├── stores/        # 状态管理
└── utils/         # 工具函数

📄 License

MIT

复制代码

---

## 2. API文档生成

```javascript
/* 提示词：
"为这些API函数生成文档：
export async function fetchUsers() {
  const res = await fetch('/api/users');
  return res.json();
}

export async function createUser(data: { name: string; email: string }) {
  const res = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  });
  return res.json();
}"
*/

/**
 * 用户API模块
 * @module api/users
 */

/**
 * 获取用户列表
 * 
 * @description 从服务器获取所有用户数据
 * @returns {Promise<User[]>} 用户列表Promise
 * @example
 * ```typescript
 * const users = await fetchUsers();
 * console.log(users);
 * ```
 */
export async function fetchUsers() {
  const res = await fetch('/api/users');
  return res.json();
}

/**
 * 创建新用户
 * 
 * @description 创建一个新用户
 * @param {Object} data - 用户数据
 * @param {string} data.name - 用户名
 * @param {string} data.email - 用户邮箱
 * @returns {Promise<User>} 创建的用户Promise
 * @example
 * ```typescript
 * const newUser = await createUser({
 *   name: '张三',
 *   email: 'zhangsan@example.com'
 * });
 * ```
 */
export async function createUser(data: { name: string; email: string }) {
  const res = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  });
  return res.json();
}

3. 今日小结

这一篇我们学习了：

组件文档生成
README.md自动生成
API文档生成

4. 下篇预告

下一篇，我们学习 AI辅助的代码审查流程！