cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

安全检测样式优化

Browse Source
This commit is contained in:
fmk1023
2025-11-28 14:48:13 +08:00
parent ae00eb3d6f
commit 0ab4649909
2 changed files with 469 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/Jyh/Home/index.vue
View File

@@ -581,10 +581,7 @@ $primary-color: #5e7ce0;
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
// ----------------------------------------------------
// 基础样式 (保持不变)
// ----------------------------------------------------
// 基础样式
.home-container {
width: 100%;
height: 100%;
@@ -633,7 +630,7 @@ $primary-color: #5e7ce0;
justify-content: space-between;
align-items: center;
padding: 12px;
transition: all 0.3s ease; // 添加过渡
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -659,7 +656,7 @@ $primary-color: #5e7ce0;
justify-content: center;
align-items: center;
gap: 8px;
transition: color 0.3s ease; // 添加过渡
transition: color 0.3s ease;
&:hover {
color: $primary-color;
@@ -689,7 +686,7 @@ $primary-color: #5e7ce0;
.glow-border {
border: 1px solid var(--devui-form-control-line, #d7d8da);
border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15)); // 调整光晕颜色透明度
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15));
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
@@ -962,13 +959,13 @@ $primary-light: #e8f0fe;
}
}
/* 时间线样式调整，保持与原有布局一致 */
/* 时间线样式 */
:deep(.devui-timeline) {
--devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
--devui-timeline-item-padding: 0 0 24px 0;
}
:deep(.devui-timeline-item-time) {
/* 年份标签样式，与原有红色标签保持一致 */
/* 年份标签样式 */
background-color: #fee2e2; /* 浅红背景 */
color: #dc2626; /* 红色文字 */
font-size: 12px;

553
src/views/Jyh/TestingCenter/index.vue
View File

@@ -8,11 +8,13 @@
<div class="page-wrap">
<!-- 检测方式选择区域 -->
<Card class="upload-card">
<div class="upload-title">选择检测方式</div>
<Card class="upload-card animate-fade-in">
<div class="upload-title">
<i class="fa fa-shield text-primary mr-2"></i>选择检测方式
</div>
<div class="upload-tabs">
<d-tabs v-model="activeUploadType" @change="handleUploadTypeChange">
<d-tabs v-model="activeUploadType" @change="handleUploadTypeChange" :animated="true">
<d-tab id="file" title="上传文件">
<div class="upload-area" @click="triggerFileUpload" :class="{ dragging: isDragging }">
<input
@@ -24,19 +26,22 @@
@dragleave.prevent="isDragging = false"
@drop.prevent="handleFileDrop"
>
<i class="fa fa-cloud-upload text-primary text-4xl mb-2"></i>
<p>点击或拖拽文件到此处上传</p>
<p class="text-sm text-gray-medium">支持格式：.zip, .tar, .gz, .json (最大100MB)</p>
<div class="upload-icon-container">
<i class="fa fa-cloud-upload text-primary text-4xl mb-2 transition-transform hover:scale-110"></i>
</div>
<p class="upload-text">点击或拖拽文件到此处上传</p>
<p class="text-sm text-gray-medium mt-1">支持格式：.zip, .tar, .gz, .json (最大100MB)</p>
</div>
</d-tab>
<d-tab id="url" title="输入URL">
<d-form layout="horizontal">
<d-form layout="horizontal" class="form-container">
<d-form-item field="scanUrl" label="检测URL">
<d-input
v-model="scanUrl"
placeholder="请输入需要检测的URL地址（例如：https://example.com）"
style="width: 100%"
class="transition-all"
></d-input>
</d-form-item>
<d-form-item>
@@ -44,21 +49,23 @@
@click="startUrlScan"
variant="solid"
:disabled="!scanUrl"
class="btn-primary transform transition-all hover:scale-105"
>
开始检测
<i class="fa fa-play-circle mr-1"></i>开始检测
</d-button>
</d-form-item>
</d-form>
</d-tab>
<d-tab id="sbom" title="输入SBOM">
<d-form layout="horizontal">
<d-form layout="horizontal" class="form-container">
<d-form-item field="sbomContent" label="SBOM内容">
<d-textarea
v-model="sbomContent"
placeholder="请输入SBOM内容（支持SPDX或CycloneDX格式）"
:rows="8"
style="width: 100%"
class="transition-all"
></d-textarea>
</d-form-item>
<d-form-item>
@@ -66,8 +73,9 @@
@click="startSbomScan"
variant="solid"
:disabled="!sbomContent"
class="btn-primary transform transition-all hover:scale-105"
>
开始检测
<i class="fa fa-play-circle mr-1"></i>开始检测
</d-button>
</d-form-item>
</d-form>
@@ -77,12 +85,14 @@
</Card>
<!-- 检测状态展示 -->
<Card class="mt-4" v-if="currentScan">
<div class="scan-status-title">
<h3>当前检测状态</h3>
<div class="upload-title">当前检测状态</div>
<d-tag :color="getStatusColor(currentScan.status)">{{ getStatusText(currentScan.status) }}</d-tag>
<Card class="mt-4 scan-status-card animate-fade-in delay-100" v-if="currentScan">
<div class="scan-status-header">
<div class="scan-status-title">
<i class="fa fa-tasks text-primary mr-2"></i>当前检测状态
</div>
<d-tag :color="getStatusColor(currentScan.status)" class="status-tag">
{{ getStatusText(currentScan.status) }}
</d-tag>
</div>
<div class="scan-progress mt-4">
@@ -90,14 +100,16 @@
:percentage="currentScan.progress"
:status="getProgressStatus(currentScan.status)"
stroke-width="6"
class="progress-bar"
></d-progress>
<p class="progress-text mt-2">
{{ currentScan.progress }}% 完成 - {{ currentScan.currentStep || '准备开始检测' }}
<p class="progress-text mt-2 flex items-center">
<span class="progress-percentage">{{ currentScan.progress }}% 完成</span>
<span class="progress-step ml-2"> - {{ currentScan.currentStep || '准备开始检测' }}</span>
</p>
</div>
<div class="scan-details mt-4" v-if="currentScan.status !== 'pending'">
<d-descriptions column="1" bordered>
<d-descriptions column="1" bordered class="details-table">
<d-description-item term="检测目标">{{ currentScan.target }}</d-description-item>
<d-description-item term="开始时间">{{ formatTime(currentScan.startTime) }}</d-description-item>
<d-description-item term="预计完成时间" v-if="currentScan.status === 'scanning'">
@@ -113,19 +125,28 @@
</div>
<div class="scan-actions mt-4" v-if="currentScan.status === 'completed'">
<d-button @click="showReportDetails(currentScan)" variant="solid">查看报告详情</d-button>
<d-button
@click="showReportDetails(currentScan)"
variant="solid"
class="transform transition-all hover:scale-105"
>
<i class="fa fa-file-text-o mr-1"></i>查看报告详情
</d-button>
</div>
</Card>
<!-- 历史检测记录 -->
<Card class="mt-4">
<div class="upload-title">历史检测记录</div>
<div class="history-title">
<Card class="mt-4 history-card animate-fade-in delay-200">
<div class="history-header">
<div class="upload-title">
<i class="fa fa-history text-primary mr-2"></i>历史检测记录
</div>
<d-select
style="width: 30%"
style="width: 200px"
v-model="historyFilter"
:options="filterOptions"
placeholder="筛选状态"
class="history-filter"
></d-select>
</div>
@@ -135,21 +156,30 @@
:data="filteredHistory"
v-if="filteredHistory.length > 0"
table-layout="auto"
row-hover
>
<d-column type="index" width="40"></d-column>
<d-column field="target" header="检测目标" :width="300">
<template #default="scope">
<div class="target-text">{{ scope.row.target }}</div>
<div class="target-text">
<i :class="getTargetIcon(scope.row.type)" class="mr-1 text-primary"></i>
{{ scope.row.target }}
</div>
</template>
</d-column>
<d-column field="type" header="检测类型">
<template #default="scope">
<d-tag :type="getTypeColor(scope.row.type)">{{ getTypeText(scope.row.type) }}</d-tag>
<d-tag :type="getTypeColor(scope.row.type)" class="type-tag">{{ getTypeText(scope.row.type) }}</d-tag>
</template>
</d-column>
<d-column field="status" header="状态">
<template #default="scope">
<d-tag :type="getStatusColor(scope.row.status)">{{ getStatusText(scope.row.status) }}</d-tag>
<d-tag :type="getStatusColor(scope.row.status)" class="status-tag">
<span v-if="scope.row.status === 'scanning'" class="loading-dot">
<i class="fa fa-circle-o-notch fa-spin mr-1"></i>
</span>
{{ getStatusText(scope.row.status) }}
</d-tag>
</template>
</d-column>
<d-column field="startTime" header="开始时间">
@@ -157,23 +187,23 @@
</d-column>
<d-column field="riskLevel" header="风险等级">
<template #default="scope">
<d-tag :color="getRiskColor(scope.row.riskLevel)">{{ scope.row.riskLevel || '无风险' }}</d-tag>
<d-tag :color="getRiskColor(scope.row.riskLevel)" class="risk-tag">{{ scope.row.riskLevel || '无风险' }}</d-tag>
</template>
</d-column>
<d-column header="操作" fixed-right="0px" width="130">
<template #default="scope">
<a class="devui-link" @click="showReportDetails(scope.row)" v-if="scope.row.status === 'completed'">
查看报告
<a class="devui-link operation-link" @click="showReportDetails(scope.row)" v-if="scope.row.status === 'completed'">
<i class="fa fa-eye mr-1"></i>查看报告
</a>
<a class="devui-link" @click="rescan(scope.row)" v-else-if="scope.row.status === 'failed'">
重新检测
<a class="devui-link operation-link" @click="rescan(scope.row)" v-else-if="scope.row.status === 'failed'">
<i class="fa fa-refresh mr-1"></i>重新检测
</a>
<span v-else>--</span>
</template>
</d-column>
</d-table>
<NoData v-else :small="false"></NoData>
<NoData v-else :small="false" class="no-data"></NoData>
<div class="mt-20 mb-20 flex justify-end" v-if="filteredHistory.length > 0">
<d-pagination
@@ -188,6 +218,7 @@
total-item-text="总计"
@page-index-change="getHistoryList"
@page-size-change="getHistoryList"
class="pagination"
/>
</div>
</Card>
@@ -198,6 +229,9 @@
v-model="reportVisible"
:width="800"
title="检测报告详情"
:show-close="true"
class="report-drawer"
@open="handleDrawerOpen"
>
<ReportDetail
:report-data="currentReport"
@@ -207,7 +241,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted,onUnmounted, watch } from 'vue';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import NoData from '@/components/NoData/NoData.vue';
import ReportDetail from './ReportDetail.vue';
@@ -225,23 +259,17 @@ const sbomContent = ref('');
const isDragging = ref(false);
// 检测状态相关
// 替换原有的 const currentScan = ref(null);
const currentScan = ref({
taskId: 'scan_1689234567890', // 任务唯一标识
type: 'file', // 检测类型：file/url/sbom
target: 'app-release-v2.1.apk', // 检测目标
status: 'scanning', // 任务状态：pending/scanning/completed/failed
progress: 65, // 检测进度（0-100）
startTime: '2024-07-15T10:30:22', // 开始时间
estimatedCompleteTime: '2024-07-15T10:35:10', // 预计完成时间
currentStep: '执行漏洞深度扫描', // 当前执行步骤
totalChecks: 42, // 总检测项数
completedChecks: 27, // 已完成检测项数
// 以下字段在状态为 completed 时存在
// riskStats: { critical: 1, high: 3, medium: 2, low: 5 },
// completeTime: '2024-07-15T10:34:55',
// 以下字段在状态为 failed 时存在
// errorMsg: '检测引擎连接超时'
taskId: 'scan_1689234567890',
type: 'file',
target: 'app-release-v2.1.apk',
status: 'scanning',
progress: 65,
startTime: '2024-07-15T10:30:22',
estimatedCompleteTime: '2024-07-15T10:35:10',
currentStep: '执行漏洞深度扫描',
totalChecks: 42,
completedChecks: 27,
});
const scanInterval = ref(null);
const loading = ref(false);
@@ -254,9 +282,7 @@ const pager = ref({
});
// 历史记录相关
// 模拟历史检测记录数据（可直接替换到组件的 historyList 初始化中）
const historyList = ref([
// 文件检测 - 已完成（高危）
{
taskId: 'scan_1720012345678',
target: 'enterprise-app-v3.2.1.zip',
@@ -265,11 +291,10 @@ const historyList = ref([
riskLevel: '高危',
startTime: '2024-07-01T09:15:30',
completeTime: '2024-07-01T09:28:45',
duration: 810000, // 13分30秒
duration: 810000,
riskStats: { critical: 1, high: 4, medium: 3, low: 2 },
fileSize: 28560000 // 约28.5MB
fileSize: 28560000
},
// URL检测 - 已完成（低危）
{
taskId: 'scan_1720015678901',
target: 'https://internal-api.company.com',
@@ -278,10 +303,9 @@ const historyList = ref([
riskLevel: '低危',
startTime: '2024-07-01T14:30:22',
completeTime: '2024-07-01T14:32:10',
duration: 108000, // 1分48秒
duration: 108000,
riskStats: { critical: 0, high: 0, medium: 0, low: 1 }
},
// SBOM检测 - 失败
{
taskId: 'scan_1720018901234',
target: 'SBOM-cyclonedx-project.json',
@@ -290,10 +314,9 @@ const historyList = ref([
riskLevel: '-',
startTime: '2024-07-02T10:05:18',
completeTime: '2024-07-02T10:06:03',
duration: 45000, // 45秒
duration: 45000,
errorMsg: 'SBOM格式错误：缺少components字段'
},
// 文件检测 - 已完成（中危）
{
taskId: 'scan_1720022345678',
target: 'mobile-client-v2.8.apk',
@@ -302,11 +325,10 @@ const historyList = ref([
riskLevel: '中危',
startTime: '2024-07-02T16:40:55',
completeTime: '2024-07-02T16:52:30',
duration: 695000, // 11分35秒
duration: 695000,
riskStats: { critical: 0, high: 0, medium: 2, low: 5 },
fileSize: 42800000 // 约42.8MB
fileSize: 42800000
},
// URL检测 - 进行中
{
taskId: 'scan_1720025678901',
target: 'https://admin-portal.company.com',
@@ -317,7 +339,6 @@ const historyList = ref([
progress: 65,
currentStep: '检测API接口漏洞'
},
// SBOM检测 - 已完成（无风险）
{
taskId: 'scan_1720028901234',
target: 'SBOM-spdx-v2.3.json',
@@ -326,10 +347,9 @@ const historyList = ref([
riskLevel: '无风险',
startTime: '2024-07-03T11:30:00',
completeTime: '2024-07-03T11:31:20',
duration: 80000, // 1分20秒
duration: 80000,
riskStats: { critical: 0, high: 0, medium: 0, low: 0 }
},
// 文件检测 - 失败
{
taskId: 'scan_1720032345678',
target: 'legacy-system.tar.gz',
@@ -338,11 +358,10 @@ const historyList = ref([
riskLevel: '-',
startTime: '2024-07-03T15:20:40',
completeTime: '2024-07-03T15:21:10',
duration: 30000, // 30秒
duration: 30000,
errorMsg: '文件损坏：无法解压缩归档内容',
fileSize: 157000000 // 约157MB
fileSize: 157000000
},
// URL检测 - 已完成（致命）
{
taskId: 'scan_1720035678901',
target: 'https://old-website.company.com',
@@ -351,10 +370,9 @@ const historyList = ref([
riskLevel: '致命',
startTime: '2024-07-04T09:50:15',
completeTime: '2024-07-04T09:51:50',
duration: 95000, // 1分35秒
duration: 95000,
riskStats: { critical: 2, high: 1, medium: 0, low: 0 }
},
// SBOM检测 - 已完成（中危）
{
taskId: 'scan_1720038901234',
target: 'microservice-sbom.xml',
@@ -363,10 +381,9 @@ const historyList = ref([
riskLevel: '中危',
startTime: '2024-07-04T13:18:30',
completeTime: '2024-07-04T13:19:45',
duration: 75000, // 1分15秒
duration: 75000,
riskStats: { critical: 0, high: 0, medium: 1, low: 3 }
},
// 文件检测 - 已完成（高危）
{
taskId: 'scan_1720042345678',
target: 'desktop-software-v5.1.exe',
@@ -375,9 +392,9 @@ const historyList = ref([
riskLevel: '高危',
startTime: '2024-07-05T10:08:22',
completeTime: '2024-07-05T10:25:10',
duration: 1008000, // 16分48秒
duration: 1008000,
riskStats: { critical: 0, high: 3, medium: 2, low: 1 },
fileSize: 85600000 // 约85.6MB
fileSize: 85600000
}
]);
const historyFilter = ref('all');
@@ -405,6 +422,21 @@ const triggerFileUpload = () => {
const handleFileUpload = (e) => {
const file = e.target.files[0];
if (file) {
// 验证文件格式和大小
const validFormats = ['.zip', '.tar', '.gz', '.json'];
const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
const isFormatValid = validFormats.includes(fileExt);
const isSizeValid = file.size <= 100 * 1024 * 1024; // 100MB
if (!isFormatValid) {
showToast('不支持的文件格式，请上传.zip, .tar, .gz, .json格式', 'warning');
return;
}
if (!isSizeValid) {
showToast('文件大小超过限制，最大支持100MB', 'warning');
return;
}
startFileScan(file);
// 清空输入以允许重复上传同一文件
e.target.value = '';
@@ -415,7 +447,7 @@ const handleFileDrop = (e) => {
isDragging.value = false;
const file = e.dataTransfer.files[0];
if (file) {
startFileScan(file);
handleFileUpload({ target: { files: [file] } });
}
};
@@ -435,15 +467,24 @@ const startFileScan = async (file) => {
if (data.success) {
currentScan.value = data.data;
startScanPolling();
showToast('文件检测任务已提交', 'success');
}
} catch (error) {
console.error('文件检测提交失败', error);
showToast('文件检测提交失败，请重试', 'error');
} finally {
loading.value = false;
}
};
const startUrlScan = async () => {
// 简单验证URL格式
const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
if (!urlRegex.test(scanUrl.value)) {
showToast('请输入有效的URL地址', 'warning');
return;
}
try {
loading.value = true;
const { data } = await submitScanTask({
@@ -455,15 +496,22 @@ const startUrlScan = async () => {
currentScan.value = data.data;
startScanPolling();
scanUrl.value = '';
showToast('URL检测任务已提交', 'success');
}
} catch (error) {
console.error('URL检测提交失败', error);
showToast('URL检测提交失败，请重试', 'error');
} finally {
loading.value = false;
}
};
const startSbomScan = async () => {
if (!sbomContent.value.trim()) {
showToast('请输入SBOM内容', 'warning');
return;
}
try {
loading.value = true;
const { data } = await submitScanTask({
@@ -476,9 +524,11 @@ const startSbomScan = async () => {
currentScan.value = data.data;
startScanPolling();
sbomContent.value = '';
showToast('SBOM检测任务已提交', 'success');
}
} catch (error) {
console.error('SBOM检测提交失败', error);
showToast('SBOM检测提交失败，请重试', 'error');
} finally {
loading.value = false;
}
@@ -494,7 +544,7 @@ const startScanPolling = () => {
// 立即获取一次状态
fetchScanStatus();
// 设置定时器
// 设置定时器（5秒一次）
scanInterval.value = setInterval(() => {
fetchScanStatus();
}, 5000);
@@ -506,14 +556,27 @@ const fetchScanStatus = async () => {
try {
const { data } = await getScanStatus(currentScan.value.taskId);
if (data.success) {
// 进度变化时添加数字动画
const oldProgress = currentScan.value.progress;
currentScan.value = data.data;
// 如果扫描完成或失败，停止轮询
// 进度更新动画
if (currentScan.value.progress > oldProgress) {
animateProgress(oldProgress, currentScan.value.progress);
}
// 如果扫描完成或失败，停止轮询并更新历史记录
if (['completed', 'failed'].includes(currentScan.value.status)) {
clearInterval(scanInterval.value);
scanInterval.value = null;
// 刷新历史列表
getHistoryList();
// 任务结束提示
if (currentScan.value.status === 'completed') {
showToast('检测已完成', 'success');
} else {
showToast(`检测失败: ${currentScan.value.errorMsg || '未知错误'}`, 'error');
}
}
}
} catch (error) {
@@ -521,6 +584,21 @@ const fetchScanStatus = async () => {
}
};
// 进度条数字动画
const animateProgress = (start, end) => {
let current = start;
const step = Math.ceil((end - start) / 20); // 分20步完成动画
const timer = setInterval(() => {
current += step;
if (current >= end) {
current = end;
clearInterval(timer);
}
// 临时更新进度显示（实际会被轮询结果覆盖，仅为动画效果）
currentScan.value.progress = current;
}, 50);
};
// 获取历史记录
const getHistoryList = async () => {
try {
@@ -537,6 +615,7 @@ const getHistoryList = async () => {
}
} catch (error) {
console.error('获取历史记录失败', error);
showToast('获取历史记录失败，请重试', 'error');
} finally {
loading.value = false;
}
@@ -546,11 +625,16 @@ const getHistoryList = async () => {
const showReportDetails = async (record) => {
try {
loading.value = true;
// 这里应该调用获取报告详情的API
currentReport.value = record; // 临时使用记录数据，实际应替换为API调用
// 实际项目中应调用API获取详细报告
// const { data } = await getScanReport(record.taskId);
// currentReport.value = data.data;
// 临时使用记录数据
currentReport.value = record;
reportVisible.value = true;
} catch (error) {
console.error('获取报告详情失败', error);
showToast('获取报告详情失败，请重试', 'error');
} finally {
loading.value = false;
}
@@ -561,18 +645,55 @@ const rescan = (record) => {
switch (record.type) {
case 'file':
activeUploadType.value = 'file';
// 滚动到上传区域
scrollToUploadArea();
break;
case 'url':
activeUploadType.value = 'url';
scanUrl.value = record.target;
scrollToUploadArea();
break;
case 'sbom':
activeUploadType.value = 'sbom';
sbomContent.value = record.content || '';
scrollToUploadArea();
break;
}
};
// 滚动到上传区域
const scrollToUploadArea = () => {
document.querySelector('.upload-card')?.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
};
// 显示提示信息
const showToast = (message, type = 'info') => {
// 创建提示框元素
const toast = document.createElement('div');
toast.className = `toast toast-${type} animate-fade-in-out`;
toast.innerHTML = `<i class="fa ${getToastIcon(type)} mr-2"></i>${message}`;
document.body.appendChild(toast);
// 3秒后自动移除
setTimeout(() => {
document.body.removeChild(toast);
}, 3000);
};
// 获取提示框图标
const getToastIcon = (type) => {
const iconMap = {
'success': 'fa-check-circle',
'error': 'fa-exclamation-circle',
'warning': 'fa-exclamation-triangle',
'info': 'fa-info-circle'
};
return iconMap[type] || 'fa-info-circle';
};
// 格式化时间
const formatTime = (time) => {
return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
@@ -631,6 +752,7 @@ const getTypeColor = (type) => {
// 风险等级颜色映射
const getRiskColor = (level) => {
const colorMap = {
'致命': 'danger',
'高危': 'danger',
'中危': 'warning',
'低危': 'info',
@@ -639,6 +761,16 @@ const getRiskColor = (level) => {
return colorMap[level] || 'default';
};
// 获取目标类型图标
const getTargetIcon = (type) => {
const iconMap = {
'file': 'fa-file-archive-o',
'url': 'fa-link',
'sbom': 'fa-file-code-o'
};
return iconMap[type] || 'fa-question-circle';
};
// 筛选历史记录
const filteredHistory = computed(() => {
if (historyFilter.value === 'all') {
@@ -653,9 +785,20 @@ watch(historyFilter, () => {
getHistoryList();
});
// 抽屉打开时的回调
const handleDrawerOpen = () => {
// 可以添加抽屉打开动画或数据初始化逻辑
};
// 页面加载时获取历史记录
onMounted(() => {
getHistoryList();
// 页面载入动画
document.querySelectorAll('.animate-fade-in').forEach((el, index) => {
setTimeout(() => {
el.classList.add('visible');
}, 100 * index);
});
});
// 组件卸载时清除定时器
@@ -667,12 +810,46 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
// 基础布局样式
.page-wrap {
margin: 16px;
padding-bottom: 40px;
}
// 动画相关
.animate-fade-in {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
&.visible {
opacity: 1;
transform: translateY(0);
}
}
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.animate-fade-in-out {
animation: fadeInOut 3s ease-in-out;
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(-20px); }
15% { opacity: 1; transform: translateY(0); }
85% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
// 上传区域样式
.upload-card {
padding: 20px;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
}
.upload-title {
@@ -680,6 +857,12 @@ onUnmounted(() => {
font-weight: 600;
margin-bottom: 20px;
color: #191919;
display: flex;
align-items: center;
}
.upload-tabs {
margin-top: 10px;
}
.upload-area {
@@ -689,62 +872,250 @@ onUnmounted(() => {
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
&:hover {
border-color: var(--devui-primary);
background-color: rgba(22, 93, 255, 0.03);
}
&.dragging {
border-color: var(--devui-primary);
background-color: rgba(22, 93, 255, 0.05);
background-color: rgba(22, 93, 255, 0.08);
transform: scale(1.01);
}
}
.upload-icon-container {
transition: transform 0.3s ease;
&:hover {
transform: translateY(-5px);
}
}
.upload-text {
font-size: 15px;
color: #4e5969;
margin-top: 10px;
}
.file-input {
display: none;
}
.scan-status-title {
// 表单样式
.form-container {
margin-top: 10px;
padding: 10px;
}
// 按钮样式
.btn-primary {
background-color: var(--devui-primary);
border-color: var(--devui-primary);
&:hover {
background-color: var(--devui-primary-light-300);
border-color: var(--devui-primary-light-300);
}
}
// 检测状态区域样式
.scan-status-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 24px;
transition: all 0.3s ease;
}
.scan-status-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.scan-status-title {
font-size: 16px;
font-weight: 600;
color: #191919;
display: flex;
align-items: center;
}
.status-tag {
font-size: 13px;
padding: 4px 10px;
border-radius: 4px;
}
.scan-progress {
margin: 20px 0;
}
.progress-bar {
transition: width 0.5s ease;
}
.progress-text {
color: var(--devui-text-secondary);
margin-top: 8px;
font-size: 14px;
display: flex;
align-items: center;
}
.history-title {
.progress-percentage {
font-weight: 500;
color: #191919;
}
.progress-step {
color: #6b7280;
}
.scan-details {
margin-top: 20px;
border-radius: 6px;
overflow: hidden;
}
.details-table {
background-color: #f9fafb;
border: 1px solid #f0f2f5;
}
.scan-actions {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
// 历史记录区域样式
.history-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 24px;
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.history-filter {
min-width: 180px;
}
.jyh-table {
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
}
.target-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
display: flex;
align-items: center;
}
.type-tag, .risk-tag {
font-size: 12px;
padding: 2px 8px;
}
.operation-link {
transition: all 0.2s ease;
&:hover {
color: var(--devui-primary);
transform: translateX(2px);
}
}
.no-data {
padding: 40px 0;
text-align: center;
}
.pagination {
transition: transform 0.2s ease;
&:hover {
transform: translateY(-2px);
}
}
// 面包屑样式
.secret-breadcrumb {
padding: 7px 20px 12px;
background: #ffffff;
border-bottom: 1px solid #f0f2f5;
}
///deep/ .devui-tabs-content {
// padding: 16px 0;
//}
//
///deep/ .devui-form-item {
// margin-bottom: 16px;
//}
// 提示框样式
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
border-radius: 4px;
color: white;
z-index: 9999;
font-size: 14px;
display: flex;
align-items: center;
}
.toast-success {
background-color: #52c41a;
}
.toast-error {
background-color: #ff4d4f;
}
.toast-warning {
background-color: #faad14;
}
.toast-info {
background-color: #1890ff;
}
// 抽屉样式
.report-drawer {
.devui-drawer-content {
padding: 0;
overflow-y: auto;
}
}
// 覆盖组件样式
::v-deep .devui-tabs-nav {
margin-bottom: 20px;
}
::v-deep .devui-tabs-content {
padding: 10px 0;
}
::v-deep .devui-form-item {
margin-bottom: 16px;
}
::v-deep .devui-table-row {
transition: background-color 0.2s ease;
}
::v-deep .devui-table-row:hover {
background-color: rgba(22, 93, 255, 0.03);
}
</style>