feat(AI): 实现产品对比功能并优化页面结构

- 在 sticky 组件中添加 conversationId属性，用于记录对话 ID
- 在 AI 页面中添加导航栏，提升用户体验
- 新增产品对比页面，展示对比结果
-优化对比表格样式，增加返回按钮
- 在客服页面中添加导航栏，与 AI 页面保持一致

src/views/AI/components/sticky.vue

@@ -63,6 +63,10 @@ export default {
       type: String,
       default: '',
     },
+    conversationId: {
+      type: String,
+      default: '',
+    },
   },
   watch: {
     productName: {
@@ -77,6 +81,7 @@ export default {
         if (val) {
           this.options = val.map((item) => {
             return {
+              ...item,
               text: item.productName,
               value: item.productName,
             }
@@ -123,6 +128,18 @@ export default {
         case '2':
           this.$emit('setProductName', '')
           break
+        case '3':
+          let id = this.options.find((item) => item.productName === this.productName).productId
+
+          this.$router.push({
+            path: '/comparison',
+            query: {
+              // productName: this.productName,
+              id: id,
+              conversationId: this.conversationId || null,
+            },
+          })
+          break
       }
 
       this.value2 = ''

src/views/AI/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="chat-page">
+    <van-nav-bar title="智能助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
     <sticky
       :hotList="hotList"
       :productName="productName"
@@ -7,6 +8,7 @@
       :autoScrollEnabled.sync="autoScrollEnabled"
       @setProductName="setProductName"
       :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
     ></sticky>
 
     <main class="chat-main">
@@ -42,7 +44,7 @@
 </template>
 
 <script>
-import { Icon } from 'vant'
+import { Icon, NavBar } from 'vant'
 import messageComponent from './components/message.vue'
 import SvgIcon from '@/components/svg-icon/index.vue'
 import HotProducts from '@/views/AI/components/HotProducts.vue'
@@ -53,6 +55,7 @@ export default {
   components: {
     SvgIcon,
     [Icon.name]: Icon,
+    [NavBar.name]: NavBar,
     messageComponent,
     HotProducts,
     chatMessage,
@@ -65,18 +68,33 @@ export default {
       conversationId: '',
       messageStatus: 'stop',
       isThink: null,
-      messages: [
+      messages: [],
-        {
-          type: 'bot',
-          text: '欢迎使用AI智能助手，请输入问题开始对话或输入关键词 "xxx工具箱","产品对比"。',
-        },
-      ],
       isSearching: false,
       isDeep: false,
       autoScrollEnabled: true,
       scrollPosition: 0,
     }
   },
+  created() {
+    let { compareId, conversationId } = this.$route.query
+    if (conversationId) {
+      this.conversationId = conversationId
+    }
+
+    if (!compareId) {
+      this.messages.push({
+        type: 'bot',
+        text: '欢迎使用AI智能助手，请输入问题开始对话或输入关键词 "xxx工具箱","产品对比"。',
+      })
+    } else {
+      // 可以调用接口展示 名字 或者存在session里
+      this.messages.push({
+        type: 'user',
+        text: compareId,
+      })
+    }
+    this.getHotProducts()
+  },
   methods: {
     getIsThink(e) {
       this.isThink = e

src/views/comparison/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="comparison-container">
-    <div class="main" v-if="!showComparison">
+    <van-nav-bar title="产品对比" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
+    <div class="main">
       <main>
         <div style="height: 100%">
           <van-tabs v-model="active" color="#2E5CA9" title-active-color="#2E5CA9">
@@ -48,14 +49,16 @@
       </div>
     </div>
 
-    <div v-else>
+    <!--    底部弹出-->
+
+    <van-popup v-model="showComparison" title="产品对比" :showConfirmButton="false" position="bottom" style="height: 100vh">
       <comparsion :list="comparisonMap" :showComparison.sync="showComparison"></comparsion>
-    </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Tab, Tabs, Cell, CellGroup, Icon } from 'vant'
+import { Tab, Tabs, Cell, CellGroup, Icon, NavBar, Popup } from 'vant'
 import Comparsion from '@/views/comparison/table.vue'
 import { compare, haslProducts } from '@/api/generatedApi/index'
 
@@ -68,6 +71,8 @@ export default {
     [Cell.name]: Cell,
     [CellGroup.name]: CellGroup,
     [Icon.name]: Icon,
+    [NavBar.name]: NavBar,
+    [Popup.name]: Popup,
   },
   data() {
     return {
@@ -106,6 +111,14 @@ export default {
           }),
         },
       ]
+
+      if (this.$route.query.id) {
+        this.list.map((item) => {
+          let a = item.list.find((it) => it.id == this.$route.query.id)
+          // console.log(a)
+          this.comparisonMap.push(a)
+        })
+      }
     },
 
     cellClick(item) {
@@ -128,6 +141,8 @@ $primary-text-color: #f6aa21;
 $primary-trans-color: #87a2d0;
 .comparison-container {
   height: 100vh;
+  display: flex;
+  flex-direction: column;
   background: #f5f5f9;
   //padding: 10px;
   .main {
@@ -212,6 +227,6 @@ $primary-trans-color: #87a2d0;
   height: 100%;
 }
 ::v-deep .van-tab__pane {
-  height: calc(100vh - 95px);
+  height: calc(100vh - 155px);
 }
 </style>

src/views/comparison/table.vue

@@ -1,21 +1,25 @@
 <template>
   <div style="touch-action: unset" class="comparsion-container">
-    <el-table :data="tableData" style="width: 100%" border :height="getTableHeight()">
+    <el-table :data="tableData" style="width: 100%" border :height="getTableHeight()" class="mb10">
       <!-- 左侧行标题 -->
-      <el-table-column fixed prop="rowTitle" width="100">
+      <el-table-column fixed prop="rowTitle" width="80">
         <template slot="header" slot-scope="scope">
-          <button class="header-button" @click="emits">+ 增加产品</button>
+          <button class="header-button" @click="emits">点此增加</button>
         </template>
       </el-table-column>
 
       <!-- 动态列：根据 list 生成 -->
-      <el-table-column v-for="(item, index) in list" :key="index" :label="item.title" width="200">
+      <el-table-column v-for="(item, index) in list" :key="index" :label="item.title" width="150">
         <template #default="scope">
           <!-- 根据 item.id 映射对应的字段名，比如 b1、b2、b3 等 -->
           {{ formatValue(scope.row[item.id]) }}
         </template>
       </el-table-column>
     </el-table>
+    <div class="flex align-items-c justify-content-b">
+      <van-button class="fs14 fw600" style="background: #fff; color: #000; flex: 1; border-radius: 8px" @click="emits">返回</van-button>
+      <!--      <van-button class="fs14 fw600" style="color: #fff; background: #1989fa; flex: 1; border-radius: 8px" @click="question">提问</van-button>-->
+    </div>
   </div>
 </template>
 <script>
@@ -49,6 +53,15 @@ export default {
     },
   },
   methods: {
+    question() {
+      this.$router.push({
+        path: '/chatPage',
+        query: {
+          compareId: '咨询的id',
+          conversationId: this.$route.query.conversationId || null,
+        },
+      })
+    },
     emits() {
       this.$emit('update:showComparison', false)
     },
@@ -56,6 +69,7 @@ export default {
       let ids = this.list.map((item) => {
         return item.id
       })
+      this.tableData = []
       compare(ids).then((res) => {
         if (res) {
           res.content.fieldNames.map((item) => {
@@ -80,7 +94,7 @@ export default {
       return val || '-'
     },
     getTableHeight() {
-      return window.innerHeight - 20
+      return window.innerHeight - 80
     },
   },
 }
@@ -100,6 +114,7 @@ export default {
   height: calc(100vh - 20px);
   padding: 10px;
 
+  background: #fff;
   overflow: hidden;
 }
 

src/views/customer/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="chat-page">
+    <van-nav-bar title="客服助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
     <main class="chat-main">
       <div class="chat-content">
         <div class="message-area" ref="messageArea" @scroll="handleScroll">
@@ -33,7 +34,7 @@
 </template>
 
 <script>
-import { Icon } from 'vant'
+import { Icon, NavBar } from 'vant'
 import SvgIcon from '@/components/svg-icon/index.vue'
 import HotProducts from '@/views/AI/components/HotProducts.vue'
 import chatMessage from '@/views/AI/components/chat.vue'
@@ -44,6 +45,7 @@ export default {
     SvgIcon,
     messageComponent,
     [Icon.name]: Icon,
+    [NavBar.name]: NavBar,
     HotProducts,
     chatMessage,
   },