dsh-dock 0.11.3 → 0.11.6

package/features/notify/host.js

@@ -14,10 +14,10 @@
 //   systemNotify / soundNotify / soundEffect / dingtalkEnabled / dingtalkWebhook /
 //   feishuEnabled / feishuWebhook
 // 模块启停由功能坞的 features.notify 开关负责（独立菜单项），本模块不再有第二个总开关。
-import { DOCK_NS, SOUND_EFFECTS, sendJson, readBody } from '../../src/host-core.js'
+import { SOUND_EFFECTS, sendJson, readBody, readDockRoot, mutateDockSection } from '../../src/host-core.js'
 import { acquireTaskTracker } from '../../src/task-track.js'
 
-// 默认配置（schema 默认值一致；settings.get 未挂载时的兜底）
+// 默认配置（schema 默认值一致；settings 未挂载时的兜底）
 function defaultConfig() {
   return {
     notifyOnComplete: true,
@@ -37,12 +37,11 @@ function defaultConfig() {
   }
 }
 
-// 读 settings 里的 notify 配置（resolved 值已含 schema 默认），异常时回退默认
+// 读本地 Config 镜像里的 notify 配置（resolved 值已含 schema 默认），异常时回退默认
 function readConfig(ctx) {
   const cfg = defaultConfig()
   try {
-    const settings = ctx.get('settings')
-    const v = settings && typeof settings.get === 'function' ? settings.get(DOCK_NS) : null
+    const v = readDockRoot(ctx)
     const n = v && typeof v === 'object' && v.notify && typeof v.notify === 'object' ? v.notify : null
     if (n) {
       for (const key of Object.keys(cfg)) {
@@ -291,12 +290,8 @@ export const feature = {
                 cfg.feishuWebhook = hook
               }
 
-              const settings = ctx.get('settings')
-              if (!settings || typeof settings.mutate !== 'function') {
-                throw new Error('settings 服务不可用，配置无法持久化')
-              }
               try {
-                await settings.mutate(DOCK_NS, [{ op: 'set', path: ['notify'], value: cfg }])
+                await mutateDockSection(ctx, ['notify'], cfg)
               } catch (e) {
                 const err = new Error('保存配置被拒绝：' + ((e && e.message) || String(e)))
                 err.statusCode = 400

package/features/notify/view.jsx

@@ -685,7 +685,7 @@ function NotifyStat(props) {
 // ---------- 样式（dknt- 前缀；全部走主题变量，暗/亮色自适应） ----------
 const css = [
 	// 通知卡片栈（右上角，不遮 dsh 自身 UI）
-	".dknt-toasts{position:fixed;top:16px;right:16px;z-index:9995;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));}",
+	".dknt-toasts{position:fixed;top:16px;right:16px;z-index:7;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));}",
 	".dknt-toast{border-radius:12px;padding:12px 14px;pointer-events:auto;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--dsw-alias-border-l1);box-shadow:0 10px 36px rgb(0 0 0 / .22);animation:dknt-toast-in .32s var(--ds-ease-in-out);}",
 	".dknt-toast.out{animation:dknt-toast-out .24s var(--ds-ease-in-out) forwards;}",
 	"@keyframes dknt-toast-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}",

package/features/tokenlog/host.js

@@ -25,7 +25,7 @@
 // 定价优先级：用户自定义单价 > 官网抓取刊例价 > 内置默认表 > 兜底单价。
 // 分时段价支持多段（start>end 跨零点、start=end 全天、小数小时表示半点）；旧单段 peak 自动归一。
 // 费用在查询/导出时按当前单价即时重算，因此改价无需重扫历史。
-import { DOCK_NS, sendJson, readBody } from '../../src/host-core.js'
+import { sendJson, readBody, readDockRoot, mutateDockSection } from '../../src/host-core.js'
 
 export const feature = {
   id: 'tokenlog',
@@ -119,8 +119,7 @@ export const feature = {
     // 取值做防御性归一(schema 已给默认, 但 settings 未挂载/异常时仍需兜底)。
     function loadPricingConfig() {
       try {
-        const settings = ctx.get('settings')
-        const root = settings && typeof settings.get === 'function' ? settings.get(DOCK_NS) : null
+        const root = readDockRoot(ctx)
         const t = root && typeof root === 'object' && root.tokenlog && typeof root.tokenlog === 'object' ? root.tokenlog : null
         if (!t) return
         if (typeof t.usdCnyRate === 'number' && t.usdCnyRate > 0) usdCnyRate = t.usdCnyRate
@@ -247,7 +246,7 @@ export const feature = {
     // 的字段) → 落盘。保存后由调用方 loadPricingConfig() 刷新内存, 使改价立即影响费用估算。
     async function savePricingConfig(input) {
       const settings = ctx.get('settings')
-      if (!settings || typeof settings.get !== 'function' || typeof settings.mutate !== 'function') {
+      if (!settings || typeof settings.mutate !== 'function') {
         throw new Error('settings 服务不可用，单价无法持久化')
       }
       const bad = (msg) => { const err = new Error(msg); err.statusCode = 400; return err }
@@ -256,7 +255,7 @@ export const feature = {
         if (!Number.isFinite(n) || n < 0) throw bad(`「${label}」需为不小于 0 的数字`)
         return n
       }
-      const root = settings.get(DOCK_NS)
+      const root = readDockRoot(ctx)
       const current = root && typeof root === 'object' && root.tokenlog && typeof root.tokenlog === 'object' ? root.tokenlog : {}
       const next = Object.assign({}, current)
       if (input.usdCnyRate !== undefined) {
@@ -314,7 +313,7 @@ export const feature = {
         }
       }
       try {
-        await settings.mutate(DOCK_NS, [{ op: 'set', path: ['tokenlog'], value: next }])
+        await mutateDockSection(ctx, ['tokenlog'], next)
       } catch (e) {
         const err = new Error('保存单价被拒绝：' + ((e && e.message) || String(e)))
         err.statusCode = 400
@@ -481,17 +480,19 @@ export const feature = {
       }
     }
 
-    // 读取 settings.yaml 的 llm-pi-ai 命名空间, 返回「现有提供商」路由名 -> [模型 id]。
+    // 读官方 llm-pi-ai 配置的「现有提供商」路由名 -> [模型 id]。
     // 用途: 前端提供商/模型下拉 = 现有配置 ∪ 历史记录, 去重合并 ——
     //   - 没有任何记录时仍可选现有提供商;
     //   - 提供商/模型已从配置删除时, 因有历史记录仍可选中(兼容两者)。
+    // 0.1.7-alpha.1 起 settings.get 已移除：改走 describe()（SettingsForms 读路径）。
     function readConfiguredProviders() {
       const out = {}
       try {
         const settings = ctx.get('settings')
-        if (!settings || typeof settings.get !== 'function') return out
-        const sec = settings.get('llm-pi-ai')
-        const providers = sec && typeof sec === 'object' && sec.providers ? sec.providers : {}
+        if (!settings || typeof settings.describe !== 'function') return out
+        const views = settings.describe({ redactSecrets: true }) || []
+        const hit = views.find((d) => d && d.ns === 'llm-pi-ai' && d.value && typeof d.value === 'object')
+        const providers = hit && hit.value.providers ? hit.value.providers : {}
         for (const pid of Object.keys(providers || {})) {
           const p = providers[pid]
           if (!p || typeof p !== 'object') { out[pid] = []; continue }

package/features/tokenlog/view.jsx

@@ -64,6 +64,19 @@ function fmtCostCnyExact(usd, rate) {
 	const v = (Number(usd) || 0) * (Number(rate) > 0 ? Number(rate) : 7.2);
 	return "¥" + v.toFixed(4);
 }
+function fmtDurCompact(ms) {
+	if (ms === null || ms === undefined || isNaN(ms)) return "—";
+	if (ms < 1000) return Math.round(ms) + "ms";
+	if (ms < 60000) return (ms / 1000).toFixed(1) + "s";
+	if (ms < 3600000) return Math.round(ms / 60000) + "m";
+	return (ms / 3600000).toFixed(1) + "h";
+}
+function startOfToday() {
+	const d = new Date();
+	d.setHours(0, 0, 0, 0);
+	return d.getTime();
+}
+function hourOf(ts) { return new Date(ts).getHours(); }
 
 // ---------- CSV 导出 ----------
 // 表头即「调用明细」表的中文列名, 列序/取值格式与页面完全一致(日期时间、千分位、命中%、¥xx.xxxx、
@@ -152,6 +165,201 @@ function statusInfo(r) {
 	return { code: 0, label: "…", cls: "pend", title: "进行中" };
 }
 
+// ---------- 图表统计（纯 CSS/SVG，无第三方图表库：视图由外壳直接渲染，依赖越少越稳） ----------
+// 调色板按索引取色，循环使用；按值降序分配，颜色与排名绑定而不是与名字绑定。
+const CHART_COLORS = ["#60a5fa", "#fbbf24", "#4ade80", "#f472b6", "#a78bfa", "#fb923c", "#2dd4bf", "#e879f9", "#94a3b8", "#f87171"];
+function chartColor(i) { return CHART_COLORS[i % CHART_COLORS.length]; }
+const CHART_METRICS = [
+	["totalTokens", "总 Token", (v) => fmtCompact(v)],
+	["calls", "调用次数", (v) => fmtNum(v)],
+	["cost", "金额", (v, rate) => fmtCostCny(v, rate)],
+	["outputTokens", "输出 Token", (v) => fmtCompact(v)],
+];
+const CHART_DIMS = [
+	["model", "模型"],
+	["provider", "提供商"],
+	["status", "状态"],
+	["effort", "推理强度"],
+];
+function emptyAgg() {
+	return { calls: 0, totalTokens: 0, outputTokens: 0, inputTokens: 0, cacheReadTokens: 0, reasoningTokens: 0, cost: 0, llmMs: 0, timed: 0 };
+}
+function addToAgg(a, r) {
+	a.calls += 1;
+	a.totalTokens += Number(r.totalTokens) || 0;
+	a.outputTokens += Number(r.outputTokens) || 0;
+	a.inputTokens += Number(r.inputTokens) || 0;
+	a.cacheReadTokens += Number(r.cacheReadTokens) || 0;
+	a.reasoningTokens += Number(r.reasoningTokens) || 0;
+	a.cost += Number(r.cost) || 0;
+	if (typeof r.llmMs === "number") { a.llmMs += r.llmMs; a.timed += 1; }
+}
+/** records → [{key, ...agg}]，按 metric 降序。 */
+function groupByKey(records, keyFn, metric) {
+	const map = new Map();
+	for (const r of records) {
+		const k = keyFn(r);
+		let a = map.get(k);
+		if (!a) { a = emptyAgg(); a.key = k; map.set(k, a); }
+		addToAgg(a, r);
+	}
+	return [...map.values()].sort((a, b) => (b[metric] || 0) - (a[metric] || 0));
+}
+
+/** 环形占比图：SVG conic 扇区 + 中央合计 + 图例（最多 8 项，其余并入「其他」）。 */
+function DonutChart({ items, metric, metricFmt, rate, centerLabel, emptyText }) {
+	const total = items.reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+	if (!items.length || total <= 0) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const shown = items.slice(0, 8);
+	const restSum = items.slice(8).reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+	if (restSum > 0) {
+		const restAgg = Object.assign(emptyAgg(), { key: "其他(" + (items.length - 8) + "项)" });
+		restAgg[metric] = restSum;
+		shown.push(restAgg);
+	}
+	const R = 15.9155; // 周长 100 的半径
+	let acc = 0;
+	const segs = shown.map((it, i) => {
+		const v = Number(it[metric]) || 0;
+		const frac = v / total;
+		const seg = (
+			<circle key={it.key} cx="21" cy="21" r={R} fill="none"
+				stroke={chartColor(i)} strokeWidth={frac > 0.02 ? 7 : 5}
+				strokeDasharray={(frac * 100) + " " + (100 - frac * 100)}
+				strokeDashoffset={String(25 - acc * 100)}>
+				<title>{it.key + "：" + metricFmt(v, rate) + "（" + (frac * 100).toFixed(1) + "%）"}</title>
+			</circle>
+		);
+		acc += frac;
+		return seg;
+	});
+	return (
+		<div className="dtok-donut-wrap">
+			<svg className="dtok-donut" viewBox="0 0 42 42" role="img">
+				<circle cx="21" cy="21" r={R} fill="none" stroke="var(--dsw-alias-border-l1)" strokeWidth="7" />
+				{segs}
+				<text x="21" y="19.5" textAnchor="middle" className="dtok-donut-v">{metricFmt(total, rate)}</text>
+				<text x="21" y="26" textAnchor="middle" className="dtok-donut-l">{centerLabel}</text>
+			</svg>
+			<div className="dtok-legend">
+				{shown.map((it, i) => {
+					const v = Number(it[metric]) || 0;
+					return (
+						<div className="dtok-legend-row" key={it.key} title={it.key}>
+							<span className="dtok-dot" style={{ background: chartColor(i) }} />
+							<span className="dtok-legend-k">{it.key}</span>
+							<span className="dtok-legend-v">{metricFmt(v, rate)} · {(v / total * 100).toFixed(1)}%</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+/** 横向条形图：行 = 分组（默认模型），条长 = 指标值（默认耗时）。 */
+function HBarChart({ items, metric, metricFmt, rate, maxRows, emptyText }) {
+	if (!items.length) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const shown = items.slice(0, maxRows || 12);
+	const max = Math.max(...shown.map((it) => Number(it[metric]) || 0), 1e-9);
+	return (
+		<div className="dtok-hbars">
+			{shown.map((it, i) => {
+				const v = Number(it[metric]) || 0;
+				const pct = Math.max(1.5, (v / max) * 100);
+				return (
+					<div className="dtok-hbar-row" key={it.key} title={it.key + "：" + metricFmt(v, rate)}>
+						<span className="dtok-hbar-k">{it.key}</span>
+						<span className="dtok-hbar-track">
+							<span className="dtok-hbar-fill" style={{ width: pct + "%", background: chartColor(i) }} />
+						</span>
+						<span className="dtok-hbar-v">{metricFmt(v, rate)}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+/** 24 小时调用分布柱状图：柱高 = 指标值，hover 显示具体数值。 */
+function HourChart({ hours, metric, metricFmt, rate, emptyText }) {
+	const total = hours.reduce((s, h) => s + (Number(h[metric]) || 0), 0);
+	if (total <= 0) return <div className="dtok-chart-empty">{emptyText || "暂无数据"}</div>;
+	const max = Math.max(...hours.map((h) => Number(h[metric]) || 0), 1e-9);
+	return (
+		<div className="dtok-hours" role="img">
+			{hours.map((h) => {
+				const v = Number(h[metric]) || 0;
+				const pct = v > 0 ? Math.max(2, (v / max) * 100) : 0;
+				return (
+					<span key={h.hour} className="dtok-hour-col" title={h.hour + " 时：" + metricFmt(v, rate)}>
+						{pct > 0 ? <span className="dtok-hour-bar" style={{ height: pct + "%" }} /> : null}
+					</span>
+				);
+			})}
+		</div>
+	);
+}
+
+/** 图表统计区：所有图都基于「当前筛选结果 records」客户端聚合，筛选一变图表即时联动。
+ *  scope = "range"（整个时间范围）| "today"（records 里属于今天的部分）。 */
+function ChartsPanel({ records, rate }) {
+	const [metric, setMetric] = useState("totalTokens");
+	const [dim, setDimLocal] = useState("model");
+	const metricDef = CHART_METRICS.find((m) => m[0] === metric) || CHART_METRICS[0];
+	const metricFmt = metricDef[2];
+	const todayRecs = useMemo(() => {
+		const t0 = startOfToday();
+		return records.filter((r) => Number(r.time) >= t0);
+	}, [records]);
+	const todayByModel = useMemo(() => groupByKey(todayRecs, (r) => r.model || "(未知)", metric), [todayRecs, metric]);
+	const byDim = useMemo(() => groupByKey(records, (r) => r[dim] || "(空)", metric), [records, dim, metric]);
+	const modelTime = useMemo(() => groupByKey(records, (r) => r.model || "(未知)", "llmMs"), [records]);
+	const timedCalls = useMemo(() => records.reduce((s, r) => s + (typeof r.llmMs === "number" ? 1 : 0), 0), [records]);
+	const hours = useMemo(() => {
+		const arr = [];
+		for (let h = 0; h < 24; h++) { const a = emptyAgg(); a.hour = h; arr.push(a); }
+		for (const r of records) addToAgg(arr[hourOf(r.time)], r);
+		return arr;
+	}, [records]);
+	return (
+		<div className="dtok-charts">
+			<div className="dtok-chart-toolbar">
+				<span className="dtok-chart-toolbar-label">指标</span>
+				{CHART_METRICS.map(([id, label]) => (
+					<button key={id} className={"dtok-btn tiny" + (metric === id ? " primary" : "")} onClick={() => setMetric(id)}>{label}</button>
+				))}
+				<span className="dtok-chart-toolbar-note">图表跟随上方筛选条件（时间 / 会话 / 提供商 / 模型 / 状态 / 强度）实时联动</span>
+			</div>
+			<div className="dtok-chart-grid">
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">今日模型用量占比<span className="dtok-chart-sub">{metricDef[1]} · {todayRecs.length} 次调用</span></div>
+					<DonutChart items={todayByModel} metric={metric} metricFmt={metricFmt} rate={rate} centerLabel={"今日" + metricDef[1]} emptyText="今日暂无调用" />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">24 小时调用分布<span className="dtok-chart-sub">按小时聚合 · {metricDef[1]}</span></div>
+					<HourChart hours={hours} metric={metric} metricFmt={metricFmt} rate={rate} />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">模型耗时排行<span className="dtok-chart-sub">累计 LLM 耗时 · 已计时 {timedCalls} 次</span></div>
+					<HBarChart items={modelTime} metric="llmMs" metricFmt={(v) => fmtDurCompact(v)} rate={rate} emptyText="暂无计时数据" />
+				</div>
+				<div className="dtok-chart-card">
+					<div className="dtok-chart-title">
+						分布统计
+						<span className="dtok-chart-sub">
+							{CHART_DIMS.map(([id, label]) => (
+								<button key={id} className={"dtok-btn tiny" + (dim === id ? " primary" : "")} style={{ marginLeft: 4 }} onClick={() => setDimLocal(id)}>{label}</button>
+							))}
+						</span>
+					</div>
+					<HBarChart items={byDim} metric={metric} metricFmt={metricFmt} rate={rate} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
 // ---------- 样式（dtok- 前缀，dock 面板内自适应：宽度铺满、表格横向滚动） ----------
 const css = `
 .dtok-root{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;}
@@ -188,7 +396,7 @@ const css = `
 .dtok-code.pend{color:var(--dsw-alias-label-tertiary,#94a3b8);}
 .dtok-detail-link{color:var(--dk-accent);cursor:pointer;font-size:11px;}
 .dtok-detail-link:hover{text-decoration:underline;}
-.dtok-detail{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;}
+.dtok-detail{position:fixed;inset:0;z-index:201;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;}
 .dtok-detail-card{background:var(--dsw-alias-bg-layer-2,#1c212b);border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:12px;padding:20px 24px;max-width:640px;width:92%;max-height:80vh;overflow:auto;color:var(--dsw-alias-label-primary,#e8eaf0);}
 .dtok-detail-card h3{margin:0 0 12px;font-size:15px;}
 .dtok-detail-row{display:flex;gap:8px;padding:4px 0;font-size:12px;border-bottom:1px solid var(--dk-tdim);}
@@ -252,7 +460,7 @@ const css = `
 .dtok-btn.primary:not([disabled]):active{transform:none;}
 }
 /* ---- 单价设置（子弹窗） ---- */
-.dtok-pm-backdrop{position:fixed;inset:0;z-index:2100;background:rgba(15,17,21,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
+.dtok-pm-backdrop{position:fixed;inset:0;z-index:201;background:rgba(15,17,21,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
 .dtok-pm{box-sizing:border-box;width:min(980px,calc(100vw - 32px));height:min(760px,calc(100vh - 32px));display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2,#1c212b);color:var(--dsw-alias-label-primary);box-shadow:0 20px 64px rgb(0 0 0 / .4);overflow:hidden;}
 .dtok-pm.max{border-radius:10px;}
 .dtok-pm-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--dsw-alias-border-l1);cursor:move;user-select:none;flex:none;background:var(--dsw-alias-bg-layer-1);}
@@ -283,6 +491,35 @@ const css = `
 .dtok-src{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);}
 .dtok-src.custom{color:var(--dsw-alias-state-success-primary,#4ade80);}
 .dtok-src.fallback{color:var(--dk-warn);}
+/* ---- 图表统计（纯 CSS/SVG） ---- */
+.dtok-charts{display:flex;flex-direction:column;gap:10px;min-width:0;}
+.dtok-chart-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);}
+.dtok-chart-toolbar-label{font-size:12px;color:var(--dsw-alias-label-secondary);flex:none;}
+.dtok-chart-toolbar-note{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);margin-left:auto;}
+.dtok-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;}
+.dtok-chart-card{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:8px;}
+.dtok-chart-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
+.dtok-chart-sub{font-size:11px;font-weight:400;color:var(--dsw-alias-label-secondary);}
+.dtok-chart-empty{text-align:center;color:var(--dsw-alias-label-secondary);padding:28px 0;font-size:12px;}
+.dtok-donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
+.dtok-donut{width:150px;height:150px;flex:none;}
+.dtok-donut-v{font-size:6.5px;font-weight:700;fill:var(--dsw-alias-label-primary);}
+.dtok-donut-l{font-size:3.6px;fill:var(--dsw-alias-label-secondary);}
+.dtok-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;max-height:170px;overflow:auto;}
+.dtok-legend-row{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0;}
+.dtok-dot{width:8px;height:8px;border-radius:50%;flex:none;}
+.dtok-legend-k{color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.dtok-legend-v{color:var(--dsw-alias-label-secondary);margin-left:auto;flex:none;}
+.dtok-hbars{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;}
+.dtok-hbar-row{display:flex;align-items:center;gap:8px;font-size:11px;min-width:0;}
+.dtok-hbar-k{flex:0 1 34%;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.dtok-hbar-track{flex:1;height:12px;border-radius:4px;background:rgb(127 127 127 / .16);overflow:hidden;min-width:40px;}
+.dtok-hbar-fill{display:block;height:100%;border-radius:4px;transition:width .3s ease;}
+.dtok-hbar-v{flex:none;color:var(--dsw-alias-label-secondary);min-width:52px;text-align:right;}
+.dtok-hours{display:flex;align-items:flex-end;gap:3px;height:130px;padding-top:4px;}
+.dtok-hour-col{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0;}
+.dtok-hour-bar{display:block;width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--dk-accent),rgb(127 127 127 / .25));min-height:2px;transition:height .3s ease;}
+.dtok-hour-col:hover .dtok-hour-bar{filter:brightness(1.3);}
 `;
 
 // ---------- 详情弹窗 ----------
@@ -404,6 +641,11 @@ function PriceModal({ onClose, onSaved }) {
 		return () => window.removeEventListener("keydown", onKey);
 	}, [onClose]);
 
+	// 遮罩关闭必须「按下也在遮罩上」。
+	// 从弹窗内按下、拖选/拖出后在遮罩松开时，click 会派发到共同祖先（遮罩），
+	// 若无此标记会把框选误判成点外部关闭（2026-09-23 用户反馈）。
+	const backdropDownRef = useRef(false);
+
 	const style = maxed
 		? { position: "fixed", left: 8, top: 8, right: 8, bottom: 8, width: "auto", height: "auto" }
 		: geom
@@ -414,7 +656,15 @@ function PriceModal({ onClose, onSaved }) {
 	// 无 document（测试沙箱）/无 createPortal 时退回就地渲染，行为不变。
 	const portalTarget = typeof document !== "undefined" && document.body ? document.body : null;
 	const overlay = (
-		<div className="dtok-pm-backdrop" onClick={onClose}>
+		<div
+			className="dtok-pm-backdrop"
+			onPointerDown={(e) => { backdropDownRef.current = e.target === e.currentTarget; }}
+			onClick={(e) => {
+				if (!backdropDownRef.current) return;
+				if (e.target !== e.currentTarget) return;
+				onClose();
+			}}
+		>
 			<div ref={dlgRef} className={"dtok-pm" + (maxed ? " max" : "")} style={style} onClick={(e) => e.stopPropagation()}>
 				<div className="dtok-pm-head" onPointerDown={(e) => startDrag(e, "move")} onDoubleClick={() => setMaxed((v) => !v)}>
 					<b>单价设置</b>
@@ -702,6 +952,9 @@ export function TokenLogView(props) {
 	// 「单价设置」折叠面板：默认收起（费用不准确时才需要展开调整）
 	// 「单价设置」子弹窗：默认收起；支持经 params.openPricing 直接打开（深链/测试用）
 	const [showPricing, setShowPricing] = useState(() => !!(props && props.params && props.params.openPricing));
+	// 明细 | 图表 页签：图表全部基于当前筛选结果客户端聚合，不额外发请求。
+	// params.charts 支持深链/测试直接落在图表页签。
+	const [tab, setTab] = useState(() => (props && props.params && props.params.charts) ? "charts" : "detail");
 	// 查询完成信号：loading 由 true→false 时记一次时间戳，用于「✓ 数据已更新」提示与 KPI 卡回弹。
 	// 5 秒静默自动刷新不置 loading，所以轮询不会每 5 秒闪一下。
 	const [fetchedAt, setFetchedAt] = useState(0);
@@ -929,6 +1182,17 @@ export function TokenLogView(props) {
 
 	const bodyNodes = [];
 	if (err) bodyNodes.push(<div key="err" className="dtok-err">错误: {err}</div>);
+	bodyNodes.push(
+		<div key="tabs" className="dtok-filter" style={{ padding: "2px 0 0", border: "none", background: "transparent", gap: 4 }}>
+			<button className={"dtok-btn" + (tab === "detail" ? " primary" : "")} onClick={() => setTab("detail")}>明细</button>
+			<button className={"dtok-btn" + (tab === "charts" ? " primary" : "")} onClick={() => setTab("charts")}>图表统计</button>
+		</div>
+	);
+	if (tab === "charts") {
+		bodyNodes.push(
+			<ChartsPanel key={"charts-" + fetchedAt} records={records} rate={rateCny} />
+		);
+	} else {
 	if (cards.length) bodyNodes.push(
 		// key 带 fetchedAt：每次「手动查询 / 首次加载」拿到新数据时重建一次，KPI 卡重播回弹动画
 		<div className={"dtok-cards" + (fetchedAt ? " dtok-pop" : "")} key={"cards-" + fetchedAt}>
@@ -982,6 +1246,7 @@ export function TokenLogView(props) {
 		);
 		bodyNodes.push(pager("pager-bottom", "bottom"));
 	}
+	}
 
 	return (
 		<div className="dtok-root" onClick={(e) => e.stopPropagation()}>

package/features/visionproxy/host.js

@@ -7,7 +7,7 @@
 // 配置存自有 settings 命名空间 dsh-dock（visionProxy: enabled/provider/model），
 // 其编辑 UI 在模型设置页内（见 features/modelconfig/view.js）。
 import { BlockAssembler } from '@deepseek-ai/dsh-llm'
-import { DOCK_NS } from '../../src/host-core.js'
+import { readDockRoot } from '../../src/host-core.js'
 import { readModelDirectory } from '../modelconfig/host.js'
 
 /** 递归判断内容块里是否有图片（含 tool-result 嵌套，与官方 contentHasImage 同构）。 */
@@ -223,8 +223,7 @@ function installVisionProxy(ctx, directory) {
   const deps = {
     config: () => {
       try {
-        const settings = ctx.get('settings')
-        const v = settings && typeof settings.get === 'function' ? settings.get(DOCK_NS) : undefined
+        const v = readDockRoot(ctx)
         return v && v.visionProxy ? v.visionProxy : { enabled: false, provider: '', model: '' }
       } catch {
         return { enabled: false, provider: '', model: '' }

package/index.js

@@ -16,7 +16,7 @@
 //   - notify      任务通知：完成/异常/需确认通知 + 提示音/系统通知/钉钉飞书推送（从任务动画拆出）
 //   - runstate    运行状态：进行中任务与最近完成一览（从任务动画拆出；只读，无配置段）
 //   - mobile-relay 手机接力（未发布）：扫码反向代理接力 + 局域网电脑直连（0.0.0.0）
-import { DOCK_NS, DockConfig, sendJson, readBody, migrateNotifyConfig, migrateModelsFeatureId } from './src/host-core.js'
+import { DockConfig, sendJson, readBody, migrateNotifyConfig, migrateModelsFeatureId, migrateImportedFeatures, bindDockConfig, readDockRoot, mutateDockSection } from './src/host-core.js'
 import { feature as fModels } from './features/modelconfig/host.js'
 import { feature as fVisionProxy } from './features/visionproxy/host.js'
 import { feature as fBalance } from './features/balance/host.js'
@@ -28,7 +28,10 @@ import { feature as fMobileRelay } from './features/mobile-relay/host.js'
 
 export const name = 'dsh-dock'
 
-// 硬依赖 webServer（路由注册）+ llm（图片理解代理包装）+ settings（自有命名空间读写）。
+/** Config schema：dsh ≥ 0.1.7-alpha.1 SettingsForms 要求插件导出同名 Config，否则 mutate 报 No configurable plugin entry。 */
+export const Config = DockConfig
+
+// 硬依赖 webServer（路由注册）+ llm（图片理解代理包装）+ settings（SettingsForms 写回）。
 export const inject = ['webServer', 'llm', 'settings']
 
 /** 测试钩子：清空识别缓存（冒烟在用例间隔离；实现在 visionproxy 模块）。 */
@@ -50,7 +53,7 @@ if (typeof process !== 'undefined' && typeof process.on === 'function' && !proce
   })
 }
 
-export function apply(ctx) {
+export function apply(ctx, config) {
   // ---- 功能注册表（Host 侧）：每个条目来自对应功能模块的 feature 描述符 ----
   // defaultEnabled：与 Client 半部保持一致。已接入的功能默认打开，
   // 规划中的功能缺省 false，等实现后移除 roadmap 并打开。
@@ -65,17 +68,22 @@ export function apply(ctx) {
     fMobileRelay,
   ]
 
+  // 绑定 Config 镜像（替代已移除的 settings.get）；volatile 字段热更时重绑。
+  bindDockConfig(config)
+  ctx.on('loader/volatile-update', () => {
+    try { bindDockConfig(config) } catch { /* Config 形态异常时保持旧镜像 */ }
+  })
+
   const state = new Map()
   for (const f of FEATURES) state.set(f.id, { enabled: false, dispose: null, error: null })
 
-  /** 读宿主侧功能开关表（settings 持久化；settings 未挂载时回退 defaultEnabled）。
-   *  兼容别名：宿主侧【模型设置】功能 id 曾叫 models（与客户端 modelconfig 对不上，
-   *  开关永远推不到宿主）；迁移落盘前（异步）在这里读时兜底换算，保证启动开关表
-   *  与 /dsh-dock/features 响应第一时间就是新口径。 */
+  // 读宿主侧功能开关表（本地 Config 镜像优先；settings 未挂载时回退 defaultEnabled）。
+  // 兼容别名：宿主侧【模型设置】功能 id 曾叫 models（与客户端 modelconfig 对不上，
+  // 开关永远推不到宿主）；迁移落盘前（异步）在这里读时兜底换算，保证启动开关表
+  // 与 /dsh-dock/features 响应第一时间就是新口径。
   function persistedFeatureMap() {
     try {
-      const settings = ctx.get('settings')
-      const v = settings && typeof settings.get === 'function' ? settings.get(DOCK_NS) : null
+      const v = readDockRoot(ctx)
       if (v && typeof v === 'object' && v.features && typeof v.features === 'object') {
         const map = v.features
         if (typeof map.models === 'boolean' && typeof map.modelconfig !== 'boolean') {
@@ -115,25 +123,47 @@ export function apply(ctx) {
     }
   }
 
-  // 自有 settings 命名空间（dsh-dock）：功能开关与各功能配置的持久化；
-  // 读取走 settings.get（内存 resolved 值，写入经 settings.mutate，均热生效）。
-  // 宿主侧初始开关也在这里应用：settings 命名空间注册完成后才能读到持久化开关表
-  // （apply() 同步执行时注册尚未生效，读到的永远是空值）。
+  // 自有 Config 段（profile 条目 id dsh-dock）：功能开关与各功能配置的持久化。
+  // 读走本地镜像（apply 的 config / loader/volatile-update），写经 settings.mutate。
+  // 关键顺序：先跑完一次性迁移（可能改写 features），再应用初始开关——
+  // 否则首次启动时 bind 的还是空默认值，migrate 尚未落盘就 setEnabled，
+  // 面板显示 persisted=true 却全部「未启用」、路由 404/405（2026-09-23 事故）。
   let initialTogglesApplied = false
   ctx.inject(['settings'], (sctx) => {
-    sctx.settings.register(DOCK_NS, DockConfig, {})
-    // 一次性迁移：通知配置从 animation 段搬到 notify 段（【任务通知】独立成模块）。
-    // 必须在任何面板保存动作之前跑——animation 模块保存时整段写回，旧字段会被覆盖丢失。
-    migrateNotifyConfig(sctx)
-    // 一次性迁移：宿主侧【模型设置】功能 id models → modelconfig（开关表键名对齐客户端）。
-    migrateModelsFeatureId(sctx)
-    if (initialTogglesApplied) return
-    initialTogglesApplied = true
-    const persisted = persistedFeatureMap()
-    for (const f of FEATURES) {
-      const saved = persisted ? persisted[f.id] : undefined
-      setEnabled(f.id, typeof saved === 'boolean' ? saved : !!f.defaultEnabled)
-    }
+    // 0.1.7-alpha.1 起 settings.register 已移除——不再调用；导出 Config 即注册。
+    Promise.resolve()
+      // 通知配置从 animation 段搬到 notify 段（【任务通知】独立成模块）。
+      // 必须在任何面板保存动作之前跑——animation 模块保存时整段写回，旧字段会被覆盖丢失。
+      .then(() => migrateNotifyConfig(sctx))
+      // 宿主侧【模型设置】功能 id models → modelconfig（开关表键名对齐客户端）。
+      .then(() => migrateModelsFeatureId(sctx))
+      // settings.yaml.imported 里停住的功能开关表（Config 导出前 import 失败的那段）。
+      .then(() => migrateImportedFeatures(sctx))
+      .then(() => {
+        // 迁移可能 mutate 过 Config：刷新镜像后再读开关表。
+        try { bindDockConfig(config) } catch { /* 保持旧镜像 */ }
+        if (initialTogglesApplied) return
+        initialTogglesApplied = true
+        const persisted = persistedFeatureMap()
+        for (const f of FEATURES) {
+          const saved = persisted ? persisted[f.id] : undefined
+          setEnabled(f.id, typeof saved === 'boolean' ? saved : !!f.defaultEnabled)
+        }
+        console.log('[dsh-dock] initial toggles applied:', FEATURES
+          .filter((f) => state.get(f.id).enabled)
+          .map((f) => f.id).join(', ') || '(none)')
+      })
+      .catch((e) => {
+        console.error('[dsh-dock] settings init/migration failed:', (e && e.message) || e)
+        // 迁移失败也要尝试按当前镜像启用，避免整坞空白。
+        if (initialTogglesApplied) return
+        initialTogglesApplied = true
+        const persisted = persistedFeatureMap()
+        for (const f of FEATURES) {
+          const saved = persisted ? persisted[f.id] : undefined
+          setEnabled(f.id, typeof saved === 'boolean' ? saved : !!f.defaultEnabled)
+        }
+      })
   })
 
   // 功能开关管理路由（无条件注册）：GET 查询各功能宿主侧状态；POST 同步开关——
@@ -152,10 +182,11 @@ export function apply(ctx) {
               const enabled = !!(body && body.enabled)
               if (!state.has(id)) return sendJson(res, 404, { ok: false, error: { message: `未知功能：${id}` } })
               setEnabled(id, enabled)
-              const settings = ctx.get('settings')
-              if (settings && typeof settings.mutate === 'function') {
+              try {
                 const features = Object.assign({}, persistedFeatureMap() || {}, { [id]: enabled })
-                await settings.mutate(DOCK_NS, [{ op: 'set', path: ['features'], value: features }])
+                await mutateDockSection(ctx, ['features'], features)
+              } catch (e) {
+                console.error('[dsh-dock] feature toggle persist failed:', (e && e.message) || e)
               }
             }
             const persisted = persistedFeatureMap() || {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-dock",
-  "version": "0.11.3",
+  "version": "0.11.6",
   "description": "DeepSeek Harness 功能坞插件（dsh-dock）：模块化功能中枢——每个功能一个 features/ 模块（可单独提取成包发布，又可经 dockBridge 装回面板）。含用量记录（LLM 调用记账/费用统计，支持各模型自定义单价与多段分时价）、模型设置、图片理解代理、模型余额、任务动画（19 种运行动画 + 桌面伙伴 3D 场景）、任务通知（完成/异常/需确认通知、提示音、系统通知、钉钉/飞书推送）、运行状态（进行中任务与最近完成一览）；侧栏入口 + 可拖拽弹窗（最大化/最小化/缩放）。",
   "type": "module",
   "main": "index.js",
@@ -57,10 +57,12 @@
   },
   "dependencies": {
     "js-yaml": "^4.1.0",
-    "@deepseek-ai/dsh-credentials": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-llm": "^0.1.1-rc.2",
-    "@deepseek-ai/dsh-settings": "^0.1.1-rc.2",
-    "@deepseek-ai/schemastery": "^3.18.1",
     "qrcode": "^1.5.4"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-credentials": "*",
+    "@deepseek-ai/dsh-llm": "*",
+    "@deepseek-ai/dsh-settings": "*",
+    "@deepseek-ai/schemastery": "*"
   }
-}
+}