路由页一轮交互细化:草稿预览、预选、若干修正

上半部分收敛成一条规则:草稿和已保存一致时显示内核现状;不一致时显示
按草稿保存后的样子,将移除的画删除线、新增的虚线描边,即将被移除的当前
选中用危险色警示。点击语义只看卡片:现在就存在的成员点了立刻生效,保存
后才加入的点了是预选,保存成功后再作为运行时动作选上。预览的集合运算在
web/member-preview.ts,组件里只留接线。

其余:订阅选择器重写成可搜索多选(原平铺标签订阅一多就是一面墙);删除
入站换成页面内确认对话框;列表右列解析到最终出口并标注链式;「高级配置」
更名「配置」;表单重置改按内容比较(按引用的话任何一次运行时刷新都会冲掉
未保存的草稿,watch 传返回数组的 getter 同样触发这个问题);保存后先刷
运行时再换配置数据,避免卡片区闪空。
This commit is contained in:
2026-08-11 14:39:47 +08:00
parent 6bedce215c
commit a4d08892f7
10 changed files with 658 additions and 132 deletions
+37 -1
View File
@@ -19,6 +19,10 @@ defineProps<{
disabledReason?: string
/** 这张卡的改动正在提交 */
pending?: boolean
/** 草稿预览里保存后才加入的成员 */
draft?: boolean
/** 草稿预览里保存后将移除的成员 */
removed?: boolean
/** 这条线路正在测延迟 */
testing?: boolean
/** 能不能测延迟。内置出站没得测 */
@@ -48,6 +52,9 @@ function delayClass(ms: number | null): string {
selected && 'is-on',
disabledReason && 'is-off',
pending && 'is-pending',
draft && 'is-draft',
removed && 'is-removed',
!testable && !pending && 'no-foot',
]"
>
<button
@@ -61,7 +68,8 @@ function delayClass(ms: number | null): string {
<span class="sub">{{ sub || '—' }}</span>
</button>
<div class="foot">
<!-- 没内容就不渲染:空的 foot 会盖在卡片下缘,挡住主按钮的点击 -->
<div v-if="testable || pending" class="foot">
<button
v-if="testable"
type="button"
@@ -117,8 +125,30 @@ function delayClass(ms: number | null): string {
border-style: dashed;
}
/* 草稿态:虚线区分于实线的现实。将移除的再加删除线,和「只是禁用」分开 */
.card.is-draft,
.card.is-removed {
border-style: dashed;
}
.card.is-removed .name {
text-decoration: line-through;
}
/* 当前选中的线路即将被移除:危险色警示,这是草稿里最该被看见的一张卡 */
.card.is-removed.is-on {
border-color: var(--c-danger);
background: var(--c-danger-soft);
opacity: 1;
}
.card.is-removed.is-on .name {
color: var(--c-danger);
}
.hit {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--s-1);
min-width: 0;
@@ -129,6 +159,12 @@ function delayClass(ms: number | null): string {
cursor: pointer;
}
/* 没有 foot 时主按钮补回它的全部高度(延迟行 20px + 它的下边距),
草稿卡和真实卡等高,网格不跳动,而且整张卡都是点击区 */
.card.no-foot .hit {
padding-bottom: calc(var(--s-1) + 20px + var(--s-2));
}
.hit:disabled {
cursor: not-allowed;
}