feat(SimpleText): add transparent background option with localization support in multiple languages

Author: bestony

src/components/LogoEditor/SimpleText.vue

@@ -185,10 +185,26 @@ defineExpose({
               type="color"
               class="color-input"
               aria-label="preview-background-color"
+              :disabled="isTransparentBg"
             />
             <span class="color-value">{{ previewBgColor.toUpperCase() }}</span>
           </div>
         </label>
+
+        <label class="field toggle-field">
+          <span class="field-label">{{ t('component.simpleText.transparent') }}</span>
+          <div class="toggle-row">
+            <input
+              id="transparent-bg"
+              v-model="isTransparentBg"
+              type="checkbox"
+              class="toggle-input"
+            />
+            <label class="toggle-label" for="transparent-bg">
+              {{ t('component.simpleText.transparentHint') }}
+            </label>
+          </div>
+        </label>
       </div>
 
       <div class="font-card">
@@ -368,6 +384,23 @@ defineExpose({
   font-size: 13px;
 }
 
+.toggle-field .toggle-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.toggle-input {
+  width: 18px;
+  height: 18px;
+  accent-color: #f59e0b;
+}
+
+.toggle-label {
+  color: #e5e7eb;
+  font-size: 14px;
+}
+
 .font-card {
   border: 1px solid #1f2937;
   border-radius: 14px;

src/i18n/locales/en.ts

@@ -101,6 +101,8 @@ export default {
       fontSize: 'Font size',
       textColor: 'Text color',
       previewBg: 'Preview background',
+      transparent: 'Transparent background',
+      transparentHint: 'Keep PNG/SVG exports transparent (JPEG remains solid).',
       fontTitle: 'Font & variant',
       fontHint: 'Loads Google Fonts on demand; variants auto-apply weight or italics.',
     },

src/i18n/locales/es.ts

@@ -103,6 +103,8 @@ export default {
       fontSize: 'Tamaño de fuente',
       textColor: 'Color de texto',
       previewBg: 'Fondo de previsualización',
+      transparent: 'Fondo transparente',
+      transparentHint: 'Exporta PNG/SVG con fondo transparente (JPG queda sólido).',
       fontTitle: 'Fuente y variante',
       fontHint: 'Carga Google Fonts bajo demanda; las variantes aplican peso / cursiva.',
     },

src/i18n/locales/fr.ts

@@ -104,6 +104,8 @@ export default {
       fontSize: 'Taille de police',
       textColor: 'Couleur du texte',
       previewBg: "Fond de l'aperçu",
+      transparent: 'Fond transparent',
+      transparentHint: 'Exporter PNG/SVG avec fond transparent (JPEG reste opaque).',
       fontTitle: 'Police et variante',
       fontHint: 'Charge Google Fonts à la demande ; les variantes appliquent poids / italique.',
     },

src/i18n/locales/ja.ts

@@ -103,6 +103,8 @@ export default {
       fontSize: 'フォントサイズ',
       textColor: '文字色',
       previewBg: 'プレビュー背景色',
+      transparent: '透明背景',
+      transparentHint: 'PNG/SVG を透明で書き出し（JPEG は不透明のまま）。',
       fontTitle: 'フォントとバリアント',
       fontHint: 'Google Fonts をオンデマンドで読み込み、バリアントでウェイト/イタリックを適用します。',
     },

src/i18n/locales/zh-CN.ts

@@ -101,6 +101,8 @@ export default {
       fontSize: '字号',
       textColor: '文字颜色',
       previewBg: '预览背景色',
+      transparent: '透明背景',
+      transparentHint: 'PNG/SVG 导出保持透明（JPG 仍为实底）。',
       fontTitle: '字体与变体',
       fontHint: '按需加载 Google Fonts，字重 / 斜体一键切换。',
     },