统一后台弹窗和分类窄屏布局

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="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-6 min-h-0">
-        {/* 黄色框框：左侧分类列表（固定不滚动） */}
+        {/* 分类列表 */}
-        <div className="w-[320px] flex-shrink-0 space-y-5">
+        <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) => {

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' },