1. 需求分析（我）
   ↓
2. 技术方案（我 + AI 讨论）
   ↓
3. 代码实现（AI 写，我审查）
   ↓
4. 测试（AI 写测试，我验证）
   ↓
5. 部署（我操作）

实现用户认证模块，要求：
1. 使用 Supabase Auth
2. 支持邮箱和 Google 登录
3. 登录后跳转到 dashboard
4. 未登录访问受保护页面时重定向到登录页

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// src/middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });
  
  const { data: { session } } = await supabase.auth.getSession();
  
  // 受保护路由
  if (req.nextUrl.pathname.startsWith('/dashboard')) {
    if (!session) {
      return NextResponse.redirect(new URL('/login', req.url));
    }
  }
  
  // 已登录用户访问登录页，重定向到 dashboard
  if (req.nextUrl.pathname === '/login' && session) {
    return NextResponse.redirect(new URL('/dashboard', req.url));
  }
  
  return res;
}

export const config = {
  matcher: ['/dashboard/:path*', '/login']
};

// 添加了错误边界和 loading 状态
export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user ?? null);
        setLoading(false);
      }
    );

    return () => subscription.unsubscribe();
  }, []);

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

实现 AI 文章生成功能：
1. 用户输入主题和关键词
2. 调用 OpenAI API 生成文章
3. 支持流式输出
4. 生成完成后保存到数据库

// src/app/api/generate/route.ts
import { NextRequest } from 'next/server';
import OpenAI from 'openai';
import { supabase } from '@/lib/supabase';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: NextRequest) {
  const { topic, keywords, userId } = await req.json();

  // 创建流式响应
  const stream = new ReadableStream({
    async start(controller) {
      const encoder = new TextEncoder();
      
      try {
        const completion = await openai.chat.completions.create({
          model: 'gpt-4',
          messages: [
            {
              role: 'system',
              content: '你是一个专业的文章写作助手。'
            },
            {
              role: 'user',
              content: `请根据以下信息写一篇文章：
                主题：${topic}
                关键词：${keywords.join(', ')}
              `
            }
          ],
          stream: true,
        });

        let fullContent = '';

        for await (const chunk of completion) {
          const content = chunk.choices[0]?.delta?.content || '';
          fullContent += content;
          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ content })}\n\n`));
        }

        // 保存到数据库
        const { data, error } = await supabase
          .from('articles')
          .insert({
            user_id: userId,
            topic,
            keywords,
            content: fullContent,
            status: 'draft'
          })
          .select()
          .single();

        if (error) throw error;

        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ 
          done: true, 
          articleId: data.id 
        })}\n\n`));
        
      } catch (error) {
        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ 
          error: '生成失败' 
        })}\n\n`));
      }

      controller.close();
    }
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

// src/components/ArticleGenerator.tsx
'use client';

import { useState } from 'react';

export function ArticleGenerator() {
  const [topic, setTopic] = useState('');
  const [keywords, setKeywords] = useState('');
  const [content, setContent] = useState('');
  const [generating, setGenerating] = useState(false);

  const handleGenerate = async () => {
    setGenerating(true);
    setContent('');

    const response = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        topic,
        keywords: keywords.split(',').map(k => k.trim()),
        userId: 'current-user-id'
      }),
    });

    const reader = response.body?.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader!.read();
      if (done) break;

      const text = decoder.decode(value);
      const lines = text.split('\n').filter(line => line.startsWith('data: '));

      for (const line of lines) {
        const data = JSON.parse(line.slice(6));
        
        if (data.content) {
          setContent(prev => prev + data.content);
        }
        
        if (data.done) {
          setGenerating(false);
        }
        
        if (data.error) {
          alert(data.error);
          setGenerating(false);
        }
      }
    }
  };

  return (
    <div className="space-y-4">
      <input
        value={topic}
        onChange={e => setTopic(e.target.value)}
        placeholder="输入文章主题"
        className="w-full p-2 border rounded"
      />
      
      <input
        value={keywords}
        onChange={e => setKeywords(e.target.value)}
        placeholder="输入关键词，用逗号分隔"
        className="w-full p-2 border rounded"
      />
      
      <button
        onClick={handleGenerate}
        disabled={generating || !topic}
        className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      >
        {generating ? '生成中...' : '生成文章'}
      </button>
      
      {content && (
        <div className="prose max-w-none">
          {content}
        </div>
      )}
    </div>
  );
}

集成 Stripe 订阅支付：
1. 月付 $19，年付 $190
2. 创建 checkout session
3. 处理 webhook 事件
4. 更新用户订阅状态

// src/app/api/checkout/route.ts
import Stripe from 'stripe';
import { NextRequest, NextResponse } from 'next/server';
import { supabase } from '@/lib/supabase';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-06-20',
});

const PRICES = {
  monthly: 'price_monthly_xxx',
  yearly: 'price_yearly_xxx',
};

export async function POST(req: NextRequest) {
  const { plan, userId } = await req.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [
      {
        price: PRICES[plan as keyof typeof PRICES],
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing?canceled=true`,
    metadata: { userId },
  });

  return NextResponse.json({ url: session.url });
}

// src/app/api/webhook/route.ts
export async function POST(req: NextRequest) {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature')!;

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return NextResponse.json({ error: 'Webhook Error' }, { status: 400 });
  }

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;
      await supabase
        .from('subscriptions')
        .insert({
          user_id: session.metadata?.userId,
          stripe_subscription_id: session.subscription as string,
          status: 'active',
        });
      break;
    }

    case 'customer.subscription.deleted': {
      const subscription = event.data.object as Stripe.Subscription;
      await supabase
        .from('subscriptions')
        .update({ status: 'canceled' })
        .eq('stripe_subscription_id', subscription.id);
      break;
    }
  }

  return NextResponse.json({ received: true });
}