diff --git a/app.js b/app.js
index 75e12a9..d395aa0 100644
--- a/app.js
+++ b/app.js
@@ -71,6 +71,265 @@
const state = loadState();
+ // --- 管理员认证状态管理 ---
+ const ADMIN_TOKEN_KEY = 'eternal_ai_admin_token';
+ const ADMIN_STATE_KEY = 'eternal_ai_admin_state';
+
+ function getAdminToken() {
+ return localStorage.getItem(ADMIN_TOKEN_KEY) || '';
+ }
+
+ function setAdminToken(token) {
+ if (token) localStorage.setItem(ADMIN_TOKEN_KEY, token);
+ else localStorage.removeItem(ADMIN_TOKEN_KEY);
+ }
+
+ const defaultAdminState = { isLoggedIn: false, account: null };
+ function loadAdminState() {
+ try {
+ return { ...defaultAdminState, ...JSON.parse(localStorage.getItem(ADMIN_STATE_KEY)) };
+ } catch { return { ...defaultAdminState }; }
+ }
+ function saveAdminState() { localStorage.setItem(ADMIN_STATE_KEY, JSON.stringify(adminState)); }
+ const adminState = loadAdminState();
+
+ // 管理员 API 封装（使用管理员 token）
+ async function adminApi(path, options = {}) {
+ const token = getAdminToken();
+ const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
+ if (token) headers['Authorization'] = `Bearer ${token}`;
+ try {
+ const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
+ const data = await res.json();
+ if (!res.ok) throw new Error(data.error || `请求失败 (${res.status})`);
+ return data;
+ } catch (err) {
+ if (err.message === 'Failed to fetch') throw new Error('无法连接服务器，请检查网络');
+ throw err;
+ }
+ }
+
+ // --- 管理员审核列表 ---
+ let adminCurrentFilter = 'pending_review';
+
+ async function renderAdminReviews() {
+ const listEl = document.getElementById('admin-review-list');
+ if (!listEl) return;
+ listEl.innerHTML = '加载中…
';
+ try {
+ const query = adminCurrentFilter ? `?status=${adminCurrentFilter}` : '';
+ const { roles } = await adminApi(`/admin/reviews${query}`);
+ if (roles.length === 0) {
+ listEl.innerHTML = '暂无角色
';
+ return;
+ }
+ listEl.innerHTML = roles.map((role) => {
+ const id = escapeHtml(role.id);
+ const name = escapeHtml(role.displayName);
+ const avatar = escapeHtml(role.avatar || '');
+ const status = escapeHtml(role.reviewStatus);
+ const statusText = getReviewStatusText(role.reviewStatus);
+ const statusClass = getReviewStatusClass(role.reviewStatus);
+ const created = new Date(role.createdAt).toLocaleString('zh-CN');
+ return `
+
+ 
+
+
${name}
+ ${statusText}
+ ${created}
+
+ `;
+ }).join('');
+ } catch (err) {
+ listEl.innerHTML = `加载失败：${escapeHtml(err.message)}
`;
+ }
+ }
+
+ function getReviewStatusText(status) {
+ const map = {
+ pending_review: '待审核', approved: '已通过', rejected: '已驳回',
+ syncing: '同步中', synced: '已同步', failed: '同步失败',
+ };
+ return map[status] || status;
+ }
+
+ function getReviewStatusClass(status) {
+ const map = {
+ pending_review: 'pending', approved: 'approved', rejected: 'rejected',
+ syncing: 'syncing', synced: 'synced', failed: 'failed',
+ };
+ return map[status] || 'pending';
+ }
+
+ // --- 管理员审核详情 ---
+ let adminCurrentRoleId = null;
+
+ async function renderAdminReviewDetail(roleId) {
+ adminCurrentRoleId = roleId;
+ const contentEl = document.getElementById('admin-detail-content');
+ if (!contentEl) return;
+ contentEl.innerHTML = '加载中…
';
+ try {
+ const { role } = await adminApi(`/admin/reviews/${roleId}`);
+ const status = role.reviewStatus;
+ let actionsHtml = '';
+ if (status === 'pending_review') {
+ actionsHtml = `
+
+
+
+
`;
+ } else if (status === 'approved') {
+ actionsHtml = `发起 Hermes 同步
+ `;
+ } else if (status === 'synced') {
+ actionsHtml = `
+
+
同步成功
+ ${role.qrCodeUrl ? `
})
` : ''}
+
Profile ID: ${escapeHtml(role.id)}
+
同步时间: ${role.syncedAt ? new Date(role.syncedAt).toLocaleString('zh-CN') : '未知'}
+
驳回原因：${escapeHtml(role.reviewNote || '未提供')}
`;
+ } else if (status === 'failed') {
+ actionsHtml = ``;
+ }
+
+ contentEl.innerHTML = `
+
+
})
+
+
${escapeHtml(role.displayName)}
+ ${getReviewStatusText(status)}
+
+
+
描述：${escapeHtml(role.desc || role.personality || '无')}
+
性格：${escapeHtml(role.personality || '无')}
+
背景：${escapeHtml(role.background || '无')}
+
问候语：${escapeHtml(role.greeting || '无')}
+
价格：¥${escapeHtml(String(role.price || 0))}
+
加载失败：${escapeHtml(err.message)}
`;
+ }
+ }
+
+ // --- 管理员同步状态列表 ---
+ async function renderAdminSyncStatus() {
+ const listEl = document.getElementById('admin-sync-list');
+ if (!listEl) return;
+ listEl.innerHTML = '加载中…
';
+ try {
+ const { roles } = await adminApi('/admin/sync-status');
+ if (roles.length === 0) {
+ listEl.innerHTML = '暂无同步记录
';
+ return;
+ }
+ listEl.innerHTML = roles.map((role) => {
+ const id = escapeHtml(role.id);
+ const name = escapeHtml(role.displayName);
+ const status = escapeHtml(role.reviewStatus);
+ const statusText = getReviewStatusText(role.reviewStatus);
+ const statusClass = getReviewStatusClass(role.reviewStatus);
+ const syncedAt = role.syncedAt ? new Date(role.syncedAt).toLocaleString('zh-CN') : '未同步';
+ return `
+
+
+
${name}
+ ${statusText}
+ 同步时间：${syncedAt}
+
+ `;
+ }).join('');
+ } catch (err) {
+ listEl.innerHTML = `加载失败：${escapeHtml(err.message)}
`;
+ }
+ }
+
+ // --- 管理员系统配置 ---
+ async function renderAdminConfig() {
+ const listEl = document.getElementById('admin-config-list');
+ if (!listEl) return;
+ listEl.innerHTML = '加载中…
';
+ try {
+ const { configs } = await adminApi('/admin/config');
+ listEl.innerHTML = configs.map((c) => {
+ const key = escapeHtml(c.key);
+ const value = escapeHtml(c.value);
+ const updated = c.updatedAt ? new Date(c.updatedAt).toLocaleString('zh-CN') : '';
+ const isProtected = key === 'SYNC_SECRET';
+ return `
+
+
+
+
+ ${isProtected ? '' : ``}
+
+ ${updated ? `
更新于 ${updated}` : ''}
+
加载失败：${escapeHtml(err.message)}
`;
+ }
+ }
+
+ // --- 管理员 Tab 切换 ---
+ function switchAdminTab(tab) {
+ document.querySelectorAll('.center-tab').forEach((t) => {
+ if (t.closest('#admin-reviews')) {
+ const isActive = t.dataset.centerTab === tab;
+ t.classList.toggle('active', isActive);
+ }
+ });
+ document.getElementById('admin-reviews-panel').hidden = tab !== 'admin-reviews';
+ document.getElementById('admin-sync-panel').hidden = tab !== 'admin-sync';
+ document.getElementById('admin-config-panel').hidden = tab !== 'admin-config';
+ if (tab === 'admin-reviews') renderAdminReviews();
+ else if (tab === 'admin-sync') renderAdminSyncStatus();
+ else if (tab === 'admin-config') renderAdminConfig();
+ }
+
// --- Mock data for role library (U2) ---
const mockRoles = [
{
@@ -119,6 +378,9 @@
onboarding: document.getElementById('onboarding'),
'creator-center': document.getElementById('creator-center'),
creator: document.getElementById('creator'),
+ 'admin-login': document.getElementById('admin-login'),
+ 'admin-reviews': document.getElementById('admin-reviews'),
+ 'admin-review-detail': document.getElementById('admin-review-detail'),
};
const form = document.getElementById('character-form');
@@ -149,6 +411,9 @@
onboarding: '创作者入驻',
'creator-center': '创作者管理中心',
creator: '角色编辑',
+ 'admin-login': '管理员登录',
+ 'admin-reviews': '管理员后台',
+ 'admin-review-detail': '角色审核详情',
};
function showView(name, trackHistory = true) {
@@ -358,12 +623,36 @@
}
}
- function payRole() {
- document.getElementById('detail-actions-pre').hidden = true;
- const paidEl = document.getElementById('detail-paid');
- paidEl.hidden = false;
- document.getElementById('detail-qr').innerHTML = '扫码连接
AI 角色
';
- document.getElementById('detail-avatar').style.backgroundImage = `url(${currentRole.avatar})`;
+ async function payRole() {
+ if (!currentRole) return;
+ const btn = document.querySelector('[data-action="pay"]');
+ if (btn) {
+ btn.disabled = true;
+ btn.textContent = '处理中…';
+ }
+ try {
+ const result = await api('/orders', {
+ method: 'POST',
+ body: JSON.stringify({ roleId: currentRole.id, amount: currentRole.price }),
+ });
+ // 付款成功，展示二维码
+ document.getElementById('detail-actions-pre').hidden = true;
+ const paidEl = document.getElementById('detail-paid');
+ paidEl.hidden = false;
+ const qrEl = document.getElementById('detail-qr');
+ if (result.role && result.role.qrCodeUrl) {
+ qrEl.innerHTML = `})
`;
+ } else {
+ qrEl.innerHTML = '扫码连接
AI 角色
';
+ }
+ document.getElementById('detail-avatar').style.backgroundImage = `url(${currentRole.avatar})`;
+ } catch (err) {
+ alert('付款失败：' + err.message);
+ if (btn) {
+ btn.disabled = false;
+ btn.textContent = '立即订阅';
+ }
+ }
}
// --- U4: About FAQ ---
@@ -423,27 +712,59 @@
listEl.innerHTML = '还没有创建角色，点击「新建角色」开始
';
return;
}
- listEl.innerHTML = roles
- .map((role) => {
- const id = escapeHtml(role.id);
- const name = escapeHtml(role.displayName);
- const avatar = escapeHtml(role.avatar || 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=anime%20character%20portrait&image_size=square');
- const statusText = role.status === 'running' ? '运行中' : '已停止';
- const statusClass = escapeHtml(role.status);
- return `
+ listEl.innerHTML = roles.map((role) => {
+ const id = escapeHtml(role.id);
+ const name = escapeHtml(role.displayName);
+ const avatar = escapeHtml(role.avatar || 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=anime%20character%20portrait&image_size=square');
+ const reviewStatus = role.reviewStatus || 'pending_review';
+ const statusText = getReviewStatusText(reviewStatus);
+ const statusClass = getReviewStatusClass(reviewStatus);
+
+ // 审核状态标签
+ let statusBadge = `${statusText}`;
+
+ // 已同步角色额外显示运行状态
+ if (reviewStatus === 'synced') {
+ const runStatus = role.status === 'running' ? '运行中' : '已停止';
+ statusBadge += ` ${runStatus}`;
+ }
+
+ // 驳回原因
+ let rejectNote = '';
+ if (reviewStatus === 'rejected' && role.reviewNote) {
+ rejectNote = `驳回原因：${escapeHtml(role.reviewNote)}
`;
+ }
+
+ // 二维码展示（已同步角色）
+ let qrCodeHtml = '';
+ if (reviewStatus === 'synced' && role.qrCodeUrl) {
+ qrCodeHtml = `
+
+
+
+
${name}
- ${statusText}
-
-
-
-
+
${statusBadge}
+ ${rejectNote}
+ ${qrCodeHtml}
${actionButtons}
`;
- })
- .join('');
+ }).join('');
} catch (err) {
listEl.innerHTML = `加载失败：${escapeHtml(err.message)}
`;
}
@@ -616,6 +937,22 @@
document.body.appendChild(modal);
}
+ // --- 二维码弹窗 ---
+ function showQrCodeModal(qrUrl) {
+ const modal = document.createElement('div');
+ modal.id = 'qr-modal';
+ modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;';
+ modal.innerHTML = `
+
+
角色二维码
+
})
+
+
+
+
`）
+ - 添加「保存二维码」按钮（长按或下载）
+3. 修改 `#role-detail` 视图 HTML：
+ - `#detail-qr` 区域改为可容纳 `![]()
` 的容器
+ - 移除 `qr-placeholder` 占位符
+
+**Patterns to follow**:
+- 现有 `api()` 调用模式（`app.js:4-42` 行）
+- 现有按钮 loading 模式（禁用 + 文字变化）
+- `escapeHtml()` 用于所有动态内容
+
+**Test scenarios**:
+- **Happy path**: 用户点击「立即订阅」，调用 API 成功，显示真实二维码
+- **Error path**: 角色未同步，API 返回 400，显示错误提示
+- **Error path**: 网络错误，显示「无法连接服务器」
+- **Edge case**: 重复点击「立即订阅」按钮，第二次点击被禁用（loading 状态）
+- **Integration**: 付款后刷新页面，角色详情页仍显示已订阅状态（基于订单记录）
+
+**Verification**: 用户付款后看到真实二维码，非占位符。
+
+---
+
+## Risks & Dependencies
+
+### 风险
+
+1. **管理员 UI 复杂度**: 管理员后台涉及多个面板（审核列表、详情、同步表单、配置），HTML 和 JS 代码量较大。**缓解**: 分三个实现单元（U1/U2/U3）逐步实现，每个单元可独立验证。
+
+2. **Order 付款流程简化**: 本次创建订单即视为已付款，不对接真实支付。后续对接支付网关时需重构。**缓解**: Order 模型已预留 `status` 字段，后续扩展状态机即可。
+
+3. **创作者卡片状态展示复杂性**: `reviewStatus` 和 `status` 两个状态字段的展示逻辑需仔细设计，避免混淆。**缓解**: KTD5 明确了优先级规则——`reviewStatus` 优先，仅 `synced` 时显示 `status`。
+
+### 依赖
+
+- 后端管理员 API 已全部就绪（U1-U3 依赖）
+- 后端 `GET /api/roles/my/roles` 已返回所需字段（U4 依赖）
+- Order 模型已在 Prisma schema 中定义（U5 依赖）
+- 前端 `payRole()` 函数已存在（U6 修改对象）
+
+---
+
+## Deferred to Follow-Up Work
+
+- 微信 OAuth 真实接入（hermes-server/src/routes/bind.js 的 `wechat_oauth_placeholder`）
+- 收入/提现后端 API（当前仍为前端 Mock 数据）
+- 真实支付网关对接（当前创建订单即视为已付款）
+- 角色删除/上下架切换
+- 定时任务调度逻辑（enableSchedule 标志已传递，但 Hermes Server 无实际调度）
+- 管理员后台移动端适配优化（本次优先功能完整性）
+
+---
+
+## System-Wide Impact
+
+- **用户**: 普通用户在角色详情页付款后能看到真实二维码（U6）
+- **创作者**: 创作者可在角色列表看到审核状态和二维码（U4）
+- **管理员**: 管理员可通过浏览器完成审核和同步操作（U1-U3）
+- **数据库**: Order 表开始有数据写入（U5）
+- **API**: 新增 `/api/orders` 路由（U5）
+
+---
+
+## Acceptance Examples
+
+- **AE1**: 管理员访问 `#admin`，登录后看到待审核角色列表，点击「通过」→ 角色状态变为 approved → 点击「发起同步」→ 填写参数 → 显示二维码
+- **AE2**: 创作者创建角色后，在角色列表看到「待审核」标签 → 管理员驳回后，看到「已驳回」+ 驳回原因 → 修改后重新提交，看到「待审核」
+- **AE3**: 用户在角色详情页点击「立即订阅」→ 调用 API 创建订单 → 显示真实二维码 → 用户扫码绑定
diff --git a/e2e/roles.spec.js b/e2e/roles.spec.js
index 1cfc028..695bc7a 100644
--- a/e2e/roles.spec.js
+++ b/e2e/roles.spec.js
@@ -47,6 +47,7 @@ test.describe('角色库与角色详情', () => {
status: 'running',
reviewStatus: 'synced',
avatar: 'https://example.com/avatar.png',
+ qrCodeUrl: 'https://example.com/qr.png',
},
});
});
diff --git a/index.html b/index.html
index efe8198..92adb6a 100644
--- a/index.html
+++ b/index.html
@@ -587,6 +587,73 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+