可信代码库-可信开源代码库AI助手首页开发完成

src/views/Jyh/AI/Home/GuessYouWantToAsk.vue

@@ -0,0 +1,103 @@
+<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">
+        {{ question }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 假设的图标 URL，你可以根据实际情况修改
+const iconUrl = 'https://example.com/icon.png';
+
+// 初始化问题列表
+const questions = ref([
+  '列出热门开源软件',
+  '开源软件',
+  '未通过校验列表',
+  '通过校验列表',
+  '可使用、未治理和有风险的软件有哪些',
+  '危险和严重的个人预警通知',
+  '我的订阅列表'
+]);
+
+// 换一批问题的函数
+const changeQuestions = () => {
+  // 这里可以实现从后端获取新问题列表的逻辑
+  // 示例中简单地更新问题列表
+  questions.value = [
+    '热门数据库软件有哪些',
+    '数据库软件的选型',
+    '代码漏洞检测方法',
+    '性能优化策略'
+  ];
+};
+</script>
+
+<style scoped lang="scss">
+.guess-you-want-to-ask-card {
+  border-radius: 24px;
+  background: #FFFFFF;
+  padding: 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>