Prompt Skill Academy 核心功能迭代：从 MVP 到生产级应用

摘要: 本文记录了 Prompt Skill Academy 项目在一天内完成的重大功能迭代，包括学习进度云端持久化、提示词收藏系统、SEO 优化、SVG 图标系统、数据库集成以及管理员后台的完整实现。涉及 Next.js、Supabase、TypeScript 等技术栈的实战经验。

项目背景

Prompt Skill Academy 是一个提示工程学习平台，提供系统化的 AI 提示词课程、提示词模板库和 Skills 实验室。今天的目标是将 MVP 版本升级为具备完整用户系统和管理后台的生产级应用。

今日完成功能

1. 学习进度云端持久化

创建 user_progress 表存储用户完成的课程
实现双模式：登录用户存数据库，游客存 localStorage
登录时自动同步本地进度到云端

// 核心逻辑：登录时同步
if (event === "SIGNED_IN" && session?.user) {
  syncLocalProgressToCloud();
}

2. 收藏功能

创建 user_bookmarks 表（支持 prompt 和 skill 两种类型）
开发 BookmarkButton 可复用组件
在 Profile 页面展示收藏列表

3. SEO 优化

动态生成 sitemap.xml（包含 16 个课程页面）
添加 robots.txt
增强 meta 标签（keywords、Open Graph、Twitter Cards）
添加 JSON-LD 结构化数据

4. 课程内容补充

新增 8 节课程，从 8 节扩展到 16 节完整课程：

Level	新增课程
2	RAG 提示设计、角色扮演提示
3	Chain of Density、ReAct、Prompt Chaining、自洽性验证
4	Agent 架构设计、多 Agent 协作

5. SVG 图标系统

创建统一的矢量图标库，替换所有 emoji：

// 25+ SVG 图标组件
export const BookIcon = ({ className, size = 24 }) => (
  <svg className={className} width={size} height={size} ...>
    ...
  </svg>
);

优势：

矢量化，任意缩放不失真
支持 CSS 样式控制（颜色、动画）
统一的设计语言

6. PromptModal 弹窗组件

解决提示词卡片无法查看完整内容的问题：

点击卡片展开全屏弹窗
支持键盘 ESC 关闭
一键复制提示词内容

7. 数据库集成

将硬编码数据迁移到 Supabase：

-- prompts 表
CREATE TABLE prompts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  category TEXT NOT NULL,
  model TEXT NOT NULL,
  prompt TEXT NOT NULL,
  likes_count INTEGER DEFAULT 0,
  copies_count INTEGER DEFAULT 0,
  is_featured BOOLEAN DEFAULT false
);

创建 getPrompts()、getSkills() 查询函数
Vault/Skills 页面动态加载数据
添加 loading 状态处理

8. 管理员后台

为管理员用户提供提示词管理能力：

用户角色系统：

CREATE TABLE user_profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  email TEXT,
  role TEXT DEFAULT 'user' CHECK (role IN ('user', 'admin'))
);

管理页面功能：

提示词列表表格视图
预览、编辑、删除操作
新增提示词表单
权限校验（仅 admin 可访问）

Header 菜单集成：

{
  isAdminUser && <Link href="/admin/prompts">提示词管理</Link>;
}

技术架构

┌─────────────────────────────────────────┐
│           Next.js 14 (App Router)       │
├─────────────────────────────────────────┤
│  Components   │   Pages    │   Lib      │
│  ├── icons/   │  /academy  │  supabase/ │
│  ├── Modal    │  /vault    │  ├── client│
│  ├── Bookmark │  /skills   │  ├── prompts│
│  └── Header   │  /admin    │  └── profile│
├─────────────────────────────────────────┤
│              Supabase                   │
│  ├── Auth (登录/注册)                   │
│  ├── Database (PostgreSQL)             │
│  └── RLS (行级安全)                     │
└─────────────────────────────────────────┘

文件变更统计

类型	数量
新增文件	12 个
修改文件	8 个
新增代码	~2500 行
SQL 迁移	3 个脚本

关键学习点

Supabase RLS 策略：通过 Row Level Security 实现用户数据隔离
渐进增强：游客用 localStorage，登录后自动同步到云端
组件复用：BookmarkButton 设计为通用组件，支持不同类型
管理员权限：基于 user_profiles 表的 role 字段实现权限控制

部署信息

仓库: zaneven/prompt-skill-academy
域名: https://getprompt.top
部署: Vercel 自动部署

日期: 2026-02-02
技术栈: Next.js 14, TypeScript, Supabase, Tailwind CSS