From e3cc3a428d318b5eb3f285591ce405fcff3730a5 Mon Sep 17 00:00:00 2001
From: WuYongJie <wuyongjie@example.com>
Date: Mon, 1 Jun 2026 11:25:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=90=8E=E5=8F=B0=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=92=8C=E5=88=86=E7=B1=BB=E7=AA=84=E5=B1=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/_components/CategoriesTab.tsx | 26 ++++++++++++-------------
 components/ui/Modal.tsx                 |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/admin/_components/CategoriesTab.tsx b/app/admin/_components/CategoriesTab.tsx
index c85720e..dfe1fc1 100644
--- a/app/admin/_components/CategoriesTab.tsx
+++ b/app/admin/_components/CategoriesTab.tsx
@@ -7,9 +7,9 @@
  * 使用三层架构样式系统，支持深浅色主题
  * 
  * 布局结构：
- * - 顶部：Header区域（红色框框）
- * - 左侧：分类列表（黄色框框，固定不滚动）
- * - 右侧：选项卡片列表（绿色框框，可滚动）
+ * - 顶部：说明区域
+ * - 左侧：分类列表
+ * - 右侧：选项卡片列表
  * 
  * @created 2025-01-XX（拆分自 page.tsx）
  * @component
@@ -583,14 +583,14 @@ export default function CategoriesTab({ showToast, onDataChange, isSuperAdmin =
         </div>
       </section>
 
-      {/* 主要内容区域：左右分栏 */}
-      <div className="flex-1 flex gap-6 min-h-0">
-        {/* 黄色框框：左侧分类列表（固定不滚动） */}
-        <div className="w-[320px] flex-shrink-0 space-y-5">
+      {/* 主要内容区域：桌面左右分栏，窄屏上下排列 */}
+      <div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-6 min-h-0">
+        {/* 分类列表 */}
+        <div className="w-full lg:w-[320px] lg:flex-shrink-0 space-y-5">
           <div className={cn(
             styles.cardStyles.base,
             'p-5 flex flex-col',
-            'sticky top-24 max-h-[calc(100vh-12rem)]',
+            'max-h-[24rem] lg:sticky lg:top-24 lg:max-h-[calc(100vh-12rem)]',
           )}>
             <p className={cn('text-sm font-medium mb-4 flex-shrink-0', theme === 'dark' ? 'text-slate-200' : 'text-slate-600')}>
               分类列表
@@ -734,11 +734,11 @@ export default function CategoriesTab({ showToast, onDataChange, isSuperAdmin =
                       {disabledFieldMeta.map((field) => (
                         <div
                           key={`${field.key}-disabled`}
-                          className="rounded-lg border border-dashed border-slate-300 dark:border-slate-700 px-4 py-3 flex items-center justify-between gap-3"
+                          className="rounded-lg border border-dashed border-slate-300 dark:border-slate-700 px-4 py-3 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center"
                         >
-                          <div>
+                          <div className="min-w-0">
                             <p className="text-sm font-semibold text-slate-900 dark:text-white">{field.label}</p>
-                            <p className="text-xs text-slate-400 dark:text-slate-500">
+                            <p className="text-xs text-slate-400 dark:text-slate-500 break-all">
                               {field.key} · {field.source === 'standard' ? '标准字段' : '模板字段'}
                             </p>
                           </div>
@@ -757,7 +757,7 @@ export default function CategoriesTab({ showToast, onDataChange, isSuperAdmin =
                 </>
               )}
             </div>
-            <div className="pt-4 mt-4 border-t border-slate-200/80 dark:border-slate-700/70 flex gap-3">
+            <div className="pt-4 mt-4 border-t border-slate-200/80 dark:border-slate-700/70 flex flex-col gap-2 sm:flex-row sm:gap-3">
               <button
                 type="button"
                 className={cn(styles.buttonStyles.secondary, 'flex-1')}
@@ -802,7 +802,7 @@ export default function CategoriesTab({ showToast, onDataChange, isSuperAdmin =
           </div>
         </div>
 
-        {/* 绿色框框：右侧选项卡片列表（页面级滚动，显示所有字段） */}
+        {/* 选项卡片列表（页面级滚动，显示所有字段） */}
         <div className="flex-1 min-w-0">
           <div className="space-y-6">
             {orderedCategories.map((category) => {
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index 733c36c..8470dc9 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -18,7 +18,7 @@ import { useThemeStyles, cn } from '@/lib/ui-styles'
 
 export type ModalSize = 'xs' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'fullscreen'
 
-const MODAL_BORDER_RADIUS = 12
+const MODAL_BORDER_RADIUS = 8
 
 const sizeStyleMap: Record<ModalSize, CSSProperties> = {
   xs: { width: 'min(90vw, 20rem)', maxWidth: '20rem' },