github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2026-08-19 09:43:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

样式生成器支持设置缩放比例、模糊描边

Browse Source
This commit is contained in:
John Smith
2026-04-19 23:48:05 +08:00
parent 46d920da7f
commit b01238cdb7
6 changed files with 85 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,10 +102,16 @@ export default {
light: 'light',
dark: 'dark',
global: 'Global',
scalingNotice: 'You should modify these options rather than scaling in OBS',
globalScale: 'Global scale',
fontScale: 'Font scale',
outlines: 'Outlines',
showOutlines: 'Show outlines',
outlineSize: 'Outline size',
outlineColor: 'Outline color',
blurryOutline: 'Blurry',
avatars: 'Avatars',
showAvatars: 'Show avatars',

10
frontend/src/lang/ja.js
View File

@@ -99,13 +99,19 @@ export default {
legacy: '古典',
lineLike: 'LINE風',
light: '明るい',
dark: '暗い',
light: 'ライト',
dark: 'ダーク',
global: 'グローバル',
scalingNotice: 'OBSでスケーリングするのではなく、まずこちらを調整してください',
globalScale: '全体のスケール',
fontScale: 'フォントスケール',
outlines: 'アウトライン',
showOutlines: 'アウトラインを表示する',
outlineSize: 'アウトラインのサイズ',
outlineColor: 'アウトラインの色',
blurryOutline: 'ぼやけている',
avatars: 'アイコン',
showAvatars: 'アイコンを表示する',

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

@@ -97,13 +97,19 @@ export default {
legacy: '经典',
lineLike: '仿微信',
light: '亮色',
dark: '暗色',
light: '浅色',
dark: '深色',
global: '全局',
scalingNotice: '如果觉得字体太小，优先修改这里的比例而不是在OBS里拉伸浏览器源。求求你们不要拉伸然后问为什么看不清了😭',
globalScale: '全局比例',
fontScale: '字体比例',
outlines: '描边',
showOutlines: '显示描边',
outlineSize: '描边尺寸',
outlineColor: '描边颜色',
blurryOutline: '模糊',
avatars: '头像',
showAvatars: '显示头像',

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

@@ -2,6 +2,27 @@
<el-card shadow="never">
<el-form label-width="150px" size="mini">
<el-collapse>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.global') }}</h3>
</template>
<p>
<el-alert :title="$t('stylegen.scalingNotice')" type="info" show-icon :closable="false"></el-alert>
</p>
<el-row :gutter="20">
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.globalScale')">
<el-input v-model.number="form.globalScale" type="number" min="0" step="0.1"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.fontScale')">
<el-input v-model.number="form.fontScale" type="number" min="0" step="0.1"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.outlines') }}</h3>
@@ -24,6 +45,11 @@
<el-input v-model.number="form.outlineSize" type="number" min="0"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.blurryOutline')">
<el-switch v-model="form.blurryOutline"></el-switch>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
@@ -398,9 +424,13 @@ import * as common from './common'
import { mergeConfig } from '@/utils'
export const DEFAULT_CONFIG = {
globalScale: 1,
fontScale: 1,
showOutlines: true,
outlineSize: 2,
outlineColor: '#000000',
blurryOutline: false,
showAvatars: true,
avatarSize: 24,
@@ -539,9 +569,13 @@ yt-live-chat-text-message-renderer {
return ''
}
let shadow = []
for (let x = -this.form.outlineSize; x <= this.form.outlineSize; x += Math.ceil(this.form.outlineSize / 4)) {
for (let y = -this.form.outlineSize; y <= this.form.outlineSize; y += Math.ceil(this.form.outlineSize / 4)) {
shadow.push(`${x}px ${y}px var(--outline-color)`)
if (this.form.blurryOutline) {
shadow.push(`0 0 ${this.form.outlineSize}px var(--outline-color)`)
} else {
for (let x = -this.form.outlineSize; x <= this.form.outlineSize; x += Math.ceil(this.form.outlineSize / 4)) {
for (let y = -this.form.outlineSize; y <= this.form.outlineSize; y += Math.ceil(this.form.outlineSize / 4)) {
shadow.push(`${x}px ${y}px var(--outline-color)`)
}
}
}
return `/* 描边 Outlines */

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

@@ -2,6 +2,27 @@
<el-card shadow="never">
<el-form label-width="150px" size="mini">
<el-collapse>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.global') }}</h3>
</template>
<p>
<el-alert :title="$t('stylegen.scalingNotice')" type="info" show-icon :closable="false"></el-alert>
</p>
<el-row :gutter="20">
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.globalScale')">
<el-input v-model.number="form.globalScale" type="number" min="0" step="0.1"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item :label="$t('stylegen.fontScale')">
<el-input v-model.number="form.fontScale" type="number" min="0" step="0.1"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
<h3>{{ $t('stylegen.avatars') }}</h3>
@@ -348,6 +369,9 @@ import * as common from './common'
import { mergeConfig } from '@/utils'
export const DEFAULT_CONFIG = {
globalScale: 1,
fontScale: 1,
showAvatars: true,
avatarSize: 40,

4
frontend/src/views/StyleGenerator/common.js
View File

@@ -46,8 +46,8 @@ export function getImportStyle(allFontsStrs) {
export function getVariableStyle(config) {
return `/* 基准尺寸，用于整体缩放 Base size for scaling */
--base-size: 1px;
--font-base-size: calc(1 * var(--base-size));
--base-size: ${config.globalScale}px;
--font-base-size: calc(${config.fontScale} * var(--base-size));
/* 没有首选字体时的备用字体 Fallback font families */
--fallback-fonts: ${FALLBACK_FONTS_CSS};