op 6
This commit is contained in:
23
src/App.vue
23
src/App.vue
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user