完善前端获取身份码的教程，做成弱智保姆软件

frontend/src/lang/en.js

@@ -10,12 +10,14 @@ export default {
     roomIdEmpty: "Room ID can't be empty",
     roomIdInteger: 'Room ID must be positive integer',
     authCodeEmpty: "Identity code can't be empty",
+    authCodeFormatError: 'Identity code format error',
     useAuthCodeWarning: 'Please prioritize the identity code',
 
     general: 'General',
     room: 'Room',
     roomId: 'Room ID',
     authCode: 'Identity code',
+    howToGetAuthCode: 'How to get identity code',
     showDanmaku: 'Show messages',
     showGift: 'Show Super Chats',
     showGiftName: 'Show gift name',
@@ -134,7 +136,8 @@ export default {
   },
   help: {
     help: 'Help',
-    p1: '1. Copy the identity code (身份码) from the webpage where you start streaming',
+    p1_1: '1. Copy the identity code (身份码) from this webpage:',
+    p1_2: '. NOTE: DO NOT refresh the identity code, unless it is leaked. Once you refresh the identity code, the old one will be invalid',
     p2: '2. Enter the identity code into the room configuration on the home page. Copy the room URL',
     p3: '3. Generate styles with the style generator. Copy the CSS',
     p4: '4. Add browser source in OBS',

frontend/src/lang/ja.js

@@ -10,12 +10,14 @@ export default {
     roomIdEmpty: 'ルームのIDを空白にすることはできません',
     roomIdInteger: 'ルームは正の整数でなければなりません',
     authCodeEmpty: 'アイデンティティコードを空白にすることはできません',
+    authCodeFormatError: 'アイデンティティコードの形式エラー',
     useAuthCodeWarning: 'アイデンティティコードを優先的に使用してください',
 
     general: '常規',
     room: 'ルーム',
     roomId: 'ルームID',
     authCode: 'アイデンティティコード',
+    howToGetAuthCode: 'アイデンティティコードの取得方法',
     showDanmaku: 'コメントを表示する',
     showGift: 'スーパーチャットと新メンバーを表示する',
     showGiftName: 'ギフト名を表示する',
@@ -134,7 +136,8 @@ export default {
   },
   help: {
     help: 'ヘルプ',
-    p1: '1. ビリビリの生放送を始めるのウェブからアイデンティティコード（身份码）をこぴーする',
+    p1_1: '1. このウェブページからアイデンティティコード（身份码）をコピーして：',
+    p1_2: '。注意：アイデンティティコードは漏洩していない限り、更新しないでください。アイデンティティコードを更新すると、古いコードは無効になります',
     p2: '2. ホームページに先ほどコピーしたアイデンティティコードを入力して、ルームのURLをこぴーする',
     p3: '3. スタイルジェネレータでお好みのコメント様子を選び、出力したCSSをコピーする',
     p4: '4. OBSでブラウザを新規作成する',

frontend/src/lang/zh.js

@@ -10,12 +10,14 @@ export default {
     roomIdEmpty: '房间ID不能为空',
     roomIdInteger: '房间ID必须为正整数',
     authCodeEmpty: '身份码不能为空',
+    authCodeFormatError: '身份码格式错误',
     useAuthCodeWarning: '请优先使用身份码',
 
     general: '常规',
     room: '房间',
     roomId: '房间ID',
     authCode: '身份码',
+    howToGetAuthCode: '如何获取身份码',
     showDanmaku: '显示弹幕',
     showGift: '显示打赏和新舰长',
     showGiftName: '显示礼物名',
@@ -134,7 +136,8 @@ export default {
   },
   help: {
     help: '帮助',
-    p1: '1. 从开始直播的页面复制身份码',
+    p1_1: '1. 从这个页面复制身份码：',
+    p1_2: '。注意：不要刷新身份码，除非你的身份码泄露了，因为刷新身份码会使旧的身份码失效',
     p2: '2. 把身份码输入到首页的房间配置，复制房间URL',
     p3: '3. 使用样式生成器生成样式，复制CSS',
     p4: '4. 在OBS中添加浏览器源',

frontend/src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import {
   Aside, Autocomplete, Badge, Button, ButtonGroup, Card, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
-  Input, Main, Menu, MenuItem, Message, Option, OptionGroup, Radio, RadioGroup, Row, Select, Scrollbar,
+  Input, Link, Main, Menu, MenuItem, Message, Option, OptionGroup, Radio, RadioGroup, Row, Select, Scrollbar,
   Slider, Submenu, Switch, Table, TableColumn, TabPane, Tabs, Tooltip
 } from 'element-ui'
 import axios from 'axios'
@@ -34,6 +34,7 @@ Vue.use(Form)
 Vue.use(FormItem)
 Vue.use(Image)
 Vue.use(Input)
+Vue.use(Link)
 Vue.use(Main)
 Vue.use(Menu)
 Vue.use(MenuItem)

frontend/src/views/Help.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>{{ $t('help.help') }}</h1>
-    <p>{{ $t('help.p1') }}</p>
+    <p>{{ $t('help.p1_1') }} <a href="https://play-live.bilibili.com/" target="_blank">https://play-live.bilibili.com/</a> {{ $t('help.p1_2') }}</p>
     <p class="img-container"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-1.png"></el-image></p>
     <p>{{ $t('help.p2') }}</p>
     <p class="img-container large-img"><el-image fit="scale-down" src="/static/img/tutorial/tutorial-2.png"></el-image></p>

frontend/src/views/Home.vue

@@ -4,7 +4,32 @@
       <el-form :model="form" ref="form" label-width="150px">
         <el-tabs type="border-card">
           <el-tab-pane :label="$t('home.general')">
-            <el-form-item :label="$t('home.room')" required :prop="form.roomKeyType === 1 ? 'roomId' : 'authCode'">
+            <el-form-item v-if="form.roomKeyType === 1"
+              :label="$t('home.room')" prop="roomId" :rules="[
+                { required: true, message: $t('home.roomIdEmpty') },
+                { type: 'integer', min: 1, message: $t('home.roomIdInteger') }
+              ]"
+            >
+              <el-row>
+                <el-col :span="6">
+                  <el-select v-model="form.roomKeyType" style="width: 100%">
+                    <el-option :label="$t('home.authCode')" :value="2"></el-option>
+                    <el-option :label="$t('home.roomId')" :value="1"></el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="18">
+                  <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
+                </el-col>
+              </el-row>
+              <el-row style="color: red">{{ $t('home.useAuthCodeWarning') }}</el-row>
+            </el-form-item>
+
+            <el-form-item v-else-if="form.roomKeyType === 2"
+              :label="$t('home.room')" prop="authCode" :rules="[
+                { required: true, message: $t('home.authCodeEmpty') },
+                { pattern: AUTH_CODE_REG, message: $t('home.authCodeFormatError') }
+              ]"
+            >
               <template slot="label">{{ $t('home.room') }}
                 <router-link :to="{ name: 'help' }">
                   <i class="el-icon-question"></i>
@@ -18,21 +43,19 @@
                   </el-select>
                 </el-col>
                 <el-col :span="18">
-                  <el-input v-if="form.roomKeyType === 1"
+                  <el-tooltip placement="top-start">
-                    v-model.number="form.roomId" type="number" min="1" :rules="[
+                    <div slot="content">
-                      {required: true, message: $t('home.roomIdEmpty'), trigger: 'blur'},
+                      <!-- 不知道为什么router-link获取不到$router，还是用el-link了，不过会有一次丑陋的刷新 -->
-                      {type: 'integer', min: 1, message: $t('home.roomIdInteger'), trigger: 'blur'}
+                      <el-link
-                    ]"
+                        type="primary" :href="$router.resolve({ name: 'help' }).href"
-                  ></el-input>
+                      >{{ $t('home.howToGetAuthCode') }}</el-link>
-                  <el-input v-else
+                    </div>
-                    v-model.number="form.authCode" :rules="[
+                    <el-input v-model.number="form.authCode"></el-input>
-                      {required: true, message: $t('home.authCodeEmpty'), trigger: 'blur'}
+                  </el-tooltip>
-                    ]"
-                  ></el-input>
                 </el-col>
               </el-row>
-              <el-row v-if="form.roomKeyType === 1" style="color: red">{{ $t('home.useAuthCodeWarning') }}</el-row>
             </el-form-item>
+
             <el-row :gutter="20">
               <el-col :xs="24" :sm="8">
                 <el-form-item :label="$t('home.showDanmaku')">
@@ -198,6 +221,8 @@ export default {
   name: 'Home',
   data() {
     return {
+      AUTH_CODE_REG: /^[0-9A-Z]{12,14}$/,
+
       serverConfig: {
         enableTranslate: true,
         enableUploadFile: true,
@@ -294,7 +319,7 @@ export default {
       window.open(this.getRoomUrl(true), 'test room', 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
     },
     getRoomUrl(isTestRoom) {
-      if (!isTestRoom && !this.roomKeyValue) {
+      if (!isTestRoom && !this.validateForm()) {
         return ''
       }
 
@@ -314,6 +339,15 @@ export default {
       }
       return `${window.location.protocol}//${window.location.host}${resolved.href}`
     },
+    // 因为要用在计算属性里，所以不能用this.$refs.form.validate
+    validateForm() {
+      if (this.form.roomKeyType === 1) {
+        return this.roomKeyValue > 0
+      } else if (this.form.roomKeyType === 2) {
+        return this.AUTH_CODE_REG.test(this.roomKeyValue)
+      }
+      return true
+    },
     copyUrl() {
       this.$refs.roomUrlInput.select()
       document.execCommand('Copy')