feat: create model and get model

packages/web/src/components/CreateModel/index.vue

@@ -14,7 +14,28 @@
               使用不用厂商的大模型
             </DialogDescription>
           </DialogHeader>
-          <div class="grid ">
+          <div>
+            <FormField
+              v-slot="{ componentField }"
+              name="modelId"
+            >
+              <FormItem>
+                <FormLabel class="mb-2">
+                  Model Name
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="请输入Model Name"
+                    v-bind="componentField"
+                    autocomplete="modelId"
+                  />
+                </FormControl>
+                <blockquote class="h-5">
+                  <FormMessage />
+                </blockquote>
+              </FormItem>
+            </FormField>
             <FormField
               v-slot="{ componentField }"
               name="baseUrl"
@@ -24,7 +45,7 @@
                   Base Url
                 </FormLabel>
                 <FormControl>
-                  <Input                   
+                  <Input
                     type="text"
                     placeholder="请输入Base Url"
                     v-bind="componentField"
@@ -45,7 +66,7 @@
                   Api Key
                 </FormLabel>
                 <FormControl>
-                  <Input                   
+                  <Input
                     placeholder="请输入Api Key"
                     autocomplete="apiKey"
                     v-bind="componentField"
@@ -65,11 +86,24 @@
                   Client Type
                 </FormLabel>
                 <FormControl>
-                  <Input                    
-                    placeholder="请输入Api Key"
-                    autocomplete="clientType"
-                    v-bind="componentField"
-                  />
+                  <Select v-bind="componentField">
+                    <SelectTrigger class="w-full">
+                      <SelectValue placeholder="请选择Client Type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="OpenAI">
+                          OpenAI
+                        </SelectItem>
+                        <SelectItem value="Anthropic">
+                          Anthropic
+                        </SelectItem>
+                        <SelectItem value="Google">
+                          Google
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
                 </FormControl>
                 <blockquote class="h-5">
                   <FormMessage />
@@ -82,7 +116,7 @@
             >
               <FormItem>
                 <FormLabel class="mb-2">
-                  Name
+                  Display Name
                 </FormLabel>
                 <FormControl>
                   <Input
@@ -106,21 +140,21 @@
                 </FormLabel>
                 <FormControl>
                   <Select v-bind="componentField">
-                    <SelectTrigger
-                      class="w-full"
-                    >
-                      <SelectValue
-                        placeholder="Select a fruit"
-                      />
+                    <SelectTrigger class="w-full">
+                      <SelectValue placeholder="请选择Role" />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectGroup>
                         <SelectItem
                           value="chat"
-                          select
                         >
                           Chat
                         </SelectItem>
+                        <SelectItem
+                          value="embedding"
+                        >
+                          embedding
+                        </SelectItem>
                       </SelectGroup>
                     </SelectContent>
                   </Select>
@@ -164,7 +198,7 @@ import {
   Select,
   SelectContent,
   SelectGroup,
-  SelectItem, 
+  SelectItem,
   SelectTrigger,
   SelectValue,
   FormItem,
@@ -176,6 +210,8 @@ import { ref } from 'vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import z from 'zod'
 import request from '@/utils/request'
+import { useMutation,useQueryCache } from '@pinia/colada'
+
 
 const formSchema = toTypedSchema(z.object({
   baseUrl: z.string().min(1),
@@ -186,23 +222,24 @@ const formSchema = toTypedSchema(z.object({
 }))
 
 const form = useForm({
-  validationSchema:formSchema
-})
-const addModel=form.handleSubmit(async (modelInfo) => {
-  try {
-    await request({
-      url: '/model',
-      data: {
-        ...modelInfo
-      }
-    })  
-    open.value = false
-  } catch (err) {
-    return err
-  }
-  
- 
+  validationSchema: formSchema
 })
 
-const open=ref(false)
+const queryCache=useQueryCache()
+const { mutate: createModel } = useMutation({
+  mutation: (modelInfo: Parameters<(Parameters<typeof form.handleSubmit>)[0]>[0]) => request({
+    url: '/model',
+    data: {
+      ...modelInfo,
+      modelId:'fwoi0fjwfiwefwjfiowefoi'
+    },
+    method:'post'
+  }),
+  onSettled: () => queryCache.invalidateQueries({ key: ['models'], exact: true })
+})
+const addModel = form.handleSubmit(async (modelInfo) => {
+  createModel(modelInfo)
+})
+
+const open = ref(false)
 </script>

packages/web/src/pages/models/index.vue

@@ -1,33 +1,67 @@
 <script setup lang="ts">
 // import type { Payment } from '@/components/columns'
-import { ref, h } from 'vue'
+import { watch, h, computed } from 'vue'
 import CreateModel from '@/components/CreateModel/index.vue'
+import { useQuery } from '@pinia/colada'
 
 import DataTable from '@/components/DataTable/index.vue'
+import request from '@/utils/request'
+import {type ColumnDef } from '@tanstack/vue-table'
 
-const modelData=ref([])
 
-async function getData() {
-
-  return [
-    {
-      id: '728ed52f',
-      amount: 100,
-      status: 'pending',
-      email: 'm@example.com',
-    },
-
-  ]
+interface ModelType {
+  apiKey:string,
+  baseUrl: string,
+  clientType: 'OpenAI'|'Anthropic'|'Google',
+  modelId:string,
+  name:string,
+  type:'chat'|'embedding'
 }
 
-const columns = [
+const columns:ColumnDef<ModelType>[] = [
   {
-    accessorKey: 'amount',
-    header: () => h('div', { class: 'text-right' }, 'Amount'),
-    
+    accessorKey: 'modelId',
+    header: () => h('div', { class: 'text-left py-4' }, 'Name'),
+    cell({row}) {
+      return h('div',{ class: 'text-left py-4' },row.getValue('modelId'))
+    }
+  },
+  {
+    accessorKey: 'baseUrl',
+    header: () => h('div', { class: 'text-left' }, 'Base Url'),
+
+  },
+
+  {
+    accessorKey: 'apiKey',
+    header: () => h('div', { class: 'text-left' }, 'Api Key'),
+  },
+  {
+    accessorKey: 'clientType',
+    header: () => h('div', { class: 'text-left' }, 'Client Type'),
+  },
+  {
+    accessorKey: 'Name',
+    header: () => h('div', { class: 'text-left' }, 'Name'),
+  },
+  {
+    accessorKey: 'type',
+    header: () => h('div', { class: 'text-left' }, 'Type'),
   }
 ]
 
+const {data:modelData}=useQuery({
+  key: ['models'],
+  query() {
+    return request({
+      url: '/model'
+    })
+  }
+})
+const displayFormat = computed(() => {
+  return modelData.value?.data?.items?.map((currentModel:{model: ModelType,id:'string' })=>currentModel.model)??[]
+})
+
 </script>
 
 <template>
@@ -37,7 +71,7 @@ const columns = [
     </div>
     <DataTable
       :columns="columns"
-      :data="modelData"
+      :data="displayFormat"
     />
   </div>
 </template>