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 12:10:57 +08:00
parent a186e09f8f
commit e1c5047f91
7 changed files with 130 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -174,7 +174,7 @@ export default {
reverseSlide: 'Reverse slide',
playAnimation: 'Play animation',
result: 'Result',
result: 'Result CSS',
copy: 'Copy',
editor: 'Editor',
resetConfig: 'Reset config'

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

@@ -174,7 +174,7 @@ export default {
reverseSlide: '逆の滑る',
playAnimation: 'アニメーションを再生する',
result: '結果',
result: '結果CSS',
copy: 'コピー',
editor: 'エディタ',
resetConfig: 'デフォルトに戻す'

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

@@ -172,7 +172,7 @@ export default {
reverseSlide: '反向滑动',
playAnimation: '生成消息',
result: '结果',
result: '结果CSS',
copy: '复制',
editor: '编辑器',
resetConfig: '恢复默认设置'

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

@@ -318,9 +318,6 @@
</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')">
@@ -444,7 +441,6 @@ export const DEFAULT_CONFIG = {
scContentFontSize: 20,
scContentLineHeight: 0,
scContentColor: '#ffffff',
showNewMemberBg: true,
showScTicker: false,
showOtherThings: true,
@@ -479,9 +475,9 @@ export default {
this.paddingStyle,
this.outlineStyle,
this.avatarStyle,
this.timeStyle,
this.userNameStyle,
this.messageStyle,
this.timeStyle,
this.backgroundStyle,
this.scAndNewMemberStyle,
this.animationStyle,
@@ -517,7 +513,7 @@ export default {
--paid-msg-line-2-size: calc(${this.form.secondLineFontSize} * var(--font-base-size));
--paid-msg-content-color: ${this.form.scContentColor ?? '#ffffff'};
--paid-msg-content-size: calc(${this.form.scContentFontSize} * var(--font-base-size));
--membership-msg-bg-color: ${this.form.showNewMemberBg ? 'var(--username-color-member)' : 'transparent'};
--membership-msg-bg-color: var(--username-color-member);
}`
},
paddingStyle() {
@@ -545,16 +541,7 @@ yt-live-chat-renderer * {
return common.getAvatarStyle(this.form)
},
userNameStyle() {
return `/* 用户名 Channel names */
yt-live-chat-text-message-renderer #author-name {
${this.form.showUserNames ? '' : 'display: none;'}
color: var(--username-color);
font-family: ${common.fontsStrToCss(this.form.userNameFont)};
font-size: var(--username-size);
line-height: calc(${this.form.userNameLineHeight || (this.form.userNameFontSize * 1.2)} * var(--font-base-size));
}
${common.getUserNameStyle(this.form)}
return `${common.getUserNameStyle(this.form)}
${!this.form.showColon ? '' : `/* 显示冒号 Show colon */
yt-live-chat-text-message-renderer #author-name::after {
@@ -563,13 +550,7 @@ yt-live-chat-text-message-renderer #author-name::after {
}`}`
},
messageStyle() {
return `/* 文本消息 Text messages */
yt-live-chat-text-message-renderer :is(#message, #message *) {
color: var(--text-content-color);
font-family: ${common.fontsStrToCss(this.form.messageFont)};
font-size: var(--text-content-size);
line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize * 1.2)} * var(--font-base-size));
}
return `${common.getMessageStyle(this.form)}
${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
display: block;
@@ -578,11 +559,7 @@ ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #messag
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
vertical-align: top;
}
${common.EMOTICON_STYLE}
${common.getReverseScrollStyle(this.form)}`
}`
},
timeStyle() {
return common.getTimeStyle(this.form)
@@ -614,80 +591,26 @@ ${!this.form.useBarsInsteadOfBg ? '' : `yt-live-chat-text-message-renderer::afte
}`}`
},
scAndNewMemberStyle() {
return `/* 付费、上舰消息 Super Chats / Membership messages */
yt-live-chat-paid-message-renderer {
margin: 4px 0;
}
return `${common.getScAndNewMemberStyle(this.form)}
${this.scAndNewMemberFontStyle}
yt-live-chat-membership-item-renderer :is(#card, #header) {
background-color: var(--membership-msg-bg-color);
${this.form.showNewMemberBg ? 'margin: 4px 0;' : `box-shadow: none;
margin: 0;`}
}
${this.scTickerStyle}
${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
display: none;
}`}`
},
scAndNewMemberFontStyle() {
let firstLineLineHeight = this.form.firstLineLineHeight || (this.form.firstLineFontSize * 1.2)
return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
color: var(--paid-msg-line-1-color);
font-family: ${common.fontsStrToCss(this.form.firstLineFont)};
font-size: var(--paid-msg-line-1-size);
line-height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
width: calc(${firstLineLineHeight} * var(--font-base-size));
height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
color: var(--paid-msg-line-2-color);
font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#content, #content *) {
color: var(--paid-msg-content-color);
font-family: ${common.fontsStrToCss(this.form.scContentFont)};
font-size: var(--paid-msg-content-size);
line-height: calc(${this.form.scContentLineHeight || (this.form.scContentFontSize * 1.2)} * var(--font-base-size));
}`
},
scTickerStyle() {
if (!this.form.showScTicker) {
return `yt-live-chat-ticker-renderer {
display: none;
}`
} else {
let secondLineLineHeight = this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)
return `/* SC固定栏 Super Chat ticker */
yt-live-chat-ticker-renderer #items {
height: unset;
}
yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
width: calc(${secondLineLineHeight} * var(--font-base-size));
height: calc(${secondLineLineHeight} * var(--font-base-size));
}
yt-live-chat-ticker-paid-message-item-renderer #content {
height: unset;
color: var(--paid-msg-line-2-color) !important;
font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${secondLineLineHeight} * var(--font-base-size));
}`
}
}
`
},
animationStyle() {
return common.getAnimationStyle(this.form)

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

@@ -419,9 +419,9 @@ export default {
common.COMMON_STYLE,
this.paddingStyle,
this.avatarStyle,
this.timeStyle,
this.userNameStyle,
this.messageStyle,
this.timeStyle,
this.backgroundStyle,
this.scAndNewMemberStyle,
this.animationStyle,
@@ -464,31 +464,20 @@ yt-live-chat-text-message-renderer {
return common.getAvatarStyle(this.form)
},
userNameStyle() {
return `/* 用户名 Channel names */
return `${common.getUserNameStyle(this.form)}
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
margin-bottom: 5px;
}
yt-live-chat-text-message-renderer #author-name {
${this.form.showUserNames ? '' : 'display: none;'}
color: var(--username-color);
font-family: ${common.fontsStrToCss(this.form.userNameFont)};
font-size: var(--username-size);
line-height: calc(${this.form.userNameLineHeight || (this.form.userNameFontSize * 1.2)} * var(--font-base-size));
}
${common.getUserNameStyle(this.form)}`
}`
},
messageStyle() {
return `/* 文本消息 Text messages */
yt-live-chat-text-message-renderer :is(#message, #message *) {
color: var(--text-content-color);
font-family: ${common.fontsStrToCss(this.form.messageFont)};
font-size: var(--text-content-size);
line-height: calc(${this.form.messageLineHeight || (this.form.messageFontSize * 1.2)} * var(--font-base-size));
}
/* 气泡背景 Bubble background */
return common.getMessageStyle(this.form)
},
timeStyle() {
return common.getTimeStyle(this.form)
},
backgroundStyle() {
return `/* 气泡背景 Bubble background */
yt-live-chat-text-message-renderer #message {
display: block;
position: relative;
@@ -511,7 +500,7 @@ yt-live-chat-text-message-renderer #message::before {
transform: translate(-50%, -50%) rotate(35deg);
}
${this.form.showLargeEmoticonBg ? '' : `/* 适配隐藏大表情背景 For Hiding background of large emotes */
${this.form.showLargeEmoticonBg ? '' : `/* 适配隐藏大表情背景 For hiding background of large emotes */
yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
content: none;
}
@@ -520,15 +509,7 @@ yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
padding: 0;
}`}
${common.EMOTICON_STYLE}
${common.getReverseScrollStyle(this.form)}`
},
timeStyle() {
return common.getTimeStyle(this.form)
},
backgroundStyle() {
return `/* 背景色 Background colors */
/* 背景色 Background colors */
body {
background-color: ${this.form.bgColor ?? 'transparent'};
}
@@ -547,75 +528,7 @@ yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
}`}`
},
scAndNewMemberStyle() {
return `/* 付费、上舰消息 Super Chats / Membership messages */
yt-live-chat-paid-message-renderer {
margin: 4px 0;
}
${this.scAndNewMemberFontStyle}
yt-live-chat-membership-item-renderer :is(#card, #header) {
background-color: var(--membership-msg-bg-color);
margin: 4px 0;
}
${this.scTickerStyle}
${this.form.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
display: none;
}`}`
},
scAndNewMemberFontStyle() {
let firstLineLineHeight = this.form.firstLineLineHeight || (this.form.firstLineFontSize * 1.2)
return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
font-family: ${common.fontsStrToCss(this.form.firstLineFont)};
font-size: var(--paid-msg-line-1-size);
line-height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
width: calc(${firstLineLineHeight} * var(--font-base-size));
height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#content, #content *) {
font-family: ${common.fontsStrToCss(this.form.scContentFont)};
font-size: var(--paid-msg-content-size);
line-height: calc(${this.form.scContentLineHeight || (this.form.scContentFontSize * 1.2)} * var(--font-base-size));
}`
},
scTickerStyle() {
if (!this.form.showScTicker) {
return `yt-live-chat-ticker-renderer {
display: none;
}`
} else {
let secondLineLineHeight = this.form.secondLineLineHeight || (this.form.secondLineFontSize * 1.2)
return `/* SC固定栏 Super Chat ticker */
yt-live-chat-ticker-renderer #items {
height: unset;
}
yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
width: calc(${secondLineLineHeight} * var(--font-base-size));
height: calc(${secondLineLineHeight} * var(--font-base-size));
}
yt-live-chat-ticker-paid-message-item-renderer #content {
height: unset;
font-family: ${common.fontsStrToCss(this.form.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${secondLineLineHeight} * var(--font-base-size));
}`
}
return common.getScAndNewMemberStyle(this.form)
},
animationStyle() {
return common.getAnimationStyle(this.form)

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

@@ -102,7 +102,16 @@ yt-live-chat-text-message-renderer #timestamp {
}
export function getUserNameStyle(config) {
return `yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
return `/* 用户名 Channel names */
yt-live-chat-text-message-renderer #author-name {
${config.showUserNames ? '' : 'display: none;'}
color: var(--username-color);
font-family: ${fontsStrToCss(config.userNameFont)};
font-size: var(--username-size);
line-height: calc(${config.userNameLineHeight || (config.userNameFontSize * 1.2)} * var(--font-base-size));
}
yt-live-chat-text-message-renderer :is(#author-name, yt-live-chat-author-badge-renderer)[type="owner"] {
color: var(--username-color-owner);
}
@@ -123,7 +132,21 @@ yt-live-chat-text-message-renderer #chat-badges {
}`}`
}
export const EMOTICON_STYLE = `yt-live-chat-text-message-renderer #message .emoji {
export function getMessageStyle(config) {
return `/* 文本消息 Text messages */
yt-live-chat-text-message-renderer :is(#message, #message *) {
color: var(--text-content-color);
font-family: ${fontsStrToCss(config.messageFont)};
font-size: var(--text-content-size);
line-height: calc(${config.messageLineHeight || (config.messageFontSize * 1.2)} * var(--font-base-size));
}
${EMOTICON_STYLE}
${getReverseScrollStyle(config)}`
}
const EMOTICON_STYLE = `yt-live-chat-text-message-renderer #message .emoji {
width: auto;
height: var(--emote-size);
}
@@ -132,7 +155,7 @@ yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
height: var(--large-emote-size);
}`
export function getReverseScrollStyle(config) {
function getReverseScrollStyle(config) {
if (!config.messageReverseScroll) {
return ''
}
@@ -144,6 +167,79 @@ yt-live-chat-item-list-renderer #items > * {
}`
}
export function getScAndNewMemberStyle(config) {
return `/* 付费、上舰消息 Super Chats / Membership messages */
yt-live-chat-paid-message-renderer {
margin: 4px 0;
}
${getScAndNewMemberFontStyle(config)}
yt-live-chat-membership-item-renderer :is(#card, #header) {
background-color: var(--membership-msg-bg-color);
margin: 4px 0;
}
${getScTickerStyle(config)}
${config.showOtherThings ? '' : `yt-live-chat-item-list-renderer {
display: none;
}`}`
}
function getScAndNewMemberFontStyle(config) {
let firstLineLineHeight = config.firstLineLineHeight || (config.firstLineFontSize * 1.2)
return `yt-live-chat-paid-message-renderer :is(#author-name, #author-name *),
yt-live-chat-membership-item-renderer :is(#header-content-inner-column, #header-content-inner-column *) {
font-family: ${fontsStrToCss(config.firstLineFont)};
font-size: var(--paid-msg-line-1-size);
line-height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-membership-item-renderer yt-live-chat-author-badge-renderer :is(img, yt-icon) {
width: calc(${firstLineLineHeight} * var(--font-base-size));
height: calc(${firstLineLineHeight} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#purchase-amount, #purchase-amount *),
yt-live-chat-membership-item-renderer :is(#header-subtext, #header-subtext *) {
font-family: ${fontsStrToCss(config.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${config.secondLineLineHeight || (config.secondLineFontSize * 1.2)} * var(--font-base-size));
}
yt-live-chat-paid-message-renderer :is(#content, #content *) {
font-family: ${fontsStrToCss(config.scContentFont)};
font-size: var(--paid-msg-content-size);
line-height: calc(${config.scContentLineHeight || (config.scContentFontSize * 1.2)} * var(--font-base-size));
}`
}
function getScTickerStyle(config) {
if (!config.showScTicker) {
return `yt-live-chat-ticker-renderer {
display: none;
}`
}
let secondLineLineHeight = config.secondLineLineHeight || (config.secondLineFontSize * 1.2)
return `/* SC固定栏 Super Chat ticker */
yt-live-chat-ticker-renderer #items {
height: unset;
}
yt-live-chat-ticker-paid-message-item-renderer #author-photo img {
width: calc(${secondLineLineHeight} * var(--font-base-size));
height: calc(${secondLineLineHeight} * var(--font-base-size));
}
yt-live-chat-ticker-paid-message-item-renderer #content {
height: unset;
font-family: ${fontsStrToCss(config.secondLineFont)};
font-size: var(--paid-msg-line-2-size);
line-height: calc(${secondLineLineHeight} * var(--font-base-size));
}`
}
export function getAnimationStyle(config) {
if (!config.animateIn && !config.animateOut) {
return ''

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

@@ -10,18 +10,18 @@
</el-tab-pane>
</el-tabs>
<el-form label-width="150px" size="mini">
<el-form label-width="150px" label-position="top">
<h3>{{ $t('stylegen.result') }}</h3>
<el-card shadow="never">
<el-form-item label="CSS">
<el-input v-model="inputResult" ref="result" type="textarea" :rows="20"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="copyResult">{{ $t('stylegen.copy') }}</el-button>
<a target="_blank" href="https://vscode.dev/">
<el-button style="margin: 0 10px">{{ $t('stylegen.editor') }}</el-button>
</a>
<el-button @click="resetConfig">{{ $t('stylegen.resetConfig') }}</el-button>
<el-button type="danger" @click="resetConfig" style="float: right">{{ $t('stylegen.resetConfig') }}</el-button>
</el-form-item>
<el-form-item>
<el-input v-model="inputResult" ref="result" type="textarea" :rows="30"></el-input>
</el-form-item>
</el-card>
</el-form>