julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

add dark theme

Browse Source
This commit is contained in:
Julian Freeman
2026-02-22 18:13:05 -04:00
parent 1e378b20e0
commit 786dec41e4
3 changed files with 106 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/App.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'; import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { import {
Settings, Settings,
Languages, Languages,
@@ -10,7 +10,9 @@ import {
Loader2, Loader2,
Check, Check,
FileText, FileText,
ChevronDown ChevronDown,
Sun,
Moon
} from 'lucide-vue-next'; } from 'lucide-vue-next';
import { fetch } from '@tauri-apps/plugin-http'; import { fetch } from '@tauri-apps/plugin-http';
import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings'; import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
@@ -23,6 +25,20 @@ function cn(...inputs: ClassValue[]) {
} }
const settings = useSettingsStore(); const settings = useSettingsStore();
// Theme management
watch(() => settings.isDark, (val) => {
if (val) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, { immediate: true });
const toggleTheme = () => {
settings.isDark = !settings.isDark;
};
const view = ref<'translate' | 'settings' | 'logs'>('translate'); const view = ref<'translate' | 'settings' | 'logs'>('translate');
// Dropdown State // Dropdown State
@@ -183,24 +199,32 @@ const translate = async () => {
</script> </script>
<template> <template>
<div class="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 flex flex-col"> <div class="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col">
<!-- Header --> <!-- Header -->
<header class="h-14 border-b bg-white flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm"> <header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
<div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'"> <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
<Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" /> <Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
<h1 class="font-semibold text-lg tracking-tight">TranslateGemma</h1> <h1 class="font-semibold text-lg tracking-tight">TranslateGemma</h1>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button
@click="toggleTheme"
class="p-2 rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
:title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
>
<Sun v-if="settings.isDark" class="w-5 h-5" />
<Moon v-else class="w-5 h-5" />
</button>
<button <button
@click="view = 'settings'" @click="view = 'settings'"
:class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')" :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="设置" title="设置"
> >
<Settings class="w-5 h-5" /> <Settings class="w-5 h-5" />
</button> </button>
<button <button
@click="view = 'logs'" @click="view = 'logs'"
:class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')" :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="调试日志" title="调试日志"
> >
<FileText class="w-5 h-5" /> <FileText class="w-5 h-5" />
@@ -210,15 +234,15 @@ const translate = async () => {
<main class="flex-1 flex overflow-hidden"> <main class="flex-1 flex overflow-hidden">
<!-- Translation View --> <!-- Translation View -->
<div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x bg-white overflow-hidden"> <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
<!-- Source Pane --> <!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0 relative"> <div class="flex-1 flex flex-col min-h-0 relative">
<div class="flex items-center gap-3 px-6 py-3 border-b bg-slate-50/50 relative z-40"> <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
<!-- Custom Source Dropdown --> <!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-[120px]"> <div class="relative lang-dropdown min-w-[120px]">
<button <button
@click.stop="toggleDropdown('source')" @click.stop="toggleDropdown('source')"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 transition-colors text-sm font-semibold text-slate-700 w-full justify-between group" class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between group"
> >
<span class="truncate">{{ sourceLang.displayName }}</span> <span class="truncate">{{ sourceLang.displayName }}</span>
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" /> <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" />
@@ -235,7 +259,7 @@ const translate = async () => {
> >
<div <div
v-if="sourceDropdownOpen" v-if="sourceDropdownOpen"
class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white rounded-xl shadow-xl border border-slate-200 z-50 py-2 py-1 flex flex-col custom-scrollbar" class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 py-1 flex flex-col custom-scrollbar"
> >
<button <button
v-for="lang in LANGUAGES" v-for="lang in LANGUAGES"
@@ -243,7 +267,7 @@ const translate = async () => {
@click="sourceLangCode = lang.code; sourceDropdownOpen = false" @click="sourceLangCode = lang.code; sourceDropdownOpen = false"
:class="cn( :class="cn(
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between', 'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
sourceLangCode === lang.code ? 'bg-blue-50 text-blue-600 font-bold' : 'text-slate-600 hover:bg-slate-50' sourceLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
)" )"
> >
{{ lang.displayName }} {{ lang.displayName }}
@@ -253,25 +277,25 @@ const translate = async () => {
</transition> </transition>
</div> </div>
<button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors" title="交换语言"> <button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="交换语言">
<ArrowRightLeft class="w-4 h-4 text-slate-500" /> <ArrowRightLeft class="w-4 h-4 text-slate-500 dark:text-slate-400" />
</button> </button>
<div class="ml-auto flex items-center gap-2"> <div class="ml-auto flex items-center gap-2">
<button @click="clearSource" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors" title="清空内容"> <button @click="clearSource" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="清空内容">
<Trash2 class="w-4 h-4 text-slate-500" /> <Trash2 class="w-4 h-4 text-slate-500 dark:text-slate-400" />
</button> </button>
</div> </div>
</div> </div>
<textarea <textarea
v-model="sourceText" v-model="sourceText"
placeholder="请输入待翻译内容..." placeholder="请输入待翻译内容..."
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300" class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent"
></textarea> ></textarea>
<div class="p-4 border-t flex justify-end"> <div class="p-4 border-t dark:border-slate-800 flex justify-end">
<button <button
@click="translate" @click="translate"
:disabled="isTranslating || !sourceText.trim()" :disabled="isTranslating || !sourceText.trim()"
class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm" class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
> >
<Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" /> <Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
<Send v-else class="w-4 h-4" /> <Send v-else class="w-4 h-4" />
@@ -281,13 +305,13 @@ const translate = async () => {
</div> </div>
<!-- Target Pane --> <!-- Target Pane -->
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 relative"> <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative">
<div class="flex items-center gap-3 px-6 py-3 border-b bg-slate-50/50 relative z-40"> <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
<!-- Custom Target Dropdown --> <!-- Custom Target Dropdown -->
<div class="relative lang-dropdown min-w-[120px]"> <div class="relative lang-dropdown min-w-[120px]">
<button <button
@click.stop="toggleDropdown('target')" @click.stop="toggleDropdown('target')"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 transition-colors text-sm font-semibold text-slate-700 w-full justify-between" class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between"
> >
<span class="truncate">{{ targetLang.displayName }}</span> <span class="truncate">{{ targetLang.displayName }}</span>
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" /> <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" />
@@ -304,7 +328,7 @@ const translate = async () => {
> >
<div <div
v-if="targetDropdownOpen" v-if="targetDropdownOpen"
class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white rounded-xl shadow-xl border border-slate-200 z-50 py-2 flex flex-col custom-scrollbar" class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
> >
<button <button
v-for="lang in LANGUAGES" v-for="lang in LANGUAGES"
@@ -312,7 +336,7 @@ const translate = async () => {
@click="targetLangCode = lang.code; targetDropdownOpen = false" @click="targetLangCode = lang.code; targetDropdownOpen = false"
:class="cn( :class="cn(
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between', 'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
targetLangCode === lang.code ? 'bg-blue-50 text-blue-600 font-bold' : 'text-slate-600 hover:bg-slate-50' targetLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
)" )"
> >
{{ lang.displayName }} {{ lang.displayName }}
@@ -322,9 +346,9 @@ const translate = async () => {
</transition> </transition>
</div> </div>
<div class="ml-auto flex items-center gap-2"> <div class="ml-auto flex items-center gap-2">
<button @click="copyTarget" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors relative" title="复制结果"> <button @click="copyTarget" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors relative" title="复制结果">
<Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" /> <Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" />
<Copy v-else class="w-4 h-4 text-slate-500" /> <Copy v-else class="w-4 h-4 text-slate-500 dark:text-slate-400" />
</button> </button>
</div> </div>
</div> </div>
@@ -332,45 +356,45 @@ const translate = async () => {
<template v-if="targetText"> <template v-if="targetText">
{{ targetText }} {{ targetText }}
</template> </template>
<span v-else class="text-slate-300 italic">翻译结果将在此显示...</span> <span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Settings View --> <!-- Settings View -->
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10"> <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
<div class="max-w-2xl mx-auto space-y-8"> <div class="max-w-2xl mx-auto space-y-8">
<section> <section>
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">API 配置</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置</h2>
<div class="bg-white rounded-xl shadow-sm border p-6 space-y-4"> <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
<div class="space-y-2"> <div class="space-y-2">
<label class="text-sm font-medium text-slate-700">Ollama API 地址</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Ollama API 地址</label>
<input <input
v-model="settings.ollamaApiAddress" v-model="settings.ollamaApiAddress"
type="text" type="text"
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono" class="w-full px-4 py-2 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-slate-900 dark:text-slate-100"
placeholder="http://localhost:11434" placeholder="http://localhost:11434"
/> />
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="text-sm font-medium text-slate-700">Ollama 模型名称</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Ollama 模型名称</label>
<input <input
v-model="settings.modelName" v-model="settings.modelName"
type="text" type="text"
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm" class="w-full px-4 py-2 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
placeholder="translategemma:12b" placeholder="translategemma:12b"
/> />
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<label class="text-sm font-medium text-slate-700">启用流式输出</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">启用流式输出</label>
<p class="text-xs text-slate-500">在生成时即时渲染文本</p> <p class="text-xs text-slate-500 dark:text-slate-500">在生成时即时渲染文本</p>
</div> </div>
<button <button
@click="settings.enableStreaming = !settings.enableStreaming" @click="settings.enableStreaming = !settings.enableStreaming"
:class="cn( :class="cn(
'w-12 h-6 rounded-full transition-colors relative', 'w-12 h-6 rounded-full transition-colors relative',
settings.enableStreaming ? 'bg-blue-600' : 'bg-slate-300' settings.enableStreaming ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-700'
)" )"
> >
<div :class="cn( <div :class="cn(
@@ -383,20 +407,20 @@ const translate = async () => {
</section> </section>
<section> <section>
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">提示词工程</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
<div class="bg-white rounded-xl shadow-sm border p-6"> <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6">
<div class="space-y-2"> <div class="space-y-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label class="text-sm font-medium text-slate-700">系统提示词模板</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
<button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 hover:underline">恢复默认值</button> <button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">恢复默认值</button>
</div> </div>
<textarea <textarea
v-model="settings.systemPromptTemplate" v-model="settings.systemPromptTemplate"
rows="9" rows="9"
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed" class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
></textarea> ></textarea>
<div class="flex flex-wrap gap-2 mt-2"> <div class="flex flex-wrap gap-2 mt-2">
<span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 text-[10px] font-mono rounded border text-slate-600">{{ tag }}</span> <span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -405,39 +429,39 @@ const translate = async () => {
</div> </div>
<!-- Logs View --> <!-- Logs View -->
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10"> <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
<div class="max-w-3xl mx-auto space-y-6"> <div class="max-w-3xl mx-auto space-y-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider">调试日志</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">调试日志</h2>
<button <button
@click="settings.logs = []" @click="settings.logs = []"
class="text-xs text-red-600 hover:underline flex items-center gap-1" class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
> >
<Trash2 class="w-3 h-3" /> <Trash2 class="w-3 h-3" />
清空 清空
</button> </button>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border p-4 space-y-4"> <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4">
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 text-center py-10 italic"> <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
暂无日志记录。请尝试进行翻译。 暂无日志记录。请尝试进行翻译。
</div> </div>
<div <div
v-for="(log, idx) in settings.logs" v-for="(log, idx) in settings.logs"
:key="idx" :key="idx"
class="text-[11px] font-mono border-b last:border-0 pb-4 flex flex-col gap-2" class="text-[11px] font-mono border-b dark:border-slate-800 last:border-0 pb-4 flex flex-col gap-2"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-slate-400">[{{ log.timestamp }}]</span> <span class="text-slate-400 dark:text-slate-500">[{{ log.timestamp }}]</span>
<span <span
:class="cn( :class="cn(
'px-2 py-0.5 rounded uppercase font-bold text-[11px]', 'px-2 py-0.5 rounded uppercase font-bold text-[11px]',
log.type === 'request' ? 'bg-blue-100 text-blue-700' : log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
log.type === 'response' ? 'bg-green-100 text-green-700' : log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
'bg-red-100 text-red-700' 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
)" )"
>{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span> >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
</div> </div>
<pre class="bg-slate-50 p-3 rounded-lg overflow-x-auto text-slate-600 max-h-48 leading-relaxed shadow-inner border border-slate-100">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre> <pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-48 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
</div> </div>
</div> </div>
</div> </div>
@@ -445,30 +469,14 @@ const translate = async () => {
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="h-8 bg-slate-100 border-t flex items-center px-4 justify-between shrink-0"> <footer class="h-8 bg-slate-100 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
<div class="text-[10px] text-slate-400"> <div class="text-[10px] text-slate-400 dark:text-slate-500">
{{ settings.ollamaApiAddress }} {{ settings.ollamaApiAddress }}
</div> </div>
<div class="text-[10px] text-slate-400"> <div class="text-[10px] text-slate-400 dark:text-slate-500">
GemmaTrans v{{ pkg.version }} GemmaTrans v{{ pkg.version }}
</div> </div>
</footer> </footer>
</div> </div>
</template> </template>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #cbd5e1;
}
</style>

2
src/stores/settings.ts
View File

@@ -32,6 +32,7 @@ Produce only the {TARGET_LANG} translation, without any additional explanations
{TEXT}`; {TEXT}`;
export const useSettingsStore = defineStore('settings', () => { export const useSettingsStore = defineStore('settings', () => {
const isDark = useLocalStorage('is-dark', false);
const ollamaApiAddress = useLocalStorage('ollama-api-address', 'http://localhost:11434'); const ollamaApiAddress = useLocalStorage('ollama-api-address', 'http://localhost:11434');
const modelName = useLocalStorage('model-name', 'translategemma:12b'); const modelName = useLocalStorage('model-name', 'translategemma:12b');
const enableStreaming = useLocalStorage('enable-streaming', true); const enableStreaming = useLocalStorage('enable-streaming', true);
@@ -56,6 +57,7 @@ export const useSettingsStore = defineStore('settings', () => {
}; };
return { return {
isDark,
ollamaApiAddress, ollamaApiAddress,
modelName, modelName,
enableStreaming, enableStreaming,

24
src/style.css
View File

@@ -1 +1,25 @@
@import "tailwindcss"; @import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #cbd5e1;
}
.dark ::-webkit-scrollbar-thumb {
background: #334155;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #475569;
}