UI优化

frontend/src/lang/zh.js

@@ -77,7 +77,7 @@ export default {
 
     backgrounds: '背景',
     bgColor: '背景色',
-    useBarsInsteadOfBg: '用条代替背景',
+    useBarsInsteadOfBg: '用条代替消息背景',
     messageBgColor: '消息背景色',
     ownerMessageBgColor: '主播消息背景色',
     moderatorMessageBgColor: '房管消息背景色',

frontend/src/layout/Sidebar.vue

@@ -23,7 +23,7 @@
       </a>
       <a href="http://link.bilibili.com/ctool/vtuber" target="_blank">
         <el-menu-item>
-          <i class="el-icon-share"></i>{{$t('sidebar.giftRecordOfficial')}}
+          <i class="el-icon-link"></i>{{$t('sidebar.giftRecordOfficial')}}
         </el-menu-item>
       </a>
       <el-submenu index="null">

frontend/src/layout/index.vue

@@ -62,6 +62,7 @@ html, body, #app, .app-wrapper, .sidebar-container {
 
 body {
   margin: 0;
+  background-color: #f6f8fa;
 }
 
 a, a:focus, a:hover {

frontend/src/main.js

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

frontend/src/views/Home.vue

@@ -1,90 +1,139 @@
 <template>
-  <el-form :model="form" ref="form" label-width="150px" :rules="{
-    roomId: [
-      {required: true, message: $t('home.roomIdEmpty'), trigger: 'blur'},
-      {type: 'integer', min: 1, message: $t('home.roomIdInteger'), trigger: 'blur'}
-    ]
-  }">
-    <el-tabs>
-      <el-tab-pane :label="$t('home.general')">
-        <el-form-item :label="$t('home.roomId')" required prop="roomId">
-          <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('home.showDanmaku')">
-          <el-switch v-model="form.showDanmaku"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.showGift')">
-          <el-switch v-model="form.showGift"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.showGiftName')">
-          <el-switch v-model="form.showGiftName"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.mergeSimilarDanmaku')">
-          <el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.mergeGift')">
-          <el-switch v-model="form.mergeGift"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.minGiftPrice')">
-          <el-input v-model.number="form.minGiftPrice" type="number" min="0"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('home.maxNumber')">
-          <el-input v-model.number="form.maxNumber" type="number" min="1"></el-input>
-        </el-form-item>
-      </el-tab-pane>
+  <div>
+    <p>
+      <el-form :model="form" ref="form" label-width="150px" :rules="{
+        roomId: [
+          {required: true, message: $t('home.roomIdEmpty'), trigger: 'blur'},
+          {type: 'integer', min: 1, message: $t('home.roomIdInteger'), trigger: 'blur'}
+        ]
+      }">
+        <el-tabs type="border-card">
+          <el-tab-pane :label="$t('home.general')">
+            <el-form-item :label="$t('home.roomId')" required prop="roomId">
+              <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
+            </el-form-item>
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.showDanmaku')">
+                  <el-switch v-model="form.showDanmaku"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.showGift')">
+                  <el-switch v-model="form.showGift"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.showGiftName')">
+                  <el-switch v-model="form.showGiftName"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.mergeSimilarDanmaku')">
+                  <el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.mergeGift')">
+                  <el-switch v-model="form.mergeGift"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.minGiftPrice')">
+                  <el-input v-model.number="form.minGiftPrice" type="number" min="0"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.maxNumber')">
+                  <el-input v-model.number="form.maxNumber" type="number" min="1"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
 
-      <el-tab-pane :label="$t('home.block')">
-        <el-form-item :label="$t('home.giftDanmaku')">
-          <el-switch v-model="form.blockGiftDanmaku"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.blockLevel')">
-          <el-slider v-model="form.blockLevel" show-input :min="0" :max="60"></el-slider>
-        </el-form-item>
-        <el-form-item :label="$t('home.informalUser')">
-          <el-switch v-model="form.blockNewbie"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.unverifiedUser')">
-          <el-switch v-model="form.blockNotMobileVerified"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.blockKeywords')">
-          <el-input v-model="form.blockKeywords" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('home.blockUsers')">
-          <el-input v-model="form.blockUsers" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('home.blockMedalLevel')">
-          <el-slider v-model="form.blockMedalLevel" show-input :min="0" :max="40"></el-slider>
-        </el-form-item>
-      </el-tab-pane>
+          <el-tab-pane :label="$t('home.block')">
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.giftDanmaku')">
+                  <el-switch v-model="form.blockGiftDanmaku"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.informalUser')">
+                  <el-switch v-model="form.blockNewbie"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.unverifiedUser')">
+                  <el-switch v-model="form.blockNotMobileVerified"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="12">
+                <el-form-item :label="$t('home.blockLevel')">
+                  <el-slider v-model="form.blockLevel" show-input :min="0" :max="60"></el-slider>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <el-form-item :label="$t('home.blockMedalLevel')">
+                  <el-slider v-model="form.blockMedalLevel" show-input :min="0" :max="40"></el-slider>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item :label="$t('home.blockKeywords')">
+              <el-input v-model="form.blockKeywords" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('home.blockUsers')">
+              <el-input v-model="form.blockUsers" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
+            </el-form-item>
+          </el-tab-pane>
 
-      <el-tab-pane :label="$t('home.advanced')">
-        <el-form-item :label="$t('home.relayMessagesByServer')">
-          <el-switch v-model="form.relayMessagesByServer"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.autoTranslate')">
-          <el-switch v-model="form.autoTranslate" :disabled="!serverConfig.enableTranslate || !form.relayMessagesByServer"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('home.giftUsernamePronunciation')">
-          <el-radio-group v-model="form.giftUsernamePronunciation">
-            <el-radio label="">{{$t('home.dontShow')}}</el-radio>
-            <el-radio label="pinyin">{{$t('home.pinyin')}}</el-radio>
-            <el-radio label="kana">{{$t('home.kana')}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-tab-pane>
-    </el-tabs>
+          <el-tab-pane :label="$t('home.advanced')">
+            <el-row :gutter="20">
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.relayMessagesByServer')">
+                  <el-switch v-model="form.relayMessagesByServer"></el-switch>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="8">
+                <el-form-item :label="$t('home.autoTranslate')">
+                  <el-switch v-model="form.autoTranslate" :disabled="!serverConfig.enableTranslate || !form.relayMessagesByServer"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item :label="$t('home.giftUsernamePronunciation')">
+              <el-radio-group v-model="form.giftUsernamePronunciation">
+                <el-radio label="">{{$t('home.dontShow')}}</el-radio>
+                <el-radio label="pinyin">{{$t('home.pinyin')}}</el-radio>
+                <el-radio label="kana">{{$t('home.kana')}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+    </p>
 
-    <el-divider></el-divider>
-    <el-form-item :label="$t('home.roomUrl')">
-      <el-input ref="roomUrlInput" readonly :value="obsRoomUrl" style="width: calc(100% - 8em); margin-right: 1em;"></el-input>
-      <el-button type="primary" @click="copyUrl">{{$t('home.copy')}}</el-button>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">{{$t('home.enterRoom')}}</el-button>
-      <el-button type="primary" @click="exportConfig">{{$t('home.exportConfig')}}</el-button>
-      <el-button type="primary" @click="importConfig">{{$t('home.importConfig')}}</el-button>
-    </el-form-item>
-  </el-form>
+    <p>
+      <el-card>
+        <el-form :model="form" label-width="150px">
+          <el-form-item :label="$t('home.roomUrl')">
+            <el-input ref="roomUrlInput" readonly :value="obsRoomUrl" style="width: calc(100% - 8em); margin-right: 1em;"></el-input>
+            <el-button type="primary" @click="copyUrl">{{$t('home.copy')}}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">{{$t('home.enterRoom')}}</el-button>
+            <el-button @click="exportConfig">{{$t('home.exportConfig')}}</el-button>
+            <el-button @click="importConfig">{{$t('home.importConfig')}}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </p>
+  </div>
 </template>
 
 <script>
@@ -183,9 +232,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.el-form {
-  max-width: 800px;
-}
-</style>

frontend/src/views/StyleGenerator/FontSelect.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-select :value="value" @input="val => $emit('input', val)" filterable allow-create default-first-option>
+    <el-option-group>
+      <el-option v-for="font in LOCAL_FONTS" :key="font" :value="font"></el-option>
+    </el-option-group>
+    <el-option-group>
+      <el-option v-for="font in NETWORK_FONTS" :key="font" :value="font"></el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+import * as fonts from './fonts'
+
+export default {
+  name: 'FontSelect',
+  props: {
+    value: String
+  },
+  data() {
+    return {
+      LOCAL_FONTS: fonts.LOCAL_FONTS,
+      NETWORK_FONTS: fonts.NETWORK_FONTS
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-select {
+  width: 100%
+}
+</style>

frontend/src/views/StyleGenerator/Legacy.vue

@@ -1,188 +1,354 @@
 <template>
-  <el-form label-width="150px" size="mini">
-    <h3>{{$t('stylegen.outlines')}}</h3>
-    <el-form-item :label="$t('stylegen.showOutlines')">
-      <el-switch v-model="form.showOutlines"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.outlineSize')">
-      <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.outlineColor')">
-      <el-color-picker v-model="form.outlineColor"></el-color-picker>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.avatars')}}</h3>
-    <el-form-item :label="$t('stylegen.showAvatars')">
-      <el-switch v-model="form.showAvatars"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.avatarSize')">
-      <el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.userNames')}}</h3>
-    <el-form-item :label="$t('stylegen.showUserNames')">
-      <el-switch v-model="form.showUserNames"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.font')">
-      <el-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.fontSize')">
-      <el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.lineHeight')">
-      <el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.normalColor')">
-      <el-color-picker v-model="form.userNameColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.ownerColor')">
-      <el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.moderatorColor')">
-      <el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.memberColor')">
-      <el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.showBadges')">
-      <el-switch v-model="form.showBadges"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.showColon')">
-      <el-switch v-model="form.showColon"></el-switch>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.messages')}}</h3>
-    <el-form-item :label="$t('stylegen.font')">
-      <el-autocomplete v-model="form.messageFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.fontSize')">
-      <el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.lineHeight')">
-      <el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.color')">
-      <el-color-picker v-model="form.messageColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.onNewLine')">
-      <el-switch v-model="form.messageOnNewLine"></el-switch>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.time')}}</h3>
-    <el-form-item :label="$t('stylegen.showTime')">
-      <el-switch v-model="form.showTime"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.font')">
-      <el-autocomplete v-model="form.timeFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.fontSize')">
-      <el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.lineHeight')">
-      <el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.color')">
-      <el-color-picker v-model="form.timeColor"></el-color-picker>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.backgrounds')}}</h3>
-    <el-form-item :label="$t('stylegen.bgColor')">
-      <el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
-      <el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.messageBgColor')">
-      <el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.ownerMessageBgColor')">
-      <el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
-      <el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.memberMessageBgColor')">
-      <el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.scAndNewMember')}}</h3>
-    <el-form-item :label="$t('stylegen.firstLineFont')">
-      <el-autocomplete v-model="form.firstLineFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.firstLineFontSize')">
-      <el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.firstLineLineHeight')">
-      <el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.firstLineColor')">
-      <el-color-picker v-model="form.firstLineColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.secondLineFont')">
-      <el-autocomplete v-model="form.secondLineFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.secondLineFontSize')">
-      <el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.secondLineLineHeight')">
-      <el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.secondLineColor')">
-      <el-color-picker v-model="form.secondLineColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.scContentLineFont')">
-      <el-autocomplete v-model="form.scContentFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.scContentLineFontSize')">
-      <el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.scContentLineLineHeight')">
-      <el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.scContentLineColor')">
-      <el-color-picker v-model="form.scContentColor"></el-color-picker>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.showNewMemberBg')">
-      <el-switch v-model="form.showNewMemberBg"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.showScTicker')">
-      <el-switch v-model="form.showScTicker"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.showOtherThings')">
-      <el-switch v-model="form.showOtherThings"></el-switch>
-    </el-form-item>
-
-    <h3>{{$t('stylegen.animation')}}</h3>
-    <el-form-item :label="$t('stylegen.animateIn')">
-      <el-switch v-model="form.animateIn"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.fadeInTime')">
-      <el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.animateOut')">
-      <el-switch v-model="form.animateOut"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.animateOutWaitTime')">
-      <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.fadeOutTime')">
-      <el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.slide')">
-      <el-switch v-model="form.slide"></el-switch>
-    </el-form-item>
-    <el-form-item :label="$t('stylegen.reverseSlide')">
-      <el-switch v-model="form.reverseSlide"></el-switch>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
-    </el-form-item>
-  </el-form>
+  <div>
+    <el-form label-width="150px" size="mini">
+      <h3>{{$t('stylegen.outlines')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showOutlines')">
+              <el-switch v-model="form.showOutlines"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.outlineColor')">
+              <el-color-picker v-model="form.outlineColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('stylegen.outlineSize')">
+          <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
+        </el-form-item>
+      </el-card>
+
+      <h3>{{$t('stylegen.avatars')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showAvatars')">
+              <el-switch v-model="form.showAvatars"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.avatarSize')">
+              <el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <h3>{{$t('stylegen.userNames')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showUserNames')">
+              <el-switch v-model="form.showUserNames"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.font')">
+              <font-select v-model="form.userNameFont"></font-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.fontSize')">
+              <el-input v-model.number="form.userNameFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.lineHeight')">
+              <el-input v-model.number="form.userNameLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.normalColor')">
+              <el-color-picker v-model="form.userNameColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.memberColor')">
+              <el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.moderatorColor')">
+              <el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.ownerColor')">
+              <el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showBadges')">
+              <el-switch v-model="form.showBadges"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showColon')">
+              <el-switch v-model="form.showColon"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <h3>{{$t('stylegen.messages')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.font')">
+              <font-select v-model="form.messageFont"></font-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.color')">
+              <el-color-picker v-model="form.messageColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.fontSize')">
+              <el-input v-model.number="form.messageFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.lineHeight')">
+              <el-input v-model.number="form.messageLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('stylegen.onNewLine')">
+          <el-switch v-model="form.messageOnNewLine"></el-switch>
+        </el-form-item>
+      </el-card>
+
+      <h3>{{$t('stylegen.time')}}</h3>
+      <el-card shadow="never">
+        <el-form-item :label="$t('stylegen.showTime')">
+          <el-switch v-model="form.showTime"></el-switch>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.font')">
+              <font-select v-model="form.timeFont"></font-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.color')">
+              <el-color-picker v-model="form.timeColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.fontSize')">
+              <el-input v-model.number="form.timeFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.lineHeight')">
+              <el-input v-model.number="form.timeLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <h3>{{$t('stylegen.backgrounds')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.bgColor')">
+              <el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
+              <el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.messageBgColor')">
+              <el-color-picker v-model="form.messageBgColor" show-alpha></el-color-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.memberMessageBgColor')">
+              <el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.moderatorMessageBgColor')">
+              <el-color-picker v-model="form.moderatorMessageBgColor" show-alpha></el-color-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.ownerMessageBgColor')">
+              <el-color-picker v-model="form.ownerMessageBgColor" show-alpha></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <h3>{{$t('stylegen.scAndNewMember')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.firstLineFont')">
+              <font-select v-model="form.firstLineFont"></font-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.firstLineColor')">
+              <el-color-picker v-model="form.firstLineColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.firstLineFontSize')">
+              <el-input v-model.number="form.firstLineFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.firstLineLineHeight')">
+              <el-input v-model.number="form.firstLineLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.secondLineFont')">
+              <font-select v-model="form.secondLineFont"></font-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.secondLineColor')">
+              <el-color-picker v-model="form.secondLineColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.secondLineFontSize')">
+              <el-input v-model.number="form.secondLineFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.secondLineLineHeight')">
+              <el-input v-model.number="form.secondLineLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.scContentLineFont')">
+              <font-select v-model="form.scContentFont"></font-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.scContentLineColor')">
+              <el-color-picker v-model="form.scContentColor"></el-color-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.scContentLineFontSize')">
+              <el-input v-model.number="form.scContentFontSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.scContentLineLineHeight')">
+              <el-input v-model.number="form.scContentLineHeight" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item :label="$t('stylegen.showNewMemberBg')">
+          <el-switch v-model="form.showNewMemberBg"></el-switch>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showScTicker')">
+              <el-switch v-model="form.showScTicker"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showOtherThings')">
+              <el-switch v-model="form.showOtherThings"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <h3>{{$t('stylegen.animation')}}</h3>
+      <el-card shadow="never">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.animateIn')">
+              <el-switch v-model="form.animateIn"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.fadeInTime')">
+              <el-input v-model.number="form.fadeInTime" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.animateOut')">
+              <el-switch v-model="form.animateOut"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.fadeOutTime')">
+              <el-input v-model.number="form.fadeOutTime" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('stylegen.animateOutWaitTime')">
+          <el-input v-model.number="form.animateOutWaitTime" type="number" min="0"></el-input>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.slide')">
+              <el-switch v-model="form.slide"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.reverseSlide')">
+              <el-switch v-model="form.reverseSlide"></el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
+        </el-form-item>
+      </el-card>
+    </el-form>
+  </div>
 </template>
 
 <script>
 import _ from 'lodash'
 
+import FontSelect from './FontSelect'
 import * as common from './common'
 import * as fonts from './fonts'
 import {mergeConfig} from '@/utils'
@@ -252,13 +418,14 @@ export const DEFAULT_CONFIG = {
 
 export default {
   name: 'Legacy',
+  components: {
+    FontSelect
+  },
   props: {
     value: String
   },
   data() {
     return {
-      FONTS: fonts.ALL_FONTS,
-
       form: this.loadConfig()
     }
   },
@@ -559,16 +726,6 @@ yt-live-chat-paid-message-renderer {
     resetConfig() {
       this.form = {...DEFAULT_CONFIG}
     },
-    getFontSuggestions(query, callback) {
-      let res = this.FONTS.map(font => {return {value: font}})
-      if (query) {
-        query = query.toLowerCase()
-        res = res.filter(
-          font => font.value.toLowerCase().indexOf(query) !== -1
-        )
-      }
-      callback(res)
-    },
 
     getMessageStyleForAuthorType(authorType, color) {
       let typeSelector = authorType ? `[author-type="${authorType}"]` : ''

frontend/src/views/StyleGenerator/index.vue

@@ -1,22 +1,24 @@
 <template>
   <el-row :gutter="20">
-    <el-col :span="12">
+    <el-col :sm="24" :md="16">
       <legacy ref="legacy" v-model="subComponentResults.legacy" @playAnimation="playAnimation"></legacy>
 
       <el-form label-width="150px" size="mini">
         <h3>{{$t('stylegen.result')}}</h3>
-        <el-form-item label="CSS">
-          <el-input v-model="inputResult" ref="result" type="textarea" :rows="20"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="copyResult">{{$t('stylegen.copy')}}</el-button>
-          <el-button @click="resetConfig">{{$t('stylegen.resetConfig')}}</el-button>
-        </el-form-item>
+        <el-card shadow="never">
+          <el-form-item label="CSS">
+            <el-input v-model="inputResult" ref="result" type="textarea" :rows="20"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="copyResult">{{$t('stylegen.copy')}}</el-button>
+            <el-button @click="resetConfig">{{$t('stylegen.resetConfig')}}</el-button>
+          </el-form-item>
+        </el-card>
       </el-form>
     </el-col>
 
-    <el-col :span="12">
-      <div ref="exampleContainer" id="example-container">
+    <el-col :sm="24" :md="8">
+      <div id="example-container" :style="{top: `${exampleTop}px`}">
         <div id="fakebody">
           <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
         </div>
@@ -137,7 +139,9 @@ export default {
       // 输入框的结果
       inputResult: '',
       // 防抖后延迟变化的结果
-      debounceResult: ''
+      debounceResult: '',
+
+      exampleTop: 0
     }
   },
   computed: {
@@ -162,8 +166,20 @@ export default {
     this.debounceResult = this.inputResult = this.subComponentResult
 
     this.$refs.renderer.addMessages(EXAMPLE_MESSAGES)
+
+    this.$parent.$el.addEventListener('scroll', this.onParentScroll)
+  },
+  beforeDestroy() {
+    this.$parent.$el.removeEventListener('scroll', this.onParentScroll)
   },
   methods: {
+    onParentScroll(event) {
+      if (document.body.clientWidth <= 992) {
+        this.exampleTop = 0
+      } else {
+        this.exampleTop = event.target.scrollTop
+      }
+    },
     async playAnimation() {
       this.$refs.renderer.clearMessages()
       await this.$nextTick()
@@ -183,10 +199,7 @@ export default {
 
 <style scoped>
 #example-container {
-  position: fixed;
-  top: 30px;
-  left: calc(210px + 40px + (100vw - 210px - 40px) / 2);
-  width: calc((100vw - 210px - 40px) / 2 - 40px - 30px);
+  position: relative;
   height: calc(100vh - 110px);
 
   background-color: #444;
@@ -201,11 +214,11 @@ export default {
     -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #333)),
     -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #333));
 
-  -moz-background-size:32px 32px;
-  background-size:32px 32px;
-  -webkit-background-size:32px 32px;
+  -moz-background-size: 32px 32px;
+  background-size: 32px 32px;
+  -webkit-background-size: 32px 32px;
 
-  background-position:0 0, 16px 0, 16px -16px, 0px 16px;
+  background-position: 0 0, 16px 0, 16px -16px, 0px 16px;
 
   padding: 25px;
 
@@ -213,10 +226,6 @@ export default {
   overflow: hidden;
 }
 
-.app-wrapper.mobile #example-container {
-  display: none;
-}
-
 #fakebody {
   outline: 1px #999 dashed;
   height: 100%;