mihomo-patchbay/web/components/ProviderList.vue

<script setup lang="ts">
/**
 * 订阅列表。每行一个订阅：名字、当前线路数、上次更新时间，末尾是调顺序的两个箭头。
 *
 * 只管显示、选中和「往哪边挪一位」，不碰任何数据。
 */
import IconUp from '~icons/ri/arrow-up-line'
import IconDown from '~icons/ri/arrow-down-line'

defineProps<{
  /** 一行要显示的东西，由页面按配置和运行时数据拼好 */
  rows: Array<{
    name: string
    /** 当前有多少条线路。null 表示内核没给数据（没连接，或这个订阅还没拉取过） */
    lines: number | null
    /** 上次拉取成功的时刻。null 表示不知道或从没拉取过 */
    updated: Date | null
  }>
  /** 配置正在保存。调顺序要写配置文件，保存期间不能再点 */
  saving: boolean
}>()
const selected = defineModel<string | null>('selected', { required: true })

/** 把这个订阅在列表里挪一位。写配置文件，由页面走保存链路。 */
const emit = defineEmits<{ move: [name: string, delta: -1 | 1] }>()

const pad = (n: number) => String(n).padStart(2, '0')

function formatUpdated(at: Date): string {
  return `${pad(at.getMonth() + 1)}-${pad(at.getDate())} ${pad(at.getHours())}:${pad(at.getMinutes())}`
}
</script>

<template>
  <ol class="rows">
    <li
      v-for="(row, i) in rows"
      :key="row.name"
      :class="['row', selected === row.name && 'is-on']"
    >
      <button type="button" class="line" @click="selected = row.name">
        <span class="name">{{ row.name }}</span>
        <span class="lines mono">
          <template v-if="row.lines !== null">{{ row.lines }} 条</template>
          <template v-else>—</template>
        </span>
        <span class="updated mono">{{ row.updated ? formatUpdated(row.updated) : '—' }}</span>
      </button>
      <span class="acts">
        <button
          type="button"
          title="上移"
          :disabled="saving || i === 0"
          @click="emit('move', row.name, -1)"
        >
          <IconUp />
        </button>
        <button
          type="button"
          title="下移"
          :disabled="saving || i === rows.length - 1"
          @click="emit('move', row.name, 1)"
        >
          <IconDown />
        </button>
      </span>
    </li>
  </ol>
</template>

<style scoped>
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.rows li + li {
  border-top: 1px solid var(--c-border);
}

.row {
  display: flex;
  align-items: center;
  padding-right: var(--s-3);
}

.row:hover {
  background: var(--c-surface-sunken);
}

.row.is-on {
  background: var(--c-accent-soft);
}

.line {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 6.5rem;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lines,
.updated {
  text-align: right;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-soft);
}

/* 平时不显示：调顺序不是常用动作，每行常驻两个箭头只是噪声。
   隐藏用 opacity 而不是 display，位置一直占着，鼠标划过时右边一列才不会跳 */
.acts {
  flex: none;
  display: inline-flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.row:hover .acts,
.acts:focus-within {
  opacity: 1;
}

.acts button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-text-faint);
  cursor: pointer;
}
.acts button:hover:not(:disabled) {
  background: var(--c-surface);
  color: var(--c-text);
}
.acts button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
</style>