dsh-mega-chat-nav 0.1.1

package/src/client/components/settings/SettingsPage.tsx

@@ -0,0 +1,198 @@
+// 完整配置页（mega-settings 成员页与自足入口共用）
+import { useEffect, useState, type ReactNode } from 'react'
+import { ALIGN_OPTIONS, CARD_ITEM_OPTIONS, CARD_OPTIONS, MARK_TONE_OPTIONS, SCROLL_OPTIONS, SEARCH_SCOPE_OPTIONS, SHOW_OPTIONS, STYLE_OPTIONS, STYLE_CAPABILITIES, type MarkTone } from '../../settings.ts'
+import type { NavInjected, Translate } from '../shared/types.ts'
+
+export interface SettingsPageProps {
+  injected: NavInjected
+  t: Translate
+  /** 已收纳至 mega-settings 时仅显示提示（自足入口让位） */
+  hosted?: boolean
+}
+
+function Seg<T extends string | number>(props: { options: readonly T[]; value: T; labels: Record<string, string>; onPick: (v: T) => void }): ReactNode {
+  return (
+    <div className="mgcn-segmented" role="radiogroup">
+      {props.options.map((o) => (
+        <button
+          key={String(o)}
+          type="button"
+          role="radio"
+          aria-checked={props.value === o}
+          className={props.value === o ? 'mgcn-segment mgcn-segmentActive' : 'mgcn-segment'}
+          onClick={() => props.onPick(o)}
+        >
+          {props.labels[String(o)] ?? String(o)}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function Field({ label, desc, children }: { label: string; desc?: string; children: ReactNode }): ReactNode {
+  return (
+    <div className="mgcn-settingsRow">
+      <div className="mgcn-settingsLabel">
+        <p className="mgcn-settingsTitle">{label}</p>
+        {desc !== undefined ? <p className="mgcn-settingsDesc">{desc}</p> : null}
+      </div>
+      <div className="mgcn-settingsControl">{children}</div>
+    </div>
+  )
+}
+
+function useSettingsTick(subscribe: NavInjected['subscribeSettings']): void {
+  const [, bump] = useState(0)
+  useEffect(() => subscribe(() => bump((n) => n + 1)), [subscribe])
+}
+
+export function SettingsPage(props: SettingsPageProps): ReactNode {
+  const { injected, t, hosted } = props
+  useSettingsTick(injected.subscribeSettings)
+  if (hosted === true) {
+    return <div className="mgcn-settings">{t('settings.hosted')}</div>
+  }
+  return (
+    <div className="mgcn-settings">
+      <Field label={t('config.style')}>
+        <Seg
+          options={STYLE_OPTIONS}
+          value={injected.style()}
+          labels={{ minimal: t('config.style.minimal'), codex: t('config.style.codex'), deepseek: t('config.style.deepseek') }}
+          onPick={(v) => injected.setStyle(v)}
+        />
+      </Field>
+      <Field label={t('config.railOffset')} desc={t('config.railOffset.desc')}>
+        <div className="mgcn-sliderRow">
+          <input
+            type="range"
+            min="0"
+            max="32"
+            step="1"
+            value={injected.railOffset()}
+            onChange={(e) => injected.setRailOffset(Number(e.target.value))}
+          />
+          <span className="mgcn-sliderValue">{injected.railOffset()}px</span>
+        </div>
+      </Field>
+      <Field label={t('config.align')} desc={t('settings.align.desc')}>
+        <Seg
+          options={ALIGN_OPTIONS}
+          value={injected.align()}
+          labels={{ left: t('settings.align.left'), right: t('settings.align.right') }}
+          onPick={(v) => injected.setAlign(v)}
+        />
+      </Field>
+      <Field label={t('config.scrollBehavior')} desc={t('config.scrollBehavior.desc')}>
+        <Seg
+          options={SCROLL_OPTIONS}
+          value={injected.scrollBehavior()}
+          labels={{ smooth: t('config.scrollBehavior.smooth'), instant: t('config.scrollBehavior.instant') }}
+          onPick={(v) => injected.setScrollMode(v)}
+        />
+      </Field>
+      {STYLE_CAPABILITIES[injected.style()].hoverCards ? (
+        <>
+          <Field label={t('config.cardCount')} desc={t('config.cardCount.desc')}>
+            <Seg
+              options={CARD_OPTIONS}
+              value={injected.cardCount()}
+              labels={{ 1: '1', 3: '3', 5: '5' }}
+              onPick={(v) => injected.setCardCount(v)}
+            />
+          </Field>
+          <Field label={t('config.cardItems')} desc={t('config.cardItems.desc')}>
+            <div className="mgcn-checkGroup">
+              {CARD_ITEM_OPTIONS.map((item) => {
+                const on = injected.cardItems().includes(item)
+                return (
+                  <label key={item} className="mgcn-checkItem">
+                    <input
+                      type="checkbox"
+                      checked={on}
+                      onChange={(e) => {
+                        const items = e.target.checked
+                          ? [...injected.cardItems(), item]
+                          : injected.cardItems().filter((x) => x !== item)
+                        injected.setCardItems(items)
+                      }}
+                    />
+                    <span>{t('config.cardItems.' + item)}</span>
+                  </label>
+                )
+              })}
+            </div>
+          </Field>
+        </>
+      ) : null}
+
+      {injected.style() === 'codex' ? (
+        <Field label={t('config.markTone')} desc={t('config.markTone.desc')}>
+          <Seg
+            options={MARK_TONE_OPTIONS}
+            value={injected.markTone()}
+            labels={{ soft: t('config.markTone.soft'), deep: t('config.markTone.deep') }}
+            onPick={(v: MarkTone) => injected.setMarkTone(v)}
+          />
+        </Field>
+      ) : null}
+
+      <Field label={t('config.searchScopes')} desc={t('config.searchScopes.desc')}>
+        <div className="mgcn-checkGroup">
+          {SEARCH_SCOPE_OPTIONS.map((scope) => {
+            const on = injected.searchScopes().includes(scope)
+            const locked = scope === 'user'   // 用户必选，不可取消
+            return (
+              <label key={scope} className="mgcn-checkItem">
+                <input
+                  type="checkbox"
+                  checked={on}
+                  disabled={locked}
+                  onChange={(e) => {
+                    const items = e.target.checked
+                      ? [...injected.searchScopes(), scope]
+                      : injected.searchScopes().filter((x) => x !== scope)
+                    injected.setSearchScopes(items)
+                  }}
+                />
+                <span>{t('config.searchScopes.' + scope)}</span>
+              </label>
+            )
+          })}
+        </div>
+      </Field>
+      <Field label={t('config.showQuickSettings')}>
+        <ModeSeg value={injected.showQuickSettings()} onChange={(v) => injected.setShowQuickSettings(v)} t={t} />
+      </Field>
+      <Field label={t('config.showSearch')}>
+        <ModeSeg value={injected.showSearch()} onChange={(v) => injected.setShowSearch(v)} t={t} />
+      </Field>
+      <Field label={t('config.showFavorites')}>
+        <ModeSeg value={injected.showFavorites()} onChange={(v) => injected.setShowFavorites(v)} t={t} />
+      </Field>
+      <Field label={t('config.showCount')}>
+        <ModeSeg value={injected.showCount()} onChange={(v) => injected.setShowCount(v)} t={t} />
+      </Field>
+      {STYLE_CAPABILITIES[injected.style()].paging ? (
+        <Field label={t('config.showPaging')}>
+          <ModeSeg value={injected.showPaging()} onChange={(v) => injected.setShowPaging(v)} t={t} />
+        </Field>
+      ) : null}
+    </div>
+  )
+}
+
+function ModeSeg({ value, onChange, t }: { value: 'show' | 'peek' | 'hide'; onChange(v: 'show' | 'peek' | 'hide'): void; t: Translate }): ReactNode {
+  return (
+    <Seg
+      options={SHOW_OPTIONS}
+      value={value}
+      labels={{
+        show: t('config.showMode.show'),
+        peek: t('config.showMode.peek'),
+        hide: t('config.showMode.hide'),
+      }}
+      onPick={(v) => onChange(v)}
+    />
+  )
+}

package/src/client/components/settings/StandaloneSettings.tsx

@@ -0,0 +1,28 @@
+// 自足完整配置入口：宿主（mega-settings）已收纳时让位提示，否则渲染完整配置页
+import { useEffect, useState, type ReactNode } from 'react'
+import type { NavInjected, Translate } from '../shared/types.ts'
+import { SettingsPage } from './SettingsPage.tsx'
+
+interface SlotsLike {
+  entries?(key: string): readonly unknown[]
+  subscribe?(key: string, fn: () => void): () => void
+}
+
+export interface StandaloneSettingsProps {
+  injected: NavInjected
+  slots?: SlotsLike
+  t: Translate
+}
+
+export function StandaloneSettings(props: StandaloneSettingsProps): ReactNode {
+  const [hosted, setHosted] = useState(false)
+  useEffect(() => {
+    const check = () => {
+      const n = props.slots?.entries?.('mega.settings.member')?.length ?? 0
+      setHosted(n > 0)
+    }
+    check()
+    return props.slots?.subscribe?.('mega.settings.member', check)
+  }, [props.slots])
+  return <SettingsPage injected={props.injected} t={props.t} hosted={hosted} />
+}

package/src/client/components/shared/types.ts

@@ -0,0 +1,99 @@
+// 跨风格契约：注入面 / 数据形态 / 工具面（仅此——风格实现各自自治）
+import type { BandHeight, CardCount, CardItem, MarkTone, NavStyle, RailAlign, ScrollMode, SearchScope, ShowMode } from '../../settings.ts'
+
+/** 会话投影 face 最小面 */
+export interface ObservableFace {
+  getSnapshot: () => unknown
+  subscribe: (listener: () => void) => () => void
+}
+
+/** 回合标记：某回合的提问组（或一条未入投影的活提问） */
+export interface RailMarker {
+  /** 归属回合；活提问（投影未收）为 null */
+  readonly turn: number | null
+  /** 跳转锚点：组内首问的聊天 key */
+  readonly key: string
+  /** 首问锚点序号 */
+  readonly seq: number
+  /** 首问时间 */
+  readonly time: number
+  /** 组内全部提问文本（按序） */
+  readonly texts: readonly string[]
+  /** 组内全部聊天 key（活合并去重用） */
+  readonly members: readonly string[]
+  /** 该轮性能指标（投影附带；缺数据时省略） */
+  readonly metrics?: { durationMs: number; firstTokenMs: number; tokensPerSec: number }
+}
+
+/** 注册注入面（client/index.ts 装配；各风格经此拿数据与动作） */
+export interface NavInjected {
+  readQuestions: (sessionId: string) => { key: string; anchorSeq: number; seq: number; time: number; text: string }[]
+  subscribeList: (cb: () => void) => () => void
+  subscribeContent: (sessionId: string, cb: () => void) => () => void
+  questionProjection: (sessionId: string) => ObservableFace | undefined
+  /** seq：目标轮序号（方向判定）；currentSeq：当前阅读位置序号（可选，下方判定优先用） */
+  jump: (sessionId: string, key: string, seq?: number, currentSeq?: number) => void
+  style: () => NavStyle
+  setStyle: (style: NavStyle) => void
+  align: () => RailAlign
+  subscribeSettings: (cb: () => void) => () => void
+  setAlign: (align: RailAlign) => void
+  bandHeight: () => BandHeight
+  setBandHeight: (band: BandHeight) => void
+  scrollBehavior: () => ScrollMode
+  setScrollMode: (mode: ScrollMode) => void
+  showCount: () => ShowMode
+  setShowCount: (mode: ShowMode) => void
+  showSearch: () => ShowMode
+  setShowSearch: (mode: ShowMode) => void
+  showQuickSettings: () => ShowMode
+  setShowQuickSettings: (mode: ShowMode) => void
+  showFavorites: () => ShowMode
+  setShowFavorites: (mode: ShowMode) => void
+  showPaging: () => ShowMode
+  setShowPaging: (mode: ShowMode) => void
+  searchScopes: () => SearchScope[]
+  setSearchScopes: (scopes: SearchScope[]) => void
+  railOffset: () => number
+  setRailOffset: (offset: number) => void
+  cardCount: () => CardCount
+  setCardCount: (count: CardCount) => void
+  cardItems: () => CardItem[]
+  setCardItems: (items: CardItem[]) => void
+  markTone: () => MarkTone
+  setMarkTone: (tone: MarkTone) => void
+}
+
+/** 悬停聚焦窗口项 */
+export interface FocusWindowItem {
+  dot: RailMarker
+  distance: number
+}
+
+/** 聚焦状态：卡片呈现所需几何 */
+export interface FocusState {
+  key: string
+  items: FocusWindowItem[]
+  centerY: number
+  left?: number
+  right?: number
+}
+
+/** 会话列表最小面（useSessions selector） */
+export interface SessionListLike {
+  current?: unknown
+  byId?: Record<string, { blank?: boolean }>
+}
+
+/** 翻译函数面 */
+export type Translate = (key: string, vars?: Record<string, string | number>) => string
+
+/** 会话选择器面（useSessions 最小面，宿主按风格组件注入） */
+export type SessionSelector = <S>(selector: (s: SessionListLike) => S) => S
+
+/** 风格组件统一 props 面（各风格自治实现，但入参一致） */
+export interface RailProps {
+  injected: NavInjected | undefined
+  useSessions?: SessionSelector
+  t: Translate
+}