@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/harness/composer/context-meter.tsx

@@ -16,12 +16,17 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import { m } from "@/paraglide/messages.js"
-import type { UIMessage } from "@tanstack/ai-client"
+
+/** 结构化最小消息契约：仅依赖 parts.type/content 估算 token（与调用方
+ * HarnessComposer 的消息形状结构对齐，不再要求完整 UIMessage） */
+interface ContextMeterMessage {
+  parts: ReadonlyArray<{ type: string; content?: unknown }>
+}
 
 interface ContextMeterProps {
-  messages: UIMessage[]
+  messages: ReadonlyArray<ContextMeterMessage>
   capacity?: number
 }
 
@@ -30,16 +35,20 @@ const DEFAULT_CAPACITY = 128_000
 export function ContextMeter({ messages, capacity = DEFAULT_CAPACITY }: ContextMeterProps) {
   const [open, setOpen] = useState(false)
 
-  const estTokens = Math.round(
-    messages.reduce(
-      (s, msg) =>
-        s +
-        msg.parts.reduce(
-          (acc, p) => acc + (p.type === "text" ? String(p.content ?? "").length : 400),
+  const estTokens = useMemo(
+    () =>
+      Math.round(
+        messages.reduce(
+          (s, msg) =>
+            s +
+            msg.parts.reduce(
+              (acc, p) => acc + (p.type === "text" ? String(p.content ?? "").length : 400),
+              0,
+            ),
           0,
-        ),
-      0,
-    ) / 4,
+        ) / 4,
+      ),
+    [messages],
   )
 
   const pct = Math.min(1, estTokens / capacity)

package/src/components/harness/composer/harness-composer.tsx

@@ -130,6 +130,9 @@ export interface HarnessComposerProps {
       whenBusy?: "queue" | "interrupt"
       knowledgeBaseIds?: string[]
       attachments?: Array<{ type: "image"; source: { type: "data"; value: string; mimeType: string } }>
+      /** handoff 板块上下文透传（服务端注入系统提示词用） */
+      board?: string
+      entityId?: string
     }
   ) => void
   onStop: () => void
@@ -196,7 +199,7 @@ export function HarnessComposer({
       }
     }
   }, [pendingPrefillEntity, pendingPrefillText, hasAiKey])
-  const { attachments, addFiles, removeAttachment, clearAttachments } = useAttachments()
+  const { attachments, addFiles, removeAttachment, clearAttachments, hasUploading } = useAttachments()
   // @mention chip 中携带的 kbId（由 ComposerEditor 通过 onMentionKbIds 回调上报）
   const [editorMentionKbIds, setEditorMentionKbIds] = useState<string[]>([])
 
@@ -263,17 +266,35 @@ export function HarnessComposer({
         ...new Set([...(knowledgeBaseIds ?? []), ...editorMentionKbIds]),
       ]
 
+      // 已就绪的图片附件随消息发送（dataUrl 通道）；非图片（BlobStore blobRef）
+      // 走不了该通道，保留在托盘避免静默丢弃
+      const readyImages = attachments
+        .filter((a) => a.status === "ready" && a.dataUrl)
+        .map((a) => ({
+          type: "image" as const,
+          source: { type: "data" as const, value: a.dataUrl as string, mimeType: a.file.type },
+        }))
+      const unsentNonImage = attachments.some((a) => !(a.status === "ready" && a.dataUrl))
+
       onSend(text, {
         whenBusy: "queue",
         knowledgeBaseIds: mergedKbIds.length ? mergedKbIds : undefined,
+        attachments: readyImages.length ? readyImages : undefined,
         // 透传板块上下文（如果存在），服务端可据此注入系统提示词
         ...(handoffContext ? { board: handoffContext.board, entityId: handoffContext.entityId } : {}),
       })
       editorRef.current?.commands.clearContent()
       setInput("")
-      clearAttachments()
+      if (unsentNonImage) {
+        // 仅移除已随消息发送的图片，未发送的非图片附件留在托盘可见
+        attachments
+          .filter((a) => a.status === "ready" && a.dataUrl)
+          .forEach((a) => removeAttachment(a.id))
+      } else {
+        clearAttachments()
+      }
     },
-    [hasAiKey, onSend, knowledgeBaseIds, editorMentionKbIds, handoffContext, clearAttachments, mediaRoute, threadId]
+    [hasAiKey, onSend, knowledgeBaseIds, editorMentionKbIds, handoffContext, clearAttachments, removeAttachment, attachments, mediaRoute, threadId]
   )
 
   const handleStop = useCallback(() => {
@@ -282,12 +303,13 @@ export function HarnessComposer({
 
   const decision = decideSubmit({
     text: input,
-    hasUploadingAttachments: false,
+    hasUploadingAttachments: hasUploading, // 附件上传中阻止提交（此前恒 false，上传中可提交致附件丢失）
     isRunning,
     busyPreference,
     modifierKey: false,
     composerLocked: false,
   })
+  const sendBlocked = decision.action === "blocked"
 
   const busyLabel =
     busyPreference === "queue"
@@ -341,7 +363,7 @@ export function HarnessComposer({
         <div className="flex items-center justify-between gap-2 p-2">
           <div className="flex min-w-0 flex-wrap items-center gap-1.5">
             <ModelSelect models={models} onModelChange={onModelChange} />
-            <ContextMeter messages={messages as any} />
+            <ContextMeter messages={messages} />
             <SandboxPolicyControl
               sandboxPolicy={sandboxPolicy}
               onSandboxPolicyChange={onSandboxPolicyChange}
@@ -353,7 +375,7 @@ export function HarnessComposer({
           </div>
           <Button
             size="sm"
-            disabled={!hasAiKey || !input.trim()}
+            disabled={!hasAiKey || sendBlocked}
             onClick={() => handleSend(editorRef.current?.getText() ?? "")}
           >
             {m.harness_composer_send()}

package/src/components/harness/composer/mention/mention-suggestion-menu.tsx

@@ -79,7 +79,9 @@ export function MentionSuggestionMenu(props: MentionSuggestionMenuProps) {
       .map((item) => ({
         title: item.label,
         context: { kind: item.kind, id: item.id, label: item.label, kbId: item.kbId },
-        group: item.kind === "kb-doc" ? item.label.slice(0, 20) : "design",
+        // 分组用稳定的 kind 语义标签（此前取「标题前 20 字符」，同一前缀才同组，
+        // 分组语义近似随机且产生大量截断标题头）
+        group: item.kind === "kb-doc" ? m.harness_mention_kb_doc() : m.harness_mention_prd(),
         onSelect: handleSelect,
       }))
   }
@@ -161,7 +163,7 @@ const MentionList = ({
 
   const grouped = items.reduce<Record<string, SuggestionItem<MentionDocContext>[]>>(
     (acc, item) => {
-      const group = item.group || "其他"
+      const group = item.group || m.harness_mention_other()
       if (!acc[group]) acc[group] = []
       acc[group].push(item)
       return acc

package/src/components/harness/composer/mention/use-mention-sources.ts

@@ -22,12 +22,12 @@ import { searchDesignsFn } from "@/server/serverFns/story/story-assoc"
 import type { MentionCandidate } from "./mention-resolvers"
 
 export function useMentionSources() {
-  const { data: kbDocs = [] } = useQuery({
+  const { data: kbDocs = [], isLoading: kbDocsLoading } = useQuery({
     queryKey: ["mention-kb-docs"],
     queryFn: () => searchKbDocsForMentionFn({ data: { query: "" } }),
     staleTime: 30_000,
   })
-  const { data: prds = [] } = useQuery({
+  const { data: prds = [], isLoading: prdsLoading } = useQuery({
     queryKey: ["mention-prds"],
     queryFn: () => searchDesignsFn({ data: { query: "" } }),
     staleTime: 30_000,
@@ -38,6 +38,7 @@ export function useMentionSources() {
       ...kbDocs.map((d) => ({ kind: "kb-doc" as const, id: d.id, label: d.label, kbId: d.kbId })),
       ...prds.map((p) => ({ kind: "design" as const, id: p.id, label: p.title })),
     ]
-    return { all, isLoading: false }
-  }, [kbDocs, prds])
+    // 透传加载态：首载/失败不再被硬编码 false 吞掉，mention 菜单可区分加载中
+    return { all, isLoading: kbDocsLoading || prdsLoading }
+  }, [kbDocs, prds, kbDocsLoading, prdsLoading])
 }

package/src/components/harness/composer/use-composer-submit.ts

@@ -70,7 +70,8 @@ export function useComposerSubmit(args: UseComposerSubmitArgs) {
       }
       return false // Shift+Enter 走原生换行
     },
-    [args],
+    // 按字段展开依赖：args 整体每次渲染都是新对象，[args] 会让 useCallback 失效
+    [args.editor, args.hasUploadingAttachments, args.isRunning, args.busyPreference, args.onSteerQueue, args.onSend, args.threadId],
   )
 
   const markComposition = useCallback(() => {

package/src/components/harness/composer/use-drafts.ts

@@ -8,11 +8,31 @@ function readAll(): Record<string, string> {
   }
 }
 
+/** sessionStorage 写路径兜底：草稿集中单 key 存储，超出配额（~5MB）时
+ * setItem 抛 QuotaExceededError 会直接炸在 TipTap onUpdate 按键路径——
+ * 降级策略：丢最旧一半线程草稿重试一次，仍失败则静默放弃（草稿可丢失，
+ * 不能拖垮输入） */
+function writeAll(all: Record<string, string>) {
+  try {
+    sessionStorage.setItem(KEY, JSON.stringify(all))
+  } catch {
+    try {
+      const keys = Object.keys(all)
+      const kept = keys.slice(Math.floor(keys.length / 2))
+      const trimmed: Record<string, string> = {}
+      for (const k of kept) trimmed[k] = all[k]
+      sessionStorage.setItem(KEY, JSON.stringify(trimmed))
+    } catch {
+      // 配额仍不足：放弃本次草稿写入
+    }
+  }
+}
+
 export const draftsStore = {
   save(threadId: string, json: string) {
     const all = readAll()
     all[threadId] = json
-    sessionStorage.setItem(KEY, JSON.stringify(all))
+    writeAll(all)
   },
   load(threadId: string): string | null {
     return readAll()[threadId] ?? null
@@ -20,6 +40,6 @@ export const draftsStore = {
   clear(threadId: string) {
     const all = readAll()
     delete all[threadId]
-    sessionStorage.setItem(KEY, JSON.stringify(all))
+    writeAll(all)
   },
 }

package/src/components/harness/dock/dock-panel-container.tsx

@@ -18,6 +18,7 @@
 
 import { useEffect, useSyncExternalStore } from "react"
 import { ListTodo, Puzzle, FileText, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
 import { TodoPanel } from "@/components/harness/todo-panel"
 import { PluginPanel } from "@/components/harness/plugin-panel"
 import { dockRegistry } from "./dock-registry"
@@ -50,6 +51,11 @@ export function DockPanelContainer() {
       title: m.harness_dock_plugin(),
       render: () => <PluginPanel onClose={() => {}} />,
     })
+    // 卸载时注销面板，避免模块级 registry 永久残留
+    return () => {
+      dockRegistry.unregisterPanel("todo")
+      dockRegistry.unregisterPanel("plugin")
+    }
   }, [])
 
   const activePanel = state.activeId
@@ -66,9 +72,10 @@ export function DockPanelContainer() {
       <div className="flex shrink-0 items-center border-b">
         <div className="flex">
           {state.tabs.map((tab) => (
-            <button
+            <Button
               key={tab.id}
-              className={`flex items-center gap-1 px-3 py-2 text-xs transition-colors ${
+              variant="ghost"
+              className={`flex items-center gap-1 rounded-none px-3 py-2 text-xs transition-colors ${
                 tab.id === state.activeId
                   ? "bg-accent text-foreground"
                   : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
@@ -77,16 +84,26 @@ export function DockPanelContainer() {
             >
               {iconMap[tab.icon ?? ""] ?? <FileText className="size-3" />}
               <span className="max-w-[120px] truncate">{tab.title}</span>
-              {tab.id !== state.activeId && (
-                <X
-                  className="size-3 opacity-50 hover:opacity-100"
-                  onClick={(e) => {
+              <span
+                role="button"
+                tabIndex={0}
+                aria-label={m.harness_dock_closeTab({ title: tab.title })}
+                className="rounded p-0.5 opacity-50 hover:opacity-100"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  dockRegistry.closeTab(tab.id)
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
                     e.stopPropagation()
                     dockRegistry.closeTab(tab.id)
-                  }}
-                />
-              )}
-            </button>
+                  }
+                }}
+              >
+                <X className="size-3" />
+              </span>
+            </Button>
           ))}
         </div>
       </div>

package/src/components/harness/dock/dock-registry.ts

@@ -16,10 +16,16 @@ export function createDockRegistry() {
   let state: { tabs: DockTab[]; activeId: string | null } = { tabs: [], activeId: null }
   const listeners = new Set<() => void>()
   const emit = () => listeners.forEach((l) => l())
+  // 资源 Tab 自增序号：tabs.length+1 在关闭后会被复用（length 回落），
+  // 与仍开着的旧 Tab id 碰撞导致新资源只激活旧 Tab 永远打不开
+  let resSeq = 0
   return {
     registerPanel(p: DockPanel) {
       panels.set(p.id, p)
     },
+    unregisterPanel(id: string) {
+      panels.delete(id)
+    },
     getPanel: (id: string) => panels.get(id),
     openTab(tab: DockTab) {
       state = state.tabs.some((t) => t.id === tab.id)
@@ -34,7 +40,7 @@ export function createDockRegistry() {
         emit()
         return
       }
-      const id = `res-${state.tabs.length + 1}`
+      const id = `res-${++resSeq}`
       this.openTab({ id, title: uri, icon: "FileText", uri })
     },
     closeTab(id: string) {

package/src/components/harness/dock/resource-preview.tsx

@@ -10,21 +10,24 @@ import { m } from "@/paraglide/messages.js"
 
 const MAX_CONTENT_CHARS = 5000
 
-function FilePreview({ uri }: { uri: ResourceUri & { kind: "file" } }) {
-  const [content, setContent] = useState<string | null>(null)
-  const [mimeType, setMimeType] = useState<string>("text/plain")
+/** 三态资源预览（loading/error/data + cancelled 守卫）的公共 hook：
+ * File/Kb/Design/Story 四份复制统一收敛于此，仅 queryFn 与渲染分支不同 */
+function useResourcePreview<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList,
+): { data: T | null; error: string | null; loading: boolean } {
+  const [data, setData] = useState<T | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     let cancelled = false
     setLoading(true)
-    readWorkspaceFileFn({ data: { workspaceId: uri.workspaceId, path: uri.relPath } })
+    setError(null)
+    fetcher()
       .then((res) => {
         if (cancelled) return
-        setContent(res.content ?? null)
-        setMimeType(res.mimeType ?? "text/plain")
-        setError(null)
+        setData(res)
       })
       .catch((e: unknown) => {
         if (cancelled) return
@@ -36,22 +39,40 @@ function FilePreview({ uri }: { uri: ResourceUri & { kind: "file" } }) {
     return () => {
       cancelled = true
     }
-  }, [uri.workspaceId, uri.relPath])
+    // deps 由调用方声明（uri 字段），动态数组是本 hook 的契约
+  }, deps)
 
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        {m.harness_dock_loadingFile()}
-      </div>
-    )
-  }
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
-        {error}
-      </div>
-    )
-  }
+  return { data, error, loading }
+}
+
+function LoadingPane({ text }: { text: string }) {
+  return (
+    <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+      {text}
+    </div>
+  )
+}
+
+function ErrorPane({ text }: { text: string }) {
+  return (
+    <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
+      {text}
+    </div>
+  )
+}
+
+function FilePreview({ uri }: { uri: ResourceUri & { kind: "file" } }) {
+  const { data, error, loading } = useResourcePreview(
+    async () => {
+      const res = await readWorkspaceFileFn({ data: { workspaceId: uri.workspaceId, path: uri.relPath } })
+      return { content: res.content ?? null, mimeType: res.mimeType ?? "text/plain" }
+    },
+    [uri.workspaceId, uri.relPath],
+  )
+
+  if (loading) return <LoadingPane text={m.harness_dock_loadingFile()} />
+  if (error) return <ErrorPane text={error} />
+  const content = data?.content ?? null
   if (content === null) {
     return (
       <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
@@ -68,45 +89,13 @@ function FilePreview({ uri }: { uri: ResourceUri & { kind: "file" } }) {
 }
 
 function KbPreview({ uri }: { uri: ResourceUri & { kind: "kb" } }) {
-  const [doc, setDoc] = useState<{ title: string; content: unknown } | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    getDocumentFn({ data: { id: uri.docId } })
-      .then((res) => {
-        if (cancelled) return
-        setDoc(res)
-        setError(null)
-      })
-      .catch((e: unknown) => {
-        if (cancelled) return
-        setError(e instanceof Error ? e.message : String(e))
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [uri.docId])
+  const { data: doc, error, loading } = useResourcePreview(
+    () => getDocumentFn({ data: { id: uri.docId } }) as Promise<{ title: string; content: unknown }>,
+    [uri.docId],
+  )
 
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        {m.harness_dock_loadingDoc()}
-      </div>
-    )
-  }
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
-        {error}
-      </div>
-    )
-  }
+  if (loading) return <LoadingPane text={m.harness_dock_loadingDoc()} />
+  if (error) return <ErrorPane text={error} />
   if (!doc) {
     return (
       <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
@@ -128,49 +117,19 @@ function KbPreview({ uri }: { uri: ResourceUri & { kind: "kb" } }) {
 }
 
 function DesignPreview({ uri }: { uri: ResourceUri & { kind: "design" } }) {
-  const [prd, setDesign] = useState<{ name: string; description: string | null } | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    getDesignDetailFn({ data: { id: uri.id } })
-      .then((res) => {
-        if (cancelled) return
-        if (res.error === "unauthorized" || res.error === "not_found") {
-          setError(res.error === "not_found" ? m.harness_dock_prdNotFound() : m.common_share_loginRequired())
-          return
-        }
-        setDesign({ name: res.prd?.name ?? "", description: res.prd?.description ?? null })
-        setError(null)
-      })
-      .catch((e: unknown) => {
-        if (cancelled) return
-        setError(e instanceof Error ? e.message : String(e))
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [uri.id])
+  const { data: prd, error, loading } = useResourcePreview(
+    async () => {
+      const res = await getDesignDetailFn({ data: { id: uri.id } })
+      if (res.error === "unauthorized" || res.error === "not_found") {
+        throw new Error(res.error === "not_found" ? m.harness_dock_prdNotFound() : m.common_share_loginRequired())
+      }
+      return { name: res.prd?.name ?? "", description: res.prd?.description ?? null }
+    },
+    [uri.id],
+  )
 
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        {m.harness_dock_loadingDoc()}
-      </div>
-    )
-  }
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
-        {error}
-      </div>
-    )
-  }
+  if (loading) return <LoadingPane text={m.harness_dock_loadingDoc()} />
+  if (error) return <ErrorPane text={error} />
   if (!prd) return null
   const displayContent = prd.description ?? ""
   return (
@@ -186,49 +145,20 @@ function DesignPreview({ uri }: { uri: ResourceUri & { kind: "design" } }) {
 }
 
 function StoryPreview({ uri }: { uri: ResourceUri & { kind: "story" } }) {
-  const [story, setStory] = useState<{ name: string; description: string | null; state?: string } | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    getStoryDetailFn({ data: { storyId: uri.id } })
-      .then((res) => {
-        if (cancelled) return
-        setStory({
-          name: res.name ?? "",
-          description: res.description ?? null,
-          state: res.state,
-        })
-        setError(null)
-      })
-      .catch((e: unknown) => {
-        if (cancelled) return
-        setError(e instanceof Error ? e.message : String(e))
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [uri.id])
+  const { data: story, error, loading } = useResourcePreview(
+    async () => {
+      const res = await getStoryDetailFn({ data: { storyId: uri.id } })
+      return {
+        name: res.name ?? "",
+        description: res.description ?? null,
+        state: res.state,
+      }
+    },
+    [uri.id],
+  )
 
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        {m.harness_dock_loadingDoc()}
-      </div>
-    )
-  }
-  if (error) {
-    return (
-      <div className="flex h-full items-center justify-center p-4 text-sm text-destructive">
-        {error}
-      </div>
-    )
-  }
+  if (loading) return <LoadingPane text={m.harness_dock_loadingDoc()} />
+  if (error) return <ErrorPane text={error} />
   if (!story) {
     return (
       <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">

package/src/components/{tiptap/notion-like/setup-error-message/index.tsx → harness/flatten-content.ts}

@@ -15,5 +15,31 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-export { SetupErrorMessage } from "./setup-error-message"
-export type { SetupErrorMessageProps } from "./setup-error-message"
+/**
+ * 把排队消息的 content（字符串 / parts 数组 / 其他对象）扁平化为单行预览文本。
+ * queue-item 与 queue-bar 共用（审计 🔵：原两处逐字重复）。
+ */
+export function flattenContent(content: unknown): string {
+  if (typeof content === "string") return content
+  if (Array.isArray(content)) {
+    return content
+      .map((part) =>
+        typeof part === "object" &&
+        part !== null &&
+        "type" in part &&
+        part.type === "text"
+          ? String((part as { content?: unknown }).content ?? "")
+          : ""
+      )
+      .filter(Boolean)
+      .join(" ")
+  }
+  if (typeof content === "object" && content !== null) {
+    try {
+      return JSON.stringify(content)
+    } catch {
+      return ""
+    }
+  }
+  return ""
+}

package/src/components/harness/gallery/gallery-card.tsx

@@ -66,6 +66,10 @@ export function GalleryCard({ item, onOpen, onVariant, onVariantWithRef, variant
                 const dataURL = typeof reader.result === "string" ? reader.result : ""
                 if (dataURL) onVariantWithRef(id, dataURL)
               }
+              reader.onerror = () => {
+                // 读取失败必须可见，否则 input value 已重置，用户无从得知未生效
+                toast.error(m.gallery_refFrameReadFailed())
+              }
               reader.readAsDataURL(file)
               e.target.value = ""
             }} />