feat(ui): guest browse mode — browse marketplace without login (US-1)

ui/README.md

@@ -28,7 +28,12 @@ python3 -m http.server 8000 --directory ui
 
 ## 页面清单
 
-登录页：单一入口（邮箱登录占位），不做公共版/企业版二选一。
+登录页：单一入口（邮箱登录占位），不做公共版/企业版二选一；登录页含 **点数机制说明（US-2）**（1 点 ≈ 1 元 · 消费可小数 · 每日赠送 1 点等），并提供「**游客浏览**」入口（US-1）。
+
+**游客模式（US-1）**：未登录可点击「先逛逛市场」免登录进入模型市场——
+- 游客可：浏览模型、搜索、厂商筛选、排序、查看点数价格；
+- 游客不可：使用/消费模型（提示「请先登录」）、访问钱包/共享/交易/设置/管理视图（导航仅显示「市场」，其余页面点击提示需登录）；
+- 登录后退出游客模式恢复完整导航；登出回到登录页（含游客浏览入口）。
 
 同一套界面（角色视图）：
 

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; }

ui/index.html

@@ -27,8 +27,21 @@ <h1>AITokenPool</h1>
       </label>
       <button type="submit" class="btn btn-primary btn-block">进入平台 <span class="en">(Enter)</span></button>
     </form>
+    <div class="login-divider"><span>或</span></div>
+    <button type="button" class="btn btn-ghost btn-block" id="guest-browse-btn">先逛逛市场 <span class="en">(Guest browse)</span></button>
     <p class="login-foot">还没有账号？<a href="#">注册 <span class="en">Register</span></a> · <a href="#">找回密码</a></p>
     <p class="login-tip">静态演示原型 · 数据为内嵌 mock，无真实后端 · 管理员与普通用户由账号角色决定登录后看到的界面</p>
+
+    <!-- 点数机制说明（US-2）：登录页可见 -->
+    <div class="login-points">
+      <h4>点数机制 <span class="en">Points</span></h4>
+      <ul>
+        <li>1 点 ≈ 1 元人民币 · 消费点数可为小数（如 -0.37 点）</li>
+        <li>每日赠送 1 点（当日有效）· 连送 10 天，防薅羊毛</li>
+        <li>分享收益 &amp; 充值点数永久有效 · 分享收益扣 10% 平台分成</li>
+        <li>未登录可先浏览市场；使用 / 消费需登录</li>
+      </ul>
+    </div>
   </div>
 </div>
 

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,21 +821,45 @@
     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");
       toast("欢迎回来，阿零（演示账号）");
     });
 
     $("#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);