Skip to content

Commit 31cc6aa

Browse files
xerrorsxerrors
committed
feat: 重构聊天组件以支持附件上传和状态指示器
- 在 `AgentChatComponent.vue` 中，替换 `AttachmentInputPanel` 为 `AttachmentOptionsComponent`，并添加图片上传功能的处理。 - 新增 `AttachmentOptionsComponent.vue` 以处理文件和图片上传选项。 - 新增 `AttachmentStatusIndicator.vue` 以显示已上传附件的状态和操作。 - 更新 `MessageInputComponent.vue` 以支持新的插槽结构，增强组件的灵活性和可扩展性。
1 parent 5adff04 commit 31cc6aa

File tree

4 files changed

+505
-31
lines changed

4 files changed

+505
-31
lines changed

‎web/src/components/AgentChatComponent.vue‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,17 @@
7676
@keydown="handleKeyDown"
7777
>
7878
<template #options-left>
79-
<AttachmentInputPanel
79+
<AttachmentOptionsComponent
8080
v-if="supportsFileUpload"
81-
:attachments="currentAttachments"
82-
:limits="attachmentState.limits"
83-
:is-uploading="attachmentState.isUploading"
8481
:disabled="!currentAgent"
8582
@upload="handleAttachmentUpload"
83+
@upload-image="handleImageUpload"
84+
/>
85+
</template>
86+
<template #actions-left>
87+
<AttachmentStatusIndicator
88+
:attachments="currentAttachments"
89+
:disabled="!currentAgent"
8690
@remove="handleAttachmentRemove"
8791
/>
8892
</template>
@@ -157,13 +161,17 @@
157161
@keydown="handleKeyDown"
158162
>
159163
<template #options-left>
160-
<AttachmentInputPanel
164+
<AttachmentOptionsComponent
161165
v-if="supportsFileUpload"
162-
:attachments="currentAttachments"
163-
:limits="attachmentState.limits"
164-
:is-uploading="attachmentState.isUploading"
165166
:disabled="!currentAgent"
166167
@upload="handleAttachmentUpload"
168+
@upload-image="handleImageUpload"
169+
/>
170+
</template>
171+
<template #actions-left>
172+
<AttachmentStatusIndicator
173+
:attachments="currentAttachments"
174+
:disabled="!currentAgent"
167175
@remove="handleAttachmentRemove"
168176
/>
169177
</template>
@@ -183,6 +191,8 @@ import { LoadingOutlined } from '@ant-design/icons-vue';
183191
import { message } from 'ant-design-vue';
184192
import MessageInputComponent from '@/components/MessageInputComponent.vue'
185193
import AttachmentInputPanel from '@/components/AttachmentInputPanel.vue'
194+
import AttachmentOptionsComponent from '@/components/AttachmentOptionsComponent.vue'
195+
import AttachmentStatusIndicator from '@/components/AttachmentStatusIndicator.vue'
186196
import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
187197
import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
188198
import RefsComponent from '@/components/RefsComponent.vue'
@@ -715,6 +725,12 @@ const handleAttachmentRemove = async (fileId) => {
715725
}
716726
};
717727
728+
// 处理图片上传（开发中功能）
729+
const handleImageUpload = () => {
730+
// 图片上传功能暂未实现，在 AttachmentOptionsComponent 中已经显示了提示信息
731+
// 这里可以预留扩展接口
732+
};
733+
718734
// ==================== 审批功能管理 ====================
719735
const { approvalState, handleApproval, processApprovalInStream } = useApproval({
720736
getThreadState,

‎web/src/components/AttachmentOptionsComponent.vue‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<template>
2+
<div class="attachment-options">
3+
<div class="option-item">
4+
<label class="attachment-upload-label" :class="{ disabled: disabled }">
5+
<input
6+
ref="fileInputRef"
7+
type="file"
8+
multiple
9+
accept=".txt,.md,.docx,.html,.htm"
10+
:disabled="disabled"
11+
@change="handleFileChange"
12+
style="display: none;"
13+
/>
14+
<a-tooltip title="支持 txt/md/docx/html/htm 格式，单文件 ≤ 5 MB" placement="right">
15+
<div class="option-content">
16+
<FileText :size="16" class="option-icon" />
17+
<span class="option-text">添加附件</span>
18+
</div>
19+
</a-tooltip>
20+
</label>
21+
</div>
22+
23+
<div class="option-item" @click="handleImageUpload">
24+
<a-tooltip title="支持 jpg/jpeg/png/gif 格式，单文件 ≤ 5 MB" placement="right">
25+
<div class="option-content">
26+
<Image :size="16" class="option-icon" />
27+
<span class="option-text">上传图片</span>
28+
</div>
29+
</a-tooltip>
30+
</div>
31+
</div>
32+
</template>
33+
34+
<script setup>
35+
import { ref } from 'vue';
36+
import { FileText, Image } from 'lucide-vue-next';
37+
import { message } from 'ant-design-vue';
38+
39+
const fileInputRef = ref(null);
40+
41+
const props = defineProps({
42+
disabled: {
43+
type: Boolean,
44+
default: false
45+
}
46+
});
47+
48+
const emit = defineEmits(['upload', 'upload-image']);
49+
50+
// 处理文件选择变化
51+
const handleFileChange = (event) => {
52+
const files = event.target.files;
53+
if (files && files.length > 0) {
54+
emit('upload', Array.from(files));
55+
}
56+
// 清空文件输入，允许重复选择同一文件
57+
event.target.value = '';
58+
};
59+
60+
// 处理图片上传（开发中提示）
61+
const handleImageUpload = () => {
62+
if (props.disabled) return;
63+
message.info('图片上传功能开发中，敬请期待！');
64+
emit('upload-image');
65+
};
66+
</script>
67+
68+
<style lang="less" scoped>
69+
.attachment-options {
70+
display: flex;
71+
flex-direction: column;
72+
gap: 2px;
73+
min-width: 120px;
74+
}
75+
76+
.option-item {
77+
cursor: pointer;
78+
transition: all 0.2s ease;
79+
80+
&:active {
81+
transform: scale(0.98);
82+
}
83+
84+
&.disabled {
85+
cursor: not-allowed;
86+
opacity: 0.5;
87+
88+
.option-content {
89+
color: var(--gray-400);
90+
}
91+
}
92+
}
93+
94+
.option-content {
95+
display: flex;
96+
align-items: center;
97+
gap: 8px;
98+
padding: 6px 10px;
99+
color: var(--gray-700);
100+
font-size: 13px;
101+
border-radius: 6px;
102+
transition: all 0.15s ease;
103+
104+
.option-item:hover & {
105+
color: var(--main-color);
106+
background-color: var(--gray-50);
107+
}
108+
}
109+
110+
.option-icon {
111+
flex-shrink: 0;
112+
color: inherit;
113+
}
114+
115+
.option-text {
116+
font-weight: 500;
117+
}
118+
119+
.attachment-upload-label {
120+
display: block;
121+
width: 100%;
122+
cursor: pointer;
123+
124+
&.disabled {
125+
cursor: not-allowed;
126+
opacity: 0.5;
127+
128+
.option-content {
129+
color: var(--gray-400);
130+
}
131+
}
132+
}
133+
</style>

0 commit comments

Comments
 (0)