feat: opt menu style

web/src/layouts/MainLayout.vue

@@ -74,17 +74,17 @@ onMounted(() => {
     <!-- Sidebar -->
     <aside
       :class="[
-        'fixed lg:static inset-y-0 left-0 z-50 w-56 border-r bg-background flex flex-col transform transition-transform duration-200 ease-in-out lg:transform-none',
+        'fixed lg:static inset-y-0 left-0 z-50 w-44 border-r bg-background flex flex-col transform transition-transform duration-200 ease-in-out lg:transform-none',
         mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
       ]"
     >
-      <div class="h-14 flex items-center justify-between px-4 lg:px-10 font-semibold text-lg border-b">
+      <div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative">
         <span>{{ siteSettings.title }}</span>
-        <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden" @click="mobileMenuOpen = false">
+        <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
           <X class="h-4 w-4" />
         </Button>
       </div>
-      <nav class="flex-1 px-3 lg:px-6 py-6 lg:py-9 space-y-1">
+      <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center">
         <RouterLink
           v-for="item in navItems"
           :key="item.to"
@@ -94,7 +94,7 @@ onMounted(() => {
         >
           <Button
             variant="ghost"
-            :class="['w-full lg:w-[80%] justify-start gap-3 h-9 px-3', isItemActive(item) && 'bg-accent text-accent-foreground']"
+            :class="['justify-start gap-3 h-9 px-3', isItemActive(item) && 'bg-accent text-accent-foreground']"
             @click="handleNavClick(navigate)"
           >
             <component :is="item.icon" class="h-4 w-4" />
@@ -102,8 +102,8 @@ onMounted(() => {
           </Button>
         </RouterLink>
       </nav>
-      <div class="px-3 py-4 border-t">
+      <div class="px-3 py-4 border-t flex justify-center">
-        <Button variant="ghost" class="w-full justify-start gap-3 h-9 px-3 text-muted-foreground hover:text-foreground" @click="logout">
+        <Button variant="ghost" class="justify-start gap-3 h-9 px-3 text-muted-foreground hover:text-foreground" @click="logout">
           <LogOut class="h-4 w-4" />
           退出登录
         </Button>

web/src/views/settings/Settings.vue

@@ -18,7 +18,7 @@ const activeTab = ref('password')
       <p class="text-muted-foreground text-sm">管理系统配置和账户安全</p>
     </div>
 
-    <Tabs v-model="activeTab" class="w-full">
+    <Tabs v-model="activeTab" class="max-w-2xl">
       <TabsList class="w-full sm:w-auto grid grid-cols-5 sm:inline-flex h-auto gap-1 p-1">
         <TabsTrigger value="password" class="text-xs px-2 sm:px-3 py-1.5">密码修改</TabsTrigger>
         <TabsTrigger value="site" class="text-xs px-2 sm:px-3 py-1.5">站点设置</TabsTrigger>
@@ -28,7 +28,7 @@ const activeTab = ref('password')
       </TabsList>
 
       <TabsContent value="password" class="mt-6">
-        <Card class="max-w-lg">
+        <Card>
           <CardHeader>
             <CardTitle>修改密码</CardTitle>
             <CardDescription>更新您的账户密码</CardDescription>
@@ -40,7 +40,7 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="site" class="mt-6">
-        <Card class="max-w-xl">
+        <Card>
           <CardHeader>
             <CardTitle>站点设置</CardTitle>
             <CardDescription>配置站点标题、图标和系统参数</CardDescription>
@@ -52,7 +52,7 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="scheduler" class="mt-6">
-        <Card class="max-w-xl">
+        <Card>
           <CardHeader>
             <CardTitle>调度设置</CardTitle>
             <CardDescription>配置任务调度器参数</CardDescription>
@@ -64,7 +64,7 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="backup" class="mt-6">
-        <Card class="max-w-xl">
+        <Card>
           <CardHeader>
             <CardTitle>备份恢复</CardTitle>
             <CardDescription>备份和恢复系统数据</CardDescription>
@@ -76,7 +76,7 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="about" class="mt-6">
-        <Card class="max-w-xl">
+        <Card>
           <CardContent class="pt-6">
             <AboutSettings />
           </CardContent>