Enhance backend functionality and frontend UI

- Updated main.py to include authentication for brand, model, and OTA routers.
- Added new OTA schemas in schemas.py for version management.
- Enhanced model retrieval with sorting options in models.py.
- Improved model update functionality to support multipart/form-data uploads.
- Updated frontend layout and styles for a more modern look, including new font integration.
- Implemented login route and authentication checks in router/index.js.
- Added sorting capabilities in model table and improved file handling in model view.
- Updated requirements.txt to include PyJWT for token management.

frontend/src/layout/index.vue

@@ -1,16 +1,22 @@
 <template>
-  <div class="app-wrapper">
-    <el-container>
-      <!-- 侧边栏 -->
-      <el-aside width="200px" class="sidebar">
-        <div class="logo">
+  <div class="lux-shell">
+    <div class="lux-shell-bg" aria-hidden="true">
+      <div class="lux-orb lux-orb-1" />
+      <div class="lux-orb lux-orb-2" />
+      <div class="lux-orb lux-orb-3" />
+    </div>
+
+    <el-container class="lux-shell-body">
+      <el-aside width="220px" class="sidebar-glass">
+        <div class="sidebar-logo">
           <h2>耳机管理平台</h2>
         </div>
         <el-menu
+          class="lux-menu"
           :default-active="activeMenu"
-          background-color="#304156"
-          text-color="#bfcbd9"
-          active-text-color="#409EFF"
+          background-color="transparent"
+          text-color="#cbd5e1"
+          active-text-color="#7dd3fc"
           router
         >
           <el-sub-menu index="1">
@@ -27,15 +33,29 @@
               <span>型号管理</span>
             </el-menu-item>
           </el-sub-menu>
+          <el-sub-menu index="upgrade">
+            <template #title>
+              <el-icon><Upload /></el-icon>
+              <span>升级管理</span>
+            </template>
+            <el-menu-item index="/ota">
+              <el-icon><Document /></el-icon>
+              <span>OTA 管理</span>
+            </el-menu-item>
+          </el-sub-menu>
         </el-menu>
       </el-aside>
 
-      <!-- 主内容区 -->
-      <el-container>
-        <el-header class="header">
-          <div class="header-title">耳机品牌与型号管理系统</div>
+      <el-container class="lux-right-col">
+        <el-header class="lux-header">
+          <div class="lux-header-title">耳机品牌与型号管理系统</div>
+          <div class="header-right">
+            <el-button type="primary" size="small" class="logout-btn" @click="handleLogout">
+              退出登录
+            </el-button>
+          </div>
         </el-header>
-        <el-main class="main-content">
+        <el-main class="lux-main">
           <router-view />
         </el-main>
       </el-container>
@@ -45,61 +65,34 @@
 
 <script setup>
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { Headset, Collection, List } from '@element-plus/icons-vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Headset, Collection, List, Upload, Document } from '@element-plus/icons-vue'
+import { clearToken } from '@/utils/auth'
 
 const route = useRoute()
+const router = useRouter()
 const activeMenu = computed(() => route.path)
+
+const handleLogout = () => {
+  clearToken()
+  ElMessage.success('已退出登录')
+  router.push('/login')
+}
 </script>
 
 <style scoped>
-.app-wrapper {
-  height: 100vh;
+.lux-right-col {
+  flex: 1;
+  min-width: 0;
 }
 
-.el-container {
-  height: 100%;
+.header-right {
+  flex-shrink: 0;
 }
 
-.sidebar {
-  background-color: #304156;
-  overflow-x: hidden;
-}
-
-.logo {
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #2b3a4b;
-}
-
-.logo h2 {
-  color: #fff;
-  font-size: 18px;
+.logout-btn {
+  color: #ffffff !important;
   font-weight: 600;
 }
-
-.el-menu {
-  border-right: none;
-}
-
-.header {
-  background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.main-content {
-  background-color: #f0f2f5;
-  padding: 20px;
-}
 </style>