style: 样式修改

electron.vite.config.ts

@@ -5,6 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import tailwindcss from '@tailwindcss/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
 export default defineConfig({
   main: {
@@ -45,13 +46,21 @@ export default defineConfig({
       AutoImport({
         resolvers: [
           // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
-          ElementPlusResolver()
+          ElementPlusResolver(),
+          // 自动导入图标组件
+          IconsResolver({})
         ],
         imports: ['vue', 'vue-router', '@vueuse/core'],
         dts: 'src/types/auto-imports.d.ts' // 自动生成 auto-imports.d.ts
       }),
       Components({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [
+          ElementPlusResolver(),
+          IconsResolver({
+            // 图标库，其他图标库 https://icon-sets.iconify.design/
+            enabledCollections: ['ep']
+          })
+        ],
         dirs: ['src/components', 'src/**/components', 'src/**/components/**/*.vue'],
         dts: 'src/types/auto-components.d.ts' // 自动生成 components.d.ts
       })
@@ -74,7 +83,9 @@ export default defineConfig({
         'element-plus/es/components/col/style/css',
         'element-plus/es/components/switch/style/css',
         'element-plus/es/components/checkbox/style/css',
-        '@vue/reactivity'
+        '@vue/reactivity',
+        'element-plus/es/components/config-provider/style/css',
+        'element-plus/es/locale/lang/zh-cn'
       ]
     }
   }

package-lock.json

@@ -43,6 +43,7 @@
         "sass-embedded": "^1.89.2",
         "typescript": "^5.8.3",
         "unplugin-auto-import": "^19.3.0",
+        "unplugin-icons": "^22.2.0",
         "unplugin-vue-components": "^28.7.0",
         "vite": "^6.3.5",
         "vue": "^3.5.16",
@@ -63,6 +64,30 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@antv/x6": {
       "version": "1.34.5",
       "resolved": "https://registry.npmmirror.com/@antv/x6/-/x6-1.34.5.tgz",
@@ -1105,6 +1130,43 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@imengyu/vue-scroll-rect": {
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.7.tgz",
@@ -6339,6 +6401,13 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lazy-val": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/lazy-val/-/lazy-val-1.0.5.tgz",
@@ -7938,6 +8007,13 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
@@ -9571,6 +9647,13 @@
       "integrity": "sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==",
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -9909,6 +9992,51 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/unplugin-icons": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-22.2.0.tgz",
+      "integrity": "sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/utils": "^2.3.0",
+        "debug": "^4.4.1",
+        "local-pkg": "^1.1.1",
+        "unplugin": "^2.3.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@svgr/core": ">=7.0.0",
+        "@svgx/core": "^1.0.1",
+        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
+        "vue-template-compiler": "^2.6.12",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "peerDependenciesMeta": {
+        "@svgr/core": {
+          "optional": true
+        },
+        "@svgx/core": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        },
+        "vue-template-es2015-compiler": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.2.4.tgz",

package.json

@@ -55,6 +55,7 @@
     "sass-embedded": "^1.89.2",
     "typescript": "^5.8.3",
     "unplugin-auto-import": "^19.3.0",
+    "unplugin-icons": "^22.2.0",
     "unplugin-vue-components": "^28.7.0",
     "vite": "^6.3.5",
     "vue": "^3.5.16",

src/App.vue

@@ -1,4 +1,13 @@
 <template>
-  <RouterView />
+  <el-config-provider :locale="locale">
+    <router-view />
+  </el-config-provider>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+// element 国际化-默认中文
+const locale = computed(() => {
+  return zhCn
+})
+</script>

src/assets/style/base.css → src/assets/styles/base.scss

@@ -1,4 +1,14 @@
 :root {
+  // layout-header
+  --layout-header-bg-color: #8b9e7e;
+  --layout-header-height: 55px;
+  --layout-header-menu-height: 54px;
+
+  // layout-main
+  --layout-main-bg-color: #ffffff;
+  // card-bg
+  --bg-color: #ffffff;
+  --border-color: #e4e7ed;
   --ev-c-primary: #1a73e8;
   --ev-c-dark: #0d47a1;
   --ev-c-secondary: #26a69a;

src/assets/styles/common.scss

@@ -0,0 +1,131 @@
+/* flex */
+.flx-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flx-justify-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flx-align-center {
+  display: flex;
+  align-items: center;
+}
+
+/* clearfix */
+.clearfix::after {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  clear: both;
+  content: '';
+}
+
+/* 文字单行省略号 */
+.sle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 文字多行省略号 */
+.mle {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+/* 文字多了自动換行 */
+.break-word {
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.2s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateX(30px);
+}
+
+/* breadcrumb-transform */
+.breadcrumb-enter-active {
+  transition: all 0.2s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+/* scroll bar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--el-border-color-darker);
+  border-radius: 20px;
+}
+
+/* nprogress */
+#nprogress .bar {
+  background: var(--el-color-primary) !important;
+}
+
+#nprogress .spinner-icon {
+  border-top-color: var(--el-color-primary) !important;
+  border-left-color: var(--el-color-primary) !important;
+}
+
+#nprogress .peg {
+  box-shadow:
+    0 0 10px var(--el-color-primary),
+    0 0 5px var(--el-color-primary) !important;
+}
+
+/* 外边距、内边距全局样式 */
+@for $i from 0 through 100 {
+  .mt#{$i} {
+    margin-top: #{$i}px !important;
+  }
+  .mr#{$i} {
+    margin-right: #{$i}px !important;
+  }
+  .mb#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+  .ml#{$i} {
+    margin-left: #{$i}px !important;
+  }
+  .pt#{$i} {
+    padding-top: #{$i}px !important;
+  }
+  .pr#{$i} {
+    padding-right: #{$i}px !important;
+  }
+  .pb#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+  .pl#{$i} {
+    padding-left: #{$i}px !important;
+  }
+}

src/assets/styles/custom.scss

@@ -0,0 +1,159 @@
+/* custom card */
+.card {
+  box-sizing: border-box;
+  padding: 12px;
+  overflow-x: hidden;
+  background-color: var(--bg-color);
+}
+.table-card {
+  box-sizing: border-box;
+  overflow-x: hidden;
+  background-color: var(--bg-color);
+}
+
+/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
+.no-card {
+  .card {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .table-search {
+    padding: 18px 0 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+.content-box {
+  height: 100%;
+}
+
+/* proTable */
+.table-box,
+.table-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  // table-search 表格搜索样式
+  .table-search {
+    padding: 18px 18px 0;
+    margin-bottom: 4px;
+    border-bottom: 1px solid var(--border-color);
+    .el-form {
+      .el-form-item__content > * {
+        width: 100%;
+      }
+      .el-form-item {
+        margin-bottom: 12px;
+      }
+
+      // 去除时间选择器上下 padding
+      .el-range-editor.el-input__wrapper {
+        padding: 0 10px;
+      }
+    }
+    .operation {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 18px;
+    }
+  }
+
+  // 表格 header 样式
+  .table-header {
+    .header-button-lf {
+      float: left;
+    }
+    .header-button-ri {
+      float: right;
+    }
+    .el-button {
+      margin-bottom: 15px;
+    }
+  }
+
+  // el-table 表格样式
+  .el-table {
+    flex: 1;
+
+    // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
+    table {
+      width: 100%;
+    }
+    .el-table__header th {
+      height: 45px;
+      font-size: 15px;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+      background: var(--el-fill-color-light);
+    }
+    .el-table__row {
+      height: 45px;
+      font-size: 14px;
+      .move {
+        cursor: move;
+        .el-icon {
+          cursor: move;
+        }
+      }
+    }
+
+    // 设置 el-table 中 header 文字不换行，并省略
+    .el-table__header .el-table__cell > .cell {
+      white-space: nowrap;
+    }
+
+    // 解决表格数据为空时样式不居中问题(仅在element-plus中)
+    .el-table__empty-block {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .table-empty {
+        line-height: 30px;
+      }
+    }
+    &.is-scrolling-none {
+      th.el-table-fixed-column--left,
+      th.el-table-fixed-column--right {
+        background-color: var(--el-fill-color-light);
+      }
+    }
+
+    // table 中 image 图片样式
+    .table-image {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  }
+
+  // 表格 pagination 样式
+  .el-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
+}
+
+/* main-box (树形表格 DeptTree 页面会使用，左右布局 flex) */
+.main-box {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .table-box {
+    // 这里减去的是 DeptTree 组件宽度
+    width: calc(100% - 230px);
+  }
+}
+
+/* mask image */
+.mask-image {
+  padding-right: 50px;
+  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+}

src/assets/styles/element.scss

@@ -0,0 +1,62 @@
+/* 设置 notification、message 层级在 loading 之上 */
+.el-message,
+.el-message-box,
+.el-notification {
+  z-index: 4000 !important;
+}
+
+/* el-alert */
+.el-alert {
+  border: 1px solid;
+}
+
+/* el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 16px 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--border-color);
+    span {
+      font-size: 17px;
+      line-height: 17px;
+      color: var(--el-text-color-primary) !important;
+    }
+  }
+  .el-drawer__footer {
+    border-top: 1px solid var(--border-color);
+  }
+
+  // select 样式
+  .el-select {
+    width: 100%;
+  }
+
+  // drawer-form 中存在两列 form-item 样式
+  .drawer-multiColumn-form {
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item {
+      width: 47%;
+      &:nth-child(2n-1) {
+        margin-right: 5%;
+      }
+    }
+  }
+}
+
+/* el-dialog */
+.el-dialog {
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--border-color);
+    .el-dialog__title {
+      font-size: 17px;
+    }
+  }
+}
+.el-upload-list.is-disabled {
+  .el-upload {
+    display: none;
+  }
+}

src/assets/styles/element/index.scss

@@ -0,0 +1,22 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #009688
+    ),
+    'success': (
+      'base': #52c41a
+    ),
+    'warning': (
+      'base': #faad14
+    ),
+    'danger': (
+      'base': #ff4d4f
+    ),
+    'error': (
+      'base': #ff4d4f
+    )
+  )
+);
+
+// 引入暗黑模式
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss';

src/assets/styles/index.scss

@@ -0,0 +1,9 @@
+@use '@/assets/styles/main';
+
+@use '@/assets/styles/common';
+
+@use '@/assets/styles/base';
+
+@use '@/assets/styles/element';
+
+@use '@/assets/styles/custom';

src/assets/style/main.css → src/assets/styles/main.scss

@@ -1,10 +1,11 @@
-@import 'tailwindcss';
-@import './base.css';
+@use 'tailwindcss';
 html,
 body,
 #app {
   width: 100%;
   height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 body {

src/layouts/index.scss

@@ -0,0 +1,20 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+}
+.el-header {
+  box-sizing: border-box;
+  height: 55px;
+  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
+}
+.el-main {
+  box-sizing: border-box;
+  padding: 0;
+  overflow-x: hidden;
+}
+.el-footer {
+  height: auto;
+  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
+  text-align: center;
+  border-top: 1px solid var(--border-color);
+}

src/layouts/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="app-container">
-    <div class="head-menu">
+  <el-container class="layout">
+    <el-header>
       <el-button color="#626aef" @click="handleClickMenu('/')">测试用例</el-button>
       <el-button color="#626aef" @click="handleClickMenu('/flow')">用例设计</el-button>
-    </div>
-    <div class="main-container">
+    </el-header>
+    <el-main>
       <router-view />
-    </div>
-    <div class="status-bar">
+    </el-main>
+    <el-footer>
       <div id="version-info">版本: {{ version }}</div>
-    </div>
-  </div>
+    </el-footer>
+  </el-container>
 </template>
 
 <script setup lang="tsx" name="Layout">
@@ -22,28 +22,5 @@ const handleClickMenu = (path: string) => {
 }
 </script>
 <style lang="scss" scoped>
-.app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  .head-menu {
-    background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
-    height: 55px;
-  }
-}
-
-.main-container {
-  position: relative;
-  height: 100vh;
-  overflow-y: auto;
-}
-
-.status-bar {
-  display: flex;
-  justify-content: center;
-  padding: 8px 20px;
-  font-size: 12px;
-  background: linear-gradient(135deg, var(--ev-c-primary), var(--ev-c-dark));
-  color: var(--ev-c-white);
-}
+@use './index';
 </style>

src/main.ts

@@ -1,4 +1,8 @@
-import '@/assets/style/main.css'
+import '@/assets/styles/index.scss'
+// element css
+import 'element-plus/dist/index.css'
+// element dark css
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { setupRouter } from '@/router'

src/types/auto-components.d.ts

@@ -15,12 +15,23 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

src/views/test/index.vue

@@ -1,5 +1,166 @@
 <template>
-  <div>列表</div>
+  <div class="table-box">
+    <div class="card table-search">
+      <el-form :model="formInline" label-width="120">
+        <el-row :gutter="10">
+          <el-col :span="10">
+            <el-form-item label="用例名称">
+              <el-input v-model="formInline.user" placeholder="请输入用例名称" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="用例类型">
+              <el-select v-model="formInline.region" placeholder="请选择类型" clearable>
+                <el-option label="故障注入" value="1" />
+                <el-option label="普通测试" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="table-card table-main">
+      <div class="table-header">
+        <div class="header-button-lf">
+          <el-button type="primary" icon="CirclePlus"> 新增组织 </el-button>
+          <el-button type="danger" icon="Delete" plain> 批量删除 </el-button>
+        </div>
+      </div>
+      <el-table :data="tableData" border ref="tableRef">
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column prop="date" label="用例名称" width="180" />
+        <el-table-column prop="date" label="用例类型" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+
+        <el-table-column fixed="right" label="操作" min-width="120">
+          <template #default>
+            <el-button link type="primary" size="small" @click="handleClick">详情 </el-button>
+            <el-button link type="primary" size="small">流程查看</el-button>
+            <el-button link type="primary" size="small">流程设计</el-button>
+            <el-button link type="primary" size="small">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- <div> -->
+      <!-- 分页组件 -->
+      <el-pagination
+        :background="true"
+        :current-page="pageable.pageNum"
+        :page-size="pageable.pageSize"
+        :page-sizes="[10, 25, 50, 100]"
+        :total="pageable.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </div>
+    <!-- </div> -->
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const tableRef = ref()
+const pageable = {
+  // 当前页数
+  pageNum: 1,
+  // 每页显示条数
+  pageSize: 10,
+  // 总条数
+  total: 0
+}
+const formInline = reactive({
+  user: '',
+  region: '',
+  date: ''
+})
+
+const handleClick = () => {
+  console.log('click')
+}
+
+/**
+ * @description 每页条数改变
+ * @param {Number} val 当前条数
+ * @return void
+ * */
+const handleSizeChange = (val: number) => {}
+
+/**
+ * @description 当前页改变
+ * @param {Number} val 当前页
+ * @return void
+ * */
+const handleCurrentChange = (val: number) => {}
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
+</script>
 <style lang="scss" scoped></style>