后台面板SiderBar和TopBar

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>