feat(s3): 图片上传到 S3——设置/自动上传/右键单张/批量上传（docs/30）

Rust 新增 s3.rs：SigV4 签名 + PUT Object（reqwest blocking+rustls，
签名对照 AWS 官方示例向量逐字一致；同份代码对本地模拟 S3 端到端
实测通过）。命令 s3_upload_image / s3_test_connection（总数 30 对账）。
配置存 UiState.s3（本机偏好），设置弹窗含测试连接与自动上传开关。
未上传判定 = src 非 http/data/blob 的本地引用；上传成功后同 src 的
图片节点一次事务回换为 S3 地址，本地 .assets 文件保留。
入口：粘贴/插入后自动上传回换（扑空重试一次、失败必提示）；右键
命中本地图片多一项「上传到 S3」；文件菜单 + 状态栏批量上传带进度
弹窗。验证：vitest 133+2、tsc、构建通过，设置弹窗截图核对。

src/App.tsx

@@ -29,13 +29,15 @@ import {
   pickImageFile, pickAnyFile, pickAndReadWebImage, copyToAssets, saveBytesToAssets, fileToBase64,
   statFile, createTextFile, createDirPath, renamePath, deleteToTrash, revealInExplorer, type DirEntry, type RecoveryEntry,
   pickSaveHtmlFile, pickImportFile, readFileBase64, readBinaryFile, pickAndReadWebImport,
-  gitStatus, gitInitRepo, gitSetRemote, gitSyncNow, type GitStatusInfo,
+  gitStatus, gitInitRepo, gitSetRemote, gitSyncNow, s3UploadImage, type GitStatusInfo,
 } from './services/platform'
 import * as store from './services/store'
 import { recoveryKey, planRecovery } from './utils/recovery'
 import { appWindowClaims, appWindowId } from './services/windowClaims'
 import { acquireGitSyncLease, gitStatusLabel, gitSyncCommitMessage, loadGitSyncSettings, releaseGitSyncLease, saveGitSyncSettings, type GitSyncSettings } from './services/gitSync'
 import { GitSyncModal } from './components/GitSyncModal'
+import { S3SettingsModal } from './components/S3SettingsModal'
+import { DEFAULT_S3_SETTINGS, isS3Configured, isLocalImageSrc, resolveDocRelativePath, imageFileName, s3ConfigPayload, type S3Settings } from './services/s3'
 import { RecoveryModal, ConflictModal, QuitModal, PromptModal, ConfirmModal } from './components/Stage4Modals'
 import { AppearanceModal, ExportModal } from './components/Stage5Modals'
 import { DOC_THEMES, docThemeById } from './themes'
@@ -61,11 +63,13 @@ const UI_KEY = 'new-markdown:ui'
 function loadRecent(): string[] {
   try { return JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') as string[] } catch { return [] }
 }
-interface UiState { theme: 'light' | 'dark'; sidebar: boolean; sidebarWidth: number; autosave: boolean; autosaveSeconds: number; docTheme: string; customCss: string; focusMode: boolean; typewriter: boolean; shortcuts: Record<string, string> }
+interface UiState { theme: 'light' | 'dark'; sidebar: boolean; sidebarWidth: number; autosave: boolean; autosaveSeconds: number; docTheme: string; customCss: string; focusMode: boolean; typewriter: boolean; shortcuts: Record<string, string>; s3: S3Settings }
 function loadUi(): UiState {
-  const defaults: UiState = { theme: 'light', sidebar: true, sidebarWidth: 250, autosave: true, autosaveSeconds: 30, docTheme: 'default', customCss: '', focusMode: false, typewriter: false, shortcuts: {} }
+  const defaults: UiState = { theme: 'light', sidebar: true, sidebarWidth: 250, autosave: true, autosaveSeconds: 30, docTheme: 'default', customCss: '', focusMode: false, typewriter: false, shortcuts: {}, s3: DEFAULT_S3_SETTINGS }
   try {
-    return { ...defaults, ...JSON.parse(localStorage.getItem(UI_KEY) ?? '{}') }
+    const parsed = JSON.parse(localStorage.getItem(UI_KEY) ?? '{}') as Partial<UiState>
+    if (parsed.s3) parsed.s3 = { ...DEFAULT_S3_SETTINGS, ...parsed.s3 }
+    return { ...defaults, ...parsed }
   } catch { return defaults }
 }
 
@@ -667,7 +671,11 @@ export default function App() {
       // 否则挂载时的初始默认值会先落库、把用户设置覆盖掉（启动竞态）。
       const uiJson = await store.loadUiPref()
       if (!cancelled && uiJson) {
-        try { setUi((prev) => ({ ...prev, ...JSON.parse(uiJson) })) } catch { /* 偏好损坏时用默认值 */ }
+        try {
+          const parsed = JSON.parse(uiJson) as Partial<UiState>
+          if (parsed.s3) parsed.s3 = { ...DEFAULT_S3_SETTINGS, ...parsed.s3 }
+          setUi((prev) => ({ ...prev, ...parsed }))
+        } catch { /* 偏好损坏时用默认值 */ }
       }
       uiLoadedRef.current = true
       const recentFromDb = await store.loadRecent()
@@ -1078,7 +1086,7 @@ export default function App() {
   }, [])
 
   // ——— 编辑区自绘右键菜单 ———
-  const [editorMenu, setEditorMenu] = useState<{ x: number; y: number; hasSelection: boolean } | null>(null)
+  const [editorMenu, setEditorMenu] = useState<{ x: number; y: number; hasSelection: boolean; imageSrc: string | null } | null>(null)
   const openEditorMenu = (e: React.MouseEvent) => {
     const target = e.target as HTMLElement
     const inEditor = sourceMode
@@ -1087,15 +1095,19 @@ export default function App() {
     if (!inEditor) return
     e.preventDefault()
     let hasSelection = false
+    let imageSrc: string | null = null
     if (sourceMode) {
       hasSelection = sourceApiRef.current?.hasSelection() ?? false
     } else if (tab) {
-      const editor = paneApisRef.current.get(tab.id)?.editor
-      if (editor) {
-        try { hasSelection = editor.action((ctx) => !ctx.get(editorViewCtx).state.selection.empty) } catch { hasSelection = false }
+      const api = paneApisRef.current.get(tab.id)
+      if (api?.editor) {
+        try { hasSelection = api.editor.action((ctx) => !ctx.get(editorViewCtx).state.selection.empty) } catch { hasSelection = false }
       }
+      // 右键命中图片时取出它的文档 src：本地未上传图会在菜单里多一项「上传到 S3」
+      const img = target.closest('img')
+      if (img && api) imageSrc = api.imageSrcForElement(img)
     }
-    setEditorMenu({ x: e.clientX, y: e.clientY, hasSelection })
+    setEditorMenu({ x: e.clientX, y: e.clientY, hasSelection, imageSrc })
   }
   const runEditorMenuAction = (action: EditorMenuAction) => {
     switch (action) {
@@ -1109,6 +1121,7 @@ export default function App() {
       case 'inlineCode': withEditor(editorCommands.inlineCode); break
       case 'link': setModal('link'); break
       case 'toggleSource': toggleSourceMode(); break
+      case 'uploadS3': { const src = editorMenu?.imageSrc; if (src) void runSingleImageUpload(src); break }
     }
   }
 
@@ -1128,6 +1141,8 @@ export default function App() {
 
   const stateRef = useRef(state)
   stateRef.current = state
+  const uiRef = useRef(ui)
+  uiRef.current = ui
 
   // 活动标签变化时登记保活顺序（最近用过的排前面，最多 6 个；超出的卸载走最终回写同步）
   const activeIdForAlive = tab?.id
@@ -1155,13 +1170,92 @@ export default function App() {
     }
   }, [activeIdForAlive])
 
+  // ——— S3 图片上传（docs/30） ———
+  const [s3SettingsOpen, setS3SettingsOpen] = useState(false)
+  const [s3Progress, setS3Progress] = useState<{ total: number; done: number; current: string; errors: string[]; finished: boolean } | null>(null)
+  const s3BusyRef = useRef(false)
+
+  /** 上传一张本地图片（docPath + 文档相对 src），返回 S3 公开地址。 */
+  const uploadLocalImage = useCallback(async (docPath: string, src: string): Promise<string> => {
+    const abs = resolveDocRelativePath(docPath, src)
+    return s3UploadImage(s3ConfigPayload(uiRef.current.s3), abs, imageFileName(src))
+  }, [])
+
+  /** 右键单张上传：成功后把编辑器里的引用换成 S3 地址。 */
+  const runSingleImageUpload = useCallback(async (src: string) => {
+    const current = activeTab(stateRef.current)
+    if (!current?.path) { setError('请先保存文档，再上传图片。'); return }
+    if (!isS3Configured(uiRef.current.s3)) { setS3SettingsOpen(true); flash('先把 S3 配置填好，再上传图片'); return }
+    flash('正在上传图片…')
+    try {
+      const url = await uploadLocalImage(current.path, src)
+      paneApisRef.current.get(current.id)?.replaceImageSrc(src, url)
+      flash('图片已上传到 S3，引用已更新')
+    } catch (e) { setError(e instanceof Error ? e.message : String(e)) }
+  }, [flash, uploadLocalImage])
+
+  /** 批量上传：扫描当前文档全部本地图片逐张上传回换，进度走 s3Progress 弹窗。 */
+  const runBatchImageUpload = async () => {
+    if (!tab?.path) { setError('请先保存文档，再批量上传图片。'); return }
+    if (sourceMode) { flash('源码模式下不能批量上传，请先切回即时渲染'); return }
+    if (!isS3Configured(ui.s3)) { setS3SettingsOpen(true); flash('先把 S3 配置填好，再上传图片'); return }
+    if (s3BusyRef.current) return
+    const api = paneApisRef.current.get(tab.id)
+    if (!api) return
+    const locals = [...new Set(api.listImages().filter(isLocalImageSrc))]
+    if (locals.length === 0) { flash('本文档没有未上传的本地图片'); return }
+    const docPath = tab.path
+    s3BusyRef.current = true
+    setS3Progress({ total: locals.length, done: 0, current: '', errors: [], finished: false })
+    const errors: string[] = []
+    let done = 0
+    for (const src of locals) {
+      setS3Progress((pr) => (pr ? { ...pr, current: imageFileName(src) } : pr))
+      try {
+        const url = await uploadLocalImage(docPath, src)
+        api.replaceImageSrc(src, url)
+      } catch (e) {
+        errors.push(`${imageFileName(src)}：${e instanceof Error ? e.message : String(e)}`)
+      }
+      done += 1
+      setS3Progress((pr) => (pr ? { ...pr, done, errors: [...errors] } : pr))
+    }
+    s3BusyRef.current = false
+    setS3Progress((pr) => (pr ? { ...pr, current: '', errors, finished: true } : pr))
+  }
+
+  /**
+   * 自动上传（设置开关）：图片落盘后在后台上传，成功后把引用换成 S3 地址。
+   * 粘贴建节点是异步的，第一次替换可能扑空，900ms 后重试一次；仍扑空则
+   * 保留本地引用并提示可用批量上传同步，不静默。
+   */
+  const autoUploadSwap = useCallback((tabId: string, docPath: string, relSrc: string) => {
+    const settings = uiRef.current.s3
+    if (!settings.autoUpload || !isS3Configured(settings)) return
+    void (async () => {
+      try {
+        const url = await s3UploadImage(s3ConfigPayload(settings), resolveDocRelativePath(docPath, relSrc), imageFileName(relSrc))
+        let n = paneApisRef.current.get(tabId)?.replaceImageSrc(relSrc, url) ?? 0
+        if (n === 0) {
+          await new Promise((r) => setTimeout(r, 900))
+          n = paneApisRef.current.get(tabId)?.replaceImageSrc(relSrc, url) ?? 0
+        }
+        if (n === 0) flash('图片已上传到 S3，但引用替换未生效，可用「上传文档图片到 S3」再同步一次')
+      } catch (e) {
+        flash(`图片自动上传失败（已保留本地引用）：${e instanceof Error ? e.message : String(e)}`)
+      }
+    })()
+  }, [flash])
+
   /** 粘贴/拖入图片的落盘：桌面模式写入文档 .assets 并回相对路径；未命名文档或 Web 模式退为 data URL。 */
   const handleImageFile = useCallback(async (file: File): Promise<string> => {
     const current = activeTab(stateRef.current)
     if (isTauri() && current?.path) {
       const ext = (file.type.split('/')[1] || 'png').replace('jpeg', 'jpg')
       const named = file.name && file.name !== 'image.png' ? file.name : `image-${Date.now()}.${ext}`
-      return saveBytesToAssets(current.path, named, await fileToBase64(file))
+      const rel = await saveBytesToAssets(current.path, named, await fileToBase64(file))
+      autoUploadSwap(current.id, current.path, rel)
+      return rel
     }
     return new Promise((resolve) => {
       const reader = new FileReader()
@@ -1169,7 +1263,7 @@ export default function App() {
       reader.onerror = () => resolve(URL.createObjectURL(file))
       reader.readAsDataURL(file)
     })
-  }, [])
+  }, [autoUploadSwap])
 
   const insertImage = useCallback(async () => {
     if (!tab) return
@@ -1180,12 +1274,13 @@ export default function App() {
       try {
         const rel = await copyToAssets(picked, tab.path)
         withEditor((e) => editorCommands.image(e, rel, baseName(picked)))
+        autoUploadSwap(tab.id, tab.path, rel)
       } catch (e) { setError(String(e)) }
     } else {
       const picked = await pickAndReadWebImage()
       if (picked) withEditor((e) => editorCommands.image(e, picked.dataUrl, picked.name))
     }
-  }, [tab, tauriMode, withEditor])
+  }, [tab, tauriMode, withEditor, autoUploadSwap])
 
   const insertAttachment = useCallback(async () => {
     if (!tab?.path) { setError('请先保存文档，再插入附件（附件会复制到文档同名 .assets 目录并以链接引用）。'); return }
@@ -1407,6 +1502,16 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [tab?.id, deferredContent],
   )
+  // 状态栏「未上传图片」计数：扫当前文档序列化文本里的本地图片引用（去重）
+  const pendingImages = useMemo(() => {
+    if (!tab?.content || sourceMode) return 0
+    const found = new Set<string>()
+    const re = /!\[[^\]]*\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g
+    let m: RegExpExecArray | null
+    while ((m = re.exec(tab.content))) if (isLocalImageSrc(m[1])) found.add(m[1])
+    return found.size
+  }, [tab?.id, tab?.content, sourceMode])
+
   const statusCounts = useMemo(() => {
     if (!tab) return { words: 0, chars: 0, lines: 0 }
     return { words: countWords(tab.content), chars: countChars(tab.content), lines: tab.content.split('\n').length }
@@ -1430,6 +1535,9 @@ export default function App() {
         { label: '导入 HTML / Word…', onClick: () => void importFileFlow() },
         { label: '导出…', disabled: !tab, onClick: () => setExportOpen(true) },
         { label: '打印 / 导出 PDF…', shortcut: 'Ctrl+P', disabled: !tab, onClick: printDoc },
+        { divider: true },
+        { label: '上传文档图片到 S3…', disabled: !tab || sourceMode, onClick: () => void runBatchImageUpload() },
+        { label: 'S3 上传设置…', onClick: () => setS3SettingsOpen(true) },
       ],
     },
     {
@@ -1734,6 +1842,8 @@ export default function App() {
         sourceMode={sourceMode}
         tauriMode={tauriMode}
         zoom={zoom}
+        pendingImages={pendingImages}
+        onUploadImages={() => void runBatchImageUpload()}
       />
       {gitSettingsOpen && workspaceRoot && (
         <GitSyncModal
@@ -1747,6 +1857,33 @@ export default function App() {
           onClose={() => setGitSettingsOpen(false)}
         />
       )}
+      {s3SettingsOpen && (
+        <S3SettingsModal
+          initial={ui.s3}
+          onSave={(next) => { setUi((u) => ({ ...u, s3: next })); setS3SettingsOpen(false); flash('S3 设置已保存') }}
+          onClose={() => setS3SettingsOpen(false)}
+        />
+      )}
+      {s3Progress && (
+        <div className="modal-backdrop">
+          <div className="modal">
+            <h3>上传图片到 S3</h3>
+            {!s3Progress.finished ? (
+              <p className="modal-note">正在上传 {Math.min(s3Progress.done + 1, s3Progress.total)} / {s3Progress.total}：{s3Progress.current}</p>
+            ) : (
+              <>
+                <p className="modal-note">完成：成功 {s3Progress.total - s3Progress.errors.length} 张，失败 {s3Progress.errors.length} 张。</p>
+                {s3Progress.errors.map((err, i) => (
+                  <p key={i} className="modal-note" style={{ color: 'var(--danger, #c0392b)' }}>{err}</p>
+                ))}
+              </>
+            )}
+            <div className="modal-actions">
+              <button type="button" disabled={!s3Progress.finished} onClick={() => setS3Progress(null)}>关闭</button>
+            </div>
+          </div>
+        </div>
+      )}
       {appearanceOpen && (
         <AppearanceModal
           docTheme={ui.docTheme}
@@ -1785,6 +1922,7 @@ export default function App() {
           x={editorMenu.x}
           y={editorMenu.y}
           hasSelection={editorMenu.hasSelection}
+          imageSrc={editorMenu.imageSrc}
           sourceMode={sourceMode}
           onAction={runEditorMenuAction}
           onClose={() => setEditorMenu(null)}

src/components/EditorContextMenu.tsx

@@ -1,17 +1,20 @@
 import { useRef } from 'react'
 import { useDismiss } from '../hooks/useDismiss'
 import { clampMenuPosition } from '../utils/menuPos'
+import { isLocalImageSrc } from '../services/s3'
 
 export type EditorMenuAction =
   | 'cut' | 'copy' | 'paste' | 'selectAll'
   | 'bold' | 'italic' | 'strikethrough' | 'inlineCode' | 'link'
-  | 'toggleSource'
+  | 'toggleSource' | 'uploadS3'
 
 interface Props {
   x: number
   y: number
   /** 当前是否有选区（决定剪切/复制是否可用） */
   hasSelection: boolean
+  /** 右键命中的图片节点 src（非图片为 null）；本地未上传图时多一项「上传到 S3」 */
+  imageSrc: string | null
   sourceMode: boolean
   onAction: (action: EditorMenuAction) => void
   onClose: () => void
@@ -22,12 +25,13 @@ interface Props {
  * 菜单同一套实现。容器 mousedown 阻止默认行为，让焦点与选区留在编辑器里，
  * execCommand 类命令才作用得准。
  */
-export default function EditorContextMenu({ x, y, hasSelection, sourceMode, onAction, onClose }: Props) {
+export default function EditorContextMenu({ x, y, hasSelection, imageSrc, sourceMode, onAction, onClose }: Props) {
   const ref = useRef<HTMLDivElement>(null)
   useDismiss(ref, true, onClose)
   const act = (a: EditorMenuAction) => { onClose(); onAction(a) }
-  // 位置夹取，避免菜单溢出窗口右/下边（尺寸为估算值：宽约 190，高随模式）
-  const { left, top } = clampMenuPosition(x, y, 188, sourceMode ? 236 : 388)
+  const showUpload = Boolean(imageSrc && isLocalImageSrc(imageSrc))
+  // 位置夹取，避免菜单溢出窗口右/下边（尺寸为估算值：宽约 190，高随模式与图片项）
+  const { left, top } = clampMenuPosition(x, y, 188, (sourceMode ? 236 : 388) + (showUpload ? 40 : 0))
   return (
     <div
       className="tree-context-menu editor-context-menu"
@@ -51,6 +55,12 @@ export default function EditorContextMenu({ x, y, hasSelection, sourceMode, onAc
           <button onClick={() => act('link')}>超链接…</button>
         </>
       )}
+      {showUpload && (
+        <>
+          <div className="tree-menu-divider" />
+          <button onClick={() => act('uploadS3')}>上传到 S3</button>
+        </>
+      )}
       <div className="tree-menu-divider" />
       <button onClick={() => act('toggleSource')}>{sourceMode ? '即时渲染' : '源码模式'}</button>
     </div>

src/components/EditorPane.tsx

@@ -3,7 +3,7 @@ import TableToolbar from './TableToolbar'
 import type { Editor } from '@milkdown/kit/core'
 import { editorViewCtx } from '@milkdown/kit/core'
 import { TextSelection } from '@milkdown/kit/prose/state'
-import { createMarkdownEditor, getMarkdown, type CursorInfo } from '../editor/editor'
+import { createMarkdownEditor, getMarkdown, collectImageSrcs, replaceImageSrc as replaceImageSrcInEditor, imageSrcAtElement, type CursorInfo } from '../editor/editor'
 import { findBlockIndex, type CursorAnchor } from '../editor/cursorSync'
 import { buildTextIndex, findInIndex, type FindOptions, type MatchRange } from '../editor/search'
 import { setFocusModeEnabled, refreshFocusDecorations } from '../editor/plugins'
@@ -19,6 +19,12 @@ export interface EditorPaneApi {
   replaceCurrent: (replacement: string) => boolean
   replaceAll: (replacement: string) => number
   clearFind: () => void
+  /** 文档里全部图片 src（去重）——S3 上传扫描用 */
+  listImages: () => string[]
+  /** 把 src 为 oldSrc 的图片节点全部换成 newSrc，返回替换数 */
+  replaceImageSrc: (oldSrc: string, newSrc: string) => number
+  /** 某 DOM 元素对应的图片节点 src（右键命中图片判定） */
+  imageSrcForElement: (el: HTMLElement) => string | null
 }
 
 interface Props {
@@ -48,6 +54,9 @@ const EMPTY_API: EditorPaneApi = {
   replaceCurrent: () => false,
   replaceAll: () => 0,
   clearFind: () => undefined,
+  listImages: () => [],
+  replaceImageSrc: () => 0,
+  imageSrcForElement: () => null,
 }
 
 /** 单标签编辑器宿主：挂载时以标签内容建模，卸载前回写最终序列化文本，保证切标签不丢内容。 */
@@ -231,6 +240,13 @@ export default function EditorPane({ tabId, initialMarkdown, onMarkdown, onFinal
     const clearFind = () => {
       findRef.current = { matches: [], current: -1, query: '', opts: null }
     }
+    const listImages = (): string[] => {
+      try { return collectImageSrcs(editor) } catch { return [] }
+    }
+    const replaceImageSrc = (oldSrc: string, newSrc: string): number => {
+      try { return replaceImageSrcInEditor(editor, oldSrc, newSrc) } catch { return 0 }
+    }
+    const imageSrcForElement = (el: HTMLElement): string | null => imageSrcAtElement(editor, el)
     editor.create()
       .then(() => {
         // 已卸载（关标签/保活淘汰/epoch 重挂）时不再注册 API：cleanup 已
@@ -241,7 +257,7 @@ export default function EditorPane({ tabId, initialMarkdown, onMarkdown, onFinal
         try {
           editor.action((ctx) => refreshFocusDecorations(ctx.get(editorViewCtx) as never))
         } catch { /* 忽略 */ }
-        callbacksRef.current.onReady({ editor, jumpToHeading, getAnchor, setCursorByAnchor, findAll, gotoMatch, replaceCurrent, replaceAll, clearFind })
+        callbacksRef.current.onReady({ editor, jumpToHeading, getAnchor, setCursorByAnchor, findAll, gotoMatch, replaceCurrent, replaceAll, clearFind, listImages, replaceImageSrc, imageSrcForElement })
         if (chunkLoad) {
           setLoadProgress({ done: 1, total: chunkLoad.totalChunks })
           void chunkLoad.appendRest(

src/components/S3SettingsModal.tsx

@@ -0,0 +1,132 @@
+// S3 图片上传设置（docs/30）：服务端点/区域/存储桶/密钥/前缀/访问域名，
+// 以及「自动上传图片」开关。密钥只保存在本机偏好库里，随调用传给 Rust
+// 签名上传，不写进任何文档、也不会被 Git 同步带走。
+import { useEffect, useState } from 'react'
+import { s3TestConnection } from '../services/platform'
+import { s3ConfigPayload, type S3Settings } from '../services/s3'
+
+export function S3SettingsModal({ initial, onSave, onClose }: {
+  initial: S3Settings
+  onSave: (next: S3Settings) => void
+  onClose: () => void
+}) {
+  const [draft, setDraft] = useState<S3Settings>(initial)
+  const [testState, setTestState] = useState<{ kind: 'idle' | 'busy' | 'ok' | 'err'; text: string }>({ kind: 'idle', text: '' })
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  const set = (patch: Partial<S3Settings>) => {
+    setDraft((d) => ({ ...d, ...patch }))
+    setTestState({ kind: 'idle', text: '' })
+  }
+
+  const test = async () => {
+    setTestState({ kind: 'busy', text: '正在连接…' })
+    try {
+      const msg = await s3TestConnection(s3ConfigPayload(draft))
+      setTestState({ kind: 'ok', text: msg })
+    } catch (e) {
+      setTestState({ kind: 'err', text: e instanceof Error ? e.message : String(e) })
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <h3>S3 图片上传设置</h3>
+        <p className="modal-note">
+          图片上传到你自己的 S3 兼容存储（AWS S3、MinIO、Cloudflare R2、阿里云 OSS 等），
+          文档里的图片引用随之换成公开访问地址。密钥只保存在本机设置里，不会写进文档。
+        </p>
+        <label className="modal-field">
+          <span>服务端点（Endpoint，可空 = AWS S3）</span>
+          <input
+            className="input"
+            value={draft.endpoint}
+            placeholder="https://s3.example.com"
+            onChange={(e) => set({ endpoint: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>区域（Region）*</span>
+          <input
+            className="input"
+            value={draft.region}
+            placeholder="us-east-1"
+            onChange={(e) => set({ region: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>存储桶（Bucket）*</span>
+          <input
+            className="input"
+            value={draft.bucket}
+            placeholder="my-images"
+            onChange={(e) => set({ bucket: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>Access Key *</span>
+          <input
+            className="input"
+            value={draft.accessKey}
+            autoComplete="off"
+            onChange={(e) => set({ accessKey: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>Secret Key *</span>
+          <input
+            className="input"
+            type="password"
+            value={draft.secretKey}
+            autoComplete="off"
+            onChange={(e) => set({ secretKey: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>路径前缀（可空，对象键 = 前缀 + 文件名）</span>
+          <input
+            className="input"
+            value={draft.prefix}
+            placeholder="notes/"
+            onChange={(e) => set({ prefix: e.target.value })}
+          />
+        </label>
+        <label className="modal-field">
+          <span>自定义访问域名（可空，如 CDN 域名；回填文档用它拼地址）</span>
+          <input
+            className="input"
+            value={draft.publicBase}
+            placeholder="https://cdn.example.com"
+            onChange={(e) => set({ publicBase: e.target.value })}
+          />
+        </label>
+        <div className="setting-row">
+          <label>
+            <input
+              type="checkbox"
+              checked={draft.autoUpload}
+              onChange={(e) => set({ autoUpload: e.target.checked })}
+            />
+            自动上传图片（粘贴/插入的图片落盘后自动上传，并换成 S3 地址）
+          </label>
+        </div>
+        {testState.kind !== 'idle' && (
+          <p className="modal-note" style={testState.kind === 'err' ? { color: 'var(--danger, #c0392b)' } : undefined}>
+            {testState.text}
+          </p>
+        )}
+        <div className="modal-actions">
+          <button type="button" onClick={() => void test()} disabled={testState.kind === 'busy'}>测试连接</button>
+          <button type="button" onClick={onClose}>取消</button>
+          <button type="button" className="primary" onClick={() => onSave(draft)}>保存</button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/StatusBar.tsx

@@ -11,6 +11,9 @@ interface Props {
   sourceMode: boolean
   tauriMode: boolean
   zoom: number
+  /** 当前文档未上传的本地图片数（>0 时状态栏出批量上传钮） */
+  pendingImages?: number
+  onUploadImages?: () => void
 }
 
 export default function StatusBar(p: Props) {
@@ -25,6 +28,11 @@ export default function StatusBar(p: Props) {
       <span>{p.dirty ? '未保存' : '已保存'}</span>
       <span>{p.sourceMode ? '源代码模式' : '即时渲染'}</span>
       <span className="status-right">
+        {Boolean(p.pendingImages && p.onUploadImages) && (
+          <button type="button" className="status-upload-btn" onClick={p.onUploadImages}>
+            上传图片到 S3（{p.pendingImages} 张未传）
+          </button>
+        )}
         <span>{Math.round(p.zoom * 100)}%</span>
         <span>{p.tauriMode ? '桌面模式' : 'Web 降级模式（调试）'}</span>
       </span>

src/editor/editor.ts

@@ -165,6 +165,62 @@ export function getMarkdown(editor: Editor): string {
   })
 }
 
+/** 文档里全部图片的 src（按出现顺序、去重）——S3 批量上传扫描用（docs/30）。 */
+export function collectImageSrcs(editor: Editor): string[] {
+  return editor.action((ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const seen = new Set<string>()
+    const out: string[] = []
+    view.state.doc.descendants((node) => {
+      if (node.type.name === 'image') {
+        const src = String(node.attrs.src ?? '')
+        if (src && !seen.has(src)) { seen.add(src); out.push(src) }
+      }
+      return true
+    })
+    return out
+  })
+}
+
+/**
+ * 把文档里所有 src === oldSrc 的图片节点换成 newSrc，返回替换数。
+ * 一次遍历收集位置、同一事务内 setNodeMarkup：image 是叶子节点，
+ * 改属性不改变文档尺寸，位置不会失效。
+ */
+export function replaceImageSrc(editor: Editor, oldSrc: string, newSrc: string): number {
+  return editor.action((ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const positions: number[] = []
+    view.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'image' && String(node.attrs.src ?? '') === oldSrc) positions.push(pos)
+      return true
+    })
+    if (positions.length === 0) return 0
+    const tr = view.state.tr
+    for (const pos of positions) {
+      const node = view.state.doc.nodeAt(pos)
+      if (node) tr.setNodeMarkup(pos, undefined, { ...node.attrs, src: newSrc })
+    }
+    view.dispatch(tr)
+    return positions.length
+  })
+}
+
+/** 右键命中的 <img> 元素对应的图片节点 src（非图片返回 null）——右键菜单判「本地未上传图」用。 */
+export function imageSrcAtElement(editor: Editor, el: HTMLElement): string | null {
+  try {
+    return editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx)
+      const pos = view.posAtDOM(el, 0)
+      const node = view.state.doc.nodeAt(pos)
+      if (!node || node.type.name !== 'image') return null
+      return String(node.attrs.src ?? '') || null
+    })
+  } catch {
+    return null
+  }
+}
+
 export function callUndo(editor: Editor) {
   editor.action((ctx) => ctx.get(commandsCtx).call(undoCommand.key))
 }

src/services/platform.ts

@@ -348,3 +348,25 @@ export async function gitSetRemote(root: string, remoteUrl: string): Promise<Git
 export async function gitSyncNow(root: string, message: string): Promise<GitSyncOutcome> {
   return invoke<GitSyncOutcome>('git_sync_now', { root, message })
 }
+
+// ——— S3 图片上传（docs/30）：配置随调用传入，Rust 侧签名 + PUT，不保存密钥 ———
+
+export interface S3ConfigPayload {
+  endpoint: string
+  region: string
+  bucket: string
+  accessKey: string
+  secretKey: string
+  prefix: string
+  publicBase: string
+}
+
+/** 上传一个本地图片文件，返回应回填文档的公开访问地址。 */
+export async function s3UploadImage(config: S3ConfigPayload, filePath: string, fileName: string): Promise<string> {
+  return invoke<string>('s3_upload_image', { config, filePath, fileName })
+}
+
+/** 对存储桶发签名 HEAD 验连通与密钥，成功返回一句可读结论。 */
+export async function s3TestConnection(config: S3ConfigPayload): Promise<string> {
+  return invoke<string>('s3_test_connection', { config })
+}

src/services/s3.ts

@@ -0,0 +1,76 @@
+// S3 图片上传的前端侧（docs/30）：设置形状、完整性判定、本地图片识别与
+// 路径拼接。真正的签名与 PUT 在 Rust（s3.rs），密钥只随调用传入、不落 Rust 盘。
+import type { S3ConfigPayload } from './platform'
+
+export interface S3Settings extends S3ConfigPayload {
+  /** 粘贴/插入图片落盘后自动上传并把引用换成 S3 地址 */
+  autoUpload: boolean
+}
+
+export const DEFAULT_S3_SETTINGS: S3Settings = {
+  endpoint: '',
+  region: '',
+  bucket: '',
+  accessKey: '',
+  secretKey: '',
+  prefix: '',
+  publicBase: '',
+  autoUpload: false,
+}
+
+/** 四项必填齐了才算配置过（endpoint/前缀/访问域名都是可选）。 */
+export function isS3Configured(s: S3Settings): boolean {
+  return Boolean(s.bucket.trim() && s.region.trim() && s.accessKey.trim() && s.secretKey.trim())
+}
+
+/** 本地图片 = 文档里的相对/本地引用；http(s)/data/blob 已经是网络或内嵌资源，不需要上传。 */
+export function isLocalImageSrc(src: string): boolean {
+  const t = src.trim()
+  if (!t) return false
+  return !/^(https?:|data:|blob:)/i.test(t)
+}
+
+/** 从 UiState.s3 里摘出传给 Rust 的部分（不含 autoUpload）。 */
+export function s3ConfigPayload(s: S3Settings): S3ConfigPayload {
+  return {
+    endpoint: s.endpoint,
+    region: s.region,
+    bucket: s.bucket,
+    accessKey: s.accessKey,
+    secretKey: s.secretKey,
+    prefix: s.prefix,
+    publicBase: s.publicBase,
+  }
+}
+
+/**
+ * 把文档相对路径的图片 src 拼成绝对文件路径（供 Rust 读文件）。
+ * 文本级归一：统一 / 分隔、处理 . 与 ..（图片一般在 <文档名>.assets/ 下，
+ * 手写文档也可能用 ../ 引用）。Windows 盘符与正斜杠都兼容。
+ */
+export function resolveDocRelativePath(docPath: string, relSrc: string): string {
+  const decoded = safeDecode(relSrc).replace(/\\/g, '/')
+  if (/^[a-zA-Z]:\//.test(decoded) || decoded.startsWith('/')) return decoded
+  const dir = docPath.replace(/\\/g, '/').replace(/\/[^/]*$/, '')
+  const parts: string[] = []
+  for (const seg of `${dir}/${decoded}`.split('/')) {
+    if (seg === '' || seg === '.') {
+      if (seg === '' && parts.length === 0) parts.push('')
+      continue
+    }
+    if (seg === '..') { parts.pop(); continue }
+    parts.push(seg)
+  }
+  return parts.join('/') || '/'
+}
+
+function safeDecode(s: string): string {
+  try { return decodeURIComponent(s) } catch { return s }
+}
+
+/** src 的文件名部分（对象键用它；保留原名便于在桶里辨认）。 */
+export function imageFileName(src: string): string {
+  const clean = safeDecode(src).replace(/\\/g, '/')
+  const name = clean.split('/').pop() ?? ''
+  return name || 'image.png'
+}

src/styles.css

@@ -97,6 +97,8 @@ button { font: inherit; color: inherit; }
 .sidebar-tabs .sidebar-collapse:hover { color: var(--text); background: var(--hover); }
 .sidebar-expand { position: absolute; left: 10px; top: 10px; z-index: 35; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; }
 .sidebar-expand:hover { color: var(--text); border-color: var(--accent); }
+.status-upload-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-family: inherit; cursor: pointer; }
+.status-upload-btn:hover { color: var(--accent); border-color: var(--accent); }
 .source-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 35; background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); }
 .source-toggle:hover { color: var(--text); border-color: var(--accent); }
 .tree-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }