im0o
a4d08892f7
上半部分收敛成一条规则：草稿和已保存一致时显示内核现状；不一致时显示 按草稿保存后的样子，将移除的画删除线、新增的虚线描边，即将被移除的当前 选中用危险色警示。点击语义只看卡片：现在就存在的成员点了立刻生效，保存 后才加入的点了是预选，保存成功后再作为运行时动作选上。预览的集合运算在 web/member-preview.ts，组件里只留接线。 其余：订阅选择器重写成可搜索多选（原平铺标签订阅一多就是一面墙）；删除 入站换成页面内确认对话框；列表右列解析到最终出口并标注链式；「高级配置」 更名「配置」；表单重置改按内容比较（按引用的话任何一次运行时刷新都会冲掉 未保存的草稿，watch 传返回数组的 getter 同样触发这个问题）；保存后先刷 运行时再换配置数据，避免卡片区闪空。
81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 危险动作的二次确认。
|
|
*
|
|
* 原生 <dialog>，焦点捕获、Esc 关闭、背景遮罩都是浏览器自带的（同 InboundForm）。
|
|
* 不用 window.confirm 是因为它的样式游离在页面之外，按钮文案也固定是「确定」，
|
|
* 对不上具体要做的动作。打开时焦点落在「取消」上，回车不会误删。
|
|
*/
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
open: boolean
|
|
message: string
|
|
/** 确认按钮上的动词，比如「删除」 */
|
|
action: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{ close: []; confirm: [] }>()
|
|
|
|
const dialog = ref<HTMLDialogElement | null>(null)
|
|
watch(
|
|
() => props.open,
|
|
(open) => {
|
|
if (open) dialog.value?.showModal()
|
|
else dialog.value?.close()
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
|
|
<p class="msg">{{ message }}</p>
|
|
<footer class="acts">
|
|
<button type="button" class="btn" @click="emit('close')">取消</button>
|
|
<button type="button" class="btn go" @click="emit('confirm')">{{ action }}</button>
|
|
</footer>
|
|
</dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dlg {
|
|
width: min(400px, calc(100vw - 2 * var(--s-5)));
|
|
padding: var(--s-5);
|
|
border: 1px solid var(--c-border-strong);
|
|
border-radius: var(--r-lg);
|
|
background: var(--c-surface);
|
|
color: var(--c-text);
|
|
}
|
|
|
|
.dlg::backdrop {
|
|
background: rgb(0 0 0 / 0.45);
|
|
}
|
|
|
|
.msg {
|
|
line-height: var(--line);
|
|
}
|
|
|
|
.acts {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--s-2);
|
|
margin-top: var(--s-5);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--s-2) var(--s-4);
|
|
border: 1px solid var(--c-border-strong);
|
|
border-radius: var(--r-sm);
|
|
background: var(--c-surface);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 确认键用危险色实底：这个对话框只出现在删除这类不可逆动作前 */
|
|
.go {
|
|
border-color: transparent;
|
|
background: var(--c-danger);
|
|
color: var(--c-bg);
|
|
font-weight: 500;
|
|
}
|
|
</style>
|