ai-chat-bot-interface 1.6.22 → 1.6.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.6.22",
+  "version": "1.6.24",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",

package/src/App.vue

@@ -18,11 +18,12 @@ const handleLog = (log) => {
         {
           name: '用户信息',
           value: 'personalForm',
-          type: 'chat',
+          type: 'simulate',
           msg: '请为我生成一份个性化的健康的食谱。',
         },
       ]"
       :need-log="true"
+      post-token="CE73EA32DA06F05C3F522FE8E5E1420399E9C8433CD4932C"
       content-type="markdown"
       first-msg="减脂减重"
       @log="handleLog"

package/src/ChatUi.vue

@@ -202,6 +202,7 @@ import AssistantReplay from './components/assistantReplay/assistantReplay.vue';
 import StoreList from './components/StoreList/StoreList.vue';
 import MarkdownViewer from './components/MarkdownPlan/MarkdownViewer.vue';
 import PersonalForm from './components/personalForm/personalForm.vue';
+import processBar from './components/icons/processBar.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -275,6 +276,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  postToken: {
+    type: String,
+    default: '',
+  },
   showHeader: {
     type: Boolean,
     default: true,
@@ -351,6 +356,7 @@ const storage = {
 };
 
 onMounted(async () => {
+  localStorage.setItem('postToken', props.postToken || '');
   if (storage.getItem('conversationId')) {
     conversationId.value = storage.getItem('conversationId');
     await queryBotInfo();
@@ -359,7 +365,14 @@ onMounted(async () => {
   } else {
     await createConv();
     if (props.firstMsg) {
-      const perMsg = `本食谱为通用版${props.firstMsg}示例，依据以下女性常规身体数据制定：
+      await handleFirstMsg();
+    }
+  }
+  scrollToEnd();
+});
+
+const handleFirstMsg = async () => {
+  const perMsg = `本食谱为通用版${props.firstMsg}示例，依据以下女性常规身体数据制定：
 性别：女；
 年龄：25岁；
 身高：160cm；
@@ -367,11 +380,76 @@ onMounted(async () => {
 日常运动水平：久坐；
 口味偏好及饮食禁忌：无；
 如需定制贴合个人情况的专属方案，请前往完善个人身体数据，获取个性化定制食谱。`;
-      await chatConv([{ content: perMsg, text: perMsg }]);
-    }
+
+  historyList.value = [
+    {
+      conversation_id: '',
+      bot_id: props.botId,
+      role: 'user',
+      content: perMsg,
+      reasoning_content: '',
+      status: 'ended',
+      extra: [],
+    },
+  ];
+
+  const res = await post('/api/cn.weis.api.Food/bdGeneralTemp', {
+    method: 'bdGeneralTemp',
+    params: [{}],
+    token: props.postToken,
+  });
+  if (res.errCode === 0 && res.obj) {
+    const resMsg = `您的身高：160cm  年龄：25 岁  体重：60kg  性别：女  日常运动水平：久坐
+
+根据您的身体状况，给您推荐的饮食方案如下
+——————————————————
+
+早餐
+热量：375kcal
+碳水：46.9g
+蛋白质：18.8g
+脂肪：12.5g
+
+午餐
+热量：525kcal
+碳水：65.6g
+蛋白质：26.3g
+脂肪：17.5g
+
+晚餐
+热量：450kcal
+碳水：56.3g
+蛋白质：22.5g
+脂肪：15g
+
+加餐
+热量：150kcal
+碳水：26.3g
+蛋白质：3.8g
+脂肪：3.3g
+
+——————————————————`;
+
+    historyList.value.push({
+      conversation_id: '',
+      bot_id: props.botId,
+      role: 'assistant',
+      content: resMsg,
+      reasoning_content: '',
+      status: 'ended',
+      extra: [
+        {
+          ...res.obj,
+          showType: 'card',
+        },
+      ],
+    });
+    Emits('log', {
+      turns: turns.value,
+      info: historyList.value[historyList.value.length - 1],
+    });
   }
-  scrollToEnd();
-});
+};
 
 const createConv = async () => {
   const res = await post(
@@ -767,6 +845,9 @@ const handleTagSel = (info) => {
     case 'call':
       Emits('call', { ...info });
       break;
+    case 'simulate':
+      simulateChat(info);
+      break;
   }
 };
 
@@ -784,10 +865,10 @@ const handleCardTap = ({ type }, info) => {
       ]);
       break;
     case 'personalForm':
-      handleTagSel({
+      simulateChat({
         msg: '请为我生成一份个性化的健康的食谱',
         name: '用户信息',
-        type: 'chat',
+        type: 'simulate',
         value: 'personalForm',
       });
       break;
@@ -815,15 +896,55 @@ const handlePlanParse = (list) => {
 };
 
 const scrollToEnd = () => {
-  nextTick(() => {
-    endTarget.value.scrollIntoView();
-  });
+  setTimeout(() => {
+    nextTick(() => {
+      endTarget.value.scrollIntoView();
+    });
+  }, 100);
 };
 
 const handleTextNeedBtn = (str) => {
   const regExp = /#全日總熱量：(\d*?)kcal/g;
   return regExp.test(str);
 };
+
+const simulateChat = (info) => {
+  console.log('== simulateChat == ', info);
+  historyList.value.push({
+    conversation_id: '',
+    bot_id: props.botId,
+    role: 'user',
+    content: info.msg,
+    reasoning_content: '',
+    status: 'ended',
+    extra: [],
+  });
+  let resInfo = {
+    msg: '',
+    extra: [],
+  };
+  switch (info.value) {
+    case 'personalForm':
+      resInfo.msg =
+        '请填写您的身体数据，维小饭将根据你的身体数据智能生成个性化食谱';
+      resInfo.extra = [
+        {
+          showType: 'personalForm',
+        },
+      ];
+      break;
+  }
+  historyList.value.push({
+    conversation_id: '',
+    bot_id: props.botId,
+    role: 'assistant',
+    content: resInfo.msg,
+    reasoning_content: '',
+    status: 'ended',
+    extra: [...resInfo.extra],
+  });
+  scrollToEnd();
+};
 </script>
 
 <style scoped lang="less">

package/src/components/DishesCard.vue

@@ -66,6 +66,10 @@
         <div class="tag">花生</div>
         <div class="tag">玉米淀粉</div>
       </div>-->
+      <div class="tips">
+        <span class="star">*</span
+        >一份的量偏小不便制作，因而基于3份的量来介绍，食用时取一份即可
+      </div>
       <div class="title">食材</div>
       <div class="text">
         {{ materialText }}
@@ -75,7 +79,7 @@
         <video :src="info.skuVideo" width="100%" controls="true" />
       </div>
       <div
-        v-for="(item, index) in info.makeCraftList"
+        v-for="(item, index) in makeCraft.makeCraftList"
         :key="index"
         class="step_row"
       >
@@ -99,10 +103,11 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import { api as viewerApi } from 'v-viewer';
 import 'viewerjs/dist/viewer.css';
 import ArrowRight from './icons/ArrowRight.vue';
+import { post } from '@/utils/request.js';
 
 const props = defineProps({
   info: {
@@ -121,15 +126,43 @@ const props = defineProps({
 const isOpen = ref(props.open);
 const contentRef = ref(null); // 用于引用内容 DOM 元素
 const contentHeight = ref(0); // 存储内容的实际高度
+const makeCraft = ref([]);
 
-onMounted(() => {
-  getContentHeight();
+onMounted(async () => {
+  if (isOpen.value) {
+    await querySkuMakeCraft();
+    getContentHeight();
+  }
 });
 
 const getContentHeight = () => {
-  contentHeight.value = hasDetails.value ? contentRef.value.scrollHeight : 0;
+  nextTick(async () => {
+    const imgList = [];
+    if (makeCraft.value.hasOwnProperty('makeCraftList')) {
+      makeCraft.value?.makeCraftList.forEach((item) => {
+        const imgs = getImageList(item.craftImg);
+        imgList.push(...imgs);
+      });
+    }
+    await preloadImages(imgList);
+    contentHeight.value = hasDetails.value ? contentRef.value.scrollHeight : 0;
+    isOpen.value = true;
+  });
 };
 
+const preloadImages = (urls) => {
+  const promises = [];
+  urls.forEach((url) => {
+    const img = new Image();
+    const promise = new Promise((resolve, reject) => {
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error(`加载${url}失败`));
+      img.src = url;
+    });
+    promises.push(promise);
+  });
+  return Promise.all(promises);
+};
 // const Emits = defineEmits(['update:open']);
 
 const subStr = computed(() => {
@@ -142,14 +175,7 @@ const materialText = computed(() => {
   return (list || []).join('、');
 });
 const hasDetails = computed(() => {
-  let sts = false;
-  if (
-    props.info.hasOwnProperty('makeCraftList') &&
-    props.info.makeCraftList.length > 0
-  ) {
-    sts = true;
-  }
-  return sts;
+  return props.info.hasOwnProperty('cid') && props.info.cid;
 });
 const panelHeight = computed(() => {
   let h = '92px';
@@ -165,11 +191,13 @@ const previewImg = (url) => {
   });
 };
 
-const switchOpen = () => {
+const switchOpen = async () => {
   if (!isOpen.value) {
+    await querySkuMakeCraft();
     getContentHeight();
+  } else {
+    isOpen.value = false;
   }
-  isOpen.value = !isOpen.value;
 };
 
 const getImageList = (str) => {
@@ -182,6 +210,24 @@ const getImageList = (str) => {
 
   return list;
 };
+
+const querySkuMakeCraft = async () => {
+  if (
+    !(
+      makeCraft.value.hasOwnProperty('makeCraftList') &&
+      makeCraft.value.hasOwnProperty('makeMaterialList')
+    )
+  ) {
+    const res = await post('/api/cn.weis.api.Food/makeCraft', {
+      method: 'makeCraft',
+      params: [{ cid: props.info.cid }],
+      token: localStorage.getItem('postToken'),
+    });
+    if (res.errCode === 0 && res.obj) {
+      makeCraft.value = { ...res.obj };
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
@@ -202,6 +248,17 @@ const getImageList = (str) => {
         font-size: 18px;
       }
     }
+    .tips {
+      vertical-align: middle;
+      font-size: 13px;
+      font-weight: 400;
+      margin-top: 10px;
+      .star {
+        color: #ff0000;
+        vertical-align: middle;
+        margin-right: 0.4em;
+      }
+    }
     .title {
       font-weight: 600;
       font-size: 15px;

package/src/components/DishesList.vue

@@ -31,12 +31,12 @@
       温馨提示：维小饭AI健康食谱为日常膳食调理方案，不能替代药物治疗或专业医疗建议。如有疾病，请及时就医并遵医嘱。
     </div>
     <div v-if="isMini" class="btn_group">
+      <div class="btn btn_1" @click.stop="handleBtn('personalForm')">
+        <span class="name">私人定制个性食谱</span>
+      </div>
       <div class="btn btn_2" @click.stop="handleBtn('ship_order')">
         <span class="name">去订餐</span>
       </div>
-      <div class="btn btn_1" @click.stop="handleBtn('personalForm')">
-        <span class="name">定制个性化食谱</span>
-      </div>
     </div>
     <div v-else class="btn_group">
       <div
@@ -83,7 +83,8 @@ const openSts = ref(false);
 const handleIsOpen = (info, category) => {
   if (openSts.value) {
     return false;
-  } else if (category !== '01' && info.hasOwnProperty('makeCraftList')) {
+  } else if (category !== '01' && info.hasOwnProperty('cid') && info.cid) {
+    console.log('=== 6666 ===', info);
     openSts.value = true;
     return true;
   } else {

package/src/components/icons/processBar.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="cool-progress-container">
+    <!-- 进度条外层容器 -->
+    <div class="progress-bar-wrapper">
+      <!-- 进度条主体（带渐变+流光） -->
+      <div class="progress-bar" :style="{ width: `${percentage}%` }">
+        <!-- 流光伪元素通过 CSS 实现，无需额外DOM -->
+      </div>
+    </div>
+    <!-- 进度数字（发光效果） -->
+    <span class="progress-text">{{ percentage }}%</span>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+// 模拟进度值，可替换为业务数据
+const percentage = ref(0);
+const runner = ref('');
+onMounted(() => {
+  percentage.value = 0;
+  runFunc();
+});
+
+const runFunc = () => {
+  let x = 0;
+  let t = 100;
+  const max = 95;
+  const calcProcess = () => {
+    const timer = setTimeout(() => {
+      if (percentage.value >= max) {
+        console.log('== stop ==', new Date().getTime());
+        clearTimeout(timer);
+      } else {
+        if (percentage.value > 80) {
+          t = 800;
+        }
+        percentage.value = (max * (1 - Math.exp(-x / 20))).toFixed(1);
+        x += 0.5;
+        calcProcess();
+      }
+    }, t);
+  };
+  console.log('== start ==', new Date().getTime());
+  calcProcess();
+};
+</script>
+
+<style scoped>
+.cool-progress-container {
+  width: 100%;
+  max-width: 600px;
+  margin: 20px 0;
+  padding: 15px;
+  background: #121212; /* 暗黑底色适配酷炫风 */
+  border-radius: 12px;
+  box-shadow: 0 0 20px rgba(0, 128, 255, 0.2);
+}
+
+.progress-bar-wrapper {
+  height: 24px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: 12px;
+  /* 赛博朋克渐变底色 */
+  background: linear-gradient(90deg, #00f5ff, #7928ca, #ff0080);
+  position: relative;
+  transition: width 0.5s ease-in;
+}
+
+/* 流光动画伪元素 */
+.progress-bar-wrapper::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  transform: skewX(-20deg);
+  animation: light-flow 1.5s infinite linear;
+}
+
+/* 流光动画 */
+@keyframes light-flow {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 200%;
+  }
+}
+
+/* 发光进度文字 */
+.progress-text {
+  display: block;
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #00f5ff;
+  text-shadow: 0 0 10px #00f5ff, 0 0 20px #00f5ff;
+}
+</style>

package/vite.config.js

@@ -20,5 +20,14 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0',
+    hmr: true,
+    proxy: {
+      '/api': {
+        // target: 'https://prodapi.weis1606.cn',
+        target: 'https://api.weis1606.cn/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '/api'),
+      },
+    },
   },
 });