后台面板SiderBar和TopBar

frontend/src/App.vue

@@ -1,33 +1,60 @@
 <template>
+  <el-container class="container">
+    <el-header>
+      <TopBar />
+    </el-header>
+    <el-container>
+      <el-aside width="200px">
+        <SideBar class="sidebar" />
+      </el-aside>
+      <el-main>
+        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
+          <el-radio-button @click="toggleSideBar">expand</el-radio-button>
+        </el-radio-group>
+      </el-main>
+    </el-container>
+  </el-container>
+
+  <!--
   <img src="./assets/logo.png">
   <nav>
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </nav>
   <router-view />
+  -->
 </template>
 
 <script>
-// import { ElConfigProvider } from 'element-plus'
-// import { zhCn } from 'element-plus/es/locale';
+// @ is an alias to /src
+import SideBar from '@/components/SideBar.vue'
+import TopBar from './components/TopBar.vue'
 
 export default {
   name: 'App',
   components: {
-    // ElConfigProvider,
+    SideBar,
+    TopBar
   }
-  // setup() {
-  //   return {
-  //     locale: zhCn,
-  //   }
-  // }
 }
 </script>
 
 <style>
 @import 'normalize.css/normalize.css';
 
+html,
+body,
+#app,
+.container {
+  height: 100%;
+}
+
 #app {
   text-align: center;
 }
+
+.el-header {
+  padding: 0;
+  border: 0;
+}
 </style>

frontend/src/components/HelloWorld.vue

@@ -2,11 +2,8 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      some message ...
     </p>
-    <h3>Installed CLI Plugins</h3>
   </div>
 </template>
 

frontend/src/components/SideBar.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-menu active-text-color="#ffd04b" background-color="#151513" class="el-menu-vertical" default-active="2"
+    text-color="#fff" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
+    <el-sub-menu index="1">
+      <template #title>
+        <el-icon>
+          <Location />
+        </el-icon>
+        <span>Navigator One</span>
+      </template>
+      <el-menu-item-group title="Group One">
+        <el-menu-item index="1-1">item one</el-menu-item>
+        <el-menu-item index="1-2">item two</el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="Group Two">
+        <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="2">
+      <el-icon>
+        <IconMenu />
+      </el-icon>
+      <span>Navigator Two</span>
+    </el-menu-item>
+    <el-menu-item index="3" disabled>
+      <el-icon>
+        <Document />
+      </el-icon>
+      <span>Navigator Three</span>
+    </el-menu-item>
+    <el-menu-item index="4">
+      <el-icon>
+        <setting />
+      </el-icon>
+      <span>Navigator Four</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script setup>
+import { Location, Menu as IconMenu, Document, Setting } from '@element-plus/icons-vue'
+// import { ref } from 'vue'
+
+const isCollapse = false
+// const isCollapse = ref(true)
+const handleOpen = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style scoped>
+.el-menu-vertical {
+  height: 100%;
+  border: 0;
+}
+</style>

frontend/src/components/TopBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-menu class="el-menu" mode="horizontal" background-color="#f49e00" text-color="#fff" active-text-color="#ffd04b">
+    <el-menu-item index="1">Processing Center</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>Workspace</template>
+      <el-menu-item index="2-1">item one</el-menu-item>
+      <el-menu-item index="2-2">item two</el-menu-item>
+      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="3" disabled>Info</el-menu-item>
+    <el-menu-item index="4">Orders</el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.el-menu {
+  width: 100%;
+  border: 0;
+  height: 100%;
+}
+</style>

frontend/src/main.js

@@ -1,8 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-// import installElementPlus from './plugins/element'
 
 const app = createApp(App)
-// installElementPlus(app)
 app.use(router).mount('#app')

frontend/src/plugins/element.js

@@ -1,6 +0,0 @@
-import { ElButton } from 'element-plus'
-import lang from 'element-plus/lib/locale/lang/zh-cn'
-
-export default (app) => {
-  app.use(ElButton, { lang })
-}