第 11 课：全链路整合

┌─────────────────────────────────────────────────────────────────┐
│  🎯 核心观点：AI-Native 工作流是从设计到部署的完整链路整合      │
├─────────────────────────────────────────────────────────────────┤
│  📚 你将学到：                                                   │
│    • 掌握从设计到部署的完整 AI-Native 开发链路                   │
│    • 通过项目实战体验全链路 AI 加持的高效工作流                   │
│    • 理解 AI 时代前端工程师的核心竞争力与角色转变                │
│    • 展望 AI-Native 框架与 Agent 化开发的未来趋势               │
└─────────────────────────────────────────────────────────────────┘

设计（Figma AI）
  → D2C（v0.dev）
    → 开发（Cursor + .cursorrules）
      → 组件（shadcn/ui + Radix + Tailwind v4）
        → 数据层（Supabase：数据库 + Auth + 实时 + Vector）
          → AI 功能（Vercel AI SDK + Supabase Vector）
            → 测试（Playwright MCP）
              → CI/CD → 部署

"设计一个现代风格的用户反馈管理仪表盘，包含：
- 顶部导航栏，带搜索框和用户头像
- 左侧边栏，包含反馈分类菜单
- 主内容区，展示反馈列表，每条反馈包含用户头像、内容摘要、情感标签、时间
- 右侧面板，展示选中反馈的详细信息和 AI 分析结果
- 底部状态栏，显示统计数据"

"创建一个反馈列表组件，每条反馈包含：
- 用户头像（圆形）
- 用户名和提交时间
- 反馈内容摘要（最多显示两行）
- 情感分析标签（正面/中性/负面，用不同颜色区分）
- 操作按钮（查看详情、标记已处理）
列表支持虚拟滚动，每页显示 20 条"

// FeedbackList.tsx — 由 v0.dev 生成，基于 shadcn/ui + Tailwind
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { formatDistanceToNow } from "date-fns"
import { zhCN } from "date-fns/locale"

interface Feedback {
  id: string
  user: {
    name: string
    avatar: string
  }
  content: string
  sentiment: "positive" | "neutral" | "negative"
  createdAt: Date
  isProcessed: boolean
}

const sentimentConfig = {
  positive: { label: "正面", className: "bg-green-100 text-green-800" },
  neutral: { label: "中性", className: "bg-gray-100 text-gray-800" },
  negative: { label: "负面", className: "bg-red-100 text-red-800" },
}

interface FeedbackListProps {
  feedbacks: Feedback[]
  onViewDetail: (id: string) => void
  onMarkProcessed: (id: string) => void
}

export function FeedbackList({
  feedbacks,
  onViewDetail,
  onMarkProcessed,
}: FeedbackListProps) {
  return (
    <div className="space-y-3">
      {feedbacks.map((feedback) => (
        <Card key={feedback.id} className="hover:shadow-md transition-shadow">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <Avatar className="h-10 w-10">
                <AvatarImage src={feedback.user.avatar} />
                <AvatarFallback>
                  {feedback.user.name.slice(0, 2)}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-sm">
                    {feedback.user.name}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {formatDistanceToNow(feedback.createdAt, {
                      addSuffix: true,
                      locale: zhCN,
                    })}
                  </span>
                </div>
                <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                  {feedback.content}
                </p>
                <div className="flex items-center justify-between mt-2">
                  <Badge
                    variant="secondary"
                    className={
                      sentimentConfig[feedback.sentiment].className
                    }
                  >
                    {sentimentConfig[feedback.sentiment].label}
                  </Badge>
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onViewDetail(feedback.id)}
                    >
                      查看详情
                    </Button>
                    {!feedback.isProcessed && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onMarkProcessed(feedback.id)}
                      >
                        标记已处理
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

// 在 Cursor 中使用 Cmd+K 输入：
// "实现反馈列表的筛选逻辑：支持按情感类型、时间范围、处理状态筛选，
//  使用 URL search params 持久化筛选条件"

// app/api/analyze-feedback/route.ts
import { openai } from "@ai-sdk/openai"
import { streamText } from "ai"

export async function POST(req: Request) {
  const { feedback } = await req.json()

  const result = streamText({
    model: openai("gpt-4o"),
    system: `你是一个专业的客户反馈分析师。请分析以下用户反馈，给出：
1. 情感倾向（正面/中性/负面）及置信度
2. 关键问题提取
3. 建议的处理优先级（高/中/低）
4. 推荐的回复策略
请用 JSON 格式返回结果。`,
    prompt: feedback,
  })

  return result.toDataStreamResponse()
}

// hooks/useAnalyzeFeedback.ts
import { useCompletion } from "ai/react"

export function useAnalyzeFeedback() {
  const { complete, completion, isLoading } = useCompletion({
    api: "/api/analyze-feedback",
  })

  const analyze = async (feedback: string) => {
    const result = await complete(feedback)
    try {
      return JSON.parse(result || "{}")
    } catch {
      return null
    }
  }

  return { analyze, isLoading, rawResult: completion }
}

// tests/feedback-list.spec.ts
// 这个测试文件可以通过 Playwright MCP 自动生成
import { test, expect } from "@playwright/test"

test.describe("反馈列表功能", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/dashboard/feedbacks")
  })

  test("应该正确展示反馈列表", async ({ page }) => {
    // 等待列表加载完成
    await expect(page.getByRole("list")).toBeVisible()

    // 验证列表项包含必要元素
    const firstItem = page.getByRole("listitem").first()
    await expect(firstItem.getByRole("img")).toBeVisible() // 头像
    await expect(firstItem.getByText(/正面|中性|负面/)).toBeVisible() // 情感标签
  })

  test("应该支持按情感类型筛选", async ({ page }) => {
    // 点击筛选按钮
    await page.getByRole("button", { name: "筛选" }).click()

    // 选择"负面"筛选条件
    await page.getByLabel("情感类型").selectOption("negative")
    await page.getByRole("button", { name: "应用" }).click()

    // 验证所有列表项都是负面标签
    const badges = page.locator('[data-testid="sentiment-badge"]')
    const count = await badges.count()
    for (let i = 0; i < count; i++) {
      await expect(badges.nth(i)).toHaveText("负面")
    }
  })

  test("应该能查看反馈详情并触发 AI 分析", async ({ page }) => {
    // 点击第一条反馈的"查看详情"
    await page.getByRole("button", { name: "查看详情" }).first().click()

    // 验证详情面板打开
    await expect(page.getByRole("complementary")).toBeVisible()

    // 点击 AI 分析按钮
    await page.getByRole("button", { name: "AI 分析" }).click()

    // 等待分析结果
    await expect(
      page.getByText("情感倾向", { exact: false })
    ).toBeVisible({ timeout: 10000 })
  })
})

# .github/workflows/ci.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "pnpm"
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm type-check
      - run: pnpm test -- --run

  e2e:
    runs-on: ubuntu-latest
    needs: quality
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "pnpm"
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps
      - run: pnpm build
      - run: pnpm exec playwright test

  deploy:
    runs-on: ubuntu-latest
    needs: [quality, e2e]
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: "--prod"

// 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!
)

产品需求：客户反馈管理平台
- 用户可以提交反馈（文字 + 截图）
- 管理员可以查看反馈列表，按情感分类筛选
- AI 自动分析反馈的情感倾向和关键问题
- 实时更新：新反馈提交后，管理后台自动刷新
- 支持语义搜索：找到"类似的反馈"

设计一个现代风格的客户反馈管理仪表盘：
- 顶部导航栏：Logo、搜索框、通知图标、用户头像
- 左侧边栏：反馈分类菜单（全部、正面、中性、负面、未处理）
- 主内容区：反馈卡片列表，每张卡片包含用户头像、内容摘要、
  情感标签（绿/灰/红）、时间戳
- 右侧面板：选中反馈的详情 + AI 分析结果
- 配色：使用 shadcn/ui 默认主题

// v0.dev 生成的 FeedbackDashboard 骨架
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import { Search, Bell, MessageSquare, TrendingUp } from "lucide-react"

const categories = [
  { label: "全部反馈", count: 128, icon: MessageSquare },
  { label: "正面", count: 64, icon: TrendingUp },
  { label: "中性", count: 38, icon: MessageSquare },
  { label: "负面", count: 26, icon: MessageSquare },
]

export function FeedbackDashboard() {
  return (
    <div className="flex h-screen">
      {/* 左侧边栏 */}
      <aside className="w-64 border-r bg-muted/30 p-4">
        <h2 className="text-lg font-semibold mb-4">反馈分类</h2>
        <nav className="space-y-1">
          {categories.map((cat) => (
            <Button
              key={cat.label}
              variant="ghost"
              className="w-full justify-between"
            >
              <span className="flex items-center gap-2">
                <cat.icon className="h-4 w-4" />
                {cat.label}
              </span>
              <Badge variant="secondary">{cat.count}</Badge>
            </Button>
          ))}
        </nav>
      </aside>

      {/* 主内容区 */}
      <main className="flex-1 flex flex-col">
        {/* 顶部导航 */}
        <header className="border-b p-4 flex items-center justify-between">
          <div className="relative w-96">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input placeholder="搜索反馈..." className="pl-9" />
          </div>
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon">
              <Bell className="h-5 w-5" />
            </Button>
            <Avatar className="h-8 w-8">
              <AvatarFallback>管</AvatarFallback>
            </Avatar>
          </div>
        </header>

        {/* 反馈列表 */}
        <ScrollArea className="flex-1 p-4">
          <div className="space-y-3">
            {/* 反馈卡片会在这里渲染 */}
          </div>
        </ScrollArea>
      </main>
    </div>
  )
}

You are an expert in TypeScript, React, Next.js App Router, Tailwind CSS, and shadcn/ui.

Project: Customer feedback management platform
Database: Supabase (PostgreSQL + pgvector)
Auth: Supabase Auth
AI: Vercel AI SDK

Key conventions:
- Use Server Components by default, 'use client' only when needed
- Use Tailwind CSS for all styling
- Use shadcn/ui components
- Use Supabase for all data operations
- Use Zod for validation
- Named exports only

// app/dashboard/page.tsx
import { createClient } from "@/lib/supabase/server"
import { FeedbackList } from "./feedback-list"

export default async function DashboardPage() {
  const supabase = await createClient()

  const { data: feedbacks } = await supabase
    .from("feedbacks")
    .select("*, profiles(name, avatar_url)")
    .order("created_at", { ascending: false })

  return (
    <div className="flex-1 p-6">
      <h1 className="text-2xl font-bold mb-6">反馈管理</h1>
      <FeedbackList initialData={feedbacks ?? []} />
    </div>
  )
}

// app/dashboard/feedback-list.tsx
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { formatDistanceToNow } from "date-fns"
import { zhCN } from "date-fns/locale"

type Feedback = {
  id: string
  content: string
  sentiment: "positive" | "neutral" | "negative"
  created_at: string
  is_processed: boolean
  profiles: { name: string; avatar_url: string }
}

const sentimentConfig = {
  positive: { label: "正面", class: "bg-green-100 text-green-800" },
  neutral: { label: "中性", class: "bg-gray-100 text-gray-800" },
  negative: { label: "负面", class: "bg-red-100 text-red-800" },
}

export function FeedbackList({ initialData }: { initialData: Feedback[] }) {
  const [feedbacks, setFeedbacks] = useState(initialData)
  const [filter, setFilter] = useState<string>("all")
  const supabase = createClient()

  // 实时订阅：新反馈自动出现
  useEffect(() => {
    const channel = supabase
      .channel("feedbacks")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "feedbacks" },
        (payload) => {
          setFeedbacks((prev) => [payload.new as Feedback, ...prev])
        }
      )
      .subscribe()

    return () => { supabase.removeChannel(channel) }
  }, [supabase])

  const filtered = filter === "all"
    ? feedbacks
    : feedbacks.filter((f) => f.sentiment === filter)

  return (
    <div className="space-y-4">
      <Tabs value={filter} onValueChange={setFilter}>
        <TabsList>
          <TabsTrigger value="all">全部 ({feedbacks.length})</TabsTrigger>
          <TabsTrigger value="positive">正面</TabsTrigger>
          <TabsTrigger value="neutral">中性</TabsTrigger>
          <TabsTrigger value="negative">负面</TabsTrigger>
        </TabsList>
      </Tabs>

      <div className="space-y-3">
        {filtered.map((feedback) => (
          <Card key={feedback.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src={feedback.profiles.avatar_url} />
                  <AvatarFallback>
                    {feedback.profiles.name.slice(0, 2)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <span className="font-medium text-sm">
                      {feedback.profiles.name}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {formatDistanceToNow(new Date(feedback.created_at), {
                        addSuffix: true, locale: zhCN,
                      })}
                    </span>
                  </div>
                  <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                    {feedback.content}
                  </p>
                  <div className="flex items-center justify-between mt-2">
                    <Badge className={sentimentConfig[feedback.sentiment].class}>
                      {sentimentConfig[feedback.sentiment].label}
                    </Badge>
                    <Button variant="ghost" size="sm">查看详情</Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

// app/api/analyze/route.ts
import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(req: Request) {
  const { feedback } = await req.json()

  const result = streamText({
    model: openai("gpt-4o"),
    system: `你是一个专业的客户反馈分析师。分析以下反馈，返回 JSON：
{
  "sentiment": "positive" | "neutral" | "negative",
  "confidence": 0-1,
  "keyIssues": ["问题1", "问题2"],
  "priority": "high" | "medium" | "low",
  "suggestedReply": "建议回复内容"
}`,
    prompt: feedback,
  })

  return result.toDataStreamResponse()
}

// app/api/search/route.ts
import { openai } from "@ai-sdk/openai"
import { embed } from "ai"
import { createClient } from "@/lib/supabase/server"

export async function POST(req: Request) {
  const { query } = await req.json()
  const supabase = await createClient()

  // 1. 把搜索词转成向量
  const { embedding } = await embed({
    model: openai.embedding("text-embedding-3-small"),
    value: query,
  })

  // 2. 在 Supabase 中做语义搜索
  const { data: results } = await supabase.rpc("match_feedbacks", {
    query_embedding: embedding,
    match_threshold: 0.7,
    match_count: 10,
  })

  return Response.json({ results })
}

帮我为客户反馈管理平台生成 E2E 测试：
1. 登录后能看到反馈列表
2. 点击筛选按钮能正确过滤
3. 点击"查看详情"能打开详情面板
4. AI 分析按钮能返回分析结果

# .github/workflows/ci.yml
name: CI/CD
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm type-check
      - run: pnpm test -- --run

  e2e:
    runs-on: ubuntu-latest
    needs: quality
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps
      - run: pnpm build
      - run: pnpm exec playwright test

  deploy:
    runs-on: ubuntu-latest
    needs: [quality, e2e]
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: "--prod"