|
@@ -1,40 +1,95 @@
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-import { NButton, NSpace, NDrawer } from 'naive-ui';
|
|
|
-import { BaseButton, RecodeCardItem, TheSubMenu, TheChatView, ChatWelcome } from '@/components';
|
|
|
-import { ChatAsk, ChatAnswer, ChatInput } from '@/components/Chat';
|
|
|
+import { ref, onMounted, watch } from 'vue';
|
|
|
+import { NButton, NSpace, NDrawer, NDrawerContent, NCard } from 'naive-ui';
|
|
|
+import { ChatAsk, ChatAnswer } from '@/components/Chat';
|
|
|
+import allBookData from "./all_book.json";
|
|
|
|
|
|
+const dataSource = ref([]);
|
|
|
+const errIds = ref([]);
|
|
|
const visible = ref(false);
|
|
|
+const pageNum = ref(0);
|
|
|
+const pageSize = 10;
|
|
|
+
|
|
|
+const totalPages = Math.ceil(allBookData.length / pageSize);
|
|
|
+
|
|
|
+watch(pageNum, (num) => {
|
|
|
+ dataSource.value = allBookData.slice((num - 1) * pageSize, num * pageSize).map(item => ({
|
|
|
+ ...item,
|
|
|
+ isDisable: errIds.value.includes(item.id),
|
|
|
+ history: [
|
|
|
+ ...item.history,
|
|
|
+ [item.instruction, item.output]
|
|
|
+ ]
|
|
|
+ }))
|
|
|
+})
|
|
|
|
|
|
const changeVisible = () => {
|
|
|
visible.value = !visible.value;
|
|
|
}
|
|
|
|
|
|
+const handleNextPage = () => {
|
|
|
+ if ( pageNum.value === totalPages ) return alert("已经是最后一页了");
|
|
|
+ pageNum.value += 1;
|
|
|
+ localStorage.setItem('pageNum', pageNum.value)
|
|
|
+}
|
|
|
+
|
|
|
+const handleError = item => {
|
|
|
+ item.isDisable = true;
|
|
|
+
|
|
|
+ errIds.value.push(item.id);
|
|
|
+ localStorage.setItem('errIds', JSON.stringify( errIds.value ));
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const localIds = localStorage.getItem('errIds');
|
|
|
+ const localNum = localStorage.getItem('pageNum');
|
|
|
+ const ids = localIds ? JSON.parse(localIds) : [];
|
|
|
+ const num = localNum ? Number(localNum) : 1;
|
|
|
+
|
|
|
+ errIds.value = ids;
|
|
|
+ pageNum.value = num;
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<section class="page-container">
|
|
|
- <header class="header">
|
|
|
+ <header class="header flex items-center">
|
|
|
<NSpace>
|
|
|
- <n-button>下一页</n-button>
|
|
|
+ <n-button @click="handleNextPage">下一页</n-button>
|
|
|
<n-button @click="changeVisible">显示错误id</n-button>
|
|
|
</NSpace>
|
|
|
+ <p class="ml-[30px] space-x-[10px]">
|
|
|
+ <span>{{ pageNum }}</span>
|
|
|
+ <span> / </span>
|
|
|
+ <span>{{ totalPages }}</span>
|
|
|
+ </p>
|
|
|
</header>
|
|
|
<div class="main">
|
|
|
- <div class="answer-block" v-for="item in 100">
|
|
|
- <ChatAsk content="问题问题问题"></ChatAsk>
|
|
|
- <ChatAnswer content="回答回答回答回答回答" :toggleVisibleIcons="false"></ChatAnswer>
|
|
|
- <div class="answer-btns">
|
|
|
+ <NCard :title="item.id" v-for="item in dataSource" :key="item.id" class="mb-[20px]">
|
|
|
+ <div v-for="arr, i in item.history" :key="i + item.id" class="pt-[40px]">
|
|
|
+ <ChatAsk :content="arr[0]"></ChatAsk>
|
|
|
+ <ChatAnswer :content="arr[1]" :toggleVisibleIcons="false"></ChatAnswer>
|
|
|
+ <hr>
|
|
|
+ </div>
|
|
|
+ <div class="answer-btns pt-[20px]">
|
|
|
<NSpace>
|
|
|
- <NButton type="success">对</NButton>
|
|
|
- <NButton type="error">错</NButton>
|
|
|
+ <NButton :type="item.isDisable? '' : 'error'" @click="handleError(item)" :disabled="item.isDisable">
|
|
|
+ {{ item.isDisable ? '已审核' : '错' }}
|
|
|
+ </NButton>
|
|
|
</NSpace>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </NCard>
|
|
|
</div>
|
|
|
</section>
|
|
|
-
|
|
|
- <NDrawer placement="right" v-model:show="visible" width="600">123123</NDrawer>
|
|
|
+ <NDrawer placement="right" v-model:show="visible" width="800" title="错误ID">
|
|
|
+ <n-drawer-content :title="'错误ID列表 -- ' + errIds.length + ' 个'">
|
|
|
+ <!-- <div class="py-[30px]">{{ errIds.join(',') }}</div> -->
|
|
|
+ <!-- <hr> -->
|
|
|
+ <ul class="grid grid-cols-5">
|
|
|
+ <li v-for="item in errIds" :key="item">{{ item }}</li>
|
|
|
+ </ul>
|
|
|
+ </n-drawer-content>
|
|
|
+ </NDrawer>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|