slibra-module-web/src/views/count/index3.vue

<script setup>
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_book3.json";

const dataSource = ref([]);
const errIds = ref([]);
const visible = ref(false);
const pageNum = ref(0);
const pageSize = 10;

const scrollRef = ref(null);

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 handlePrePage = () => {
  if ( pageNum.value === 1 ) {
    return alert("已经是第一页了");
  }
  pageNum.value -= 1;
  scroolToTop();
  localStorage.setItem('pageNum', pageNum.value);
}

const handleNextPage = () => {
  if ( pageNum.value === totalPages ) return alert("已经是最后一页了");
  pageNum.value += 1;
  scroolToTop();
  localStorage.setItem('pageNum', pageNum.value);
}

const handleError = item => {
  item.isDisable = !item.isDisable;
  item.isDisable ? (errIds.value.push(item.id)) : (errIds.value = errIds.value.filter(id => item.id !== id));
  localStorage.setItem('errIds', JSON.stringify( errIds.value ));
  // console.log(errIds.value);
}

// 返回顶部
const scroolToTop = () => {
  scrollRef.value?.scrollTo({ top: 0, behavior: 'smooth' });
}

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 flex items-center">
      <NSpace>
        <n-button @click="handlePrePage">上一页</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" ref="scrollRef">
      <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>
            <!-- :disabled="item.isDisable" -->
            <NButton :type="item.isDisable? '' : 'error'" @click="handleError(item)">
              {{ item.isDisable ? '已审核' : '错' }}
            </NButton>
          </NSpace>
        </div>
      </NCard>
    </div>
  </section>
  <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>
.page-container {
  width: 100vw;
  height: 100vh;
  background: #edf7fc;

  .header {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: #fff;
  }

  .main {
    width: 1000px;
    height: calc(100% - 74px);
    margin: 0 auto;
    overflow-y: scroll;

    .answer-block {
      border-bottom: 1px solid #000000;
      padding-bottom: 20px;
    }

    .answer-btns {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>