mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-03-13 19:30:46 +08:00
添加国际化
This commit is contained in:
John Smith
parent
2d86449c24
commit
702bd56869
109
frontend/src/lang/en.js
Normal file
109
frontend/src/lang/en.js
Normal file
@ -0,0 +1,109 @@
|
||||
export default {
|
||||
sidebar: {
|
||||
home: 'Home',
|
||||
stylegen: 'Style generator',
|
||||
projectAddress: 'Project address'
|
||||
},
|
||||
home: {
|
||||
roomIdEmpty: "Room ID can't be empty",
|
||||
roomIdInteger: 'Room ID must be positive integer',
|
||||
|
||||
general: 'General',
|
||||
roomId: 'Room ID',
|
||||
showDanmaku: 'Show messages',
|
||||
showGift: 'Show Super Chats',
|
||||
mergeSimilarDanmaku: 'Merge similar messages',
|
||||
minGiftPrice: 'Min price of Super Chats to show (CNY)',
|
||||
maxSpeed: 'Max speed of messages (/second, 0 for unlimited)',
|
||||
|
||||
block: 'Block',
|
||||
giftDanmaku: 'System messages (gift effect)',
|
||||
blockLevel: 'User level lower than',
|
||||
informalUser: 'Informal users',
|
||||
unverifiedUser: 'Unverified users',
|
||||
blockKeywords: 'Block keywords',
|
||||
onePerLine: 'One per line',
|
||||
blockUsers: 'Block users',
|
||||
blockMedalLevel: 'Medal level lower than',
|
||||
|
||||
style: 'Style',
|
||||
|
||||
roomUrl: 'Room URL',
|
||||
copy: 'Copy',
|
||||
saveConfig: 'Save config',
|
||||
enterRoom: 'Enter room',
|
||||
exportConfig: 'Export config',
|
||||
importConfig: 'Import config',
|
||||
|
||||
failedToSave: 'Failed to save: ',
|
||||
successfullySaved: 'Successfully saved',
|
||||
failedToParseConfig: 'Failed to parse config: '
|
||||
},
|
||||
stylegen: {
|
||||
outlines: 'Outlines',
|
||||
showOutlines: 'Show outlines',
|
||||
outlineSize: 'Outline size',
|
||||
outlineColor: 'Outline color',
|
||||
|
||||
avatars: 'Avatars',
|
||||
showAvatars: 'Show avatars',
|
||||
avatarSize: 'Avatar size',
|
||||
|
||||
userNames: 'User names',
|
||||
font: 'Font',
|
||||
fontSize: 'Font size',
|
||||
lineHeight: 'Line height (0 for default)',
|
||||
normalColor: 'Normal color',
|
||||
ownerColor: 'Owner color',
|
||||
moderatorColor: 'Moderator color',
|
||||
memberColor: 'Member color',
|
||||
showBadges: 'Show badges',
|
||||
showColon: 'Show colon after name',
|
||||
|
||||
messages: 'Messages',
|
||||
color: 'Color',
|
||||
onNewLine: 'On new line',
|
||||
|
||||
time: 'Timestamps',
|
||||
showTime: 'Show timestamps',
|
||||
|
||||
backgrounds: 'Backgrounds',
|
||||
bgColor: 'Background color',
|
||||
useBarsInsteadOfBg: 'Use bars instead of backgrounds',
|
||||
messageBgColor: 'Message background color',
|
||||
ownerMessageBgColor: 'Owner background color',
|
||||
moderatorMessageBgColor: 'Moderator background color',
|
||||
memberMessageBgColor: 'Member background color',
|
||||
|
||||
scAndNewMember: 'Super Chat / New member',
|
||||
firstLineFont: 'First line font',
|
||||
firstLineFontSize: 'First line font size',
|
||||
firstLineLineHeight: 'First line line height (0 for default)',
|
||||
firstLineColor: 'First line color',
|
||||
secondLineFont: 'Second line font',
|
||||
secondLineFontSize: 'Second line font size',
|
||||
secondLineLineHeight: 'Second line line height (0 for default)',
|
||||
secondLineColor: 'Second line color',
|
||||
scContentLineFont: 'Super Chat content font',
|
||||
scContentLineFontSize: 'Super Chat content font size',
|
||||
scContentLineLineHeight: 'Super Chat content line height (0 for default)',
|
||||
scContentLineColor: 'Super Chat content color',
|
||||
showNewMemberBg: 'Show new member background',
|
||||
showScTicker: 'Show Super Chat ticker',
|
||||
showOtherThings: 'Show everything other than Super Chat ticker',
|
||||
|
||||
animation: 'Animation',
|
||||
animateIn: 'Animate in',
|
||||
fadeInTime: 'Fade in time (miliseconds)',
|
||||
animateOut: 'Animate out (remove old messages)',
|
||||
animateOutWaitTime: 'Wait time (seconds)',
|
||||
fadeOutTime: 'Fade out time (miliseconds)',
|
||||
slide: 'Slide',
|
||||
reverseSlide: 'Reverse slide',
|
||||
playAnimation: 'Play animation',
|
||||
|
||||
result: 'Result',
|
||||
copy: 'Copy',
|
||||
resetConfig: 'Reset config'
|
||||
}
|
||||
}
|
||||
109
frontend/src/lang/ja.js
Normal file
109
frontend/src/lang/ja.js
Normal file
@ -0,0 +1,109 @@
|
||||
export default {
|
||||
sidebar: {
|
||||
home: 'トップページ',
|
||||
stylegen: 'スタイルジェネレータ',
|
||||
projectAddress: 'プロジェクトアドレス'
|
||||
},
|
||||
home: {
|
||||
roomIdEmpty: 'ルームのIDを空白にすることはできません',
|
||||
roomIdInteger: 'ルームは正の整数でなければなりません',
|
||||
|
||||
general: '常規',
|
||||
roomId: 'ルームID',
|
||||
showDanmaku: 'コメントを表示する',
|
||||
showGift: 'スーパーチャットと新メンバーを表示する',
|
||||
mergeSimilarDanmaku: '同じコメントを合併する',
|
||||
minGiftPrice: '最低表示スーパーチャット価格（CNY）',
|
||||
maxSpeed: 'コメントの最大速度（バー/秒、0は無制限）',
|
||||
|
||||
block: 'ブロック',
|
||||
giftDanmaku: 'システムコメント（プレゼント効果）',
|
||||
blockLevel: 'ユーザーレベルがx未満',
|
||||
informalUser: '非公式ユーザー',
|
||||
unverifiedUser: '認証されていないユーザー',
|
||||
blockKeywords: 'キーワード',
|
||||
onePerLine: '1行に1つずつ',
|
||||
blockUsers: 'ユーザー',
|
||||
blockMedalLevel: '勲章等級がx未満',
|
||||
|
||||
style: 'スタイル',
|
||||
|
||||
roomUrl: 'ルームのURL',
|
||||
copy: 'コピー',
|
||||
saveConfig: 'コンフィグを保存する',
|
||||
enterRoom: 'ルームに入る',
|
||||
exportConfig: 'コンフィグの導出',
|
||||
importConfig: 'コンフィグの導入',
|
||||
|
||||
failedToSave: '保存に失敗しました：',
|
||||
successfullySaved: '保存に成功しました',
|
||||
failedToParseConfig: 'コンフィグ解析に失敗しました'
|
||||
},
|
||||
stylegen: {
|
||||
outlines: 'アウトライン',
|
||||
showOutlines: 'アウトラインを表示する',
|
||||
outlineSize: 'アウトラインのサイズ',
|
||||
outlineColor: 'アウトラインの色',
|
||||
|
||||
avatars: 'アイコン',
|
||||
showAvatars: 'アイコンを表示する',
|
||||
avatarSize: 'アイコンのサイズ',
|
||||
|
||||
userNames: 'ユーザー名',
|
||||
font: 'フォント',
|
||||
fontSize: 'フォントサイズ',
|
||||
lineHeight: '行の高さ（0はデフォルト）',
|
||||
normalColor: 'ノーマルの色',
|
||||
ownerColor: 'オーナーの色',
|
||||
moderatorColor: '管理者の色',
|
||||
memberColor: 'メンバーの色',
|
||||
showBadges: '勲章を見せる',
|
||||
showColon: 'ユーザー名の後にコロンが表示されます',
|
||||
|
||||
messages: 'コメント',
|
||||
color: '色',
|
||||
onNewLine: '新しい行に表示する',
|
||||
|
||||
time: '時間',
|
||||
showTime: '時間を表示する',
|
||||
|
||||
backgrounds: '背景',
|
||||
bgColor: '背景色',
|
||||
useBarsInsteadOfBg: '背景に代わります',
|
||||
messageBgColor: 'コメント背景色',
|
||||
ownerMessageBgColor: 'オーナーコメント背景色',
|
||||
moderatorMessageBgColor: '管理者コメント背景色',
|
||||
memberMessageBgColor: 'メンバーコメント背景色',
|
||||
|
||||
scAndNewMember: 'スーパーチャット、新メンバー',
|
||||
firstLineFont: '1行目のフォント',
|
||||
firstLineFontSize: '1行目のフォントサイズ',
|
||||
firstLineLineHeight: '1行目の高さ（0はデフォルト）',
|
||||
firstLineColor: '1行目の色',
|
||||
secondLineFont: '2行目のフォント',
|
||||
secondLineFontSize: '2行目のフォントサイズ',
|
||||
secondLineLineHeight: '2行目の高さ（0はデフォルト）',
|
||||
secondLineColor: '2行目の色',
|
||||
scContentLineFont: 'スーパーチャットのコンテンツフォント',
|
||||
scContentLineFontSize: 'スーパーチャットコンテンツフォントサイズ',
|
||||
scContentLineLineHeight: 'スーパーチャットコンテンツライン高さ（0がデフォルト）',
|
||||
scContentLineColor: 'スーパーチャットコンテンツライン色',
|
||||
showNewMemberBg: '新メンバーの背景を表示する',
|
||||
showScTicker: 'スーパーチャットチカーの表示',
|
||||
showOtherThings: 'スーパーチャットチカー以外のコンテンツを表示します',
|
||||
|
||||
animation: 'アニメーション',
|
||||
animateIn: '入場アニメーション',
|
||||
fadeInTime: 'フェードイン時間（ミリ秒）',
|
||||
animateOut: '古いコメントを除去する',
|
||||
animateOutWaitTime: '待ち時間（秒）',
|
||||
fadeOutTime: 'フェードアウト時間（ミリ秒）',
|
||||
slide: '滑る',
|
||||
reverseSlide: '逆の滑る',
|
||||
playAnimation: 'アニメーションを再生する',
|
||||
|
||||
result: '結果',
|
||||
copy: 'コピー',
|
||||
resetConfig: 'デフォルトに戻す'
|
||||
}
|
||||
}
|
||||
109
frontend/src/lang/zh.js
Normal file
109
frontend/src/lang/zh.js
Normal file
@ -0,0 +1,109 @@
|
||||
export default {
|
||||
sidebar: {
|
||||
home: '首页',
|
||||
stylegen: '样式生成器',
|
||||
projectAddress: '项目地址'
|
||||
},
|
||||
home: {
|
||||
roomIdEmpty: '房间ID不能为空',
|
||||
roomIdInteger: '房间ID必须为正整数',
|
||||
|
||||
general: '常规',
|
||||
roomId: '房间ID',
|
||||
showDanmaku: '显示弹幕',
|
||||
showGift: '显示礼物和新舰长',
|
||||
mergeSimilarDanmaku: '合并相似弹幕',
|
||||
minGiftPrice: '最低显示礼物价格（元）',
|
||||
maxSpeed: '弹幕最大速度（条/秒，0为无限制）',
|
||||
|
||||
block: '屏蔽',
|
||||
giftDanmaku: '礼物弹幕',
|
||||
blockLevel: '用户等级低于',
|
||||
informalUser: '非正式会员',
|
||||
unverifiedUser: '未绑定手机用户',
|
||||
blockKeywords: '屏蔽关键词',
|
||||
onePerLine: '一行一个',
|
||||
blockUsers: '屏蔽用户',
|
||||
blockMedalLevel: '当前直播间勋章等级低于',
|
||||
|
||||
style: '样式',
|
||||
|
||||
roomUrl: '房间URL',
|
||||
copy: '复制',
|
||||
saveConfig: '保存配置',
|
||||
enterRoom: '进入房间',
|
||||
exportConfig: '导出配置',
|
||||
importConfig: '导入配置',
|
||||
|
||||
failedToSave: '保存失败：',
|
||||
successfullySaved: '保存成功',
|
||||
failedToParseConfig: '配置解析失败：'
|
||||
},
|
||||
stylegen: {
|
||||
outlines: '描边',
|
||||
showOutlines: '显示描边',
|
||||
outlineSize: '描边尺寸',
|
||||
outlineColor: '描边颜色',
|
||||
|
||||
avatars: '头像',
|
||||
showAvatars: '显示头像',
|
||||
avatarSize: '头像尺寸',
|
||||
|
||||
userNames: '用户名',
|
||||
font: '字体',
|
||||
fontSize: '字体尺寸',
|
||||
lineHeight: '行高（0为默认）',
|
||||
normalColor: '普通颜色',
|
||||
ownerColor: '主播颜色',
|
||||
moderatorColor: '房管颜色',
|
||||
memberColor: '舰长颜色',
|
||||
showBadges: '显示勋章',
|
||||
showColon: '用户名后显示冒号',
|
||||
|
||||
messages: '消息',
|
||||
color: '颜色',
|
||||
onNewLine: '在新行显示',
|
||||
|
||||
time: '时间',
|
||||
showTime: '显示时间',
|
||||
|
||||
backgrounds: '背景',
|
||||
bgColor: '背景色',
|
||||
useBarsInsteadOfBg: '用条代替背景',
|
||||
messageBgColor: '消息背景色',
|
||||
ownerMessageBgColor: '主播消息背景色',
|
||||
moderatorMessageBgColor: '房管消息背景色',
|
||||
memberMessageBgColor: '舰长消息背景色',
|
||||
|
||||
scAndNewMember: '礼物、舰长',
|
||||
firstLineFont: '第一行字体',
|
||||
firstLineFontSize: '第一行字体尺寸',
|
||||
firstLineLineHeight: '第一行行高（0为默认）',
|
||||
firstLineColor: '第一行颜色',
|
||||
secondLineFont: '第二行字体',
|
||||
secondLineFontSize: '第二行字体尺寸',
|
||||
secondLineLineHeight: '第二行行高（0为默认）',
|
||||
secondLineColor: '第二行颜色',
|
||||
scContentLineFont: 'Super Chat内容字体',
|
||||
scContentLineFontSize: 'Super Chat内容字体尺寸',
|
||||
scContentLineLineHeight: 'Super Chat内容行高（0为默认）',
|
||||
scContentLineColor: 'Super Chat内容颜色',
|
||||
showNewMemberBg: '显示新舰长背景',
|
||||
showScTicker: '显示Super Chat贴纸',
|
||||
showOtherThings: '显示Super Chat贴纸之外的内容',
|
||||
|
||||
animation: '动画',
|
||||
animateIn: '进入动画',
|
||||
fadeInTime: '淡入时间（毫秒）',
|
||||
animateOut: '移除旧消息',
|
||||
animateOutWaitTime: '等待时间（秒）',
|
||||
fadeOutTime: '淡出时间（毫秒）',
|
||||
slide: '滑动',
|
||||
reverseSlide: '反向滑动',
|
||||
playAnimation: '播放动画',
|
||||
|
||||
result: '结果',
|
||||
copy: '复制',
|
||||
resetConfig: '恢复默认设置'
|
||||
}
|
||||
}
|
||||
@ -8,23 +8,41 @@
|
||||
:default-active="$route.path"
|
||||
>
|
||||
<el-menu-item index="/">
|
||||
<i class="el-icon-s-home"></i>首页
|
||||
<i class="el-icon-s-home"></i>{{$t('sidebar.home')}}
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$router.resolve({name: 'stylegen'}).href">
|
||||
<i class="el-icon-brush"></i>样式生成器
|
||||
<i class="el-icon-brush"></i>{{$t('sidebar.stylegen')}}
|
||||
</el-menu-item>
|
||||
<a href="https://github.com/xfgryujk/blivechat" target="_blank">
|
||||
<el-menu-item>
|
||||
<i class="el-icon-share"></i>项目地址
|
||||
<i class="el-icon-share"></i>{{$t('sidebar.projectAddress')}}
|
||||
</el-menu-item>
|
||||
</a>
|
||||
<el-submenu index="null">
|
||||
<template slot="title">
|
||||
<i class="el-icon-chat-line-square"></i>Language
|
||||
</template>
|
||||
<el-menu-item v-for="{locale, name} in [
|
||||
{locale: 'zh', name: '中文'},
|
||||
{locale: 'ja', name: '日本語'},
|
||||
{locale: 'en', name: 'English'}
|
||||
]" :key="locale"
|
||||
:class="{'is-active': locale === $i18n.locale}"
|
||||
@click="onSelectLanguage(locale)"
|
||||
>{{name}}</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sidebar'
|
||||
name: 'Sidebar',
|
||||
methods: {
|
||||
onSelectLanguage(locale) {
|
||||
window.localStorage.lang = this.$i18n.locale = locale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import axios from 'axios'
|
||||
|
||||
import App from './App.vue'
|
||||
@ -11,6 +12,10 @@ import StyleGenerator from './views/StyleGenerator'
|
||||
import Room from './views/Room.vue'
|
||||
import NotFound from './views/NotFound.vue'
|
||||
|
||||
import zh from './lang/zh'
|
||||
import ja from './lang/ja'
|
||||
import en from './lang/en'
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 开发时使用localhost:80
|
||||
axios.defaults.baseURL = 'http://localhost'
|
||||
@ -18,6 +23,7 @@ if (process.env.NODE_ENV === 'development') {
|
||||
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.ignoredElements = [
|
||||
/^yt-/
|
||||
@ -39,7 +45,27 @@ const router = new VueRouter({
|
||||
]
|
||||
})
|
||||
|
||||
let locale = window.localStorage.lang
|
||||
if (!locale) {
|
||||
let lang = navigator.language
|
||||
if (lang.startsWith('zh')) {
|
||||
locale = 'zh'
|
||||
} else if (lang.startsWith('ja')) {
|
||||
locale = 'ja'
|
||||
} else {
|
||||
locale = 'en'
|
||||
}
|
||||
}
|
||||
const i18n = new VueI18n({
|
||||
locale,
|
||||
fallbackLocale: 'en',
|
||||
messages: {
|
||||
zh, ja, en
|
||||
}
|
||||
})
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
|
||||
@ -1,57 +1,57 @@
|
||||
<template>
|
||||
<el-form :model="form" ref="form" label-width="150px" :rules="{
|
||||
roomId: [
|
||||
{required: true, message: '房间ID不能为空', trigger: 'blur'},
|
||||
{type: 'integer', min: 1, message: '房间ID必须为正整数', trigger: 'blur'}
|
||||
{required: true, message: $t('home.roomIdEmpty'), trigger: 'blur'},
|
||||
{type: 'integer', min: 1, message: $t('home.roomIdInteger'), trigger: 'blur'}
|
||||
]
|
||||
}">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="常规">
|
||||
<el-form-item label="房间ID" required prop="roomId">
|
||||
<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="显示弹幕">
|
||||
<el-form-item :label="$t('home.showDanmaku')">
|
||||
<el-switch v-model="form.showDanmaku"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示礼物和新舰长">
|
||||
<el-form-item :label="$t('home.showGift')">
|
||||
<el-switch v-model="form.showGift"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="合并相似弹幕">
|
||||
<el-form-item :label="$t('home.mergeSimilarDanmaku')">
|
||||
<el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="最低显示礼物价格（元）">
|
||||
<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="弹幕最大速度（条/秒，0为无限制）">
|
||||
<el-form-item :label="$t('home.maxSpeed')">
|
||||
<el-input v-model.number="form.maxSpeed" type="number" min="0"></el-input>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="屏蔽">
|
||||
<el-form-item label="礼物弹幕">
|
||||
<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="用户等级低于">
|
||||
<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="非正式会员">
|
||||
<el-form-item :label="$t('home.informalUser')">
|
||||
<el-switch v-model="form.blockNewbie"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="未绑定手机用户">
|
||||
<el-form-item :label="$t('home.unverifiedUser')">
|
||||
<el-switch v-model="form.blockNotMobileVerified"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="屏蔽关键词">
|
||||
<el-input v-model="form.blockKeywords" type="textarea" :rows="5" placeholder="一行一个"></el-input>
|
||||
<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="屏蔽用户">
|
||||
<el-input v-model="form.blockUsers" type="textarea" :rows="5" placeholder="一行一个"></el-input>
|
||||
<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="当前直播间勋章等级低于">
|
||||
<el-form-item :label="$t('home.blockMedalLevel')">
|
||||
<el-slider v-model="form.blockMedalLevel" show-input :min="0" :max="20"></el-slider>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="样式">
|
||||
<el-tab-pane :label="$t('home.style')">
|
||||
<el-form-item label="CSS">
|
||||
<el-input v-model="form.css" type="textarea" :rows="20"></el-input>
|
||||
</el-form-item>
|
||||
@ -59,15 +59,15 @@
|
||||
</el-tabs>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="房间URL" v-show="roomUrl">
|
||||
<el-form-item :label="$t('home.roomUrl')" v-show="roomUrl">
|
||||
<el-input ref="roomUrlInput" readonly :value="roomUrl" style="width: calc(100% - 6em); margin-right: 1em;"></el-input>
|
||||
<el-button type="primary" @click="copyUrl">复制</el-button>
|
||||
<el-button type="primary" @click="copyUrl">{{$t('home.copy')}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveConfig">保存配置</el-button>
|
||||
<el-button type="primary" :disabled="!roomUrl" @click="enterRoom">进入房间</el-button>
|
||||
<el-button type="primary" @click="exportConfig">导出配置</el-button>
|
||||
<el-button type="primary" @click="importConfig">导入配置</el-button>
|
||||
<el-button type="primary" @click="saveConfig">{{$t('home.saveConfig')}}</el-button>
|
||||
<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>
|
||||
</template>
|
||||
@ -109,10 +109,10 @@ export default {
|
||||
window.localStorage.configId = (await config.createRemoteConfig(this.form)).id
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('保存失败：' + e)
|
||||
this.$message.error(this.$t('home.failedToSave') + e)
|
||||
return
|
||||
}
|
||||
this.$message({message: '保存成功', type: 'success'})
|
||||
this.$message({message: this.$t('home.successfullySaved'), type: 'success'})
|
||||
|
||||
let resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId},
|
||||
query: {config_id: window.localStorage.configId}})
|
||||
@ -141,7 +141,7 @@ export default {
|
||||
try {
|
||||
cfg = JSON.parse(reader.result)
|
||||
} catch (e) {
|
||||
this.$message.error('配置解析失败：' + e)
|
||||
this.$message.error(this.$t('home.failedToParseConfig') + e)
|
||||
return
|
||||
}
|
||||
cfg = mergeConfig(cfg, config.DEFAULT_CONFIG)
|
||||
|
||||
@ -2,188 +2,188 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form label-width="150px" size="mini">
|
||||
<h3>描边</h3>
|
||||
<el-form-item label="显示描边">
|
||||
<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="描边尺寸">
|
||||
<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="描边颜色">
|
||||
<el-form-item :label="$t('stylegen.outlineColor')">
|
||||
<el-color-picker v-model="form.outlineColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<h3>头像</h3>
|
||||
<el-form-item label="显示头像">
|
||||
<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="头像尺寸">
|
||||
<el-form-item :label="$t('stylegen.avatarSize')">
|
||||
<el-input v-model.number="form.avatarSize" type="number" min="0"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<h3>用户名</h3>
|
||||
<el-form-item label="字体">
|
||||
<h3>{{$t('stylegen.userNames')}}</h3>
|
||||
<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="字体尺寸">
|
||||
<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="行高（0为默认）">
|
||||
<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="普通颜色">
|
||||
<el-form-item :label="$t('stylegen.normalColor')">
|
||||
<el-color-picker v-model="form.userNameColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="主播颜色">
|
||||
<el-form-item :label="$t('stylegen.ownerColor')">
|
||||
<el-color-picker v-model="form.ownerUserNameColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="房管颜色">
|
||||
<el-form-item :label="$t('stylegen.moderatorColor')">
|
||||
<el-color-picker v-model="form.moderatorUserNameColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="舰长颜色">
|
||||
<el-form-item :label="$t('stylegen.memberColor')">
|
||||
<el-color-picker v-model="form.memberUserNameColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示勋章">
|
||||
<el-form-item :label="$t('stylegen.showBadges')">
|
||||
<el-switch v-model="form.showBadges"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名后显示冒号">
|
||||
<el-form-item :label="$t('stylegen.showColon')">
|
||||
<el-switch v-model="form.showColon"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<h3>消息</h3>
|
||||
<el-form-item label="字体">
|
||||
<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="字体尺寸">
|
||||
<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="行高（0为默认）">
|
||||
<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="颜色">
|
||||
<el-form-item :label="$t('stylegen.color')">
|
||||
<el-color-picker v-model="form.messageColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="在新行显示">
|
||||
<el-form-item :label="$t('stylegen.onNewLine')">
|
||||
<el-switch v-model="form.messageOnNewLine"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<h3>时间</h3>
|
||||
<el-form-item label="显示时间">
|
||||
<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="字体">
|
||||
<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="字体尺寸">
|
||||
<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="行高（0为默认）">
|
||||
<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="颜色">
|
||||
<el-form-item :label="$t('stylegen.color')">
|
||||
<el-color-picker v-model="form.timeColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<h3>背景</h3>
|
||||
<el-form-item label="背景色">
|
||||
<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="用条代替背景">
|
||||
<el-form-item :label="$t('stylegen.useBarsInsteadOfBg')">
|
||||
<el-switch v-model="form.useBarsInsteadOfBg"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="消息背景色">
|
||||
<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="主播消息背景色">
|
||||
<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="房管消息背景色">
|
||||
<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="舰长消息背景色">
|
||||
<el-form-item :label="$t('stylegen.memberMessageBgColor')">
|
||||
<el-color-picker v-model="form.memberMessageBgColor" show-alpha></el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<h3>礼物、舰长</h3>
|
||||
<el-form-item label="第一行字体">
|
||||
<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="第一行字体尺寸">
|
||||
<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="第一行行高（0为默认）">
|
||||
<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="第一行颜色">
|
||||
<el-form-item :label="$t('stylegen.firstLineColor')">
|
||||
<el-color-picker v-model="form.firstLineColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="第二行字体">
|
||||
<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="第二行字体尺寸">
|
||||
<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="第二行行高（0为默认）">
|
||||
<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="第二行颜色">
|
||||
<el-form-item :label="$t('stylegen.secondLineColor')">
|
||||
<el-color-picker v-model="form.secondLineColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="SuperChat内容字体">
|
||||
<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="SuperChat内容字体尺寸">
|
||||
<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="SuperChat内容行高（0为默认）">
|
||||
<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="SuperChat内容颜色">
|
||||
<el-form-item :label="$t('stylegen.scContentLineColor')">
|
||||
<el-color-picker v-model="form.scContentColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示新舰长背景">
|
||||
<el-form-item :label="$t('stylegen.showNewMemberBg')">
|
||||
<el-switch v-model="form.showNewMemberBg"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示SuperChat贴纸">
|
||||
<el-form-item :label="$t('stylegen.showScTicker')">
|
||||
<el-switch v-model="form.showScTicker"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示SuperChat贴纸之外的内容">
|
||||
<el-form-item :label="$t('stylegen.showOtherThings')">
|
||||
<el-switch v-model="form.showOtherThings"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<h3>动画</h3>
|
||||
<el-form-item label="进入动画">
|
||||
<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="淡入时间（毫秒）">
|
||||
<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="移除旧消息">
|
||||
<el-form-item :label="$t('stylegen.animateOut')">
|
||||
<el-switch v-model="form.animateOut"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="等待时间（秒）">
|
||||
<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="淡出时间（毫秒）">
|
||||
<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="滑动">
|
||||
<el-form-item :label="$t('stylegen.slide')">
|
||||
<el-switch v-model="form.slide"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="反向滑动">
|
||||
<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="playAnimation">播放动画</el-button>
|
||||
<el-button type="primary" @click="playAnimation">{{$t('stylegen.playAnimation')}}</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<h3>结果</h3>
|
||||
<h3>{{$t('stylegen.result')}}</h3>
|
||||
<el-form-item label="CSS">
|
||||
<el-input v-model="result" ref="result" type="textarea" :rows="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="copyResult">复制</el-button>
|
||||
<el-button @click="resetConfig">恢复默认设置</el-button>
|
||||
<el-button type="primary" @click="copyResult">{{$t('stylegen.copy')}}</el-button>
|
||||
<el-button @click="resetConfig">{{$t('stylegen.resetConfig')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user