路由页一轮交互细化:草稿预览、预选、若干修正
上半部分收敛成一条规则:草稿和已保存一致时显示内核现状;不一致时显示 按草稿保存后的样子,将移除的画删除线、新增的虚线描边,即将被移除的当前 选中用危险色警示。点击语义只看卡片:现在就存在的成员点了立刻生效,保存 后才加入的点了是预选,保存成功后再作为运行时动作选上。预览的集合运算在 web/member-preview.ts,组件里只留接线。 其余:订阅选择器重写成可搜索多选(原平铺标签订阅一多就是一面墙);删除 入站换成页面内确认对话框;列表右列解析到最终出口并标注链式;「高级配置」 更名「配置」;表单重置改按内容比较(按引用的话任何一次运行时刷新都会冲掉 未保存的草稿,watch 传返回数组的 getter 同样触发这个问题);保存后先刷 运行时再换配置数据,避免卡片区闪空。
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user