lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增: 跨端图片上传(file.1216.top URL 优先,失败回退 base64,协议对齐)

Browse Source
This commit is contained in:
lxy
2026-08-08 14:19:26 +08:00
parent 4ce6a859e7
commit d19784a414
9 changed files with 247 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/df-miniapp/src/composables/useAiChat.ts
+6
View File
@@ -988,10 +988,16 @@ function send(text: string, skill?: string | null, spans?: MentionSpan[] | null,
maxRoundsActive.value = false // P1-E:新 generation 清 MaxRounds 挂起
// 本地先 push user 气泡(乐观渲染,对齐桌面 sendMessage)
// images:从 parts 提取图片展示(优先 url,回退 base64 dataURL),避免 content 空时空白气泡。
const userImages = (parts || [])
.filter((p) => p.type === 'image')
.map((p) => (p.type === 'image' ? (p.url || (p.base64 ? `data:${p.media_type};base64,${p.base64}` : '')) : ''))
.filter((s) => !!s)
messages.value.push({
id: genId('user'),
role: 'user',
content: trimmed,
...(userImages.length ? { images: userImages } : {}),
timestamp: Date.now(),
}); triggerRef(messages)
apps/df-miniapp/src/config.ts
+6
View File
@@ -20,6 +20,10 @@ export interface MiniappConfig {
reconnectBaseDelay: number
/** 重连最大间隔(ms) */
reconnectMaxDelay: number
/** file.1216.top 文件服务上传地址(不带路径,上传时拼 /upload) */
fileUploadBaseUrl: string
/** 上传 X-Source 头(项目隔离,文件存到 file.1216.top 对应目录) */
fileUploadSource: string
}
/**
@@ -40,6 +44,8 @@ export const defaultConfig: MiniappConfig = {
heartbeatInterval: 30000,
reconnectBaseDelay: 1000,
reconnectMaxDelay: 30000,
fileUploadBaseUrl: 'https://file.1216.top',
fileUploadSource: 'devflow',
}
/** storage key(持久化完整 MiniappConfig JSON) */
apps/df-miniapp/src/pages/chat/index.vue
+48 -16
View File
@@ -2,6 +2,7 @@
import { computed, ref, watch } from 'vue'
import { marked } from 'marked'
import { styleMarkdown } from '@/utils/mdRenderer'
import { uploadImage } from '@/utils/fileUpload'
import { useAiChat } from '@/composables/useAiChat'
import type { MentionSpan, MiniContentPart } from '@/types/relay'
import type { ProjectRecord, TaskRecord, IdeaRecord, AiToolCallInfo, ChatMessage, TokenUsage } from '@/types/events'
@@ -239,15 +240,27 @@ const pendingSkill = ref<SkillInfoLike | null>(null)
// 用户可连续 @ 多个实体,发送时整体透传,后端 resolve 投影成 Augmentation 注入。
const pendingMentionSpans = ref<MentionSpan[]>([])
// —— 图片输入(2026-08-05):选图转 base64,发送时透传 ai.send parts 参数 ——
// 存临时文件路径(缩略图预览) + ContentPart(发送),对齐后端 df-ai-core ContentPart serde externally tagged。
// —— 图片输入(2026-08-05):选图后上传 file.1216.top 拿 URL / 失败回退 base64,发送时透传 ai.send parts 参数 ——
// 存临时文件路径(缩略图预览) + ContentPart(发送),对齐后端 df-ai-core ContentPart serde 内部标签 tag=type。
interface PendingImage {
tempPath: string
part: MiniContentPart
}
const pendingImages = ref<PendingImage[]>([])
/** 选图:uni.chooseMedia(compressed 压缩小图)→ base64 → 入 pendingImages。 */
/** 临时文件扩展名 → MIME 映射(fileType 是类别 'image' 非 MIME,须按扩展名推断) */
function toMime(file: { tempFilePath?: string; fileType?: string }): string {
const ft = file.fileType
if (ft && /^image\//i.test(ft)) return ft // 真 MIME 优先
const p = file.tempFilePath || ''
if (/\.png$/i.test(p)) return 'image/png'
if (/\.(jpe?g)$/i.test(p)) return 'image/jpeg'
if (/\.webp$/i.test(p)) return 'image/webp'
if (/\.gif$/i.test(p)) return 'image/gif'
return 'image/jpeg'
}
/** 选图:uni.chooseMedia(compressed)→ 上传 file.1216.top 拿 URL;失败回退 base64。 */
function onPickImage(): void {
uni.chooseMedia({
count: 1,
@@ -256,19 +269,26 @@ function onPickImage(): void {
success: (res) => {
const file = res.tempFiles && res.tempFiles[0]
if (!file) return
uni.getFileSystemManager().readFile({
filePath: file.tempFilePath,
encoding: 'base64',
success: (r) => {
const b64 = r.data as string
if (!b64) return
pendingImages.value.push({
tempPath: file.tempFilePath,
part: { Image: { base64: b64, media_type: file.fileType || 'image/jpeg' } },
const mt = toMime(file)
// 先尝试上传 file.1216.top → URL 引用(公开可达,provider 直传)
uploadImage(file.tempFilePath)
.then(({ url }) => {
pendingImages.value.push({ tempPath: file.tempFilePath, part: { type: 'image', url, media_type: mt } })
})
.catch(() => {
// 上传失败回退 base64(Phase 0 修复后 base64 可真正到达 provider,不阻断)
uni.getFileSystemManager().readFile({
filePath: file.tempFilePath,
encoding: 'base64',
success: (r) => {
const b64 = r.data as string
if (!b64) return
pendingImages.value.push({ tempPath: file.tempFilePath, part: { type: 'image', base64: b64, media_type: mt } })
},
fail: () => uni.showToast({ title: '图片读取失败', icon: 'none' }),
})
},
fail: () => uni.showToast({ title: '图片读取失败', icon: 'none' }),
})
uni.showToast({ title: '上传失败,已改用本地直传', icon: 'none' })
})
},
})
}
@@ -748,7 +768,12 @@ function tokenInOf(t: TokenUsage): number {
</view>
<template v-for="m in visibleMessages" :key="m.id">
<view v-if="shouldRenderMsg(m)" class="msg" :class="[m.role, m.isError ? 'msg-error' : '']" @longpress="onCopyMessage(m)">
<text v-if="m.role === 'user'" user-select>{{ m.content }}</text>
<view v-if="m.role === 'user'">
<!-- 图片预览(消息带图时) -->
<image v-for="(img, i) in m.images || []" :key="i" :src="img" mode="widthFix" class="msg-user-img" />
<!-- 文本(有文本才显,图片+文本共存;纯图片则只有图,不空白) -->
<text v-if="m.content" user-select>{{ m.content }}</text>
</view>
<template v-else>
<!-- P0-3:错误气泡纯文本渲染(不走 markdown 二次解析,错误串含 `**`/`#` 时不会被解析成格式) -->
<text v-if="m.isError" user-select>{{ m.content }}</text>
@@ -1029,6 +1054,13 @@ function tokenInOf(t: TokenUsage): number {
.msg.user text {
color: #ffffff;
}
/* 用户消息图片预览(2026-08-06):120px 宽 + 圆角,与气泡风格一致;mode=widthFix 高自适应 */
.msg-user-img {
display: block;
width: 120px;
border-radius: 6px;
margin-bottom: 6px;
}
.msg.system text {
color: #999999;
font-size: 12px;
apps/df-miniapp/src/types/events.ts
+2
View File
@@ -139,6 +139,8 @@ export interface ChatMessage {
toolCalls?: AiToolCallInfo[]
/** 不完整标记(AiCompleted{incomplete:true} 对应系统提示气泡) */
incomplete?: boolean
/** 图片输入:消息携带的图片 URL 列表(预览用,发送时透传) */
images?: string[]
}
/** 工具调用信息(对齐桌面 useAiEvents.ts:399 的 AiToolCallInfo) */
apps/df-miniapp/src/types/relay.ts
+9 -9
View File
@@ -122,7 +122,7 @@ export interface SendMessageArgs {
mention_spans?: MentionSpan[] | null
/**
* 多模态片段(图片输入):miniapp 选图转 base64 构造 ContentPart Image 数组透传,
* 对齐后端 ai_chat_send 的 parts 参数(df-ai-core ContentPart,serde externally tagged)。
* 对齐后端 ai_chat_send 的 parts 参数(df-ai-core ContentPart,serde 内部标签 tag=type)。
* null/undefined/空=纯文本消息(零回归)。
*/
parts?: MiniContentPart[] | null
@@ -130,17 +130,17 @@ export interface SendMessageArgs {
/**
* 多模态内容片段(对齐后端 df-ai-core/src/types.rs ContentPart)。
* serde externally tagged:Image 片段 JSON 形如 `{"Image": {base64, media_type}}`。
* serde 内部标签 `#[serde(tag="type", rename_all="snake_case")]`:Image 片段 JSON 形如
* `{"type":"image","url":...,"media_type":...}`。
*/
export type MiniContentPart =
| { Text: { text: string } }
| { type: 'text'; text: string }
| {
Image: {
url?: string | null
base64?: string | null
media_type?: string | null
alt?: string | null
}
type: 'image'
url?: string | null
base64?: string | null
media_type?: string | null
alt?: string | null
}
/**
apps/df-miniapp/src/utils/fileUpload.ts
+34
View File
@@ -0,0 +1,34 @@
/** file.1216.top 文件服务上传客户端。
* POST /upload multipart 'file' 字段 + 'X-Source' 头 → {"result":{"url":"https://..."},"retcode":0,"success":true}
*/
import { getConfig } from '@/config'
export interface UploadResult { url: string }
/** 上传图片到 file.1216.top,返回公开 URL。失败 reject(调用方回退 base64)。 */
export function uploadImage(tempFilePath: string): Promise<UploadResult> {
const cfg = getConfig()
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${cfg.fileUploadBaseUrl}/upload`,
filePath: tempFilePath,
name: 'file',
header: { 'X-Source': cfg.fileUploadSource },
timeout: 15000,
success: (res) => {
try {
const data = JSON.parse(res.data as string)
const url = data?.result?.url as string | undefined
if (data?.success === true && data?.retcode === 0 && url) {
resolve({ url })
} else {
reject(new Error(`上传响应异常: ${res.data}`))
}
} catch (e) {
reject(e)
}
},
fail: (err) => reject(err),
})
})
}
src/components/ai/ChatInput.vue
+95 -14
View File
@@ -42,6 +42,16 @@
@select="selectMention"
@update:mention-index="mentionIndex = $event"
/>
<!-- 2026-08-06:📎 图片选择按钮(tauri 原生对话框选图 → file.1216.top 上传 → URL 引用) -->
<button
type="button"
class="ai-img-pick-btn"
:title="$t('aiChat.pickImage')"
:aria-label="$t('aiChat.pickImage')"
@click="onPickImage"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
</button>
<!-- L2 状态机停止按钮三态(批2 1c):conv_state 派生 generating/stopping/error 三态,
idle(或 conv_state 未收到回退旧 streaming=false)显发送按钮。双轨过渡不强制全替旧 bool。 -->
<button
@@ -106,6 +116,8 @@ import { useAiStore } from '../../stores/ai'
import { useProjectStore } from '../../stores/project'
import { getConvState, textIdle } from '../../composables/ai/useAiEvents'
import { extractImageUrlParts } from '../../composables/ai/utils'
import { uploadFile } from '../../composables/ai/fileUpload'
import { open } from '@tauri-apps/plugin-dialog'
import SkillMention from './SkillMention.vue'
import ImageInput from './ImageInput.vue'
import MentionPopover from './MentionPopover.vue'
@@ -135,17 +147,20 @@ const { t } = useI18n()
const inputText = ref('')
const inputEl = ref<HTMLTextAreaElement>()
// ── F-260614-05 Phase 2b: 图片输入(粘贴/拖拽) ──
// 待发送图片列表(base64 data URI + media_type),handleSend 时构造 ContentPart[]。
// ── F-260614-05 Phase 2b: 图片输入(粘贴/拖拽/选择) ──
// 待发送图片列表(url 或 base64 data URI + media_type),handleSend 时构造 ContentPart[]。
// 仅本组件级 ref,不入 store;发送后清空。预览缩略图渲染在输入框上方。
//
// 约束:
// - 限制单次最多 6 张(防超长上下文/超限请求);超过 toast 提示。
// - 限制单张 10MB(纯文本 base64 估算 ≥ 13M 字符;超限 toast 提示跳过)。
// - 仅接受 image/* MIME;非图片(文本粘贴/文件拖入)走原生行为不拦。
// - 2026-08-06:新增"📎 图片"按钮(tauri dialog 选图)→ 优先上传 file.1216.top 拿 URL
// (走 url 模式,provider 直传/Anthropic 预拉);上传失败回退 base64(dataUrl)。
// pendingImages 元素 url/dataUrl 二选一:url=file.1216.top 公开地址,dataUrl=base64。
const MAX_PENDING_IMAGES = 6
const MAX_IMAGE_BYTES = 10 * 1024 * 1024 // 10MB(解码后字节上限)
const pendingImages = ref<{ id: string; dataUrl: string; mediaType: string }[]>([])
const pendingImages = ref<{ id: string; dataUrl?: string; url?: string; mediaType: string }[]>([])
/** 读 File → base64 data URL(供 <img> 预览 + ContentPart.image base64 字段) */
function readImageFile(file: File): Promise<string> {
@@ -157,7 +172,7 @@ function readImageFile(file: File): Promise<string> {
})
}
/** 把 image File 加入 pendingImages;超限/超大小跳过并 toast */
/** 把 image File 加入 pendingImages;超限/超大小跳过并 toast。优先上传 file.1216.top 拿 URL,失败回退 base64。 */
async function addImageFile(file: File): Promise<void> {
if (!file.type.startsWith('image/')) return
if (file.size > MAX_IMAGE_BYTES) {
@@ -168,17 +183,54 @@ async function addImageFile(file: File): Promise<void> {
emit('error', { msg: t('aiChat.imageLimit', { n: MAX_PENDING_IMAGES }), type: 'warning' })
return
}
const id = `img-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
try {
const dataUrl = await readImageFile(file)
pendingImages.value.push({
// id 用 timestamp+random,DOM key 唯一,移除按钮定位
id: `img-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
dataUrl,
mediaType: file.type,
})
// 优先上传 file.1216.top → URL 引用(公开可达,OpenAI 直传 / Anthropic 桌面预拉)。
// 失败回退 base64(dataUrl),不阻断图片输入。
const { url } = await uploadFile(file)
pendingImages.value.push({ id, url, mediaType: file.type })
} catch {
try {
const dataUrl = await readImageFile(file)
pendingImages.value.push({ id, dataUrl, mediaType: file.type })
} catch (e) {
emit('error', { msg: t('aiChat.imageReadFailed'), type: 'error' })
console.error('[AI] 图片读取失败:', e)
}
}
}
/** "📎 图片"按钮:tauri 原生文件对话框选图(多选,仅图片)→ 逐个 addImageFile。 */
async function onPickImage(): Promise<void> {
const selected = await open({
multiple: true,
title: t('aiChat.pickImageTitle'),
filters: [{ name: t('aiChat.imageFilter'), extensions: ['png', 'jpg', 'jpeg', 'webp', 'gif'] }],
})
if (!selected) return
// tauri dialog open 返 string[] 或 string
const files = Array.isArray(selected) ? selected : [selected]
for (const path of files) {
const f = await blobFromPath(path)
if (f) await addImageFile(f)
}
}
/** 从路径构造 File(Tauri dialog 返回路径,非 File;经 convertFileSrc 读字节构造)。
* convertFileSrc(path) → http://tauri.localhost/...(tauri 协议可访问本地文件,FilePreview 同款)。 */
async function blobFromPath(path: string): Promise<File | null> {
try {
const { convertFileSrc } = await import('@tauri-apps/api/core')
const res = await fetch(convertFileSrc(path))
if (!res.ok) return null
const blob = await res.blob()
// 扩展名 → MIME(tauri dialog filters 已限图片,兜底 image/jpeg)
const ext = path.split('.').pop()?.toLowerCase() || ''
const mime = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', webp: 'image/webp', gif: 'image/gif' }[ext] || 'image/jpeg'
return new File([blob], path.split(/[\\/]/).pop() || 'image', { type: mime })
} catch (e) {
emit('error', { msg: t('aiChat.imageReadFailed'), type: 'error' })
console.error('[AI] 图片读取失败:', e)
console.error('[AI] 读取所选文件失败:', path, e)
return null
}
}
@@ -729,8 +781,18 @@ async function handleSend() {
// 空文本则只发图片片)
...(text ? [{ type: 'text' as const, text }] : []),
...snapshotImgs.map(img => {
// url 模式(file.1216.top 上传):直传 url,provider 直传 / Anthropic 预拉。
if (img.url) {
return {
type: 'image' as const,
url: img.url,
base64: null,
media_type: img.mediaType,
alt: null,
}
}
// dataUrl 形如 data:image/png;base64,xxxx —— 拆出纯 base64 + media_type
const m = /^data:([^;]+);base64,(.*)$/s.exec(img.dataUrl)
const m = /^data:([^;]+);base64,(.*)$/s.exec(img.dataUrl || '')
const mediaType = m?.[1] || img.mediaType
const base64 = m?.[2] || ''
return {
@@ -909,6 +971,25 @@ defineExpose({
transition: all 0.15s;
flex-shrink: 0;
}
.ai-img-pick-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--df-radius);
background: transparent;
color: var(--df-text-dim);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
margin-right: 4px;
}
.ai-img-pick-btn:hover {
background: var(--df-bg-raised);
color: var(--df-text);
}
.ai-send-btn--active {
background: var(--df-accent);
color: #fff;
src/components/ai/ImageInput.vue
+9 -3
View File
@@ -2,14 +2,15 @@
//! 图片输入预览 — 待发送图片缩略图列表,从 ChatInput.vue 提取
//!
//! 职责:显示待发送图片缩略图、移除按钮。不含图片读取/粘贴/拖拽逻辑。
//! 2026-08-06:支持 url 模式(file.1216.top 上传)与 dataUrl 模式(base64)双预览。
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineProps<{
/** 待发送图片列表 */
pendingImages: { id: string; dataUrl: string; mediaType: string }[]
/** 待发送图片列表(url 模式用 url 预览,base64 模式用 dataUrl) */
pendingImages: { id: string; dataUrl?: string; url?: string; mediaType: string }[]
}>()
const emit = defineEmits<{
@@ -20,7 +21,12 @@ const emit = defineEmits<{
<template>
<div v-if="pendingImages.length" class="ai-img-preview-row">
<div v-for="img in pendingImages" :key="img.id" class="ai-img-preview">
<img :src="img.dataUrl" :alt="t('aiChat.imagePreviewAlt')" class="ai-img-preview-thumb" />
<img
:src="img.url || img.dataUrl"
:alt="t('aiChat.imagePreviewAlt')"
class="ai-img-preview-thumb"
loading="lazy"
/>
<button
type="button"
class="ai-img-preview-x"
src/composables/ai/fileUpload.ts
+38
View File
@@ -0,0 +1,38 @@
//! 桌面端文件服务上传(file.1216.top)— 图片/文件 → 公开 URL
//!
//! 与小程序端 `apps/df-miniapp/src/utils/fileUpload.ts` 对称:复用 file.1216.top 的
//! `POST /upload`(multipart 'file' + X-Source 头)→ 返回公开 URL。
//! 桌面端是浏览器环境,用 fetch + FormData(区别于小程序 uni.uploadFile)。
//! file.1216.top 已确认 CORS 支持(`Access-Control-Allow-Origin: *`,X-Source 在 allow-headers)。
/** file.1216.top 上传地址(可经 appSettings 'df-file-upload-base' 覆盖) */
export const DEFAULT_FILE_UPLOAD_BASE = 'https://file.1216.top'
/** X-Source 项目标识(文件存 file.1216.top 对应目录,项目隔离) */
export const FILE_UPLOAD_SOURCE = 'devflow-desktop'
export interface UploadResult {
url: string
}
/**
* 上传文件到 file.1216.top,返回公开 URL。失败 reject(调用方回退 base64)。
* 响应结构:`{"result":{"url":"https://..."},"retcode":0,"success":true}`
*/
export async function uploadFile(file: File, base?: string): Promise<UploadResult> {
const uploadBase = base || DEFAULT_FILE_UPLOAD_BASE
const form = new FormData()
form.append('file', file, file.name)
const res = await fetch(`${uploadBase}/upload`, {
method: 'POST',
headers: { 'X-Source': FILE_UPLOAD_SOURCE },
body: form,
})
if (!res.ok) {
throw new Error(`上传失败:HTTP ${res.status}`)
}
const data = (await res.json()) as { result?: { url?: string }; success?: boolean; retcode?: number }
if (data?.success === true && data?.retcode === 0 && data?.result?.url) {
return { url: data.result.url }
}
throw new Error(`上传响应异常:${JSON.stringify(data)}`)
}