This commit is contained in:
wangdan-fit2cloud 2023-12-11 10:35:26 +08:00
parent bcd25fde56
commit bb11b9bdc1
8 changed files with 291 additions and 301 deletions

View File

@ -16,6 +16,7 @@ import MarkdownRenderer from './markdown-renderer/index.vue'
import dynamicsForm from './dynamics-form'
import CardCheckbox from './card-checkbox/index.vue'
import AiChat from './ai-chat/index.vue'
import InfiniteScroll from './infinite-scroll/index.vue'
export default {
install(app: App) {
@ -36,5 +37,6 @@ export default {
app.component(MarkdownRenderer.name, MarkdownRenderer)
app.component(CardCheckbox.name, CardCheckbox)
app.component(AiChat.name, AiChat)
app.component(InfiniteScroll.name, InfiniteScroll)
}
}

View File

@ -0,0 +1,64 @@
<template>
<div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
<slot />
</div>
<div style="padding: 16px 10px">
<el-divider v-if="size > 0 && loading">
<el-text type="info"> 加载中...</el-text>
</el-divider>
<el-divider v-if="noMore">
<el-text type="info"> 到底啦</el-text>
</el-divider>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
defineOptions({ name: 'InfiniteScroll' })
const props = defineProps({
/**
* 对象数量
*/
size: {
type: Number,
default: 0
},
/**
* 总数
*/
total: {
type: Number,
default: 0
},
/**
* 总数
*/
page_size: {
type: Number,
default: 0
},
current_page: {
type: Number,
default: 0
},
loading: Boolean
})
const emit = defineEmits(['update:current_page', 'load'])
const current = ref(props.current_page)
const noMore = computed(
() =>
props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading
)
const disabledScroll = computed(() => props.size > 0 && (props.loading || noMore.value))
function loadDataset() {
if (props.total > props.page_size) {
current.value += 1
emit('update:current_page', current)
emit('load')
}
}
</script>
<style lang="scss" scoped></style>

View File

@ -432,9 +432,3 @@ h4 {
}
}
.custom-divider {
.el-divider__text {
background: var(--app-layout-bg-color);
}
}

View File

@ -10,77 +10,74 @@
class="w-240"
/>
</div>
<div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
<el-row
:gutter="15"
v-infinite-scroll="loadDataset"
:infinite-scroll-disabled="disabledScroll"
<div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
<InfiniteScroll
:size="applicationList.length"
:total="paginationConfig.total"
:page_size="paginationConfig.page_size"
v-model:current_page="paginationConfig.current_page"
@load="getList"
:loading="loading"
>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
<CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
</el-col>
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4"
v-for="(item, index) in applicationList"
:key="index"
class="mb-16"
>
<CardBox
:title="item.name"
:description="item.desc"
class="application-card cursor"
@click="router.push({ path: `/application/${item.id}/overview` })"
<el-row :gutter="15">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
<CardAdd title="创建应用" @click="router.push({ path: '/application/create' })" />
</el-col>
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4"
v-for="(item, index) in applicationList"
:key="index"
class="mb-16"
>
<template #icon>
<AppAvatar
v-if="item.name"
:name="item.name"
pinyinColor
class="mr-12"
shape="square"
:size="32"
/>
</template>
<CardBox
:title="item.name"
:description="item.desc"
class="application-card cursor"
@click="router.push({ path: `/application/${item.id}/overview` })"
>
<template #icon>
<AppAvatar
v-if="item.name"
:name="item.name"
pinyinColor
class="mr-12"
shape="square"
:size="32"
/>
</template>
<template #footer>
<div class="footer-content">
<el-tooltip effect="dark" content="演示" placement="top">
<el-button text @click.stop @click="getAccessToken(item.id)">
<AppIcon iconName="app-view"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" content="设置" placement="top">
<el-button
text
@click.stop="router.push({ path: `/application/${item.id}/setting` })"
>
<AppIcon iconName="Setting"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteApplication(item)">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
</div>
</template>
</CardBox>
</el-col>
</el-row>
<div style="padding: 16px 10px">
<el-divider class="custom-divider" v-if="applicationList.length > 0 && loading">
<el-text type="info"> 加载中...</el-text>
</el-divider>
<el-divider class="custom-divider" v-if="noMore">
<el-text type="info"> 到底啦</el-text>
</el-divider>
</div>
<template #footer>
<div class="footer-content">
<el-tooltip effect="dark" content="演示" placement="top">
<el-button text @click.stop @click="getAccessToken(item.id)">
<AppIcon iconName="app-view"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" content="设置" placement="top">
<el-button
text
@click.stop="router.push({ path: `/application/${item.id}/setting` })"
>
<AppIcon iconName="Setting"></AppIcon>
</el-button>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteApplication(item)">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
</div>
</template>
</CardBox>
</el-col>
</el-row>
</InfiniteScroll>
</div>
</div>
</template>
@ -97,7 +94,7 @@ const loading = ref(false)
const applicationList = ref<any[]>([])
const pageConfig = reactive({
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
total: 0
@ -108,30 +105,20 @@ const searchValue = ref('')
const noMore = computed(
() =>
applicationList.value.length > 0 &&
applicationList.value.length === pageConfig.total &&
pageConfig.total > 20 &&
applicationList.value.length === paginationConfig.total &&
paginationConfig.total > 20 &&
!loading.value
)
const disabledScroll = computed(
() => applicationList.value.length > 0 && (loading.value || noMore.value)
)
function loadDataset() {
if (pageConfig.total > pageConfig.page_size) {
pageConfig.current_page += 1
getList()
}
}
function searchHandle() {
pageConfig.total = 0
pageConfig.current_page = 1
paginationConfig.total = 0
paginationConfig.current_page = 1
applicationList.value = []
getList()
}
function getAccessToken(id: string) {
application.asyncGetAccessToken(id, loading).then((res:any) => {
window.open(application.location + res?.data?.access_token)
application.asyncGetAccessToken(id, loading).then((res: any) => {
window.open(application.location + res?.data?.access_token)
})
}
@ -158,10 +145,10 @@ function deleteApplication(row: any) {
function getList() {
applicationApi
.getApplication(pageConfig, searchValue.value && { name: searchValue.value }, loading)
.getApplication(paginationConfig, searchValue.value && { name: searchValue.value }, loading)
.then((res) => {
applicationList.value = [...applicationList.value, ...res.data.records]
pageConfig.total = res.data.total
paginationConfig.total = res.data.total
})
}

View File

@ -10,53 +10,50 @@
class="w-240"
/>
</div>
<div v-loading.fullscreen.lock="pageConfig.current_page === 1 && loading">
<el-row
:gutter="15"
v-infinite-scroll="loadDataset"
:infinite-scroll-disabled="disabledScroll"
<div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
<InfiniteScroll
:size="datasetList.length"
:total="paginationConfig.total"
:page_size="paginationConfig.page_size"
v-model:current_page="paginationConfig.current_page"
@load="getList"
:loading="loading"
>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
<CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
</el-col>
<template v-for="(item, index) in datasetList" :key="index">
<el-row :gutter="15">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
<CardBox
:title="item.name"
:description="item.desc"
class="cursor"
@click="router.push({ path: `/dataset/${item.id}/document` })"
>
<template #mouseEnter>
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteDateset(item)" class="delete-button">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
</template>
<template #footer>
<div class="footer-content">
<span class="bold">{{ item?.document_count || 0 }}</span>
文档<el-divider direction="vertical" />
<span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
字符<el-divider direction="vertical" />
<span class="bold">{{ item?.application_mapping_count || 0 }}</span>
关联应用
</div>
</template>
</CardBox>
<CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
</el-col>
</template>
</el-row>
<div style="padding: 16px 10px">
<el-divider class="custom-divider" v-if="datasetList.length > 0 && loading">
<el-text type="info"> 加载中...</el-text>
</el-divider>
<el-divider class="custom-divider" v-if="noMore">
<el-text type="info"> 到底啦</el-text>
</el-divider>
</div>
<template v-for="(item, index) in datasetList" :key="index">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
<CardBox
:title="item.name"
:description="item.desc"
class="cursor"
@click="router.push({ path: `/dataset/${item.id}/document` })"
>
<template #mouseEnter>
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteDateset(item)" class="delete-button">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
</template>
<template #footer>
<div class="footer-content">
<span class="bold">{{ item?.document_count || 0 }}</span>
文档<el-divider direction="vertical" />
<span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
字符<el-divider direction="vertical" />
<span class="bold">{{ item?.application_mapping_count || 0 }}</span>
关联应用
</div>
</template>
</CardBox>
</el-col>
</template>
</el-row>
</InfiniteScroll>
</div>
</div>
</template>
@ -70,7 +67,7 @@ const router = useRouter()
const loading = ref(false)
const datasetList = ref<any[]>([])
const pageConfig = reactive({
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
total: 0
@ -81,8 +78,8 @@ const searchValue = ref('')
const noMore = computed(
() =>
datasetList.value.length > 0 &&
datasetList.value.length === pageConfig.total &&
pageConfig.total > 20 &&
datasetList.value.length === paginationConfig.total &&
paginationConfig.total > 20 &&
!loading.value
)
const disabledScroll = computed(
@ -90,14 +87,14 @@ const disabledScroll = computed(
)
function loadDataset() {
if (pageConfig.total > pageConfig.page_size) {
pageConfig.current_page += 1
if (paginationConfig.total > paginationConfig.page_size) {
paginationConfig.current_page += 1
getList()
}
}
function searchHandle() {
pageConfig.current_page = 1
paginationConfig.current_page = 1
datasetList.value = []
getList()
}
@ -129,9 +126,9 @@ function deleteDateset(row: any) {
function getList() {
datasetApi
.getDateset(pageConfig, searchValue.value && { name: searchValue.value }, loading)
.getDateset(paginationConfig, searchValue.value && { name: searchValue.value }, loading)
.then((res) => {
pageConfig.total = res.data.total
paginationConfig.total = res.data.total
datasetList.value = [...datasetList.value, ...res.data.records]
})
}

View File

@ -14,26 +14,21 @@
class="h-full"
style="padding: 24px 0"
>
<div v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
<InfiniteScroll
:size="recordList.length"
:total="paginationConfig.total"
:page_size="paginationConfig.page_size"
v-model:current_page="paginationConfig.current_page"
@load="getChatRecord"
:loading="loading"
>
<AiChat :data="application" :record="recordList" log></AiChat>
</div>
<div style="padding: 16px 10px">
<el-divider class="custom-divider" v-if="recordList.length > 0 && loading">
<el-text type="info"> 加载中...</el-text>
</el-divider>
<el-divider class="custom-divider" v-if="noMore">
<el-text type="info"> 到底啦</el-text>
</el-divider>
</div>
</InfiniteScroll>
</div>
<template #footer>
<div>
<el-button @click="pre" :disabled="pre_disable != undefined ? pre_disable : false"
>上一条</el-button
>
<el-button @click="next" :disabled="next_disable != undefined ? next_disable : false"
>下一条</el-button
>
<el-button @click="pre" :disabled="pre_disable || loading">上一条</el-button>
<el-button @click="next" :disabled="next_disable || loading">下一条</el-button>
</div>
</template>
</el-drawer>
@ -54,7 +49,7 @@ const props = withDefaults(
/**
* 对话 记录id
*/
id?: string
chartId?: string
/**
* 下一条
*/
@ -71,7 +66,7 @@ const props = withDefaults(
{}
)
defineEmits(['update:id'])
defineEmits(['update:chartId'])
const route = useRoute()
const {
@ -83,37 +78,19 @@ const recordList = ref<chatType[]>([])
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
page_size: 10,
total: 0
})
const noMore = computed(
() =>
recordList.value.length > 0 &&
recordList.value.length === paginationConfig.total &&
paginationConfig.total > 20 &&
!loading.value
)
const disabledScroll = computed(
() => recordList.value.length > 0 && (loading.value || noMore.value)
)
function closeHandel() {
recordList.value = []
paginationConfig.total = 0
paginationConfig.current_page = 1
}
function loadDataset() {
if (paginationConfig.total > paginationConfig.page_size) {
paginationConfig.current_page += 1
getChatRecord()
}
}
function getChatRecord() {
if (props.id && visible.value) {
logApi.getChatRecordLog(id as string, props.id, paginationConfig, loading).then((res) => {
if (props.chartId && visible.value) {
logApi.getChatRecordLog(id as string, props.chartId, paginationConfig, loading).then((res) => {
paginationConfig.total = res.data.total
recordList.value = [...recordList.value, ...res.data.records]
})
@ -121,7 +98,7 @@ function getChatRecord() {
}
watch(
() => props.id,
() => props.chartId,
() => {
recordList.value = []
paginationConfig.total = 0
@ -145,5 +122,8 @@ defineExpose({
background: var(--app-layout-bg-color);
padding: 0;
}
.el-divider__text {
background: var(--app-layout-bg-color);
}
}
</style>

View File

@ -67,7 +67,7 @@
:next="nextChatRecord"
:pre="preChatRecord"
ref="ChatRecordRef"
v-model:id="currentChatId"
v-model:chartId="currentChatId"
:application="detail"
:pre_disable="pre_disable"
:next_disable="next_disable"
@ -108,6 +108,27 @@ const dayOptions = [
}
]
const ChatRecordRef = ref()
const loading = ref(false)
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
total: 0
})
const tableData = ref<any[]>([])
const tableIndexMap = computed<Dict<number>>(() => {
return tableData.value
.map((row, index) => ({
[row.id]: index
}))
.reduce((pre, next) => ({ ...pre, ...next }), {})
})
const history_day = ref(7)
const search = ref('')
const detail = ref<any>(null)
const currentChatId = ref<string>('')
/**
* 下一页
*/
@ -118,7 +139,6 @@ const nextChatRecord = () => {
index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
paginationConfig.total - 1
) {
MsgError('没有更多了')
return
}
paginationConfig.current_page = paginationConfig.current_page + 1
@ -151,7 +171,6 @@ const preChatRecord = () => {
if (index < 0) {
if (paginationConfig.current_page <= 1) {
MsgError('到头了')
return
}
paginationConfig.current_page = paginationConfig.current_page - 1
@ -164,47 +183,6 @@ const preChatRecord = () => {
}
}
const ChatRecordRef = ref()
const loading = ref(false)
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
total: 0
})
const tableData = ref<any[]>([])
const tableIndexMap = computed<Dict<number>>(() => {
return tableData.value
.map((row, index) => ({
[row.id]: index
}))
.reduce((pre, next) => ({ ...pre, ...next }), {})
})
const history_day = ref(7)
const search = ref('')
const detail = ref<any>(null)
const currentChatId = ref<string>('')
function isFirst(index: number) {
if (index === 0 && paginationConfig.current_page === 1) {
return true
} else {
return false
}
}
function isLast(index: number) {
console.log((paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1)
if (
(paginationConfig.current_page - 1) * paginationConfig.page_size + index + 1 ===
paginationConfig.total
) {
return true
} else {
return false
}
}
function rowClickHandle(row: any) {
currentChatId.value = row.id
ChatRecordRef.value.open()

View File

@ -5,9 +5,12 @@
<el-button @click="addParagraph" type="primary" :disabled="loading"> 添加分段 </el-button>
</div>
</template>
<div class="document-detail__main p-16" v-loading="pageConfig.current_page === 1 && loading">
<div
class="document-detail__main p-16"
v-loading="paginationConfig.current_page === 1 && loading"
>
<div class="flex-between p-8">
<span>{{ pageConfig.total }} 段落</span>
<span>{{ paginationConfig.total }} 段落</span>
<el-input
v-model="search"
placeholder="搜索"
@ -26,55 +29,58 @@
<el-scrollbar>
<div class="document-detail-height">
<el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
<el-row v-else v-infinite-scroll="loadDataset" :infinite-scroll-disabled="disabledScroll">
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="6"
v-for="(item, index) in paragraphDetail"
:key="index"
class="p-8"
>
<CardBox
shadow="hover"
:title="item.title || '-'"
:description="item.content"
class="document-card cursor"
:class="item.is_active ? '' : 'disabled'"
:showIcon="false"
@click="editParagraph(item)"
>
<div class="active-button" @click.stop>
<el-switch
v-model="item.is_active"
@change="changeState($event, item)"
size="small"
/>
</div>
<template #footer>
<div class="footer-content flex-between">
<span> {{ numberFormat(item?.content.length) || 0 }} 字符 </span>
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteParagraph(item)" class="delete-button">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
<InfiniteScroll
v-else
:size="paragraphDetail.length"
:total="paginationConfig.total"
:page_size="paginationConfig.page_size"
v-model:current_page="paginationConfig.current_page"
@load="getParagraphList"
:loading="loading"
>
<el-row>
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="6"
v-for="(item, index) in paragraphDetail"
:key="index"
class="p-8"
>
<CardBox
shadow="hover"
:title="item.title || '-'"
:description="item.content"
class="document-card cursor"
:class="item.is_active ? '' : 'disabled'"
:showIcon="false"
@click="editParagraph(item)"
>
<div class="active-button" @click.stop>
<el-switch
v-model="item.is_active"
@change="changeState($event, item)"
size="small"
/>
</div>
</template>
</CardBox>
</el-col>
</el-row>
<div style="padding: 16px 10px">
<el-divider v-if="paragraphDetail.length > 0 && loading">
<el-text type="info"> 加载中...</el-text>
</el-divider>
<el-divider v-if="noMore">
<el-text type="info"> 到底啦</el-text>
</el-divider>
</div>
<template #footer>
<div class="footer-content flex-between">
<span> {{ numberFormat(item?.content.length) || 0 }} 字符 </span>
<el-tooltip effect="dark" content="删除" placement="top">
<el-button text @click.stop="deleteParagraph(item)" class="delete-button">
<el-icon><Delete /></el-icon>
</el-button>
</el-tooltip>
</div>
</template>
</CardBox>
</el-col>
</el-row>
</InfiniteScroll>
</div>
</el-scrollbar>
</div>
@ -104,32 +110,14 @@ const title = ref('')
const search = ref('')
const searchType = ref('title')
const pageConfig = reactive({
const paginationConfig = reactive({
current_page: 1,
page_size: 20,
total: 0
})
const noMore = computed(
() =>
paragraphDetail.value.length > 0 &&
paragraphDetail.value.length === pageConfig.total &&
pageConfig.total > 20 &&
!loading.value
)
const disabledScroll = computed(
() => paragraphDetail.value.length > 0 && (loading.value || noMore.value)
)
function loadDataset() {
if (pageConfig.total > pageConfig.page_size) {
pageConfig.current_page += 1
getParagraphList()
}
}
function searchHandle() {
pageConfig.current_page = 1
paginationConfig.current_page = 1
paragraphDetail.value = []
getParagraphList()
}
@ -191,13 +179,13 @@ function getParagraphList() {
.getParagraph(
id,
documentId,
pageConfig,
paginationConfig,
search.value && { [searchType.value]: search.value },
loading
)
.then((res) => {
paragraphDetail.value = [...paragraphDetail.value, ...res.data.records]
pageConfig.total = res.data.total
paginationConfig.total = res.data.total
})
}
@ -206,7 +194,7 @@ function refresh(data: any) {
const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
paragraphDetail.value.splice(index, 1, data)
} else {
pageConfig.current_page = 1
paginationConfig.current_page = 1
paragraphDetail.value = []
getParagraphList()
}