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,74 @@
+import React, { useState } from 'react';
+import './Collapse.css';
+
+/**
+ * Aurora Admin Collapse（React）
+ * 对齐 组件2.txt 规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式
+ *
+ * props:
+ *  - items    : [{ key, title, disabled? }]
+ *  - accordion: Boolean（手风琴模式，同时仅展开一个）
+ *  - value / defaultValue : 展开 key 数组（手风琴时为单个 key 字符串）
+ *  - onChange(keys)
+ *  - renderPanel(key) / children(key) : 返回对应面板内容
+ */
+export default function Collapse({
+  items = [],
+  accordion = false,
+  value,
+  defaultValue = accordion ? '' : [],
+  onChange,
+  renderPanel
+}) {
+  const panelFn = renderPanel || (typeof children === 'function' ? children : null);
+  const [inner, setInner] = useState(defaultValue);
+  const open = value !== undefined ? value : inner;
+
+  const openList = accordion ? (open ? [open] : []) : (Array.isArray(open) ? open : []);
+  const isOpen = (k) => openList.includes(k);
+
+  const toggle = (item) => {
+    if (item.disabled) return;
+    let next;
+    if (accordion) {
+      next = isOpen(item.key) ? [] : [item.key];
+    } else {
+      next = isOpen(item.key) ? openList.filter(k => k !== item.key) : [...openList, item.key];
+    }
+    const result = accordion ? (next[0] || '') : next;
+    if (value === undefined) setInner(result);
+    onChange && onChange(result);
+  };
+
+  return (
+    <div className="aa-collapse">
+      {items.map((item) => (
+        <div
+          key={item.key}
+          className={`aa-collapse-item${isOpen(item.key) ? ' is-open' : ''}${item.disabled ? ' is-disabled' : ''}`}
+        >
+          <div className="aa-collapse-header" onClick={() => toggle(item)}>
+            <span className="aa-collapse-arrow">▶</span>
+            <span className="aa-collapse-title">{item.title}</span>
+          </div>
+          {isOpen(item.key) && (
+            <div className="aa-collapse-content">
+              {panelFn ? panelFn(item.key) : null}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Collapse from './Collapse';
+const items = [
+  { key: 'a', title: '基本设置' },
+  { key: 'b', title: '通知设置' },
+  { key: 'c', title: '高级', disabled: true }
+];
+<Collapse accordion items={items} defaultValue="a" renderPanel={(k) => <div>内容：{k}</div>} />
+*/