feat(status): add sidebar

koishijs · Mar 15, 2021 · 86043a4 · 86043a4
1 parent c8df0fa
commit 86043a4
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 6 deletions.
diff --git a/packages/plugin-status/client/components/layout/index.vue b/packages/plugin-status/client/components/layout/index.vue
@@ -1,9 +1,23 @@
 <template>
-  <main class="layout">
-    <slot/>
-  </main>
+  <nav>
+    <h1>Koishi 控制台</h1>
+  </nav>
+  <aside>
+    <ul>
+      <li v-for="(route, index) in $router.getRoutes()" :key="index" :class="{ current: route.name === $route.name }">
+        <router-link :to="route.path">
+          <i :class="['fas', `fa-${route.meta.icon}`]"/>
+          {{ route.name }}
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+  <main><slot/></main>
 </template>
 
+<script lang="ts" setup>
+</script>
+
 <style lang="scss">
 
 body {
@@ -19,4 +33,69 @@ body {
   position: relative;
 }
 
+$navbarHeight: 4rem;
+$sidebarWidth: 20rem;
+
+nav {
+  padding: 1rem 2rem;
+  line-height: 2rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: rgba(244, 244, 245, .8);
+  }
+}
+
+main {
+  margin-left: $sidebarWidth;
+}
+
+aside {
+  margin: 0 1rem;
+  position: absolute;
+  top: $navbarHeight;
+  width: $sidebarWidth - 2rem;
+
+  ul {
+    list-style: none;
+    width: 100%;
+    padding-left: 0;
+  }
+
+  li {
+    border-radius: 0.5rem;
+    transition: 0.3s ease;
+  }
+
+  i {
+    width: 1rem;
+    margin-right: 0.5rem;
+    text-align: center;
+  }
+
+  li a {
+    display: block;
+    font-size: 1.05rem;
+    text-decoration: none;
+    cursor: pointer;
+    color: rgba(244, 244, 245, .6);
+    line-height: 3rem;
+    padding: 0 1rem;
+    transition: 0.3s ease;
+  }
+
+  li:hover {
+    background-color: rgba(4, 6, 32, .24);
+    a {
+      color: rgba(244, 244, 245, .8);
+    }
+  }
+
+  li.current a {
+    font-weight: bolder;
+    color: rgba(244, 244, 245);
+  }
+}
+
 </style>
diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts
@@ -1,4 +1,4 @@
-import { createApp, h, onMounted } from 'vue'
+import { createApp, h } from 'vue'
 import { ElCard, ElButton, ElCollapseTransition } from 'element-plus'
 import { THEME_KEY } from 'vue-echarts'
 import { createRouter, createWebHistory, RouterView } from 'vue-router'
@@ -12,17 +12,27 @@ import 'element-plus/lib/theme-chalk/el-icon.css'
 import 'element-plus/lib/theme-chalk/el-card.css'
 import 'element-plus/lib/theme-chalk/el-button.css'
 
+import '@fortawesome/fontawesome-free/css/fontawesome.css'
+import '@fortawesome/fontawesome-free/css/brands.css'
+import '@fortawesome/fontawesome-free/css/solid.css'
+
 import './index.scss'
 
+declare module 'vue-router' {
+  interface RouteMeta {
+    icon?: string
+  }
+}
+
 const app = createApp(() => {
   return h(Layout, [h(RouterView)])
 })
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/', component: () => import('./views/home.vue') },
-    { path: '/plugin', component: () => import('./views/plugin/index.vue') },
+    { path: '/', name: '仪表盘', meta: { icon: 'tachometer-alt' }, component: () => import('./views/home.vue') },
+    { path: '/plugin', name: '插件', meta: { icon: 'plug' }, component: () => import('./views/plugin/index.vue') },
   ],
 })