Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,53 @@
+import React from 'react';
+import './Card.css';
+
+/**
+ * Aurora Admin Card（React）
+ * 对齐 card.json 契约：
+ *  - style:   bordered | shadowed
+ *  - padding: 16 | 24
+ *  - section: title（含右侧 extra）/ content / actions
+ */
+export default function Card({
+  title = '',
+  bordered = false,
+  shadowed = false,
+  padding = 16,
+  className = '',
+  children,
+  extra,
+  actions
+}) {
+  const paddingPx = typeof padding === 'number' ? `${padding}px` : padding;
+  const classes = [
+    'aa-card',
+    bordered ? 'aa-card--bordered' : '',
+    shadowed ? 'aa-card--shadowed' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes} style={{ padding: paddingPx }}>
+      {(title || extra) && (
+        <div className="aa-card__header">
+          <div className="aa-card__title">{title}</div>
+          {extra && <div className="aa-card__extra">{extra}</div>}
+        </div>
+      )}
+      <div className="aa-card__body">{children}</div>
+      {actions && <div className="aa-card__actions">{actions}</div>}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Card from './Card';
+
+<Card title="客户详情" extra={<a>查看全部</a>} shadowed padding={24}>
+  内容区...
+</Card>
+<Card title="操作卡片" bordered actions={<><button>取消</button><button>确定</button></>}>
+  内容区...
+</Card>
+*/