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

make light softer 2

Browse Source
This commit is contained in:
Julian Freeman
2026-02-24 22:23:58 -04:00
parent 49b96eeaeb
commit 5b493ce767
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@@ -251,9 +251,9 @@ const translate = async () => {
</script>
<template>
<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">
<div class="h-screen bg-slate-100/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">
<!-- Header -->
<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">
<header class="h-14 border-b dark:border-slate-800 bg-slate-50 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>
@@ -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/80 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/50 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/80 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-100/40 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-100/30 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
<div class="px-6 py-3 bg-slate-200/20 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" />
@@ -367,7 +367,7 @@ const translate = async () => {
></textarea>
</div>
<div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0"> <button
<div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end shrink-0"> <button
@click="translate"
:disabled="isTranslating || !sourceText.trim()"
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"
@@ -380,8 +380,8 @@ const translate = async () => {
</div>
<!-- Target Pane -->
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 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-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
<!-- Custom Target Dropdown -->
<div class="relative lang-dropdown min-w-30">
<button
@@ -525,18 +525,18 @@ const translate = async () => {
</div>
<!-- Settings View -->
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div class="max-w-2xl mx-auto space-y-8">
<section>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
<div class="bg-white/60 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
<div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
暂无预设配置
</div>
<div
v-for="profile in settings.profiles"
:key="profile.id"
class="p-3 flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
class="p-3 flex items-center justify-between group hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
>
<div class="flex flex-col gap-0.5 min-w-0">
<span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
@@ -601,7 +601,7 @@ const translate = async () => {
</button>
</div>
</div>
<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="bg-slate-200/20 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-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
<div class="bg-slate-200/20 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>
@@ -673,7 +673,7 @@ const translate = async () => {
</div>
<!-- Logs View -->
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div class="max-w-3xl mx-auto space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">日志</h2>
@@ -685,7 +685,7 @@ const translate = async () => {
清空
</button>
</div>
<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 class="bg-slate-200/20 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>
@@ -713,7 +713,7 @@ const translate = async () => {
</main>
<!-- Footer -->
<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">
<footer class="h-8 bg-slate-200/40 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 dark:text-slate-500">
{{ settings.apiBaseUrl }}
</div>