From 3abdfb489f8cb7719ada075b85a13a2a8ab816b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Wed, 1 Jul 2026 12:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20ChatInput=20=E6=8B=86?=
 =?UTF-8?q?=E5=88=86(=E6=8F=90=E5=8F=96=20SkillMention+ImageInput,=201183-?=
 =?UTF-8?q?>1155=E8=A1=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 提取 SkillMention.vue(/ 技能联想浮层+已选 chip)

- 提取 ImageInput.vue(待发送图片预览+移除)

- ChatInput 模板内联技能浮层替换为子组件
---
 Batch.md                           | 13 +++++-
 src/components/ai/ChatInput.vue    | 58 +++++++--------------------
 src/components/ai/ImageInput.vue   | 33 ++++++++++++++++
 src/components/ai/SkillMention.vue | 63 ++++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+), 45 deletions(-)
 create mode 100644 src/components/ai/ImageInput.vue
 create mode 100644 src/components/ai/SkillMention.vue

diff --git a/Batch.md b/Batch.md
index b4e0fc6..0125e52 100644
--- a/Batch.md
+++ b/Batch.md
@@ -386,16 +386,25 @@
 
 ## Batch 31 — God 文件拆分第一步(MessageList)
 
-- **提交**: `当前待提交`
+- **提交**: `2c2b2d7`
 - **内容**:
   - 提取 useMessageScroll.ts(滚动跟随/锁存/回底按钮,89 行)
   - 提取 MessageItem.vue(单条消息按 role 渲染,171 行)
   - MessageList.vue 从 1552 行降至 1386 行(-166 行)
 - **验证**: vue-tsc + vite build 通过
 
+## Batch 32 — God 文件拆分第二步(ChatInput)
+
+- **提交**: `当前待提交`
+- **内容**:
+  - 提取 SkillMention.vue(/@ 联想浮层,63 行)
+  - 提取 ImageInput.vue(图片粘贴/拖拽预览,33 行)
+  - ChatInput.vue 从 1183 行降至 1155 行
+- **验证**: vue-tsc + vite build 通过
+
 ## 后续规划批次(待推进)
 
-### Batch 32 — ChatInput 拆分
+### Batch 33 — 多 ReAct 对接
 1. 提取 SkillMention.vue(/@ 联想浮层)
 2. 提取 ImageInput.vue(图片粘贴/拖拽)
 3. ChatInput.vue 从 1183 行降至 ~500 行
diff --git a/src/components/ai/ChatInput.vue b/src/components/ai/ChatInput.vue
index cac8e44..7e22a4a 100644
--- a/src/components/ai/ChatInput.vue
+++ b/src/components/ai/ChatInput.vue
@@ -1,28 +1,18 @@
 <template>
   <div class="ai-input-area">
-    <!-- 已选技能 chip（含参数格式提示 argument_hint） -->
-    <div v-if="pendingSkill" class="ai-skill-chip">
-      <span class="ai-skill-chip-main">
-        <span class="ai-skill-chip-name">/{{ pendingSkill.name }}</span>
-        <span v-if="pendingSkill.description" class="ai-skill-chip-desc">{{ pendingSkill.description }}</span>
-        <code v-if="pendingSkill.argument_hint" class="ai-skill-chip-hint">{{ pendingSkill.argument_hint }}</code>
-      </span>
-      <button class="ai-skill-chip-x" @click="clearSkill" :title="$t('aiChat.clearSkill')" :aria-label="$t('aiChat.clearSkill')">×</button>
-    </div>
+    <SkillMention
+      :skill-open="skillOpen"
+      :filtered-skills="filteredSkills"
+      :skill-index="skillIndex"
+      :pending-skill="pendingSkill"
+      :skill-query="skillQuery"
+      @select="selectSkill"
+      @clear="clearSkill"
+      @update:skill-index="skillIndex = $event"
+    />
     <div class="ai-input-wrap">
-      <!-- F-260614-05 Phase 2b: 待发送图片预览(粘贴/拖拽加入,发送前可移除) -->
-      <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="removePendingImage(img.id)"
-          >×</button>
-        </div>
-      </div>
+      <!-- F-260614-05 Phase 2b: 待发送图片预览 -->
+      <ImageInput :pending-images="pendingImages" @remove="removePendingImage" />
       <textarea
         ref="inputEl"
         v-model="inputText"
@@ -38,27 +28,7 @@
         @dragover="onDragOver"
         @drop="onDrop"
       ></textarea>
-      <!-- 技能联想浮层 -->
-      <div v-if="skillOpen" class="ai-skill-popover">
-        <div v-if="!filteredSkills.length" class="ai-skill-empty">
-          {{ store.state.skills.length ? $t('aiChat.skillNoMatch') : $t('aiChat.skillNotLoaded') }}
-        </div>
-        <div
-          v-for="(s, i) in filteredSkills"
-          :key="s.path"
-          class="ai-skill-item"
-          :class="{ 'ai-skill-item--active': i === skillIndex }"
-          @click="selectSkill(s)"
-          @mouseenter="skillIndex = i"
-        >
-          <div class="ai-skill-item-row">
-            <span class="ai-skill-item-name">/{{ s.name }}</span>
-            <span class="ai-skill-item-desc">{{ s.description }}</span>
-            <span class="ai-skill-item-src">{{ s.source }}</span>
-          </div>
-          <code v-if="s.argument_hint" class="ai-skill-item-hint">{{ s.argument_hint }}</code>
-        </div>
-      </div>
+
       <!-- UX-10 §1.4: @ 实体引用浮层(@ 触发,选中插入 [类型:名] 标记,架构复用技能 popover) -->
       <div v-if="mentionOpen" class="ai-skill-popover ai-mention-popover">
         <div v-if="!mentionItems.length" class="ai-skill-empty">
@@ -158,6 +128,8 @@ import { useI18n } from 'vue-i18n'
 import { useAiStore } from '../../stores/ai'
 import { useProjectStore } from '../../stores/project'
 import { getConvState } from '../../composables/ai/useAiEvents'
+import SkillMention from './SkillMention.vue'
+import ImageInput from './ImageInput.vue'
 import type { AiMessage, ContentPart, SkillInfo, ProjectRecord, TaskRecord, IdeaRecord, MentionSpan } from '../../api/types'
 
 const props = defineProps<{
diff --git a/src/components/ai/ImageInput.vue b/src/components/ai/ImageInput.vue
new file mode 100644
index 0000000..f5d8766
--- /dev/null
+++ b/src/components/ai/ImageInput.vue
@@ -0,0 +1,33 @@
+<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)"
+      >&times;</button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/ai/SkillMention.vue b/src/components/ai/SkillMention.vue
new file mode 100644
index 0000000..fc61179
--- /dev/null
+++ b/src/components/ai/SkillMention.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+//! 技能联想浮层 — / 触发技能选择,从 ChatInput.vue 提取
+//!
+//! 职责:显示 /@ 联想浮层(Filtered skill list)、选中/清除技能、关联 i18n
+
+import { useI18n } from 'vue-i18n'
+import type { SkillInfo } from '../../api/types'
+
+const { t } = useI18n()
+
+defineProps<{
+  /** 联想浮层是否打开 */
+  skillOpen: boolean
+  /** 过滤后的技能列表 */
+  filteredSkills: SkillInfo[]
+  /** 当前高亮索引 */
+  skillIndex: number
+  /** 已选技能(用于顶部 chip 展示) */
+  pendingSkill: SkillInfo | null
+  /** 技能查询文本 */
+  skillQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', skill: SkillInfo): void
+  (e: 'clear'): void
+  (e: 'update:skillIndex', index: number): void
+}>()
+</script>
+
+<template>
+  <!-- 已选技能 chip -->
+  <div v-if="pendingSkill" class="ai-skill-chip">
+    <span class="ai-skill-chip-main">
+      <span class="ai-skill-chip-name">/{{ pendingSkill.name }}</span>
+      <span v-if="pendingSkill.description" class="ai-skill-chip-desc">{{ pendingSkill.description }}</span>
+      <code v-if="pendingSkill.argument_hint" class="ai-skill-chip-hint">{{ pendingSkill.argument_hint }}</code>
+    </span>
+    <button class="ai-skill-chip-x" @click="emit('clear')" :title="t('aiChat.clearSkill')" :aria-label="t('aiChat.clearSkill')">&times;</button>
+  </div>
+
+  <!-- 技能联想浮层 -->
+  <div v-if="skillOpen" class="ai-skill-popover">
+    <div v-if="!filteredSkills.length" class="ai-skill-empty">
+      {{ skillQuery.length ? t('aiChat.skillNoMatch') : t('aiChat.skillNotLoaded') }}
+    </div>
+    <div
+      v-for="(s, i) in filteredSkills"
+      :key="s.path"
+      class="ai-skill-item"
+      :class="{ 'ai-skill-item--active': i === skillIndex }"
+      @click="emit('select', s)"
+      @mouseenter="emit('update:skillIndex', i)"
+    >
+      <div class="ai-skill-item-row">
+        <span class="ai-skill-item-name">/{{ s.name }}</span>
+        <span class="ai-skill-item-desc">{{ s.description }}</span>
+        <span class="ai-skill-item-src">{{ s.source }}</span>
+      </div>
+      <code v-if="s.argument_hint" class="ai-skill-item-hint">{{ s.argument_hint }}</code>
+    </div>
+  </div>
+</template>