mihomo-patchbay/web/components/OutboundCard.vue

<script setup lang="ts">
/**
 * 一个出站选项：策略组、线路，或者 RULE/DIRECT 这类内置出站。
 *
 * 左下角那格是延迟：测过就显示毫秒数，没测过显示一个闪电。两种情况都能点，
 * 点了就测这一条——「没数字」和「想重测」需要的是同一个动作，没必要做成两个控件。
 */
import IconFlash from '~icons/ri/flashlight-line'
import IconLoad from '~icons/ri/loader-4-line'

defineProps<{
  name: string
  /** 第二行。策略组显示「类型(当前选中)」，线路显示协议 */
  sub: string
  /** 最近一次延迟，毫秒。没测过或测失败是 null */
  delay: number | null
  selected: boolean
  /** 不可选时的原因。有值就说明这张卡点不了 */
  disabledReason?: string
  /** 这张卡的改动正在提交 */
  pending?: boolean
  /** 这条线路正在测延迟 */
  testing?: boolean
  /** 能不能测延迟。内置出站没得测 */
  testable?: boolean
  /**
   * 选中态用哪一组颜色。同一屏上有两种「当前选中」，一种是流量最后从哪出去，
   * 一种是流量先经过哪，不区分颜色就分不清哪张卡属于哪一件事。
   */
  tone?: 'proxy' | 'chain'
}>()

const emit = defineEmits<{ pick: []; test: [] }>()

function delayClass(ms: number | null): string {
  if (ms === null) return ''
  if (ms < 200) return 'd-ok'
  if (ms < 500) return 'd-warn'
  return 'd-bad'
}
</script>

<template>
  <div
    :class="[
      'card',
      tone === 'chain' && 'tone-chain',
      selected && 'is-on',
      disabledReason && 'is-off',
      pending && 'is-pending',
    ]"
  >
    <button
      type="button"
      class="hit"
      :disabled="!!disabledReason"
      :title="disabledReason"
      @click="emit('pick')"
    >
      <span class="name">{{ name }}</span>
      <span class="sub">{{ sub || '—' }}</span>
    </button>

    <div class="foot">
      <button
        v-if="testable"
        type="button"
        :class="['delay', delayClass(delay)]"
        :disabled="testing"
        :title="delay === null ? '测试延迟' : '重新测试'"
        @click="emit('test')"
      >
        <IconLoad v-if="testing" class="spin" />
        <template v-else-if="delay !== null">{{ delay }} ms</template>
        <IconFlash v-else />
      </button>
      <span v-else class="delay is-blank"></span>

      <IconLoad v-if="pending" class="spin pend" />
    </div>
  </div>
</template>

<style scoped>
.card {
  --tone: var(--c-accent);
  --tone-soft: var(--c-accent-soft);
  --tone-text: var(--c-accent-text);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunken);
}

.card.tone-chain {
  --tone: var(--c-chain);
  --tone-soft: var(--c-chain-soft);
  --tone-text: var(--c-chain-text);
}

.card.is-on {
  border-color: var(--tone);
  background: var(--tone-soft);
}

.card:not(.is-off):hover {
  border-color: var(--tone);
}

.card.is-off {
  opacity: 0.5;
}

.card.is-pending {
  border-style: dashed;
}

.hit {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3) var(--s-3) var(--s-1);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.hit:disabled {
  cursor: not-allowed;
}

.name {
  font-size: var(--t-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card.is-on .name {
  color: var(--tone-text);
}

.sub {
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-2);
}

.delay {
  display: flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--s-1);
  margin-left: calc(-1 * var(--s-1));
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-faint);
  cursor: pointer;
}

.delay:hover:not(:disabled) {
  background: var(--c-surface);
  color: var(--tone-text);
}

.delay:disabled {
  cursor: progress;
}

.delay.is-blank {
  cursor: default;
}

.d-ok {
  color: var(--c-ok);
}
.d-warn {
  color: var(--c-warn);
}
.d-bad {
  color: var(--c-danger);
}

.spin {
  animation: spin 0.9s linear infinite;
}

.pend {
  color: var(--c-text-faint);
  width: 14px;
  height: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>