添加身份码相关的提示

README.md

@@ -1,11 +1,15 @@
 # blivechat
+
 用于OBS的仿YouTube风格的bilibili直播评论栏
 
 ![OBS截图](./screenshots/obs.png)
+
 ![Chrome截图](./screenshots/chrome.png)
+
 ![样式生成器截图](./screenshots/stylegen.png)
 
 ## 特性
+
 * 兼容YouTube直播评论栏的样式
 * 付费礼物模仿醒目留言显示
 * 高亮舰队、房管、主播的用户名
@@ -17,70 +21,93 @@
 * 支持配置自定义表情，不需要开通B站官方表情
 
 ## 使用方法
+
 以下几种方式任选一种即可
 
 ### 一、本地使用
+
 1. 下载[发布版](https://github.com/xfgryujk/blivechat/releases)（仅提供x64 Windows版）
 2. 双击`blivechat.exe`运行服务器，或者用命令行可以指定host和端口号：
+
     ```sh
     blivechat.exe --host 127.0.0.1 --port 12450
     ```
-3. 用浏览器打开[http://localhost:12450](http://localhost:12450)，输入房间ID，复制房间URL
+
+   或者也可以在配置文件里指定host和端口号
+
+3. 用浏览器打开[http://localhost:12450](http://localhost:12450)，输入主播在开始直播时获得的身份码，复制房间URL
 4. 用样式生成器生成样式，复制CSS
 5. 在OBS中添加浏览器源，输入URL和自定义CSS
 
 **注意事项：**
 
-* 本地使用时不要关闭blivechat.exe那个黑框，否则不能继续获取头像或弹幕
+* 本地使用时不要关闭blivechat.exe那个黑框，否则不能继续获取弹幕
 * 样式生成器没有列出所有本地字体，但是可以手动输入本地字体
 * 如果需要使用翻译功能，建议看[配置官方翻译接口傻瓜式教程](https://www.bilibili.com/read/cv14663633)
 
 ### 二、公共服务器
+
 请优先在本地使用，使用公共服务器会有更大的延迟，而且服务器故障时可能发生直播事故
 
 * [公共服务器](http://chat.bilisc.com/)
 
 ### 三、源代码版（自建服务器或在Windows以外平台）
+
 0. 由于使用了git子模块，clone时需要加上`--recursive`参数：
+
     ```sh
     git clone --recursive https://github.com/xfgryujk/blivechat.git
     ```
+
     如果已经clone，拉子模块的方法：
+
     ```sh
     git submodule update --init --recursive
     ```
+
 1. 编译前端（需要安装Node.js）：
+
     ```sh
     cd frontend
     npm i
     npm run build
     ```
+
 2. 运行服务器（需要Python3.8以上版本）：
+
     ```sh
     pip3 install -r requirements.txt
     python3 main.py
     ```
+
     或者可以指定host和端口号：
+
     ```sh
     python3 main.py --host 127.0.0.1 --port 12450
     ```
+
 3. 用浏览器打开[http://localhost:12450](http://localhost:12450)，以下略
 
 ### 四、Docker（自建服务器）
+
 1.  ```sh
     docker run --name blivechat -d -p 12450:12450 \
       --mount source=blivechat-data,target=/mnt/data \
       xfgryujk/blivechat:latest
     ```
+
 2. 用浏览器打开[http://localhost:12450](http://localhost:12450)，以下略
 
 ## 自建服务器相关补充
+
 ### 服务器配置
+
 服务器配置在`data/config.ini`，可以配置数据库和允许自动翻译等，编辑后要重启生效
 
 **自建服务器时强烈建议不使用加载器**，否则可能因为混合HTTP和HTTPS等原因加载不出来
 
 ### 参考nginx配置
+
 `sudo vim /etc/nginx/sites-enabled/blivechat.conf`
 
 ```nginx

frontend/src/lang/en.js

@@ -10,6 +10,7 @@ export default {
     roomIdEmpty: "Room ID can't be empty",
     roomIdInteger: 'Room ID must be positive integer',
     authCodeEmpty: "Identity code can't be empty",
+    useAuthCodeWarning: 'Please prioritize the identity code',
 
     general: 'General',
     room: 'Room',
@@ -133,8 +134,8 @@ export default {
   },
   help: {
     help: 'Help',
-    p1: '1. Copy the room ID from the Bilibili live room webpage',
+    p1: '1. Copy the identity code (身份码) from the webpage where you start streaming',
-    p2: '2. Enter the room ID into the room ID on the home page. Copy the room URL',
+    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',
     p5: '5. Enter the previously copied room URL at URL, and enter the previously copied CSS at custom CSS'

frontend/src/lang/ja.js

@@ -10,6 +10,7 @@ export default {
     roomIdEmpty: 'ルームのIDを空白にすることはできません',
     roomIdInteger: 'ルームは正の整数でなければなりません',
     authCodeEmpty: 'アイデンティティコードを空白にすることはできません',
+    useAuthCodeWarning: 'アイデンティティコードを優先的に使用してください',
 
     general: '常規',
     room: 'ルーム',
@@ -133,8 +134,8 @@ export default {
   },
   help: {
     help: 'ヘルプ',
-    p1: '1. ビリビリの生放送ウェブから生放送ルームIDをこぴーする',
+    p1: '1. ビリビリの生放送を始めるのウェブからアイデンティティコード（身份码）をこぴーする',
-    p2: '2. ホームページでコピーしたIDを入力し、ルームのURLをこぴーする',
+    p2: '2. ホームページに先ほどコピーしたアイデンティティコードを入力して、ルームのURLをこぴーする',
     p3: '3. スタイルジェネレータでお好みのコメント様子を選び、出力したCSSをコピーする',
     p4: '4. OBSでブラウザを新規作成する',
     p5: '5. プロパティでこぴーしたURLを入力し、カスタムCSSでスタイルジェネレータのCSSを入力する'

frontend/src/lang/zh.js

@@ -10,6 +10,7 @@ export default {
     roomIdEmpty: '房间ID不能为空',
     roomIdInteger: '房间ID必须为正整数',
     authCodeEmpty: '身份码不能为空',
+    useAuthCodeWarning: '请优先使用身份码',
 
     general: '常规',
     room: '房间',
@@ -133,8 +134,8 @@ export default {
   },
   help: {
     help: '帮助',
-    p1: '1. 从B站直播间网页复制房间ID',
+    p1: '1. 从开始直播的页面复制身份码',
-    p2: '2. 把房间ID输入到首页的房间ID，复制房间URL',
+    p2: '2. 把身份码输入到首页的房间配置，复制房间URL',
     p3: '3. 使用样式生成器生成样式，复制CSS',
     p4: '4. 在OBS中添加浏览器源',
     p5: '5. URL处输入之前复制的房间URL，自定义CSS处输入之前复制的CSS'

frontend/src/layout/index.vue

@@ -3,7 +3,7 @@
     <div v-show="isMobile && !hideSidebar" class="drawer-bg" @click="hideSidebar = true"></div>
     <el-aside width="230px" class="sidebar-container" :class="{ 'hide-sidebar': hideSidebar }">
       <div class="logo-container">
-        <router-link to="/">
+        <router-link :to="{ name: 'home' }">
           <img src="@/assets/img/logo.png" class="sidebar-logo">
           <h1 class="sidebar-title">blivechat</h1>
         </router-link>

frontend/src/main.js

@@ -65,7 +65,7 @@ const router = new VueRouter({
       path: '/',
       component: Layout,
       children: [
-        { path: '', component: Home },
+        { path: '', name: 'home', component: Home },
         { path: 'stylegen', name: 'stylegen', component: StyleGenerator },
         { path: 'help', name: 'help', component: Help }
       ]

frontend/src/views/Home.vue

@@ -5,6 +5,11 @@
         <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'">
+              <template slot="label">{{ $t('home.room') }}
+                <router-link :to="{ name: 'help' }">
+                  <i class="el-icon-question"></i>
+                </router-link>
+              </template>
               <el-row>
                 <el-col :span="6">
                   <el-select v-model="form.roomKeyType" style="width: 100%">
@@ -26,6 +31,7 @@
                   ></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">