refactor(admin): 管理后台 UI - 独立设计系统并与用户端隔离
把后台 token、Ant 主题、壳层控件和抽屉弹窗从用户工作台拆开,去掉树状侧栏装饰线,色板仍用原来的中性黑白台阶。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
48
web/src/pages/admin/ui/overlays.tsx
Normal file
48
web/src/pages/admin/ui/overlays.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Drawer, Modal, type DrawerProps, type ModalProps } from "antd";
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type AdminDrawerProps = DrawerProps & {
|
||||
flush?: boolean;
|
||||
};
|
||||
|
||||
export type AdminModalProps = ModalProps & {
|
||||
flush?: boolean;
|
||||
};
|
||||
|
||||
const MODAL_FLUSH_STYLES = {
|
||||
container: { padding: 0, overflow: "hidden" as const },
|
||||
body: { padding: 0 },
|
||||
};
|
||||
|
||||
function mergeFlushStyles(resolved: unknown, flush: boolean, kind: "drawer" | "modal") {
|
||||
const base = resolved && typeof resolved === "object" ? (resolved as Record<string, unknown>) : {};
|
||||
if (!flush) return base;
|
||||
const body = base.body && typeof base.body === "object" ? (base.body as CSSProperties) : {};
|
||||
if (kind === "drawer") return { ...base, body: { ...body, padding: 0 } };
|
||||
const container = base.container && typeof base.container === "object" ? (base.container as CSSProperties) : {};
|
||||
return {
|
||||
...base,
|
||||
container: { ...container, ...MODAL_FLUSH_STYLES.container },
|
||||
body: { ...body, ...MODAL_FLUSH_STYLES.body },
|
||||
};
|
||||
}
|
||||
|
||||
export function AdminDrawer({ flush = false, destroyOnHidden = true, styles, className, rootClassName, ...props }: AdminDrawerProps) {
|
||||
const mergedStyles =
|
||||
typeof styles === "function"
|
||||
? (info: { props: DrawerProps }) => mergeFlushStyles(styles(info), flush, "drawer")
|
||||
: mergeFlushStyles(styles, flush, "drawer");
|
||||
|
||||
return <Drawer destroyOnHidden={destroyOnHidden} className={cn("admin-drawer-panel", className)} rootClassName={cn("admin-drawer", rootClassName)} {...props} styles={mergedStyles as DrawerProps["styles"]} />;
|
||||
}
|
||||
|
||||
export function AdminModal({ flush = false, destroyOnHidden = true, styles, className, rootClassName, ...props }: AdminModalProps) {
|
||||
const mergedStyles =
|
||||
typeof styles === "function"
|
||||
? (info: { props: ModalProps }) => mergeFlushStyles(styles(info), flush, "modal")
|
||||
: mergeFlushStyles(styles, flush, "modal");
|
||||
|
||||
return <Modal destroyOnHidden={destroyOnHidden} className={cn("admin-modal-panel", className)} rootClassName={cn("admin-modal-root", rootClassName)} {...props} styles={mergedStyles as ModalProps["styles"]} />;
|
||||
}
|
||||
Reference in New Issue
Block a user