dsh-pictor 0.2.1 → 0.2.2

package/lib/client.js

@@ -53,11 +53,11 @@ const STYLE = `
   background: var(--dsw-alias-bg-layer-1, #fbfbfa); display: flex; flex-direction: column; overflow-y: auto; }
 .pt-nav-head { padding: 18px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .pt-nav-titles { flex: 1; min-width: 0; }
-.pt-nav-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
+.pt-nav-title { font-size: 15px; font-weight: 650; letter-spacing: -0.15px; margin: 0; }
 .pt-nav-sub { font-size: 13px; color: var(--dsw-alias-label-caption, #8a8a8a); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pt-nav-new { border: 0; background: var(--dsw-alias-state-business-primary, #4f7cff); color: #fff;
-  border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; }
-.pt-nav-new:hover { filter: brightness(.95); }
+.pt-root .pt-nav-new { border: 1px solid transparent; background: var(--dsw-alias-button-primary-fill, #4f7cff); color: var(--dsw-alias-label-primary-foreground, #fff);
+  border-radius: 8px; padding: 5px 12px; font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,0.12); transition: background 140ms ease; }
+.pt-root .pt-nav-new:hover { background: var(--dsw-alias-button-primary-hover, #3a6ae0); }
 .pt-nav-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; min-height: 0; }
 .pt-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
   padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
@@ -78,13 +78,6 @@ const STYLE = `
 .pt-nav-settings:hover { border-color: var(--dsw-alias-border-l1, #b0b0b0); filter: brightness(.98); }
     .pt-nav-settings .glyph { color: var(--dsw-alias-state-business-primary, #4f7cff); font-size: 16px; }
 .pt-nav-settings:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.05)); }
-.pt-lang { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; font-size: 13px;
-  color: var(--dsw-alias-label-caption, #888); }
-.pt-lang-opts { display: inline-flex; border: 1px solid var(--dsw-alias-border-l2, #d8d8d8);
-  border-radius: 999px; overflow: hidden; }
-.pt-lang-opt { border: 0; background: transparent; padding: 2px 10px; font-size: 12.5px; cursor: pointer;
-  color: var(--dsw-alias-label-secondary, #777); }
-.pt-lang-opt.on { background: var(--dsw-alias-state-business-primary, #4f7cff); color: #fff; font-weight: 600; }
 
 /* ---- 主区 ---- */
 .pt-main { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 28px 40px; }
@@ -92,12 +85,16 @@ const STYLE = `
 .pt-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
 .pt-subtitle { margin: 0 0 24px; font-size: 15px; color: var(--dsw-alias-label-secondary, #666); }
 .pt-btn { border: 1px solid var(--dsw-alias-border-l2, #d8d8d8); background: var(--dsw-alias-bg-layer-2, #fff);
-  color: var(--dsw-alias-label-primary, #1a1a1a); border-radius: 12px; padding: 9px 18px; font-size: 15px;
-  font-weight: 550; cursor: pointer; transition: filter 150ms, background 150ms; white-space: nowrap; }
-.pt-btn:hover { filter: brightness(0.96); }
-.pt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-.pt-btn-primary { background: var(--dsw-alias-accent, #4f7cff); border-color: var(--dsw-alias-accent, #4f7cff); color: #fff; }
-.pt-btn-ghost { background: transparent; border-color: transparent; color: var(--dsw-alias-label-secondary, #666); }
+  color: var(--dsw-alias-label-primary, #1a1a1a); border-radius: 8px; padding: 7px 14px; font-size: 14px;
+  font-weight: 500; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; user-select: none; white-space: nowrap; }
+.pt-btn:hover:not(:disabled) { background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.05))); border-color: var(--dsw-alias-border-l3, #ccc); }
+.pt-btn:active { transform: translateY(0.5px); }
+.pt-btn:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #4f7cff); outline-offset: 2px; }
+.pt-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
+.pt-btn-primary { background: var(--dsw-alias-button-primary-fill, #4f7cff); border-color: transparent; color: var(--dsw-alias-label-primary-foreground, #fff); font-weight: 550; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
+.pt-btn-primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover, #3a6ae0); }
+.pt-btn-ghost { background: transparent; border-color: transparent; color: var(--dsw-alias-label-dimmed, #777); }
+.pt-btn-ghost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.05)); color: var(--dsw-alias-label-primary, #1a1a1a); border-color: transparent; }
 .pt-card { background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l2, #e2e2e2);
   border-radius: 16px; padding: 18px 20px; }
 .pt-card-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
@@ -120,10 +117,12 @@ const STYLE = `
 .pt-badge-gated { color: #2563eb; }
 .pt-badge-done { color: #15803d; }
 .pt-badge-idle { color: var(--dsw-alias-label-secondary, #777); }
-.pt-input { width: 100%; border: 1px solid var(--dsw-alias-border-l2, #d8d8d8); border-radius: 12px;
+.pt-input { width: 100%; border: 1px solid var(--dsw-alias-border-l2, #d8d8d8); border-radius: 8px;
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #1a1a1a);
-  padding: 10px 14px; font-size: 15px; outline: none; }
-.pt-input:focus, .pt-rich:focus { border-color: var(--dsw-alias-accent, #4f7cff); }
+  padding: 8px 12px; font-size: 14px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
+.pt-input::placeholder { color: var(--dsw-alias-label-caption, #888); }
+.pt-input:hover { border-color: var(--dsw-alias-border-l3, #c5c5c5); }
+.pt-input:focus, .pt-rich:focus { border-color: var(--dsw-alias-brand-primary, #4f7cff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #4f7cff) 18%, transparent); }
 .pt-textarea { min-height: 90px; resize: vertical; }
 .pt-rich { min-height: 180px; max-height: 320px; overflow-y: auto; padding: 12px 14px; }
 .pt-rich:empty::before { content: attr(data-placeholder); color: var(--dsw-alias-label-caption, #999); }
@@ -206,7 +205,7 @@ const STYLE = `
 .pt-tab.active { background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #1a1a1a);
   border-color: var(--dsw-alias-accent, #4f7cff); }
 .pt-field { margin-bottom: 14px; }
-.pt-field-label { display: block; font-size: 13.5px; font-weight: 550; color: var(--dsw-alias-label-secondary, #666);
+.pt-field-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--dsw-alias-label-primary, #1a1a1a);
   margin-bottom: 6px; }
 .pt-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.38);
   display: flex; align-items: center; justify-content: center; padding: 24px; }
@@ -368,13 +367,22 @@ const I18N = {
     send: 'Send', langLabel: 'Language', loading: 'Loading…',
   },
 }
-let savedLang = 'zh'
-try { savedLang = typeof localStorage !== 'undefined' ? localStorage.getItem('pictor-lang') : null } catch { /* 沙箱可能没有 storage */ }
+function readBandungLang() {
+  try {
+    if (typeof window !== 'undefined' && window.__dshAppDock__ && window.__dshAppDock__.lang) return window.__dshAppDock__.lang.get()
+    return typeof localStorage !== 'undefined' ? (localStorage.getItem('bandung-lang') === 'en' ? 'en' : 'zh') : 'zh'
+  } catch { return 'zh' }
+}
 const langStore = {
-  val: savedLang === 'en' ? 'en' : 'zh',
+  val: readBandungLang(),
   subs: new Set(),
   emit() { for (const f of this.subs) f() },
-  set(v) { this.val = v === 'en' ? 'en' : 'zh'; try { localStorage.setItem('pictor-lang', this.val) } catch { /* ignore */ } this.emit() },
+  set(v) {
+    this.val = v === 'en' ? 'en' : 'zh'
+    try { localStorage.setItem('bandung-lang', this.val) } catch { /* ignore */ }
+    if (typeof window !== 'undefined' && window.__dshAppDock__ && window.__dshAppDock__.lang) window.__dshAppDock__.lang.set(this.val)
+    this.emit()
+  },
   subscribe(f) { this.subs.add(f); return () => { this.subs.delete(f) } },
 }
 function useLang() {
@@ -387,16 +395,6 @@ function t(key, vars) {
   if (vars) { for (const k of Object.keys(vars)) text = text.replace('{' + k + '}', String(vars[k])) }
   return text
 }
-function LangSwitch() {
-  const lang = useLang()
-  const opt = (code, label) => h('button', {
-    className: 'pt-lang-opt' + (lang === code ? ' on' : ''),
-    onClick: () => langStore.set(code),
-  }, label)
-  return h('div', { className: 'pt-lang' },
-    h('span', { className: 'pt-lang-label' }, t('langLabel')),
-    h('div', { className: 'pt-lang-opts' }, opt('zh', '中文'), opt('en', 'English')))
-}
 
 // ---------- 工具 ----------
 
@@ -1666,7 +1664,7 @@ function Workbench(props) {
       h('button', { className: 'pt-nav-settings', onClick: () => setView('settings') },
         h('span', { className: 'glyph' }, '⚙'),
         t('navSettings')),
-      h(LangSwitch, null)))
+      ))
 
   return h('div', { className: 'pt-root pt-workbench' },
     nav,
@@ -1751,12 +1749,12 @@ function apply(ctx) {
   panel.close = () => { if (panel.open) { panel.open = false; panel.emit() } }
   panel.subscribe = (fn) => { panel.subs.add(fn); return () => { panel.subs.delete(fn) } }
   // 点选 dsh 左侧会话（或面板外任意处）自动收起工作台：
-  // 只排除面板本身与 Pictor 启动按钮；侧栏会话此刻在面板左侧始终可点。
+  // 只排除面板本身；侧栏会话此刻在面板左侧始终可点（入口已交给应用坞）。
   if (typeof document !== 'undefined') {
     document.addEventListener('mousedown', (e) => {
       if (!panel.open) return
       const t = e.target
-      if (t && typeof t.closest === 'function' && (t.closest('.pt-shell-panel') || t.closest('.pt-footer-action'))) return
+      if (t && typeof t.closest === 'function' && t.closest('.pt-shell-panel')) return
       panel.close()
     })
   }
@@ -1798,24 +1796,22 @@ function apply(ctx) {
         h(Workbench, { ctx, key: 'shell' })))
   }
 
-  function FooterAction() {
-    useLang() // footer 文案随语言刷新
-    const open = usePanelOpen()
-    return h('div', {
-      className: 'pt-footer-action' + (open ? ' on' : ''),
-      role: 'button',
-      tabIndex: 0,
-      onClick: () => panel.toggle(),
-      onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); panel.toggle() } },
-      title: open ? t('close') : t('open'),
-      'aria-expanded': open ? 'true' : 'false',
-    }, h('span', { className: 'glyph' }, '◈'), 'Pictor')
+  // 入坞：dsh-app-dock 是依赖，入口交给坞（含 ready 延迟注册），自占 footer 槽移除。
+  const registerWithDock = () => {
+    if (typeof window === 'undefined' || !window.__dshAppDock__) return
+    window.__dshAppDock__.register({ id: 'dsh-pictor', label: 'Pictor', icon: '◈', order: 20, onToggle: () => panel.toggle() })
+    if (window.__dshAppDock__.lang) {
+      window.__dshAppDock__.lang.subscribe(() => {
+        const v = window.__dshAppDock__.lang.get()
+        if (langStore.val !== v) { langStore.val = v; langStore.emit() }
+      })
+    }
   }
+  if (typeof window !== 'undefined' && !window.__dshAppDock__) {
+    window.addEventListener('dsh-app-dock:ready', registerWithDock, { once: true })
+  }
+  registerWithDock()
 
-  slots.inject('sidebar.footer.action', () => slots.register(
-    { name: 'sidebar.footer.action', id: 'dsh-pictor', order: 20, label: 'Pictor' },
-    () => h(FooterAction, null),
-  ))
   slots.inject('shell.overlay', () => slots.register(
     { name: 'shell.overlay', id: 'dsh-pictor', order: 10, label: 'Pictor' },
     () => h(WorkbenchPanel, null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-pictor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Pictor：文档转信息图工作台。每项目一个连贯 dsh 会话，GUI 为 shell.overlay 工作台（左栏项目、右栏三步：提取/方案/渲染），行为全部交给 DSH 智能运行时。",
   "type": "module",
   "repository": {
@@ -61,6 +61,9 @@
     "prepare": "node scripts/build.mjs"
   },
   "license": "MIT",
+  "dependencies": {
+    "dsh-app-dock": "^0.1.2"
+  },
   "peerDependencies": {
     "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",