dsh-width-tiers 1.0.0 → 1.0.1

package/README.md

@@ -47,6 +47,11 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
 (Ctrl+Shift+R). A round button with five bars appears at the bottom-right.
 
 > Installing from a local checkout: `dsh plugin --profile web add file:/path/to/dsh-width-tiers`.
+> Local-development gotcha: `file:` dependencies are **copied** into the
+> profile's `node_modules` (pnpm does not symlink them). After editing the
+> plugin source, re-sync the copy (e.g. `rsync -a --delete --exclude .git
+> /path/to/dsh-width-tiers/ ~/.dsh/profiles/web/node_modules/dsh-width-tiers/`)
+> or re-install after removing it, then restart `dsh web` and hard-refresh.
 
 ## Usage
 
@@ -57,6 +62,14 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
 - Non-standard tiers also close the details panel (re-closed automatically if
   reopened); `standard` leaves everything to the app.
 
+## Language
+
+All picker copy (tier labels, button `aria-label` and title) follows the
+app's **Settings → Language** (中文 / English), through the app's own locale
+service. Switching the language re-renders the button and menu immediately;
+when no explicit language is chosen the app falls back to the browser's
+language, and Chinese is the last resort. No plugin-side setting needed.
+
 ## How it works
 
 - The element that defines `--dsh-chat-content-width` is **located at
@@ -67,6 +80,9 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
   simulating clicks.
 - The sidebar is only ever collapsed by the `full` tier; returning to
   `standard` restores it only if this plugin collapsed it.
+- Dictionaries are registered with the app's **locale service**
+  (`ctx.locale.register` / `bind`) and re-rendered through its change
+  subscription, so the copy always matches the app's active language.
 
 ## Limitations
 

package/README.zh.md

@@ -43,6 +43,11 @@ dsh plugin --profile web add dsh-width-tiers
 右下角会出现五条横条的圆形按钮。
 
 > 本地目录安装：`dsh plugin --profile web add file:/path/to/dsh-width-tiers`。
+> 本地开发注意：`file:` 依赖会被 **拷贝** 进 profile 的 node_modules（pnpm
+> 不会建软链）。改完插件源码后，需要重新同步拷贝（例如 `rsync -a --delete
+> --exclude .git /path/to/dsh-width-tiers/
+> ~/.dsh/profiles/web/node_modules/dsh-width-tiers/`）或先 remove 再 add，
+> 然后重启 `dsh web` 并硬刷新。
 
 ## 使用
 
@@ -51,6 +56,13 @@ dsh plugin --profile web add dsh-width-tiers
   随时点轨道图标展开，展开后保持展开。
 - 非标准档会关闭详情面板（被重新打开会自动再关）；标准档完全交给应用。
 
+## 多语言
+
+选择器里的所有文案（档位名、按钮的 `aria-label` 和标题）跟随应用的
+**设置 → 语言**（中文 / English），通过应用自身的 locale 服务实现。切换
+语言后按钮和菜单会立即重渲染；未显式选择语言时，应用会回退到浏览器语言，
+最后兜底中文。无需插件侧单独设置。
+
 ## 原理
 
 - 运行时**自动定位**定义 `--dsh-chat-content-width` 的元素（第一个计算值
@@ -58,6 +70,8 @@ dsh plugin --profile web add dsh-width-tiers
 - 面板操作走 **layout 服务**（`ctx.layout`），从不模拟点击。
 - 侧边栏只被「全宽」档收起；回到「标准」时，只有本插件自己收起的侧边栏
   才会被恢复展开（你手动收的不动）。
+- 字典注册到应用的 **locale 服务**（`ctx.locale.register` / `bind`），并
+  订阅其变更事件重渲染，文案始终与应用的当前语言一致。
 
 ## 已知限制
 

package/lib/client.js

@@ -35,18 +35,50 @@ window.__ModuleLoader__.load({
 		 *    active); `standard` leaves everything to the app.
 		 *  - The chosen tier persists in localStorage and is restored on the
 		 *    next visit.
+		 *  - All copy is localized through the app's locale service: tier
+		 *    labels and the button's aria/title follow Settings → Language
+		 *    (zh / en, browser-derived fallback) and re-render on switch.
 		 */
 		const KEY = "dsh.widthTier";
 		const OLD_KEY = "dsh.wide";
 		const SELF_HEAL_MS = 1000;
 		const READY_TIMEOUT_MS = 30000;
 
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "width-tiers";
+
+		//#region lib/types/client/locales.js
+		/** `width-tiers` namespace dictionaries (tier labels and picker copy). */
+		/** Simplified Chinese dictionary (the key-set source of truth). */
+		const zh = {
+			"tier.standard": "标准",
+			"tier.medium": "中等",
+			"tier.wide": "宽",
+			"tier.ultra": "超宽",
+			"tier.full": "全宽",
+			"button.aria": "对话区宽度档位：{label}（{value}），点击选择档位",
+			"button.title.summary": "对话区宽度档位：{label}（{value}）",
+			"button.title.hint": "点击选择：{list}"
+		};
+		/** English dictionary, checked complete against the zh key set. */
+		const en = {
+			"tier.standard": "Standard",
+			"tier.medium": "Medium",
+			"tier.wide": "Wide",
+			"tier.ultra": "Ultra",
+			"tier.full": "Full",
+			"button.aria": "Chat width tier: {label} ({value}). Click to choose a tier.",
+			"button.title.summary": "Chat width tier: {label} ({value})",
+			"button.title.hint": "Click to choose: {list}"
+		};
+		//#endregion
+
 		const TIERS = [
-			{ id: "standard", label: "标准", value: "748px", note: "默认阅读宽度" },
-			{ id: "medium", label: "中等", value: "960px" },
-			{ id: "wide", label: "宽", value: "1280px" },
-			{ id: "ultra", label: "超宽", value: "1400px" },
-			{ id: "full", label: "全宽", value: "100%", note: "占满窗口" }
+			{ id: "standard", key: "tier.standard", value: "748px" },
+			{ id: "medium", key: "tier.medium", value: "960px" },
+			{ id: "wide", key: "tier.wide", value: "1280px" },
+			{ id: "ultra", key: "tier.ultra", value: "1400px" },
+			{ id: "full", key: "tier.full", value: "100%" }
 		];
 
 		function tierOf(id) {
@@ -76,14 +108,18 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		/** Services required by the browser bundle. */
-		const inject = ["layout"];
+		const inject = ["layout", "locale"];
 
 		/**
 		 * Client plugin body: inject the styles, build the picker button and
 		 * menu, and drive the width tiers through the layout service.
-		 * @param ctx - client root context (layout injected).
+		 * @param ctx - client root context (layout + locale injected).
 		 */
 		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-width-tiers: dictionaries");
 			ctx.effect(() => {
 				if (typeof document === "undefined") return;
 
@@ -93,6 +129,7 @@ window.__ModuleLoader__.load({
 				document.head.appendChild(styleTag);
 
 				const layout = ctx.layout;
+				const t = ctx.locale.bind(NS);
 
 				/* ---- helpers ---- */
 				const body = () => document.body;
@@ -227,13 +264,16 @@ window.__ModuleLoader__.load({
 
 				function syncButton() {
 					const tier = currentTier();
-					const t = tierOf(tier);
+					const def = tierOf(tier);
+					const label = t(def.key);
+					const summary = t("button.title.summary", { label, value: def.value });
+					const hint = t("button.title.hint", {
+						list: TIERS.map((tierDef) => `${t(tierDef.key)} ${tierDef.value}`).join(" / ")
+					});
 					btn.innerHTML = barIcon(tier);
 					btn.classList.toggle("active", tier !== "standard");
-					btn.setAttribute("aria-label", `对话区宽度档位：${t.label}（${t.value}），点击选择档位`);
-					btn.title =
-						`对话区宽度档位：${t.label}（${t.value}）\n` +
-						"点击选择：标准 748px / 中等 960px / 宽 1280px / 超宽 1400px / 全宽 100%";
+					btn.setAttribute("aria-label", t("button.aria", { label, value: def.value }));
+					btn.title = `${summary}\n${hint}`;
 				}
 
 				/* ---- tier menu ---- */
@@ -242,15 +282,15 @@ window.__ModuleLoader__.load({
 				menu.setAttribute("role", "menu");
 				menu.hidden = true;
 
-				for (const t of TIERS) {
+				for (const def of TIERS) {
 					const item = document.createElement("button");
 					item.type = "button";
 					item.setAttribute("role", "menuitemradio");
-					item.setAttribute("data-tier", t.id);
-					item.innerHTML = `<span class="dshwm-label">${t.label}</span><span class="dshwm-value">${t.value}</span>`;
+					item.setAttribute("data-tier", def.id);
+					item.innerHTML = `<span class="dshwm-label">${t(def.key)}</span><span class="dshwm-value">${def.value}</span>`;
 					item.addEventListener("click", (e) => {
 						if (e && e.stopPropagation) e.stopPropagation();
-						applyTier(t.id);
+						applyTier(def.id);
 						hideMenu();
 					});
 					menu.appendChild(item);
@@ -263,6 +303,8 @@ window.__ModuleLoader__.load({
 						const on = items[i].getAttribute("data-tier") === tier;
 						items[i].classList.toggle("selected", on);
 						items[i].setAttribute("aria-checked", String(on));
+						const labelEl = items[i].querySelector(".dshwm-label");
+						if (labelEl) labelEl.textContent = t(tierOf(items[i].getAttribute("data-tier")).key);
 					}
 				}
 
@@ -301,6 +343,13 @@ window.__ModuleLoader__.load({
 					window.setTimeout(() => btn.classList.remove("pulse"), 700);
 				}
 
+				/* ---- re-render localized copy when the app language changes ---- */
+				const renderTexts = () => {
+					syncButton();
+					syncMenu();
+				};
+				const unsubscribeLocale = ctx.locale.subscribe(renderTexts);
+
 				/* ---- attach once the app shell has mounted ---- */
 				let attached = false;
 
@@ -339,6 +388,7 @@ window.__ModuleLoader__.load({
 
 				/* ---- disposer ---- */
 				return () => {
+					unsubscribeLocale();
 					clearInterval(readyTimer);
 					clearInterval(healTimer);
 					clearTimeout(timeout);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.0",
-  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full) with a floating picker button. Frees wide tables from the app's hard-coded 748px content cap.",
+  "version": "1.0.1",
+  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full) with a floating picker button. Frees wide tables from the app's hard-coded 748px content cap. UI copy follows the app language (zh / en).",
   "license": "MIT",
   "author": "aaronlei",
   "publishConfig": {
@@ -24,7 +24,8 @@
     "client": {
       "platform": "web",
       "inject": [
-        "@deepseek-ai/dsh-client-ui-layout"
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-locale"
       ]
     }
   },