添加各种UI

frontend/src/layout/Sidebar.vue

@@ -10,6 +10,9 @@
       <el-menu-item index="/">
         <i class="el-icon-s-home"></i>首页
       </el-menu-item>
+      <el-menu-item :index="$router.resolve({name: 'stylegen'}).href">
+        <i class="el-icon-brush"></i>样式生成器
+      </el-menu-item>
       <a href="https://github.com/xfgryujk/blivechat" target="_blank">
         <el-menu-item>
           <i class="el-icon-share"></i>项目地址

frontend/src/main.js

@@ -6,6 +6,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import Layout from './layout'
 import Home from './views/Home.vue'
+import StyleGenerator from './views/StyleGenerator.vue'
 import Room from './views/Room'
 import NotFound from './views/NotFound.vue'
 
@@ -23,7 +24,8 @@ const router = new VueRouter({
       path: '/',
       component: Layout,
       children: [
-        {path: '', component: Home}
+        {path: '', component: Home},
+        {path: 'stylegen', name: 'stylegen', component: StyleGenerator}
       ]
     },
     {path: '/room/:roomId', name: 'room', component: Room},

frontend/src/views/Home.vue

@@ -1,15 +1,51 @@
 <template>
-  <el-form :model="form" ref="form" label-width="100px" :rules="{
+  <el-form :model="form" ref="form" label-width="150px" :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-tabs>
+      <el-tab-pane label="常规">
+        <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 label="最低显示礼物价格" prop="minGiftPrice">
+          <el-input v-model.number="form.minGiftPrice" type="number" min="0"></el-input>
+        </el-form-item>
+        <el-form-item label="合并相似弹幕" prop="mergeSimilarDanmaku">
+          <el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
+        </el-form-item>
+      </el-tab-pane>
+      <el-tab-pane label="屏蔽">
+        <el-form-item label="礼物弹幕" prop="blockGiftDanmaku">
+          <el-switch v-model="form.blockGiftDanmaku"></el-switch>
+        </el-form-item>
+        <el-form-item label="用户等级低于" prop="blockLevel">
+          <el-slider v-model="form.blockLevel" show-input :min="0" :max="60"></el-slider>
+        </el-form-item>
+        <el-form-item label="非正式会员" prop="blockNewbie">
+          <el-switch v-model="form.blockNewbie"></el-switch>
+        </el-form-item>
+        <el-form-item label="未绑定手机用户" prop="blockNotMobileVerified">
+          <el-switch v-model="form.blockNotMobileVerified"></el-switch>
+        </el-form-item>
+        <el-form-item label="屏蔽关键词" prop="blockKeywords">
+          <el-input v-model="form.blockKeywords" type="textarea" :rows="5" placeholder="一行一个"></el-input>
+        </el-form-item>
+        <el-form-item label="屏蔽用户" prop="blockUsers">
+          <el-input v-model="form.blockUsers" type="textarea" :rows="5" placeholder="一行一个"></el-input>
+        </el-form-item>
+      </el-tab-pane>
+      <el-tab-pane label="样式">
+        <el-form-item label="CSS" prop="css">
+          <el-input v-model="form.css" type="textarea" :rows="20"></el-input>
+        </el-form-item>
+      </el-tab-pane>
+    </el-tabs>
     <el-form-item>
-      <el-button type="primary" @click="enter">进入</el-button>
+      <el-button type="primary" @click="enterRoom">进入房间</el-button>
+      <el-button type="primary" @click="popupRoom">弹出房间</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -20,20 +56,46 @@ export default {
   data() {
     return {
       form: {
-        roomId: parseInt(window.localStorage.roomId || '1')
+        roomId: parseInt(window.localStorage.roomId || '1'),
+        minGiftPrice: 6.911, // $1
+        mergeSimilarDanmaku: true,
+
+        blockGiftDanmaku: true,
+        blockLevel: 0,
+        blockNewbie: true,
+        blockNotMobileVerified: true,
+        blockKeywords: '',
+        blockUsers: '',
+
+        css: ''
       }
     }
   },
   methods: {
-    enter() {
+    saveConfig(callback) {
       this.$refs.form.validate(valid => {
         if (!valid) {
           return
         }
         window.localStorage.roomId = this.form.roomId
-        this.$router.push({name: 'room', params: {roomId: this.form.roomId}})
+        callback()
+      })
+    },
+    enterRoom() {
+      this.saveConfig(() => this.$router.push({name: 'room', params: {roomId: this.form.roomId}}))
+    },
+    popupRoom() {
+      this.saveConfig(() => {
+        let resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId}})
+        window.open(resolved.href, `room ${this.form.roomId}`, 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
       })
     }
   }
 }
 </script>
+
+<style scoped>
+.el-form {
+  max-width: 800px;
+}
+</style>

frontend/src/views/StyleGenerator.vue

@@ -0,0 +1,9 @@
+<template>
+  <p>WIP</p>
+</template>
+
+<script>
+export default {
+  name: 'StyleGenerator'
+}
+</script>