feat: 增加管理页面

src/views/project/ProjectDetail.vue

@@ -0,0 +1,70 @@
+<!-- src/components/ProjectDetails.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const projectName = ref("");
+
+onMounted(() => {
+  projectName.value = route.params.name as string;
+});
+
+const projectDetails = ref({
+  creator: "Asiv",
+  createTime: "2024-7-11 15:30:46",
+  team: "Asiv's Team",
+  scanDetails: {
+    softwareComposition: {
+      scanTimes: "0x111",
+      avgScanTime: "20s",
+      sourceBranch: "main"
+    },
+    componentCount: 23,
+    vulnerabilities: 0,
+    licenses: 0
+  }
+});
+</script>
+
+<template>
+  <div class="project-details">
+    <h1>项目详情: {{ projectName }}</h1>
+    <p>创建人: {{ projectDetails.creator }}</p>
+    <p>创建时间: {{ projectDetails.createTime }}</p>
+    <p>团队: {{ projectDetails.team }}</p>
+
+    <h2>扫描详情</h2>
+    <div class="scan-info">
+      <p>
+        软件成分分析扫描次数:
+        {{ projectDetails.scanDetails.softwareComposition.scanTimes }}
+      </p>
+      <p>
+        平均扫描时间:
+        {{ projectDetails.scanDetails.softwareComposition.avgScanTime }}
+      </p>
+      <p>
+        源代码分支:
+        {{ projectDetails.scanDetails.softwareComposition.sourceBranch }}
+      </p>
+    </div>
+
+    <h2>组件信息</h2>
+    <p>组件数量: {{ projectDetails.scanDetails.componentCount }}</p>
+    <p>漏洞数: {{ projectDetails.scanDetails.vulnerabilities }}</p>
+    <p>许可证数量: {{ projectDetails.scanDetails.licenses }}</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.project-details {
+  padding: 20px;
+}
+
+.scan-info {
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+</style>

src/views/project/ProjectManagement.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const getStatLabel = (key: string): string => {
+  const labels: { [key: string]: string } = {
+    totalProjects: "项目总数",
+    scanTimes: "扫描次数",
+    unscanned: "未扫描",
+    outdatedScans: "未更新扫描",
+    scanned: "已扫描"
+  };
+  return labels[key] || key;
+};
+
+const projectStats = ref({
+  totalProjects: 32,
+  scanTimes: 9,
+  unscanned: 2,
+  outdatedScans: 4,
+  scanned: 4
+});
+
+const projects = ref([
+  {
+    name: "TestProject",
+    status: "已更新",
+    riskLevel: "严重",
+    lastScan: "2024-7-12",
+    riskDistribution: "高-2-中-1-低-3",
+    scanType: "软件成分分析",
+    scanTime: "20s",
+    projectLink: "github.com/a/b",
+    projectSource: "Github"
+  }
+]);
+</script>
+
+<template>
+  <div class="project-management">
+    <div class="stats-container">
+      <div v-for="(value, key) in projectStats" :key="key" class="stat-card">
+        <p>{{ getStatLabel(key) }}</p>
+        <h2>{{ value }}</h2>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn">+ 新建项目</button>
+    </div>
+    <div class="filter-container">
+      <el-input type="text" placeholder="选择搜索类型(ID或name或者tags)" />
+      <el-input type="text" placeholder="根据搜索类型搜索" />
+    </div>
+    <table class="project-table">
+      <thead>
+        <tr>
+          <th>项目名称</th>
+          <th>更新状态</th>
+          <th>风险等级</th>
+          <th>最近一次扫描时间</th>
+          <th>风险分布</th>
+          <th>扫描类别</th>
+          <th>扫描耗费时间</th>
+          <th>项目地址</th>
+          <th>项目来源</th>
+          <th>扫描</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="project in projects" :key="project.name">
+          <td>
+            <a
+              :href="'https://' + project.projectLink"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ project.name }}
+            </a>
+          </td>
+          <td>{{ project.status }}</td>
+          <td>{{ project.riskLevel }}</td>
+          <td>{{ project.lastScan }}</td>
+          <td>{{ project.riskDistribution }}</td>
+          <td>{{ project.scanType }}</td>
+          <td>{{ project.scanTime }}</td>
+          <td>
+            <a
+              :href="'https://' + project.projectLink"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ project.projectLink }}
+            </a>
+          </td>
+          <td>{{ project.projectSource }}</td>
+          <td><button class="scan-btn">扫描</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.project-management {
+  padding: 20px;
+  background-color: #f4f5f7;
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  flex: 1;
+  padding: 20px;
+  margin: 0 10px;
+  text-align: center;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+
+.btn {
+  padding: 10px 20px;
+  color: white;
+  cursor: pointer;
+  background: #4caf50;
+  border: none;
+  border-radius: 4px;
+}
+
+.filter-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.filter-container input {
+  flex: 1;
+  padding: 10px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.project-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.project-table th,
+.project-table td {
+  padding: 8px;
+  text-align: left;
+  border: 1px solid #ddd;
+}
+
+.project-table th {
+  background-color: #f2f2f2;
+}
+
+.project-table td a {
+  color: #3498db;
+  text-decoration: none;
+}
+
+.scan-btn {
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  background: #3498db;
+  border: none;
+  border-radius: 4px;
+}
+</style>