This commit is contained in:
2026-04-20 13:36:16 -04:00
parent 53f078154e
commit ac5e7f26c6
2 changed files with 25 additions and 59 deletions

View File

@@ -3,9 +3,10 @@ import { ref, watch } from 'vue';
import {
Settings,
Languages,
FileText,
Sun,
Moon,
MessageSquare
Clock
} from 'lucide-vue-next';
import { useSettingsStore } from './stores/settings';
import pkg from '../package.json';
@@ -15,6 +16,8 @@ import { cn } from './lib/utils';
import TranslationView from './components/TranslationView.vue';
import ConversationView from './components/ConversationView.vue';
import SettingsView from './components/SettingsView.vue';
import LogsView from './components/LogsView.vue';
import HistoryView from './components/HistoryView.vue';
const settings = useSettingsStore();
@@ -32,7 +35,7 @@ const toggleTheme = () => {
};
// Global Routing State
const view = ref<'translate' | 'conversation' | 'settings'>('translate');
const view = ref<'translate' | 'conversation' | 'settings' | 'logs' | 'history'>('translate');
</script>
@@ -81,6 +84,20 @@ const view = ref<'translate' | 'conversation' | 'settings'>('translate');
>
<Settings class="w-5 h-5" />
</button>
<button
@click="view = 'logs'"
: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-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="日志"
>
<FileText class="w-5 h-5" />
</button>
<button
@click="view = 'history'"
:class="cn('p-2 rounded-full transition-colors', view === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="历史记录"
>
<Clock class="w-5 h-5" />
</button>
</div>
</header>
@@ -90,6 +107,8 @@ const view = ref<'translate' | 'conversation' | 'settings'>('translate');
<TranslationView v-if="view === 'translate'" />
<ConversationView v-else-if="view === 'conversation'" />
<SettingsView v-else-if="view === 'settings'" />
<LogsView v-else-if="view === 'logs'" />
<HistoryView v-else-if="view === 'history'" />
</keep-alive>
</main>

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil, MessageSquare, Clock, FileText } from 'lucide-vue-next';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil, MessageSquare } from 'lucide-vue-next';
import {
useSettingsStore,
DEFAULT_TEMPLATE,
@@ -12,11 +12,9 @@ import {
} from '../stores/settings';
import type { ApiProfile } from '../domain/translation';
import { cn } from '../lib/utils';
import HistoryView from './HistoryView.vue';
import LogsView from './LogsView.vue';
const settings = useSettingsStore();
const settingsCategory = ref<'api' | 'general' | 'prompts' | 'chat-prompts' | 'history' | 'debug'>('api');
const settingsCategory = ref<'api' | 'general' | 'prompts' | 'chat-prompts'>('api');
const showApiKey = ref(false);
const newProfileName = ref('');
@@ -85,8 +83,6 @@ const currentEvaluationProfileLabel = computed(() => {
return profile ? `${profile.name}${profile.modelName}` : '使用主翻译配置(默认)';
});
const isToolCategory = computed(() => settingsCategory.value === 'history' || settingsCategory.value === 'debug');
const handleGlobalClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target.closest('.lang-dropdown')) {
@@ -154,37 +150,12 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</div>
对话提示词
</button>
<div class="mx-3 my-3 h-px bg-slate-200 dark:bg-slate-800"></div>
<button
@click="settingsCategory = 'history'"
:class="cn(
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
settingsCategory === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
)"
>
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'history' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
<Clock class="w-4 h-4" />
</div>
翻译历史
</button>
<button
@click="settingsCategory = 'debug'"
:class="cn(
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
settingsCategory === 'debug' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
)"
>
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'debug' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
<FileText class="w-4 h-4" />
</div>
调试日志
</button>
</nav>
</div>
<!-- Settings Content (Detail) -->
<div :class="cn('flex-1 overflow-y-auto custom-scrollbar bg-slate-50/30 dark:bg-transparent', isToolCategory ? 'p-4 md:p-6' : 'p-6 md:p-10')">
<div :class="cn(isToolCategory ? 'space-y-6 pb-8' : 'max-w-3xl mx-auto space-y-8 pb-20')">
<div class="flex-1 overflow-y-auto p-6 md:p-10 custom-scrollbar bg-slate-50/30 dark:bg-transparent">
<div class="max-w-3xl mx-auto space-y-8 pb-20">
<!-- API & Models -->
<template v-if="settingsCategory === 'api'">
@@ -616,30 +587,6 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</div>
</template>
<template v-if="settingsCategory === 'history'">
<div class="px-2 md:px-4">
<div class="mb-6 border-b dark:border-slate-800 pb-4">
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">翻译历史</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">历史记录是单轮翻译的辅助工具不再与核心模式并列展示</p>
</div>
<div class="h-[720px] min-h-[560px] overflow-hidden rounded-3xl border border-slate-200/80 bg-white/70 shadow-sm dark:border-slate-800 dark:bg-slate-900/70">
<HistoryView />
</div>
</div>
</template>
<template v-if="settingsCategory === 'debug'">
<div class="px-2 md:px-4">
<div class="mb-6 border-b dark:border-slate-800 pb-4">
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">调试日志</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">日志属于排错与提示词调试工具不再作为顶层业务入口</p>
</div>
<div class="h-[720px] min-h-[560px] overflow-hidden rounded-3xl border border-slate-200/80 bg-white/70 shadow-sm dark:border-slate-800 dark:bg-slate-900/70">
<LogsView />
</div>
</div>
</template>
</div>
</div>
</div>