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,78 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './Mention.css';
+
+const USERS = [
+  { name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },
+  { name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }
+];
+
+export default function Mention({ modelValue = '', users = USERS, onChange }) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const [mentioned, setMentioned] = useState([]);
+  const inputRef = useRef(null);
+  const root = useRef(null);
+
+  useEffect(() => {
+    const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('click', onDoc);
+    return () => document.removeEventListener('click', onDoc);
+  }, []);
+
+  const onInput = (e) => {
+    const pos = e.target.selectionStart, v = e.target.value;
+    if (onChange) onChange(v);
+    const at = v.lastIndexOf('@', pos - 1);
+    if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) { setActive(-1); setOpen(true); }
+    else setOpen(false);
+  };
+  const move = (d) => setActive((a) => Math.max(-1, Math.min(users.length - 1, a + d)));
+  const insert = (name) => {
+    const el = inputRef.current, pos = el.selectionStart, v = el.value;
+    const at = v.lastIndexOf('@', pos - 1);
+    if (at >= 0 && (at === 0 || /\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);
+    else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);
+    if (mentioned.indexOf(name) < 0) setMentioned((m) => [...m, name]);
+    if (onChange) onChange(el.value);
+    setOpen(false);
+    el.focus();
+  };
+  const remove = (n) => setMentioned((m) => m.filter((x) => x !== n));
+
+  return (
+    <div className="aa-mention" ref={root}>
+      <div className="aa-mention-area">
+        <textarea
+          ref={inputRef}
+          className="aa-mention-input"
+          value={modelValue}
+          rows={3}
+          placeholder="输入 @ 提及同事…"
+          onChange={onInput}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
+            else if (e.key === 'Enter') { e.preventDefault(); if (active >= 0) insert(users[active].name); }
+            else if (e.key === 'Escape') setOpen(false);
+          }}
+        />
+        {open && (
+          <div className="aa-mention-panel">
+            {users.map((u, i) => (
+              <div key={u.name} className={'aa-mention-item' + (i === active ? ' is-active' : '')} onClick={() => insert(u.name)}>
+                <span className="aa-mention-avatar">{u.name[0]}</span>
+                <span className="aa-mention-name">{u.name}</span>
+                <span className="aa-mention-dept">{u.dept}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="aa-mention-chips">
+        {mentioned.map((n) => (
+          <span key={n} className="aa-mention-chip">@{n} <b onClick={() => remove(n)}>×</b></span>
+        ))}
+      </div>
+    </div>
+  );
+}