feat(admin): country drag-sort + always-available member detail sync

- Country 加 sort_order（默认 0 保持 id 序）；PATCH /countries/sort 批量保存
  顺序（对齐 /tags/sort 模式）；findAll 与公开 /public/countries 均按
  sortOrder 排序
- CountriesView 表格改为可拖拽行列表：拖动松开即全量保存新顺序，失败回滚
- 商品编辑弹窗成员展开面板：同步详情按钮常驻（已同步显示 重新同步详情），
  不再只在未同步态出现
- goods.service.spec 的 FamilyRecomputeService mock 补齐 syncFamilyTags 等
  方法（全量并行时其他套件的扫名归族会把本套件夹具收进族，create/update
  会调用到，mock 缺方法导致偶发 TypeError）
- api 164/164、admin typecheck+22/22+构建全绿

apps/admin/src/views/countries/CountriesView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
+import { Plus, Edit, Delete, Refresh, Search, Rank } from '@element-plus/icons-vue'
 import type {
   Country,
   CreateCountryRequest,
@@ -44,6 +44,38 @@ function handleReset() {
   fetchList()
 }
 
+// ─── 拖拽排序：松开即按新顺序全量保存（sortOrder = 下标） ───
+const dragIndex = ref<number | null>(null)
+const sorting = ref(false)
+
+function onRowDragStart(index: number) {
+  dragIndex.value = index
+}
+
+async function onRowDrop(index: number) {
+  const from = dragIndex.value
+  dragIndex.value = null
+  if (from === null || from === index || sorting.value) return
+  const next = [...list.value]
+  const [moved] = next.splice(from, 1)
+  next.splice(index, 0, moved)
+  list.value = next
+  sorting.value = true
+  try {
+    const updated = await countriesApi.sortCountries(
+      next.map((c, i) => ({ id: String(c.id), sortOrder: i })),
+    )
+    const arr = Array.isArray(updated) ? updated : []
+    if (arr.length) list.value = arr
+    ElMessage.success('排序已保存')
+  } catch {
+    ElMessage.error('排序保存失败')
+    await fetchList()
+  } finally {
+    sorting.value = false
+  }
+}
+
 const dialogRef = ref()
 const dialogVisible = ref(false)
 const dialogMode = ref<'create' | 'edit'>('create')
@@ -145,54 +177,43 @@ onMounted(fetchList)
         </el-button>
       </div>
 
-      <el-table v-loading="loading" :data="list" border stripe>
-        <el-table-column label="图标" width="80">
-          <template #default="{ row }: any">
-            <el-image
-              v-if="row.countryIcon"
-              :src="row.countryIcon"
-              :preview-src-list="[row.countryIcon]"
-              fit="cover"
-              style="width: 32px; height: 32px; border-radius: 4px;"
-            />
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="countryName" label="名称" min-width="200" />
-        <el-table-column label="创建时间" width="180">
-          <template #default="{ row }: any">
-            {{ new Date(row.createdAt).toLocaleString() }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }: any">
-            <div class="table-actions">
-              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
-                <el-icon><Edit /></el-icon>
-                <span>编辑</span>
-              </el-button>
-              <el-button size="small" type="danger" plain @click="handleDelete(row)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="暂无国家" />
-        </template>
-      </el-table>
-
-      <el-pagination
-        class="pagination"
-        v-model:current-page="filter.page"
-        v-model:page-size="filter.pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="(p: number) => { filter.page = p; fetchList() }"
-        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
-      />
+      <ul v-loading="loading" class="country-list">
+        <li
+          v-for="(row, index) in list"
+          :key="row.id"
+          class="country-row"
+          :class="{ 'is-dragging': dragIndex === index }"
+          draggable="true"
+          title="拖拽调整顺序，松开即保存"
+          @dragstart="onRowDragStart(index)"
+          @dragover.prevent
+          @drop="onRowDrop(index)"
+          @dragend="dragIndex = null"
+        >
+          <el-icon class="drag-handle"><Rank /></el-icon>
+          <el-image
+            v-if="row.countryIcon"
+            :src="row.countryIcon"
+            :preview-src-list="[row.countryIcon]"
+            fit="cover"
+            class="row-icon"
+          />
+          <span v-else class="row-icon row-icon-placeholder">-</span>
+          <span class="row-name">{{ row.countryName }}</span>
+          <span class="row-time">{{ new Date(row.createdAt).toLocaleString() }}</span>
+          <div class="table-actions">
+            <el-button size="small" type="primary" plain @click="openEditDialog(row)">
+              <el-icon><Edit /></el-icon>
+              <span>编辑</span>
+            </el-button>
+            <el-button size="small" type="danger" plain @click="handleDelete(row)">
+              <el-icon><Delete /></el-icon>
+              <span>删除</span>
+            </el-button>
+          </div>
+        </li>
+        <li v-if="!loading && !list.length" class="country-empty">暂无国家</li>
+      </ul>
     </div>
 
     <el-dialog
@@ -224,8 +245,81 @@ onMounted(fetchList)
   flex: 1;
 }
 
-.pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
+.country-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.country-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-top: none;
+  cursor: grab;
+}
+
+.country-row:first-child {
+  border-top: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px 4px 0 0;
+}
+
+.country-row:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.country-row:only-child {
+  border-radius: 4px;
+}
+
+.country-row.is-dragging {
+  opacity: 0.5;
+}
+
+.country-row:hover {
+  background: var(--el-fill-color-light);
+}
+
+.drag-handle {
+  color: var(--el-text-color-secondary);
+  font-size: 16px;
+}
+
+.row-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  flex: none;
+}
+
+.row-icon-placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+  border: 1px dashed var(--el-border-color);
+}
+
+.row-name {
+  font-weight: 500;
+}
+
+.row-time {
+  margin-left: auto;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.table-actions {
+  flex: none;
+}
+
+.country-empty {
+  padding: 32px 0;
+  text-align: center;
+  color: var(--el-text-color-secondary);
 }
 </style>