绝尘
3abdfb489f
- 提取 SkillMention.vue(/ 技能联想浮层+已选 chip) - 提取 ImageInput.vue(待发送图片预览+移除) - ChatInput 模板内联技能浮层替换为子组件
34 lines
972 B
Vue
34 lines
972 B
Vue
<script setup lang="ts">
|
|
//! 图片输入预览 — 待发送图片缩略图列表,从 ChatInput.vue 提取
|
|
//!
|
|
//! 职责:显示待发送图片缩略图、移除按钮。不含图片读取/粘贴/拖拽逻辑。
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
defineProps<{
|
|
/** 待发送图片列表 */
|
|
pendingImages: { id: string; dataUrl: string; mediaType: string }[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'remove', id: string): void
|
|
}>()
|
|
</script>
|
|
|
|
<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" />
|
|
<button
|
|
type="button"
|
|
class="ai-img-preview-x"
|
|
:title="t('aiChat.removeImage')"
|
|
:aria-label="t('aiChat.removeImage')"
|
|
@click="emit('remove', img.id)"
|
|
>×</button>
|
|
</div>
|
|
</div>
|
|
</template>
|