ai-chat-bot-interface 1.6.14 → 1.6.15

package/package.json

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

package/src/components/DishesCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{ dishes_box: true, is_open: isOpen }"
-    :style="{ height: isOpen ? contentHeight + 92 + 'px' : '92px' }"
+    :style="{ height: panelHeight }"
   >
     <div class="dishes_wrap" @click.stop="switchOpen">
       <img
@@ -19,6 +19,9 @@
       </div>
     </div>
     <div v-if="hasDetails" class="dishes_details" ref="contentRef">
+      <div v-show="!isOpen" class="switch_open" @click.stop="switchOpen">
+        <span>查看菜谱详情</span><arrow-right class="icon" />
+      </div>
       <!--      <div class="title">营养数据</div>
       <div class="data_row">
         <div class="data_item">
@@ -99,6 +102,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { api as viewerApi } from 'v-viewer';
 import 'viewerjs/dist/viewer.css';
+import ArrowRight from '@/components/icons/ArrowRight.vue';
 
 const props = defineProps({
   info: {
@@ -147,6 +151,13 @@ const hasDetails = computed(() => {
   }
   return sts;
 });
+const panelHeight = computed(() => {
+  let h = '92px';
+  if (hasDetails.value) {
+    h = isOpen.value ? contentHeight.value + 66 + 'px' : '118px';
+  }
+  return h;
+});
 
 const previewImg = (url) => {
   viewerApi({
@@ -180,6 +191,17 @@ const getImageList = (str) => {
   &_details {
     padding: 1px 10px;
 
+    .switch_open {
+      .flexrec();
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      font-size: 10px;
+      color: #666;
+      .icon {
+        font-size: 18px;
+      }
+    }
     .title {
       font-weight: 600;
       font-size: 15px;
@@ -280,6 +302,8 @@ const getImageList = (str) => {
     background-color: @bg-color;
     border-radius: 10px;
     padding: 10px;
+    box-sizing: border-box;
+    min-height: 92px;
 
     .img {
       cursor: pointer;