订阅列表可以调顺序

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

顺序写在配置文件里，所以走保存链路，不是运行时动作。

web/components/ProviderList.vue

@@ -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>