update:24-07-09 16:41:47 -remark:新增添加新页面笔记 -AutoCommit

aboutAETV.md

@@ -1,8 +1,58 @@
 # 与星网项目相关
 
+* 如何去添加一个新的页面（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 }
+  )
+  ```
+---
 * apiFetch用法
-首先要在```@/services/api```中配置api，具体形式参考以下
+
-``` ts
+  首先要在```@/services/api```中配置api，具体形式参考以下
+  ``` ts
     getStudentRecords: {
       remark: '获取学生录音列表',
       url: '/teacher/student-records',
@@ -19,17 +69,17 @@
       method: 'post',
       baseURL: ApiServices.User
     },
-```
+  ```
-然后在代码中使用可参考如下
+  然后在代码中使用可参考如下
-```ts
+  ```ts
-import useFetchApi from '@/hooks/useFetchApi'
+  import useFetchApi from '@/hooks/useFetchApi'
-import api from '@/services/api'
+  import api from '@/services/api'
 
-const { fetchApi } = useFetchApi()
+  const { fetchApi } = useFetchApi()
-const _api = api.Replay.setTeacherRecordStatus
+  const _api = api.Replay.setTeacherRecordStatus
-const _id = props.cardData.originData.id
+  const _id = props.cardData.originData.id
-// 用法类似axios
+  // 用法类似axios
-const result: any = await fetchApi(
+  const result: any = await fetchApi(
     _api,
     {
       // body
@@ -38,18 +88,25 @@ const result: any = await fetchApi(
       }
     },
     { matchUrl: { id: _id } }
-)
+  )
-if (result?.message !== 'success') {
+  if (result?.message !== 'success') {
     throw result?.message
-}
+  }
-// result结果会自动json解析，如{message:'success'...}
+  // result结果会自动json解析，如{message:'success'...}
 
-```
+  ```
+  然后就可以在项目中以如下方式进行调用：
+  ```ts
+  const { goToSingReplay } = useAddTabsPage()
+  // 传参
+  goToSingReplay(data)
+  ```
 ---
 * apiFetch之结果预处理：
-代码可参考以下：
+
-```ts
+  代码可参考以下：
-const afterResponse = (res: any) => {
+  ```ts
+  const afterResponse = (res: any) => {
     let _res = { ...res }
     res.data = {
       data: {
@@ -59,10 +116,10 @@ const afterResponse = (res: any) => {
     }
     _res = null
     return res
-}
+  }
 
 
-const Replay: { [key: string]: ApiConfOption } = {
+  const Replay: { [key: string]: ApiConfOption } = {
     getStudentRecords: {
       remark: '获取学生录音列表',
       url: '/teacher/student-records',
@@ -73,33 +130,35 @@ const Replay: { [key: string]: ApiConfOption } = {
         afterResponse
       }
     },
-}
+  }
-```
+  ```
 ---
 * TabList用法
-```html
+
-<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
+  ```html
-```
+  <TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
-导入
+  ```
-```ts
+  导入
-import TabList from '@/components/tabList.vue'
+  ```ts
-```
+  import TabList from '@/components/tabList.vue'
-其中tabs的格式如下
+  ```
-```ts
+  其中tabs的格式如下
-const tabs = ref([
+  ```ts
+  const tabs = ref([
     {
       label: '教师作品',
       value: 'teacherWorks'
     }
-])
+  ])
-```
+  ```
-作用为生成一个标签页
+  作用为生成一个标签页
 
 ---
 
 * ScrollLoad用法
-```html
+
-<ScrollLoad
+  ```html
+  <ScrollLoad
     ref="scrollLoadRef"
     v-bind="scrollLoadProps"
     @fetchEnd="handleScrollDataFetchEnd">
@@ -128,19 +187,16 @@ const tabs = ref([
     <template #no-data>
       <RemindEmptyResource class="result-no-data"></RemindEmptyResource>
     </template>
-</ScrollLoad>
+  </ScrollLoad>
-```
+  ```
-其中scrollLoadProps的参数为如下
+  其中scrollLoadProps的参数为如下
-```ts
+  ```ts
-const scrollLoadProps = computed(() => {
+  const scrollLoadProps = computed(() => {
     return {
       apiConf: api.something,
       matchData: '@data.items@',
       params: {}
     }
-})
+  })
-```
+  ```
-具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
+  具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
-
----
-# 接口使用相关