im0o
a4d08892f7
上半部分收敛成一条规则：草稿和已保存一致时显示内核现状；不一致时显示 按草稿保存后的样子，将移除的画删除线、新增的虚线描边，即将被移除的当前 选中用危险色警示。点击语义只看卡片：现在就存在的成员点了立刻生效，保存 后才加入的点了是预选，保存成功后再作为运行时动作选上。预览的集合运算在 web/member-preview.ts，组件里只留接线。 其余：订阅选择器重写成可搜索多选（原平铺标签订阅一多就是一面墙）；删除 入站换成页面内确认对话框；列表右列解析到最终出口并标注链式；「高级配置」 更名「配置」；表单重置改按内容比较（按引用的话任何一次运行时刷新都会冲掉 未保存的草稿，watch 传返回数组的 getter 同样触发这个问题）；保存后先刷 运行时再换配置数据，避免卡片区闪空。
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
/**
|
|
* 成员卡片的「保存后会怎样」预览。
|
|
*
|
|
* 配置草稿和已保存内容不一致时，卡片区不再显示内核现状，而是显示按草稿保存后组里
|
|
* 会有谁：留下的照常、将移除的标出来、新增的追加在后面。放在组件外面是为了让
|
|
* bun test 够得着——这是纯集合运算，写进 computed 就没人测了。
|
|
*/
|
|
import type { ProxyInfo } from './api'
|
|
|
|
export interface MemberPreview {
|
|
name: string
|
|
info: ProxyInfo | undefined
|
|
/** 现在是成员，保存后不再是 */
|
|
removed: boolean
|
|
/** 现在不是成员，保存后才加入 */
|
|
added: boolean
|
|
}
|
|
|
|
export function mergeMemberPreview(
|
|
current: Array<{ name: string; info: ProxyInfo | undefined }>,
|
|
future: string[],
|
|
lookup: (name: string) => ProxyInfo | undefined,
|
|
): MemberPreview[] {
|
|
const futureSet = new Set(future)
|
|
const currentNames = new Set(current.map((item) => item.name))
|
|
return [
|
|
...current.map((item) => ({
|
|
name: item.name,
|
|
info: item.info,
|
|
removed: !futureSet.has(item.name),
|
|
added: false,
|
|
})),
|
|
...future
|
|
.filter((name) => !currentNames.has(name))
|
|
.map((name) => ({ name, info: lookup(name), removed: false, added: true })),
|
|
]
|
|
}
|