ai-chat-bot-interface 1.1.3 → 1.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.1.3",
+  "version": "1.1.5",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",
@@ -22,8 +22,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
     "less": "^4.2.2",
-    "vite": "^6.1.0",
-    "prettier": "^2.6.2"
+    "prettier": "^2.6.2",
+    "vite": "^6.1.0"
   },
   "author": "lin_26",
   "license": "MIT"

package/src/App.vue

@@ -4,7 +4,7 @@ import ChatUi from './ChatUi.vue';
 
 <template>
   <div style="width: 100vw; height: 100vh">
-    <chat-ui bot-id="266666" token="pat_8888" uid="262598" />
+    <chat-ui bot-id="0000" token="pat_888" uid="262598" />
   </div>
 </template>
 <style></style>

package/src/ChatUi.vue

@@ -47,7 +47,7 @@
               v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
               :key="idx"
               class="board_sug"
-              @click.stop="chatConv({ code: item, text: item })"
+              @click.stop="chatConv([{ content: item, text: item }])"
               >{{ item }}</span
             >
           </div>
@@ -65,6 +65,13 @@
                   <p class="text" v-html="conv.content"></p>
                   <div v-if="conv.extra.length && !isAnswering">
                     <template v-for="(comp, idx) in conv.extra" :key="idx">
+                      <!--                      <p
+                        v-if="comp.showType === 'plan' && comp.planParse"
+                        class="text"
+                        style="margin-top: 1em"
+                      >
+                        {{ comp.planParse }}
+                      </p>-->
                       <dishes-list
                         v-if="comp.showType === 'card'"
                         :sku-list="comp.skuList"
@@ -72,6 +79,7 @@
                       />
                       <plan-card
                         v-if="comp.showType === 'plan'"
+                        :info="comp"
                         @select="handleCardTap({ type: 'match' }, comp)"
                       />
                     </template>
@@ -90,6 +98,9 @@
               </div>
               <div class="box">
                 <p class="text" v-html="conv.content"></p>
+                <div v-if="conv.extra.length">
+                  <imge-list :list="conv.extra" />
+                </div>
               </div>
             </div>
           </div>
@@ -98,6 +109,8 @@
       </div>
       <operate-module
         v-model="inputText"
+        :token="token"
+        :tag-list="tagList"
         @send="chatConv"
         @tag="handleTagSel"
       />
@@ -120,6 +133,7 @@ import BackIcon from './components/icons/BackIcon.vue';
 import NewChat from './components/icons/newChat.vue';
 import LoadingIcon from './components/icons/loadingIcon.vue';
 import LoadingIcon2 from './components/icons/loadingIcon2.vue';
+import ImgeList from './components/imgeList.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -159,6 +173,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  tagList: {
+    type: Array,
+    default: () => [
+      { name: '人工客服', value: 'kefu', type: 'chat', msg: '人工客服' },
+      { name: '查看菜单', value: 'menu', type: 'call', msg: '查看菜单' },
+      { name: '体检报告', value: 'exam', type: 'upload', msg: '体检报告' },
+    ],
+  },
 });
 
 const Emits = defineEmits(['call']);
@@ -228,22 +250,65 @@ const createConv = async () => {
       },
   );
 };*/
+
 const chatConv = async (data) => {
-  let isInCode = data.hasOwnProperty('text') && data.hasOwnProperty('code');
+  let isInCode = Array.isArray(data); //  data.hasOwnProperty('text') && data.hasOwnProperty('code');
+  console.log('=========', isInCode, data);
+  let botId = props.botId;
   if (!(!isAnswering.value && (inputText.value || isInCode))) {
     return;
   }
   const inText = inputText.value;
   console.log('== user send ==', isInCode, data, inText);
   isAnswering.value = true;
-  historyList.value.push({
+
+  const additional_messages = [];
+  const uObj = {
     conversation_id: conversationId.value,
-    bot_id: props.botId,
+    bot_id: botId,
     role: 'user',
-    content: isInCode ? data.text : inText,
+    content: '',
     status: 'ended',
     extra: [],
+  };
+  const markStr = `chat_${new Date().getTime()};`;
+  data.forEach((item) => {
+    if (item.hasOwnProperty('content') && item.content) {
+      if (item.hasOwnProperty('type') && item.type === 'object_string') {
+        console.log('=== item ====', item);
+        botId = '7474884145253023795';
+        additional_messages.push({
+          content: JSON.stringify(
+            item.content.map((con) => ({
+              type: con.type,
+              file_id: con.file_id,
+            })),
+          ),
+          content_type: 'object_string',
+          role: 'user',
+          meta_data: {
+            chat_group: markStr,
+          },
+        });
+        uObj.extra = item.content.map((con) => ({
+          ...con,
+          showType: con.type,
+        }));
+      } else {
+        uObj.content = item.text;
+        additional_messages.push({
+          content: item.content,
+          content_type: 'text',
+          role: 'user',
+          meta_data: {
+            chat_group: markStr,
+          },
+        });
+      }
+    }
   });
+
+  historyList.value.push(uObj);
   const res = await fetch(
     `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
     {
@@ -253,17 +318,22 @@ const chatConv = async (data) => {
         // 'Content-Type': 'text/event-stream',
       },
       body: JSON.stringify({
-        bot_id: props.botId,
+        bot_id: botId,
         user_id: props.uid,
         stream: true,
         connector_id: '999',
-        additional_messages: [
+        additional_messages /*[
+          {
+            content: '[{"type":"image","file_id":"7475569020654436390"}]',
+            content_type: 'object_string',
+            role: 'user',
+          },
           {
             role: 'user',
             content_type: 'text',
             content: isInCode ? data.code : inText, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
           },
-        ],
+        ]*/,
         custom_variables: {
           uid: props.uid,
         },
@@ -330,6 +400,7 @@ const chatConv = async (data) => {
           historyList.value[idx].content = handleText(
             historyList.value[idx].content + strObj.content,
           );
+          scrollToEnd();
         } else if (
           strObj.hasOwnProperty('type') &&
           strObj.type === 'tool_response'
@@ -343,6 +414,7 @@ const chatConv = async (data) => {
               historyList.value[idx].extra.push({ ...modelObj });
             }
           }
+          scrollToEnd();
         }
       }
     });
@@ -359,6 +431,7 @@ const queryHistoryList = async () => {
   if (res.code === 0 && res.data && res.data.length) {
     historyList.value = [];
     const cardList = [];
+    const userFileList = [];
     res.data.forEach((row) => {
       if (row.hasOwnProperty('content_type')) {
         if (row.content_type === 'text') {
@@ -367,6 +440,7 @@ const queryHistoryList = async () => {
             conversation_id: row.conversation_id,
             bot_id: row.bot_id,
             role: row.role,
+            meta_data: row.meta_data,
             content: handleText(row.content),
             status: 'ended',
             extra: [],
@@ -395,19 +469,44 @@ const queryHistoryList = async () => {
               }
             }
           } catch (e) {
-            console.log('== 解析错误 ==');
+            console.log('== 解析错误 sys==');
+          }
+        } else if (
+          row.content_type === 'object_string' &&
+          row.role === 'user'
+        ) {
+          try {
+            const strObj = JSON.parse(row.content);
+            cardList.push({
+              chat_id: row.chat_id,
+              conversation_id: row.conversation_id,
+              bot_id: row.bot_id,
+              role: row.role,
+              meta_data: row.meta_data,
+              extra: strObj.map((item) => ({ ...item, showType: item.type })),
+            });
+          } catch (e) {
+            console.log('== 解析错误 user==');
           }
         }
       }
     });
     cardList.forEach((card) => {
-      const idx = historyList.value.findIndex(
-        (c) => c.chat_id === card.chat_id && c.role === 'assistant',
-      );
+      const idx =
+        card.role === 'user'
+          ? historyList.value.findIndex(
+              (c) =>
+                c.meta_data.chat_group === card.meta_data.chat_group &&
+                c.role === card.role,
+            )
+          : historyList.value.findIndex(
+              (c) => c.chat_id === card.chat_id && c.role === card.role,
+            );
       if (idx > -1) {
         historyList.value[idx].extra = [...card.extra];
       }
     });
+
     console.log(historyList.value, cardList);
   }
 };
@@ -437,7 +536,7 @@ const handleBack = () => {
 const handleTagSel = (info) => {
   switch (info.type) {
     case 'chat':
-      chatConv({ code: info.msg, text: info.msg });
+      chatConv([{ content: info.msg, text: info.msg }]);
       break;
     case 'call':
       Emits('call', { ...info });
@@ -448,16 +547,25 @@ const handleTagSel = (info) => {
 const handleCardTap = ({ type }, info) => {
   switch (type) {
     case 'change':
-      chatConv({ code: '換一套菜品', text: '換一套菜品' });
+      chatConv([{ content: '換一套菜品', text: '換一套菜品' }]);
       break;
     case 'match':
-      chatConv({ code: '請用以上方案為我配餐', text: '請用以上方案為我配餐' });
+      chatConv([
+        { content: '請用以上方案為我配餐', text: '請用以上方案為我配餐' },
+      ]);
       break;
     default:
       Emits('call', { type, info });
   }
 };
 
+const handlePlanParse = (list) => {
+  const pIdx = list.findIndex((p) => p.showType === 'plan');
+  return pIdx > -1
+    ? { show: true, text: list[pIdx].planParse }
+    : { show: false };
+};
+
 const scrollToEnd = () => {
   nextTick(() => {
     endTarget.value.scrollIntoView();

package/src/components/DishesCard.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 });
 
 const subStr = computed(() => {
-  return `热量${props.info.energy}kcal，蛋白质${props.info.protein}g，脂肪${props.info.fat}g，碳水${props.info.carbonwater}g`;
+  return `熱量${props.info.energy}kcal，蛋白質${props.info.protein}g，脂肪${props.info.fat}g，碳水${props.info.carbonwater}g`;
 });
 </script>
 

package/src/components/DishesList.vue

@@ -22,11 +22,11 @@
     </template>
     <div class="btn_group">
       <div class="btn btn_1" @click.stop="handleBtn('ship_order')">
-        <span class="name">配送下单</span>
+        <span class="name">配送下單</span>
         <span class="sub">（直送到府）</span>
       </div>
       <div class="btn btn_2" @click.stop="handleBtn('pick_order')">
-        <span class="name">自提點餐</span>
+        <span class="name">自提下單</span>
         <span class="sub">（免運費）</span>
       </div>
     </div>

package/src/components/OperateModule.less

@@ -0,0 +1,165 @@
+@import '../assets/styles/public';
+.om {
+  &_wrap {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
+    background-color: #fff;
+  }
+  &_quick {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 10px;
+    overflow-x: auto;
+    justify-content: start;
+    scroll-behavior: smooth;
+    scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tag {
+      .flexrsc();
+      cursor: pointer;
+      width: fit-content;
+      white-space: nowrap;
+      font-weight: 400;
+      font-size: 12px;
+      color: #333;
+      line-height: 16px;
+      text-align: left;
+      padding: 6px 10px;
+      border-radius: 10px;
+      border: 1px solid #d0d0d0;
+    }
+    .icon {
+      font-size: 16px;
+      color: @primary-color;
+    }
+  }
+  &_operate {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    background: #fff;
+    align-items: center;
+    &_wrap {
+      margin: 10px 0;
+      width: 100%;
+      min-height: 48px;
+      padding: 10px;
+      border-radius: 24px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+      .file_card {
+        width: 64px;
+        height: 64px;
+        border-radius: 15px;
+        background-color: #f7f7f7;
+        position: relative;
+        .img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        .close {
+          cursor: pointer;
+          font-size: 16px;
+          color: #fff;
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 5;
+        }
+        .process {
+          .flexrcc();
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.6);
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 8;
+        }
+      }
+      .file_add {
+        .flexrcc();
+        .file_card();
+        cursor: pointer;
+        font-size: 24px;
+      }
+      .file_list {
+        .flexrsc();
+        gap: 10px;
+        padding-bottom: 10px;
+        position: relative;
+        &_box {
+          transition: all 200ms ease-in-out;
+          overflow: hidden;
+          height: 74px;
+          opacity: 1;
+          &.hidden {
+            height: 0;
+            opacity: 0;
+          }
+        }
+      }
+      .file_close {
+        .flexrcc();
+        cursor: pointer;
+        color: #fff;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.5);
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 10;
+      }
+    }
+    .input {
+      font-size: 16px;
+      line-height: 24px;
+      overflow-y: auto;
+      resize: none;
+      padding: 0 0 0 10px;
+      border-radius: 24px;
+      border: none;
+      &:focus-visible {
+        outline: none;
+      }
+    }
+    .btn {
+      .flexrcc();
+      height: 100%;
+      color: @primary-color;
+      font-size: 32px;
+      padding: 0 10px;
+      &_group {
+      }
+    }
+  }
+  &_extra {
+    .flexrss();
+    gap: 10px;
+    padding: 10px 0 20px;
+    .card {
+      text-align: center;
+    }
+    .text {
+      color: #666;
+      font-size: 14px;
+      line-height: 24px;
+      margin-top: 6px;
+    }
+    .icon {
+      .flexrcc();
+      width: 72px;
+      height: 72px;
+      color: #000;
+      font-size: 24px;
+      background-color: #f7f7f7;
+      border-radius: 15px;
+    }
+  }
+}

package/src/components/OperateModule.vue

@@ -7,24 +7,87 @@
         :key="item.value"
         @click.stop="handleTag(item)"
       >
-        <tag-icon class="icon" />{{ item.name }}
+        <tag-icon class="icon" />
+        {{ item.name }}
       </div>
     </div>
-    <div class="om_operate">
-      <textarea
-        v-model="textValue"
-        ref="txtEle"
-        class="input"
-        rows="1"
-        placeholder="發消息⋯"
-        @input="handleInput"
-        @keyup.enter="sendMsg"
+    <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 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="發消息⋯"
+          @input="handleInput"
+          @keyup.enter="sendMsg"
+        />
+        <div class="btn_group">
+          <div class="btn" @click.stop="sendMsg">
+            <send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
+          </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"
       />
-      <div class="btn_group">
-        <div class="btn" @click.stop="sendMsg">
-          <send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
+
+      <input
+        ref="uploadInput"
+        type="file"
+        accept="image/*"
+        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>
 </template>
@@ -33,24 +96,51 @@
 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';
+
+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,
-    default: () => [
-      { name: '人工客服', value: 'kefu', type: 'chat', msg: '人工客服' },
-      { name: '查看菜单', value: 'menu', type: 'call', msg: '查看菜单' },
-    ],
+    required: true,
   },
 });
 const Emits = defineEmits(['update:modelValue', 'send', 'tag']);
 
+const fetchOptions = computed(() => {
+  return {
+    headers: {
+      Authorization: `Bearer ${props.token}`,
+      'Content-Type': 'multipart/form-data',
+    },
+  };
+});
+
 watch(
   () => props.modelValue,
   () => {
@@ -82,12 +172,110 @@ const handleInput = (event) => {
   textValue.value = event.target.value.replace(/^\n+|\n+$/g, '');
 };
 const handleTag = (info) => {
-  Emits('tag', { ...info });
+  if (info.type === 'upload') {
+    showUpload();
+  } else {
+    Emits('tag', { ...info });
+  }
+};
+const sendMsg = (e) => {
+  const list = [{ content: textValue.value, text: textValue.value }];
+  if (uFileList.value.length) {
+    console.log(uFileList.value);
+    list.push({
+      type: 'object_string',
+      content: uFileList.value.map((file) => ({
+        type: 'image',
+        file_id: file.data.id,
+        file_url: file.file_url,
+      })),
+    });
+  }
+  Emits('send', [...list]);
+  clearAllFile();
 };
-const sendMsg = () => {
-  // console.log('=== send msg ===', textValue.value);
-  Emits('send', textValue.value);
+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];
+
+  if (selFile) {
+    uFileList.value.push({
+      file: selFile,
+      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 = '請根據我上傳的體檢報告為我生成飲食方案';
+  }
+  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);
+    }
+  }
+  uFileList.value = [];
+};
+
+const clearFile = (idx) => {
+  URL.revokeObjectURL(uFileList.value[idx].file_url);
+  uFileList.value.splice(idx, 1);
+};
+
 const resizeTextarea = () => {
   nextTick(() => {
     if (txtEle.value) {
@@ -100,78 +288,5 @@ const resizeTextarea = () => {
 </script>
 
 <style scoped lang="less">
-@import '../assets/styles/public';
-.om {
-  &_wrap {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 10px;
-    background-color: #fff;
-  }
-  &_quick {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 10px;
-    overflow-x: auto;
-    justify-content: start;
-    scroll-behavior: smooth;
-    scrollbar-width: none; /* 隐藏滚动条（Firefox） */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .tag {
-      .flexrsc();
-      cursor: pointer;
-      width: fit-content;
-      white-space: nowrap;
-      font-weight: 400;
-      font-size: 12px;
-      color: #333;
-      line-height: 16px;
-      text-align: left;
-      padding: 6px 10px;
-      border-radius: 10px;
-      border: 1px solid #d0d0d0;
-    }
-    .icon {
-      font-size: 16px;
-      color: @primary-color;
-    }
-  }
-  &_operate {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    box-sizing: border-box;
-    margin: 10px 0;
-    width: 100%;
-    min-height: 48px;
-    padding: 10px;
-    background: #fff;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-    border-radius: 24px;
-    align-items: center;
-    .input {
-      font-size: 16px;
-      line-height: 24px;
-      overflow-y: auto;
-      resize: none;
-      padding: 0 0 0 10px;
-      border-radius: 24px;
-      border: none;
-      &:focus-visible {
-        outline: none;
-      }
-    }
-    .btn {
-      .flexrcc();
-      height: 100%;
-      color: @primary-color;
-      font-size: 32px;
-      padding: 0 10px;
-      &_group {
-      }
-    }
-  }
-}
+@import './OperateModule';
 </style>

package/src/components/PlanCard.vue

@@ -1,10 +1,52 @@
 <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,
+  },
+});
 const Emits = defineEmits(['select']);
 const handleSel = () => {
   Emits('select', {});
@@ -12,6 +54,35 @@ const handleSel = () => {
 </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%;

package/src/components/icons/addIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.5 4.5C13.5 3.67157 12.8284 3 12 3C11.1716 3 10.5 3.67157 10.5 4.5L10.5 10.5H4.5C3.67157 10.5 3 11.1716 3 12C3 12.8284 3.67157 13.5 4.5 13.5H10.5L10.5 19.5C10.5 20.3284 11.1716 21 12 21C12.8284 21 13.5 20.3284 13.5 19.5V13.5H19.5C20.3284 13.5 21 12.8284 21 12C21 11.1716 20.3284 10.5 19.5 10.5H13.5V4.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/cameraIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.03791 5.43733C4.02837 5.73154 2.36942 7.19356 2.01374 9.19314C1.80186 10.3843 1.625 11.7046 1.625 12.7932C1.625 14.1142 1.88543 15.7626 2.15286 17.1069C2.47288 18.7157 3.53388 20.0703 5.08995 20.5892C6.81466 21.1644 9.4087 21.7782 12.6246 21.7782C15.8579 21.7782 18.4626 21.1577 20.1872 20.5799C21.7264 20.0641 22.781 18.729 23.1036 17.138C23.3774 15.788 23.6415 14.1244 23.6242 12.7932C23.6125 11.8974 23.4692 10.8334 23.2896 9.83524C22.9086 7.71845 21.2484 6.11084 19.1702 5.55694C18.4877 5.37505 17.8729 4.99872 17.4004 4.47375L16.4669 3.4365C15.7716 2.66386 14.7809 2.22266 13.7415 2.22266H11.5077C10.4683 2.22266 9.47763 2.66385 8.78228 3.4365L7.85962 4.46171C7.38473 4.98939 6.74034 5.3345 6.03791 5.43733ZM15.0694 12.6113C15.0694 13.9614 13.975 15.0558 12.625 15.0558C11.275 15.0558 10.1805 13.9614 10.1805 12.6113C10.1805 11.2613 11.275 10.1669 12.625 10.1669C13.975 10.1669 15.0694 11.2613 15.0694 12.6113ZM17.5139 12.6113C17.5139 15.3114 15.325 17.5002 12.625 17.5002C9.92493 17.5002 7.7361 15.3114 7.7361 12.6113C7.7361 9.91127 9.92493 7.72244 12.625 7.72244C15.325 7.72244 17.5139 9.91127 17.5139 12.6113Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'camreIcon',
+};
+</script>
+
+<style scoped></style>

package/src/components/icons/closeBorderIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="7.5"
+      fill="black"
+      fill-opacity="0.5"
+    />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="15"
+      height="15"
+      rx="7.5"
+      stroke="currentColor"
+    />
+    <path
+      d="M10.8284 6.58588C11.2189 6.19535 11.2189 5.56219 10.8284 5.17167C10.4379 4.78114 9.80471 4.78114 9.41419 5.17167L8 6.58586L6.58581 5.17167C6.19529 4.78114 5.56212 4.78114 5.1716 5.17167C4.78107 5.56219 4.78107 6.19535 5.1716 6.58588L6.58579 8.00007L5.17155 9.41431C4.78103 9.80483 4.78103 10.438 5.17155 10.8285C5.56207 11.219 6.19524 11.219 6.58576 10.8285L8 9.41428L9.41424 10.8285C9.80476 11.219 10.4379 11.219 10.8285 10.8285C11.219 10.438 11.219 9.80483 10.8285 9.41431L9.41421 8.00007L10.8284 6.58588Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/fileIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.0849 10.6565C19.9734 8.76795 19.9734 5.70607 18.0849 3.81756C16.1964 1.92905 13.1345 1.92905 11.246 3.81756L5.05399 10.0096C2.55177 12.5118 2.55177 16.5687 5.05399 19.0709C7.55622 21.5732 11.6131 21.5732 14.1154 19.0709L20.2421 12.9442C20.6326 12.5537 20.6326 11.9205 20.2421 11.53C19.8516 11.1394 19.2184 11.1394 18.8279 11.53L12.7011 17.6567C10.98 19.3779 8.18938 19.3779 6.46821 17.6567C4.74703 15.9355 4.74703 13.145 6.4682 11.4238L12.6602 5.23178C13.7677 4.12431 15.5632 4.12431 16.6707 5.23178C17.7781 6.33924 17.7781 8.13478 16.6707 9.24224L10.5401 15.3729C10.0481 15.8648 9.25051 15.8648 8.75856 15.3729C8.26661 14.8809 8.26661 14.0833 8.75856 13.5913L13.9435 8.40645C14.334 8.01592 14.334 7.38276 13.9435 6.99223C13.5529 6.60171 12.9198 6.60171 12.5292 6.99223L7.34435 12.1771C6.07135 13.4501 6.07135 15.5141 7.34435 16.7871C8.61735 18.0601 10.6813 18.0601 11.9543 16.7871L18.0849 10.6565Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/pictureIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.875 6C2.875 4.34315 4.21815 3 5.875 3H19.875C21.5319 3 22.875 4.34315 22.875 6V18C22.875 19.6569 21.5319 21 19.875 21H5.875C4.21815 21 2.875 19.6569 2.875 18V6ZM5.875 5C5.32272 5 4.875 5.44772 4.875 6V16.0852L10.475 11.8852C11.8972 10.8185 13.8528 10.8185 15.275 11.8852L20.875 16.0852V6C20.875 5.44772 20.4273 5 19.875 5H5.875ZM8.28442 10.0852C9.11285 10.0852 9.78442 9.41363 9.78442 8.58521C9.78442 7.75678 9.11285 7.08521 8.28442 7.08521C7.456 7.08521 6.78442 7.75678 6.78442 8.58521C6.78442 9.41363 7.456 10.0852 8.28442 10.0852Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'pictureIcon',
+};
+</script>
+
+<style scoped></style>

package/src/components/icons/progressRing.vue

@@ -0,0 +1,63 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- 绘制底层浅色圆环 -->
+    <circle
+      cx="50"
+      cy="50"
+      r="45"
+      fill="none"
+      :stroke="bgColor"
+      stroke-width="8"
+    />
+    <!-- 绘制上层白色圆弧（带圆角端点） -->
+    <path
+      id="progressPath"
+      d="M 50 5
+           a 45 45 0 1 1 0 90
+           a 45 45 0 1 1 0 -90"
+      fill="none"
+      :stroke="color"
+      stroke-width="10"
+      stroke-linecap="round"
+      :stroke-dasharray="num.l"
+      :stroke-dashoffset="num.p"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  percent: {
+    type: Number,
+    default: 75,
+  },
+  size: {
+    type: Number,
+    default: 48,
+  },
+  color: {
+    type: String,
+    default: '#fff',
+  },
+  bgColor: {
+    type: String,
+    default: '#888',
+  },
+});
+
+const num = computed(() => {
+  return {
+    l: 2 * Math.PI * 45,
+    p: (2 * Math.PI * 45 * (100 - props.percent)) / 100,
+  };
+});
+</script>
+
+<style scoped></style>

package/src/components/imgeList.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="img_wrap" :class="list.length > 1 ? 'grid_2' : 'grid_1'">
+    <img
+      v-for="info in list"
+      :key="info.file_id"
+      class="img"
+      width="100%"
+      :src="info.file_url"
+      :alt="info.name"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="less">
+.img_wrap {
+  display: grid;
+  gap: 10px;
+  justify-content: right;
+  padding: 10px 0;
+  .img {
+  }
+  &.grid_1 {
+    grid-template-columns: 200px;
+  }
+  &.grid_2 {
+    display: grid;
+    grid-template-columns: 100px 100px;
+  }
+}
+</style>

package/src/utils/tools.js

@@ -0,0 +1,20 @@
+export const useDeviceDetect = () => {
+  const device = {
+    isMobile: false,
+    isIOS: false,
+    isAndroid: false,
+    isPC: false,
+  };
+  const ua = navigator.userAgent;
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  const iosRegex = /iPhone|iPad|iPod/i;
+  // 移动端检测
+  device.isMobile = mobileRegex.test(ua);
+  // iOS检测
+  device.isIOS = iosRegex.test(ua) && !ua.match(/CriOS/);
+  // Android检测
+  device.isAndroid = /Android/i.test(ua);
+  device.isPC = !device.isMobile;
+  return device;
+};