# 与星网项目相关

* 如何去添加一个新的页面（addTabPage）
  可参考以下部分添加内容（部分文件、文件夹自行创建）：
  frame\frame.config.js
  ```js
  // PAGES,appreciation
  singReplay: {
    entry: 'frame/singReplay/main.ts',
    template: 'frame/pages/index.html',
    filename: 'singReplay.html',
    title: '回放',
    minify: true
  },
  ```
  frame\singReplay\main.ts
  ```ts
  import SingReplay from '@/pages/singReplay/index.vue'
  import exception from '@/plugins/exception'
  import store from '@/store'
  import logger from '@evideo/logger'
  import { createApp } from 'vue'

  Promise.resolve()
    .then(() => {
      logger.setNamespace('singReplay')
    })
    .then(() => {
      const app = createApp(SingReplay)
      app.use(store).use(exception)
      app.mount('#app')
    })
  ```
  src\hooks\useAddTabsPage.ts
  ```ts
  const goToSingReplay = _.debounce(
    (data: any, pageId?: string) => {
      const url = `${window.location.origin}/singReplay.html?id=${data.id}`
      const webPage: IWebPage = {
        name: `${data.name}`,
        url: url,
        data,
        pageId
      }
      addTabPage(webPage)
    },
    300,
    { leading: true, trailing: false }
  )
  ```

  然后就可以在项目中以如下方式进行调用：
  ```ts
  const { goToSingReplay } = useAddTabsPage()
  // 传参
  goToSingReplay(data)
  ```
  此处传递的参数可以通过以下过程在新页面进行接收
  ```ts
  const initData = () => {
    onHostMessage('onload', async (data: any) => {
      // data即为传递过来的参数
      ...
    })
  }
  // 必须在此生命周期进行
  onMounted(async () => {
    initData()
  })
  ```

---
* apiFetch用法

  首先要在```@/services/api```中配置api，具体形式参考以下
  ``` ts
    getStudentRecords: {
      remark: '获取学生录音列表',
      url: '/teacher/student-records',
      method: 'get',
      baseURL: ApiServices.User,
      apiServiceOption: {
        // 这里对后端接口发来的数据进行预处理。
        afterResponse
      }
    },
    setStudentRecordStatus: {
      remark: '设置学生录音状态（是否隐藏）',
      url: '/teacher/student-records/{id}/setStatus',
      method: 'post',
      baseURL: ApiServices.User
    },
  ```
  然后在代码中使用可参考如下
  ```ts
  import useFetchApi from '@/hooks/useFetchApi'
  import api from '@/services/api'

  const { fetchApi } = useFetchApi()
  const _api = api.Replay.setTeacherRecordStatus
  const _id = props.cardData.originData.id
  // 用法类似axios
  const result: any = await fetchApi(
    _api,
    {
      // body
      data: {
        status: 0
      }
    },
    { matchUrl: { id: _id } }
  )
  if (result?.message !== 'success') {
    throw result?.message
  }
  // result结果会自动json解析，如{message:'success'...}

  ```
---
* apiFetch之结果预处理：

  代码可参考以下：
  ```ts
  const afterResponse = (res: any) => {
    let _res = { ...res }
    res.data = {
      data: {
        items: _res.data.data,
        meta: _res.data.meta
      }
    }
    _res = null
    return res
  }


  const Replay: { [key: string]: ApiConfOption } = {
    getStudentRecords: {
      remark: '获取学生录音列表',
      url: '/teacher/student-records',
      method: 'get',
      baseURL: ApiServices.User,
      apiServiceOption: {
        // 这里对后端接口发来的数据进行预处理。
        afterResponse
      }
    },
  }
  ```
---
* TabList用法

  ```html
  <TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
  ```
  导入
  ```ts
  import TabList from '@/components/tabList.vue'
  ```
  其中tabs的格式如下
  ```ts
  const tabs = ref([
    {
      label: '教师作品',
      value: 'teacherWorks'
    }
  ])
  ```
  作用为生成一个标签页

---

* ScrollLoad用法

  ```html
  <ScrollLoad
    ref="scrollLoadRef"
    v-bind="scrollLoadProps"
    @fetchEnd="handleScrollDataFetchEnd">
    <!-- 这里直接使用elementplus的组件构建骨架屏 -->
    <template #skeleton>
      <el-skeleton
        :count="11"
        :throttle="500"
        animated
        class="result-skeleton">
        <template #template>
          <el-skeleton-item
            variant="rect"
            class="result-item-skeleton result-item"></el-skeleton-item>
        </template>
      </el-skeleton>
    </template>
    <!-- 这里为懒加载列表的内容，此处data未使用 -->
    <template #default={data}>
      <replayCard
        v-for="data of testData.testData"
        :key="data.title"
        :cardData="data"></replayCard>
    </template>
    <!-- 无数据时显示 -->
    <template #no-data>
      <RemindEmptyResource class="result-no-data"></RemindEmptyResource>
    </template>
  </ScrollLoad>
  ```
  其中scrollLoadProps的参数为如下
  ```ts
  const scrollLoadProps = computed(() => {
    return {
      apiConf: api.something,
      matchData: '@data.items@',
      params: {}
    }
  })
  ```
  具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）