使用ElementUI

chat.py

@@ -45,8 +45,6 @@ async def get_avatar_url(user_id):
 
 
 class Room(blivedm.BLiveClient):
-    _COMMAND_HANDLERS = blivedm.BLiveClient._COMMAND_HANDLERS.copy()
-
     def __init__(self, room_id):
         super().__init__(room_id, session=_http_session)
         self.clients: List['ChatHandler'] = []

frontend/package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "element-ui": "^2.9.1",
     "vue": "^2.6.10",
     "vue-router": "^3.0.6"
   },

frontend/src/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 import App from './App.vue'
 import Home from './views/Home.vue'
@@ -7,6 +9,7 @@ import Room from './views/Room'
 import NotFound from './views/NotFound.vue'
 
 Vue.use(VueRouter)
+Vue.use(ElementUI)
 
 Vue.config.ignoredElements = [
   /^yt-/

frontend/src/views/Home.vue

@@ -1,8 +1,18 @@
 <template>
   <div>
-    房间ID：
-    <input type="number" min="1" v-model="roomId" />
-    <button @click="go">进入</button>
+    <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>
 </template>
 
@@ -11,13 +21,20 @@ export default {
   name: 'Home',
   data() {
     return {
-      roomId: window.localStorage.roomId || '1'
+      form: {
+        roomId: window.localStorage.roomId || 1
+      }
     }
   },
   methods: {
-    go() {
-      window.localStorage.roomId = this.roomId
-      this.$router.push({name: 'room', params: {roomId: this.roomId}})
+    enter() {
+      this.$refs.form.validate(valid => {
+        if (!valid) {
+          return
+        }
+        window.localStorage.roomId = this.form.roomId
+        this.$router.push({name: 'room', params: {roomId: this.form.roomId}})
+      })
     }
   }
 }