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,45 @@
+import React from 'react';
+import './Segmented.css';
+
+/**
+ * Aurora Admin Segmented（React）
+ * 对齐 组件2.txt Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF
+ * options: [{ label, value, icon?, disabled? }]
+ * 受控：value + onChange；非受控：defaultValue
+ */
+export default function Segmented({ value, defaultValue, options = [], onChange }) {
+  const current = value !== undefined ? value : defaultValue;
+
+  const choose = (opt) => {
+    if (opt.disabled) return;
+    if (value === undefined) onChange && onChange(opt.value);
+    else onChange && onChange(opt.value);
+  };
+
+  return (
+    <div className="aa-segmented">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          className={`aa-segmented-item${current === opt.value ? ' is-active' : ''}${opt.disabled ? ' is-disabled' : ''}`}
+          disabled={opt.disabled}
+          onClick={() => choose(opt)}
+        >
+          {opt.icon && <span className="ico">{opt.icon}</span>}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Segmented from './Segmented';
+const opts = [
+  { label: '列表', value: 'list' },
+  { label: '看板', value: 'kanban' },
+  { label: '日历', value: 'cal', disabled: true }
+];
+<Segmented options={opts} defaultValue="list" onChange={setView} />
+*/