Situation-Awareness-Platform-Frontend/src/views/Jyh/AI/Home/GuessYouWantToAsk.vue

<template>
  <div class="guess-you-want-to-ask-card">
    <div class="card-title">
      <img src="@/assets/imgs/jyh/ai/icon_cnxw.png" style="width: 20px;height: 20px;margin-right: 8px"></img>
      <span>猜你想问</span>
      <d-button @click="changeQuestions" class="jyh-button1" variant="solid">
        <div class="flex flex-center">
          <img style="height: 15px;margin-right: 8px" width="16"  src="@/assets/imgs/jyh/ai/icon_reflush.png"  />
          <span>换一批</span>
        </div>
      </d-button>
    </div>
    <div class="card-description">
      <button v-for="(question, index) in questions" :key="index" class="question-button" @click="emits('submit',question)">
        {{ question }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';
import axios from 'axios';

const emits = defineEmits(['submit']);

// 假设的图标 URL，你可以根据实际情况修改
const iconUrl = 'https://example.com/icon.png';

// 初始化问题列表
const questions = ref([
  // '获取代码行数超过100万行的前10款软件',
  // '查找v0.15.5版本的livebook软件详情',
  // '获取5个安全评分低于30的高风险软件',
  // '查询下载量前10的恶意包',
  // '查询金融行业软件的高危漏洞修复方案',
  // '统计不同业务领域的平均安全评分',
  // '危险和严重的个人预警通知',
  // '我的订阅列表'
]);

// 换一批问题的函数
const changeQuestions = () => {
  fetchFollowupQuestions()
};

onMounted(() => {
  fetchFollowupQuestions()
})

const VITE_AI_API_HOST = import.meta.env.VITE_AI_API_HOST;
// 猜你想问接口
const fetchFollowupQuestions = async (question,df_id,sql_id='') => {
  debugger
  try {
    // 构造请求参数（需根据实际文档补充 df_id 和 sql_id，示例中使用空字符串占位）
    const params = {
      questions: questions.value,
      // df_id: df_id || '', // 使用当前会话ID，若无则为空
      // sql_id: sql_id || '' // 同上
    };
    const response = await axios.post(
      `${VITE_AI_API_HOST}/api/v0/update_recommend_questions`,
      params
    );
    debugger
    const createRes = response.data;
    if (createRes&&createRes.questions) {
      questions.value = createRes.questions
    } else {
      // Message.error('创建会话失败，未获取到会话ID');
    }
  } catch (error) {
    console.error('查询相关问题失败:', error);
    // Message.error('创建会话失败，请重试');
  }
};
</script>

<style scoped lang="scss">
.guess-you-want-to-ask-card {
  border-radius: 24px;
  background: #FFFFFF;
  padding: 18px 24px;
}


.card-title {
  display: flex;
  align-items: center;
  color: #191919;
  font-family: HarmonyOS Sans SC;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
}

.card-title i {
  margin-right: 8px;
}

.title-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.card-description {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.question-button {
  border: none;
  border-radius: 35px;
  background: #F3F3F3;
  padding: 6px 12px;
  cursor: pointer;
}

.question-button:hover {
  background-color: #e0e0e0;
}

.jyh-button1 {
  margin-left: auto;
}
</style>