diff --git a/ui/README.md b/ui/README.md index e13c3d7..4aeb60e 100644 --- a/ui/README.md +++ b/ui/README.md @@ -28,7 +28,12 @@ python3 -m http.server 8000 --directory ui ## 页面清单 -登录页:单一入口(邮箱登录占位),不做公共版/企业版二选一。 +登录页:单一入口(邮箱登录占位),不做公共版/企业版二选一;登录页含 **点数机制说明(US-2)**(1 点 ≈ 1 元 · 消费可小数 · 每日赠送 1 点等),并提供「**游客浏览**」入口(US-1)。 + +**游客模式(US-1)**:未登录可点击「先逛逛市场」免登录进入模型市场—— +- 游客可:浏览模型、搜索、厂商筛选、排序、查看点数价格; +- 游客不可:使用/消费模型(提示「请先登录」)、访问钱包/共享/交易/设置/管理视图(导航仅显示「市场」,其余页面点击提示需登录); +- 登录后退出游客模式恢复完整导航;登出回到登录页(含游客浏览入口)。 同一套界面(角色视图): diff --git a/ui/css/style.css b/ui/css/style.css index 19c6b6c..80f8037 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -310,6 +310,17 @@ select.input option { background: var(--bg-card); } .login-foot a { color: var(--accent-text); text-decoration: none; } .login-tip { margin-top: 14px; text-align: center; color: var(--text-mute); font-size: 11px; } +/* 登录页点数机制说明(US-2) */ +.login-points { + margin-top: 18px; padding: 12px 14px; + background: rgba(78, 205, 196, 0.06); + border: 1px dashed var(--border); + border-radius: 10px; +} +.login-points h4 { font-size: 13px; margin-bottom: 8px; color: var(--text); } +.login-points ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; } +.login-points li { font-size: 12px; color: var(--text-dim); line-height: 1.5; } + /* ---------- 应用布局 ---------- */ .app { display: flex; height: 100vh; overflow: hidden; } diff --git a/ui/index.html b/ui/index.html index 737ef3d..4711dfd 100644 --- a/ui/index.html +++ b/ui/index.html @@ -27,8 +27,21 @@

AITokenPool

+
或
+

还没有账号?注册 Register · 找回密码

静态演示原型 · 数据为内嵌 mock,无真实后端 · 管理员与普通用户由账号角色决定登录后看到的界面

+ + +
+

点数机制 Points

+ +
diff --git a/ui/js/app.js b/ui/js/app.js index 20de225..909cf25 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -13,6 +13,7 @@ let activeView = "dashboard"; let txTab = "all"; + let isGuest = false; // 游客模式(US-1:未登录可浏览市场) // MRT 风格表格状态(页面级变量:切换页面不丢失排序/筛选/分页) const txTable = { sort: [], filters: {}, page: 1, pageSize: 10 }; @@ -82,10 +83,18 @@ admin: "管理视图 Admin", }; + // 游客可见的页面(US-1:仅市场;其余需登录) + const GUEST_VIEWS = ["marketplace"]; + function renderNav() { const nav = $("#nav"); nav.innerHTML = ""; - NAV.forEach((group) => { + const groups = isGuest + ? [{ g: "游客浏览", items: [ + { id: "marketplace", ico: "🛒", label: "模型市场 Marketplace" }, + ]}] + : NAV; + groups.forEach((group) => { const g = document.createElement("div"); g.className = "nav-group"; g.textContent = group.g; @@ -105,10 +114,15 @@ nav.appendChild(b); }); }); - $("#mode-label").textContent = "共享市场 · 角色视图"; + $("#mode-label").textContent = isGuest ? "游客模式 · 仅浏览市场" : "共享市场 · 角色视图"; } function switchView(id) { + // 游客限制(US-1):非市场页面 → 提示需登录 + if (isGuest && !GUEST_VIEWS.includes(id)) { + toast("请先登录后再访问「" + (VIEW_TITLE[id] || id) + "」"); + return; + } activeView = id; $$(".view").forEach((v) => v.classList.add("hidden")); $("#view-" + id).classList.remove("hidden"); @@ -807,12 +821,37 @@ toast("已扣 " + D.fmt(cost) + " 点(模拟 0.19M tokens)"); } + /* ---------------- 游客模式(US-1:未登录浏览市场) ---------------- */ + + function enterGuest() { + isGuest = true; + activeView = "marketplace"; + $("#login-view").classList.add("hidden"); + $("#app").classList.remove("hidden"); + document.querySelector(".user-chip").classList.add("hidden"); + renderNav(); + switchView("marketplace"); + toast("游客模式:可浏览模型市场,使用 / 消费需登录"); + } + + function exitGuest() { + isGuest = false; + $("#app").classList.add("hidden"); + document.querySelector(".user-chip").classList.remove("hidden"); + $("#login-view").classList.remove("hidden"); + } + /* ---------------- 事件 ---------------- */ function bindEvents() { + // 游客浏览(US-1:登录页入口 → 免登录进入市场) + $("#guest-browse-btn").addEventListener("click", enterGuest); + // 登录(单一入口,角色由账号决定) $("#login-form").addEventListener("submit", (e) => { e.preventDefault(); + isGuest = false; + document.querySelector(".user-chip").classList.remove("hidden"); $("#login-view").classList.add("hidden"); $("#app").classList.remove("hidden"); switchView("dashboard"); @@ -820,8 +859,7 @@ }); $("#logout-btn").addEventListener("click", () => { - $("#app").classList.add("hidden"); - $("#login-view").classList.remove("hidden"); + exitGuest(); toast("已退出(静态演示)"); }); @@ -834,10 +872,11 @@ $("#mk-provider").dataset.init = "1"; } - // 市场页:使用 / 消费(G4:聊天 Mock 扣小数点数并产生 consume 交易) + // 市场页:使用 / 消费(G4:聊天 Mock 扣小数点数并产生 consume 交易;游客需先登录 US-1) $("#mk-body").addEventListener("click", (e) => { const b = e.target.closest("[data-use-model]"); if (!b) return; + if (isGuest) { toast("请先登录后再使用 / 消费模型"); return; } openChat(Number(b.dataset.useModel)); }); $("#chat-send").addEventListener("click", sendChat);