界面优化调整，及完善

2026-01-14 16:29:46 +08:00
parent 45101e37c1
commit 657d9d3e37
23 changed files with 1528 additions and 306 deletions
--- a/src/components/ui/AdminNavBar.vue
+++ b/src/components/ui/AdminNavBar.vue
@@ -0,0 +1,117 @@
+<template>
+  <nav class="bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between h-16">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <h1 class="text-xl font-bold text-gray-900">文件中转站管理</h1>
+          </div>
+          <div class="hidden md:ml-6 md:flex md:space-x-8">
+            <router-link
+              to="/admin"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+              :class="$route.path === '/admin' ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
+            >
+              概览
+            </router-link>
+            <router-link
+              to="/admin/batches"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+              :class="$route.path.includes('/admin/batches') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
+            >
+              文件管理
+            </router-link>
+            <router-link
+              to="/admin/tokens"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+              :class="$route.path.includes('/admin/tokens') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
+            >
+              API 管理
+            </router-link>
+            <router-link
+              to="/admin/config"
+              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+              :class="$route.path.includes('/admin/config') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
+            >
+              系统配置
+            </router-link>
+          </div>
+        </div>
+        
+        <div class="flex items-center space-x-4">
+          <!-- 移动端菜单按钮 -->
+          <Button variant="ghost" @click="showMobileMenu = !showMobileMenu" class="md:hidden" size="sm">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+          </Button>
+          
+          <Button variant="outline" @click="router.push('/')" size="sm">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            前往前台
+          </Button>
+          <Button variant="destructive" @click="handleLogout" size="sm">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+            </svg>
+            退出登录
+          </Button>
+        </div>
+      </div>
+      
+      <!-- 移动端菜单 -->
+      <div class="md:hidden" v-if="showMobileMenu">
+        <div class="pt-2 pb-3 space-y-1">
+          <router-link
+            to="/admin"
+            class="block pl-3 pr-4 py-2 text-base font-medium"
+            :class="$route.path === '/admin' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
+            @click="showMobileMenu = false"
+          >
+            概览
+          </router-link>
+          <router-link
+            to="/admin/batches"
+            class="block pl-3 pr-4 py-2 text-base font-medium"
+            :class="$route.path.includes('/admin/batches') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
+            @click="showMobileMenu = false"
+          >
+            文件管理
+          </router-link>
+          <router-link
+            to="/admin/tokens"
+            class="block pl-3 pr-4 py-2 text-base font-medium"
+            :class="$route.path.includes('/admin/tokens') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
+            @click="showMobileMenu = false"
+          >
+            API 管理
+          </router-link>
+          <router-link
+            to="/admin/config"
+            class="block pl-3 pr-4 py-2 text-base font-medium"
+            :class="$route.path.includes('/admin/config') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
+            @click="showMobileMenu = false"
+          >
+            系统配置
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+
+const router = useRouter()
+const showMobileMenu = ref(false)
+
+const handleLogout = () => {
+  localStorage.removeItem('admin_token')
+  router.push('/admin/login')
+}
+</script>