Merge pull request #101 from smallerqiu/main

feat: fixed can't get model id and make the model list better presented.

Author: cloudbeer

src-frontend/components/modelList/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="model-list">
+    <Checkbox
+      v-for="item in models"
+      :key="item.value"
+      :label="item.label"
+      :checked="checked_models.includes(item.value)"
+      :value="item.value"
+      @change="setModel"
+    />
+  </div>
+</template>
+<script setup>
+import { getCurrentInstance } from "vue";
+import { message } from "kui-vue";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  type: String,
+  group_id: {
+    type: Number,
+  },
+  key_id: {
+    type: Number,
+  },
+  models: {
+    type: Array,
+    default: () => [],
+  },
+  checked_models: {
+    type: Array,
+    default: () => [],
+  },
+});
+const updateGroupModel = ({ value }) => {
+  proxy.$http
+    .post("/admin/group/bind-or-unbind-model", {
+      group_id: props.group_id,
+      model_id: value,
+    })
+    .then(() => {
+      message.success("Updated successfully.");
+    })
+};
+const updateApiKeyModel = ({ value }) => {
+  proxy.$http
+    .post("/admin/api-key/bind-or-unbind-model", {
+      key_id: props.key_id,
+      model_id: value,
+    })
+    .then(() => {
+      message.success("Updated successfully.");
+    })
+};
+const setModel = (item) => {
+  if (props.type === "group") {
+    updateGroupModel(item);
+  } else {
+    updateApiKeyModel(item);
+  }
+};
+</script>
+<style scoped lang="less">
+.model-list {
+  display: flex;
+  flex-wrap: wrap;
+  .k-checkbox {
+    padding: 8px;
+    border: 1px solid var(--kui-color-pop-border);
+    width: 180px;
+    margin: -1px 0 0 -1px;
+  }
+}
+</style>

src-frontend/pages/groups.vue

@@ -50,12 +50,14 @@
       v-model="modelsShown"
       @ok="modelsShown = false"
       :loading="saving"
+      :width="650"
       :mask-closable="true"
     >
-      <CheckboxGroup
-        :options="models"
-        v-model="checked_models"
-        @change="setModel"
+      <ModelList
+        :checked_models="checked_models"
+        :models="models"
+        :group_id="current_group_id"
+        type="group"
       />
     </Drawer>
   </div>
@@ -71,6 +73,7 @@ import {
 } from "vue";
 import { message } from "kui-vue";
 const { proxy } = getCurrentInstance();
+import ModelList from "../components/modelList/index.vue";
 const $t = inject("$t");
 
 const refForm = ref();
@@ -161,7 +164,7 @@ const listModels = (row) => {
   current_group_id.value = row.id;
   title.value = $t("group.title_set_models");
   // row.loading = true;
-  proxy.$set(row, "loading", true)
+  proxy.$set(row, "loading", true);
   proxy.$http
     .get("/admin/group/list-model", {
       group_id: current_group_id.value,
@@ -179,21 +182,6 @@ const listModels = (row) => {
     });
 };
 
-const setModel = (e) => {
-  const model_id = e.value;
-  proxy.$http
-    .post("/admin/group/bind-or-unbind-model", {
-      group_id: current_group_id.value,
-      model_id,
-    })
-    .then(() => {
-      message.success("Save successfully.");
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-};
-
 const add = () => {
   action.value = "new";
   title.value = $t("keys.btn_new");

src-frontend/pages/keys.vue

@@ -162,12 +162,14 @@
       v-model="modelsShown"
       @ok="modelsShown = false"
       :loading="saving"
+      :width="650"
       :mask-closable="true"
     >
-      <CheckboxGroup
-        :options="models"
-        v-model="checked_models"
-        @change="setModel"
+      <ModelList
+        :models="models"
+        :checked_models="checked_models"
+        :key_id="current_key_id"
+        type="api-key"
       />
     </Drawer>
   </div>
@@ -183,6 +185,7 @@ import {
 } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { Copy, CloudUpload, FolderOpen, Settings } from "kui-icons";
+import ModelList from "../components/modelList/index.vue";
 import { message, modal } from "kui-vue";
 const $t = inject("$t");
 const { copy, isSupported } = useClipboard();
@@ -429,21 +432,6 @@ const listModels = (row) => {
     });
 };
 
-const setModel = (e) => {
-  const model_id = e.value;
-  proxy.$http
-    .post("/admin/api-key/bind-or-unbind-model", {
-      key_id: current_key_id.value,
-      model_id,
-    })
-    .then(() => {
-      message.success("Save successfully.");
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-};
-
 const get_data = () => {
   loading.value = true;
   let {