本地开发换成真订阅；闪电挪到卡片上；忙碌状态改成按卡片
占位线路删了。它们指向 127.0.0.1:1080，从来没测通过，而 URLTest 只在你选的那条 「对测试地址是活的」时才认账（urltest.go:106-111）——所以点了立刻被切回去， 一个正常行为看起来像 bug。现在本地内核直接用真订阅，通过隧道拉。 订阅地址带访问令牌，不能进 git：dev/config.yaml 变成模板，dev:reset 从 .env 取值生成 dev/home/config.yaml。顺带确认内核认 base64 分享链接格式（provider.go:384-390 回退到 ConvertsV2Ray），所以 Sub-Store 的输出直接能用。 闪电从组标题挪到每张卡的左下角，也就是延迟显示的位置：测过显示毫秒数，没测过显示闪电， 两种都能点，点了测这一条。忙碌状态从「禁用整个界面」改成只有正在提交的那张卡显示虚线边框。
This commit is contained in:
im0o
@@ -0,0 +1,196 @@
|
||||
<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
|
||||
}>()
|
||||
|
||||
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', 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 {
|
||||
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.is-on {
|
||||
border-color: var(--c-accent);
|
||||
background: var(--c-accent-soft);
|
||||
}
|
||||
|
||||
.card:not(.is-off):hover {
|
||||
border-color: var(--c-accent);
|
||||
}
|
||||
|
||||
.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(--c-accent-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(--c-accent-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>
|
||||
Reference in New Issue
Block a user