+
+ );
+};
+
+const th: React.CSSProperties = { padding: '12px 14px', textAlign: 'left', fontSize: 12, fontWeight: 600, color: '#475569', whiteSpace: 'nowrap' };
+const td: React.CSSProperties = { padding: '12px 14px', color: '#1A1F36' };
+const btnPrimary: React.CSSProperties = { padding: '4px 12px', background: PRIMARY_COLOR, color: '#fff', border: 'none', borderRadius: 6, fontSize: 12, cursor: 'pointer' };
+const btnWarn: React.CSSProperties = { padding: '4px 12px', background: '#FEF3C7', color: '#D97706', border: 'none', borderRadius: 6, fontSize: 12, cursor: 'pointer' };
+const btnDanger: React.CSSProperties = { padding: '4px 12px', background: '#FEE2E2', color: '#DC2626', border: 'none', borderRadius: 6, fontSize: 12, cursor: 'pointer' };
+
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+ return (
+
+
+
+
+
+ {toast && (
+ 应用产品管理
++ 审核 / 挂起 / 恢复 / 下线 独立可部署产品(MuMuAINovel 等)。共 {total} 条记录。 +
+{toast.msg}
+ )}
+
+ {/* 过滤栏 */}
+
+ { setSearch(e.target.value); setPage(1); }}
+ placeholder="搜索产品名称 / slug…"
+ style={{ flex: '1 1 240px', minWidth: 240, padding: '8px 14px', border: '1px solid #E5E7EB', borderRadius: 6, fontSize: 13, outline: 'none' }}
+ />
+
+
+
+
+ {/* 左: 表格 */}
+
+
+ {loading ? (
+
+
+
+ )}
+ {totalPages > 1 && (
+
+
+ {/* 右: 详情侧栏 */}
+ {selected && (
+ 加载中…
+ ) : items.length === 0 ? (
+
+
+ ) : (
+ 📭
+ 暂无产品记录
+ | 名称 | +Slug | +形态 | +计费 | +状态 | +上架时间 | +操作 | +
|---|---|---|---|---|---|---|
|
+
+
+ 🚀
+ {p.name}
+ |
+ {p.slug} | +{p.product_kind} | +{p.billing_plan} | ++ {sc.label} + | +{(p.published_at || '').slice(0, 10) || '—'} | + e.stopPropagation()}>
+
+ {p.status === 'pending' && (
+
+ )}
+ {p.status === 'active' && (
+
+ )}
+ {p.status === 'suspended' && (
+
+ )}
+ {p.status !== 'deprecated' && (
+
+ )}
+
+ |
+
+
+ 第 {page} / {totalPages} 页
+
+
+ )}
+
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+
+
+ )}
+
+
+ {selected.name}
+
+
+
+
+
+ 健康探针历史 ({healthHistory.length} 条)
+ {healthHistory.length === 0 ? (
+ 暂无记录
+ ) : (
+
+ {healthHistory.slice(0, 15).map((h) => {
+ const c = h.status === 'healthy' ? '#10b981' : h.status === 'degraded' ? '#f59e0b' : '#ef4444';
+ return (
+
+ )}
+
+ ● {h.status}
+ {h.latency_ms != null ? `${h.latency_ms}ms` : '—'} · {fmtDate(h.checked_at).slice(5, 16)}
+
+ );
+ })}
+
+ {label}
+ {value}
+
+ );
+}
+
+function pageBtn(): React.CSSProperties {
+ return { padding: '6px 12px', background: '#F0F2F8', border: '1px solid #E5E7EB', borderRadius: 6, color: '#1A1F36', fontSize: 12, cursor: 'pointer' };
+}
+
+export default MarketProductsAdmin;
diff --git a/frontend/src/pages/front/MarketProductDetail.tsx b/frontend/src/pages/front/MarketProductDetail.tsx
new file mode 100644
index 0000000..7d2af28
--- /dev/null
+++ b/frontend/src/pages/front/MarketProductDetail.tsx
@@ -0,0 +1,302 @@
+// 应用市场 — 详情页 /marketplace/products/:id
+// tabs: 概览(endpoint + 健康) / 接入指南(OIDC 跳转) / 评论(预留)
+import React, { useEffect, useState, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import marketProductAPI, {
+ type MarketProductDetail,
+ PRIMARY_COLOR,
+} from '@/api/marketProductAPI';
+
+type Tab = 'overview' | 'guide';
+
+function fmtDate(s?: string | null) {
+ if (!s) return '—';
+ try {
+ return new Date(s).toLocaleString('zh-CN', { hour12: false });
+ } catch { return s; }
+}
+
+const MarketProductDetail: React.FC = () => {
+ const { id = '' } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState(true);
+ const [product, setProduct] = useState
+ 加载中…
+
+ );
+ }
+
+ if (!product) {
+ return (
+
+
+ );
+ }
+
+ const health = product.health;
+ const healthOk = health?.status === 'healthy';
+ const healthColor = healthOk ? '#10b981' : health?.status === 'degraded' ? '#f59e0b' : health?.status === 'down' ? '#ef4444' : '#9CA3AF';
+
+ return (
+ 未找到该产品
+
+
+
+ {/* Toast */}
+ {toast && (
+
{toast.msg}
+ )}
+
+ {/* Breadcrumb */}
+
+ navigate('/marketplace/products')} style={{ color: PRIMARY_COLOR, cursor: 'pointer' }}>应用市场
+ /
+ {product.name}
+
+
+ {/* Hero banner */}
+
+
+
+
+ {product.icon_url ? 
: '🚀'}
+
+
+
+
+
+ {product.name}
+ {product.product_kind} + {product.billing_plan} + + + {health?.status || '未知'} · {health?.latency_ms != null ? `${health.latency_ms} ms` : '—'} + + {product.status === 'suspended' && 已挂起} +{product.description || '暂无描述'}
+
+ v{product.metadata?.version || '1.0.0'}
+ · 上架于 {fmtDate(product.published_at)}
+ {product.requires_approval && · 需申请访问}
+
+
+ {/* 左: tabs 区 */}
+
+ {/* tabs header */}
+
+
+ {/* 右: 申请/打开 sticky */}
+
+ {(['overview', 'guide'] as Tab[]).map((t) => (
+
+ ))}
+
+
+ {tab === 'overview' && (
+
+
+
+
+
+ {product.scopes && product.scopes.length > 0 ? (
+
+
+
+
+ )}
+ {tab === 'guide' && (
+
+ {product.scopes.map((s) => (
+ {s}
+ ))}
+
+ ) : 无特殊授权范围
}
+
+ 最近一次探针: {health?.status || '未知'} · {fmtDate(health?.checked_at)}
+ {health?.message &&
+ 备注: {health.message}
}
+
+
+
+
+
+
+
+
+ )}
+ + 本产品采用 OIDC 单点登录。点击右侧"{product.requires_approval ? '申请访问' : '立即打开'}"按钮后, + 平台会生成一次性 OIDC 跳转地址,自动携带短期 Bearer Token。重定向到产品端后将获得你的身份与权限范围。 +
+
+{`# 1. 获取跳转地址(后端已封装为 launch_url,浏览器可直接跳转)
+POST /app/api/market/products/${product.id}/launch
+Authorization: Bearer
+
+# 2. 跳转后产品在 Authorization 头拿到短期 token,验证身份后进入主界面
+GET ${product.endpoint_url || 'https://.../api/me'}
+Authorization: Bearer `}
+
+ -
+
- OIDC token 有效期 15 分钟,过期需重新跳转获取。 +
- 产品运行独立容器,故障与平台主服务隔离。 +
- 如需取消授权,在产品内登出或联系客服。 +
+
+ {!product.has_access ? (
+ <>
+
+ {product.requires_approval ? '申请访问权限' : '立即使用'}
+
+ {product.requires_approval && (
+