dsh-obsidian-memo 0.16.3

package/src/client/reader/use-note-editor.js

@@ -0,0 +1,230 @@
+/** 持有抽屉读取、草稿、保存与任务写入；拒绝迟到回调覆盖新会话。 */
+import { clearStoredPinnedNote } from '../preferences.js';
+import { React } from '../react.js';
+import { callRpc } from '../runtime.js';
+import { isAbortError } from '../utils.js';
+
+function useNoteEditor(options) {
+  const { tRef, aliveRef, controllersRef, request, refreshNow, replaceNote, replaceRenamedNote,
+  pushToast, pushErrorToast, onOpen, onClose } = options;
+  const [noteDrawer, setNoteDrawer] = React.useState(null); // { path, summary, full, loading, error }
+  const noteDrawerRef = React.useRef(null);
+  const drawerAbortRef = React.useRef(null);
+  const [editing, setEditing] = React.useState(false);
+  const editingRef = React.useRef(false);
+  const [bodyDraft, setBodyDraft] = React.useState('');
+  const bodyDraftRef = React.useRef('');
+  const [titleDraft, setTitleDraft] = React.useState('');
+  const [savingNote, setSavingNote] = React.useState(false);
+  const savingNoteRef = React.useRef(false);
+  const [taskBusy, setTaskBusy] = React.useState(false);
+  const taskBusyRef = React.useRef(false);
+  const editorSessionRef = React.useRef(0);
+  function updateDrawer(value) {
+    const next = typeof value === 'function' ? value(noteDrawerRef.current) : value;
+    noteDrawerRef.current = next;
+    setNoteDrawer(next);
+  }
+  React.useEffect(() => () => {
+    if (drawerAbortRef.current) drawerAbortRef.current.abort();
+  }, []);
+  function closeNoteDrawer() {
+    // noteDrawerRef 可能为空（首次打开前/关闭后），判空后再读 summary（0.13 修复）。
+    editorSessionRef.current += 1;
+    const closing = noteDrawerRef.current;
+    if (editingRef.current && closing) {
+      const full = closing.full;
+      const original = full && typeof full.body === 'string' ? full.body : '';
+      const summaryName = closing.summary && typeof closing.summary.name === 'string' ? closing.summary.name : '';
+      const originalName = (full && (full.name || full.title)) || summaryName || '';
+      if (bodyDraftRef.current !== original || titleDraft.trim() !== originalName) {
+        pushToast({ text: tRef.current('drawer.editDiscarded'), kind: 'info' });
+      }
+    }
+    if (drawerAbortRef.current) {
+      drawerAbortRef.current.abort();
+      drawerAbortRef.current = null;
+    }
+    onClose();
+    editingRef.current = false;
+    bodyDraftRef.current = '';
+    savingNoteRef.current = false;
+    setEditing(false);
+    setBodyDraft('');
+    setSavingNote(false);
+    // 0.13.4：主动关闭后不再记住这篇（锁定态重进时改为选当前筛选第一篇）。
+    clearStoredPinnedNote();
+    updateDrawer(null);
+  }
+
+  async function loadNote(path) {
+    if (typeof path !== 'string' || path === '') return;
+    if (!noteDrawerRef.current || noteDrawerRef.current.path !== path) return;
+    updateDrawer((current) => (current && current.path === path
+      ? Object.assign({}, current, { loading: true, error: null })
+      : current));
+    if (drawerAbortRef.current) drawerAbortRef.current.abort();
+    const controller = new AbortController();
+    drawerAbortRef.current = controller;
+    controllersRef.current.add(controller);
+    try {
+      const full = await callRpc('note', { path: path }, controller.signal);
+      if (!aliveRef.current || controller.signal.aborted || drawerAbortRef.current !== controller || editingRef.current) return;
+      updateDrawer((current) => {
+        if (!current || current.path !== path) return current;
+        return Object.assign({}, current, {
+          full: full && typeof full === 'object' ? full : null,
+          summary: full && typeof full === 'object' ? full : current.summary,
+          loading: false,
+          error: null,
+        });
+      });
+    } catch (error) {
+      if (isAbortError(error)) return;
+      if (!aliveRef.current || controller.signal.aborted || drawerAbortRef.current !== controller) return;
+      updateDrawer((current) => {
+        if (!current || current.path !== path) return current;
+        return Object.assign({}, current, {
+          loading: false,
+          error: error && error.message ? error.message : String(error),
+        });
+      });
+    } finally {
+      controllersRef.current.delete(controller);
+      if (drawerAbortRef.current === controller) drawerAbortRef.current = null;
+    }
+  }
+
+  function openNoteDrawer(note) {
+    if (!note || typeof note.path !== 'string') return;
+    editorSessionRef.current += 1;
+    onOpen();
+    editingRef.current = false;
+    bodyDraftRef.current = '';
+    savingNoteRef.current = false;
+    setEditing(false);
+    setBodyDraft('');
+    setSavingNote(false);
+    updateDrawer({ path: note.path, summary: note, full: null, loading: true, error: null });
+    loadNote(note.path);
+  }
+
+  function handleBodyChange(value) {
+    bodyDraftRef.current = value;
+    setBodyDraft(value);
+  }
+
+  function startEditing() {
+    if (taskBusyRef.current || savingNoteRef.current) return;
+    const current = noteDrawerRef.current;
+    if (!current || !current.full) return;
+    if (typeof current.full.body !== 'string') return;
+    if (drawerAbortRef.current) drawerAbortRef.current.abort();
+    updateDrawer(Object.assign({}, current, { loading: false }));
+    bodyDraftRef.current = current.full.body;
+    setBodyDraft(current.full.body);
+    setTitleDraft(current.full.name || current.full.title || '');
+    editingRef.current = true;
+    setEditing(true);
+  }
+
+  async function toggleTask(sourceLine, checked) {
+    const current = noteDrawerRef.current;
+    if (!current || !current.full || editingRef.current || taskBusyRef.current) return;
+    taskBusyRef.current = true;
+    setTaskBusy(true);
+    try {
+      const result = await request('toggleTask', { path: current.path, sourceLine, checked, expectedBody: current.full.body });
+      if (result.note) replaceNote(result.note);
+      await loadNote(current.path);
+      await refreshNow(false);
+    } catch (error) {
+      if (!isAbortError(error)) pushErrorToast(error);
+      await loadNote(current.path);
+    } finally {
+      taskBusyRef.current = false;
+      if (aliveRef.current) setTaskBusy(false);
+    }
+  }
+
+  function cancelEditing() {
+    if (savingNoteRef.current) return;
+    const current = noteDrawerRef.current;
+    const full = current && current.full;
+    const original = full && typeof full.body === 'string' ? full.body : '';
+    const summaryName = current && current.summary && typeof current.summary.name === 'string' ? current.summary.name : '';
+    const originalName = (full && (full.name || full.title)) || summaryName || '';
+    if (bodyDraftRef.current !== original || titleDraft.trim() !== originalName) {
+      pushToast({ text: tRef.current('drawer.editDiscarded'), kind: 'info' });
+    }
+    editingRef.current = false;
+    bodyDraftRef.current = '';
+    setEditing(false);
+    setBodyDraft('');
+    if (current) loadNote(current.path);
+  }
+
+  function saveEditing() {
+    const current = noteDrawerRef.current;
+    if (!current || savingNoteRef.current) return;
+    const path = current.path;
+    const session = editorSessionRef.current;
+    const body = bodyDraftRef.current;
+    const original = current.full && typeof current.full.body === 'string' ? current.full.body : '';
+    const summaryName = current.summary && typeof current.summary.name === 'string' ? current.summary.name : '';
+    const originalName = (current.full && (current.full.name || current.full.title)) || summaryName || '';
+    const name = titleDraft.trim();
+    if (!name) {
+      pushErrorToast(new Error('便签文件名不能为空'));
+      return;
+    }
+    if (body === original && name === originalName) {
+      editingRef.current = false;
+      bodyDraftRef.current = '';
+      setEditing(false);
+      setBodyDraft('');
+      return;
+    }
+    savingNoteRef.current = true;
+    setSavingNote(true);
+    request('saveNote', { path: path, body: body, name: name, expectedRevision: current.full && current.full.contentRevision })
+      .then((value) => {
+        if (!aliveRef.current) return;
+        const savedNote = value && value.note;
+        if (savedNote) {
+          if (typeof savedNote.path === 'string' && savedNote.path !== path) replaceRenamedNote(path, savedNote);
+          else replaceNote(savedNote);
+        }
+        // 用户在保存途中切换/关闭了抽屉：不要动新抽屉的编辑态。
+        const stillOpen = Boolean(editorSessionRef.current === session && noteDrawerRef.current && noteDrawerRef.current.path === path);
+        if (stillOpen) {
+          if (savedNote && savedNote.path !== path) {
+            noteDrawerRef.current = { path: savedNote.path, summary: savedNote, full: null, loading: true, error: null };
+            updateDrawer(noteDrawerRef.current);
+          }
+          editingRef.current = false;
+          bodyDraftRef.current = '';
+          setEditing(false);
+          setBodyDraft('');
+          setTitleDraft(savedNote ? savedNote.name : name);
+          loadNote(savedNote ? savedNote.path : path);
+          pushToast({ text: tRef.current('drawer.saved'), kind: 'success' });
+        }
+        return refreshNow(false);
+      })
+      .catch((error) => {
+        if (aliveRef.current && !isAbortError(error)) pushErrorToast(error);
+      })
+      .then(() => {
+        if (editorSessionRef.current !== session) return;
+        savingNoteRef.current = false;
+        if (aliveRef.current) setSavingNote(false);
+      });
+  }
+
+  return { noteDrawer, noteDrawerRef, editing, editingRef, bodyDraft, titleDraft, setTitleDraft,
+  savingNote, savingNoteRef, taskBusy, closeNoteDrawer, loadNote, openNoteDrawer,
+  handleBodyChange, startEditing, toggleTask, cancelEditing, saveEditing };
+}
+
+export { useNoteEditor };

package/src/client/reader/use-pinned-note.js

@@ -0,0 +1,41 @@
+/** 记忆并恢复钉住的便签，编辑和保存期间保留当前草稿。 */
+import { readStoredPinnedNote, storePinnedNote } from '../preferences.js';
+import { React } from '../react.js';
+
+function usePinnedNote({ closeNoteDrawer, editing, editingRef, noteDrawer, noteDrawerRef, openNoteDrawer, pinned, pinnedUserClosedRef, savingNoteRef, sortedNotes, view }) {
+  React.useEffect(() => {
+    if (!pinned) return;
+    if (noteDrawer && typeof noteDrawer.path === 'string' && noteDrawer.path !== '') storePinnedNote(noteDrawer.path);
+  }, [pinned, noteDrawer && noteDrawer.path]);
+
+  React.useEffect(() => {
+    if (!pinned || !view.loaded || pinnedUserClosedRef.current) return;
+    if (noteDrawerRef.current) return;
+    if (sortedNotes.length === 0) return;
+    const stored = readStoredPinnedNote();
+    // 「当前筛选里最前的一篇」按当前排序结果算（默认创建时间新→旧）。
+    const target = (stored !== '' && sortedNotes.find((note) => note.path === stored)) || sortedNotes[0];
+    if (target) openNoteDrawer(target);
+  }, [pinned, view.loaded, sortedNotes]);
+
+  React.useEffect(() => {
+    if (!view.loaded) return;
+    // 编辑中不切走/不关闭：日期筛选变化等触发的自动切换会重置草稿；等保存/取消后再跟随。
+    if (editingRef.current) return;
+    // 保存请求还在飞（尤其改名）：等乐观更新/refresh 落地后再判断，避免误关抽屉。
+    if (savingNoteRef.current) return;
+    const current = noteDrawerRef.current;
+    if (!current) return;
+    if (sortedNotes.some((note) => note.path === current.path)) return;
+    if (pinned) {
+      const next = sortedNotes[0];
+      if (next && next.path !== current.path) openNoteDrawer(next);
+      else if (!next) closeNoteDrawer();
+    } else {
+      closeNoteDrawer();
+    }
+  }, [sortedNotes, pinned, view.loaded, editing]);
+
+}
+
+export { usePinnedNote };

package/src/client/runtime.js

@@ -0,0 +1,30 @@
+/** 持有当前宿主连接与翻译函数，集中处理 RPC 信封和错误。 */
+import { CHANNEL } from './constants.js';
+import { isAbortError, makeError } from './utils.js';
+
+let runtime = null;
+
+async function callRpc(endpoint, payload, signal) {
+  if (!runtime || !runtime.connection || !runtime.connection.rpc || typeof runtime.connection.rpc.call !== 'function') {
+    throw makeError('offline', runtime && runtime.t ? runtime.t('error.offline') : 'Connection unavailable');
+  }
+  let result;
+  try {
+    result = await runtime.connection.rpc.call(CHANNEL, endpoint, payload, signal);
+  } catch (error) {
+    if (isAbortError(error)) throw error;
+    throw makeError('transport', error && error.message ? error.message : String(error));
+  }
+  if (result && result.ok === true) return result.value;
+  const failure = result && result.error ? result.error : null;
+  throw makeError(
+    failure && typeof failure.code === 'string' ? failure.code : 'failed',
+    failure && typeof failure.message === 'string' && failure.message !== ''
+      ? failure.message
+      : (runtime && runtime.t ? runtime.t('error.failed') : 'Request failed'),
+  );
+}
+
+function setRuntime(value) { runtime = value; }
+
+export { runtime, callRpc, setRuntime };

package/src/client/settings/ai-budget-row.js

@@ -0,0 +1,65 @@
+/** AI 预算字段展示与输入。 */
+import { Fragment, h } from '../react.js';
+import { AI_EFFORTS, AI_MAX_TOKENS_MAX, AI_MAX_TOKENS_MIN, AI_PRESET_IDS, patchAiBudget, readAiBudget } from './ai-budget.js';
+
+function AiBudgetRow(props) {
+  const { t, ai, disabled, onChange } = props;
+  const value = readAiBudget(ai);
+  const presetDetail = (id) => t('settings.aiPresetDetail.' + id);
+  const commitTokens = (event) => {
+    const raw = String(event.target.value).trim();
+    const parsed = raw === '' ? NaN : Number(raw);
+    if (!Number.isFinite(parsed)) {
+      // 空/非法输入：恢复当前值，不写脏数据。
+      event.target.value = String(value.maxTokens);
+      return;
+    }
+    const next = patchAiBudget(value, { maxTokens: parsed });
+    onChange(next);
+    event.target.value = String(next.maxTokens);
+  };
+  return h('div', { className: 'SN_aiBudgetRow', 'data-sn-ai-budget': '' },
+    h('span', { className: 'SN_aiBudgetLabel', title: t('settings.aiBudgetHint') }, t('settings.aiBudget')),
+    h('select', {
+      className: 'SN_select',
+      value: value.preset,
+      disabled: disabled,
+      'aria-label': t('settings.aiBudget'),
+      title: presetDetail(value.preset),
+      onChange: (event) => onChange(patchAiBudget(value, { preset: event.target.value })),
+    }, AI_PRESET_IDS.map((id) => h('option', { key: id, value: id, title: presetDetail(id) }, t('settings.aiPreset.' + id)))),
+    value.preset === 'custom'
+      ? h(Fragment, null,
+        h('select', {
+          className: 'SN_select',
+          value: value.reasoningEffort,
+          disabled: disabled,
+          'aria-label': t('settings.aiEffort'),
+          title: t('settings.aiEffort'),
+          onChange: (event) => onChange(patchAiBudget(value, { reasoningEffort: event.target.value })),
+        }, AI_EFFORTS.map((id) => h('option', { key: id, value: id }, t('settings.aiEffort.' + id)))),
+        h('input', {
+          type: 'number',
+          className: 'SN_aiTokens',
+          defaultValue: String(value.maxTokens),
+          min: AI_MAX_TOKENS_MIN,
+          max: AI_MAX_TOKENS_MAX,
+          step: 256,
+          disabled: disabled,
+          'aria-label': t('settings.aiMaxTokens'),
+          title: t('settings.aiMaxTokens'),
+          onBlur: commitTokens,
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commitTokens(event);
+            }
+          },
+        }),
+        h('span', { className: 'SN_aiUnit' }, t('settings.aiTokensUnit')),
+      )
+      : null,
+  );
+}
+
+export { AiBudgetRow };

package/src/client/settings/ai-budget.js

@@ -0,0 +1,42 @@
+/** AI 预算预设与规范化纯函数；与 Host 常量保持一致。 */
+
+
+const AI_PRESETS = {
+  low: { reasoningEffort: 'off', maxTokens: 2048 },
+  medium: { reasoningEffort: 'low', maxTokens: 4096 },
+  high: { reasoningEffort: 'high', maxTokens: 8192 },
+};
+
+const AI_PRESET_IDS = ['low', 'medium', 'high', 'custom'];
+
+const AI_EFFORTS = ['off', 'low', 'high', 'max'];
+
+const AI_MAX_TOKENS_MIN = 256;
+
+const AI_MAX_TOKENS_MAX = 65536;
+
+const DEFAULT_AI = { preset: 'high', reasoningEffort: 'high', maxTokens: 8192 };
+
+function readAiBudget(ai) {
+  const source = ai && typeof ai === 'object' ? ai : {};
+  const preset = AI_PRESET_IDS.indexOf(source.preset) >= 0 ? source.preset : DEFAULT_AI.preset;
+  // 非自定义档一律按预设映射，保证界面选哪档、实际请求就是哪档。
+  if (preset !== 'custom') return { preset: preset, reasoningEffort: AI_PRESETS[preset].reasoningEffort, maxTokens: AI_PRESETS[preset].maxTokens };
+  const reasoningEffort = AI_EFFORTS.indexOf(source.reasoningEffort) >= 0 ? source.reasoningEffort : DEFAULT_AI.reasoningEffort;
+  const raw = Number(source.maxTokens);
+  const maxTokens = Number.isFinite(raw)
+    ? Math.min(AI_MAX_TOKENS_MAX, Math.max(AI_MAX_TOKENS_MIN, Math.round(raw)))
+    : DEFAULT_AI.maxTokens;
+  return { preset: 'custom', reasoningEffort: reasoningEffort, maxTokens: maxTokens };
+}
+
+function patchAiBudget(ai, patch) {
+  const current = readAiBudget(ai);
+  const next = Object.assign({}, current, patch && typeof patch === 'object' ? patch : {});
+  if (patch && AI_PRESET_IDS.indexOf(patch.preset) >= 0 && patch.preset !== 'custom') {
+    Object.assign(next, AI_PRESETS[patch.preset]);
+  }
+  return readAiBudget(next);
+}
+
+export { AI_PRESETS, AI_PRESET_IDS, AI_EFFORTS, AI_MAX_TOKENS_MIN, AI_MAX_TOKENS_MAX, DEFAULT_AI, readAiBudget, patchAiBudget };

package/src/client/settings/callouts.js

@@ -0,0 +1,21 @@
+/** 评论 callout 类型和中英文名称。 */
+
+
+const CALLOUT_IDS = [
+  'note', 'abstract', 'info', 'todo', 'tip', 'success', 'question',
+  'warning', 'failure', 'danger', 'bug', 'example', 'quote',
+];
+
+const CALLOUT_ZH = {
+  note: '笔记', abstract: '摘要', info: '信息', todo: '待办', tip: '提示',
+  success: '成功', question: '问题', warning: '警告', failure: '失败',
+  danger: '危险', bug: '缺陷', example: '示例', quote: '引用',
+};
+
+const CALLOUT_EN = {
+  note: 'Note', abstract: 'Abstract', info: 'Info', todo: 'Todo', tip: 'Tip',
+  success: 'Success', question: 'Question', warning: 'Warning', failure: 'Failure',
+  danger: 'Danger', bug: 'Bug', example: 'Example', quote: 'Quote',
+};
+
+export { CALLOUT_IDS, CALLOUT_ZH, CALLOUT_EN };

package/src/client/settings/config-file.js

@@ -0,0 +1,74 @@
+/** 打开、加载、重载与另存配置文件的设置组件。 */
+import { React, h } from '../react.js';
+import { joinPath } from '../utils.js';
+
+function ConfigFileSettings({ t, config, disabled, request, onSettings }) {
+  const [path, setPath] = React.useState('');
+  const [mode, setMode] = React.useState('');
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const [message, setMessage] = React.useState('');
+  const accept = (result, action) => {
+    if (result.settings && onSettings) onSettings(result.settings, action);
+    if (action === 'load' || action === 'relocate') { setMode(''); setPath(''); }
+    if (action !== 'open' && action !== 'reveal') setMessage(t('settings.configDone'));
+  };
+  const run = (action) => {
+    if (busy || disabled) return;
+    setBusy(true); setError(''); setMessage('');
+    request('configFile', { action, path }).then((result) => accept(result, action))
+      .catch((cause) => setError(cause.message || String(cause))).finally(() => setBusy(false));
+  };
+  const loadConfig = () => {
+    if (busy || disabled || config?.pinned) return;
+    setBusy(true); setError(''); setMessage('');
+    request('chooseConfigFile', {}).then((result) => {
+      if (!result.path) return;
+      return request('configFile', { action: 'load', path: result.path }).then((loaded) => accept(loaded, 'load'));
+    }).catch((cause) => setError(cause.message || String(cause))).finally(() => setBusy(false));
+  };
+  const chooseDirectory = () => {
+    if (busy || disabled) return;
+    setBusy(true); setError('');
+    request('chooseConfigDirectory', {}).then((result) => {
+      if (!result.path) return;
+      setPath(joinPath(result.path, 'config.json'));
+    }).catch((cause) => setError(cause.message || String(cause))).finally(() => setBusy(false));
+  };
+  const showMode = (action) => {
+    setError(''); setMessage(''); setMode(action); setPath('');
+  };
+  const blocked = busy || disabled;
+  return h('section', { className: 'SN_drawerSection' },
+    h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.config')),
+    h('code', { className: 'SN_configPath' }, config?.path || t('panel.loading')),
+    config?.error ? h('p', { className: 'SN_settingsError', role: 'alert' }, config.error) : null,
+    h('p', { className: 'SN_fieldHint' }, t(config?.pinned ? 'settings.configPinned' : 'settings.configHint')),
+    h('div', { className: 'SN_configActions' },
+      h('button', { type: 'button', className: 'SN_ghostBtn', disabled: blocked, onClick: () => run('reveal') }, t('settings.openConfig')),
+      h('button', { type: 'button', className: 'SN_ghostBtn', disabled: blocked || config?.pinned,
+        onClick: loadConfig, title: t(config?.pinned ? 'settings.configPinned' : 'settings.configLoadHint') }, t('settings.loadConfig')),
+      h('select', { className: 'SN_ghostBtn', value: '', disabled: blocked, 'aria-label': t('settings.configActions'), onChange: (event) => {
+        const action = event.target.value;
+        if (action === 'openFile') { setMode(''); run('open'); }
+        else if (action === 'reload') { setMode(''); run('reload'); }
+        else if (action === 'relocate') showMode('relocate');
+      } },
+        h('option', { value: '' }, t('settings.configActions')),
+        h('option', { value: 'openFile' }, t('settings.openConfigFile')),
+        h('option', { value: 'reload' }, t('settings.reloadConfig')),
+        !config?.pinned ? h('option', { value: 'relocate' }, t('settings.relocateConfig')) : null)),
+    !config?.pinned && mode === 'relocate' ? h('div', { className: 'SN_configEditor' },
+      h('p', { className: 'SN_fieldHint' }, t('settings.configCopyHint')),
+      h('div', { className: 'SN_configPathRow' },
+        h('input', { type: 'text', className: 'SN_textInput', value: path, placeholder: t('settings.configPath'),
+          'aria-label': t('settings.configPath'), disabled: blocked, onChange: (event) => setPath(event.target.value) }),
+        h('button', { type: 'button', className: 'SN_ghostBtn', disabled: blocked, onClick: chooseDirectory }, t('settings.pick'))),
+      h('div', { className: 'SN_pathActions' },
+        h('button', { type: 'button', className: 'SN_ghostBtn', disabled: blocked, onClick: () => { setMode(''); setPath(''); } }, t('settings.cancel')),
+        h('button', { type: 'button', className: 'SN_primaryBtn', disabled: blocked || !path.trim(), onClick: () => run(mode) }, t('settings.relocateConfig')))) : null,
+    error ? h('p', { className: 'SN_settingsError', role: 'alert' }, error) : null,
+    message ? h('p', { className: 'SN_fieldHint', role: 'status' }, message) : null);
+}
+
+export { ConfigFileSettings };

package/src/client/settings/image-processing.js

@@ -0,0 +1,31 @@
+/** 图片压缩与尺寸设置视图。 */
+import { readImageCompression } from '../capture/images.js';
+import { h } from '../react.js';
+
+function ImageProcessingSettings({ t, value, disabled, onChange, children }) {
+  const config = readImageCompression(value);
+  const numeric = (field, min, max, label) => h('label', { className: 'SN_field' },
+    h('span', { className: 'SN_fieldLabel' }, t(label)),
+    h('input', { type: 'number', className: 'SN_textInput', key: field + ':' + config[field],
+      defaultValue: config[field], min, max, step: 1, disabled: disabled || !config.enabled,
+      'aria-label': t(label), onBlur: (event) => {
+        const raw = event.target.value.trim();
+        const next = readImageCompression({ ...config, [field]: raw === '' ? config[field] : Number(raw) });
+        onChange(next); event.target.value = String(next[field]);
+      }, onKeyDown: (event) => { if (event.key === 'Enter') { event.preventDefault(); event.target.blur(); } },
+    }));
+  return h('div', { className: 'SN_drawerSection', 'data-sn-image-processing': '' },
+    h('div', { className: 'SN_drawerSectionHead' }, h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.images'))),
+    children,
+    h('label', { className: 'SN_imageSettingToggle' },
+      h('input', { type: 'checkbox', checked: config.enabled, disabled,
+        onChange: (event) => onChange({ ...config, enabled: event.target.checked }) }),
+      h('span', null, t('settings.compressWebp'))),
+    h('p', { className: 'SN_drawerSectionHint' }, t('settings.imagesHint')),
+    h('div', { className: 'SN_imageSettingNumbers' },
+      numeric('quality', 1, 100, 'settings.imageQuality'),
+      numeric('maxDimension', 256, 8192, 'settings.imageResolution')),
+  );
+}
+
+export { ImageProcessingSettings };

package/src/client/settings/official-page.js

@@ -0,0 +1,32 @@
+/** 官方设置页复用配置轮询、草稿 hook 和设置组件。 */
+import { useNotesData } from '../data/use-notes-data.js';
+import { React, h } from '../react.js';
+import { runtime } from '../runtime.js';
+import { SettingsDrawer } from './settings-drawer.js';
+import { useSettingsDraft } from './use-settings-draft.js';
+
+function OfficialSettingsPage() {
+  const t = (runtime && runtime.t) || ((key) => key);
+  const tRef = React.useRef(t); tRef.current = t;
+  const panelRef = React.useRef(null);
+  const [message, setMessage] = React.useState('');
+  const [error, setError] = React.useState('');
+  const data = useNotesData({ panelRef, settingsOnly: true, onState() {}, onVisible() {}, onError: (cause) => setError(cause.message || String(cause)) });
+  const controls = useSettingsDraft({ ...data, t, tRef, panelRef, onOpen() {},
+    pushToast: (toast) => { setMessage(toast.text); setError(''); }, pushErrorToast: (cause) => setError(cause.message || String(cause)) });
+  React.useEffect(() => {
+    if (data.view.settings && !controls.settingsOpen && !controls.savingSettings) controls.openSettings();
+  }, [data.view.settings, controls.settingsOpen, controls.savingSettings]);
+  return h('div', { className: 'SN_panel SN_officialSettings', ref: panelRef },
+    error ? h('p', { className: 'SN_settingsError', role: 'alert' }, error) : null,
+    message ? h('p', { className: 'SN_fieldHint', role: 'status' }, message) : null,
+    !data.view.loaded ? h('p', null, t('panel.loading')) : null,
+    controls.settingsDraft ? h(SettingsDrawer, { t, draft: controls.settingsDraft, inline: true,
+      picking: controls.picking, saving: controls.savingSettings, request: data.request,
+      initialTab: controls.settingsTab, onConfigSettings: controls.acceptConfigSettings,
+      onPatch: controls.patchDraft, onPick: controls.systemPick, onRemoveArchive: controls.removeArchiveTarget,
+      onPatchEmoji: controls.patchEmoji, onRemoveEmoji: controls.removeEmoji, onAddEmoji: controls.addEmoji,
+      onSave: controls.saveSettingsDraft, onCancel: controls.closeSettings }) : null);
+}
+
+export { OfficialSettingsPage };