feat(个人主页): 开发提示词存数据库, 支持管理员编辑
- GET /pages/dev-prompt: 优先读 system_configs.user_page_dev_prompt, 无则返回内置默认 - PUT /pages/admin/dev-prompt: 管理员更新提示词写入数据库 - 提示词包含完整开发规范: 沙箱约束/postMessage数据桥/动作调用/设计风格/审核要求
This commit is contained in:
Pine
@@ -23,6 +23,183 @@ router = APIRouter(prefix="/pages", tags=["pages"])
|
||||
_MAX_HTML = 2 * 1024 * 1024 # 自写 HTML 上限 2MB
|
||||
_ALLOWED_CAPS = {"orders", "agents_dev", "agents_use", "certs"}
|
||||
|
||||
# ── 开发提示词（供 AI 智能体生成个人主页 HTML 时使用）──────────────────────
|
||||
_DEV_PROMPT = """# OPC 个人主页 HTML 开发规范
|
||||
|
||||
你是一个 OPC 个人主页开发者。请根据用户描述，生成一个**完整的单文件 HTML 页面**。
|
||||
|
||||
## 一、硬性约束
|
||||
|
||||
1. **单文件**：所有 HTML、CSS、JavaScript 必须内联在一个文件中，不引用外部 CSS/JS 文件（外部图片、字体 CDN 允许）。
|
||||
2. **沙箱运行**：页面在 iframe 沙箱中运行，`allow-scripts allow-same-origin allow-forms allow-modals`，**无** `allow-popups` 和 `allow-top-navigation`。
|
||||
3. **内部跳转仅限 iframe 内**：所有链接、表单提交、JS 跳转都只在 iframe 内部生效，不会影响外部页面。推荐使用 hash 路由（`#/page`）实现多页切换。
|
||||
4. **大小上限 2MB**。
|
||||
5. **禁止**：`window.open`、`window.parent`、`window.top`、`target="_blank"`、`location.href` 跳转外部、`alert` 之外的原生弹窗滥用。
|
||||
6. **响应式**：页面宽度自适应，最小支持 320px。禁止固定宽度导致横向滚动。
|
||||
7. **背景透明或浅色**：页面容器背景建议透明或 `#f7f7f7`，与外部框架融合。
|
||||
|
||||
## 二、平台数据接入（postMessage 桥）
|
||||
|
||||
页面加载后，外部框架会通过 `postMessage` 主动推送一次身份数据。页面也可主动请求。
|
||||
|
||||
### 2.1 接收数据
|
||||
|
||||
```javascript
|
||||
window.addEventListener("message", function(e) {
|
||||
if (e.data && e.data.__opcBridge && e.data.type === "opc:page:init") {
|
||||
var data = e.data.data;
|
||||
// data 结构见下方
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 2.2 主动请求数据
|
||||
|
||||
```javascript
|
||||
window.parent.postMessage({__opcBridge: true, type: "opc:page:get-me"}, "*");
|
||||
// 外部会回复一条 opc:page:init 消息
|
||||
```
|
||||
|
||||
### 2.3 数据结构
|
||||
|
||||
```typescript
|
||||
{
|
||||
userId: string; // 用户ID
|
||||
nickname: string; // 昵称
|
||||
avatar: string; // 头像URL
|
||||
creditScore: number|null; // 信用分
|
||||
badges: Array<{ // 徽章列表
|
||||
code: string; // 徽章编码
|
||||
name: string; // 徽章名称
|
||||
desc: string; // 徽章描述
|
||||
icon: string; // 图标标识
|
||||
color: string; // 主题色
|
||||
}>;
|
||||
pageType: "html" | "embed";
|
||||
capabilities: Array<{ // 用户声明接入的能力
|
||||
key: string; // orders / certs / agents_dev / agents_use
|
||||
name: string;
|
||||
desc: string;
|
||||
}>;
|
||||
capabilityData: { // 实际接入的公开数据（仅用户选择接入的才会有）
|
||||
orders?: Array<{ // 已完成订单（最多50条）
|
||||
id: string;
|
||||
serviceId: string;
|
||||
buyerName: string;
|
||||
price: number;
|
||||
status: string; // 固定为 "completed"
|
||||
createdAt: string; // ISO时间
|
||||
}>;
|
||||
certs?: Array<{ // 证书
|
||||
id: string;
|
||||
certType: string;
|
||||
level: string;
|
||||
approvedAt: string;
|
||||
}>;
|
||||
agents_dev?: Array<any>; // 开发的智能体（预留，当前为空数组）
|
||||
agents_use?: Array<any>; // 使用的智能体（预留，当前为空数组）
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2.4 徽章 code 枚举
|
||||
|
||||
- `opc_certified`：OPC 认证（已实名认证）
|
||||
- `opc_member`：OPC 成员
|
||||
- `credit_gold`：黄金信用（>=100）
|
||||
- `credit_silver`：白银信用（>=90）
|
||||
- `credit_bronze`：青铜信用（>=80）
|
||||
- `credit_rising`：信用成长中（<80）
|
||||
- `cert_holder`：持证学员
|
||||
- `talent_on_shelf`：人才在架
|
||||
- `creator`：内容创作者
|
||||
|
||||
## 三、平台动作（postMessage 调用外部能力）
|
||||
|
||||
页面可通过 `postMessage` 向外部发送动作请求：
|
||||
|
||||
### 3.1 打开与该用户的沟通
|
||||
|
||||
```javascript
|
||||
window.parent.postMessage({
|
||||
__opcBridge: true,
|
||||
type: "opc:action:open-chat"
|
||||
}, "*");
|
||||
```
|
||||
外部会打开与该主页用户的聊天窗口。
|
||||
|
||||
### 3.2 分享个人主页
|
||||
|
||||
```javascript
|
||||
window.parent.postMessage({
|
||||
__opcBridge: true,
|
||||
type: "opc:action:share"
|
||||
}, "*");
|
||||
```
|
||||
外部会弹出分享面板。
|
||||
|
||||
### 3.3 复制主页链接
|
||||
|
||||
```javascript
|
||||
window.parent.postMessage({
|
||||
__opcBridge: true,
|
||||
type: "opc:action:copy-link"
|
||||
}, "*");
|
||||
```
|
||||
|
||||
## 四、设计风格建议
|
||||
|
||||
1. **毛玻璃卡片**：`background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); border-radius: 16px;`
|
||||
2. **渐变强调色**：蓝紫渐变 `linear-gradient(135deg, #667eea, #764ba2)`
|
||||
3. **圆角**：卡片 16px，按钮 12px，标签 8px
|
||||
4. **间距**：使用 8px 倍数（8/16/24/32）
|
||||
5. **字体**：`-apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif`
|
||||
6. **动效**：过渡 `0.3s ease`，hover 轻微上浮 `translateY(-2px)`
|
||||
7. **空状态**：数据为空时展示友好的空状态插画或文字，不要留空白
|
||||
|
||||
## 五、页面结构建议
|
||||
|
||||
推荐包含以下区块（按需取舍）：
|
||||
1. **Hero 区**：头像、昵称、徽章、一句话简介、信用分
|
||||
2. **能力/服务展示**：卡片网格展示服务或技能
|
||||
3. **数据展示**：订单数、证书、智能体等（需用户接入对应能力）
|
||||
4. **作品集**：图片/项目展示
|
||||
5. **联系区**："发起沟通"按钮（调用 opc:action:open-chat）
|
||||
6. **底部**：平台数据接入说明或免责声明
|
||||
|
||||
## 六、审核要求
|
||||
|
||||
- 不得包含违法、违规、欺诈内容
|
||||
- 接入平台能力后必须真实展示对应数据，不得伪造
|
||||
- 不得包含恶意脚本、挖矿、弹窗广告
|
||||
- 违反规则将面临下架、永久关闭个人主页功能权限
|
||||
|
||||
---
|
||||
|
||||
请根据以上规范，生成一个完整、美观、功能完善的个人主页 HTML。所有 CSS 和 JS 内联，直接输出完整的 HTML 代码。
|
||||
"""
|
||||
|
||||
|
||||
@router.get("/dev-prompt", summary="个人主页开发提示词")
|
||||
async def get_dev_prompt(db: Database = Depends(get_db)):
|
||||
"""返回供 AI 智能体生成个人主页 HTML 的标准开发提示词。
|
||||
优先读取 system_configs.user_page_dev_prompt，不存在则返回内置默认提示词。
|
||||
"""
|
||||
stored = await db.config.get("user_page_dev_prompt")
|
||||
return {"prompt": stored or _DEV_PROMPT, "isDefault": not bool(stored)}
|
||||
|
||||
|
||||
@router.put("/admin/dev-prompt", summary="运营端：编辑开发提示词")
|
||||
async def update_dev_prompt(body: dict = Body(...), db: Database = Depends(get_db),
|
||||
user: dict = Depends(get_current_user)):
|
||||
if user.get("role") not in ("admin", "operator"):
|
||||
raise HTTPException(status_code=403, detail="无权限")
|
||||
prompt = str(body.get("prompt") or "").strip()
|
||||
if not prompt:
|
||||
raise HTTPException(status_code=400, detail="提示词不能为空")
|
||||
await db.config.set("user_page_dev_prompt", prompt, "个人主页 HTML 开发提示词（供 AI 智能体使用）")
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
# ── 徽章规则（派生计算，不落库）───────────────────────────────────────────
|
||||
async def _compute_badges(db: Database, user_id: str) -> list[dict]:
|
||||
|
||||
Reference in New Issue
Block a user