logo
0
0
WeChat Login
Chen Chaoming<chaoming@aiwho.cn>
🎉 初始化 OPC-site 技能包

OPC-site 🚀

One Person Company — 一句话生成个人产业服务网站,自动部署到 EdgeOne Pages。

自由职业者、独立顾问、个人工作室的建站利器:个人官网 → 服务目录 → 在线预约 → AI 产业顾问 → 客户管理 → 在线收款 → 后台总控,一包搞定。


✨ 功能特性

模块功能
🏠 前台展示首页、服务列表、定价方案、案例作品、关于我们、FAQ、推荐语、联系咨询
📅 在线预约选择服务 → 选择时段 → 提交预约 → 状态追踪
💳 支付管理多支付方式支持、订单记录、支付状态流转
🤖 AI 顾问SSE 流式对话,智能解答客户疑问
👥 客户管理客户资料、标签分类、沟通记录
✉️ 消息咨询访客留言、后台回复、已读/未读管理
🔐 用户系统注册/登录、JWT 认证、RBAC 权限(普通用户/管理员)
⚙️ 管理后台仪表盘、服务管理、预约管理、客户管理、支付记录、消息管理、站点设置
☁️ 边缘部署EdgeOne Pages 一键部署,全球加速,零运维

🛠 技术栈

维度选择
前端原生 HTML/CSS/JS(零构建,直接编辑即可生效)
后端Fastify 4.x
ORMPrisma 5.x
数据库SQLite(零配置,开箱即用)
认证JWT(bcrypt 密码加密)
边缘计算EdgeOne Edge Functions / Cloud Functions / KV / Middleware

🚀 快速开始

方式一:使用 scaffold 脚本生成

# 1. 生成项目骨架
node .opc-site/templates/project-skeleton/scripts/scaffold.js \
  --title "我的技术服务" \
  --description "专业个人技术咨询服务" \
  --features booking,payment \
  --output ./my-opc-site

# 2. 安装并初始化
cd ./my-opc-site
npm run setup

# 3. 启动开发服务器
npm run dev

方式二:直接使用项目骨架

# 1. 复制骨架
cp -r .opc-site/templates/project-skeleton ./my-site
cd ./my-site

# 2. 安装依赖
npm install

# 3. 生成 Prisma 客户端并建表
npx prisma generate
npx prisma db push

# 4. 写入种子数据(管理员 + 示例服务)
node scripts/post-gen.js

# 5. 启动
npm run dev

访问地址

入口地址
前台首页http://localhost:3000
管理后台http://localhost:3000/admin/dashboard.html
API 服务列表http://localhost:3000/api/services

默认管理员账号

字段
邮箱admin@opc.site
密码admin123

可通过环境变量自定义:ADMIN_EMAIL / ADMIN_PASSWORD


📁 项目结构

my-opc-site/
├── package.json              # 项目依赖与脚本
├── tsconfig.json             # TypeScript 配置
├── prisma/
│   ├── schema.prisma         # 7 个数据模型定义
│   └── dev.db                # SQLite 数据库文件(自动生成)
├── src/
│   ├── app.ts                # Fastify 应用入口
│   ├── config.ts             # 环境配置管理
│   ├── middleware/
│   │   ├── auth.ts           # JWT 认证中间件
│   │   └── error-handler.ts  # 统一错误处理
│   ├── routes/               # 8 条业务路由
│   │   ├── auth.ts           # 注册/登录/获取用户
│   │   ├── services.ts       # 服务 CRUD
│   │   ├── booking.ts        # 预约管理
│   │   ├── payments.ts       # 支付处理
│   │   ├── clients.ts        # 客户管理
│   │   ├── messages.ts       # 消息咨询
│   │   ├── admin.ts          # 后台管理
│   │   └── agent.ts          # AI 顾问(SSE 流式)
│   ├── services/
│   │   ├── ai-agent.ts       # AI 对话服务
│   │   └── payment.ts        # 支付集成服务
│   └── utils/
│       ├── jwt.ts            # JWT 签名/验证
│       └── response.ts       # 统一响应格式
├── public/
│   ├── css/
│   │   ├── style.css         # 前台样式(CSS 变量主题)
│   │   └── admin.css         # 后台样式
│   ├── js/
│   │   └── app.js            # 公共工具库(api/toast/modal/format/auth)
│   └── pages/                # 10 个前台页面
│       ├── index.html        # 首页
│       ├── services.html     # 服务列表
│       ├── pricing.html      # 定价方案
│       ├── about.html        # 关于我们
│       ├── contact.html      # 联系咨询
│       ├── booking.html      # 在线预约
│       ├── blog.html         # 博客
│       ├── faq.html          # 常见问题
│       ├── portfolio.html    # 作品案例
│       ├── testimonials.html # 客户评价
│       └── login.html        # 登录
├── admin/                    # 7 个后台管理页面
│   ├── dashboard.html        # 运营仪表盘
│   ├── services-mgmt.html    # 服务管理
│   ├── bookings.html         # 预约管理
│   ├── clients.html          # 客户管理
│   ├── payments.html         # 支付记录
│   ├── messages.html         # 消息管理
│   └── settings.html         # 站点设置
├── edge-functions/
│   ├── _middleware.ts         # 边缘中间件(路由分发 + JWT 校验 + 安全头)
│   └── api-proxy.ts          # API 代理转发
└── cloud-functions/
    └── deploy-hook.ts        # 部署后自动执行种子数据

📦 数据模型

模型说明核心字段
User用户账户email, name, password(hashed), role(admin/user)
Service服务项目title, slug, description, category, price, duration
Booking预约订单userId, serviceId, status, date, price
Payment支付记录bookingId, amount, method, status
Client客户资料userId, name, email, phone, company, tags
Message咨询消息name, email, subject, content, read
ConversationAI 对话记录sessionId, role(user/assistant), content
SiteSetting站点配置key-value 键值对

🔌 API 路由一览

前缀路由认证说明
/api/authPOST /register注册
/api/authPOST /login登录
/api/authGET /me获取当前用户
/api/authPUT /profile更新资料
/api/servicesGET /服务列表
/api/servicesGET /:id服务详情
/api/servicesPOST /✅ admin创建服务
/api/servicesPUT /:id✅ admin更新服务
/api/servicesDELETE /:id✅ admin删除服务
/api/bookingsGET /我的预约
/api/bookingsPOST /创建预约
/api/bookingsPUT /:id/status✅ admin更新状态
/api/paymentsGET /✅ admin支付列表
/api/clientsGET /客户列表
/api/clientsPOST /添加客户
/api/messagesGET /✅ admin消息列表
/api/messagesPOST /提交留言
/api/messagesPUT /:id✅ admin标记已读/回复
/api/agentGET /chatSSE 流式对话
/api/adminGET /stats✅ admin仪表盘统计

⚙️ 环境变量配置

变量默认值说明
PORT3000服务端口
HOST0.0.0.0监听地址
JWT_SECRETopc-site-dev-secret-...JWT 签名密钥(生产环境务必修改!)
JWT_EXPIRES_IN7dToken 有效期
SITE_TITLE我的服务站点标题
SITE_DESCRIPTION个人产业服务网站站点描述
AI_PROVIDERopenaiAI 服务商
AI_API_KEY``AI API 密钥
AI_MODELgpt-4o-miniAI 模型
ADMIN_EMAILadmin@opc.site默认管理员邮箱
ADMIN_PASSWORDadmin123默认管理员密码

☁️ 部署到 EdgeOne Pages

前置准备

  1. EdgeOne 控制台 创建 Pages 项目
  2. 将代码推送到 Git 仓库并关联

部署配置

配置项
构建命令npm install && npx prisma generate && npx prisma db push && node scripts/post-gen.js
输出目录.
Edge Functions 目录edge-functions/
Cloud Functions 目录cloud-functions/

环境变量(EdgeOne 控制台设置)

在 Pages 项目 → 设置 → 环境变量中添加以下变量:

  • JWT_SECRET — 改为安全的随机字符串
  • SITE_TITLE — 站点名称
  • SITE_DESCRIPTION — 站点描述
  • AI_API_KEY — AI 服务密钥(如需 AI 顾问功能)

Edge Functions 会自动代理 /api/* 请求到后端 Cloud Function,并在边缘层完成 JWT 校验、安全头注入和静态资源缓存。

详情参见 references/edgeone-pages-deploy.md


🎨 定制指南

更换主题色

编辑 public/css/style.css 中的 CSS 变量:

:root {
  --primary: #3b82f6;       /* 主色 */
  --primary-dark: #2563eb;   /* 主色深色 */
  --primary-light: #93c5fd;  /* 主色浅色 */
  --accent: #8b5cf6;        /* 强调色 */
  --bg: #ffffff;             /* 背景色 */
  --text: #1e293b;           /* 文字色 */
}

添加新页面

  1. public/pages/ 下创建 HTML 文件,复用 style.css 的 CSS 变量
  2. 模板中已包含完整的 Header/Nav 组件,可直接复制使用
  3. src/app.ts 中添加静态文件路由(通常不需要,Fastify static 会自动服务)

扩展功能模块

可选模块文档位于 templates/modules/

模块文件说明
认证增强auth.mdOAuth 第三方登录、密码重置
预约深度booking.md日历视图、时段管理、通知推送
支付集成payment.md微信支付、支付宝、Stripe 接入
AI 顾问agent.md知识库接入、对话历史、意图识别
客户门户client-portal.md客户自助查看订单、历史记录
后台增强admin.md数据分析、导出、多管理员

📜 脚本说明

命令说明
npm run dev开发模式(tsx watch 热重载)
npm run buildTypeScript 编译
npm start生产模式启动
npm run db:generate生成 Prisma 客户端
npm run db:push同步数据库表结构
npm run db:seed写入种子数据
npm run setup全自动初始化(install + generate + push + seed)

📄 许可证

MIT