ai-chat-bot-interface 1.5.9 → 1.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.5.9",
+  "version": "1.6.1",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",
@@ -19,6 +19,7 @@
   "dependencies": {
     "markdown-it": "^14.1.0",
     "v-viewer": "^3.0.21",
+    "vant": "^4.9.21",
     "vue": "^3.5.13"
   },
   "devDependencies": {

package/src/App.vue

@@ -5,8 +5,8 @@ import ChatUi from './ChatUi.vue';
 <template>
   <div style="width: 100vw; height: 100vh">
     <chat-ui
-      bot-id="7485656400967516197"
-      token="pat_gYSCaegGxJ7qZXl4fBkCc4KYhV1t7YPQ5PVwggWdZnFmSKtgSHs8SoebV4epdQvj"
+      bot-id="7572460298389962778"
+      token="sat_cSmj7ZyuePbkEpOKR7F259YuIfp2fjX9rJ3Om2O0gB9JzrGjAk8pSL269rbu8kzr"
       uid="262598"
       :def-msg="{ placeholder: '发消息...' }"
       :show-header="true"

package/src/ChatUi.vue

@@ -4,11 +4,11 @@
       <div v-if="showHeader" class="cui_header">
         <div class="title" @click.stop="queryHistoryList">
           <div class="back" @click.stop="handleBack">
-            <back-icon/>
+            <back-icon />
           </div>
           <div class="name_box">
             <div class="name">{{ name }}</div>
-            <div v-if="nameSub" class="name_sub">{{ nameSub}}</div>
+            <div v-if="nameSub" class="name_sub">{{ nameSub }}</div>
           </div>
         </div>
         <div class="btn_group">
@@ -18,26 +18,26 @@
           </button>
           <template v-show="false">
             <button class="btn">
-              <clear-icon/>
+              <clear-icon />
             </button>
             <button class="btn">
-              <close-icon/>
+              <close-icon />
             </button>
           </template>
         </div>
       </div>
       <div class="cui_content">
         <div
-            v-if="botInfo && botInfo.onboarding_info"
-            style="text-align: left; margin-top: 50px"
+          v-if="botInfo && botInfo.onboarding_info"
+          style="text-align: left; margin-top: 50px"
         >
           <div style="text-align: center">
             <img
-                :src="botInfo.icon_url"
-                alt="icon"
-                width="64"
-                height="64"
-                style="border-radius: 15px"
+              :src="botInfo.icon_url"
+              alt="icon"
+              width="64"
+              height="64"
+              style="border-radius: 15px"
             />
             <p class="board_name">{{ botInfo.name }}</p>
           </div>
@@ -45,11 +45,11 @@
           <div class="board_desc">{{ botInfo.onboarding_info.prologue }}</div>
           <div class="flexcss">
             <span
-                v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
-                :key="idx"
-                class="board_sug"
-                @click.stop="chatConv([{ content: item, text: item }])"
-            >{{ item }}</span
+              v-for="(item, idx) in botInfo.onboarding_info.suggested_questions"
+              :key="idx"
+              class="board_sug"
+              @click.stop="chatConv([{ content: item, text: item }])"
+              >{{ item }}</span
             >
           </div>
         </div>
@@ -57,7 +57,7 @@
           <div v-if="conv.role === 'assistant'" class="replay role_sys">
             <div class="replay_content">
               <div class="name">
-                <img class="avatar" :src="logo" alt="avatar"/>
+                <img class="avatar" :src="logo" alt="avatar" />
                 {{ name }}
                 <!--<span class="time">12:30</span>-->
               </div>
@@ -77,8 +77,14 @@
                   </p>
                 </template>
                 <template v-if="conv.content">
-                  <assistant-replay v-if="contentTye === 'text'" :content="conv.content" />
-                  <markdown-viewer v-else-if="contentTye ==='markdown'" :content="conv.content" />
+                  <assistant-replay
+                    v-if="contentTye === 'text'"
+                    :content="conv.content"
+                  />
+                  <markdown-viewer
+                    v-else-if="contentTye === 'markdown'"
+                    :content="conv.content"
+                  />
                   <template v-if="!isAnswering">
                     <div v-if="conv.extra.length">
                       <template v-for="(comp, idx) in conv.extra" :key="idx">
@@ -90,7 +96,9 @@
                           {{ comp.planParse }}
                         </p>-->
                         <dishes-list
-                          v-if="finalCardList.dishes && comp.showType === 'card'"
+                          v-if="
+                            finalCardList.dishes && comp.showType === 'card'
+                          "
                           :sku-list="comp.skuList"
                           :is-mini="!showHeader"
                           :def-msg="finalDefMsg"
@@ -104,21 +112,34 @@
                           @select="handleCardTap({ type: 'match' }, comp)"
                         />
                         <store-list
-                          v-if="finalCardList.store && comp.showType === 'store'"
+                          v-if="
+                            finalCardList.store && comp.showType === 'store'
+                          "
                           :list="comp.storeList"
                           @select="handleStoreSel"
                         />
+                        <personal-form
+                          v-if="
+                            finalCardList.personalForm &&
+                            comp.showType === 'personalForm'
+                          "
+                          @submit="chatConv"
+                        />
                       </template>
                     </div>
                     <div v-else-if="handleTextNeedBtn(conv.content)">
                       <div
                         class="cui_btn cui_btn_2"
                         @click.stop="handleCardTap({ type: 'match' }, {})"
-                      >{{finalDefMsg.useSolution}}</div>
+                      >
+                        {{ finalDefMsg.useSolution }}
+                      </div>
                     </div>
                   </template>
                 </template>
-                <loading-icon2 v-if="isAnswering"/>
+                <loading-icon2
+                  v-if="isAnswering && index === historyList.length - 1"
+                />
               </div>
             </div>
           </div>
@@ -127,18 +148,18 @@
               <div class="name">
                 User_{{ uid }}
                 <!--<span class="time">12:30</span>-->
-                <img class="avatar" :src="avatar" alt="avatar"/>
+                <img class="avatar" :src="avatar" alt="avatar" />
               </div>
               <div class="box">
                 <p class="text" v-html="conv.content" />
                 <div v-if="conv.extra.length">
-                  <imge-list :list="conv.extra"/>
+                  <imge-list :list="conv.extra" />
                 </div>
               </div>
             </div>
           </div>
         </template>
-        <div ref="endTarget" style="height: 100px"/>
+        <div ref="endTarget" style="height: 100px" />
       </div>
       <operate-module
         v-model="inputText"
@@ -156,12 +177,12 @@
 </template>
 
 <script setup>
-import {computed, nextTick, onMounted, ref} from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import ClearIcon from './components/icons/ClearIcon.vue';
 import CloseIcon from './components/icons/CloseIcon.vue';
 import NewSessionIcon from './components/icons/NewSessionIcon.vue';
 import SendIcon from './components/icons/SendIcon.vue';
-import {get, post} from './utils/request';
+import { get, post } from './utils/request';
 import DishesCard from './components/DishesCard.vue';
 import DishesList from './components/DishesList.vue';
 import PlanCard from './components/PlanCard.vue';
@@ -175,8 +196,8 @@ import ThinkingIcon from './components/icons/ThinkingIcon.vue';
 import OkIcon from './components/icons/OkIcon.vue';
 import AssistantReplay from './components/assistantReplay/assistantReplay.vue';
 import StoreList from './components/StoreList/StoreList.vue';
-import MarkdownViewer from "./components/MarkdownPlan/MarkdownViewer.vue";
-
+import MarkdownViewer from './components/MarkdownPlan/MarkdownViewer.vue';
+import PersonalForm from './components/personalForm/personalForm.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -190,6 +211,7 @@ const conversationId = ref('');
 const isAnswering = ref(false);
 const isReq = ref('00');
 const historyList = ref([]);
+const isFirst = ref(false);
 
 const msgObj = {
   placeholder: '發消息⋯',
@@ -205,13 +227,14 @@ const msgObj = {
   thinking: '思考中...',
   thinkCompleted: '思考完成',
   useSolution: '用該方案配餐',
-  aiTips: '【内容由AI生成，仅供参考】'
+  aiTips: '【内容由AI生成，仅供参考】',
 };
 const defCardList = {
   store: true,
   dishes: true,
   plan: true,
-}
+  personalForm: false,
+};
 
 const props = defineProps({
   logo: {
@@ -254,9 +277,9 @@ const props = defineProps({
   tagList: {
     type: Array,
     default: () => [
-      {name: '人工客服', value: 'kefu', type: 'chat', msg: '人工客服'},
-      {name: '查看菜单', value: 'menu', type: 'call', msg: '查看菜单'},
-      {name: '体检报告', value: 'exam', type: 'upload', msg: '体检报告'},
+      { name: '人工客服', value: 'kefu', type: 'chat', msg: '人工客服' },
+      { name: '查看菜单', value: 'menu', type: 'call', msg: '查看菜单' },
+      { name: '体检报告', value: 'exam', type: 'upload', msg: '体检报告' },
     ],
   },
   defMsg: {
@@ -265,7 +288,7 @@ const props = defineProps({
   },
   contentTye: {
     type: String,
-    default: 'text'
+    default: 'text',
   },
   cardList: {
     type: Object,
@@ -273,12 +296,12 @@ const props = defineProps({
       store: true,
       dishes: true,
       plan: true,
-    })
+    }),
   },
   storage: {
     type: String,
-    default: 'sessionStorage'
-  }
+    default: 'sessionStorage',
+  },
 });
 
 const Emits = defineEmits(['call']);
@@ -292,9 +315,9 @@ const finalDefMsg = computed(() => {
 const finalCardList = computed(() => {
   return {
     ...defCardList,
-    ...props.cardList
-  }
-})
+    ...props.cardList,
+  };
+});
 
 const endTarget = ref(null);
 const inputText = ref('');
@@ -303,22 +326,22 @@ const botInfo = ref({});
 const storage = {
   setItem: (key, value) => {
     props.storage === 'sessionStorage'
-        ? sessionStorage.setItem(key, value)
-        : localStorage.setItem(key, value);
+      ? sessionStorage.setItem(key, value)
+      : localStorage.setItem(key, value);
   },
   getItem: (key) => {
     return props.storage === 'sessionStorage'
-        ? sessionStorage.getItem(key)
-        : localStorage.getItem(key);
-  }
-}
-
+      ? sessionStorage.getItem(key)
+      : localStorage.getItem(key);
+  },
+};
 
 onMounted(async () => {
   if (storage.getItem('conversationId')) {
     conversationId.value = storage.getItem('conversationId');
     await queryBotInfo();
     await queryHistoryList();
+    isFirst.value = false;
   } else {
     await createConv();
   }
@@ -326,10 +349,11 @@ onMounted(async () => {
 });
 
 const createConv = async () => {
+  isFirst.value = true;
   const res = await post(
-      'https://api.coze.cn/v1/conversation/create',
-      {bot_id: props.botId, connector_id: '999'},
-      {...chatOptions.value},
+    'https://api.coze.cn/v1/conversation/create',
+    { bot_id: props.botId, connector_id: '999' },
+    { ...chatOptions.value },
   );
   console.log(res);
   if (res.code === 0 && res.data) {
@@ -405,10 +429,10 @@ const chatConv = async (data) => {
         // botId = '7474884145253023795';
         additional_messages.push({
           content: JSON.stringify(
-              item.content.map((con) => ({
-                type: con.type,
-                file_id: con.file_id,
-              })),
+            item.content.map((con) => ({
+              type: con.type,
+              file_id: con.file_id,
+            })),
           ),
           content_type: 'object_string',
           role: 'user',
@@ -434,21 +458,21 @@ const chatConv = async (data) => {
     }
   });
   historyList.value.push(uObj);
-  isReq.value = '02'
+  isReq.value = '02';
   const res = await fetch(
-      `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
-      {
-        method: 'POST',
-        headers: {
-          ...chatOptions.value.headers,
-          // 'Content-Type': 'text/event-stream',
-        },
-        body: JSON.stringify({
-          bot_id: botId,
-          user_id: props.uid,
-          stream: true,
-          connector_id: '999',
-          additional_messages /*[
+    `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
+    {
+      method: 'POST',
+      headers: {
+        ...chatOptions.value.headers,
+        // 'Content-Type': 'text/event-stream',
+      },
+      body: JSON.stringify({
+        bot_id: botId,
+        user_id: props.uid,
+        stream: true,
+        connector_id: '999',
+        additional_messages /*[
           {
             content: '[{"type":"image","file_id":"7475569020654436390"}]',
             content_type: 'object_string',
@@ -460,14 +484,14 @@ const chatConv = async (data) => {
             content: isInCode ? data.code : inText, // '配餐1600kcal，身高173，体重60kg，生成一天的套餐',
           },
         ]*/,
-          custom_variables: {
-            uid: props.uid,
-          },
-        }),
-        credentials: 'same-origin', // 默认同源策略
-        mode: 'cors', // 默认跨域模式
-        cache: 'default', // 默认缓存策略
-      },
+        custom_variables: {
+          uid: props.uid,
+        },
+      }),
+      credentials: 'same-origin', // 默认同源策略
+      mode: 'cors', // 默认跨域模式
+      cache: 'default', // 默认缓存策略
+    },
   );
   isReq.value = '03';
   historyList.value.push({
@@ -485,20 +509,30 @@ const chatConv = async (data) => {
   const reader = res.body.getReader();
   const decoder = new TextDecoder('utf-8');
   let buffer = '';
+
+  const handlePersonalForm = () => {
+    console.log('======= End ======', historyList.value);
+    if (isFirst.value) {
+      historyList.value[idx].extra.push({ showType: 'personalForm' });
+      isFirst.value = false;
+    }
+  };
+
   // 逐块读取数据
   while (true) {
-    const {done, value} = await reader.read();
+    const { done, value } = await reader.read();
     if (done) {
       console.log('Stream has ended.');
       isAnswering.value = false;
       isReq.value = '00';
       historyList.value[idx].status = 'ended';
+      handlePersonalForm();
       scrollToEnd();
       break;
     }
 
     // 解码数据块
-    const chunk = decoder.decode(value, {stream: true});
+    const chunk = decoder.decode(value, { stream: true });
     buffer += chunk;
 
     // 处理数据块
@@ -536,20 +570,20 @@ const chatConv = async (data) => {
         ) {
           historyList.value[idx].status = 'answering';
           historyList.value[idx].content = handleText(
-              historyList.value[idx].content + strObj.content,
+            historyList.value[idx].content + strObj.content,
           );
           scrollToEnd();
         } else if (
-            strObj.hasOwnProperty('type') &&
-            strObj.type === 'tool_response'
+          strObj.hasOwnProperty('type') &&
+          strObj.type === 'tool_response'
         ) {
           const extraObj = JSON.parse(strObj.content);
           if (extraObj.hasOwnProperty('showType')) {
-            historyList.value[idx].extra.push({...extraObj});
+            historyList.value[idx].extra.push({ ...extraObj });
           } else if (extraObj.hasOwnProperty('response_for_model')) {
             const modelObj = JSON.parse(extraObj.response_for_model);
             if (modelObj.hasOwnProperty('showType')) {
-              historyList.value[idx].extra.push({...modelObj});
+              historyList.value[idx].extra.push({ ...modelObj });
             }
           }
           scrollToEnd();
@@ -562,9 +596,9 @@ const chatConv = async (data) => {
 
 const queryHistoryList = async () => {
   const res = await post(
-      `https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversationId.value}`,
-      {order: 'asc'},
-      {...chatOptions.value},
+    `https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversationId.value}`,
+    { order: 'asc' },
+    { ...chatOptions.value },
   );
   if (res.code === 0 && res.data && res.data.length) {
     historyList.value = [];
@@ -593,7 +627,7 @@ const queryHistoryList = async () => {
                 conversation_id: row.conversation_id,
                 bot_id: row.bot_id,
                 role: row.role,
-                extra: [{...cardObj}],
+                extra: [{ ...cardObj }],
               });
             } else if (cardObj.hasOwnProperty('response_for_model')) {
               const modelObj = JSON.parse(cardObj.response_for_model);
@@ -603,7 +637,7 @@ const queryHistoryList = async () => {
                   conversation_id: row.conversation_id,
                   bot_id: row.bot_id,
                   role: row.role,
-                  extra: [{...modelObj}],
+                  extra: [{ ...modelObj }],
                 });
               }
             }
@@ -611,8 +645,8 @@ const queryHistoryList = async () => {
             console.log('== 解析错误 sys==');
           }
         } else if (
-            row.content_type === 'object_string' &&
-            row.role === 'user'
+          row.content_type === 'object_string' &&
+          row.role === 'user'
         ) {
           try {
             const strObj = JSON.parse(row.content);
@@ -622,7 +656,7 @@ const queryHistoryList = async () => {
               bot_id: row.bot_id,
               role: row.role,
               meta_data: row.meta_data,
-              extra: strObj.map((item) => ({...item, showType: item.type})),
+              extra: strObj.map((item) => ({ ...item, showType: item.type })),
             });
           } catch (e) {
             console.log('== 解析错误 user==');
@@ -632,15 +666,15 @@ const queryHistoryList = async () => {
     });
     cardList.forEach((card) => {
       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,
-              );
+        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];
       }
@@ -652,12 +686,12 @@ const queryHistoryList = async () => {
 
 const queryBotInfo = async () => {
   const res = await get(
-      `https://api.coze.cn/v1/bot/get_online_info?bot_id=${props.botId}`,
-      {...chatOptions.value},
+    `https://api.coze.cn/v1/bot/get_online_info?bot_id=${props.botId}`,
+    { ...chatOptions.value },
   );
   console.log(res);
   if (res.code === 0 && res.data) {
-    botInfo.value = {...res.data};
+    botInfo.value = { ...res.data };
   }
 };
 
@@ -672,7 +706,7 @@ const handleText = (str) => {
   // );
 };
 const handleBack = () => {
-  Emits('call', {type: 'back'});
+  Emits('call', { type: 'back' });
 };
 const handleStoreSel = (info) => {
   chatConv([{ content: info.content, text: info.text }]);
@@ -681,18 +715,18 @@ const handleTagSel = (info) => {
   console.log(info);
   switch (info.type) {
     case 'chat':
-      chatConv([{content: info.msg, text: info.msg}]);
+      chatConv([{ content: info.msg, text: info.msg }]);
       break;
     case 'call':
-      Emits('call', {...info});
+      Emits('call', { ...info });
       break;
   }
 };
 
-const handleCardTap = ({type}, info) => {
+const handleCardTap = ({ type }, info) => {
   switch (type) {
     case 'change':
-      chatConv([{content: '換一套菜品', text: '換一套菜品'}]);
+      chatConv([{ content: '換一套菜品', text: '換一套菜品' }]);
       break;
     case 'match':
       chatConv([
@@ -703,7 +737,7 @@ const handleCardTap = ({type}, info) => {
       ]);
       break;
     default:
-      Emits('call', {type, info});
+      Emits('call', { type, info });
   }
 };
 const handleCall = (data) => {
@@ -721,8 +755,8 @@ const handleCall = (data) => {
 const handlePlanParse = (list) => {
   const pIdx = list.findIndex((p) => p.showType === 'plan');
   return pIdx > -1
-      ? {show: true, text: list[pIdx].planParse}
-      : {show: false};
+    ? { show: true, text: list[pIdx].planParse }
+    : { show: false };
 };
 
 const scrollToEnd = () => {
@@ -731,8 +765,6 @@ const scrollToEnd = () => {
   });
 };
 
-
-
 const handleTextNeedBtn = (str) => {
   const regExp = /#全日總熱量：(\d*?)kcal/g;
   return regExp.test(str);

package/src/components/icons/ArrowDown.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 44 44"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g transform="translate(44, 0) rotate(90)">
+        <polyline
+          stroke="currentColor"
+          stroke-width="4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          points="16 10 28 22 16 34"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/src/components/icons/ArrowRight.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.3193 16.5L14.8193 12L10.3193 7.5"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

package/src/components/personalForm/personalForm.vue

@@ -0,0 +1,508 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import ArrowRight from '../components/icons/ArrowRight.vue';
+import Popup from '../components/popup/popup.vue';
+import { showToast } from 'vant';
+
+const showPopup = ref(false);
+
+const dialogInfo = ref({
+  key: 'sex',
+  sex: '',
+  age: '',
+  height: '',
+  weight: '',
+  sport: '',
+  taste: [],
+  taboo: [],
+  title: '标题',
+  unit: '',
+  dialogHeight: '50vh',
+});
+
+const tasteList = [
+  '不吃辣',
+  '不吃葱',
+  '不吃姜',
+  '不吃蒜',
+  '不吃糖',
+  '不吃鱼',
+  '不吃虾',
+  '不吃牛肉',
+  '不吃鸡肉',
+  '不吃猪肉',
+];
+const tabooList = ['高GI', '高饱和脂肪酸', '高嘌呤', '高盐', '高胆固醇'];
+
+const pfForm = ref([
+  { key: 'sex', label: '性别', value: '', placeholder: '请输选择' },
+  {
+    key: 'age',
+    label: '年龄',
+    value: '',
+    placeholder: '请输入年龄',
+    unit: '岁',
+  },
+  {
+    key: 'height',
+    label: '身高',
+    value: '',
+    placeholder: '请输入身高',
+    unit: 'cm',
+  },
+  {
+    key: 'weight',
+    label: '体重',
+    value: '',
+    placeholder: '请输入体重',
+    unit: 'kg',
+  },
+  { key: 'sport', label: '日常运动水平', value: '', placeholder: '请输入' },
+  {
+    key: 'taste',
+    label: '口味偏好及饮食禁忌',
+    value: '',
+    taste: [],
+    taboo: [],
+    placeholder: '请输入',
+  },
+]);
+
+const Emits = defineEmits(['submit']);
+
+onMounted(() => {
+  const form = localStorage.getItem('personalInfo');
+  if (form) {
+    pfForm.value = JSON.parse(form);
+  }
+});
+
+const isValid = computed(() => {
+  return pfForm.value
+    .filter((item) => item.key !== 'taste')
+    .every((item) => item.value !== '');
+});
+
+const handleSelect = (item) => {
+  dialogInfo.value.key = item.key;
+
+  switch (item.key) {
+    case 'sex':
+      dialogInfo.value.title = '选择性别';
+      dialogInfo.value.dialogHeight = '300px';
+      dialogInfo.value.sex = item.value;
+      break;
+    case 'age':
+      dialogInfo.value.title = '设置年龄';
+      dialogInfo.value.dialogHeight = '240px';
+      dialogInfo.value.unit = item.unit;
+      dialogInfo.value.age = item.value;
+      break;
+    case 'height':
+      dialogInfo.value.title = '设置身高';
+      dialogInfo.value.dialogHeight = '240px';
+      dialogInfo.value.unit = item.unit;
+      dialogInfo.value.height = item.value;
+      break;
+    case 'weight':
+      dialogInfo.value.title = '设置体重';
+      dialogInfo.value.dialogHeight = '240px';
+      dialogInfo.value.unit = item.unit;
+      dialogInfo.value.weight = item.value;
+      break;
+    case 'sport':
+      dialogInfo.value.title = '日常运动水平';
+      dialogInfo.value.dialogHeight = '360px';
+      dialogInfo.value.unit = '';
+      dialogInfo.value.sport = item.value;
+      break;
+    case 'taste':
+      dialogInfo.value.title = '口味偏好&饮食禁忌';
+      dialogInfo.value.dialogHeight = '500px';
+      dialogInfo.value.unit = '';
+      dialogInfo.value.taste = [...item.taste];
+      dialogInfo.value.taboo = [...item.taboo];
+      break;
+  }
+  console.log(dialogInfo.value, item);
+  showPopup.value = true;
+};
+
+const handleConfirm = () => {
+  switch (dialogInfo.value.key) {
+    case 'sex':
+      if (!dialogInfo.value.sex) {
+        showToast('请选择性别');
+        return;
+      }
+      pfForm.value.find((item) => item.key === 'sex').value =
+        dialogInfo.value.sex;
+      break;
+    case 'age':
+      if (!dialogInfo.value.age) {
+        showToast('请输入年龄');
+        return;
+      }
+      pfForm.value.find((item) => item.key === 'age').value =
+        dialogInfo.value.age;
+      break;
+    case 'height':
+      if (!dialogInfo.value.height) {
+        showToast('请输入身高');
+        return;
+      }
+      pfForm.value.find((item) => item.key === 'height').value =
+        dialogInfo.value.height;
+      break;
+    case 'weight':
+      if (!dialogInfo.value.weight) {
+        showToast('请输入体重');
+        return;
+      }
+      pfForm.value.find((item) => item.key === 'weight').value =
+        dialogInfo.value.weight;
+      break;
+    case 'sport':
+      if (!dialogInfo.value.sport) {
+        showToast('请选择日常运动水平');
+        return;
+      }
+      pfForm.value.find((item) => item.key === 'sport').value =
+        dialogInfo.value.sport;
+      break;
+    case 'taste':
+      pfForm.value.find((item) => item.key === 'taste').taste =
+        dialogInfo.value.taste;
+      pfForm.value.find((item) => item.key === 'taste').taboo =
+        dialogInfo.value.taboo;
+      pfForm.value.find((item) => item.key === 'taste').value = [
+        ...dialogInfo.value.taste,
+        ...dialogInfo.value.taboo,
+      ].join('、');
+      break;
+  }
+
+  showPopup.value = false;
+};
+
+const handleSubmit = () => {
+  if (!isValid.value) {
+    showToast('请填写完整信息');
+    return;
+  }
+  localStorage.setItem('personalInfo', JSON.stringify(pfForm.value));
+  const msg = `
+        性别：${pfForm.value.find((item) => item.key === 'sex').value}；
+        年龄：${pfForm.value.find((item) => item.key === 'age').value}${
+    pfForm.value.find((item) => item.key === 'age').unit || ''
+  }；
+        身高：${pfForm.value.find((item) => item.key === 'height').value}${
+    pfForm.value.find((item) => item.key === 'height').unit || ''
+  }；
+        体重：${pfForm.value.find((item) => item.key === 'weight').value}${
+    pfForm.value.find((item) => item.key === 'weight').unit || ''
+  }；
+        日常运动水平：${
+          pfForm.value.find((item) => item.key === 'sport').value
+        }；
+        口味偏好及饮食禁忌：${
+          pfForm.value.find((item) => item.key === 'taste').value
+            ? pfForm.value.find((item) => item.key === 'taste').value
+            : '没有饮食禁忌'
+        }；
+  `;
+  console.log(msg);
+  Emits('submit', [{ content: msg, text: msg }]);
+};
+
+const selectTag = (item, type) => {
+  if (dialogInfo.value[type].includes(item)) {
+    dialogInfo.value[type] = dialogInfo.value[type].filter((i) => i !== item);
+  } else {
+    dialogInfo.value[type].push(item);
+  }
+};
+</script>
+
+<template>
+  <div class="pf_wrap">
+    <div class="pf_form">
+      <div v-for="item in pfForm" :key="item.key" class="pf_row">
+        <div class="title">{{ item.label }}</div>
+        <div class="content" @click="handleSelect(item)">
+          <span
+            class="text_row"
+            :style="{ color: item.value ? '#000' : '#75759d' }"
+            >{{
+              item.value ? `${item.value} ${item.unit || ''}` : item.placeholder
+            }}</span
+          >
+          <arrow-right class="arrow" />
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf_btn"
+      :class="{ disabled: !isValid }"
+      @click.stop="handleSubmit"
+    >
+      确定
+    </div>
+  </div>
+
+  <popup
+    v-model:show="showPopup"
+    :title="dialogInfo.title"
+    :height="dialogInfo.dialogHeight"
+    @confirm="handleConfirm"
+  >
+    <template #default>
+      <div v-if="dialogInfo.key === 'sex'" class="sex_wrap">
+        <div
+          :class="{ sex: true, selected: dialogInfo.sex === '男' }"
+          @click="dialogInfo.sex = '男'"
+        >
+          男
+        </div>
+        <div
+          :class="{ sex: true, selected: dialogInfo.sex === '女' }"
+          @click="dialogInfo.sex = '女'"
+        >
+          女
+        </div>
+      </div>
+      <div
+        v-if="['age', 'height', 'weight'].includes(dialogInfo.key)"
+        class="input_wrap"
+      >
+        <input
+          v-model="dialogInfo[dialogInfo.key]"
+          class="input"
+          type="text"
+          placeholder="请输入"
+        />
+        <div class="unit">{{ dialogInfo.unit }}</div>
+      </div>
+      <div v-if="dialogInfo.key === 'sport'" class="sport_wrap">
+        <div
+          :class="{ row: true, selected: dialogInfo.sport === '久坐' }"
+          @click.stop="dialogInfo.sport = '久坐'"
+        >
+          <div class="name">久坐</div>
+        </div>
+        <div
+          :class="{ row: true, selected: dialogInfo.sport === '轻体力' }"
+          @click.stop="dialogInfo.sport = '轻体力'"
+        >
+          <div class="name">轻体力</div>
+        </div>
+        <div
+          :class="{ row: true, selected: dialogInfo.sport === '中体力' }"
+          @click.stop="dialogInfo.sport = '中体力'"
+        >
+          <div class="name">中体力</div>
+        </div>
+      </div>
+      <div v-if="dialogInfo.key === 'taste'" class="taste_wrap">
+        <div class="title">口味偏好</div>
+        <div class="box">
+          <div
+            :class="{ tag: true, selected: dialogInfo.taste.includes(item) }"
+            v-for="item in tasteList"
+            :key="item"
+            @click.stop="selectTag(item, 'taste')"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="title">饮食禁忌</div>
+        <div class="box">
+          <div
+            :class="{ tag: true, selected: dialogInfo.taboo.includes(item) }"
+            v-for="item in tabooList"
+            :key="item"
+            @click.stop="selectTag(item, 'taboo')"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </popup>
+</template>
+
+<style scoped lang="less">
+.pf {
+  &_wrap {
+    width: 100%;
+  }
+
+  &_form {
+    padding: 0 15px;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  &_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #dadada;
+    height: 54px;
+    line-height: 54px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .arrow {
+      color: #000;
+      font-size: 22px;
+    }
+    .text_row {
+      display: inline-block;
+      font-size: 14px;
+      text-align: right;
+      width: 160px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .input {
+      font-size: 14px;
+      text-align: right;
+      outline: none;
+      border: none;
+    }
+  }
+
+  &_btn {
+    cursor: pointer;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 20px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #000;
+    background: #00dc4e;
+    margin-top: 15px;
+
+    &.disabled {
+      color: #fff;
+      background: #d9d9d9;
+    }
+  }
+}
+.sex {
+  &_wrap {
+    padding: 50px 0;
+    .sex {
+      transition: 100ms ease-in-out;
+      font-size: 15px;
+      font-weight: 400;
+      text-align: center;
+      height: 58px;
+      line-height: 58px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      &.selected {
+        font-size: 20px;
+        font-weight: 600;
+        color: #039938;
+        border-color: #d9d9d9;
+      }
+    }
+  }
+}
+.input {
+  &_wrap {
+    text-align: center;
+    padding: 20px 0;
+    .input {
+      height: 50px;
+      line-height: 50px;
+      font-size: 36px;
+      text-align: center;
+      width: 200px;
+      outline: none;
+      border: none;
+    }
+    .unit {
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+.sport {
+  &_wrap {
+    padding: 20px 0;
+
+    .row {
+      transition: 100ms ease-in-out;
+      font-size: 15px;
+      font-weight: 400;
+      text-align: center;
+      height: 58px;
+      line-height: 58px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+
+      &.selected {
+        font-size: 20px;
+        font-weight: 600;
+        color: #039938;
+        border-color: #d9d9d9;
+      }
+    }
+  }
+}
+.taste {
+  &_wrap {
+    padding: 20px;
+    .title {
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+    .box {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .line {
+      border-top: 1px solid #e9e9e9;
+      margin: 25px 0;
+    }
+    .tag {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 15px;
+      background-color: #f3f4f5;
+      border-radius: 16px;
+      font-size: 14px;
+      text-align: center;
+      &.selected {
+        color: #fff;
+        background-color: #000;
+      }
+    }
+  }
+}
+</style>

package/src/components/popup/popup.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import ArrowDown from '../components/icons/ArrowDown.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  height: {
+    type: String,
+    default: '50vh',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['update:show', 'confirm', 'close']);
+
+const visibleEle = ref(false);
+const bottomPosi = ref(`-${props.height}`);
+const animationInfo = ref({
+  delay: 300,
+  bottom: `-${props.height}`,
+  opacity: 0,
+});
+const handleAnimation = (type) => {
+  if (type) {
+    animationInfo.value.bottom = '0';
+    animationInfo.value.opacity = 0.5;
+  } else {
+    animationInfo.value.bottom = `-${props.height}`;
+    animationInfo.value.opacity = 0;
+  }
+};
+const handleConfirm = () => {
+  emit('confirm', {});
+};
+
+watch(
+  () => props.show,
+  (newVal, oldValue) => {
+    if (newVal) {
+      bottomPosi.value = `-${props.height}`;
+      visibleEle.value = true;
+      setTimeout(() => {
+        handleAnimation(true);
+      }, 0);
+    } else {
+      handleAnimation(false);
+      setTimeout(() => {
+        visibleEle.value = false;
+      }, 300);
+    }
+  },
+);
+const handleClose = () => {
+  emit('update:show', false);
+  handleAnimation(false);
+  setTimeout(() => {
+    visibleEle.value = false;
+  }, 300);
+};
+</script>
+
+<template>
+  <div
+    v-if="visibleEle"
+    class="pup_mask"
+    :style="{
+      backgroundColor: `rgba(0, 0, 0, ${animationInfo.opacity})`,
+    }"
+    @click.stop="handleClose"
+  >
+    <div
+      class="pup_wrap"
+      :style="{ height: height, bottom: animationInfo.bottom }"
+      @click.stop="() => {}"
+    >
+      <div class="pup_header">
+        <div class="left">
+          <div class="icon_down" @click.stop="handleClose">
+            <arrow-down />
+          </div>
+        </div>
+        <div class="title">{{ title }}</div>
+        <div class="right">
+          <div class="btn" @click="handleConfirm">确定</div>
+        </div>
+      </div>
+      <div class="pup_content" :style="{ height: `calc(height - 56px)` }">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@delay: 200ms;
+@headerHeight: 56px;
+.pup {
+  &_mask {
+    transition: background-color @delay ease-in-out;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 899;
+  }
+  &_wrap {
+    transition: bottom @delay ease-in-out;
+    width: 100%;
+    height: 50vh;
+    background: #fff;
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 900;
+  }
+  &_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: @headerHeight;
+    line-height: @headerHeight;
+    background-color: #fff;
+    position: relative;
+
+    .icon_down {
+      padding: 0 16px;
+      font-size: 24px;
+    }
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .left {
+      height: @headerHeight;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 5;
+    }
+    .right {
+      height: @headerHeight;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 5;
+    }
+    .btn {
+      cursor: pointer;
+      padding: 0 16px;
+      height: 32px;
+      line-height: 32px;
+      margin-right: 16px;
+      text-align: center;
+      border-radius: 16px;
+      background-color: #00dc4e;
+    }
+  }
+}
+</style>

package/src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
 import VueViewer from 'v-viewer';
+import 'vant/lib/index.css';
 
 createApp(App)
   .use(VueViewer, {