Revert "fetch: 页面移植"

This reverts commit eb5af0ee

src/views/ai/model/chatModel/edit.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/ai/model/chatModel/index.vue

@@ -1,17 +1,16 @@
 
 <script lang="ts" setup>
-import {Table} from '@/components/Table';
+import { Table } from '@/components/Table';
-import {Delete, Edit, Plus} from '@element-plus/icons-vue';
+import { Delete, Edit, Plus } from '@element-plus/icons-vue';
 import editCom from './edit.vue';
-import {computed, h, nextTick, reactive, ref} from 'vue';
+import { computed, h, nextTick, reactive, ref } from 'vue';
-import {getColumns} from './composables/columns.ts';
+import { getColumns } from './composables/columns.ts';
-import {LLMProviders} from './composables/consts.ts';
+import { LLMProviders } from './composables/consts.ts';
 // import { del, list as getModels } from '@/api/aigc/model';
-import {ElMessage, ElMessageBox} from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import {FormSchema} from "@/types/form";
 // import { ModelTypeEnum } from '@/api/models';
-import {getModels, ProviderEnum} from './composables/provider.ts';
+import { ProviderEnum } from './composables/provider.ts';
-
 const formData = ref({
   provider: ProviderEnum.OPENAI
 });
@@ -20,75 +19,65 @@ const dialog = ElMessageBox;
 const actionRef = ref();
 const editRef = ref();
 const tableData = ref([
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  }, {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  }
 ])
-// const actionColumn = reactive({
+const shema = ref([
-//   width: 100,
+  {
-//   title: '操作',
+    label: '模型名称',
-//   key: 'action',
+    field: 'provider',
-//   fixed: 'right',
+    component: 'Select',
-//   align: 'center',
+    colProps: {
-//   render(record: any) {
+      span: 6
-//     return h(TableAction as any, {
+    },
-//       style: 'text',
+    componentProps: {
-//       actions: [
+      style: {
-//         {
+        width: '150px',
-//           type: 'info',
+      },
-//           icon: Edit,
+      options: LLMProviders.map((item) => ({
-//           onClick: handleEdit.bind(null, record),
+        label: item.name,
-//         },
+        value: item.model,
-//         {
+      })),
-//           type: 'error',
+    },
-//           icon: Delete,
+
-//           onClick: handleDel.bind(null, record),
+  }
-//         },
+]) as FormSchema[]
-//       ],
+const actionColumn = reactive({
-//     });
+  width: 100,
-//   },
+  title: '操作',
-// });
+  key: 'action',
+  fixed: 'right',
+  align: 'center',
+  render(record: any) {
+    return h(TableAction as any, {
+      style: 'text',
+      actions: [
+        {
+          type: 'info',
+          icon: Edit,
+          onClick: handleEdit.bind(null, record),
+        },
+        {
+          type: 'error',
+          icon: Delete,
+          onClick: handleDel.bind(null, record),
+        },
+      ],
+    });
+  },
+});
 
 const columns = computed(() => {
+  console.log(formData.value.provider);
   nextTick();
   return getColumns(formData.value.provider);
 });
-// const loadDataTable = async (params: any) => {
+const loadDataTable = async (params: any) => {
-//   if (formData.value.provider === '') {
+  if (formData.value.provider === '') {
-//     formData.value.provider = LLMProviders[0].model;
+    formData.value.provider = LLMProviders[0].model;
-//   }
+  }
-//   return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
+  return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
-// };
+};
-
+async function handleAdd() {
-async function addModel() {
+  editRef.value.show({ provider: formData.value.provider });
-  console.log(formData.value.provider);
-  editRef.value.show({provider: formData.value.provider});
 }
 
 function handleEdit(record: any) {
@@ -117,63 +106,20 @@ function handleDel(record: any) {
 </script>
 
 <template>
-<!--  <content-wrap>-->
+  <content-wrap>
-<!--    <el-button v-for="(item,index) in LLMProviders" :key="index" @click="formData.provider = item.model">{{ item.name }}</el-button>-->
+    <Search :schema="shema" :model="formData" @search="({ provider}) => formData.provider = provider"/>
-<!--  </content-wrap>-->
+  </content-wrap>
   <ContentWrap>
-   <div class="flex children">
+        <el-alert
-     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+          class="w-full mb-10px min-alert"
-       <div
+          title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
-         v-for="(item,index) in LLMProviders" :key="index"
+          type="info"
-         :class="{active: formData.provider === item.model}" class="menu"
+          show-icon
-         @click="formData.provider = item.model">
+        />
-         <span>{{ item.name }}</span>
+        <el-button class="my-10px" type="primary" :icon="Plus">新增模型</el-button>
-       </div>
+        <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-     </el-scrollbar>
+        <editCom ref="editRef" :provider="provider" @reload="reloadTable" />
-     <div class="h-full flex-1 px-20px">
-       <el-alert
-         class="w-full mb-10px min-alert"
-         title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
-         type="warning"
-         show-icon
-       />
-       <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
-       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-       <editCom ref="editRef" @reload="reloadTable"/>
-     </div>
-   </div>
   </ContentWrap>
 </template>
 
-<style lang="scss" scoped>
+<style lang="less" scoped></style>
-.children {
-  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
-  box-sizing: border-box;
-
-  & > div:nth-child(2) {
-    width: calc(100% - 300px);
-  }
-}
-
-.table-wrapper {
-  height: calc(100% - 100px);
-}
-
-.menu {
-  transition: all .15s;
-  cursor: pointer;
-  padding: 12px 10px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-  &.active {
-    color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
-  }
-
-  &:hover {
-    &:not(&.active) {
-      background-color: var(--el-color-info-light-7);
-    }
-  }
-}
-</style>

src/views/ai/model/embedding/composables/index.ts

@@ -0,0 +1,102 @@
+import {ElTag} from "element-plus";
+import {ref} from "vue";
+import {ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
+import {FormSchema} from "@/types/form";
+
+export default function () {
+  const LLMProviders: any[] = [
+    {
+      model: ProviderEnum.OPENAI,
+      name: 'OpenAI',
+      models: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002'],
+    },
+    {
+      model: ProviderEnum.Q_FAN,
+      name: '百度千帆',
+      models: ['bge-large-zh', 'bge-large-en', 'tao-8k'],
+    },
+    {
+      model: ProviderEnum.Q_WEN,
+      name: '阿里百炼',
+      models: ['text-embedding-v3'],
+    },
+    {
+      model: ProviderEnum.ZHIPU,
+      name: '智谱清言',
+      models: ['embedding-2', 'embedding-3'],
+    },
+    {
+      model: ProviderEnum.DOUYIN,
+      name: '抖音豆包',
+      models: ['text-240715', 'text-240515'],
+    },
+    {
+      model: ProviderEnum.OLLAMA,
+      name: 'Ollama',
+      models: ['text2vec-bge-large-chinese:latest'],
+    },
+  ];
+  const baseColumns = [
+    {
+      label: '模型别名',
+     field: 'name',
+    },
+    {
+      label: '模型版本',
+     field: 'model',
+      width: '160',
+    },
+    {
+      label: '向量纬度',
+     field: 'dimension',
+      align: 'center',
+      width: '100',
+      render(row) {
+        return h(
+          ElTag,
+          {
+            size: 'small',
+          },
+          {
+            default: () => row.dimension,
+          }
+        );
+      },
+    },
+    {
+      label: 'Api Key',
+     field: 'apiKey',
+    },
+    {
+      label: 'Base Url',
+     field: 'baseUrl',
+    },
+  ];
+  const tableData = ref([
+  ])
+  const shema = ref<FormSchema[]>([
+    {
+      label: '模型名称',
+      field: 'name',
+      component: 'Select',
+      colProps: {
+        span: 6
+      },
+      componentProps: {
+        style: {
+          width: '150px',
+        },
+        options: LLMProviders.map((item) => ({
+          label: item.name,
+          value: item.model,
+        })),
+      },
+
+    }
+  ])
+  return {
+    baseColumns,
+    shema,
+    tableData
+  }
+}

src/views/ai/model/embedding/index.vue

@@ -2,68 +2,25 @@
 
 import {Plus} from "@element-plus/icons-vue";
 import usePage from './composables/index'
-import Edit from "@/views/ai/model/embedding/edit.vue";
+const {shema, baseColumns: columns, tableData} = usePage()
-import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
-import {Table} from "@/components/Table";
-const { baseColumns: columns, tableData, formData, editRef, open} = usePage()
 </script>
 
 <template>
+  <content-wrap>
+    <Search :schema="shema"/>
+  </content-wrap>
   <ContentWrap>
-   <div class="children flex">
+    <el-alert
-     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+      class="w-full mb-10px min-alert"
-       <div
+      title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
-         v-for="(item,index) in LLMProviders" :key="index"
+      type="info"
-         :class="{active: formData.provider === item.model}" class="menu"
+      show-icon
-         @click="formData.provider = item.model">
+    />
-         <span>{{ item.name }}</span>
+    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
-       </div>
+    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-     </el-scrollbar>
-     <div class="h-full flex-1 px-20px">
-       <el-alert
-         class="w-full mb-10px min-alert"
-         title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
-         type="info"
-         show-icon
-       />
-       <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
-       <Table class="table-wrapper" height="100%"  border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-     </div>
-   </div>
-    <Edit ref="editRef" />
   </ContentWrap>
 </template>
 
 <style scoped lang="scss">
-.children {
-  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
-  box-sizing: border-box;
 
-  & > div:nth-child(2) {
-    width: calc(100% - 300px);
-  }
-}
-
-.table-wrapper {
-  height: calc(100% - 100px);
-}
-
-.menu {
-  transition: all .15s;
-  cursor: pointer;
-  padding: 12px 10px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-
-  &.active {
-    color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
-  }
-
-  &:hover {
-    &:not(&.active) {
-      background-color: var(--el-color-info-light-7);
-    }
-  }
-}
 </style>

src/views/ai/model/image/composables/index.ts

@@ -0,0 +1,110 @@
+export default function () {
+  enum ProviderEnum {
+    OPENAI = 'OPENAI',
+    AZURE_OPENAI = 'AZURE_OPENAI',
+    ZHIPU = 'ZHIPU',
+  }
+
+  const LLMProviders: any[] = [
+    {
+      model: ProviderEnum.OPENAI,
+      name: 'OpenAI',
+      models: ['dall-e-2', 'dall-e-3'],
+    },
+    {
+      model: ProviderEnum.AZURE_OPENAI,
+      name: 'Azure OpenAI',
+      models: ['dall-e-2', 'dall-e-3'],
+    },
+    {
+      model: ProviderEnum.ZHIPU,
+      name: '智谱清言',
+      models: ['cogview-3'],
+    },
+  ]
+  const formData = ref({
+    provider: ProviderEnum.OPENAI,
+  });
+  const tableData = ref([])
+  const shema = ref([
+    {
+      field: 'provider',
+      label: '模型别名',
+      component: 'Select',
+      required: true,
+      componentProps: {
+        placeholder: '请输入模型别名',
+        style: {
+          width: '180px',
+        },
+        options: LLMProviders.map((item) => ({
+          label: item.name,
+          value: item.model,
+        })),
+      },
+    },
+  ])
+
+   const baseColumns = [
+    {
+     label: '模型别名',
+     field: 'name',
+    },
+    {
+     label: '模型版本',
+     field: 'model',
+    },
+  ];
+
+   const openaiColumns = [
+    ...baseColumns,
+    {
+     label: 'Api Key',
+     field: 'apiKey',
+    },
+  ];
+
+   const azureOpenaiColumns = [
+    ...baseColumns,
+    {
+     label: 'Api Key',
+     field: 'apiKey',
+    },
+    {
+     label: 'Endpoint',
+     field: 'endpoint',
+    },
+    {
+     label: 'Deployment Name',
+     field: 'azureDeploymentName',
+    },
+  ];
+
+   const zhipuColumns = [...baseColumns];
+  function getColumns(provider: string) {
+    console.log(provider);
+    switch (provider) {
+      case ProviderEnum.OPENAI: {
+        return openaiColumns;
+      }
+      case ProviderEnum.AZURE_OPENAI: {
+        return azureOpenaiColumns;
+      }
+      case ProviderEnum.ZHIPU: {
+        return zhipuColumns;
+      }
+    }
+    return [];
+  }
+  const columns = computed(() => {
+    nextTick();
+    return getColumns(formData.value.provider)
+  });
+  return {
+    LLMProviders,
+    columns,
+    tableData,
+    shema,
+    formData
+  }
+}

src/views/ai/model/image/index.vue

@@ -2,70 +2,25 @@
 
 import {Plus} from "@element-plus/icons-vue";
 import usePage from './composables/index'
-import {LLMProviders} from "@/views/ai/model/image/composables/consts";
+const {shema, columns, tableData, formData} = usePage()
-import Edit from './edit.vue'
-
-const {columns, tableData, formData, editRef, open} = usePage()
 </script>
 
 <template>
+  <content-wrap>
+    <Search :schema="shema" :model="formData" @search="(model) => formData.provider = model.provider"/>
+  </content-wrap>
   <ContentWrap>
-    <div class="children flex">
+    <el-alert
-      <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+      class="w-full mb-10px min-alert"
-        <div
+      title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
-          v-for="(item,index) in LLMProviders" :key="index"
+      type="info"
-          :class="{active: formData.provider === item.model}" class="menu"
+      show-icon
-          @click="formData.provider = item.model">
+    />
-          <span>{{ item.name }}</span>
+    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
-        </div>
+    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-      </el-scrollbar>
-      <div class="h-full  p-20px">
-        <el-alert
-          class="w-full mb-10px min-alert"
-          show-icon
-          title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
-          type="info"
-        />
-        <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增向量模型
-        </el-button>
-        <Table :columns="columns" :data="tableData.concat(tableData)" :pagination="false" border
-               class="table-wrapper" height="100%"/>
-      </div>
-    </div>
-    <Edit ref="editRef"/>
   </ContentWrap>
 </template>
 
 <style scoped lang="scss">
-.children {
-  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
-  box-sizing: border-box;
 
-  & > div:nth-child(2) {
-    width: calc(100% - 300px);
-  }
-}
-
-.table-wrapper {
-  height: calc(100% - 100px);
-}
-
-.menu {
-  transition: all .15s;
-  cursor: pointer;
-  padding: 12px 10px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-
-  &.active {
-    color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
-  }
-
-  &:hover {
-    &:not(&.active) {
-      background-color: var(--el-color-info-light-7);
-    }
-  }
-}
 </style>