WuYongJie/flnxi-Wu
WuYongJie/flnxi-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
WuYongJie 2026-06-01 11:25:57 +08:00
parent 2756925698
commit e3cc3a428d
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/admin/_components/CategoriesTab.tsx
View File

@ -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) => {

2
components/ui/Modal.tsx
View File

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