feat: create model and get model

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>