add.导航栏

components.d.ts

@@ -12,19 +12,29 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     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']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSubmenu: typeof import('element-plus/es')['ElSubmenu']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    Home: typeof import('./src/components/Home.vue')['default']
     Layout: typeof import('./src/components/Layout.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
     LoginView: typeof import('./src/components/Login.vue')['default']

package-lock.json

@@ -64,7 +64,7 @@
     },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"

src/components/Home.vue

@@ -0,0 +1,168 @@
+<template>
+<!--  <div class="common-layout">-->
+      <el-container class="container">
+        <el-header style="background-color: aliceblue;">
+           <div style="font-size: x-large;text-align: start">
+             <span >测试用例生成系统</span>
+           </div>
+            <el-icon size="40" ><Avatar/></el-icon>
+        </el-header>
+        <el-container>
+          <!-- 侧边栏 -->
+          <el-aside :width="isCollapse ? '64px':'200px'">
+            <!-- 侧边栏菜单区域 -->
+            <!-- 侧边栏菜单区域 -->
+            <el-menu
+                default-active="2"
+                class="el-menu-vertical-demo"
+                @open="handleOpen"
+                @close="handleClose"
+                router
+            >
+              <el-menu-item index="upload">
+                <el-icon><Plus /></el-icon>
+                <span style="font-size: large">生成测试用例</span>
+              </el-menu-item>
+              <el-sub-menu index="2">
+                <template #title>
+                  <el-icon><Collection /></el-icon>
+                  <span style="font-size: large">任务列表</span>
+                </template>
+                <el-menu-item-group title="新建挡板.txt" style="text-align: center">
+                  <el-menu-item index="testcaseList">用例列表展示</el-menu-item>
+                  <el-menu-item index="tcFinalList">生成完整测试用例</el-menu-item>
+                  <el-menu-item index="">知识图谱</el-menu-item>
+                </el-menu-item-group>
+                <el-menu-item-group title="上传图片.txt">
+                  <el-menu-item index="1-3">item three</el-menu-item>
+                </el-menu-item-group>
+                <el-sub-menu index="1-4">
+                  <template #title>item four</template>
+                  <el-menu-item index="1-4-1">item one</el-menu-item>
+                </el-sub-menu>
+              </el-sub-menu>
+
+              <el-menu-item index="4">
+                <el-icon><setting /></el-icon>
+                <span style="font-size: large">不知道放什么</span>
+              </el-menu-item>
+            </el-menu>
+          </el-aside>
+          <!-- 右侧内容主体区域 -->
+          <el-main>
+            <!-- 路由占位符 -->
+            <router-view></router-view>
+          </el-main>
+        </el-container>
+<!--        <el-container>-->
+<!--          <el-aside width="200px" > Aside </el-aside>-->
+<!--          <el-main>Main</el-main>-->
+<!--        </el-container>-->
+      </el-container>
+<!--  </div>-->
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      // 左侧菜单数据对象
+      menulist: [],
+      // 字体图标对象
+      iconsObj: {
+        125: 'iconfont icon-users',
+        103: 'iconfont icon-tijikongjian',
+        101: 'iconfont icon-shangpin',
+        102: 'iconfont icon-danju',
+        145: 'iconfont icon-baobiao'
+      },
+      // 是否折叠
+      isCollapse: false
+    }
+  },
+  created () {
+    this.getMenuList()
+  },
+  methods: {
+    logout () {
+      window.sessionStorage.clear()
+      this.$router.push('/login')
+    },
+    // 获取所有的菜单数据
+    async  getMenuList () {
+      const { data: res } = await this.$http.get('menus')
+      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
+      // 成功了，进行赋值
+      this.menulist = res.data
+      console.log(res)
+    },
+    // 点击按钮，切换菜单的折叠与展开
+    toggleCollapse () {
+      this.isCollapse = !this.isCollapse
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.common-layout {
+  display: flex;
+  position: relative;
+  margin: 0;
+  height: 100%;
+  width: 100%
+}
+.admin-home {
+  height: 100vh;
+
+  width: 100%
+}
+
+
+.logo {
+  /* 样式 */
+}
+
+.user-info {
+  cursor: pointer;
+}
+
+
+.container {
+  width: 100%;
+  height: 100vh;
+
+}
+
+
+.el-header{
+  background-color: aliceblue;
+  display: flex;
+  /*// 让它贴标左右对齐*/
+  justify-content: space-between;
+  /*// 清空图片左侧padding*/
+  padding-left: 0;
+  /*// 按钮居中*/
+  align-items: center;
+  /*// 文本颜色*/
+  color: black;
+  /*// 设置文本字体大小*/
+  font-size: 20px;
+}
+
+el-header.div{
+  /*// 弹性布局*/
+  display: flex;
+  /*// 纵向上居中对齐*/
+  align-items: center;
+}
+el-header.div.span {
+  margin-left: 15px;
+
+}
+
+</style>
+

src/components/Login.vue

@@ -49,7 +49,7 @@ export default defineComponent({
           // 将用户信息存储到sessionStorage中
           sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
           // 跳转页面到首页
-          router.push('/upload');
+          router.push('/home');
           // 显示后端响应的成功信息
           ElMessage.success("登录成功！")
         } else {  // 当响应的编码不为 0 时，说明登录失败

src/components/TCFinalList.vue

@@ -103,6 +103,7 @@ function parse() {
       },
       data: data,
     };
+
     //格式还是原来的格式
     axios(fullConfig)
         .then((response: AxiosResponse<any>) => {

src/components/Upload.vue

@@ -2,9 +2,8 @@
 <template>
   <div class="common-layout">
     <transition name="el-fade-in-linear">
-      <div v-if="showBox" class="PrupBox">
+      <div  class="PrupBox">
         <el-form label-width="80px" style="max-width:350px; margin:0 auto; margin-top:5vw;">
-
           <el-form-item label="上传文件:">
             <div class="boxjia" @click="uploadDocx">
               <input ref='uploadInput' type="file" class="dl-none" name="icon" @change="dealfilechange"
@@ -19,26 +18,26 @@
     </transition>
     <el-container>
       <el-main>
-        <span style="color:#409eff; cursor:pointer" @click="uploadFn">上传文件</span>
-        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="el-upload__text">
-          <em>Click to upload</em>
-          <br>
-          txt files with a size less than 500kb
-        </div>
+        <span style="color:#020a13; font-size: x-large">新建生成测试用例任务</span>
+<!--        <el-icon class="el-icon&#45;&#45;upload"><upload-filled /></el-icon>-->
+<!--        <div class="el-upload__text">-->
+<!--          <em>Click to upload</em>-->
+<!--          <br>-->
+<!--          txt files with a size less than 500kb-->
+<!--        </div>-->
 <!--        <template #tip>-->
 <!--          <div class="el-upload__tip">-->
 <!--            word files with a size less than 500kb-->
 <!--          </div>-->
 <!--        </template>-->
       </el-main>
-      <el-footer>
-        <el-button type="primary" @click="gotoTargetPage">下一步
-          <el-icon class="el-icon--right">
-            <ArrowRight />
-          </el-icon>
-        </el-button>
-      </el-footer>
+<!--      <el-footer>-->
+<!--        <el-button type="primary" @click="gotoTargetPage">下一步-->
+<!--          <el-icon class="el-icon&#45;&#45;right">-->
+<!--            <ArrowRight />-->
+<!--          </el-icon>-->
+<!--        </el-button>-->
+<!--      </el-footer>-->
     </el-container>
   </div>
 </template>

src/main.ts

@@ -3,12 +3,15 @@ import './style.css'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import router from './router'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 const pinia = createPinia()
 const app = createApp(App)
-
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 pinia.use(piniaPluginPersistedstate);//pinia数据持久化
 app.use(router)
 app.use(ElementPlus)

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import LayoutVue from '../components/Layout.vue'
 import LoginVue from '../components/Login.vue'
 import AppVue from '../App.vue'
+import HomeVue from '../components/Home.vue'
 import RegisterVue from '../components/Register.vue'
 import UploadVue from '../components/Upload.vue'
 import TCListVue from '../components/TCList.vue'
@@ -12,10 +13,25 @@ const router = createRouter({
     routes: [{
         path: '/',
         redirect: '/login',
-        name: 'home',
+        name: 'app',
         component: AppVue,
         children: []
 
+    },{
+        path: '/home',
+        name: 'home',
+        component: HomeVue,
+        children: [{
+            path: '/upload',
+            component: UploadVue
+        },{
+            path: '/testcaseList',
+            component: TCListVue
+        },{
+            path: '/tcFinalList',
+            component: TCFinalListVue
+        }
+        ]
     },
         {
             path: '/register',
@@ -63,4 +79,15 @@ const router = createRouter({
     ]
 })
 
+
+// 挂载路由导航守卫
+router.beforeEach((to, from, next) => {
+    if (to.path === '/login') return next()
+    // 获取token
+    const tokenStr = window.sessionStorage.getItem('userInfo')
+    if (!tokenStr) return next('/login')
+    next()
+})
+
+
 export default router

src/style.css

@@ -60,8 +60,9 @@ button:focus-visible {
 }
 
 #app {
-  max-width:100%;
-  margin: 0 auto;
+  width:100%;
+  height: 100%;
+  margin: 0;
   /* padding: 2rem; */
   text-align: center;
 }