add TcFinalList

.metals/metals.lock.db

@@ -0,0 +1,6 @@
+#FileLock
+#Thu Mar 14 21:57:20 CST 2024
+server=localhost\:54394
+hostName=localhost
+method=file
+id=18e3d40cbe2e66c4351a55537f8a44a988ba14a930d

components.d.ts

@@ -8,18 +8,25 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    Layout: typeof import('./src/components/Layout.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TCFinalList: typeof import('./src/components/TCFinalList.vue')['default']
     TCList: typeof import('./src/components/TCList.vue')['default']
     Upload: typeof import('./src/components/Upload.vue')['default']
   }

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.6.0",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0"

src/components/Layout.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+      <main><router-view /></main>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  </script>
+  
+  <style scoped>
+  /* 添加共享布局样式 */
+  .main {
+    position: absolute;
+    top: 50px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;  /* 距离右边0像素 */
+    padding: 10px;
+    overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
+    /* background-color: red; */
+  }
+  </style>
+  

src/components/TCFinalList.vue

@@ -0,0 +1,120 @@
+<template>
+    <el-container>
+      <el-main>
+        <el-card class="card">
+            <el-table :data="tableData" border height="300" style="width: 100%">
+            <el-table-column prop="编号" label="编号" width="100" />
+            <el-table-column prop="用例标题" label="用例标题" width="180" />
+            <el-table-column prop="前置条件" label="前置条件" width="180" />
+            <el-table-column prop="步骤描述" label="步骤描述" width="180" />
+            <el-table-column prop="预期结果" label="预期结果" width="180" />
+            </el-table>
+        </el-card>
+      </el-main>
+      <el-footer>
+        <div class="button-container">
+            <el-button type="primary" class="custom-button" @click="gotoLastPage">上一步</el-button>
+            <el-button type="primary" class="custom-button" @click="exportTestCase">导出</el-button>
+        </div>
+      </el-footer>
+    </el-container>
+  </template>
+
+<style scoped>
+.button-container {
+    display: flex;
+    justify-content: flex-end; /* 让按钮之间的空间均匀分布 */
+}
+
+.custom-button {
+  width: 100px; /* 设置按钮的宽度为相同的固定值 */
+}
+
+</style>
+  
+  <script lang="ts" setup>
+  const tableData = [
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+    {
+      编号: '2016',
+      用例标题: 'Tom',
+      前置条件: 'No. 189, Grove St, Los Angeles',
+      步骤描述: 'aaaaaa',
+      预期结果: 'aaaa',
+    },
+  ]
+
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const gotoLastPage = () => {
+    router.push('/testcaseList');
+  };
+
+  const exportTestCase = () => {
+    
+  }
+  </script>
+  

src/components/TCList.vue

@@ -1,112 +1,158 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from 'vue-router';
 
-import { ref } from 'vue'
-
-const input = ref("")
+const input = ref("");
 
 type TestCase = {
   id: number;
   title: string;
   description: string;
-}
-const testCase = ref<TestCase[]>([])
+};
+const testCase = ref<TestCase[]>([]);
 testCase.value = [
-    {
-        'id':1,
-        'title':'这是标题这是标题这是标题这是标题这是标题这是标题',
-        'description':'娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸'
-    },
-    {
-        'id':1,
-        'title':'这是标题',
-        'description':'这是描述'
-    },
-    {
-        'id':1,
-        'title':'这是标题',
-        'description':'这是描述'
-    }
-]
+  {
+    id: 1,
+    title: "这是标题这是标题这是标题这是标题这是标题这是标题",
+    description:
+      "娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸",
+  },
+  {
+    id: 1,
+    title: "这是标题",
+    description: "这是描述",
+  },
+  {
+    id: 1,
+    title: "这是标题",
+    description: "这是描述",
+  },
+];
 
+const handleImproveButton = (p: { row: any }) => {
+  console.log(p.row);
+};
 
-const handleImproveButton = (p: { row: any; })=>{
-    console.log(p.row)
-}
+const router = useRouter();
+const gotoNextPage = () => {
+    router.push('/tcFinalList');
+  };
 </script>
 
 <template>
-  <div class="root">
-    <el-card class="card">
-      <el-scrollbar class="scrollbar">
-        <el-row class = "titleTagRow">
-            <el-tag class="titleTag"
-      type='primary'
-      effect="light"
-      size="large"
-      round
-    >当前用例列表</el-tag>
-        </el-row>
-        <el-col class="container">
-            <el-table :data="testCase" style="width: 100%" border>
-    <el-table-column label="编号" prop="id" width="60"/>
-    <el-table-column label="用例标题" prop="title" min-width="200" />
-    <el-table-column show-overflow-tooltip label="用例描述" prop="description"  min-width="150"/>
-    <el-table-column width="60">  <template #default="scope">    <el-button type="primary" link size="small" @click="handleImproveButton(scope)"
-          >细化</el-button
+  <el-container>
+    <el-main>
+      <div class="root">
+        <el-card class="card">
+          <el-scrollbar class="scrollbar">
+            <el-row class="titleTagRow">
+              <el-tag
+                class="titleTag"
+                type="primary"
+                effect="light"
+                size="large"
+                round
+                >当前用例列表</el-tag
+              >
+            </el-row>
+            <el-col class="container">
+              <el-table :data="testCase" style="width: 100%" border>
+                <el-table-column label="编号" prop="id" width="60" />
+                <el-table-column
+                  label="用例标题"
+                  prop="title"
+                  min-width="200"
+                />
+                <el-table-column
+                  show-overflow-tooltip
+                  label="用例描述"
+                  prop="description"
+                  min-width="150"
+                />
+                <el-table-column width="60">
+                  <template #default="scope">
+                    <el-button
+                      type="primary"
+                      link
+                      size="small"
+                      @click="handleImproveButton(scope)"
+                      >细化</el-button
+                    >
+                  </template>
+                </el-table-column>
+                <el-table-column width="60">
+                  <el-button type="primary" link size="small" @click=""
+                    >删除</el-button
+                  ></el-table-column
+                >
+              </el-table>
+            </el-col>
+          </el-scrollbar>
+          <el-input placeholder="请输入" v-model="input" clearable>
+            <template slot="append"><el-button></el-button></template>
+          </el-input>
+        </el-card>
+      </div>
+    </el-main>
+    <el-footer>
+      <div class="button-container">
+        <el-button type="primary" class="custom-button" @click="gotoNextPage"
+          >下一步</el-button
         >
-    </template> </el-table-column>
-        <el-table-column width="60">        <el-button  type="primary" link size="small" @click=""
-          >删除</el-button
-        ></el-table-column>
-  </el-table>
-        </el-col>
-      </el-scrollbar>
-        <el-input placeholder="请输入" v-model="input" clearable>
-                <template slot="append"><el-button  ></el-button></template>
-        </el-input>
-    </el-card>
-  </div>
-
-
+      </div>
+    </el-footer>
+  </el-container>
 </template>
 
 <style scoped>
+.button-container {
+    display: flex;
+    justify-content: flex-end; /* 让按钮之间的空间均匀分布 */
+}
 
-.titleTag{
-    height: 2em;
-    width: 8em;
-    font-size: large;
+.custom-button {
+  width: 100px; /* 设置按钮的宽度为相同的固定值 */
 }
-.container{
+
+.titleTag {
+  height: 2em;
+  width: 8em;
+  font-size: large;
+}
+.container {
   width: 60vw;
   padding: 1em 3em;
 }
-.rowContainer{
+.rowContainer {
   display: flex;
   justify-content: center;
   margin: 1em 0;
 }
 .root {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
-.robotMessage{
-  display: flex; flex-direction: row-reverse; align-items: flex-start;
+.robotMessage {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
 }
-.customerMessage{
-  display: flex; flex-direction: row; align-items: flex-start;
+.customerMessage {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
 }
-.textArea{
+.textArea {
   display: inline-block;
   width: 300px;
 }
 
-.card{
+.card {
   margin: auto;
 }
-.scrollbar{
-  height:400px;
+.scrollbar {
+  height: 400px;
   width: fit-content;
 }
 </style>

src/components/Upload.vue

@@ -1,5 +1,8 @@
 <template>
-    <el-upload
+  <div class="common-layout">
+    <el-container>
+      <el-main>
+        <el-upload
       class="upload-demo"
       drag
       action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
@@ -11,12 +14,31 @@
       </div>
       <template #tip>
         <div class="el-upload__tip">
-          jpg/png files with a size less than 500kb
+          word files with a size less than 500kb
         </div>
       </template>
     </el-upload>
+      </el-main>
+      <el-footer>
+        <el-button type="primary" @click="gotoTargetPage">Next Page
+          <el-icon class="el-icon--right">
+            <ArrowRight />
+          </el-icon>
+        </el-button>
+      </el-footer>
+    </el-container>
+  </div>
+    
+    
   </template>
   
   <script setup lang="ts">
-  </script>
-  
+  import {ArrowRight} from '@element-plus/icons-vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  const gotoTargetPage = () => {
+    router.push('/testcaseList');
+  };
+  </script>

src/router/index.ts

@@ -1,7 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
+import LayoutVue from '../components/Layout.vue'
 import AppVue from '../App.vue'
 import UploadVue from '../components/Upload.vue'
 import TCListVue from '../components/TCList.vue'
+import TCFinalListVue from '../components/TCFinalList.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,11 +17,28 @@ const router = createRouter({
         }, {
             path: '/upload',
             name: 'upload',
-            component: UploadVue,
+            component: LayoutVue,
+            children: [
+                {path: '', 
+                component: UploadVue}
+            ]
+            
         }, {
             path: '/testcaseList',
             name: 'testcaseList',
-            component: TCListVue,
+            component: LayoutVue,
+            children: [
+                {path: '', 
+                component: TCListVue}
+            ]
+        }, {
+            path: '/tcFinalList',
+            name: 'tcFinalList',
+            component: LayoutVue,
+            children: [
+                {path: '', 
+                component: TCFinalListVue}
+            ]
         }
     ]
 })