ai-chat-bot-interface 1.7.7 → 1.7.9

package/src/components/OperateModule.vue

@@ -1,392 +0,0 @@
-<template>
-  <div class="om_wrap">
-    <div class="om_quick">
-      <div
-        class="tag"
-        v-for="item in tagList"
-        :key="item.value"
-        @click.stop="handleTag(item)"
-      >
-        <tag-icon class="icon" />
-        {{ item.name }}
-      </div>
-    </div>
-    <div class="om_operate_box">
-      <div v-if="newChat" class="new_chat" @click.stop="newChatFunc">
-        <new-chat />
-      </div>
-      <div class="om_operate_wrap">
-        <div class="file_list_box" :class="{ hidden: !uploadPlane }">
-          <div class="file_list">
-            <div
-              v-for="(item, index) in uFileList"
-              :key="index"
-              class="file_card"
-            >
-              <img v-if="(item.file_type).toLocaleLowerCase().includes('pdf')" class="pdf" :src="pdfIcon" width="100%" alt="img" />
-              <img v-else class="img" :src="item.file_url" width="100%" alt="img" />
-              <div v-if="item.percent < 100" class="process">
-                <progress-ring :percent="item.percent" />
-              </div>
-              <close-border-icon
-                v-else
-                class="close"
-                @click.stop="clearFile(index)"
-              />
-            </div>
-            <div
-              v-if="uFileList.length < 4"
-              class="file_add"
-              @click.stop="triggerUploadInput"
-            >
-              <add-icon />
-            </div>
-            <div class="file_close" @click.stop="closeUpload">
-              <close-icon />
-            </div>
-          </div>
-        </div>
-
-        <div class="om_operate">
-          <textarea
-            v-model="textValue"
-            ref="txtEle"
-            class="input"
-            rows="1"
-            :placeholder="defMsg.placeholder"
-            @input="handleInput"
-            @keyup.enter="sendMsg"
-            @focus="handleFocus"
-            @blur="handleBlur"
-          />
-          <div class="btn_group">
-            <div class="btn" @click.stop="sendMsg">
-              <send-icon v-if="isReq === '00'" :style="{ color: textValue ? '#039938' : '#ccc' }" />
-              <send-loading-icon v-else
-                                 :bg="loadingBtnInfo.bg"
-                                 :color="loadingBtnInfo.color"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="om_extra" style="display: none">
-      <input
-        ref="captureInput"
-        type="file"
-        accept="image/*"
-        capture="environment"
-        style="display: none"
-        @change="handleFile"
-      />
-
-      <input
-        ref="uploadInput"
-        type="file"
-        accept="image/*,application/pdf"
-        style="display: none"
-        @change="handleFileChange"
-      />
-      <div
-        v-for="card in extraList"
-        :key="card.type"
-        class="card"
-        @click.stop="triggerUploadInput"
-      >
-        <div class="icon">
-          <component :is="card.icon" />
-        </div>
-        <div class="text">{{ card.name }}</div>
-      </div>
-      <progress-ring :percent="15" />
-    </div>
-    <div class="om_ai_tips">{{ defMsg.aiTips}}</div>
-  </div>
-</template>
-
-<script setup>
-import TagIcon from './icons/tagIcon.vue';
-import SendIcon from './icons/SendIcon.vue';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import CameraIcon from './icons/cameraIcon.vue';
-import PictureIcon from './icons/pictureIcon.vue';
-import FileIcon from './icons/fileIcon.vue';
-import ProgressRing from './icons/progressRing.vue';
-import AddIcon from './icons/addIcon.vue';
-import CloseBorderIcon from './icons/closeBorderIcon.vue';
-import CloseIcon from './icons/CloseIcon.vue';
-import NewChat from './icons/newChat.vue';
-import SendLoadingIcon from "./icons/sendLoadingIcon.vue";
-const pdfIcon = 'https://prodstatic.weis1606.cn/api/smartFood/icon/pdf_icon.png';
-const extraList = [
-  // { name: '相機', icon: CameraIcon, type: 'camera' },
-  { name: '相冊', icon: PictureIcon, type: 'photo' },
-  { name: '文件', icon: FileIcon, type: 'file' },
-];
-
-const txtEle = ref(null);
-const uploadInput = ref(null);
-const captureInput = ref(null);
-const uploadPlane = ref(false);
-
-const uFileList = ref([]);
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  token: {
-    type: String,
-    required: true,
-  },
-  tagList: {
-    type: Array,
-    required: true,
-  },
-  newChat: {
-    type: Boolean,
-    default: false,
-  },
-  defMsg: {
-    type: Object,
-    required: true,
-  },
-  isReq:{
-    type: String,
-    default: '00'
-  }
-});
-const Emits = defineEmits(['update:modelValue', 'send', 'tag', 'call']);
-
-const fetchOptions = computed(() => {
-  return {
-    headers: {
-      Authorization: `Bearer ${props.token}`,
-      'Content-Type': 'multipart/form-data',
-    },
-  };
-});
-
-watch(
-  () => props.modelValue,
-  () => {
-    resizeTextarea();
-  },
-);
-
-/*
-* 00： 初始值；
-* 01: 已传达；
-* 02: 已发送；
-* 03：已接收；
-* 04: 读取中；
-* */
-const loadingBtnInfo = computed(() => {
-  switch (props.isReq) {
-    case '01':
-        return { bg: '#fff', color: '#ccc'};
-    case '02':
-      return { bg: '#666', color: '#CDEBD7'};
-    case '03':
-      return { bg: '#ccc', color: '#fff'};
-    case '04':
-      return { bg: '#E5F4EB', color: '#fff'};
-  }
-})
-
-const textValue = computed({
-  get: () => {
-    return props.modelValue;
-  },
-  set: (val) => {
-    Emits('update:modelValue', val);
-    resizeTextarea();
-  },
-});
-
-onMounted(() => {
-  resizeTextarea();
-});
-onUnmounted(() => {
-  if (txtEle.value) {
-    txtEle.value.style.height = 'auto'; // 恢复默认高度
-  }
-});
-
-const handleInput = (event) => {
-  textValue.value = event.target.value.replace(/^\n+|\n+$/g, '');
-};
-const handleTag = (info) => {
-  if (info.type === 'upload') {
-    showUpload();
-  } else {
-    Emits('tag', { ...info });
-  }
-};
-const sendMsg = () => {
-  if (!textValue.value) {
-    return;
-  }
-  if (
-    uFileList.value.length &&
-    uFileList.value.findIndex((f) => f.percent < 100) > -1
-  ) {
-    Emits('call', {
-      message: props.defMsg.uploadingTips,
-      reason: 'is_uploading',
-      value: 'toast',
-      type: 'call',
-    });
-    return;
-  }
-  const list = [{ content: textValue.value, text: textValue.value }];
-  console.log("====== u file list =======", uFileList.value);
-  if (uFileList.value.length) {
-    list.push({
-      type: 'object_string',
-      content: uFileList.value.map((file) => ({
-        type: handleMsgType(file.file_type),
-        name: file.file.name,
-        file_id: file.data.id,
-        file_url: file.file_url,
-      })),
-    });
-    uploadPlane.value = false;
-  }
-  Emits('send', [...list]);
-  clearAllFile();
-};
-const handleFile = (e) => {
-  const file = e.target.files[0];
-  const reader = new FileReader();
-  reader.onload = () => (previewUrl.value = reader.result);
-  reader.readAsDataURL(file);
-};
-const triggerUploadInput = () => {
-  uploadInput.value ? uploadInput.value.click() : '';
-};
-
-const handleFileChange = (e) => {
-  const selFile = e.target.files[0];
-  console.log('=== file ===', e);
-  if (selFile) {
-    uFileList.value.push({
-      file: selFile,
-      file_type: selFile.type,
-      file_url: URL.createObjectURL(selFile),
-      size: (selFile.size / 1024).toFixed(2),
-      percent: 0,
-      data: {},
-    });
-    console.log('=== 文件列表 ===', uFileList.value);
-    handleUpload(uFileList.value.length - 1);
-  }
-};
-const handleUpload = async (idx) => {
-  const file = uFileList.value[idx].file;
-  console.log('========', file);
-  if (!textValue.value) {
-    textValue.value = props.defMsg.fileText;
-  }
-  const formDate = new FormData();
-  formDate.append('file', file);
-  const xhr = new XMLHttpRequest();
-  xhr.open('POST', 'https://api.coze.cn/v1/files/upload');
-  xhr.setRequestHeader(
-    'Authorization',
-    fetchOptions.value.headers.Authorization,
-  );
-  xhr.upload.onprogress = (e) => {
-    if (e.lengthComputable) {
-      const percent = Math.round((e.loaded / e.total) * 100);
-      console.log(`======进度======：${percent}%`);
-      uFileList.value[idx].percent = percent;
-    }
-  };
-  xhr.onreadystatechange = function () {
-    console.log('============', xhr);
-    if (xhr.readyState === XMLHttpRequest.DONE) {
-      if (xhr.status === 200) {
-        console.log('上传成功:', xhr.responseText);
-        const res = JSON.parse(xhr.response);
-        uFileList.value[idx].data = res.data;
-      } else {
-        console.error('上传失败:', xhr.status);
-      }
-    }
-  };
-  xhr.send(formDate);
-};
-const showUpload = () => {
-  clearAllFile(true);
-  uploadPlane.value = true;
-};
-const closeUpload = () => {
-  clearAllFile(true);
-  uploadPlane.value = false;
-};
-const clearAllFile = (deep = false) => {
-  if (deep) {
-    for (let i = uFileList.value.length - 1; i >= 0; i -= 1) {
-      clearFile(i);
-    }
-  }
-  uploadInput.value ? (uploadInput.value.value = '') : '';
-
-  uFileList.value = [];
-};
-
-const clearFile = (idx) => {
-  URL.revokeObjectURL(uFileList.value[idx].file_url);
-  uFileList.value.splice(idx, 1);
-  uploadInput.value ? (uploadInput.value.value = '') : '';
-};
-
-const newChatFunc = () => {
-  Emits('call', {
-    type: 'new_chat',
-  });
-};
-
-const resizeTextarea = () => {
-  nextTick(() => {
-    if (txtEle.value) {
-      txtEle.value.style.height = 'auto';
-      txtEle.value.style.height =
-        Math.min(txtEle.value.scrollHeight, 72) + 'px';
-    }
-  });
-};
-
-const handleFocus = () => {
-  nextTick(() => {
-    window.scrollTo({
-      top: Math.round(
-        0.7 * window.innerHeight + 0.5476 * window.innerWidth - 416.4,
-      ), // 滚动到页面的总高度
-      behavior: 'smooth', // 平滑滚动效果
-    });
-  });
-};
-const handleMsgType = (file_type) => {
-/* text：文本类型。
- * file：文件类型。
- * image：图片类型。
- * audio：音频类型。
- * */
-  if(file_type.includes('image')) {
-    return 'image'
-  }else if(file_type.includes('application')) {
-    return 'file'
-  }else if(file_type.includes('audio')) {
-    return 'audio'
-  }
-}
-const handleBlur = () => {};
-</script>
-
-<style scoped lang="less">
-@import './OperateModule';
-</style>

package/src/components/PlanCard.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="card" style="margin-top: 15px">
-    <div class="row">
-      <div class="name">每日攝入能量</div>
-      <div class="content">{{ info.totalIntake }} kcal</div>
-    </div>
-  </div>
-  <div v-for="cate in info.planDetailList" :key="category" class="card">
-    <div class="title">{{ textMap[cate.category] }}</div>
-    <div class="row">
-      <div class="name">{{ textMap[cate.category] }}熱量</div>
-      <div class="content">{{ cate.totalKcal }} kcal</div>
-    </div>
-    <div class="sep" />
-    <div class="row">
-      <div class="name">{{ textMap.carbohydrateTotal }}</div>
-      <div class="content">{{ cate.carbohydrateTotal }} g</div>
-    </div>
-    <div class="row">
-      <div class="name">{{ textMap.proteinTotal }}</div>
-      <div class="content">{{ cate.proteinTotal }} g</div>
-    </div>
-    <div class="row">
-      <div class="name">{{ textMap.fatTotal }}</div>
-      <div class="content">{{ cate.fatTotal }} g</div>
-    </div>
-  </div>
-  <div class="btn_group">
-    <div class="btn btn_2" @click.stop="handleSel">用該方案配餐</div>
-  </div>
-</template>
-
-<script setup>
-const textMap = {
-  '01': '早餐',
-  '02': '午餐',
-  '03': '晚餐',
-  '04': '加餐',
-  carbohydrateTotal: '碳水化合物',
-  proteinTotal: '蛋白質',
-  fatTotal: '脂肪',
-};
-
-const props = defineProps({
-  info: {
-    type: Object,
-    required: true,
-  },
-  defMsg: {
-    type: Object,
-    required: true,
-  },
-});
-const Emits = defineEmits(['select']);
-const handleSel = () => {
-  Emits('select', {});
-};
-</script>
-
-<style scoped lang="less">
-.card {
-  padding: 10px 15px;
-  margin-bottom: 10px;
-  background-color: #fff;
-  border-radius: 10px;
-  .title {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 24px;
-  }
-  .row {
-    .flexrbc();
-    margin: 10px 0;
-  }
-  .sep {
-    border-bottom: 1px solid #ddd;
-  }
-  .name {
-    font-weight: 400;
-    font-size: 14px;
-    color: #666;
-    line-height: 24px;
-  }
-  .content {
-    .name();
-    color: #000;
-    font-weight: 600;
-  }
-}
-.btn {
-  cursor: pointer;
-  width: 100%;
-  height: 38px;
-  line-height: 38px;
-  background-color: #e6f5eb;
-  border-radius: 19px;
-  text-align: center;
-  font-weight: 600;
-  font-size: 13px;
-  color: #039938;
-
-  &_2 {
-    color: #fff;
-    background-color: #039938;
-  }
-
-  &_group {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-column-gap: 10px;
-    margin-top: 20px;
-  }
-}
-</style>

package/src/components/StoreList/StoreCard.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="sc_wrap" @click.stop="handleSelStore">
-    <div
-      class="img"
-      :style="{
-        background: `url(${
-          info.signUrl || defImg
-        }?x-oss-process=image/resize,w_144) no-repeat center`,
-        backgroundSize: 'cover',
-      }"
-      @click.stop="previewImg([info.signUrl || defImg])"
-    />
-    <div>
-      <div class="name">{{ info.hpName }}</div>
-      <div class="address">{{ info.address }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { previewImg } from '../../utils/imagesViewer';
-
-const defImg =
-  'https://prodstatic.weis1606.cn/api/smartFood/images/logo_img.png';
-const props = defineProps({
-  info: {
-    type: Object,
-    required: true,
-  },
-});
-const Emits = defineEmits(['select']);
-const handleSelStore = () => {
-  Emits('select', {
-    type: 'chat',
-    content: props.info.hpName,
-    text: props.info.hpName,
-  });
-};
-</script>
-
-<style scoped lang="less">
-.sc_wrap {
-  .flexrss();
-  gap: 10px;
-  cursor: default;
-  padding: 10px;
-  margin: 10px 0;
-  border-radius: 10px;
-  background-color: #fff;
-  .img {
-    cursor: pointer;
-    width: 72px;
-    height: 72px;
-    flex-shrink: 0;
-    border-radius: 10px;
-    background-color: #d9d9d9;
-  }
-  .name {
-    font-weight: 600;
-    font-size: 14px;
-    color: #000;
-    line-height: 16px;
-  }
-  .address {
-    margin-top: 10px;
-    font-weight: 400;
-    font-size: 10px;
-    color: #666;
-    line-height: 12px;
-  }
-}
-</style>

package/src/components/StoreList/StoreList.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>请选择一个门店</div>
-  <template v-for="info in list" :key="info.hpName">
-    <store-card :info="info" @select="handleSel" />
-  </template>
-</template>
-
-<script setup>
-import StoreCard from './StoreCard.vue';
-// import data from './mock';
-// import { computed } from 'vue';
-// const list = computed(() => {
-//   return data.storeList;
-// });
-const props = defineProps({
-  list: {
-    type: Array,
-    required: true,
-  },
-});
-const Emits = defineEmits(['select']);
-const handleSel = (info) => {
-  Emits('select', { ...info });
-};
-</script>
-
-<style scoped></style>