first commit

.husky/pre-commit

@@ -1,10 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-[ -n "$CI" ] && exit 0
-
-PATH="/usr/local/bin:$PATH"
-
-# Perform lint check on files in the staging area through .lintstagedrc configuration
-pnpm exec lint-staged
+pnpm

build/info.ts

@@ -7,7 +7,7 @@ import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);
 
 const welcomeMessage = gradientString("cyan", "magenta").multiline(
-  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.github.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+  `UI自动化测试平台启动成功`
 );
 
 const boxenOptions: BoxenOptions = {

public/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M926.784 480H701.312A192.512 192.512 0 0 0 544 322.688V97.216A416.064 416.064 0 0 1 926.784 480m0 64A416.064 416.064 0 0 1 544 926.784V701.312A192.512 192.512 0 0 0 701.312 544zM97.28 544h225.472A192.512 192.512 0 0 0 480 701.312v225.472A416.064 416.064 0 0 1 97.216 544zm0-64A416.064 416.064 0 0 1 480 97.216v225.472A192.512 192.512 0 0 0 322.688 480H97.216z"></path></svg>

public/platform-config.json

@@ -1,6 +1,6 @@
 {
-  "Version": "5.7.0",
-  "Title": "PureAdmin",
+  "Version": "1.0.0",
+  "Title": "UI自动化测试平台",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

src/router/modules/case_execution.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/exec",
+  name: "TestCaseExecution",
+  component: () => import("@/views/case_exec/case_exec.vue"),
+  meta: {
+    icon: "ep:video-play",
+    title: "测试执行",
+    rank: 1
+  }
+};

src/router/modules/case_management.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/caselist",
+  name: "CaseManagement",
+  component: () => import("@/views/case_management/caselist.vue"),
+  meta: {
+    icon: "ep:document",
+    title: "用例管理",
+    rank: 2
+  }
+};

src/router/modules/project_management.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/project",
+  name: "ProjectManagement",
+  component: () => import("@/views/project_management/projectlist.vue"),
+  meta: {
+    icon: "ep:files",
+    title: "项目管理",
+    rank: 3
+  }
+};

src/router/modules/test_result.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/result",
+  name: "TestingResult",
+  component: () => import("@/views/test_result_management/testResultList.vue"),
+  meta: {
+    icon: "ep:data-line",
+    title: "测试结果",
+    rank: 4
+  }
+};

src/router/modules/testing_data.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/testdata",
+  name: "TestData",
+  component: () => import("@/views/test_data_management/testData.vue"),
+  meta: {
+    icon: "ep:box",
+    title: "数据管理",
+    rank: 5
+  }
+};

src/router/modules/total.ts

@@ -0,0 +1,23 @@
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/",
+  name: "Total",
+  component: Layout,
+  redirect: "/home/index",
+  meta: {
+    icon: "ep:location",
+    title: "测试总览",
+    rank: 1
+  },
+  children: [
+    {
+      path: "/home/index",
+      name: "TotalIndex",
+      component: () => import("@/views/home/index.vue"),
+      meta: {
+        title: "测试总览"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/user.ts

@@ -0,0 +1,10 @@
+export default {
+  path: "/user",
+  name: "UserManagement",
+  component: () => import("@/views/user_management/user.vue"),
+  meta: {
+    icon: "ep:user",
+    title: "用户管理",
+    rank: 6
+  }
+};

src/views/case_exec/case_exec.vue

@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/case_management/caselist.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>caselist</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/home/Cards.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-row :gutter="20">
+    <!-- one card -->
+    <el-col :span="6">
+      <div class="statistic-card">
+        <el-statistic :value="98500">
+          <template #title>
+            <div style="display: inline-flex; align-items: center">
+              项目数
+              <el-tooltip
+                effect="dark"
+                content="创建的项目数量"
+                placement="top"
+              >
+                <el-icon style="margin-left: 4px" :size="12">
+                  <Warning />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-statistic>
+      </div>
+    </el-col>
+    <!-- one card -->
+    <el-col :span="6">
+      <div class="statistic-card">
+        <el-statistic :value="693700">
+          <template #title>
+            <div style="display: inline-flex; align-items: center">
+              测试用例数
+              <el-tooltip
+                effect="dark"
+                content="测试用例的数量"
+                placement="top"
+              >
+                <el-icon style="margin-left: 4px" :size="12">
+                  <Warning />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-statistic>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="statistic-card">
+        <el-statistic :value="97" title="New transactions today">
+          <template #title>
+            <div style="display: inline-flex; align-items: center">
+              测试通过率
+              <el-tooltip
+                effect="dark"
+                content="测试通过的用例数/测试用例总数"
+                placement="top"
+              >
+                <el-icon style="margin-left: 4px" :size="12">
+                  <Warning />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #suffix>%</template>
+        </el-statistic>
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <div class="statistic-card">
+        <el-statistic :value="98500">
+          <template #title>
+            <div style="display: inline-flex; align-items: center">
+              测试报告数
+              <el-tooltip
+                effect="dark"
+                content="测试报告的数量"
+                placement="top"
+              >
+                <el-icon style="margin-left: 4px" :size="12">
+                  <Warning />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-statistic>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import { Warning } from "@element-plus/icons-vue";
+</script>
+
+<style scoped>
+:global(h2#card-usage ~ .example .example-showcase) {
+  background-color: var(--el-fill-color) !important;
+}
+
+.el-statistic {
+  --el-statistic-content-font-size: 28px;
+}
+
+.statistic-card {
+  height: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.green {
+  color: var(--el-color-success);
+}
+
+.red {
+  color: var(--el-color-error);
+}
+</style>

src/views/home/Introduce.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-card style="max-width: 480px; height: 100%">
+    <template #header>
+      <div class="card-header title-center">
+        <span style="font-weight: 800">UI自动化测试平台介绍</span>
+      </div>
+    </template>
+    <el-image
+      style="width: 100%; height: 15vh"
+      src="src\assets\img\DSCF4446.jpg"
+      fit="cover"
+      lazy
+    />
+    <p style="font-weight: 800">简介</p>
+    <p class="text item">sdssddssdsdsdsd</p>
+  </el-card>
+</template>
+
+<script setup></script>
+
+<style>
+.title-center {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/home/index.vue

@@ -0,0 +1,333 @@
+<template>
+  <el-main style="background-color: #f5f7fa; height: 100%">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <StatisticCard />
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 4vh">
+      <!-- 右侧执行成功率top -->
+      <el-col :span="6">
+        <el-card style="max-width: 480px; height: 100%">
+          <template #header>
+            <div
+              class="card-header"
+              style="display: flex; justify-content: center"
+            >
+              <span style="font-weight: 800">工程用例执行成功率TOP5</span>
+            </div>
+          </template>
+          <div
+            v-for="o in 5"
+            :key="o"
+            class="list-group-item item-color-normal"
+            style="display: flex; justify-content: space-between"
+          >
+            <p class="name">{{ "project " + o }}</p>
+            <!-- 需要补全v-if 显示不同颜色的成功率 -->
+            <p class="rate">80%</p>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 中部图表区域 -->
+      <el-col
+        :span="12"
+        style="
+          background-color: white;
+          border-radius: 4px;
+          box-shadow: var(--el-box-shadow-light);
+          padding: 2vh;
+        "
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div
+              id="total-success-rate-pie"
+              style="width: auto; height: 400px"
+            />
+          </el-col>
+          <el-col :span="12">
+            <div
+              id="success-rate-trend-line"
+              style="width: auto; height: 400px"
+            />
+          </el-col>
+        </el-row>
+      </el-col>
+
+      <!-- 简介区域 -->
+      <el-col :span="6">
+        <IntroCard />
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 2vh">
+      <el-col :span="24">
+        <el-table
+          :data="tableData"
+          stripe
+          style="
+            width: 100%;
+            border-radius: 4px;
+            box-shadow: var(--el-box-shadow-light);
+          "
+        >
+          <el-table-column prop="date" label="执行时间" width="300" />
+          <el-table-column prop="casename" label="用例名称" width="300" />
+          <el-table-column prop="project" label="所属项目" width="300" />
+          <el-table-column prop="user" label="执行用户" width="300">
+            <template #default="scope">
+              <el-popover
+                effect="light"
+                trigger="hover"
+                placement="top"
+                width="auto"
+              >
+                <template #default>
+                  <div>用户: {{ scope.row.user }}</div>
+                  <div>部门: {{ scope.row.user }}</div>
+                  <div>邮箱: {{ scope.row.project }}</div>
+                  <div>手机: {{ scope.row.project }}</div>
+                </template>
+                <template #reference>
+                  <el-tag>{{ scope.row.user }}</el-tag>
+                </template>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column label="执行结果" width="300">
+            <template #default="scope">
+              <div
+                v-if="scope.row.result == 'Pass'"
+                style="display: flex; align-items: center"
+              >
+                <el-icon>
+                  <CircleCheckFilled color="#529b2e" />
+                </el-icon>
+                <el-text class="mx-1" type="success" style="margin-left: 5px">{{
+                  scope.row.result
+                }}</el-text>
+              </div>
+              <div v-else style="display: flex; align-items: center">
+                <el-icon>
+                  <CircleCloseFilled color="#c45656" />
+                </el-icon>
+                <el-text class="mx-1" type="danger" style="margin-left: 5px">{{
+                  scope.row.result
+                }}</el-text>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <el-button type="primary" onclick="">查看</el-button>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+<script setup>
+defineOptions({
+  name: "Home"
+});
+import StatisticCard from "@/views/home/Cards.vue";
+import IntroCard from "@/views/home/Introduce.vue";
+import { getCurrentInstance, onMounted } from "vue";
+import moment from "moment";
+let internalInstance = getCurrentInstance();
+let echarts = internalInstance.appContext.config.globalProperties.$echarts;
+
+let SuccessRateTrendXAxis = [];
+for (let i = 7; i > 0; i--) {
+  let date = moment().subtract(i, "days").format("MM-DD");
+  SuccessRateTrendXAxis.push(date);
+}
+const tableData = [
+  {
+    date: "2024-07-19",
+    casename: "Case 1",
+    project: "Project 1",
+    user: "tom",
+    result: "Pass"
+  },
+  {
+    date: "2024-07-19",
+    casename: "Case 2",
+    project: "Project 1",
+    user: "tom",
+    result: "Fail"
+  },
+  {
+    date: "2024-07-19",
+    casename: "Case 3",
+    project: "Project 1",
+    user: "tom",
+    result: "Pass"
+  },
+  {
+    date: "2024-07-19",
+    casename: "Case 4",
+    project: "Project 1",
+    user: "tom",
+    result: "Pass"
+  }
+];
+
+const myEcharts = () => {
+  // 基于准备好的dom，初始化echarts实例
+  var totalSuccessRateChart = echarts.init(
+    document.getElementById("total-success-rate-pie")
+  );
+  var SuccessRateTrendChart = echarts.init(
+    document.getElementById("success-rate-trend-line")
+  );
+
+  // 指定图表的配置项和数据
+  const total_success_rate_pie_option = () => {
+    const option = {
+      title: {
+        text: "测试用例执行总成功率",
+        x: "center",
+        y: "bottom"
+      },
+      tooltip: {
+        trigger: "item",
+        formatter: "{b} : {c} ({d}%)"
+      },
+      legend: {
+        orient: "vertical",
+        left: 10,
+        data: ["成功", "失败"]
+      },
+      graphic: [
+        {
+          type: "text",
+          left: "center",
+          top: "45%",
+          style: {
+            text: `总成功率\n90%`,
+            textAlign: "center",
+            fill: "#4577ff",
+            width: 30,
+            height: 30,
+            fontSize: 20,
+            fontWeight: "bold"
+          }
+        }
+      ],
+      series: [
+        {
+          name: "测试结果占比",
+          type: "pie",
+          radius: ["50%", "80%"],
+          center: ["50%", "50%"],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: "center"
+          },
+          data: [
+            { value: 422, name: "成功", itemStyle: { color: "#00C292" } },
+            { value: 42, name: "失败", itemStyle: { color: "#E46A76" } }
+          ],
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: "#fff",
+            borderWidth: 2
+          },
+          emphasis: {}
+        }
+      ]
+    };
+    return option;
+  };
+  const success_rate_trend_line_option = () => {
+    const option = {
+      title: {
+        text: "近7天测试用例执行成功率变化趋势",
+        x: "center",
+        y: "bottom"
+      },
+      tooltip: {
+        trigger: "axis",
+        formatter: "日期 : {b}<br />成功率 : {c}%"
+      },
+      xAxis: {
+        type: "category",
+        data: SuccessRateTrendXAxis
+      },
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            show: true,
+            interval: "auto",
+            formatter: "{value} %"
+          },
+          show: true
+        }
+      ],
+      series: [
+        {
+          data: [23, 65, 24, 32, 22, 22, 100],
+          type: "line",
+          label: {
+            show: true, //开启显示
+            position: "top", //在上方显示
+            formatter: "{c}%", //显示百分号
+            textStyle: {
+              //数值样式
+              color: "#303133", //字体颜色
+              fontSize: 12 //字体大小
+            }
+          }
+        }
+      ]
+    };
+    return option;
+  };
+
+  // 使用刚指定的配置项和数据显示图表。
+  totalSuccessRateChart.setOption(total_success_rate_pie_option());
+  SuccessRateTrendChart.setOption(success_rate_trend_line_option());
+
+  window.onresize = () => {
+    totalSuccessRateChart.resize();
+    SuccessRateTrendChart.resize();
+  };
+};
+
+onMounted(() => {
+  myEcharts();
+});
+</script>
+<style>
+.item-color-normal {
+  color: #4577ff;
+  background: #ecf5ff;
+  border: 1px solid #b3d8ff;
+}
+
+.list-group-item {
+  height: 35px;
+  line-height: 35px;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 0 5px;
+  margin: 0 5px 5px 5px;
+  display: flex;
+}
+
+.name {
+  margin: auto 2px;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+}
+
+.rate {
+  margin: auto 2px;
+}
+</style>

src/views/project_management/projectlist.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>proj list</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/test_data_management/testData.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>testdata</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/test_result_management/testResultList.vue

@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/user_management/user.vue

@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>