可信代码库-可信开源代码库AI助手近期预警公告列表开发

src/views/Jyh/AI/Home/components/OssList.vue

@@ -428,7 +428,7 @@ function handleMore() {
 
 .secret-container {
   position: relative;
-  min-height: 600px;
+  //min-height: 600px;
   background: #ffffff;
   padding: 20px;
   margin-top: 16px;

src/views/Jyh/AI/Home/components/WarningList.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="secret-container">
+    <div class="title">以下是关于近期预警的公告：</div>
+    <div class="mt-3">
+      <d-table
+        :key="tableKey"
+        ref="filterTableRef"
+        class="jyh-table"
+        v-if="tableData.length"
+        :striped="false"
+        :data="tableData"
+      >
+<!--        <d-column type="checkable" width="40" reserve-check align="center"></d-column>-->
+        <!-- 索引列 -->
+        <!-- <d-column type="index" width="40"></d-column> -->
+
+        <!-- 动态渲染列 -->
+        <template v-for="column in columns" :key="column.key">
+          <d-column v-if="column.visible" :field="column.key" :header="column.label"  :width="column.width||120" show-overflow-tooltip>
+            <!-- 自定义列内容 -->
+            <template #default="scope">
+              <template v-if="column.key === 'importance'">
+                <d-tag v-if="scope.row.importance === 'critical' || scope.row.importance === 'Critical'"  color="#c7000b" size="sm">致命</d-tag>
+                <d-tag v-else-if="scope.row.importance === 'high' || scope.row.importance === 'High'"  color="#f66f6a" size="sm">高</d-tag>
+                <d-tag v-else-if="scope.row.importance === 'medium' || scope.row.importance === 'Medium'"  color="#fac20a" size="sm">中</d-tag>
+                <d-tag v-else-if="scope.row.importance === 'low' || scope.row.importance === 'Low'"  color="#5e7ce0" size="sm">低</d-tag>
+              </template>
+              <template v-else>
+                {{ scope.row[column.key] }}
+              </template>
+            </template>
+          </d-column>
+        </template>
+      </d-table>
+
+      <!--      <DataPanel v-else skeleton :card="false" :empty="true">-->
+      <!--      </DataPanel>-->
+      <NoData v-else :small="false"></NoData>
+    </div>
+
+    <d-button v-if="isLogin" class="output-btn" @click="exportResult">导出列表</d-button>
+    <div class="bubble-bottom-operations">
+      <img onclick="handleRefresh()"  src="@/assets/imgs/jyh/ai/icon_generate.png" />
+      <i class="icon-file" title="复制" onclick="handleFile()"></i>
+      <i class="icon-like" title="点赞" onclick="handleLike()"></i>
+      <i class="icon-dislike" title="踩" onclick="handleDislike()"></i>
+      <i class="icon-clever-customer" title="智能客服" onclick="handleCustomerService()"></i>
+      <i class="icon-more-operate" title="更多操作" onclick="handleMore()"></i>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
+import { Message } from 'vue-devui';
+import { storeToRefs } from 'pinia';
+import NoData from '@/components/NoData/NoData.vue';
+import { useAccountStore } from '@/stores/user';
+import * as XLSX from 'xlsx';
+const { formatTime } = useTimeFormat();
+import { getHomeNoticeList, getReleaseExport, releasePage, searchLanguageList } from '@/api/jyh';
+import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
+import { useGlobalInfoStore } from '@/stores/Global';
+
+const router = useRouter();
+const route = useRoute();
+
+const filterTableRef = ref();
+const { namespace } = getOrgInfo();
+const userInfo = useAccountStore();
+const { isLogin } = storeToRefs(userInfo);
+// 定义 tableKey，用于强制刷新表格
+const tableKey = ref(0);
+const tableData = ref([]);
+
+// 定义 columns 数据
+const columns = ref([
+  { key: 'subject', label: '漏洞类型', visible: true, filterable: true, sortable: false },
+  { key: 'overview', label: '漏洞内容', visible: true, filterable: true, sortable: false },
+  { key: 'importance', label: '重要性', visible: true, filterable: true, sortable: false,width: 80 },
+  { key: 'publishTime', label: '时间', visible: true, filterable: true, sortable: false },
+ ]);
+
+// 跳转
+const gotoDetail = (row) => {
+  // 后续请换成params，暂时params传参没传过去
+  router.push({
+    path: 'repoDetail/' + row.id
+  });
+};
+
+const getReleaseList = async () => {
+  const { data, error }  = await getHomeNoticeList();
+  if (!error && data) {
+    tableData.value = data.data || [];
+    console.log(tableData.value);
+  }
+};
+
+onMounted(async () => {
+  nextTick(() => {
+    getReleaseList();
+  });
+  // getReleaseList();
+});
+
+const exportResult = async () => {
+  const selectDatas = tableData.value.map((d) => d.id);
+  if (!tableData.value.length || selectDatas.length <= 0) {
+    Message.info('未选择任何数据');
+    return;
+  }
+
+  const { data, error } = await getReleaseExport({
+    list: selectDatas,
+  });
+  if (data && !error) {
+    // 方法1：如果后端返回的是文件流（Blob）
+    const blob = new Blob([data.data]);
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    // 创建一个临时的a标签触发下载
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+
+    // 从Content-Disposition头中获取文件名，或者使用默认文件名
+    const contentDisposition = data.headers['content-disposition'];
+    let fileName = 'export.xlsx'; // 默认文件名
+    // if (contentDisposition) {
+    //   const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
+    //   if (fileNameMatch && fileNameMatch[1]) {
+    //     fileName = fileNameMatch[1].replace(/^[^0-9]*|[^0-9.xlsx]*$/g, "");
+    //   }
+    // }
+
+    link.setAttribute('download', fileName);
+    document.body.appendChild(link);
+    link.click();
+
+    // 清理
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(downloadUrl);
+  } else {
+    console.error('导出失败:', error);
+    // 这里可以添加错误提示，比如使用Element Plus的ElMessage
+    ElMessage.error('文件导出失败');
+  }
+};
+
+// 事件处理函数
+function handleRefresh() {
+  console.log('刷新点击');
+  // 实际业务代码示例：
+  // location.reload(); // 重新加载页面
+  // 或调用API刷新数据
+}
+
+function handleFile() {
+  console.log('文件点击');
+  // 示例：触发文件上传
+  // document.getElementById('file-input').click();
+}
+
+function handleLike() {
+  console.log('点赞点击');
+  // 示例：切换点赞状态
+  const likeBtn = document.querySelector('.icon-like');
+  likeBtn.classList.toggle('active');
+  // 这里可以添加AJAX请求提交点赞状态
+}
+
+function handleDislike() {
+  console.log('踩点击');
+  // 类似点赞的逻辑
+  const dislikeBtn = document.querySelector('.icon-dislike');
+  dislikeBtn.classList.toggle('active');
+}
+
+function handleCustomerService() {
+  console.log('客服点击');
+  // 示例：打开客服对话框
+  // openChatWindow();
+}
+
+function handleMore() {
+  console.log('更多操作点击');
+  // 示例：显示下拉菜单
+  // showDropdownMenu();
+}
+
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.secret-container {
+  position: relative;
+  //min-height: 600px;
+  background: #ffffff;
+  padding: 20px;
+  margin-top: 16px;
+  border-radius: 15px;
+
+  .title {
+    color: #191919;
+    font-family: HarmonyOS Sans SC;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+
+  .secret-op {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.error {
+  color: $devui-contrast;
+}
+
+:deep(.devui-table__row td) {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+:deep(.devui-tag .devui-tag--default) {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  margin-right: 8px;
+  border: 1px solid #e3e3ee;
+}
+
+.one-line {
+  word-break: break-all;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9a9b9c;
+  line-height: 20px;
+}
+
+.cur-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2d2d2e;
+  line-height: 20px;
+}
+
+.output-btn {
+  border-radius: 16px;
+  background: #DFDFDF;
+
+
+  color: #191919;
+  font-family: HarmonyOS Sans SC;
+  font-weight: regular;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.secret-breadcrumb {
+  padding: 7px 20px 12px;
+  background: #ffffff;
+}
+
+.bubble-bottom-operations {
+  margin-top: 16px;
+  margin-left: auto;
+  display: flex;
+  gap: 8px; /* 图标之间的间隔 */
+  align-items: center; /* 垂直居中图标 */
+  justify-content: end;
+  font-size: 14px;
+}
+</style>

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

@@ -17,7 +17,9 @@
               <span class="span1">完成回答：</span>
             </div>
             <!--开源软件列表-->
-            <OssList />
+            <OssList v-if="msg.type===1"/>
+            <WarningList v-else-if="msg.type===2"/>
+
             <div class="conversation-cnxw">
               <a class="flex conversation-cnxw-item">
                 <span class="span2">猜你想问</span>
@@ -133,6 +135,7 @@ import { introPrompt, simplePrompt, mockAnswer, guessQuestions } from './mock.co
 import SwiperComponent from './SwiperComponent.vue';
 import GuessYouWantToAsk from './GuessYouWantToAsk.vue';
 import OssList from './components/OssList.vue';
+import WarningList from './components/WarningList.vue';
 
 const inputValue = ref('');
 const startChat = ref(false);
@@ -192,12 +195,13 @@ const onSubmit = (e, answer = undefined) => {
     });
   });
   // getAIAnswer(answer ?? e);
-  getAIAnswer(mockAnswer);
+  getAIAnswer(mockAnswer,2);
 };
 
-const getAIAnswer = (content) => {
+const getAIAnswer = (content,type) => {
   messages.value.push({
     from: 'ai-model',
+    type: type || 1,
     content: content,
     avatarPosition: 'side-left',
     avatarConfig: { ...aiModelAvatar },