添加侧边栏

frontend/src/layout/Sidebar.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      router
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="rgb(64, 158, 255)"
+      :default-active="$route.path"
+    >
+      <el-menu-item index="/">
+        <i class="el-icon-s-home"></i>首页
+      </el-menu-item>
+      <a href="https://github.com/xfgryujk/blivechat" target="_blank">
+        <el-menu-item>
+          <i class="el-icon-share"></i>项目地址
+        </el-menu-item>
+      </a>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+export default {
+  name: 'Sidebar'
+}
+</script>
+
+<style>
+.el-scrollbar {
+  height: 100%;
+}
+
+.scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+.scrollbar-wrapper .el-menu {
+  border: none;
+}
+</style>

frontend/src/layout/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-container class="app-wrapper">
+    <el-aside width="200px" class="sidebar-container">
+      <div class="logo-container">
+        <router-link to="/">
+          <img src="@/assets/img/logo.png" class="sidebar-logo">
+          <h1 class="sidebar-title">blivechat</h1>
+        </router-link>
+      </div>
+      <sidebar></sidebar>
+    </el-aside>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import Sidebar from './Sidebar.vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    Sidebar
+  }
+}
+</script>
+
+<style>
+html, body, #app, .app-wrapper, .sidebar-container {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a, a:focus, a:hover {
+  text-decoration: none;
+}
+
+.sidebar-container {
+  background-color: #304156;
+  overflow: hidden;
+}
+
+.sidebar-container .logo-container {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+}
+
+.sidebar-container .logo-container .sidebar-logo {
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  margin-right: 12px;
+}
+
+.sidebar-container .logo-container .sidebar-title {
+  display: inline-block;
+  margin: 0;
+  color: #fff;
+  font-weight: 600;
+  line-height: 50px;
+  font-size: 14px;
+  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+  vertical-align: middle;
+}
+
+.sidebar-container .is-horizontal {
+  display: none;
+}
+</style>

frontend/src/main.js

@@ -4,6 +4,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
 import App from './App.vue'
+import Layout from './layout'
 import Home from './views/Home.vue'
 import Room from './views/Room'
 import NotFound from './views/NotFound.vue'
@@ -18,7 +19,13 @@ Vue.config.ignoredElements = [
 const router = new VueRouter({
   mode: 'history',
   routes: [
-    {path: '/', component: Home},
+    {
+      path: '/',
+      component: Layout,
+      children: [
+        {path: '', component: Home}
+      ]
+    },
     {path: '/room/:roomId', name: 'room', component: Room},
     {path: '*', component: NotFound}
   ]

frontend/src/views/Home.vue

@@ -1,19 +1,17 @@
 <template>
-  <div>
-    <el-form :model="form" ref="form" label-width="100px" :rules="{
-      roomId: [
-        {required: true, message: '房间ID不能为空', trigger: 'blur'},
-        {type: 'integer', min: 1, message: '房间ID必须为正整数', trigger: 'blur'}
-      ]
-    }">
-      <el-form-item label="房间ID" required prop="roomId">
-        <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="enter">进入</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <el-form :model="form" ref="form" label-width="100px" :rules="{
+    roomId: [
+      {required: true, message: '房间ID不能为空', trigger: 'blur'},
+      {type: 'integer', min: 1, message: '房间ID必须为正整数', trigger: 'blur'}
+    ]
+  }">
+    <el-form-item label="房间ID" required prop="roomId">
+      <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="enter">进入</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script>
@@ -22,7 +20,7 @@ export default {
   data() {
     return {
       form: {
-        roomId: window.localStorage.roomId || 1
+        roomId: parseInt(window.localStorage.roomId || '1')
       }
     }
   },

frontend/src/views/Room/index.vue

@@ -122,4 +122,4 @@ export default {
 }
 </script>
 
-<style src="../../assets/room.css"></style>
+<style src="@/assets/css/room.css"></style>