feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,95 @@
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import './ListPicker.css';
+
+/**
+ * Aurora Admin ListPicker（React）
+ * 对齐 组件7.txt ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签
+ *
+ * props:
+ *  - value / defaultValue : 选中 value 数组
+ *  - options : 扁平 [{value,label}] 或 分组 [{label, children}]
+ *  - filterable
+ *  - placeholder
+ *  - onChange(keys)
+ */
+export default function ListPicker({
+  value,
+  defaultValue = [],
+  options = [],
+  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 [query, setQuery] = useState('');
+
+  const isGrouped = options.length && options[0] && options[0].children;
+  const flat = isGrouped ? options.flatMap(g => g.children) : options;
+  const labelMap = Object.fromEntries(flat.map(o => [o.value, o.label]));
+
+  const flatVisible = useMemo(() => flat.filter(o => o.label.includes(query)), [flat, query]);
+  const visibleGroups = useMemo(() => {
+    if (!isGrouped) return [{ children: flatVisible }];
+    return options
+      .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query)) }))
+      .filter(g => g.children.length);
+  }, [options, flatVisible, query]);
+
+  const commit = (next) => { if (value === undefined) setInner(next); onChange && onChange(next); };
+  const toggleOpt = (o) => { if (o.disabled) return; commit(current.includes(o.value) ? current.filter(x => x !== o.value) : [...current, o.value]); };
+  const remove = (v) => commit(current.filter(x => x !== v));
+  const selectAll = () => commit([...new Set([...current, ...flatVisible.map(o => o.value)])]);
+
+  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-listpicker" ref={rootRef}>
+      <div className={`aa-listpicker-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>
+        {current.length ? current.map(v => (
+          <span key={v} className="aa-listpicker-tag">{labelMap[v] || v}<span className="x" onClick={(e) => { e.stopPropagation(); remove(v); }}>×</span></span>
+        )) : <span className="aa-listpicker-placeholder">{placeholder}</span>}
+        <span className="aa-listpicker-caret">▾</span>
+      </div>
+
+      {open && (
+        <div className="aa-listpicker-panel">
+          {filterable && (
+            <div className="aa-listpicker-search">
+              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索" />
+            </div>
+          )}
+          <div className="aa-listpicker-selectall" onClick={selectAll}>全选</div>
+          {visibleGroups.map((g, gi) => (
+            <div key={gi}>
+              {g.label && <div className="aa-listpicker-group-label">{g.label}</div>}
+              {g.children.map(o => (
+                <div
+                  key={o.value}
+                  className={`aa-listpicker-option${current.includes(o.value) ? ' is-checked' : ''}${o.disabled ? ' is-disabled' : ''}`}
+                  onClick={() => toggleOpt(o)}
+                >
+                  <span className="box">{current.includes(o.value) ? '✓' : ''}</span>{o.label}
+                </div>
+              ))}
+            </div>
+          ))}
+          {!flatVisible.length && <div className="aa-listpicker-empty">无匹配项</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import ListPicker from './ListPicker';
+const options = [{ label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }] }];
+<ListPicker options={options} defaultValue={['vue']} onChange={setKeys} />
+*/