dsh-xrxs-lingting 0.4.0-dev.49 → 0.4.0-dev.50

package/README.md

@@ -98,7 +98,7 @@ LINGTING_XIN_PROBE=1 nohup "/path/to/DSH Desktop Dev.app/Contents/MacOS/DSH Desk
 
 ## 客户端兼容性验证
 
-`0.4.0-dev.48` 起不再要求宿主提供旧版补丁的 `layout.business`。标准薪灵客户端通过公开的 `shell.overlay` 插槽显示灵听页面，页面中的「返回聊天」关闭页面；提供业务页扩展的旧宿主仍沿用原入口。
+`0.4.0-dev.48` 起不再要求宿主提供旧版补丁的 `layout.business`。`0.4.0-dev.50` 起，标准薪灵客户端通过渲染器公开的 `[data-slot="conversation"]` 标记，将原有灵听页面挂载到主内容区：保留侧栏，暂时隐藏而不卸载聊天，返回时恢复原聊天和草稿。弹窗、列表、实时转写仍复用原组件；转写面板继续使用 `shell.overlay`。提供业务页扩展的旧宿主仍沿用原入口。
 
 发布前除单元测试外，应在构建后对目标薪灵源码运行客户端产物冒烟，验证真实布局对象、公开插槽、页面打开及返回聊天：
 
@@ -108,3 +108,5 @@ npm run smoke:client -- /path/to/cinlyn-desktop
 ```
 
 该检查不代替安装后对授权、录音、转写和回放的人工验证。
+
+布局回归验证：`node scripts/smoke-layout-browser.mjs <playwright/index.mjs 路径>`，使用 Chrome 无头浏览器运行真实插件产物，验证页面边界、弹窗居中、转写面板层级、窗口缩放与卸载后聊天恢复。使用合成录音状态，不访问业务数据、不采集声音。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-xrxs-lingting",
-  "version": "0.4.0-dev.49",
+  "version": "0.4.0-dev.50",
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1",

package/plugin-dist/client.js

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(client_exports);
 var define_import_meta_env_default = { VITE_XIN_PACKAGED: "1" };
 
 // src/plugin/client.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react2 = require("react");
@@ -5419,11 +5419,63 @@ function createBusinessNavigation() {
   };
 }
 
+// src/plugin/business-surface.tsx
+var import_react22 = require("react");
+var import_react_dom = require("react-dom");
+function mountBusinessSurface(doc) {
+  const conversation = doc.querySelector('[data-slot="conversation"]');
+  const center = conversation?.parentElement;
+  if (!conversation || !center) return null;
+  const target = doc.createElement("section");
+  target.className = "lt-business-surface";
+  target.setAttribute("aria-label", "\u7075\u542C");
+  const display = conversation.style.getPropertyValue("display");
+  const displayPriority = conversation.style.getPropertyPriority("display");
+  const position = center.style.getPropertyValue("position");
+  const positionPriority = center.style.getPropertyPriority("position");
+  const inert = conversation.inert;
+  conversation.style.setProperty("display", "none", "important");
+  conversation.inert = true;
+  center.style.setProperty("position", "relative");
+  center.appendChild(target);
+  let disposed = false;
+  return { target, dispose() {
+    if (disposed) return;
+    disposed = true;
+    target.remove();
+    if (display) conversation.style.setProperty("display", display, displayPriority);
+    else conversation.style.removeProperty("display");
+    conversation.inert = inert;
+    if (position) center.style.setProperty("position", position, positionPriority);
+    else center.style.removeProperty("position");
+  } };
+}
+function BusinessSurface({ children }) {
+  const [target, setTarget] = (0, import_react22.useState)(null);
+  (0, import_react22.useLayoutEffect)(() => {
+    let mounted = null;
+    const attach = () => {
+      if (mounted?.target.isConnected) return;
+      mounted?.dispose();
+      mounted = mountBusinessSurface(document);
+      setTarget(mounted?.target ?? null);
+    };
+    attach();
+    const observer = new MutationObserver(attach);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      mounted?.dispose();
+    };
+  }, []);
+  return target ? (0, import_react_dom.createPortal)(children, target) : null;
+}
+
 // src/plugin/embedded.css
 var tag3 = document.createElement("style");
 tag3.dataset.plugin = "dsh-xrxs-lingting";
 tag3.dataset.pluginCss = "dsh-xrxs-lingting/embedded.css";
-tag3.textContent = ".lingting-root { color-scheme: light; }\n/* Host \u9002\u914D\u5C42\u72B6\u6001\u63D0\u793A\uFF08\u6388\u6743/\u8EAB\u4EFD/\u76EE\u7684\u5730\u672A\u5C31\u7EEA\uFF09\uFF1A\u56FA\u5B9A\u9876\u90E8\uFF0C\u53EF\u5173\u95ED\uFF0C\u4E0D\u53C2\u4E0E\u9875\u9762\u5E03\u5C40 */\n.lt-host-notice { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(680px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #e7e0fa; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgb(40 28 74 / 16%); color: #605972; font-size: 13px; line-height: 1.5; }\n.lt-host-notice-text { flex: 1; }\n.lt-host-notice-close { flex-shrink: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }\n.lt-host-notice-close:hover { background: #6650d814; }\n.lt-host-notice-close:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n/* \u5D4C\u5165\u6A21\u5F0F\u4E0B\u6839\u5143\u7D20\u5373 .app\uFF08lingting-root app \u540C\u5143\u7D20\uFF09\uFF0C\u89C4\u5219\u9700\u7528\u7EC4\u5408\u9009\u62E9\u5668\uFF1B\u4FDD\u7559\u540E\u4EE3\u5F62\u5F0F\u517C\u5BB9\u53CC\u5C42\u5305\u88F9\u7ED3\u6784 */\n.lingting-root[data-embedded] { height: 100%; min-height: 0; container-type: inline-size; }\n.lingting-root[data-embedded].app, .lingting-root[data-embedded] .app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-bottom: 0; }\n.lingting-root[data-embedded].app .app-header, .lingting-root[data-embedded] .app-header { height: 66px; flex-shrink: 0; }\n.lingting-root[data-embedded].app .header-inner, .lingting-root[data-embedded] .header-inner { padding: 0 28px; max-width: none; }\n.lingting-root[data-embedded].app .brand-caption, .lingting-root[data-embedded] .brand-caption { display: none; }\n.lingting-root[data-embedded].app .main-content, .lingting-root[data-embedded] .main-content { width: 100%; max-width: none; min-height: 0; flex: 1; overflow: auto; padding: 30px 28px 0; scrollbar-width: thin; }\n\n.lingting-root[data-embedded].app .toast, .lingting-root[data-embedded] .toast { position: absolute; top: 77px; }\n.lingting-root[data-global-status] { flex-shrink: 0; border-top: 1px solid #e7e0fa; background: white; padding: 0 24px; }\n.lingting-root[data-global-status] .recording-controls.compact { min-height: 76px; padding: 12px 0; }\n.lingting-root[data-global-status] .error-notice { margin: 8px 0 0; }\n.lingting-sidebar-entry { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--dsw-alias-text-primary, #605972); padding: 10px 12px; width: 100%; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; }\n.lingting-sidebar-entry:hover, .lingting-sidebar-entry[data-active] { background: #6650d814; color: #6650d8; }\n.lingting-sidebar-entry:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n@container (max-width: 900px) {\n  .lingting-root[data-embedded] .overview-note { display: none; }\n  .lingting-root[data-embedded] .overview { grid-template-columns: 1fr 1fr; }\n  .lingting-root[data-embedded] .list-heading { flex-wrap: wrap; }\n  .lingting-root[data-embedded] .source-label { display: none; }\n}\n\n/* Standard DSH has no layout.business extension; keep the page in its public overlay slot. */\n.lt-business-surface { position: fixed; inset: 48px 12px 12px; z-index: 40; min-width: 0; overflow: hidden; border: 1px solid #e7e0fa; border-radius: 12px; background: #fff; box-shadow: 0 8px 32px #2c245221; pointer-events: auto; -webkit-app-region: no-drag; }\n";
+tag3.textContent = ".lingting-root { color-scheme: light; }\n/* Host \u9002\u914D\u5C42\u72B6\u6001\u63D0\u793A\uFF08\u6388\u6743/\u8EAB\u4EFD/\u76EE\u7684\u5730\u672A\u5C31\u7EEA\uFF09\uFF1A\u56FA\u5B9A\u9876\u90E8\uFF0C\u53EF\u5173\u95ED\uFF0C\u4E0D\u53C2\u4E0E\u9875\u9762\u5E03\u5C40 */\n.lt-host-notice { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(680px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #e7e0fa; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgb(40 28 74 / 16%); color: #605972; font-size: 13px; line-height: 1.5; }\n.lt-host-notice-text { flex: 1; }\n.lt-host-notice-close { flex-shrink: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }\n.lt-host-notice-close:hover { background: #6650d814; }\n.lt-host-notice-close:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n/* \u5D4C\u5165\u6A21\u5F0F\u4E0B\u6839\u5143\u7D20\u5373 .app\uFF08lingting-root app \u540C\u5143\u7D20\uFF09\uFF0C\u89C4\u5219\u9700\u7528\u7EC4\u5408\u9009\u62E9\u5668\uFF1B\u4FDD\u7559\u540E\u4EE3\u5F62\u5F0F\u517C\u5BB9\u53CC\u5C42\u5305\u88F9\u7ED3\u6784 */\n.lingting-root[data-embedded] { height: 100%; min-height: 0; container-type: inline-size; }\n.lingting-root[data-embedded].app, .lingting-root[data-embedded] .app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-bottom: 0; }\n.lingting-root[data-embedded].app .app-header, .lingting-root[data-embedded] .app-header { height: 66px; flex-shrink: 0; }\n.lingting-root[data-embedded].app .header-inner, .lingting-root[data-embedded] .header-inner { padding: 0 28px; max-width: none; }\n.lingting-root[data-embedded].app .brand-caption, .lingting-root[data-embedded] .brand-caption { display: none; }\n.lingting-root[data-embedded].app .main-content, .lingting-root[data-embedded] .main-content { width: 100%; max-width: none; min-height: 0; flex: 1; overflow: auto; padding: 30px 28px 0; scrollbar-width: thin; }\n\n.lingting-root[data-embedded].app .toast, .lingting-root[data-embedded] .toast { position: absolute; top: 77px; }\n.lingting-root[data-global-status] { flex-shrink: 0; border-top: 1px solid #e7e0fa; background: white; padding: 0 24px; }\n.lingting-root[data-global-status] .recording-controls.compact { min-height: 76px; padding: 12px 0; }\n.lingting-root[data-global-status] .error-notice { margin: 8px 0 0; }\n.lingting-sidebar-entry { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--dsw-alias-text-primary, #605972); padding: 10px 12px; width: 100%; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; }\n.lingting-sidebar-entry:hover, .lingting-sidebar-entry[data-active] { background: #6650d814; color: #6650d8; }\n.lingting-sidebar-entry:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n@container (max-width: 900px) {\n  .lingting-root[data-embedded] .overview-note { display: none; }\n  .lingting-root[data-embedded] .overview { grid-template-columns: 1fr 1fr; }\n  .lingting-root[data-embedded] .list-heading { flex-wrap: wrap; }\n  .lingting-root[data-embedded] .source-label { display: none; }\n}\n\n/* Use the real center column, preserving the host sidebar and conversation state. */\n.lt-business-surface { position: absolute; inset: 0; z-index: 1; min-width: 0; overflow: hidden; background: #f8f9fc; pointer-events: auto; -webkit-app-region: no-drag; }\n/* Host reset styles must not remove the native dialog's centered placement. */\n.lingting-root .modal { margin: auto; background: #fff; }\n";
 document.querySelectorAll("style[data-plugin-css=" + JSON.stringify("dsh-xrxs-lingting/embedded.css") + "]").forEach((old) => old.remove());
 document.head.appendChild(tag3);
 
@@ -5431,7 +5483,7 @@ document.head.appendChild(tag3);
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ID = "dsh-xrxs-lingting";
 var inject = ["slots", "layout"];
-var PanelBoundary = class extends import_react22.Component {
+var PanelBoundary = class extends import_react23.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -5472,8 +5524,8 @@ async function apply(ctx) {
   }));
   const unregisterPage = business.register(ID);
   function Entry({ wide }) {
-    const panel = (0, import_react22.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
-    const layout = (0, import_react22.useSyncExternalStore)(business.subscribe, business.getSnapshot);
+    const panel = (0, import_react23.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
+    const layout = (0, import_react23.useSyncExternalStore)(business.subscribe, business.getSnapshot);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "lingting-sidebar-entry", "data-active": layout.activeId === ID || panel.open || void 0, title: "\u7075\u542C", "aria-label": "\u7075\u542C", onClick: () => business.open(ID), children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Headphones, { size: 19 }),
       wide && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u7075\u542C" })
@@ -5483,9 +5535,9 @@ async function apply(ctx) {
     return activeId === ID ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LingtingApp, { service, navigation, visible: true, embedded: true, hostState, onBackToHost: () => business.close(), onOpenLive: () => controller.open(), onOpenRecord: (id) => controller.openRecord(id) }) }) : null;
   }
   function Overlay() {
-    const page = (0, import_react22.useSyncExternalStore)(business.subscribe, business.getSnapshot, business.getSnapshot);
+    const page = (0, import_react23.useSyncExternalStore)(business.subscribe, business.getSnapshot, business.getSnapshot);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      !hostBusiness && page.activeId === ID && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: "lt-business-surface", "aria-label": "\u7075\u542C", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, { activeId: page.activeId }) }),
+      !hostBusiness && page.activeId === ID && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BusinessSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, { activeId: page.activeId }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(XinHostNotice, { store: hostState }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LingtingSidebar, { service, controller, onOpenPage: () => business.open(ID) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MeetingPrompt, { service }) })