初始化

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

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { llmType } from '#/api';
+import type { ModelAbilityItem } from '#/views/ai/model/modelUtils/model-ability';
+
+import { Minus, Plus, Setting } from '@element-plus/icons-vue';
+import { ElIcon, ElImage, 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';
+
+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 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);
+};
+
+/**
+ * 获取LLM支持的选中的能力标签
+ * 只返回 selected 为 true 的标签
+ */
+const getSelectedAbilityTagsForLlm = (llm: llmType): ModelAbilityItem[] => {
+  const defaultAbility = getDefaultModelAbility();
+  const allTags = mapLlmToModelAbility(llm, defaultAbility);
+  return allTags.filter((tag) => tag.selected);
+};
+</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
+          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>
+      </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>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.llm-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.ability-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ability-tag {
+  cursor: default;
+  user-select: none;
+}
+
+.svg-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-container :deep(svg) {
+  width: 21px;
+  height: 21px;
+}
+</style>