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,83 @@
+import React from 'react';
+import './Tabs.css';
+
+/**
+ * Aurora Admin Tabs（React）
+ * 对齐 组件7.txt PageTabs 规范：线型 / 卡片型 / 胶囊型，支持禁用、关闭、新增
+ *
+ * props:
+ *  - value / defaultValue : 当前激活标签 key（受控 / 非受控）
+ *  - tabs   : [{ key, label, disabled?, preventClose? }]
+ *  - type   : 'line' | 'card' | 'pill'（默认 'line'）
+ *  - closable / addable : Boolean
+ *  - onChange(key) / onTabRemove(key) / onTabAdd()
+ *  - renderPanel(key) / children(key) : 返回当前激活标签的内容
+ */
+export default function Tabs({
+  value,
+  defaultValue,
+  tabs = [],
+  type = 'line',
+  closable = false,
+  addable = false,
+  onChange,
+  onTabRemove,
+  onTabAdd,
+  renderPanel
+}) {
+  const current = value !== undefined ? value : defaultValue;
+  const panelFn = renderPanel || (typeof children === 'function' ? children : null);
+
+  const choose = (tab) => {
+    if (tab.disabled) return;
+    onChange && onChange(tab.key);
+  };
+
+  return (
+    <div className={`aa-tabs type-${type}`}>
+      <div className="aa-tabs-nav">
+        {tabs.map((tab) => (
+          <div
+            key={tab.key}
+            className={`aa-tabs-tab${current === tab.key ? ' is-active' : ''}${tab.disabled ? ' is-disabled' : ''}`}
+            onClick={() => choose(tab)}
+          >
+            {tab.label}
+            {closable && !tab.disabled && !tab.preventClose && (
+              <span
+                className="aa-tabs-close"
+                title="关闭"
+                onClick={(e) => { e.stopPropagation(); onTabRemove && onTabRemove(tab.key); }}
+              >×</span>
+            )}
+          </div>
+        ))}
+        {addable && (
+          <div className="aa-tabs-add" title="新增标签" onClick={() => onTabAdd && onTabAdd()}>+</div>
+        )}
+      </div>
+
+      <div className="aa-tabs-content">
+        {panelFn ? panelFn(current) : null}
+      </div>
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Tabs from './Tabs';
+
+const tabs = [
+  { key: 'basic', label: '基本信息' },
+  { key: 'safe',  label: '安全设置' },
+  { key: 'auth',  label: '授权', disabled: true }
+];
+<Tabs
+  type="line"
+  tabs={tabs}
+  defaultValue="basic"
+  onChange={setActive}
+  renderPanel={(key) => <div>当前标签：{key}</div>}
+/>
+*/