chore(首页): 图片上传展示调整

src/composables/useUploadImage.ts

@@ -6,7 +6,7 @@ import i18n from '@/locales'
 
 const { t } = i18n.global
 
-interface UploadImageItem {
+export interface UploadImageItem {
   id: string
   url: string
   status: 'pending' | 'uploading' | 'finished' | 'error' | 'removed'

src/views/home/components/footer-operation.vue

@@ -3,7 +3,6 @@ import { computed, h, nextTick, ref, shallowRef, useTemplateRef, watch, toValue
 import type { AgentApplicationRecordItem, MessageItemInterface } from '../types'
 import { fetchAgentApplicationSelectList, fetchFileUpload } from '@/apis/home-agent'
 import { nanoid } from 'nanoid'
-import { CloseSmall } from '@icon-park/vue-next'
 import fetchEventStreamSource from '../utils/fetch-event-stream-source'
 import { throttle } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -80,10 +79,6 @@ const isQuestionSubmitBtnDisabled = computed(() => {
   )
 })
 
-const isHasUploadImage = computed(() => {
-  return uploadImageList.value.length > 0
-})
-
 const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')
 
 const isEnableUploadImage = computed(() => {
@@ -618,9 +613,12 @@ defineExpose({
         v-model:editor-mode-enable="editorModeEnable"
         :is-question-submit-btn-disabled="isQuestionSubmitBtnDisabled"
         :work-mode="workMode"
+        :upload-image-list="uploadImageList"
         @submit-question="questionSubmit"
         @work-mode-switch="onWorkModeChange"
+        @remove-upload-image="handleRemoveUploadImage"
       />
+
       <!-- <n-input
         v-model:value.trim="questionContent"
         class="content-input"
@@ -639,7 +637,7 @@ defineExpose({
         </template>
       </n-input> -->
 
-      <div v-show="isHasUploadImage" class="absolute bottom-[9px] left-[11px] flex gap-[11px]">
+      <!-- <div v-show="isHasUploadImage" class="absolute bottom-[9px] left-[11px] flex gap-[11px]">
         <div
           v-for="uploadImageItem in uploadImageList"
           :key="uploadImageItem.id"
@@ -666,7 +664,7 @@ defineExpose({
             />
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <div class="mt-[14px] text-center text-[13px] text-[#999]">

src/views/home/components/rich-text-input-box/index.vue

 <script setup lang="ts">
-import { nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { computed, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import SceneList from './components/scene-list.vue'
 import TemplateMenu from './components/template-menu.vue'
 import Quill from 'quill/core'
@@ -11,10 +11,14 @@ import { Delta } from 'quill/core'
 import type { TemplateMenuConfig } from '@/views/home/components/rich-text-input-box/data/template-menu'
 import { debounce } from 'lodash-es'
 import type { WorkModeType } from '@/views/home/components/rich-text-input-box/types/index'
+import type { UploadImageItem } from '@/composables/useUploadImage'
+import { UploadStatus } from '@/enums/upload-status'
+import { CloseSmall } from '@icon-park/vue-next'
 
 interface Props {
   isQuestionSubmitBtnDisabled: boolean
   workMode: WorkModeType
+  uploadImageList: UploadImageItem[]
 }
 
 const props = defineProps<Props>()
@@ -22,6 +26,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   submitQuestion: [question: string]
   workModeSwitch: [workMode: 'ApplicationMode' | 'SceneMode']
+  removeUploadImage: [id: string]
 }>()
 
 const questionContent = defineModel<string>('questionContent', { default: '' })
@@ -42,7 +47,13 @@ const isInputFocus = ref(false)
 const showSceneList = ref(false)
 const showTemplateMenu = ref(false)
 
-// const editorModeEnable = ref(false)
+const uploadImageInfo = computed(() => {
+  const imageInfo = props.uploadImageList[0]
+
+  return imageInfo
+    ? { id: imageInfo.id, url: imageInfo.url.split('/').reverse()[0], status: imageInfo.status }
+    : { url: '', id: '' }
+})
 
 const onQuillTextChange = debounce((delta: Delta) => {
   const question = quillContentExtractor(delta)
@@ -202,41 +213,60 @@ function onTemplateConfirm(templateConfig: TemplateMenuConfig['templateList'][0]
       </div>
     </n-scrollbar>
 
-    <div class="mt-[8px] flex items-center justify-end px-[12px]">
-      <Transition>
-        <div v-show="workMode === 'SceneMode'" class="mr-[15px]">
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <button
-                class="mr-[5px] h-[24px] w-[32px] rounded-[5px] border border-[#333]/60 transition"
-                :class="[showTemplateMenu ? 'border-[#9EA3FF] text-[#9EA3FF]' : '']"
-                @click="handleShowTemplateMenuSwitch"
-              >
-                <i class="iconfont icon-moban1 text-[14px]"></i>
-              </button>
-            </template>
-            模板
-          </n-tooltip>
-
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <button
-                class="h-[24px] w-[32px] rounded-[5px] border border-[#333]/60 transition"
-                :class="[editorModeEnable ? 'border-[#9EA3FF] text-[#9EA3FF]' : '']"
-                @click="editorModeEnable = !editorModeEnable"
-              >
-                <i class="iconfont icon-wendangbianjiqi1 text-[14px]"></i>
-              </button>
-            </template>
-            消息编辑器
-          </n-tooltip>
+    <div class="mt-[8px] flex items-center justify-between px-[12px]">
+      <div class="pt-[2px]">
+        <div
+          v-if="uploadImageInfo.url"
+          class="relative select-none rounded-[4px] border border-[#e0e0e6] bg-[#fafafc] px-[12px] py-[4px] text-[12px]"
+          :class="{ '!border-[#F25744]': uploadImageInfo.status === UploadStatus.ERROR }"
+        >
+          <n-ellipsis style="max-width: 200px">{{ uploadImageInfo.url }}</n-ellipsis>
+
+          <div
+            class="absolute right-[-4px] top-[-4px] flex size-[16px] cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.55)] hover:opacity-80"
+            @click="() => $emit('removeUploadImage', uploadImageInfo.id)"
+          >
+            <CloseSmall theme="outline" size="14" fill="#fff" />
+          </div>
         </div>
-      </Transition>
+      </div>
 
-      <div>
-        <n-button type="primary" :disabled="isQuestionSubmitBtnDisabled" @click="handleQuestionSubmit">
-          <i class="iconfont icon-send-icon"></i>
-        </n-button>
+      <div class="flex items-center">
+        <Transition>
+          <div v-show="workMode === 'SceneMode'" class="mr-[15px]">
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <button
+                  class="mr-[5px] h-[24px] w-[32px] rounded-[5px] border border-[#333]/60 transition"
+                  :class="[showTemplateMenu ? 'border-[#9EA3FF] text-[#9EA3FF]' : '']"
+                  @click="handleShowTemplateMenuSwitch"
+                >
+                  <i class="iconfont icon-moban1 text-[14px]"></i>
+                </button>
+              </template>
+              模板
+            </n-tooltip>
+
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <button
+                  class="h-[24px] w-[32px] rounded-[5px] border border-[#333]/60 transition"
+                  :class="[editorModeEnable ? 'border-[#9EA3FF] text-[#9EA3FF]' : '']"
+                  @click="editorModeEnable = !editorModeEnable"
+                >
+                  <i class="iconfont icon-wendangbianjiqi1 text-[14px]"></i>
+                </button>
+              </template>
+              消息编辑器
+            </n-tooltip>
+          </div>
+        </Transition>
+
+        <div>
+          <n-button type="primary" :disabled="isQuestionSubmitBtnDisabled" @click="handleQuestionSubmit">
+            <i class="iconfont icon-send-icon"></i>
+          </n-button>
+        </div>
       </div>
     </div>
   </div>