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

fix ui height

Browse Source
This commit is contained in:
Julian Freeman
2026-02-22 19:51:40 -04:00
parent 48d9c6e240
commit ce358e5b76
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@@ -199,7 +199,7 @@ const translate = async () => {
</script>
<template>
<div class="min-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">
<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">
<!-- 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">
<div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
@@ -232,12 +232,12 @@ const translate = async () => {
</div>
</header>
<main class="flex-1 flex overflow-hidden">
<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">
<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">
<!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0 relative">
<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">
<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">
<!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-30">
<button
@@ -289,9 +289,9 @@ const translate = async () => {
<textarea
v-model="sourceText"
placeholder="请输入待翻译内容..."
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent"
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
></textarea>
<div class="p-4 border-t dark:border-slate-800 flex justify-end">
<div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0">
<button
@click="translate"
:disabled="isTranslating || !sourceText.trim()"
@@ -305,8 +305,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">
<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">
<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">
<!-- Custom Target Dropdown -->
<div class="relative lang-dropdown min-w-30">
<button
@@ -352,7 +352,7 @@ const translate = async () => {
</button>
</div>
</div>
<div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap">
<div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap min-h-0">
<template v-if="targetText">
{{ targetText }}
</template>
@@ -362,7 +362,7 @@ 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">
<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 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>
@@ -429,7 +429,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">
<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 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>