|
|
@@ -1,9 +1,20 @@
|
|
|
<script lang="tsx" setup>
|
|
|
-import { type InputInst } from 'naive-ui'
|
|
|
+import request from '@/utils/request'
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
const loading = ref(true)
|
|
|
+const keywords = ref('')
|
|
|
+const isSearch = ref(false)
|
|
|
+interface KnowledgeItem {
|
|
|
+ file_name: string
|
|
|
+ extension: string
|
|
|
+ file_url: string
|
|
|
+ match_text: string
|
|
|
+ file_updated_at: string
|
|
|
+}
|
|
|
+
|
|
|
+const knowledgeList = ref<KnowledgeItem[]>([])
|
|
|
|
|
|
setTimeout(() => {
|
|
|
loading.value = false
|
|
|
@@ -17,15 +28,10 @@ const stylizingLoading = ref(false)
|
|
|
* 输入字符串
|
|
|
*/
|
|
|
const inputTextString = ref('')
|
|
|
-const refInputTextString = ref<InputInst | null>()
|
|
|
|
|
|
|
|
|
const refReaderMarkdownPreview = ref<any>()
|
|
|
|
|
|
-const placeholder = computed(() => {
|
|
|
- return '基于知识库提问'
|
|
|
-})
|
|
|
-
|
|
|
|
|
|
const handleResetState = () => {
|
|
|
inputTextString.value = ''
|
|
|
@@ -36,61 +42,55 @@ const handleResetState = () => {
|
|
|
}
|
|
|
handleResetState()
|
|
|
|
|
|
-const gotoChat = () => {
|
|
|
+const gotoHome = () => {
|
|
|
router.push({
|
|
|
- name: 'ChatIndex'
|
|
|
+ name: 'Home'
|
|
|
})
|
|
|
}
|
|
|
+function debounce<T extends (...args: any[]) => void>(
|
|
|
+ fn: T,
|
|
|
+ delay: number
|
|
|
+): (...args: Parameters<T>) => void {
|
|
|
+ let timer: ReturnType<typeof setTimeout> | null = null
|
|
|
+ return (...args: Parameters<T>) => {
|
|
|
+ if (timer !== null) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn(...args) // 不使用 this
|
|
|
+ }, delay)
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
|
|
|
-const PromptTag = defineComponent({
|
|
|
- props: {
|
|
|
- text: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
- const handleClick = () => {
|
|
|
- inputTextString.value = props.text
|
|
|
- nextTick(() => {
|
|
|
- refInputTextString.value?.focus()
|
|
|
- })
|
|
|
- }
|
|
|
- return {
|
|
|
- handleClick
|
|
|
- }
|
|
|
- },
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div
|
|
|
- b="~ solid transparent"
|
|
|
- hover="shadow-[--shadow] b-primary bg-#e8e8e8"
|
|
|
- class={[
|
|
|
- 'px-10 py-2 rounded-7 text-12',
|
|
|
- 'max-w-230 transition-all-300 select-none cursor-pointer',
|
|
|
- 'c-#525252 bg-#ededed'
|
|
|
- ]}
|
|
|
- style={{
|
|
|
- '--shadow': '3px 3px 3px -1px rgba(0,0,0,0.1)'
|
|
|
- }}
|
|
|
- onClick={this.handleClick}
|
|
|
- >
|
|
|
- <n-ellipsis
|
|
|
- tooltip={{
|
|
|
- contentClass: 'wrapper-tooltip-scroller',
|
|
|
- keepAliveOnHover: true
|
|
|
- }}
|
|
|
- >
|
|
|
- {{
|
|
|
- tooltip: () => this.text,
|
|
|
- default: () => this.text
|
|
|
- }}
|
|
|
- </n-ellipsis>
|
|
|
- </div>
|
|
|
- )
|
|
|
+const inputSearch = debounce(() => {
|
|
|
+ if (!keywords.value) {
|
|
|
+ knowledgeList.value = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ 'client_id': `${ Date.now() + 10 }`,
|
|
|
+ 'prompt': keywords.value
|
|
|
}
|
|
|
-})
|
|
|
+ request.post(`/search`, params).then((res) => {
|
|
|
+ isSearch.value = true
|
|
|
+ console.log(res, 888)
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ knowledgeList.value = res.data.content
|
|
|
+ } else {
|
|
|
+ window.$ModalMessage.error(res.data.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}, 500)
|
|
|
+
|
|
|
+const clear = () => {
|
|
|
+ knowledgeList.value = []
|
|
|
+ console.log(keywords.value, 122)
|
|
|
+}
|
|
|
+
|
|
|
+const openLink = (link: string) => {
|
|
|
+ window.open(link.split('?')[0])
|
|
|
+}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
@@ -115,24 +115,45 @@ const PromptTag = defineComponent({
|
|
|
>
|
|
|
</div>
|
|
|
<div class="index-header">
|
|
|
- <h2>个人知识库</h2>
|
|
|
- <span class="search">
|
|
|
- <svg
|
|
|
- t="1723701892543"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="8645"
|
|
|
- xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
- width="200"
|
|
|
- height="200"
|
|
|
- ><path
|
|
|
- d="M416.192 64c206.293333 0 373.525333 167.232 373.525333 373.525333 0 84.224-27.882667 161.941333-74.922666 224.426667l255.594666 255.616a37.333333 37.333333 0 0 1-52.821333 52.821333l-253.44-253.482666a372.117333 372.117333 0 0 1-247.936 94.144C209.898667 811.050667 42.666667 643.797333 42.666667 437.525333 42.666667 231.232 209.898667 64 416.192 64z m0 74.709333c-165.034667 0-298.816 133.781333-298.816 298.816s133.76 298.816 298.816 298.816c165.034667 0 298.816-133.781333 298.816-298.816S581.226667 138.709333 416.192 138.709333z"
|
|
|
- fill=""
|
|
|
- p-id="8646"
|
|
|
- /></svg>
|
|
|
- </span>
|
|
|
+ <div class="saerch-black">
|
|
|
+ <div class="saerch-black__input">
|
|
|
+ <span class="search-icon">
|
|
|
+ <svg
|
|
|
+ t="1751009112601"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="5234"
|
|
|
+ xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ ><path
|
|
|
+ d="M470.4 912c-112 0-224-41.6-310.4-128C-9.6 611.2-9.6 332.8 160 160c172.8-172.8 451.2-172.8 620.8 0 172.8 172.8 172.8 451.2 0 620.8C697.6 867.2 582.4 912 470.4 912z m0-803.2c-92.8 0-185.6 35.2-256 105.6-140.8 140.8-140.8 374.4 0 515.2 140.8 140.8 374.4 140.8 515.2 0 140.8-140.8 140.8-374.4 0-515.2-70.4-70.4-166.4-105.6-259.2-105.6z"
|
|
|
+ p-id="5235"
|
|
|
+ /><path
|
|
|
+ d="M905.6 976l-160-160c-19.2-19.2-19.2-51.2 0-70.4s51.2-19.2 70.4 0l160 160c19.2 19.2 19.2 51.2 0 70.4-19.2 22.4-51.2 22.4-70.4 0z"
|
|
|
+ p-id="5236"
|
|
|
+ /></svg>
|
|
|
+ </span>
|
|
|
+ <div class="input-black">
|
|
|
+ <n-input
|
|
|
+ v-model:value="keywords"
|
|
|
+ clearable
|
|
|
+ type="text"
|
|
|
+ placeholder="搜索知识库内容"
|
|
|
+ @input="inputSearch"
|
|
|
+ @clear="clear"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="close"
|
|
|
+ @click="gotoHome"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -141,69 +162,48 @@ const PromptTag = defineComponent({
|
|
|
flex="1 ~ col"
|
|
|
min-h-0
|
|
|
pb-20
|
|
|
+ class="knowledge-black"
|
|
|
>
|
|
|
- <!-- 列表 -->
|
|
|
- <div class="knowledge__list">
|
|
|
- <ul class="knowledge__list-ul">
|
|
|
- <li class="knowledge__list-items">
|
|
|
- <span class="items-img"></span>
|
|
|
- <div class="items-info">
|
|
|
- <h2>独立站部署.pdf</h2>
|
|
|
- <div class="items-info-content">
|
|
|
- <span class="type">PDF</span>
|
|
|
- <span class="line">|</span>
|
|
|
- <span class="date">24/06/04</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="knowledge__list-items">
|
|
|
- <span class="items-img"></span>
|
|
|
- <div class="items-info">
|
|
|
- <h2>歌莉娅知识库使用指南.docx</h2>
|
|
|
- <div class="items-info-content">
|
|
|
- <span class="type">Word</span>
|
|
|
- <span class="line">|</span>
|
|
|
- <span class="date">24/06/04</span>
|
|
|
+ <div
|
|
|
+ v-if="knowledgeList.length"
|
|
|
+ class="knowledge-scroll"
|
|
|
+ >
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div
|
|
|
+ class="knowledge__list"
|
|
|
+ >
|
|
|
+ <ul
|
|
|
+ class="knowledge__list-ul"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(acc, index) in knowledgeList"
|
|
|
+ :key="index"
|
|
|
+ class="knowledge__list-items"
|
|
|
+ @click="openLink(acc.file_url)"
|
|
|
+ >
|
|
|
+ <span class="items-img"></span>
|
|
|
+ <div class="items-info">
|
|
|
+ <h2>{{ acc.file_name }}</h2>
|
|
|
+ <p
|
|
|
+ v-if="acc.match_text"
|
|
|
+ class="desc"
|
|
|
+ v-html="acc.match_text"
|
|
|
+ ></p>
|
|
|
+ <div class="items-info-content">
|
|
|
+ <span class="type">{{ acc.extension }}</span>
|
|
|
+ <span class="line">|</span>
|
|
|
+ <span class="date">{{ acc.file_updated_at }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- flex="~ col items-center"
|
|
|
- flex-basis="10%"
|
|
|
- p="14px"
|
|
|
- py="0"
|
|
|
- class="bottom-block"
|
|
|
- >
|
|
|
<div
|
|
|
- relative
|
|
|
- flex="1"
|
|
|
- w-full
|
|
|
- class="index-bottom"
|
|
|
- style="margin-bottom: 10px;"
|
|
|
+ v-if="!knowledgeList.length && isSearch"
|
|
|
+ class="no-data"
|
|
|
>
|
|
|
- <a
|
|
|
- href="Javascript:;"
|
|
|
- class="click-router"
|
|
|
- @click="gotoChat()"
|
|
|
- ></a>
|
|
|
- <n-input
|
|
|
- ref="refInputTextString"
|
|
|
- v-model:value="inputTextString"
|
|
|
- type="textarea"
|
|
|
- h-full
|
|
|
- class="textarea-resize-none text-15"
|
|
|
- :style="{
|
|
|
- '--n-border-radius': '20px',
|
|
|
- '--n-padding-left': '20px',
|
|
|
- '--n-padding-right': '20px',
|
|
|
- '--n-padding-vertical': '10px',
|
|
|
- }"
|
|
|
- :placeholder="placeholder"
|
|
|
- />
|
|
|
+ 未找到相关搜索结果
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -227,26 +227,96 @@ const PromptTag = defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.index-header {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .index-header .saerch-black{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ min-height: 40px;
|
|
|
+ gap: 10px;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- h2 {
|
|
|
- font-size: 18px;
|
|
|
- color: #232323;
|
|
|
+ .saerch-black__input {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .search-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-black {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding-left: 40px;
|
|
|
+
|
|
|
+ .n-input {
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ background: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .n-input .n-input-wrapper {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .n-input__border,.n-input__state-border {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .n-input .n-input__suffix, .n-input .n-input__prefix {
|
|
|
+ width: 40px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .n-base-clear > .n-base-clear__clear {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ .n-input .n-input__placeholder {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .n-input .n-input__suffix .n-base-icon, .n-input .n-input__prefix .n-base-icon {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ .n-input__input-el {
|
|
|
+ border: none;
|
|
|
+ background: none;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #232323;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .search {
|
|
|
+ .close {
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #232323;
|
|
|
+ height: 40px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- height: 34px;
|
|
|
- width: 34px;
|
|
|
align-items: center;
|
|
|
- border-radius: 6px;
|
|
|
- background: #f2f2f2;
|
|
|
- svg {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
+ padding: 0 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #232323;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -260,6 +330,20 @@ const PromptTag = defineComponent({
|
|
|
z-index: 100;
|
|
|
}
|
|
|
}
|
|
|
+ .knowledge-black .no-data {
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .knowledge-black .knowledge-scroll{
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
.knowledge__list {
|
|
|
padding: 14px;
|
|
|
|
|
|
@@ -277,16 +361,21 @@ const PromptTag = defineComponent({
|
|
|
.items-img {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
+ flex: 0 0 60px;
|
|
|
border-radius: 2px;
|
|
|
background: #f2f2f2;
|
|
|
}
|
|
|
.items-info {
|
|
|
+ width: calc(100% - 70px);
|
|
|
h2 {
|
|
|
font-size: 15px;
|
|
|
line-height: 1.5;
|
|
|
color: #232323;
|
|
|
font-weight: normal;
|
|
|
margin-bottom: 6px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
.items-info-content {
|
|
|
display: flex;
|
|
|
@@ -296,6 +385,21 @@ const PromptTag = defineComponent({
|
|
|
color: #999;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+ .desc {
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 6px;
|
|
|
+
|
|
|
+ b {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #079D55;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
