卡片 foot 的空白处点击透传为选择

foot 属于卡片，点了没反应像是卡片坏了。延迟按钮 stop 掉冒泡，测延迟
不会连带换线；禁用的卡片照样不可点，光标跟着语义走。

web/components/OutboundCard.vue

@@ -8,7 +8,7 @@
 import IconFlash from '~icons/ri/flashlight-line'
 import IconLoad from '~icons/ri/loader-4-line'
 
-defineProps<{
+const props = defineProps<{
   name: string
   /** 第二行。策略组显示「类型(当前选中)」，线路显示协议 */
   sub: string
@@ -36,6 +36,14 @@ defineProps<{
 
 const emit = defineEmits<{ pick: []; test: [] }>()
 
+/**
+ * foot 的空白处也算选择。它属于卡片，点了没反应会让人以为卡片坏了；
+ * 延迟按钮自己 stop 掉冒泡，测延迟不会连带换线。
+ */
+function pickFromFoot() {
+  if (!props.disabledReason) emit('pick')
+}
+
 function delayClass(ms: number | null): string {
   if (ms === null) return ''
   if (ms < 200) return 'd-ok'
@@ -69,14 +77,14 @@ function delayClass(ms: number | null): string {
     </button>
 
     <!-- 没内容就不渲染：空的 foot 会盖在卡片下缘，挡住主按钮的点击 -->
-    <div v-if="testable || pending" class="foot">
+    <div v-if="testable || pending" class="foot" @click="pickFromFoot">
       <button
         v-if="testable"
         type="button"
         :class="['delay', delayClass(delay)]"
         :disabled="testing"
         :title="delay === null ? '测试延迟' : '重新测试'"
-        @click="emit('test')"
+        @click.stop="emit('test')"
       >
         <IconLoad v-if="testing" class="spin" />
         <template v-else-if="delay !== null">{{ delay }} ms</template>
@@ -200,6 +208,11 @@ function delayClass(ms: number | null): string {
   padding: 0 var(--s-3) var(--s-2);
 }
 
+/* 空白处的点击是选择，光标也照选择的样子给 */
+.card:not(.is-off) .foot {
+  cursor: pointer;
+}
+
 .delay {
   display: flex;
   align-items: center;