ebiz-base-ai/src/views/AI/components/treasureBox.vue

<template>
  <div class="treasure-box">
    <h3>{{ item.text.indexOf('工具箱') !== -1 ? item.text : item.text + '工具箱' }}</h3>
    <van-tabs v-model="active" color="#2E5CA9" title-active-color="#2E5CA9" line-width="20">
      <van-tab title="常用工具">
        <TabBox></TabBox>
      </van-tab>
      <van-tab title="爆款图文">
        <TabBox></TabBox>
      </van-tab>
      <van-tab title="产品知识">
        <TabBox></TabBox>
      </van-tab>
    </van-tabs>
    <!-- 在这里添加百宝箱的具体内容 -->
  </div>
</template>

<script>
import { Tabs, Tab } from 'vant'
import TabBox from '@/views/AI/components/TabBox.vue'
import { productDetail } from '@/api/generatedApi'
export default {
  name: 'TreasureBox',
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    TabBox,
  },
  data() {
    return {
      active: 0,
      // 可以在这里添加百宝箱相关的数据
    }
  },
  watch: {
    'item.text': {
      handler(newValue, oldValue) {
        console.log(this.item)
        this.getTreasureBox()
      },
      immediate: true,
    },
  },
  methods: {
    // 可以在这里添加百宝箱相关的功能方法
    async getTreasureBox() {
      productDetail({ query: this.item.text }).then((res) => {
        console.log(res)
      })
    },
  },
}
</script>

<style scoped lang="scss">
// 主题颜色定义
$primary-color: #2e5ca9;
$primary-text-color: #f6aa21;
$primary-trans-color: #87a2d0;

.treasure-box {
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  h3 {
    color: $primary-color;
    font-size: 18px;
    //margin-bottom: 10px;
  }

  p {
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
  }
}
</style>