From 15446d34a1ad038c0a67488978b0a9fd7d9df3e0 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 20 May 2025 15:15:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=A2=84=E8=A7=88=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/StyleCustomizer.vue        | 95 ++++++++++++++++---
 packages/frontend/src/locales/en-US.json      |  1 +
 packages/frontend/src/locales/ja-JP.json      |  1 +
 packages/frontend/src/locales/zh-CN.json      |  1 +
 4 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue
index 65663c8..29255e9 100644
--- a/packages/frontend/src/components/StyleCustomizer.vue
+++ b/packages/frontend/src/components/StyleCustomizer.vue
@@ -910,12 +910,69 @@ const handleFocusAndSelect = (event: FocusEvent) => {
   }
 };
 
+const modalRootRef = ref<HTMLDivElement | null>(null);
+
+// Store original styles to revert back
+let originalModalRootBackgroundColor: string | null = null;
+let originalModalContentOpacity: string | null = null;
+let originalModalRootTransition: string | null = null;
+let originalModalContentTransition: string | null = null;
+
+const handlePreviewButtonMouseDown = () => {
+  if (modalRootRef.value) {
+    const modalContentElement = modalRootRef.value.firstElementChild as HTMLElement;
+
+    // Save original styles if not already saved (for this mousedown session)
+    // These are saved once per mousedown-mouseup cycle
+    if (originalModalRootBackgroundColor === null) { // Check one to assume all are not set
+      originalModalRootBackgroundColor = window.getComputedStyle(modalRootRef.value).backgroundColor;
+      originalModalRootTransition = modalRootRef.value.style.transition; // Save inline or computed transition
+      if (modalContentElement) {
+        originalModalContentOpacity = window.getComputedStyle(modalContentElement).opacity;
+        originalModalContentTransition = modalContentElement.style.transition; // Save inline or computed transition
+      }
+    }
+
+    // Apply transparency effects
+    // Make the background overlay (modalRootRef) transparent
+    modalRootRef.value.style.transition = 'background-color 0.05s ease-out';
+    modalRootRef.value.style.backgroundColor = 'transparent';
+
+    if (modalContentElement) {
+      // Make the modal content (the box including the button) completely transparent
+      modalContentElement.style.transition = 'opacity 0.05s ease-out';
+      modalContentElement.style.opacity = '0'; // Changed from 0.05 to 0
+    }
+
+    const restoreModalAppearance = () => {
+      if (modalRootRef.value) {
+        modalRootRef.value.style.backgroundColor = originalModalRootBackgroundColor || ''; // Revert to original or default
+        modalRootRef.value.style.transition = originalModalRootTransition || ''; // Revert to original or default
+      }
+      if (modalContentElement) {
+        modalContentElement.style.opacity = originalModalContentOpacity || '1'; // Revert to original or default
+        modalContentElement.style.transition = originalModalContentTransition || ''; // Revert to original or default
+      }
+
+      // Reset stored original styles for the next interaction cycle
+      originalModalRootBackgroundColor = null;
+      originalModalContentOpacity = null;
+      originalModalRootTransition = null;
+      originalModalContentTransition = null;
+
+      document.removeEventListener('mouseup', restoreModalAppearance);
+    };
+    // Listen for mouseup anywhere on the document to restore
+    document.addEventListener('mouseup', restoreModalAppearance, { once: true });
+  }
+};
+
 </script>
 
 
 <template>
   <!-- 添加 md: 前缀以应用到中等及以上屏幕，小屏幕默认全屏 -->
-  <div class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000] p-2 md:p-4" @click.self="closeCustomizer">
+  <div ref="modalRootRef" class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000] p-2 md:p-4" @click.self="closeCustomizer">
     <!-- 小屏幕默认 w-full h-full，md 及以上恢复原状 -->
     <div class="bg-background text-foreground rounded-lg shadow-lg w-full h-full md:w-[90%] md:max-w-[800px] md:h-[85vh] md:max-h-[700px] flex flex-col overflow-hidden">
       <header class="flex justify-between items-center px-4 py-3 border-b border-border bg-header flex-shrink-0">
@@ -1099,19 +1156,29 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                               ]"
                           >
                               {{ t('styleCustomizer.applyButton', 'Apply') }}
-                          </button>
-                         <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
-                            :class="[
-                              'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
-                              theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
-                            ]"
-                         >{{ t('common.edit') }}</button>
-                         <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
-                            :class="[
-                              'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
-                              theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
-                            ]"
-                         >{{ t('common.delete') }}</button>
+                         </button>
+                         <button
+                             @mousedown="handlePreviewButtonMouseDown"
+                             :title="t('styleCustomizer.previewThemeTooltip', 'Hold to preview transparency')"
+                             :class="[
+                               'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap',
+                               theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                             ]"
+                         >
+                              {{ t('styleCustomizer.previewButton', 'Preview') }}
+                         </button>
+                        <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
+                           :class="[
+                             'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
+                             theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                           ]"
+                        >{{ t('common.edit') }}</button>
+                        <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
+                           :class="[
+                             'px-3 py-1.5 text-xs md:text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed', /* 调整字体大小 */
+                             theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20'
+                           ]"
+                        >{{ t('common.delete') }}</button>
                      </div>
                  </li>
              </ul>
diff --git a/packages/frontend/src/locales/en-US.json b/packages/frontend/src/locales/en-US.json
index 255d255..a5066e6 100644
--- a/packages/frontend/src/locales/en-US.json
+++ b/packages/frontend/src/locales/en-US.json
@@ -84,6 +84,7 @@
     "terminalThemeColorEditorTitle": "Terminal Theme Color Editor",
     "errorFixJsonBeforeSave": "Please fix the JSON format errors before saving.",
     "applyButton": "Apply",
+    "previewButton":"Preview",
     "searchThemePlaceholder": "Search theme name...",
     "exportActiveThemeTooltip": "Export the currently active theme as a JSON file",
     "exportActiveTheme": "Export Active Theme",
diff --git a/packages/frontend/src/locales/ja-JP.json b/packages/frontend/src/locales/ja-JP.json
index d904c9c..4eebc57 100644
--- a/packages/frontend/src/locales/ja-JP.json
+++ b/packages/frontend/src/locales/ja-JP.json
@@ -1195,6 +1195,7 @@
         "activeTheme": "現在のテーマ",
         "addNewTheme": "新しいテーマを作成",
         "applyButton": "適用",
+        "previewButton":"プレビュー",
         "applyThemeTooltip": "このテーマを適用",
         "backgroundSettings": "背景設定",
         "cannotDeletePreset": "プリセットテーマは削除できません",
diff --git a/packages/frontend/src/locales/zh-CN.json b/packages/frontend/src/locales/zh-CN.json
index 280e1f9..6a2afc3 100644
--- a/packages/frontend/src/locales/zh-CN.json
+++ b/packages/frontend/src/locales/zh-CN.json
@@ -83,6 +83,7 @@
     "terminalThemeColorEditorTitle": "终端主题颜色编辑器",
     "errorFixJsonBeforeSave": "请先修复 JSON 格式错误再保存。",
     "applyButton": "应用",
+    "previewButton":"预览",
     "searchThemePlaceholder": "搜索主题名称...",
     "exportActiveThemeTooltip": "将当前激活的主题导出为 JSON 文件",
     "exportActiveTheme": "导出当前主题",