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 { ref } from 'vue';

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 = () => {
  // 这里可以实现从后端获取新问题列表的逻辑
  // 示例中简单地更新问题列表
  questions.value = [
    '热门数据库软件有哪些',
    '数据库软件的选型',
    '代码漏洞检测方法',
    '性能优化策略'
  ];
};
</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>