refactor: 前端布局搭建

README.md

@@ -13,7 +13,7 @@
 
 ### 注册和心跳
 - [X] 1、 服务注册接口
-- [ ] 2、 心跳接口
+- [X] 2、 心跳接口
 
 ### 前端测试界面
 - [ ] 1、 界面布局

src/assembly/docker/docker-build.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+docker build -t cec/plugins .
+docker run -p 8080:8080 cec/plugins

src/assembly/docker/docker-compose.yaml

@@ -1,4 +1,10 @@
+version: '3'
 services:
   plugins:
-    image: plugins
+    build:
+      context: .
+      dockerfile: Dockerfile
+    restart: always
+    ports:
+      - "8080:8080"
 

web/src/assets/styles/index.scss

@@ -16,56 +16,21 @@
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+html, body, #app {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
+  min-width: 100vh;
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+a {
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
+  color: #646cff;
+  text-decoration: inherit;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+a:hover {
+  color: #535bf2;
 }
 
 @media (prefers-color-scheme: light) {

web/src/layout/asideBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="sideBar">
+    <el-menu background-color="#322727" style="width: 10vw" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo" :defaultActive="route.path" :collapse="collapse" router>
+      <template v-for="item in routes" :key="item.name">
+        <el-menu-item :index="item.path">
+          <icon-ep-SuccessFilled />
+          <span>{{ item.name }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+<script setup lang="ts">
+import { RouteRecordRaw } from "vue-router";
+
+defineProps<{ collapse: boolean }>();
+
+const router = useRouter();
+const route = useRoute();
+const routes = computed(() => {
+  return router.options.routes.filter((item: RouteRecordRaw) => !item.meta?.hidden)[0].children;
+});
+console.log(routes);
+</script>
+<style lang="scss" scoped>
+.sideBar {
+  height: 100%;
+  background-color: #322727;
+  width: 100%;
+}
+</style>

web/src/layout/index.vue

@@ -1,10 +1,35 @@
 <template>
-  <div>
-    菜单栏
-    <router-view v-slot="{ Component }">
-      <Transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </Transition>
-    </router-view>
-  </div>
+  <el-container>
+    <el-aside width="auto">
+      <side-bar :collapse="isCollapse"></side-bar>
+    </el-aside>
+    <el-container>
+      <el-header style="display: flex; align-items: center; justify-content: center; padding-left: 4vh; font-size: larger; font-weight: 700">测试界面</el-header>
+      <el-main>
+        <router-view v-slot="{ Component }">
+          <Transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </Transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
+<script setup lang="ts">
+import SideBar from "./asideBar.vue";
+
+const isCollapse = ref(false);
+</script>
+<style lang="scss" scoped>
+.el-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.el-header {
+  background-color: pink;
+  padding: 0;
+  border-bottom: 1px solid #eee;
+  opacity: 0.8;
+}
+</style>

web/src/pages/home.vue

@@ -1,24 +1,16 @@
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo"/>
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo"/>
-    </a>
     <vue-json-pretty :data="json" :editable="true"></vue-json-pretty>
   </div>
-  <pre>{{json}}</pre>
+  <pre>{{ json }}</pre>
 </template>
 
 <script setup lang="ts">
 // 'https://leezng.github.io/vue-json-pretty/'
-import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
-
-const json = reactive({'a':'aaa','b':'bbb'})
-
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
 
+const json = reactive({ a: "aaa", b: "bbb" });
 </script>
 <style scoped>
 .logo {

web/src/router/index.ts

@@ -1,24 +1,21 @@
-import {createRouter, createWebHistory} from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import NProgress from "nprogress";
 
 const routes = [
   {
     path: "/",
     redirect: "/home",
-  },
-  {
-    path: "/home",
-    component: () => import("@/pages/home.vue"),
-  },
-  {
-    path: "/task",
     component: () => import("@/layout/index.vue"),
-    redirect: "/task/status",
     children: [
       {
-        path: "/task/status",
+        path: "/home",
+        name: "首页",
+        component: () => import("@/pages/home.vue"),
+      },
+      {
+        path: "/task",
+        name: "任务状态下发",
         component: () => import("@/pages/home.vue"),
-        meta: {title: "任务状态下发"},
       },
     ],
   },