From c257fb1d2238aae76331ad4d1ad8cfe667493718 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期一, 12 八月 2024 18:03:02 +0800 Subject: [PATCH] 知识库,智能体样式修改 --- src/views/dmx/knowledgeLib/tool.vue | 542 ++++++++++++++++++++++++++++++++++------------------- 1 files changed, 349 insertions(+), 193 deletions(-) diff --git a/src/views/dmx/knowledgeLib/tool.vue b/src/views/dmx/knowledgeLib/tool.vue index 1418515..e78e42c 100644 --- a/src/views/dmx/knowledgeLib/tool.vue +++ b/src/views/dmx/knowledgeLib/tool.vue @@ -15,10 +15,13 @@ > <a-tabs default-active-key="1"> <a-tab-pane key="1"> - <template #title> <icon-calendar /> 瑙f瀽鏂规硶 </template> + <template #title> + <icon-calendar /> + 瑙f瀽鏂规硶 + </template> <div style="width: 100%"> <div style="display: flex; align-items: center"> - <div> 瑙f瀽鏂规硶: </div> + <div> 瑙f瀽鏂规硶:</div> <div style="margin-left: 10px"> <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨"> <a-option @@ -38,67 +41,85 @@ auto-label-width @submit="handleSubmit" > - <a-divider style="margin-top: 10px" /> + <a-divider + style="margin-top: 10px" + v-if="form.parser_id === 'naive'" + /> <a-form-item field="slider" - label="鍧梩oken鏁�" - :rules="[ - { type: 'number', min: 1, message: 'slider is min than 1' }, - ]" + label="鍧桾oken鏁�" + v-if="form.parser_id === 'naive'" > <a-slider v-model="form.chunk_token_num" - :max="1000" + :min="0" + :max="2048" 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-divider + style="margin-top: 10px" + v-if=" + form.parser_id === 'naive' || + form.parser_id === 'qa' || + form.parser_id === 'manual' || + form.parser_id === 'laws' || + form.parser_id === 'book' + " + /> + <a-form-item + field="raptor" + label="浣跨敤鍙洖澧炲己RAPTOR绛栫暐" + v-if=" + form.parser_id === 'naive' || + form.parser_id === 'qa' || + form.parser_id === 'manual' || + form.parser_id === 'laws' || + form.parser_id === 'book' + " + > + <a-switch + v-model="form.use_raptor" + @change="onChangeRAPTOR" + size="small" + /> </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="鏈�澶oken鏁�" - :rules="[ - { type: 'number', min: 5, message: 'slider is min than 5' }, - ]" - > + <a-form-item field="slider" label="鏈�澶oken鏁�"> <a-slider v-model="form.max_token" - :min="1" - :max="1000" + :min="0" + :max="2048" 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 field="slider" label="闃堝��"> + <a-slider + v-model="form.threshold" + :step="0.01" + :min="0" + :max="1" + 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 field="slider" label="鏈�澶ц仛绫绘暟"> + <a-slider + v-model="form.max_cluster" + :min="1" + :max="1024" + show-input + /> </a-form-item> <a-form-item field="slider" @@ -132,8 +153,8 @@ style="margin-left: 10px" type="primary" html-type="submit" - >纭畾</a-button - > + >纭畾 + </a-button> </div> </a-form-item> </a-form> @@ -141,7 +162,10 @@ </div> </a-tab-pane> <a-tab-pane key="2"> - <template #title> <icon-clock-circle /> 鍒涘缓瑙f瀽鍧� </template> + <template #title> + <icon-clock-circle /> + 鍒涘缓瑙f瀽鍧� + </template> <div class="details"> <div class="details-header"> <div @@ -165,8 +189,9 @@ type="outline" class="button" style="margin-right: 10px" - >鎵归噺<icon-down style="margin-left: 4px" - /></a-button> + >鎵归噺 + <icon-down style="margin-left: 4px" /> + </a-button> <template #content> <a-space direction="vertical"> <a-checkbox @@ -180,7 +205,12 @@ </a-space> <a-divider style="margin: 10px 0" /> <p> - <a-button type="text" class="button" style="color: #2a2a2b"> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(1)" + > <template #icon> <icon-check-circle /> </template> @@ -188,7 +218,12 @@ </a-button> </p> <p> - <a-button type="text" class="button" style="color: #2a2a2b"> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(0)" + > <template #icon> <icon-close-circle /> </template> @@ -197,7 +232,12 @@ </p> <a-divider style="margin: 10px 0" /> <p> - <a-button type="text" class="button" style="color: #2a2a2b"> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="addBlock(3)" + > <template #icon> <icon-delete /> </template> @@ -206,10 +246,28 @@ </p> </template> </a-popover> + <a-space + direction="vertical" + size="large" + style="margin-right: 10px" + class="space_search" + v-show="!isBtn" + > + <a-input-search + :style="{ width: '220px' }" + v-model="form.keywords" + @input="getList()" + allow-clear + @clear.stop="getList()" + placeholder="鎼滅储" + /> + </a-space> <a-button type="outline" class="button" style="margin-right: 10px" + v-show="isBtn" + @click.stop="isBtn = !isBtn" > <template #icon> <icon-search /> @@ -220,8 +278,9 @@ type="outline" class="button" style="margin-right: 10px" - ><icon-sort - /></a-button> + > + <icon-sort /> + </a-button> <template #content> <a-radio-group v-model="available_int" @@ -229,121 +288,92 @@ size="large" @change="onChangeavailable" > - <a-radio value="">鎵�鏈�</a-radio> - <a-radio value="1">鍚敤</a-radio> - <a-radio value="0">绂佺敤</a-radio> + <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> + <addDetails + :item="item" + @canplaythrough="canplaythrough" + ></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> + <a-spin :loading="isLoading" :tip="tip"> + <a-checkbox-group v-model="data" @change="handleChange"> <div - class="groupList-content" - @click="groupListContentClick('1')" - @dblclick="contentClick(1)" + class="groupList" + :class="{ + groupActive: keyBg == index, + groupNoActive: keyBg != index, + }" + v-for="(item, index) in listData" + :key="index" > - 鑰� stable version 鏄渶鏂扮ǔ瀹氱増锛岀粡杩囧厖鍒嗘祴璇曞拰楠岃瘉锛宐ug 杈冨皯锛� - 閫傚悎鐢ㄤ簬鐢熶骇鐜銆傚叾鐗堟湰鍙烽�氬父涓哄弻鏁帮紝濡� 1.26銆俵egacy versions - 鍒欐槸涔嬪墠鍙戝竷鐨勭ǔ瀹氱増锛屽浜庨渶瑕� - 鐗瑰畾鏃х増鏈殑鍏煎鎬ф垨瀹夊叏鎬ф敮鎸佺殑鐢ㄦ埛鏈夌敤锛屼絾涓�鑸笉 - 鎺ㄨ崘鐢ㄤ簬鏂伴」鐩紝闄ら潪鏈夌壒娈婇渶姹傘�傚湪瀹為檯浣跨敤涓紝濡傛灉杩芥眰鏈�鏂板姛鑳� - 涓旀効鎰忛潰瀵瑰彲鑳藉瓨鍦ㄧ殑涓�浜涗笉绋冲畾鍥犵礌锛屽彲浠ュ皾璇曚娇鐢ㄤ富绾跨増鏈繘琛屾祴璇曞拰鐮旂┒锛涘鏋滄槸鐢ㄤ簬鐢熶骇鐜 + <a-checkbox :value="item.chunk_id"></a-checkbox> + <div + class="groupList-content emphaRed" + @click="groupListContentClick(index)" + @dblclick="contentClick(item)" + v-html="item.content_with_weight" + > + </div> + <div class="groupList-right"> + <a-switch + v-model="item.available_int" + :checked-value="1" + :unchecked-value="0" + @change="handleChangeStatus(item)" + size="small" + /> + </div> </div> - <div class="groupList-right"> - <a-switch - v-model="switchType" - checked-value="1" - unchecked-value="0" - @change="handleChangeStatus()" - /> - </div> - </div> - </a-checkbox-group> - </div> - <a-divider style="margin-top: 10px" /> - <div class="groupMain"> - <a-checkbox-group v-model="data" @change="handleChange"> - <div class="groupList"> - <a-checkbox value="1"></a-checkbox> - <div - class="groupList-content" - @click="groupListContentClick('1')" - @dblclick="contentClick(1)" - > - 鑰� stable version 鏄渶鏂扮ǔ瀹氱増锛岀粡杩囧厖鍒嗘祴璇曞拰楠岃瘉锛宐ug 杈冨皯锛� - 閫傚悎鐢ㄤ簬鐢熶骇鐜銆傚叾鐗堟湰鍙烽�氬父涓哄弻鏁帮紝濡� 1.26銆俵egacy versions - 鍒欐槸涔嬪墠鍙戝竷鐨勭ǔ瀹氱増锛屽浜庨渶瑕� - 鐗瑰畾鏃х増鏈殑鍏煎鎬ф垨瀹夊叏鎬ф敮鎸佺殑鐢ㄦ埛鏈夌敤锛屼絾涓�鑸笉 - 鎺ㄨ崘鐢ㄤ簬鏂伴」鐩紝闄ら潪鏈夌壒娈婇渶姹傘�傚湪瀹為檯浣跨敤涓紝濡傛灉杩芥眰鏈�鏂板姛鑳� - 涓旀効鎰忛潰瀵瑰彲鑳藉瓨鍦ㄧ殑涓�浜涗笉绋冲畾鍥犵礌锛屽彲浠ュ皾璇曚娇鐢ㄤ富绾跨増鏈繘琛屾祴璇曞拰鐮旂┒锛涘鏋滄槸鐢ㄤ簬鐢熶骇鐜 - </div> - <div class="groupList-right"> - <a-switch - v-model="switchType" - checked-value="1" - unchecked-value="0" - @change="handleChangeStatus()" - /> - </div> - </div> - - <div class="groupList"> - <a-checkbox value="1"></a-checkbox> - <div - class="groupList-content" - @click="groupListContentClick('2')" - @dblclick="contentClick(1)" - > - 鑰� stable version 鏄渶鏂扮ǔ瀹氱増锛岀粡杩囧厖鍒嗘祴璇曞拰楠岃瘉锛宐ug 杈冨皯锛� - 閫傚悎鐢ㄤ簬鐢熶骇鐜銆傚叾鐗堟湰鍙烽�氬父涓哄弻鏁帮紝濡� 1.26銆俵egacy versions - 鍒欐槸涔嬪墠鍙戝竷鐨勭ǔ瀹氱増锛屽浜庨渶瑕� - </div> - <div class="groupList-right"> - <a-switch - v-model="switchType" - checked-value="1" - unchecked-value="0" - @change="handleChangeStatus()" - /> - </div> - </div> - <div class="groupList-right"> - <a-switch - v-model="switchType" - checked-value="1" - unchecked-value="0" - @change="handleChangeStatus()" - /> - </div> - </a-checkbox-group> + </a-checkbox-group> + </a-spin> </div> </div> - <eidtDetails ref="eidtDil"></eidtDetails> + <eidtDetails + ref="eidtDil" + :item="eidtDilinfo" + v-model:eidtDilVisible="eidtDilVisible" + @canplaythrough="canplaythrough" + ></eidtDetails> </a-tab-pane> </a-tabs> </a-modal> </template> <script lang="ts" setup> - import { onMounted, onBeforeMount, reactive, ref, computed } from 'vue'; + import { + onMounted, + onBeforeMount, + reactive, + ref, + computed, + watch, + } from 'vue'; import { Message } from '@arco-design/web-vue'; - import { kbdocumentchangeparser } from '@/api/kbList'; + import { + kbdocumentchangeparser, + achunkCreate, + queryChunkList, + chunkSwitch, + chunkRm, + achunkGet, + } 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 eidtDilVisible = ref(false); + const eidtDilinfo = reactive({}); const props = defineProps(['kbtenantInfo', 'item', 'kbdetail']); // const emit = defineEmits(['upTabdateItem']) @@ -362,15 +392,45 @@ }; }); + // 杩囨护瑙f瀽鏂规硶 + + const filterParserArr = [ + 'naive', + 'qa', + 'resume', + 'manual', + 'book', + 'laws', + 'one', + ]; + + const isBtn = ref(true); + + const closeSlelct = () => { + window.addEventListener('click', (event) => { + if (!event.target.closest('.space_search') && !isBtn.value) { + isBtn.value = true; + // form.keywords = ''; + } + }); + }; + + watch(isBtn, (val) => { + if (!val) { + closeSlelct(); + } + }); + const form = reactive({ - parser_id: props.item.parser_id, + parser_id: '', doc_id: props.item.id, max_token: 698, - threshold: 30, + threshold: 0.3, max_cluster: 233, random_seed: 1500, chunk_token_num: 128, use_raptor: false, + keywords: '', pages: {}, prompt: '璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n' + @@ -386,9 +446,13 @@ }, ], }; + + const listData = ref([]); + const formatter = (value) => { return value / 100; }; + function randomNumber() { // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛� const min = 1; // 鏈�灏忓�� @@ -430,14 +494,30 @@ visible.value = false; }; - const contentClick = (done) => { - eidtDil.value.handleClick(); + const contentClick = async (item) => { + try { + const data = await achunkGet({ + chunk_id: item.chunk_id, + }); + // console.log(data.data); + Object.assign(eidtDilinfo, data.data); + eidtDilVisible.value = true; + } catch (error) { + Message.error('鑾峰彇澶辫触'); + } }; const handleOpened = (el) => { // console.log('props',props.kbtenantInfo); - // console.log('props',props.item); + console.log('props', props.item); // console.log('props',props.kbdetail); console.log(parser_ids, 'parser_ids'); + let parser_id = props.item.parser_id; + parser_ids.forEach((item) => { + if (item.name == parser_id) { + form.parser_id = item.value; + } + }); + // Object.assign(form,{ // name: '',// 鐢ㄦ埛鍚� // nameJoin: '',// 鏄电О @@ -458,11 +538,14 @@ const onRadioChange = () => { console.log(radio.value); }; + //鎵归噺鎿嶄綔 const handleChangeAll = (value) => { indeterminate.value = false; if (value) { checkedAll.value = true; - data.value = ['1', '2', '3']; + listData.value.forEach((item) => { + data.value.push(item.chunk_id); + }); } else { checkedAll.value = false; data.value = []; @@ -470,15 +553,33 @@ }; const handleChange = (values) => { - if (values.length === 3) { - checkedAll.value = true; - indeterminate.value = false; - } else if (values.length === 0) { - checkedAll.value = false; - indeterminate.value = false; + data.value = values; + }; + + //鎵归噺鍚敤鍒犻櫎绂佺敤 + const addBlock = (type) => { + if (data.value.length == 0) { + Message.error('璇烽�夋嫨瑕佹搷浣滅殑鏁版嵁'); + return; + } + if (type == 3) { + deleteChunk(); } else { - checkedAll.value = false; - indeterminate.value = true; + let params = { + chunk_ids: data.value, + available_int: type, + doc_id: props.item.id, + }; + chunkSwitch(params).then((res) => { + if (res.code == 0) { + Message.success('鎿嶄綔鎴愬姛'); + getList(); + checkedAll.value = false; + data.value = []; + } else { + Message.error('鎿嶄綔澶辫触'); + } + }); } }; @@ -487,28 +588,103 @@ }; const onChangeavailable = () => { - console.log(available_int.value); + getList(); }; - const handleChangeStatus = () => { - console.log(switchType.value); + const handleChangeStatus = (val) => { + updateChunkStatus(val); + }; + const isLoading = ref(true); + // 鑷畾涔夊姞杞芥彁绀烘枃鏈� + const tip = '鍔犺浇涓紝璇风◢鍊�...'; + //鑾峰彇鍒楄〃 + const getList = async () => { + let params = { + doc_id: props.item.id, + keywords: form.keywords, + page: 1, + size: 10000, + }; + if (available_int.value !== '') { + params.available_int = available_int.value; + } + await queryChunkList(params).then((res) => { + if (res.code == 0) { + listData.value = res.data.chunks; + isLoading.value = false; + listData.value = listData.value.map((item) => { + item.available_int = parseInt(item.available_int); + return item; + }); + } + }); + }; + //鏇存柊鍒楄〃 + const canplaythrough = () => { + getList(); }; - onBeforeMount(() => {}); + //鍚敤绂佺敤 + const updateChunkStatus = (val) => { + let params = { + chunk_ids: [val.chunk_id], + available_int: val.available_int, + doc_id: props.item.id, + }; + chunkSwitch(params).then((res) => { + console.log(res); + if (res.code == 0) { + Message.success('鏇存柊鎴愬姛'); + getList(); + } else { + Message.error('鏇存柊澶辫触'); + } + }); + }; + + //鍒犻櫎 + const deleteChunk = () => { + let params = { + chunk_ids: data.value, + doc_id: props.item.id, + }; + chunkRm(params).then((res) => { + console.log(res); + if (res.code == 0) { + Message.success('鍒犻櫎鎴愬姛'); + getList(); + } else { + Message.error('鍒犻櫎澶辫触'); + } + }); + }; + + onBeforeMount(() => { + getList(); + }); onMounted(() => {}); </script> <style scoped lang="less"> - .parser{ + .parser { width: 100%; - ::v-deep .arco-btn-outline:hover, .arco-btn-outline, .arco-btn-outline[type='button']{ + + .arco-btn-outline:hover, + .arco-btn-outline, + .arco-btn-outline[type='button'] { color: #2a2a2b; border: 1px solid #2a2a2b; } - .button{ + + .button { //color: #2a2a2b!important; } } + + ::-webkit-scrollbar { + display: none; + } + .groupMain { width: 100%; height: 500px; @@ -521,7 +697,7 @@ padding: 24px; border-radius: 8px; //background: #eff8ff; - border: 1px solid var(--color-neutral-3); + border: 1px solid #f0f0f0; margin-bottom: 20px; overflow: auto; @@ -532,44 +708,24 @@ box-sizing: border-box; margin: 0; padding: 0; - color: var(--color-text-1); + color: #2a2a2b; font-size: 14px; font-family: Inter; position: relative; - - } } + } - .groupMain { - width: 100%; - height: 500px; - overflow: auto; - display: flex; - justify-content: center; + :deep(.emphaRed em) { + color: red !important; + } - .groupList { - display: flex; - padding: 24px; - border-radius: 8px; - //background: #eff8ff; - border: 1px solid #f0f0f0; - margin-bottom: 20px; - overflow: auto; + .groupActive { + background: #eff8ff; + } - .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; - } - } - } + .groupNoActive { + background: var(--color-bg-1); + color: var(--color-text-1); } </style> -- Gitblit v1.8.0