cx-viewer 1.0.2 → 1.0.4

package/src/contexts/SettingsContext.jsx

@@ -0,0 +1,140 @@
+import React, { createContext, useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { apiUrl } from '../utils/apiUrl';
+import { setLang } from '../i18n';
+import { setCodexConfigDir } from '../utils/tCodex';
+
+// 集中管理 /api/codex-settings 与 /api/preferences,消除多组件重复 fetch。
+// AppBase 通过 contextType 直接消费;ChatView/TerminalPanel/AppHeader 等子组件
+// 走 props drill 接收 settings 与 updater 回调,避免与 TerminalWsContext 的 contextType 冲突。
+//
+// 数据更新走纯 React 渠道:updatePreferences 内 setState → preferences 引用变化 →
+// ChatView/TerminalPanel.componentDidUpdate 接力调用 _loadPresets 等。
+// 不再用 'cxv-presets-changed' window event,避免 props 驱动 + 事件驱动双重触发。
+
+export const SettingsContext = createContext({
+  codexSettings: null,
+  preferences: null,
+  _prefsReady: Promise.resolve({}),
+  _codexSettingsReady: Promise.resolve({}),
+  updatePreferences: () => Promise.resolve(null),
+  updateCodexSettings: () => Promise.resolve(null),
+  mergeLocalPreferences: () => {},
+});
+
+export function SettingsProvider({ children }) {
+  const [codexSettings, setCodexSettings] = useState(null);
+  const [preferences, setPreferences] = useState(null);
+  const mountedRef = useRef(true);
+  // 镜像最新 preferences 供 updatePreferences 读取（useCallback 依赖空数组，闭包看不到最新 state）。
+  // 关键用途：判断当前是否处于"项目独立配置"作用域（_projectScoped），决定写全局还是写项目 fork。
+  const prefsRef = useRef(null);
+
+  // useState 的 lazy 初始化器同步启动 fetch,首次 render 时 Promise 已 in-flight,
+  // 保证消费方(AppBase.componentDidMount)拿到的是真实数据 Promise 而非兜底 Promise。
+  // setLang / setCodexConfigDir 全局副作用在 fetch 回包时立即执行,不等 useEffect。
+  const [readyPromises] = useState(() => {
+    const prefsReady = fetch(apiUrl('/api/preferences'))
+      .then(res => res.json())
+      .then(data => {
+        if (typeof data?.codexConfigDir === 'string') setCodexConfigDir(data.codexConfigDir);
+        if (data?.lang) setLang(data.lang);
+        return data;
+      })
+      .catch(() => ({}));
+    const codexReady = fetch(apiUrl('/api/codex-settings'))
+      .then(res => res.ok ? res.json() : {})
+      .then(data => {
+        if (typeof data?.codexConfigDir === 'string') setCodexConfigDir(data.codexConfigDir);
+        return data;
+      })
+      .catch(() => ({}));
+    return { prefsReady, codexReady };
+  });
+
+  useEffect(() => {
+    // effect 入口重置 mountedRef:StrictMode/HMR 下 mount → cleanup → remount 时 ref 对象复用,
+    // 仅靠 useRef(true) 初始化无法在 remount 时重置,会让后续 setState 永远被跳过。
+    mountedRef.current = true;
+    readyPromises.prefsReady.then(data => {
+      if (mountedRef.current && data) { prefsRef.current = data; setPreferences(data); }
+    });
+    readyPromises.codexReady.then(data => {
+      if (mountedRef.current && data) setCodexSettings(data);
+    });
+    return () => { mountedRef.current = false; };
+  }, [readyPromises]);
+
+  // 乐观写本地缓存(与原 fire-and-forget 等价,不做回滚)。
+  // setState 触发 Provider re-render → 子树拿到新 preferences 引用 → componentDidUpdate 接力 reload。
+  //
+  // 项目独立配置作用域感知：当前若处于 _projectScoped（非本机 + 当前项目已 fork），所有偏好写入
+  // 改投 /api/project-prefs/update（仅作用于当前项目 fork），不再污染全局 preferences.json。
+  const updatePreferences = useCallback((patch) => {
+    const merged = { ...(prefsRef.current || {}), ...patch };
+    prefsRef.current = merged;
+    if (mountedRef.current) setPreferences(merged);
+    const scoped = !!merged._projectScoped;
+    const url = scoped ? '/api/project-prefs/update' : '/api/preferences';
+    const body = scoped ? { patch } : patch;
+    return fetch(apiUrl(url), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    }).then(r => r.ok ? r.json() : null).catch(() => null);
+  }, []);
+
+  // 仅更新本地缓存（state + prefsRef），不发网络请求。用于把服务端已确认的状态乐观写回，
+  // 例如 toggle 项目独立配置成功后立刻把 _projectScoped 翻过来，关掉"确认→刷新到位"之间的
+  // 误路由窗口（此刻若改其它偏好，updatePreferences 才会按新作用域投递）。
+  const mergeLocalPreferences = useCallback((partial) => {
+    const merged = { ...(prefsRef.current || {}), ...partial };
+    prefsRef.current = merged;
+    if (mountedRef.current) setPreferences(merged);
+  }, []);
+
+  // 重新拉取 /api/preferences 并广播（toggle 项目独立配置后、admin 改完别人项目 fork 后调用）。
+  // 返回最新数据的 Promise，便于 AppBase 接着重跑本地 state 水合（_hydratePrefsFromData）。
+  const refreshPreferences = useCallback(() => {
+    return fetch(apiUrl('/api/preferences'))
+      .then(res => res.json())
+      .then(data => {
+        if (typeof data?.codexConfigDir === 'string') setCodexConfigDir(data.codexConfigDir);
+        if (data?.lang) setLang(data.lang);
+        prefsRef.current = data;
+        if (mountedRef.current) setPreferences(data);
+        return data;
+      })
+      .catch(() => null);
+  }, []);
+
+  const updateCodexSettings = useCallback((patch) => {
+    if (mountedRef.current) {
+      setCodexSettings(prev => ({ ...(prev || {}), ...patch }));
+    }
+    return fetch(apiUrl('/api/codex-settings'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    }).then(r => r.ok ? r.json() : null).then(data => {
+      if (typeof data?.codexConfigDir === 'string') setCodexConfigDir(data.codexConfigDir);
+      return data;
+    }).catch(() => null);
+  }, []);
+
+  const value = useMemo(() => ({
+    codexSettings,
+    preferences,
+    _prefsReady: readyPromises.prefsReady,
+    _codexSettingsReady: readyPromises.codexReady,
+    updatePreferences,
+    updateCodexSettings,
+    refreshPreferences,
+    mergeLocalPreferences,
+  }), [codexSettings, preferences, readyPromises, updatePreferences, updateCodexSettings, refreshPreferences, mergeLocalPreferences]);
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}

package/src/env.js

@@ -0,0 +1,54 @@
+// iPadOS 13+ Safari 伪装为 Mac UA，需用 maxTouchPoints 辅助识别
+const _isIPadOS = navigator.maxTouchPoints > 1 && /Macintosh/i.test(navigator.userAgent);
+const _params = new URLSearchParams(window.location.search);
+// URL 参数 ?mobile=1 强制移动端模式
+const _forceMobile = _params.get('mobile') === '1';
+// URL 参数 ?ipad=1 iPad/平板模式（Mobile 布局 + PC 缩放）
+const _forcePad = _params.get('ipad') === '1';
+// localStorage 保存的视图模式偏好（URL 参数优先级更高）
+const _savedMode = (!_forceMobile && !_forcePad) ? localStorage.getItem('cxv_viewMode') : null;
+// 窄屏自动切 iPad 模式：PC UA + 无偏好 + 宽度 < 750px → 自动 pad
+const _autoNarrow = !_forceMobile && !_forcePad && !_savedMode
+  && !(/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)) && !_isIPadOS
+  && window.innerWidth < 750;
+
+export const isPad = _forcePad || _savedMode === 'pad' || _autoNarrow;
+export const isMobile = _forcePad || _forceMobile || _savedMode === 'pad' || _autoNarrow
+  || (_savedMode !== 'pc' && (/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) || _isIPadOS));
+export const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent) || _isIPadOS;
+// Android——用于终端渲染器选择:Android 与 macOS 桌面(longtask 守卫可用时)启用 WebGL,
+// 其它平台(Windows/Linux/iOS/iPad)用 DOM 渲染器更稳定。详见 TerminalPanel WEBGL_RENDERER。
+export const isAndroid = /Android/i.test(navigator.userAgent);
+// Electron preload 在页面加载前注入 window.electronAPI，模块初始化时计算即可。
+export const isElectron = typeof window !== 'undefined' && !!window.electronAPI;
+
+// 是否具备「原生整体缩放」能力 = 运行在 Electron 的 tab-content WebContentsView 内。
+// 注意:tab content 注入的是 window.tabBridge(非 window.electronAPI，后者只在 workspace 视图)，
+// 故这里以 tabBridge.setZoomFactor 是否存在为准。为 true → 显示「显示大小」预设下拉(走 webFrame
+// .setZoomFactor 原生缩放);为 false(纯浏览器)→ 改显 (?) 提示用户用浏览器自带快捷键缩放。
+export const hasNativeZoom = typeof window !== 'undefined'
+  && typeof window.tabBridge?.setZoomFactor === 'function';
+
+// Mac(⌘)vs 其它(Ctrl)——仅用于浏览器缩放提示文案选对修饰键。
+export const isMac = typeof navigator !== 'undefined'
+  && /Mac/i.test(navigator.platform || navigator.userAgent || '');
+
+// Windows——终端字体栈（CJK 字形需显式落到雅黑）与 xterm 宽字形缩放仅在 Windows 启用。
+export const isWindows = typeof navigator !== 'undefined'
+  && /Win/i.test(navigator.platform || navigator.userAgent || '');
+
+if (isPad) {
+  document.documentElement.classList.add('pad-mode');
+}
+if (isMobile && isIOS && !isPad) {
+  document.documentElement.classList.add('mobile-ios');
+}
+
+/**
+ * 切换视图模式并重载页面。必须 reload：isPad/isMobile（本文件顶部）在模块加载时按 cxv_viewMode
+ * 计算一次，决定挂载 App 还是 Mobile 树，运行期无法软切换，故写入偏好后整页重载。
+ */
+export function setViewMode(mode) {
+  localStorage.setItem('cxv_viewMode', mode);
+  location.reload();
+}