优化手机端
This commit is contained in:
@@ -135,16 +135,29 @@
|
||||
<!-- Main App Interface -->
|
||||
<div v-if="isLoggedIn" class="flex flex-1 h-full overflow-hidden bg-slate-50">
|
||||
|
||||
<!-- Mobile Overlay -->
|
||||
<transition name="fade">
|
||||
<div v-if="isSidebarOpen" @click="isSidebarOpen = false" class="fixed inset-0 bg-slate-900/50 z-40 lg:hidden backdrop-blur-sm"></div>
|
||||
</transition>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-72 bg-white border-r border-slate-200 flex flex-col shadow-sm z-10">
|
||||
<div class="p-8 pb-4">
|
||||
<aside :class="[
|
||||
'fixed inset-y-0 left-0 z-50 w-72 bg-white border-r border-slate-200 flex flex-col shadow-sm transition-transform duration-300 ease-in-out lg:static lg:translate-x-0',
|
||||
isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
]">
|
||||
<!-- Close Button (Mobile Only) -->
|
||||
<button @click="isSidebarOpen = false" class="absolute top-4 right-4 lg:hidden text-slate-400 hover:text-slate-600 p-2 rounded-full hover:bg-slate-100 transition-colors z-20">
|
||||
<i class="fas fa-times text-lg"></i>
|
||||
</button>
|
||||
|
||||
<div class="p-8 pb-4 relative">
|
||||
<div class="flex items-center gap-3 text-slate-800 mb-8">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-md shadow-blue-200">
|
||||
<i class="fas fa-layer-group text-white text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-bold text-lg leading-tight tracking-tight">SAM3 Admin</h2>
|
||||
<p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-0.5">Quantum Track AI</p>
|
||||
<p class="text-xs text-slate-400 font-bold tracking-widest uppercase mt-0.5">Quantum Track AI</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -203,10 +216,15 @@
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-y-auto overflow-x-hidden relative scroll-smooth">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-20 bg-white/80 backdrop-blur-md border-b border-slate-200 px-8 py-4 flex justify-between items-center shadow-sm">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-800">{{ getPageTitle(currentTab) }}</h1>
|
||||
<p class="text-sm text-slate-500 mt-0.5">{{ getPageSubtitle(currentTab) }}</p>
|
||||
<header class="sticky top-0 z-20 bg-white/80 backdrop-blur-md border-b border-slate-200 px-4 md:px-8 py-4 flex justify-between items-center shadow-sm transition-all">
|
||||
<div class="flex items-center gap-3">
|
||||
<button @click="isSidebarOpen = true" class="lg:hidden p-2 -ml-2 text-slate-500 hover:text-blue-600 hover:bg-slate-100 rounded-lg transition-colors active:scale-95">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
<div>
|
||||
<h1 class="text-xl md:text-2xl font-bold text-slate-800 transition-all">{{ getPageTitle(currentTab) }}</h1>
|
||||
<p class="text-xs md:text-sm text-slate-500 mt-0.5 hidden sm:block">{{ getPageSubtitle(currentTab) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-white border border-slate-200 rounded-full px-4 py-1.5 flex items-center gap-2 shadow-sm">
|
||||
@@ -216,13 +234,13 @@
|
||||
</span>
|
||||
<span class="text-sm font-medium text-slate-600">系统正常</span>
|
||||
</div>
|
||||
<button @click="refreshData" class="p-2.5 text-slate-400 hover:text-blue-600 transition-colors rounded-full hover:bg-slate-100 active:scale-95" title="刷新数据">
|
||||
<button @click="refreshData" class="p-3 text-slate-400 hover:text-blue-600 transition-colors rounded-full hover:bg-slate-100 active:scale-95" title="刷新数据">
|
||||
<i class="fas fa-sync-alt" :class="{'fa-spin': isLoading}"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-8 max-w-7xl mx-auto min-h-[calc(100vh-88px)]">
|
||||
<div class="p-4 md:p-8 max-w-7xl mx-auto min-h-[calc(100vh-88px)] transition-all">
|
||||
<transition name="slide-up" mode="out-in">
|
||||
|
||||
<!-- Dashboard Tab -->
|
||||
@@ -325,7 +343,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-slate-400">
|
||||
<span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide">Qwen-VL Engine</span>
|
||||
<span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide">Qwen-VL Engine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -403,7 +421,7 @@
|
||||
<i class="fas fa-link text-2xl mb-2"></i>
|
||||
<span class="text-xs truncate max-w-[200px]">{{ tarotImageUrl }}</span>
|
||||
</div>
|
||||
<button @click.prevent="clearTarotInput" class="absolute top-2 right-2 bg-white/80 p-1.5 rounded-full hover:bg-white text-slate-600 shadow-sm">
|
||||
<button @click.prevent="clearTarotInput" class="absolute top-2 right-2 bg-white/80 p-2.5 rounded-full hover:bg-white text-slate-600 shadow-sm">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -499,7 +517,7 @@
|
||||
class="text-xs font-bold px-2 py-0.5 rounded">
|
||||
{{ card.recognition?.position || '未知' }}
|
||||
</span>
|
||||
<span v-if="card.is_rotated" class="text-[10px] text-slate-400 bg-slate-100 px-1.5 rounded" title="已自动矫正方向">
|
||||
<span v-if="card.is_rotated" class="text-xs text-slate-400 bg-slate-100 px-1.5 rounded" title="已自动矫正方向">
|
||||
<i class="fas fa-sync-alt"></i> Auto-Rotated
|
||||
</span>
|
||||
</div>
|
||||
@@ -561,7 +579,7 @@
|
||||
</div>
|
||||
<div v-if="record.final_prompt && record.final_prompt !== record.prompt" class="text-xs text-slate-500 bg-slate-50 p-1.5 rounded border border-slate-100">
|
||||
<div class="flex items-center gap-1 mb-0.5 text-purple-600 font-medium">
|
||||
<i class="fas fa-magic text-[10px]"></i> 优化后 Prompt
|
||||
<i class="fas fa-magic text-xs"></i> 优化后 Prompt
|
||||
</div>
|
||||
<div class="italic line-clamp-2" :title="record.final_prompt">{{ record.final_prompt }}</div>
|
||||
</div>
|
||||
@@ -581,7 +599,7 @@
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button v-if="record.result_path" @click="viewResult(record.result_path)"
|
||||
class="text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-2 rounded-lg transition-all" title="查看结果">
|
||||
class="text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-3 rounded-lg transition-all" title="查看结果">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</button>
|
||||
<span v-else class="text-slate-300 cursor-not-allowed"><i class="fas fa-eye-slash"></i></span>
|
||||
@@ -616,7 +634,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="fetchFiles" class="p-2 text-slate-400 hover:text-blue-600 transition-colors rounded hover:bg-slate-50">
|
||||
<button @click="fetchFiles" class="p-3 text-slate-400 hover:text-blue-600 transition-colors rounded hover:bg-slate-50">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -630,7 +648,7 @@
|
||||
<div v-if="file.is_dir" @click="enterDir(file.name)" class="flex flex-col items-center w-full h-full justify-center">
|
||||
<i class="fas fa-folder text-yellow-400 text-5xl mb-2 drop-shadow-sm group-hover:scale-110 transition-transform"></i>
|
||||
<span class="text-xs font-medium text-slate-700 truncate w-full text-center px-2">{{ file.name }}</span>
|
||||
<span class="text-[10px] text-slate-400">{{ file.count }} 项</span>
|
||||
<span class="text-xs text-slate-400">{{ file.count }} 项</span>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
@@ -639,19 +657,19 @@
|
||||
<img :src="file.url" class="w-full h-full object-contain" loading="lazy">
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-700 truncate w-full text-center px-1">{{ file.name }}</span>
|
||||
<span class="text-[10px] text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
|
||||
<span class="text-xs text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Other -->
|
||||
<div v-else class="flex flex-col items-center w-full h-full justify-center">
|
||||
<i class="fas fa-file-alt text-slate-300 text-4xl mb-2"></i>
|
||||
<span class="text-xs font-medium text-slate-700 truncate w-full text-center px-1">{{ file.name }}</span>
|
||||
<span class="text-[10px] text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
|
||||
<span class="text-xs text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Delete Action -->
|
||||
<button @click.stop="deleteFile(file.name)"
|
||||
class="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100 hover:bg-red-600 shadow-sm z-10">
|
||||
class="absolute top-2 right-2 w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100 hover:bg-red-600 shadow-sm z-10">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -927,6 +945,7 @@
|
||||
setup() {
|
||||
// State
|
||||
const isLoggedIn = ref(false);
|
||||
const isSidebarOpen = ref(false);
|
||||
const password = ref('');
|
||||
const loginError = ref('');
|
||||
const currentTab = ref('dashboard');
|
||||
@@ -1400,6 +1419,7 @@
|
||||
const switchTab = (tab) => {
|
||||
const prevTab = currentTab.value;
|
||||
currentTab.value = tab;
|
||||
isSidebarOpen.value = false; // Close sidebar on mobile
|
||||
|
||||
// GPU Monitor Logic
|
||||
if (tab === 'gpu') {
|
||||
@@ -1696,7 +1716,7 @@
|
||||
});
|
||||
|
||||
return {
|
||||
isLoggedIn, password, loginError, login, logout,
|
||||
isLoggedIn, isSidebarOpen, password, loginError, login, logout,
|
||||
currentTab, switchTab, history, files, currentPath,
|
||||
enterDir, navigateUp, deleteFile, triggerCleanup,
|
||||
viewResult, previewImage, isImage, previewUrl,
|
||||
|
||||
Reference in New Issue
Block a user