feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
This commit is contained in:
aurora-admin
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · Mention</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="./Mention.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="aa-page">
|
||||
<h2 class="aa-h2">Mention @ 提及</h2>
|
||||
<p class="aa-desc">输入框输入 @ 触发用户面板，选择后以标签形式插入，可删除。</p>
|
||||
|
||||
<div class="aa-demo">
|
||||
<div class="aa-mention" id="mention">
|
||||
<div class="aa-mention-area">
|
||||
<textarea class="aa-mention-input" id="input" rows="3" placeholder="输入 @ 提及同事…"></textarea>
|
||||
<div class="aa-mention-panel" id="panel" style="display:none"></div>
|
||||
</div>
|
||||
<div class="aa-mention-chips" id="chips"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var users = [
|
||||
{ name: '王伟', dept: '华东大区' },
|
||||
{ name: '李娜', dept: '华南大区' },
|
||||
{ name: '张强', dept: '华北大区' },
|
||||
{ name: '陈静', dept: '研发中心' },
|
||||
{ name: '刘洋', dept: '市场部' }
|
||||
];
|
||||
var input = document.getElementById('input');
|
||||
var panel = document.getElementById('panel');
|
||||
var chips = document.getElementById('chips');
|
||||
var active = -1, mentioned = [];
|
||||
|
||||
function renderPanel() {
|
||||
panel.innerHTML = users.map(function (u, i) {
|
||||
return '<div class="aa-mention-item' + (i === active ? ' is-active' : '') + '" role="option" data-i="' + i + '">' +
|
||||
'<span class="aa-mention-avatar">' + u.name[0] + '</span>' +
|
||||
'<span class="aa-mention-name">' + u.name + '</span>' +
|
||||
'<span class="aa-mention-dept">' + u.dept + '</span></div>';
|
||||
}).join('');
|
||||
}
|
||||
function openPanel() { active = -1; renderPanel(); panel.style.display = 'block'; }
|
||||
function closePanel() { panel.style.display = 'none'; }
|
||||
function insert(name) {
|
||||
var pos = input.selectionStart;
|
||||
var v = input.value;
|
||||
// 找到触发 @ 的位置（当前光标前一个 @ 且其后无空格）
|
||||
var at = v.lastIndexOf('@', pos - 1);
|
||||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1]))) {
|
||||
input.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);
|
||||
} else {
|
||||
input.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);
|
||||
}
|
||||
if (mentioned.indexOf(name) < 0) mentioned.push(name);
|
||||
renderChips();
|
||||
closePanel();
|
||||
input.focus();
|
||||
}
|
||||
function renderChips() {
|
||||
chips.innerHTML = mentioned.map(function (n) {
|
||||
return '<span class="aa-mention-chip">@' + n + ' <b data-n="' + n + '">×</b></span>';
|
||||
}).join('');
|
||||
}
|
||||
input.addEventListener('input', function () {
|
||||
var pos = input.selectionStart;
|
||||
var v = input.value;
|
||||
var at = v.lastIndexOf('@', pos - 1);
|
||||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) openPanel();
|
||||
else closePanel();
|
||||
});
|
||||
input.addEventListener('keydown', function (e) {
|
||||
if (panel.style.display === 'none') return;
|
||||
if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(users.length - 1, active + 1); renderPanel(); }
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(0, active - 1); renderPanel(); }
|
||||
else if (e.key === 'Enter' && active >= 0) { e.preventDefault(); insert(users[active].name); }
|
||||
else if (e.key === 'Escape') closePanel();
|
||||
});
|
||||
panel.addEventListener('click', function (e) {
|
||||
var it = e.target.closest('.aa-mention-item');
|
||||
if (it) insert(users[parseInt(it.dataset.i, 10)].name);
|
||||
});
|
||||
chips.addEventListener('click', function (e) {
|
||||
var b = e.target.closest('[data-n]');
|
||||
if (b) { mentioned = mentioned.filter(function (n) { return n !== b.dataset.n; }); renderChips(); }
|
||||
});
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!document.getElementById('mention').contains(e.target)) closePanel();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="aa-mention" v-click-outside="close">
|
||||
<div class="aa-mention-area">
|
||||
<textarea
|
||||
ref="input"
|
||||
class="aa-mention-input"
|
||||
:value="value"
|
||||
rows="3"
|
||||
placeholder="输入 @ 提及同事…"
|
||||
@input="onInput"
|
||||
@keydown.down.prevent="move(1)"
|
||||
@keydown.up.prevent="move(-1)"
|
||||
@keydown.enter.prevent="enter"
|
||||
@keydown.esc="close"
|
||||
></textarea>
|
||||
<div v-show="open" class="aa-mention-panel">
|
||||
<div
|
||||
v-for="(u, i) in users"
|
||||
:key="u.name"
|
||||
class="aa-mention-item"
|
||||
:class="{ 'is-active': i === active }"
|
||||
@click="insert(u.name)"
|
||||
>
|
||||
<span class="aa-mention-avatar">{{ u.name[0] }}</span>
|
||||
<span class="aa-mention-name">{{ u.name }}</span>
|
||||
<span class="aa-mention-dept">{{ u.dept }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa-mention-chips">
|
||||
<span v-for="n in mentioned" :key="n" class="aa-mention-chip">@{{ n }} <b @click="remove(n)">×</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaMention',
|
||||
directives: {
|
||||
clickOutside: { bind(el, b) { el.__d = (e) => { if (!el.contains(e.target)) b.value(); }; document.addEventListener('click', el.__d); }, unbind(el) { document.removeEventListener('click', el.__d); } }
|
||||
},
|
||||
props: {
|
||||
value: { type: String, default: '' },
|
||||
users: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },
|
||||
{ name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return { open: false, active: -1, mentioned: [] };
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
var pos = e.target.selectionStart, v = e.target.value;
|
||||
this.$emit('input', v);
|
||||
var at = v.lastIndexOf('@', pos - 1);
|
||||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) { this.active = -1; this.open = true; }
|
||||
else this.open = false;
|
||||
},
|
||||
move(d) { this.active = Math.max(-1, Math.min(this.users.length - 1, this.active + d)); },
|
||||
enter() { if (this.active >= 0) this.insert(this.users[this.active].name); },
|
||||
insert(name) {
|
||||
var el = this.$refs.input, pos = el.selectionStart, v = el.value;
|
||||
var 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 (this.mentioned.indexOf(name) < 0) this.mentioned.push(name);
|
||||
this.$emit('input', el.value);
|
||||
this.close();
|
||||
el.focus();
|
||||
},
|
||||
remove(n) { this.mentioned = this.mentioned.filter((x) => x !== n); },
|
||||
close() { this.open = false; }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./Mention.css"></style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="aa-mention" ref="root">
|
||||
<div class="aa-mention-area">
|
||||
<textarea
|
||||
ref="input"
|
||||
class="aa-mention-input"
|
||||
:value="modelValue"
|
||||
rows="3"
|
||||
placeholder="输入 @ 提及同事…"
|
||||
@input="onInput"
|
||||
@keydown.down.prevent="move(1)"
|
||||
@keydown.up.prevent="move(-1)"
|
||||
@keydown.enter.prevent="enter"
|
||||
@keydown.esc="close"
|
||||
></textarea>
|
||||
<div v-show="open" class="aa-mention-panel">
|
||||
<div
|
||||
v-for="(u, i) in users"
|
||||
:key="u.name"
|
||||
class="aa-mention-item"
|
||||
:class="{ 'is-active': i === active }"
|
||||
@click="insert(u.name)"
|
||||
>
|
||||
<span class="aa-mention-avatar">{{ u.name[0] }}</span>
|
||||
<span class="aa-mention-name">{{ u.name }}</span>
|
||||
<span class="aa-mention-dept">{{ u.dept }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa-mention-chips">
|
||||
<span v-for="n in mentioned" :key="n" class="aa-mention-chip">@{{ n }} <b @click="remove(n)">×</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: String, default: '' },
|
||||
users: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },
|
||||
{ name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }
|
||||
]
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const root = ref(null);
|
||||
const input = ref(null);
|
||||
const open = ref(false);
|
||||
const active = ref(-1);
|
||||
const mentioned = ref([]);
|
||||
|
||||
function onInput(e) {
|
||||
const pos = e.target.selectionStart, v = e.target.value;
|
||||
emit('update:modelValue', v);
|
||||
const at = v.lastIndexOf('@', pos - 1);
|
||||
if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) { active.value = -1; open.value = true; }
|
||||
else open.value = false;
|
||||
}
|
||||
function move(d) { active.value = Math.max(-1, Math.min(props.users.length - 1, active.value + d)); }
|
||||
function enter() { if (active.value >= 0) insert(props.users[active.value].name); }
|
||||
function insert(name) {
|
||||
const el = input.value, 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.value.indexOf(name) < 0) mentioned.value.push(name);
|
||||
emit('update:modelValue', el.value);
|
||||
open.value = false;
|
||||
el.focus();
|
||||
}
|
||||
function remove(n) { mentioned.value = mentioned.value.filter((x) => x !== n); }
|
||||
function close() { open.value = false; }
|
||||
function onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }
|
||||
onMounted(() => document.addEventListener('click', onDoc));
|
||||
onBeforeUnmount(() => document.removeEventListener('click', onDoc));
|
||||
</script>
|
||||
|
||||
<style src="./Mention.css"></style>
|
||||
Reference in New Issue
Block a user