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

make light softer

Browse Source
This commit is contained in:
Julian Freeman
2026-02-24 22:07:45 -04:00
parent d259b54f11
commit 49b96eeaeb
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@@ -251,9 +251,9 @@ const translate = async () => {
</script>
<template>
<div class="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 overflow-hidden">
<div class="h-screen bg-[#f9fafb] 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 overflow-hidden">
<!-- Header -->
<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">
<header class="h-14 border-b dark:border-slate-800 bg-[#f9fafb] dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
<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" />
<h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
@@ -261,7 +261,7 @@ const translate = async () => {
<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"
class="p-2 rounded-full transition-colors hover:bg-slate-200/50 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" />
@@ -269,14 +269,14 @@ const translate = async () => {
</button>
<button
@click="view = 'settings'"
: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')"
: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-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="设置"
>
<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-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
: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" />
@@ -286,10 +286,10 @@ const translate = async () => {
<main class="flex-1 flex overflow-hidden min-h-0 relative">
<!-- 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 dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden h-full">
<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/80 dark:bg-slate-900 overflow-hidden h-full">
<!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0 relative h-full">
<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 shrink-0">
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/80 dark:bg-slate-800/30 relative z-40 shrink-0">
<!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-30">
<button
@@ -345,7 +345,7 @@ const translate = async () => {
></textarea>
<!-- Context Input Area -->
<div class="px-6 py-3 bg-slate-50/50 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
<div class="px-6 py-3 bg-slate-100/30 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
<div class="flex items-center justify-between mb-1.5 h-5">
<div class="flex items-center gap-1.5">
<FileText class="w-4 h-4 text-slate-400" />
@@ -601,7 +601,7 @@ const translate = async () => {
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
<div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
<div class="space-y-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
<input
@@ -652,7 +652,7 @@ const translate = async () => {
<section>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6">
<div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
<div class="space-y-2">
<div class="flex items-center justify-between">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -685,7 +685,7 @@ const translate = async () => {
清空
</button>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4">
<div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
暂无日志记录。请尝试进行翻译。
</div>