mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 07:57:18 +08:00
feat: 优化首页展示页面
This commit is contained in:
NiceAsiv
parent
f76bca6b66
commit
7029903e43
@ -7,7 +7,7 @@ import boxen, { type Options as BoxenOptions } from "boxen";
|
|||||||
dayjs.extend(duration);
|
dayjs.extend(duration);
|
||||||
|
|
||||||
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
||||||
`您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.github.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
`保姆级文档\nhttps://pure-admin.github.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||||
);
|
);
|
||||||
|
|
||||||
const boxenOptions: BoxenOptions = {
|
const boxenOptions: BoxenOptions = {
|
||||||
|
|||||||
BIN
src/assets/fonts/Alibaba_PuHuiTi_Regular.ttf
Normal file
BIN
src/assets/fonts/Alibaba_PuHuiTi_Regular.ttf
Normal file
Binary file not shown.
11
src/assets/fonts/global.css
Normal file
11
src/assets/fonts/global.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "AlibabaPuHuiTi";
|
||||||
|
src: url("@/assets/fonts/Alibaba_PuHuiTi_Regular.ttf") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "AlibabaPuHuiTi", sans-serif;
|
||||||
|
}
|
||||||
14
src/assets/scss/reset.scss
Normal file
14
src/assets/scss/reset.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.el-button--small:not(.el-button--text),
|
||||||
|
.el-radio-button--small .el-radio-button__inner {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--text {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--default {
|
||||||
|
border-color: #d0d0d0;
|
||||||
|
}
|
||||||
@ -22,6 +22,10 @@ import "element-plus/dist/index.css";
|
|||||||
import "./assets/iconfont/iconfont.js";
|
import "./assets/iconfont/iconfont.js";
|
||||||
import "./assets/iconfont/iconfont.css";
|
import "./assets/iconfont/iconfont.css";
|
||||||
|
|
||||||
|
//导入全局字体
|
||||||
|
import "@/assets/fonts/global.css";
|
||||||
|
import "@/assets/scss/reset.scss"; // Import global CSS reset file
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
// 自定义指令
|
// 自定义指令
|
||||||
|
|||||||
0
src/views/dashboard/CardShow.vue
Normal file
0
src/views/dashboard/CardShow.vue
Normal file
164
src/views/dashboard/components/VulnerabilityCard.vue
Normal file
164
src/views/dashboard/components/VulnerabilityCard.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vulnerability-card">
|
||||||
|
<el-scrollbar
|
||||||
|
class="top-scrollbar"
|
||||||
|
wrap-class="scrollbar-wrapper"
|
||||||
|
height="300px"
|
||||||
|
>
|
||||||
|
<div v-for="alert in alerts" :key="alert.id" class="alert">
|
||||||
|
<div class="alert-header" @click="toggleAlert(alert.id)">
|
||||||
|
<div class="alert-title">{{ alert.cve }}</div>
|
||||||
|
<span class="alert-release-date">
|
||||||
|
发布于 {{ daysSinceRelease(alert.date) }} 天前
|
||||||
|
</span>
|
||||||
|
<div class="alert-date">{{ alert.date }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="alert.isOpen" class="alert-details">
|
||||||
|
<el-table :data="alert.components">
|
||||||
|
<el-table-column prop="name" label="组件名称" />
|
||||||
|
<el-table-column prop="version" label="版本" />
|
||||||
|
<el-table-column label="受影响项目">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<a href="#">{{ scope.row.affectedProjects }}</a>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
alerts: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: true,
|
||||||
|
components: [
|
||||||
|
{ name: "busybox", version: "1.1.4", affectedProjects: 5 },
|
||||||
|
{ name: "busybox", version: "1.1.4", affectedProjects: 5 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
cve: "CVE-123456",
|
||||||
|
date: "2023-04-06, 12:45 pm",
|
||||||
|
isOpen: false,
|
||||||
|
components: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleAlert(id) {
|
||||||
|
const alert = this.alerts.find(alert => alert.id === id);
|
||||||
|
alert.isOpen = !alert.isOpen;
|
||||||
|
},
|
||||||
|
daysSinceRelease(date) {
|
||||||
|
return Math.floor((new Date() - new Date(date)) / (1000 * 60 * 60 * 24));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.vulnerability-card {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
padding-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-date {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-release-date {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-details {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -9,7 +9,7 @@ import {
|
|||||||
Tooltip,
|
Tooltip,
|
||||||
Legend
|
Legend
|
||||||
} from "chart.js";
|
} from "chart.js";
|
||||||
import Card from "@/components/Card/Card.vue";
|
import VulnerabilityCard from "@/views/dashboard/components/VulnerabilityCard.vue";
|
||||||
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
|
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
|
||||||
|
|
||||||
const projectInfo = ref({
|
const projectInfo = ref({
|
||||||
@ -18,24 +18,23 @@ const projectInfo = ref({
|
|||||||
scanTimes: 10,
|
scanTimes: 10,
|
||||||
scanFiles: 62655
|
scanFiles: 62655
|
||||||
});
|
});
|
||||||
|
|
||||||
const vulnerabilities = ref([
|
|
||||||
{ id: "CVE-2024-9999", description: "发生堆缓冲区溢出攻击" },
|
|
||||||
{ id: "CVE-123456", description: "发布在一天之前 2024-7-23 11:44" }
|
|
||||||
]);
|
|
||||||
|
|
||||||
const recentScansData = ref({
|
const recentScansData = ref({
|
||||||
labels: ["一月", "二月", "三月", "四月", "五月"],
|
labels: ["一月", "二月", "三月", "四月", "五月"],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: "软件成分分析",
|
label: "软件成分分析",
|
||||||
backgroundColor: "#72a4d2",
|
backgroundColor: "#ff6384",
|
||||||
data: [613, 448, 540, 652, 977]
|
data: [20, 42, 37, 45, 54]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "静态代码扫描(SAST)",
|
label: "Fuzz测试",
|
||||||
backgroundColor: "#8cd17d",
|
backgroundColor: "#36a2eb",
|
||||||
data: [138, 936, 777, 590, 54]
|
data: [12, 23, 34, 45, 56]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "静态代码分析",
|
||||||
|
backgroundColor: "#33bb33",
|
||||||
|
data: [32, 45, 23, 54, 32]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
@ -71,101 +70,125 @@ const appRankingData = ref({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
const radio3 = ref("静态代码分析");
|
||||||
</script>
|
</script>
|
||||||
<!--<template>-->
|
|
||||||
<!-- <div class="dashboard">-->
|
|
||||||
<!-- <h1>软件安全赋能平台</h1>-->
|
|
||||||
<!-- <div class="status-overview">-->
|
|
||||||
<!-- <div class="project-info">-->
|
|
||||||
<!-- <h2>项目信息</h2>-->
|
|
||||||
<!-- <div class="info-box">-->
|
|
||||||
<!-- <p>项目数量(个): {{ projectInfo.projects }}</p>-->
|
|
||||||
<!-- <p>仓库数量(个): {{ projectInfo.repositories }}</p>-->
|
|
||||||
<!-- <p>扫描次数: {{ projectInfo.scanTimes }}</p>-->
|
|
||||||
<!-- <p>扫描文件数量: {{ projectInfo.scanFiles }}</p>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="vulnerabilities">-->
|
|
||||||
<!-- <h2>最新漏洞与补丁提示</h2>-->
|
|
||||||
<!-- <ul>-->
|
|
||||||
<!-- <li v-for="vulnerability in vulnerabilities" :key="vulnerability.id">-->
|
|
||||||
<!-- {{ vulnerability.id }}: {{ vulnerability.description }}-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<!-- </ul>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="recent-scans">-->
|
|
||||||
<!-- <h2>近期扫描趋势</h2>-->
|
|
||||||
<!-- <Bar :data="recentScansData" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="details">-->
|
|
||||||
<!-- <div class="issues-ranking">-->
|
|
||||||
<!-- <h2>违规问题排行</h2>-->
|
|
||||||
<!-- <Bar :data="issuesRankingData" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="app-ranking">-->
|
|
||||||
<!-- <h2>违规应用排行</h2>-->
|
|
||||||
<!-- <Bar :data="appRankingData" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard">
|
<div class="dashboard">
|
||||||
<div class="grid-container">
|
<el-row :gutter="10">
|
||||||
<Card title="项目信息">
|
<el-col :span="8">
|
||||||
<div class="info-box">
|
<el-card class="top-card">
|
||||||
<p>项目数量(个): {{ projectInfo.projects }}</p>
|
<div class="card-title">应用信息</div>
|
||||||
<p>仓库数量(个): {{ projectInfo.repositories }}</p>
|
<div class="app-info">
|
||||||
<p>扫描次数: {{ projectInfo.scanTimes }}</p>
|
<div class="app-card">
|
||||||
<p>扫描文件数量: {{ projectInfo.scanFiles }}</p>
|
<div class="right-info">
|
||||||
</div>
|
<div class="proj">项目数量(个)</div>
|
||||||
</Card>
|
<div
|
||||||
<Card title="最新漏洞与补丁提示">
|
class="proj-num"
|
||||||
<ul>
|
style=" font-size: 14px; font-weight: bold;color: #47f"
|
||||||
<li v-for="vulnerability in vulnerabilities" :key="vulnerability.id">
|
>
|
||||||
{{ vulnerability.id }}: {{ vulnerability.description }}
|
{{ projectInfo.projects }}
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
<Card title="近期扫描趋势">
|
<div class="app-card">
|
||||||
<Bar :data="recentScansData" />
|
<div class="right-info">
|
||||||
</Card>
|
<div class="repo">仓库数量(个)</div>
|
||||||
<Card title="违规问题排行">
|
<div
|
||||||
<Bar :data="issuesRankingData" />
|
class="repo-num"
|
||||||
</Card>
|
style=" font-size: 14px; font-weight: bold;color: #87f"
|
||||||
<Card title="违规应用排行">
|
>
|
||||||
<Bar :data="appRankingData" />
|
{{ projectInfo.repositories }}
|
||||||
</Card>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<div class="right-info">
|
||||||
|
<div class="scan">扫描次数(次)</div>
|
||||||
|
<div
|
||||||
|
class="scan-num"
|
||||||
|
style=" font-size: 14px; font-weight: bold;color: #f83"
|
||||||
|
>
|
||||||
|
{{ projectInfo.scanTimes }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<div class="right-info">
|
||||||
|
<div class="file">扫描文件数量(个)</div>
|
||||||
|
<div
|
||||||
|
class="file-num"
|
||||||
|
style=" font-size: 14px; font-weight: bold;color: #3b6"
|
||||||
|
>
|
||||||
|
{{ projectInfo.scanFiles }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="top-card">
|
||||||
|
<div class="card-title">最新漏洞与补丁提示</div>
|
||||||
|
<vulnerability-card />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="top-card">
|
||||||
|
<div class="card-title">近期扫描趋势</div>
|
||||||
|
<Bar :data="recentScansData" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="margin: 6px 0 2px">
|
||||||
|
<el-radio-group v-model="radio3" size="small">
|
||||||
|
<el-radio-button label="静态代码分析" />
|
||||||
|
<el-radio-button label="架构一致性" />
|
||||||
|
<el-radio-button label="软件物料" />
|
||||||
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.dashboard {
|
.dashboard >>> .el-card {
|
||||||
padding: 20px;
|
margin-bottom: 8px;
|
||||||
background-color: #f4f5f7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-container {
|
.top-card {
|
||||||
display: grid;
|
width: 100%;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
height: 30vh;
|
||||||
gap: 10px; /* Reduce the gap to make cards closer */
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-box p {
|
.card-title {
|
||||||
margin: 10px 0;
|
margin-bottom: 0 !important;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
.app-info {
|
||||||
padding: 0;
|
display: flex;
|
||||||
list-style: none;
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
.app-card {
|
||||||
padding: 10px;
|
display: flex;
|
||||||
margin-bottom: 5px; /* Reduce margin for a tighter look */
|
flex-direction: row;
|
||||||
background: #f2f2f2;
|
align-items: center;
|
||||||
border-radius: 4px;
|
justify-content: flex-start;
|
||||||
|
width: calc(50% - 5px);
|
||||||
|
height: 10vh;
|
||||||
|
padding: 0.3vw;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #dde;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card > .right-info {
|
||||||
|
width: 140px;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -14,28 +14,6 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- <el-row :gutter="20" class="stats-row">-->
|
|
||||||
<!-- <el-col :span="8">-->
|
|
||||||
<!-- <div class="stats-card">-->
|
|
||||||
<!-- <h3>组件版本数</h3>-->
|
|
||||||
<!-- <div ref="componentVersionsChart" class="chart-container" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-col>-->
|
|
||||||
<!-- <el-col :span="8">-->
|
|
||||||
<!-- <div class="stats-card">-->
|
|
||||||
<!-- <h3>安全漏洞</h3>-->
|
|
||||||
<!-- <div ref="securityIssuesChart" class="chart-container" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-col>-->
|
|
||||||
<!-- <el-col :span="8">-->
|
|
||||||
<!-- <div class="stats-card">-->
|
|
||||||
<!-- <h3>有许可证的组件版本数</h3>-->
|
|
||||||
<!-- <div ref="licensedVersionsChart" class="chart-container" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-col>-->
|
|
||||||
<!-- </el-row>-->
|
|
||||||
|
|
||||||
<el-tabs v-model="activeTab">
|
<el-tabs v-model="activeTab">
|
||||||
<el-tab-pane label="软件依赖成分分析" name="1">
|
<el-tab-pane label="软件依赖成分分析" name="1">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
@ -59,7 +37,7 @@
|
|||||||
<el-table-column prop="lowRisk" label="低危" />
|
<el-table-column prop="lowRisk" label="低危" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="源代码静态检测" name="2">
|
<el-tab-pane label="Fuzzing扫描" name="2">
|
||||||
<!-- 这里可以添加源代码静态检测的内容 -->
|
<!-- 这里可以添加源代码静态检测的内容 -->
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
defineOptions({
|
|
||||||
name: "Welcome"
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>软件安全赋能平台</h1>
|
|
||||||
</template>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user