模型配置

src/components/SvgIcon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="svg-icon">
-    <svg aria-hidden="true" :style="`width: ${size}px;height: ${size}px;transform: rotate(${rotate}deg);`">
+    <svg aria-hidden="true" :style="`width: ${size}px;height: ${size}px;transform: rotate(${rotate}deg); margin-bottom: 1px;`">
       <use :xlink:href="symbolId" :fill="colorCpt" />
     </svg>
   </div>

src/style/czr.scss

@@ -229,7 +229,7 @@
           .__czr-dialog-content {
             flex: 1;
             overflow-y: auto;
-            padding: 1rem 1.5rem;
+            padding: 1rem 1.5rem 0;
           }
           .__czr-dialog-foot {
             width: 100%;
@@ -237,7 +237,7 @@
             align-items: center;
             box-sizing: border-box;
             gap: 1rem;
-            margin-bottom: 1rem;
+            margin: 1rem 0;
           }
           &.isFull {
             overflow-y: auto;

src/views/manage/knowledge/detail.vue

@@ -5,7 +5,7 @@
     @onClose="$emit('update:show', false)"
     width="62.5rem"
     height="auto"
-    max-height="36rem"
+    max-height="90%"
     :loading="state.loading"
     :show-submit="false"
     :show-close="false"
@@ -43,6 +43,7 @@
           :options="DictionaryStore.knowledgeGroups.list"
         />
       </CzrForm>
+      <modelConfig :transfer="state.modelConfigTransfer"/>
     </div>
   </CzrDialog>
 </template>
@@ -52,6 +53,7 @@ import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue"
 import {ElMessage, ElMessageBox} from "element-plus";
 import {useDialogStore, useDictionaryStore} from "@/stores";
 import {useRouter} from "vue-router";
+import modelConfig from './model-config.vue'
 
 const router = useRouter()
 const DictionaryStore = useDictionaryStore();
@@ -64,7 +66,8 @@ const props = defineProps({
 })
 const state: any = reactive({
   loading: false,
-  form: {}
+  form: {},
+  modelConfigTransfer: null
 })
 const ref_form = ref()
 const titleCpt = computed(() => {

src/views/manage/knowledge/model-config.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="__czr-title_1 mb-[0.5rem]">索引方式</div>
+  <div class="w-full flex gap-[1rem]">
+    <div class="__hover flex-1 h-[8.38rem] rounded-[var(--czr-gap)] px-[1.5rem] py-[1rem] bg-[#ffffff]"
+         style="border: var(--czr-border); border-width: 0.13rem"
+         :class="{'index-method-active': state.indexMethod === 1}"
+         @click="state.indexMethod = 1">
+      <div class="flex items-center">
+        <img src="@/assets/images/model-icon-1.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
+        <div class="text-[#2E3238] text-[1.25rem] font-bold">高质量</div>
+        <img src="@/assets/images/model-icon-3.png" class="w-[2.88rem] h-[1.27rem]"/>
+      </div>
+      <div class="text-[#606266] text-[0.88rem] mt-[0.5rem]" style="line-height: 1.3rem">调用嵌入模型来处理文档以实现更精确的检索，可以帮助大语言模型生成高质量的回答。</div>
+    </div>
+    <div class="__hover flex-1 h-[8.38rem] rounded-[var(--czr-gap)] px-[1.5rem] py-[1rem] bg-[#ffffff]"
+         style="border: var(--czr-border); border-width: 0.13rem"
+         :class="{'index-method-active': state.indexMethod === 2}"
+         @click="state.indexMethod = 2">
+      <div class="flex items-center">
+        <img src="@/assets/images/model-icon-2.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
+        <div class="text-[#2E3238] text-[1.25rem] font-bold">经济</div>
+      </div>
+      <div class="text-[#606266] text-[0.88rem] mt-[0.5rem]" style="line-height: 1.3rem">每个块使用 10 个关键词进行检索，不消耗 tokens，但会降低检索准确性。</div>
+    </div>
+  </div>
+  <div v-if="state.indexMethod === 1"
+       class="flex items-center gap-[0.5rem] w-full h-[2.5rem] px-[0.75rem] rounded-[0.25rem] text-[#666666] text-[0.8rem] mt-[var(--czr-gap)]"
+       style="border: var(--czr-border); border-color: var(--czr-warning-color); background-color: rgba(var(--czr-warning-color-rgb), 0.1)">
+    <SvgIcon name="czr_tip" color="var(--czr-warning-color)"/>使用高质量模式进行嵌入后，无法切换回经济模式。
+  </div>
+  <div class="__czr-title_1 mb-[0.5rem]">embedding模型</div>
+  <CzrFormColumn
+    :span="24"
+    label="模型类型"
+    v-model:param="state.modelType"
+    link="select"
+    :options="[]"
+    :clearable="false"
+  />
+  <div class="__czr-title_1">检索方式</div>
+  <div class="__hover w-full rounded-[var(--czr-gap)] mt-[1rem] bg-[#ffffff]"
+       style="border: var(--czr-border); border-width: 0.13rem"
+       :class="{'search-method-active': state.searchMethod === 1}"
+       @click="state.searchMethod = 1">
+    <div class="w-full h-full px-[1.5rem] py-[1rem]">
+      <div class="flex items-center">
+        <img src="@/assets/images/model-icon-4.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
+        <div class="text-[#2E3238] text-[1.25rem] font-bold">向量检索</div>
+      </div>
+      <div class="text-[#606266] text-[0.88rem] mt-[0.5rem]" style="line-height: 1.3rem">通过生成查询嵌入并查询与其向量表示最相似的文本分段</div>
+    </div>
+  </div>
+  <div class="__hover w-full rounded-[var(--czr-gap)] mt-[1rem] bg-[#ffffff]"
+       style="border: var(--czr-border); border-width: 0.13rem"
+       :class="{'search-method-active': state.searchMethod === 2}"
+       @click="state.searchMethod = 2">
+    <div class="w-full h-full px-[1.5rem] py-[1rem]">
+      <div class="flex items-center">
+        <img src="@/assets/images/model-icon-5.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
+        <div class="text-[#2E3238] text-[1.25rem] font-bold">全文检索</div>
+      </div>
+      <div class="text-[#606266] text-[0.88rem] mt-[0.5rem]" style="line-height: 1.3rem">索引文档中的所有词汇，从而允许用户查询任意词汇，并返回包含这些词汇的文本片段</div>
+    </div>
+  </div>
+  <div class="__hover w-full rounded-[var(--czr-gap)] mt-[1rem] bg-[#ffffff]"
+       style="border: var(--czr-border); border-width: 0.13rem"
+       :class="{'search-method-active': state.searchMethod === 3}"
+       @click="state.searchMethod = 3">
+    <div class="w-full h-full px-[1.5rem] py-[1rem]">
+      <div class="flex items-center">
+        <img src="@/assets/images/model-icon-6.png" class="w-[3.25rem] h-[3.25rem] mr-[var(--czr-gap)]"/>
+        <div class="text-[#2E3238] text-[1.25rem] font-bold">混合检索</div>
+        <img src="@/assets/images/model-icon-3.png" class="w-[2.88rem] h-[1.27rem]"/>
+      </div>
+      <div class="text-[#606266] text-[0.88rem] mt-[0.5rem]" style="line-height: 1.3rem">同时执行全文检索和向量检索，并应用重排序步骤，从两类查询结果中选择匹配用户问题的最佳结果，用户可以选择设置权重或配置重新排序模型。</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref, watch} from "vue";
+
+const emit = defineEmits([])
+const props = defineProps({
+  transfer: <any>{}
+})
+const {proxy}: any = getCurrentInstance()
+const state: any = reactive({
+  indexMethod: 1,
+  modelType: 1,
+  searchMethod: 1,
+})
+watch(() => props.transfer, (n) => {
+  if (n) {
+    // 初始化
+  }
+}, {immediate: true})
+</script>
+
+<style lang="scss" scoped>
+.index-method-active {
+  box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40,83,247,0.05);
+  border-color: var(--czr-main-color) !important;
+  background-color: rgba(var(--czr-main-color-rgb), 0.1);
+}
+.search-method-active {
+  box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40,83,247,0.05);
+  border-color: var(--czr-main-color) !important;
+  background-color: rgba(var(--czr-main-color-rgb), 0.1);
+  background-image: url("@/assets/images/model-icon-7.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+</style>

src/views/manage/knowledge/tags-select.vue

@@ -74,7 +74,7 @@
     :show-submit="false"
     :show-close="false"
   >
-    <div class="bm-form flex flex flex-wrap gap-2">
+    <div class="bm-form flex flex flex-wrap gap-2 mb-[1rem]">
       <template v-for="item in DictionaryStore.knowledgeTags.list">
         <template v-if="item.__edit">
           <div class="w-[17rem] border border-[var(--czr-border-color)] rounded">