iter(g132): 新增 @提及输入 mentions

This commit is contained in:
HIsheR
2026-10-26 15:22:59 +08:00
parent eac02f0c80
commit 9d0c195beb
12 changed files with 382 additions and 10 deletions
+30
View File
@@ -46,6 +46,7 @@ import {
watermark,
menu,
modal,
mentions,
multiSelect,
pagination,
popconfirm,
@@ -248,6 +249,15 @@ const range = signal('week');
// —— 时间线:false 时末尾显示「进行中」虚线节点,true 表示流程已结束 ——
const flowDone = signal(false);
// —— @提及:受控文本信号,选中的人写进评论正文 ——
const comment = signal('');
const teamMembers = [
{ name: 'zhangsan', label: '张三', description: '前端 · 组件库', keywords: ['zs', '1001'] },
{ name: 'lisi', label: '李四', description: '后端 · 订单服务', keywords: ['ls', '1002'] },
{ name: 'wangwu', label: '王五', description: '设计 · 交互', keywords: ['ww', '1003'] },
{ name: 'zhaoliu', label: '赵六', description: 'QA · 回归', keywords: ['zl', '1004'] },
];
const content = h(
'div',
{ class: 'page' },
@@ -1306,6 +1316,26 @@ const content = h(
card({ title: zone }, typography({ content: '健康检查通过', type: 'success', variant: 'paragraph' }))),
),
),
section(
'sec-mentions',
'@提及输入',
'mentions 在 textarea 里键入 @ 就弹候选:↑↓ 环形移动、Enter/Tab 选中、Esc 只收这一层弹层;选中后按光标位置替换 @片段并写回 value 信号。输入拼音或工号也能命中(keywords 只参与过滤不显示)。',
grid({ min: '320px' },
card({ title: '评论框' },
mentions({
items: teamMembers,
value: comment,
rows: 3,
placeholder: '输入 @ 叫人来评审……',
onSelect: (item) => toast.info(`已提及 ${item.label}`),
}),
),
card({ title: '当前正文' },
h('div', { class: 'out' }, () => comment() || '(还没写)'),
typography({ variant: 'paragraph', type: 'secondary', content: '值由 value 信号驱动,外部改信号输入框同步;这里就是同一个信号。' }),
),
),
),
section(
'sec-floatbutton',
'悬浮操作按钮',