From 1244210bfe2a6309f315f721a3cf05da164fe624 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sun, 24 Nov 2024 18:06:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E5=99=A8=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 frontend/src/lang/zh.js                       |   6 +-
 frontend/src/views/StyleGenerator/Legacy.vue  | 706 +++++++++---------
 .../src/views/StyleGenerator/LineLike.vue     | 616 +++++++--------
 frontend/src/views/StyleGenerator/index.vue   |  10 +-
 5 files changed, 687 insertions(+), 653 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 762016f..94006fd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blivechat",
-  "version": "1.9.3",
+  "version": "1.10.0-dev",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 9a58247..8dfe91f 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -79,8 +79,8 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
-    light: '明亮',
-    dark: '黑暗',
+    light: '亮色',
+    dark: '暗色',
 
     outlines: '描边',
     showOutlines: '显示描边',
@@ -150,7 +150,7 @@ export default {
     fadeOutTime: '淡出时间（毫秒）',
     slide: '滑动',
     reverseSlide: '反向滑动',
-    playAnimation: '播放动画',
+    playAnimation: '生成消息',
 
     result: '结果',
     copy: '复制',
diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue
index 865b3c7..52e25a1 100644
--- a/frontend/src/views/StyleGenerator/Legacy.vue
+++ b/frontend/src/views/StyleGenerator/Legacy.vue
@@ -1,360 +1,378 @@
 <template>
-  <div>
+  <el-card shadow="never">
     <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>
+      <el-collapse>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.outlines') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.avatars') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.userNames') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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-row :gutter="20">
-          <el-col :xs="24" :sm="12">
-            <el-form-item :label="$t('stylegen.emoticonSize')">
-              <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12">
-            <el-form-item :label="$t('stylegen.largeEmoticonSize')">
-              <el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-card>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.messages') }}</h3>
+          </template>
+          <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-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.emoticonSize')">
+                <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.largeEmoticonSize')">
+                <el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
 
-      <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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.time') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.backgrounds') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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-divider></el-divider>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
+          </template>
+          <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-divider></el-divider>
 
-        <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-divider></el-divider>
+          <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-divider></el-divider>
 
-        <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-divider></el-divider>
+          <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-divider></el-divider>
 
-        <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>
+          <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-collapse-item>
 
-      <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-card>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.animation') }}</h3>
+          </template>
+          <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-collapse-item>
+      </el-collapse>
     </el-form>
-  </div>
+  </el-card>
 </template>
 
 <script>
diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue
index 508b2ec..78f0d82 100644
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@@ -1,315 +1,331 @@
 <template>
-  <div>
+  <el-card shadow="never">
     <el-form label-width="150px" size="mini">
-      <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>
+      <el-collapse>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.avatars') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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-row>
-      </el-card>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.userNames') }}</h3>
+          </template>
+          <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-row>
+        </el-collapse-item>
 
-      <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-row :gutter="20">
-          <el-col :xs="24" :sm="12">
-            <el-form-item :label="$t('stylegen.emoticonSize')">
-              <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12">
-            <el-form-item :label="$t('stylegen.largeEmoticonSize')">
-              <el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-card>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.messages') }}</h3>
+          </template>
+          <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-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.emoticonSize')">
+                <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.largeEmoticonSize')">
+                <el-input v-model.number="form.largeEmoticonSize" type="number" min="0"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
 
-      <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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.time') }}</h3>
+          </template>
+          <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-collapse-item>
 
-      <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.showLargeEmoticonBg')">
-              <el-switch v-model="form.showLargeEmoticonBg"></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>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.backgrounds') }}</h3>
+          </template>
+          <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.showLargeEmoticonBg')">
+                <el-switch v-model="form.showLargeEmoticonBg"></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-collapse-item>
 
-      <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-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-divider></el-divider>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
+          </template>
+          <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-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-divider></el-divider>
 
-        <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-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-divider></el-divider>
+          <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-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-divider></el-divider>
 
-        <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-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-divider></el-divider>
+          <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-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-divider></el-divider>
 
-        <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>
+          <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-collapse-item>
 
-      <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-card>
+        <el-collapse-item>
+          <template slot="title">
+            <h3>{{ $t('stylegen.animation') }}</h3>
+          </template>
+          <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-collapse-item>
+      </el-collapse>
     </el-form>
-  </div>
+  </el-card>
 </template>
 
 <script>
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 7a35b16..66554d5 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -2,12 +2,12 @@
   <el-row :gutter="20">
     <el-col :sm="24" :md="16">
       <el-tabs v-model="activeTab">
-        <el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
-          <legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
-        </el-tab-pane>
         <el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
           <line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
         </el-tab-pane>
+        <el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
+          <legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
+        </el-tab-pane>
       </el-tabs>
 
       <el-form label-width="150px" size="mini">
@@ -64,14 +64,14 @@ export default {
         legacy: '',
         lineLike: ''
       },
-      activeTab: 'legacy',
+      activeTab: 'lineLike',
       // 输入框的结果
       inputResult: '',
       // 防抖后延迟变化的结果
       debounceResult: '',
 
       playAnimation: true,
-      exampleBgLight: false
+      exampleBgLight: true,
     }
   },
   computed: {