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,152 @@
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import './Cascader.css';
+
+/**
+ * Aurora Admin Cascader（React）
+ * 对齐 组件7.txt Cascader 规范：多级下拉、搜索、路径显示、多选
+ *
+ * props:
+ *  - value / defaultValue : 单选为路径数组(或 null)，多选为路径数组的数组
+ *  - options : [{ value, label, children? }]
+ *  - multiple
+ *  - filterable
+ *  - placeholder
+ *  - onChange(value)
+ */
+export default function Cascader({
+  value,
+  defaultValue = [],
+  options = [],
+  multiple = false,
+  filterable = true,
+  placeholder = '请选择',
+  onChange
+}) {
+  const rootRef = useRef(null);
+  const [inner, setInner] = useState(defaultValue);
+  const current = value !== undefined ? value : inner;
+  const [open, setOpen] = useState(false);
+  const [activePath, setActivePath] = useState([]);
+  const [query, setQuery] = useState('');
+
+  const pathLabels = (values) => {
+    let nodes = options, labels = [];
+    for (const v of (values || [])) {
+      const n = nodes.find(x => x.value === v);
+      if (!n) break;
+      labels.push(n.label); nodes = n.children || [];
+    }
+    return labels;
+  };
+  const columns = useMemo(() => {
+    const cols = [];
+    let nodes = options;
+    for (let lv = 0; lv <= activePath.length; lv++) {
+      cols.push(nodes);
+      if (lv < activePath.length) {
+        const next = nodes.find(x => x.value === activePath[lv]);
+        nodes = next.children || [];
+      } else break;
+    }
+    return cols;
+  }, [options, activePath]);
+
+  const allLeaves = useMemo(() => {
+    const out = [];
+    (function walk(list, acc) {
+      list.forEach(n => {
+        const p = [...acc, n.value];
+        if (n.children && n.children.length) walk(n.children, p);
+        else out.push(p);
+      });
+    })(options, []);
+    return out;
+  }, [options]);
+  const results = query ? allLeaves.filter(p => pathLabels(p).join('/').includes(query)) : [];
+
+  const commit = (next) => {
+    if (value === undefined) setInner(next);
+    onChange && onChange(next);
+  };
+  const choose = (n, lv) => {
+    const full = [...activePath.slice(0, lv), n.value];
+    if (n.children && n.children.length) setActivePath(full);
+    else if (multiple) {
+      const k = JSON.stringify(full);
+      const arr = Array.isArray(current) ? current : [];
+      commit(arr.some(p => JSON.stringify(p) === k) ? arr.filter(p => JSON.stringify(p) !== k) : [...arr, full]);
+    } else { commit(full); setOpen(false); }
+  };
+  const pickResult = (p) => {
+    if (multiple) {
+      const k = JSON.stringify(p);
+      const arr = Array.isArray(current) ? current : [];
+      commit(arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : [...arr, p]);
+    } else { commit(p); setOpen(false); }
+  };
+  const isChecked = (p) => Array.isArray(current) && current.some(x => JSON.stringify(x) === JSON.stringify(p));
+
+  useEffect(() => {
+    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setQuery(''); } };
+    document.addEventListener('click', onDoc, true);
+    return () => document.removeEventListener('click', onDoc, true);
+  }, []);
+
+  return (
+    <div className="aa-cascader" ref={rootRef}>
+      <div className={`aa-cascader-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>
+        {multiple ? (
+          current.length ? (
+            <span className="aa-cascader-tags">
+              {current.map((p, i) => <span key={i} className="aa-cascader-tag">{pathLabels(p).join(' / ')}</span>)}
+            </span>
+          ) : <span className="placeholder">{placeholder}</span>
+        ) : (
+          <span>{current && current.length ? pathLabels(current).join(' / ') : placeholder}</span>
+        )}
+        <span className="caret">▾</span>
+      </div>
+
+      {open && filterable && (
+        <div className="aa-cascader-search">
+          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索" />
+        </div>
+      )}
+
+      {open && (
+        <div className="aa-cascader-panel">
+          {query ? (
+            <div className="aa-cascader-results">
+              {results.length ? results.map((p, i) => (
+                <div key={i} className="aa-cascader-result" onClick={() => pickResult(p)}>{pathLabels(p).join(' / ')}</div>
+              )) : <div className="aa-cascader-empty">无匹配结果</div>}
+            </div>
+          ) : (
+            columns.map((col, ci) => (
+              <div key={ci} className="aa-cascader-col">
+                {col.map(n => (
+                  <div
+                    key={n.value}
+                    className={`aa-cascader-opt${activePath[ci] === n.value ? ' is-active' : ''}${multiple && !n.children && isChecked([...activePath.slice(0, ci), n.value]) ? ' is-checked' : ''}`}
+                    onClick={() => choose(n, ci)}
+                  >
+                    {multiple && !n.children && <span className="box">{isChecked([...activePath.slice(0, ci), n.value]) ? '✓' : ''}</span>}
+                    <span>{n.label}</span>
+                    {n.children && n.children.length && <span className="arrow">›</span>}
+                  </div>
+                ))}
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Cascader from './Cascader';
+const options = [{ value: 'zj', label: '浙江', children: [{ value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }] }] }];
+<Cascader options={options} defaultValue={['zj', 'hz', 'xh']} onChange={setPath} />
+*/