refactor: package NotepadContent class

4 files changed, 52 insertions, 48 deletions

diff --git a/src/views/index/Notepad/changelog.ts b/src/views/index/Notepad/changelog.ts
index 1090c6c..9d2b523 100644
--- a/src/views/index/Notepad/changelog.ts
+++ b/src/views/index/Notepad/changelog.ts
@@ -1,16 +1,16 @@
 import http from '@/utils/http'
 
-export const getChangeLog = async() =>
+import { NotepadContent } from "@/views/index/Notepad/type";
+export const changelog = async ():Promise<NotepadContent> =>
 {
-  const changeLog = axios.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest')
-  .then(res => {
-    console.log(res.data);
-    const ChangeLogMessage ="## "+ res.data['tag_name']+"\n"+res.data['body'];
-    return ChangeLogMessage;
-  })
-  .catch(err => {
-    console.log(err);
-    return err.toString();
-  })
-  return changeLog;
+    const title = "Changelog"
+    return http.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest')
+      .then(res => {
+        const message = "## " + res.data['tag_name'] + "\n" + res.data['body'];
+        return new NotepadContent(title,message)
+      })
+      .catch(err => {
+        console.log(err)
+        return new NotepadContent(title,err.toString())
+      })
 }
diff --git a/src/views/index/Notepad/index.vue b/src/views/index/Notepad/index.vue
index 33466d4..2d4f037 100644
--- a/src/views/index/Notepad/index.vue
+++ b/src/views/index/Notepad/index.vue
@@ -1,18 +1,13 @@
 <script lang="ts">
+import { NotepadContent } from "@/views/index/Notepad/type";
+
 export default {
   props: {
-    title: {
-      type: String,
-      default: "1",
-    },
-    message: {
-      type: String,
-      require: true
+    content: {
+      type: NotepadContent,
+      require: true,
+      default: new NotepadContent(),
     },
-    date: {
-      type: Date,
-      default: new Date('2024-07-14T12:00:00Z')
-    }
   },
 }
 </script>
@@ -21,9 +16,9 @@ export default {
 <template>
   <div class="details" style="overflow-y:hidden;overflow-x:hidden;height:100%">
     <h3>
-      {{ title }}
+      {{ content.title }}
     </h3>
-    <v-md-preview :text="message" ></v-md-preview>
+    <v-md-preview :text="content.message" ></v-md-preview>
   </div>
 </template>
 
diff --git a/src/views/index/Notepad/type.ts b/src/views/index/Notepad/type.ts
new file mode 100644
index 0000000..9147341
--- /dev/null
+++ b/src/views/index/Notepad/type.ts
@@ -0,0 +1,9 @@
+export class NotepadContent {
+  title: string = "";
+  message: string = "";
+
+  constructor(title:string="", message:string="") {
+    this.title=title;
+    this.message=message;
+  }
+}
diff --git a/src/views/index/Right.vue b/src/views/index/Right.vue
index 85df994..c415aee 100644
--- a/src/views/index/Right.vue
+++ b/src/views/index/Right.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
 import Notepad from './Notepad/index.vue'
 import DocumentationIcon from '@/components/icons/IconDocumentation.vue'
-import { getChangeLog } from './Notepad/changelog'
+import { NotepadContent } from "@/views/index/Notepad/type";
+import { changelog } from './Notepad/changelog'
+
 
 
 export default {
@@ -14,27 +16,17 @@ export default {
         "敬请期待",
         "敬请期待",
       ],
-      title: "",
-      message:"",
-      changeLogMessage:"",
+      notepadContents: [] as NotepadContent[],
     }
   },
   components: {
-    Notepad,
+    Notepad: Notepad,
     DocumentationIcon
   },
   methods: {
     change_page(n: number) {
       this.mainPage = n;
-      this.title = this.tooltip[n];
-      switch (n) {
-        case 0:
-          this.message = this.changeLogMessage;
-          break;
-        default:
-          this.message = "敬请期待";
-          break;
-      }
+      return this.notepadContents[n]
     },
     getBgColor(index: number) {
       if (index < this.mainPage) {
@@ -47,10 +39,18 @@ export default {
     }
   },
   beforeCreate() {
-    getChangeLog().then(res => {
-      this.changeLogMessage = res;
-      this.change_page(this.mainPage);
-    })
+    changelog().then(res => {
+      this.notepadContents.push(res);
+    });
+    changelog().then(res => {
+      this.notepadContents.push(res);
+    });
+    changelog().then(res => {
+      this.notepadContents.push(res);
+    });
+    changelog().then(res => {
+      this.notepadContents.push(res);
+    });
   },
 }
 
@@ -58,17 +58,17 @@ export default {
 
 <template>
   <div class="messageBar">
-    <div class="options">
-      <li v-for="(item, index) in tooltip" :key="index" class="item">
-        <el-tooltip :content="item" placement="left" >
+    <ul class="options">
+      <li v-for="(item, index) in notepadContents" :key="index" class="item">
+        <el-tooltip :content="item.title" placement="left" >
           <i :style="{background:getBgColor(index)}" @mouseover="change_page(index)">
             <DocumentationIcon/>
           </i>
         </el-tooltip>
       </li>
-    </div>
+    </ul>
     <div class="messageBox">
-      <Notepad :title="title" :message="message"/>
+      <Notepad :content="notepadContents[mainPage]" />
     </div>
   </div>
 </template>