From b01238cdb7f9ad40ee84b24793354d5d64bbedfa Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sun, 19 Apr 2026 23:48:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=94=9F=E6=88=90=E5=99=A8?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E7=BC=A9=E6=94=BE=E6=AF=94?=
 =?UTF-8?q?=E4=BE=8B=E3=80=81=E6=A8=A1=E7=B3=8A=E6=8F=8F=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  6 +++
 frontend/src/lang/ja.js                       | 10 ++++-
 frontend/src/lang/zh.js                       | 10 ++++-
 frontend/src/views/StyleGenerator/Legacy.vue  | 40 +++++++++++++++++--
 .../src/views/StyleGenerator/LineLike.vue     | 24 +++++++++++
 frontend/src/views/StyleGenerator/common.js   |  4 +-
 6 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 52970dd..dc2b92d 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -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',
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
index 4ef25eb..4ec10c2 100644
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -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: 'アイコンを表示する',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 43b4df5..260819f 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -97,13 +97,19 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
-    light: '亮色',
-    dark: '暗色',
+    light: '浅色',
+    dark: '深色',
+
+    global: '全局',
+    scalingNotice: '如果觉得字体太小，优先修改这里的比例而不是在OBS里拉伸浏览器源。求求你们不要拉伸然后问为什么看不清了😭',
+    globalScale: '全局比例',
+    fontScale: '字体比例',
 
     outlines: '描边',
     showOutlines: '显示描边',
     outlineSize: '描边尺寸',
     outlineColor: '描边颜色',
+    blurryOutline: '模糊',
 
     avatars: '头像',
     showAvatars: '显示头像',
diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue
index b440293..70a0c83 100644
--- a/frontend/src/views/StyleGenerator/Legacy.vue
+++ b/frontend/src/views/StyleGenerator/Legacy.vue
@@ -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 */
diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue
index e1e33ec..4f1e456 100644
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@@ -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,
 
diff --git a/frontend/src/views/StyleGenerator/common.js b/frontend/src/views/StyleGenerator/common.js
index 7c127c5..81b7fa7 100644
--- a/frontend/src/views/StyleGenerator/common.js
+++ b/frontend/src/views/StyleGenerator/common.js
@@ -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};