feat: add model enable toggle action (#40)

* feat: add model enable toggle action

* feat: add model enable toggle action

Author: LIlGG

ui/src/views/components/AllModelListItem.vue

@@ -24,6 +24,7 @@ import { useClipboard } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 import ModelEditingModal from './ModelEditingModal.vue'
+import ModelEnableSwitch from './ModelEnableSwitch.vue'
 
 const props = defineProps<{
   model: AiModel
@@ -106,6 +107,7 @@ const canTest = computed(() => isEnabledTestableModel(props.model))
       <div class=":uno: flex flex-wrap items-center justify-end gap-2">
         <ModelBadgeGroup :model="model" />
         <VStatusDot v-if="model.metadata.deletionTimestamp" animate state="warning" text="删除中" />
+        <ModelEnableSwitch :model="model" />
       </div>
     </template>
     <template #dropdownItems>

ui/src/views/components/ModelEnableSwitch.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { aiCoreApiClient } from '@/api'
+import type { AiModel } from '@/api/generated'
+import { QK_MODELS } from '@/composables/use-models-fetch'
+import { Toast, VSwitch } from '@halo-dev/components'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  model: AiModel
+}>()
+
+const queryClient = useQueryClient()
+
+const enabled = computed(() => props.model.spec.enabled !== false)
+
+const mutation = useMutation({
+  mutationFn: async (nextEnabled: boolean) => {
+    return await aiCoreApiClient.model.patchAiModel({
+      name: props.model.metadata.name,
+      jsonPatchInner: [
+        {
+          op: 'add',
+          path: '/spec/enabled',
+          value: nextEnabled,
+        },
+      ],
+    })
+  },
+  onSuccess: (_data, nextEnabled) => {
+    Toast.success(nextEnabled ? '模型已启用' : '模型已禁用')
+    queryClient.invalidateQueries({ queryKey: [QK_MODELS] })
+  },
+  onError: (error) => {
+    Toast.error('模型状态更新失败: ' + (error as Error).message)
+  },
+})
+
+const isUpdating = computed(() => mutation.isPending.value)
+const disabled = computed(() => !!props.model.metadata.deletionTimestamp || isUpdating.value)
+
+function handleToggle() {
+  if (disabled.value) {
+    return
+  }
+  mutation.mutate(!enabled.value)
+}
+</script>
+
+<template>
+  <VSwitch
+    :model-value="enabled"
+    :loading="isUpdating"
+    :disabled="disabled"
+    v-tooltip="enabled ? '禁用模型' : '启用模型'"
+    @click.stop="handleToggle"
+  />
+</template>

ui/src/views/components/ProviderModelListItem.vue

@@ -19,6 +19,7 @@ import { useClipboard } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 import ModelEditingModal from './ModelEditingModal.vue'
+import ModelEnableSwitch from './ModelEnableSwitch.vue'
 
 const props = defineProps<{
   model: AiModel
@@ -84,6 +85,7 @@ function handleDelete() {
       <div class=":uno: flex flex-wrap items-center justify-end gap-1.5">
         <ModelBadgeGroup :model="model" />
         <VStatusDot v-if="model.metadata.deletionTimestamp" animate state="warning" text="删除中" />
+        <ModelEnableSwitch :model="model" />
       </div>
     </template>
     <template #dropdownItems>