From 743f23e64029738cf974ae4403ecc93bc8c5a285 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Mon, 15 Dec 2025 14:30:31 +0800
Subject: [PATCH] feat(frontend): add ModelAliasDialog component for alias
 management

---
 .../providers/components/ModelAliasDialog.vue | 333 ++++++++++++++++++
 1 file changed, 333 insertions(+)
 create mode 100644 frontend/src/features/providers/components/ModelAliasDialog.vue

diff --git a/frontend/src/features/providers/components/ModelAliasDialog.vue b/frontend/src/features/providers/components/ModelAliasDialog.vue
new file mode 100644
index 0000000..92231c8
--- /dev/null
+++ b/frontend/src/features/providers/components/ModelAliasDialog.vue
@@ -0,0 +1,333 @@
+<template>
+  <Dialog
+    :model-value="open"
+    title="管理模型名称别名"
+    description="配置 Provider 对此模型使用的名称变体，系统会按优先级顺序选择"
+    :icon="Tag"
+    size="md"
+    @update:model-value="handleClose"
+  >
+    <div class="space-y-4">
+      <!-- 模型信息 -->
+      <div class="rounded-lg border bg-muted/30 p-3">
+        <p class="font-medium">
+          {{ model?.global_model_display_name || model?.provider_model_name }}
+        </p>
+        <p class="text-sm text-muted-foreground font-mono">
+          主名称: {{ model?.provider_model_name }}
+        </p>
+      </div>
+
+      <!-- 别名列表 -->
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <Label class="text-sm font-medium">名称别名</Label>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            @click="addAlias"
+          >
+            <Plus class="w-4 h-4 mr-1" />
+            添加
+          </Button>
+        </div>
+
+        <!-- 提示信息 -->
+        <div
+          v-if="aliases.length > 0"
+          class="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground bg-muted/30 rounded-md"
+        >
+          <Info class="w-3.5 h-3.5 shrink-0" />
+          <span>拖拽调整顺序，点击序号可编辑（相同数字为同级，负载均衡）</span>
+        </div>
+
+        <div
+          v-if="aliases.length > 0"
+          class="space-y-2"
+        >
+          <div
+            v-for="(alias, index) in aliases"
+            :key="index"
+            class="group flex items-center gap-3 px-3 py-2.5 rounded-lg border transition-all duration-200"
+            :class="[
+              draggedIndex === index
+                ? 'border-primary/50 bg-primary/5 shadow-md scale-[1.01]'
+                : dragOverIndex === index
+                  ? 'border-primary/30 bg-primary/5'
+                  : 'border-border/50 bg-background hover:border-border hover:bg-muted/30'
+            ]"
+            draggable="true"
+            @dragstart="handleDragStart(index, $event)"
+            @dragend="handleDragEnd"
+            @dragover.prevent="handleDragOver(index)"
+            @dragleave="handleDragLeave"
+            @drop="handleDrop(index)"
+          >
+            <!-- 拖拽手柄 -->
+            <div class="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted text-muted-foreground/40 group-hover:text-muted-foreground transition-colors shrink-0">
+              <GripVertical class="w-4 h-4" />
+            </div>
+
+            <!-- 可编辑优先级 -->
+            <div class="shrink-0">
+              <input
+                v-if="editingPriorityIndex === index"
+                type="number"
+                min="1"
+                :value="alias.priority"
+                class="w-8 h-6 rounded-md bg-background border border-primary text-xs font-medium text-center focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                autofocus
+                @blur="finishEditPriority(index, $event)"
+                @keydown.enter="($event.target as HTMLInputElement).blur()"
+                @keydown.escape="cancelEditPriority"
+              >
+              <div
+                v-else
+                class="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center text-xs font-medium text-muted-foreground cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors"
+                title="点击编辑优先级，相同数字为同级（负载均衡）"
+                @click.stop="startEditPriority(index)"
+              >
+                {{ alias.priority }}
+              </div>
+            </div>
+
+            <!-- 别名输入框 -->
+            <Input
+              v-model="alias.name"
+              placeholder="别名，如 Claude-Sonnet-4.5"
+              class="flex-1"
+            />
+
+            <!-- 删除按钮 -->
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              class="shrink-0 text-destructive hover:text-destructive h-8 w-8"
+              @click="removeAlias(index)"
+            >
+              <X class="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="text-center py-6 text-muted-foreground border rounded-lg border-dashed"
+        >
+          <Tag class="w-8 h-8 mx-auto mb-2 opacity-50" />
+          <p class="text-sm">未配置别名</p>
+          <p class="text-xs mt-1">将只使用主模型名称</p>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <Button
+        variant="outline"
+        @click="handleClose(false)"
+      >
+        取消
+      </Button>
+      <Button
+        :disabled="submitting"
+        @click="handleSubmit"
+      >
+        <Loader2
+          v-if="submitting"
+          class="w-4 h-4 mr-2 animate-spin"
+        />
+        保存
+      </Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Tag, Plus, X, Loader2, GripVertical, Info } from 'lucide-vue-next'
+import { Dialog, Button, Input, Label } from '@/components/ui'
+import { useToast } from '@/composables/useToast'
+import { updateModel } from '@/api/endpoints/models'
+import type { Model, ProviderModelAlias } from '@/api/endpoints'
+
+interface Props {
+  open: boolean
+  providerId: string
+  model: Model | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'saved': []
+}>()
+
+const { error: showError, success: showSuccess } = useToast()
+
+const submitting = ref(false)
+const aliases = ref<ProviderModelAlias[]>([])
+
+// 拖拽状态
+const draggedIndex = ref<number | null>(null)
+const dragOverIndex = ref<number | null>(null)
+
+// 优先级编辑状态
+const editingPriorityIndex = ref<number | null>(null)
+
+// 监听 open 变化
+watch(() => props.open, (newOpen) => {
+  if (newOpen && props.model) {
+    // 加载现有别名配置
+    if (props.model.provider_model_aliases && Array.isArray(props.model.provider_model_aliases)) {
+      aliases.value = JSON.parse(JSON.stringify(props.model.provider_model_aliases))
+    } else {
+      aliases.value = []
+    }
+    // 重置状态
+    editingPriorityIndex.value = null
+    draggedIndex.value = null
+    dragOverIndex.value = null
+  }
+})
+
+// 添加别名
+function addAlias() {
+  // 新别名优先级为当前最大优先级 + 1，或者默认为 1
+  const maxPriority = aliases.value.length > 0
+    ? Math.max(...aliases.value.map(a => a.priority))
+    : 0
+  aliases.value.push({ name: '', priority: maxPriority + 1 })
+}
+
+// 移除别名
+function removeAlias(index: number) {
+  aliases.value.splice(index, 1)
+}
+
+// ===== 拖拽排序 =====
+function handleDragStart(index: number, event: DragEvent) {
+  draggedIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+function handleDragEnd() {
+  draggedIndex.value = null
+  dragOverIndex.value = null
+}
+
+function handleDragOver(index: number) {
+  if (draggedIndex.value !== null && draggedIndex.value !== index) {
+    dragOverIndex.value = index
+  }
+}
+
+function handleDragLeave() {
+  dragOverIndex.value = null
+}
+
+function handleDrop(targetIndex: number) {
+  const dragIndex = draggedIndex.value
+  if (dragIndex === null || dragIndex === targetIndex) {
+    dragOverIndex.value = null
+    return
+  }
+
+  const items = [...aliases.value]
+  const draggedItem = items[dragIndex]
+
+  // 记录每个别名的原始优先级（在修改前）
+  const originalPriorityMap = new Map<number, number>()
+  items.forEach((alias, idx) => {
+    originalPriorityMap.set(idx, alias.priority)
+  })
+
+  // 重排数组
+  items.splice(dragIndex, 1)
+  items.splice(targetIndex, 0, draggedItem)
+
+  // 按新顺序为每个组分配新的优先级
+  // 同组的别名保持相同的优先级（被拖动的别名单独成组）
+  const groupNewPriority = new Map<number, number>() // 原优先级 -> 新优先级
+  let currentPriority = 1
+
+  // 找到被拖动项在原数组中的索引对应的原始优先级
+  const draggedOriginalPriority = originalPriorityMap.get(dragIndex)!
+
+  items.forEach((alias, newIdx) => {
+    // 找到这个别名在原数组中的索引
+    const originalIdx = aliases.value.findIndex(a => a === alias)
+    const originalPriority = originalIdx >= 0 ? originalPriorityMap.get(originalIdx)! : alias.priority
+
+    if (alias === draggedItem) {
+      // 被拖动的别名是独立的新组，获得当前优先级
+      alias.priority = currentPriority
+      currentPriority++
+    } else {
+      if (groupNewPriority.has(originalPriority)) {
+        // 这个组已经分配过优先级，使用相同的值
+        alias.priority = groupNewPriority.get(originalPriority)!
+      } else {
+        // 这个组第一次出现，分配新优先级
+        groupNewPriority.set(originalPriority, currentPriority)
+        alias.priority = currentPriority
+        currentPriority++
+      }
+    }
+  })
+
+  aliases.value = items
+  draggedIndex.value = null
+  dragOverIndex.value = null
+}
+
+// ===== 优先级编辑 =====
+function startEditPriority(index: number) {
+  editingPriorityIndex.value = index
+}
+
+function finishEditPriority(index: number, event: FocusEvent) {
+  const input = event.target as HTMLInputElement
+  const newPriority = parseInt(input.value) || 1
+  aliases.value[index].priority = Math.max(1, newPriority)
+  editingPriorityIndex.value = null
+}
+
+function cancelEditPriority() {
+  editingPriorityIndex.value = null
+}
+
+// 关闭对话框
+function handleClose(value: boolean) {
+  if (!submitting.value) {
+    emit('update:open', value)
+  }
+}
+
+// 提交保存
+async function handleSubmit() {
+  if (submitting.value || !props.model) return
+
+  submitting.value = true
+  try {
+    // 过滤掉空的别名
+    const validAliases = aliases.value.filter(a => a.name.trim())
+
+    await updateModel(props.providerId, props.model.id, {
+      provider_model_aliases: validAliases.length > 0 ? validAliases : null
+    })
+
+    showSuccess('别名配置已保存')
+    emit('update:open', false)
+    emit('saved')
+  } catch (err: any) {
+    showError(err.response?.data?.detail || '保存失败', '错误')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>