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> </script>
<template> <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 -->
<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'"> <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">AI 翻译</h1> <h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
@@ -261,7 +261,7 @@ const translate = async () => {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
@click="toggleTheme" @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 ? '切换亮色主题' : '切换暗色主题'" :title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
> >
<Sun v-if="settings.isDark" class="w-5 h-5" /> <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -269,14 +269,14 @@ const translate = async () => {
</button> </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 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="设置" 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 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="日志" title="日志"
> >
<FileText class="w-5 h-5" /> <FileText class="w-5 h-5" />
@@ -286,10 +286,10 @@ const translate = async () => {
<main class="flex-1 flex overflow-hidden min-h-0 relative"> <main class="flex-1 flex overflow-hidden min-h-0 relative">
<!-- 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 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 --> <!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0 relative h-full"> <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 --> <!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-30"> <div class="relative lang-dropdown min-w-30">
<button <button
@@ -345,7 +345,7 @@ const translate = async () => {
></textarea> ></textarea>
<!-- Context Input Area --> <!-- 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 justify-between mb-1.5 h-5">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<FileText class="w-4 h-4 text-slate-400" /> <FileText class="w-4 h-4 text-slate-400" />
@@ -601,7 +601,7 @@ const translate = async () => {
</button> </button>
</div> </div>
</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"> <div class="space-y-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
<input <input
@@ -652,7 +652,7 @@ const translate = async () => {
<section> <section>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 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 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="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 dark:text-slate-300">系统提示词模板</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -685,7 +685,7 @@ const translate = async () => {
清空 清空
</button> </button>
</div> </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 v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
暂无日志记录。请尝试进行翻译。 暂无日志记录。请尝试进行翻译。
</div> </div>