From d4d214d07417251bfc30aed629c95dad041b6b0d Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Tue, 9 Jun 2026 10:31:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Agents.md                                     | 30 +++++++++++++
 frontend/components/common/admin/files.tsx    |  2 +-
 .../components/common/admin/system-logs.tsx   |  2 +-
 .../common/settings/system-settings.tsx       |  4 +-
 frontend/components/ui/tabs.tsx               | 45 ++++++++++++++-----
 5 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/Agents.md b/Agents.md
index c4e4bbdd..8a63e862 100644
--- a/Agents.md
+++ b/Agents.md
@@ -452,6 +452,36 @@ import "github.com/gin-gonic/gin"
 func (m *Manager) VerifyMiddleware(...) gin.HandlerFunc { ... }
 ```
 
+### 6.12 前端页面宽度自适应规范
+
+**开发或更新前端页面时，页面主容器必须支持全宽（Full Width）自适应。** 页面组件的根容器禁止硬编码固定最大宽度（如 `max-w-6xl`、`max-w-4xl` 等），而应统一使用 `w-full`。
+
+由于系统主布局（`MainLayout`）已包含全局 "切换全宽" 状态与按钮，页面主容器不设最大宽度即可让页面宽度完美跟随全局状态。默认情况下由主布局约束在正常宽度限制内，开启全宽后能自动拉伸至 `100%`。
+
+**错误示例（禁止限制宽度）**：
+```tsx
+// ❌ 禁止在页面外层组件硬编码 max-w 限制
+export function FeatureMain() {
+  return (
+    <div className="py-6 space-y-6 max-w-6xl mx-auto">
+      {/* 页面内容 */}
+    </div>
+  )
+}
+```
+
+**正确示例（推荐自适应全宽）**：
+```tsx
+// ✅ 容器使用 w-full，使其自适应外层 layout 的宽度调整
+export function FeatureMain() {
+  return (
+    <div className="py-6 space-y-6 w-full">
+      {/* 页面内容 */}
+    </div>
+  )
+}
+```
+
 ---
 
 ## 七、新增功能开发流程
diff --git a/frontend/components/common/admin/files.tsx b/frontend/components/common/admin/files.tsx
index 88731fa7..0a09319c 100644
--- a/frontend/components/common/admin/files.tsx
+++ b/frontend/components/common/admin/files.tsx
@@ -164,7 +164,7 @@ export function FilesMain() {
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, ease: "easeOut" }}
-      className="py-6 space-y-6 max-w-6xl mx-auto"
+      className="py-6 space-y-6 w-full"
     >
 
       {/* 头部 */}
diff --git a/frontend/components/common/admin/system-logs.tsx b/frontend/components/common/admin/system-logs.tsx
index f87b968b..d57edf8a 100644
--- a/frontend/components/common/admin/system-logs.tsx
+++ b/frontend/components/common/admin/system-logs.tsx
@@ -38,7 +38,7 @@ export function SystemLogs() {
 
       {/* Tabs Layout */}
       <Tabs defaultValue="analytics" className="w-full flex-grow flex flex-col gap-2">
-        <TabsList className="mb-2 w-full sm:w-auto">
+        <TabsList variant={'line'} className="mb-2 w-full sm:w-auto">
           <TabsTrigger value="analytics" className="flex items-center gap-1.5 px-4">
             <BarChart3 className="size-3.5" />
             访问分析
diff --git a/frontend/components/common/settings/system-settings.tsx b/frontend/components/common/settings/system-settings.tsx
index 02f946b4..9af045ce 100644
--- a/frontend/components/common/settings/system-settings.tsx
+++ b/frontend/components/common/settings/system-settings.tsx
@@ -65,10 +65,10 @@ export function SystemSettingsMain() {
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, ease: "easeOut" }}
-      className="py-6 space-y-6 max-w-4xl mx-auto px-4"
+      className="py-6 space-y-6 w-full"
     >
       <Tabs defaultValue="security" className="w-full">
-        <TabsList className="w-full overflow-x-auto">
+        <TabsList variant={'line'} className="w-full">
           <TabsTrigger value="security" className="px-0 pb-2 text-xs font-semibold">
             安全设置
           </TabsTrigger>
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
index ffb1fc5e..be31d3b2 100644
--- a/frontend/components/ui/tabs.tsx
+++ b/frontend/components/ui/tabs.tsx
@@ -1,34 +1,56 @@
 "use client"
 
 import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import {cva, type VariantProps} from "class-variance-authority"
+import {Tabs as TabsPrimitive} from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import {cn} from "@/lib/utils"
 
 function Tabs({
   className,
+  orientation = "horizontal",
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
       {...props}
     />
   )
 }
 
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
 function TabsList({
   className,
+  variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        "bg-background text-muted-foreground inline-flex h-9 w-fit items-center justify-start rounded-none gap-4 border-b border-border",
-        className
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   )
@@ -42,7 +64,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "cursor-pointer data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className
       )}
       {...props}
@@ -63,4 +88,4 @@ function TabsContent({
   )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }