From f8e7255c32196c67b28cfbf91a58ff5a3265329d Mon Sep 17 00:00:00 2001
From: yangjianbo <yangjianbo@leagsoft.com>
Date: Sun, 4 Jan 2026 22:19:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2):=20=E4=B8=BA=20Gemini?=
 =?UTF-8?q?=20=E9=85=8D=E7=BD=AE=E7=89=87=E6=AE=B5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

补齐高亮渲染并保留纯文本回退
新增高亮 token 工具并做 HTML 转义
---
 frontend/src/components/keys/UseKeyModal.vue | 28 +++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/keys/UseKeyModal.vue b/frontend/src/components/keys/UseKeyModal.vue
index dabb60af..3d687b5a 100644
--- a/frontend/src/components/keys/UseKeyModal.vue
+++ b/frontend/src/components/keys/UseKeyModal.vue
@@ -107,7 +107,10 @@
                 </button>
               </div>
               <!-- Code Content -->
-              <pre class="p-4 text-sm font-mono text-gray-100 overflow-x-auto"><code v-text="file.content"></code></pre>
+              <pre class="p-4 text-sm font-mono text-gray-100 overflow-x-auto">
+                <code v-if="file.highlighted" v-html="file.highlighted"></code>
+                <code v-else v-text="file.content"></code>
+              </pre>
             </div>
           </div>
         </div>
@@ -165,6 +168,7 @@ interface FileConfig {
   path: string
   content: string
   hint?: string  // Optional hint message for this file
+  highlighted?: string
 }
 
 const props = defineProps<Props>()
@@ -310,6 +314,22 @@ const platformNote = computed(() => {
   }
 })
 
+const escapeHtml = (value: string) => value
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&#39;')
+
+const wrapToken = (className: string, value: string) =>
+  `<span class="${className}">${escapeHtml(value)}</span>`
+
+const keyword = (value: string) => wrapToken('text-emerald-300', value)
+const variable = (value: string) => wrapToken('text-sky-200', value)
+const operator = (value: string) => wrapToken('text-slate-400', value)
+const string = (value: string) => wrapToken('text-amber-200', value)
+const comment = (value: string) => wrapToken('text-slate-500', value)
+
 // Syntax highlighting helpers
 // Generate file configs based on platform and active tab
 const currentFiles = computed((): FileConfig[] => {
@@ -382,9 +402,9 @@ ${keyword('export')} ${variable('GEMINI_MODEL')}${operator('=')}${string(`"${mod
       content = `set GOOGLE_GEMINI_BASE_URL=${baseUrl}
 set GEMINI_API_KEY=${apiKey}
 set GEMINI_MODEL=${model}`
-      highlighted = `${keyword('set')} ${variable('GOOGLE_GEMINI_BASE_URL')}${operator('=')}${baseUrl}
-${keyword('set')} ${variable('GEMINI_API_KEY')}${operator('=')}${apiKey}
-${keyword('set')} ${variable('GEMINI_MODEL')}${operator('=')}${model}
+      highlighted = `${keyword('set')} ${variable('GOOGLE_GEMINI_BASE_URL')}${operator('=')}${string(baseUrl)}
+${keyword('set')} ${variable('GEMINI_API_KEY')}${operator('=')}${string(apiKey)}
+${keyword('set')} ${variable('GEMINI_MODEL')}${operator('=')}${string(model)}
 ${comment(`REM ${modelComment}`)}`
       break
     case 'powershell':