test(api): ✅ 测试流式接口

.eslintrc-auto-import.json

@@ -5,6 +5,8 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
@@ -71,8 +73,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "ElMessage": true,
-    "ElMessageBox": true
+    "watchSyncEffect": true
   }
 }

src/assets/icons/svg/code.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748779086649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11153" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M781.02 135.046c18.358 16.319 32.98 30.091 43.861 41.312 10.881 11.222 19.214 20.743 24.994 28.564 5.783 7.821 9.353 14.451 10.711 19.894 1.362 5.439 2.043 10.201 2.043 14.282v16.32H712.671c-7.482 0-13.776-2.549-18.873-7.652-5.103-5.098-9.349-11.052-12.755-17.852-3.4-6.8-5.949-13.77-7.646-20.912-1.702-7.14-2.554-13.089-2.554-17.852V65.676h2.043c6.119 0 11.897 0.68 17.34 2.037 5.439 1.362 12.074 4.593 19.891 9.694 7.822 5.098 17.347 12.24 28.564 21.424 11.221 9.179 25.332 21.252 42.339 36.215z" p-id="11154"></path><path d="M753.127 322.244c-82.35 0-149.108-66.758-149.108-149.108V65.033H269.924c-61.762 0-111.831 50.068-111.831 111.831V847.85c0 61.762 50.069 111.831 111.831 111.831h480.873c61.763 0 111.831-50.069 111.831-111.831V322.244H753.127zM468.903 665.756c5.179 5.178 5.179 13.574 0 18.753l-42.193 42.193c-5.178 5.178-13.574 5.179-18.753 0L262.625 581.369c-5.179-5.178-5.179-13.574 0-18.752l42.193-42.194c0.16-0.16 0.348-0.27 0.515-0.42l102.722-102.722c5.178-5.179 13.574-5.178 18.753 0.001l42.194 42.195c5.178 5.179 5.178 13.574 0 18.753l-93.812 93.812 93.713 93.714z m283.602-84.387L607.172 726.702c-5.178 5.179-13.574 5.178-18.752 0l-42.193-42.193c-5.179-5.179-5.179-13.574 0-18.753l93.714-93.714-93.812-93.812c-5.178-5.179-5.178-13.574 0-18.753l42.194-42.195c5.179-5.179 13.574-5.179 18.752-0.001l102.723 102.722c0.166 0.151 0.354 0.26 0.515 0.42l42.193 42.194c5.177 5.177 5.177 13.574-0.001 18.752z" p-id="11155"></path></svg>

src/components/FilesSelect/index.vue

@@ -0,0 +1,150 @@
+<!-- 文件上传 -->
+<script setup lang="ts">
+import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
+import { useFileDialog } from '@vueuse/core';
+import { ElMessage } from 'element-plus';
+import Popover from '@/components/Popover/index.vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useFilesStore } from '@/stores/modules/files';
+
+type FilesList = FilesCardProps & {
+  file: File;
+};
+
+const filesStore = useFilesStore();
+
+/* 弹出面板 开始 */
+const popoverStyle = ref({
+  padding: '4px',
+  height: 'fit-content',
+  background: 'var(--el-bg-color, #fff)',
+  border: '1px solid var(--el-border-color-light)',
+  borderRadius: '8px',
+  boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+});
+const popoverRef = ref();
+/* 弹出面板 结束 */
+
+const { reset, open, onChange } = useFileDialog({
+  // 允许所有图片文件，文档文件，音视频文件
+  accept: 'image/*,video/*,audio/*,application/*',
+  directory: false, // 是否允许选择文件夹
+  multiple: true, // 是否允许多选
+});
+
+onChange((files) => {
+  if (!files)
+    return;
+  console.log('files', files);
+  const arr = [] as FilesList[];
+  for (let i = 0; i < files!.length; i++) {
+    const file = files![i];
+    arr.push({
+      uid: crypto.randomUUID(), // 不写 uid，文件列表展示不出来，elx 1.2.0 bug 待修复
+      name: file.name,
+      fileSize: file.size,
+      file,
+      maxWidth: '200px',
+      showDelIcon: true, // 显示删除图标
+      imgPreview: true, // 显示图片预览
+      imgVariant: 'square', // 图片预览的形状
+      url: URL.createObjectURL(file), // 图片预览地址
+    });
+  }
+  filesStore.setFilesList([...filesStore.filesList, ...arr]);
+  // 重置文件选择器
+  nextTick(() => reset());
+});
+
+function handleUploadFiles() {
+  open();
+  popoverRef.value.hide();
+}
+</script>
+
+<template>
+  <div class="files-select">
+    <Popover
+      ref="popoverRef"
+      placement="top-start"
+      :offset="[4, 0]"
+      popover-class="popover-content"
+      :popover-style="popoverStyle"
+      trigger="clickTarget"
+    >
+      <template #trigger>
+        <div
+          class="flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-14px border-1px border-[rgba(0,0,0,0.08)] border-solid hover:bg-[rgba(0,0,0,.04)]"
+        >
+          <el-icon>
+            <Paperclip />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="popover-content-box">
+        <div
+          class="popover-content-item flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-14px hover:bg-[rgba(0,0,0,.04)]"
+          @click="handleUploadFiles"
+        >
+          <el-icon>
+            <Upload />
+          </el-icon>
+          <div class="font-size-14px">
+            上传文件或图片
+          </div>
+        </div>
+
+        <Popover
+          placement="right-end"
+          :offset="[8, 4]"
+          popover-class="popover-content"
+          :popover-style="popoverStyle"
+          trigger="hover"
+          :hover-delay="100"
+        >
+          <template #trigger>
+            <div
+              class="popover-content-item flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-14px hover:bg-[rgba(0,0,0,.04)]"
+            >
+              <SvgIcon name="code" size="16" />
+              <div class="font-size-14px">
+                上传代码
+              </div>
+
+              <el-icon class="ml-auto">
+                <ArrowRight />
+              </el-icon>
+            </div>
+          </template>
+
+          <div class="popover-content-box">
+            <div
+              class="popover-content-item flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-14px hover:bg-[rgba(0,0,0,.04)]"
+              @click="
+                () => {
+                  ElMessage.warning('暂未开放');
+                }
+              "
+            >
+              代码文件
+            </div>
+
+            <div
+              class="popover-content-item flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-14px hover:bg-[rgba(0,0,0,.04)]"
+              @click="
+                () => {
+                  ElMessage.warning('暂未开放');
+                }
+              "
+            >
+              代码文件夹
+            </div>
+          </div>
+        </Popover>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/stores/modules/files.ts

@@ -0,0 +1,23 @@
+import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
+// 对话聊天的文件上传列表
+import { defineStore } from 'pinia';
+
+export const useFilesStore = defineStore('files', () => {
+  const filesList = ref<FilesCardProps & { file: File }[]>([]);
+
+  // 设置文件列表
+  const setFilesList = (list: FilesCardProps & { file: File }[]) => {
+    filesList.value = list;
+  };
+
+  // 根据索引删除 文件
+  const deleteFileByIndex = (index: number) => {
+    filesList.value.splice(index, 1);
+  };
+
+  return {
+    filesList,
+    setFilesList,
+    deleteFileByIndex,
+  };
+});

src/styles/elx.scss

@@ -0,0 +1,36 @@
+// 覆盖一些 elx 组件样式
+
+// attachments 图片组件的 1.2.0 版本样式 bug
+.image-preview-container {
+  flex: none !important;
+}
+
+.elx-files-card-content {
+  gap: 8px;
+  .elx-files-card-description {
+    line-height: 1.35;
+  }
+}
+
+.prev-next-btn {
+  position: absolute;
+  top: calc(50% + 3px);
+   transform: translateY(-50%);
+   z-index: 10;
+   cursor: pointer;
+}
+
+.elx-attachments-file-card-wrap {
+  padding-top: 6px;
+}
+
+.elx-attachments-card {
+  user-select: none;
+}
+
+// 隐藏 elx-sender-header 组件的底部边框
+.el-sender-header {
+  border-bottom-color: transparent !important;
+}
+
+

src/styles/index.scss

@@ -2,6 +2,7 @@
 @use './btn-style.scss';
 @use 'reset-css';
 @use './element-plus.scss';
+@use './elx.scss';
 
 body{
   overflow: hidden;

types/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
     'Index copy': typeof import('./../src/components/Popover/index copy.vue')['default']
     LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']

types/import_meta.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_WEB_TITLE: string;
+  readonly VITE_WEB_TITLE_EN: string;
+  readonly VITE_WEB_ENV: string;
+  readonly VITE_WEB_BASE_API: string;
+  readonly VITE_API_URL: string;
+}
+
+declare interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}