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

aboutAETV.md

@@ -1,146 +1,202 @@
 # 与星网项目相关
 
+* 如何去添加一个新的页面（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
-  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()
+  首先要在```@/services/api```中配置api，具体形式参考以下
-const _api = api.Replay.setTeacherRecordStatus
+  ``` ts
-const _id = props.cardData.originData.id
+    getStudentRecords: {
-// 用法类似axios
+      remark: '获取学生录音列表',
-const result: any = await fetchApi(
+      url: '/teacher/student-records',
-  _api,
+      method: 'get',
-  {
+      baseURL: ApiServices.User,
-    // body
+      apiServiceOption: {
-    data: {
+        // 这里对后端接口发来的数据进行预处理。
-      status: 0
+        afterResponse
-    }
+      }
-  },
+    },
-  { matchUrl: { id: _id } }
+    setStudentRecordStatus: {
-)
+      remark: '设置学生录音状态（是否隐藏）',
-if (result?.message !== 'success') {
+      url: '/teacher/student-records/{id}/setStatus',
-  throw result?.message
+      method: 'post',
-}
+      baseURL: ApiServices.User
-// result结果会自动json解析，如{message:'success'...}
+    },
+  ```
+  然后在代码中使用可参考如下
+  ```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'...}
+
+  ```
+  然后就可以在项目中以如下方式进行调用：
+  ```ts
+  const { goToSingReplay } = useAddTabsPage()
+  // 传参
+  goToSingReplay(data)
+  ```
 ---
 * apiFetch之结果预处理：
-代码可参考以下：
+
-```ts
+  代码可参考以下：
-const afterResponse = (res: any) => {
+  ```ts
-  let _res = { ...res }
+  const afterResponse = (res: any) => {
-  res.data = {
+    let _res = { ...res }
-    data: {
+    res.data = {
-      items: _res.data.data,
+      data: {
-      meta: _res.data.meta
+        items: _res.data.data,
+        meta: _res.data.meta
+      }
     }
+    _res = null
+    return res
   }
-  _res = null
-  return res
-}
 
 
-const Replay: { [key: string]: ApiConfOption } = {
+  const Replay: { [key: string]: ApiConfOption } = {
-  getStudentRecords: {
+    getStudentRecords: {
-    remark: '获取学生录音列表',
+      remark: '获取学生录音列表',
-    url: '/teacher/student-records',
+      url: '/teacher/student-records',
-    method: 'get',
+      method: 'get',
-    baseURL: ApiServices.User,
+      baseURL: ApiServices.User,
-    apiServiceOption: {
+      apiServiceOption: {
-      // 这里对后端接口发来的数据进行预处理。
+        // 这里对后端接口发来的数据进行预处理。
-      afterResponse
+        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'
+      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的格式）
 
----
+  ```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的格式）