From e1c5047f918f061fb8f766566d2e1a9f22bd7139 Mon Sep 17 00:00:00 2001 From: John Smith Date: Sun, 19 Apr 2026 12:10:57 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96=E6=A0=B7=E5=BC=8F=E7=94=9F?= =?UTF-8?q?=E6=88=90=E5=99=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 2 +- frontend/src/lang/ja.js | 2 +- frontend/src/lang/zh.js | 2 +- frontend/src/views/StyleGenerator/Legacy.vue | 95 ++------------- .../src/views/StyleGenerator/LineLike.vue | 115 +++--------------- frontend/src/views/StyleGenerator/common.js | 102 +++++++++++++++- frontend/src/views/StyleGenerator/index.vue | 10 +- 7 files changed, 130 insertions(+), 198 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 930caae..6c1235d 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -174,7 +174,7 @@ export default { reverseSlide: 'Reverse slide', playAnimation: 'Play animation', - result: 'Result', + result: 'Result CSS', copy: 'Copy', editor: 'Editor', resetConfig: 'Reset config' diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js index 9186d77..1b74255 100644 --- a/frontend/src/lang/ja.js +++ b/frontend/src/lang/ja.js @@ -174,7 +174,7 @@ export default { reverseSlide: '逆の滑る', playAnimation: 'アニメーションを再生する', - result: '結果', + result: '結果CSS', copy: 'コピー', editor: 'エディタ', resetConfig: 'デフォルトに戻す' diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 3983386..b40d1ed 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -172,7 +172,7 @@ export default { reverseSlide: '反向滑动', playAnimation: '生成消息', - result: '结果', + result: '结果CSS', copy: '复制', editor: '编辑器', resetConfig: '恢复默认设置' diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue index 994517b..ca1e9df 100644 --- a/frontend/src/views/StyleGenerator/Legacy.vue +++ b/frontend/src/views/StyleGenerator/Legacy.vue @@ -318,9 +318,6 @@ - - - @@ -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) diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue index 778df01..b94e7a6 100644 --- a/frontend/src/views/StyleGenerator/LineLike.vue +++ b/frontend/src/views/StyleGenerator/LineLike.vue @@ -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) diff --git a/frontend/src/views/StyleGenerator/common.js b/frontend/src/views/StyleGenerator/common.js index 213e14a..3f1b643 100644 --- a/frontend/src/views/StyleGenerator/common.js +++ b/frontend/src/views/StyleGenerator/common.js @@ -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 '' diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue index 66554d5..e2843ab 100644 --- a/frontend/src/views/StyleGenerator/index.vue +++ b/frontend/src/views/StyleGenerator/index.vue @@ -10,18 +10,18 @@ - +

{{ $t('stylegen.result') }}

- - - {{ $t('stylegen.copy') }} {{ $t('stylegen.editor') }} - {{ $t('stylegen.resetConfig') }} + {{ $t('stylegen.resetConfig') }} + + +