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

aboutAETV.md

@@ -1,6 +1,56 @@
 # 与星网项目相关
 
+* 如何去添加一个新的页面（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: {
@@ -45,8 +95,15 @@ if (result?.message !== 'success') {
   // result结果会自动json解析，如{message:'success'...}
 
   ```
+  然后就可以在项目中以如下方式进行调用：
+  ```ts
+  const { goToSingReplay } = useAddTabsPage()
+  // 传参
+  goToSingReplay(data)
+  ```
 ---
 * apiFetch之结果预处理：
+
   代码可参考以下：
   ```ts
   const afterResponse = (res: any) => {
@@ -77,6 +134,7 @@ const Replay: { [key: string]: ApiConfOption } = {
   ```
 ---
 * TabList用法
+
   ```html
   <TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
   ```
@@ -98,6 +156,7 @@ const tabs = ref([
 ---
 
 * ScrollLoad用法
+
   ```html
   <ScrollLoad
     ref="scrollLoadRef"
@@ -141,6 +200,3 @@ const scrollLoadProps = computed(() => {
   })
   ```
   具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
-
----
-# 接口使用相关