im0o/mihomo-patchbay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

订阅列表可以调顺序

Browse Source 
每行末尾两个箭头，鼠标划过那一行才显现。proxy-providers 是映射，顺序只
影响界面呈现，内核不看；交换的是两个用户订阅在映射里的位置，中间夹着的
链式副本留在原地——它们不在列表上，跟着挪只会把 diff 撑大。

顺序写在配置文件里，所以走保存链路，不是运行时动作。
This commit is contained in:
im0o
2026-08-14 14:06:11 +08:00
parent 23aa28fbea
commit 0f0ac3c4b7
4 changed files with 175 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/providers.test.ts
+43
View File
@@ -5,6 +5,7 @@ import {
addFileSubscription,
addSubscription,
listSubscriptions,
moveSubscription,
providerNames,
removeSubscription,
renameSubscription,
@@ -280,6 +281,48 @@ describe('删除前的引用检查', () => {
})
})
describe('调整订阅顺序', () => {
/** 三个用户订阅，外加一份接在中间的订阅副本。 */
function three(): ConfigObject {
let data: ConfigObject = {}
for (const name of ['A', 'B', 'C']) data = addSubscription(data, name, `https://${name}.example`)
return data
}
it('上移和下移交换相邻两个订阅', () => {
expect(listSubscriptions(moveSubscription(three(), 'B', -1)).map((s) => s.name)).toEqual([
'B',
'A',
'C',
])
expect(listSubscriptions(moveSubscription(three(), 'B', 1)).map((s) => s.name)).toEqual([
'A',
'C',
'B',
])
})
it('到头了原样返回，配置对象不变', () => {
const data = three()
expect(moveSubscription(data, 'A', -1)).toBe(data)
expect(moveSubscription(data, 'C', 1)).toBe(data)
expect(moveSubscription(data, '不存在', 1)).toBe(data)
})
it('夹在中间的订阅副本留在原地', () => {
const withCopy = applySetup(
{ ...three(), listeners: [{ name: 'test1', type: 'mixed', port: 7778 }] },
'test1',
{ proxy: { sources: ['B'], filter: null }, chain: { sources: ['B'], filter: null } },
)
const copy = chainProviderName('test1', 'B')
const before = Object.keys(withCopy['proxy-providers'] as ConfigObject).indexOf(copy)
const after = moveSubscription(withCopy, 'A', 1)
expect(listSubscriptions(after).map((s) => s.name)).toEqual(['B', 'A', 'C'])
expect(Object.keys(after['proxy-providers'] as ConfigObject).indexOf(copy)).toBe(before)
})
})
describe('缓存路径撞名', () => {
it('名字只差符号时净化成同一个路径，能认出来', () => {
const data = addSubscription({}, '订阅 A', 'https://a.example/sub')
shared/providers.ts
+30
View File
@@ -238,6 +238,36 @@ export function renameSubscription(
return next
}
/**
* 把一个订阅在列表里上移或下移一位。
*
* 顺序只是呈现顺序，内核不看 `proxy-providers` 里条目的先后。交换的是两个用户订阅在
* 映射里的位置，中间夹着的副本留在原地——它们不在列表上，跟着挪只会把 diff 撑大。
* 已经在头（尾）还要上（下）移时原样返回，调用方据此不发起保存。
*/
export function moveSubscription(
data: ConfigObject,
name: string,
delta: -1 | 1,
): ConfigObject {
const entries = Object.entries(providersOf(data))
const keys = entries.map(([key]) => key)
const mine = keys.filter((key) => !isGenerated(key))
const at = mine.indexOf(name)
const target = mine[at + delta]
if (at < 0 || target === undefined) return data
const from = keys.indexOf(name)
const onto = keys.indexOf(target)
const order = [...entries]
order[from] = entries[onto]!
order[onto] = entries[from]!
const next = { ...data }
next['proxy-providers'] = Object.fromEntries(order)
return next
}
/** 删除一个订阅。删到最后一个时把整个键去掉，不在文件里留空映射。 */
export function removeSubscription(data: ConfigObject, name: string): ConfigObject {
const providers = { ...providersOf(data) }
web/components/ProviderList.vue
+85 -18
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
/**
* 订阅列表。每行一个订阅：名字、当前线路数、上次更新时间。
* 订阅列表。每行一个订阅：名字、当前线路数、上次更新时间，末尾是调顺序的两个箭头。
*
* 只管显示和选中，不碰任何数据。
* 只管显示、选中和「往哪边挪一位」，不碰任何数据。
*/
import IconUp from '~icons/ri/arrow-up-line'
import IconDown from '~icons/ri/arrow-down-line'
defineProps<{
/** 一行要显示的东西，由页面按配置和运行时数据拼好 */
@@ -14,9 +16,14 @@ defineProps<{
/** 上次拉取成功的时刻。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 {
@@ -26,12 +33,12 @@ function formatUpdated(at: Date): string {
<template>
<ol class="rows">
<li v-for="row in rows" :key="row.name">
<button
type="button"
:class="['line', selected === row.name && 'is-on']"
@click="selected = row.name"
>
<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>
@@ -39,6 +46,24 @@ function formatUpdated(at: Date): string {
</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>
@@ -58,27 +83,34 @@ function formatUpdated(at: Date): string {
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 {
width: 100%;
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-4);
padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4);
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.line:hover {
background: var(--c-surface-sunken);
}
.line.is-on {
background: var(--c-accent-soft);
}
.name {
min-width: 0;
overflow: hidden;
@@ -93,4 +125,39 @@ function formatUpdated(at: Date): string {
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>
web/views/ConfigPage.vue
+17 -1
View File
@@ -13,6 +13,7 @@ import {
addFileSubscription,
addSubscription,
listSubscriptions,
moveSubscription,
providerNames,
removeSubscription,
renameSubscription,
@@ -272,6 +273,16 @@ async function check() {
}
}
/** 把一个订阅在列表里挪一位。顺序在配置文件里，所以要走 commit()。 */
async function move(name: string, delta: -1 | 1) {
if (saving.value) return
const before = clone()
const next = moveSubscription(before, name, delta)
// 到头了 moveSubscription 原样返回，这时不该发起一次什么都没改的保存
if (next === before) return
await commit(next, '顺序已保存')
}
const refreshingAll = ref(false)
/** 挨个让内核重新拉取所有订阅。失败的点名，成功的不逐个报。 */
@@ -326,7 +337,12 @@ async function refreshAll() {
</header>
<div class="split">
<ProviderList v-model:selected="selectedName" :rows="rows" />
<ProviderList
v-model:selected="selectedName"
:rows="rows"
:saving="saving"
@move="move"
/>
<SubscriptionDetail
v-if="selected"