From 8d97be9f9ac958fd376eb9a53ced200a2384c1f5 Mon Sep 17 00:00:00 2001
From: argszero <argszero@argszerodeMac-mini.local>
Date: Fri, 11 Sep 2026 17:47:11 +0800
Subject: [PATCH] feat(ui): redesign dashboard/marketplace/sharing views on the
 landed component layer

Adapt the dashboard, model-market and sharing views to the new prototype
(rant 2026-09-11T16:23:43, PR 4 of 6). Pure front-end; no API contract change.

Dashboard: add the page-head breadcrumb + "call a model" action, move the
sharings mini-list into its own card with a "manage sharing" ghost button, and
add the new 14-day consumption-vs-earnings two-colour bar chart fed by the real
/api/transactions/trend endpoint (same income/expense semantics as the
transactions view, which was reused instead of the 7-day /api/dashboard series
so both pages agree).

The backend aggregates with GROUP BY, so days without transactions come back as
missing rows, not zero rows. A fixed 14-column chart would then shift bars left
and mislabel the axis, so the renderer now densifies the window to DASH_TREND_DAYS
(empty days render as 0-height columns) and the request start is anchored to UTC
midnight to line up with the backend's UTC day buckets.

Marketplace: toolbar gain an availability filter (all / available only) and a
count aligned right; the provider and model columns merge into one .provider-cell
(status dot + provider + model name), a capability column renders only real
backend fields (vision tag; peak-pricing tag for models with peak rates), and the
availability column becomes a three-state pill carrying the real key count
(>=2 available / ==1 tight / 0 no key, with "use" disabled when no key). New
mk.avail.* / mk.col.caps / mk.cap.* keys; the now-unused mk.col.provider,
mk.col.model, mk.avail and mk.busy entries were dropped from both languages.

Sharing: move "list a new key" into the page-head as a primary action with the
form as a sibling card, add the availability time-window column (real
available_days / available_start / available_end), and render used/quota as a
progress bar next to the numbers. share.col.time is dropped in favour of
share.col.avail in both languages.

Also define .mt16/.mb16, which the new layout uses but the stylesheet never
declared.

i18n stays complete: ZH/EN dictionaries are in exact parity and every data-i18n
attribute plus every T() call in app.js resolves.
---
 ui/css/style.css |   5 ++
 ui/index.html    |  91 +++++++++++++++++++++++---------
 ui/js/app.js     | 135 ++++++++++++++++++++++++++++++++++++++++++-----
 ui/js/i18n.js    |  64 +++++++++++++++++-----
 4 files changed, 244 insertions(+), 51 deletions(-)

diff --git a/ui/css/style.css b/ui/css/style.css
index 6c2a8ba..19c8045 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -1108,6 +1108,11 @@ table.dt td.num, table.dt th.num { text-align: right; font-family: var(--mono);
 /* .search 的原型定位规则见上方「搜索增强」（线上既有实现即原型形态） */
 .toolbar .grow { flex: 1; }
 
+/* ---- 间距工具类（原型 .mt16/.mb16：视图内卡片纵向节奏；rant 2026-09-11T16:23:43
+   第 3/5 节新布局用到，此前标记在用但样式表未定义） ---- */
+.mt16 { margin-top: 16px; }
+.mb16 { margin-bottom: 16px; }
+
 /* ---- 表单 ---- */
 /* label.f：原型表单标签（纵向 label + 说明文字） */
 .form label.f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
diff --git a/ui/index.html b/ui/index.html
index 263a24e..1d960eb 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -168,27 +168,54 @@ <h2 id="auth-title" data-i18n="login.title">进入平台</h2>
     <!-- 仪表盘 Dashboard -->
     <section class="view" id="view-dashboard">
       <header class="page-head">
-        <h2 data-i18n="view.dashboard">仪表盘</h2>
-        <p data-i18n="view.dashboard.sub">总览你的点数、用量与收益</p>
+        <div>
+          <div class="crumb" data-i18n="dash.crumb">/ 仪表盘</div>
+          <h2 data-i18n="view.dashboard">仪表盘</h2>
+          <p data-i18n="view.dashboard.sub">总览你的点数、用量与收益</p>
+        </div>
+        <button type="button" class="btn btn-secondary btn-sm" data-goto="marketplace" data-i18n="dash.gotoMarket">去市场调用模型</button>
       </header>
       <div class="stat-grid" id="dash-stats"></div>
-      <div class="card-grid">
+      <div class="split mt16">
         <div class="card">
-          <h3 data-i18n="dash.sharings">我的共享</h3>
-          <div class="mini-list" id="dash-sharings"></div>
+          <div class="spread">
+            <div>
+              <h3 data-i18n="dash.trend">近 14 天消耗与收益</h3>
+              <p class="card-sub" data-i18n="dash.trend.sub">单位：点数 · 每日合计</p>
+            </div>
+          </div>
+          <div class="trend" id="dash-trend"></div>
+          <div class="legend" id="dash-trend-legend">
+            <span><i class="consume"></i><span data-i18n="dash.trend.consume">消费</span></span>
+            <span><i class="earn"></i><span data-i18n="dash.trend.earn">共享收益</span></span>
+          </div>
         </div>
         <div class="card">
           <h3 data-i18n="dash.month">本月点数变化</h3>
+          <p class="card-sub" data-i18n="dash.month.sub">最近几笔累计</p>
           <div class="mini-list" id="dash-month-changes"></div>
         </div>
       </div>
+      <div class="card mt16">
+        <div class="spread">
+          <div>
+            <h3 data-i18n="dash.sharings">我的共享</h3>
+            <p class="card-sub" data-i18n="dash.sharings.sub">上架中的 key 与实时用量</p>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm" data-goto="sharing" data-i18n="dash.manageSharing">管理共享</button>
+        </div>
+        <div class="mini-list" id="dash-sharings"></div>
+      </div>
     </section>
 
     <!-- 模型市场 Marketplace -->
     <section class="view hidden" id="view-marketplace">
       <header class="page-head">
-        <h2 data-i18n="view.marketplace">模型市场</h2>
-        <p data-i18n="view.marketplace.sub">浏览 / 搜索各家模型，按点数计价</p>
+        <div>
+          <div class="crumb" data-i18n="mk.crumb">/ 模型市场</div>
+          <h2 data-i18n="view.marketplace">模型市场</h2>
+          <p data-i18n="view.marketplace.sub">浏览 / 搜索各家模型，按点数计价</p>
+        </div>
       </header>
       <div class="toolbar">
         <span class="search">
@@ -204,18 +231,31 @@ <h2 data-i18n="view.marketplace">模型市场</h2>
           <option value="price-desc" data-i18n="mk.sort.priceDesc">输入价 高→低</option>
           <option value="ctx-desc" data-i18n="mk.sort.ctxDesc">上下文 大→小</option>
         </select>
+        <select id="mk-avail" class="input">
+          <option value="all" data-i18n="mk.avail.all">全部可用性</option>
+          <option value="yes" data-i18n="mk.avail.yes">仅可用</option>
+        </select>
+        <span class="grow"></span>
         <span class="toolbar-count" id="mk-count"></span>
       </div>
       <!-- 最近使用（rant 20:46:57 D：localStorage 最近 5 个去重，复用 .chip，点击直接使用） -->
       <div class="recent-row" id="mk-recent" hidden>
         <span class="recent-label" data-i18n="mk.recent">最近使用</span>
         <span class="chips" id="mk-recent-chips"></span>
-        <button type="button" class="btn btn-ghost" data-mk-recent-clear data-i18n-title="mk.recent.clear.title" data-i18n="mk.recent.clear" title="清空最近使用记录">清空</button>
+        <button type="button" class="btn btn-ghost btn-sm" data-mk-recent-clear data-i18n-title="mk.recent.clear.title" data-i18n="mk.recent.clear" title="清空最近使用记录">清空</button>
       </div>
       <div class="table-wrap">
         <table class="table">
           <thead>
-            <tr><th data-i18n="mk.col.provider">厂商 Provider</th><th data-i18n="mk.col.model">模型 Model</th><th class="num" data-i18n="mk.col.in">输入价 /1M</th><th class="num" data-i18n="mk.col.out">输出价 /1M</th><th class="num" data-i18n="mk.col.ctx">上下文</th><th data-i18n="mk.col.avail">可用性</th><th data-i18n="mk.col.action">操作</th></tr>
+            <tr>
+              <th data-i18n="mk.col.providerModel">厂商 / 模型</th>
+              <th class="num" data-i18n="mk.col.in">输入价 /1M</th>
+              <th class="num" data-i18n="mk.col.out">输出价 /1M</th>
+              <th class="num" data-i18n="mk.col.ctx">上下文</th>
+              <th data-i18n="mk.col.caps">能力</th>
+              <th data-i18n="mk.col.avail">可用性</th>
+              <th data-i18n="mk.col.action">操作</th>
+            </tr>
           </thead>
           <tbody id="mk-body"></tbody>
         </table>
@@ -225,15 +265,15 @@ <h2 data-i18n="view.marketplace">模型市场</h2>
     <!-- 共享管理 Sharing -->
     <section class="view hidden" id="view-sharing">
       <header class="page-head">
-        <h2 data-i18n="view.sharing">共享管理</h2>
-        <p data-i18n="view.sharing.sub">上架闲置 key 赚点数 · 管理共享中的 key</p>
+        <div>
+          <div class="crumb" data-i18n="share.crumb">/ 共享管理</div>
+          <h2 data-i18n="view.sharing">共享管理</h2>
+          <p data-i18n="view.sharing.sub">上架闲置 key 赚点数 · 管理共享中的 key</p>
+        </div>
+        <button type="button" class="btn btn-primary btn-sm" id="share-add-btn" data-i18n="share.add">＋ 上架新 key</button>
       </header>
       <div class="stat-grid" id="share-stats"></div>
-      <div class="toolbar">
-        <button type="button" class="btn btn-primary" id="share-add-btn" data-i18n="share.add">＋ 添加 / 上架新 key</button>
-      </div>
-      <div class="card-grid">
-        <div class="card" id="share-form-card" hidden>
+      <div class="card mt16" id="share-form-card" hidden>
           <h3 data-i18n="share.form.title">上架新 key</h3>
           <form id="share-form" class="form">
             <div class="form-row">
@@ -289,16 +329,15 @@ <h3 data-i18n="share.form.title">上架新 key</h3>
               <button type="button" class="btn btn-ghost" id="sf-cancel" data-i18n="share.form.cancel">取消</button>
             </div>
           </form>
-        </div>
-        <div class="card">
-          <h3 data-i18n="share.list">我的共享列表</h3>
-          <p class="muted" data-i18n="share.earned">收益已到账</p>
-          <div class="table-wrap compact">
-            <table class="table">
-              <thead><tr><th data-i18n="share.col.provider">厂商 · Plan / 模型</th><th data-i18n="share.col.key">Key</th><th class="num" data-i18n="share.col.used">已用/额度</th><th class="num" data-i18n="share.col.price">单价</th><th class="num" data-i18n="share.col.earn">收益</th><th data-i18n="share.col.time">上架时间</th><th data-i18n="share.col.status">状态</th><th></th></tr></thead>
-              <tbody id="share-body"></tbody>
-            </table>
-          </div>
+      </div>
+      <div class="card mt16">
+        <h3 data-i18n="share.list">我的共享列表</h3>
+        <p class="card-sub" data-i18n="share.earned">收益已到账 · 可暂停 / 下线</p>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th data-i18n="share.col.provider">厂商 · Plan / 模型</th><th data-i18n="share.col.key">Key</th><th class="num" data-i18n="share.col.used">已用 / 额度</th><th class="num" data-i18n="share.col.price">单价</th><th class="num" data-i18n="share.col.earn">收益</th><th data-i18n="share.col.avail">可用时段</th><th data-i18n="share.col.status">状态</th><th></th></tr></thead>
+            <tbody id="share-body"></tbody>
+          </table>
         </div>
       </div>
     </section>
diff --git a/ui/js/app.js b/ui/js/app.js
index 6ccdb26..9e21d63 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -586,6 +586,8 @@
       stat(T("dash.trades"), T("cnt.trades", { n: tradeCount }), T("dash.trades.sub")),
     ].join("");
 
+    renderDashTrend();
+
     // 降级原则（rant 2026-08-19T15:48:17 / 15:54:06）：mock 只用于游客模式；
     // 登录态加载失败 → 空态 + 重试（loadErrorHtml），不静默 fallback 到 D.SHARINGS
     const shares = Live.sharings ? sharingsToView(Live.sharings) : (loggedIn() ? null : (D.SHARINGS || []));
@@ -612,6 +614,61 @@
     renderMonthChanges();
   }
 
+  // 仪表盘「近 14 天消耗与收益」双色柱图（rant 2026-09-11T16:23:43 第 3 节：仪表盘新增
+  // 双色趋势图，消费=accent / 共享收益=ok，含 .legend 图例，柱高按当日 max 归一，最小高度 2%）。
+  // 零 mock：数据源为 /api/transactions/trend（income/expense 已按日聚合，口径与交易页一致），
+  // 登录态失败 → 空态文案，绝不回落 D. 静态序列（rant 15:54:06）。
+  //
+  // 补齐空日（DASH_TREND_DAYS）：后端 GROUP BY 只返回「有交易」的日桶，无交易的日期直接缺行。
+  // 原型是固定 14 列柱图，缺行会让柱子左右移位、横轴节奏错乱（今天可能不在最右）。
+  // 故按请求窗口铺满 14 天，缺数据的日子补 0（柱高 min 2%，tooltip 显示 0），保持固定节奏。
+  function dashTrendDays(buckets) {
+    const byKey = new Map();
+    buckets.forEach((b) => {
+      const d = new Date(b.t);
+      if (!isNaN(d.getTime())) byKey.set(d.toISOString().slice(0, 10), b);
+    });
+    // 窗口与 loadDashboard 请求的 start（now - 13d）对齐，锚点取 UTC 日（后端 time 亦是 UTC）
+    const now = new Date();
+    const todayUtc = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+    const days = [];
+    for (let i = DASH_TREND_DAYS - 1; i >= 0; i--) {
+      const t = new Date(todayUtc - i * 864e5).toISOString().slice(0, 10);
+      days.push(byKey.get(t) || { t: t + "T00:00:00Z", income: 0, expense: 0, tokens: 0, count: 0 });
+    }
+    return days;
+  }
+
+  function renderDashTrend() {
+    const el = $("#dash-trend");
+    if (!el) return;
+    const tr = (Live.dashboardTrend && Array.isArray(Live.dashboardTrend.buckets)) ? Live.dashboardTrend : null;
+    const raw = tr ? tr.buckets : [];
+    const logged = loggedIn();
+    if (!logged) {
+      el.innerHTML = '<div class="empty compact">' + esc(T("dash.trend.guest")) + "</div>";
+      return;
+    }
+    // 窗口内一笔交易都没有 → 空态（保留零 mock 语义，不去画一排 0 柱）
+    if (!raw.length) {
+      el.innerHTML = '<div class="empty compact">' + esc(Live.dashboardTrend === null ? T("dash.trend.fail") : T("dash.trend.empty")) + "</div>";
+      return;
+    }
+    const buckets = dashTrendDays(raw);
+    // 柱高按当日 max(消费, 收益) 归一，最小高度 2%（原型规则）
+    const max = Math.max(1, ...buckets.map((b) => Math.max(b.expense || 0, b.income || 0)));
+    el.innerHTML = buckets.map((b) => {
+      const c = b.expense || 0, e = b.income || 0;
+      const day = bucketLabel(b.t, "day");
+      const h = (v) => Math.max(2, (v / max) * 100).toFixed(1);
+      const tip = day + " " + T("dash.trend.consume") + " " + D.fmt(c) + " / " + T("dash.trend.earn") + " " + D.fmt(e);
+      return '<div class="trend-col" title="' + esc(tip) + '"><div class="trend-pair">' +
+        '<div class="trend-bar consume" style="height:' + h(c) + '%"></div>' +
+        '<div class="trend-bar earn" style="height:' + h(e) + '%"></div>' +
+        '</div><span class="trend-x">' + esc(day) + "</span></div>";
+    }).join("");
+  }
+
   // P2-B：拉取仪表盘所需数据（wallet + dashboard + sharings + 交易数）
   async function loadDashboard() {
     if (!loggedIn()) return;
@@ -619,6 +676,16 @@
     try {
       Live.dashboard = await api.get("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/api/dashboard");
     } catch (e) { Live.dashboard = null; }
+    // 近 14 天双色趋势（rant 2026-09-11T16:23:43 第 3 节）：复用交易页趋势接口，
+    // 按日聚合 income/expense，与列表同口径；失败 → null（renderDashTrend 显示空态，不 mock）。
+    // start 取「今天 UTC 零点 - 13 天」而非 now-13d：与后端 strftime('%Y-%m-%d', time)（UTC 日桶）
+    // 及 renderDashTrend 的补齐锚点三者对齐，否则跨零点时首桶会被截掉（窗口只剩 13 天）。
+    try {
+      const now = new Date();
+      const todayUtc = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+      const start = new Date(todayUtc - (DASH_TREND_DAYS - 1) * 864e5).toISOString();
+      Live.dashboardTrend = await api.get("/api/transactions/trend?type=all&bucket=day&start=" + encodeURIComponent(start));
+    } catch (e) { Live.dashboardTrend = null; }
     // 交易数统计（dash.trades）：拉 1 条取 total（零 mock，rant 2026-08-19T15:54:06）
     try {
       Live.transactions = await api.get("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/api/transactions?page=1&page_size=1");
@@ -716,6 +783,9 @@
       (!q || m.model.toLowerCase().includes(q) || m.provider.toLowerCase().includes(q)) &&
       (!prov || m.provider === prov)
     );
+    // 可用性筛选（rant 2026-09-11T16:23:43 第 4 节：all / 仅可用）
+    const avail = $("#mk-avail") ? $("#mk-avail").value : "all";
+    if (avail === "yes") list = list.filter((m) => m.avail);
     if (sort === "price-asc") list = [...list].sort((a, b) => a.in - b.in);
     else if (sort === "price-desc") list = [...list].sort((a, b) => b.in - a.in);
     else if (sort === "ctx-desc") list = [...list].sort((a, b) => b.ctx - a.ctx);
@@ -728,16 +798,21 @@
 
     $("#mk-count").textContent = T("cnt.on", { n: list.length });
     $("#mk-body").innerHTML = guestHint + (list.length ? list.map((m) =>
-      "<tr><td data-label='厂商'>" +
+      "<tr><td data-label='厂商 / 模型'>" +
+      '<div class="provider-cell">' +
       '<button type="button" class="row-expand" data-mk-expand="' + m.id + '" title="' + (mkExpanded === m.id ? T("mk.collapse") : T("mk.expand")) + '">' + (mkExpanded === m.id ? "−" : "+") + "</button>" +
-      hl(m.provider, rawQ) + "</td><td data-label='模型'><strong>" + hl(m.model, rawQ) + "</strong></td>" +
+      '<span class="dot' + (m.avail ? "" : " muted") + '"></span>' +
+      '<span><span class="muted" style="font-size:11.5px;display:block">' + hl(m.provider, rawQ) + "</span>" +
+      '<span class="model-name">' + hl(m.model, rawQ) + "</span></span></div></td>" +
       '<td class="num" data-label="输入价 /1M">' + D.fmt(m.in) + " " + T("common.points") +
       (m.peak ? ' <span class="tag tag-accent" title="' + esc(T("mk.peak.title", { n: m.peakMult })) + '">' + esc(T("mk.peak.badge", { n: m.peakMult })) + "</span>" : "") + "</td>" +
       '<td class="num" data-label="输出价 /1M">' + D.fmt(m.out) + " " + T("common.points") + "</td>" +
       '<td class="num" data-label="上下文">' + D.ctxFmt(m.ctx) + "</td>" +
-      "<td data-label='可用性'>" + (m.avail ? '<span class="pill pill-ok">' + T("mk.avail") + "</span>" : '<span class="pill pill-warn">' + T("mk.busy") + "</span>") +
-      (m.multi ? ' <span class="tag" title="' + T("mk.multi") + '">' + T("mk.multi") + "</span>" : "") + "</td>" +
-      "<td data-label='操作'><button class='btn btn-primary' style='padding:4px 10px;font-size:12px' data-use-model='" + m.id + "'" + (m.avail ? "" : " disabled") + ">" + T("mk.use") + "</button>" +
+      // 能力标签（rant 第 4 节：旗舰/推理 tag-accent，读图另加 tag）——仅渲染后端真实字段
+      '<td data-label="能力">' + capabilityTags(m) + "</td>" +
+      // 可用性 pill（rant 第 4 节：keys>=2 可用·N key / keys==1 紧张 / 无 key）
+      "<td data-label='可用性'>" + availPill(m) + "</td>" +
+      "<td data-label='操作'><button class='btn btn-primary btn-sm' data-use-model='" + m.id + "'" + (m.avail ? "" : " disabled") + ">" + T("mk.use") + "</button>" +
       // 零 mock：成功率后端暂无字段 → 仅当有真实值时展示（multi/success 已从 data.js 移除）
       (m.success != null ? "<div class='muted' style='margin-top:4px;font-size:12px'>" + T("mk.success", { p: m.success }) + "</div>" : "") + "</td></tr>" +
       (mkExpanded === m.id ? '<tr class="mk-detail"><td colspan="7">' + mkDetailHtml(m) + "</td></tr>" : "")
@@ -747,6 +822,24 @@
     renderRecent(); // 最近使用 chips（rant 20:46:57 D）
   }
 
+  // 能力标签（rant 2026-09-11T16:23:43 第 4 节）：只用后端真实字段渲染，缺字段则不出标签
+  // 读图 = vision；多 key = 多路可用；高峰计价 = peak（tag-accent 强调）
+  function capabilityTags(m) {
+    const tags = [];
+    if (m.vision) tags.push('<span class="tag" title="' + esc(T("mk.cap.vision.title")) + '">' + esc(T("mk.cap.vision")) + "</span>");
+    if (m.multi) tags.push('<span class="tag" title="' + esc(T("mk.multi")) + '">' + esc(T("mk.multi")) + "</span>");
+    if (m.peak) tags.push('<span class="tag tag-accent" title="' + esc(T("mk.peak.title", { n: m.peakMult })) + '">' + esc(T("mk.cap.peak")) + "</span>");
+    return tags.length ? tags.join(" ") : '<span class="muted">—</span>';
+  }
+
+  // 可用性 pill（rant 第 4 节）：key 数三态；无 key → muted 且「使用」按钮禁用
+  function availPill(m) {
+    const n = m.keys || 0;
+    if (n >= 2) return '<span class="pill pill-ok">' + esc(T("mk.avail.multi", { n: n })) + "</span>";
+    if (n === 1) return '<span class="pill pill-warn">' + esc(T("mk.avail.tight")) + "</span>";
+    return '<span class="pill pill-muted">' + esc(T("mk.avail.none")) + "</span>";
+  }
+
   // P2-B：拉取市场真实模型（登录时）；失败 → 空态 + 重试（不 mock，rant 15:54:06）
   async function loadMarketplace() {
     if (!loggedIn()) return;
@@ -843,19 +936,22 @@
       fillPlans();
     }
 
-    $("#share-body").innerHTML = list.length ? list.map((s, i) =>
-      "<tr><td data-label='厂商 · Plan / 模型'><strong>" + esc(provLabel(s.provider)) + " · " + esc(s.plan || "API") +
-      "</strong><div class='muted' style='font-size:12px'>" + esc(s.model) + " · " + esc(fmtAvailable(s)) + "</div></td>" +
+    $("#share-body").innerHTML = list.length ? list.map((s, i) => {
+      // 已用 / 额度 进度条（rant 2026-09-11T16:23:43 第 5 节：进度条 + 数字）
+      const pct = s.quota > 0 ? Math.min(100, Math.round((s.used / s.quota) * 100)) : 0;
+      return "<tr><td data-label='厂商 · Plan / 模型'><strong>" + esc(provLabel(s.provider)) + " · " + esc(s.plan || "API") +
+      "</strong><div class='muted' style='font-size:12px'>" + esc(s.model) + "</div></td>" +
       "<td data-label='Key' class='mono'>" + esc(maskKey(s.key)) + "</td>" +
-      "<td data-label='已用/额度' class='num'>" + D.fmt(s.used) + " / " + D.fmt(s.quota) + "</td>" +
+      "<td data-label='已用 / 额度' class='num'>" + D.fmt(s.used) + " / " + D.fmt(s.quota) +
+      '<div class="bar-track" style="margin-top:5px"><div class="bar-fill' + (pct >= 100 ? " alt" : "") + '" style="width:' + pct + '%"></div></div></td>' +
       '<td class="num" data-label="单价">' + D.fmt(s.price) + " " + T("share.priceUnit") + "</td>" +
       '<td class="num" data-label="收益">+' + D.fmt(s.earned) + " " + T("common.points") + "</td>" +
-      "<td data-label='上架时间'>" + timeCell(s.time) + "</td>" +
+      "<td data-label='可用时段'>" + esc(fmtAvailable(s)) + "</td>" +
       "<td data-label='状态'>" + badge(s.status, SHARE_STATUS) + "</td>" +
-      "<td data-label='操作'><button class='btn btn-ghost' data-share-toggle='" + i + "' style='padding:4px 10px;font-size:12px'>" +
+      "<td data-label='操作'><button class='btn btn-ghost btn-sm' data-share-toggle='" + i + "'>" +
       (s.status === "on" ? T("share.toggle.pause") : s.status === "paused" ? T("share.toggle.resume") : T("share.toggle.relist")) + "</button> " +
-      "<button class='btn btn-danger' data-share-delete='" + i + "' style='padding:4px 10px;font-size:12px'>" + T("common.delete") + "</button></td></tr>"
-    ).join("") : emptyRow(8, T("share.empty"), T("share.empty.sub"),
+      "<button class='btn btn-danger btn-sm' data-share-delete='" + i + "'>" + T("common.delete") + "</button></td></tr>";
+    }).join("") : emptyRow(8, T("share.empty"), T("share.empty.sub"),
       '<button type="button" class="btn btn-primary" data-share-add>' + T("share.empty.add") + "</button>");
     pulseTbody($("#share-body"));
   }
@@ -2752,6 +2848,9 @@
 
   /* ---------------- P2-B 真实 API 数据层（各视图 mock 数据逐步替换为后端） ---------------- */
 
+  // 仪表盘双色柱图窗口天数（rant 2026-09-11T16:23:43 第 3 节：原型为固定 14 列）
+  const DASH_TREND_DAYS = 14;
+
   // 各视图真实数据缓存：登录且加载成功后使用；游客 / 失败降级 mock
   const Live = {
     publicUrl: null,     // GET /api/config → public_url（接入端点 base，rant 2026-08-19T20:37:37）
@@ -2823,6 +2922,9 @@
         ctx: m.context_window || 0,
         avail: m.available_keys > 0,
         multi: (m.available_keys || 0) >= 2,
+        // rant 2026-09-11T16:23:43 第 4 节：可用性 pill 需显示真实 key 数、能力标签需 vision 字段
+        keys: m.available_keys || 0,
+        vision: !!m.vision,
         success: null,
         live: true,
       };
@@ -3173,6 +3275,8 @@
     wireSearch($("#mk-search"), renderMarketplace);
     $("#mk-provider").addEventListener("change", renderMarketplace);
     $("#mk-sort").addEventListener("change", renderMarketplace);
+    // 可用性筛选（rant 2026-09-11T16:23:43 第 4 节：all / 仅可用）
+    if ($("#mk-avail")) $("#mk-avail").addEventListener("change", renderMarketplace);
 
     // 市场页：使用 / 消费（G4：聊天 Mock 扣小数点数并产生 consume 交易；游客需先登录 US-1）
     $("#mk-body").addEventListener("click", (e) => {
@@ -3195,6 +3299,7 @@
         resetSearch($("#mk-search"));
         $("#mk-provider").value = "";
         $("#mk-sort").value = "default";
+        if ($("#mk-avail")) $("#mk-avail").value = "all";
         renderMarketplace();
       }
     });
@@ -3349,6 +3454,10 @@
     // 钱包页提示 → 跳转交易记录（明细统一入口）
     $("#wallet-goto-tx").addEventListener("click", () => switchView("transactions"));
 
+    // 仪表盘 page-head 动作按钮（rant 2026-09-11T16:23:43 第 3 节：去市场 / 管理共享）
+    // 容器级委托，避免为每个视图各绑一次；与原型 data-goto 语义一致
+    $$("[data-goto]").forEach((b) => b.addEventListener("click", () => switchView(b.dataset.goto)));
+
     // 交易 Tab（P2-B：切 tab 重新拉后端过滤数据）
     $$("#tx-tabs .tab").forEach((b) => b.addEventListener("click", () => { txTab = b.dataset.txTab; txTable.page = 1; renderTransactions(); if (loggedIn()) loadTransactions(); }));
     $("#tx-export-btn").addEventListener("click", exportTxCsv); // 导出 CSV（rant 20:46:57 E）
diff --git a/ui/js/i18n.js b/ui/js/i18n.js
index 9981124..6c16ed2 100644
--- a/ui/js/i18n.js
+++ b/ui/js/i18n.js
@@ -159,7 +159,19 @@
     "dash.earnings.sub": "本月收益",
     "dash.trades.sub": "含充值 / 消费 / 收益 / 赠送",
     "dash.sharings": "我的共享",
+    "dash.sharings.sub": "上架中的 key 与实时用量",
+    "dash.manageSharing": "管理共享",
+    "dash.crumb": "/ 仪表盘",
+    "dash.gotoMarket": "去市场调用模型",
+    "dash.trend": "近 14 天消耗与收益",
+    "dash.trend.sub": "单位：点数 · 每日合计",
+    "dash.trend.consume": "消费",
+    "dash.trend.earn": "共享收益",
+    "dash.trend.empty": "近 14 天暂无记录",
+    "dash.trend.guest": "登录后查看消耗与收益趋势",
+    "dash.trend.fail": "趋势数据加载失败",
     "dash.month": "本月点数变化",
+    "dash.month.sub": "最近几笔累计",
     "dash.used": "已用 {used} / {quota} 点 · 单价 {price} 点/1M",
     "dash.earned": "累计收益",
     "dash.noSharing": "还没有上架的 key",
@@ -168,6 +180,7 @@
     "dash.noChange": "本月暂无变动",
 
     /* ---- 模型市场 ---- */
+    "mk.crumb": "/ 模型市场",
     "mk.search.ph": "搜索模型名 / 厂商…",
     "mk.clear": "清空搜索",
     "mk.provider.all": "全部厂商",
@@ -175,20 +188,26 @@
     "mk.sort.priceAsc": "输入价 低→高",
     "mk.sort.priceDesc": "输入价 高→低",
     "mk.sort.ctxDesc": "上下文 大→小",
+    "mk.avail.all": "全部可用性",
+    "mk.avail.yes": "仅可用",
+    "mk.avail.multi": "可用 · {n} key",
+    "mk.avail.tight": "紧张",
+    "mk.avail.none": "无 key",
+    "mk.col.providerModel": "厂商 / 模型",
+    "mk.col.caps": "能力",
+    "mk.cap.vision": "读图",
+    "mk.cap.vision.title": "支持图片输入（vision）",
+    "mk.cap.peak": "高峰计价",
     "mk.count": "{n} 个在售 key",
     "mk.recent": "最近使用",
     "mk.recent.clear": "清空",
     "mk.recent.clear.title": "清空最近使用记录",
     "mk.recent.use": "点击直接使用",
-    "mk.col.provider": "厂商",
-    "mk.col.model": "模型",
     "mk.col.in": "输入价 /1M",
     "mk.col.out": "输出价 /1M",
     "mk.col.ctx": "上下文",
     "mk.col.avail": "可用性",
     "mk.col.action": "操作",
-    "mk.avail": "可用",
-    "mk.busy": "繁忙",
     "mk.multi": "多 key · 自动故障转移",
     "mk.use": "使用 / 消费",
     "mk.success": "成功率 {p}%",
@@ -218,7 +237,9 @@
     /* ---- 共享管理 ---- */
     "share.add": "＋ 添加 / 上架新 key",
     "share.list": "我的共享列表",
-    "share.earned": "收益已到账",
+    "share.earned": "收益已到账 · 可暂停 / 下线",
+    "share.crumb": "/ 共享管理",
+    "share.col.avail": "可用时段",
     "share.form.title": "上架新 key",
     "share.form.provider": "厂商",
     "share.form.plan": "Plan",
@@ -252,7 +273,6 @@
     "share.col.used": "已用/额度",
     "share.col.price": "单价",
     "share.col.earn": "收益",
-    "share.col.time": "上架时间",
     "share.col.status": "状态",
     "share.col.action": "操作",
     "share.status.on": "上架中",
@@ -897,7 +917,19 @@
     "dash.earnings.sub": "this month",
     "dash.trades.sub": "top-up / consume / earn / gift",
     "dash.sharings": "My sharings",
+    "dash.sharings.sub": "Listed keys and live usage",
+    "dash.manageSharing": "Manage sharing",
+    "dash.crumb": "/ Dashboard",
+    "dash.gotoMarket": "Call a model in the market",
+    "dash.trend": "Consumption & earnings, last 14 days",
+    "dash.trend.sub": "Unit: points · daily total",
+    "dash.trend.consume": "Consumption",
+    "dash.trend.earn": "Sharing earnings",
+    "dash.trend.empty": "No records in the last 14 days",
+    "dash.trend.guest": "Sign in to see consumption and earnings trends",
+    "dash.trend.fail": "Failed to load trend data",
     "dash.month": "Month point changes",
+    "dash.month.sub": "Recent cumulative entries",
     "dash.used": "Used {used} / {quota} pts · {price} pts/1M",
     "dash.earned": "total earned",
     "dash.noSharing": "No keys listed yet",
@@ -906,26 +938,33 @@
     "dash.noChange": "No changes this month",
 
     "mk.search.ph": "Search model / provider…",
+    "mk.crumb": "/ Marketplace",
     "mk.clear": "Clear search",
     "mk.provider.all": "All providers",
     "mk.sort.default": "Default",
     "mk.sort.priceAsc": "Input price low→high",
     "mk.sort.priceDesc": "Input price high→low",
     "mk.sort.ctxDesc": "Context large→small",
+    "mk.avail.all": "All availability",
+    "mk.avail.yes": "Available only",
+    "mk.avail.multi": "Available · {n} keys",
+    "mk.avail.tight": "Tight",
+    "mk.avail.none": "No key",
+    "mk.col.providerModel": "Provider / model",
+    "mk.col.caps": "Capabilities",
+    "mk.cap.vision": "Vision",
+    "mk.cap.vision.title": "Accepts image input (vision)",
+    "mk.cap.peak": "Peak pricing",
     "mk.count": "{n} keys on sale",
     "mk.recent": "Recent",
     "mk.recent.clear": "Clear",
     "mk.recent.clear.title": "Clear recent models",
     "mk.recent.use": "click to use",
-    "mk.col.provider": "Provider",
-    "mk.col.model": "Model",
     "mk.col.in": "Input /1M",
     "mk.col.out": "Output /1M",
     "mk.col.ctx": "Context",
     "mk.col.avail": "Availability",
     "mk.col.action": "Action",
-    "mk.avail": "Available",
-    "mk.busy": "Busy",
     "mk.multi": "Multi-key · failover",
     "mk.use": "Use",
     "mk.success": "Success {p}%",
@@ -954,7 +993,9 @@
 
     "share.add": "＋ List a new key",
     "share.list": "My listings",
-    "share.earned": "Earnings credited",
+    "share.earned": "Earnings credited · pause / delist anytime",
+    "share.crumb": "/ Sharing",
+    "share.col.avail": "Time window",
     "share.form.title": "List a key",
     "share.form.provider": "Provider",
     "share.form.plan": "Plan",
@@ -988,7 +1029,6 @@
     "share.col.used": "Used/Quota",
     "share.col.price": "Price",
     "share.col.earn": "Earnings",
-    "share.col.time": "Listed at",
     "share.col.status": "Status",
     "share.col.action": "Action",
     "share.status.on": "Listed",