feat:

ui/src/views/application/CreateApplication.vue

@@ -34,21 +34,27 @@
                   show-word-limit
                 />
               </el-form-item>
+
+              <div v-html="realatedProvider('model_azure_provider', 'icon')"></div>
+
               <el-form-item label="选择模型" prop="model_id">
-                <!-- <el-select
-                  v-model="applicationForm.model_id"
-                  placeholder="请选择模型"
-                  style="width: 100%"
-                >
-                  <el-option label="Zone one" value="shanghai" />
-                  <el-option label="Zone two" value="beijing" />
-                </el-select> -->
-                <el-cascader
-                  v-model="applicationForm.model_id"
-                  :options="modelOptions"
-                  :props="modelProps"
-                  clearable
-                />
+                <el-select v-model="applicationForm.model_id" placeholder="请选择模型">
+                  <el-option-group
+                    v-for="(value, label) in modelOptions"
+                    :key="value"
+                    :label="realatedProvider(label, 'name')"
+                  >
+                    <el-option
+                      v-for="item in value"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    >
+                      <div v-html="realatedProvider(label, 'icon')" class="model-icon"></div>
+                      <span>{{ item.name }}</span>
+                    </el-option>
+                  </el-option-group>
+                </el-select>
               </el-form-item>
 
               <el-form-item label="多轮对话">
@@ -125,8 +131,9 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
+import { groupBy } from 'lodash'
 import AiDialog from '@/components/ai-dialog/index.vue'
-import type { FormInstance, FormRules, CascaderProps } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import useStore from '@/stores'
 const { model } = useStore()
@@ -156,57 +163,48 @@ const rules = reactive<FormRules<ApplicationFormType>>({
   ]
 })
 const modelOptions = ref([])
+const providerOptions = ref([])
 
 watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
 })
 
-let id = 0
-const modelProps: CascaderProps = {
-  lazy: true,
-  async lazyLoad(node, resolve) {
-    console.log(node)
-    const { level } = node
-    if (level === 0) {
-      let res = await getProvider()
-      resolve(res)
-    }
-    // setTimeout(() => {
-    //   const nodes = Array.from({ length: level + 1 }).map((item) => ({
-    //     value: ++id,
-    //     label: `Option - ${id}`,
-    //     leaf: level >= 2
-    //   }))
-    //   resolve(nodes)
-    // }, 1000)
-  }
-}
-
 function getModel() {
   loading.value = true
   model
     .asyncGetModel()
     .then((res) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      console.log(modelOptions.value)
       loading.value = false
     })
     .catch(() => {
       loading.value = false
     })
 }
+
 function getProvider() {
   loading.value = true
   model
     .asyncGetProvider()
     .then((res) => {
-      modelOptions.value = res?.data
+      providerOptions.value = res?.data
       loading.value = false
     })
     .catch(() => {
       loading.value = false
     })
 }
+
+function realatedProvider(val, attr) {
+  const filterProvider = providerOptions.value.filter((item) => item.provider === val)?.[0]
+  console.log(filterProvider)
+  return filterProvider?.[attr] || ''
+}
+
 onMounted(() => {
-  // getProvider()
+  getProvider()
+  getModel()
 })
 </script>
 <style lang="scss" scoped>
@@ -227,5 +225,11 @@ onMounted(() => {
   .scrollbar-height {
     height: calc(var(--app-main-height) - 150px);
   }
+
 }
+.model-icon {
+    svg {
+      width: 30px;
+    }
+  }
 </style>

ui/src/views/application/index.vue

@@ -127,7 +127,14 @@ function getList() {
   applicationApi
     .getApplication(pageConfig)
     .then((res) => {
-      applicationList.value = res.data?.records
+      const list = res.data?.records
+      list.map((item) => {
+        applicationList.value.push({
+          value:item.provider,
+          label: item.name
+        })
+      })
+
       loading.value = false
     })
     .catch(() => {