添加帮助

README.md

@@ -11,7 +11,7 @@
 * 兼容YouTube直播评论栏的样式
 * 金瓜子礼物模仿醒目留言显示
 * 高亮舰队、房管、主播的用户名
-* 支持屏蔽弹幕、限制最大速度等设置
+* 支持屏蔽弹幕、合并相似弹幕等设置
 * 自带样式生成器
 
 ## 使用方法

frontend/package-lock.json

@@ -9723,6 +9723,7 @@
     "fsevents": {
       "version": "1.2.9",
       "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-1.2.9.tgz",
+      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -18954,6 +18955,11 @@
       "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
       "dev": true
     },
+    "serialize-javascript": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.1.tgz",
+      "integrity": "sha512-MPLPRpD4FNqWq9tTIjYG5LesFouDhdyH0EPY3gVK4DRD5+g4aDqdNSzLIwceulo3Yj+PL1bPh6laE5+H6LTcrQ=="
+    },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npm.taobao.org/serve-index/download/serve-index-1.9.1.tgz",

frontend/src/lang/en.js

@@ -2,6 +2,7 @@ export default {
   sidebar: {
     home: 'Home',
     stylegen: 'Style generator',
+    help: 'Help',
     projectAddress: 'Project address',
     giftRecord: 'Super Chat record'
   },
@@ -106,5 +107,13 @@ export default {
     result: 'Result',
     copy: 'Copy',
     resetConfig: 'Reset config'
+  },
+  help: {
+    help: 'Help',
+    p1: '1. Copy the room ID from the Bilibili live room webpage',
+    p2: '2. Enter the room ID into the room ID on the home page. Copy the room URL after saving the configuration',
+    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

@@ -1,7 +1,8 @@
-export default {
+export default {
   sidebar: {
     home: 'トップページ',
     stylegen: 'スタイルジェネレータ',
+    help: 'ヘルプ',
     projectAddress: 'プロジェクトアドレス',
     giftRecord: 'スーパーチャット記録'
   },
@@ -106,5 +107,13 @@
     result: '結果',
     copy: 'コピー',
     resetConfig: 'デフォルトに戻す'
+  },
+  help: {
+    help: 'ヘルプ',
+    p1: '1. ビリビリの生放送ウェブから生放送ルームIDをこぴーする',
+    p2: '2. ホームページでコピーしたIDを入力し、配置を保存すると、ルームのURLをこぴーする',
+    p3: '3. スタイルジェネレータでお好みのコメント様子を選び、出力したCSSをコピーする',
+    p4: '4. OBSでブラウザを新規作成する',
+    p5: '5. プロパティでこぴーしたURLを入力し、カスタムCSSでスタイルジェネレータのCSSを入力する'
   }
 }

frontend/src/lang/zh.js

@@ -2,6 +2,7 @@ export default {
   sidebar: {
     home: '首页',
     stylegen: '样式生成器',
+    help: '帮助',
     projectAddress: '项目地址',
     giftRecord: '打赏记录'
   },
@@ -106,5 +107,13 @@ export default {
     result: '结果',
     copy: '复制',
     resetConfig: '恢复默认设置'
+  },
+  help: {
+    help: '帮助',
+    p1: '1. 从B站直播间网页复制房间ID',
+    p2: '2. 把房间ID输入到首页的房间ID，保存配置后复制房间URL',
+    p3: '3. 使用样式生成器生成样式，复制CSS',
+    p4: '4. 在OBS中添加浏览器源',
+    p5: '5. URL处输入之前复制的房间URL，自定义CSS处输入之前复制的CSS'
   }
 }

frontend/src/layout/Sidebar.vue

@@ -13,6 +13,9 @@
       <el-menu-item :index="$router.resolve({name: 'stylegen'}).href">
         <i class="el-icon-brush"></i>{{$t('sidebar.stylegen')}}
       </el-menu-item>
+      <el-menu-item :index="$router.resolve({name: 'help'}).href">
+        <i class="el-icon-question"></i>{{$t('sidebar.help')}}
+      </el-menu-item>
       <a href="https://github.com/xfgryujk/blivechat" target="_blank">
         <el-menu-item>
           <i class="el-icon-share"></i>{{$t('sidebar.projectAddress')}}

frontend/src/main.js

@@ -9,6 +9,7 @@ import App from './App.vue'
 import Layout from './layout'
 import Home from './views/Home.vue'
 import StyleGenerator from './views/StyleGenerator'
+import Help from './views/Help'
 import Room from './views/Room.vue'
 import NotFound from './views/NotFound.vue'
 
@@ -37,7 +38,8 @@ const router = new VueRouter({
       component: Layout,
       children: [
         {path: '', component: Home},
-        {path: 'stylegen', name: 'stylegen', component: StyleGenerator}
+        {path: 'stylegen', name: 'stylegen', component: StyleGenerator},
+        {path: 'help', name: 'help', component: Help}
       ]
     },
     {path: '/room/:roomId', name: 'room', component: Room},

frontend/src/views/Help.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>{{$t('help.help')}}</h1>
+    <p>{{$t('help.p1')}}</p>
+    <p><el-image src="/static/img/tutorial/tutorial-1.png"></el-image></p>
+    <p>{{$t('help.p2')}}</p>
+    <p><el-image src="/static/img/tutorial/tutorial-2.png"></el-image></p>
+    <p>{{$t('help.p3')}}</p>
+    <p><el-image src="/static/img/tutorial/tutorial-3.png"></el-image></p>
+    <p>{{$t('help.p4')}}</p>
+    <p><el-image src="/static/img/tutorial/tutorial-4.png"></el-image></p>
+    <p>{{$t('help.p5')}}</p>
+    <p><el-image src="/static/img/tutorial/tutorial-5.png"></el-image></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Help'
+}
+</script>