山东大学项目实训Web实验室（WebLab）（三）coding界面

前言

项目仓库
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

任务目标

设计并且编写主界面
主界面内容：

• 代码编写界面
• 代码显示界面
• 代码提交及刷结果按钮
• 导航条

代码

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from "../views/HomeView.vue";


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "coding-view",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/coding-view.vue"),
      // children: [
      //   {
      //     path: '../layout/btn',
      //     name: 'btns',
      //     component: btns => import("../views/coding-view.vue"),
      //   },
      //   {
      //     path: 'questionDescription',
      //     name: 'questionDescription',
      //     component: questionDescription
      //   },]
    },
  ],
});

export default router;

layout/btns.vue

<template>
  <div class="flex">
    <el-space wrap :size="size">
      <el-button size="large" type="primary" >提交</el-button>
<!--    <el-button type="primary">-->
<!--      Upload<el-icon class="el-icon&#45;&#45;right"><Upload /></el-icon>-->
<!--    </el-button>-->
    </el-space>
    <el-button size="large" type="primary" >刷新</el-button>
  </div>
</template>

<script setup lang="ts">
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
import { ref } from 'vue'

const size = ref(20)
</script>

<style scoped>

</style>

layout/topmenu.vue

<!--topbar-->
<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item index="1" disabled>WebLab</el-menu-item>
    <el-menu-item index="2" @click="goto_codingview()">Coding Center</el-menu-item>
    <el-sub-menu index="3">
      <template #title>待补充</template>
      <el-menu-item index="3-1">item one</el-menu-item>
      <el-menu-item index="3-2">item two</el-menu-item>
      <el-menu-item index="3-3">item three</el-menu-item>
      <el-sub-menu index="3-4">
        <template #title>item four</template>
        <el-menu-item index="3-4-1">item one</el-menu-item>
        <el-menu-item index="3-4-2">item two</el-menu-item>
        <el-menu-item index="3-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">待补充</el-menu-item>

    <el-button size="large" style='position: absolute;right:10px;top:5px;' round  @click="goto_login()">登录/注册</el-button>
  </el-menu>

  <div class="h-6"></div>
</template>

<script  lang="ts" >
  import { ref , defineComponent} from 'vue'
  const activeIndex = ref('2')
  const activeIndex2 = ref('2')
  const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
  export default defineComponent({
    // defineComponent
    methods: {
      goto_login:function() {
        console.log("goto_login");
        this.$router.push({ path: '/login_view' });
      },
      goto_codingview:function() {
        console.log("goto_login");
        this.$router.push({ path: '/' });
      }
    }
  });

</script>

views/coding-view.vue

<!--coding page-->
<template>
  <el-header>
    <topmenu></topmenu>
  </el-header>

  <el-main>
    <code-editor-vue></code-editor-vue>

    <div class="grid-content"></div>

    <el-divider content-position="center"><btns></btns></el-divider>

    <div class="grid-content"></div>

    <ResultsDisplay></ResultsDisplay>
  </el-main>
</template>

<script>
import { RouterLink, RouterView } from "vue-router";
import CodeEditorVue from "../components/CodeEditor.vue";
import topmenu from "../layout/topmenu.vue";
import  ResultsDisplay from "../components/ResultsDisplay.vue"
import btns from  "../layout/btns.vue"
export default {
  name: "coding-view",
  components: {
    topmenu,
    btns,
    ResultsDisplay,
    CodeEditorVue,
  },
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

</style>

App.vue

<!--按照路由进行画面跳转-->
<template>

  <div>
    <router-view/>
  </div>
</template>