派生自 web/flow_web
src/views/dmx/knowledgeLib/tool.vue
@@ -1,4 +1,3 @@ <template> <a-button type="text" @click="handleClick" size="small"> <template #icon> @@ -7,127 +6,361 @@ </a-button> <a-modal v-model:visible="visible" title="解析方法" title=" " @before-open="handleOpened" @cancel="handleCancel" @opened="handleOpened" :footer="false" title-align="start" width="700px" width="900px" > <div style="display: flex;align-items: center;"> <div> 解析方法: </div> <div style="margin-left: 10px"> <a-select v-model="form.parser_id" placeholder="请选择" width="200px"> <a-option v-for="item in parser_ids" :key="item.value" :label="item.name" :value="item.value"></a-option> </a-select> </div> </div> <a-form ref="formRef" :rules="rules" :model="form" auto-label-width @submit="handleSubmit" > <a-divider style="margin-top: 10px" /> <a-form-item field="slider" label="块token数" :rules="[{type:'number', min:1,message:'slider is min than 1'}]"> <a-slider v-model="form.chunk_token_num" :max="1000" /> <a-input-number v-model="form.chunk_token_num" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="请输入" class="input-demo" :max="1000" /> </a-form-item> <a-divider style="margin-top: 10px" /> <a-form-item field="raptor" label="使用召回增强RAPTOR策略"> <a-space direction="vertical" size="large"> <a-switch v-model="form.use_raptor" @change="onChangeRAPTOR" /> </a-space> </a-form-item> <div v-if="form.use_raptor"> <a-form-item field="prompt" label="提示词"> <a-textarea v-model="form.prompt" style="height: 10rem;border: 1px solid var(--color-fill-3);border-radius: 4px" placeholder="请填写提示词" /> </a-form-item> <a-form-item field="slider" label="最大token数" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.max_token" :min="1" :max="1000"/> <a-input-number v-model="form.max_token" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="1000" /> </a-form-item> <a-form-item field="slider" label="阈值" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.threshold" :max="1" /> <a-input-number v-model="form.threshold" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="0" :max="1" /> </a-form-item> <a-form-item field="slider" label="最大聚类数" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-slider v-model="form.max_cluster" :max="1000" /> <a-input-number v-model="form.max_cluster" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}" placeholder="Please Enter" class="input-demo" :min="10" :max="1000" /> </a-form-item> <a-form-item field="slider" label="随机种子" v-model="form.random_seed" :rules="[{type:'number', min:5,message:'slider is min than 5'}]"> <a-input-number v-model="form.random_seed" :style="{width:'300px',marginRight:'1rem',borderRadius:'4px'}" placeholder="请输入" class="input-demo" :min="10" :max="100" /> <a-button type="primary" @click="randomNumber"> <icon-plus /> </a-button> </a-form-item> </div> <a-form-item> <div style="width: 100%;text-align: right"> <a-button @click="visible = false">取消</a-button> <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button> <a-tabs default-active-key="1"> <a-tab-pane key="1"> <template #title> <icon-calendar /> 解析方法 </template> <div style="width: 100%"> <div style="display: flex; align-items: center"> <div> 解析方法: </div> <div style="margin-left: 10px"> <a-select v-model="form.parser_id" placeholder="请选择"> <a-option v-for="item in parser_ids" :key="item.value" :label="item.name" :value="item.value" ></a-option> </a-select> </div> </div> <div class="parser"> <a-form ref="formRef" :rules="rules" :model="form" auto-label-width @submit="handleSubmit" > <a-divider style="margin-top: 10px" /> <a-form-item field="slider" label="块token数" :rules="[ { type: 'number', min: 1, message: 'slider is min than 1' }, ]" > <a-slider v-model="form.chunk_token_num" :max="1000" show-input /> </a-form-item> <a-divider style="margin-top: 10px" /> <a-form-item field="raptor" label="使用召回增强RAPTOR策略"> <a-space direction="vertical" size="large"> <a-switch v-model="form.use_raptor" @change="onChangeRAPTOR" /> </a-space> </a-form-item> <div v-if="form.use_raptor"> <a-form-item field="prompt" label="提示词"> <a-textarea v-model="form.prompt" style=" height: 10rem; border: 1px solid var(--color-fill-3); border-radius: 4px; " placeholder="请填写提示词" /> </a-form-item> <a-form-item field="slider" label="最大token数" :rules="[ { type: 'number', min: 5, message: 'slider is min than 5' }, ]" > <a-slider v-model="form.max_token" :min="1" :max="1000" show-input /> </a-form-item> <a-form-item field="slider" label="阈值" :rules="[ { type: 'number', min: 5, message: 'slider is min than 5' }, ]" > <a-slider v-model="form.threshold" show-tooltip show-input /> </a-form-item> <a-form-item field="slider" label="最大聚类数" :rules="[ { type: 'number', min: 5, message: 'slider is min than 5' }, ]" > <a-slider v-model="form.max_cluster" :max="1000" show-input /> </a-form-item> <a-form-item field="slider" label="随机种子" v-model="form.random_seed" :rules="[ { type: 'number', min: 5, message: 'slider is min than 5' }, ]" > <a-input-number v-model="form.random_seed" :style="{ width: '300px', marginRight: '1rem', borderRadius: '4px', }" placeholder="请输入" class="input-demo" :min="10" :max="100" /> <a-button type="primary" @click="randomNumber"> <icon-plus /> </a-button> </a-form-item> </div> <a-form-item> <div style="width: 100%; text-align: right"> <a-button @click="visible = false">取消</a-button> <a-button style="margin-left: 10px" type="primary" html-type="submit" >确定</a-button > </div> </a-form-item> </a-form> </div> </div> </a-form-item> </a-form> </a-tab-pane> <a-tab-pane key="2"> <template #title> <icon-clock-circle /> 创建解析块 </template> <div class="details"> <div class="details-header"> <div style=" display: flex; align-items: center; justify-content: flex-end; " > <a-radio-group v-model="radio" type="button" style="margin-right: 10px" @change="onRadioChange" > <a-radio value="1">全文</a-radio> <a-radio value="2">省略</a-radio> </a-radio-group> <a-popover position="bottom"> <a-button type="outline" class="button" style="margin-right: 10px" >批量<icon-down style="margin-left: 4px" /></a-button> <template #content> <a-space direction="vertical"> <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll" style="margin-left: 10px" > 选择所有 </a-checkbox> </a-space> <a-divider style="margin: 10px 0" /> <p> <a-button type="text" class="button" style="color: #2a2a2b"> <template #icon> <icon-check-circle /> </template> 启用选定的 </a-button> </p> <p> <a-button type="text" class="button" style="color: #2a2a2b"> <template #icon> <icon-close-circle /> </template> 禁用选定的 </a-button> </p> <a-divider style="margin: 10px 0" /> <p> <a-button type="text" class="button" style="color: #2a2a2b"> <template #icon> <icon-delete /> </template> 删除选定的 </a-button> </p> </template> </a-popover> <a-button type="outline" class="button" style="margin-right: 10px" > <template #icon> <icon-search /> </template> </a-button> <a-popover position="bottom"> <a-button type="outline" class="button" style="margin-right: 10px" ><icon-sort /></a-button> <template #content> <a-radio-group v-model="available_int" direction="vertical" size="large" @change="onChangeavailable" > <a-radio value="">所有</a-radio> <a-radio value="1">启用</a-radio> <a-radio value="0">禁用</a-radio> </a-radio-group> </template> </a-popover> <addDetails :item="item"></addDetails> </div> </div> <a-divider style="margin-top: 10px" /> <div class="groupMain"> <a-checkbox-group v-model="data" @change="handleChange"> <div class="groupList" :style="{ background: keyBg == '1' ? '#eff8ff' : 'white' }" > <a-checkbox value="1"></a-checkbox> <div class="groupList-content" @click="groupListContentClick('1')" @dblclick="contentClick(1)" > 而 stable version 是最新稳定版，经过充分测试和验证，bug 较少， 适合用于生产环境。其版本号通常为双数，如 1.26。legacy versions 则是之前发布的稳定版，对于需要 特定旧版本的兼容性或安全性支持的用户有用，但一般不 推荐用于新项目，除非有特殊需求。在实际使用中，如果追求最新功能 且愿意面对可能存在的一些不稳定因素，可以尝试使用主线版本进行测试和研究；如果是用于生产环境 </div> <div class="groupList-right"> <a-switch v-model="switchType" checked-value="1" unchecked-value="0" @change="handleChangeStatus()" /> </div> </div> <div class="groupList" :style="{ background: keyBg == '2' ? '#eff8ff' : 'white' }" > <a-checkbox value="1"></a-checkbox> <div class="groupList-content" @click="groupListContentClick('2')" @dblclick="contentClick(1)" > 而 stable version 是最新稳定版，经过充分测试和验证，bug 较少， 适合用于生产环境。其版本号通常为双数，如 1.26。legacy versions 则是之前发布的稳定版，对于需要 </div> <div class="groupList-right"> <a-switch v-model="switchType" checked-value="1" unchecked-value="0" @change="handleChangeStatus()" /> </div> </div> </a-checkbox-group> </div> </div> <eidtDetails ref="eidtDil"></eidtDetails> </a-tab-pane> </a-tabs> </a-modal> </template> <script lang="ts" setup> import { onMounted ,onBeforeMount, reactive, ref } from "vue"; import { Message } from "@arco-design/web-vue"; import {kbdocumentchangeparser} from "@/api/kbList"; const visible = ref(false); const loading = ref(false); import { onMounted, onBeforeMount, reactive, ref, computed } from 'vue'; import { Message } from '@arco-design/web-vue'; import { kbdocumentchangeparser } from '@/api/kbList'; import addDetails from '@/views/dmx/knowledgeLib/addDetails.vue'; import eidtDetails from '@/views/dmx/knowledgeLib/eidtDetails.vue'; const visible = ref(false); const loading = ref(false); const radio = ref('1'); const keyBg = ref(''); const eidtDil = ref(); const props = defineProps(['kbtenantInfo','item','kbdetail']) // const emit = defineEmits(['upTabdateItem']) const props = defineProps(['kbtenantInfo', 'item', 'kbdetail']); // const emit = defineEmits(['upTabdateItem']) const kbtenantInfo = props.kbtenantInfo; let threshold = computed(() => { return form.threshold / 100; }); let parser_ids = kbtenantInfo.parser_ids.split(',').map((item) => { const [value1, value2] = item.split(':'); return { name: value2, value: value1, const kbtenantInfo = props.kbtenantInfo; let parser_ids = kbtenantInfo.parser_ids.split(',').map((item) => { const [value1, value2] = item.split(':'); return { name: value2, value: value1, }; }); const form = reactive({ parser_id: props.item.parser_id, doc_id: props.item.id, max_token: 698, threshold: 30, max_cluster: 233, random_seed: 1500, chunk_token_num: 128, use_raptor: false, pages: {}, prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' + ' {cluster_content}\n' + '以上就是你需要总结的内容。', }); const formRef = ref(null); const rules = { prompt: [ { required: true, message: '提示词不允许为空', }, ], }; }); const form = reactive({ parser_id: props.item.parser_id, doc_id: props.item.id, max_token: 698, threshold: 0.32, max_cluster: 233, random_seed: 1500, chunk_token_num: 128, use_raptor: false, pages: {}, prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' + ' {cluster_content}\n' + '以上就是你需要总结的内容。', }); const formRef = ref(null); const rules = { prompt: [ { required: true, message:'提示词不允许为空', }, ], } const formatter = (value) => { return value / 100; }; function randomNumber() { // 生成一个介于min和max之间的随机整数（包含min和max） const min = 1; // 最小值 @@ -135,85 +368,147 @@ form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min; } const handleSubmit = async ({values, errors}) => { if(!errors){ let data = await kbdocumentchangeparser({ parser_id: form.parser_id, doc_id: form.doc_id, parser_config: { raptor: { use_raptor: form.use_raptor, prompt: form.prompt, max_token: form.max_token, threshold: form.threshold, max_cluster: form.max_cluster, random_seed: form.random_seed, const handleSubmit = async ({ values, errors }) => { if (!errors) { let data = await kbdocumentchangeparser({ parser_id: form.parser_id, doc_id: form.doc_id, parser_config: { raptor: { use_raptor: form.use_raptor, prompt: form.prompt, max_token: form.max_token, threshold: form.threshold, max_cluster: form.max_cluster, random_seed: form.random_seed, }, chunk_token_num: form.chunk_token_num, pages: [], }, chunk_token_num: form.chunk_token_num, pages: [ ] }); if (data.code == 0) { Message.success('配置成功'); } else { Message.error('配置失败'); } }) if(data.code == 0){ Message.success('配置成功'); }else{ Message.error('配置失败'); visible.value = false; } }; const handleClick = () => { visible.value = true; }; const handleCancel = () => { visible.value = false; } } }; const handleClick = () => { visible.value = true; }; const handleBeforeOk = (done) => { formRef.value.validate().then(res => { console.log('form:', form) if (!form.name) { done(false) }else { console.log('请求数据'); const contentClick = (done) => { eidtDil.value.handleClick(); }; const handleOpened = (el) => { // console.log('props',props.kbtenantInfo); // console.log('props',props.item); // console.log('props',props.kbdetail); console.log(parser_ids, 'parser_ids'); // Object.assign(form,{ // name: '',// 用户名 // nameJoin: '',// 昵称 // post: '',// 岗位 // txt: '',// 备注 // }); // formRef.value.resetFields(); console.log(props.item.id); }; const onChangeRAPTOR = () => {}; const indeterminate = ref(false); const checkedAll = ref(false); const data = ref([]); const switchType = ref(false); const available_int = ref(''); const onRadioChange = () => { console.log(radio.value); }; const handleChangeAll = (value) => { indeterminate.value = false; if (value) { checkedAll.value = true; data.value = ['1', '2', '3']; } else { checkedAll.value = false; data.value = []; } }) }; const handleCancel = () => { visible.value = false; } }; const handleOpened =(el) => { console.log('props',props.kbtenantInfo); console.log('props',props.item); console.log('props',props.kbdetail); console.log(parser_ids, 'parser_ids'); // Object.assign(form,{ // name: '',// 用户名 // nameJoin: '',// 昵称 // post: '',// 岗位 // txt: '',// 备注 // }); // formRef.value.resetFields(); } const handleChange = (values) => { if (values.length === 3) { checkedAll.value = true; indeterminate.value = false; } else if (values.length === 0) { checkedAll.value = false; indeterminate.value = false; } else { checkedAll.value = false; indeterminate.value = true; } }; const onChangeRAPTOR = () => { const groupListContentClick = (value) => { keyBg.value = value; }; }; const onChangeavailable = () => { console.log(available_int.value); }; onBeforeMount(()=>{ const handleChangeStatus = () => { console.log(switchType.value); }; }) onMounted(()=>{ }) onBeforeMount(() => {}); onMounted(() => {}); </script> <script lang="ts"> export default { name: 'add', methods: { <style scoped lang="less"> .parser { width: 100%; ::v-deep .arco-btn-outline:hover, .arco-btn-outline, .arco-btn-outline[type='button'] { color: #2a2a2b; border: 1px solid #2a2a2b; } .button { //color: #2a2a2b!important; } } }; </script> .groupMain { width: 100%; height: 500px; overflow: auto; display: flex; justify-content: center; .groupList { display: flex; padding: 24px; border-radius: 8px; //background: #eff8ff; border: 1px solid #f0f0f0; margin-bottom: 20px; overflow: auto; .groupList-content { width: 700px; //height: 100px; overflow: auto; box-sizing: border-box; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.88); font-size: 14px; font-family: Inter; position: relative; } } } </style>
