github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2025-04-05 00:50:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化样式生成器界面

Browse Source
This commit is contained in:
John Smith 2024-11-24 18:06:41 +08:00
parent 3976aa79ed
commit 1244210bfe
5 changed files with 687 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "blivechat", "name": "blivechat",
"version": "1.9.3", "version": "1.10.0-dev",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",

6
frontend/src/lang/zh.js
View File

@ -79,8 +79,8 @@ export default {
legacy: '经典', legacy: '经典',
lineLike: '仿微信', lineLike: '仿微信',
light: '明亮', light: '亮色',
dark: '黑暗', dark: '暗色',
outlines: '描边', outlines: '描边',
showOutlines: '显示描边', showOutlines: '显示描边',
@ -150,7 +150,7 @@ export default {
fadeOutTime: '淡出时间（毫秒）', fadeOutTime: '淡出时间（毫秒）',
slide: '滑动', slide: '滑动',
reverseSlide: '反向滑动', reverseSlide: '反向滑动',
playAnimation: '播放动画', playAnimation: '生成消息',
result: '结果', result: '结果',
copy: '复制', copy: '复制',

56
frontend/src/views/StyleGenerator/Legacy.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<div>
<el-form label-width="150px" size="mini">
<h3>{{ $t('stylegen.outlines') }}</h3>
<el-card shadow="never"> <el-card shadow="never">
<el-form label-width="150px" size="mini">
<el-collapse>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.outlines') }}</h3>
</template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showOutlines')"> <el-form-item :label="$t('stylegen.showOutlines')">
@ -18,10 +21,12 @@
<el-form-item :label="$t('stylegen.outlineSize')"> <el-form-item :label="$t('stylegen.outlineSize')">
<el-input v-model.number="form.outlineSize" type="number" min="0"></el-input> <el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
</el-form-item> </el-form-item>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.avatars') }}</h3> <h3>{{ $t('stylegen.avatars') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showAvatars')"> <el-form-item :label="$t('stylegen.showAvatars')">
@ -34,10 +39,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.userNames') }}</h3> <h3>{{ $t('stylegen.userNames') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showUserNames')"> <el-form-item :label="$t('stylegen.showUserNames')">
@ -98,10 +105,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.messages') }}</h3> <h3>{{ $t('stylegen.messages') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.font')"> <el-form-item :label="$t('stylegen.font')">
@ -141,10 +150,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.time') }}</h3> <h3>{{ $t('stylegen.time') }}</h3>
<el-card shadow="never"> </template>
<el-form-item :label="$t('stylegen.showTime')"> <el-form-item :label="$t('stylegen.showTime')">
<el-switch v-model="form.showTime"></el-switch> <el-switch v-model="form.showTime"></el-switch>
</el-form-item> </el-form-item>
@ -172,10 +183,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.backgrounds') }}</h3> <h3>{{ $t('stylegen.backgrounds') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.bgColor')"> <el-form-item :label="$t('stylegen.bgColor')">
@ -212,10 +225,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.scAndNewMember') }}</h3> <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.firstLineFont')"> <el-form-item :label="$t('stylegen.firstLineFont')">
@ -309,10 +324,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.animation') }}</h3> <h3>{{ $t('stylegen.animation') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.animateIn')"> <el-form-item :label="$t('stylegen.animateIn')">
@ -352,9 +369,10 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
</el-collapse>
</el-form> </el-form>
</div> </el-card>
</template> </template>
<script> <script>

50
frontend/src/views/StyleGenerator/LineLike.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<div>
<el-form label-width="150px" size="mini">
<h3>{{ $t('stylegen.avatars') }}</h3>
<el-card shadow="never"> <el-card shadow="never">
<el-form label-width="150px" size="mini">
<el-collapse>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.avatars') }}</h3>
</template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showAvatars')"> <el-form-item :label="$t('stylegen.showAvatars')">
@ -15,10 +18,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.userNames') }}</h3> <h3>{{ $t('stylegen.userNames') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.showUserNames')"> <el-form-item :label="$t('stylegen.showUserNames')">
@ -74,10 +79,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.messages') }}</h3> <h3>{{ $t('stylegen.messages') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.font')"> <el-form-item :label="$t('stylegen.font')">
@ -114,10 +121,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.time') }}</h3> <h3>{{ $t('stylegen.time') }}</h3>
<el-card shadow="never"> </template>
<el-form-item :label="$t('stylegen.showTime')"> <el-form-item :label="$t('stylegen.showTime')">
<el-switch v-model="form.showTime"></el-switch> <el-switch v-model="form.showTime"></el-switch>
</el-form-item> </el-form-item>
@ -145,10 +154,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.backgrounds') }}</h3> <h3>{{ $t('stylegen.backgrounds') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.bgColor')"> <el-form-item :label="$t('stylegen.bgColor')">
@ -185,10 +196,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.scAndNewMember') }}</h3> <h3>{{ $t('stylegen.scAndNewMember') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.firstLineFont')"> <el-form-item :label="$t('stylegen.firstLineFont')">
@ -264,10 +277,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.animation') }}</h3> <h3>{{ $t('stylegen.animation') }}</h3>
<el-card shadow="never"> </template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12"> <el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.animateIn')"> <el-form-item :label="$t('stylegen.animateIn')">
@ -307,9 +322,10 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-collapse-item>
</el-collapse>
</el-form> </el-form>
</div> </el-card>
</template> </template>
<script> <script>

10
frontend/src/views/StyleGenerator/index.vue
View File

@ -2,12 +2,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :sm="24" :md="16"> <el-col :sm="24" :md="16">
<el-tabs v-model="activeTab"> <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"> <el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
<line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like> <line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
</el-tab-pane> </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-tabs>
<el-form label-width="150px" size="mini"> <el-form label-width="150px" size="mini">
@ -64,14 +64,14 @@ export default {
legacy: '', legacy: '',
lineLike: '' lineLike: ''
}, },
activeTab: 'legacy', activeTab: 'lineLike',
// 输入框的结果 // 输入框的结果
inputResult: '', inputResult: '',
// 防抖后延迟变化的结果 // 防抖后延迟变化的结果
debounceResult: '', debounceResult: '',
playAnimation: true, playAnimation: true,
exampleBgLight: false exampleBgLight: true,
} }
}, },
computed: { computed: {