perf: 模型管理界面重做

easyflow-ui-admin/app/src/views/ai/model/ModelViewItemOperation.vue

@@ -1,201 +1,377 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
+import type {PropType} from 'vue';
+import {ref} from 'vue';
 
-import type { llmType } from '#/api';
-import type { ModelAbilityItem } from '#/views/ai/model/modelUtils/model-ability';
+import type {llmType} from '#/api';
+import type {ModelAbilityItem} from '#/views/ai/model/modelUtils/model-ability';
+import {getDefaultModelAbility} from '#/views/ai/model/modelUtils/model-ability';
 
-import { Minus, Plus, Setting } from '@element-plus/icons-vue';
-import { ElIcon, ElImage, ElTag } from 'element-plus';
+import {CircleCheck, CircleClose, Delete, Edit, Loading, Select,} from '@element-plus/icons-vue';
+import {ElButton, ElIcon, ElMessage, ElTag} from 'element-plus';
 
-import { getIconByValue } from '#/views/ai/model/modelUtils/defaultIcon';
-import { getDefaultModelAbility } from '#/views/ai/model/modelUtils/model-ability';
-import { mapLlmToModelAbility } from '#/views/ai/model/modelUtils/model-ability-utils';
+import {verifyModelConfig} from '#/api/ai/llm';
+import ModelProviderBadge from '#/views/ai/model/ModelProviderBadge.vue';
+import {mapLlmToModelAbility} from '#/views/ai/model/modelUtils/model-ability-utils';
 
-defineProps({
+const props = defineProps({
   llmList: {
     type: Array as PropType<llmType[]>,
     default: () => [],
   },
-  icon: {
-    type: String,
-    default: '',
-  },
   needHiddenSettingIcon: {
     type: Boolean,
     default: false,
   },
-  isManagement: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['deleteLlm', 'editLlm', 'addLlm', 'updateWithUsed']);
+const emit = defineEmits(['deleteLlm', 'editLlm']);
+type VerifyButtonStatus = 'error' | 'idle' | 'loading' | 'success';
+const verifyStatusMap = ref<Record<string, VerifyButtonStatus>>({});
+const getModelId = (llm: llmType) =>
+  String((llm as any).id || (llm as any).llmId || (llm as any).modelId || '');
+const getVerifyStatus = (llm: llmType): VerifyButtonStatus =>
+  verifyStatusMap.value[getModelId(llm)] || 'idle';
+const isVerifying = (llm: llmType) => getVerifyStatus(llm) === 'loading';
+const setVerifyStatus = (id: string, status: VerifyButtonStatus) => {
+  if (!id) {
+    return;
+  }
+  verifyStatusMap.value[id] = status;
+};
+const getVerifyButtonText = (llm: llmType) => {
+  const status = getVerifyStatus(llm);
+  if (status === 'loading') {
+    return '验证中';
+  }
+  if (status === 'success') {
+    return '验证成功';
+  }
+  if (status === 'error') {
+    return '验证失败';
+  }
+  return '验证配置';
+};
+const getVerifyButtonIcon = (llm: llmType) => {
+  const status = getVerifyStatus(llm);
+  if (status === 'loading') {
+    return Loading;
+  }
+  if (status === 'success') {
+    return CircleCheck;
+  }
+  if (status === 'error') {
+    return CircleClose;
+  }
+  return Select;
+};
 
 const handleDeleteLlm = (id: string) => {
   emit('deleteLlm', id);
 };
 
-const handleAddLlm = (id: string) => {
-  emit('addLlm', id);
-};
-
 const handleEditLlm = (id: string) => {
   emit('editLlm', id);
 };
 
-// 修改该模型为未使用状态，修改数据库的with_used字段为false
-const handleUpdateWithUsedLlm = (id: string) => {
-  emit('updateWithUsed', id);
+const canVerify = (llm: llmType) => llm.modelType !== 'rerankModel';
+
+const handleVerifyLlm = async (llm: llmType) => {
+  const modelId = getModelId(llm);
+  if (!modelId || isVerifying(llm)) {
+    if (!modelId) {
+      ElMessage.warning('当前模型缺少ID，无法验证配置');
+    }
+    return;
+  }
+
+  setVerifyStatus(modelId, 'loading');
+
+  try {
+    const res = await verifyModelConfig(modelId);
+
+    if (res.errorCode === 0) {
+      setVerifyStatus(modelId, 'success');
+      if (llm.modelType === 'embeddingModel' && res?.data?.dimension) {
+        ElMessage.success(`验证成功，向量维度：${res.data.dimension}`);
+      } else {
+        ElMessage.success('验证成功');
+      }
+    } else {
+      setVerifyStatus(modelId, 'error');
+      if (!res.message) {
+        ElMessage.error('验证失败');
+      }
+    }
+  } catch {
+    setVerifyStatus(modelId, 'error');
+    // error toast is already handled by global response interceptors
+  } finally {
+    // keep final status for explicit visual feedback
+  }
 };
 
-/**
- * 获取LLM支持的选中的能力标签
- * 只返回 selected 为 true 的标签
- */
 const getSelectedAbilityTagsForLlm = (llm: llmType): ModelAbilityItem[] => {
   const defaultAbility = getDefaultModelAbility();
   const allTags = mapLlmToModelAbility(llm, defaultAbility);
   return allTags.filter((tag) => tag.selected);
 };
+
+const getModelMeta = (llm: llmType) => {
+  const providerName =
+    llm?.modelProvider?.providerName || llm?.aiLlmProvider?.providerName || '';
+  const modelName = llm.llmModel || llm.title;
+
+  return `${providerName} · ${modelName}`;
+};
 </script>
 
 <template>
-  <div v-for="llm in llmList" :key="llm.id" class="container">
-    <div class="llm-item">
-      <div class="start">
-        <ElImage
-          v-if="llm.modelProvider.icon"
-          :src="llm.modelProvider.icon"
-          style="width: 21px; height: 21px"
+  <div class="llm-list">
+    <article v-for="llm in props.llmList" :key="llm.id" class="llm-item">
+      <div class="llm-item__main">
+        <ModelProviderBadge
+          :icon="llm.modelProvider?.icon"
+          :provider-name="llm.modelProvider?.providerName"
+          :provider-type="llm.modelProvider?.providerType"
+          :size="40"
         />
-
-        <div
-          v-else
-          v-html="getIconByValue(llm.modelProvider.providerType)"
-          :style="{
-            width: '21px',
-            height: '21px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            overflow: 'hidden',
-          }"
-          class="svg-container"
-        ></div>
-
-        <div>{{ llm?.modelProvider?.providerName }}/{{ llm.title }}</div>
-
-        <!-- 模型能力 -->
-        <div
-          v-if="getSelectedAbilityTagsForLlm(llm).length > 0"
-          class="ability-tags"
-        >
-          <ElTag
-            v-for="tag in getSelectedAbilityTagsForLlm(llm)"
-            :key="tag.value"
-            class="ability-tag"
-            :type="tag.activeType"
-            size="small"
-          >
-            {{ tag.label }}
-          </ElTag>
+        <div class="llm-item__content">
+          <div class="llm-item__headline">
+            <h4 class="llm-item__title">{{ llm.title }}</h4>
+            <div
+              v-if="getSelectedAbilityTagsForLlm(llm).length > 0"
+              class="llm-item__tags"
+            >
+              <ElTag
+                v-for="tag in getSelectedAbilityTagsForLlm(llm)"
+                :key="tag.value"
+                effect="plain"
+                size="small"
+                class="llm-item__tag"
+              >
+                {{ tag.label }}
+              </ElTag>
+            </div>
+          </div>
+          <p class="llm-item__meta">{{ getModelMeta(llm) }}</p>
+          <p v-if="llm.description" class="llm-item__description">
+            {{ llm.description }}
+          </p>
         </div>
       </div>
-      <div class="end">
-        <ElIcon
-          v-if="!needHiddenSettingIcon"
-          size="16"
-          @click="handleEditLlm(llm.id)"
-          style="cursor: pointer"
-        >
-          <Setting />
-        </ElIcon>
-        <template v-if="!isManagement">
-          <ElIcon
-            size="16"
-            @click="handleUpdateWithUsedLlm(llm.id)"
-            style="cursor: pointer"
-          >
-            <Minus />
-          </ElIcon>
-        </template>
 
-        <template v-if="isManagement">
-          <ElIcon
-            v-if="llm.withUsed"
-            size="16"
-            @click="handleDeleteLlm(llm.id)"
-            style="cursor: pointer"
-          >
-            <Minus />
-          </ElIcon>
-          <ElIcon
-            v-else
-            size="16"
-            @click="handleAddLlm(llm.id)"
-            style="cursor: pointer"
-          >
-            <Plus />
-          </ElIcon>
-        </template>
+      <div class="llm-item__actions">
+        <ElButton
+          v-if="canVerify(llm)"
+          text
+          size="small"
+          class="llm-item__verify-btn"
+          :class="`is-${getVerifyStatus(llm)}`"
+          :disabled="isVerifying(llm) || !getModelId(llm)"
+          @click="handleVerifyLlm(llm)"
+        >
+          <template #icon>
+            <ElIcon
+              class="llm-item__verify-icon"
+              :class="`is-${getVerifyStatus(llm)}`"
+            >
+              <component :is="getVerifyButtonIcon(llm)" />
+            </ElIcon>
+          </template>
+          {{ getVerifyButtonText(llm) }}
+        </ElButton>
+
+        <ElButton
+          v-if="!needHiddenSettingIcon"
+          text
+          size="small"
+          :icon="Edit"
+          @click="handleEditLlm(llm.id)"
+        >
+          编辑
+        </ElButton>
+
+        <ElButton
+          text
+          size="small"
+          :icon="Delete"
+          class="llm-item__danger"
+          @click="handleDeleteLlm(llm.id)"
+        >
+          删除
+        </ElButton>
       </div>
-    </div>
+    </article>
   </div>
 </template>
 
 <style scoped>
-.llm-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 40px;
-}
-
-.container {
+.llm-list {
   display: flex;
   flex-direction: column;
+  gap: 12px;
+}
+
+.llm-item {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 16px 18px;
+  background: hsl(var(--surface-panel) / 90%);
+  border: 1px solid hsl(var(--divider-faint) / 54%);
+  border-radius: 18px;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.llm-item:hover {
+  border-color: hsl(var(--primary) / 28%);
+  box-shadow: 0 18px 30px -28px hsl(var(--foreground) / 34%);
+  transform: translateY(-1px);
+}
+
+.llm-item__main {
+  display: flex;
+  flex: 1;
+  gap: 14px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.llm-item__content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.llm-item__headline {
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px;
-  padding: 12px 18px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.container:last-child {
-  border-bottom: none;
-}
-
-.start {
-  display: flex;
   align-items: center;
-  gap: 12px;
-  font-weight: 500;
 }
 
-.end {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.llm-item__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: hsl(var(--text-strong));
 }
 
-.ability-tags {
+.llm-item__meta,
+.llm-item__description {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: hsl(var(--text-muted));
+}
+
+.llm-item__description {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.llm-item__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
-.ability-tag {
-  cursor: default;
-  user-select: none;
+.llm-item__tag {
+  color: hsl(var(--text-strong));
+  background: hsl(var(--primary) / 8%);
+  border-color: transparent;
 }
 
-.svg-container {
-  display: flex;
+.llm-item__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
-.svg-container :deep(svg) {
-  width: 21px;
-  height: 21px;
+.llm-item__actions :deep(.el-button) {
+  border-radius: 10px;
+}
+
+.llm-item__verify-btn.is-idle {
+  color: hsl(var(--text-muted));
+}
+
+.llm-item__verify-btn.is-loading {
+  color: hsl(var(--primary));
+}
+
+.llm-item__verify-btn.is-success {
+  color: hsl(var(--success));
+}
+
+.llm-item__verify-btn.is-error {
+  color: hsl(var(--destructive));
+}
+
+.llm-item__verify-icon {
+  transition:
+    color 0.24s ease,
+    transform 0.24s ease;
+}
+
+.llm-item__verify-icon.is-loading {
+  animation: llm-item-verify-spin 0.9s linear infinite;
+}
+
+.llm-item__verify-icon.is-success,
+.llm-item__verify-icon.is-error {
+  animation: llm-item-verify-pop 0.32s ease;
+}
+
+.llm-item__danger {
+  color: hsl(var(--danger) / 90%);
+}
+
+.llm-item__danger:hover,
+.llm-item__danger:focus-visible {
+  color: hsl(var(--danger));
+}
+
+@keyframes llm-item-verify-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes llm-item-verify-pop {
+  0% {
+    opacity: 0.72;
+    transform: scale(0.82);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 768px) {
+  .llm-item {
+    flex-direction: column;
+  }
+
+  .llm-item__actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
 }
 </style>