From a2c2c007b0725efc17db000227b99385c0c3de24 Mon Sep 17 00:00:00 2001
From: longxiaokong <david060708@126.com>
Date: Mon, 24 Jun 2024 00:35:44 +0800
Subject: [PATCH 1/3] modified filter default behaviour

---
 README.md                                        |  0
 jsconfig.json                                    |  0
 src/App.vue                                      |  0
 src/components/global/MobileSearchBar.vue        |  0
 src/components/global/Nothing.vue                |  0
 src/composables/courses/all/useStatisticCard.js  | 16 +++++++++++++++-
 src/composables/courses/comment/useWritingBox.js |  0
 src/composables/global/useFetching.js            |  0
 src/composables/global/useHttpError.js           |  0
 src/composables/global/useParseScore.js          |  0
 src/views/CourseAll.vue                          |  0
 vue.config.js                                    |  0
 12 files changed, 15 insertions(+), 1 deletion(-)
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 jsconfig.json
 mode change 100644 => 100755 src/App.vue
 mode change 100644 => 100755 src/components/global/MobileSearchBar.vue
 mode change 100644 => 100755 src/components/global/Nothing.vue
 mode change 100644 => 100755 src/composables/courses/all/useStatisticCard.js
 mode change 100644 => 100755 src/composables/courses/comment/useWritingBox.js
 mode change 100644 => 100755 src/composables/global/useFetching.js
 mode change 100644 => 100755 src/composables/global/useHttpError.js
 mode change 100644 => 100755 src/composables/global/useParseScore.js
 mode change 100644 => 100755 src/views/CourseAll.vue
 mode change 100644 => 100755 vue.config.js

diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/jsconfig.json b/jsconfig.json
old mode 100644
new mode 100755
diff --git a/src/App.vue b/src/App.vue
old mode 100644
new mode 100755
diff --git a/src/components/global/MobileSearchBar.vue b/src/components/global/MobileSearchBar.vue
old mode 100644
new mode 100755
diff --git a/src/components/global/Nothing.vue b/src/components/global/Nothing.vue
old mode 100644
new mode 100755
diff --git a/src/composables/courses/all/useStatisticCard.js b/src/composables/courses/all/useStatisticCard.js
old mode 100644
new mode 100755
index b7e0055..c260ebf
--- a/src/composables/courses/all/useStatisticCard.js
+++ b/src/composables/courses/all/useStatisticCard.js
@@ -1,4 +1,4 @@
-import { inject, onMounted, reactive, watch } from "vue"
+import { inject, onMounted, onUnmounted, reactive, watch } from "vue"
 import { mdiCity, mdiChevronUp, mdiChevronDown } from "@mdi/js";
 import useDebounce from "@/composables/global/useDebounce";
 
@@ -36,7 +36,13 @@ export default () => {
         }
     }))
 
+    watch(() => window.innerWidth, useDebounce((to, from) => {
+        updateShowAll();
+    }))
+
     onMounted(() => {
+        updateShowAll();
+        window.addEventListener('resize', updateShowAll, { passive: true })
         if (courseFilterStatus.selected.length === 0) {
             status.selectAll = false
             status.selectNotAll = true
@@ -47,6 +53,14 @@ export default () => {
         }
     })
 
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateShowAll, { passive: true })
+    })
+
+    const updateShowAll = () => {
+        status.showAll = window.innerWidth >= 600;
+    }
+
     return { statics, courseStatistic, courseFilterStatus, status }
 
 }
\ No newline at end of file
diff --git a/src/composables/courses/comment/useWritingBox.js b/src/composables/courses/comment/useWritingBox.js
old mode 100644
new mode 100755
diff --git a/src/composables/global/useFetching.js b/src/composables/global/useFetching.js
old mode 100644
new mode 100755
diff --git a/src/composables/global/useHttpError.js b/src/composables/global/useHttpError.js
old mode 100644
new mode 100755
diff --git a/src/composables/global/useParseScore.js b/src/composables/global/useParseScore.js
old mode 100644
new mode 100755
diff --git a/src/views/CourseAll.vue b/src/views/CourseAll.vue
old mode 100644
new mode 100755
diff --git a/vue.config.js b/vue.config.js
old mode 100644
new mode 100755

From 4cf06481fd8764b0df4d8eb983b4f92c720f293b Mon Sep 17 00:00:00 2001
From: longxiaokong <david060708@126.com>
Date: Sat, 29 Jun 2024 16:24:06 +0800
Subject: [PATCH 2/3] initially finished mobile features.

---
 src/App.vue                                   |  222 +--
 src/assets/bench_reviewer.md                  |   20 +-
 src/assets/comment_policy.md                  |    2 +-
 src/assets/contributors.json                  |  124 +-
 src/assets/privacy_policy.md                  |   31 +-
 src/assets/sponsors.json                      |   42 +-
 src/assets/terms_of_service.md                |   57 +-
 src/components/courses/CourseCommentCard.vue  |  152 ++-
 src/components/courses/DetailCard.vue         |  566 ++++----
 src/components/courses/DetailChips.vue        |   30 +-
 src/components/courses/ManageCard.vue         |  984 +++++++-------
 src/components/courses/ReviewDetail.vue       |   55 +-
 src/components/courses/ScoreBoard.vue         |   69 +-
 src/components/courses/ScoreLine.vue          |    9 +-
 src/components/courses/WritingBox.vue         |  558 ++++----
 src/components/courses/WritingCard.vue        | 1208 +++++++++--------
 src/components/courses/all/CourseCard.vue     |  412 +++---
 .../courses/all/ElevatedPagination.vue        |  116 +-
 src/components/courses/all/SelectBar.vue      |  129 +-
 src/components/courses/all/StatisticCard.vue  |  210 +--
 src/components/global/ActivityBanner.vue      |   45 +-
 src/components/global/Header.vue              |  786 +++++------
 src/components/global/InsiderBanner.vue       |   68 +-
 src/components/global/MenuSideBar.vue         |   76 ++
 src/components/global/MobileSearchBar.vue     |  135 +-
 src/components/global/Nothing.vue             |   66 +-
 src/components/global/SliderButton.vue        |  468 ++++---
 src/components/teachers/course/CourseCard.vue |  312 +++--
 .../teachers/course/StatisticCard.vue         |  168 +--
 .../teachers/detail/BackgroundImage.vue       |   71 +-
 src/components/teachers/detail/Detail.vue     |  122 +-
 .../teachers/loader/CommentLoader.vue         |  210 +--
 .../teachers/loader/CourseLoader.vue          |  198 +--
 .../teachers/loader/DetailCardLoader.vue      |  184 +--
 .../teachers/loader/DetailLoader.vue          |  122 +-
 .../teachers/loader/ImageLoader.vue           |   26 +-
 .../teachers/loader/SelectLoader.vue          |  101 +-
 .../teachers/loader/StatisticLoader.vue       |   73 +-
 src/components/users/comment/CommentCard.vue  |   31 +-
 .../users/comment/CommentCardBar.vue          |  177 +--
 .../users/comment/CommentCardContent.vue      |  500 +++----
 src/components/users/comment/CommentCover.vue |  117 +-
 src/components/users/comment/CommentFold.vue  |  114 +-
 .../users/comment/StatisticCard.vue           |  166 +--
 .../users/comment/TextContainer.vue           |  461 +++----
 src/components/users/forms/Login.vue          |   88 +-
 .../users/profile/AvatarContainer.vue         |  208 +--
 src/components/users/profile/EditProfile.vue  |  797 +++++------
 src/components/users/profile/Profile.vue      |  210 ++-
 src/composables/courses/all/useCourseAll.js   |  443 +++---
 src/composables/courses/all/useCourseCard.js  |   30 +-
 .../courses/all/useStatisticCard.js           |  136 +-
 .../courses/comment/useCommentRecent.js       |  101 +-
 .../courses/comment/useCourseDetails.js       |  369 ++---
 .../courses/comment/useDetailCard.js          |   25 +-
 .../courses/comment/useFoldComment.js         |   14 +-
 .../courses/comment/useManageCard.js          |  580 ++++----
 .../courses/comment/useScoreLine.js           |   19 +-
 .../courses/comment/useSelectBar.js           |   23 +-
 .../courses/comment/useWritingBox.js          |  389 +++---
 .../courses/comment/useWritingCard.js         |  823 +++++------
 src/composables/global/useAfterRender.js      |   50 +-
 src/composables/global/useArrayUtils.js       |   32 +-
 src/composables/global/useCaptcha.js          |   18 +-
 src/composables/global/useCommentSort.js      |   33 +-
 src/composables/global/useCookie.js           |  195 ++-
 src/composables/global/useDebounce.js         |   18 +-
 src/composables/global/useExternalUrl.js      |   34 +-
 src/composables/global/useFetching.js         |   17 +-
 src/composables/global/useHttpError.js        |   49 +-
 src/composables/global/useInsitePush.js       |   41 +-
 src/composables/global/useMarkdown.js         |   30 +-
 src/composables/global/useMenuBar.js          |   21 +
 src/composables/global/useMutation.js         |   15 +-
 src/composables/global/useObjectUtils.js      |   48 +-
 src/composables/global/useParseScore.js       |   29 +-
 src/composables/global/usePhantomData.js      |  518 +++----
 src/composables/global/useRecordWatch.js      |   22 +-
 src/composables/global/useRefCopy.js          |   35 +-
 src/composables/global/useRouteMatch.js       |   20 +-
 src/composables/global/useShare.js            |    9 +-
 src/composables/global/useSnackbar.js         |   29 +-
 src/composables/global/useSponsors.js         |  134 +-
 src/composables/global/useStaticData.js       |  118 +-
 src/composables/global/useTimeUtils.js        |   12 +-
 src/composables/global/useUserName.js         |   67 +-
 src/composables/global/useWatching.js         |    6 +-
 src/composables/reward/useModifyReward.js     |   68 +-
 src/composables/reward/useRewardRank.js       |    3 +-
 .../teachers/course/useCourseCard.js          |   28 +-
 .../teachers/course/useStatisticCard.js       |   59 +-
 src/composables/teachers/detail/useDetail.js  |   15 +-
 src/composables/teachers/useTeacherDetail.js  |  232 ++--
 .../users/comment/useCommentCardBar.js        |   11 +-
 .../users/comment/useCommentCardContent.js    |   74 +-
 .../users/comment/useStatisticCard.js         |   59 +-
 .../users/comment/useTextContainer.js         |   61 +-
 src/composables/users/forms/useForms.js       |   62 +-
 src/composables/users/forms/useLogin.js       |  376 ++---
 src/composables/users/forms/useLogout.js      |   47 +-
 src/composables/users/forms/useRegister.js    |  253 ++--
 .../users/profile/useEditProfile.js           |  444 +++---
 src/composables/users/profile/useProfile.js   |  160 ++-
 src/composables/users/useActive.js            |  133 +-
 .../users/useResetPasswordActive.js           |  172 +--
 src/composables/users/useUser.js              |  302 +++--
 src/main.js                                   |   80 +-
 src/plugins/markdown-loader.js                |    6 +-
 src/plugins/vuetify.js                        |   20 +-
 src/router/index.js                           |  116 +-
 src/router/migrateRouter.js                   |   26 +-
 src/styles/markdown.css                       |  135 +-
 src/styles/prism.css                          |  241 ++--
 src/views/About.vue                           |  714 +++++-----
 src/views/Active.vue                          |  355 ++---
 src/views/ActivityPoster.vue                  |  194 +--
 src/views/CourseAll.vue                       |  190 ++-
 src/views/CourseDetails.vue                   |  380 +++---
 src/views/NotFound.vue                        |   32 +-
 src/views/Ranking.vue                         |    3 +-
 src/views/Recent.vue                          |   57 +-
 src/views/ResetPasswordActive.vue             |  566 ++++----
 src/views/TeacherAll.vue                      |   15 +-
 src/views/TeacherDetails.vue                  |  411 +++---
 src/views/User.vue                            |  283 ++--
 125 files changed, 11425 insertions(+), 10606 deletions(-)
 mode change 100644 => 100755 src/components/global/Header.vue
 create mode 100755 src/components/global/MenuSideBar.vue
 create mode 100644 src/composables/global/useMenuBar.js

diff --git a/src/App.vue b/src/App.vue
index f03febb..98391bf 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,106 +1,116 @@
-<template>
-  <v-app>
-    <Header :snackbar.sync="snackbar" />
-    <v-main>
-      <div>
-        <InsiderBanner />
-      </div>
-      <div>
-        <ActivityBanner :Enable=true>
-          评论拿赏金功能上线啦！详情请点击<a @click="$router.push('/activities')">这里</a>！
-        </ActivityBanner>
-      </div>
-      
-      <router-view :key="$route.path" />
-      <v-snackbar
-        v-model="snackbar.show"
-        :color="snackbar.color"
-        :timeout="snackbar.timeout"
-        outlined
-      >
-        {{ snackbar.text }}
-        <template #action="{ attrs }">
-          <v-btn v-bind="attrs" @click="snackbar.show = false" icon>
-            <v-icon :color="snackbar.color">
-              {{ icons.mdiClose }}
-            </v-icon>
-          </v-btn>
-        </template>
-      </v-snackbar>
-    </v-main>
-  </v-app>
-</template>
-<script>
-import Header from '@/components/global/Header';
-import InsiderBanner from '@/components/global/InsiderBanner';
-import ActivityBanner from '@/components/global/ActivityBanner';
-import useSnackbar from '@/composables/global/useSnackbar';
-import { getPreset } from '@/composables/global/useCookie';
-import { provide, reactive } from 'vue';
-import { mdiClose } from '@mdi/js';
-
-export default {
-  name: 'App',
-  components: { Header, InsiderBanner, ActivityBanner },
-  setup() {
-    const { snackbar } = useSnackbar();
-    const global = reactive({
-      userProfile: getPreset(),
-      isLogin:
-        Object.getOwnPropertyNames(getPreset()).filter(
-          (key) => key !== '__ob__',
-        ).length !== 0,
-    });
-    const searchInput = reactive({
-      isRegexp: false,
-      keys: [''],
-    });
-
-    const savedCourseAllStatus = reactive({
-      page: 1,
-    });
-
-    const savedCourseAllFilterStatus = reactive({
-      selected: [],
-      sortKey: '综合评分',
-      order: '从高到低',
-    });
-
-    provide('global', global);
-    provide('searchInput', searchInput);
-    provide('savedCourseAllStatus', savedCourseAllStatus);
-    provide('savedCourseAllFilterStatus', savedCourseAllFilterStatus);
-
-    return { snackbar };
-  },
-  data() {
-    return {
-      icons: {
-        mdiClose,
-      },
-    };
-  },
-  created() {
-    console.log(`
-    _____                         ____                  _     
-  / ____|                        |  _ \\                | |    
- | |     ___  _   _ _ __ ___  ___| |_) | ___ _ __   ___| |__  
- | |    / _ \\| | | | '__/ __|/ _ \\  _ < / _ \\ '_ \\ / __| '_ \\ 
- | |___| (_) | |_| | |  \\__ \\  __/ |_) |  __/ | | | (__| | | |
-  \\_____\\___/ \\__,_|_|  |___/\\___|____/ \\___|_| |_|\\___|_| |_|
-
-    `);
-    try {
-      document.body.removeChild(document.getElementById('app-loader'));
-      this.$vuetify.theme.dark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-    } catch {}
-  },
-};
-</script>
-<style>
-body {
-  overflow-x: hidden;
-}
-</style>
+<template>
+  <v-app>
+    <Header :snackbar.sync="snackbar" />
+    <v-main>
+      <MenuSideBar />
+      <div>
+        <InsiderBanner />
+      </div>
+      <div>
+        <ActivityBanner :Enable="true">
+          评论拿赏金功能上线啦！详情请点击<a
+            @click="$router.push('/activities')"
+            >这里</a
+          >！
+        </ActivityBanner>
+      </div>
+
+      <router-view :key="$route.path" />
+      <v-snackbar
+        v-model="snackbar.show"
+        :color="snackbar.color"
+        :timeout="snackbar.timeout"
+        outlined
+      >
+        {{ snackbar.text }}
+        <template #action="{ attrs }">
+          <v-btn v-bind="attrs" @click="snackbar.show = false" icon>
+            <v-icon :color="snackbar.color">
+              {{ icons.mdiClose }}
+            </v-icon>
+          </v-btn>
+        </template>
+      </v-snackbar>
+    </v-main>
+  </v-app>
+</template>
+<script>
+import Header from '@/components/global/Header';
+import InsiderBanner from '@/components/global/InsiderBanner';
+import ActivityBanner from '@/components/global/ActivityBanner';
+import useSnackbar from '@/composables/global/useSnackbar';
+import { getPreset } from '@/composables/global/useCookie';
+import { provide, reactive } from 'vue';
+import { mdiClose } from '@mdi/js';
+import MenuSideBar from '@/components/global/MenuSideBar.vue';
+
+export default {
+  name: 'App',
+  components: { Header, InsiderBanner, ActivityBanner, MenuSideBar },
+  setup() {
+    const { snackbar } = useSnackbar();
+    const global = reactive({
+      userProfile: getPreset(),
+      isLogin:
+        Object.getOwnPropertyNames(getPreset()).filter(
+          (key) => key !== '__ob__',
+        ).length !== 0,
+    });
+    const searchInput = reactive({
+      isRegexp: false,
+      keys: [''],
+    });
+
+    const savedCourseAllStatus = reactive({
+      page: 1,
+    });
+
+    const savedCourseAllFilterStatus = reactive({
+      selected: [],
+      sortKey: '综合评分',
+      order: '从高到低',
+    });
+
+    const menuBarStatus = reactive({
+      drawer: false,
+    });
+
+    provide('global', global);
+    provide('menu', menuBarStatus);
+    provide('searchInput', searchInput);
+    provide('savedCourseAllStatus', savedCourseAllStatus);
+    provide('savedCourseAllFilterStatus', savedCourseAllFilterStatus);
+
+    return { snackbar };
+  },
+  data() {
+    return {
+      icons: {
+        mdiClose,
+      },
+    };
+  },
+  created() {
+    console.log(`
+    _____                         ____                  _     
+  / ____|                        |  _ \\                | |    
+ | |     ___  _   _ _ __ ___  ___| |_) | ___ _ __   ___| |__  
+ | |    / _ \\| | | | '__/ __|/ _ \\  _ < / _ \\ '_ \\ / __| '_ \\ 
+ | |___| (_) | |_| | |  \\__ \\  __/ |_) |  __/ | | | (__| | | |
+  \\_____\\___/ \\__,_|_|  |___/\\___|____/ \\___|_| |_|\\___|_| |_|
+
+    `);
+    try {
+      document.body.removeChild(document.getElementById('app-loader'));
+      this.$vuetify.theme.dark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+    } catch {}
+  },
+};
+</script>
+<style>
+body {
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/assets/bench_reviewer.md b/src/assets/bench_reviewer.md
index edc56ee..06758a8 100644
--- a/src/assets/bench_reviewer.md
+++ b/src/assets/bench_reviewer.md
@@ -2,29 +2,29 @@
 
 ## 参与计划
 
-“Bench Reviewers” 招募计划，是为Course Bench网络社区培养优秀内容创作者的活动。Course Bench是由上科大同学自发组织的网络社区，你可以发表对科大课程的评价，也可以和同学交流学习经验、选课心得、生活感想等。为了共建社区，我们希望通过邀请和招募的形式，吸引约50名有表达欲、对课程评价感兴趣的Bench Reviewer。我们将一起通过不定期发布高质量评论，积极建设Course Bench社区。
-奖励：每名Bench Reviewer将获得约100元现金奖励，并获得“Bench Reviewer”称号
+“Bench Reviewers” 招募计划，是为 Course Bench 网络社区培养优秀内容创作者的活动。Course Bench 是由上科大同学自发组织的网络社区，你可以发表对科大课程的评价，也可以和同学交流学习经验、选课心得、生活感想等。为了共建社区，我们希望通过邀请和招募的形式，吸引约 50 名有表达欲、对课程评价感兴趣的 Bench Reviewer。我们将一起通过不定期发布高质量评论，积极建设 Course Bench 社区。
+奖励：每名 Bench Reviewer 将获得约 100 元现金奖励，并获得“Bench Reviewer”称号
 
 ## 我们期待的评论：
 
-示例1：
+示例 1：
 
-示例2：
+示例 2：
 
 ## Q&A
 
-### 我该如何加入Bench Reviewers招募活动？
+### 我该如何加入 Bench Reviewers 招募活动？
 
-你可以通过接受邀请，或者海报/QQ群/微信群的方式加入我们，名额有限，先到先得哦！
+你可以通过接受邀请，或者海报/QQ 群/微信群的方式加入我们，名额有限，先到先得哦！
 
-### 成为Bench Reviewers有什么要求吗？
+### 成为 Bench Reviewers 有什么要求吗？
 
-你需要在Course Bench上发布100字以上，且能提供有参考价值的事实信息的评论，并被评为优质评论，就有机会成为Bench Reviewer。
+你需要在 Course Bench 上发布 100 字以上，且能提供有参考价值的事实信息的评论，并被评为优质评论，就有机会成为 Bench Reviewer。
 
 ### 我该如何领取奖金？
 
-我们会根据各位的评论质量，向最优质的50名同学发送邀请邮件，加入我们的活动微信群，用于奖金发放，并配合后续宣传工作。
+我们会根据各位的评论质量，向最优质的 50 名同学发送邀请邮件，加入我们的活动微信群，用于奖金发放，并配合后续宣传工作。
 
 ### 活动什么时候结束？
 
-本次活动从2024年5月1日开始，目前为长期活动，停止招募会另行通知。
\ No newline at end of file
+本次活动从 2024 年 5 月 1 日开始，目前为长期活动，停止招募会另行通知。
diff --git a/src/assets/comment_policy.md b/src/assets/comment_policy.md
index e5a5cc4..3a83f0c 100644
--- a/src/assets/comment_policy.md
+++ b/src/assets/comment_policy.md
@@ -1 +1 @@
-发一条友善的评论
+发一条友善的评论
diff --git a/src/assets/contributors.json b/src/assets/contributors.json
index bf584a9..5635a52 100644
--- a/src/assets/contributors.json
+++ b/src/assets/contributors.json
@@ -1,62 +1,62 @@
-[
-    {
-        "name": "teafrogsf",
-        "home": "qq:861940148",
-        "avatar": "qq:861940148"
-    },
-    {
-        "name": "WAAutoMaton",
-        "home": "github:WAAutoMaton",
-        "avatar": "github:24771667"
-    },
-    {
-        "name": "yanglinshu",
-        "home": "github:yanglinshu",
-        "avatar": "github:46046648"
-    },
-    {
-        "name": "Clarivy",
-        "home": "github:Clarivy",
-        "avatar": "github:62002698"
-    },
-    {
-        "name": "wenxuanjun",
-        "home": "github:wenxuanjun",
-        "avatar": "github:41050170"
-    },
-    {
-        "name": "陆沈欢",
-        "home": "qq:2366384567",
-        "avatar": "qq:2366384567"
-    },
-    {
-        "name": "邓宸希",
-        "home": "qq:3260984912",
-        "avatar": "qq:3260984912"
-    },
-    {
-        "name": "魏之远",
-        "home": "qq:1258678835",
-        "avatar": "qq:1258678835"
-    },
-    {
-        "name": "失踪猫猫",
-        "home": "qq:2330905078",
-        "avatar": "qq:2330905078"
-    },
-    {
-        "name": "猫剩子",
-        "home": "qq:2512031097",
-        "avatar": "qq:2512031097"
-    },
-    {
-        "name": "Tropinone",
-        "home": "qq:1841610434,",
-        "avatar": "qq:1841610434"
-    },
-    {
-        "name": "存开心",
-        "home": "qq:2174656630",
-        "avatar": "qq:2174656630"
-    }
-]
\ No newline at end of file
+[
+  {
+    "name": "teafrogsf",
+    "home": "qq:861940148",
+    "avatar": "qq:861940148"
+  },
+  {
+    "name": "WAAutoMaton",
+    "home": "github:WAAutoMaton",
+    "avatar": "github:24771667"
+  },
+  {
+    "name": "yanglinshu",
+    "home": "github:yanglinshu",
+    "avatar": "github:46046648"
+  },
+  {
+    "name": "Clarivy",
+    "home": "github:Clarivy",
+    "avatar": "github:62002698"
+  },
+  {
+    "name": "wenxuanjun",
+    "home": "github:wenxuanjun",
+    "avatar": "github:41050170"
+  },
+  {
+    "name": "陆沈欢",
+    "home": "qq:2366384567",
+    "avatar": "qq:2366384567"
+  },
+  {
+    "name": "邓宸希",
+    "home": "qq:3260984912",
+    "avatar": "qq:3260984912"
+  },
+  {
+    "name": "魏之远",
+    "home": "qq:1258678835",
+    "avatar": "qq:1258678835"
+  },
+  {
+    "name": "失踪猫猫",
+    "home": "qq:2330905078",
+    "avatar": "qq:2330905078"
+  },
+  {
+    "name": "猫剩子",
+    "home": "qq:2512031097",
+    "avatar": "qq:2512031097"
+  },
+  {
+    "name": "Tropinone",
+    "home": "qq:1841610434,",
+    "avatar": "qq:1841610434"
+  },
+  {
+    "name": "存开心",
+    "home": "qq:2174656630",
+    "avatar": "qq:2174656630"
+  }
+]
diff --git a/src/assets/privacy_policy.md b/src/assets/privacy_policy.md
index 460713f..2f65e38 100644
--- a/src/assets/privacy_policy.md
+++ b/src/assets/privacy_policy.md
@@ -1,18 +1,19 @@
-更新日期：2022年10月1日
-生效日期：2022年10月1日
-请您知悉，本指引**目前**并不具有真实的法律效力，仅作为CourshBench运营团队与CourseBench用户之间的公约。请您在使用本平台前，仔细阅读并充分理解该指引。
+更新日期：2022 年 10 月 1 日
+生效日期：2022 年 10 月 1 日
+请您知悉，本指引**目前**并不具有真实的法律效力，仅作为 CourshBench 运营团队与 CourseBench 用户之间的公约。请您在使用本平台前，仔细阅读并充分理解该指引。
+
 1. 我们收集和使用的个人信息
-在您使用CourseBench的过程中，我们将收集您在使用我们的服务时主动提供或因为使用服务而产生的信息。我们对您用户信息的收集和使用均已征得您的同意，且仅用于为您提供及优化我们的服务和维护您的账户安全。我们会尽可能地以最小限度收集必要的信息。
-如果您拒绝我们收集这些信息，您将无法使用我们的评论和点赞服务。但您仍然能够使用我们的基础服务，如搜索和浏览课程评价页面等功能。
-我们会按如下方式收集您的信息：
-1.1 当您注册并使用CourseBench账号时，我们需要收集您的邮箱作为必要信息。我们也会在征集您的同意后收集您的学段、入学时间、真实姓名等信息。
-1.2 当您使用CourseBench的搜索、点赞/踩、评论等功能时，为了CourseBench的维护和可持续发展，我们会收集在此过程中产生的日志等信息，并保存您生产的内容（包括点赞/踩、评论等信息）。
-1.3 您可以在个人主页中更改您的学段、入学时间、真实姓名信息。您还可以添加或更改您的昵称。我们会收集这些信息，且不保存更改前的内容。
-1.4 当您向CourseBench提出建议或反馈时，我们会收集您的联系方式，以便于与您进行进一步的交流和沟通。
-1.5 当您向CourseBench提供赞助时，我们会在征得您的同意后收集您的昵称、邮箱、头像等信息，并用于Sponsor页面的展示。我们不会将这些信息用于其他用途。
-1.6 由于提供服务的必要性，我们会在您使用我们的服务过程中收集包括但不限于IP地址、浏览器标识符、操作系统等设备信息。
+   在您使用 CourseBench 的过程中，我们将收集您在使用我们的服务时主动提供或因为使用服务而产生的信息。我们对您用户信息的收集和使用均已征得您的同意，且仅用于为您提供及优化我们的服务和维护您的账户安全。我们会尽可能地以最小限度收集必要的信息。
+   如果您拒绝我们收集这些信息，您将无法使用我们的评论和点赞服务。但您仍然能够使用我们的基础服务，如搜索和浏览课程评价页面等功能。
+   我们会按如下方式收集您的信息：
+   1.1 当您注册并使用 CourseBench 账号时，我们需要收集您的邮箱作为必要信息。我们也会在征集您的同意后收集您的学段、入学时间、真实姓名等信息。
+   1.2 当您使用 CourseBench 的搜索、点赞/踩、评论等功能时，为了 CourseBench 的维护和可持续发展，我们会收集在此过程中产生的日志等信息，并保存您生产的内容（包括点赞/踩、评论等信息）。
+   1.3 您可以在个人主页中更改您的学段、入学时间、真实姓名信息。您还可以添加或更改您的昵称。我们会收集这些信息，且不保存更改前的内容。
+   1.4 当您向 CourseBench 提出建议或反馈时，我们会收集您的联系方式，以便于与您进行进一步的交流和沟通。
+   1.5 当您向 CourseBench 提供赞助时，我们会在征得您的同意后收集您的昵称、邮箱、头像等信息，并用于 Sponsor 页面的展示。我们不会将这些信息用于其他用途。
+   1.6 由于提供服务的必要性，我们会在您使用我们的服务过程中收集包括但不限于 IP 地址、浏览器标识符、操作系统等设备信息。
 2. 我们如何保护您的信息
-  2.1 我们将采取业内认可的方式来保护您的信息。我们将尽可能地使用一切合理的方式来保护您的信息不受侵害。您的密码将被以安全的加密方式存储在数据库中。您的浏览器与CourseBench交互数据时，数据将受到SSL加密保护。我们会时刻关注您的安全。
-  2.2 如果我们需要使用您的去标识化信息用于CourseBench的更新和优化，我们会将您的信息进行脱敏处理。
+   2.1 我们将采取业内认可的方式来保护您的信息。我们将尽可能地使用一切合理的方式来保护您的信息不受侵害。您的密码将被以安全的加密方式存储在数据库中。您的浏览器与 CourseBench 交互数据时，数据将受到 SSL 加密保护。我们会时刻关注您的安全。
+   2.2 如果我们需要使用您的去标识化信息用于 CourseBench 的更新和优化，我们会将您的信息进行脱敏处理。
 3. 我们如何更新与修改该指引
-  我们可能会在网站进行重大更新时同步更新该指引。我们会提供显著的通知来说明具体的变更内容，且在获取您的同意前，我们不会按照更新后的指引收集、使用、处理和存储您的信息。
\ No newline at end of file
+   我们可能会在网站进行重大更新时同步更新该指引。我们会提供显著的通知来说明具体的变更内容，且在获取您的同意前，我们不会按照更新后的指引收集、使用、处理和存储您的信息。
diff --git a/src/assets/sponsors.json b/src/assets/sponsors.json
index 0dfaaec..40fe51b 100644
--- a/src/assets/sponsors.json
+++ b/src/assets/sponsors.json
@@ -1,21 +1,21 @@
-{
-    "cooperations": [
-        {
-            "name": "上海科技大学ACM社",
-            "home": "https://acm.shanghaitech.edu.cn/",
-            "logo": "https://s2.loli.net/2022/09/30/O3vP8m5t1qV6D4n.png"
-        }
-    ],
-    "individuals": [
-        {
-            "name": "Winlere", 
-            "home": "https://cnblogs.com/winlere", 
-            "avatar": "https://avatars.githubusercontent.com/u/48151038?s=64&v=4"
-        }, 
-        {
-            "name": "logan",
-            "home": "github:LoganJoe",
-            "avatar": "github:36989741"
-        }
-    ]
-}
\ No newline at end of file
+{
+  "cooperations": [
+    {
+      "name": "上海科技大学ACM社",
+      "home": "https://acm.shanghaitech.edu.cn/",
+      "logo": "https://s2.loli.net/2022/09/30/O3vP8m5t1qV6D4n.png"
+    }
+  ],
+  "individuals": [
+    {
+      "name": "Winlere",
+      "home": "https://cnblogs.com/winlere",
+      "avatar": "https://avatars.githubusercontent.com/u/48151038?s=64&v=4"
+    },
+    {
+      "name": "logan",
+      "home": "github:LoganJoe",
+      "avatar": "github:36989741"
+    }
+  ]
+}
diff --git a/src/assets/terms_of_service.md b/src/assets/terms_of_service.md
index 324175b..81f2659 100644
--- a/src/assets/terms_of_service.md
+++ b/src/assets/terms_of_service.md
@@ -1,33 +1,34 @@
-更新日期：2022年10月1日
-生效日期：2022年10月1日
-请您知悉，本协议**目前**并不具有真实的法律效力，仅作为CourshBench运营团队与CourseBench用户（下称“用户”）之间的公约。请您在使用本平台前，仔细阅读并充分理解该协议。如您开始使用我们的服务，即视为您（即用户）已完全理解并同意本协议下的全部条款。
+更新日期：2022 年 10 月 1 日
+生效日期：2022 年 10 月 1 日
+请您知悉，本协议**目前**并不具有真实的法律效力，仅作为 CourshBench 运营团队与 CourseBench 用户（下称“用户”）之间的公约。请您在使用本平台前，仔细阅读并充分理解该协议。如您开始使用我们的服务，即视为您（即用户）已完全理解并同意本协议下的全部条款。
+
 1. 账号使用
-1.1 用户注册成功后，应当负责保管用户的账号和密码。用户对以其账号进行的所有行为负法律责任。
-1.2 用户应对其在CourseBench注册信息的真实性、合法性、有效性承担全部责任。用户不得冒充他人进行任何行为，否则CourseBench有权立即停止提供服务并由用户承担由此产生的一切法律责任。
-1.3 用户不得生产和发布含有下列内容的违法信息：
-(一)反对宪法所确定的基本原则的；
-(二)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
-(三)损害国家荣誉和利益的；
-(四)歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉的；
-(五)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动的；
-(六)煽动民族仇恨、民族歧视，破坏民族团结的；
-(七)破坏国家宗教政策，宣扬邪教和封建迷信的；
-(八)散布谣言，扰乱经济秩序和社会秩序的；
-(九)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
-(十)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益的；
-(十一)法律、行政法规禁止的其他内容。
-1.4 如用户违反任何上述规定，CourseBench有权对用户采取包括但不限于要求改正、删除内容、暂停或终止用户使用CourseBench的权利。
+   1.1 用户注册成功后，应当负责保管用户的账号和密码。用户对以其账号进行的所有行为负法律责任。
+   1.2 用户应对其在 CourseBench 注册信息的真实性、合法性、有效性承担全部责任。用户不得冒充他人进行任何行为，否则 CourseBench 有权立即停止提供服务并由用户承担由此产生的一切法律责任。
+   1.3 用户不得生产和发布含有下列内容的违法信息：
+   (一)反对宪法所确定的基本原则的；
+   (二)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
+   (三)损害国家荣誉和利益的；
+   (四)歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉的；
+   (五)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动的；
+   (六)煽动民族仇恨、民族歧视，破坏民族团结的；
+   (七)破坏国家宗教政策，宣扬邪教和封建迷信的；
+   (八)散布谣言，扰乱经济秩序和社会秩序的；
+   (九)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
+   (十)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益的；
+   (十一)法律、行政法规禁止的其他内容。
+   1.4 如用户违反任何上述规定，CourseBench 有权对用户采取包括但不限于要求改正、删除内容、暂停或终止用户使用 CourseBench 的权利。
 2. 知识产权
-2.1 CourseBench尊重用户的创作。用户在CourseBench上生产或发布的全部原创内容（包括但不限于课程评价）著作权均归用户本人所有。用户可授权任何第三方以任何形式使用。
-2.2 用户将其在CourseBench上生产和发布的全部内容，授予CourseBench免费的、不可撤销的、非独家使用许可。CourseBench在未经用户同意前，不会对使用的内容进行修改，但可能会在不扭曲真实含义的情况下选取用户的内容。
-2.3 用户在CourseBench上生产或发布内容，均视为用户同意CourseBench或任何第三方遵循CC4.0 BY-NC-SA的协议对用户的内容进行知识共享。
-2.4 在CourseBench上传或发表的内容，用户应保证其为著作权人或已取得合法授权，并且该内容不会侵犯任何第三方的合法权益。如果第三方提出关于著作权的异议，CourseBench有权根据实际情况删除相关的内容，且有权追究用户的法律责任。给CourseBench或任何第三方造成损失的，用户应负责全额赔偿。
+   2.1 CourseBench 尊重用户的创作。用户在 CourseBench 上生产或发布的全部原创内容（包括但不限于课程评价）著作权均归用户本人所有。用户可授权任何第三方以任何形式使用。
+   2.2 用户将其在 CourseBench 上生产和发布的全部内容，授予 CourseBench 免费的、不可撤销的、非独家使用许可。CourseBench 在未经用户同意前，不会对使用的内容进行修改，但可能会在不扭曲真实含义的情况下选取用户的内容。
+   2.3 用户在 CourseBench 上生产或发布内容，均视为用户同意 CourseBench 或任何第三方遵循 CC4.0 BY-NC-SA 的协议对用户的内容进行知识共享。
+   2.4 在 CourseBench 上传或发表的内容，用户应保证其为著作权人或已取得合法授权，并且该内容不会侵犯任何第三方的合法权益。如果第三方提出关于著作权的异议，CourseBench 有权根据实际情况删除相关的内容，且有权追究用户的法律责任。给 CourseBench 或任何第三方造成损失的，用户应负责全额赔偿。
 3. 个人隐私
-CourseBench不鼓励用户进行匿名评价。我们为用户提供匿名服务，但我们保留在用户创作或发布不当内容时解除匿名的权利。我们鼓励用户以实名（即公开邮箱）的方式生产和发布内容，同时将尽全力保护用户的隐私信息。
-如用户使用CourseBench提供的服务，视为用户同意CourseBench按照《个人信息保护指引》收集、使用和储存用户的信息。
-除非得到用户的明确同意，CourseBench不会向任何第三方透露用户的个人隐私信息及非公开内容。
+   CourseBench 不鼓励用户进行匿名评价。我们为用户提供匿名服务，但我们保留在用户创作或发布不当内容时解除匿名的权利。我们鼓励用户以实名（即公开邮箱）的方式生产和发布内容，同时将尽全力保护用户的隐私信息。
+   如用户使用 CourseBench 提供的服务，视为用户同意 CourseBench 按照《个人信息保护指引》收集、使用和储存用户的信息。
+   除非得到用户的明确同意，CourseBench 不会向任何第三方透露用户的个人隐私信息及非公开内容。
 4. 免责声明
-4.1 用户应充分意识到，用户生产或发表的任何内容，均有可能被任何第三方用于违背本协议或非法用途。用户同意其使用CourseBench存在的风险和产生的一切后果完全由用户本人承担，CourseBench对此不承担任何责任。
-4.2 CourseBench有权但无义务审核用户生产或发表的内容。CourseBench不对这些内容作任何担保，且保留在任何情况下删除内容的权利。
+   4.1 用户应充分意识到，用户生产或发表的任何内容，均有可能被任何第三方用于违背本协议或非法用途。用户同意其使用 CourseBench 存在的风险和产生的一切后果完全由用户本人承担，CourseBench 对此不承担任何责任。
+   4.2 CourseBench 有权但无义务审核用户生产或发表的内容。CourseBench 不对这些内容作任何担保，且保留在任何情况下删除内容的权利。
 5. 协议修改
-CourseBench有权对本协议的内容进行更改。我们会提供显著的通知来说明具体的变更内容，且该行为视为我们已经变更该协议。如果用户不同意CourseBench对协议的更改，用户有权且应当停止使用CourseBench。如果用户继续使用CourseBench，则视为用户接受CourseBench对协议的更改。
\ No newline at end of file
+   CourseBench 有权对本协议的内容进行更改。我们会提供显著的通知来说明具体的变更内容，且该行为视为我们已经变更该协议。如果用户不同意 CourseBench 对协议的更改，用户有权且应当停止使用 CourseBench。如果用户继续使用 CourseBench，则视为用户接受 CourseBench 对协议的更改。
diff --git a/src/components/courses/CourseCommentCard.vue b/src/components/courses/CourseCommentCard.vue
index 27d75c7..0df342c 100644
--- a/src/components/courses/CourseCommentCard.vue
+++ b/src/components/courses/CourseCommentCard.vue
@@ -25,15 +25,15 @@
                 {{
                   useUserName(localComment.user) +
                   (localComment.user && localComment.is_anonymous
-                    ? "(匿名)"
-                    : "")
+                    ? '(匿名)'
+                    : '')
                 }}
               </div>
               <div class="text-caption mt-n1 single-line-limit">
                 {{
                   localComment.user
                     ? gradeItems[localComment.user.grade]
-                    : "由匿名用户发送，请仔细分辨其真实性"
+                    : '由匿名用户发送，请仔细分辨其真实性'
                 }}
               </div>
             </div>
@@ -86,7 +86,7 @@
                     class="text-caption"
                     style="transform: translate(-7px, 0); display: inline-block"
                   >
-                    {{ $vuetify.breakpoint.width < 400 ? "" : "赞同" }}                    
+                    {{ $vuetify.breakpoint.width < 400 ? '' : '赞同' }}
                     {{
                       footerNote.comment.like -
                       footerNote.comment.dislike +
@@ -135,33 +135,20 @@
                     <v-icon size="20" style="">
                       {{ footerNote.statics.icons.mdiShare }}
                     </v-icon>
-                    {{ $vuetify.breakpoint.xsOnly ? "" : "分享" }}
+                    {{ $vuetify.breakpoint.xsOnly ? '' : '分享' }}
                   </v-btn>
                 </template>
                 <v-list>
-                  <v-list-item
-                    color="primary"
-                    @click="onClickSharePath"
-                  >
+                  <v-list-item color="primary" @click="onClickSharePath">
                     复制链接
                   </v-list-item>
                   <v-divider></v-divider>
-                  <v-list-item
-                    color="primary"
-                    @click="onClickShareImage"
-                  >
+                  <v-list-item color="primary" @click="onClickShareImage">
                     下载评论图片
                   </v-list-item>
                   <v-divider></v-divider>
-                  <v-list-item
-                    color="primary"
-                  >
-                    二维码:
-                  </v-list-item>
-                  <v-list-item
-                    color="primary"
-                    class="mt-n2"
-                  >
+                  <v-list-item color="primary"> 二维码: </v-list-item>
+                  <v-list-item color="primary" class="mt-n2">
                     <canvas ref="qrcode"></canvas>
                   </v-list-item>
                 </v-list>
@@ -174,17 +161,21 @@
   </v-lazy>
 </template>
 <script>
-import CommentCardContent from "@/components/users/comment/CommentCardContent";
-import CommentCardBar from "@/components/users/comment/CommentCardBar";
-import CommentFold from "@/components/users/comment/CommentFold";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import useCourseCommentCard from "@/composables/courses/comment/useCourseCommentCard";
-import useUserName from "@/composables/global/useUserName";
-import { gradeItems } from "@/composables/global/useStaticData";
-import { inject, ref } from "vue";
-import QRCode from "qrcode";
-import { domToCanvas } from "modern-screenshot";
-import { shareLogoDark, shareLogoLight, shareLogoTitle } from "@/composables/global/useShare";
+import CommentCardContent from '@/components/users/comment/CommentCardContent';
+import CommentCardBar from '@/components/users/comment/CommentCardBar';
+import CommentFold from '@/components/users/comment/CommentFold';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import useCourseCommentCard from '@/composables/courses/comment/useCourseCommentCard';
+import useUserName from '@/composables/global/useUserName';
+import { gradeItems } from '@/composables/global/useStaticData';
+import { inject, ref } from 'vue';
+import QRCode from 'qrcode';
+import { domToCanvas } from 'modern-screenshot';
+import {
+  shareLogoDark,
+  shareLogoLight,
+  shareLogoTitle,
+} from '@/composables/global/useShare';
 
 export default {
   props: {
@@ -199,9 +190,9 @@ export default {
   setup() {
     const { doLike, doDislike, doUndo, formStatus, statics } =
       useCourseCommentCard();
-    const global = inject("global");
+    const global = inject('global');
 
-    const showSnackbar = inject("showSnackbar");
+    const showSnackbar = inject('showSnackbar');
 
     const foldComment = ref(true);
     return {
@@ -222,7 +213,9 @@ export default {
   },
   methods: {
     isMobile() {
-      return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+      return navigator.userAgent.match(
+        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+      );
     },
     onClickLike() {
       if (this.formStatus.likeStatus === 1) {
@@ -247,17 +240,19 @@ export default {
           QRCode.toCanvas(this.$refs.qrcode, sharePath);
         });
       });
-
     },
     onClickSharePath() {
       // 获取分享的路径, 带一个query的参数, 但是手机可能会有限制不允许读取剪切板, 导致复制失败
       if (this.isMobile()) {
-        this.showSnackbar("warning", "请注意, 由于手机端限制, 可能导致复制失败");
+        this.showSnackbar(
+          'warning',
+          '请注意, 由于手机端限制, 可能导致复制失败',
+        );
       }
       let index = this.comment.id;
       let sharePath = `https://coursebench.geekpie.club${this.$route.path}?answer=${index}`;
       navigator.clipboard.writeText(sharePath);
-      this.showSnackbar("success", "复制成功!");
+      this.showSnackbar('success', '复制成功!');
     },
     async loadImage(base64) {
       // 使用Promise异步加载图片, 保证图片加载成功
@@ -279,69 +274,76 @@ export default {
     },
     async onClickShareImage() {
       const logo = this.$vuetify.theme.dark ? shareLogoDark : shareLogoLight;
-      const color = this.$vuetify.theme.dark ? "#212121" : "#ffffff";
-      this.$refs.shareButton.$el.style.display = "none";
+      const color = this.$vuetify.theme.dark ? '#212121' : '#ffffff';
+      this.$refs.shareButton.$el.style.display = 'none';
       // vue3中获取到refs指向的element只能用.$el来获取, 直接用refs会导致出错(类型VueComponent不是Element)
-      domToCanvas(this.$refs.commentCard.$el, {scale: 2})
-        .then(async canvas => {
-          document.body.appendChild(canvas)
+      domToCanvas(this.$refs.commentCard.$el, { scale: 2 })
+        .then(async (canvas) => {
+          document.body.appendChild(canvas);
           // qrcode
           let sharePath = `https://coursebench.geekpie.club${this.$route.path}?answer=${this.comment.id}`;
-          const QRCanvas = document.createElement("canvas");
+          const QRCanvas = document.createElement('canvas');
           QRCode.toCanvas(QRCanvas, sharePath);
 
-          const logoCanvas = document.createElement("canvas");
+          const logoCanvas = document.createElement('canvas');
           logoCanvas.width = Math.max(180 + 196 + 164 + 18 + 20, canvas.width);
           logoCanvas.height = 164 + 23 + 14;
-          const lctx = logoCanvas.getContext("2d");
+          const lctx = logoCanvas.getContext('2d');
           //text
-          lctx.save()
-          lctx.font = "normal 15px 'PingFang SC"
-          lctx.fillStyle = "#787878"
-          const text1 = `扫描二维码打开coursebench`
-          const text2 = `查看更多关于${this.comment.course.name}的评论`
-          const maxLen = Math.max(lctx.measureText(text1).width, lctx.measureText(text2).width)
+          lctx.save();
+          lctx.font = "normal 15px 'PingFang SC";
+          lctx.fillStyle = '#787878';
+          const text1 = `扫描二维码打开coursebench`;
+          const text2 = `查看更多关于${this.comment.course.name}的评论`;
+          const maxLen = Math.max(
+            lctx.measureText(text1).width,
+            lctx.measureText(text2).width,
+          );
           const textX = logoCanvas.width - 164 - 20 - 22 - maxLen;
           const textY = logoCanvas.height - 35;
-          lctx.fillText(text1, textX, textY)
-          lctx.fillText(text2, textX, textY + 20)
-          lctx.restore()
+          lctx.fillText(text1, textX, textY);
+          lctx.fillText(text2, textX, textY + 20);
+          lctx.restore();
           // logo
-          const [logoImg, wordImg] = await Promise.all([this.loadImage(logo), this.loadImage(shareLogoTitle)]);
+          const [logoImg, wordImg] = await Promise.all([
+            this.loadImage(logo),
+            this.loadImage(shareLogoTitle),
+          ]);
           // 预留边界margin:18,23, logoImg宽度:180,高度:62, wordImg宽度180,高度36
           lctx.drawImage(logoImg, 18, 23);
           lctx.drawImage(wordImg, 18, 164 + 23 - 36);
 
           // combine
-          const combineCanvas = document.createElement("canvas");
+          const combineCanvas = document.createElement('canvas');
           combineCanvas.width = logoCanvas.width;
           combineCanvas.height = canvas.height + logoCanvas.height;
-          const ctx = combineCanvas.getContext("2d");
-          ctx.save()
-          ctx.fillStyle = color
-          ctx.fillRect(0, 0, combineCanvas.width, combineCanvas.height)
-          ctx.restore()
+          const ctx = combineCanvas.getContext('2d');
+          ctx.save();
+          ctx.fillStyle = color;
+          ctx.fillRect(0, 0, combineCanvas.width, combineCanvas.height);
+          ctx.restore();
           ctx.drawImage(logoCanvas, 0, 0);
           ctx.drawImage(canvas, 0, logoCanvas.height);
           const qrcodeX = combineCanvas.width - QRCanvas.width - 20;
           ctx.drawImage(QRCanvas, qrcodeX, 23);
 
           // download
-          const imgUrl = combineCanvas.toDataURL("image/png");
-          let tempLink = document.createElement("a");// 创建一个a标签
-          tempLink.style.display = "none";
+          const imgUrl = combineCanvas.toDataURL('image/png');
+          let tempLink = document.createElement('a'); // 创建一个a标签
+          tempLink.style.display = 'none';
           tempLink.href = imgUrl;
-          tempLink.setAttribute("download", this.comment.course.name);// 给a标签添加下载属性
-          if (typeof tempLink.download === "undefined") {
-            tempLink.setAttribute("target", "_blank");
+          tempLink.setAttribute('download', this.comment.course.name); // 给a标签添加下载属性
+          if (typeof tempLink.download === 'undefined') {
+            tempLink.setAttribute('target', '_blank');
           }
-          document.body.appendChild(tempLink);// 将a标签添加到body当中
-          tempLink.click();// 启动下载
-          document.body.removeChild(tempLink);// 下载完毕删除a标签
+          document.body.appendChild(tempLink); // 将a标签添加到body当中
+          tempLink.click(); // 启动下载
+          document.body.removeChild(tempLink); // 下载完毕删除a标签
           window.URL.revokeObjectURL(imgUrl);
-        }).then(() => {
-        this.$refs.shareButton.$el.style.display = "flex";
-      });
+        })
+        .then(() => {
+          this.$refs.shareButton.$el.style.display = 'flex';
+        });
     },
   },
 };
diff --git a/src/components/courses/DetailCard.vue b/src/components/courses/DetailCard.vue
index 16d9161..4494089 100644
--- a/src/components/courses/DetailCard.vue
+++ b/src/components/courses/DetailCard.vue
@@ -1,283 +1,283 @@
-<template>
-  <v-card class="ma-0" elevation="0" outlined>
-    <v-card-text>
-      <v-row class="">
-        <v-col class="" md="6" cols="12">
-          <div
-            class="mr-md-6 d-flex flex-column justify-space-between"
-            style="height: 100%"
-          >
-            <div>
-              <div class="text-h4 pr-3 font-weight-bold">
-                <div class="">
-                  {{ details.name }}
-                </div>
-              </div>
-              <div class="pt-2">
-                <span
-                  class="subtitle-2 font-weight-regular"
-                  :class="
-                    $vuetify.theme.isDark
-                      ? 'grey--text'
-                      : 'grey--text text--darken-3'
-                  "
-                >
-                  {{ details.code }}
-                  | {{ details.credit }}学分 | {{ details.comment_num }}评论
-                </span>
-              </div>
-            </div>
-            <div class="pb-md-1">
-              <div class="pt-8">
-                <div
-                  class="subtitle-1 font-weight-regular"
-                  :class="
-                    $vuetify.theme.isDark
-                      ? 'grey--text text--lighten-1'
-                      : 'grey--text text--darken-3'
-                  "
-                >
-                  开课单位:
-                </div>
-                <div
-                  class="text-caption font-weight-regular"
-                  :class="
-                    $vuetify.theme.isDark
-                      ? 'grey--text text--lighten-1'
-                      : 'grey--text text--darken-3'
-                  "
-                >
-                  {{ details.institute }}
-                </div>
-              </div>
-              <div class="pt-3">
-                <div
-                  class="subtitle-1 font-weight-regular"
-                  :class="
-                    $vuetify.theme.isDark
-                      ? 'grey--text text--lighten-2'
-                      : 'grey--text text--darken-3'
-                  "
-                >
-                  授课老师:
-                </div>
-                <div
-                  class="text-caption font-weight-regular"
-                  style="cursor: pointer"
-                >
-                  <span
-                    v-for="(teacher, index) in teachers"
-                    :key="index"
-                    v-if="teacher.name !== '其他'"
-                    @click="$router.push({ path: `/teacher/${teacher.id}` })"
-                    :class="
-                      $vuetify.theme.isDark
-                        ? 'grey--text text--lighten-1'
-                        : 'grey--text text--darken-3'
-                    "
-                  >
-                    {{ teacher.name }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </v-col>
-        <v-divider
-          vertical
-          inset
-          class="mb-2 mt-3 d-none d-md-block"
-        ></v-divider>
-        <v-col class="" md="6" cols="12">
-          <div class="ml-md-6">
-            <div class="subtitle-1 font-weight-bold">Ratings & Reviews</div>
-            <div style="font-family: Arial, serif" class="pt-md-2">
-              <span v-if="filteredCommentCount >= enoughDataThreshold">
-                <span
-                  class="text-h3 font-weight-bold"
-                  style="font-family: Arial, serif !important"
-                >
-                  {{ Math.floor(Math.round(averageScore /2) / 10) }}
-                </span>
-                <span
-                  class="font-weight-bold text-h5"
-                  style="
-                    transform: translate(-10px, 0px);
-                    display: inline-block;
-                  "
-                >
-                  .{{ Math.round(averageScore / 2) % 10 }}
-                </span>
-              </span>
-              <span v-else>
-                <span
-                  class="text-h3 font-weight-bold"
-                  style="font-family: Arial, serif !important"
-                >
-                  -
-                </span>
-              </span>
-              <span
-                class="font-weight-bold text-h5"
-                style="transform: translate(-3px, 0px); display: inline-block"
-              >
-                /5
-              </span>
-            </div>
-            <div>
-              <ScoreBoard
-                class="mb-4 pr-lg-3"
-                :starPercent="toDistribute(starStatistic)"
-                :color="
-                  filteredCommentCount >= enoughDataThreshold ? null : '#B0B0B0'
-                "
-              ></ScoreBoard>
-            </div>
-            <v-row no-gutters class="pt-md-6 pt-4">
-              <v-col
-                v-for="index in [0, 1, 2, 3]"
-                :key="index"
-                :class="[
-                  'd-flex',
-                  index & 1
-                    ? 'justify-end justify-sm-start justify-md-end justify-lg-start'
-                    : '',
-                ]"
-                md="6"
-                sm="3"
-                cols="6"
-              >
-                <div
-                  class="text-body-2 pr-2 font-weight-bold"
-                  style="min-width: 57px"
-                >
-                  {{ judgeItems[index] }}
-                </div>
-                <div>
-                  <v-chip
-                    x-small
-                    label
-                    :color="scoreInfo[roundedScore[index]].color"
-                    class="px-1 mt-n2"
-                  >
-                    <span class="text-caption white--text">
-                      {{ scoreInfo[roundedScore[index]].label }}</span
-                    >
-                  </v-chip>
-                </div>
-              </v-col>
-            </v-row>
-          </div>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import ScoreBoard from '@/components/courses/ScoreBoard';
-import DetailChips from '@/components/courses/DetailChips';
-import ReviewDetail from '@/components/courses/ReviewDetail';
-import useDetailCard from '@/composables/courses/comment/useDetailCard';
-import { judgeItems, scoreInfo } from '@/composables/global/useStaticData';
-import {
-  roundScore,
-  enoughDataThreshold,
-} from '@/composables/global/useParseScore';
-import { averageOf, toDistribute } from '@/composables/global/useArrayUtils';
-
-export default {
-  name: 'DetailCard',
-  components: { ScoreBoard, DetailChips, ReviewDetail },
-  props: {
-    details: Object,
-    comments: Array,
-  },
-  setup() {
-    const { teachers, statics, selectedTeachers } = useDetailCard();
-    return {
-      teachers,
-      statics,
-      judgeItems,
-      scoreInfo,
-      toDistribute,
-      enoughDataThreshold,
-      selectedTeachers,
-    };
-  },
-  data() {
-    return {
-      filteredCommentCount: 0,
-      averageScore: 0,
-      roundedScore: [0, 0, 0, 0],
-      starStatistic: [0, 0, 0, 0, 0],
-    };
-  },
-  computed: {},
-  methods: {
-    getStatistic() {
-      const groupList = this.details.groups.map((group) => group.id);
-      this.roundedScore = [];
-      const newAverageScore = [0, 0, 0, 0];
-      const filteredComments = this.comments.filter((comment) => {
-        return this.selectedTeachers.includes(
-          groupList.indexOf(comment.group.id),
-        );
-      });
-      this.filteredCommentCount = filteredComments.length;
-      for (let i of [0, 1, 2, 3]) {
-        newAverageScore[i] = averageOf(
-          filteredComments.map((comment) => comment.score[i]),
-        );
-      }
-      // console.log(newAverageScore);
-      for (let score of newAverageScore) {
-        let rounded = roundScore(score, this.filteredCommentCount);
-        this.roundedScore.push(rounded);
-      }
-      // console.log(this.roundedScore);
-      if (this.filteredCommentCount !== 0) {
-        this.averageScore = averageOf(newAverageScore) * 20;
-
-        this.starStatistic = [0, 0, 0, 0, 0];
-        for (let comment of filteredComments) {
-          if (
-            this.selectedTeachers.includes(groupList.indexOf(comment.group.id))
-          ) {
-            this.starStatistic[Math.round(averageOf(comment.score)) - 1] += 1;
-          }
-        }
-      }
-    },
-  },
-  watch: {
-    details: {
-      handler() {
-        this.getStatistic();
-      },
-      immediate: true,
-    },
-    comments: {
-      handler() {
-        this.getStatistic();
-      },
-      immediate: true,
-    },
-    selectedTeachers: {
-      handler() {
-        this.getStatistic();
-      },
-      immediate: true,
-    },
-  },
-  mounted() {},
-};
-</script>
-
-<style scoped>
-.single-line-limit {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
+<template>
+  <v-card class="ma-0" elevation="0" outlined>
+    <v-card-text>
+      <v-row class="">
+        <v-col class="" md="6" cols="12">
+          <div
+            class="mr-md-6 d-flex flex-column justify-space-between"
+            style="height: 100%"
+          >
+            <div>
+              <div class="text-h4 pr-3 font-weight-bold">
+                <div class="">
+                  {{ details.name }}
+                </div>
+              </div>
+              <div class="pt-2">
+                <span
+                  class="subtitle-2 font-weight-regular"
+                  :class="
+                    $vuetify.theme.isDark
+                      ? 'grey--text'
+                      : 'grey--text text--darken-3'
+                  "
+                >
+                  {{ details.code }}
+                  | {{ details.credit }}学分 | {{ details.comment_num }}评论
+                </span>
+              </div>
+            </div>
+            <div class="pb-md-1">
+              <div class="pt-8">
+                <div
+                  class="subtitle-1 font-weight-regular"
+                  :class="
+                    $vuetify.theme.isDark
+                      ? 'grey--text text--lighten-1'
+                      : 'grey--text text--darken-3'
+                  "
+                >
+                  开课单位:
+                </div>
+                <div
+                  class="text-caption font-weight-regular"
+                  :class="
+                    $vuetify.theme.isDark
+                      ? 'grey--text text--lighten-1'
+                      : 'grey--text text--darken-3'
+                  "
+                >
+                  {{ details.institute }}
+                </div>
+              </div>
+              <div class="pt-3">
+                <div
+                  class="subtitle-1 font-weight-regular"
+                  :class="
+                    $vuetify.theme.isDark
+                      ? 'grey--text text--lighten-2'
+                      : 'grey--text text--darken-3'
+                  "
+                >
+                  授课老师:
+                </div>
+                <div
+                  class="text-caption font-weight-regular"
+                  style="cursor: pointer"
+                >
+                  <span
+                    v-for="(teacher, index) in teachers"
+                    :key="index"
+                    v-if="teacher.name !== '其他'"
+                    @click="$router.push({ path: `/teacher/${teacher.id}` })"
+                    :class="
+                      $vuetify.theme.isDark
+                        ? 'grey--text text--lighten-1'
+                        : 'grey--text text--darken-3'
+                    "
+                  >
+                    {{ teacher.name }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </v-col>
+        <v-divider
+          vertical
+          inset
+          class="mb-2 mt-3 d-none d-md-block"
+        ></v-divider>
+        <v-col class="" md="6" cols="12">
+          <div class="ml-md-6">
+            <div class="subtitle-1 font-weight-bold">Ratings & Reviews</div>
+            <div style="font-family: Arial, serif" class="pt-md-2">
+              <span v-if="filteredCommentCount >= enoughDataThreshold">
+                <span
+                  class="text-h3 font-weight-bold"
+                  style="font-family: Arial, serif !important"
+                >
+                  {{ Math.floor(Math.round(averageScore / 2) / 10) }}
+                </span>
+                <span
+                  class="font-weight-bold text-h5"
+                  style="
+                    transform: translate(-10px, 0px);
+                    display: inline-block;
+                  "
+                >
+                  .{{ Math.round(averageScore / 2) % 10 }}
+                </span>
+              </span>
+              <span v-else>
+                <span
+                  class="text-h3 font-weight-bold"
+                  style="font-family: Arial, serif !important"
+                >
+                  -
+                </span>
+              </span>
+              <span
+                class="font-weight-bold text-h5"
+                style="transform: translate(-3px, 0px); display: inline-block"
+              >
+                /5
+              </span>
+            </div>
+            <div>
+              <ScoreBoard
+                class="mb-4 pr-lg-3"
+                :starPercent="toDistribute(starStatistic)"
+                :color="
+                  filteredCommentCount >= enoughDataThreshold ? null : '#B0B0B0'
+                "
+              ></ScoreBoard>
+            </div>
+            <v-row no-gutters class="pt-md-6 pt-4">
+              <v-col
+                v-for="index in [0, 1, 2, 3]"
+                :key="index"
+                :class="[
+                  'd-flex',
+                  index & 1
+                    ? 'justify-end justify-sm-start justify-md-end justify-lg-start'
+                    : '',
+                ]"
+                md="6"
+                sm="3"
+                cols="6"
+              >
+                <div
+                  class="text-body-2 pr-2 font-weight-bold"
+                  style="min-width: 57px"
+                >
+                  {{ judgeItems[index] }}
+                </div>
+                <div>
+                  <v-chip
+                    x-small
+                    label
+                    :color="scoreInfo[roundedScore[index]].color"
+                    class="px-1 mt-n2"
+                  >
+                    <span class="text-caption white--text">
+                      {{ scoreInfo[roundedScore[index]].label }}</span
+                    >
+                  </v-chip>
+                </div>
+              </v-col>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import ScoreBoard from '@/components/courses/ScoreBoard';
+import DetailChips from '@/components/courses/DetailChips';
+import ReviewDetail from '@/components/courses/ReviewDetail';
+import useDetailCard from '@/composables/courses/comment/useDetailCard';
+import { judgeItems, scoreInfo } from '@/composables/global/useStaticData';
+import {
+  roundScore,
+  enoughDataThreshold,
+} from '@/composables/global/useParseScore';
+import { averageOf, toDistribute } from '@/composables/global/useArrayUtils';
+
+export default {
+  name: 'DetailCard',
+  components: { ScoreBoard, DetailChips, ReviewDetail },
+  props: {
+    details: Object,
+    comments: Array,
+  },
+  setup() {
+    const { teachers, statics, selectedTeachers } = useDetailCard();
+    return {
+      teachers,
+      statics,
+      judgeItems,
+      scoreInfo,
+      toDistribute,
+      enoughDataThreshold,
+      selectedTeachers,
+    };
+  },
+  data() {
+    return {
+      filteredCommentCount: 0,
+      averageScore: 0,
+      roundedScore: [0, 0, 0, 0],
+      starStatistic: [0, 0, 0, 0, 0],
+    };
+  },
+  computed: {},
+  methods: {
+    getStatistic() {
+      const groupList = this.details.groups.map((group) => group.id);
+      this.roundedScore = [];
+      const newAverageScore = [0, 0, 0, 0];
+      const filteredComments = this.comments.filter((comment) => {
+        return this.selectedTeachers.includes(
+          groupList.indexOf(comment.group.id),
+        );
+      });
+      this.filteredCommentCount = filteredComments.length;
+      for (let i of [0, 1, 2, 3]) {
+        newAverageScore[i] = averageOf(
+          filteredComments.map((comment) => comment.score[i]),
+        );
+      }
+      // console.log(newAverageScore);
+      for (let score of newAverageScore) {
+        let rounded = roundScore(score, this.filteredCommentCount);
+        this.roundedScore.push(rounded);
+      }
+      // console.log(this.roundedScore);
+      if (this.filteredCommentCount !== 0) {
+        this.averageScore = averageOf(newAverageScore) * 20;
+
+        this.starStatistic = [0, 0, 0, 0, 0];
+        for (let comment of filteredComments) {
+          if (
+            this.selectedTeachers.includes(groupList.indexOf(comment.group.id))
+          ) {
+            this.starStatistic[Math.round(averageOf(comment.score)) - 1] += 1;
+          }
+        }
+      }
+    },
+  },
+  watch: {
+    details: {
+      handler() {
+        this.getStatistic();
+      },
+      immediate: true,
+    },
+    comments: {
+      handler() {
+        this.getStatistic();
+      },
+      immediate: true,
+    },
+    selectedTeachers: {
+      handler() {
+        this.getStatistic();
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.single-line-limit {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/courses/DetailChips.vue b/src/components/courses/DetailChips.vue
index 648fbda..ddb7c8f 100644
--- a/src/components/courses/DetailChips.vue
+++ b/src/components/courses/DetailChips.vue
@@ -1,14 +1,16 @@
-<template>
-  <div>
-    <v-chip class="type-chip" color="green lighten-3" outlined small>4学分</v-chip>
-    <v-chip class="type-chip ml-3" color="green lighten-3" outlined small>64课时</v-chip>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style scoped>
-</style>
+<template>
+  <div>
+    <v-chip class="type-chip" color="green lighten-3" outlined small
+      >4学分</v-chip
+    >
+    <v-chip class="type-chip ml-3" color="green lighten-3" outlined small
+      >64课时</v-chip
+    >
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped></style>
diff --git a/src/components/courses/ManageCard.vue b/src/components/courses/ManageCard.vue
index 6c46b65..d86b08d 100644
--- a/src/components/courses/ManageCard.vue
+++ b/src/components/courses/ManageCard.vue
@@ -1,492 +1,492 @@
-<template>
-  <div>
-    <v-dialog
-      width="750"
-      v-model="windowStatus.showDialog"
-      :transition="
-        $vuetify.breakpoint.xsOnly
-          ? 'dialog-bottom-transition'
-          : 'scale-transition'
-      "
-      :fullscreen="$vuetify.breakpoint.xsOnly"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn v-bind="attrs" v-on="on" block outlined text class="pa-0">
-          <div>
-            <v-icon
-              size="18"
-              style="transform: translate(0, -1px)"
-              class="pr-1"
-            >
-              {{ statics.icons.mdiFormatPaint }}
-            </v-icon>
-            <span>管理评论</span>
-          </div>
-        </v-btn>
-      </template>
-      <v-card flat>
-        <div class="pt-6 pt-sm-11 px-6 px-sm-11 d-flex justify-space-between">
-          <div>
-            <img
-              class="small-icon"
-              :src="$vuetify.theme.dark ? logoDark : logoLight"
-              alt=""
-            />
-          </div>
-          <div v-if="$vuetify.breakpoint.xsOnly">
-            <v-btn
-              icon
-              style="transform: translate(0, -1px)"
-              @click="windowStatus.showDialog = false"
-              v-if="$vuetify.breakpoint.name === 'xs'"
-            >
-              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
-            </v-btn>
-          </div>
-        </div>
-        <v-window v-model="windowStatus.windowStep" touchless>
-          <v-window-item :value="0">
-            <v-card-title class="pt-1 px-6 px-sm-11">
-              <div>
-                <div class="font-weight-bold text-h5">管理评论</div>
-              </div>
-            </v-card-title>
-            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
-              <div>
-                <div v-for="(comment, index) in userComments" :key="index">
-                  <v-hover>
-                    <template v-slot:default="{ hover }">
-                      <div
-                        class="router-container"
-                        @click="
-                          setEditTarget(comment), (windowStatus.windowStep = 1)
-                        "
-                      >
-                        <v-divider></v-divider>
-                        <div class="pt-4">
-                          <div
-                            v-if="
-                              global.userProfile.is_admin ||
-                              global.userProfile.is_community_admin
-                            "
-                            class="d-flex"
-                          >
-                            <div
-                              style="transform: translate(0, -1px)"
-                              class="pr-1"
-                            >
-                              <AvatarContainer
-                                :name="
-                                  comment.user ? useUserName(comment.user) : '?'
-                                "
-                                :src="comment.user ? comment.user.avatar : ''"
-                                small
-                                slice
-                                size="15"
-                              />
-                            </div>
-                            <div class="pr-1">
-                              {{
-                                useUserName(comment.user) +
-                                (comment.user && comment.is_anonymous
-                                  ? '(匿名)'
-                                  : '')
-                              }}
-                            </div>
-                            <div
-                              v-if="comment.is_fold"
-                              style="transform: translate(0, -1px)"
-                            >
-                              <v-chip
-                                label
-                                x-small
-                                class="px-1 mr-1"
-                                color="secondary"
-                              >
-                                {{ '已隐藏' }}
-                              </v-chip>
-                            </div>
-                            <div
-                              v-if="comment.is_covered"
-                              style="transform: translate(0, -1px)"
-                            >
-                              <v-chip
-                                label
-                                x-small
-                                class="px-1"
-                                color="warning"
-                              >
-                                {{ '已遮盖' }}
-                              </v-chip>
-                            </div>
-                          </div>
-                        </div>
-                        <div>
-                          <span class="pr-2">{{  comment.course.name  }}</span>
-                          <v-icon
-                            size="16"
-                            style="transform: translate(0, -1px)"
-                          >
-                            {{ statics.icons.mdiSchoolOutline }}
-                          </v-icon>
-                          <span
-                            v-for="(teacher, indexTeacher) in comment.group
-                              .teachers"
-                            :key="indexTeacher"
-                            class=""
-                          >
-                            {{ teacher.name }}
-                          </span>
-                        </div>
-                        <div
-                          class="text-h6"
-                          :style="{
-                            'text-decoration': hover ? 'underline' : 'none',
-                          }"
-                        >
-                          {{ comment.title }}
-                        </div>
-                        <div class="pt-4">
-                          修读于：{{
-                            `${comment.semester.toString().substring(0, 4)}年${
-                              termItems[
-                                new Number(
-                                  comment.semester.toString().substring(4),
-                                ) - 1
-                              ].name
-                            }`
-                          }}
-                        </div>
-                        <div class="d-flex pb-4">
-                          <div class="pr-2">
-                            发布于：{{ unixToReadable(comment.post_time) }}
-                          </div>
-                          <div>
-                            修改于：{{ unixToReadable(comment.update_time) }}
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </v-hover>
-                </div>
-                <v-divider></v-divider>
-              </div>
-            </v-card-text>
-          </v-window-item>
-          <v-window-item :value="1">
-            <v-card-title class="pt-0 px-6 px-sm-11">
-              <div class="text-body-2 pb-1 overflow-ellipsis">
-                <v-btn
-                  icon
-                  x-small
-                  style="transform: translate(0, -1px)"
-                  @click="clearEditTarget(), (windowStatus.windowStep = 0)"
-                >
-                  <v-icon>
-                    {{ statics.icons.mdiArrowLeft }}
-                  </v-icon>
-                </v-btn>
-                <span>{{ courseName }}</span>
-              </div>
-              <div style="width: 100%" class="pt-1">
-                <div class="d-inline-block pr-4 align-center">
-                  <AvatarContainer
-                    :name="
-                      formStatus.userProfile
-                        ? useUserName(formStatus.userProfile)
-                        : '?'
-                    "
-                    :src="
-                      formStatus.userProfile
-                        ? formStatus.userProfile.avatar
-                        : ''
-                    "
-                    slice
-                    :size="50"
-                  />
-                </div>
-                <div
-                  class="d-inline-block align-center"
-                  style="width: calc(100% - 72px)"
-                >
-                  <v-text-field
-                    label="标题"
-                    class="font-weight-bold"
-                    v-model="formStatus.title"
-                    :error-messages="
-                      errorMsg.target === 'title' ? errorMsg.msg : ''
-                    "
-                    disabled
-                  ></v-text-field>
-                </div>
-              </div>
-            </v-card-title>
-            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
-              <div>
-                <v-sheet
-                  flat
-                  outlined
-                  min-height="202px"
-                  style="margin-bottom: 30px"
-                >
-                  <TextContainer
-                    :text="formStatus.content"
-                    markdown
-                    title="1321"
-                    no-expand
-                  >
-                  </TextContainer>
-                </v-sheet>
-              </div>
-              <div class="d-flex justify-space-between flex-wrap">
-                <div
-                  v-for="(dim, index) in judgeItems"
-                  :key="index"
-                  class="align-center py-3"
-                  :style="{
-                    width: $vuetify.breakpoint.xsOnly ? '100%' : '48%',
-                  }"
-                >
-                  <v-slider
-                    v-model="formStatus.slider[index]"
-                    class="align-center"
-                    max="5"
-                    min="1"
-                    step="1"
-                    :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                    track-color="grey"
-                    thumb-label
-                    hide-details
-                    :label="dim"
-                    disabled
-                  >
-                    <template v-slot:append>
-                      <v-chip
-                        x-small
-                        label
-                        :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                        class="px-1"
-                      >
-                        <span class="text-caption white--text">{{
-                          statics.grade[index][formStatus.slider[index] - 1]
-                        }}</span>
-                      </v-chip>
-                    </template>
-                    <template v-slot:thumb-label="{ value }">
-                      {{ gradingEmojis[value - 1] }}
-                    </template>
-                  </v-slider>
-                </div>
-              </div>
-              <div
-                class="d-flex justify-end justify-sm-space-between flex-wrap"
-              >
-                <div
-                  :class="[
-                    'd-flex',
-                    'flex-wrap',
-                    'justify-sm-start',
-                    formStatus.id == null
-                      ? 'justify-space-between'
-                      : 'justify-end',
-                  ]"
-                >
-                  <div
-                    :class="[
-                      'pr-sm-4',
-                      formStatus.id == null ? 'pr-0' : 'pr-4',
-                    ]"
-                  >
-                    <v-select
-                      style="width: 100px"
-                      v-model="courseYear"
-                      :items="yearItems"
-                      label="修读时间"
-                      :error="errorMsg.target === 'semester'"
-                      disabled
-                    ></v-select>
-                  </div>
-                  <div class="pr-sm-4 pr-0">
-                    <v-select
-                      style="width: 100px"
-                      v-model="courseTerm"
-                      :items="termItems"
-                      item-text="name"
-                      item-value="id"
-                      label="修读学期"
-                      :error="errorMsg.target === 'semester'"
-                      disabled
-                    ></v-select>
-                  </div>
-                  <div
-                    class="d-flex align-center"
-                    :style="{
-                      width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                    }"
-                  >
-                    <div
-                      class="d-flex justify-sm-start justify-end"
-                      :style="{
-                        width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                      }"
-                    >
-                      <div class="align-center d-flex pr-4">
-                        <v-switch
-                          v-model="formStatus.is_anonymous"
-                          class="mt-0"
-                          label="匿名"
-                          color="info"
-                          hide-details
-                          disabled
-                        ></v-switch>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="align-center d-flex pt-sm-0 pt-8 justify-sm-start justify-end"
-                  :style="{
-                    width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                  }"
-                >
-                  <div class="d-flex justify-end">
-                    <div>
-                      <v-btn
-                        color="error"
-                        depressed
-                        @click="doDeleteComment"
-                        :loading="formStatus.deleteLoading"
-                        class="mr-4"
-                      >
-                        {{ '删除评论' }}
-                      </v-btn>
-                      <span>
-                        <v-btn
-                          :color="formStatus.is_covered ? 'success' : 'warning'"
-                          depressed
-                          @click="doCoverComment"
-                          :loading="formStatus.coverLoading"
-                          class="mr-4"
-                          v-if="!formStatus.is_fold"
-                        >
-                          {{ formStatus.is_covered ? '取消遮盖' : '遮盖评论' }}
-                        </v-btn>
-                        <v-btn
-                          :color="formStatus.is_fold ? 'accent' : 'secondary'"
-                          depressed
-                          @click="doHideComment"
-                          :loading="formStatus.hideLoading"
-                          v-if="!formStatus.is_covered"
-                        >
-                          {{ formStatus.is_fold ? '取消隐藏' : '隐藏评论' }}
-                        </v-btn>
-                        <v-btn
-                          color="lime accent-4"
-                          depressed
-                          @click="doRegenerateCover"
-                          :loading="formStatus.regenerateLoading"
-                          v-if="formStatus.is_covered"
-                        >
-                          {{ '重新生成' }}
-                        </v-btn>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </v-card-text>
-          </v-window-item>
-        </v-window>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-<script>
-import {
-  judgeItems,
-  rawYearItems as yearItems,
-  termItems,
-} from '@/composables/global/useStaticData';
-import { inject } from 'vue';
-import useManageCard from '@/composables/courses/comment/useManageCard';
-import { gradingEmojis } from '@/composables/global/useStaticData';
-import AvatarContainer from '@/components/users/profile/AvatarContainer';
-import TextContainer from '@/components/users/comment/TextContainer';
-import { gradingInfo } from '@/composables/global/useStaticData';
-import { unixToReadable } from '@/composables/global/useTimeUtils';
-import logoDark from '@/assets/logo-white.svg';
-import logoLight from '@/assets/logo.svg';
-import { commentPolicy } from 'Policy';
-import useUserName from '@/composables/global/useUserName';
-
-export default {
-  setup() {
-    const {
-      statics,
-      errorMsg,
-      formStatus,
-      windowStatus,
-      courseYear,
-      courseTerm,
-      userComments,
-      courseName,
-      doHideComment,
-      doDeleteComment,
-      doCoverComment,
-      doRegenerateCover,
-      setEditTarget,
-      clearEditTarget,
-    } = useManageCard();
-
-    const global = inject('global');
-
-    return {
-      useUserName,
-      commentPolicy,
-      logoDark,
-      logoLight,
-      unixToReadable,
-      judgeItems,
-      yearItems,
-      termItems,
-      gradingInfo,
-      global,
-      statics,
-      errorMsg,
-      formStatus,
-      windowStatus,
-      courseYear,
-      courseTerm,
-      userComments,
-      courseName,
-      doHideComment,
-      doDeleteComment,
-      doCoverComment,
-      doRegenerateCover,
-      setEditTarget,
-      clearEditTarget,
-      gradingEmojis,
-    };
-  },
-  components: {
-    AvatarContainer,
-    TextContainer,
-  },
-};
-</script>
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.small-icon {
-  width: 150px;
-  height: 100%;
-}
-</style>
+<template>
+  <div>
+    <v-dialog
+      width="750"
+      v-model="windowStatus.showDialog"
+      :transition="
+        $vuetify.breakpoint.xsOnly
+          ? 'dialog-bottom-transition'
+          : 'scale-transition'
+      "
+      :fullscreen="$vuetify.breakpoint.xsOnly"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn v-bind="attrs" v-on="on" block outlined text class="pa-0">
+          <div>
+            <v-icon
+              size="18"
+              style="transform: translate(0, -1px)"
+              class="pr-1"
+            >
+              {{ statics.icons.mdiFormatPaint }}
+            </v-icon>
+            <span>管理评论</span>
+          </div>
+        </v-btn>
+      </template>
+      <v-card flat>
+        <div class="pt-6 pt-sm-11 px-6 px-sm-11 d-flex justify-space-between">
+          <div>
+            <img
+              class="small-icon"
+              :src="$vuetify.theme.dark ? logoDark : logoLight"
+              alt=""
+            />
+          </div>
+          <div v-if="$vuetify.breakpoint.xsOnly">
+            <v-btn
+              icon
+              style="transform: translate(0, -1px)"
+              @click="windowStatus.showDialog = false"
+              v-if="$vuetify.breakpoint.name === 'xs'"
+            >
+              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
+            </v-btn>
+          </div>
+        </div>
+        <v-window v-model="windowStatus.windowStep" touchless>
+          <v-window-item :value="0">
+            <v-card-title class="pt-1 px-6 px-sm-11">
+              <div>
+                <div class="font-weight-bold text-h5">管理评论</div>
+              </div>
+            </v-card-title>
+            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
+              <div>
+                <div v-for="(comment, index) in userComments" :key="index">
+                  <v-hover>
+                    <template v-slot:default="{ hover }">
+                      <div
+                        class="router-container"
+                        @click="
+                          setEditTarget(comment), (windowStatus.windowStep = 1)
+                        "
+                      >
+                        <v-divider></v-divider>
+                        <div class="pt-4">
+                          <div
+                            v-if="
+                              global.userProfile.is_admin ||
+                              global.userProfile.is_community_admin
+                            "
+                            class="d-flex"
+                          >
+                            <div
+                              style="transform: translate(0, -1px)"
+                              class="pr-1"
+                            >
+                              <AvatarContainer
+                                :name="
+                                  comment.user ? useUserName(comment.user) : '?'
+                                "
+                                :src="comment.user ? comment.user.avatar : ''"
+                                small
+                                slice
+                                size="15"
+                              />
+                            </div>
+                            <div class="pr-1">
+                              {{
+                                useUserName(comment.user) +
+                                (comment.user && comment.is_anonymous
+                                  ? '(匿名)'
+                                  : '')
+                              }}
+                            </div>
+                            <div
+                              v-if="comment.is_fold"
+                              style="transform: translate(0, -1px)"
+                            >
+                              <v-chip
+                                label
+                                x-small
+                                class="px-1 mr-1"
+                                color="secondary"
+                              >
+                                {{ '已隐藏' }}
+                              </v-chip>
+                            </div>
+                            <div
+                              v-if="comment.is_covered"
+                              style="transform: translate(0, -1px)"
+                            >
+                              <v-chip
+                                label
+                                x-small
+                                class="px-1"
+                                color="warning"
+                              >
+                                {{ '已遮盖' }}
+                              </v-chip>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <span class="pr-2">{{ comment.course.name }}</span>
+                          <v-icon
+                            size="16"
+                            style="transform: translate(0, -1px)"
+                          >
+                            {{ statics.icons.mdiSchoolOutline }}
+                          </v-icon>
+                          <span
+                            v-for="(teacher, indexTeacher) in comment.group
+                              .teachers"
+                            :key="indexTeacher"
+                            class=""
+                          >
+                            {{ teacher.name }}
+                          </span>
+                        </div>
+                        <div
+                          class="text-h6"
+                          :style="{
+                            'text-decoration': hover ? 'underline' : 'none',
+                          }"
+                        >
+                          {{ comment.title }}
+                        </div>
+                        <div class="pt-4">
+                          修读于：{{
+                            `${comment.semester.toString().substring(0, 4)}年${
+                              termItems[
+                                new Number(
+                                  comment.semester.toString().substring(4),
+                                ) - 1
+                              ].name
+                            }`
+                          }}
+                        </div>
+                        <div class="d-flex pb-4">
+                          <div class="pr-2">
+                            发布于：{{ unixToReadable(comment.post_time) }}
+                          </div>
+                          <div>
+                            修改于：{{ unixToReadable(comment.update_time) }}
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </v-hover>
+                </div>
+                <v-divider></v-divider>
+              </div>
+            </v-card-text>
+          </v-window-item>
+          <v-window-item :value="1">
+            <v-card-title class="pt-0 px-6 px-sm-11">
+              <div class="text-body-2 pb-1 overflow-ellipsis">
+                <v-btn
+                  icon
+                  x-small
+                  style="transform: translate(0, -1px)"
+                  @click="clearEditTarget(), (windowStatus.windowStep = 0)"
+                >
+                  <v-icon>
+                    {{ statics.icons.mdiArrowLeft }}
+                  </v-icon>
+                </v-btn>
+                <span>{{ courseName }}</span>
+              </div>
+              <div style="width: 100%" class="pt-1">
+                <div class="d-inline-block pr-4 align-center">
+                  <AvatarContainer
+                    :name="
+                      formStatus.userProfile
+                        ? useUserName(formStatus.userProfile)
+                        : '?'
+                    "
+                    :src="
+                      formStatus.userProfile
+                        ? formStatus.userProfile.avatar
+                        : ''
+                    "
+                    slice
+                    :size="50"
+                  />
+                </div>
+                <div
+                  class="d-inline-block align-center"
+                  style="width: calc(100% - 72px)"
+                >
+                  <v-text-field
+                    label="标题"
+                    class="font-weight-bold"
+                    v-model="formStatus.title"
+                    :error-messages="
+                      errorMsg.target === 'title' ? errorMsg.msg : ''
+                    "
+                    disabled
+                  ></v-text-field>
+                </div>
+              </div>
+            </v-card-title>
+            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
+              <div>
+                <v-sheet
+                  flat
+                  outlined
+                  min-height="202px"
+                  style="margin-bottom: 30px"
+                >
+                  <TextContainer
+                    :text="formStatus.content"
+                    markdown
+                    title="1321"
+                    no-expand
+                  >
+                  </TextContainer>
+                </v-sheet>
+              </div>
+              <div class="d-flex justify-space-between flex-wrap">
+                <div
+                  v-for="(dim, index) in judgeItems"
+                  :key="index"
+                  class="align-center py-3"
+                  :style="{
+                    width: $vuetify.breakpoint.xsOnly ? '100%' : '48%',
+                  }"
+                >
+                  <v-slider
+                    v-model="formStatus.slider[index]"
+                    class="align-center"
+                    max="5"
+                    min="1"
+                    step="1"
+                    :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                    track-color="grey"
+                    thumb-label
+                    hide-details
+                    :label="dim"
+                    disabled
+                  >
+                    <template v-slot:append>
+                      <v-chip
+                        x-small
+                        label
+                        :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                        class="px-1"
+                      >
+                        <span class="text-caption white--text">{{
+                          statics.grade[index][formStatus.slider[index] - 1]
+                        }}</span>
+                      </v-chip>
+                    </template>
+                    <template v-slot:thumb-label="{ value }">
+                      {{ gradingEmojis[value - 1] }}
+                    </template>
+                  </v-slider>
+                </div>
+              </div>
+              <div
+                class="d-flex justify-end justify-sm-space-between flex-wrap"
+              >
+                <div
+                  :class="[
+                    'd-flex',
+                    'flex-wrap',
+                    'justify-sm-start',
+                    formStatus.id == null
+                      ? 'justify-space-between'
+                      : 'justify-end',
+                  ]"
+                >
+                  <div
+                    :class="[
+                      'pr-sm-4',
+                      formStatus.id == null ? 'pr-0' : 'pr-4',
+                    ]"
+                  >
+                    <v-select
+                      style="width: 100px"
+                      v-model="courseYear"
+                      :items="yearItems"
+                      label="修读时间"
+                      :error="errorMsg.target === 'semester'"
+                      disabled
+                    ></v-select>
+                  </div>
+                  <div class="pr-sm-4 pr-0">
+                    <v-select
+                      style="width: 100px"
+                      v-model="courseTerm"
+                      :items="termItems"
+                      item-text="name"
+                      item-value="id"
+                      label="修读学期"
+                      :error="errorMsg.target === 'semester'"
+                      disabled
+                    ></v-select>
+                  </div>
+                  <div
+                    class="d-flex align-center"
+                    :style="{
+                      width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                    }"
+                  >
+                    <div
+                      class="d-flex justify-sm-start justify-end"
+                      :style="{
+                        width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                      }"
+                    >
+                      <div class="align-center d-flex pr-4">
+                        <v-switch
+                          v-model="formStatus.is_anonymous"
+                          class="mt-0"
+                          label="匿名"
+                          color="info"
+                          hide-details
+                          disabled
+                        ></v-switch>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="align-center d-flex pt-sm-0 pt-8 justify-sm-start justify-end"
+                  :style="{
+                    width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                  }"
+                >
+                  <div class="d-flex justify-end">
+                    <div>
+                      <v-btn
+                        color="error"
+                        depressed
+                        @click="doDeleteComment"
+                        :loading="formStatus.deleteLoading"
+                        class="mr-4"
+                      >
+                        {{ '删除评论' }}
+                      </v-btn>
+                      <span>
+                        <v-btn
+                          :color="formStatus.is_covered ? 'success' : 'warning'"
+                          depressed
+                          @click="doCoverComment"
+                          :loading="formStatus.coverLoading"
+                          class="mr-4"
+                          v-if="!formStatus.is_fold"
+                        >
+                          {{ formStatus.is_covered ? '取消遮盖' : '遮盖评论' }}
+                        </v-btn>
+                        <v-btn
+                          :color="formStatus.is_fold ? 'accent' : 'secondary'"
+                          depressed
+                          @click="doHideComment"
+                          :loading="formStatus.hideLoading"
+                          v-if="!formStatus.is_covered"
+                        >
+                          {{ formStatus.is_fold ? '取消隐藏' : '隐藏评论' }}
+                        </v-btn>
+                        <v-btn
+                          color="lime accent-4"
+                          depressed
+                          @click="doRegenerateCover"
+                          :loading="formStatus.regenerateLoading"
+                          v-if="formStatus.is_covered"
+                        >
+                          {{ '重新生成' }}
+                        </v-btn>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </v-card-text>
+          </v-window-item>
+        </v-window>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+import {
+  judgeItems,
+  rawYearItems as yearItems,
+  termItems,
+} from '@/composables/global/useStaticData';
+import { inject } from 'vue';
+import useManageCard from '@/composables/courses/comment/useManageCard';
+import { gradingEmojis } from '@/composables/global/useStaticData';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import TextContainer from '@/components/users/comment/TextContainer';
+import { gradingInfo } from '@/composables/global/useStaticData';
+import { unixToReadable } from '@/composables/global/useTimeUtils';
+import logoDark from '@/assets/logo-white.svg';
+import logoLight from '@/assets/logo.svg';
+import { commentPolicy } from 'Policy';
+import useUserName from '@/composables/global/useUserName';
+
+export default {
+  setup() {
+    const {
+      statics,
+      errorMsg,
+      formStatus,
+      windowStatus,
+      courseYear,
+      courseTerm,
+      userComments,
+      courseName,
+      doHideComment,
+      doDeleteComment,
+      doCoverComment,
+      doRegenerateCover,
+      setEditTarget,
+      clearEditTarget,
+    } = useManageCard();
+
+    const global = inject('global');
+
+    return {
+      useUserName,
+      commentPolicy,
+      logoDark,
+      logoLight,
+      unixToReadable,
+      judgeItems,
+      yearItems,
+      termItems,
+      gradingInfo,
+      global,
+      statics,
+      errorMsg,
+      formStatus,
+      windowStatus,
+      courseYear,
+      courseTerm,
+      userComments,
+      courseName,
+      doHideComment,
+      doDeleteComment,
+      doCoverComment,
+      doRegenerateCover,
+      setEditTarget,
+      clearEditTarget,
+      gradingEmojis,
+    };
+  },
+  components: {
+    AvatarContainer,
+    TextContainer,
+  },
+};
+</script>
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.small-icon {
+  width: 150px;
+  height: 100%;
+}
+</style>
diff --git a/src/components/courses/ReviewDetail.vue b/src/components/courses/ReviewDetail.vue
index 84d5ee3..aa8fea1 100644
--- a/src/components/courses/ReviewDetail.vue
+++ b/src/components/courses/ReviewDetail.vue
@@ -1,27 +1,28 @@
-<template>
-  <v-row>
-    <v-col class="d-flex justify-center flex-column">
-      <div class="text-center white--text text-caption">浏览量</div>
-      <div class="text-center white--text font-weight-bold text-body-2">3241</div>
-    </v-col>
-    <v-divider vertical inset style="border-color: white"></v-divider>
-    <v-col class="d-flex justify-center flex-column">
-      <div class="text-center white--text text-caption">评论数</div>
-      <div class="text-center white--text font-weight-bold text-body-2">12</div>
-    </v-col>
-    <v-divider vertical inset style="border-color: white"></v-divider>
-    <v-col class="d-flex justify-center flex-column">
-      <div class="text-center white--text text-caption">关注数</div>
-      <div class="text-center white--text font-weight-bold text-body-2">36</div>
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-export default {
-  name: "ReviewDetail"
-}
-</script>
-
-<style scoped>
-</style>
+<template>
+  <v-row>
+    <v-col class="d-flex justify-center flex-column">
+      <div class="text-center white--text text-caption">浏览量</div>
+      <div class="text-center white--text font-weight-bold text-body-2">
+        3241
+      </div>
+    </v-col>
+    <v-divider vertical inset style="border-color: white"></v-divider>
+    <v-col class="d-flex justify-center flex-column">
+      <div class="text-center white--text text-caption">评论数</div>
+      <div class="text-center white--text font-weight-bold text-body-2">12</div>
+    </v-col>
+    <v-divider vertical inset style="border-color: white"></v-divider>
+    <v-col class="d-flex justify-center flex-column">
+      <div class="text-center white--text text-caption">关注数</div>
+      <div class="text-center white--text font-weight-bold text-body-2">36</div>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ReviewDetail',
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/courses/ScoreBoard.vue b/src/components/courses/ScoreBoard.vue
index 0968a47..2806bfa 100644
--- a/src/components/courses/ScoreBoard.vue
+++ b/src/components/courses/ScoreBoard.vue
@@ -1,35 +1,34 @@
-<template>
-  <div>
-    <div v-for="index in [1, 2, 3, 4, 5]">
-      <ScoreLine
-        :starNum="6 - index"
-        :percentage="Math.round(starPercent[5 - index] * 100)"
-        :color="color ? color : scoreInfo[6 - index].color"
-        :star-color="color ? color : 'yellow darken-3'"
-        style="max-height: 13px"
-      ></ScoreLine>
-    </div>
-  </div>
-</template>
-
-<script>
-import ScoreLine from "@/components/courses/ScoreLine";
-import { scoreInfo } from "@/composables/global/useStaticData";
-
-export default {
-  components: { ScoreLine },
-  props: {
-    starPercent: Array,
-    color: {
-      type: String,
-      default: "",
-    },
-  },
-  setup() {
-    return { scoreInfo };
-  },
-};
-</script>
-
-<style scoped>
-</style>
+<template>
+  <div>
+    <div v-for="index in [1, 2, 3, 4, 5]">
+      <ScoreLine
+        :starNum="6 - index"
+        :percentage="Math.round(starPercent[5 - index] * 100)"
+        :color="color ? color : scoreInfo[6 - index].color"
+        :star-color="color ? color : 'yellow darken-3'"
+        style="max-height: 13px"
+      ></ScoreLine>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScoreLine from '@/components/courses/ScoreLine';
+import { scoreInfo } from '@/composables/global/useStaticData';
+
+export default {
+  components: { ScoreLine },
+  props: {
+    starPercent: Array,
+    color: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    return { scoreInfo };
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/courses/ScoreLine.vue b/src/components/courses/ScoreLine.vue
index b30605f..b5c69cb 100644
--- a/src/components/courses/ScoreLine.vue
+++ b/src/components/courses/ScoreLine.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import useScoreLine from "@/composables/courses/comment/useScoreLine";
+import useScoreLine from '@/composables/courses/comment/useScoreLine';
 
 export default {
   props: {
@@ -42,11 +42,11 @@ export default {
     percentage: Number,
     color: {
       type: String,
-      default: "grey",
+      default: 'grey',
     },
     starColor: {
       type: String,
-      default: "yellow darken-3",
+      default: 'yellow darken-3',
     },
   },
   setup() {
@@ -56,5 +56,4 @@ export default {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/components/courses/WritingBox.vue b/src/components/courses/WritingBox.vue
index 2077ffe..97be5e7 100644
--- a/src/components/courses/WritingBox.vue
+++ b/src/components/courses/WritingBox.vue
@@ -1,279 +1,279 @@
-<template>
-  <div>
-    <v-dialog width="750" transition :fullscreen="$vuetify.breakpoint.xsOnly">
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          v-if="global.isLogin"
-          v-bind="attrs"
-          v-on="on"
-          block
-          outlined
-          text
-          class="pa-0"
-        >
-          <v-icon size="18" style="transform: translate(0, 1px)">
-            {{ statics.icons.mdiPencil }}
-          </v-icon>
-          {{ writingMode ? "修改评论" : "写评论" }}
-        </v-btn>
-        <v-btn
-          v-else
-          v-bind="attrs"
-          v-on="on"
-          block
-          outlined
-          text
-          class="pa-0"
-          :disabled="true"
-        >
-          您还没有登录
-        </v-btn>
-      </template>
-      <v-card elevation="0">
-        <v-card-title class="px-sm-6 px-2">
-          <v-container class="pa-0">
-            <v-row align="center">
-              <v-col sm="1" cols="2">
-                <avatar-container
-                  :name="global.userProfile.nickname"
-                  slice
-                  :src="global.userProfile.avatar"
-                  :size="50"
-                />
-              </v-col>
-              <v-col sm="11" cols="10">
-                <v-text-field
-                  label="标题"
-                  class="font-weight-bold"
-                  v-model="formStatus.title"
-                  :error-messages="
-                    errorMsg.target === 'title' ? errorMsg.msg : ''
-                  "
-                ></v-text-field>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-title>
-        <v-card-text class="pb-2 px-sm-6 px-2">
-          <v-textarea
-            label="发一条友善的评论"
-            auto-grow
-            outlined
-            rows="5"
-            messages="支持markdown"
-            v-model="formStatus.content"
-            :error-messages="errorMsg.target === 'content' ? errorMsg.msg : ''"
-            v-show="!viewMode"
-          >
-          </v-textarea>
-          <v-card outlined v-show="viewMode">
-            <TextContainer :text="formStatus.content" markdown title="1321">
-            </TextContainer>
-          </v-card>
-          <v-container class="pa-0 pt-4">
-            <v-row class="d-flex justify-end">
-              <v-col
-                v-for="(dim, index) in statics.judgeItems"
-                :key="index"
-                sm="6"
-                cols="12"
-                class="pb-sm-2 pb-0"
-                align="center"
-              >
-                <v-slider
-                  v-model="formStatus.slider[index]"
-                  class="align-center"
-                  max="5"
-                  min="1"
-                  step="1"
-                  :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                  track-color="grey"
-                  thumb-label
-                  hide-details
-                  :label="dim"
-                >
-                  <template v-slot:append>
-                    <v-chip
-                      x-small
-                      label
-                      :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                      class="px-1"
-                    >
-                      <span class="text-caption white--text">{{
-                        statics.grade[index][formStatus.slider[index] - 1]
-                      }}</span>
-                    </v-chip>
-                  </template>
-                  <template v-slot:thumb-label="{ value }">
-                    {{ satisfactionEmojis[value - 1] }}
-                  </template>
-                </v-slider>
-              </v-col>
-            </v-row>
-          </v-container>
-          <div
-            class="d-flex justify-space-between pt-6"
-            style="flex-wrap: wrap"
-          >
-            <div class="d-flex" style="flex-wrap: wrap">
-              <div class="pr-2">
-                <v-select
-                  style="width: 100px"
-                  v-model="courseYear"
-                  :items="statics.yearItems"
-                  label="修读时间"
-                  :error="errorMsg.target === 'semester'"
-                ></v-select>
-              </div>
-              <div class="px-2">
-                <v-select
-                  style="width: 100px"
-                  v-model="courseTerm"
-                  :items="statics.termItems"
-                  item-text="name"
-                  item-value="id"
-                  label="修读学期"
-                  :error="errorMsg.target === 'semester'"
-                ></v-select>
-              </div>
-              <div class="px-2">
-                <v-select
-                  style="width: 100px"
-                  v-model="formStatus.commentTarget"
-                  :items="teachers"
-                  item-text="name"
-                  item-value="id"
-                  label="评价对象"
-                  :error-messages="
-                    errorMsg.target === 'comentTarget' ? errorMsg.msg : ''
-                  "
-                  :disabled="writingMode === 'edit'"
-                ></v-select>
-              </div>
-              <div class="px-2 d-flex align-center">
-                <div>
-                  <v-switch
-                    v-model="formStatus.is_anonymous"
-                    class="mt-0"
-                    label="匿名"
-                    color="info"
-                    hide-details
-                  ></v-switch>
-                </div>
-              </div>
-              <div class="d-flex px-2 align-center">
-                <div>
-                  <v-checkbox
-                    v-model="viewMode"
-                    class="mt-0"
-                    label="预览"
-                    color="info"
-                    hide-details
-                  ></v-checkbox>
-                </div>
-              </div>
-            </div>
-            <div class="d-flex align-center justify-end">
-              <div>
-                <v-btn
-                  :color="formStatus.isPostError ? 'error' : 'primary'"
-                  depressed
-                  @click="doSubmit"
-                  :loading="formStatus.loading"
-                >
-                  {{ writingMode == "edit" ? "修改评论" : "发表评论" }}
-                  <v-icon>
-                    {{ statics.icons.mdiChevronRight }}
-                  </v-icon>
-                </v-btn>
-              </div>
-            </div>
-          </div>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import useWritingBox from "@/composables/courses/comment/useWritingBox";
-// import useProfile from "@/composables/users/profile/useProfile";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import TextContainer from "@/components/users/comment/TextContainer";
-import { inject } from "vue";
-import { gradingEmojis } from "@/composables/global/useStaticData";
-
-export default {
-  components: {
-    AvatarContainer,
-    TextContainer,
-  },
-  setup() {
-    const {
-      statics,
-      teachers,
-      gradingInfo,
-      doSubmit,
-      formStatus,
-      errorMsg,
-      writingMode,
-      courseYear,
-      courseTerm,
-    } = useWritingBox();
-    const global = inject("global");
-
-    return {
-      statics,
-      global,
-      teachers,
-      gradingInfo,
-      doSubmit,
-      formStatus,
-      errorMsg,
-      writingMode,
-      courseYear,
-      courseTerm,
-    };
-  },
-  data() {
-    return {
-      satisfactionEmojis: gradingEmojis,
-      viewMode: false,
-    };
-  },
-  methods: {
-    getSemesterCode() {
-      if (this.courseYear === 0) {
-        return "";
-      }
-      if (this.courseTerm === "") {
-        return "";
-      }
-      return this.courseYear + this.courseTerm;
-    },
-  },
-  watch: {
-    courseYear() {
-      this.formStatus.semester = this.getSemesterCode();
-    },
-    courseTerm() {
-      this.formStatus.semester = this.getSemesterCode();
-    },
-    global: {
-      handler() {
-        window.location.reload();
-      },
-      deep: true,
-      immediate: false,
-    },
-  },
-  mounted() {},
-};
-</script>
-
-<style scoped>
-.writing-area {
-  max-height: 336px;
-  overflow-y: scroll;
-}
-</style>
+<template>
+  <div>
+    <v-dialog width="750" transition :fullscreen="$vuetify.breakpoint.xsOnly">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          v-if="global.isLogin"
+          v-bind="attrs"
+          v-on="on"
+          block
+          outlined
+          text
+          class="pa-0"
+        >
+          <v-icon size="18" style="transform: translate(0, 1px)">
+            {{ statics.icons.mdiPencil }}
+          </v-icon>
+          {{ writingMode ? '修改评论' : '写评论' }}
+        </v-btn>
+        <v-btn
+          v-else
+          v-bind="attrs"
+          v-on="on"
+          block
+          outlined
+          text
+          class="pa-0"
+          :disabled="true"
+        >
+          您还没有登录
+        </v-btn>
+      </template>
+      <v-card elevation="0">
+        <v-card-title class="px-sm-6 px-2">
+          <v-container class="pa-0">
+            <v-row align="center">
+              <v-col sm="1" cols="2">
+                <avatar-container
+                  :name="global.userProfile.nickname"
+                  slice
+                  :src="global.userProfile.avatar"
+                  :size="50"
+                />
+              </v-col>
+              <v-col sm="11" cols="10">
+                <v-text-field
+                  label="标题"
+                  class="font-weight-bold"
+                  v-model="formStatus.title"
+                  :error-messages="
+                    errorMsg.target === 'title' ? errorMsg.msg : ''
+                  "
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-title>
+        <v-card-text class="pb-2 px-sm-6 px-2">
+          <v-textarea
+            label="发一条友善的评论"
+            auto-grow
+            outlined
+            rows="5"
+            messages="支持markdown"
+            v-model="formStatus.content"
+            :error-messages="errorMsg.target === 'content' ? errorMsg.msg : ''"
+            v-show="!viewMode"
+          >
+          </v-textarea>
+          <v-card outlined v-show="viewMode">
+            <TextContainer :text="formStatus.content" markdown title="1321">
+            </TextContainer>
+          </v-card>
+          <v-container class="pa-0 pt-4">
+            <v-row class="d-flex justify-end">
+              <v-col
+                v-for="(dim, index) in statics.judgeItems"
+                :key="index"
+                sm="6"
+                cols="12"
+                class="pb-sm-2 pb-0"
+                align="center"
+              >
+                <v-slider
+                  v-model="formStatus.slider[index]"
+                  class="align-center"
+                  max="5"
+                  min="1"
+                  step="1"
+                  :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                  track-color="grey"
+                  thumb-label
+                  hide-details
+                  :label="dim"
+                >
+                  <template v-slot:append>
+                    <v-chip
+                      x-small
+                      label
+                      :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                      class="px-1"
+                    >
+                      <span class="text-caption white--text">{{
+                        statics.grade[index][formStatus.slider[index] - 1]
+                      }}</span>
+                    </v-chip>
+                  </template>
+                  <template v-slot:thumb-label="{ value }">
+                    {{ satisfactionEmojis[value - 1] }}
+                  </template>
+                </v-slider>
+              </v-col>
+            </v-row>
+          </v-container>
+          <div
+            class="d-flex justify-space-between pt-6"
+            style="flex-wrap: wrap"
+          >
+            <div class="d-flex" style="flex-wrap: wrap">
+              <div class="pr-2">
+                <v-select
+                  style="width: 100px"
+                  v-model="courseYear"
+                  :items="statics.yearItems"
+                  label="修读时间"
+                  :error="errorMsg.target === 'semester'"
+                ></v-select>
+              </div>
+              <div class="px-2">
+                <v-select
+                  style="width: 100px"
+                  v-model="courseTerm"
+                  :items="statics.termItems"
+                  item-text="name"
+                  item-value="id"
+                  label="修读学期"
+                  :error="errorMsg.target === 'semester'"
+                ></v-select>
+              </div>
+              <div class="px-2">
+                <v-select
+                  style="width: 100px"
+                  v-model="formStatus.commentTarget"
+                  :items="teachers"
+                  item-text="name"
+                  item-value="id"
+                  label="评价对象"
+                  :error-messages="
+                    errorMsg.target === 'comentTarget' ? errorMsg.msg : ''
+                  "
+                  :disabled="writingMode === 'edit'"
+                ></v-select>
+              </div>
+              <div class="px-2 d-flex align-center">
+                <div>
+                  <v-switch
+                    v-model="formStatus.is_anonymous"
+                    class="mt-0"
+                    label="匿名"
+                    color="info"
+                    hide-details
+                  ></v-switch>
+                </div>
+              </div>
+              <div class="d-flex px-2 align-center">
+                <div>
+                  <v-checkbox
+                    v-model="viewMode"
+                    class="mt-0"
+                    label="预览"
+                    color="info"
+                    hide-details
+                  ></v-checkbox>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex align-center justify-end">
+              <div>
+                <v-btn
+                  :color="formStatus.isPostError ? 'error' : 'primary'"
+                  depressed
+                  @click="doSubmit"
+                  :loading="formStatus.loading"
+                >
+                  {{ writingMode == 'edit' ? '修改评论' : '发表评论' }}
+                  <v-icon>
+                    {{ statics.icons.mdiChevronRight }}
+                  </v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import useWritingBox from '@/composables/courses/comment/useWritingBox';
+// import useProfile from "@/composables/users/profile/useProfile";
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import TextContainer from '@/components/users/comment/TextContainer';
+import { inject } from 'vue';
+import { gradingEmojis } from '@/composables/global/useStaticData';
+
+export default {
+  components: {
+    AvatarContainer,
+    TextContainer,
+  },
+  setup() {
+    const {
+      statics,
+      teachers,
+      gradingInfo,
+      doSubmit,
+      formStatus,
+      errorMsg,
+      writingMode,
+      courseYear,
+      courseTerm,
+    } = useWritingBox();
+    const global = inject('global');
+
+    return {
+      statics,
+      global,
+      teachers,
+      gradingInfo,
+      doSubmit,
+      formStatus,
+      errorMsg,
+      writingMode,
+      courseYear,
+      courseTerm,
+    };
+  },
+  data() {
+    return {
+      satisfactionEmojis: gradingEmojis,
+      viewMode: false,
+    };
+  },
+  methods: {
+    getSemesterCode() {
+      if (this.courseYear === 0) {
+        return '';
+      }
+      if (this.courseTerm === '') {
+        return '';
+      }
+      return this.courseYear + this.courseTerm;
+    },
+  },
+  watch: {
+    courseYear() {
+      this.formStatus.semester = this.getSemesterCode();
+    },
+    courseTerm() {
+      this.formStatus.semester = this.getSemesterCode();
+    },
+    global: {
+      handler() {
+        window.location.reload();
+      },
+      deep: true,
+      immediate: false,
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.writing-area {
+  max-height: 336px;
+  overflow-y: scroll;
+}
+</style>
diff --git a/src/components/courses/WritingCard.vue b/src/components/courses/WritingCard.vue
index 18dba97..57ab5f3 100644
--- a/src/components/courses/WritingCard.vue
+++ b/src/components/courses/WritingCard.vue
@@ -1,586 +1,622 @@
-<template>
-  <div v-if="!(global.userProfile.is_admin || global.userProfile.is_community_admin) || writingMode != 'create'">
-    <v-dialog
-      width="750"
-      v-model="windowStatus.showDialog"
-      :transition="
-        $vuetify.breakpoint.xsOnly
-          ? 'dialog-bottom-transition'
-          : 'scale-transition'
-      "
-      :fullscreen="$vuetify.breakpoint.xsOnly"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn v-bind="attrs" v-on="on" block outlined text class="pa-0">
-          <div v-if="!(global.userProfile.is_admin || global.userProfile.is_community_admin)">
-            <v-icon size="18" style="transform: translate(0, -1px)" class="pr-1">
-              {{ statics.icons.mdiPencil }}
-            </v-icon>
-            <span v-if="writingMode == 'create'">{{ '写评论' }}</span>
-            <span v-else>{{ '我的评论' }}</span>
-          </div>
-          <div v-else>
-            <v-icon size="18" style="transform: translate(0, -1px)" class="pr-1">
-              {{ statics.icons.mdiFormatPaint }}
-            </v-icon>
-            <span>管理评论</span>          
-          </div>
-        </v-btn>
-      </template>
-      <v-card flat>
-        <div class="pt-6 pt-sm-11 px-6 px-sm-11 d-flex justify-space-between">
-          <div>
-            <img
-              class="small-icon"
-              :src="$vuetify.theme.dark ? logoDark : logoLight"
-              alt=""
-            />
-          </div>
-          <div v-if="$vuetify.breakpoint.xsOnly">
-            <v-btn
-              icon
-              style="transform: translate(0, -1px)"
-              @click="windowStatus.showDialog = false"
-              v-if="$vuetify.breakpoint.name === 'xs'"
-            >
-              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
-            </v-btn>
-          </div>
-        </div>
-        <v-window v-model="windowStatus.windowStep" touchless>
-          <v-window-item :value="0">
-            <v-card-title class="pt-1 px-6 px-sm-11">
-              <div>
-                <div class="font-weight-bold text-h5">
-                  {{ global.userProfile.is_admin || global.userProfile.is_community_admin ? '管理评论' : '我的评论' }}                  
-                </div>
-              </div>
-            </v-card-title>
-            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
-              <div>
-                <div v-for="(comment, index) in userComments" :key="index">
-                  <v-hover>
-                    <template v-slot:default="{ hover }">
-                      <div
-                        class="router-container"
-                        @click="
-                          setEditTarget(comment), (windowStatus.windowStep = 1)
-                        "
-                      >
-                        <v-divider></v-divider>
-                        <div class="pt-4">
-                          <div
-                            v-if="global.userProfile.is_admin || global.userProfile.is_community_admin"
-                            class="d-flex"
-                          >
-                            <div
-                              style="transform: translate(0, -1px)"
-                              class="pr-1"
-                            >
-                              <AvatarContainer
-                                :name="
-                                  comment.user ? useUserName(comment.user) : '?'
-                                "
-                                :src="comment.user ? comment.user.avatar : ''"
-                                small
-                                slice
-                                size="15"
-                              />
-                            </div>
-                            <div class="pr-1">
-                              {{
-                                useUserName(comment.user) +
-                                (comment.user && comment.is_anonymous
-                                  ? '(匿名)'
-                                  : '')
-                              }}
-                            </div>
-                            <div
-                              v-if="comment.is_fold"
-                              style="transform: translate(0, -1px)"
-                            >
-                              <v-chip
-                                label
-                                x-small
-                                class="px-1 mr-1"
-                                color="secondary"
-                              >
-                                {{ '已隐藏' }}
-                              </v-chip>
-                            </div>
-                            <div
-                              v-if="comment.is_covered"
-                              style="transform: translate(0, -1px)"
-                            >
-                              <v-chip
-                                label
-                                x-small
-                                class="px-1"
-                                color="warning"
-                              >
-                                {{ '已遮盖' }}
-                              </v-chip>
-                            </div>
-                          </div>
-                        </div>
-                        <div>
-                          <v-icon
-                            size="16"
-                            style="transform: translate(0, -1px)"
-                          >
-                            {{ statics.icons.mdiSchoolOutline }}
-                          </v-icon>
-                          <span
-                            v-for="(teacher, indexTeacher) in comment.group
-                              .teachers"
-                            :key="indexTeacher"
-                            class=""
-                          >
-                            {{ teacher.name }}
-                          </span>
-                        </div>
-                        <div
-                          class="text-h6"
-                          :style="{
-                            'text-decoration': hover ? 'underline' : 'none',
-                          }"
-                        >
-                          {{ comment.title }}
-                        </div>
-                        <div class="pt-4">
-                          修读于：{{
-                            `${comment.semester.toString().substring(0, 4)}年${
-                              termItems[
-                                new Number(
-                                  comment.semester.toString().substring(4),
-                                ) - 1
-                              ].name
-                            }`
-                          }}
-                        </div>
-                        <div class="d-flex pb-4">
-                          <div class="pr-2">
-                            发布于：{{ unixToReadable(comment.post_time) }}
-                          </div>
-                          <div>
-                            修改于：{{ unixToReadable(comment.update_time) }}
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </v-hover>
-                </div>
-                <v-divider></v-divider>
-              </div>
-              <div
-                class="pt-8 d-flex justify-end"
-                v-if="
-                  teacherGroup.length != userComments.length &&
-                  !(global.userProfile.is_admin || global.userProfile.is_community_admin)
-                "
-              >
-                <v-btn
-                  color="primary"
-                  depressed
-                  @click="
-                    (windowStatus.windowStep = 1),
-                      (formStatus.userProfile = global.userProfile)
-                  "
-                >
-                  {{ '写评论' }}
-                </v-btn>
-              </div>
-            </v-card-text>
-          </v-window-item>
-          <v-window-item :value="1">
-            <v-card-title class="pt-0 px-6 px-sm-11">
-              <div
-                class="text-body-2 pb-1 overflow-ellipsis"
-                v-if="writingMode == 'edit'"
-              >
-                <v-btn
-                  icon
-                  x-small
-                  style="transform: translate(0, -1px)"
-                  @click="clearEditTarget(), (windowStatus.windowStep = 0)"
-                >
-                  <v-icon>
-                    {{ statics.icons.mdiArrowLeft }}
-                  </v-icon>
-                </v-btn>
-                <span>{{ courseName }}</span>
-              </div>
-              <div style="width: 100%" class="pt-1">
-                <div class="d-inline-block pr-4 align-center">
-                  <AvatarContainer
-                    :name="
-                      formStatus.userProfile
-                        ? useUserName(formStatus.userProfile)
-                        : '?'
-                    "
-                    :src="
-                      formStatus.userProfile
-                        ? formStatus.userProfile.avatar
-                        : ''
-                    "
-                    slice
-                    :size="50"
-                  />
-                </div>
-                <div
-                  class="d-inline-block align-center"
-                  style="width: calc(100% - 72px)"
-                >
-                  <v-text-field
-                    label="标题"
-                    class="font-weight-bold"
-                    v-model="formStatus.title"
-                    :error-messages="
-                      errorMsg.target === 'title' ? errorMsg.msg : ''
-                    "
-                    :disabled="!allowEdit"
-                  ></v-text-field>
-                </div>
-              </div>
-            </v-card-title>
-            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
-              <div v-show="allowEdit && !windowStatus.previewMarkdown">
-                <v-textarea
-                  :label="commentPolicy"
-                  auto-grow
-                  outlined
-                  rows="8"
-                  messages="支持markdown"
-                  v-model="formStatus.content"
-                  :error-messages="
-                    errorMsg.target === 'content' ? errorMsg.msg : ''
-                  "
-                >
-                </v-textarea>
-              </div>
-              <div
-                v-show="
-                  !allowEdit || (allowEdit && windowStatus.previewMarkdown)
-                "
-              >
-                <v-sheet
-                  flat
-                  outlined
-                  min-height="202px"
-                  style="margin-bottom: 30px"
-                >
-                  <TextContainer
-                    :text="formStatus.content"
-                    markdown
-                    title="1321"
-                    no-expand
-                  >
-                  </TextContainer>
-                </v-sheet>
-              </div>
-              <div class="d-flex justify-space-between flex-wrap">
-                <div
-                  v-for="(dim, index) in judgeItems"
-                  :key="index"
-                  class="align-center py-3"
-                  :style="{
-                    width: $vuetify.breakpoint.xsOnly ? '100%' : '48%',
-                  }"
-                >
-                  <v-slider
-                    v-model="formStatus.slider[index]"
-                    class="align-center"
-                    max="5"
-                    min="1"
-                    step="1"
-                    :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                    track-color="grey"
-                    thumb-label
-                    hide-details
-                    :label="dim"
-                    :disabled="!allowEdit"
-                  >
-                    <template v-slot:append>
-                      <v-chip
-                        x-small
-                        label
-                        :color="gradingInfo.color[formStatus.slider[index] - 1]"
-                        class="px-1"
-                      >
-                        <span class="text-caption white--text">{{
-                          statics.grade[index][formStatus.slider[index] - 1]
-                        }}</span>
-                      </v-chip>
-                    </template>
-                    <template v-slot:thumb-label="{ value }">
-                      {{ gradingEmojis[value - 1] }}
-                    </template>
-                  </v-slider>
-                </div>
-              </div>
-              <div class="d-flex justify-end justify-sm-space-between flex-wrap">
-                <div
-                  :class="[
-                    'd-flex',
-                    'flex-wrap',
-                    'justify-sm-start',
-                    formStatus.id == null
-                      ? 'justify-space-between'
-                      : 'justify-end',
-                  ]"
-                >
-                  <div
-                    :class="[
-                      'pr-sm-4',
-                      formStatus.id == null ? 'pr-0' : 'pr-4',
-                    ]"
-                  >
-                    <v-select
-                      style="width: 100px"
-                      v-model="courseYear"
-                      :items="yearItems"
-                      label="修读时间"
-                      :error="errorMsg.target === 'semester'"
-                      :disabled="!allowEdit"
-                    ></v-select>
-                  </div>
-                  <div class="pr-sm-4 pr-0">
-                    <v-select
-                      style="width: 100px"
-                      v-model="courseTerm"
-                      :items="termItems"
-                      item-text="name"
-                      item-value="id"
-                      label="修读学期"
-                      :error="errorMsg.target === 'semester'"
-                      :disabled="!allowEdit"
-                    ></v-select>
-                  </div>
-                  <div class="pr-sm-4 pr-0" v-if="formStatus.id == null">
-                    <v-select
-                      style="width: 100px"
-                      v-model="formStatus.commentTarget"
-                      :items="teacherGroup"
-                      item-text="name"
-                      item-value="id"
-                      label="评价对象"
-                      :error-messages="
-                        errorMsg.target === 'comentTarget' ? errorMsg.msg : ''
-                      "
-                    ></v-select>
-                  </div>
-                  <div
-                    class="d-flex align-center"
-                    :style="{
-                      width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                    }"
-                  >
-                    <div
-                      class="d-flex justify-sm-start justify-end"
-                      :style="{
-                        width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                      }"
-                    >
-                      <div class="align-center d-flex pr-4">
-                        <v-switch
-                          v-model="formStatus.is_anonymous"
-                          class="mt-0"
-                          label="匿名"
-                          color="info"
-                          hide-details
-                          :disabled="!allowEdit"
-                        ></v-switch>
-                      </div>
-                      <div class="align-center d-flex" v-if="allowEdit">
-                        <v-checkbox
-                          v-model="windowStatus.previewMarkdown"
-                          class="mt-0"
-                          label="预览"
-                          color="info"
-                          hide-details
-                        ></v-checkbox>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="align-center d-flex pt-sm-0 pt-8 justify-sm-start justify-end"
-                  :style="{
-                    width: $vuetify.breakpoint.xsOnly ? '100%' : '',
-                  }"
-                >
-                  <div class="d-flex justify-end">
-                    <div>
-                      <v-btn
-                        color="error"
-                        depressed
-                        @click="doDeleteComment"
-                        :loading="formStatus.deleteLoading"
-                        v-if="formStatus.id != null"
-                        class="mr-4"
-                      >
-                        {{ '删除评论' }}
-                      </v-btn>
-                      <v-btn
-                        color="primary"
-                        depressed
-                        @click="doSubmitComment"
-                        :loading="formStatus.editLoading"
-                        v-if="allowEdit"
-                      >
-                        {{ formStatus.id != null ? '修改评论' : '发表评论' }}
-                      </v-btn>
-                      <span v-else>
-                        <v-btn
-                          :color="formStatus.is_covered ? 'success' : 'warning'"
-                          depressed
-                          @click="doCoverComment"
-                          :loading="formStatus.coverLoading"
-                          class="mr-4"
-                          v-if="!formStatus.is_fold"
-                        >
-                          {{ formStatus.is_covered ? '取消遮盖' : '遮盖评论' }}
-                        </v-btn>                        
-                        <v-btn
-                          :color="formStatus.is_fold ? 'accent' : 'secondary'"
-                          depressed
-                          @click="doHideComment"
-                          :loading="formStatus.hideLoading"
-                          v-if="!formStatus.is_covered"                          
-                        >
-                          {{ formStatus.is_fold ? '取消隐藏' : '隐藏评论' }}
-                        </v-btn>
-                        <v-btn
-                          color="lime accent-4"
-                          depressed
-                          @click="doRegenerateCover"
-                          :loading="formStatus.regenerateLoading"
-                          v-if="formStatus.is_covered"                          
-                        >
-                          {{ '重新生成' }}
-                        </v-btn>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </v-card-text>
-          </v-window-item>
-        </v-window>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-<script>
-import {
-  judgeItems,
-  rawYearItems as yearItems,
-  termItems,
-} from '@/composables/global/useStaticData';
-import { inject } from 'vue';
-import useWritingCard from '@/composables/courses/comment/useWritingCard';
-import { gradingEmojis } from '@/composables/global/useStaticData';
-import AvatarContainer from '@/components/users/profile/AvatarContainer';
-import TextContainer from '@/components/users/comment/TextContainer';
-import { gradingInfo } from '@/composables/global/useStaticData';
-import { unixToReadable } from '@/composables/global/useTimeUtils';
-import logoDark from '@/assets/logo-white.svg';
-import logoLight from '@/assets/logo.svg';
-import { commentPolicy } from 'Policy';
-import useUserName from '@/composables/global/useUserName';
-
-export default {
-  setup() {
-    const {
-      statics,
-      teacherGroup,
-      errorMsg,
-      formStatus,
-      windowStatus,
-      courseYear,
-      courseTerm,
-      writingMode,
-      userComments,
-      courseName,
-      doSubmitComment,
-      doHideComment,
-      doDeleteComment,
-      doCoverComment,
-      doRegenerateCover,
-      setEditTarget,
-      clearEditTarget,
-    } = useWritingCard();
-
-    const global = inject('global');
-
-    return {
-      useUserName,
-      commentPolicy,
-      logoDark,
-      logoLight,
-      unixToReadable,
-      judgeItems,
-      yearItems,
-      termItems,
-      gradingInfo,
-      global,
-      statics,
-      teacherGroup,
-      errorMsg,
-      formStatus,
-      windowStatus,
-      courseYear,
-      courseTerm,
-      writingMode,
-      userComments,
-      courseName,
-      doSubmitComment,
-      doHideComment,
-      doDeleteComment,
-      doCoverComment,
-      doRegenerateCover,
-      setEditTarget,
-      clearEditTarget,
-      gradingEmojis,
-    };
-  },
-  components: {
-    AvatarContainer,
-    TextContainer,
-  },
-  computed: {
-    allowEdit() {
-      if (this.formStatus.id == null) {
-        return true;
-      } else if (this.global.userProfile.is_admin || this.global.userProfile.is_community_admin) {
-        if (
-          this.formStatus.userProfile &&
-          this.formStatus.userProfile.id == this.global.userProfile.id
-        ) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return true;
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.small-icon {
-  width: 150px;
-  height: 100%;
-}
-</style>
+<template>
+  <div
+    v-if="
+      !(global.userProfile.is_admin || global.userProfile.is_community_admin) ||
+      writingMode != 'create'
+    "
+  >
+    <v-dialog
+      width="750"
+      v-model="windowStatus.showDialog"
+      :transition="
+        $vuetify.breakpoint.xsOnly
+          ? 'dialog-bottom-transition'
+          : 'scale-transition'
+      "
+      :fullscreen="$vuetify.breakpoint.xsOnly"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn v-bind="attrs" v-on="on" block outlined text class="pa-0">
+          <div
+            v-if="
+              !(
+                global.userProfile.is_admin ||
+                global.userProfile.is_community_admin
+              )
+            "
+          >
+            <v-icon
+              size="18"
+              style="transform: translate(0, -1px)"
+              class="pr-1"
+            >
+              {{ statics.icons.mdiPencil }}
+            </v-icon>
+            <span v-if="writingMode == 'create'">{{ '写评论' }}</span>
+            <span v-else>{{ '我的评论' }}</span>
+          </div>
+          <div v-else>
+            <v-icon
+              size="18"
+              style="transform: translate(0, -1px)"
+              class="pr-1"
+            >
+              {{ statics.icons.mdiFormatPaint }}
+            </v-icon>
+            <span>管理评论</span>
+          </div>
+        </v-btn>
+      </template>
+      <v-card flat>
+        <div class="pt-6 pt-sm-11 px-6 px-sm-11 d-flex justify-space-between">
+          <div>
+            <img
+              class="small-icon"
+              :src="$vuetify.theme.dark ? logoDark : logoLight"
+              alt=""
+            />
+          </div>
+          <div v-if="$vuetify.breakpoint.xsOnly">
+            <v-btn
+              icon
+              style="transform: translate(0, -1px)"
+              @click="windowStatus.showDialog = false"
+              v-if="$vuetify.breakpoint.name === 'xs'"
+            >
+              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
+            </v-btn>
+          </div>
+        </div>
+        <v-window v-model="windowStatus.windowStep" touchless>
+          <v-window-item :value="0">
+            <v-card-title class="pt-1 px-6 px-sm-11">
+              <div>
+                <div class="font-weight-bold text-h5">
+                  {{
+                    global.userProfile.is_admin ||
+                    global.userProfile.is_community_admin
+                      ? '管理评论'
+                      : '我的评论'
+                  }}
+                </div>
+              </div>
+            </v-card-title>
+            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
+              <div>
+                <div v-for="(comment, index) in userComments" :key="index">
+                  <v-hover>
+                    <template v-slot:default="{ hover }">
+                      <div
+                        class="router-container"
+                        @click="
+                          setEditTarget(comment), (windowStatus.windowStep = 1)
+                        "
+                      >
+                        <v-divider></v-divider>
+                        <div class="pt-4">
+                          <div
+                            v-if="
+                              global.userProfile.is_admin ||
+                              global.userProfile.is_community_admin
+                            "
+                            class="d-flex"
+                          >
+                            <div
+                              style="transform: translate(0, -1px)"
+                              class="pr-1"
+                            >
+                              <AvatarContainer
+                                :name="
+                                  comment.user ? useUserName(comment.user) : '?'
+                                "
+                                :src="comment.user ? comment.user.avatar : ''"
+                                small
+                                slice
+                                size="15"
+                              />
+                            </div>
+                            <div class="pr-1">
+                              {{
+                                useUserName(comment.user) +
+                                (comment.user && comment.is_anonymous
+                                  ? '(匿名)'
+                                  : '')
+                              }}
+                            </div>
+                            <div
+                              v-if="comment.is_fold"
+                              style="transform: translate(0, -1px)"
+                            >
+                              <v-chip
+                                label
+                                x-small
+                                class="px-1 mr-1"
+                                color="secondary"
+                              >
+                                {{ '已隐藏' }}
+                              </v-chip>
+                            </div>
+                            <div
+                              v-if="comment.is_covered"
+                              style="transform: translate(0, -1px)"
+                            >
+                              <v-chip
+                                label
+                                x-small
+                                class="px-1"
+                                color="warning"
+                              >
+                                {{ '已遮盖' }}
+                              </v-chip>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <v-icon
+                            size="16"
+                            style="transform: translate(0, -1px)"
+                          >
+                            {{ statics.icons.mdiSchoolOutline }}
+                          </v-icon>
+                          <span
+                            v-for="(teacher, indexTeacher) in comment.group
+                              .teachers"
+                            :key="indexTeacher"
+                            class=""
+                          >
+                            {{ teacher.name }}
+                          </span>
+                        </div>
+                        <div
+                          class="text-h6"
+                          :style="{
+                            'text-decoration': hover ? 'underline' : 'none',
+                          }"
+                        >
+                          {{ comment.title }}
+                        </div>
+                        <div class="pt-4">
+                          修读于：{{
+                            `${comment.semester.toString().substring(0, 4)}年${
+                              termItems[
+                                new Number(
+                                  comment.semester.toString().substring(4),
+                                ) - 1
+                              ].name
+                            }`
+                          }}
+                        </div>
+                        <div class="d-flex pb-4">
+                          <div class="pr-2">
+                            发布于：{{ unixToReadable(comment.post_time) }}
+                          </div>
+                          <div>
+                            修改于：{{ unixToReadable(comment.update_time) }}
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </v-hover>
+                </div>
+                <v-divider></v-divider>
+              </div>
+              <div
+                class="pt-8 d-flex justify-end"
+                v-if="
+                  teacherGroup.length != userComments.length &&
+                  !(
+                    global.userProfile.is_admin ||
+                    global.userProfile.is_community_admin
+                  )
+                "
+              >
+                <v-btn
+                  color="primary"
+                  depressed
+                  @click="
+                    (windowStatus.windowStep = 1),
+                      (formStatus.userProfile = global.userProfile)
+                  "
+                >
+                  {{ '写评论' }}
+                </v-btn>
+              </div>
+            </v-card-text>
+          </v-window-item>
+          <v-window-item :value="1">
+            <v-card-title class="pt-0 px-6 px-sm-11">
+              <div
+                class="text-body-2 pb-1 overflow-ellipsis"
+                v-if="writingMode == 'edit'"
+              >
+                <v-btn
+                  icon
+                  x-small
+                  style="transform: translate(0, -1px)"
+                  @click="clearEditTarget(), (windowStatus.windowStep = 0)"
+                >
+                  <v-icon>
+                    {{ statics.icons.mdiArrowLeft }}
+                  </v-icon>
+                </v-btn>
+                <span>{{ courseName }}</span>
+              </div>
+              <div style="width: 100%" class="pt-1">
+                <div class="d-inline-block pr-4 align-center">
+                  <AvatarContainer
+                    :name="
+                      formStatus.userProfile
+                        ? useUserName(formStatus.userProfile)
+                        : '?'
+                    "
+                    :src="
+                      formStatus.userProfile
+                        ? formStatus.userProfile.avatar
+                        : ''
+                    "
+                    slice
+                    :size="50"
+                  />
+                </div>
+                <div
+                  class="d-inline-block align-center"
+                  style="width: calc(100% - 72px)"
+                >
+                  <v-text-field
+                    label="标题"
+                    class="font-weight-bold"
+                    v-model="formStatus.title"
+                    :error-messages="
+                      errorMsg.target === 'title' ? errorMsg.msg : ''
+                    "
+                    :disabled="!allowEdit"
+                  ></v-text-field>
+                </div>
+              </div>
+            </v-card-title>
+            <v-card-text class="px-6 px-sm-11 pb-6 pb-sm-11">
+              <div v-show="allowEdit && !windowStatus.previewMarkdown">
+                <v-textarea
+                  :label="commentPolicy"
+                  auto-grow
+                  outlined
+                  rows="8"
+                  messages="支持markdown"
+                  v-model="formStatus.content"
+                  :error-messages="
+                    errorMsg.target === 'content' ? errorMsg.msg : ''
+                  "
+                >
+                </v-textarea>
+              </div>
+              <div
+                v-show="
+                  !allowEdit || (allowEdit && windowStatus.previewMarkdown)
+                "
+              >
+                <v-sheet
+                  flat
+                  outlined
+                  min-height="202px"
+                  style="margin-bottom: 30px"
+                >
+                  <TextContainer
+                    :text="formStatus.content"
+                    markdown
+                    title="1321"
+                    no-expand
+                  >
+                  </TextContainer>
+                </v-sheet>
+              </div>
+              <div class="d-flex justify-space-between flex-wrap">
+                <div
+                  v-for="(dim, index) in judgeItems"
+                  :key="index"
+                  class="align-center py-3"
+                  :style="{
+                    width: $vuetify.breakpoint.xsOnly ? '100%' : '48%',
+                  }"
+                >
+                  <v-slider
+                    v-model="formStatus.slider[index]"
+                    class="align-center"
+                    max="5"
+                    min="1"
+                    step="1"
+                    :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                    track-color="grey"
+                    thumb-label
+                    hide-details
+                    :label="dim"
+                    :disabled="!allowEdit"
+                  >
+                    <template v-slot:append>
+                      <v-chip
+                        x-small
+                        label
+                        :color="gradingInfo.color[formStatus.slider[index] - 1]"
+                        class="px-1"
+                      >
+                        <span class="text-caption white--text">{{
+                          statics.grade[index][formStatus.slider[index] - 1]
+                        }}</span>
+                      </v-chip>
+                    </template>
+                    <template v-slot:thumb-label="{ value }">
+                      {{ gradingEmojis[value - 1] }}
+                    </template>
+                  </v-slider>
+                </div>
+              </div>
+              <div
+                class="d-flex justify-end justify-sm-space-between flex-wrap"
+              >
+                <div
+                  :class="[
+                    'd-flex',
+                    'flex-wrap',
+                    'justify-sm-start',
+                    formStatus.id == null
+                      ? 'justify-space-between'
+                      : 'justify-end',
+                  ]"
+                >
+                  <div
+                    :class="[
+                      'pr-sm-4',
+                      formStatus.id == null ? 'pr-0' : 'pr-4',
+                    ]"
+                  >
+                    <v-select
+                      style="width: 100px"
+                      v-model="courseYear"
+                      :items="yearItems"
+                      label="修读时间"
+                      :error="errorMsg.target === 'semester'"
+                      :disabled="!allowEdit"
+                    ></v-select>
+                  </div>
+                  <div class="pr-sm-4 pr-0">
+                    <v-select
+                      style="width: 100px"
+                      v-model="courseTerm"
+                      :items="termItems"
+                      item-text="name"
+                      item-value="id"
+                      label="修读学期"
+                      :error="errorMsg.target === 'semester'"
+                      :disabled="!allowEdit"
+                    ></v-select>
+                  </div>
+                  <div class="pr-sm-4 pr-0" v-if="formStatus.id == null">
+                    <v-select
+                      style="width: 100px"
+                      v-model="formStatus.commentTarget"
+                      :items="teacherGroup"
+                      item-text="name"
+                      item-value="id"
+                      label="评价对象"
+                      :error-messages="
+                        errorMsg.target === 'comentTarget' ? errorMsg.msg : ''
+                      "
+                    ></v-select>
+                  </div>
+                  <div
+                    class="d-flex align-center"
+                    :style="{
+                      width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                    }"
+                  >
+                    <div
+                      class="d-flex justify-sm-start justify-end"
+                      :style="{
+                        width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                      }"
+                    >
+                      <div class="align-center d-flex pr-4">
+                        <v-switch
+                          v-model="formStatus.is_anonymous"
+                          class="mt-0"
+                          label="匿名"
+                          color="info"
+                          hide-details
+                          :disabled="!allowEdit"
+                        ></v-switch>
+                      </div>
+                      <div class="align-center d-flex" v-if="allowEdit">
+                        <v-checkbox
+                          v-model="windowStatus.previewMarkdown"
+                          class="mt-0"
+                          label="预览"
+                          color="info"
+                          hide-details
+                        ></v-checkbox>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="align-center d-flex pt-sm-0 pt-8 justify-sm-start justify-end"
+                  :style="{
+                    width: $vuetify.breakpoint.xsOnly ? '100%' : '',
+                  }"
+                >
+                  <div class="d-flex justify-end">
+                    <div>
+                      <v-btn
+                        color="error"
+                        depressed
+                        @click="doDeleteComment"
+                        :loading="formStatus.deleteLoading"
+                        v-if="formStatus.id != null"
+                        class="mr-4"
+                      >
+                        {{ '删除评论' }}
+                      </v-btn>
+                      <v-btn
+                        color="primary"
+                        depressed
+                        @click="doSubmitComment"
+                        :loading="formStatus.editLoading"
+                        v-if="allowEdit"
+                      >
+                        {{ formStatus.id != null ? '修改评论' : '发表评论' }}
+                      </v-btn>
+                      <span v-else>
+                        <v-btn
+                          :color="formStatus.is_covered ? 'success' : 'warning'"
+                          depressed
+                          @click="doCoverComment"
+                          :loading="formStatus.coverLoading"
+                          class="mr-4"
+                          v-if="!formStatus.is_fold"
+                        >
+                          {{ formStatus.is_covered ? '取消遮盖' : '遮盖评论' }}
+                        </v-btn>
+                        <v-btn
+                          :color="formStatus.is_fold ? 'accent' : 'secondary'"
+                          depressed
+                          @click="doHideComment"
+                          :loading="formStatus.hideLoading"
+                          v-if="!formStatus.is_covered"
+                        >
+                          {{ formStatus.is_fold ? '取消隐藏' : '隐藏评论' }}
+                        </v-btn>
+                        <v-btn
+                          color="lime accent-4"
+                          depressed
+                          @click="doRegenerateCover"
+                          :loading="formStatus.regenerateLoading"
+                          v-if="formStatus.is_covered"
+                        >
+                          {{ '重新生成' }}
+                        </v-btn>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </v-card-text>
+          </v-window-item>
+        </v-window>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+import {
+  judgeItems,
+  rawYearItems as yearItems,
+  termItems,
+} from '@/composables/global/useStaticData';
+import { inject } from 'vue';
+import useWritingCard from '@/composables/courses/comment/useWritingCard';
+import { gradingEmojis } from '@/composables/global/useStaticData';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import TextContainer from '@/components/users/comment/TextContainer';
+import { gradingInfo } from '@/composables/global/useStaticData';
+import { unixToReadable } from '@/composables/global/useTimeUtils';
+import logoDark from '@/assets/logo-white.svg';
+import logoLight from '@/assets/logo.svg';
+import { commentPolicy } from 'Policy';
+import useUserName from '@/composables/global/useUserName';
+
+export default {
+  setup() {
+    const {
+      statics,
+      teacherGroup,
+      errorMsg,
+      formStatus,
+      windowStatus,
+      courseYear,
+      courseTerm,
+      writingMode,
+      userComments,
+      courseName,
+      doSubmitComment,
+      doHideComment,
+      doDeleteComment,
+      doCoverComment,
+      doRegenerateCover,
+      setEditTarget,
+      clearEditTarget,
+    } = useWritingCard();
+
+    const global = inject('global');
+
+    return {
+      useUserName,
+      commentPolicy,
+      logoDark,
+      logoLight,
+      unixToReadable,
+      judgeItems,
+      yearItems,
+      termItems,
+      gradingInfo,
+      global,
+      statics,
+      teacherGroup,
+      errorMsg,
+      formStatus,
+      windowStatus,
+      courseYear,
+      courseTerm,
+      writingMode,
+      userComments,
+      courseName,
+      doSubmitComment,
+      doHideComment,
+      doDeleteComment,
+      doCoverComment,
+      doRegenerateCover,
+      setEditTarget,
+      clearEditTarget,
+      gradingEmojis,
+    };
+  },
+  components: {
+    AvatarContainer,
+    TextContainer,
+  },
+  computed: {
+    allowEdit() {
+      if (this.formStatus.id == null) {
+        return true;
+      } else if (
+        this.global.userProfile.is_admin ||
+        this.global.userProfile.is_community_admin
+      ) {
+        if (
+          this.formStatus.userProfile &&
+          this.formStatus.userProfile.id == this.global.userProfile.id
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return true;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.small-icon {
+  width: 150px;
+  height: 100%;
+}
+</style>
diff --git a/src/components/courses/all/CourseCard.vue b/src/components/courses/all/CourseCard.vue
index 1acc67f..9e8fcc7 100644
--- a/src/components/courses/all/CourseCard.vue
+++ b/src/components/courses/all/CourseCard.vue
@@ -1,202 +1,210 @@
-<template>
-  <v-lazy class="px-3">
-    <div :style="{ width: width }">
-      <v-hover>
-        <template #default="{ hover }">
-          <v-card 
-            class="mb-3" 
-            flat 
-            height="303" 
-            outlined 
-            :style="hover ? { cursor: 'pointer' } : {}"
-            @click="$router.push('/course/' + course.id)"
-          >
-            <v-sheet
-              width="100%"
-              height="25%"
-              :color="instituteInfo[course.institute].color"
-            ></v-sheet>
-            <v-container>
-              <v-row class="d-flex justify-space-between">
-                <v-col class="d-flex justify-space-between">
-                  <div class="pl-2">
-                    <div class="d-flex">
-                      <div class="pr-4">
-                        <v-icon
-                          size="40"
-                          :color="instituteInfo[course.institute].color"
-                        >
-                          {{ statics.icons.mdiSchool }}
-                        </v-icon>
-                      </div>
-                      <div>
-                        <div
-                          class="
-                            justify-start
-                            text-body-1
-                            font-weight-bold
-                            overflow
-                          "
-                        >
-                          {{ course.name }}
-                        </div>
-                        <div
-                          class="text-caption"
-                          style="transform: translate(0, -2px)"
-                        >
-                          {{ course.institute }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="pr-2">
-                    <div class="text-caption">{{ course.code }}</div>
-                    <div class="text-caption" style="text-align: end">
-                      {{ course.credit }}学分
-                    </div>
-                  </div>
-                </v-col>
-              </v-row>
-            </v-container>
-            <v-container>
-              <v-row>
-                <v-col class="d-flex justify-space-between px-5">
-                  <div class="d-flex" v-for="index in [0, 1]" :key="index">
-                    <div
-                      class="text-body-2 pr-2 font-weight-bold"
-                      style="min-width: 57px"
-                    >
-                      {{ judgeItems[index] }}
-                    </div>
-                    <div>
-                      <v-chip
-                        x-small
-                        label
-                        :color="scoreInfo[roundedScore[index]].color"
-                        class="px-1 mt-n2"
-                      >
-                        <span class="text-caption white--text">{{
-                          scoreInfo[roundedScore[index]].label
-                        }}</span>
-                      </v-chip>
-                    </div>
-                  </div>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col class="d-flex justify-space-between px-5">
-                  <div class="d-flex" v-for="index in [2, 3]" :key="index">
-                    <div
-                      class="text-body-2 pr-2 font-weight-bold"
-                      style="min-width: 57px"
-                    >
-                      {{ judgeItems[index] }}
-                    </div>
-                    <div>
-                      <v-chip
-                        x-small
-                        label
-                        :color="scoreInfo[roundedScore[index]].color"
-                        class="px-1 mt-n2"
-                      >
-                        <span class="text-caption white--text">{{
-                          scoreInfo[roundedScore[index]].label
-                        }}</span>
-                      </v-chip>
-                    </div>
-                  </div>
-                </v-col>
-              </v-row>
-            </v-container>
-            <div class="pt-3">
-              <div>
-                <div class="px-5 text-caption">
-                  
-                  <div v-if="course.comment_num >= enoughDataThreshold">
-                    共获评价{{course.comment_num}}条，综合评分：{{(averageScore / 20).toFixed(1)}}/5.0
-                  </div>
-                  <div v-else-if="course.comment_num > 0">
-                    共获评价{{course.comment_num}}条，不足以给出综合评分
-                  </div>
-                  <div v-else>
-                    数据不足
-                  </div>
-                </div>            
-              </div>
-              <div>
-                <div style="width: 100%" class="px-5">
-                  <v-progress-linear
-                    v-model="course.comment_num < enoughDataThreshold ? 0 : averageScore"
-                    :color="scoreInfo[roundScore(averageScore / 20, course['comment_num'])].color"
-                    class="mt-2"
-                    style="pointer-events: none"
-                  >
-                  </v-progress-linear>
-                </div>
-              </div>
-            </div>
-            <v-fade-transition>
-              <v-overlay
-                v-if="hover"
-                absolute
-                opacity="0.1"
-              ></v-overlay>
-            </v-fade-transition>
-          </v-card>
-        </template>
-      </v-hover>
-    </div>
-  </v-lazy>
-</template>
-<script>
-import useCourseCard from "@/composables/courses/all/useCourseCard";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import { judgeItems, instituteInfo, scoreInfo } from "@/composables/global/useStaticData";
-import { averageOf } from "@/composables/global/useArrayUtils";
-import { roundScore, enoughDataThreshold } from "@/composables/global/useParseScore"
-
-export default {
-  setup() {
-    const { statics } = useCourseCard();
-    return { statics, judgeItems, roundScore, enoughDataThreshold, instituteInfo, scoreInfo };
-  },
-  data() {
-    return {
-      roundedScore: new Array(),
-      averageScore: 0
-    };
-  },
-  props: {
-    course: {
-      type: Object, 
-      required: true
-    },
-    width: {
-      type: String, 
-      default: ""
-    }
-  },
-  components: {
-    AvatarContainer,
-  },
-  created() {
-    for (let score of this.course.score) {
-      let rounded = roundScore(score, this.course["comment_num"]);
-      this.roundedScore.push(rounded);
-    }
-    this.averageScore = averageOf(this.course.score) * 20;
-  },
-};
-</script>
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-}
-</style>
\ No newline at end of file
+<template>
+  <v-lazy class="px-3">
+    <div :style="{ width: width }">
+      <v-hover>
+        <template #default="{ hover }">
+          <v-card
+            class="mb-3"
+            flat
+            height="303"
+            outlined
+            :style="hover ? { cursor: 'pointer' } : {}"
+            @click="$router.push('/course/' + course.id)"
+          >
+            <v-sheet
+              width="100%"
+              height="25%"
+              :color="instituteInfo[course.institute].color"
+            ></v-sheet>
+            <v-container>
+              <v-row class="d-flex justify-space-between">
+                <v-col class="d-flex justify-space-between">
+                  <div class="pl-2">
+                    <div class="d-flex">
+                      <div class="pr-4">
+                        <v-icon
+                          size="40"
+                          :color="instituteInfo[course.institute].color"
+                        >
+                          {{ statics.icons.mdiSchool }}
+                        </v-icon>
+                      </div>
+                      <div>
+                        <div
+                          class="justify-start text-body-1 font-weight-bold overflow"
+                        >
+                          {{ course.name }}
+                        </div>
+                        <div
+                          class="text-caption"
+                          style="transform: translate(0, -2px)"
+                        >
+                          {{ course.institute }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pr-2">
+                    <div class="text-caption">{{ course.code }}</div>
+                    <div class="text-caption" style="text-align: end">
+                      {{ course.credit }}学分
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+            </v-container>
+            <v-container>
+              <v-row>
+                <v-col class="d-flex justify-space-between px-5">
+                  <div class="d-flex" v-for="index in [0, 1]" :key="index">
+                    <div
+                      class="text-body-2 pr-2 font-weight-bold"
+                      style="min-width: 57px"
+                    >
+                      {{ judgeItems[index] }}
+                    </div>
+                    <div>
+                      <v-chip
+                        x-small
+                        label
+                        :color="scoreInfo[roundedScore[index]].color"
+                        class="px-1 mt-n2"
+                      >
+                        <span class="text-caption white--text">{{
+                          scoreInfo[roundedScore[index]].label
+                        }}</span>
+                      </v-chip>
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col class="d-flex justify-space-between px-5">
+                  <div class="d-flex" v-for="index in [2, 3]" :key="index">
+                    <div
+                      class="text-body-2 pr-2 font-weight-bold"
+                      style="min-width: 57px"
+                    >
+                      {{ judgeItems[index] }}
+                    </div>
+                    <div>
+                      <v-chip
+                        x-small
+                        label
+                        :color="scoreInfo[roundedScore[index]].color"
+                        class="px-1 mt-n2"
+                      >
+                        <span class="text-caption white--text">{{
+                          scoreInfo[roundedScore[index]].label
+                        }}</span>
+                      </v-chip>
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+            </v-container>
+            <div class="pt-3">
+              <div>
+                <div class="px-5 text-caption">
+                  <div v-if="course.comment_num >= enoughDataThreshold">
+                    共获评价{{ course.comment_num }}条，综合评分：{{
+                      (averageScore / 20).toFixed(1)
+                    }}/5.0
+                  </div>
+                  <div v-else-if="course.comment_num > 0">
+                    共获评价{{ course.comment_num }}条，不足以给出综合评分
+                  </div>
+                  <div v-else>数据不足</div>
+                </div>
+              </div>
+              <div>
+                <div style="width: 100%" class="px-5">
+                  <v-progress-linear
+                    v-model="course.comment_num < enoughDataThreshold ? 0 : averageScore"
+                    :color="
+                      scoreInfo[
+                        roundScore(averageScore / 20, course['comment_num'])
+                      ].color
+                    "
+                    class="mt-2"
+                    style="pointer-events: none"
+                  >
+                  </v-progress-linear>
+                </div>
+              </div>
+            </div>
+            <v-fade-transition>
+              <v-overlay v-if="hover" absolute opacity="0.1"></v-overlay>
+            </v-fade-transition>
+          </v-card>
+        </template>
+      </v-hover>
+    </div>
+  </v-lazy>
+</template>
+<script>
+import useCourseCard from '@/composables/courses/all/useCourseCard';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import {
+  judgeItems,
+  instituteInfo,
+  scoreInfo,
+} from '@/composables/global/useStaticData';
+import { averageOf } from '@/composables/global/useArrayUtils';
+import {
+  roundScore,
+  enoughDataThreshold,
+} from '@/composables/global/useParseScore';
+
+export default {
+  setup() {
+    const { statics } = useCourseCard();
+    return {
+      statics,
+      judgeItems,
+      roundScore,
+      enoughDataThreshold,
+      instituteInfo,
+      scoreInfo,
+    };
+  },
+  data() {
+    return {
+      roundedScore: new Array(),
+      averageScore: 0,
+    };
+  },
+  props: {
+    course: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    AvatarContainer,
+  },
+  created() {
+    for (let score of this.course.score) {
+      let rounded = roundScore(score, this.course['comment_num']);
+      this.roundedScore.push(rounded);
+    }
+    this.averageScore = averageOf(this.course.score) * 20;
+  },
+};
+</script>
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/courses/all/ElevatedPagination.vue b/src/components/courses/all/ElevatedPagination.vue
index e187c7f..425ed91 100644
--- a/src/components/courses/all/ElevatedPagination.vue
+++ b/src/components/courses/all/ElevatedPagination.vue
@@ -1,54 +1,62 @@
-<template>
-  <v-pagination :length="length" :total-visible="totalVisible" v-model="pageModel" @input="$emit('change',pageModel)" />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      pageModel: this.page,
-    };
-  },
-  props: {
-    page: {
-      type: Number,
-      required: true,
-    },
-    length: {
-      type: Number,
-      required: true,
-    },
-    totalVisible: {
-      type: Number,
-      default: -1,
-    },
-    elevation: {
-      type: [Number, String],
-      default: 4,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  model: {
-    prop: "page",
-    event: "change",
-  },
-};
-</script>
-<style scoped lang="scss">
-::v-deep .v-pagination__item, ::v-deep .v-pagination__navigation{
-  box-shadow: none;
-}
-
-::v-deep .theme--light {
-  .v-pagination__item, .v-pagination__navigation{
-    border: 1px solid #e6e6e6;
-  }
-}
-::v-deep .theme--dark{
-  .v-pagination__item, .v-pagination__navigation{
-    border: 1px solid #393939;
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <v-pagination
+    :length="length"
+    :total-visible="totalVisible"
+    v-model="pageModel"
+    @input="$emit('change', pageModel)"
+  />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      pageModel: this.page,
+    };
+  },
+  props: {
+    page: {
+      type: Number,
+      required: true,
+    },
+    length: {
+      type: Number,
+      required: true,
+    },
+    totalVisible: {
+      type: Number,
+      default: -1,
+    },
+    elevation: {
+      type: [Number, String],
+      default: 4,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: 'page',
+    event: 'change',
+  },
+};
+</script>
+<style scoped lang="scss">
+::v-deep .v-pagination__item,
+::v-deep .v-pagination__navigation {
+  box-shadow: none;
+}
+
+::v-deep .theme--light {
+  .v-pagination__item,
+  .v-pagination__navigation {
+    border: 1px solid #e6e6e6;
+  }
+}
+::v-deep .theme--dark {
+  .v-pagination__item,
+  .v-pagination__navigation {
+    border: 1px solid #393939;
+  }
+}
+</style>
diff --git a/src/components/courses/all/SelectBar.vue b/src/components/courses/all/SelectBar.vue
index 20fb163..f169f82 100644
--- a/src/components/courses/all/SelectBar.vue
+++ b/src/components/courses/all/SelectBar.vue
@@ -1,68 +1,61 @@
-<template>
-  <v-card
-    class="px-lg-0 px-4"
-    outlined
-    flat
-    :style="{ width: width }"
-  >
-    <v-container>
-      <v-row class="pt-lg-2 pt-4">
-        <v-col
-          md="2"
-          sm="3"
-          cols="6"
-          class="pb-0 pt-lg-3 pt-0 pl-4"
-          style="max-width: 140px; min-width: 130px"
-        >
-          <v-select                        
-            :value="sortKey"
-            @input="$emit('update:sort-key', $event)"
-            :items="keyItems"
-            label="排序方式"
-          ></v-select>
-        </v-col>
-        <v-col
-          md="2"
-          sm="3"
-          cols="6"
-          class="pb-0 pt-lg-3 pt-0"
-          style="max-width: 140px; min-width: 130px"
-        >
-          <v-select
-            :value="sortOrder"
-            @input="$emit('update:sort-order', $event)"
-            :items="orderItems"
-          ></v-select>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-<script>
-
-
-export default {
-  props: {
-    width: {
-      type: String, 
-      default: '',
-    }, 
-    "key-items": {
-      type: Array, 
-      required: true,
-    }, 
-    "order-items": {
-      type: Array,
-      required: true,
-    }, 
-    "sort-key": {
-      type: String,
-      required: true,
-    }, 
-    "sort-order": {
-      type: String,
-      required: true,    
-    }
-  }
-};
-</script>
+<template>
+  <v-card class="px-lg-0 px-4" outlined flat :style="{ width: width }">
+    <v-container>
+      <v-row class="pt-lg-2 pt-4">
+        <v-col
+          md="2"
+          sm="3"
+          cols="6"
+          class="pb-0 pt-lg-3 pt-0 pl-4"
+          style="max-width: 140px; min-width: 130px"
+        >
+          <v-select
+            :value="sortKey"
+            @input="$emit('update:sort-key', $event)"
+            :items="keyItems"
+            label="排序方式"
+          ></v-select>
+        </v-col>
+        <v-col
+          md="2"
+          sm="3"
+          cols="6"
+          class="pb-0 pt-lg-3 pt-0"
+          style="max-width: 140px; min-width: 130px"
+        >
+          <v-select
+            :value="sortOrder"
+            @input="$emit('update:sort-order', $event)"
+            :items="orderItems"
+          ></v-select>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '',
+    },
+    'key-items': {
+      type: Array,
+      required: true,
+    },
+    'order-items': {
+      type: Array,
+      required: true,
+    },
+    'sort-key': {
+      type: String,
+      required: true,
+    },
+    'sort-order': {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/src/components/courses/all/StatisticCard.vue b/src/components/courses/all/StatisticCard.vue
index faa37aa..4bf673f 100644
--- a/src/components/courses/all/StatisticCard.vue
+++ b/src/components/courses/all/StatisticCard.vue
@@ -1,94 +1,116 @@
-<template>
-  <div :style="{ width: $vuetify.breakpoint.mdAndDown ? width : '360px' }">
-    <v-card class="pt-6 pb-3 px-6" outlined flat>
-      <div>
-        <div>
-          <slot name="header"></slot>
-        </div>
-        <div class="d-flex justify-space-between">
-          <div class="text-h6 d-flex">
-            <v-icon class="pr-2">
-              {{ statics.icons.mdiCity }}
-            </v-icon>
-            <div>学院</div>
-          </div>
-          <div v-if="$vuetify.breakpoint.xsOnly">
-            <v-btn
-              icon
-              v-if="status.showAll"
-              @click="status.showAll = !status.showAll"
-            >
-              <v-icon>{{ statics.icons.mdiChevronUp }}</v-icon>
-            </v-btn>
-            <v-btn icon v-else @click="status.showAll = !status.showAll">
-              <v-icon>{{ statics.icons.mdiChevronDown }}</v-icon>
-            </v-btn>
-          </div>
-          <div v-else></div>
-        </div>
-        <v-expand-transition>
-          <div v-if="status.showAll">
-            <div class="d-flex pt-1">
-              <div>
-                <v-checkbox @change="handleSelectAll($event)" :value="status.selectAll" dense label="全选" hide-details></v-checkbox>
-              </div>
-              <div class="pl-8">
-                <v-checkbox @change="handleSelectAll(!$event)" :value="status.selectNotAll" dense label="全不选" hide-details></v-checkbox>
-              </div>
-            </div>
-            <div
-              v-for="(value, key, index) in courseStatistic.count"
-              :key="index"
-              :class="index !== 0 ? 'mt-n4' : ''"
-            >
-              <div class="pt-2">
-                <v-checkbox dense v-model="courseFilterStatus.selected" :value="key">
-                  <template #label>
-                    <div class="d-flex justify-space-between" style="width: 100%">
-                      <div>{{ key }}</div>
-                      <div>{{ value }}节</div>
-                    </div>
-                  </template>
-                </v-checkbox>
-              </div>
-            </div>
-          </div>
-        </v-expand-transition>
-      </div>
-      <div>
-        <slot name="footer" :showAll="status.showAll"></slot>
-      </div>
-      <div v-if="!status.showAll" class="pt-3"></div>
-    </v-card>
-  </div>
-</template>
-<script>
-import useStatisticCard from "@/composables/courses/all/useStatisticCard";
-
-export default {
-  setup() {
-    const { statics, courseStatistic, status, courseFilterStatus } = useStatisticCard();
-    return {
-      statics,
-      courseStatistic,
-      courseFilterStatus, 
-      status,
-    };
-  },
-  props: {
-    width: {
-      type: String,
-      default: "",
-    },
-  },
-  methods: {
-    handleSelectAll(event) {
-      if (event) {
-        this.courseFilterStatus.selected = Object.keys(this.courseStatistic.count).filter(key => key !== "__ob__");
-      } else {
-        this.courseFilterStatus.selected = [];
-      }
-    }, 
-  }
-};
-</script>
\ No newline at end of file
+<template>
+  <div :style="{ width: $vuetify.breakpoint.mdAndDown ? width : '360px' }">
+    <v-card class="pt-6 pb-3 px-6" outlined flat>
+      <div>
+        <div>
+          <slot name="header"></slot>
+        </div>
+        <div class="d-flex justify-space-between">
+          <div class="text-h6 d-flex">
+            <v-icon class="pr-2">
+              {{ statics.icons.mdiCity }}
+            </v-icon>
+            <div>学院</div>
+          </div>
+          <div v-if="$vuetify.breakpoint.xsOnly">
+            <v-btn
+              icon
+              v-if="status.showAll"
+              @click="status.showAll = !status.showAll"
+            >
+              <v-icon>{{ statics.icons.mdiChevronUp }}</v-icon>
+            </v-btn>
+            <v-btn icon v-else @click="status.showAll = !status.showAll">
+              <v-icon>{{ statics.icons.mdiChevronDown }}</v-icon>
+            </v-btn>
+          </div>
+          <div v-else></div>
+        </div>
+        <v-expand-transition>
+          <div v-if="status.showAll">
+            <div class="d-flex pt-1">
+              <div>
+                <v-checkbox
+                  @change="handleSelectAll($event)"
+                  :value="status.selectAll"
+                  dense
+                  label="全选"
+                  hide-details
+                ></v-checkbox>
+              </div>
+              <div class="pl-8">
+                <v-checkbox
+                  @change="handleSelectAll(!$event)"
+                  :value="status.selectNotAll"
+                  dense
+                  label="全不选"
+                  hide-details
+                ></v-checkbox>
+              </div>
+            </div>
+            <div
+              v-for="(value, key, index) in courseStatistic.count"
+              :key="index"
+              :class="index !== 0 ? 'mt-n4' : ''"
+            >
+              <div class="pt-2">
+                <v-checkbox
+                  dense
+                  v-model="courseFilterStatus.selected"
+                  :value="key"
+                >
+                  <template #label>
+                    <div
+                      class="d-flex justify-space-between"
+                      style="width: 100%"
+                    >
+                      <div>{{ key }}</div>
+                      <div>{{ value }}节</div>
+                    </div>
+                  </template>
+                </v-checkbox>
+              </div>
+            </div>
+          </div>
+        </v-expand-transition>
+      </div>
+      <div>
+        <slot name="footer" :showAll="status.showAll"></slot>
+      </div>
+      <div v-if="!status.showAll" class="pt-3"></div>
+    </v-card>
+  </div>
+</template>
+<script>
+import useStatisticCard from '@/composables/courses/all/useStatisticCard';
+
+export default {
+  setup() {
+    const { statics, courseStatistic, status, courseFilterStatus } =
+      useStatisticCard();
+    return {
+      statics,
+      courseStatistic,
+      courseFilterStatus,
+      status,
+    };
+  },
+  props: {
+    width: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleSelectAll(event) {
+      if (event) {
+        this.courseFilterStatus.selected = Object.keys(
+          this.courseStatistic.count,
+        ).filter((key) => key !== '__ob__');
+      } else {
+        this.courseFilterStatus.selected = [];
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/global/ActivityBanner.vue b/src/components/global/ActivityBanner.vue
index 3adf599..8055472 100644
--- a/src/components/global/ActivityBanner.vue
+++ b/src/components/global/ActivityBanner.vue
@@ -1,32 +1,33 @@
 <template>
-    <div class="d-flex justify-center activity-banner" :style="{
-        'background-color': $vuetify.theme.dark ? '#2a4165' : '#e8f0fe',
-    }" v-if=Enable>
-        <div class="d-flex justify-center flex-column">
-            <div class="text-body-1 primary--text">
-            <slot/>
-            </div>
-        </div>
+  <div
+    class="d-flex justify-center activity-banner"
+    :style="{
+      'background-color': $vuetify.theme.dark ? '#2a4165' : '#e8f0fe',
+    }"
+    v-if="Enable"
+  >
+    <div class="d-flex justify-center flex-column">
+      <div class="text-body-1 primary--text">
+        <slot />
+      </div>
     </div>
+  </div>
 </template>
 <script>
-
 export default {
-    name: 'ActivityBanner',
-    props: {
-        Enable: Boolean
-    },
-    setup() {
-    },
-}
-
+  name: 'ActivityBanner',
+  props: {
+    Enable: Boolean,
+  },
+  setup() {},
+};
 </script>
 <style scoped>
 .activity-banner {
-    height: 48px;
+  height: 48px;
 
-    position: absolute;
-    width: 100%;
-    /* opacity: 0.9; */
+  position: absolute;
+  width: 100%;
+  /* opacity: 0.9; */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/global/Header.vue b/src/components/global/Header.vue
old mode 100644
new mode 100755
index 279cb49..b897667
--- a/src/components/global/Header.vue
+++ b/src/components/global/Header.vue
@@ -1,389 +1,397 @@
-<template>
-  <v-app-bar
-    app
-    :color="$vuetify.theme.dark ? '' : 'white'"
-    elevate-on-scroll
-    elevation="3"
-  >
-    <v-toolbar-title
-      class="px-md-8 px-sm-4"
-      @click="isCurrentPath('^\/$') ? $router.push('/') : ''"
-      :style="{
-        cursor: 'pointer',
-        width: $vuetify.breakpoint.xsOnly ? '250px' : 'auto',
-      }"
-    >
-      <img
-        :src="$vuetify.theme.dark ? logoDark : logoLight"
-        width="139.61px"
-        alt=""
-      />
-    </v-toolbar-title>
-    <div
-      class="d-flex"
-      style="height: calc(100% + 8px)"
-      v-if="$vuetify.breakpoint.mdAndUp"
-    >
-      <SliderButton
-        tile
-        plain
-        height="100%"
-        :hover-only="isCurrentPath('^\/$')"
-        to="/"
-        class="px-1 black--text"
-      >
-        全部课程
-      </SliderButton>
-      <!-- <SliderButton
-        plain
-        tile
-        height="100%"
-        :hover-only="isCurrentPath('^\/course\/[0-9]+$')"
-        to="/course/1"
-        class="px-1"
-      >
-        课程详情
-      </SliderButton> -->
-      <SliderButton
-        plain
-        tile
-        height="100%"
-        :hover-only="isCurrentPath('^\/recent$')"
-        to="/recent"
-        class="px-1"
-        v-if="$vuetify.breakpoint.lgAndUp"
-      >
-        最近评价
-      </SliderButton>
-      <SliderButton
-        plain
-        tile
-        height="100%"
-        :hover-only="isCurrentPath('^\/ranking')"
-        to="/ranking"
-        class="px-1"
-      >
-        赏金排名
-      </SliderButton>
-      <SliderButton
-        plain
-        tile
-        height="100%"
-        :hover-only="isCurrentPath('^\/about')"
-        to="/about"
-        class="px-1"
-      >
-        关于我们
-      </SliderButton>
-    </div>
-    <div
-      :class="adoptiveSearchBarClass"
-      :style="{
-        width: adoptiveSearchBarWidth,
-      }"
-    >
-      <v-text-field
-        hide-details
-        solo
-        flat
-        :background-color="$vuetify.theme.dark ? '#3c4043' : '#F1F3F4'"
-        :prepend-inner-icon="icons.mdiMagnify"
-        ref="searchBar"
-        @blur="isCurrentPath('^\/$') ? $router.push('/') : ''"
-        @keydown.enter="
-          $refs.searchBar.blur(), isCurrentPath('^\/$') ? $router.push('/') : ''
-        "
-        v-if="$vuetify.breakpoint.smAndUp"
-        placeholder="以空格间隔关键字或以regexp:开头输入正则表达式"
-        v-model="status.searchString"
-      >
-      </v-text-field>
-    </div>
-    <v-spacer></v-spacer>
-    <MobileSearchBar
-      v-model="status.searchString"
-      v-if="$vuetify.breakpoint.xsOnly"
-    />
-    <v-btn
-      color="primary"
-      class="px-sm-8"
-      @click="dialog.login = true"
-      v-if="!global.isLogin"
-      elevation="0"
-    >
-      登录
-    </v-btn>
-    <v-btn
-      class="px-sm-8 ml-4 mr-md-8 mr-sm-3"
-      @click="dialog.register = true"
-      v-if="!global.isLogin"
-      elevation="0"
-    >
-      注册
-    </v-btn>
-    <v-menu left bottom offset-y transition="slide-y-transition" v-else>
-      <template #activator="{ on }">
-        <v-btn v-on="on" icon>
-          <AvatarContainer
-            small
-            size="38"
-            :name="useUserName(global.userProfile)"
-            slice
-            style="transform: translate(-1px, 0)"
-            :src="global.userProfile.avatar"
-          />
-        </v-btn>
-      </template>
-      <v-list close-on-click width="340px">
-        <v-list-item class="py-4 px-8 d-block">
-          <div class="d-flex justify-center over">
-            <AvatarContainer
-              size="80"
-              font-size="text-h4"
-              :name="useUserName(global.userProfile)"
-              slice
-              :src="global.userProfile.avatar"
-            />
-          </div>
-          <div class="d-flex justify-center">
-            <div class="overflow-ellipsis font-weight-bold pt-4">
-              {{ useUserName(global.userProfile) }}
-            </div>
-          </div>
-          <div class="d-flex justify-center">
-            <div
-              class="text-body-2 text--darken-1 grey--text overflow-ellipsis py-1"
-            >
-              {{ global.userProfile.email }}
-            </div>
-          </div>
-        </v-list-item>
-        <v-divider></v-divider>
-        <v-list-item link :to="`/user/${global.userProfile.id}`" class="px-8">
-          <v-list-item-icon>
-            <v-icon>{{ icons.mdiAccountOutline }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title class="text-body-1">个人中心</v-list-item-title>
-        </v-list-item>
-        <v-list-item link to="" class="px-8">
-          <v-list-item-icon>
-            <v-icon>{{ icons.mdiMessageAlertOutline }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title
-            class="text-body-1"
-            @click="
-              isCurrentPath('^\/about') ? $router.push('/about') : '',
-                useInsitePush('#bug_report')
-            "
-            >反馈</v-list-item-title
-          >
-        </v-list-item>
-        <v-list-item link @click="doLogout()" class="px-8">
-          <v-list-item-icon>
-            <v-icon>{{ icons.mdiLogoutVariant }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title class="text-body-1">注销</v-list-item-title>
-        </v-list-item>
-        <v-divider></v-divider>
-        <v-list-item class="d-flex justify-center">
-          <v-btn
-            text
-            x-small
-            class="text-caption"
-            @click="
-              isCurrentPath('^\/about') ? $router.push('/about') : '',
-                useInsitePush('#service_terms')
-            "
-            >用户协议</v-btn
-          >
-          <div class="px-1">•</div>
-          <v-btn
-            text
-            x-small
-            class="text-caption"
-            @click="
-              isCurrentPath('^\/about') ? $router.push('/about') : '',
-                useInsitePush('#privacy_policy')
-            "
-            >隐私政策</v-btn
-          >
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <v-dialog
-      v-model="dialog.login"
-      :fullscreen="$vuetify.breakpoint.name === 'xs'"
-      max-width="440"
-      :transition="
-        $vuetify.breakpoint.name === 'xs'
-          ? 'dialog-bottom-transition'
-          : 'scale-transition'
-      "
-      ><Login
-    /></v-dialog>
-    <v-dialog
-      v-model="dialog.register"
-      :fullscreen="$vuetify.breakpoint.name === 'xs'"
-      max-width="440"
-      :transition="
-        $vuetify.breakpoint.name === 'xs'
-          ? 'dialog-bottom-transition'
-          : 'scale-transition'
-      "
-      ><Register
-    /></v-dialog>
-  </v-app-bar>
-</template>
-
-<script>
-import { reactive, provide, inject, watch } from 'vue';
-import Login from '@/components/users/forms/Login';
-import Register from '@/components/users/forms/Register';
-import useLogout from '@/composables/users/forms/useLogout';
-import useUserName from '@/composables/global/useUserName';
-import useRouteMatch from '@/composables/global/useRouteMatch';
-import useDebounce from '@/composables/global/useDebounce';
-import AvatarContainer from '@/components/users/profile/AvatarContainer';
-import SliderButton from '@/components/global/SliderButton';
-import MobileSearchBar from '@/components/global/MobileSearchBar';
-import useInsitePush from '@/composables/global/useInsitePush';
-import logoDark from '@/assets/logo-white.svg';
-import logoLight from '@/assets/logo.svg';
-
-import {
-  mdiAccount,
-  mdiLoginVariant,
-  mdiLogoutVariant,
-  mdiAccountPlusOutline,
-  mdiAccountOutline,
-  mdiMessageAlertOutline,
-  mdiMagnify,
-} from '@mdi/js';
-
-export default {
-  components: {
-    Login,
-    Register,
-    AvatarContainer,
-    SliderButton,
-    MobileSearchBar,
-  },
-  setup() {
-    const { doLogout } = useLogout();
-    const { isCurrentPath } = useRouteMatch();
-
-    const dialog = reactive({
-      login: false,
-      register: false,
-    });
-
-    provide('closeDialog', (type) => (dialog[type] = false));
-    provide('openDialog', (type) => (dialog[type] = true));
-
-    const global = inject('global'); // global status
-    const searchInput = inject('searchInput');
-
-    const status = reactive({
-      searchString: '',
-    });
-
-    watch(
-      () => status.searchString,
-      () => {
-        useDebounce((searchString) => {
-          const searchRawString = (() => {
-            if (searchString.startsWith('regexp:')) {
-              searchInput.isRegexp = true;
-              return searchString.slice(7).trim();
-            } else {
-              searchInput.isRegexp = false;
-              return searchString.trim();
-            }
-          })();
-          searchInput.keys = searchRawString
-            .split(' ')
-            .filter((item) => item !== '');
-        })(status.searchString);
-      },
-    );
-
-    return {
-      global,
-      dialog,
-      doLogout,
-      useUserName,
-      isCurrentPath,
-      useInsitePush,
-      logoDark,
-      logoLight,
-      status,
-    };
-  },
-  data() {
-    return {
-      icons: {
-        mdiAccount,
-        mdiLoginVariant,
-        mdiLogoutVariant,
-        mdiAccountPlusOutline,
-        mdiAccountOutline,
-        mdiMessageAlertOutline,
-        mdiMagnify,
-      },
-    };
-  },
-  computed: {
-    // Some customized fix, only for search bar so no need to abstract
-
-    adoptiveSearchBarWidth() {
-      if (this.$vuetify.breakpoint.width >= 1680) {
-        return '720px';
-      } else if (this.$vuetify.breakpoint.mdOnly) {
-        return `calc(${
-          Math.min(
-            this.$vuetify.breakpoint.width - (this.global.isLogin ? 550 : 750),
-            720,
-          ) + 45
-        }px)`;
-      } else if (this.$vuetify.breakpoint.lgAndUp) {
-        return `calc(${Math.min(
-          this.$vuetify.breakpoint.width - (this.global.isLogin ? 450 : 594),
-          564,
-        )}px)`;
-      } else {
-        return `calc(${
-          this.$vuetify.breakpoint.width -
-          (this.global.isLogin ? 250 : 450) +
-          10
-        }px)`;
-      }
-    },
-
-    adoptiveSearchBarClass() {
-      if (this.$vuetify.breakpoint.width >= 1680) {
-        return 'search-bar-large';
-      } else if (this.$vuetify.breakpoint.mdAndUp) {
-        return 'search-bar-medium pl-lg-1';
-      } else {
-        return '';
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.overflow-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.search-bar-large {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-
-.search-bar-medium {
-}
-</style>
+<template>
+  <v-app-bar
+    app
+    :color="$vuetify.theme.dark ? '' : 'white'"
+    elevate-on-scroll
+    elevation="3"
+  >
+    <v-app-bar-nav-icon
+      @click="menuBarStatus.drawer = true"
+      v-if="$vuetify.breakpoint.xsOnly"
+    />
+
+    <v-toolbar-title
+      class="px-md-8 px-sm-4"
+      @click="isCurrentPath('^\/$') ? $router.push('/') : ''"
+      :style="{
+        cursor: 'pointer',
+        width: $vuetify.breakpoint.xsOnly ? '250px' : 'auto',
+      }"
+      v-if="$vuetify.breakpoint.xsOnly || $vuetify.breakpoint.mdAndUp"
+    >
+      <img
+        :src="$vuetify.theme.dark ? logoDark : logoLight"
+        :width="$vuetify.breakpoint.xsOnly ? 'auto' : 139.61"
+        style="max-width: 139.61px"
+        alt=""
+      />
+    </v-toolbar-title>
+    <div
+      class="d-flex"
+      style="height: calc(100% + 8px)"
+      v-if="!$vuetify.breakpoint.xsOnly"
+    >
+      <SliderButton
+        tile
+        plain
+        height="100%"
+        :hover-only="isCurrentPath('^\/$')"
+        to="/"
+        class="px-1 black--text"
+      >
+        全部课程
+      </SliderButton>
+      <!-- <SliderButton
+        plain
+        tile
+        height="100%"
+        :hover-only="isCurrentPath('^\/course\/[0-9]+$')"
+        to="/course/1"
+        class="px-1"
+      >
+        课程详情
+      </SliderButton> -->
+      <SliderButton
+        plain
+        tile
+        height="100%"
+        :hover-only="isCurrentPath('^\/recent$')"
+        to="/recent"
+        class="px-1"
+      >
+        最近评价
+      </SliderButton>
+      <SliderButton
+        plain
+        tile
+        height="100%"
+        :hover-only="isCurrentPath('^\/ranking')"
+        to="/ranking"
+        class="px-1"
+      >
+        赏金排名
+      </SliderButton>
+      <SliderButton
+        plain
+        tile
+        height="100%"
+        :hover-only="isCurrentPath('^\/about')"
+        to="/about"
+        class="px-1"
+      >
+        关于我们
+      </SliderButton>
+    </div>
+    <div
+      :class="adoptiveSearchBarClass"
+      :style="{
+        width: adoptiveSearchBarWidth,
+      }"
+    >
+      <v-text-field
+        hide-details
+        solo
+        flat
+        :background-color="$vuetify.theme.dark ? '#3c4043' : '#F1F3F4'"
+        :prepend-inner-icon="icons.mdiMagnify"
+        ref="searchBar"
+        @blur="isCurrentPath('^\/$') ? $router.push('/') : ''"
+        @keydown.enter="
+          $refs.searchBar.blur(), isCurrentPath('^\/$') ? $router.push('/') : ''
+        "
+        v-if="$vuetify.breakpoint.smAndUp"
+        placeholder="以空格间隔关键字或以regexp:开头输入正则表达式"
+        v-model="status.searchString"
+      >
+      </v-text-field>
+    </div>
+    <v-spacer></v-spacer>
+    <MobileSearchBar
+      v-model="status.searchString"
+      v-if="$vuetify.breakpoint.xsOnly"
+    />
+    <v-btn
+      color="primary"
+      class="px-sm-8"
+      @click="dialog.login = true"
+      v-if="!global.isLogin"
+      elevation="0"
+    >
+      登录
+    </v-btn>
+    <v-btn
+      class="px-sm-8 ml-4 mr-md-8 mr-sm-3"
+      @click="dialog.register = true"
+      v-if="!global.isLogin"
+      elevation="0"
+    >
+      注册
+    </v-btn>
+    <v-menu left bottom offset-y transition="slide-y-transition" v-else>
+      <template #activator="{ on }">
+        <v-btn v-on="on" icon>
+          <AvatarContainer
+            small
+            size="38"
+            :name="useUserName(global.userProfile)"
+            slice
+            style="transform: translate(-1px, 0)"
+            :src="global.userProfile.avatar"
+          />
+        </v-btn>
+      </template>
+      <v-list close-on-click width="340px">
+        <v-list-item class="py-4 px-8 d-block">
+          <div class="d-flex justify-center over">
+            <AvatarContainer
+              size="80"
+              font-size="text-h4"
+              :name="useUserName(global.userProfile)"
+              slice
+              :src="global.userProfile.avatar"
+            />
+          </div>
+          <div class="d-flex justify-center">
+            <div class="overflow-ellipsis font-weight-bold pt-4">
+              {{ useUserName(global.userProfile) }}
+            </div>
+          </div>
+          <div class="d-flex justify-center">
+            <div
+              class="text-body-2 text--darken-1 grey--text overflow-ellipsis py-1"
+            >
+              {{ global.userProfile.email }}
+            </div>
+          </div>
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item link :to="`/user/${global.userProfile.id}`" class="px-8">
+          <v-list-item-icon>
+            <v-icon>{{ icons.mdiAccountOutline }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title class="text-body-1">个人中心</v-list-item-title>
+        </v-list-item>
+        <v-list-item link to="" class="px-8">
+          <v-list-item-icon>
+            <v-icon>{{ icons.mdiMessageAlertOutline }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title
+            class="text-body-1"
+            @click="
+              isCurrentPath('^\/about') ? $router.push('/about') : '',
+                useInsitePush('#bug_report')
+            "
+            >反馈</v-list-item-title
+          >
+        </v-list-item>
+        <v-list-item link @click="doLogout()" class="px-8">
+          <v-list-item-icon>
+            <v-icon>{{ icons.mdiLogoutVariant }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title class="text-body-1">注销</v-list-item-title>
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item class="d-flex justify-center">
+          <v-btn
+            text
+            x-small
+            class="text-caption"
+            @click="
+              isCurrentPath('^\/about') ? $router.push('/about') : '',
+                useInsitePush('#service_terms')
+            "
+            >用户协议</v-btn
+          >
+          <div class="px-1">•</div>
+          <v-btn
+            text
+            x-small
+            class="text-caption"
+            @click="
+              isCurrentPath('^\/about') ? $router.push('/about') : '',
+                useInsitePush('#privacy_policy')
+            "
+            >隐私政策</v-btn
+          >
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-dialog
+      v-model="dialog.login"
+      :fullscreen="$vuetify.breakpoint.name === 'xs'"
+      max-width="440"
+      :transition="
+        $vuetify.breakpoint.name === 'xs'
+          ? 'dialog-bottom-transition'
+          : 'scale-transition'
+      "
+      ><Login
+    /></v-dialog>
+    <v-dialog
+      v-model="dialog.register"
+      :fullscreen="$vuetify.breakpoint.name === 'xs'"
+      max-width="440"
+      :transition="
+        $vuetify.breakpoint.name === 'xs'
+          ? 'dialog-bottom-transition'
+          : 'scale-transition'
+      "
+      ><Register
+    /></v-dialog>
+  </v-app-bar>
+</template>
+
+<script>
+import { reactive, provide, inject, watch } from 'vue';
+import Login from '@/components/users/forms/Login';
+import Register from '@/components/users/forms/Register';
+import useLogout from '@/composables/users/forms/useLogout';
+import useUserName from '@/composables/global/useUserName';
+import useRouteMatch from '@/composables/global/useRouteMatch';
+import useDebounce from '@/composables/global/useDebounce';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import SliderButton from '@/components/global/SliderButton';
+import MobileSearchBar from '@/components/global/MobileSearchBar';
+import useInsitePush from '@/composables/global/useInsitePush';
+import logoDark from '@/assets/logo-white.svg';
+import logoLight from '@/assets/logo.svg';
+
+import {
+  mdiAccount,
+  mdiLoginVariant,
+  mdiLogoutVariant,
+  mdiAccountPlusOutline,
+  mdiAccountOutline,
+  mdiMessageAlertOutline,
+  mdiMagnify,
+} from '@mdi/js';
+
+export default {
+  components: {
+    Login,
+    Register,
+    AvatarContainer,
+    SliderButton,
+    MobileSearchBar,
+  },
+  setup() {
+    const { doLogout } = useLogout();
+    const { isCurrentPath } = useRouteMatch();
+
+    const dialog = reactive({
+      login: false,
+      register: false,
+    });
+
+    provide('closeDialog', (type) => (dialog[type] = false));
+    provide('openDialog', (type) => (dialog[type] = true));
+
+    const menuBarStatus = inject('menu');
+    const global = inject('global'); // global status
+    const searchInput = inject('searchInput');
+
+    const status = reactive({
+      searchString: '',
+    });
+
+    watch(
+      () => status.searchString,
+      () => {
+        useDebounce((searchString) => {
+          const searchRawString = (() => {
+            if (searchString.startsWith('regexp:')) {
+              searchInput.isRegexp = true;
+              return searchString.slice(7).trim();
+            } else {
+              searchInput.isRegexp = false;
+              return searchString.trim();
+            }
+          })();
+          searchInput.keys = searchRawString
+            .split(' ')
+            .filter((item) => item !== '');
+        })(status.searchString);
+      },
+    );
+
+    return {
+      global,
+      dialog,
+      doLogout,
+      useUserName,
+      isCurrentPath,
+      useInsitePush,
+      logoDark,
+      logoLight,
+      status,
+      menuBarStatus,
+    };
+  },
+  data() {
+    return {
+      icons: {
+        mdiAccount,
+        mdiLoginVariant,
+        mdiLogoutVariant,
+        mdiAccountPlusOutline,
+        mdiAccountOutline,
+        mdiMessageAlertOutline,
+        mdiMagnify,
+      },
+    };
+  },
+  computed: {
+    // Some customized fix, only for search bar so no need to abstract
+
+    adoptiveSearchBarWidth() {
+      if (this.$vuetify.breakpoint.width >= 1680) {
+        return '720px';
+      } else if (this.$vuetify.breakpoint.mdOnly) {
+        return `calc(${
+          Math.min(
+            this.$vuetify.breakpoint.width - (this.global.isLogin ? 700 : 955),
+            720,
+          ) + 45
+        }px)`;
+      } else if (this.$vuetify.breakpoint.lgAndUp) {
+        return `calc(${Math.min(
+          this.$vuetify.breakpoint.width - (this.global.isLogin ? 450 : 894),
+          564,
+        )}px)`;
+      } else {
+        return `calc(${
+          this.$vuetify.breakpoint.width -
+          (this.global.isLogin ? 250 : 450) +
+          10
+        }px)`;
+      }
+    },
+
+    adoptiveSearchBarClass() {
+      if (this.$vuetify.breakpoint.width >= 1680) {
+        return 'search-bar-large';
+      } else if (this.$vuetify.breakpoint.mdAndUp) {
+        return 'search-bar-medium pl-lg-1';
+      } else {
+        return '';
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.overflow-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-bar-large {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.search-bar-medium {
+}
+</style>
diff --git a/src/components/global/InsiderBanner.vue b/src/components/global/InsiderBanner.vue
index 70c613d..36ec849 100644
--- a/src/components/global/InsiderBanner.vue
+++ b/src/components/global/InsiderBanner.vue
@@ -1,35 +1,33 @@
-<template>
-  <div
-    class="d-flex justify-center insider-banner"
-    :style="{
-      'background-color': $vuetify.theme.dark ? '#2a4165' : '#e8f0fe',
-    }"
-    v-if="Config.buildMode != 'Release'"
-  >
-    <div class="d-flex justify-center flex-column">
-      <div class="text-body-1 primary--text">
-        CourseBench {{ Config.buildMode }}, Build {{ Config.buildVersion }}
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Config from "Config"
-
-export default {
-  setup() {
-    
-    return { Config }
-  },
-}
-
-</script>
-<style scoped>
-.insider-banner {
-  height: 48px;
-
-  position: absolute;
-  width: 100%;
-  /* opacity: 0.9; */
-}
-</style>
\ No newline at end of file
+<template>
+  <div
+    class="d-flex justify-center insider-banner"
+    :style="{
+      'background-color': $vuetify.theme.dark ? '#2a4165' : '#e8f0fe',
+    }"
+    v-if="Config.buildMode != 'Release'"
+  >
+    <div class="d-flex justify-center flex-column">
+      <div class="text-body-1 primary--text">
+        CourseBench {{ Config.buildMode }}, Build {{ Config.buildVersion }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Config from 'Config';
+
+export default {
+  setup() {
+    return { Config };
+  },
+};
+</script>
+<style scoped>
+.insider-banner {
+  height: 48px;
+
+  position: absolute;
+  width: 100%;
+  /* opacity: 0.9; */
+}
+</style>
diff --git a/src/components/global/MenuSideBar.vue b/src/components/global/MenuSideBar.vue
new file mode 100755
index 0000000..3811208
--- /dev/null
+++ b/src/components/global/MenuSideBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-navigation-drawer v-model="menuBarStatus.drawer" absolute>
+    <v-list nav dense>
+      <v-list-item-group
+        v-model="model"
+        active-class="blue--text text--accent-4"
+      >
+        <v-list-item to="/" v-if="$vuetify.breakpoint.xsOnly">
+          <v-list-item-title
+            plain
+            tile
+            :hover-only="isCurrentPath('^\/$')"
+            class="px-1"
+          >
+            全部课程
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item to="/recent" v-if="$vuetify.breakpoint.lgAndDown">
+          <v-list-item-title
+            plain
+            tile
+            height="100%"
+            :hover-only="isCurrentPath('^\/recent')"
+            class="px-1"
+          >
+            最近评价
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item to="/ranking" v-if="$vuetify.breakpoint.smAndDown">
+          <v-list-item-title
+            plain
+            tile
+            height="100%"
+            :hover-only="isCurrentPath('^\/ranking')"
+            class="px-1"
+          >
+            赏金排名
+          </v-list-item-title>
+        </v-list-item>
+
+        <v-list-item to="/about" v-if="$vuetify.breakpoint.xsOnly">
+          <v-list-item-title
+            plain
+            tile
+            height="100%"
+            :hover-only="isCurrentPath('^\/about')"
+            class="px-1"
+          >
+            关于我们
+          </v-list-item-title>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import useRouteMatch from '@/composables/global/useRouteMatch';
+import useMenuBar from '@/composables/global/useMenuBar';
+
+export default {
+  setup() {
+    const { isCurrentPath } = useRouteMatch();
+    const { menuBarStatus } = useMenuBar();
+    return {
+      menuBarStatus,
+      isCurrentPath,
+    };
+  },
+  data() {
+    return {
+      model: null,
+    };
+  },
+};
+</script>
diff --git a/src/components/global/MobileSearchBar.vue b/src/components/global/MobileSearchBar.vue
index 3e0ff33..86ded43 100755
--- a/src/components/global/MobileSearchBar.vue
+++ b/src/components/global/MobileSearchBar.vue
@@ -1,67 +1,68 @@
-<template>
-  <div>
-    <div>
-      <v-btn icon @click="status.showSearchBar = true">
-        <v-icon>{{ icons.mdiMagnify }}</v-icon>
-      </v-btn>
-    </div>
-    <div class="mobile-search-bar" v-if="status.showSearchBar">
-      <v-text-field 
-        hide-details 
-        solo
-        :flat="!status.showSearchBar" 
-        :prepend-inner-icon="icons.mdiMagnify"
-        autofocus
-        @blur="status.showSearchBar = false"
-        @input="$emit('input', $event), isCurrentPath('^\/$') ? $router.push('/') : ''"
-        placeholder="以空格间隔关键字或以regexp:开头输入正则表达式"
-        :value="value"
-      >  
-      </v-text-field>
-    </div>    
-  </div>
-</template>
-<script>
-import { mdiMagnify } from "@mdi/js";
-import { reactive } from 'vue';
-import useRouteMatch from "@/composables/global/useRouteMatch"
-
-export default {
-  setup() {
-    const status = reactive({
-      showSearchBar: false, 
-    })
-
-    const { isCurrentPath } = useRouteMatch()
-
-    return { status, isCurrentPath }
-  }, 
-  data() {
-    return {
-      icons: {
-        mdiMagnify
-      }
-    }
-  }, 
-  model: {
-    prop: 'value',
-    event: 'input'
-  }, 
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  }
-}
-
-</script>
-<style scoped>
-.mobile-search-bar {
-  position: absolute;
-  top: 4px;
-  z-index: 99;
-  left: 16px;
-  width: calc(100% - 32px);
-}
-</style>
\ No newline at end of file
+<template>
+  <div>
+    <div>
+      <v-btn icon @click="status.showSearchBar = true">
+        <v-icon>{{ icons.mdiMagnify }}</v-icon>
+      </v-btn>
+    </div>
+    <div class="mobile-search-bar" v-if="status.showSearchBar">
+      <v-text-field
+        hide-details
+        solo
+        :flat="!status.showSearchBar"
+        :prepend-inner-icon="icons.mdiMagnify"
+        autofocus
+        @blur="status.showSearchBar = false"
+        @input="
+          $emit('input', $event), isCurrentPath('^\/$') ? $router.push('/') : ''
+        "
+        placeholder="以空格间隔关键字或以regexp:开头输入正则表达式"
+        :value="value"
+      >
+      </v-text-field>
+    </div>
+  </div>
+</template>
+<script>
+import { mdiMagnify } from '@mdi/js';
+import { reactive } from 'vue';
+import useRouteMatch from '@/composables/global/useRouteMatch';
+
+export default {
+  setup() {
+    const status = reactive({
+      showSearchBar: false,
+    });
+
+    const { isCurrentPath } = useRouteMatch();
+
+    return { status, isCurrentPath };
+  },
+  data() {
+    return {
+      icons: {
+        mdiMagnify,
+      },
+    };
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style scoped>
+.mobile-search-bar {
+  position: absolute;
+  top: 4px;
+  z-index: 99;
+  left: 16px;
+  width: calc(100% - 32px);
+}
+</style>
diff --git a/src/components/global/Nothing.vue b/src/components/global/Nothing.vue
index 99e3bab..c61699c 100755
--- a/src/components/global/Nothing.vue
+++ b/src/components/global/Nothing.vue
@@ -1,33 +1,33 @@
-<template>
-  <div>
-    <div class="d-flex justify-center">
-      <v-icon size="56">{{ statics.icons.mdiAlertDecagram }}</v-icon>
-    </div>
-    <div class="d-flex justify-center pt-3">
-      <div class="text-h6 font-weight-bold grey--text text--darken-2">
-        {{ text }}
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mdiAlertDecagram } from "@mdi/js";
-
-export default {
-  setup() {
-    const statics = {
-      icons: {
-        mdiAlertDecagram,
-      },
-    };
-
-    return { statics }
-  },
-  props: {
-    text: {
-      type: String,
-      default: "这里什么都没有...",
-    },
-  }
-};
-</script>
\ No newline at end of file
+<template>
+  <div>
+    <div class="d-flex justify-center">
+      <v-icon size="56">{{ statics.icons.mdiAlertDecagram }}</v-icon>
+    </div>
+    <div class="d-flex justify-center pt-3">
+      <div class="text-h6 font-weight-bold grey--text text--darken-2">
+        {{ text }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mdiAlertDecagram } from '@mdi/js';
+
+export default {
+  setup() {
+    const statics = {
+      icons: {
+        mdiAlertDecagram,
+      },
+    };
+
+    return { statics };
+  },
+  props: {
+    text: {
+      type: String,
+      default: '这里什么都没有...',
+    },
+  },
+};
+</script>
diff --git a/src/components/global/SliderButton.vue b/src/components/global/SliderButton.vue
index 522b63a..fe2f534 100644
--- a/src/components/global/SliderButton.vue
+++ b/src/components/global/SliderButton.vue
@@ -1,235 +1,233 @@
-<template>
-  <v-hover v-slot="{ hover }" style="height: 100%">
-    <div>
-      <v-btn
-        :absolute="absolute"
-        :append="append"
-        :block="block"
-        :bottom="bottom"
-        :color="color"
-        :dark="dark"
-        :depressed="depressed"
-        :disabled="disabled"
-        :elevation="elevation"
-        :fab="fab"
-        :fixed="fixed"
-        :height="height ? `calc(${height} - 2px)` : height"
-        :href="href"
-        :large="large"
-        :left="left"
-        :light="light"
-        :loading="loading"
-        :max-height="maxHeight"
-        :max-width="maxWidth"
-        :min-height="minHeight"
-        :min-width="minWidth"
-        :outlined="outlined"
-        :plain="plain"
-        :replace="replace"
-        :retain-focus-on-click="retainFocusOnClick"
-        :right="right"
-        :rounded="rounded"
-        :shaped="shaped"
-        :small="small"
-        :tag="tag"
-        :text="text"
-        :tile="tile"
-        :to="to"
-        :top="top"
-        :width="width"
-        :x-large="xLarge"
-        :x-small="xSmall"
-        :class="[ fontSize ]"
-      >
-        <slot></slot>
-      </v-btn>
-      <div class="d-flex justify-center">
-        <div :style="{ 'height': '2px', 'width': sliderWidth }">
-          <v-fade-transition>
-            <div class="button-slider" v-if="hoverOnly ? hover : true"></div>
-          </v-fade-transition>
-        </div>
-      </div>
-    </div>
-  </v-hover>
-</template>
-<script>
-
-export default {
-  name: "SliderButton",
-  props: {
-    absolute: {
-      type: Boolean,
-      default: false
-    },
-    append: {
-      type: Boolean,
-      default: false
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    bottom: {
-      type: Boolean,
-      default: false
-    },
-    color: {
-      type: String,
-      default: undefined
-    },
-    dark: {
-      type: Boolean,
-      default: false
-    },
-    depressed: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    elevation: {
-      type: [Number, String],
-      default: undefined
-    },
-    fab: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    height: {
-      type: [Number, String],
-      default: undefined
-    }, 
-    href: {
-      type: String,
-      default: undefined
-    },
-    large: {
-      type: Boolean,
-      default: false
-    },
-    left: {
-      type: Boolean,
-      default: false
-    },
-    light: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    "max-height": {
-      type: [Number, String],
-      default: undefined
-    },
-    "max-width": {
-      type: [Number, String],
-      default: undefined
-    },
-    "min-height": {
-      type: [Number, String],
-      default: undefined
-    },
-    "min-width": {
-      type: [Number, String],
-      default: undefined
-    },
-    outlined: {
-      type: Boolean,
-      default: false
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    replace: {
-      type: Boolean,
-      default: false
-    },
-    "retain-focus-on-click": {
-      type: Boolean,
-      default: false
-    },
-    right: {
-      type: Boolean,
-      default: false
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    },
-    shaped: {
-      type: Boolean,
-      default: false
-    },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    tag: {
-      type: String,
-      default: "button"
-    },
-    text: {
-      type: Boolean,
-      default: false
-    },
-    tile: {
-      type: Boolean,
-      default: false
-    },
-    to: {
-      type: [String, Object],
-      default: undefined
-    },
-    top: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: [Number, String],
-      default: undefined
-    },
-    "x-large": {
-      type: Boolean,
-      default: false
-    },
-    "x-small": {
-      type: Boolean,
-      default: false
-    },
-    "hover-only": {
-      type: Boolean,
-      default: false
-    },
-    "slider-width": {
-      type: [Number, String],
-      default: "100%"
-    }, 
-    "font-size": {
-      type: String,
-      default: ""
-    }
-  }
-}
-
-</script>
-<style scoped>
-.button-slider {
-  background-color: #1976D2;
-  height: 100%;
-  width: 100%;
-}
-</style>
\ No newline at end of file
+<template>
+  <v-hover v-slot="{ hover }" style="height: 100%">
+    <div>
+      <v-btn
+        :absolute="absolute"
+        :append="append"
+        :block="block"
+        :bottom="bottom"
+        :color="color"
+        :dark="dark"
+        :depressed="depressed"
+        :disabled="disabled"
+        :elevation="elevation"
+        :fab="fab"
+        :fixed="fixed"
+        :height="height ? `calc(${height} - 2px)` : height"
+        :href="href"
+        :large="large"
+        :left="left"
+        :light="light"
+        :loading="loading"
+        :max-height="maxHeight"
+        :max-width="maxWidth"
+        :min-height="minHeight"
+        :min-width="minWidth"
+        :outlined="outlined"
+        :plain="plain"
+        :replace="replace"
+        :retain-focus-on-click="retainFocusOnClick"
+        :right="right"
+        :rounded="rounded"
+        :shaped="shaped"
+        :small="small"
+        :tag="tag"
+        :text="text"
+        :tile="tile"
+        :to="to"
+        :top="top"
+        :width="width"
+        :x-large="xLarge"
+        :x-small="xSmall"
+        :class="[fontSize]"
+      >
+        <slot></slot>
+      </v-btn>
+      <div class="d-flex justify-center">
+        <div :style="{ height: '2px', width: sliderWidth }">
+          <v-fade-transition>
+            <div class="button-slider" v-if="hoverOnly ? hover : true"></div>
+          </v-fade-transition>
+        </div>
+      </div>
+    </div>
+  </v-hover>
+</template>
+<script>
+export default {
+  name: 'SliderButton',
+  props: {
+    absolute: {
+      type: Boolean,
+      default: false,
+    },
+    append: {
+      type: Boolean,
+      default: false,
+    },
+    block: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: undefined,
+    },
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    depressed: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    elevation: {
+      type: [Number, String],
+      default: undefined,
+    },
+    fab: {
+      type: Boolean,
+      default: false,
+    },
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: [Number, String],
+      default: undefined,
+    },
+    href: {
+      type: String,
+      default: undefined,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    link: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    'max-height': {
+      type: [Number, String],
+      default: undefined,
+    },
+    'max-width': {
+      type: [Number, String],
+      default: undefined,
+    },
+    'min-height': {
+      type: [Number, String],
+      default: undefined,
+    },
+    'min-width': {
+      type: [Number, String],
+      default: undefined,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    plain: {
+      type: Boolean,
+      default: false,
+    },
+    replace: {
+      type: Boolean,
+      default: false,
+    },
+    'retain-focus-on-click': {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    shaped: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    text: {
+      type: Boolean,
+      default: false,
+    },
+    tile: {
+      type: Boolean,
+      default: false,
+    },
+    to: {
+      type: [String, Object],
+      default: undefined,
+    },
+    top: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: [Number, String],
+      default: undefined,
+    },
+    'x-large': {
+      type: Boolean,
+      default: false,
+    },
+    'x-small': {
+      type: Boolean,
+      default: false,
+    },
+    'hover-only': {
+      type: Boolean,
+      default: false,
+    },
+    'slider-width': {
+      type: [Number, String],
+      default: '100%',
+    },
+    'font-size': {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style scoped>
+.button-slider {
+  background-color: #1976d2;
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/src/components/teachers/course/CourseCard.vue b/src/components/teachers/course/CourseCard.vue
index 3a13e0f..26a6785 100644
--- a/src/components/teachers/course/CourseCard.vue
+++ b/src/components/teachers/course/CourseCard.vue
@@ -1,149 +1,163 @@
-<template>
-  <v-lazy class="px-3">
-    <div :style="{ width: width }">
-      <v-card class="mb-3" flat height="303" outlined>
-        <v-container>
-          <v-row class="d-flex justify-space-between">
-            <v-col class="d-flex justify-space-between">
-              <div style="transform: translate(8px, 0)">
-                <AvatarContainer
-                  :name="instituteInfo[course.institute].name"
-                  :color="instituteInfo[course.institute].color"
-                  :font-size="
-                    instituteInfo[course.institute].name.length > 4
-                      ? 'text-body-2'
-                      : 'text-body-1'
-                  "
-                  size="45"
-                />
-              </div>
-              <div class="pr-2">
-                <div class="text-caption">{{ course.code }}</div>
-                <div class="text-caption" style="text-align: end">
-                  {{ course.credit }}学分
-                </div>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-        <v-container>
-          <v-row>
-            <v-col cols="12" class="pt-0">
-              <div
-                @click="$router.push(`/course/${course.id}`)"
-                class="router-container d-flex"
-              >
-                <div>
-                  <div style="transform: translate(0, -2px)" class="pr-2">
-                    <v-icon size="20">
-                      {{ statics.icons.mdiSchool }}
-                    </v-icon>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="justify-start text-body-1 font-weight-bold overflow"
-                  >
-                    {{ course.name }}
-                  </div>
-                </div>
-              </div>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <div v-for="index in judgeItems.length" :key="index">
-                <div
-                  :class="[
-                    'd-flex',
-                    'justify-space-between',
-                    'px-2',
-                    index !== 1 ? 'py-3' : 'pb-3',
-                  ]"
-                >
-                  <div class="text-body-2" style="min-width: 57px">
-                    {{ judgeItems[index - 1] }}
-                  </div>
-                  <div style="width: 64%" class="px-0 px-sm-1 px-md-0">
-                    <v-progress-linear
-                      v-model="course.comment_num < enoughDataThreshold ? 0 : course.score[index - 1] * 20"
-                      :color="scoreInfo[roundedScore[index - 1]].color"
-                      class="mt-2"
-                      style="pointer-events: none"
-                    >
-                    </v-progress-linear>
-                  </div>
-                  <div>
-                    <v-chip
-                      x-small
-                      label
-                      :color="scoreInfo[roundedScore[index - 1]].color"
-                      class="px-1 mt-n2"
-                    >
-                      <span class="text-caption white--text">{{
-                        scoreInfo[roundedScore[index - 1]].label
-                      }}</span>
-                    </v-chip>
-                  </div>
-                </div>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </div>
-  </v-lazy>
-</template>
-<script>
-import useCourseCard from "@/composables/teachers/course/useCourseCard";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import {
-  judgeItems,
-  instituteInfo,
-  scoreInfo,
-} from "@/composables/global/useStaticData";
-import { roundScore, enoughDataThreshold } from "@/composables/global/useParseScore";
-
-export default {
-  setup() {
-    const { statics } = useCourseCard();
-    return { statics, judgeItems, roundScore, instituteInfo, scoreInfo, enoughDataThreshold };
-  },
-  data() {
-    return {
-      roundedScore: new Array(),
-    };
-  },
-  props: {
-    course: {
-      type: Object,
-      required: true,
-    },
-    width: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    AvatarContainer,
-  },
-  created() {
-    for (let score of this.course.score) {
-      let rounded = this.roundScore(score, this.course["comment_num"]);
-      this.roundedScore.push(rounded);
-    }
-  },
-};
-</script>
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-}
-</style>
+<template>
+  <v-lazy class="px-3">
+    <div :style="{ width: width }">
+      <v-card class="mb-3" flat height="303" outlined>
+        <v-container>
+          <v-row class="d-flex justify-space-between">
+            <v-col class="d-flex justify-space-between">
+              <div style="transform: translate(8px, 0)">
+                <AvatarContainer
+                  :name="instituteInfo[course.institute].name"
+                  :color="instituteInfo[course.institute].color"
+                  :font-size="
+                    instituteInfo[course.institute].name.length > 4
+                      ? 'text-body-2'
+                      : 'text-body-1'
+                  "
+                  size="45"
+                />
+              </div>
+              <div class="pr-2">
+                <div class="text-caption">{{ course.code }}</div>
+                <div class="text-caption" style="text-align: end">
+                  {{ course.credit }}学分
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-container>
+          <v-row>
+            <v-col cols="12" class="pt-0">
+              <div
+                @click="$router.push(`/course/${course.id}`)"
+                class="router-container d-flex"
+              >
+                <div>
+                  <div style="transform: translate(0, -2px)" class="pr-2">
+                    <v-icon size="20">
+                      {{ statics.icons.mdiSchool }}
+                    </v-icon>
+                  </div>
+                </div>
+                <div>
+                  <div
+                    class="justify-start text-body-1 font-weight-bold overflow"
+                  >
+                    {{ course.name }}
+                  </div>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <div v-for="index in judgeItems.length" :key="index">
+                <div
+                  :class="[
+                    'd-flex',
+                    'justify-space-between',
+                    'px-2',
+                    index !== 1 ? 'py-3' : 'pb-3',
+                  ]"
+                >
+                  <div class="text-body-2" style="min-width: 57px">
+                    {{ judgeItems[index - 1] }}
+                  </div>
+                  <div style="width: 64%" class="px-0 px-sm-1 px-md-0">
+                    <v-progress-linear
+                      v-model="
+                        course.comment_num < enoughDataThreshold
+                          ? 0
+                          : course.score[index - 1] * 20
+                      "
+                      :color="scoreInfo[roundedScore[index - 1]].color"
+                      class="mt-2"
+                      style="pointer-events: none"
+                    >
+                    </v-progress-linear>
+                  </div>
+                  <div>
+                    <v-chip
+                      x-small
+                      label
+                      :color="scoreInfo[roundedScore[index - 1]].color"
+                      class="px-1 mt-n2"
+                    >
+                      <span class="text-caption white--text">{{
+                        scoreInfo[roundedScore[index - 1]].label
+                      }}</span>
+                    </v-chip>
+                  </div>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </div>
+  </v-lazy>
+</template>
+<script>
+import useCourseCard from '@/composables/teachers/course/useCourseCard';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import {
+  judgeItems,
+  instituteInfo,
+  scoreInfo,
+} from '@/composables/global/useStaticData';
+import {
+  roundScore,
+  enoughDataThreshold,
+} from '@/composables/global/useParseScore';
+
+export default {
+  setup() {
+    const { statics } = useCourseCard();
+    return {
+      statics,
+      judgeItems,
+      roundScore,
+      instituteInfo,
+      scoreInfo,
+      enoughDataThreshold,
+    };
+  },
+  data() {
+    return {
+      roundedScore: new Array(),
+    };
+  },
+  props: {
+    course: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    AvatarContainer,
+  },
+  created() {
+    for (let score of this.course.score) {
+      let rounded = this.roundScore(score, this.course['comment_num']);
+      this.roundedScore.push(rounded);
+    }
+  },
+};
+</script>
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/teachers/course/StatisticCard.vue b/src/components/teachers/course/StatisticCard.vue
index 6ebc9b1..f0a5c4e 100644
--- a/src/components/teachers/course/StatisticCard.vue
+++ b/src/components/teachers/course/StatisticCard.vue
@@ -1,84 +1,84 @@
-<template>
-  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
-    <div
-      class="pt-4"
-      :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }"
-    >
-      <!-- <div class="d-flex justify-space-between pt-2">
-        <div>
-          <v-icon size="18">{{ statics.icons.mdiThumbUpOutline }}</v-icon>
-          <span class="text-sm-subtitle-1 pl-1">获评总数</span>
-        </div>
-        <div class="font-weight-bold" style="width: 16px;">
-          {{ courseStatistic.score }}
-        </div>
-      </div> -->
-      <div class="d-flex justify-space-between pt-2">
-        <div>
-          <div>
-            <v-icon size="18">{{ statics.icons.mdiClipboardOutline }}</v-icon>
-            <span class="text-sm-subtitle-1 pl-1">开课总数</span>
-          </div>
-        </div>
-        <div class="font-weight-bold" style="width: 16px">
-          {{ courseStatistic.total }}
-        </div>
-      </div>
-      <div class="d-flex justify-space-between pt-2">
-        <div>
-          <div>
-            <v-icon size="18">{{ statics.icons.mdiClipboardText }}</v-icon>
-            <span class="text-sm-subtitle-1 pl-1">开课统计</span>
-          </div>
-        </div>
-        <div class="transform: translate(0, 1px);">
-          <v-icon @click="status.showAll = true" v-if="!status.showAll">
-            {{ statics.icons.mdiChevronDown }}
-          </v-icon>
-          <v-icon @click="status.showAll = false" v-if="status.showAll">
-            {{ statics.icons.mdiChevronUp }}
-          </v-icon>
-        </div>
-      </div>
-      <v-expand-transition>
-        <div class="pl-2" v-if="status.showAll">
-          <div
-            v-for="(value, key, index) in courseStatistic.count"
-            :key="index"
-          >
-            <div v-if="value">
-              <v-checkbox
-                dense
-                v-model="status.selected"
-                :value="key"
-                hide-details
-              >
-                <template #label>
-                  <div class="d-flex justify-space-between" style="width: 100%">
-                    <div>{{ key }}</div>
-                    <div>{{ value }}节</div>
-                  </div>
-                </template>
-              </v-checkbox>
-            </div>
-          </div>
-        </div>
-      </v-expand-transition>
-    </div>
-  </div>
-</template>
-<script>
-import useStatisticCard from "@/composables/teachers/course/useStatisticCard";
-
-export default {
-  setup() {
-    const { courseStatistic, statics, status } = useStatisticCard();
-    return { courseStatistic, statics, status };
-  },
-  created() {
-    if (this.$vuetify.breakpoint.mdAndDown) {
-      this.status.showAll = false;
-    }
-  },
-};
-</script>
+<template>
+  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
+    <div
+      class="pt-4"
+      :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }"
+    >
+      <!-- <div class="d-flex justify-space-between pt-2">
+        <div>
+          <v-icon size="18">{{ statics.icons.mdiThumbUpOutline }}</v-icon>
+          <span class="text-sm-subtitle-1 pl-1">获评总数</span>
+        </div>
+        <div class="font-weight-bold" style="width: 16px;">
+          {{ courseStatistic.score }}
+        </div>
+      </div> -->
+      <div class="d-flex justify-space-between pt-2">
+        <div>
+          <div>
+            <v-icon size="18">{{ statics.icons.mdiClipboardOutline }}</v-icon>
+            <span class="text-sm-subtitle-1 pl-1">开课总数</span>
+          </div>
+        </div>
+        <div class="font-weight-bold" style="width: 16px">
+          {{ courseStatistic.total }}
+        </div>
+      </div>
+      <div class="d-flex justify-space-between pt-2">
+        <div>
+          <div>
+            <v-icon size="18">{{ statics.icons.mdiClipboardText }}</v-icon>
+            <span class="text-sm-subtitle-1 pl-1">开课统计</span>
+          </div>
+        </div>
+        <div class="transform: translate(0, 1px);">
+          <v-icon @click="status.showAll = true" v-if="!status.showAll">
+            {{ statics.icons.mdiChevronDown }}
+          </v-icon>
+          <v-icon @click="status.showAll = false" v-if="status.showAll">
+            {{ statics.icons.mdiChevronUp }}
+          </v-icon>
+        </div>
+      </div>
+      <v-expand-transition>
+        <div class="pl-2" v-if="status.showAll">
+          <div
+            v-for="(value, key, index) in courseStatistic.count"
+            :key="index"
+          >
+            <div v-if="value">
+              <v-checkbox
+                dense
+                v-model="status.selected"
+                :value="key"
+                hide-details
+              >
+                <template #label>
+                  <div class="d-flex justify-space-between" style="width: 100%">
+                    <div>{{ key }}</div>
+                    <div>{{ value }}节</div>
+                  </div>
+                </template>
+              </v-checkbox>
+            </div>
+          </div>
+        </div>
+      </v-expand-transition>
+    </div>
+  </div>
+</template>
+<script>
+import useStatisticCard from '@/composables/teachers/course/useStatisticCard';
+
+export default {
+  setup() {
+    const { courseStatistic, statics, status } = useStatisticCard();
+    return { courseStatistic, statics, status };
+  },
+  created() {
+    if (this.$vuetify.breakpoint.mdAndDown) {
+      this.status.showAll = false;
+    }
+  },
+};
+</script>
diff --git a/src/components/teachers/detail/BackgroundImage.vue b/src/components/teachers/detail/BackgroundImage.vue
index d2755f6..ed7b8df 100644
--- a/src/components/teachers/detail/BackgroundImage.vue
+++ b/src/components/teachers/detail/BackgroundImage.vue
@@ -1,30 +1,41 @@
-<template>
-  <div>
-    <v-img
-      v-if="src !== ''"
-      alt="Background Image"
-      :src="src"
-      :height="$vuetify.breakpoint.xsOnly ? 91 : $vuetify.breakpoint.mdAndDown ? 121 : 211"
-    ></v-img>    
-    <v-sheet
-      v-else
-      :color="color"
-      :height="$vuetify.breakpoint.xsOnly ? 91 : $vuetify.breakpoint.mdAndDown ? 121 : 211"
-    ></v-sheet>
-  </div>
-</template>
-<script>
-
-export default {
-  props: {
-    src: {
-      type: String,
-      default: "", 
-    },
-    color: {
-      type: String,
-      default: "", 
-    },
-  }
-};
-</script>
+<template>
+  <div>
+    <v-img
+      v-if="src !== ''"
+      alt="Background Image"
+      :src="src"
+      :height="
+        $vuetify.breakpoint.xsOnly
+          ? 91
+          : $vuetify.breakpoint.mdAndDown
+          ? 121
+          : 211
+      "
+    ></v-img>
+    <v-sheet
+      v-else
+      :color="color"
+      :height="
+        $vuetify.breakpoint.xsOnly
+          ? 91
+          : $vuetify.breakpoint.mdAndDown
+          ? 121
+          : 211
+      "
+    ></v-sheet>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/src/components/teachers/detail/Detail.vue b/src/components/teachers/detail/Detail.vue
index e1e26db..c574364 100644
--- a/src/components/teachers/detail/Detail.vue
+++ b/src/components/teachers/detail/Detail.vue
@@ -1,60 +1,62 @@
-<template>
-  <div>
-    <div
-      class="d-flex justify-center"
-      :style="{ transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '' }"
-    >
-      <AvatarContainer
-        :name="teacherDetail.name"
-        slice
-        :src="teacherDetail.photo"
-        :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
-        :outlined="$vuetify.breakpoint.mdAndDown"
-      />
-    </div>
-    <div
-      class="d-flex justify-center pt-5"
-      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
-    >
-      <div class="text-h5 font-weight-bold">
-        {{ teacherDetail.name }}
-      </div>
-    </div>
-    <div class="d-flex justify-center pt-3">
-      <div class="grey--text text--darken-2">
-        <span>{{ teacherDetail.job }}</span>
-      </div>
-    </div>
-    <div class="d-flex justify-center pt-3">
-      <div class="grey--text text--darken-2">
-        <span>{{ teacherDetail.institute }}</span>
-      </div>
-    </div>
-    <div class="d-flex justify-center pt-3 px-4">
-      <div class="grey--text text--darken-2 overflow" style="max-width: 750px">
-        <span>{{ teacherDetail.introduction }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import useDetail from "@/composables/teachers/detail/useDetail";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-
-export default {
-  components: { AvatarContainer },
-  setup() {
-    const { teacherDetail } = useDetail();
-    return { teacherDetail };
-  },
-};
-</script>
-
-<style scoped>
-.overflow {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-</style>
+<template>
+  <div>
+    <div
+      class="d-flex justify-center"
+      :style="{
+        transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '',
+      }"
+    >
+      <AvatarContainer
+        :name="teacherDetail.name"
+        slice
+        :src="teacherDetail.photo"
+        :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
+        :outlined="$vuetify.breakpoint.mdAndDown"
+      />
+    </div>
+    <div
+      class="d-flex justify-center pt-5"
+      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
+    >
+      <div class="text-h5 font-weight-bold">
+        {{ teacherDetail.name }}
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-3">
+      <div class="grey--text text--darken-2">
+        <span>{{ teacherDetail.job }}</span>
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-3">
+      <div class="grey--text text--darken-2">
+        <span>{{ teacherDetail.institute }}</span>
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-3 px-4">
+      <div class="grey--text text--darken-2 overflow" style="max-width: 750px">
+        <span>{{ teacherDetail.introduction }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import useDetail from '@/composables/teachers/detail/useDetail';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+
+export default {
+  components: { AvatarContainer },
+  setup() {
+    const { teacherDetail } = useDetail();
+    return { teacherDetail };
+  },
+};
+</script>
+
+<style scoped>
+.overflow {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/teachers/loader/CommentLoader.vue b/src/components/teachers/loader/CommentLoader.vue
index 4a27fc0..6428e3c 100644
--- a/src/components/teachers/loader/CommentLoader.vue
+++ b/src/components/teachers/loader/CommentLoader.vue
@@ -1,81 +1,129 @@
-<template>
-  <v-card class="mb-3" flat :max-width="maxWidth" outlined
-    :style="{
-      width: width, 
-      height: height
-    }"
-  >
-    <div>
-      <div class="px-sm-4 px-2 pt-sm-4 pt-3 pb-sm-3 pb-0">
-        <div class="d-flex justify-space-between">
-          <div 
-            class="d-flex justify-space-between" 
-          >
-            <AvatarContainer
-              color="#e2e2e2"
-              size="38"
-              tile
-            />
-            <div class="pl-2">
-              <!--72.67, an ancient shit magic number-->
-              <v-sheet class="mb-2" color="#e2e2e2" width="72.67px" height="14px"></v-sheet>
-              <v-sheet class="mt-1" color="#e2e2e2" width="120px" height="16px"></v-sheet>
-            </div>          
-          </div>
-          <div class="d-flex justify-end">
-            <div class="d-flex flex-column">
-              <v-sheet color="#e2e2e2" width="92px" height="14px"></v-sheet>
-              <v-sheet class="mt-2" color="#e2e2e2" width="92px" height="14px"></v-sheet>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="pa-sm-4 pa-2 pb-sm-0 py-sm-0">
-        <v-sheet class="my-2" width="270px" height="25px" color="#e2e2e2"></v-sheet>
-      </div>
-      <div>
-        <div class="px-sm-4 px-2 pb-sm-3 pb-2 pt-sm-2">
-          <v-sheet width="100%" class="mt-1 mb-3" height="16px" color="#e2e2e2"></v-sheet>
-          <v-sheet width="80%" class="my-3" height="16px" color="#e2e2e2"></v-sheet>
-          <v-sheet width="90%" class="mb-1 mt-3" height="16px" color="#e2e2e2"></v-sheet>
-        <div class="pt-2">
-          <v-sheet width="30%" class="mb-1 mt-3" height="14px" color="#e2e2e2"></v-sheet>
-        </div>
-        </div>
-        <div class="px-sm-4 px-2">
-          <div>
-            <v-sheet :width="$vuetify.breakpoint.xsOnly ? '100%' : '65%'" class="" height="18px" color="#e2e2e2"></v-sheet>
-          </div>
-          <div class="mt-2" v-if="$vuetify.breakpoint.xsOnly">
-            <v-sheet :width="$vuetify.breakpoint.xsOnly ? '100%' : '65%'" class="" height="18px" color="#e2e2e2"></v-sheet>
-          </div>          
-        </div>
-      </div>
-    </div>    
-  </v-card>
-</template>
-<script>
-import AvatarContainer from "@/components/users/profile/AvatarContainer"
-
-export default {
-  components: {
-    AvatarContainer
-  },
-  props: {
-    width: {
-      type: String,
-      default: '100%',
-    }, 
-    height: {
-      type: String,
-      default: '',
-    },
-    maxWidth: {
-      type: String,
-      default: '800',
-    },
-  }
-}
-</script>
\ No newline at end of file
+<template>
+  <v-card
+    class="mb-3"
+    flat
+    :max-width="maxWidth"
+    outlined
+    :style="{
+      width: width,
+      height: height,
+    }"
+  >
+    <div>
+      <div class="px-sm-4 px-2 pt-sm-4 pt-3 pb-sm-3 pb-0">
+        <div class="d-flex justify-space-between">
+          <div class="d-flex justify-space-between">
+            <AvatarContainer color="#e2e2e2" size="38" tile />
+            <div class="pl-2">
+              <!--72.67, an ancient shit magic number-->
+              <v-sheet
+                class="mb-2"
+                color="#e2e2e2"
+                width="72.67px"
+                height="14px"
+              ></v-sheet>
+              <v-sheet
+                class="mt-1"
+                color="#e2e2e2"
+                width="120px"
+                height="16px"
+              ></v-sheet>
+            </div>
+          </div>
+          <div class="d-flex justify-end">
+            <div class="d-flex flex-column">
+              <v-sheet color="#e2e2e2" width="92px" height="14px"></v-sheet>
+              <v-sheet
+                class="mt-2"
+                color="#e2e2e2"
+                width="92px"
+                height="14px"
+              ></v-sheet>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="pa-sm-4 pa-2 pb-sm-0 py-sm-0">
+        <v-sheet
+          class="my-2"
+          width="270px"
+          height="25px"
+          color="#e2e2e2"
+        ></v-sheet>
+      </div>
+      <div>
+        <div class="px-sm-4 px-2 pb-sm-3 pb-2 pt-sm-2">
+          <v-sheet
+            width="100%"
+            class="mt-1 mb-3"
+            height="16px"
+            color="#e2e2e2"
+          ></v-sheet>
+          <v-sheet
+            width="80%"
+            class="my-3"
+            height="16px"
+            color="#e2e2e2"
+          ></v-sheet>
+          <v-sheet
+            width="90%"
+            class="mb-1 mt-3"
+            height="16px"
+            color="#e2e2e2"
+          ></v-sheet>
+          <div class="pt-2">
+            <v-sheet
+              width="30%"
+              class="mb-1 mt-3"
+              height="14px"
+              color="#e2e2e2"
+            ></v-sheet>
+          </div>
+        </div>
+        <div class="px-sm-4 px-2">
+          <div>
+            <v-sheet
+              :width="$vuetify.breakpoint.xsOnly ? '100%' : '65%'"
+              class=""
+              height="18px"
+              color="#e2e2e2"
+            ></v-sheet>
+          </div>
+          <div class="mt-2" v-if="$vuetify.breakpoint.xsOnly">
+            <v-sheet
+              :width="$vuetify.breakpoint.xsOnly ? '100%' : '65%'"
+              class=""
+              height="18px"
+              color="#e2e2e2"
+            ></v-sheet>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-card>
+</template>
+<script>
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+
+export default {
+  components: {
+    AvatarContainer,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '',
+    },
+    maxWidth: {
+      type: String,
+      default: '800',
+    },
+  },
+};
+</script>
diff --git a/src/components/teachers/loader/CourseLoader.vue b/src/components/teachers/loader/CourseLoader.vue
index 37ac349..7ec8b0d 100644
--- a/src/components/teachers/loader/CourseLoader.vue
+++ b/src/components/teachers/loader/CourseLoader.vue
@@ -1,82 +1,116 @@
-<template>
-  <v-lazy class="px-3">
-    <div :style="{ width: width }">
-      <v-card class="mb-3" flat :height="height" outlined>
-        <v-container v-if="header === 'avatar'">
-          <v-row class="d-flex justify-space-between">
-            <v-col class="d-flex justify-space-between">
-              <div style="transform: translate(8px, 0)">
-                <AvatarContainer color="#e2e2e2" font-size="text-body-1" size="45" />
-              </div>
-              <div class="pr-2">
-                <v-sheet class="my-1" color="#e2e2e2" width="72.67px" height="14px"></v-sheet>
-                <v-sheet class="my-1" color="#e2e2e2" width="72.67px" height="14px"></v-sheet>
-              </div>
-            </v-col>            
-          </v-row>
-        </v-container>
-        <v-container v-else-if="header === 'image'">
-          <v-row class="d-flex justify-space-between">        
-            <v-col class="d-flex justify-space-between pa-0">
-              <v-sheet color="#e2e2e2" width="100%" height="69px"></v-sheet>
-            </v-col>
-          </v-row>
-        </v-container>            
-        <v-container>
-          <v-row>
-            <v-col cols="12" :class="[ header === 'image' ? 'pt-8 pb-2' : 'pt-0' ]">
-              <div class="router-container d-flex">
-                <v-sheet class="my-1 ml-2" color="#e2e2e2" width="160px" height="16px"></v-sheet>
-              </div>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <div v-for="index in header === 'image' ? 3 : 4" :key="index">
-                <div :class="['d-flex', 'justify-space-between', 'px-2', index == 1 ? 'pb-3' : 'py-3']">
-                  <v-sheet class="my-1" color="#e2e2e2" width="100%" height="16px"></v-sheet>
-                </div>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </div>
-  </v-lazy>
-</template>
-<script>
-import AvatarContainer from "@/components/users/profile/AvatarContainer"
-
-export default {
-  components: {
-    AvatarContainer
-  }, 
-  props: {
-    width: {
-      type: String,
-      default: ""
-    }, 
-    height: {
-      type: String,
-      default: ""
-    }, 
-    header: {
-      type: String, 
-      default: "avatar"
-    }
-  }
-}
-</script>
-
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-}
-</style>
+<template>
+  <v-lazy class="px-3">
+    <div :style="{ width: width }">
+      <v-card class="mb-3" flat :height="height" outlined>
+        <v-container v-if="header === 'avatar'">
+          <v-row class="d-flex justify-space-between">
+            <v-col class="d-flex justify-space-between">
+              <div style="transform: translate(8px, 0)">
+                <AvatarContainer
+                  color="#e2e2e2"
+                  font-size="text-body-1"
+                  size="45"
+                />
+              </div>
+              <div class="pr-2">
+                <v-sheet
+                  class="my-1"
+                  color="#e2e2e2"
+                  width="72.67px"
+                  height="14px"
+                ></v-sheet>
+                <v-sheet
+                  class="my-1"
+                  color="#e2e2e2"
+                  width="72.67px"
+                  height="14px"
+                ></v-sheet>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-container v-else-if="header === 'image'">
+          <v-row class="d-flex justify-space-between">
+            <v-col class="d-flex justify-space-between pa-0">
+              <v-sheet color="#e2e2e2" width="100%" height="69px"></v-sheet>
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-container>
+          <v-row>
+            <v-col
+              cols="12"
+              :class="[header === 'image' ? 'pt-8 pb-2' : 'pt-0']"
+            >
+              <div class="router-container d-flex">
+                <v-sheet
+                  class="my-1 ml-2"
+                  color="#e2e2e2"
+                  width="160px"
+                  height="16px"
+                ></v-sheet>
+              </div>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <div v-for="index in header === 'image' ? 3 : 4" :key="index">
+                <div
+                  :class="[
+                    'd-flex',
+                    'justify-space-between',
+                    'px-2',
+                    index == 1 ? 'pb-3' : 'py-3',
+                  ]"
+                >
+                  <v-sheet
+                    class="my-1"
+                    color="#e2e2e2"
+                    width="100%"
+                    height="16px"
+                  ></v-sheet>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </div>
+  </v-lazy>
+</template>
+<script>
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+
+export default {
+  components: {
+    AvatarContainer,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: '',
+    },
+    header: {
+      type: String,
+      default: 'avatar',
+    },
+  },
+};
+</script>
+
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/teachers/loader/DetailCardLoader.vue b/src/components/teachers/loader/DetailCardLoader.vue
index 6eb646b..137d438 100644
--- a/src/components/teachers/loader/DetailCardLoader.vue
+++ b/src/components/teachers/loader/DetailCardLoader.vue
@@ -1,92 +1,92 @@
-<template>
-  <v-card class="ma-0" elevation="0" outlined>
-    <v-card-text>
-      <v-row class="">
-        <v-col class="" md="6" cols="12">
-          <div
-            class="mr-md-6 d-flex flex-column justify-space-between"
-            style="height: 100%"
-          >
-            <div>
-              <v-sheet
-                class="mt-1 mb-0 mb-lg-0"
-                color="#e2e2e2"
-                height="38px"
-                width="50%"
-              ></v-sheet>
-              <div class="pt-2">
-                <v-sheet color="#e2e2e2" width="40%" height="18px"></v-sheet>
-              </div>
-            </div>
-            <div class="">
-              <div class="pt-8">
-                <div class="subtitle-1 font-weight-regular pb-1">
-                  <v-sheet color="#e2e2e2" width="20%" height="18px"></v-sheet>
-                </div>
-                <div class="text-caption font-weight-regular pt-1">
-                  <v-sheet color="#e2e2e2" width="25%" height="14px"></v-sheet>
-                </div>
-              </div>
-              <div class="pt-3">
-                <div class="subtitle-1 font-weight-regular pb-1">
-                  <v-sheet color="#e2e2e2" width="20%" height="18px"></v-sheet>
-                </div>
-                <div class="text-caption font-weight-regular pt-1">
-                  <v-sheet color="#e2e2e2" width="60%" height="14px"></v-sheet>
-                </div>
-              </div>
-            </div>
-          </div>
-        </v-col>
-        <v-divider
-          vertical
-          inset
-          class="mb-2 mt-3 d-none d-md-block"
-        ></v-divider>
-        <v-col class="" md="6" cols="12">
-          <div class="ml-md-6">
-            <div class="subtitle-1 font-weight-regular pb-1">
-              <v-sheet color="#e2e2e2" width="36%" height="18px"></v-sheet>
-            </div>
-            <div style="font-family: Arial, serif" class="pt-md-2 mb-2">
-              <v-sheet
-                class="mt-1 mb-1 mb-lg-0"
-                color="#e2e2e2"
-                height="38px"
-                width="28%"
-              ></v-sheet>
-            </div>
-            <div>
-              <div v-for="index in 4" :key="index">
-                <v-sheet
-                  class="my-2"
-                  color="#e2e2e2"
-                  width="100%"
-                  height="12px"
-                ></v-sheet>
-              </div>
-            </div>
-            <v-row no-gutters class="pt-md-6 pt-4">
-              <v-sheet
-                class="my-1"
-                color="#e2e2e2"
-                width="100%"
-                height="16px"
-              ></v-sheet>
-              <v-sheet
-                class="mt-1"
-                color="#e2e2e2"
-                width="100%"
-                height="16px"
-              ></v-sheet>
-            </v-row>
-          </div>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-export default {};
-</script>
+<template>
+  <v-card class="ma-0" elevation="0" outlined>
+    <v-card-text>
+      <v-row class="">
+        <v-col class="" md="6" cols="12">
+          <div
+            class="mr-md-6 d-flex flex-column justify-space-between"
+            style="height: 100%"
+          >
+            <div>
+              <v-sheet
+                class="mt-1 mb-0 mb-lg-0"
+                color="#e2e2e2"
+                height="38px"
+                width="50%"
+              ></v-sheet>
+              <div class="pt-2">
+                <v-sheet color="#e2e2e2" width="40%" height="18px"></v-sheet>
+              </div>
+            </div>
+            <div class="">
+              <div class="pt-8">
+                <div class="subtitle-1 font-weight-regular pb-1">
+                  <v-sheet color="#e2e2e2" width="20%" height="18px"></v-sheet>
+                </div>
+                <div class="text-caption font-weight-regular pt-1">
+                  <v-sheet color="#e2e2e2" width="25%" height="14px"></v-sheet>
+                </div>
+              </div>
+              <div class="pt-3">
+                <div class="subtitle-1 font-weight-regular pb-1">
+                  <v-sheet color="#e2e2e2" width="20%" height="18px"></v-sheet>
+                </div>
+                <div class="text-caption font-weight-regular pt-1">
+                  <v-sheet color="#e2e2e2" width="60%" height="14px"></v-sheet>
+                </div>
+              </div>
+            </div>
+          </div>
+        </v-col>
+        <v-divider
+          vertical
+          inset
+          class="mb-2 mt-3 d-none d-md-block"
+        ></v-divider>
+        <v-col class="" md="6" cols="12">
+          <div class="ml-md-6">
+            <div class="subtitle-1 font-weight-regular pb-1">
+              <v-sheet color="#e2e2e2" width="36%" height="18px"></v-sheet>
+            </div>
+            <div style="font-family: Arial, serif" class="pt-md-2 mb-2">
+              <v-sheet
+                class="mt-1 mb-1 mb-lg-0"
+                color="#e2e2e2"
+                height="38px"
+                width="28%"
+              ></v-sheet>
+            </div>
+            <div>
+              <div v-for="index in 4" :key="index">
+                <v-sheet
+                  class="my-2"
+                  color="#e2e2e2"
+                  width="100%"
+                  height="12px"
+                ></v-sheet>
+              </div>
+            </div>
+            <v-row no-gutters class="pt-md-6 pt-4">
+              <v-sheet
+                class="my-1"
+                color="#e2e2e2"
+                width="100%"
+                height="16px"
+              ></v-sheet>
+              <v-sheet
+                class="mt-1"
+                color="#e2e2e2"
+                width="100%"
+                height="16px"
+              ></v-sheet>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/src/components/teachers/loader/DetailLoader.vue b/src/components/teachers/loader/DetailLoader.vue
index 1bf41bb..9446d73 100644
--- a/src/components/teachers/loader/DetailLoader.vue
+++ b/src/components/teachers/loader/DetailLoader.vue
@@ -1,49 +1,73 @@
-<template>
-  <div :style="{
-    width: width, 
-    height: height
-  }">
-    <div
-      class="d-flex justify-center"
-      :style="{ transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '' }"
-    >
-      <AvatarContainer
-        color="#e2e2e2"
-        :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
-        :outlined="$vuetify.breakpoint.mdAndDown"
-      />
-    </div>
-    <div
-      class="d-flex justify-center pt-5"
-      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
-    >
-      <v-sheet class="my-1" color="#e2e2e2" height="30px" width="100px"></v-sheet>
-    </div>
-    <div class="d-flex justify-center pt-3">
-      <v-sheet class="my-1" color="#e2e2e2" height="20px" width="120px"></v-sheet>
-    </div>
-    <div class="d-flex justify-center pt-3">
-      <v-sheet class="my-1" color="#e2e2e2" height="20px" width="160px"></v-sheet>
-    </div>
-    <div class="d-flex justify-center pt-3 px-4">
-      <v-sheet class="my-1" color="#e2e2e2" height="20px" width="120px"></v-sheet>
-    </div>
-  </div>
-</template>
-<script>
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-
-export default {
-  components: { AvatarContainer },
-  props: {
-    width: {
-      type: String,
-      default: "",    
-    }, 
-    height: {
-      type: String,
-      default: "",    
-    }
-  }
-};
-</script>
\ No newline at end of file
+<template>
+  <div
+    :style="{
+      width: width,
+      height: height,
+    }"
+  >
+    <div
+      class="d-flex justify-center"
+      :style="{
+        transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '',
+      }"
+    >
+      <AvatarContainer
+        color="#e2e2e2"
+        :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
+        :outlined="$vuetify.breakpoint.mdAndDown"
+      />
+    </div>
+    <div
+      class="d-flex justify-center pt-5"
+      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
+    >
+      <v-sheet
+        class="my-1"
+        color="#e2e2e2"
+        height="30px"
+        width="100px"
+      ></v-sheet>
+    </div>
+    <div class="d-flex justify-center pt-3">
+      <v-sheet
+        class="my-1"
+        color="#e2e2e2"
+        height="20px"
+        width="120px"
+      ></v-sheet>
+    </div>
+    <div class="d-flex justify-center pt-3">
+      <v-sheet
+        class="my-1"
+        color="#e2e2e2"
+        height="20px"
+        width="160px"
+      ></v-sheet>
+    </div>
+    <div class="d-flex justify-center pt-3 px-4">
+      <v-sheet
+        class="my-1"
+        color="#e2e2e2"
+        height="20px"
+        width="120px"
+      ></v-sheet>
+    </div>
+  </div>
+</template>
+<script>
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+
+export default {
+  components: { AvatarContainer },
+  props: {
+    width: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/src/components/teachers/loader/ImageLoader.vue b/src/components/teachers/loader/ImageLoader.vue
index 31ff978..d3f95dd 100644
--- a/src/components/teachers/loader/ImageLoader.vue
+++ b/src/components/teachers/loader/ImageLoader.vue
@@ -1,11 +1,15 @@
-<template>
-  <v-sheet    
-    color="#B0B0B0"
-    :height="$vuetify.breakpoint.xsOnly ? 91 : $vuetify.breakpoint.mdAndDown ? 121 : 211"
-  ></v-sheet>        
-</template>
-<script>
-export default {
-  
-}
-</script>
\ No newline at end of file
+<template>
+  <v-sheet
+    color="#B0B0B0"
+    :height="
+      $vuetify.breakpoint.xsOnly
+        ? 91
+        : $vuetify.breakpoint.mdAndDown
+        ? 121
+        : 211
+    "
+  ></v-sheet>
+</template>
+<script>
+export default {};
+</script>
diff --git a/src/components/teachers/loader/SelectLoader.vue b/src/components/teachers/loader/SelectLoader.vue
index ca224e7..9e84424 100644
--- a/src/components/teachers/loader/SelectLoader.vue
+++ b/src/components/teachers/loader/SelectLoader.vue
@@ -1,50 +1,51 @@
-<template>
-  <v-card
-    class="px-lg-0 px-4"
-    outlined
-    flat
-    :width="width"
-    :height="height"
-  >
-    <v-container>
-      <v-row class="pt-lg-2 pt-4">
-        <v-col
-          md="2"
-          sm="3"
-          cols="6"
-          class="pb-0 pt-lg-3 pt-0 pl-4"
-          style="max-width: 140px; min-width: 130px"
-        >
-          <v-sheet class="mt-1" color="#e2e2e2" height="13px" width="60%"></v-sheet>
-          <v-sheet class="mt-2 mb-4" color="#e2e2e2" height="29px"></v-sheet>
-        </v-col>
-        <v-col
-          md="2"
-          sm="3"
-          cols="6"
-          class="pb-0 pt-lg-3 pt-0"
-          style="max-width: 140px; min-width: 130px"
-        >
-          <v-sheet class="mt-2 mb-1" color="#e2e2e2" height="29px"
-            style="transform: translate(0, 17px)"
-          ></v-sheet>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-<script>
-
-export default {
-  props: {
-    width: {
-      type: String,
-      default: ""
-    },
-    height: {
-      type: String,
-      default: ""
-    }
-  }
-};
-</script>
+<template>
+  <v-card class="px-lg-0 px-4" outlined flat :width="width" :height="height">
+    <v-container>
+      <v-row class="pt-lg-2 pt-4">
+        <v-col
+          md="2"
+          sm="3"
+          cols="6"
+          class="pb-0 pt-lg-3 pt-0 pl-4"
+          style="max-width: 140px; min-width: 130px"
+        >
+          <v-sheet
+            class="mt-1"
+            color="#e2e2e2"
+            height="13px"
+            width="60%"
+          ></v-sheet>
+          <v-sheet class="mt-2 mb-4" color="#e2e2e2" height="29px"></v-sheet>
+        </v-col>
+        <v-col
+          md="2"
+          sm="3"
+          cols="6"
+          class="pb-0 pt-lg-3 pt-0"
+          style="max-width: 140px; min-width: 130px"
+        >
+          <v-sheet
+            class="mt-2 mb-1"
+            color="#e2e2e2"
+            height="29px"
+            style="transform: translate(0, 17px)"
+          ></v-sheet>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/src/components/teachers/loader/StatisticLoader.vue b/src/components/teachers/loader/StatisticLoader.vue
index f528f70..d1fe5f0 100644
--- a/src/components/teachers/loader/StatisticLoader.vue
+++ b/src/components/teachers/loader/StatisticLoader.vue
@@ -1,33 +1,40 @@
-<template>
-  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
-    <div :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }">      
-      <!-- <div class="d-flex justify-center pt-2">
-        <v-sheet class="my-1" color="#e2e2e2" height="18px" width="302px"></v-sheet>
-      </div> -->
-      <div class="d-flex justify-center" v-for="index in length" :key="index"
-        :style="{ 'padding-top': index !== 1 ? offset : '8px' }"
-      >
-        <v-sheet class="my-1" color="#e2e2e2" height="18px" :width="width"></v-sheet>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-export default {
-  props: {
-    width: {
-      type: String,
-      default: "302px",
-    },
-    length: {
-      type: Number,
-      default: 2,
-    },
-    offset: {
-      type: String,
-      default: "8px",    
-    }
-  }
-};
-</script>
\ No newline at end of file
+<template>
+  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
+    <div :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }">
+      <!-- <div class="d-flex justify-center pt-2">
+        <v-sheet class="my-1" color="#e2e2e2" height="18px" width="302px"></v-sheet>
+      </div> -->
+      <div
+        class="d-flex justify-center"
+        v-for="index in length"
+        :key="index"
+        :style="{ 'padding-top': index !== 1 ? offset : '8px' }"
+      >
+        <v-sheet
+          class="my-1"
+          color="#e2e2e2"
+          height="18px"
+          :width="width"
+        ></v-sheet>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '302px',
+    },
+    length: {
+      type: Number,
+      default: 2,
+    },
+    offset: {
+      type: String,
+      default: '8px',
+    },
+  },
+};
+</script>
diff --git a/src/components/users/comment/CommentCard.vue b/src/components/users/comment/CommentCard.vue
index bf16ce5..2e0ee5e 100644
--- a/src/components/users/comment/CommentCard.vue
+++ b/src/components/users/comment/CommentCard.vue
@@ -26,7 +26,14 @@
             </v-row>
           </div>
         </template>
-        <template v-slot:footerNote v-if='$route.path === "/Recent" && (global.userProfile.is_admin || global.userProfile.is_community_admin)'>
+        <template
+          v-slot:footerNote
+          v-if="
+            $route.path === '/Recent' &&
+            (global.userProfile.is_admin ||
+              global.userProfile.is_community_admin)
+          "
+        >
           <div class="d-flex justify-end" style="flex-wrap: wrap">
             <div class="d-flex">
               <v-btn
@@ -40,11 +47,7 @@
                 :disabled="!global.isLogin"
               >
                 <div class="px-0">
-                  <span
-                    class="text-caption"
-                  >
-                    折叠
-                  </span>
+                  <span class="text-caption"> 折叠 </span>
                 </div>
               </v-btn>
             </div>
@@ -64,16 +67,22 @@ import useFoldComment from '@/composables/courses/comment/useFoldComment';
 
 export default {
   setup() {
-    const { doFold, doUnfold, commentFoldStatus } =
-      useFoldComment();
-    const global = inject("global")
+    const { doFold, doUnfold, commentFoldStatus } = useFoldComment();
+    const global = inject('global');
     const foldComment = ref(true);
     const statics = {
       icons: {
         mdiSchoolOutline,
       },
     };
-    return { foldComment, statics, global, doFold, doUnfold, commentFoldStatus };
+    return {
+      foldComment,
+      statics,
+      global,
+      doFold,
+      doUnfold,
+      commentFoldStatus,
+    };
   },
   props: {
     comment: Object,
@@ -99,6 +108,6 @@ export default {
 </script>
 <style>
 .fold-button {
-  padding: 0 !important;;
+  padding: 0 !important;
 }
 </style>
diff --git a/src/components/users/comment/CommentCardBar.vue b/src/components/users/comment/CommentCardBar.vue
index 2e098f6..df5853f 100644
--- a/src/components/users/comment/CommentCardBar.vue
+++ b/src/components/users/comment/CommentCardBar.vue
@@ -1,87 +1,90 @@
-<template>
-  <v-card flat>
-    <v-card-text class="px-sm-4 px-2 pt-sm-4 pt-3 pb-sm-3 pb-0">
-      <div class="d-flex justify-space-between">
-        <slot name="headerAvatar" :localComment="comment">
-          <div 
-            class="d-flex justify-space-between router-container" 
-            @click="$router.push({ path: `/course/${comment.course.id}` })"
-          >
-            <AvatarContainer
-              :name="
-                instituteInfo[comment.course.institute].name === 'Other'
-                  ? '?'
-                  : instituteInfo[comment.course.institute].name
-              "
-              :color="instituteInfo[comment.course.institute].color"
-              small
-              tile
-              size="38"
-            />
-            <div class="pl-2">
-              <div class="text-caption mt-n1">{{ comment.course.code }}</div>
-              <div class="text-body-1 font-weight-bold overflow-ellipsis"
-                :style="{ 'max-width': $vuetify.breakpoint.xsOnly ? '180px' : '' }"
-              >
-                {{ comment.course.name }}
-              </div>
-            </div>          
-          </div>
-        </slot>
-        <slot name="headerNote" :localComment="comment">
-          <div class="d-flex justify-end">
-            <div class="d-flex flex-column">
-              <div class="mt-n1">
-                <v-icon size="16">
-                  {{ statics.icons.mdiUpdate }}
-                </v-icon>
-                <span class="text-caption">
-                  {{ unixToReadable(comment.update_time) }}
-                </span>
-              </div>
-              <div>
-                <v-icon size="16">
-                  {{ statics.icons.mdiCommentEditOutline }}
-                </v-icon>
-                <span class="text-caption">
-                  {{ unixToReadable(comment.post_time) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </slot>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>
-<script>
-import useCommentCardBar from "@/composables/users/comment/useCommentCardBar";
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import { instituteInfo, gradeItems } from "@/composables/global/useStaticData"
-import { unixToReadable } from "@/composables/global/useTimeUtils";
-
-export default {
-  components: { AvatarContainer },
-  setup() {
-    const { statics } = useCommentCardBar();
-    return { statics, instituteInfo, gradeItems, unixToReadable };
-  },
-  props: {
-    comment: {
-      type: Object,
-      required: true,
-    }
-  },
-};
-</script>
-<style scoped>
-.router-container:hover {
-  cursor: pointer;
-}
-
-.overflow-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
+<template>
+  <v-card flat>
+    <v-card-text class="px-sm-4 px-2 pt-sm-4 pt-3 pb-sm-3 pb-0">
+      <div class="d-flex justify-space-between">
+        <slot name="headerAvatar" :localComment="comment">
+          <div
+            class="d-flex justify-space-between router-container"
+            @click="$router.push({ path: `/course/${comment.course.id}` })"
+          >
+            <AvatarContainer
+              :name="
+                instituteInfo[comment.course.institute].name === 'Other'
+                  ? '?'
+                  : instituteInfo[comment.course.institute].name
+              "
+              :color="instituteInfo[comment.course.institute].color"
+              small
+              tile
+              size="38"
+            />
+            <div class="pl-2">
+              <div class="text-caption mt-n1">{{ comment.course.code }}</div>
+              <div
+                class="text-body-1 font-weight-bold overflow-ellipsis"
+                :style="{
+                  'max-width': $vuetify.breakpoint.xsOnly ? '180px' : '',
+                }"
+              >
+                {{ comment.course.name }}
+              </div>
+            </div>
+          </div>
+        </slot>
+        <slot name="headerNote" :localComment="comment">
+          <div class="d-flex justify-end">
+            <div class="d-flex flex-column">
+              <div class="mt-n1">
+                <v-icon size="16">
+                  {{ statics.icons.mdiUpdate }}
+                </v-icon>
+                <span class="text-caption">
+                  {{ unixToReadable(comment.update_time) }}
+                </span>
+              </div>
+              <div>
+                <v-icon size="16">
+                  {{ statics.icons.mdiCommentEditOutline }}
+                </v-icon>
+                <span class="text-caption">
+                  {{ unixToReadable(comment.post_time) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import useCommentCardBar from '@/composables/users/comment/useCommentCardBar';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import { instituteInfo, gradeItems } from '@/composables/global/useStaticData';
+import { unixToReadable } from '@/composables/global/useTimeUtils';
+
+export default {
+  components: { AvatarContainer },
+  setup() {
+    const { statics } = useCommentCardBar();
+    return { statics, instituteInfo, gradeItems, unixToReadable };
+  },
+  props: {
+    comment: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.router-container:hover {
+  cursor: pointer;
+}
+
+.overflow-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/components/users/comment/CommentCardContent.vue b/src/components/users/comment/CommentCardContent.vue
index 3139609..dafeb0f 100644
--- a/src/components/users/comment/CommentCardContent.vue
+++ b/src/components/users/comment/CommentCardContent.vue
@@ -1,236 +1,264 @@
-<template>
-  <v-card tile elevation="0">
-    <slot name="title" :localComment="comment">
-      <v-card-title class="pa-sm-4 pa-2 pb-sm-0 py-sm-0">
-        <v-container>
-          <v-row>
-            <v-col cols="12" class="pa-0 d-flex">
-              <div class="pr-2" style="transform: translate(0, -1px)">
-                <v-icon size="24">
-                  {{ statics.icons.mdiSubtitlesOutline }}
-                </v-icon>
-              </div>
-              <div class="justify-start text-h6 overflow">
-                {{ comment.is_covered ? comment.cover_title : comment.title }}
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-        <div v-if="comment.is_covered" class="pt-1" style="width: 100%;">
-          <CommentCover :reason="comment.cover_reason" />
-        </div>
-      </v-card-title>
-    </slot>
-    <v-card-text class="pa-0">
-      <v-container>
-        <v-row>
-          <v-col class="pa-0 pt-sm-2">
-            <!-- <div class="px-4 pb-1" v-if="comment.user_score_ranking > 0">
-              <span class="font-weight-bold pr-2">课程绩点</span>
-              <span class="text-caption">{{ comment.user_score_ranking.toFixed(1) }}</span>
-            </div> -->
-            <slot name="content" :localComment="comment">
-              <TextContainer
-                :text="comment.is_covered ? comment.cover_content : comment.content"
-                :title="comment.is_covered ? comment.cover_title : comment.title"
-                markdown
-                dense
-                :dialog="$vuetify.breakpoint.name === 'xs'"
-                #default="{ overflow }"
-              >
-                <slot name="contentNote" :localComment="comment">
-                    <div
-                      class="pa-0 pb-2 pt-sm-3 pt-2 d-flex align-center"
-                      :style="{ 'max-width': overflow ? '60vw' : '90%' }"
-                    >
-                      <v-icon size="16">
-                        {{ statics.icons.mdiSchoolOutline }}
-                      </v-icon>
-                      <span
-                        v-for="(teacher, index) in comment.group.teachers"
-                        :class="'pl-1 text-caption font-weight-bold'+teacher.name==='其他'?'': ' router-container'"
-                        :key="index"
-                        @click="teacher.name==='其他'?'':$router.push({ path: `/teacher/${teacher.id}` })"
-                      >
-                        {{ teacher.name }}
-                      </span>
-                    <v-icon size="16">
-                        {{ statics.icons.mdiClockOutline }}
-                      </v-icon>
-                      <span class="text-caption">
-                        {{ semester }}
-                      </span>
-                      <span v-if="(comment.reward >= 0) && !(global.userProfile.is_admin || global.userProfile.is_community_admin)">
-                        <v-icon size="16">
-                          {{ statics.icons.mdiGold }}
-                        </v-icon>
-                        <span class="text-caption">
-                          {{ comment.reward / 100 }}元
-                        </span>
-                      </span>
-                      <div v-else class="d-flex align-center">
-                        <v-icon size="16">
-                            {{ statics.icons.mdiGold }}
-                        </v-icon>
-                        <v-text-field
-                          :class="'pl-1 text-caption'"
-                          v-model="localReward"
-                          :rules=[formRules.reward]
-                          suffix="元"
-                          style="max-width: 80px"
-                          @keyup.enter="onEnterPressed"
-                          >
-                          </v-text-field>
-                      </div>
-                    </div>
-                </slot>
-              </TextContainer>
-            </slot>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col class="pa-0 pl-sm-1 pb-sm-4 pb-2 pt-2" cols="12">
-            <v-container>
-              <v-row class="d-flex justify-space-between">
-                <v-col
-                  class="pa-0"
-                  :cols="$vuetify.breakpoint.width > 420 ? 7 : 8"
-                  sm="8"
-                >
-                  <v-container>
-                    <v-row class="pl-3">
-                      <v-col
-                        v-for="index in judgeItems.length"
-                        :key="index"
-                        cols="6"
-                        sm="3"
-                        :class="[
-                          'px-0','py-0'
-                        ]"
-                      >
-                        <div>
-                          <span
-                            :class="[
-                              'pr-1 font-weight-bold text-body-2',
-                              index === 1 ? 'pr-md-0 pr-lg-1' : '',
-                            ]"
-                            >{{ judgeItems[index - 1] }}</span
-                          >
-                          <v-chip
-                            x-small
-                            label
-                            :color="
-                              gradingInfo.color[comment.score[index - 1] - 1]
-                            "
-                            class="px-1"
-                          >
-                            <span class="text-caption white--text">{{
-                              statics.grade[index - 1][
-                                comment.score[index - 1] - 1
-                              ]
-                            }}</span>
-                          </v-chip>
-                        </div>
-                      </v-col>
-                    </v-row>
-                  </v-container>
-                </v-col>
-                <v-col class="pa-0 pr-sm-4 pr-3" cols="4">
-                  <slot
-                    name="footerNote"
-                    :comment="comment"
-                    :statics="statics"
-                    :semester="semester"
-                  >
-                    <div class="d-flex justify-end" style="flex-wrap: wrap">
-                      <div class="pr-sm-2">
-                        <v-icon size="15" style="transform: translate(0, -1px)">
-                          {{ statics.icons.mdiTriangle }}
-                        </v-icon>
-                        <span class="text-caption">
-                          赞同 {{ comment.like - comment.dislike }}
-                        </span>
-                      </div>
-                    </div>
-                  </slot>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
-  </v-card>
-</template>
-<script>
-import useCommentCardContent from '@/composables/users/comment/useCommentCardContent';
-import TextContainer from '@/components/users/comment/TextContainer';
-import CommentCover from '@/components/users/comment/CommentCover';
-import useForms from '@/composables/users/forms/useForms';
-import useModifyReward from '@/composables/reward/useModifyReward';
-import { inject, ref } from "vue";
-import {
-  judgeItems,
-  gradingInfo,
-  termItems,
-} from '@/composables/global/useStaticData';
-
-// TODO: Decide if the score by user is int or float
-
-// Some ancient shit are contained in this component that is not worth to fix
-//  if you want to fix this, the best way is to remove all the v-container stuff
-//  and use vanilla div, and rewrite the reactive paddings
-export default {
-  setup() {
-    const showSnackbar = inject("showSnackbar")
-    const { statics, global } = useCommentCardContent();
-    const { formRules } = useForms();
-    const { formStatus, doModifyReward, onEnterUp } = useModifyReward();
-    return { statics, judgeItems, gradingInfo, global, formRules, formStatus, onEnterUp, doModifyReward, showSnackbar };
-  },
-  components: { TextContainer, CommentCover },
-  props: {
-    comment: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    semester() {
-      let sem = String(this.comment.semester);
-      let year = sem.substring(0, 4);
-      let season = sem.substring(4);
-      return `${year}年${termItems[new Number(season) - 1].name}`;
-    },
-  },
-  data(){
-    let localReward = this.comment.reward / 100;
-    return {
-      localReward
-    }
-  },
-  methods: {
-    onEnterPressed() {
-      if (this.formRules.reward(this.localReward) === true){
-        this.formStatus.reward = this.localReward;
-        this.formStatus.id = this.comment.id;
-        this.doModifyReward();
-      }
-      else this.showSnackbar("error", "赏金格式错误");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.overflow {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.router-container:hover {
-  cursor: pointer;
-}
-</style>
+<template>
+  <v-card tile elevation="0">
+    <slot name="title" :localComment="comment">
+      <v-card-title class="pa-sm-4 pa-2 pb-sm-0 py-sm-0">
+        <v-container>
+          <v-row>
+            <v-col cols="12" class="pa-0 d-flex">
+              <div class="pr-2" style="transform: translate(0, -1px)">
+                <v-icon size="24">
+                  {{ statics.icons.mdiSubtitlesOutline }}
+                </v-icon>
+              </div>
+              <div class="justify-start text-h6 overflow">
+                {{ comment.is_covered ? comment.cover_title : comment.title }}
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+        <div v-if="comment.is_covered" class="pt-1" style="width: 100%">
+          <CommentCover :reason="comment.cover_reason" />
+        </div>
+      </v-card-title>
+    </slot>
+    <v-card-text class="pa-0">
+      <v-container>
+        <v-row>
+          <v-col class="pa-0 pt-sm-2">
+            <!-- <div class="px-4 pb-1" v-if="comment.user_score_ranking > 0">
+              <span class="font-weight-bold pr-2">课程绩点</span>
+              <span class="text-caption">{{ comment.user_score_ranking.toFixed(1) }}</span>
+            </div> -->
+            <slot name="content" :localComment="comment">
+              <TextContainer
+                :text="
+                  comment.is_covered ? comment.cover_content : comment.content
+                "
+                :title="
+                  comment.is_covered ? comment.cover_title : comment.title
+                "
+                markdown
+                dense
+                :dialog="$vuetify.breakpoint.name === 'xs'"
+                #default="{ overflow }"
+              >
+                <slot name="contentNote" :localComment="comment">
+                  <div
+                    class="pa-0 pb-2 pt-sm-3 pt-2 d-flex align-center"
+                    :style="{ 'max-width': overflow ? '60vw' : '90%' }"
+                  >
+                    <v-icon size="16">
+                      {{ statics.icons.mdiSchoolOutline }}
+                    </v-icon>
+                    <span
+                      v-for="(teacher, index) in comment.group.teachers"
+                      :class="
+                        'pl-1 text-caption font-weight-bold' + teacher.name ===
+                        '其他'
+                          ? ''
+                          : ' router-container'
+                      "
+                      :key="index"
+                      @click="
+                        teacher.name === '其他'
+                          ? ''
+                          : $router.push({ path: `/teacher/${teacher.id}` })
+                      "
+                    >
+                      {{ teacher.name }}
+                    </span>
+                    <v-icon size="16">
+                      {{ statics.icons.mdiClockOutline }}
+                    </v-icon>
+                    <span class="text-caption">
+                      {{ semester }}
+                    </span>
+                    <span
+                      v-if="
+                        comment.reward >= 0 &&
+                        !(
+                          global.userProfile.is_admin ||
+                          global.userProfile.is_community_admin
+                        )
+                      "
+                    >
+                      <v-icon size="16">
+                        {{ statics.icons.mdiGold }}
+                      </v-icon>
+                      <span class="text-caption">
+                        {{ comment.reward / 100 }}元
+                      </span>
+                    </span>
+                    <div v-else class="d-flex align-center">
+                      <v-icon size="16">
+                        {{ statics.icons.mdiGold }}
+                      </v-icon>
+                      <v-text-field
+                        :class="'pl-1 text-caption'"
+                        v-model="localReward"
+                        :rules="[formRules.reward]"
+                        suffix="元"
+                        style="max-width: 80px"
+                        @keyup.enter="onEnterPressed"
+                      >
+                      </v-text-field>
+                    </div>
+                  </div>
+                </slot>
+              </TextContainer>
+            </slot>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col class="pa-0 pl-sm-1 pb-sm-4 pb-2 pt-2" cols="12">
+            <v-container>
+              <v-row class="d-flex justify-space-between">
+                <v-col
+                  class="pa-0"
+                  :cols="$vuetify.breakpoint.width > 420 ? 7 : 8"
+                  sm="8"
+                >
+                  <v-container>
+                    <v-row class="pl-3">
+                      <v-col
+                        v-for="index in judgeItems.length"
+                        :key="index"
+                        cols="6"
+                        sm="3"
+                        :class="['px-0', 'py-0']"
+                      >
+                        <div>
+                          <span
+                            :class="[
+                              'pr-1 font-weight-bold text-body-2',
+                              index === 1 ? 'pr-md-0 pr-lg-1' : '',
+                            ]"
+                            >{{ judgeItems[index - 1] }}</span
+                          >
+                          <v-chip
+                            x-small
+                            label
+                            :color="
+                              gradingInfo.color[comment.score[index - 1] - 1]
+                            "
+                            class="px-1"
+                          >
+                            <span class="text-caption white--text">{{
+                              statics.grade[index - 1][
+                                comment.score[index - 1] - 1
+                              ]
+                            }}</span>
+                          </v-chip>
+                        </div>
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-col>
+                <v-col class="pa-0 pr-sm-4 pr-3" cols="4">
+                  <slot
+                    name="footerNote"
+                    :comment="comment"
+                    :statics="statics"
+                    :semester="semester"
+                  >
+                    <div class="d-flex justify-end" style="flex-wrap: wrap">
+                      <div class="pr-sm-2">
+                        <v-icon size="15" style="transform: translate(0, -1px)">
+                          {{ statics.icons.mdiTriangle }}
+                        </v-icon>
+                        <span class="text-caption">
+                          赞同 {{ comment.like - comment.dislike }}
+                        </span>
+                      </div>
+                    </div>
+                  </slot>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import useCommentCardContent from '@/composables/users/comment/useCommentCardContent';
+import TextContainer from '@/components/users/comment/TextContainer';
+import CommentCover from '@/components/users/comment/CommentCover';
+import useForms from '@/composables/users/forms/useForms';
+import useModifyReward from '@/composables/reward/useModifyReward';
+import { inject, ref } from 'vue';
+import {
+  judgeItems,
+  gradingInfo,
+  termItems,
+} from '@/composables/global/useStaticData';
+
+// TODO: Decide if the score by user is int or float
+
+// Some ancient shit are contained in this component that is not worth to fix
+//  if you want to fix this, the best way is to remove all the v-container stuff
+//  and use vanilla div, and rewrite the reactive paddings
+export default {
+  setup() {
+    const showSnackbar = inject('showSnackbar');
+    const { statics, global } = useCommentCardContent();
+    const { formRules } = useForms();
+    const { formStatus, doModifyReward, onEnterUp } = useModifyReward();
+    return {
+      statics,
+      judgeItems,
+      gradingInfo,
+      global,
+      formRules,
+      formStatus,
+      onEnterUp,
+      doModifyReward,
+      showSnackbar,
+    };
+  },
+  components: { TextContainer, CommentCover },
+  props: {
+    comment: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    semester() {
+      let sem = String(this.comment.semester);
+      let year = sem.substring(0, 4);
+      let season = sem.substring(4);
+      return `${year}年${termItems[new Number(season) - 1].name}`;
+    },
+  },
+  data() {
+    let localReward = this.comment.reward / 100;
+    return {
+      localReward,
+    };
+  },
+  methods: {
+    onEnterPressed() {
+      if (this.formRules.reward(this.localReward) === true) {
+        this.formStatus.reward = this.localReward;
+        this.formStatus.id = this.comment.id;
+        this.doModifyReward();
+      } else this.showSnackbar('error', '赏金格式错误');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.overflow {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.router-container:hover {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/users/comment/CommentCover.vue b/src/components/users/comment/CommentCover.vue
index 25955fc..cb56066 100644
--- a/src/components/users/comment/CommentCover.vue
+++ b/src/components/users/comment/CommentCover.vue
@@ -1,61 +1,56 @@
-<template>
-    <v-sheet
-      outlined
-      class="pa-sm-4 pa-2 mb-sm-0 mb-5"
-      :color="$vuetify.theme.dark ? '#121212' : '#f5f5f5'"
-      rounded="lg"
-    >
-      <div
-        class="text-sm-body-1 text-body-2 d-flex align-center mb-1 mb-sm-0"
-        style="height: 28px"
-      >
-        <div>
-          以下评论已被 AI 生成内容遮盖。
-          <a class="inline-link" href="https://clarivy.github.io/coursebench-ai/">
-            什么是 CourseBench AI?
-          </a>
-        </div>
-      </div>     
-      <div
-        class="text-sm-body-1 text-body-2 d-flex align-center"
-      >
-        <div class="text-caption">
-          遮盖原因（由AI自动生成）: {{ reason }}
-        </div>
-      </div>          
-    </v-sheet>
-  </template>
-  <script>
-  import useInsitePush from '@/composables/global/useInsitePush';
-  import { inject } from 'vue';
-  
-  export default {
-    setup() {
-      const global = inject('global');
-  
-      return {
-        useInsitePush,
-        global,
-      };
-    },
-    props: {
-        reason: {
-            type: String,
-            default: '...',
-        },
-    }
-  };
-  </script>
-  <style scoped>
-  .inline-link {
-    color: #0067bf;
-    cursor: pointer;
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .inline-link:hover {
-    text-decoration: underline;
-  }
-  </style>
-  
\ No newline at end of file
+<template>
+  <v-sheet
+    outlined
+    class="pa-sm-4 pa-2 mb-sm-0 mb-5"
+    :color="$vuetify.theme.dark ? '#121212' : '#f5f5f5'"
+    rounded="lg"
+  >
+    <div
+      class="text-sm-body-1 text-body-2 d-flex align-center mb-1 mb-sm-0"
+      style="height: 28px"
+    >
+      <div>
+        以下评论已被 AI 生成内容遮盖。
+        <a class="inline-link" href="https://clarivy.github.io/coursebench-ai/">
+          什么是 CourseBench AI?
+        </a>
+      </div>
+    </div>
+    <div class="text-sm-body-1 text-body-2 d-flex align-center">
+      <div class="text-caption">遮盖原因（由AI自动生成）: {{ reason }}</div>
+    </div>
+  </v-sheet>
+</template>
+<script>
+import useInsitePush from '@/composables/global/useInsitePush';
+import { inject } from 'vue';
+
+export default {
+  setup() {
+    const global = inject('global');
+
+    return {
+      useInsitePush,
+      global,
+    };
+  },
+  props: {
+    reason: {
+      type: String,
+      default: '...',
+    },
+  },
+};
+</script>
+<style scoped>
+.inline-link {
+  color: #0067bf;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.inline-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/users/comment/CommentFold.vue b/src/components/users/comment/CommentFold.vue
index b837414..a0451ed 100644
--- a/src/components/users/comment/CommentFold.vue
+++ b/src/components/users/comment/CommentFold.vue
@@ -1,57 +1,57 @@
-<template>
-  <v-sheet
-    outlined
-    class="pa-sm-4 pa-2 mb-sm-0 mb-5 d-flex justify-space-between"
-    :color="$vuetify.theme.dark ? '#121212' : '#f5f5f5'"
-    rounded="lg"
-  >
-    <div
-      class="text-sm-body-1 text-body-2 d-flex align-center"
-      style="height: 28px"
-    >
-      <div>
-        以下评论可能包含违规内容。
-        <span
-          class="inline-link"
-          @click="$router.push('/about'), useInsitePush('#privacy_policy')"
-          >查看隐私政策</span
-        >
-      </div>
-    </div>
-    <div v-if="global.isLogin" class="d-sm-block d-flex align-center">
-      <v-btn
-        elevation="0"
-        :small="$vuetify.breakpoint.smAndUp"
-        :x-small="$vuetify.breakpoint.xsOnly"
-        @click="$emit('click')"
-      >
-        <span class="font-weight-bold text-sm-body-1 text-body-2">查看</span>
-      </v-btn>
-    </div>
-  </v-sheet>
-</template>
-<script>
-import useInsitePush from '@/composables/global/useInsitePush';
-import { inject } from 'vue';
-
-export default {
-  setup() {
-    const global = inject('global');
-
-    return {
-      useInsitePush,
-      global,
-    };
-  },
-};
-</script>
-<style scoped>
-.inline-link {
-  color: #0067bf;
-  cursor: pointer;
-}
-
-.inline-link:hover {
-  text-decoration: underline;
-}
-</style>
+<template>
+  <v-sheet
+    outlined
+    class="pa-sm-4 pa-2 mb-sm-0 mb-5 d-flex justify-space-between"
+    :color="$vuetify.theme.dark ? '#121212' : '#f5f5f5'"
+    rounded="lg"
+  >
+    <div
+      class="text-sm-body-1 text-body-2 d-flex align-center"
+      style="height: 28px"
+    >
+      <div>
+        以下评论可能包含违规内容。
+        <span
+          class="inline-link"
+          @click="$router.push('/about'), useInsitePush('#privacy_policy')"
+          >查看隐私政策</span
+        >
+      </div>
+    </div>
+    <div v-if="global.isLogin" class="d-sm-block d-flex align-center">
+      <v-btn
+        elevation="0"
+        :small="$vuetify.breakpoint.smAndUp"
+        :x-small="$vuetify.breakpoint.xsOnly"
+        @click="$emit('click')"
+      >
+        <span class="font-weight-bold text-sm-body-1 text-body-2">查看</span>
+      </v-btn>
+    </div>
+  </v-sheet>
+</template>
+<script>
+import useInsitePush from '@/composables/global/useInsitePush';
+import { inject } from 'vue';
+
+export default {
+  setup() {
+    const global = inject('global');
+
+    return {
+      useInsitePush,
+      global,
+    };
+  },
+};
+</script>
+<style scoped>
+.inline-link {
+  color: #0067bf;
+  cursor: pointer;
+}
+
+.inline-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/users/comment/StatisticCard.vue b/src/components/users/comment/StatisticCard.vue
index e6dc5dd..2b18450 100644
--- a/src/components/users/comment/StatisticCard.vue
+++ b/src/components/users/comment/StatisticCard.vue
@@ -1,78 +1,88 @@
-<template>
-  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
-    <div class="pt-4" :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }">
-      <div class="d-flex justify-space-between pt-2">
-        <div>
-          <div>
-            <v-icon size="18">{{ statics.icons.mdiTriangle }}</v-icon>
-            <span class="text-sm-subtitle-1 pl-1">赞同总数</span>
-          </div>
-        </div>
-        <div class="font-weight-bold" style="min-width: 16px">
-          {{ commentStatistic.score }}
-        </div>
-      </div>
-      <div class="d-flex justify-space-between pt-2">
-        <div>
-          <div>
-            <v-icon size="18">{{ statics.icons.mdiCommentCheckOutline }}</v-icon>
-            <span class="text-sm-subtitle-1 pl-1">评价总数</span>
-          </div>
-        </div>
-        <div class="font-weight-bold" style="min-width: 16px">
-          {{ commentStatistic.total }}
-        </div>
-      </div>
-      <div class="d-flex justify-space-between pt-2">
-        <div>
-          <div>
-            <v-icon size="18">{{ statics.icons.mdiClipboardText }}</v-icon>
-            <span class="text-sm-subtitle-1 pl-1">评价统计</span>
-          </div>
-        </div>
-        <div class="transform: translate(0, 1px);">
-          <v-icon @click="status.showAll = true" v-if="!status.showAll">
-            {{ statics.icons.mdiChevronDown }}
-          </v-icon>
-          <v-icon @click="status.showAll = false" v-if="status.showAll">
-            {{ statics.icons.mdiChevronUp }}
-          </v-icon>
-        </div>
-      </div>
-      <v-expand-transition>
-        <div class="pl-2" v-if="status.showAll">
-          <div
-            v-for="(value, key, index) in commentStatistic.count"
-            :key="index"
-          >
-            <div v-if="value">
-              <v-checkbox dense v-model="status.selected" :value="key" hide-details>
-                <template #label>
-                  <div class="d-flex justify-space-between" style="width: 100%">
-                    <div>{{ key }}</div>
-                    <div>{{ value }}篇</div>
-                  </div>
-                </template>
-              </v-checkbox>
-            </div>
-          </div>
-        </div>
-      </v-expand-transition>
-    </div>
-  </div>
-</template>
-<script>
-import useStatisticCard from "@/composables/users/comment/useStatisticCard"
-
-export default {
-  setup() {
-    const { commentStatistic, statics, status } = useStatisticCard()
-    return { commentStatistic, statics, status }
-  }, 
-  created() {
-    if (this.$vuetify.breakpoint.mdAndDown) {
-      this.status.showAll = false
-    }
-  }
-}
-</script>
+<template>
+  <div :class="[$vuetify.breakpoint.mdOnly ? 'd-flex' : '', 'justify-center']">
+    <div
+      class="pt-4"
+      :style="{ width: $vuetify.breakpoint.mdOnly ? '812px' : '' }"
+    >
+      <div class="d-flex justify-space-between pt-2">
+        <div>
+          <div>
+            <v-icon size="18">{{ statics.icons.mdiTriangle }}</v-icon>
+            <span class="text-sm-subtitle-1 pl-1">赞同总数</span>
+          </div>
+        </div>
+        <div class="font-weight-bold" style="min-width: 16px">
+          {{ commentStatistic.score }}
+        </div>
+      </div>
+      <div class="d-flex justify-space-between pt-2">
+        <div>
+          <div>
+            <v-icon size="18">{{
+              statics.icons.mdiCommentCheckOutline
+            }}</v-icon>
+            <span class="text-sm-subtitle-1 pl-1">评价总数</span>
+          </div>
+        </div>
+        <div class="font-weight-bold" style="min-width: 16px">
+          {{ commentStatistic.total }}
+        </div>
+      </div>
+      <div class="d-flex justify-space-between pt-2">
+        <div>
+          <div>
+            <v-icon size="18">{{ statics.icons.mdiClipboardText }}</v-icon>
+            <span class="text-sm-subtitle-1 pl-1">评价统计</span>
+          </div>
+        </div>
+        <div class="transform: translate(0, 1px);">
+          <v-icon @click="status.showAll = true" v-if="!status.showAll">
+            {{ statics.icons.mdiChevronDown }}
+          </v-icon>
+          <v-icon @click="status.showAll = false" v-if="status.showAll">
+            {{ statics.icons.mdiChevronUp }}
+          </v-icon>
+        </div>
+      </div>
+      <v-expand-transition>
+        <div class="pl-2" v-if="status.showAll">
+          <div
+            v-for="(value, key, index) in commentStatistic.count"
+            :key="index"
+          >
+            <div v-if="value">
+              <v-checkbox
+                dense
+                v-model="status.selected"
+                :value="key"
+                hide-details
+              >
+                <template #label>
+                  <div class="d-flex justify-space-between" style="width: 100%">
+                    <div>{{ key }}</div>
+                    <div>{{ value }}篇</div>
+                  </div>
+                </template>
+              </v-checkbox>
+            </div>
+          </div>
+        </div>
+      </v-expand-transition>
+    </div>
+  </div>
+</template>
+<script>
+import useStatisticCard from '@/composables/users/comment/useStatisticCard';
+
+export default {
+  setup() {
+    const { commentStatistic, statics, status } = useStatisticCard();
+    return { commentStatistic, statics, status };
+  },
+  created() {
+    if (this.$vuetify.breakpoint.mdAndDown) {
+      this.status.showAll = false;
+    }
+  },
+};
+</script>
diff --git a/src/components/users/comment/TextContainer.vue b/src/components/users/comment/TextContainer.vue
index 929799c..230b39f 100644
--- a/src/components/users/comment/TextContainer.vue
+++ b/src/components/users/comment/TextContainer.vue
@@ -1,228 +1,233 @@
-<template>
-  <v-container>
-    <v-row>
-      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 pb-0 pt-0' : ''">
-        <span
-          :class="[
-            'text-body-1',
-            markdown ? 'markdown-body' : '',
-            'text-container',
-          ]"
-          ref="textContainer"
-          v-html="markdown ? useMarkdown(text) : text"
-          :style="{
-            'max-height':
-              (status.isOverflow & !status.showAll ? maxHeight : statics.inf) +
-              'px',
-          }"
-        ></span>
-      </v-col>
-    </v-row>
-    <v-row v-if="!status.isOverflow">
-      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 py-0' : ''">
-        <slot :overflow="status.isOverflow">
-          <div></div>
-        </slot>
-      </v-col>
-    </v-row>
-    <v-row v-if="status.isOverflow">
-      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 py-0' : ''">
-        <v-sheet
-          class="overlay"
-          :style="{
-            background: `linear-gradient(transparent, ${
-              $vuetify.theme.isDark ? '#1e1e1e' : 'rgba(255, 255, 255, 1)'
-            })`,
-          }"
-          v-if="!status.showAll"
-        >
-        </v-sheet>
-        <div
-          :class="['d-flex', 'justify-space-between', 'mt-n8', 'align-center']"
-          v-if="!status.showAll && !noExpand"
-        >
-          <slot :overflow="status.isOverflow">
-            <div></div>
-          </slot>
-          <v-chip
-            outlined
-            label
-            :small="dense"
-            @click="
-              dialog ? (status.showDialog = true) : (status.showAll = true)
-            "
-          >
-            <v-icon :dense="dense" :small="dense">
-              {{
-                dialog
-                  ? statics.icons.mdiFullscreen
-                  : statics.icons.mdiChevronDown
-              }}
-            </v-icon>
-            <span class="text-body-2">阅读全文</span>
-          </v-chip>
-        </div>
-        <div
-          :class="['d-flex', 'justify-space-between', dense ? 'pr-sm-1' : '', 'align-center']"
-          v-if="status.showAll && !noExpand"
-        >
-          <slot :overflow="status.isOverflow">
-            <div></div>
-          </slot>
-          <v-chip outlined label :small="dense" @click="status.showAll = false">
-            <v-icon :dense="dense" :small="dense">
-              {{ statics.icons.mdiChevronUp }}
-            </v-icon>
-            <span class="text-body-2">收起</span>
-          </v-chip>
-        </div>
-        <div>
-          <v-dialog
-            v-model="status.showDialog"
-            transition="slide-y-reverse-transition"
-            scrollable
-            width="50vw"
-            :fullscreen="$vuetify.breakpoint.name === 'xs'"
-          >
-            <v-card tile flat>
-              <v-card-title
-                class="pa-0"
-                :style="{
-                  background: $vuetify.theme.isDark ? '#1e1e1e' : '#ffffff',
-                }"
-              >
-                <v-toolbar elevation="0">
-                  <v-toolbar-title class="d-flex">
-                    <v-img src="@/assets/mini-logo.svg" width="42px"></v-img>
-                    <div class="d-flex justify-end flex-column">
-                      <div class="mb-1">阅读全文</div>
-                    </div>
-                  </v-toolbar-title>
-                  <v-spacer></v-spacer>
-                  <div class="mb-1">
-                    <v-icon
-                      @click="status.showDialog = false"
-                      style="transform: translate(0, 2px)"
-                    >
-                      {{ statics.icons.mdiClose }}
-                    </v-icon>
-                  </div>
-                </v-toolbar>
-              </v-card-title>
-              <v-card-text
-                class="px-sm-6 px-4 pt-3"
-                ref="textDialog"
-                :style="{
-                  background: $vuetify.theme.isDark ? '#1e1e1e' : '#ffffff',
-                }"
-              >
-                <span class="text-h5">
-                  <v-icon size="32" style="transform: translate(0, -2px)">{{
-                    statics.icons.mdiSubtitlesOutline
-                  }}</v-icon>
-                  <span class="pl-2">{{ title }}</span>
-                </span>
-                <span
-                  v-html="markdown ? useMarkdown(text) : text"
-                  :class="[
-                    'text-body-1',
-                    markdown ? 'markdown-body' : '',
-                    'text-dialog',
-                    'pt-sm-0',
-                    'pt-2',
-                  ]"
-                ></span>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-        </div>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-<script>
-import useTextContainer from '@/composables/users/comment/useTextContainer';
-import useMarkdown from '@/composables/global/useMarkdown';
-import useAfterRender from '@/composables/global/useAfterRender';
-
-export default {
-  setup(props) {
-    const { statics, status } = useTextContainer();
-
-    if (props.noExpand) {
-      status._showAll = true;
-      Object.defineProperty(status, 'showAll', {
-        get() {
-          return this._showAll;
-        },
-        set(value) {
-          if (props.noExpand) {
-            return;
-          }
-          this._showAll = value;
-        },
-      });
-    }
-
-    return { statics, status, useMarkdown };
-  },
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    dense: {
-      type: Boolean,
-      default: false,
-    },
-    markdown: {
-      type: Boolean,
-      default: false,
-    },
-    maxHeight: {
-      type: [Number, String],
-      default: 100,
-    },
-    dialog: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    noExpand: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  mounted() {
-    useAfterRender(
-      () => {
-        if (this.$refs.textContainer.offsetHeight > this.maxHeight) {
-          this.status.isOverflow = true;
-        }
-      },
-      {
-        retry: true,
-      },
-    );
-  },
-};
-</script>
-
-<style scoped>
-.text-container {
-  display: block;
-  overflow: hidden;
-}
-
-.text-dialog {
-  display: block;
-}
-
-.overlay {
-  height: 40px;
-  transform: translate(0, -40px);
-}
-</style>
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 pb-0 pt-0' : ''">
+        <span
+          :class="[
+            'text-body-1',
+            markdown ? 'markdown-body' : '',
+            'text-container',
+          ]"
+          ref="textContainer"
+          v-html="markdown ? useMarkdown(text) : text"
+          :style="{
+            'max-height':
+              (status.isOverflow & !status.showAll ? maxHeight : statics.inf) +
+              'px',
+          }"
+        ></span>
+      </v-col>
+    </v-row>
+    <v-row v-if="!status.isOverflow">
+      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 py-0' : ''">
+        <slot :overflow="status.isOverflow">
+          <div></div>
+        </slot>
+      </v-col>
+    </v-row>
+    <v-row v-if="status.isOverflow">
+      <v-col cols="12" :class="dense ? 'px-sm-4 px-2 py-0' : ''">
+        <v-sheet
+          class="overlay"
+          :style="{
+            background: `linear-gradient(transparent, ${
+              $vuetify.theme.isDark ? '#1e1e1e' : 'rgba(255, 255, 255, 1)'
+            })`,
+          }"
+          v-if="!status.showAll"
+        >
+        </v-sheet>
+        <div
+          :class="['d-flex', 'justify-space-between', 'mt-n8', 'align-center']"
+          v-if="!status.showAll && !noExpand"
+        >
+          <slot :overflow="status.isOverflow">
+            <div></div>
+          </slot>
+          <v-chip
+            outlined
+            label
+            :small="dense"
+            @click="
+              dialog ? (status.showDialog = true) : (status.showAll = true)
+            "
+          >
+            <v-icon :dense="dense" :small="dense">
+              {{
+                dialog
+                  ? statics.icons.mdiFullscreen
+                  : statics.icons.mdiChevronDown
+              }}
+            </v-icon>
+            <span class="text-body-2">阅读全文</span>
+          </v-chip>
+        </div>
+        <div
+          :class="[
+            'd-flex',
+            'justify-space-between',
+            dense ? 'pr-sm-1' : '',
+            'align-center',
+          ]"
+          v-if="status.showAll && !noExpand"
+        >
+          <slot :overflow="status.isOverflow">
+            <div></div>
+          </slot>
+          <v-chip outlined label :small="dense" @click="status.showAll = false">
+            <v-icon :dense="dense" :small="dense">
+              {{ statics.icons.mdiChevronUp }}
+            </v-icon>
+            <span class="text-body-2">收起</span>
+          </v-chip>
+        </div>
+        <div>
+          <v-dialog
+            v-model="status.showDialog"
+            transition="slide-y-reverse-transition"
+            scrollable
+            width="50vw"
+            :fullscreen="$vuetify.breakpoint.name === 'xs'"
+          >
+            <v-card tile flat>
+              <v-card-title
+                class="pa-0"
+                :style="{
+                  background: $vuetify.theme.isDark ? '#1e1e1e' : '#ffffff',
+                }"
+              >
+                <v-toolbar elevation="0">
+                  <v-toolbar-title class="d-flex">
+                    <v-img src="@/assets/mini-logo.svg" width="42px"></v-img>
+                    <div class="d-flex justify-end flex-column">
+                      <div class="mb-1">阅读全文</div>
+                    </div>
+                  </v-toolbar-title>
+                  <v-spacer></v-spacer>
+                  <div class="mb-1">
+                    <v-icon
+                      @click="status.showDialog = false"
+                      style="transform: translate(0, 2px)"
+                    >
+                      {{ statics.icons.mdiClose }}
+                    </v-icon>
+                  </div>
+                </v-toolbar>
+              </v-card-title>
+              <v-card-text
+                class="px-sm-6 px-4 pt-3"
+                ref="textDialog"
+                :style="{
+                  background: $vuetify.theme.isDark ? '#1e1e1e' : '#ffffff',
+                }"
+              >
+                <span class="text-h5">
+                  <v-icon size="32" style="transform: translate(0, -2px)">{{
+                    statics.icons.mdiSubtitlesOutline
+                  }}</v-icon>
+                  <span class="pl-2">{{ title }}</span>
+                </span>
+                <span
+                  v-html="markdown ? useMarkdown(text) : text"
+                  :class="[
+                    'text-body-1',
+                    markdown ? 'markdown-body' : '',
+                    'text-dialog',
+                    'pt-sm-0',
+                    'pt-2',
+                  ]"
+                ></span>
+              </v-card-text>
+            </v-card>
+          </v-dialog>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import useTextContainer from '@/composables/users/comment/useTextContainer';
+import useMarkdown from '@/composables/global/useMarkdown';
+import useAfterRender from '@/composables/global/useAfterRender';
+
+export default {
+  setup(props) {
+    const { statics, status } = useTextContainer();
+
+    if (props.noExpand) {
+      status._showAll = true;
+      Object.defineProperty(status, 'showAll', {
+        get() {
+          return this._showAll;
+        },
+        set(value) {
+          if (props.noExpand) {
+            return;
+          }
+          this._showAll = value;
+        },
+      });
+    }
+
+    return { statics, status, useMarkdown };
+  },
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
+    markdown: {
+      type: Boolean,
+      default: false,
+    },
+    maxHeight: {
+      type: [Number, String],
+      default: 100,
+    },
+    dialog: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    noExpand: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    useAfterRender(
+      () => {
+        if (this.$refs.textContainer.offsetHeight > this.maxHeight) {
+          this.status.isOverflow = true;
+        }
+      },
+      {
+        retry: true,
+      },
+    );
+  },
+};
+</script>
+
+<style scoped>
+.text-container {
+  display: block;
+  overflow: hidden;
+}
+
+.text-dialog {
+  display: block;
+}
+
+.overlay {
+  height: 40px;
+  transform: translate(0, -40px);
+}
+</style>
diff --git a/src/components/users/forms/Login.vue b/src/components/users/forms/Login.vue
index afee5fa..90a29f3 100644
--- a/src/components/users/forms/Login.vue
+++ b/src/components/users/forms/Login.vue
@@ -12,10 +12,10 @@
       class="pt-6 pt-sm-11 px-6 px-sm-11 pb-0 d-flex justify-space-between"
     >
       <div>
-        <img 
-          class='small-icon' 
-          :src="$vuetify.theme.dark ? logoDark : logoLight" 
-          alt=''
+        <img
+          class="small-icon"
+          :src="$vuetify.theme.dark ? logoDark : logoLight"
+          alt=""
         />
       </div>
       <div>
@@ -33,7 +33,7 @@
       <v-window-item :value="0" style="height: 100%">
         <v-card-text
           class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-          style="height: 100%; min-height: 262px;"
+          style="height: 100%; min-height: 262px"
         >
           <div>
             <div class="font-weight-bold text-h5 pt-2">登录</div>
@@ -74,7 +74,7 @@
       <v-window-item :value="1" style="height: 100%">
         <v-card-text
           class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-          style="height: 100%; min-height: 262px;"
+          style="height: 100%; min-height: 262px"
         >
           <div>
             <div class="text-body-2 py-2 overflow-ellipsis">
@@ -91,10 +91,7 @@
               @submit="$event.preventDefault(), clickNextStep()"
             >
               <v-card-text class="pa-0">
-                <v-text-field
-                  v-model="userData.email"
-                  class="fake-input"
-                >
+                <v-text-field v-model="userData.email" class="fake-input">
                 </v-text-field>
                 <v-text-field
                   v-model="userData.password"
@@ -139,7 +136,7 @@
       <v-window-item :value="2" style="height: 100%">
         <v-card-text
           class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-          style="height: 100%; min-height: 262px;"
+          style="height: 100%; min-height: 262px"
         >
           <div>
             <div class="text-body-2 py-2 overflow-ellipsis">
@@ -157,7 +154,13 @@
               <v-radio-group v-model="userData.resetPasswordMethod">
                 <v-radio value="email" class="black--text">
                   <template v-slot:label>
-                    <div :class="[$vuetify.theme.dark ? 'white--text' : 'black--text']">通过电子邮件发送安全代码</div>
+                    <div
+                      :class="[
+                        $vuetify.theme.dark ? 'white--text' : 'black--text',
+                      ]"
+                    >
+                      通过电子邮件发送安全代码
+                    </div>
                   </template>
                 </v-radio>
               </v-radio-group>
@@ -186,7 +189,7 @@
       <v-window-item :value="3" style="height: 100%">
         <v-card-text
           class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-          style="height: 100%; min-height: 262px;"
+          style="height: 100%; min-height: 262px"
         >
           <div>
             <div class="text-body-2 py-2 overflow-ellipsis">
@@ -239,16 +242,18 @@
               length="6"
               type="number"
               v-model="userData.captcha"
-              @finish="formStatus.isResetPassword ? doResetPassword() : doLogin()"
+              @finish="
+                formStatus.isResetPassword ? doResetPassword() : doLogin()
+              "
               ref="captchaOptInput"
             ></v-otp-input>
           </div>
         </v-card-text>
-      </v-window-item>      
+      </v-window-item>
       <v-window-item :value="4" style="height: 100%">
         <v-card-text
           class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-          style="height: 100%; min-height: 262px;"
+          style="height: 100%; min-height: 262px"
         >
           <div class="text-h5 py-2 overflow-ellipsis">还差最后一步</div>
           <div class="d-flex justify-center py-sm-0 py-4">
@@ -257,15 +262,7 @@
             </v-icon>
           </div>
           <div
-            class="
-              px-0
-              pt-0
-              pb-6 pb-sm-11
-              pt-4 pt-sm-0
-              d-flex
-              flex-column
-              justify-end
-            "
+            class="px-0 pt-0 pb-6 pb-sm-11 pt-4 pt-sm-0 d-flex flex-column justify-end"
           >
             <div class="text-body-1">
               重置密码的邮件已发送至您的邮箱，请点击其中的激活链接以重置您的密码
@@ -278,19 +275,26 @@
 </template>
 
 <script>
-import { inject } from "vue";
-import useLogin from "@/composables/users/forms/useLogin";
-import useForms from "@/composables/users/forms/useForms";
-import useAfterRender from "@/composables/global/useAfterRender";
-import logoDark from "@/assets/logo-white.svg";
-import logoLight from "@/assets/logo.svg";
+import { inject } from 'vue';
+import useLogin from '@/composables/users/forms/useLogin';
+import useForms from '@/composables/users/forms/useForms';
+import useAfterRender from '@/composables/global/useAfterRender';
+import logoDark from '@/assets/logo-white.svg';
+import logoLight from '@/assets/logo.svg';
 
 export default {
   setup() {
     const { formRules } = useForms();
-    const closeDialog = inject("closeDialog");
-    const openDialog = inject("openDialog");
-    const { statics, userData, formStatus, doLogin, getCaptcha, doResetPassword } = useLogin();
+    const closeDialog = inject('closeDialog');
+    const openDialog = inject('openDialog');
+    const {
+      statics,
+      userData,
+      formStatus,
+      doLogin,
+      getCaptcha,
+      doResetPassword,
+    } = useLogin();
     return {
       closeDialog,
       openDialog,
@@ -310,7 +314,10 @@ export default {
       if (this.formStatus.windowStep === 2) {
         this.formStatus.windowStep -= 1;
         this.formStatus.isResetPassword = false;
-      } else if (this.formStatus.windowStep === 3 && (!this.formStatus.isResetPassword)) {
+      } else if (
+        this.formStatus.windowStep === 3 &&
+        !this.formStatus.isResetPassword
+      ) {
         this.formStatus.windowStep = 1;
       } else if (this.formStatus.windowStep > 0) {
         this.formStatus.windowStep -= 1;
@@ -334,12 +341,15 @@ export default {
           retry: true,
           timeout: 300,
         });
-      } else if (this.formStatus.windowStep === 2 && this.userData.resetPasswordMethod !== "") {
-        this.formStatus.windowStep += 1; 
+      } else if (
+        this.formStatus.windowStep === 2 &&
+        this.userData.resetPasswordMethod !== ''
+      ) {
+        this.formStatus.windowStep += 1;
         useAfterRender(() => this.$refs.captchaOptInput.focus(), {
           retry: true,
           timeout: 300,
-        });        
+        });
       }
     },
   },
@@ -374,4 +384,4 @@ export default {
   margin: 0;
   visibility: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/users/profile/AvatarContainer.vue b/src/components/users/profile/AvatarContainer.vue
index 4bfb23b..06a3ab7 100644
--- a/src/components/users/profile/AvatarContainer.vue
+++ b/src/components/users/profile/AvatarContainer.vue
@@ -1,104 +1,104 @@
-<template>
-  <v-card flat :outlined="outlined" :class="[tile ? '' : 'rounded-circle']"
-    :width="size"
-    :height="size"
-  >
-    <v-avatar
-      :tile="tile"
-      :color="color"
-      :size="size"
-      :class="[tile ? 'rounded' : '']"
-    >
-      <span
-        :class="[
-          adoptiveFont(slice ? slicedName : name),
-          fontColor,
-        ]"
-        v-if="src === ''"
-        >{{ slice ? slicedName : name }}</span
-      >
-      <v-img :src="src" alt="Avatar" :aspect-ratio="aspectRatio" v-else></v-img>      
-    </v-avatar>
-    <slot></slot>
-  </v-card>
-</template>
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      default: "",
-    },
-    src: {
-      type: String,
-      default: "",
-    },
-    aspectRatio: {
-      type: Number,
-      default: 1,
-    },
-    size: {
-      type: [Number, String],
-      default: 160,
-    },
-    tile: {
-      type: Boolean,
-      default: false,
-    },
-    color: {
-      type: String,
-      default: "blue",
-    },
-    fontColor: {
-      type: String,
-      default: "white--text",
-    },
-    'font-size': {
-      type: String,
-      default: undefined,
-    },    
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    slice: {
-      type: Boolean, 
-      default: false
-    }
-  },
-  computed: {
-    slicedName() {
-      // now we use the simpler policy to slice the name
-      return this.name.slice(0, 1).toUpperCase();
-      // return escape(this.name.slice(0, 2)).indexOf("%u") >= 0
-      //   ? this.name.slice(0, 1)
-      //   : this.name.slice(0, 2);
-    },
-  }, 
-  methods: {
-    adoptiveFont() {
-      if (!this.fontSize) {
-        if (!this.small) {
-          if (this.size > 50) {
-            return "text-h3";
-          } else {
-            return "text-h6";
-          }
-        } else {
-          if (this.name.length >= 3) {
-            return "text-body-2";
-          } else {
-            return "text-body-1";
-          }
-        }
-      } else {
-        return this.fontSize
-      }
-    }
-  }
-};
-</script>
\ No newline at end of file
+<template>
+  <v-card
+    flat
+    :outlined="outlined"
+    :class="[tile ? '' : 'rounded-circle']"
+    :width="size"
+    :height="size"
+  >
+    <v-avatar
+      :tile="tile"
+      :color="color"
+      :size="size"
+      :class="[tile ? 'rounded' : '']"
+    >
+      <span
+        :class="[adoptiveFont(slice ? slicedName : name), fontColor]"
+        v-if="src === ''"
+        >{{ slice ? slicedName : name }}</span
+      >
+      <v-img :src="src" alt="Avatar" :aspect-ratio="aspectRatio" v-else></v-img>
+    </v-avatar>
+    <slot></slot>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+    aspectRatio: {
+      type: Number,
+      default: 1,
+    },
+    size: {
+      type: [Number, String],
+      default: 160,
+    },
+    tile: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: 'blue',
+    },
+    fontColor: {
+      type: String,
+      default: 'white--text',
+    },
+    'font-size': {
+      type: String,
+      default: undefined,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    slice: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    slicedName() {
+      // now we use the simpler policy to slice the name
+      return this.name.slice(0, 1).toUpperCase();
+      // return escape(this.name.slice(0, 2)).indexOf("%u") >= 0
+      //   ? this.name.slice(0, 1)
+      //   : this.name.slice(0, 2);
+    },
+  },
+  methods: {
+    adoptiveFont() {
+      if (!this.fontSize) {
+        if (!this.small) {
+          if (this.size > 50) {
+            return 'text-h3';
+          } else {
+            return 'text-h6';
+          }
+        } else {
+          if (this.name.length >= 3) {
+            return 'text-body-2';
+          } else {
+            return 'text-body-1';
+          }
+        }
+      } else {
+        return this.fontSize;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/users/profile/EditProfile.vue b/src/components/users/profile/EditProfile.vue
index 9de3133..44c0a45 100644
--- a/src/components/users/profile/EditProfile.vue
+++ b/src/components/users/profile/EditProfile.vue
@@ -1,379 +1,418 @@
-<template>
-  <div>
-    <v-btn
-      outlined
-      color="primary"
-      width="100"
-      @click="formStatus.editProfile = true"
-    >
-      <v-icon size="20">
-        {{ statics.icons.mdiAccountEditOutline }}
-      </v-icon>
-      <span>个人设置</span>
-    </v-btn>
-    <v-dialog v-model="formStatus.editProfile" max-width="520"
-      :fullscreen="$vuetify.breakpoint.name === 'xs'"
-      :transition="
-        $vuetify.breakpoint.name === 'xs'
-          ? 'dialog-bottom-transition'
-          : 'scale-transition'
-      "      
-    >
-      <v-card
-        :loading="formStatus.loading"        
-        style="overflow-y: hidden"
-        :class="
-          $vuetify.breakpoint.name === 'xs' ? '' : 'd-flex justify-space-between flex-column'
-        " 
-      >
-        <v-card-title
-          class="pt-6 pt-sm-11 px-6 px-sm-11 pb-0 d-flex justify-space-between"
-        >
-          <div>
-            <v-img 
-              :src="$vuetify.theme.dark ? logoDark : logoLight" 
-              width="93.09px">
-          </v-img>
-          </div>
-          <div>
-            <v-btn
-              icon
-              style="transform: translate(0, -1px)"
-              @click="formStatus.editProfile = false"
-              v-if="$vuetify.breakpoint.name === 'xs'"
-            >
-              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
-            </v-btn>
-          </div>
-        </v-card-title>
-        <v-window v-model="formStatus.windowStep" touchless
-          style="height: 100%"
-        >
-          <v-window-item :value="0" style="height: 100%">
-            <v-card-text
-              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-              style="height: 100%"
-            >
-              <div>
-                <div class="font-weight-bold text-h5 pt-2">个人信息</div>
-                <v-form v-model="formStatus.nicknameFormValid" 
-                  @submit="$event.preventDefault(), doEditProfile()"
-                >
-                  <div class="d-flex">
-                    <div class="d-flex justify-center flex-column mr-sm-10 mr-6">
-                      <div class="text-body-1 font-weight-bold">
-                        用户名
-                      </div>
-                    </div>
-                    <v-text-field
-                      v-model="userData.nickname"
-                      :rules="[ formRules.required, formRules.nickname ]"
-                    ></v-text-field>
-                  </div>
-                  <div class="d-flex">
-                    <div class="d-flex justify-center flex-column mr-sm-6 mr-2">
-                      <div class="text-body-1 font-weight-bold">
-                        真实姓名
-                      </div>
-                    </div>
-                    <v-text-field
-                      v-model="userData.realname"
-                      :rules="[ formRules.realname ]"
-                    ></v-text-field>                    
-                  </div>
-                  <div class="d-flex">
-                    <div class="d-flex justify-center flex-column mr-sm-6 mr-2">
-                      <div class="text-body-1 font-weight-bold">
-                        入学时间
-                      </div>
-                    </div>
-                      <v-select
-                        v-model="userData.year"
-                        :items="yearItems"
-                      ></v-select>
-                  </div> 
-                  <div class="d-flex">
-                    <div class="d-flex justify-center flex-column mr-sm-14 mr-10">
-                      <div class="text-body-1 font-weight-bold">
-                        学段
-                      </div>
-                    </div>
-                      <v-select
-                        v-model="userData.grade"
-                        :items="gradeItems"
-                      ></v-select>
-                  </div>
-                  <div class="d-flex justify-space-between">
-                    <div class="d-flex justify-center flex-column mr-sm-10 mr-6">
-                      <div class="text-body-1 font-weight-bold">
-                        可见性
-                      </div>
-                    </div>
-                      <v-select
-                        v-model="userData.is_anonymous"
-                        :items="visibleItems"
-                      ></v-select>
-                  </div>                                      
-                </v-form>
-              </div>
-              <div
-                class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-space-between"
-              >
-                <div>
-                  <v-btn
-                    @click="clickNextStep()"
-                    elevation="0"
-                    class="px-4"
-                    color="primary"
-                  >
-                    修改密码
-                  </v-btn>                  
-                </div>
-                <div>
-                  <v-btn
-                    @click="doEditProfile()"
-                    elevation="0"
-                    class="px-8"
-                    color="primary"
-                  >
-                    保存
-                  </v-btn>
-                  <v-btn
-                    @click="formStatus.editProfile = false"
-                    elevation="0"
-                    class="px-8 ml-4"
-                  >
-                    取消
-                  </v-btn> 
-                </div>
-              </div>
-            </v-card-text>
-          </v-window-item>
-          <v-window-item :value="1" style="height: 100%">
-            <v-card-text           
-              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-              style="height: 100%"
-            >            
-              <div>
-                <div class="text-body-2 py-2 overflow-ellipsis">
-                  <v-btn icon x-small @click="clickLastStep()">
-                    <v-icon>
-                      {{ statics.icons.mdiArrowLeft }}
-                    </v-icon>
-                  </v-btn>
-                  {{ global.userProfile.email }}
-                </div>
-                <div class="font-weight-bold text-h5">输入旧密码</div>
-                <v-form v-model="formStatus.oldPasswordFormValid" 
-                  @submit="$event.preventDefault(), clickNextStep()"
-                >
-                  <v-card-text class="pa-0">
-                    <v-text-field
-                      v-model="passwordData.oldPassword"
-                      :type="formStatus.oldPasswordVisible ? 'text' : 'password'"
-                      :rules="[formRules.required, formRules.password]"                      
-                      :append-icon="
-                        formStatus.oldPasswordVisible
-                          ? statics.icons.mdiEyeOff
-                          : statics.icons.mdiEye
-                      "
-                      ref="oldPasswordTextField"
-                      @click:append="
-                        formStatus.oldPasswordVisible = !formStatus.oldPasswordVisible
-                      "
-                    ></v-text-field>
-                  </v-card-text>
-                </v-form>
-              </div>
-              <div
-                class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-end"
-              >
-                <v-btn
-                  @click="clickNextStep()"
-                  elevation="0"
-                  class="px-8"
-                  color="primary"
-                >
-                  下一步
-                </v-btn>
-              </div>
-            </v-card-text>            
-          </v-window-item>
-          <v-window-item :value="2" style="height: 100%">
-            <v-card-text           
-              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-              style="height: 100%"
-            >            
-              <div>
-                <div class="text-body-2 py-2 overflow-ellipsis">
-                  <v-btn icon x-small @click="clickLastStep()">
-                    <v-icon>
-                      {{ statics.icons.mdiArrowLeft }}
-                    </v-icon>
-                  </v-btn>
-                  {{ global.userProfile.email }}
-                </div>
-                <div class="font-weight-bold text-h5">输入新密码</div>
-                <v-form v-model="formStatus.newPasswordFormValid" 
-                  @submit="$event.preventDefault(), clickNextStep()"
-                >
-                  <v-card-text class="pa-0">
-                    <v-text-field
-                      v-model="passwordData.newPassword"
-                      :type="formStatus.newPasswordVisible ? 'text' : 'password'"
-                      :rules="[formRules.required, formRules.password]"                      
-                      :append-icon="
-                        formStatus.newPasswordVisible
-                          ? statics.icons.mdiEyeOff
-                          : statics.icons.mdiEye
-                      "
-                      ref="newPasswordTextField"
-                      @click:append="
-                        formStatus.newPasswordVisible = !formStatus.newPasswordVisible
-                      "
-                    ></v-text-field>
-                  </v-card-text>
-                </v-form>
-              </div>
-              <div
-                class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-end"
-              >
-                <v-btn
-                  @click="clickNextStep()"
-                  elevation="0"
-                  class="px-8"
-                  color="primary"
-                >
-                  下一步
-                </v-btn>
-              </div>
-            </v-card-text>            
-          </v-window-item>
-          <v-window-item :value="3" style="height: 100%">
-            <v-card-text  
-              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
-              style="height: 100%; max-height: 338px"
-            > 
-              <div>
-                <div class="text-body-2 py-2 overflow-ellipsis">
-                  <v-btn icon x-small @click="clickLastStep()">
-                    <v-icon>
-                      {{ statics.icons.mdiArrowLeft }}
-                    </v-icon>
-                  </v-btn>
-                  {{ global.userProfile.email }}
-                </div>
-                <div class="text-body-2 py-0" v-if="
-                  (!formStatus.loading) && 
-                  (!formStatus.captchaLoading) && 
-                  (formStatus.captchaBase64 !== '')"
-                >
-                  <span>看不清？</span>
-                  <span class="inline-link" @click="getCaptcha()"
-                  >点击刷新</span>
-                </div>
-                <div v-else style="height: 20px; width: 100%;"></div>            
-                <div class="d-flex justify-center pt-4 pt-sm-3">
-                  <div style="width: 200px" class="d-flex justify-center">
-                    <div v-if="formStatus.captchaLoading"
-                      class="pt-5"
-                    >
-                      <v-progress-circular
-                        indeterminate
-                        color="primary"
-                        size="48"
-                      ></v-progress-circular>
-                    </div>
-                    <div v-else-if="formStatus.captchaBase64 === ''"
-                      class="pt-5"
-                    >
-                      <div>验证码获取失败</div>
-                      <div class="inline-link d-flex justify-center inline-link"
-                      >点击重试</div>
-                    </div>
-                    <v-img                  
-                      :src="`data:image/png;base64,${formStatus.captchaBase64}`"
-                      v-else
-                    ></v-img>
-                  </div>
-                </div>  
-              </div>
-              <div class="pb-6 pb-sm-11 pt-4 pt-sm-6 d-flex justify-center">
-                <v-otp-input
-                  length="6"
-                  type="number"
-                  v-model="passwordData.captcha"
-                  @finish="doChangePassword"
-                  ref="captchaOptInput"
-                  style="max-width: 338px"
-                ></v-otp-input>
-              </div>                  
-            </v-card-text>
-          </v-window-item>                    
-        </v-window>  
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-<script>
-import useEditProfile from "@/composables/users/profile/useEditProfile";
-import useForms from "@/composables/users/forms/useForms"
-import { gradeItems, yearItems, visibleItems } from "@/composables/global/useStaticData"
-import useAfterRender from "@/composables/global/useAfterRender";
-import { inject } from "vue"
-import logoDark from "@/assets/logo-white.svg";
-import logoLight from "@/assets/logo.svg";
-
-export default {
-  setup() {
-    const { statics, userData, passwordData, formStatus, doEditProfile, doChangePassword, getCaptcha } = useEditProfile();
-    const { formRules } = useForms()
-
-    const global = inject("global");
-
-    return { 
-      statics, 
-      userData, 
-      passwordData, 
-      formStatus, 
-      doEditProfile, 
-      doChangePassword, 
-      getCaptcha, 
-      global, 
-      formRules, 
-      gradeItems,
-      yearItems,
-      visibleItems, 
-      logoDark,
-      logoLight
-    };
-  },
-  methods: {
-    clickLastStep() {
-      if (this.formStatus.windowStep > 0) {
-        this.formStatus.windowStep -= 1;
-      }
-    }, 
-
-    clickNextStep() {
-      if (this.formStatus.windowStep === 0 && !this.formStatus.loading) {
-        this.formStatus.windowStep += 1;
-        this.getCaptcha()
-        useAfterRender(() => this.$refs.oldPasswordTextField.focus(), { retry: true, timeout: 300 });
-      } else if (this.formStatus.windowStep === 1 && this.formStatus.oldPasswordFormValid) {
-        this.formStatus.windowStep += 1;
-        useAfterRender(() => this.$refs.newPasswordTextField.focus(), { retry: true, timeout: 300 });
-      } else if (this.formStatus.windowStep === 2 && this.formStatus.newPasswordFormValid) {
-        this.formStatus.windowStep += 1;
-        useAfterRender(() => this.$refs.captchaOptInput.focus(), { retry: true, timeout: 300 });        
-      }
-    }
-  }
-};
-</script>
-<style scoped>
-.inline-link {
-  color: #0067bf;
-  cursor: pointer;
-}
-</style>
\ No newline at end of file
+<template>
+  <div>
+    <v-btn
+      outlined
+      color="primary"
+      width="100"
+      @click="formStatus.editProfile = true"
+    >
+      <v-icon size="20">
+        {{ statics.icons.mdiAccountEditOutline }}
+      </v-icon>
+      <span>个人设置</span>
+    </v-btn>
+    <v-dialog
+      v-model="formStatus.editProfile"
+      max-width="520"
+      :fullscreen="$vuetify.breakpoint.name === 'xs'"
+      :transition="
+        $vuetify.breakpoint.name === 'xs'
+          ? 'dialog-bottom-transition'
+          : 'scale-transition'
+      "
+    >
+      <v-card
+        :loading="formStatus.loading"
+        style="overflow-y: hidden"
+        :class="
+          $vuetify.breakpoint.name === 'xs'
+            ? ''
+            : 'd-flex justify-space-between flex-column'
+        "
+      >
+        <v-card-title
+          class="pt-6 pt-sm-11 px-6 px-sm-11 pb-0 d-flex justify-space-between"
+        >
+          <div>
+            <v-img
+              :src="$vuetify.theme.dark ? logoDark : logoLight"
+              width="93.09px"
+            >
+            </v-img>
+          </div>
+          <div>
+            <v-btn
+              icon
+              style="transform: translate(0, -1px)"
+              @click="formStatus.editProfile = false"
+              v-if="$vuetify.breakpoint.name === 'xs'"
+            >
+              <v-icon>{{ statics.icons.mdiWindowClose }}</v-icon>
+            </v-btn>
+          </div>
+        </v-card-title>
+        <v-window
+          v-model="formStatus.windowStep"
+          touchless
+          style="height: 100%"
+        >
+          <v-window-item :value="0" style="height: 100%">
+            <v-card-text
+              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
+              style="height: 100%"
+            >
+              <div>
+                <div class="font-weight-bold text-h5 pt-2">个人信息</div>
+                <v-form
+                  v-model="formStatus.nicknameFormValid"
+                  @submit="$event.preventDefault(), doEditProfile()"
+                >
+                  <div class="d-flex">
+                    <div
+                      class="d-flex justify-center flex-column mr-sm-10 mr-6"
+                    >
+                      <div class="text-body-1 font-weight-bold">用户名</div>
+                    </div>
+                    <v-text-field
+                      v-model="userData.nickname"
+                      :rules="[formRules.required, formRules.nickname]"
+                    ></v-text-field>
+                  </div>
+                  <div class="d-flex">
+                    <div class="d-flex justify-center flex-column mr-sm-6 mr-2">
+                      <div class="text-body-1 font-weight-bold">真实姓名</div>
+                    </div>
+                    <v-text-field
+                      v-model="userData.realname"
+                      :rules="[formRules.realname]"
+                    ></v-text-field>
+                  </div>
+                  <div class="d-flex">
+                    <div class="d-flex justify-center flex-column mr-sm-6 mr-2">
+                      <div class="text-body-1 font-weight-bold">入学时间</div>
+                    </div>
+                    <v-select
+                      v-model="userData.year"
+                      :items="yearItems"
+                    ></v-select>
+                  </div>
+                  <div class="d-flex">
+                    <div
+                      class="d-flex justify-center flex-column mr-sm-14 mr-10"
+                    >
+                      <div class="text-body-1 font-weight-bold">学段</div>
+                    </div>
+                    <v-select
+                      v-model="userData.grade"
+                      :items="gradeItems"
+                    ></v-select>
+                  </div>
+                  <div class="d-flex justify-space-between">
+                    <div
+                      class="d-flex justify-center flex-column mr-sm-10 mr-6"
+                    >
+                      <div class="text-body-1 font-weight-bold">可见性</div>
+                    </div>
+                    <v-select
+                      v-model="userData.is_anonymous"
+                      :items="visibleItems"
+                    ></v-select>
+                  </div>
+                </v-form>
+              </div>
+              <div class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-space-between">
+                <div>
+                  <v-btn
+                    @click="clickNextStep()"
+                    elevation="0"
+                    class="px-4"
+                    color="primary"
+                  >
+                    修改密码
+                  </v-btn>
+                </div>
+                <div>
+                  <v-btn
+                    @click="doEditProfile()"
+                    elevation="0"
+                    class="px-8"
+                    color="primary"
+                  >
+                    保存
+                  </v-btn>
+                  <v-btn
+                    @click="formStatus.editProfile = false"
+                    elevation="0"
+                    class="px-8 ml-4"
+                  >
+                    取消
+                  </v-btn>
+                </div>
+              </div>
+            </v-card-text>
+          </v-window-item>
+          <v-window-item :value="1" style="height: 100%">
+            <v-card-text
+              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
+              style="height: 100%"
+            >
+              <div>
+                <div class="text-body-2 py-2 overflow-ellipsis">
+                  <v-btn icon x-small @click="clickLastStep()">
+                    <v-icon>
+                      {{ statics.icons.mdiArrowLeft }}
+                    </v-icon>
+                  </v-btn>
+                  {{ global.userProfile.email }}
+                </div>
+                <div class="font-weight-bold text-h5">输入旧密码</div>
+                <v-form
+                  v-model="formStatus.oldPasswordFormValid"
+                  @submit="$event.preventDefault(), clickNextStep()"
+                >
+                  <v-card-text class="pa-0">
+                    <v-text-field
+                      v-model="passwordData.oldPassword"
+                      :type="
+                        formStatus.oldPasswordVisible ? 'text' : 'password'
+                      "
+                      :rules="[formRules.required, formRules.password]"
+                      :append-icon="
+                        formStatus.oldPasswordVisible
+                          ? statics.icons.mdiEyeOff
+                          : statics.icons.mdiEye
+                      "
+                      ref="oldPasswordTextField"
+                      @click:append="
+                        formStatus.oldPasswordVisible =
+                          !formStatus.oldPasswordVisible
+                      "
+                    ></v-text-field>
+                  </v-card-text>
+                </v-form>
+              </div>
+              <div class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-end">
+                <v-btn
+                  @click="clickNextStep()"
+                  elevation="0"
+                  class="px-8"
+                  color="primary"
+                >
+                  下一步
+                </v-btn>
+              </div>
+            </v-card-text>
+          </v-window-item>
+          <v-window-item :value="2" style="height: 100%">
+            <v-card-text
+              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
+              style="height: 100%"
+            >
+              <div>
+                <div class="text-body-2 py-2 overflow-ellipsis">
+                  <v-btn icon x-small @click="clickLastStep()">
+                    <v-icon>
+                      {{ statics.icons.mdiArrowLeft }}
+                    </v-icon>
+                  </v-btn>
+                  {{ global.userProfile.email }}
+                </div>
+                <div class="font-weight-bold text-h5">输入新密码</div>
+                <v-form
+                  v-model="formStatus.newPasswordFormValid"
+                  @submit="$event.preventDefault(), clickNextStep()"
+                >
+                  <v-card-text class="pa-0">
+                    <v-text-field
+                      v-model="passwordData.newPassword"
+                      :type="
+                        formStatus.newPasswordVisible ? 'text' : 'password'
+                      "
+                      :rules="[formRules.required, formRules.password]"
+                      :append-icon="
+                        formStatus.newPasswordVisible
+                          ? statics.icons.mdiEyeOff
+                          : statics.icons.mdiEye
+                      "
+                      ref="newPasswordTextField"
+                      @click:append="
+                        formStatus.newPasswordVisible =
+                          !formStatus.newPasswordVisible
+                      "
+                    ></v-text-field>
+                  </v-card-text>
+                </v-form>
+              </div>
+              <div class="px-0 pt-4 pb-6 pb-sm-11 d-flex justify-end">
+                <v-btn
+                  @click="clickNextStep()"
+                  elevation="0"
+                  class="px-8"
+                  color="primary"
+                >
+                  下一步
+                </v-btn>
+              </div>
+            </v-card-text>
+          </v-window-item>
+          <v-window-item :value="3" style="height: 100%">
+            <v-card-text
+              class="px-6 px-sm-11 py-0 d-flex justify-sm-space-between flex-column"
+              style="height: 100%; max-height: 338px"
+            >
+              <div>
+                <div class="text-body-2 py-2 overflow-ellipsis">
+                  <v-btn icon x-small @click="clickLastStep()">
+                    <v-icon>
+                      {{ statics.icons.mdiArrowLeft }}
+                    </v-icon>
+                  </v-btn>
+                  {{ global.userProfile.email }}
+                </div>
+                <div
+                  class="text-body-2 py-0"
+                  v-if="
+                    !formStatus.loading &&
+                    !formStatus.captchaLoading &&
+                    formStatus.captchaBase64 !== ''
+                  "
+                >
+                  <span>看不清？</span>
+                  <span class="inline-link" @click="getCaptcha()"
+                    >点击刷新</span
+                  >
+                </div>
+                <div v-else style="height: 20px; width: 100%"></div>
+                <div class="d-flex justify-center pt-4 pt-sm-3">
+                  <div style="width: 200px" class="d-flex justify-center">
+                    <div v-if="formStatus.captchaLoading" class="pt-5">
+                      <v-progress-circular
+                        indeterminate
+                        color="primary"
+                        size="48"
+                      ></v-progress-circular>
+                    </div>
+                    <div
+                      v-else-if="formStatus.captchaBase64 === ''"
+                      class="pt-5"
+                    >
+                      <div>验证码获取失败</div>
+                      <div
+                        class="inline-link d-flex justify-center inline-link"
+                      >
+                        点击重试
+                      </div>
+                    </div>
+                    <v-img
+                      :src="`data:image/png;base64,${formStatus.captchaBase64}`"
+                      v-else
+                    ></v-img>
+                  </div>
+                </div>
+              </div>
+              <div class="pb-6 pb-sm-11 pt-4 pt-sm-6 d-flex justify-center">
+                <v-otp-input
+                  length="6"
+                  type="number"
+                  v-model="passwordData.captcha"
+                  @finish="doChangePassword"
+                  ref="captchaOptInput"
+                  style="max-width: 338px"
+                ></v-otp-input>
+              </div>
+            </v-card-text>
+          </v-window-item>
+        </v-window>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+import useEditProfile from '@/composables/users/profile/useEditProfile';
+import useForms from '@/composables/users/forms/useForms';
+import {
+  gradeItems,
+  yearItems,
+  visibleItems,
+} from '@/composables/global/useStaticData';
+import useAfterRender from '@/composables/global/useAfterRender';
+import { inject } from 'vue';
+import logoDark from '@/assets/logo-white.svg';
+import logoLight from '@/assets/logo.svg';
+
+export default {
+  setup() {
+    const {
+      statics,
+      userData,
+      passwordData,
+      formStatus,
+      doEditProfile,
+      doChangePassword,
+      getCaptcha,
+    } = useEditProfile();
+    const { formRules } = useForms();
+
+    const global = inject('global');
+
+    return {
+      statics,
+      userData,
+      passwordData,
+      formStatus,
+      doEditProfile,
+      doChangePassword,
+      getCaptcha,
+      global,
+      formRules,
+      gradeItems,
+      yearItems,
+      visibleItems,
+      logoDark,
+      logoLight,
+    };
+  },
+  methods: {
+    clickLastStep() {
+      if (this.formStatus.windowStep > 0) {
+        this.formStatus.windowStep -= 1;
+      }
+    },
+
+    clickNextStep() {
+      if (this.formStatus.windowStep === 0 && !this.formStatus.loading) {
+        this.formStatus.windowStep += 1;
+        this.getCaptcha();
+        useAfterRender(() => this.$refs.oldPasswordTextField.focus(), {
+          retry: true,
+          timeout: 300,
+        });
+      } else if (
+        this.formStatus.windowStep === 1 &&
+        this.formStatus.oldPasswordFormValid
+      ) {
+        this.formStatus.windowStep += 1;
+        useAfterRender(() => this.$refs.newPasswordTextField.focus(), {
+          retry: true,
+          timeout: 300,
+        });
+      } else if (
+        this.formStatus.windowStep === 2 &&
+        this.formStatus.newPasswordFormValid
+      ) {
+        this.formStatus.windowStep += 1;
+        useAfterRender(() => this.$refs.captchaOptInput.focus(), {
+          retry: true,
+          timeout: 300,
+        });
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.inline-link {
+  color: #0067bf;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/users/profile/Profile.vue b/src/components/users/profile/Profile.vue
index 2fb285c..c8dcb21 100644
--- a/src/components/users/profile/Profile.vue
+++ b/src/components/users/profile/Profile.vue
@@ -1,108 +1,102 @@
-<template>
-  <div>
-    <div
-      class="d-flex justify-center"
-      :style="{
-        transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '',
-      }"
-    >
-      <div>
-        <AvatarContainer
-          :name="userProfile.nickname"
-          slice
-          :src="userProfile.avatar"
-          :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
-          :outlined="$vuetify.breakpoint.mdAndDown"
-        >
-          <v-overlay absolute v-if="isSelf">
-            <div>
-              <v-file-input
-                dense
-                :rules="statics.avatarRules"
-                accept="image/jpg, image/jpeg, image/png"
-                :prepend-icon="statics.icons.mdiCamera"
-                @change="doChangeAvatar"
-                hide-input
-                hide-details
-                style="transform: translate(7px, 0px) scale(1.5); opacity: 0.6"
-              ></v-file-input>
-            </div>
-          </v-overlay>
-        </AvatarContainer>
-      </div>
-    </div>
-    <div
-      class="d-flex justify-center pt-5"
-      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
-    >
-      <div class="text-h5 font-weight-bold single-line-limit">
-        {{ userProfile.nickname }}
-      </div>
-    </div>
-    <div
-      class="d-flex justify-center pt-3"
-      v-if="isSelf || !userProfile.is_anonymous"
-    >
-      <div class="grey--text text--darken-2">
-        <span v-if="userProfile.year && userProfile.year != '暂不透露'"
-          >{{ userProfile.year }}级</span
-        >
-        <span v-if="userProfile.grade && userProfile.grade != '暂不透露'">{{
-          userProfile.grade
-        }}</span>
-        <span v-if="userProfile.realname">{{ userProfile.realname }}</span>
-      </div>
-    </div>
-    <div
-      class="d-flex justify-center pt-3"
-      v-if="isSelf || !userProfile.is_anonymous"
-    >
-      <div class="grey--text text--darken-2 single-line-limit">
-        <span>{{ userProfile.email }}</span>
-      </div>
-    </div>
-    <div
-      class="d-flex justify-center pt-3"
-      v-if="userProfile.invitation_code"
-    >
-      <div class="grey--text text--darken-2 single-line-limit">
-        <span>邀请码：{{ userProfile.invitation_code }}</span>
-      </div>
-    </div>
-    <div
-      class="d-flex justify-center pt-3"
-      v-if="userProfile.reward>=0"
-    >
-      <div class="grey--text text--darken-2 single-line-limit">
-        <span>已获赏金：{{ userProfile.reward / 100 }}元</span>
-      </div>
-    </div>
-    <div class="d-flex justify-center pt-6" v-if="isSelf">
-      <EditProfile />
-    </div>
-  </div>
-</template>
-<script>
-import useProfile from '@/composables/users/profile/useProfile';
-import EditProfile from '@/components/users/profile/EditProfile';
-import AvatarContainer from '@/components/users/profile/AvatarContainer';
-import { inject } from 'vue';
-
-export default {
-  components: { EditProfile, AvatarContainer },
-  setup() {
-    const { userProfile, statics, doChangeAvatar } = useProfile();
-
-    const isSelf = inject('isSelf');
-    return { userProfile, statics, doChangeAvatar, isSelf };
-  },
-};
-</script>
-
-<style scoped>
-.single-line-limit {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
+<template>
+  <div>
+    <div
+      class="d-flex justify-center"
+      :style="{
+        transform: $vuetify.breakpoint.mdAndDown ? 'translate(0, -76px)' : '',
+      }"
+    >
+      <div>
+        <AvatarContainer
+          :name="userProfile.nickname"
+          slice
+          :src="userProfile.avatar"
+          :size="$vuetify.breakpoint.name === 'xs' ? 110 : 120"
+          :outlined="$vuetify.breakpoint.mdAndDown"
+        >
+          <v-overlay absolute v-if="isSelf">
+            <div>
+              <v-file-input
+                dense
+                :rules="statics.avatarRules"
+                accept="image/jpg, image/jpeg, image/png"
+                :prepend-icon="statics.icons.mdiCamera"
+                @change="doChangeAvatar"
+                hide-input
+                hide-details
+                style="transform: translate(7px, 0px) scale(1.5); opacity: 0.6"
+              ></v-file-input>
+            </div>
+          </v-overlay>
+        </AvatarContainer>
+      </div>
+    </div>
+    <div
+      class="d-flex justify-center pt-5"
+      :style="{ 'margin-top': $vuetify.breakpoint.mdAndDown ? '-76px' : '0' }"
+    >
+      <div class="text-h5 font-weight-bold single-line-limit">
+        {{ userProfile.nickname }}
+      </div>
+    </div>
+    <div
+      class="d-flex justify-center pt-3"
+      v-if="isSelf || !userProfile.is_anonymous"
+    >
+      <div class="grey--text text--darken-2">
+        <span v-if="userProfile.year && userProfile.year != '暂不透露'"
+          >{{ userProfile.year }}级</span
+        >
+        <span v-if="userProfile.grade && userProfile.grade != '暂不透露'">{{
+          userProfile.grade
+        }}</span>
+        <span v-if="userProfile.realname">{{ userProfile.realname }}</span>
+      </div>
+    </div>
+    <div
+      class="d-flex justify-center pt-3"
+      v-if="isSelf || !userProfile.is_anonymous"
+    >
+      <div class="grey--text text--darken-2 single-line-limit">
+        <span>{{ userProfile.email }}</span>
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-3" v-if="userProfile.invitation_code">
+      <div class="grey--text text--darken-2 single-line-limit">
+        <span>邀请码：{{ userProfile.invitation_code }}</span>
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-3" v-if="userProfile.reward >= 0">
+      <div class="grey--text text--darken-2 single-line-limit">
+        <span>已获赏金：{{ userProfile.reward / 100 }}元</span>
+      </div>
+    </div>
+    <div class="d-flex justify-center pt-6" v-if="isSelf">
+      <EditProfile />
+    </div>
+  </div>
+</template>
+<script>
+import useProfile from '@/composables/users/profile/useProfile';
+import EditProfile from '@/components/users/profile/EditProfile';
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import { inject } from 'vue';
+
+export default {
+  components: { EditProfile, AvatarContainer },
+  setup() {
+    const { userProfile, statics, doChangeAvatar } = useProfile();
+
+    const isSelf = inject('isSelf');
+    return { userProfile, statics, doChangeAvatar, isSelf };
+  },
+};
+</script>
+
+<style scoped>
+.single-line-limit {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/composables/courses/all/useCourseAll.js b/src/composables/courses/all/useCourseAll.js
index 0ec6310..d59392f 100644
--- a/src/composables/courses/all/useCourseAll.js
+++ b/src/composables/courses/all/useCourseAll.js
@@ -1,196 +1,247 @@
-import { provide, reactive, ref, onMounted, inject, toRefs, watch, computed } from "vue"
-import { instituteInfo } from "@/composables/global/useStaticData";
-import useDebounce from "@/composables/global/useDebounce"
-import useWatching from "@/composables/global/useWatching"
-import useFetching from "@/composables/global/useFetching"
-import { sortCmp, averageOf, notEqual } from "@/composables/global/useArrayUtils"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import { enoughDataThreshold } from "@/composables/global/useParseScore"
-
-const baseStatistic = {
-    total: 0,
-    count: (() => {
-        let ret = {}
-        Object.keys(instituteInfo).filter(key => key !== '').forEach(key => {
-            ret[key] = 0
-        })
-        return ret
-    })(),
-}
-
-export default () => {
-
-    const showSnackbar = inject("showSnackbar")
-    const searchInput = inject("searchInput")
-    const savedCourseAllStatus = inject("savedCourseAllStatus")
-    const savedCourseAllFilterStatus = inject("savedCourseAllFilterStatus")
-
-
-
-    const courseRawText = ref([])
-    const courseText = computed(() => courseRawText.value.filter(course =>
-      matchSearchCourse(course) && matchFilterCourse(course) && filterInvalidCourse(course)));
-    const courseStatistic = computed(() => {
-        const courseSearchedText = courseRawText.value.filter(matchSearchCourse);
-        if (courseSearchedText.length === 0) {
-            return baseStatistic
-        }
-        const res = { ...baseStatistic, count: { ...baseStatistic.count } }
-        res.total = courseSearchedText.length
-        const schools = Object.keys(res.count).filter((key) => key != "__ob__")
-        for (let key in res.count) {
-            res.count[key] = 0
-        }
-        for (let course of courseSearchedText) {
-            if (schools.indexOf(course.institute) >= 0) {
-                res.count[course.institute]++
-            } else {
-                res.count["其他学院"]++
-            }
-        }
-        return res
-    })
-
-
-
-    const status = reactive({
-        loading: true,
-        ...toRefs(savedCourseAllStatus),
-    })
-
-    const courseFilterStatus = reactive({
-        ...toRefs(savedCourseAllFilterStatus),
-    })
-
-
-
-    const getCourseAll = () => {
-        const { status: fetchStatus, data, error } = useFetching(["course_all"], "/course/all")
-        useWatching(fetchStatus, () => {
-            if (fetchStatus.value === "success") {
-                status.loading = false
-            } else if (fetchStatus.value == "error") {
-                status.loading = false
-                if (isNetworkError(error.value.response)) {
-                    showSnackbar("error", "网络连接错误")
-                } else if (isValidErrorMessage(error.value.response.data.msg)) {
-                    showSnackbar("error", error.value.response.data.msg)
-                } else {
-                    showSnackbar("error", "服务器发生错误")
-                }
-            }
-        })
-        useWatching(data, () => {
-            if (data.value) {
-                const schools = Object.keys(baseStatistic.count).filter(key => key != "__ob__")
-                courseFilterStatus.selected = schools
-                courseRawText.value = data.value.data.map((course) => {
-                    if (schools.indexOf(course.institute) >= 0) {
-                        return course
-                    } else {
-                        return { ...course, institute: "其他学院" }
-                    }
-                })
-                courseRawText.value.sort(sortFunc)
-            }
-        })
-    }
-
-
-    const matchSearchKeys = (policyFunc) => {
-        for (let i = 0; i < searchInput.keys.length; i++) {
-            if (!policyFunc(searchInput.keys[i])) {
-                return false;
-            }
-        }
-        return true
-    }
-
-    const matchSearchCourse = (course) => {
-        if (searchInput.keys.length === 0) {
-            return true;
-        } else if (searchInput.isRegexp) {
-            return matchSearchKeys((key) => {
-                return new RegExp(key).test(course.name) || new RegExp(key).test(course.code);
-            })
-        } else {
-            return matchSearchKeys((key) => {
-                return course.name.includes(key) || new String(course.code).includes(key);
-            })
-        }
-    }
-
-    const matchFilterCourse = (course) => courseFilterStatus.selected.some((item) => item === course.institute)
-
-    //Updated 23.3.1, this filter is used to remove courses with insufficient data in descending mode.
-    const filterInvalidCourse = (course) => {
-        if(courseFilterStatus.sortKey === sortStatics.sortKeyItem[0]){
-            if(courseFilterStatus.order === sortStatics.orderItem[courseFilterStatus.sortKey][1]){
-                if(sortPolicy[courseFilterStatus.sortKey](course) === 0) return false
-            }
-        }
-        if(courseFilterStatus.sortKey === sortStatics.sortKeyItem[1]){
-            if(courseFilterStatus.order === sortStatics.orderItem[courseFilterStatus.sortKey][1]){
-                if(sortPolicy[courseFilterStatus.sortKey](course) < enoughDataThreshold) return false
-            }
-        }
-        return true
-    }
-
-    const sortStatics = {
-        sortKeyItem: ['综合评分', '评价总数', "学分"],
-        orderItem: {
-            "综合评分": ["从高到低", "从低到高"],
-            "评价总数": ["从多到少", "从少到多"],
-            "学分": ["从多到少", "从少到多"]
-        },
-    }
-    const sortPolicy = {
-        "综合评分": (x) => x.comment_num < enoughDataThreshold ? 0 : averageOf(x.score),
-        "评价总数": (x) => x.comment_num,
-        "学分": (x) => x.credit
-    }
-    const sortFunc = (x, y) => {
-        // by default, [0] is descending, [1] is ascending
-        return (courseFilterStatus.order === sortStatics.orderItem[courseFilterStatus.sortKey][0] ? 1 : -1) *
-          sortCmp(
-            sortPolicy[courseFilterStatus.sortKey](x), sortPolicy[courseFilterStatus.sortKey](y)
-          )
-    }
-
-    // A notice for future developers: The if statement justifying if to and from are equal is not necessary
-    //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop
-    watch(() => courseFilterStatus.order, useDebounce((to, from) => {
-        courseRawText.value.sort(sortFunc)
-        status.page = 1
-    }))
-
-    watch(() => courseFilterStatus.sortKey, useDebounce((to, from) => {
-        if (courseFilterStatus.order === sortStatics.orderItem[courseFilterStatus.sortKey][0]) {
-            courseRawText.value.sort(sortFunc) // Force sort, since some keys are duplicated
-        } else {
-            courseFilterStatus.order = sortStatics.orderItem[courseFilterStatus.sortKey][0]
-        }
-    }))
-
-    watch(() => courseFilterStatus.selected, useDebounce((to, from) => {
-        if (notEqual(to, from)) { // This is necessary because of we need it to judge if it is from the saved status
-            status.page = 1
-        }
-    }))
-
-
-
-    onMounted(() => {
-        getCourseAll()
-    })
-
-
-
-    provide("courseStatistic", courseStatistic)
-    provide("courseFilterStatus", courseFilterStatus)
-
-
-
-    return { courseText, status, courseFilterStatus, sortStatics }
-}
+import {
+  provide,
+  reactive,
+  ref,
+  onMounted,
+  inject,
+  toRefs,
+  watch,
+  computed,
+} from 'vue';
+import { instituteInfo } from '@/composables/global/useStaticData';
+import useDebounce from '@/composables/global/useDebounce';
+import useWatching from '@/composables/global/useWatching';
+import useFetching from '@/composables/global/useFetching';
+import {
+  sortCmp,
+  averageOf,
+  notEqual,
+} from '@/composables/global/useArrayUtils';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import { enoughDataThreshold } from '@/composables/global/useParseScore';
+
+const baseStatistic = {
+  total: 0,
+  count: (() => {
+    let ret = {};
+    Object.keys(instituteInfo)
+      .filter((key) => key !== '')
+      .forEach((key) => {
+        ret[key] = 0;
+      });
+    return ret;
+  })(),
+};
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const searchInput = inject('searchInput');
+  const savedCourseAllStatus = inject('savedCourseAllStatus');
+  const savedCourseAllFilterStatus = inject('savedCourseAllFilterStatus');
+
+  const courseRawText = ref([]);
+  const courseText = computed(() =>
+    courseRawText.value.filter(
+      (course) =>
+        matchSearchCourse(course) &&
+        matchFilterCourse(course) &&
+        filterInvalidCourse(course),
+    ),
+  );
+  const courseStatistic = computed(() => {
+    const courseSearchedText = courseRawText.value.filter(matchSearchCourse);
+    if (courseSearchedText.length === 0) {
+      return baseStatistic;
+    }
+    const res = { ...baseStatistic, count: { ...baseStatistic.count } };
+    res.total = courseSearchedText.length;
+    const schools = Object.keys(res.count).filter((key) => key != '__ob__');
+    for (let key in res.count) {
+      res.count[key] = 0;
+    }
+    for (let course of courseSearchedText) {
+      if (schools.indexOf(course.institute) >= 0) {
+        res.count[course.institute]++;
+      } else {
+        res.count['其他学院']++;
+      }
+    }
+    return res;
+  });
+
+  const status = reactive({
+    loading: true,
+    ...toRefs(savedCourseAllStatus),
+  });
+
+  const courseFilterStatus = reactive({
+    ...toRefs(savedCourseAllFilterStatus),
+  });
+
+  const getCourseAll = () => {
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['course_all'], '/course/all');
+    useWatching(fetchStatus, () => {
+      if (fetchStatus.value === 'success') {
+        status.loading = false;
+      } else if (fetchStatus.value == 'error') {
+        status.loading = false;
+        if (isNetworkError(error.value.response)) {
+          showSnackbar('error', '网络连接错误');
+        } else if (isValidErrorMessage(error.value.response.data.msg)) {
+          showSnackbar('error', error.value.response.data.msg);
+        } else {
+          showSnackbar('error', '服务器发生错误');
+        }
+      }
+    });
+    useWatching(data, () => {
+      if (data.value) {
+        const schools = Object.keys(baseStatistic.count).filter(
+          (key) => key != '__ob__',
+        );
+        courseFilterStatus.selected = schools;
+        courseRawText.value = data.value.data.map((course) => {
+          if (schools.indexOf(course.institute) >= 0) {
+            return course;
+          } else {
+            return { ...course, institute: '其他学院' };
+          }
+        });
+        courseRawText.value.sort(sortFunc);
+      }
+    });
+  };
+
+  const matchSearchKeys = (policyFunc) => {
+    for (let i = 0; i < searchInput.keys.length; i++) {
+      if (!policyFunc(searchInput.keys[i])) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const matchSearchCourse = (course) => {
+    if (searchInput.keys.length === 0) {
+      return true;
+    } else if (searchInput.isRegexp) {
+      return matchSearchKeys((key) => {
+        return (
+          new RegExp(key).test(course.name) || new RegExp(key).test(course.code)
+        );
+      });
+    } else {
+      return matchSearchKeys((key) => {
+        return (
+          course.name.includes(key) || new String(course.code).includes(key)
+        );
+      });
+    }
+  };
+
+  const matchFilterCourse = (course) =>
+    courseFilterStatus.selected.some((item) => item === course.institute);
+
+  //Updated 23.3.1, this filter is used to remove courses with insufficient data in descending mode.
+  const filterInvalidCourse = (course) => {
+    if (courseFilterStatus.sortKey === sortStatics.sortKeyItem[0]) {
+      if (
+        courseFilterStatus.order ===
+        sortStatics.orderItem[courseFilterStatus.sortKey][1]
+      ) {
+        if (sortPolicy[courseFilterStatus.sortKey](course) === 0) return false;
+      }
+    }
+    if (courseFilterStatus.sortKey === sortStatics.sortKeyItem[1]) {
+      if (
+        courseFilterStatus.order ===
+        sortStatics.orderItem[courseFilterStatus.sortKey][1]
+      ) {
+        if (
+          sortPolicy[courseFilterStatus.sortKey](course) < enoughDataThreshold
+        )
+          return false;
+      }
+    }
+    return true;
+  };
+
+  const sortStatics = {
+    sortKeyItem: ['综合评分', '评价总数', '学分'],
+    orderItem: {
+      综合评分: ['从高到低', '从低到高'],
+      评价总数: ['从多到少', '从少到多'],
+      学分: ['从多到少', '从少到多'],
+    },
+  };
+  const sortPolicy = {
+    综合评分: (x) =>
+      x.comment_num < enoughDataThreshold ? 0 : averageOf(x.score),
+    评价总数: (x) => x.comment_num,
+    学分: (x) => x.credit,
+  };
+  const sortFunc = (x, y) => {
+    // by default, [0] is descending, [1] is ascending
+    return (
+      (courseFilterStatus.order ===
+      sortStatics.orderItem[courseFilterStatus.sortKey][0]
+        ? 1
+        : -1) *
+      sortCmp(
+        sortPolicy[courseFilterStatus.sortKey](x),
+        sortPolicy[courseFilterStatus.sortKey](y),
+      )
+    );
+  };
+
+  // A notice for future developers: The if statement justifying if to and from are equal is not necessary
+  //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop
+  watch(
+    () => courseFilterStatus.order,
+    useDebounce((to, from) => {
+      courseRawText.value.sort(sortFunc);
+      status.page = 1;
+    }),
+  );
+
+  watch(
+    () => courseFilterStatus.sortKey,
+    useDebounce((to, from) => {
+      if (
+        courseFilterStatus.order ===
+        sortStatics.orderItem[courseFilterStatus.sortKey][0]
+      ) {
+        courseRawText.value.sort(sortFunc); // Force sort, since some keys are duplicated
+      } else {
+        courseFilterStatus.order =
+          sortStatics.orderItem[courseFilterStatus.sortKey][0];
+      }
+    }),
+  );
+
+  watch(
+    () => courseFilterStatus.selected,
+    useDebounce((to, from) => {
+      if (notEqual(to, from)) {
+        // This is necessary because of we need it to judge if it is from the saved status
+        status.page = 1;
+      }
+    }),
+  );
+
+  onMounted(() => {
+    getCourseAll();
+  });
+
+  provide('courseStatistic', courseStatistic);
+  provide('courseFilterStatus', courseFilterStatus);
+
+  return { courseText, status, courseFilterStatus, sortStatics };
+};
diff --git a/src/composables/courses/all/useCourseCard.js b/src/composables/courses/all/useCourseCard.js
index 7c89efa..a1dca91 100644
--- a/src/composables/courses/all/useCourseCard.js
+++ b/src/composables/courses/all/useCourseCard.js
@@ -1,18 +1,12 @@
-import {
-    mdiSchool,  
-    mdiDotsHorizontal, 
-  } from "@mdi/js";
-
-export default () => {
-
-    const statics = {
-        icons: {
-            mdiSchool,
-            mdiDotsHorizontal,
-        }, 
-    }
-
-
-
-    return { statics }
-}
\ No newline at end of file
+import { mdiSchool, mdiDotsHorizontal } from '@mdi/js';
+
+export default () => {
+  const statics = {
+    icons: {
+      mdiSchool,
+      mdiDotsHorizontal,
+    },
+  };
+
+  return { statics };
+};
diff --git a/src/composables/courses/all/useStatisticCard.js b/src/composables/courses/all/useStatisticCard.js
index c260ebf..b35bc20 100755
--- a/src/composables/courses/all/useStatisticCard.js
+++ b/src/composables/courses/all/useStatisticCard.js
@@ -1,66 +1,70 @@
-import { inject, onMounted, onUnmounted, reactive, watch } from "vue"
-import { mdiCity, mdiChevronUp, mdiChevronDown } from "@mdi/js";
-import useDebounce from "@/composables/global/useDebounce";
-
-export default () => {
-
-    const courseStatistic = inject('courseStatistic')
-
-    const statics = {
-        icons: {
-            mdiCity,
-            mdiChevronUp,
-            mdiChevronDown,
-        }
-    }
-
-    const status = reactive({
-        showAll: true,
-        selectAll: false,
-        selectNotAll: false
-    })
-
-    const courseFilterStatus = inject("courseFilterStatus")
-
-    watch(() => courseFilterStatus.selected, useDebounce((to, from) => {
-        if (courseFilterStatus.selected.length === 0) {
-            status.selectAll = false
-            status.selectNotAll = true
-        } else if (courseFilterStatus.selected.filter(key => key != "__ob__").length 
-            === Object.keys(courseStatistic.value.count).filter(key => key != "__ob__").length) {
-            status.selectAll = true
-            status.selectNotAll = false
-        } else {
-            status.selectAll = false
-            status.selectNotAll = false
-        }
-    }))
-
-    watch(() => window.innerWidth, useDebounce((to, from) => {
-        updateShowAll();
-    }))
-
-    onMounted(() => {
-        updateShowAll();
-        window.addEventListener('resize', updateShowAll, { passive: true })
-        if (courseFilterStatus.selected.length === 0) {
-            status.selectAll = false
-            status.selectNotAll = true
-        } else if (courseFilterStatus.selected.filter(key => key != "__ob__").length 
-            === Object.keys(courseStatistic.value.count).filter(key => key != "__ob__").length) {
-            status.selectAll = true
-            status.selectNotAll = false
-        }
-    })
-
-    onUnmounted(() => {
-        window.removeEventListener('resize', updateShowAll, { passive: true })
-    })
-
-    const updateShowAll = () => {
-        status.showAll = window.innerWidth >= 600;
-    }
-
-    return { statics, courseStatistic, courseFilterStatus, status }
-
-}
\ No newline at end of file
+import { inject, onMounted, onUnmounted, reactive, watch } from 'vue';
+import { mdiCity, mdiChevronUp, mdiChevronDown } from '@mdi/js';
+import useDebounce from '@/composables/global/useDebounce';
+
+export default () => {
+  const courseStatistic = inject('courseStatistic');
+
+  const statics = {
+    icons: {
+      mdiCity,
+      mdiChevronUp,
+      mdiChevronDown,
+    },
+  };
+
+  const status = reactive({
+    showAll: true,
+    selectAll: false,
+    selectNotAll: false,
+  });
+
+  const courseFilterStatus = inject('courseFilterStatus');
+
+  watch(
+    () => courseFilterStatus.selected,
+    useDebounce((to, from) => {
+      if (courseFilterStatus.selected.length === 0) {
+        status.selectAll = false;
+        status.selectNotAll = true;
+      } else if (
+        courseFilterStatus.selected.filter((key) => key != '__ob__').length ===
+        Object.keys(courseStatistic.value.count).filter(
+          (key) => key != '__ob__',
+        ).length
+      ) {
+        status.selectAll = true;
+        status.selectNotAll = false;
+      } else {
+        status.selectAll = false;
+        status.selectNotAll = false;
+      }
+    }),
+  );
+
+  onMounted(() => {
+    updateShowAll();
+    window.addEventListener('resize', updateShowAll, { passive: true });
+    if (courseFilterStatus.selected.length === 0) {
+      status.selectAll = false;
+      status.selectNotAll = true;
+    } else if (
+      courseFilterStatus.selected.filter((key) => key != '__ob__').length ===
+      Object.keys(courseStatistic.value.count).filter((key) => key != '__ob__')
+        .length
+    ) {
+      status.selectAll = true;
+      status.selectNotAll = false;
+    }
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateShowAll, { passive: true });
+  });
+
+  const updateShowAll = () => {
+    status.showAll = window.innerWidth >= 600;
+  };
+
+  return { statics, courseStatistic, courseFilterStatus, status };
+};
diff --git a/src/composables/courses/comment/useCommentRecent.js b/src/composables/courses/comment/useCommentRecent.js
index 7e022f8..05c98ed 100644
--- a/src/composables/courses/comment/useCommentRecent.js
+++ b/src/composables/courses/comment/useCommentRecent.js
@@ -1,74 +1,85 @@
-import {onMounted, ref, reactive, inject} from "vue"
-import {defaultStatus} from "@/composables/global/useCommentSort"
-import useFetching from "@/composables/global/useFetching";
-import useWatching from "@/composables/global/useWatching";
-import {useRouter} from "@/router/migrateRouter";
-import {isNetworkError} from "@/composables/global/useHttpError";
+import { onMounted, ref, reactive, inject } from 'vue';
+import { defaultStatus } from '@/composables/global/useCommentSort';
+import useFetching from '@/composables/global/useFetching';
+import useWatching from '@/composables/global/useWatching';
+import { useRouter } from '@/router/migrateRouter';
+import { isNetworkError } from '@/composables/global/useHttpError';
 import { instituteInfo } from '@/composables/global/useStaticData';
 
 export default () => {
-
-  const router = useRouter()
-  const showSnackbar = inject("showSnackbar")
-  const global = inject("global")
+  const router = useRouter();
+  const showSnackbar = inject('showSnackbar');
+  const global = inject('global');
 
   const status = reactive({
     ...defaultStatus,
     commentLoading: false,
-  })
+  });
 
-  const commentText = ref([])
+  const commentText = ref([]);
 
   const baseStatistic = {
     total: 0,
     score: 0,
     count: (() => {
-      let ret = {}
-      Object.keys(instituteInfo).filter(key => key !== '').forEach(key => {
-        ret[key] = 0
-      })
-      return ret
+      let ret = {};
+      Object.keys(instituteInfo)
+        .filter((key) => key !== '')
+        .forEach((key) => {
+          ret[key] = 0;
+        });
+      return ret;
     })(),
-  }
+  };
 
   const getCommentRecent = () => {
-    status.commentLoading = true
-    const {status: fetchStatus, data, error} = useFetching(["comment_recent"], "/comment/recent")
+    status.commentLoading = true;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['comment_recent'], '/comment/recent');
     useWatching(fetchStatus, () => {
       // console.log("Data Fetched!")
-      if (fetchStatus.value === "success") {
-        status.commentLoading = false
-      } else if (fetchStatus.value === "error") {
-        const response = error.value.response
-        showSnackbar("error", isNetworkError(response) ? "网络连接失败" :response.data.msg, 3000)
-        setTimeout(() => router.push("/"), 3000)
+      if (fetchStatus.value === 'success') {
+        status.commentLoading = false;
+      } else if (fetchStatus.value === 'error') {
+        const response = error.value.response;
+        showSnackbar(
+          'error',
+          isNetworkError(response) ? '网络连接失败' : response.data.msg,
+          3000,
+        );
+        setTimeout(() => router.push('/'), 3000);
       }
-    })
+    });
     useWatching(data, () => {
       // console.log("Data Assigned!")
       if (data.value) {
-        const schools = Object.keys(baseStatistic.count).filter((key) => key !== "__ob__")
+        const schools = Object.keys(baseStatistic.count).filter(
+          (key) => key !== '__ob__',
+        );
         if (data.value.data) {
-          commentText.value = data.value.data
-            .map((comment) => {
-              if (schools.indexOf(comment.course.institute) >= 0) {
-                return comment
-              } else {
-                return { ...comment, course: { ...comment.course, institute: "其他学院" } }
-              }
-            })
+          commentText.value = data.value.data.map((comment) => {
+            if (schools.indexOf(comment.course.institute) >= 0) {
+              return comment;
+            } else {
+              return {
+                ...comment,
+                course: { ...comment.course, institute: '其他学院' },
+              };
+            }
+          });
         } else {
-          commentText.value = []
+          commentText.value = [];
         }
       }
-    })
-  }
-
+    });
+  };
 
   onMounted(() => {
-    getCommentRecent()
-  })
-
+    getCommentRecent();
+  });
 
-  return {commentText, status, global}
-}
+  return { commentText, status, global };
+};
diff --git a/src/composables/courses/comment/useCourseDetails.js b/src/composables/courses/comment/useCourseDetails.js
index 01aefcd..42a07e6 100644
--- a/src/composables/courses/comment/useCourseDetails.js
+++ b/src/composables/courses/comment/useCourseDetails.js
@@ -1,167 +1,202 @@
-import {onMounted, provide, ref, reactive, inject, watch} from "vue"
-import {defaultStatus, sortStatics, sortPolicy} from "@/composables/global/useCommentSort"
-import useFetching from "@/composables/global/useFetching";
-import useDebounce from "@/composables/global/useDebounce"
-import useWatching from "@/composables/global/useWatching";
-import useRefCopy from "@/composables/global/useRefCopy";
-import {sortCmp} from "@/composables/global/useArrayUtils"
-import {useRoute, useRouter} from "@/router/migrateRouter";
-import {isNetworkError} from "@/composables/global/useHttpError";
-
-export default () => {
-
-    const teachers = ref([])
-    const groups = ref([])
-    const selectedTeachers = ref([])
-    const router = useRouter()
-    const route = useRoute()
-    const showSnackbar = inject("showSnackbar")
-    const global = inject("global")
-
-    provide('teachers', teachers);
-    provide('groups', groups);
-    provide('selectedTeachers', selectedTeachers);
-
-    const status = reactive({
-        ...defaultStatus,
-        detailLoading: false,
-        commentLoading: false,
-        // currentCouseId: 0
-    })
-
-    let courseDetail = reactive({
-            name: "",
-            code: "",
-            id: 1,
-            institute: "",
-            credit: 1,
-            score: [0, 0, 0, 0], //若 comments_num 为0,则该项无意义
-            comment_num: 0, // 可见的评论数
-            groups: []
-        }
-    )
-    let courseId = reactive({})
-    const commentText = ref([])
-
-    const commentSortFunc = (x, y) => {
-        // by default, [0] is descending, [1] is ascending
-        return (status.order === sortStatics.orderItem[status.sortKey][0] ? 1 : -1) *
-            sortCmp(
-                sortPolicy[status.sortKey](x), sortPolicy[status.sortKey](y)
-            )
-    }
-    const arrayUnique = (value, index, self) => {
-        const getId = (x)=>{return x.id}
-        return self.map(getId).indexOf(getId(value)) === index;
-    }
-
-    // A notice for future developers: The if statement justifying if to and from are equal is not necessary
-    //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop
-    watch(() => status.order, useDebounce((to, from) => {
-        commentText.value.sort(commentSortFunc)
-    }))
-
-    watch(() => status.sortKey, useDebounce((to, from) => {
-        status.order = sortStatics.orderItem[status.sortKey][0]
-        commentText.value.sort(commentSortFunc)
-    }))
-
-    // Abandoned @since 2022-10-03: this is buggy and is based on a bug
-    // Fixed @since 2022-09-05: use an inefficient way to make work temporarily
-    // useRecordWatch(status, useDebounce((lastStatus) => {
-    //     if (lastStatus.order !== status.order) {
-    //         commentText.value.sort(commentSortFunc) // I dont know how js sort works in the vm
-    //         // but dont feel strange if it dont work for the values that are the same
-    //     } else if (lastStatus.sortKey !== status.sortKey) {
-    //         status.order = sortStatics.orderItem[status.sortKey][0]
-    //         commentText.value.sort(commentSortFunc) // I sort it here because some sort keys have the same order item
-    //         // in that case the first if statement will not be triggered
-    //     }
-    // }))
-
-    const getCourseComment = () => {
-        status.commentLoading = true
-        const id = route.params.id
-        const {status: fetchStatus, data, error} = useFetching(["course_comment", id], "/comment/course/" + id)
-        useWatching(fetchStatus, () => {
-            // console.log("Data Fetched!")
-            if (fetchStatus.value === "success") {
-                status.commentLoading = false
-            } else if (fetchStatus.value === "error") {
-                const response = error.value.response
-                showSnackbar("error", isNetworkError(response) ? "网络连接失败" : response.data.msg, 3000)
-                setTimeout(() => router.push("/"), 3000)
-            }
-        })
-        useWatching(data, () => {
-            // console.log("Data Assigned!")
-            if (data.value) {
-                if(data.value.data == null) {
-                    return
-                }
-                useRefCopy(data.value.data, commentText.value)
-                commentText.value.sort(commentSortFunc)
-            }
-        })
-    }
-
-    provide("courseCommentStatus", status)
-    provide("courseId", courseId)
-    provide('courseCommentText', commentText)
-
-    const getCourseDetail = () => {
-        status.detailLoading = true
-        const id = route.params.id
-        const {status: fetchStatus, data, error} = useFetching(["course_detail", id], "/course/" + id)
-        useWatching(fetchStatus, () => {
-            // console.log("Data Fetched!")
-            if (fetchStatus.value === "success") {
-                status.detailLoading = false
-            } else if (fetchStatus.value === "error") {
-                const response = error.value.response
-                showSnackbar("error", isNetworkError(response) ? "网络连接失败" : response.data.msg, 3000)
-                setTimeout(() => router.push("/"), 3000)
-            }
-        })
-        useWatching(data, () => {
-            // console.log("Data Assigned!")
-            if (data.value) {
-                if(data.value.data == null) {
-                    return
-                }
-                useRefCopy(data.value.data, courseDetail)
-                courseId.value = {
-                    id: id
-                }
-                if (courseDetail.groups) {
-                    let teacherContainer = []
-                    courseDetail.groups.forEach((value, index, array)=>{
-                        let names = ""
-                        value.teachers.forEach((teacher, teacherIndex, teacherArray) => {
-                            names += teacher.name
-                            if (teacherIndex !== teacherArray.length - 1) {
-                                names += ", "
-                            }
-                            teacherContainer.push(teacher)
-                        })
-                        groups.value.push({
-                            id: value.id,
-                            name: names
-                        })
-                        selectedTeachers.value.push(index)
-                    })
-                    // teachers.value = [...new Set(teacherContainer)]
-                    teachers.value = teacherContainer.filter(arrayUnique)
-                }
-            }
-        })
-    }
-
-    onMounted(() => {
-        getCourseDetail()
-        getCourseComment()
-    })
-
-
-    return {teachers, commentText, status, courseDetail, selectedTeachers, groups, global, route, router}
-}
+import { onMounted, provide, ref, reactive, inject, watch } from 'vue';
+import {
+  defaultStatus,
+  sortStatics,
+  sortPolicy,
+} from '@/composables/global/useCommentSort';
+import useFetching from '@/composables/global/useFetching';
+import useDebounce from '@/composables/global/useDebounce';
+import useWatching from '@/composables/global/useWatching';
+import useRefCopy from '@/composables/global/useRefCopy';
+import { sortCmp } from '@/composables/global/useArrayUtils';
+import { useRoute, useRouter } from '@/router/migrateRouter';
+import { isNetworkError } from '@/composables/global/useHttpError';
+
+export default () => {
+  const teachers = ref([]);
+  const groups = ref([]);
+  const selectedTeachers = ref([]);
+  const router = useRouter();
+  const route = useRoute();
+  const showSnackbar = inject('showSnackbar');
+  const global = inject('global');
+
+  provide('teachers', teachers);
+  provide('groups', groups);
+  provide('selectedTeachers', selectedTeachers);
+
+  const status = reactive({
+    ...defaultStatus,
+    detailLoading: false,
+    commentLoading: false,
+    // currentCouseId: 0
+  });
+
+  let courseDetail = reactive({
+    name: '',
+    code: '',
+    id: 1,
+    institute: '',
+    credit: 1,
+    score: [0, 0, 0, 0], //若 comments_num 为0,则该项无意义
+    comment_num: 0, // 可见的评论数
+    groups: [],
+  });
+  let courseId = reactive({});
+  const commentText = ref([]);
+
+  const commentSortFunc = (x, y) => {
+    // by default, [0] is descending, [1] is ascending
+    return (
+      (status.order === sortStatics.orderItem[status.sortKey][0] ? 1 : -1) *
+      sortCmp(sortPolicy[status.sortKey](x), sortPolicy[status.sortKey](y))
+    );
+  };
+  const arrayUnique = (value, index, self) => {
+    const getId = (x) => {
+      return x.id;
+    };
+    return self.map(getId).indexOf(getId(value)) === index;
+  };
+
+  // A notice for future developers: The if statement justifying if to and from are equal is not necessary
+  //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop
+  watch(
+    () => status.order,
+    useDebounce((to, from) => {
+      commentText.value.sort(commentSortFunc);
+    }),
+  );
+
+  watch(
+    () => status.sortKey,
+    useDebounce((to, from) => {
+      status.order = sortStatics.orderItem[status.sortKey][0];
+      commentText.value.sort(commentSortFunc);
+    }),
+  );
+
+  // Abandoned @since 2022-10-03: this is buggy and is based on a bug
+  // Fixed @since 2022-09-05: use an inefficient way to make work temporarily
+  // useRecordWatch(status, useDebounce((lastStatus) => {
+  //     if (lastStatus.order !== status.order) {
+  //         commentText.value.sort(commentSortFunc) // I dont know how js sort works in the vm
+  //         // but dont feel strange if it dont work for the values that are the same
+  //     } else if (lastStatus.sortKey !== status.sortKey) {
+  //         status.order = sortStatics.orderItem[status.sortKey][0]
+  //         commentText.value.sort(commentSortFunc) // I sort it here because some sort keys have the same order item
+  //         // in that case the first if statement will not be triggered
+  //     }
+  // }))
+
+  const getCourseComment = () => {
+    status.commentLoading = true;
+    const id = route.params.id;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['course_comment', id], '/comment/course/' + id);
+    useWatching(fetchStatus, () => {
+      // console.log("Data Fetched!")
+      if (fetchStatus.value === 'success') {
+        status.commentLoading = false;
+      } else if (fetchStatus.value === 'error') {
+        const response = error.value.response;
+        showSnackbar(
+          'error',
+          isNetworkError(response) ? '网络连接失败' : response.data.msg,
+          3000,
+        );
+        setTimeout(() => router.push('/'), 3000);
+      }
+    });
+    useWatching(data, () => {
+      // console.log("Data Assigned!")
+      if (data.value) {
+        if (data.value.data == null) {
+          return;
+        }
+        useRefCopy(data.value.data, commentText.value);
+        commentText.value.sort(commentSortFunc);
+      }
+    });
+  };
+
+  provide('courseCommentStatus', status);
+  provide('courseId', courseId);
+  provide('courseCommentText', commentText);
+
+  const getCourseDetail = () => {
+    status.detailLoading = true;
+    const id = route.params.id;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['course_detail', id], '/course/' + id);
+    useWatching(fetchStatus, () => {
+      // console.log("Data Fetched!")
+      if (fetchStatus.value === 'success') {
+        status.detailLoading = false;
+      } else if (fetchStatus.value === 'error') {
+        const response = error.value.response;
+        showSnackbar(
+          'error',
+          isNetworkError(response) ? '网络连接失败' : response.data.msg,
+          3000,
+        );
+        setTimeout(() => router.push('/'), 3000);
+      }
+    });
+    useWatching(data, () => {
+      // console.log("Data Assigned!")
+      if (data.value) {
+        if (data.value.data == null) {
+          return;
+        }
+        useRefCopy(data.value.data, courseDetail);
+        courseId.value = {
+          id: id,
+        };
+        if (courseDetail.groups) {
+          let teacherContainer = [];
+          courseDetail.groups.forEach((value, index, array) => {
+            let names = '';
+            value.teachers.forEach((teacher, teacherIndex, teacherArray) => {
+              names += teacher.name;
+              if (teacherIndex !== teacherArray.length - 1) {
+                names += ', ';
+              }
+              teacherContainer.push(teacher);
+            });
+            groups.value.push({
+              id: value.id,
+              name: names,
+            });
+            selectedTeachers.value.push(index);
+          });
+          // teachers.value = [...new Set(teacherContainer)]
+          teachers.value = teacherContainer.filter(arrayUnique);
+        }
+      }
+    });
+  };
+
+  onMounted(() => {
+    getCourseDetail();
+    getCourseComment();
+  });
+
+  return {
+    teachers,
+    commentText,
+    status,
+    courseDetail,
+    selectedTeachers,
+    groups,
+    global,
+    route,
+    router,
+  };
+};
diff --git a/src/composables/courses/comment/useDetailCard.js b/src/composables/courses/comment/useDetailCard.js
index 20daba6..f58e5a0 100644
--- a/src/composables/courses/comment/useDetailCard.js
+++ b/src/composables/courses/comment/useDetailCard.js
@@ -1,16 +1,15 @@
-import { inject } from "vue"
-import { mdiStar, mdiStarOutline } from "@mdi/js";
+import { inject } from 'vue';
+import { mdiStar, mdiStarOutline } from '@mdi/js';
 
 export default () => {
+  const teachers = inject('teachers');
+  const selectedTeachers = inject('selectedTeachers');
+  const statics = {
+    icons: {
+      mdiStarOutline,
+      mdiStar,
+    },
+  };
 
-    const teachers = inject('teachers')
-    const selectedTeachers = inject('selectedTeachers')
-    const statics = {
-        icons: {
-            mdiStarOutline,
-            mdiStar
-        }
-    }
-
-    return { teachers, statics, selectedTeachers }
-}
+  return { teachers, statics, selectedTeachers };
+};
diff --git a/src/composables/courses/comment/useFoldComment.js b/src/composables/courses/comment/useFoldComment.js
index c614585..ae2d63d 100644
--- a/src/composables/courses/comment/useFoldComment.js
+++ b/src/composables/courses/comment/useFoldComment.js
@@ -6,12 +6,12 @@ import { isNetworkError } from '@/composables/global/useHttpError';
 export default () => {
   const showSnackbar = inject('showSnackbar');
 
-  const global = inject("global");
+  const global = inject('global');
 
   const commentFoldStatus = reactive({
     foldStatus: false,
-    operationStatus: -1
-  })
+    operationStatus: -1,
+  });
 
   let errorMethod = (error) => {
     if (isNetworkError(error.response)) {
@@ -21,12 +21,12 @@ export default () => {
     } else if (!global.userProfile.is_admin) {
       showSnackbar('error', '您没有权限执行此操作');
     }
-    commentFoldStatus.operationStatus = -1
+    commentFoldStatus.operationStatus = -1;
   };
 
   let successMethod = (response) => {
-    commentFoldStatus.foldStatus = (commentFoldStatus.operationStatus === 1);
-    showSnackbar("success", "折叠成功")
+    commentFoldStatus.foldStatus = commentFoldStatus.operationStatus === 1;
+    showSnackbar('success', '折叠成功');
   };
 
   const commentMutation = useMutation('/comment/fold', {
@@ -52,4 +52,4 @@ export default () => {
   });
 
   return { doFold, doUnfold, commentFoldStatus };
-}
+};
diff --git a/src/composables/courses/comment/useManageCard.js b/src/composables/courses/comment/useManageCard.js
index b63ed56..7a7e819 100644
--- a/src/composables/courses/comment/useManageCard.js
+++ b/src/composables/courses/comment/useManageCard.js
@@ -1,291 +1,289 @@
-import {
-    mdiPencil,
-    mdiSchoolOutline,
-    mdiArrowLeft,
-    mdiWindowClose,
-    mdiFormatPaint,
-  } from '@mdi/js';
-  import { gradingInfo } from '@/composables/global/useStaticData';
-  import { computed, reactive, watch, ref, inject } from 'vue';
-  import useMutation from '@/composables/global/useMutation';
-  import {
-    isNetworkError,
-    isValidErrorMessage,
-  } from '@/composables/global/useHttpError';
-  
-  function getSemesterCode() {
-    if (this.courseYear === 0) {
-      return '';
-    }
-    if (this.courseTerm === '') {
-      return '';
-    }
-    return this.courseYear + this.courseTerm;
-  }
-  
-  export default () => {
-    const showSnackbar = inject('showSnackbar');
-    const commentText = inject('courseCommentText');
-    const global = inject('global');
-  
-    const courseYear = ref(0);
-    const courseTerm = ref('');
-    const courseName = ref('');
-    const userComments = ref([]);
-    const windowStatus = reactive({
-      windowStep: 1,
-      previewMarkdown: false,
-      showDialog: false,
-    });
-  
-    const statics = {
-      icons: {
-        mdiPencil,
-        mdiSchoolOutline,
-        mdiArrowLeft,
-        mdiWindowClose,
-        mdiFormatPaint
-      },
-      grade: [
-        gradingInfo.quality,
-        gradingInfo.workload,
-        gradingInfo.difficulty,
-        gradingInfo.distribution,
-      ],
-    };
-  
-    const errorMsg = reactive({
-      target: '',
-      msg: '',
-    });
-  
-    const formStatus = reactive({
-      id: null,
-      deleteLoading: false,
-      hideLoading: false,
-      coverLoading: false,
-      regenerateLoading: false,
-      isPostSuccess: false,
-      isPostError: false,
-      title: '',
-      content: '',
-      semester: computed(getSemesterCode),
-      is_anonymous: false,
-      is_fold: false,
-      is_covered: false,
-      userProfile: {},
-      slider: [5, 5, 5, 5],
-      commentTarget: 0,
-    });
-  
-    const setEditTarget = (comment) => {
-      // console.log(comment, formStatus);
-      courseName.value = comment.course.name
-      formStatus.id = comment.id;
-      formStatus.title = comment.title;
-      formStatus.content = comment.content;
-      formStatus.is_anonymous = comment.is_anonymous;
-      formStatus.is_fold = comment.is_fold;
-      formStatus.is_covered = comment.is_covered;
-      formStatus.slider = comment.score;
-      courseYear.value = parseInt(comment.semester / 100);
-      courseTerm.value = comment.semester.toString().slice(4, 6);
-      formStatus.commentTarget = comment.group.id;
-      formStatus.userProfile = comment.user;
-    };
-  
-    const clearEditTarget = () => {
-      formStatus.id = null;
-      formStatus.title = '';
-      formStatus.content = '';
-      courseTerm.value = '';
-      courseYear.value = 0;
-      formStatus.is_anonymous = false;
-      formStatus.is_fold = false;
-      formStatus.is_covered = false;
-      formStatus.slider = [5, 5, 5, 5];
-      formStatus.commentTarget = 0;
-      formStatus.userProfile = {};
-    };
-
-    const deleteCommentMutation = useMutation('/comment/delete', {
-      onMutate: () => {
-        formStatus.deleteLoading = true;
-      },
-      onSuccess: () => {
-        formStatus.deleteLoading = false;
-        formStatus.isPostSuccess = true;
-        showSnackbar('success', '删除评论成功');
-        clearEditTarget();
-        windowStatus.windowStep = 0;
-        // TODO: Add this updated comment to the comment list
-        setTimeout(() => {
-          window.location.reload();
-        }, 1000);
-      },
-      onError: (error) => {
-        formStatus.deleteLoading = false;
-        formStatus.isPostError = true;
-        if (isNetworkError(error.response)) {
-          showSnackbar('error', '网络连接错误', 3000);
-        } else if (error.response.data.code === 'CommentNotExists') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (error.response.data.code === 'PermissionDenied') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar('error', error.value.response.data.msg, 3000);
-        } else {
-          showSnackbar('error', '服务器发生错误', 3000);
-        }
-      },
-    });
-  
-    const hideCommentMutation = useMutation('/comment/fold', {
-      onMutate: () => {
-        formStatus.hideLoading = true;
-      },
-      onSuccess: () => {
-        formStatus.hideLoading = false;
-        formStatus.isPostSuccess = true;
-        if (!formStatus.is_fold) {
-          showSnackbar('success', '隐藏评论成功');
-        } else {
-          showSnackbar('success', '取消隐藏成功');
-        }
-        clearEditTarget();
-        windowStatus.windowStep = 0;
-        setTimeout(() => {
-          window.location.reload();
-        }, 1000);
-      },
-      onError: (error) => {
-        formStatus.hideLoading = false;
-        formStatus.isPostError = true;
-        if (isNetworkError(error.response)) {
-          showSnackbar('error', '网络连接错误', 3000);
-        } else if (error.response.data.code === 'CommentNotExists') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (error.response.data.code === 'PermissionDenied') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar('error', error.value.response.data.msg, 3000);
-        } else {
-          showSnackbar('error', '服务器发生错误', 3000);
-        }
-      },
-    });
-  
-    const coverCommentMutation = useMutation('/comment/cover', {
-      onMutate: () => {
-        
-      },
-      onSuccess: () => {
-        formStatus.coverLoading = false;
-        formStatus.regenerateLoading = false;
-        formStatus.isPostSuccess = true;
-        if (!formStatus.is_covered) {
-          showSnackbar('success', '遮盖评论成功');
-        } else {
-          showSnackbar('success', '取消遮盖成功');
-        }
-        clearEditTarget();
-        windowStatus.windowStep = 0;
-        setTimeout(() => {
-          window.location.reload();
-        }, 1000);
-      },
-      onError: (error) => {
-        formStatus.coverLoading = false;
-        formStatus.regenerateLoading = false;
-        formStatus.isPostError = true;
-        if (isNetworkError(error.response)) {
-          showSnackbar('error', '网络连接错误', 3000);
-        } else if (error.response.data.code === 'CommentNotExists') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (error.response.data.code === 'PermissionDenied') {
-          showSnackbar('error', error.response.data.msg, 3000);
-        } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar('error', error.value.response.data.msg, 3000);
-        } else {
-          showSnackbar('error', '服务器发生错误', 3000);
-        }
-      },
-    });
-  
-
-  
-    const doDeleteComment = () => {
-      deleteCommentMutation.mutate({
-        id: formStatus.id,
-      });
-    };
-  
-    const doHideComment = () => {
-      hideCommentMutation.mutate({
-        id: formStatus.id,
-        status: !formStatus.is_fold,
-      });
-    };
-  
-    const doCoverComment = () => {
-      formStatus.coverLoading = true;
-      coverCommentMutation.mutate({
-        id: formStatus.id,
-        status: !formStatus.is_covered,
-      });
-    };
-  
-    const doRegenerateCover = () => {
-      formStatus.regenerateLoading = true;
-      coverCommentMutation.mutate({
-        id: formStatus.id,
-        status: formStatus.is_covered,
-      });
-    };  
-  
-    watch(
-      commentText,
-      () => {
-        if (global.userProfile.is_admin || global.userProfile.is_community_admin) {
-          userComments.value = commentText.value.map((comment) =>
-            JSON.parse(JSON.stringify(comment)),
-          );
-        } else {
-          userComments.value = commentText.value
-            .filter((comment) => {
-              return comment.user && comment.user.id == global.userProfile.id;
-            })
-            .map((comment) => {
-              return JSON.parse(JSON.stringify(comment));
-            });
-        }
-        if (userComments.value.length > 0) {
-          windowStatus.windowStep = 0;
-        } else {
-          windowStatus.windowStep = 1;
-          formStatus.userProfile = global.userProfile;
-        }
-      },
-      {
-        deep: true,
-      },
-    );
-  
-    return {
-      statics,
-      errorMsg,
-      formStatus,
-      windowStatus,
-      courseYear,
-      courseTerm,
-      userComments,
-      courseName,
-      doDeleteComment,
-      doHideComment,
-      doCoverComment,
-      doRegenerateCover,
-      setEditTarget,
-      clearEditTarget,
-    };
-  };
-  
\ No newline at end of file
+import {
+  mdiPencil,
+  mdiSchoolOutline,
+  mdiArrowLeft,
+  mdiWindowClose,
+  mdiFormatPaint,
+} from '@mdi/js';
+import { gradingInfo } from '@/composables/global/useStaticData';
+import { computed, reactive, watch, ref, inject } from 'vue';
+import useMutation from '@/composables/global/useMutation';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+
+function getSemesterCode() {
+  if (this.courseYear === 0) {
+    return '';
+  }
+  if (this.courseTerm === '') {
+    return '';
+  }
+  return this.courseYear + this.courseTerm;
+}
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const commentText = inject('courseCommentText');
+  const global = inject('global');
+
+  const courseYear = ref(0);
+  const courseTerm = ref('');
+  const courseName = ref('');
+  const userComments = ref([]);
+  const windowStatus = reactive({
+    windowStep: 1,
+    previewMarkdown: false,
+    showDialog: false,
+  });
+
+  const statics = {
+    icons: {
+      mdiPencil,
+      mdiSchoolOutline,
+      mdiArrowLeft,
+      mdiWindowClose,
+      mdiFormatPaint,
+    },
+    grade: [
+      gradingInfo.quality,
+      gradingInfo.workload,
+      gradingInfo.difficulty,
+      gradingInfo.distribution,
+    ],
+  };
+
+  const errorMsg = reactive({
+    target: '',
+    msg: '',
+  });
+
+  const formStatus = reactive({
+    id: null,
+    deleteLoading: false,
+    hideLoading: false,
+    coverLoading: false,
+    regenerateLoading: false,
+    isPostSuccess: false,
+    isPostError: false,
+    title: '',
+    content: '',
+    semester: computed(getSemesterCode),
+    is_anonymous: false,
+    is_fold: false,
+    is_covered: false,
+    userProfile: {},
+    slider: [5, 5, 5, 5],
+    commentTarget: 0,
+  });
+
+  const setEditTarget = (comment) => {
+    // console.log(comment, formStatus);
+    courseName.value = comment.course.name;
+    formStatus.id = comment.id;
+    formStatus.title = comment.title;
+    formStatus.content = comment.content;
+    formStatus.is_anonymous = comment.is_anonymous;
+    formStatus.is_fold = comment.is_fold;
+    formStatus.is_covered = comment.is_covered;
+    formStatus.slider = comment.score;
+    courseYear.value = parseInt(comment.semester / 100);
+    courseTerm.value = comment.semester.toString().slice(4, 6);
+    formStatus.commentTarget = comment.group.id;
+    formStatus.userProfile = comment.user;
+  };
+
+  const clearEditTarget = () => {
+    formStatus.id = null;
+    formStatus.title = '';
+    formStatus.content = '';
+    courseTerm.value = '';
+    courseYear.value = 0;
+    formStatus.is_anonymous = false;
+    formStatus.is_fold = false;
+    formStatus.is_covered = false;
+    formStatus.slider = [5, 5, 5, 5];
+    formStatus.commentTarget = 0;
+    formStatus.userProfile = {};
+  };
+
+  const deleteCommentMutation = useMutation('/comment/delete', {
+    onMutate: () => {
+      formStatus.deleteLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.deleteLoading = false;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '删除评论成功');
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      // TODO: Add this updated comment to the comment list
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.deleteLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const hideCommentMutation = useMutation('/comment/fold', {
+    onMutate: () => {
+      formStatus.hideLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.hideLoading = false;
+      formStatus.isPostSuccess = true;
+      if (!formStatus.is_fold) {
+        showSnackbar('success', '隐藏评论成功');
+      } else {
+        showSnackbar('success', '取消隐藏成功');
+      }
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.hideLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const coverCommentMutation = useMutation('/comment/cover', {
+    onMutate: () => {},
+    onSuccess: () => {
+      formStatus.coverLoading = false;
+      formStatus.regenerateLoading = false;
+      formStatus.isPostSuccess = true;
+      if (!formStatus.is_covered) {
+        showSnackbar('success', '遮盖评论成功');
+      } else {
+        showSnackbar('success', '取消遮盖成功');
+      }
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.coverLoading = false;
+      formStatus.regenerateLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const doDeleteComment = () => {
+    deleteCommentMutation.mutate({
+      id: formStatus.id,
+    });
+  };
+
+  const doHideComment = () => {
+    hideCommentMutation.mutate({
+      id: formStatus.id,
+      status: !formStatus.is_fold,
+    });
+  };
+
+  const doCoverComment = () => {
+    formStatus.coverLoading = true;
+    coverCommentMutation.mutate({
+      id: formStatus.id,
+      status: !formStatus.is_covered,
+    });
+  };
+
+  const doRegenerateCover = () => {
+    formStatus.regenerateLoading = true;
+    coverCommentMutation.mutate({
+      id: formStatus.id,
+      status: formStatus.is_covered,
+    });
+  };
+
+  watch(
+    commentText,
+    () => {
+      if (
+        global.userProfile.is_admin ||
+        global.userProfile.is_community_admin
+      ) {
+        userComments.value = commentText.value.map((comment) =>
+          JSON.parse(JSON.stringify(comment)),
+        );
+      } else {
+        userComments.value = commentText.value
+          .filter((comment) => {
+            return comment.user && comment.user.id == global.userProfile.id;
+          })
+          .map((comment) => {
+            return JSON.parse(JSON.stringify(comment));
+          });
+      }
+      if (userComments.value.length > 0) {
+        windowStatus.windowStep = 0;
+      } else {
+        windowStatus.windowStep = 1;
+        formStatus.userProfile = global.userProfile;
+      }
+    },
+    {
+      deep: true,
+    },
+  );
+
+  return {
+    statics,
+    errorMsg,
+    formStatus,
+    windowStatus,
+    courseYear,
+    courseTerm,
+    userComments,
+    courseName,
+    doDeleteComment,
+    doHideComment,
+    doCoverComment,
+    doRegenerateCover,
+    setEditTarget,
+    clearEditTarget,
+  };
+};
diff --git a/src/composables/courses/comment/useScoreLine.js b/src/composables/courses/comment/useScoreLine.js
index 0a2eb64..6dea571 100644
--- a/src/composables/courses/comment/useScoreLine.js
+++ b/src/composables/courses/comment/useScoreLine.js
@@ -1,13 +1,12 @@
-import { mdiStar, mdiStarOutline } from "@mdi/js";
+import { mdiStar, mdiStarOutline } from '@mdi/js';
 
 export default () => {
+  const statics = {
+    icons: {
+      mdiStarOutline,
+      mdiStar,
+    },
+  };
 
-    const statics = {
-        icons: {
-            mdiStarOutline,
-            mdiStar
-        }
-    }
-
-    return { statics }
-}
+  return { statics };
+};
diff --git a/src/composables/courses/comment/useSelectBar.js b/src/composables/courses/comment/useSelectBar.js
index 9d21dce..8f6b232 100644
--- a/src/composables/courses/comment/useSelectBar.js
+++ b/src/composables/courses/comment/useSelectBar.js
@@ -1,15 +1,14 @@
-import { inject } from "vue"
+import { inject } from 'vue';
 
-import {sortStatics} from "@/composables/global/useCommentSort";
+import { sortStatics } from '@/composables/global/useCommentSort';
 
 export default () => {
-
-    const teachers = inject('groups')
-    const selectedTeachers = inject('selectedTeachers')
-    const status = inject("courseCommentStatus")
-    const statics = {
-        ...sortStatics,
-    }
-
-    return { teachers, status, statics, selectedTeachers }
-}
+  const teachers = inject('groups');
+  const selectedTeachers = inject('selectedTeachers');
+  const status = inject('courseCommentStatus');
+  const statics = {
+    ...sortStatics,
+  };
+
+  return { teachers, status, statics, selectedTeachers };
+};
diff --git a/src/composables/courses/comment/useWritingBox.js b/src/composables/courses/comment/useWritingBox.js
index 41a77b3..c7521bc 100755
--- a/src/composables/courses/comment/useWritingBox.js
+++ b/src/composables/courses/comment/useWritingBox.js
@@ -1,187 +1,202 @@
-import { inject, reactive, ref, watch } from "vue"
-import { mdiChevronRight, mdiPencil } from "@mdi/js"
-import { judgeItems, gradingInfo, rawYearItems, termItems } from "@/composables/global/useStaticData"
-import useMutation from "@/composables/global/useMutation";
-import useDebounce from "@/composables/global/useDebounce";
-import { isNetworkError } from "@/composables/global/useHttpError"
-
-export default () => {
-
-    const showSnackbar = inject("showSnackbar")
-
-    const teachers = inject("groups")
-
-    const commentText = inject("courseCommentText")
-
-    const global = inject("global")
-
-    const courseYear = ref(0)
-    const courseTerm = ref("")
-
-
-    const statics = reactive({
-        icons: {
-            mdiChevronRight,
-            mdiPencil
-        },
-        grade: [
-            gradingInfo.quality,
-            gradingInfo.workload,
-            gradingInfo.difficulty,
-            gradingInfo.distribution
-        ],
-        yearItems: rawYearItems,
-        judgeItems: judgeItems,
-        termItems: termItems
-    })
-
-    const errorMsg = reactive({
-        target: "",
-        msg: "",
-    })
-
-    const writingMode = ref('create')
-
-    const formStatus = reactive({
-        id: null,
-        loading: false,
-        isPostSuccess: false,
-        isPostError: false,
-        title: "",
-        content: "",
-        semester: "",
-        is_anonymous: false,
-        slider: [5, 5, 5, 5],
-        commentTarget: 0,
-    })
-
-    const clearErrorMsg = () => {
-        errorMsg.target = ""
-        errorMsg.msg = ""
-        formStatus.isPostError = false
-    }
-
-    const pushErrorMsg = (target, msg) => {
-        errorMsg.target = target
-        errorMsg.msg = msg
-    }
-
-    const commentMutation = useMutation("/comment/post", {
-        onMutate: () => {
-            formStatus.loading = true
-        },
-        onSuccess: (response) => {
-            formStatus.loading = false
-            formStatus.isPostSuccess = true
-            showSnackbar("success", "发表成功")
-            setTimeout(() => {
-                window.location.reload()
-            }, 1000)
-        },
-        onError: (error) => {
-            formStatus.loading = false
-            formStatus.isPostError = true
-            if (isNetworkError(error.response)) {
-                showSnackbar("error", error.response.data.code)
-            }
-            else if (error.response.data.code === "CommentAlreadyExists") {
-                showSnackbar("error", error.response.data.msg)
-            }
-            else {
-                showSnackbar("error", error.response.data)
-            }
-        }
-    })
-
-    const updateMutation = useMutation("/comment/update", {
-        onMutate: () => {
-            formStatus.loading = true
-        },
-        onSuccess: (response) => {
-            formStatus.loading = true
-            formStatus.isPostSuccess = true
-            showSnackbar("success", "修改成功")
-            setTimeout(() => {
-                window.location.reload()
-            }, 1000)
-        },
-        onError: (error) => {
-            formStatus.loading = false
-            formStatus.isPostError = true
-            if (isNetworkError(error.response)) {
-                showSnackbar("error", error.response.data.code)
-            } else if (error.response.data.code === "CommentNotExists") {
-                showSnackbar("error", error.response.data.msg)
-            } else if (error.response.data.code === "PermissionDenied") {
-                showSnackbar("error", error.response.data.msg)
-            } else {
-                showSnackbar("error", error.response.data)
-            }
-        }
-    })
-
-
-    const doSubmit = useDebounce(() => {
-        clearErrorMsg()
-        if (formStatus.semester === "" || isNaN(parseInt(formStatus.semester))) {
-            pushErrorMsg("semester", "")
-            return
-        }
-        if (formStatus.title === "") {
-            pushErrorMsg("title", "标题不能为空")
-            return
-        }
-        if (formStatus.content === "") {
-            pushErrorMsg("content", "评论内容不能为空")
-            return
-        }
-        if (formStatus.commentTarget === 0) {
-            pushErrorMsg("commentTarget", "评论对象不能为空")
-            return
-        }
-        if (writingMode.value == 'create') {
-            commentMutation.mutate({
-                "group": formStatus.commentTarget,
-                "title": formStatus.title, // 1～200字节
-                "content": formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
-                "semester": parseInt(formStatus.semester), //学期，暂定格式为 4位年份+ 01:秋学期,02：春学期，03：暑学期
-                "is_anonymous": formStatus.is_anonymous,
-                "scores": formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
-                "student_score_ranking": 2, // * Not support yet
-            })
-        } else {
-            updateMutation.mutate({
-                "id": formStatus.id,
-                "title": formStatus.title, // 1～200字节
-                "content": formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
-                "is_anonymous": formStatus.is_anonymous,
-                "scores": formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
-                "semester": parseInt(formStatus.semester),
-                "user_score_ranking": 2 // * Not support yet       
-            })
-        }
-    })
-
-    watch(commentText, () => {
-        commentText.value.forEach((item) => {
-            if (item.user) {
-                if (item.user.id === global.userProfile.id) {
-                    writingMode.value = "edit";
-                    formStatus.title = item.title;
-                    formStatus.content = item.content;
-                    formStatus.semester = item.semester;
-                    courseYear.value = parseInt(item.semester / 100);
-                    courseTerm.value = item.semester.toString().slice(4, 6);
-                    formStatus.is_anonymous = item.is_anonymous;
-                    formStatus.slider = item.score;
-                    formStatus.commentTarget = item.group.id;
-                    formStatus.id = item.id
-                }
-            }
-        });
-    }, {
-        deep: true
-    })
-
-    return { statics, teachers, gradingInfo, doSubmit, formStatus, errorMsg, commentText, writingMode, courseTerm, courseYear }
-}
+import { inject, reactive, ref, watch } from 'vue';
+import { mdiChevronRight, mdiPencil } from '@mdi/js';
+import {
+  judgeItems,
+  gradingInfo,
+  rawYearItems,
+  termItems,
+} from '@/composables/global/useStaticData';
+import useMutation from '@/composables/global/useMutation';
+import useDebounce from '@/composables/global/useDebounce';
+import { isNetworkError } from '@/composables/global/useHttpError';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+
+  const teachers = inject('groups');
+
+  const commentText = inject('courseCommentText');
+
+  const global = inject('global');
+
+  const courseYear = ref(0);
+  const courseTerm = ref('');
+
+  const statics = reactive({
+    icons: {
+      mdiChevronRight,
+      mdiPencil,
+    },
+    grade: [
+      gradingInfo.quality,
+      gradingInfo.workload,
+      gradingInfo.difficulty,
+      gradingInfo.distribution,
+    ],
+    yearItems: rawYearItems,
+    judgeItems: judgeItems,
+    termItems: termItems,
+  });
+
+  const errorMsg = reactive({
+    target: '',
+    msg: '',
+  });
+
+  const writingMode = ref('create');
+
+  const formStatus = reactive({
+    id: null,
+    loading: false,
+    isPostSuccess: false,
+    isPostError: false,
+    title: '',
+    content: '',
+    semester: '',
+    is_anonymous: false,
+    slider: [5, 5, 5, 5],
+    commentTarget: 0,
+  });
+
+  const clearErrorMsg = () => {
+    errorMsg.target = '';
+    errorMsg.msg = '';
+    formStatus.isPostError = false;
+  };
+
+  const pushErrorMsg = (target, msg) => {
+    errorMsg.target = target;
+    errorMsg.msg = msg;
+  };
+
+  const commentMutation = useMutation('/comment/post', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.loading = false;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '发表成功');
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', error.response.data.code);
+      } else if (error.response.data.code === 'CommentAlreadyExists') {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', error.response.data);
+      }
+    },
+  });
+
+  const updateMutation = useMutation('/comment/update', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.loading = true;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '修改成功');
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', error.response.data.code);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', error.response.data);
+      }
+    },
+  });
+
+  const doSubmit = useDebounce(() => {
+    clearErrorMsg();
+    if (formStatus.semester === '' || isNaN(parseInt(formStatus.semester))) {
+      pushErrorMsg('semester', '');
+      return;
+    }
+    if (formStatus.title === '') {
+      pushErrorMsg('title', '标题不能为空');
+      return;
+    }
+    if (formStatus.content === '') {
+      pushErrorMsg('content', '评论内容不能为空');
+      return;
+    }
+    if (formStatus.commentTarget === 0) {
+      pushErrorMsg('commentTarget', '评论对象不能为空');
+      return;
+    }
+    if (writingMode.value == 'create') {
+      commentMutation.mutate({
+        group: formStatus.commentTarget,
+        title: formStatus.title, // 1～200字节
+        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
+        semester: parseInt(formStatus.semester), //学期，暂定格式为 4位年份+ 01:秋学期,02：春学期，03：暑学期
+        is_anonymous: formStatus.is_anonymous,
+        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
+        student_score_ranking: 2, // * Not support yet
+      });
+    } else {
+      updateMutation.mutate({
+        id: formStatus.id,
+        title: formStatus.title, // 1～200字节
+        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
+        is_anonymous: formStatus.is_anonymous,
+        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
+        semester: parseInt(formStatus.semester),
+        user_score_ranking: 2, // * Not support yet
+      });
+    }
+  });
+
+  watch(
+    commentText,
+    () => {
+      commentText.value.forEach((item) => {
+        if (item.user) {
+          if (item.user.id === global.userProfile.id) {
+            writingMode.value = 'edit';
+            formStatus.title = item.title;
+            formStatus.content = item.content;
+            formStatus.semester = item.semester;
+            courseYear.value = parseInt(item.semester / 100);
+            courseTerm.value = item.semester.toString().slice(4, 6);
+            formStatus.is_anonymous = item.is_anonymous;
+            formStatus.slider = item.score;
+            formStatus.commentTarget = item.group.id;
+            formStatus.id = item.id;
+          }
+        }
+      });
+    },
+    {
+      deep: true,
+    },
+  );
+
+  return {
+    statics,
+    teachers,
+    gradingInfo,
+    doSubmit,
+    formStatus,
+    errorMsg,
+    commentText,
+    writingMode,
+    courseTerm,
+    courseYear,
+  };
+};
diff --git a/src/composables/courses/comment/useWritingCard.js b/src/composables/courses/comment/useWritingCard.js
index 0fc12b4..56bae59 100644
--- a/src/composables/courses/comment/useWritingCard.js
+++ b/src/composables/courses/comment/useWritingCard.js
@@ -1,411 +1,412 @@
-import {
-  mdiPencil,
-  mdiSchoolOutline,
-  mdiArrowLeft,
-  mdiWindowClose,
-  mdiFormatPaint,
-} from '@mdi/js';
-import { gradingInfo } from '@/composables/global/useStaticData';
-import { computed, reactive, watch, ref, inject } from 'vue';
-import useMutation from '@/composables/global/useMutation';
-import {
-  isNetworkError,
-  isValidErrorMessage,
-} from '@/composables/global/useHttpError';
-
-function getSemesterCode() {
-  if (this.courseYear === 0) {
-    return '';
-  }
-  if (this.courseTerm === '') {
-    return '';
-  }
-  return this.courseYear + this.courseTerm;
-}
-
-export default () => {
-  const showSnackbar = inject('showSnackbar');
-  const teacherGroup = inject('groups');
-  const commentText = inject('courseCommentText');
-  const global = inject('global');
-
-  const courseYear = ref(0);
-  const courseTerm = ref('');
-  const courseName = ref('');
-  const userComments = ref([]);
-  const writingMode = computed(() => {
-    return userComments.value.length > 0 ? 'edit' : 'create';
-  });
-  const windowStatus = reactive({
-    windowStep: 1,
-    previewMarkdown: false,
-    showDialog: false,
-  });
-
-  const statics = {
-    icons: {
-      mdiPencil,
-      mdiSchoolOutline,
-      mdiArrowLeft,
-      mdiWindowClose,
-      mdiFormatPaint
-    },
-    grade: [
-      gradingInfo.quality,
-      gradingInfo.workload,
-      gradingInfo.difficulty,
-      gradingInfo.distribution,
-    ],
-  };
-
-  const errorMsg = reactive({
-    target: '',
-    msg: '',
-  });
-
-  const formStatus = reactive({
-    id: null,
-    editLoading: false,
-    deleteLoading: false,
-    hideLoading: false,
-    coverLoading: false,
-    regenerateLoading: false,
-    isPostSuccess: false,
-    isPostError: false,
-    title: '',
-    content: '',
-    semester: computed(getSemesterCode),
-    is_anonymous: false,
-    is_fold: false,
-    is_covered: false,
-    userProfile: {},
-    slider: [5, 5, 5, 5],
-    commentTarget: 0,
-  });
-
-  const clearErrorMsg = () => {
-    errorMsg.target = '';
-    errorMsg.msg = '';
-    formStatus.isPostError = false;
-  };
-
-  const pushErrorMsg = (target, msg) => {
-    errorMsg.target = target;
-    errorMsg.msg = msg;
-  };
-
-  const setEditTarget = (comment) => {
-    // console.log(comment, formStatus);
-    formStatus.id = comment.id;
-    formStatus.title = comment.title;
-    formStatus.content = comment.content;
-    formStatus.is_anonymous = comment.is_anonymous;
-    formStatus.is_fold = comment.is_fold;
-    formStatus.is_covered = comment.is_covered;
-    formStatus.slider = comment.score;
-    courseYear.value = parseInt(comment.semester / 100);
-    courseTerm.value = comment.semester.toString().slice(4, 6);
-    formStatus.commentTarget = comment.group.id;
-    formStatus.userProfile = comment.user;
-  };
-
-  const clearEditTarget = () => {
-    formStatus.id = null;
-    formStatus.title = '';
-    formStatus.content = '';
-    courseTerm.value = '';
-    courseYear.value = 0;
-    formStatus.is_anonymous = false;
-    formStatus.is_fold = false;
-    formStatus.is_covered = false;
-    formStatus.slider = [5, 5, 5, 5];
-    formStatus.commentTarget = 0;
-    formStatus.userProfile = {};
-  };
-
-  const createCommentMutation = useMutation('/comment/post', {
-    onMutate: () => {
-      formStatus.editLoading = true;
-    },
-    onSuccess: () => {
-      formStatus.editLoading = false;
-      formStatus.isPostSuccess = true;
-      showSnackbar('success', '发表评论成功');
-      // TODO: Add this new comment to the comment list
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    },
-    onError: (error) => {
-      formStatus.editLoading = false;
-      formStatus.isPostError = true;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误', 3000);
-      } else if (error.response.data.code === 'CommentAlreadyExists') {
-        showSnackbar('error', error.response.data.msg);
-      } else if (isValidErrorMessage(error.value.response.data.msg)) {
-        showSnackbar('error', error.value.response.data.msg, 3000);
-      } else {
-        showSnackbar('error', '服务器发生错误', 3000);
-      }
-    },
-  });
-
-  const editCommentMutation = useMutation('/comment/update', {
-    onMutate: () => {
-      formStatus.editLoading = true;
-    },
-    onSuccess: () => {
-      formStatus.editLoading = false;
-      formStatus.isPostSuccess = true;
-      showSnackbar('success', '修改评论成功');
-      clearEditTarget();
-      windowStatus.windowStep = 0;
-      // TODO: Add this updated comment to the comment list
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    },
-    onError: (error) => {
-      formStatus.editLoading = false;
-      formStatus.isPostError = true;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误', 3000);
-      } else if (error.response.data.code === 'CommentNotExists') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (error.response.data.code === 'PermissionDenied') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (isValidErrorMessage(error.value.response.data.msg)) {
-        showSnackbar('error', error.value.response.data.msg, 3000);
-      } else {
-        showSnackbar('error', '服务器发生错误', 3000);
-      }
-    },
-  });
-
-  const deleteCommentMutation = useMutation('/comment/delete', {
-    onMutate: () => {
-      formStatus.deleteLoading = true;
-    },
-    onSuccess: () => {
-      formStatus.deleteLoading = false;
-      formStatus.isPostSuccess = true;
-      showSnackbar('success', '删除评论成功');
-      clearEditTarget();
-      windowStatus.windowStep = 0;
-      // TODO: Add this updated comment to the comment list
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    },
-    onError: (error) => {
-      formStatus.deleteLoading = false;
-      formStatus.isPostError = true;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误', 3000);
-      } else if (error.response.data.code === 'CommentNotExists') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (error.response.data.code === 'PermissionDenied') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (isValidErrorMessage(error.value.response.data.msg)) {
-        showSnackbar('error', error.value.response.data.msg, 3000);
-      } else {
-        showSnackbar('error', '服务器发生错误', 3000);
-      }
-    },
-  });
-
-  const hideCommentMutation = useMutation('/comment/fold', {
-    onMutate: () => {
-      formStatus.hideLoading = true;
-    },
-    onSuccess: () => {
-      formStatus.hideLoading = false;
-      formStatus.isPostSuccess = true;
-      if (!formStatus.is_fold) {
-        showSnackbar('success', '隐藏评论成功');
-      } else {
-        showSnackbar('success', '取消隐藏成功');
-      }
-      clearEditTarget();
-      windowStatus.windowStep = 0;
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    },
-    onError: (error) => {
-      formStatus.hideLoading = false;
-      formStatus.isPostError = true;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误', 3000);
-      } else if (error.response.data.code === 'CommentNotExists') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (error.response.data.code === 'PermissionDenied') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (isValidErrorMessage(error.value.response.data.msg)) {
-        showSnackbar('error', error.value.response.data.msg, 3000);
-      } else {
-        showSnackbar('error', '服务器发生错误', 3000);
-      }
-    },
-  });
-
-  const coverCommentMutation = useMutation('/comment/cover', {
-    onMutate: () => {
-      
-    },
-    onSuccess: () => {
-      formStatus.coverLoading = false;
-      formStatus.regenerateLoading = false;
-      formStatus.isPostSuccess = true;
-      if (!formStatus.is_covered) {
-        showSnackbar('success', '遮盖评论成功');
-      } else {
-        showSnackbar('success', '取消遮盖成功');
-      }
-      clearEditTarget();
-      windowStatus.windowStep = 0;
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    },
-    onError: (error) => {
-      formStatus.coverLoading = false;
-      formStatus.regenerateLoading = false;
-      formStatus.isPostError = true;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误', 3000);
-      } else if (error.response.data.code === 'CommentNotExists') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (error.response.data.code === 'PermissionDenied') {
-        showSnackbar('error', error.response.data.msg, 3000);
-      } else if (isValidErrorMessage(error.value.response.data.msg)) {
-        showSnackbar('error', error.value.response.data.msg, 3000);
-      } else {
-        showSnackbar('error', '服务器发生错误', 3000);
-      }
-    },
-  });
-
-  const doSubmitComment = () => {
-    clearErrorMsg();
-    if (formStatus.semester === '' || isNaN(parseInt(formStatus.semester))) {
-      pushErrorMsg('semester', '');
-      return;
-    }
-    if (formStatus.title === '') {
-      pushErrorMsg('title', '标题不能为空');
-      return;
-    }
-    if (formStatus.content === '') {
-      pushErrorMsg('content', '评论内容不能为空');
-      return;
-    }
-    if (formStatus.commentTarget === 0) {
-      pushErrorMsg('commentTarget', '评论对象不能为空');
-      return;
-    }
-
-    if (writingMode.value === 'create' || formStatus.id === null) {
-      createCommentMutation.mutate({
-        group: formStatus.commentTarget,
-        title: formStatus.title, // 1～200字节
-        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
-        semester: parseInt(formStatus.semester), //学期，暂定格式为 4位年份+ 01:秋学期,02：春学期，03：暑学期
-        is_anonymous: formStatus.is_anonymous,
-        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
-        student_score_ranking: 2, // * Not support yet
-      });
-    } else {
-      editCommentMutation.mutate({
-        id: formStatus.id,
-        title: formStatus.title, // 1～200字节
-        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
-        is_anonymous: formStatus.is_anonymous,
-        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
-        semester: parseInt(formStatus.semester),
-        student_score_ranking: 2, // * Not support yet
-      });
-    }
-  };
-
-  const doDeleteComment = () => {
-    deleteCommentMutation.mutate({
-      id: formStatus.id,
-    });
-  };
-
-  const doHideComment = () => {
-    hideCommentMutation.mutate({
-      id: formStatus.id,
-      status: !formStatus.is_fold,
-    });
-  };
-
-  const doCoverComment = () => {
-    formStatus.coverLoading = true;
-    coverCommentMutation.mutate({
-      id: formStatus.id,
-      status: !formStatus.is_covered,
-    });
-  };
-
-  const doRegenerateCover = () => {
-    formStatus.regenerateLoading = true;
-    coverCommentMutation.mutate({
-      id: formStatus.id,
-      status: formStatus.is_covered,
-    });
-  };  
-
-  watch(
-    commentText,
-    () => {
-      if (commentText.value.length > 0) {
-        courseName.value = commentText.value[0].course.name;
-      }
-      if (global.userProfile.is_admin || global.userProfile.is_community_admin) {
-        userComments.value = commentText.value.map((comment) =>
-          JSON.parse(JSON.stringify(comment)),
-        );
-      } else {
-        userComments.value = commentText.value
-          .filter((comment) => {
-            return comment.user && comment.user.id == global.userProfile.id;
-          })
-          .map((comment) => {
-            return JSON.parse(JSON.stringify(comment));
-          });
-      }
-      if (userComments.value.length > 0) {
-        windowStatus.windowStep = 0;
-      } else {
-        windowStatus.windowStep = 1;
-        formStatus.userProfile = global.userProfile;
-      }
-    },
-    {
-      deep: true,
-    },
-  );
-
-  return {
-    statics,
-    teacherGroup,
-    errorMsg,
-    formStatus,
-    windowStatus,
-    courseYear,
-    courseTerm,
-    writingMode,
-    userComments,
-    courseName,
-    doSubmitComment,
-    doDeleteComment,
-    doHideComment,
-    doCoverComment,
-    doRegenerateCover,
-    setEditTarget,
-    clearEditTarget,
-  };
-};
+import {
+  mdiPencil,
+  mdiSchoolOutline,
+  mdiArrowLeft,
+  mdiWindowClose,
+  mdiFormatPaint,
+} from '@mdi/js';
+import { gradingInfo } from '@/composables/global/useStaticData';
+import { computed, reactive, watch, ref, inject } from 'vue';
+import useMutation from '@/composables/global/useMutation';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+
+function getSemesterCode() {
+  if (this.courseYear === 0) {
+    return '';
+  }
+  if (this.courseTerm === '') {
+    return '';
+  }
+  return this.courseYear + this.courseTerm;
+}
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const teacherGroup = inject('groups');
+  const commentText = inject('courseCommentText');
+  const global = inject('global');
+
+  const courseYear = ref(0);
+  const courseTerm = ref('');
+  const courseName = ref('');
+  const userComments = ref([]);
+  const writingMode = computed(() => {
+    return userComments.value.length > 0 ? 'edit' : 'create';
+  });
+  const windowStatus = reactive({
+    windowStep: 1,
+    previewMarkdown: false,
+    showDialog: false,
+  });
+
+  const statics = {
+    icons: {
+      mdiPencil,
+      mdiSchoolOutline,
+      mdiArrowLeft,
+      mdiWindowClose,
+      mdiFormatPaint,
+    },
+    grade: [
+      gradingInfo.quality,
+      gradingInfo.workload,
+      gradingInfo.difficulty,
+      gradingInfo.distribution,
+    ],
+  };
+
+  const errorMsg = reactive({
+    target: '',
+    msg: '',
+  });
+
+  const formStatus = reactive({
+    id: null,
+    editLoading: false,
+    deleteLoading: false,
+    hideLoading: false,
+    coverLoading: false,
+    regenerateLoading: false,
+    isPostSuccess: false,
+    isPostError: false,
+    title: '',
+    content: '',
+    semester: computed(getSemesterCode),
+    is_anonymous: false,
+    is_fold: false,
+    is_covered: false,
+    userProfile: {},
+    slider: [5, 5, 5, 5],
+    commentTarget: 0,
+  });
+
+  const clearErrorMsg = () => {
+    errorMsg.target = '';
+    errorMsg.msg = '';
+    formStatus.isPostError = false;
+  };
+
+  const pushErrorMsg = (target, msg) => {
+    errorMsg.target = target;
+    errorMsg.msg = msg;
+  };
+
+  const setEditTarget = (comment) => {
+    // console.log(comment, formStatus);
+    formStatus.id = comment.id;
+    formStatus.title = comment.title;
+    formStatus.content = comment.content;
+    formStatus.is_anonymous = comment.is_anonymous;
+    formStatus.is_fold = comment.is_fold;
+    formStatus.is_covered = comment.is_covered;
+    formStatus.slider = comment.score;
+    courseYear.value = parseInt(comment.semester / 100);
+    courseTerm.value = comment.semester.toString().slice(4, 6);
+    formStatus.commentTarget = comment.group.id;
+    formStatus.userProfile = comment.user;
+  };
+
+  const clearEditTarget = () => {
+    formStatus.id = null;
+    formStatus.title = '';
+    formStatus.content = '';
+    courseTerm.value = '';
+    courseYear.value = 0;
+    formStatus.is_anonymous = false;
+    formStatus.is_fold = false;
+    formStatus.is_covered = false;
+    formStatus.slider = [5, 5, 5, 5];
+    formStatus.commentTarget = 0;
+    formStatus.userProfile = {};
+  };
+
+  const createCommentMutation = useMutation('/comment/post', {
+    onMutate: () => {
+      formStatus.editLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.editLoading = false;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '发表评论成功');
+      // TODO: Add this new comment to the comment list
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.editLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentAlreadyExists') {
+        showSnackbar('error', error.response.data.msg);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const editCommentMutation = useMutation('/comment/update', {
+    onMutate: () => {
+      formStatus.editLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.editLoading = false;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '修改评论成功');
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      // TODO: Add this updated comment to the comment list
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.editLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const deleteCommentMutation = useMutation('/comment/delete', {
+    onMutate: () => {
+      formStatus.deleteLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.deleteLoading = false;
+      formStatus.isPostSuccess = true;
+      showSnackbar('success', '删除评论成功');
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      // TODO: Add this updated comment to the comment list
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.deleteLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const hideCommentMutation = useMutation('/comment/fold', {
+    onMutate: () => {
+      formStatus.hideLoading = true;
+    },
+    onSuccess: () => {
+      formStatus.hideLoading = false;
+      formStatus.isPostSuccess = true;
+      if (!formStatus.is_fold) {
+        showSnackbar('success', '隐藏评论成功');
+      } else {
+        showSnackbar('success', '取消隐藏成功');
+      }
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.hideLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const coverCommentMutation = useMutation('/comment/cover', {
+    onMutate: () => {},
+    onSuccess: () => {
+      formStatus.coverLoading = false;
+      formStatus.regenerateLoading = false;
+      formStatus.isPostSuccess = true;
+      if (!formStatus.is_covered) {
+        showSnackbar('success', '遮盖评论成功');
+      } else {
+        showSnackbar('success', '取消遮盖成功');
+      }
+      clearEditTarget();
+      windowStatus.windowStep = 0;
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      formStatus.coverLoading = false;
+      formStatus.regenerateLoading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误', 3000);
+      } else if (error.response.data.code === 'CommentNotExists') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (error.response.data.code === 'PermissionDenied') {
+        showSnackbar('error', error.response.data.msg, 3000);
+      } else if (isValidErrorMessage(error.value.response.data.msg)) {
+        showSnackbar('error', error.value.response.data.msg, 3000);
+      } else {
+        showSnackbar('error', '服务器发生错误', 3000);
+      }
+    },
+  });
+
+  const doSubmitComment = () => {
+    clearErrorMsg();
+    if (formStatus.semester === '' || isNaN(parseInt(formStatus.semester))) {
+      pushErrorMsg('semester', '');
+      return;
+    }
+    if (formStatus.title === '') {
+      pushErrorMsg('title', '标题不能为空');
+      return;
+    }
+    if (formStatus.content === '') {
+      pushErrorMsg('content', '评论内容不能为空');
+      return;
+    }
+    if (formStatus.commentTarget === 0) {
+      pushErrorMsg('commentTarget', '评论对象不能为空');
+      return;
+    }
+
+    if (writingMode.value === 'create' || formStatus.id === null) {
+      createCommentMutation.mutate({
+        group: formStatus.commentTarget,
+        title: formStatus.title, // 1～200字节
+        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
+        semester: parseInt(formStatus.semester), //学期，暂定格式为 4位年份+ 01:秋学期,02：春学期，03：暑学期
+        is_anonymous: formStatus.is_anonymous,
+        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
+        student_score_ranking: 2, // * Not support yet
+      });
+    } else {
+      editCommentMutation.mutate({
+        id: formStatus.id,
+        title: formStatus.title, // 1～200字节
+        content: formStatus.content, // 可以是markdown文本(暂定) 1～20000 字节
+        is_anonymous: formStatus.is_anonymous,
+        scores: formStatus.slider, // 评分，每项的值只能为1,2,3,4,5中的一个
+        semester: parseInt(formStatus.semester),
+        student_score_ranking: 2, // * Not support yet
+      });
+    }
+  };
+
+  const doDeleteComment = () => {
+    deleteCommentMutation.mutate({
+      id: formStatus.id,
+    });
+  };
+
+  const doHideComment = () => {
+    hideCommentMutation.mutate({
+      id: formStatus.id,
+      status: !formStatus.is_fold,
+    });
+  };
+
+  const doCoverComment = () => {
+    formStatus.coverLoading = true;
+    coverCommentMutation.mutate({
+      id: formStatus.id,
+      status: !formStatus.is_covered,
+    });
+  };
+
+  const doRegenerateCover = () => {
+    formStatus.regenerateLoading = true;
+    coverCommentMutation.mutate({
+      id: formStatus.id,
+      status: formStatus.is_covered,
+    });
+  };
+
+  watch(
+    commentText,
+    () => {
+      if (commentText.value.length > 0) {
+        courseName.value = commentText.value[0].course.name;
+      }
+      if (
+        global.userProfile.is_admin ||
+        global.userProfile.is_community_admin
+      ) {
+        userComments.value = commentText.value.map((comment) =>
+          JSON.parse(JSON.stringify(comment)),
+        );
+      } else {
+        userComments.value = commentText.value
+          .filter((comment) => {
+            return comment.user && comment.user.id == global.userProfile.id;
+          })
+          .map((comment) => {
+            return JSON.parse(JSON.stringify(comment));
+          });
+      }
+      if (userComments.value.length > 0) {
+        windowStatus.windowStep = 0;
+      } else {
+        windowStatus.windowStep = 1;
+        formStatus.userProfile = global.userProfile;
+      }
+    },
+    {
+      deep: true,
+    },
+  );
+
+  return {
+    statics,
+    teacherGroup,
+    errorMsg,
+    formStatus,
+    windowStatus,
+    courseYear,
+    courseTerm,
+    writingMode,
+    userComments,
+    courseName,
+    doSubmitComment,
+    doDeleteComment,
+    doHideComment,
+    doCoverComment,
+    doRegenerateCover,
+    setEditTarget,
+    clearEditTarget,
+  };
+};
diff --git a/src/composables/global/useAfterRender.js b/src/composables/global/useAfterRender.js
index 3236167..c80333e 100644
--- a/src/composables/global/useAfterRender.js
+++ b/src/composables/global/useAfterRender.js
@@ -1,25 +1,25 @@
-/**
- * Sometimes you need to do something after the render is done.
- * Otherwise the DOM will be undefined.
- * 
- * @param {Function} callback
- * @param {Boolean} retry
- * @param {Number} timeout
- */
-
-export default (callback, { 
-  retry, 
-  timeout 
-} = {
-  retry: false,
-  timeout: 50
-}) => {
-  setTimeout(() => {
-    callback()
-    if (retry) {
-      setTimeout(() => {
-        callback()
-      }, timeout)
-    }
-  }, timeout)
-}
\ No newline at end of file
+/**
+ * Sometimes you need to do something after the render is done.
+ * Otherwise the DOM will be undefined.
+ *
+ * @param {Function} callback
+ * @param {Boolean} retry
+ * @param {Number} timeout
+ */
+
+export default (
+  callback,
+  { retry, timeout } = {
+    retry: false,
+    timeout: 50,
+  },
+) => {
+  setTimeout(() => {
+    callback();
+    if (retry) {
+      setTimeout(() => {
+        callback();
+      }, timeout);
+    }
+  }, timeout);
+};
diff --git a/src/composables/global/useArrayUtils.js b/src/composables/global/useArrayUtils.js
index b0478e6..e4c7373 100644
--- a/src/composables/global/useArrayUtils.js
+++ b/src/composables/global/useArrayUtils.js
@@ -21,7 +21,7 @@ export function sortCmp(lhs, rhs) {
  * @returns any - The sum of the array.
  */
 export function sumOf(arr) {
-  return arr.reduce((a, b) => a + b, 0)
+  return arr.reduce((a, b) => a + b, 0);
 }
 
 /**
@@ -33,10 +33,9 @@ export function averageOf(arr) {
   if (arr.length == 0) {
     return 0;
   }
-  return sumOf(arr) / arr.length
+  return sumOf(arr) / arr.length;
 }
 
-
 /**
  * It takes an array of numbers and returns an array of numbers that are the same proportions of the
  * original array
@@ -44,12 +43,12 @@ export function averageOf(arr) {
  * @returns Array<number> - An array of the same length as the input array, with each element divided by the sum of the
  * input array.
  */
- export function toDistribute(arr) {
-  let sum = sumOf(arr)
-  if (sum === 0) return arr
-  return arr.map((x) =>{
-    return x / sum
-  })
+export function toDistribute(arr) {
+  let sum = sumOf(arr);
+  if (sum === 0) return arr;
+  return arr.map((x) => {
+    return x / sum;
+  });
 }
 
 /**
@@ -61,14 +60,15 @@ export function averageOf(arr) {
  */
 export function equal(a, b) {
   if (a.length !== b.length) {
-    return false
+    return false;
   }
-  return !a.map((value, index, array) => {
-    return value === b[index]
-  }).some(x => x === false)
+  return !a
+    .map((value, index, array) => {
+      return value === b[index];
+    })
+    .some((x) => x === false);
 }
 
-
 /**
  * If the two values are not equal, return true, otherwise return false.
  * @param a - The first value to compare.
@@ -76,5 +76,5 @@ export function equal(a, b) {
  * @returns The function notEqual is being returned.
  */
 export function notEqual(a, b) {
-  return !equal(a, b)
-}
\ No newline at end of file
+  return !equal(a, b);
+}
diff --git a/src/composables/global/useCaptcha.js b/src/composables/global/useCaptcha.js
index 33179bb..7f07242 100644
--- a/src/composables/global/useCaptcha.js
+++ b/src/composables/global/useCaptcha.js
@@ -1,9 +1,9 @@
-import useMutation from "@/composables/global/useMutation"
-import useDebounce from "@/composables/global/useDebounce"
-
-export default (address, config) => {
-    const captchaMutation = useMutation(address, config)
-    return useDebounce(function() {
-        captchaMutation.mutate(arguments)
-    })
-}
\ No newline at end of file
+import useMutation from '@/composables/global/useMutation';
+import useDebounce from '@/composables/global/useDebounce';
+
+export default (address, config) => {
+  const captchaMutation = useMutation(address, config);
+  return useDebounce(function () {
+    captchaMutation.mutate(arguments);
+  });
+};
diff --git a/src/composables/global/useCommentSort.js b/src/composables/global/useCommentSort.js
index 673b01c..8ffb475 100644
--- a/src/composables/global/useCommentSort.js
+++ b/src/composables/global/useCommentSort.js
@@ -1,23 +1,22 @@
 const defaultStatus = {
-    selected: [],
-    sortKey: '赞同数',
-    order: '从多到少',
-}
+  selected: [],
+  sortKey: '赞同数',
+  order: '从多到少',
+};
 
 const sortStatics = {
-    sortKeyItem: ['发布时间', '修改时间', "赞同数"],
-    orderItem: {
-        "发布时间": ['从后往前', '从前往后'],
-        "修改时间": ['从后往前', '从前往后'], 
-        "赞同数": ['从多到少', '从少到多'],
-    },
-}
-
+  sortKeyItem: ['发布时间', '修改时间', '赞同数'],
+  orderItem: {
+    发布时间: ['从后往前', '从前往后'],
+    修改时间: ['从后往前', '从前往后'],
+    赞同数: ['从多到少', '从少到多'],
+  },
+};
 
 const sortPolicy = {
-    "发布时间": (x) => new Date(x.post_time),
-    "修改时间": (x) => new Date(x.update_time), 
-    "赞同数": (x) => x.like - x.dislike,
-}
+  发布时间: (x) => new Date(x.post_time),
+  修改时间: (x) => new Date(x.update_time),
+  赞同数: (x) => x.like - x.dislike,
+};
 
-export { defaultStatus, sortStatics, sortPolicy}
+export { defaultStatus, sortStatics, sortPolicy };
diff --git a/src/composables/global/useCookie.js b/src/composables/global/useCookie.js
index 2c43f7b..2dbea31 100644
--- a/src/composables/global/useCookie.js
+++ b/src/composables/global/useCookie.js
@@ -1,98 +1,97 @@
-function unicodeToBytes(string) {
-    const codeUnits = new Uint16Array(string.length);
-    for (let i = 0; i < codeUnits.length; i++) {
-      codeUnits[i] = string.charCodeAt(i);
-    }
-    const charCodes = new Uint8Array(codeUnits.buffer);
-    let result = '';
-    for (let i = 0; i < charCodes.byteLength; i++) {
-      result += String.fromCharCode(charCodes[i]);
-    }
-    return result;
-}
-
-function bytesToUnicode(binary) {
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < bytes.length; i++) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    const charCodes = new Uint16Array(bytes.buffer);
-    let result = '';
-    for (let i = 0; i < charCodes.length; i++) {
-      result += String.fromCharCode(charCodes[i]);
-    }
-    return result;
-}
-
-
-function setCookie(key, value, expire = 60 * 60 * 24 * 6) {
-    document.cookie = `${key}=${value}; max-age=${expire}`
-}
-
-function setCookies(cookies, expire) {
-    for (const key in cookies) {
-        setCookie(key, cookies[key], expire)
-    }
-}
-
-function getCookie(key) {
-    const cookies = decodeURIComponent(document.cookie).split("; ")
-    for (const cookie of cookies) {
-        const [cookieKey, cookieValue] = cookie.split("=")
-        if (cookieKey === key) {
-            return cookieValue
-        }
-    }
-    return ""
-}
-
-function getCookies(keys) {
-    const cookies = {}
-    for (const key of keys) {
-        cookies[key] = getCookie(key)
-    }
-    return cookies
-}
-
-function setPreset(preset) {
-    let dst = getPreset()
-    for (let key in preset) {    
-        dst[key] = preset[key]
-    }
-    setCookie("preset", btoa(unicodeToBytes(JSON.stringify(dst))), 60 * 60 * 24)
-}
-
-function getPreset() {
-    let preset = atob(getCookie("preset"))
-    try {
-        preset = JSON.parse(bytesToUnicode(preset))
-    } catch (err) {
-        preset = {}
-    }    
-    const result = {}
-    for (let key in preset) {
-        if (preset[key] != undefined) {
-            result[key] = preset[key]
-        }
-    }
-    return result
-}
-
-function clearPreset() {
-    setCookie("preset", "")
-}
-
-function hasPreset() {
-    return getCookie("preset") !== ""
-}
-
-export {
-    setCookie,
-    getCookie,
-    setCookies,
-    getCookies,
-    setPreset,
-    getPreset,
-    clearPreset,
-    hasPreset
-}
\ No newline at end of file
+function unicodeToBytes(string) {
+  const codeUnits = new Uint16Array(string.length);
+  for (let i = 0; i < codeUnits.length; i++) {
+    codeUnits[i] = string.charCodeAt(i);
+  }
+  const charCodes = new Uint8Array(codeUnits.buffer);
+  let result = '';
+  for (let i = 0; i < charCodes.byteLength; i++) {
+    result += String.fromCharCode(charCodes[i]);
+  }
+  return result;
+}
+
+function bytesToUnicode(binary) {
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < bytes.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  const charCodes = new Uint16Array(bytes.buffer);
+  let result = '';
+  for (let i = 0; i < charCodes.length; i++) {
+    result += String.fromCharCode(charCodes[i]);
+  }
+  return result;
+}
+
+function setCookie(key, value, expire = 60 * 60 * 24 * 6) {
+  document.cookie = `${key}=${value}; max-age=${expire}`;
+}
+
+function setCookies(cookies, expire) {
+  for (const key in cookies) {
+    setCookie(key, cookies[key], expire);
+  }
+}
+
+function getCookie(key) {
+  const cookies = decodeURIComponent(document.cookie).split('; ');
+  for (const cookie of cookies) {
+    const [cookieKey, cookieValue] = cookie.split('=');
+    if (cookieKey === key) {
+      return cookieValue;
+    }
+  }
+  return '';
+}
+
+function getCookies(keys) {
+  const cookies = {};
+  for (const key of keys) {
+    cookies[key] = getCookie(key);
+  }
+  return cookies;
+}
+
+function setPreset(preset) {
+  let dst = getPreset();
+  for (let key in preset) {
+    dst[key] = preset[key];
+  }
+  setCookie('preset', btoa(unicodeToBytes(JSON.stringify(dst))), 60 * 60 * 24);
+}
+
+function getPreset() {
+  let preset = atob(getCookie('preset'));
+  try {
+    preset = JSON.parse(bytesToUnicode(preset));
+  } catch (err) {
+    preset = {};
+  }
+  const result = {};
+  for (let key in preset) {
+    if (preset[key] != undefined) {
+      result[key] = preset[key];
+    }
+  }
+  return result;
+}
+
+function clearPreset() {
+  setCookie('preset', '');
+}
+
+function hasPreset() {
+  return getCookie('preset') !== '';
+}
+
+export {
+  setCookie,
+  getCookie,
+  setCookies,
+  getCookies,
+  setPreset,
+  getPreset,
+  clearPreset,
+  hasPreset,
+};
diff --git a/src/composables/global/useDebounce.js b/src/composables/global/useDebounce.js
index 0c49e33..3d84a77 100644
--- a/src/composables/global/useDebounce.js
+++ b/src/composables/global/useDebounce.js
@@ -1,9 +1,11 @@
 export default (callback, delay = 200) => {
-    let timeoutID = null
-    return function () {
-        const args = arguments
-        const that = this
-        clearTimeout(timeoutID)
-        timeoutID = setTimeout(() => { callback.apply(that, args) }, delay)
-    }
-}
\ No newline at end of file
+  let timeoutID = null;
+  return function () {
+    const args = arguments;
+    const that = this;
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(() => {
+      callback.apply(that, args);
+    }, delay);
+  };
+};
diff --git a/src/composables/global/useExternalUrl.js b/src/composables/global/useExternalUrl.js
index 554986b..c21020c 100644
--- a/src/composables/global/useExternalUrl.js
+++ b/src/composables/global/useExternalUrl.js
@@ -1,17 +1,17 @@
-/**
- * Open an external URL in current tab.
- * 
- * @param {String} url - The URL to open.
- */
-export function openInplace(url) {
-    window.open(url, "_self", "noopener,noreferrer");
-}
-
-/**
- * Open an external URL in new tab.
- * 
- * @param {String} url - The URL to open.
- */
-export function openInNewTab(url) {
-    window.open(url, "_blank", "noopener,noreferrer");
-}
\ No newline at end of file
+/**
+ * Open an external URL in current tab.
+ *
+ * @param {String} url - The URL to open.
+ */
+export function openInplace(url) {
+  window.open(url, '_self', 'noopener,noreferrer');
+}
+
+/**
+ * Open an external URL in new tab.
+ *
+ * @param {String} url - The URL to open.
+ */
+export function openInNewTab(url) {
+  window.open(url, '_blank', 'noopener,noreferrer');
+}
diff --git a/src/composables/global/useFetching.js b/src/composables/global/useFetching.js
index 241b1a2..9318b95 100755
--- a/src/composables/global/useFetching.js
+++ b/src/composables/global/useFetching.js
@@ -1,7 +1,12 @@
-import { useQuery } from "vue-query"
-import axios from "axios"
-import Config from 'Config'
+import { useQuery } from 'vue-query';
+import axios from 'axios';
+import Config from 'Config';
 
-export default (queryKeys, address, method = "get") => useQuery(queryKeys, async () => (
-    await axios[method](Config.serverUrl + address).then((result) => result.data)
-))
\ No newline at end of file
+export default (queryKeys, address, method = 'get') =>
+  useQuery(
+    queryKeys,
+    async () =>
+      await axios[method](Config.serverUrl + address).then(
+        (result) => result.data,
+      ),
+  );
diff --git a/src/composables/global/useHttpError.js b/src/composables/global/useHttpError.js
index cae66ce..6a3a33f 100755
--- a/src/composables/global/useHttpError.js
+++ b/src/composables/global/useHttpError.js
@@ -1,21 +1,28 @@
-const isInvalidRequest = (response) => {
-  return response && (response.status >= 400 && response.status < 410)
-}
-
-const isBackendError = (response) => {
-  return response && (response.status >= 500 && response.status < 510)
-}
-
-const isNetworkError = (response) => {
-  return (!response) || 
-    ((!isBackendError(response))
-      && (!isInvalidRequest(response))
-      && response.status != 200)
-}
-
-const isValidErrorMessage = (message) => {
-  // Sometimes the backend crashed and all we got is a nginx error page.
-  return message && message.indexOf("<html>") != 0 // I am not sure if this is a good way.
-}
-
-export { isInvalidRequest, isBackendError, isNetworkError, isValidErrorMessage }
+const isInvalidRequest = (response) => {
+  return response && response.status >= 400 && response.status < 410;
+};
+
+const isBackendError = (response) => {
+  return response && response.status >= 500 && response.status < 510;
+};
+
+const isNetworkError = (response) => {
+  return (
+    !response ||
+    (!isBackendError(response) &&
+      !isInvalidRequest(response) &&
+      response.status != 200)
+  );
+};
+
+const isValidErrorMessage = (message) => {
+  // Sometimes the backend crashed and all we got is a nginx error page.
+  return message && message.indexOf('<html>') != 0; // I am not sure if this is a good way.
+};
+
+export {
+  isInvalidRequest,
+  isBackendError,
+  isNetworkError,
+  isValidErrorMessage,
+};
diff --git a/src/composables/global/useInsitePush.js b/src/composables/global/useInsitePush.js
index 3617ff0..50eb64a 100644
--- a/src/composables/global/useInsitePush.js
+++ b/src/composables/global/useInsitePush.js
@@ -1,21 +1,20 @@
-function getElementTop(el) {
-    let actualTop = el.offsetTop
-    let current = el.offsetParent
-    while (current !== null) {
-        actualTop += current.offsetTop
-        current = current.offsetParent
-    }
-    return actualTop
-}
-
-
-export default function useInsitePush(target) {
-    setTimeout(() => {
-        if (target && document.querySelector(target)) {
-            window.scrollTo({
-                top: getElementTop(document.querySelector(target)) - 64,
-                behavior: "smooth"
-            });
-        }
-    }, 100)
-}
\ No newline at end of file
+function getElementTop(el) {
+  let actualTop = el.offsetTop;
+  let current = el.offsetParent;
+  while (current !== null) {
+    actualTop += current.offsetTop;
+    current = current.offsetParent;
+  }
+  return actualTop;
+}
+
+export default function useInsitePush(target) {
+  setTimeout(() => {
+    if (target && document.querySelector(target)) {
+      window.scrollTo({
+        top: getElementTop(document.querySelector(target)) - 64,
+        behavior: 'smooth',
+      });
+    }
+  }, 100);
+}
diff --git a/src/composables/global/useMarkdown.js b/src/composables/global/useMarkdown.js
index 4124eed..6e44c61 100644
--- a/src/composables/global/useMarkdown.js
+++ b/src/composables/global/useMarkdown.js
@@ -1,20 +1,20 @@
-import MarkdownIt from 'markdown-it'
-import prism from 'markdown-it-prism'
-import pangu from 'markdown-it-pangu'
+import MarkdownIt from 'markdown-it';
+import prism from 'markdown-it-prism';
+import pangu from 'markdown-it-pangu';
 
 const parser = new MarkdownIt({
-    html: false,
-    xhtmlOut: false,
-    breaks: false,
-    langPrefix: 'language-', 
-    linkify: true,
-    typographer: true,
-    quotes: '“”‘’'
-})
+  html: false,
+  xhtmlOut: false,
+  breaks: false,
+  langPrefix: 'language-',
+  linkify: true,
+  typographer: true,
+  quotes: '“”‘’',
+});
 
-parser.use(prism).use(pangu)
+parser.use(prism).use(pangu);
 
 export default (content) => {
-    // parser.use(prism).use(pangu)
-    return parser.render(content)
-}
\ No newline at end of file
+  // parser.use(prism).use(pangu)
+  return parser.render(content);
+};
diff --git a/src/composables/global/useMenuBar.js b/src/composables/global/useMenuBar.js
new file mode 100644
index 0000000..16b2495
--- /dev/null
+++ b/src/composables/global/useMenuBar.js
@@ -0,0 +1,21 @@
+import { inject, onMounted, onUnmounted } from 'vue';
+
+export default () => {
+  const menuBarStatus = inject('menu');
+
+  onMounted(() => {
+    updateMenuStatus();
+    window.addEventListener('resize', updateMenuStatus, { passive: true });
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateMenuStatus, { passive: true });
+  });
+
+  const updateMenuStatus = () => {
+    menuBarStatus.drawer =
+      window.innerWidth >= 960 ? false : menuBarStatus.drawer;
+  };
+
+  return { menuBarStatus };
+};
diff --git a/src/composables/global/useMutation.js b/src/composables/global/useMutation.js
index ed4e847..f5ddd6d 100644
--- a/src/composables/global/useMutation.js
+++ b/src/composables/global/useMutation.js
@@ -1,7 +1,10 @@
-import { useMutation } from "vue-query"
-import axios from "axios"
-import Config from 'Config'
+import { useMutation } from 'vue-query';
+import axios from 'axios';
+import Config from 'Config';
 
-export default (address, options, axiosConfig = undefined) => useMutation((mutationValue) => (
-    axios.post(Config.serverUrl + address, mutationValue, axiosConfig)
-), options)
\ No newline at end of file
+export default (address, options, axiosConfig = undefined) =>
+  useMutation(
+    (mutationValue) =>
+      axios.post(Config.serverUrl + address, mutationValue, axiosConfig),
+    options,
+  );
diff --git a/src/composables/global/useObjectUtils.js b/src/composables/global/useObjectUtils.js
index 7b03952..89b74ef 100644
--- a/src/composables/global/useObjectUtils.js
+++ b/src/composables/global/useObjectUtils.js
@@ -1,24 +1,24 @@
-/**
- * It returns a new object that contains only the key/value pairs from the source object that pass the
- * filter function.
- * 
- * The filter function takes two arguments:
- * 
- * src: The source object.
- * filterFn: A function that takes two arguments: key and value. It returns true if the key/value pair
- * should be included in the result object, and false otherwise.
- * The filter function returns a new object that contains only the key/value pairs from the source
- * object that pass the filter function
- * @param src - The object to filter
- * @param filterFn - A function that takes two parameters: key and value.
- * @returns An object with the key/value pairs that pass the filter function.
- */
-export function filter(src, filterFn) {
-    const result = {};
-    for (const [key, value] of Object.entries(src)) {
-        if (filterFn(key, value)) {
-            result[key] = value;
-        }
-    }
-    return result;
-}
\ No newline at end of file
+/**
+ * It returns a new object that contains only the key/value pairs from the source object that pass the
+ * filter function.
+ *
+ * The filter function takes two arguments:
+ *
+ * src: The source object.
+ * filterFn: A function that takes two arguments: key and value. It returns true if the key/value pair
+ * should be included in the result object, and false otherwise.
+ * The filter function returns a new object that contains only the key/value pairs from the source
+ * object that pass the filter function
+ * @param src - The object to filter
+ * @param filterFn - A function that takes two parameters: key and value.
+ * @returns An object with the key/value pairs that pass the filter function.
+ */
+export function filter(src, filterFn) {
+  const result = {};
+  for (const [key, value] of Object.entries(src)) {
+    if (filterFn(key, value)) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
diff --git a/src/composables/global/useParseScore.js b/src/composables/global/useParseScore.js
index 9373a4e..14ad857 100755
--- a/src/composables/global/useParseScore.js
+++ b/src/composables/global/useParseScore.js
@@ -1,16 +1,13 @@
-const enoughDataThreshold = 3
-
-function roundScore(score, commentNum) {
-    if (commentNum < enoughDataThreshold) {
-        return 0; // 0 = no enough data
-    } else if (score == 0) {
-        return 7; // 7 = extremely bad
-    } else {
-        return Math.floor(score) + 1
-    }
-}
-
-export {
-    enoughDataThreshold, 
-    roundScore
-}
\ No newline at end of file
+const enoughDataThreshold = 3;
+
+function roundScore(score, commentNum) {
+  if (commentNum < enoughDataThreshold) {
+    return 0; // 0 = no enough data
+  } else if (score == 0) {
+    return 7; // 7 = extremely bad
+  } else {
+    return Math.floor(score) + 1;
+  }
+}
+
+export { enoughDataThreshold, roundScore };
diff --git a/src/composables/global/usePhantomData.js b/src/composables/global/usePhantomData.js
index 0297e9b..2928d0e 100644
--- a/src/composables/global/usePhantomData.js
+++ b/src/composables/global/usePhantomData.js
@@ -1,255 +1,263 @@
-// In memorize of some great piece of work used as phantom data
-
-export const testUserProfile = {
-  email: "aReallyReallyReallyLongName@shanghaitech.edu.cn",
-  year: 2022,
-  grade: 1,
-  nickname: "一个很长很长很长很长很长的名字叫做小明",
-  realname: "阿仆杜拉-吴迪",
-  avatar: "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-  show_email: true,
-  show_year: true,
-  show_grade: true,
-  show_realname: true,
-} // Just for test
-
-export const testCommentText = [
-  {
-    "id": 1,
-    "title": "锐评孙伟",
-    "content": `### 我是陈克应\n\`\`\`js\nvar foo = function (bar) {
-      return bar++;
-    };
-    
-    console.log(foo(5));\n\`\`\`\n\- Lesson 1\n\- Lesson 2\n1. Lesson 1\n2. Lesson 2
-    Ordered
-    1. Lorem ipsum dolor sit amet
-    2. Consectetur adipiscing elit
-    3. Integer molestie lorem at massa`,
-    "course": {
-      "name": "数学分析I",
-      "code": "GEMA1009",
-      "id": 1,
-      "institute": "其他学院"
-    },
-    "group": {
-      "id": 1,
-      "code": "GEMA1009.02",
-      "teachers": [{ "name": "姚成建", "id": 23 },]
-    },
-    "post_time": "20211012", //unix时间戳 初次发表时间
-    "update_time": "20211023",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "小明",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [5, 4, 3, 2],
-    "user_score_ranking": 2,
-  },
-  {
-    "id": 2,
-    "title": "![跃进之罪](https://obohe.com/i/2022/01/31/x446zh.png)  \n 陈克应为什么是神?在谈论这个问题之前,我想先说说其他数分教授相较于陈克应究竟差在了哪里。首先是犯下跃进之罪的孙伟，曾经一天拉完三个课时, 课时进度稳居四个班之首,而且作业量所有题都做，总用-些复杂超前的讲法给出证明，孙伟像是嚼了炫迈一样根本停不下来，“你们都学过复数吧，那你们肯定知道欧拉公式.那我这题用欧拉公式，这样.这样...。” 这种过快而且超前的讲法在学生们看来,是极”左”且跃进的行为。事实也是如此，数分三班上课的人数一直在走下坡路,于是神降下了他的惩罚，来数分三班听课的人数只有个位数，最终泯然众人。与之相比神就很谦卑，大家听得懂，跟得上的速度讲课都是神留给凡人的慈悲，神不是不会那些很难的讲法，只是不想通过太难以理解的方法让同学们绝望所以故意不用，可笑有些人不理解神的良苦用心，竟然还用这些事来讥讽神，我劝你们好自为之。",
-    "content": "为什么说陈克应是神....?  \n",
-    "course": {
-      "name": "数学分析I",
-      "code": "GEMA1009",
-      "id": 1,
-      "institute": "数学科学研究所"
-    },
-    "group": {
-      "id": 1,
-      "code": "GEMA1009.02",
-      "teachers": [
-        {
-          "name": "高盛华",
-          "id": 23
-        },
-        {
-          "name": "梁俊睿",
-          "id": 23
-        },
-        {
-          "name": "陆林燕",
-          "id": 23
-        },
-        {
-          "name": "娄鑫",
-          "id": 23
-        },
-        {
-          "name": "刘闯",
-          "id": 23
-        },
-        {
-          "name": "郑锐",
-          "id": 24
-        },
-        {
-          "name": "邱越",
-          "id": 24
-        },
-      ]
-    },
-    "post_time": "20210604", //unix时间戳 初次发表时间
-    "update_time": "20210908",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "小黑",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [5, 4, 3, 2],
-    "user_score_ranking": 2,
-  },
-  {
-    "id": 6,
-    "title": "陈克应为什么是神 —— 孙伟与跃进之罪",
-    "content": ` ![跃进之罪](https://ims.shanghaitech.edu.cn/_upload/article/images/c8/d1/7ab02afd4938b2195937472f06cd/c83ead60-55c5-494b-b8bb-2d0b81be0d86_s.jpg)  \n 陈克应为什么是神?在谈论这个问题之前,我想先说说其他数分教授相较于陈克应究竟差在了哪里。首先是犯下跃进之罪的孙伟，曾经一天拉完三个课时, 课时进度稳居四个班之首,而且作业量所有题都做，总用-些复杂超前的讲法给出证明，孙伟像是嚼了炫迈一样根本停不下来，“你们都学过复数吧，那你们肯定知道欧拉公式.那我这题用欧拉公式，这样.这样...。” 这种过快而且超前的讲法在学生们看来,是极”左”且跃进的行为。事实也是如此，数分三班上课的人数一直在走下坡路,于是神降下了他的惩罚，来数分三班听课的人数只有个位数，最终泯然众人。与之相比神就很谦卑，大家听得懂，跟得上的速度讲课都是神留给凡人的慈悲，神不是不会那些很难的讲法，只是不想通过太难以理解的方法让同学们绝望所以故意不用，可笑有些人不理解神的良苦用心，竟然还用这些事来讥讽神，我劝你们好自为之。`,
-    "course": {
-      "name": "信息科学技术导论",
-      "code": "SI100B",
-      "id": 1,
-      "institute": "信息科学与技术学院"
-    },
-    "group": {
-      "id": 1,
-      "code": "SI100B.01",
-      "teachers": [
-        {
-          "name": "高盛华",
-          "id": 23
-        },
-        {
-          "name": "梁俊睿",
-          "id": 23
-        },
-        {
-          "name": "陆林燕",
-          "id": 23
-        },
-        {
-          "name": "娄鑫",
-          "id": 23
-        },
-        {
-          "name": "刘闯",
-          "id": 23
-        },
-        {
-          "name": "郑锐",
-          "id": 24
-        },
-        {
-          "name": "邱越",
-          "id": 24
-        },
-      ]
-    },
-    "post_time": "20200107", //unix时间戳 初次发表时间
-    "update_time": "20211223",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "傻逼",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [5, 4, 3, 2],
-    "user_score_ranking": 2,
-  },
-  {
-    "id": 3,
-    "title": "孙伟到底犯下了什么罪？",
-    "content": `## 孙伟到底犯下了什么罪？根据一般历史记载，有包括但不限于以下的罪行   \n1. 撞断不周山，造成洪水泛滥，使华夏大地沦为汪洋大海\n2. 建造酒池肉林，使纣王虚度光阴，最终丢了王朝\n3. 帮白起刨坑，坑杀了二十万俘虏\n4. 蛊惑嬴政，造成焚书坑儒的惨剧\n5. 创建司马家族，三代弑君夺权，中原民不聊生\n6. 筹备八王之乱，使得中原沦陷，五胡乱华\n7. 教唆李世民发动玄武门兵变，弑杀兄长夺取皇位\n8. 怂恿秦晖向皇帝进谗言，以莫须有之罪杀害岳飞\n9. 火烧圆明园，为英法联军引路\n10. 在滑铁卢偷袭拿破仑，造成其战败\n孙伟的恶行罄竹难书，是名副其实的带恶人。`,
-    "course": {
-      "name": "数学分析I",
-      "code": "GEMA1009",
-      "id": 1,
-      "institute": "数学科学研究所"
-    },
-    "group": {
-      "id": 1,
-      "code": "GEMA1009.02",
-      "teachers": [{ "name": "姚成建", "id": 23 },]
-    },
-    "post_time": "20190507", //unix时间戳 初次发表时间
-    "update_time": "20210604",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "小明",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [5, 4, 3, 1],
-    "user_score_ranking": -1,
-  },
-  {
-    "id": 4,
-    "title": "锐评邹羽",
-    "content": `邹羽是傻逼`,
-    "course": {
-      "name": "甘地和英帝国的衰落",
-      "code": "GEHA1131",
-      "id": 88,
-      "institute": "人文科学研究院"
-    },
-    "group": {
-      "id": 1,
-      "code": "GEHA1131",
-      "teachers": [{ "name": "Ranjan Ritwik", "id": 923 },]
-    },
-    "post_time": "20210907", //unix时间戳 初次发表时间
-    "update_time": "20210907",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "小紫",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [5, 4, 3, 1],
-    "user_score_ranking": 2,
-  },
-  {
-    "id": 5,
-    "title": "免费的薯条",
-    "content": `**以下内容纯属虚构*  \n在写这篇评价之前，我在金拱门吃了一顿，柜台的那个姐姐问我：“你好呀，今天是不是过得很棒？”，不是那种 “今天过得怎么样？”，而是充满期待，“你今天是不是过得很棒？”。她问的非常矫情，好像我不同意就是我的责任，我今天没有过得很棒，我就成了负能量的中心。通常情况下人们会问：“你今天过的如何？”， 真实的回答是我过得很屎。但我不能这样说，因为我浑浑噩噩过了一天，连一个过得很屎的理由都没有。所以如果我说：“糟心透了！”，那么别人就会说：“为什么？出了什么事？”，而我只能说：“我不知道，一切都很糟。”因此取而代之，当别人问我今天过得怎么样时，我会回答说：“我过得好极了！”。但当金拱门的姐姐问我今天是不是过得很好时，我想，今天我可以过得很糟糕，因为我有合适的理由，于是我说：“我的数分挂了。”，然后她突然就开始哭了。我还得反过来安慰她，真是烦死了，何况后面还有一长队人等着。他们似乎都用批判的目光瞪着我，因为我把柜台的姐姐弄哭了。然后她放声大哭，嘴里说着：“对不起，对不起，真的非常对不起。”，而我只能说：“没事的，没事的，我是说，虽然不是很好，但就是没事。我想点一份安格斯MAX厚牛培根堡四件套，我还得去别的地方，所以能不能多给炸鸡加点油，少给我流点泪？”。然后她又道了一次歉，并在我取餐时送了我一份免费的薯条。在我走的时候，我想，“我获得了一份免费的薯条，因为我数分挂科了！”，可没人告诉过我，当你的数分挂科时，你能得到一份免费的薯条。  \n总而言之，我的数分挂科了。孙伟, 他是谁？他教数学分析I教得怎么样？首先他是数所的助理教授，于2018年加入上海科技大学。有一次，他用超前的知识评讲题目，让大量的同学都摸不着头脑。还有一次，在他周四的课上，到场的同学不足二十个，我亲眼看见的。真是一位不可思异的教授！这位教授带我走完了整个数学分析I的学习历程，直到我数分挂科，大概也就是现在吧。是不是很引人深思？这就是数学吧，变换莫测，难以理解，只能挂科。讲个故事吧，每到周末的时候，孙伟都会为同学们开小灶讲题，答疑解惑，我们都收益匪浅。或许课上他讲的很烂，但每到这个时候，我都能感觉到，他还是能讲好的。这才是关于孙伟的好故事，这不是真的，但是个好故事。我从数院同学那抄来的，孙伟给他们开小灶的故事，但我也不知道孙伟是否在那讲的很好。几乎所有的数分的知识点，都是我从网上学来的，但在数学分析中，但掌握知识点远远不够。你得从始至终的学习、刷题，无可置疑的努力，你不能只看看知识点就完事，再去写个镜像站，提供镜像服务；或是为做好信导project ，就连作业也不写。你必须时时刻刻都把数学分析放在心上，这真是太难了。入学之初，你对自己说，或许是自己课下复习不够，只要认真复习一下就能改善了，虽然也不一定就能听懂孙伟的下一堂课，甚至在孙伟一次又一次让你失望后，你依然坚信，存在那么一个时刻，孙伟是能够讲好的，让你真正学懂数学分析。我一直在等待这一刻，等某一刻，来证明，虽然孙伟平时讲的很烂，但在他内心深处，他是想讲好的，在特定的时间，他也是能讲好的；并且我也想让他知道，我的数学分析I的学习因为他而有了一丝光亮。就算是现在，我发现我还是在等，尽管我的数分以及挂科了。  \n某种程度上，我和孙伟是互相理解的。我听他讲课是坐牢，他给我讲课也一定是坐牢，因此确实是互相理解的。我非常清楚听孙伟的课就好像水慢慢没过头顶般溺水，但还是有一些稀少、短暂的瞬间，我似乎能听懂孙伟讲课；此时我突然记起，我是会游泳的。但是我再次强调，大多数时候不是，大多数时候都是溺水状态。他也应该明白这一点，他也应该知道我明白这一点。我们两人都淹在水里，我们不知道如何拯救对方，但我们都知道，我们要一起溺水而亡。虽然只有我会挂科，而他不会。  \n当你数分和线代都挂科时，你的概率论也多半无了。当然我并不是说挂科还有排队叫号的。任何时候，你们谁都有可能因为错过关键时间点而挂科。你们以为明白这一点会让自己更加努力学习，更加奋发向上。但这让我们变得更加迷茫，失去方向。  \n我的数分挂了，而我只有这包免费的薯条。你们知道最糟心的事情是什么吗？当柜台后那个陌生人给我免费薯条时，这小小的善意之举流露出的诚意，比孙伟一学期的数学分析I课程给予我的都要多。好好对别人能有多难！那个金拱门柜台的姐姐甚至都不认识我，而我是孙伟的学生！我只有你一个数学分析老师啊。  \n总之，我的数学分析I挂科了。我的线代挂科时，我曾说：“我的线代挂科了，一切都将变得更糟。“， 那时我为什么不去金拱门呢，说不定我也能得到一份免费的薯条。`,
-    "course": {
-      "name": "数学分析I",
-      "code": "GEMA1009",
-      "id": 1,
-      "institute": "数学科学研究所"
-    },
-    "group": {
-      "id": 19,
-      "code": "GEMA1009.03",
-      "teachers": [{ "name": "孙伟", "id": 293 },]
-    },
-    "post_time": "20210907", //unix时间戳 初次发表时间
-    "update_time": "20211023",//unix时间戳 最后更新时间
-    "semester": 202102,
-    "is_anonymous": false,
-    "user_nickname": "小白",  // 匿名时这个没有
-    "user_id": 123, // 匿名时这个没有（例外：本人查询自己的评论时）
-    "avatar": "https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1",
-    "grade": 1,
-    "score": [1, 3, 2, 4],
-    "user_score_ranking": 0,
-  },
-] // Just for test
-
-export const testCommmentStatistic = {
-  total: 6,
-  score: 2956,
-  count: {
-    "信息科学与技术学院": 1,
-    "物质科学与技术学院": 0,
-    "生命科学与技术学院": 0,
-    "创意与艺术学院": 0,
-    "创业与管理学院": 0,
-    "人文科学研究院": 1,
-    "生物医学工程学院": 0,
-    "数学科学研究所": 3,
-    "其他学院": 1
-  }
-} // Just for test
\ No newline at end of file
+// In memorize of some great piece of work used as phantom data
+
+export const testUserProfile = {
+  email: 'aReallyReallyReallyLongName@shanghaitech.edu.cn',
+  year: 2022,
+  grade: 1,
+  nickname: '一个很长很长很长很长很长的名字叫做小明',
+  realname: '阿仆杜拉-吴迪',
+  avatar:
+    'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+  show_email: true,
+  show_year: true,
+  show_grade: true,
+  show_realname: true,
+}; // Just for test
+
+export const testCommentText = [
+  {
+    id: 1,
+    title: '锐评孙伟',
+    content: `### 我是陈克应\n\`\`\`js\nvar foo = function (bar) {
+      return bar++;
+    };
+    
+    console.log(foo(5));\n\`\`\`\n\- Lesson 1\n\- Lesson 2\n1. Lesson 1\n2. Lesson 2
+    Ordered
+    1. Lorem ipsum dolor sit amet
+    2. Consectetur adipiscing elit
+    3. Integer molestie lorem at massa`,
+    course: {
+      name: '数学分析I',
+      code: 'GEMA1009',
+      id: 1,
+      institute: '其他学院',
+    },
+    group: {
+      id: 1,
+      code: 'GEMA1009.02',
+      teachers: [{ name: '姚成建', id: 23 }],
+    },
+    post_time: '20211012', //unix时间戳 初次发表时间
+    update_time: '20211023', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '小明', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [5, 4, 3, 2],
+    user_score_ranking: 2,
+  },
+  {
+    id: 2,
+    title:
+      '![跃进之罪](https://obohe.com/i/2022/01/31/x446zh.png)  \n 陈克应为什么是神?在谈论这个问题之前,我想先说说其他数分教授相较于陈克应究竟差在了哪里。首先是犯下跃进之罪的孙伟，曾经一天拉完三个课时, 课时进度稳居四个班之首,而且作业量所有题都做，总用-些复杂超前的讲法给出证明，孙伟像是嚼了炫迈一样根本停不下来，“你们都学过复数吧，那你们肯定知道欧拉公式.那我这题用欧拉公式，这样.这样...。” 这种过快而且超前的讲法在学生们看来,是极”左”且跃进的行为。事实也是如此，数分三班上课的人数一直在走下坡路,于是神降下了他的惩罚，来数分三班听课的人数只有个位数，最终泯然众人。与之相比神就很谦卑，大家听得懂，跟得上的速度讲课都是神留给凡人的慈悲，神不是不会那些很难的讲法，只是不想通过太难以理解的方法让同学们绝望所以故意不用，可笑有些人不理解神的良苦用心，竟然还用这些事来讥讽神，我劝你们好自为之。',
+    content: '为什么说陈克应是神....?  \n',
+    course: {
+      name: '数学分析I',
+      code: 'GEMA1009',
+      id: 1,
+      institute: '数学科学研究所',
+    },
+    group: {
+      id: 1,
+      code: 'GEMA1009.02',
+      teachers: [
+        {
+          name: '高盛华',
+          id: 23,
+        },
+        {
+          name: '梁俊睿',
+          id: 23,
+        },
+        {
+          name: '陆林燕',
+          id: 23,
+        },
+        {
+          name: '娄鑫',
+          id: 23,
+        },
+        {
+          name: '刘闯',
+          id: 23,
+        },
+        {
+          name: '郑锐',
+          id: 24,
+        },
+        {
+          name: '邱越',
+          id: 24,
+        },
+      ],
+    },
+    post_time: '20210604', //unix时间戳 初次发表时间
+    update_time: '20210908', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '小黑', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [5, 4, 3, 2],
+    user_score_ranking: 2,
+  },
+  {
+    id: 6,
+    title: '陈克应为什么是神 —— 孙伟与跃进之罪',
+    content: ` ![跃进之罪](https://ims.shanghaitech.edu.cn/_upload/article/images/c8/d1/7ab02afd4938b2195937472f06cd/c83ead60-55c5-494b-b8bb-2d0b81be0d86_s.jpg)  \n 陈克应为什么是神?在谈论这个问题之前,我想先说说其他数分教授相较于陈克应究竟差在了哪里。首先是犯下跃进之罪的孙伟，曾经一天拉完三个课时, 课时进度稳居四个班之首,而且作业量所有题都做，总用-些复杂超前的讲法给出证明，孙伟像是嚼了炫迈一样根本停不下来，“你们都学过复数吧，那你们肯定知道欧拉公式.那我这题用欧拉公式，这样.这样...。” 这种过快而且超前的讲法在学生们看来,是极”左”且跃进的行为。事实也是如此，数分三班上课的人数一直在走下坡路,于是神降下了他的惩罚，来数分三班听课的人数只有个位数，最终泯然众人。与之相比神就很谦卑，大家听得懂，跟得上的速度讲课都是神留给凡人的慈悲，神不是不会那些很难的讲法，只是不想通过太难以理解的方法让同学们绝望所以故意不用，可笑有些人不理解神的良苦用心，竟然还用这些事来讥讽神，我劝你们好自为之。`,
+    course: {
+      name: '信息科学技术导论',
+      code: 'SI100B',
+      id: 1,
+      institute: '信息科学与技术学院',
+    },
+    group: {
+      id: 1,
+      code: 'SI100B.01',
+      teachers: [
+        {
+          name: '高盛华',
+          id: 23,
+        },
+        {
+          name: '梁俊睿',
+          id: 23,
+        },
+        {
+          name: '陆林燕',
+          id: 23,
+        },
+        {
+          name: '娄鑫',
+          id: 23,
+        },
+        {
+          name: '刘闯',
+          id: 23,
+        },
+        {
+          name: '郑锐',
+          id: 24,
+        },
+        {
+          name: '邱越',
+          id: 24,
+        },
+      ],
+    },
+    post_time: '20200107', //unix时间戳 初次发表时间
+    update_time: '20211223', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '傻逼', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [5, 4, 3, 2],
+    user_score_ranking: 2,
+  },
+  {
+    id: 3,
+    title: '孙伟到底犯下了什么罪？',
+    content: `## 孙伟到底犯下了什么罪？根据一般历史记载，有包括但不限于以下的罪行   \n1. 撞断不周山，造成洪水泛滥，使华夏大地沦为汪洋大海\n2. 建造酒池肉林，使纣王虚度光阴，最终丢了王朝\n3. 帮白起刨坑，坑杀了二十万俘虏\n4. 蛊惑嬴政，造成焚书坑儒的惨剧\n5. 创建司马家族，三代弑君夺权，中原民不聊生\n6. 筹备八王之乱，使得中原沦陷，五胡乱华\n7. 教唆李世民发动玄武门兵变，弑杀兄长夺取皇位\n8. 怂恿秦晖向皇帝进谗言，以莫须有之罪杀害岳飞\n9. 火烧圆明园，为英法联军引路\n10. 在滑铁卢偷袭拿破仑，造成其战败\n孙伟的恶行罄竹难书，是名副其实的带恶人。`,
+    course: {
+      name: '数学分析I',
+      code: 'GEMA1009',
+      id: 1,
+      institute: '数学科学研究所',
+    },
+    group: {
+      id: 1,
+      code: 'GEMA1009.02',
+      teachers: [{ name: '姚成建', id: 23 }],
+    },
+    post_time: '20190507', //unix时间戳 初次发表时间
+    update_time: '20210604', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '小明', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [5, 4, 3, 1],
+    user_score_ranking: -1,
+  },
+  {
+    id: 4,
+    title: '锐评邹羽',
+    content: `邹羽是傻逼`,
+    course: {
+      name: '甘地和英帝国的衰落',
+      code: 'GEHA1131',
+      id: 88,
+      institute: '人文科学研究院',
+    },
+    group: {
+      id: 1,
+      code: 'GEHA1131',
+      teachers: [{ name: 'Ranjan Ritwik', id: 923 }],
+    },
+    post_time: '20210907', //unix时间戳 初次发表时间
+    update_time: '20210907', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '小紫', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [5, 4, 3, 1],
+    user_score_ranking: 2,
+  },
+  {
+    id: 5,
+    title: '免费的薯条',
+    content: `**以下内容纯属虚构*  \n在写这篇评价之前，我在金拱门吃了一顿，柜台的那个姐姐问我：“你好呀，今天是不是过得很棒？”，不是那种 “今天过得怎么样？”，而是充满期待，“你今天是不是过得很棒？”。她问的非常矫情，好像我不同意就是我的责任，我今天没有过得很棒，我就成了负能量的中心。通常情况下人们会问：“你今天过的如何？”， 真实的回答是我过得很屎。但我不能这样说，因为我浑浑噩噩过了一天，连一个过得很屎的理由都没有。所以如果我说：“糟心透了！”，那么别人就会说：“为什么？出了什么事？”，而我只能说：“我不知道，一切都很糟。”因此取而代之，当别人问我今天过得怎么样时，我会回答说：“我过得好极了！”。但当金拱门的姐姐问我今天是不是过得很好时，我想，今天我可以过得很糟糕，因为我有合适的理由，于是我说：“我的数分挂了。”，然后她突然就开始哭了。我还得反过来安慰她，真是烦死了，何况后面还有一长队人等着。他们似乎都用批判的目光瞪着我，因为我把柜台的姐姐弄哭了。然后她放声大哭，嘴里说着：“对不起，对不起，真的非常对不起。”，而我只能说：“没事的，没事的，我是说，虽然不是很好，但就是没事。我想点一份安格斯MAX厚牛培根堡四件套，我还得去别的地方，所以能不能多给炸鸡加点油，少给我流点泪？”。然后她又道了一次歉，并在我取餐时送了我一份免费的薯条。在我走的时候，我想，“我获得了一份免费的薯条，因为我数分挂科了！”，可没人告诉过我，当你的数分挂科时，你能得到一份免费的薯条。  \n总而言之，我的数分挂科了。孙伟, 他是谁？他教数学分析I教得怎么样？首先他是数所的助理教授，于2018年加入上海科技大学。有一次，他用超前的知识评讲题目，让大量的同学都摸不着头脑。还有一次，在他周四的课上，到场的同学不足二十个，我亲眼看见的。真是一位不可思异的教授！这位教授带我走完了整个数学分析I的学习历程，直到我数分挂科，大概也就是现在吧。是不是很引人深思？这就是数学吧，变换莫测，难以理解，只能挂科。讲个故事吧，每到周末的时候，孙伟都会为同学们开小灶讲题，答疑解惑，我们都收益匪浅。或许课上他讲的很烂，但每到这个时候，我都能感觉到，他还是能讲好的。这才是关于孙伟的好故事，这不是真的，但是个好故事。我从数院同学那抄来的，孙伟给他们开小灶的故事，但我也不知道孙伟是否在那讲的很好。几乎所有的数分的知识点，都是我从网上学来的，但在数学分析中，但掌握知识点远远不够。你得从始至终的学习、刷题，无可置疑的努力，你不能只看看知识点就完事，再去写个镜像站，提供镜像服务；或是为做好信导project ，就连作业也不写。你必须时时刻刻都把数学分析放在心上，这真是太难了。入学之初，你对自己说，或许是自己课下复习不够，只要认真复习一下就能改善了，虽然也不一定就能听懂孙伟的下一堂课，甚至在孙伟一次又一次让你失望后，你依然坚信，存在那么一个时刻，孙伟是能够讲好的，让你真正学懂数学分析。我一直在等待这一刻，等某一刻，来证明，虽然孙伟平时讲的很烂，但在他内心深处，他是想讲好的，在特定的时间，他也是能讲好的；并且我也想让他知道，我的数学分析I的学习因为他而有了一丝光亮。就算是现在，我发现我还是在等，尽管我的数分以及挂科了。  \n某种程度上，我和孙伟是互相理解的。我听他讲课是坐牢，他给我讲课也一定是坐牢，因此确实是互相理解的。我非常清楚听孙伟的课就好像水慢慢没过头顶般溺水，但还是有一些稀少、短暂的瞬间，我似乎能听懂孙伟讲课；此时我突然记起，我是会游泳的。但是我再次强调，大多数时候不是，大多数时候都是溺水状态。他也应该明白这一点，他也应该知道我明白这一点。我们两人都淹在水里，我们不知道如何拯救对方，但我们都知道，我们要一起溺水而亡。虽然只有我会挂科，而他不会。  \n当你数分和线代都挂科时，你的概率论也多半无了。当然我并不是说挂科还有排队叫号的。任何时候，你们谁都有可能因为错过关键时间点而挂科。你们以为明白这一点会让自己更加努力学习，更加奋发向上。但这让我们变得更加迷茫，失去方向。  \n我的数分挂了，而我只有这包免费的薯条。你们知道最糟心的事情是什么吗？当柜台后那个陌生人给我免费薯条时，这小小的善意之举流露出的诚意，比孙伟一学期的数学分析I课程给予我的都要多。好好对别人能有多难！那个金拱门柜台的姐姐甚至都不认识我，而我是孙伟的学生！我只有你一个数学分析老师啊。  \n总之，我的数学分析I挂科了。我的线代挂科时，我曾说：“我的线代挂科了，一切都将变得更糟。“， 那时我为什么不去金拱门呢，说不定我也能得到一份免费的薯条。`,
+    course: {
+      name: '数学分析I',
+      code: 'GEMA1009',
+      id: 1,
+      institute: '数学科学研究所',
+    },
+    group: {
+      id: 19,
+      code: 'GEMA1009.03',
+      teachers: [{ name: '孙伟', id: 293 }],
+    },
+    post_time: '20210907', //unix时间戳 初次发表时间
+    update_time: '20211023', //unix时间戳 最后更新时间
+    semester: 202102,
+    is_anonymous: false,
+    user_nickname: '小白', // 匿名时这个没有
+    user_id: 123, // 匿名时这个没有（例外：本人查询自己的评论时）
+    avatar:
+      'https://tse4-mm.cn.bing.net/th/id/OIP-C.JdnTbs1HeiRA1zP2s7hxcgAAAA?pid=ImgDet&rs=1',
+    grade: 1,
+    score: [1, 3, 2, 4],
+    user_score_ranking: 0,
+  },
+]; // Just for test
+
+export const testCommmentStatistic = {
+  total: 6,
+  score: 2956,
+  count: {
+    信息科学与技术学院: 1,
+    物质科学与技术学院: 0,
+    生命科学与技术学院: 0,
+    创意与艺术学院: 0,
+    创业与管理学院: 0,
+    人文科学研究院: 1,
+    生物医学工程学院: 0,
+    数学科学研究所: 3,
+    其他学院: 1,
+  },
+}; // Just for test
diff --git a/src/composables/global/useRecordWatch.js b/src/composables/global/useRecordWatch.js
index 43be4d5..64e0260 100644
--- a/src/composables/global/useRecordWatch.js
+++ b/src/composables/global/useRecordWatch.js
@@ -1,9 +1,13 @@
-import { watch } from "vue"
-
-export default (src, callback, options = {}) => {
-    let oldValue = Object.assign({}, src)
-    watch(src, function() {
-        callback.apply(this, [oldValue, ...arguments])
-        oldValue = Object.assign({}, src)
-    }, options)
-}
\ No newline at end of file
+import { watch } from 'vue';
+
+export default (src, callback, options = {}) => {
+  let oldValue = Object.assign({}, src);
+  watch(
+    src,
+    function () {
+      callback.apply(this, [oldValue, ...arguments]);
+      oldValue = Object.assign({}, src);
+    },
+    options,
+  );
+};
diff --git a/src/composables/global/useRefCopy.js b/src/composables/global/useRefCopy.js
index 556f8c2..b64fcab 100644
--- a/src/composables/global/useRefCopy.js
+++ b/src/composables/global/useRefCopy.js
@@ -1,18 +1,17 @@
-export default (from, to) => {
-    const fromPrototype = Object.getPrototypeOf(from)
-    const toPrototype = Object.getPrototypeOf(to)
-    if (fromPrototype !== toPrototype) {
-        throw new Error(`Cannot copy property '${key}' to object '${to}'`)
-    }
-    if (from instanceof Array) {
-        to.splice(0, to.length, ...from)
-    } else {
-        const attrs = Object.getOwnPropertyNames(from)
-        for (let attr of attrs) {
-            if (attr != "__ob__") {
-                to[attr] = from[attr]
-            }
-        }
-    }
-
-}
\ No newline at end of file
+export default (from, to) => {
+  const fromPrototype = Object.getPrototypeOf(from);
+  const toPrototype = Object.getPrototypeOf(to);
+  if (fromPrototype !== toPrototype) {
+    throw new Error(`Cannot copy property '${key}' to object '${to}'`);
+  }
+  if (from instanceof Array) {
+    to.splice(0, to.length, ...from);
+  } else {
+    const attrs = Object.getOwnPropertyNames(from);
+    for (let attr of attrs) {
+      if (attr != '__ob__') {
+        to[attr] = from[attr];
+      }
+    }
+  }
+};
diff --git a/src/composables/global/useRouteMatch.js b/src/composables/global/useRouteMatch.js
index 042833d..9d3c04b 100644
--- a/src/composables/global/useRouteMatch.js
+++ b/src/composables/global/useRouteMatch.js
@@ -1,11 +1,9 @@
-import { useRoute } from '@/router/migrateRouter'
-
-
-export default () => {
-
-    const route = useRoute()
-
-    const isCurrentPath = (path) => !new RegExp(path).test(route.path)
-
-    return { isCurrentPath }
-}
\ No newline at end of file
+import { useRoute } from '@/router/migrateRouter';
+
+export default () => {
+  const route = useRoute();
+
+  const isCurrentPath = (path) => !new RegExp(path).test(route.path);
+
+  return { isCurrentPath };
+};
diff --git a/src/composables/global/useShare.js b/src/composables/global/useShare.js
index 42e6b80..da0645e 100644
--- a/src/composables/global/useShare.js
+++ b/src/composables/global/useShare.js
@@ -1,8 +1,5 @@
-export const shareLogoDark = 
-`data:image/png;base64,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`;
+export const shareLogoDark = `data:image/png;base64,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`;
 
-export const shareLogoLight = 
-`data:image/png;base64,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`;
+export const shareLogoLight = `data:image/png;base64,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`;
 
-export const shareLogoTitle = 
-`data:image/png;base64,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`
\ No newline at end of file
+export const shareLogoTitle = `data:image/png;base64,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`;
diff --git a/src/composables/global/useSnackbar.js b/src/composables/global/useSnackbar.js
index 380a0a8..5af997a 100644
--- a/src/composables/global/useSnackbar.js
+++ b/src/composables/global/useSnackbar.js
@@ -1,15 +1,14 @@
-import { provide, ref } from "vue"
-
-export default () => {
-
-  const snackbar = ref({ show: false, text: null, color: null, timeout: 5000 })
-
-  const showSnackbar = (color, text, timeout = 5000) => {
-    snackbar.value = { show: true, text: text, color: color, timeout: timeout }
-  }
-
-  // Port the function to show snackbar global
-  provide("showSnackbar", showSnackbar)
-
-  return { snackbar }
-}
\ No newline at end of file
+import { provide, ref } from 'vue';
+
+export default () => {
+  const snackbar = ref({ show: false, text: null, color: null, timeout: 5000 });
+
+  const showSnackbar = (color, text, timeout = 5000) => {
+    snackbar.value = { show: true, text: text, color: color, timeout: timeout };
+  };
+
+  // Port the function to show snackbar global
+  provide('showSnackbar', showSnackbar);
+
+  return { snackbar };
+};
diff --git a/src/composables/global/useSponsors.js b/src/composables/global/useSponsors.js
index f87268e..b9f594a 100644
--- a/src/composables/global/useSponsors.js
+++ b/src/composables/global/useSponsors.js
@@ -1,67 +1,67 @@
-const avatarRegistry = {
-    "qq": id => `https://q1.qlogo.cn/g?b=qq&nk=${id}&s=160`, 
-    "github": id => `https://avatars.githubusercontent.com/u/${id}?s=64&v=4`, 
-}
-
-/**
- * Map avatar notation to avatar url, using the avatar registry above.
- * 
- * @param {String} link - Avatar notation.
- * @returns String - Avatar url.
- * 
- * @remarks
- *  Since it uses vuetify to match mobile devices, it only works in vue components.
- */
-export function parseAvatarLink(link) {
-    if (link === "") {
-        return ""
-    }
-    for (const [key, value] of Object.entries(avatarRegistry)) {
-        if (link.startsWith(key)) {
-            if (value instanceof Function) {
-                return value(link.slice(key.length + 1));
-            } else if (this.$vuetify.breakpoint.xsOnly) {
-                return value.mobile(link.slice(key.length + 1));
-            } else {
-                return value.desktop(link.slice(key.length + 1));
-            }
-        }
-    }
-    return link;
-}
-
-
-const homeRegistry = {
-    "qq": {
-        "mobile": id => `mqqwpa://im/chat?chat_type=wpa&uin=${id}&version=1&src_type=web`, 
-        "desktop": id => `tencent://message/?uin=${id}&Site=qq&Menu=yes`,
-    }, 
-    "github": id => `https://github.com/${id}`, 
-}
-
-/**
- * Map home notation to home url, using the home registry above.
- * 
- * @param {String} link - Home notation.
- * @returns String - Home url.
- * 
- * @remarks
- *  Since it uses vuetify to match mobile devices, it only works in vue components.
- */
-export function parseHomeLink(link) {
-    if (link === "") {
-        return "javascript:void(0)"
-    }
-    for (const [key, value] of Object.entries(homeRegistry)) {
-        if (link.startsWith(key)) {
-            if (value instanceof Function) {
-                return value(link.slice(key.length + 1));
-            } else if (this.$vuetify.breakpoint.xsOnly) {
-                return value.mobile(link.slice(key.length + 1));
-            } else {
-                return value.desktop(link.slice(key.length + 1));
-            }
-        }
-    }
-    return link;
-}
\ No newline at end of file
+const avatarRegistry = {
+  qq: (id) => `https://q1.qlogo.cn/g?b=qq&nk=${id}&s=160`,
+  github: (id) => `https://avatars.githubusercontent.com/u/${id}?s=64&v=4`,
+};
+
+/**
+ * Map avatar notation to avatar url, using the avatar registry above.
+ *
+ * @param {String} link - Avatar notation.
+ * @returns String - Avatar url.
+ *
+ * @remarks
+ *  Since it uses vuetify to match mobile devices, it only works in vue components.
+ */
+export function parseAvatarLink(link) {
+  if (link === '') {
+    return '';
+  }
+  for (const [key, value] of Object.entries(avatarRegistry)) {
+    if (link.startsWith(key)) {
+      if (value instanceof Function) {
+        return value(link.slice(key.length + 1));
+      } else if (this.$vuetify.breakpoint.xsOnly) {
+        return value.mobile(link.slice(key.length + 1));
+      } else {
+        return value.desktop(link.slice(key.length + 1));
+      }
+    }
+  }
+  return link;
+}
+
+const homeRegistry = {
+  qq: {
+    mobile: (id) =>
+      `mqqwpa://im/chat?chat_type=wpa&uin=${id}&version=1&src_type=web`,
+    desktop: (id) => `tencent://message/?uin=${id}&Site=qq&Menu=yes`,
+  },
+  github: (id) => `https://github.com/${id}`,
+};
+
+/**
+ * Map home notation to home url, using the home registry above.
+ *
+ * @param {String} link - Home notation.
+ * @returns String - Home url.
+ *
+ * @remarks
+ *  Since it uses vuetify to match mobile devices, it only works in vue components.
+ */
+export function parseHomeLink(link) {
+  if (link === '') {
+    return 'javascript:void(0)';
+  }
+  for (const [key, value] of Object.entries(homeRegistry)) {
+    if (link.startsWith(key)) {
+      if (value instanceof Function) {
+        return value(link.slice(key.length + 1));
+      } else if (this.$vuetify.breakpoint.xsOnly) {
+        return value.mobile(link.slice(key.length + 1));
+      } else {
+        return value.desktop(link.slice(key.length + 1));
+      }
+    }
+  }
+  return link;
+}
diff --git a/src/composables/global/useStaticData.js b/src/composables/global/useStaticData.js
index f4053e1..c57e713 100644
--- a/src/composables/global/useStaticData.js
+++ b/src/composables/global/useStaticData.js
@@ -1,67 +1,73 @@
 const instituteInfo = {
-    "信息科学与技术学院": {name: "SIST", color: "#b0c4de"},
-    "物质科学与技术学院": {name: "SPST", color: "#00a650"},
-    "生命科学与技术学院": {name: "SLST", color: "#f39800"},
-    "创意与艺术学院": {name: "SCA", color: "#000000"},
-    "创业与管理学院": {name: "SEM", color: "#7d3c92"},
-    "人文科学研究院": {name: "GE", color: "#a40050"},
-    "生物医学工程学院": {name: "BME", color: "#101f5b"},
-    "数学科学研究所": {name: "IMS", color: "#2800ae"},
-    "其他学院": {name: "Other", color: "#757575"},
-    "": {name: "None", color: "#B0B0B0"}
-}
+  信息科学与技术学院: { name: 'SIST', color: '#b0c4de' },
+  物质科学与技术学院: { name: 'SPST', color: '#00a650' },
+  生命科学与技术学院: { name: 'SLST', color: '#f39800' },
+  创意与艺术学院: { name: 'SCA', color: '#000000' },
+  创业与管理学院: { name: 'SEM', color: '#7d3c92' },
+  人文科学研究院: { name: 'GE', color: '#a40050' },
+  生物医学工程学院: { name: 'BME', color: '#101f5b' },
+  数学科学研究所: { name: 'IMS', color: '#2800ae' },
+  其他学院: { name: 'Other', color: '#757575' },
+  '': { name: 'None', color: '#B0B0B0' },
+};
 
 const scoreInfo = [
-    {label: "数据不足", color: "#B0B0B0"}, // if comment num < 5, we use this
-    {label: "特别差评", color: "#FF5252"},
-    {label: "多半差评", color: "#FF892F"},
-    {label: "褒贬不一", color: "#FFC107"},
-    {label: "多半好评", color: "#A4BE23"},
-    {label: "特别好评", color: "#709800"},
-    {label: "好评如潮", color: "#1B5E20"},
-    {label: "差评如潮", color: "#B71C1C"}, // otherwise, we use this
-]
+  { label: '数据不足', color: '#B0B0B0' }, // if comment num < 5, we use this
+  { label: '特别差评', color: '#FF5252' },
+  { label: '多半差评', color: '#FF892F' },
+  { label: '褒贬不一', color: '#FFC107' },
+  { label: '多半好评', color: '#A4BE23' },
+  { label: '特别好评', color: '#709800' },
+  { label: '好评如潮', color: '#1B5E20' },
+  { label: '差评如潮', color: '#B71C1C' }, // otherwise, we use this
+];
 
 const gradingInfo = {
-    quality: ["很差", "较差", "一般", "较好", "很好"],
-    workload: [">8h ", "4-8h", "2-4h", "1-2h", "<1h "],
-    difficulty: ["很难", "较难", "适中", "偏易", "简单"],
-    distribution: ["很差", "较差", "一般", "较好", "很好"],
-    color: ["#FF5252", "#FF892F", "#FFC107", "#A4BE23", "#709800"],
-}
+  quality: ['很差', '较差', '一般', '较好', '很好'],
+  workload: ['>8h ', '4-8h', '2-4h', '1-2h', '<1h '],
+  difficulty: ['很难', '较难', '适中', '偏易', '简单'],
+  distribution: ['很差', '较差', '一般', '较好', '很好'],
+  color: ['#FF5252', '#FF892F', '#FFC107', '#A4BE23', '#709800'],
+};
 
-const judgeItems = ["课程质量", "作业用时", "考核难度", "给分情况"]
-const gradeItems = ["暂不透露", "本科生", "硕士研究生", "博士研究生"]
-const visibleItems = ["匿名", "公开"]
+const judgeItems = ['课程质量', '作业用时', '考核难度', '给分情况'];
+const gradeItems = ['暂不透露', '本科生', '硕士研究生', '博士研究生'];
+const visibleItems = ['匿名', '公开'];
 const rawYearItems = (() => {
-    const startYear = 2014
-    const nowYear = new Date().getFullYear()
-    return new Array(nowYear - startYear + 1).fill(0).map((_, index) => startYear + index)
-})().reverse()
-const yearItems = rawYearItems.concat(['暂不透露']).reverse()
+  const startYear = 2014;
+  const nowYear = new Date().getFullYear();
+  return new Array(nowYear - startYear + 1)
+    .fill(0)
+    .map((_, index) => startYear + index);
+})().reverse();
+const yearItems = rawYearItems.concat(['暂不透露']).reverse();
 
-const termItems = [{
-    id: "01",
-    name: "秋学期"
-}, {
-    id: "02",
-    name: "春学期"
-}, {
-    id: "03",
-    name: "暑学期"
-}]
+const termItems = [
+  {
+    id: '01',
+    name: '秋学期',
+  },
+  {
+    id: '02',
+    name: '春学期',
+  },
+  {
+    id: '03',
+    name: '暑学期',
+  },
+];
 
-const gradingEmojis = ["😭", "☹️", "🙁", "🙂", "😊"]
+const gradingEmojis = ['😭', '☹️', '🙁', '🙂', '😊'];
 
 export {
-    instituteInfo,
-    scoreInfo,
-    gradingInfo,
-    judgeItems,
-    gradeItems,
-    visibleItems,
-    yearItems,
-    rawYearItems,
-    termItems, 
-    gradingEmojis
-}
\ No newline at end of file
+  instituteInfo,
+  scoreInfo,
+  gradingInfo,
+  judgeItems,
+  gradeItems,
+  visibleItems,
+  yearItems,
+  rawYearItems,
+  termItems,
+  gradingEmojis,
+};
diff --git a/src/composables/global/useTimeUtils.js b/src/composables/global/useTimeUtils.js
index d1a589c..506c8d7 100644
--- a/src/composables/global/useTimeUtils.js
+++ b/src/composables/global/useTimeUtils.js
@@ -1,7 +1,5 @@
-function unixToReadable(unix) {
-  return new Date(unix * 1000).toISOString().slice(0, 10)
-}
-
-export {
-  unixToReadable,
-}
\ No newline at end of file
+function unixToReadable(unix) {
+  return new Date(unix * 1000).toISOString().slice(0, 10);
+}
+
+export { unixToReadable };
diff --git a/src/composables/global/useUserName.js b/src/composables/global/useUserName.js
index 1beff9d..8cf4479 100644
--- a/src/composables/global/useUserName.js
+++ b/src/composables/global/useUserName.js
@@ -1,31 +1,36 @@
-/**
- * We need to decide which to use as the short name to be displayed in
- * the avatar when there is no avatar.
- * @param {Object{
- *      nickname?: String,
- *      realname?: String,
- *      email: String,
- *      is_anonymous: Boolean
- *      id: String | Number
- * }} userProfile
- * 
- * @returns {String}
- */
-export default (userProfile) => {
-    if (userProfile === null) {
-        return '匿名用户'
-    }
-    const { nickname, realname, email, is_anonymous, id } = userProfile
-    if (nickname) { // if we have a nickname, then use it
-        if (is_anonymous) { // if the user is anonymous, then use the nickname
-            return "匿名昵称：" + nickname
-        }
-        return nickname
-    } else if (realname && !is_anonymous) { // if we have a realname and not anonymous, then use it
-        return realname
-    } else if (id) { // if we have user id, then use `User_${id}`
-        return `User_${id}`
-    } else { // otherwise, use the email
-        return email
-    }
-}
\ No newline at end of file
+/**
+ * We need to decide which to use as the short name to be displayed in
+ * the avatar when there is no avatar.
+ * @param {Object{
+ *      nickname?: String,
+ *      realname?: String,
+ *      email: String,
+ *      is_anonymous: Boolean
+ *      id: String | Number
+ * }} userProfile
+ *
+ * @returns {String}
+ */
+export default (userProfile) => {
+  if (userProfile === null) {
+    return '匿名用户';
+  }
+  const { nickname, realname, email, is_anonymous, id } = userProfile;
+  if (nickname) {
+    // if we have a nickname, then use it
+    if (is_anonymous) {
+      // if the user is anonymous, then use the nickname
+      return '匿名昵称：' + nickname;
+    }
+    return nickname;
+  } else if (realname && !is_anonymous) {
+    // if we have a realname and not anonymous, then use it
+    return realname;
+  } else if (id) {
+    // if we have user id, then use `User_${id}`
+    return `User_${id}`;
+  } else {
+    // otherwise, use the email
+    return email;
+  }
+};
diff --git a/src/composables/global/useWatching.js b/src/composables/global/useWatching.js
index 8bddd62..e6d3426 100644
--- a/src/composables/global/useWatching.js
+++ b/src/composables/global/useWatching.js
@@ -1,5 +1,5 @@
-import { watch } from "vue"
+import { watch } from 'vue';
 
 export default (variable, callback) => {
-    watch(variable, callback, { deep: true, immediate: true })
-}
\ No newline at end of file
+  watch(variable, callback, { deep: true, immediate: true });
+};
diff --git a/src/composables/reward/useModifyReward.js b/src/composables/reward/useModifyReward.js
index 596db3c..410f342 100644
--- a/src/composables/reward/useModifyReward.js
+++ b/src/composables/reward/useModifyReward.js
@@ -1,35 +1,37 @@
-import useDebounce from "@/composables/global/useDebounce";
+import useDebounce from '@/composables/global/useDebounce';
 import useMutation from '@/composables/global/useMutation';
-import { inject, ref } from "vue";
+import { inject, ref } from 'vue';
 export default () => {
-    const showSnackbar = inject("showSnackbar")
-    // const onEnterUp = () => {console.log("SHIT");
-    // console.log(formStatus.reward);}
-    const formStatus = ref({
-        id: 0,
-        reward: "1145.14",
-    })
-    const rewardMutation = useMutation("/reward/set", {
-        onMutate: () => {},
-        onSuccess: (response) => {
-            showSnackbar("success", "修改成功")
-            // setTimeout(() => {
-            //     window.location.reload()
-            // }, 1000)
-        },
-        onError: (error) => {
-            formStatus.loading = false
-            formStatus.isPostError = true
-            if (isNetworkError(error.response)) {
-                showSnackbar("error", error.response.data.code)
-            }
-            else {
-                showSnackbar("error", error.response.data)
-            }
-        }
-    })
-    const doModifyReward = useDebounce((()=>{
-        rewardMutation.mutate({"id": formStatus.value.id, "reward": Math.floor(parseFloat(formStatus.value.reward) * 100)});
-    }))
-    return {doModifyReward, formStatus};
-}
\ No newline at end of file
+  const showSnackbar = inject('showSnackbar');
+  // const onEnterUp = () => {console.log("SHIT");
+  // console.log(formStatus.reward);}
+  const formStatus = ref({
+    id: 0,
+    reward: '1145.14',
+  });
+  const rewardMutation = useMutation('/reward/set', {
+    onMutate: () => {},
+    onSuccess: (response) => {
+      showSnackbar('success', '修改成功');
+      // setTimeout(() => {
+      //     window.location.reload()
+      // }, 1000)
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      formStatus.isPostError = true;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', error.response.data.code);
+      } else {
+        showSnackbar('error', error.response.data);
+      }
+    },
+  });
+  const doModifyReward = useDebounce(() => {
+    rewardMutation.mutate({
+      id: formStatus.value.id,
+      reward: Math.floor(parseFloat(formStatus.value.reward) * 100),
+    });
+  });
+  return { doModifyReward, formStatus };
+};
diff --git a/src/composables/reward/useRewardRank.js b/src/composables/reward/useRewardRank.js
index aec0593..acd14af 100644
--- a/src/composables/reward/useRewardRank.js
+++ b/src/composables/reward/useRewardRank.js
@@ -18,8 +18,7 @@ const headers = [
 export default () => {
   const showSnackbar = inject('showSnackbar');
 
-  const rankList = ref([
-  ]);
+  const rankList = ref([]);
 
   const status = reactive({
     loading: true,
diff --git a/src/composables/teachers/course/useCourseCard.js b/src/composables/teachers/course/useCourseCard.js
index 6012a1c..a1dca91 100644
--- a/src/composables/teachers/course/useCourseCard.js
+++ b/src/composables/teachers/course/useCourseCard.js
@@ -1,16 +1,12 @@
-import {
-  mdiSchool,  
-  mdiDotsHorizontal, 
-} from "@mdi/js";
-
-export default () => {
-
-  const statics = {
-    icons: {
-      mdiSchool,  
-      mdiDotsHorizontal, 
-    }, 
-  }
-
-  return { statics }
-}
\ No newline at end of file
+import { mdiSchool, mdiDotsHorizontal } from '@mdi/js';
+
+export default () => {
+  const statics = {
+    icons: {
+      mdiSchool,
+      mdiDotsHorizontal,
+    },
+  };
+
+  return { statics };
+};
diff --git a/src/composables/teachers/course/useStatisticCard.js b/src/composables/teachers/course/useStatisticCard.js
index 26e5af8..1f85a65 100644
--- a/src/composables/teachers/course/useStatisticCard.js
+++ b/src/composables/teachers/course/useStatisticCard.js
@@ -1,30 +1,29 @@
-import { inject, reactive, toRefs } from "vue"
-import { 
-  mdiClipboardOutline, 
-  mdiThumbUpOutline, 
-  mdiChevronDown, 
-  mdiChevronUp, 
-  mdiClipboardText, 
-} from "@mdi/js"
-
-export default () => {
-
-  const courseStatistic = inject('courseStatistic')
-
-  const statics = {
-    icons: {
-      mdiClipboardOutline,
-      mdiChevronDown,
-      mdiChevronUp,
-      mdiThumbUpOutline, 
-      mdiClipboardText, 
-    },
-  }
-
-  const status = reactive({
-    showAll: true,
-    ...toRefs(inject("courseFilterStatus"))
-  })
-
-  return { courseStatistic, statics, status }
-}
\ No newline at end of file
+import { inject, reactive, toRefs } from 'vue';
+import {
+  mdiClipboardOutline,
+  mdiThumbUpOutline,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiClipboardText,
+} from '@mdi/js';
+
+export default () => {
+  const courseStatistic = inject('courseStatistic');
+
+  const statics = {
+    icons: {
+      mdiClipboardOutline,
+      mdiChevronDown,
+      mdiChevronUp,
+      mdiThumbUpOutline,
+      mdiClipboardText,
+    },
+  };
+
+  const status = reactive({
+    showAll: true,
+    ...toRefs(inject('courseFilterStatus')),
+  });
+
+  return { courseStatistic, statics, status };
+};
diff --git a/src/composables/teachers/detail/useDetail.js b/src/composables/teachers/detail/useDetail.js
index 11ffe2d..88382da 100644
--- a/src/composables/teachers/detail/useDetail.js
+++ b/src/composables/teachers/detail/useDetail.js
@@ -1,8 +1,7 @@
-import { inject } from "vue"
-
-export default () => {
-
-  const teacherDetail = inject("teacherDetail")
-
-  return { teacherDetail }
-}
\ No newline at end of file
+import { inject } from 'vue';
+
+export default () => {
+  const teacherDetail = inject('teacherDetail');
+
+  return { teacherDetail };
+};
diff --git a/src/composables/teachers/useTeacherDetail.js b/src/composables/teachers/useTeacherDetail.js
index 6056369..f1315b8 100644
--- a/src/composables/teachers/useTeacherDetail.js
+++ b/src/composables/teachers/useTeacherDetail.js
@@ -1,116 +1,116 @@
-import { provide, reactive, ref, onMounted, inject } from "vue"
-import useFetching from "@/composables/global/useFetching"
-import useWatching from "@/composables/global/useWatching"
-import useRefCopy from "@/composables/global/useRefCopy"
-import { useRouter, useRoute } from "@/router/migrateRouter"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import { instituteInfo } from "@/composables/global/useStaticData"
-
-export default () => {
-
-  const router = useRouter()
-  const route = useRoute()
-  const showSnackbar = inject("showSnackbar")
-
-
-
-  const teacherDetail = reactive({
-    "id": 0,
-    "name": "",
-    "avatar": "",
-    "institute": "",
-    "job": "",
-    "introduction": "",
-    "courses": [],
-  })
-
-  const courseText = ref([])
-
-  const courseStatistic = reactive({
-    total: 0,
-    score: 0,
-    count: (() => {
-      let ret = {}
-      Object.keys(instituteInfo).filter(key => key !== '').forEach(key => {
-        ret[key] = 0
-      })
-      return ret
-    })(),
-  })
-
-
-
-  const status = reactive({
-    loading: true
-  })
-
-  const courseFilterStatus = reactive({
-    selected: [],
-  })
-
-
-  
-  const getCourseStatistic = () => {
-    courseStatistic.total = teacherDetail.courses.length
-    const schools = Object.getOwnPropertyNames(courseStatistic.count).filter((key) => {
-      return key != "__ob__" && key != "其他学院"
-    })
-    for (let course of teacherDetail.courses) {
-      if (schools.indexOf(course.institute) >= 0) {
-        courseStatistic.count[course.institute]++
-      } else {
-        courseStatistic.count["其他学院"]++
-        course.institute = "其他学院"
-      }
-    }
-  }
-
-  const getTeacherDetail = () => {
-    const id = route.params.id
-    const { status: fetchStatus, data, error } = useFetching(["teacher_detail", id], "/teacher/" + id)
-    useWatching(fetchStatus, () => {
-      if (fetchStatus.value == "success") {
-        status.loading = false
-      } else if (fetchStatus.value == "error") {
-        if (isNetworkError(error.value.response)) {
-          showSnackbar("error", "网络连接错误", 3000)
-        } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar("error", error.value.response.data.msg, 3000)
-        } else {
-          showSnackbar("error", "服务器发生错误", 3000)
-        }
-        setTimeout(() => router.push("/"), 3000)
-      }
-    })
-    useWatching(data, () => {
-      if (data.value) {
-        useRefCopy(data.value.data, teacherDetail)
-        getCourseStatistic()
-        courseText.value = teacherDetail.courses
-        courseFilterStatus.selected = (() => {
-          let ret = new Array()
-          for (let key in courseStatistic.count) {
-            if (courseStatistic.count[key]) {
-              ret.push(key)
-            }
-          } return ret
-        })()
-      }
-    })
-  }
-
-
-
-  onMounted(() => {
-    getTeacherDetail()
-  })
-
-
-
-  provide("courseStatistic", courseStatistic)
-  provide("courseFilterStatus", courseFilterStatus)
-  provide("teacherDetail", teacherDetail)
-
-  return { courseText, status, courseFilterStatus, teacherDetail }
-
-}
\ No newline at end of file
+import { provide, reactive, ref, onMounted, inject } from 'vue';
+import useFetching from '@/composables/global/useFetching';
+import useWatching from '@/composables/global/useWatching';
+import useRefCopy from '@/composables/global/useRefCopy';
+import { useRouter, useRoute } from '@/router/migrateRouter';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import { instituteInfo } from '@/composables/global/useStaticData';
+
+export default () => {
+  const router = useRouter();
+  const route = useRoute();
+  const showSnackbar = inject('showSnackbar');
+
+  const teacherDetail = reactive({
+    id: 0,
+    name: '',
+    avatar: '',
+    institute: '',
+    job: '',
+    introduction: '',
+    courses: [],
+  });
+
+  const courseText = ref([]);
+
+  const courseStatistic = reactive({
+    total: 0,
+    score: 0,
+    count: (() => {
+      let ret = {};
+      Object.keys(instituteInfo)
+        .filter((key) => key !== '')
+        .forEach((key) => {
+          ret[key] = 0;
+        });
+      return ret;
+    })(),
+  });
+
+  const status = reactive({
+    loading: true,
+  });
+
+  const courseFilterStatus = reactive({
+    selected: [],
+  });
+
+  const getCourseStatistic = () => {
+    courseStatistic.total = teacherDetail.courses.length;
+    const schools = Object.getOwnPropertyNames(courseStatistic.count).filter(
+      (key) => {
+        return key != '__ob__' && key != '其他学院';
+      },
+    );
+    for (let course of teacherDetail.courses) {
+      if (schools.indexOf(course.institute) >= 0) {
+        courseStatistic.count[course.institute]++;
+      } else {
+        courseStatistic.count['其他学院']++;
+        course.institute = '其他学院';
+      }
+    }
+  };
+
+  const getTeacherDetail = () => {
+    const id = route.params.id;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['teacher_detail', id], '/teacher/' + id);
+    useWatching(fetchStatus, () => {
+      if (fetchStatus.value == 'success') {
+        status.loading = false;
+      } else if (fetchStatus.value == 'error') {
+        if (isNetworkError(error.value.response)) {
+          showSnackbar('error', '网络连接错误', 3000);
+        } else if (isValidErrorMessage(error.value.response.data.msg)) {
+          showSnackbar('error', error.value.response.data.msg, 3000);
+        } else {
+          showSnackbar('error', '服务器发生错误', 3000);
+        }
+        setTimeout(() => router.push('/'), 3000);
+      }
+    });
+    useWatching(data, () => {
+      if (data.value) {
+        useRefCopy(data.value.data, teacherDetail);
+        getCourseStatistic();
+        courseText.value = teacherDetail.courses;
+        courseFilterStatus.selected = (() => {
+          let ret = new Array();
+          for (let key in courseStatistic.count) {
+            if (courseStatistic.count[key]) {
+              ret.push(key);
+            }
+          }
+          return ret;
+        })();
+      }
+    });
+  };
+
+  onMounted(() => {
+    getTeacherDetail();
+  });
+
+  provide('courseStatistic', courseStatistic);
+  provide('courseFilterStatus', courseFilterStatus);
+  provide('teacherDetail', teacherDetail);
+
+  return { courseText, status, courseFilterStatus, teacherDetail };
+};
diff --git a/src/composables/users/comment/useCommentCardBar.js b/src/composables/users/comment/useCommentCardBar.js
index ef895e6..559531b 100644
--- a/src/composables/users/comment/useCommentCardBar.js
+++ b/src/composables/users/comment/useCommentCardBar.js
@@ -1,13 +1,12 @@
-import { mdiUpdate, mdiCommentEditOutline } from "@mdi/js";
+import { mdiUpdate, mdiCommentEditOutline } from '@mdi/js';
 
 export default () => {
-
   const statics = {
     icons: {
       mdiUpdate,
       mdiCommentEditOutline,
-    }
-  }
+    },
+  };
 
-  return { statics }
-}
+  return { statics };
+};
diff --git a/src/composables/users/comment/useCommentCardContent.js b/src/composables/users/comment/useCommentCardContent.js
index b21e128..81ea625 100644
--- a/src/composables/users/comment/useCommentCardContent.js
+++ b/src/composables/users/comment/useCommentCardContent.js
@@ -1,37 +1,37 @@
-import {
-  mdiAccountOutline, 
-  mdiClockOutline, 
-  mdiSchoolOutline,  
-  mdiSubtitlesOutline, 
-  mdiTriangle,
-  mdiTriangleSmallDown,
-  mdiTriangleSmallUp,
-  mdiShare,
-  mdiGold
-} from "@mdi/js";
-import { gradingInfo } from "@/composables/global/useStaticData";
-import { inject } from "vue";
-export default () => {
-  const global = inject("global")
-  const statics = {
-    icons: {
-      mdiAccountOutline,
-      mdiClockOutline,
-      mdiSchoolOutline,  
-      mdiSubtitlesOutline, 
-      mdiTriangle,
-      mdiTriangleSmallDown,
-      mdiTriangleSmallUp,
-      mdiShare,
-      mdiGold
-    },
-    grade: [
-      gradingInfo.quality, 
-      gradingInfo.workload,
-      gradingInfo.difficulty,
-      gradingInfo.distribution
-    ], 
-  }
-
-  return { statics, global }
-}
\ No newline at end of file
+import {
+  mdiAccountOutline,
+  mdiClockOutline,
+  mdiSchoolOutline,
+  mdiSubtitlesOutline,
+  mdiTriangle,
+  mdiTriangleSmallDown,
+  mdiTriangleSmallUp,
+  mdiShare,
+  mdiGold,
+} from '@mdi/js';
+import { gradingInfo } from '@/composables/global/useStaticData';
+import { inject } from 'vue';
+export default () => {
+  const global = inject('global');
+  const statics = {
+    icons: {
+      mdiAccountOutline,
+      mdiClockOutline,
+      mdiSchoolOutline,
+      mdiSubtitlesOutline,
+      mdiTriangle,
+      mdiTriangleSmallDown,
+      mdiTriangleSmallUp,
+      mdiShare,
+      mdiGold,
+    },
+    grade: [
+      gradingInfo.quality,
+      gradingInfo.workload,
+      gradingInfo.difficulty,
+      gradingInfo.distribution,
+    ],
+  };
+
+  return { statics, global };
+};
diff --git a/src/composables/users/comment/useStatisticCard.js b/src/composables/users/comment/useStatisticCard.js
index 2c32488..043def0 100644
--- a/src/composables/users/comment/useStatisticCard.js
+++ b/src/composables/users/comment/useStatisticCard.js
@@ -1,30 +1,29 @@
-import { inject, reactive, toRefs } from "vue"
-import { 
-  mdiCommentCheckOutline, 
-  mdiTriangle, 
-  mdiChevronDown, 
-  mdiChevronUp, 
-  mdiClipboardText, 
-} from "@mdi/js"
-
-export default () => {
-
-  const commentStatistic = inject('commentStatistic')
-
-  const statics = {
-    icons: {
-      mdiCommentCheckOutline,
-      mdiChevronDown,
-      mdiChevronUp,
-      mdiTriangle, 
-      mdiClipboardText, 
-    },
-  }
-
-  const status = reactive({
-    showAll: true,
-    ...toRefs(inject("commentFilterStatus"))
-  })
-
-  return { commentStatistic, statics, status }
-}
\ No newline at end of file
+import { inject, reactive, toRefs } from 'vue';
+import {
+  mdiCommentCheckOutline,
+  mdiTriangle,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiClipboardText,
+} from '@mdi/js';
+
+export default () => {
+  const commentStatistic = inject('commentStatistic');
+
+  const statics = {
+    icons: {
+      mdiCommentCheckOutline,
+      mdiChevronDown,
+      mdiChevronUp,
+      mdiTriangle,
+      mdiClipboardText,
+    },
+  };
+
+  const status = reactive({
+    showAll: true,
+    ...toRefs(inject('commentFilterStatus')),
+  });
+
+  return { commentStatistic, statics, status };
+};
diff --git a/src/composables/users/comment/useTextContainer.js b/src/composables/users/comment/useTextContainer.js
index 69d3c72..3d31213 100644
--- a/src/composables/users/comment/useTextContainer.js
+++ b/src/composables/users/comment/useTextContainer.js
@@ -1,31 +1,30 @@
-import { reactive } from "vue"
-import { 
-  mdiChevronDown, 
-  mdiChevronUp, 
-  mdiFullscreen, 
-  mdiClose, 
-  mdiSubtitlesOutline 
-} from "@mdi/js"
-
-export default () => {
-
-  const statics = {
-    icons: {
-      mdiChevronDown,
-      mdiChevronUp,
-      mdiFullscreen,
-      mdiClose,
-      mdiSubtitlesOutline,
-    },
-    inf: 100000,
-  }
-
-  const status = reactive({
-    isOverflow: false,
-    showAll: false,
-    showDialog: false,
-    // showDialogOverlay: false
-  })
-
-  return { statics, status }
-}
\ No newline at end of file
+import { reactive } from 'vue';
+import {
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiFullscreen,
+  mdiClose,
+  mdiSubtitlesOutline,
+} from '@mdi/js';
+
+export default () => {
+  const statics = {
+    icons: {
+      mdiChevronDown,
+      mdiChevronUp,
+      mdiFullscreen,
+      mdiClose,
+      mdiSubtitlesOutline,
+    },
+    inf: 100000,
+  };
+
+  const status = reactive({
+    isOverflow: false,
+    showAll: false,
+    showDialog: false,
+    // showDialogOverlay: false
+  });
+
+  return { statics, status };
+};
diff --git a/src/composables/users/forms/useForms.js b/src/composables/users/forms/useForms.js
index b762eab..a80720d 100644
--- a/src/composables/users/forms/useForms.js
+++ b/src/composables/users/forms/useForms.js
@@ -1,48 +1,58 @@
-
-
 export default () => {
-
   const formRules = {
-    required: (value) => {      
-      return value && value.length > 0 || '该内容为必填项'
+    required: (value) => {
+      return (value && value.length > 0) || '该内容为必填项';
     },
     email: (value) => {
-      const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      const pattern =
+        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       if (pattern.test(value)) {
         // Fixed: Invalid Shanghaitech email address match
         if (value.endsWith('@shanghaitech.edu.cn')) {
-          return true
+          return true;
         } else {
-          return "请输入上海科技大学邮箱"
+          return '请输入上海科技大学邮箱';
         }
       } else {
-        return "请输入正确的邮箱地址"
+        return '请输入正确的邮箱地址';
       }
     },
     nickname: (value) => {
-      const pattern = /^[\u4e00-\u9fff_a-zA-Z0-9]{3,16}$/
-      return pattern.test(value) || '用户名只能包含中文、字母、数字、下划线，且长度在3-16位'
+      const pattern = /^[\u4e00-\u9fff_a-zA-Z0-9]{3,16}$/;
+      return (
+        pattern.test(value) ||
+        '用户名只能包含中文、字母、数字、下划线，且长度在3-16位'
+      );
     },
     realname: (value) => {
       if (value.length === 0 || value == undefined) {
-        return true
+        return true;
       }
-      const pattern = /^[\u4e00-\u9fff_a-zA-Z]{2,16}$/
-      return pattern.test(value) || '真实姓名只能包含中文或英文，且长度在2-16位'
-    }, 
+      const pattern = /^[\u4e00-\u9fff_a-zA-Z]{2,16}$/;
+      return (
+        pattern.test(value) || '真实姓名只能包含中文或英文，且长度在2-16位'
+      );
+    },
     password: (value) => {
-      const pattern = /^(?=.*[a-zA-Z])(?=.*\d)[^]{8,16}$/
-      return pattern.test(value) || '密码必须包含字母及数字，长度为8-16位'
+      const pattern = /^(?=.*[a-zA-Z])(?=.*\d)[^]{8,16}$/;
+      return pattern.test(value) || '密码必须包含字母及数字，长度为8-16位';
     },
     invitation_code: (value) => {
-      const pattern = /^[a-zA-Z0-9]{5}$/
-      return !value || value.length == 0 || pattern.test(value) || '邀请码为只含字母和数字的5位字符串'
+      const pattern = /^[a-zA-Z0-9]{5}$/;
+      return (
+        !value ||
+        value.length == 0 ||
+        pattern.test(value) ||
+        '邀请码为只含字母和数字的5位字符串'
+      );
     },
     reward: (value) => {
-      const pattern = /^([1-9]+[\d]*(.[0-9]{1,2})?)$/
-      return !value || value.length == 0 || pattern.test(value) || '赏金为两位小数'
-    }
-  }
-  
-  return { formRules }
-}
\ No newline at end of file
+      const pattern = /^([1-9]+[\d]*(.[0-9]{1,2})?)$/;
+      return (
+        !value || value.length == 0 || pattern.test(value) || '赏金为两位小数'
+      );
+    },
+  };
+
+  return { formRules };
+};
diff --git a/src/composables/users/forms/useLogin.js b/src/composables/users/forms/useLogin.js
index e2f6864..256659a 100644
--- a/src/composables/users/forms/useLogin.js
+++ b/src/composables/users/forms/useLogin.js
@@ -1,188 +1,188 @@
-import { reactive, inject, onMounted } from 'vue';
-import { setPreset, getPreset } from '@/composables/global/useCookie';
-import {
-  isNetworkError,
-  isValidErrorMessage,
-} from '@/composables/global/useHttpError';
-import useCaptcha from '@/composables/global/useCaptcha';
-import {
-  mdiArrowLeft,
-  mdiEye,
-  mdiEyeOff,
-  mdiWindowClose,
-  mdiEmailAlertOutline,
-} from '@mdi/js';
-import useMutation from '@/composables/global/useMutation';
-import useDebounce from '@/composables/global/useDebounce';
-
-export default () => {
-  const showSnackbar = inject('showSnackbar');
-  const closeDialog = inject('closeDialog');
-  const global = inject('global');
-
-  const statics = {
-    icons: {
-      mdiArrowLeft,
-      mdiEye,
-      mdiEyeOff,
-      mdiWindowClose,
-      mdiEmailAlertOutline,
-    },
-  };
-
-  const userData = reactive({
-    email: '',
-    password: '',
-    captcha: '',
-    resetPasswordMethod: '',
-  });
-
-  const formStatus = reactive({
-    emailFormValid: false,
-    passwordFormValid: false,
-    passwordVisible: false,
-    loading: false,
-    captchaLoading: false,
-    captchaBase64: '',
-    windowStep: 0,
-    isResetPassword: false,
-  });
-
-  const loginMutation = useMutation('/user/login', {
-    onMutate: () => {
-      formStatus.loading = true;
-    },
-    onSuccess: (response) => {
-      formStatus.loading = false;
-      setPreset({
-        id: response.data.data.id,
-        email: response.data.data.email,
-        nickname: response.data.data.nickname,
-        avatar: response.data.data.avatar,
-        is_anonymous:
-          response.data.data.is_anonymous == undefined
-            ? false
-            : response.data.data.is_anonymous, // false = public, true = anonymous
-        // by default, no anonymous setting means public
-        year: response.data.data.year,
-        grade: response.data.data.grade,
-        realname: response.data.data.realname,
-        is_admin: response.data.data.is_admin,
-        is_community_admin: response.data.data.is_community_admin,
-      });
-      global.isLogin = true;
-      global.userProfile = getPreset();
-      closeDialog('login');
-      showSnackbar('success', '登陆成功');
-    },
-    onError: (error) => {
-      formStatus.loading = false;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接失败');
-      } else {
-        userData.captcha = '';
-        getCaptcha();
-        if (isValidErrorMessage(error.response.data.msg)) {
-          showSnackbar('error', error.response.data.msg);
-          if (error.response.data.code === 'UserPasswordIncorrect') {
-            formStatus.windowStep = 1;
-          } else if (
-            error.response.data.code === 'UserNotExists' ||
-            error.response.data.code === 'InvalidArgument'
-          ) {
-            formStatus.windowStep = 0;
-          }
-        } else {
-          showSnackbar('error', '服务器发生错误');
-        }
-      }
-    },
-  });
-
-  const resetPasswordMutation = useMutation('/user/reset_password', {
-    onMutate: () => {
-      formStatus.loading = true;
-    },
-    onSuccess: (_) => {
-      formStatus.loading = false;
-      formStatus.windowStep = 4;
-    },
-    onError: (error) => {
-      formStatus.loading = false;
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接失败');
-      } else {
-        userData.captcha = '';
-        getCaptcha();
-        if (isValidErrorMessage(error.response.data.msg)) {
-          showSnackbar('error', error.response.data.msg);
-          if (
-            error.response.data.code === 'UserNotExists' ||
-            error.response.data.code === 'InvalidArgument'
-          ) {
-            formStatus.windowStep = 0;
-          }
-        } else {
-          showSnackbar('error', '服务器发生错误');
-        }
-      }
-    },
-  });
-
-  const getCaptcha = useCaptcha('/user/get_captcha', {
-    onMutate: () => {
-      formStatus.captchaLoading = true;
-    },
-    onSuccess: (response) => {
-      formStatus.captchaLoading = false;
-      formStatus.captchaBase64 = response.data.data.img;
-    },
-    onError: (error) => {
-      formStatus.captchaLoading = false;
-      formStatus.captchaBase64 = '';
-      if (isNetworkError(error.response)) {
-        showSnackbar('error', '网络连接错误');
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar('error', error.response.data.msg);
-      } else {
-        showSnackbar('error', '服务器发生错误');
-      }
-    },
-  });
-
-  const doLogin = useDebounce(() => {
-    if (
-      formStatus.emailFormValid &&
-      formStatus.passwordFormValid &&
-      userData.captcha !== ''
-    ) {
-      loginMutation.mutate({
-        email: userData.email,
-        password: userData.password,
-        captcha: userData.captcha,
-      });
-    }
-  });
-
-  const doResetPassword = useDebounce(() => {
-    if (formStatus.emailFormValid && userData.captcha !== '') {
-      resetPasswordMutation.mutate({
-        email: userData.email,
-        captcha: userData.captcha,
-      });
-    }
-  });
-
-  onMounted(() => {
-    getCaptcha();
-  });
-
-  return {
-    statics,
-    userData,
-    formStatus,
-    doLogin,
-    getCaptcha,
-    doResetPassword,
-  };
-};
+import { reactive, inject, onMounted } from 'vue';
+import { setPreset, getPreset } from '@/composables/global/useCookie';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import useCaptcha from '@/composables/global/useCaptcha';
+import {
+  mdiArrowLeft,
+  mdiEye,
+  mdiEyeOff,
+  mdiWindowClose,
+  mdiEmailAlertOutline,
+} from '@mdi/js';
+import useMutation from '@/composables/global/useMutation';
+import useDebounce from '@/composables/global/useDebounce';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const closeDialog = inject('closeDialog');
+  const global = inject('global');
+
+  const statics = {
+    icons: {
+      mdiArrowLeft,
+      mdiEye,
+      mdiEyeOff,
+      mdiWindowClose,
+      mdiEmailAlertOutline,
+    },
+  };
+
+  const userData = reactive({
+    email: '',
+    password: '',
+    captcha: '',
+    resetPasswordMethod: '',
+  });
+
+  const formStatus = reactive({
+    emailFormValid: false,
+    passwordFormValid: false,
+    passwordVisible: false,
+    loading: false,
+    captchaLoading: false,
+    captchaBase64: '',
+    windowStep: 0,
+    isResetPassword: false,
+  });
+
+  const loginMutation = useMutation('/user/login', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.loading = false;
+      setPreset({
+        id: response.data.data.id,
+        email: response.data.data.email,
+        nickname: response.data.data.nickname,
+        avatar: response.data.data.avatar,
+        is_anonymous:
+          response.data.data.is_anonymous == undefined
+            ? false
+            : response.data.data.is_anonymous, // false = public, true = anonymous
+        // by default, no anonymous setting means public
+        year: response.data.data.year,
+        grade: response.data.data.grade,
+        realname: response.data.data.realname,
+        is_admin: response.data.data.is_admin,
+        is_community_admin: response.data.data.is_community_admin,
+      });
+      global.isLogin = true;
+      global.userProfile = getPreset();
+      closeDialog('login');
+      showSnackbar('success', '登陆成功');
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接失败');
+      } else {
+        userData.captcha = '';
+        getCaptcha();
+        if (isValidErrorMessage(error.response.data.msg)) {
+          showSnackbar('error', error.response.data.msg);
+          if (error.response.data.code === 'UserPasswordIncorrect') {
+            formStatus.windowStep = 1;
+          } else if (
+            error.response.data.code === 'UserNotExists' ||
+            error.response.data.code === 'InvalidArgument'
+          ) {
+            formStatus.windowStep = 0;
+          }
+        } else {
+          showSnackbar('error', '服务器发生错误');
+        }
+      }
+    },
+  });
+
+  const resetPasswordMutation = useMutation('/user/reset_password', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (_) => {
+      formStatus.loading = false;
+      formStatus.windowStep = 4;
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接失败');
+      } else {
+        userData.captcha = '';
+        getCaptcha();
+        if (isValidErrorMessage(error.response.data.msg)) {
+          showSnackbar('error', error.response.data.msg);
+          if (
+            error.response.data.code === 'UserNotExists' ||
+            error.response.data.code === 'InvalidArgument'
+          ) {
+            formStatus.windowStep = 0;
+          }
+        } else {
+          showSnackbar('error', '服务器发生错误');
+        }
+      }
+    },
+  });
+
+  const getCaptcha = useCaptcha('/user/get_captcha', {
+    onMutate: () => {
+      formStatus.captchaLoading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = response.data.data.img;
+    },
+    onError: (error) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = '';
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const doLogin = useDebounce(() => {
+    if (
+      formStatus.emailFormValid &&
+      formStatus.passwordFormValid &&
+      userData.captcha !== ''
+    ) {
+      loginMutation.mutate({
+        email: userData.email,
+        password: userData.password,
+        captcha: userData.captcha,
+      });
+    }
+  });
+
+  const doResetPassword = useDebounce(() => {
+    if (formStatus.emailFormValid && userData.captcha !== '') {
+      resetPasswordMutation.mutate({
+        email: userData.email,
+        captcha: userData.captcha,
+      });
+    }
+  });
+
+  onMounted(() => {
+    getCaptcha();
+  });
+
+  return {
+    statics,
+    userData,
+    formStatus,
+    doLogin,
+    getCaptcha,
+    doResetPassword,
+  };
+};
diff --git a/src/composables/users/forms/useLogout.js b/src/composables/users/forms/useLogout.js
index 3a2aaca..fa5be8a 100644
--- a/src/composables/users/forms/useLogout.js
+++ b/src/composables/users/forms/useLogout.js
@@ -1,24 +1,23 @@
-import { clearPreset } from "@/composables/global/useCookie"
-import { inject } from "vue"
-import useMutation from "@/composables/global/useMutation"
-
-export default () => {
-
-  const showSnackbar = inject("showSnackbar")
-  const global = inject("global")
-
-  const logoutMutation = useMutation("/user/logout", {
-    onMutate: () => {
-      clearPreset()
-      global.isLogin = false
-      global.userProfile = {}
-      showSnackbar("success", "登出成功")
-    }
-  })
-
-  const doLogout = () => {
-    logoutMutation.mutate({})
-  }
-
-  return { doLogout }
-}
\ No newline at end of file
+import { clearPreset } from '@/composables/global/useCookie';
+import { inject } from 'vue';
+import useMutation from '@/composables/global/useMutation';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const global = inject('global');
+
+  const logoutMutation = useMutation('/user/logout', {
+    onMutate: () => {
+      clearPreset();
+      global.isLogin = false;
+      global.userProfile = {};
+      showSnackbar('success', '登出成功');
+    },
+  });
+
+  const doLogout = () => {
+    logoutMutation.mutate({});
+  };
+
+  return { doLogout };
+};
diff --git a/src/composables/users/forms/useRegister.js b/src/composables/users/forms/useRegister.js
index 2044c01..af965c6 100644
--- a/src/composables/users/forms/useRegister.js
+++ b/src/composables/users/forms/useRegister.js
@@ -1,119 +1,134 @@
-import { reactive, inject, onMounted } from "vue"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import useCaptcha from "@/composables/global/useCaptcha"
-import { mdiArrowLeft, mdiEye, mdiEyeOff, mdiWindowClose, mdiEmailAlertOutline, mdiHelpCircleOutline } from "@mdi/js"
-import useMutation from "@/composables/global/useMutation"
-import { gradeItems } from "@/composables/global/useStaticData"
-import useDebounce from "@/composables/global/useDebounce"
-
-export default () => {
-
-  const showSnackbar = inject("showSnackbar")
-
-
-  const statics = {
-    icons: {
-      mdiArrowLeft,
-      mdiEye,
-      mdiEyeOff,
-      mdiWindowClose,
-      mdiEmailAlertOutline,
-      mdiHelpCircleOutline
-    },
-  }
-
-  const userData = reactive({
-    email: "",
-    username: "",
-    password: "",
-    invitation_code: "",
-    year: undefined,
-    grade: undefined,
-  })
-
-  const formStatus = reactive({
-    emailFormValid: false,
-    usernameFormValid: false,
-    passwordFormValid: false,
-    passwordVisible: false,
-    loading: false,
-    captchaLoading: false,
-    captchaBase64: "",
-    windowStep: 0,
-    agreeTerms: false,
-  })
-
-  const registerMutation = useMutation("/user/register", {
-    onMutate: () => {
-      formStatus.loading = true
-    },
-    onSuccess: (_) => {
-      formStatus.loading = false
-      formStatus.windowStep += 1
-      if (formStatus.invitation_code != "")
-        showSnackbar("success", "邀请码使用成功")
-    },
-    onError: (error) => {
-      formStatus.loading = false
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接失败")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar("error", error.response.data.msg)
-        userData.captcha = ""
-        getCaptcha()
-        if (error.response.data.code === "UserAlreadyExists" || error.response.data.code === "UserEmailDuplicated") {
-          formStatus.windowStep = 0;
-        }
-        else if (true) {
-          formStatus.windowStep = 2;
-        }
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  });
-
-  const getCaptcha = useCaptcha("/user/get_captcha", {
-    onMutate: () => {
-      formStatus.captchaLoading = true
-    },
-    onSuccess: (response) => {
-      formStatus.captchaLoading = false
-      formStatus.captchaBase64 = response.data.data.img
-    },
-    onError: (error) => {
-      formStatus.captchaLoading = false
-      formStatus.captchaBase64 = ""
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接错误")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar("error", error.response.data.msg)
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  })
-
-  const doRegister = useDebounce(() => {
-    if (formStatus.emailFormValid && formStatus.passwordFormValid &&
-      formStatus.usernameFormValid && userData.captcha !== "" && userData.year && userData.grade
-    ) {
-      console.log(userData)
-      registerMutation.mutate({
-        nickname: userData.username,
-        email: userData.email,
-        password: userData.password,
-        invitation_code: userData.invitation_code,
-        year: userData.year === "暂不透露" ? 0 : userData.year,
-        grade: gradeItems.indexOf(userData.grade),
-        captcha: userData.captcha
-      })
-    }
-  })
-
-  onMounted(() => {
-    getCaptcha()
-  })
-
-  return { statics, userData, formStatus, doRegister, getCaptcha }
-}
\ No newline at end of file
+import { reactive, inject, onMounted } from 'vue';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import useCaptcha from '@/composables/global/useCaptcha';
+import {
+  mdiArrowLeft,
+  mdiEye,
+  mdiEyeOff,
+  mdiWindowClose,
+  mdiEmailAlertOutline,
+  mdiHelpCircleOutline,
+} from '@mdi/js';
+import useMutation from '@/composables/global/useMutation';
+import { gradeItems } from '@/composables/global/useStaticData';
+import useDebounce from '@/composables/global/useDebounce';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+
+  const statics = {
+    icons: {
+      mdiArrowLeft,
+      mdiEye,
+      mdiEyeOff,
+      mdiWindowClose,
+      mdiEmailAlertOutline,
+      mdiHelpCircleOutline,
+    },
+  };
+
+  const userData = reactive({
+    email: '',
+    username: '',
+    password: '',
+    invitation_code: '',
+    year: undefined,
+    grade: undefined,
+  });
+
+  const formStatus = reactive({
+    emailFormValid: false,
+    usernameFormValid: false,
+    passwordFormValid: false,
+    passwordVisible: false,
+    loading: false,
+    captchaLoading: false,
+    captchaBase64: '',
+    windowStep: 0,
+    agreeTerms: false,
+  });
+
+  const registerMutation = useMutation('/user/register', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (_) => {
+      formStatus.loading = false;
+      formStatus.windowStep += 1;
+      if (formStatus.invitation_code != '')
+        showSnackbar('success', '邀请码使用成功');
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接失败');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        showSnackbar('error', error.response.data.msg);
+        userData.captcha = '';
+        getCaptcha();
+        if (
+          error.response.data.code === 'UserAlreadyExists' ||
+          error.response.data.code === 'UserEmailDuplicated'
+        ) {
+          formStatus.windowStep = 0;
+        } else if (true) {
+          formStatus.windowStep = 2;
+        }
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const getCaptcha = useCaptcha('/user/get_captcha', {
+    onMutate: () => {
+      formStatus.captchaLoading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = response.data.data.img;
+    },
+    onError: (error) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = '';
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const doRegister = useDebounce(() => {
+    if (
+      formStatus.emailFormValid &&
+      formStatus.passwordFormValid &&
+      formStatus.usernameFormValid &&
+      userData.captcha !== '' &&
+      userData.year &&
+      userData.grade
+    ) {
+      console.log(userData);
+      registerMutation.mutate({
+        nickname: userData.username,
+        email: userData.email,
+        password: userData.password,
+        invitation_code: userData.invitation_code,
+        year: userData.year === '暂不透露' ? 0 : userData.year,
+        grade: gradeItems.indexOf(userData.grade),
+        captcha: userData.captcha,
+      });
+    }
+  });
+
+  onMounted(() => {
+    getCaptcha();
+  });
+
+  return { statics, userData, formStatus, doRegister, getCaptcha };
+};
diff --git a/src/composables/users/profile/useEditProfile.js b/src/composables/users/profile/useEditProfile.js
index 41babaf..83c5984 100644
--- a/src/composables/users/profile/useEditProfile.js
+++ b/src/composables/users/profile/useEditProfile.js
@@ -1,204 +1,240 @@
-import { inject, reactive, watch } from "vue"
-import { mdiAccountEditOutline, mdiArrowLeft, mdiEyeOff, mdiEye, mdiWindowClose } from "@mdi/js";
-import useUserName from "@/composables/global/useUserName";
-import { gradeItems, visibleItems } from "@/composables/global/useStaticData"
-import useCaptcha from "@/composables/global/useCaptcha"
-import useMutation from "@/composables/global/useMutation"
-import { setPreset, getPreset } from "@/composables/global/useCookie"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import useDebounce from "@/composables/global/useDebounce"
-import useWatching from "@/composables/global/useWatching"
-
-export default () => {
-
-  const showSnackbar = inject("showSnackbar")
-  const global = inject("global")
-
-
-
-  const statics = {
-    icons: {
-      mdiAccountEditOutline,
-      mdiArrowLeft, 
-      mdiEyeOff, 
-      mdiEye, 
-      mdiWindowClose
-    }, 
-  }
-
-
-  const userData = reactive({
-    // These are just placeholders, please remember to convert them when sending to the server.
-    nickname: useUserName(global.userProfile), 
-    avatar: global.userProfile.avatar ? global.userProfile.avatar : "",
-    is_anonymous: global.userProfile.is_anonymous ? visibleItems[0] : visibleItems[1],
-    year: global.userProfile.year ? global.userProfile.year : "暂不透露",
-    grade: global.userProfile.grade ? gradeItems[global.userProfile.grade] : "暂不透露",
-    realname: global.userProfile.realname ? global.userProfile.realname : "",
-  })
-
-  const passwordData = reactive({
-    oldPassword: "",
-    newPassword: "",
-    captcha: "",
-  })
-
-  const formStatus = reactive({
-    nicknameFormValid: false,
-    oldPasswordFormValid: false,
-    newPasswordFormValid: false,
-    editProfile: false, 
-    loading: false,    
-    captchaLoading: false,
-    captchaBase64: "",
-    windowStep: 0, 
-    oldPasswordVisible: false, 
-    newPasswordVisible: false,
-  })
-
-
-  
-  const editProfileMutation = useMutation("/user/update_profile", {
-    onMutate: () => {
-      formStatus.loading = true
-    }, 
-    onSuccess: (response) => {
-      formStatus.loading = false
-      setPreset({
-        id: global.userProfile.id,
-        email: global.userProfile.email,
-        nickname: userData.nickname, 
-        avatar: userData.avatar,
-        is_anonymous: userData.is_anonymous === visibleItems[0],
-        year: userData.year === "暂不透露" ? 0 : userData.year, 
-        grade: gradeItems.indexOf(userData.grade),
-        realname: userData.realname,
-      })
-      global.userProfile = getPreset()
-      formStatus.editProfile = false
-      doResetStatus()
-      showSnackbar("success", "修改个人信息成功")
-    }, 
-    onError: (error) => {
-      formStatus.loading = false
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接错误")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar("error", error.response.data.msg)
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  })
-
-  const changePasswordMutation = useMutation("/user/update_password", {
-    onMutate: () => {
-      formStatus.loading = true
-    }, 
-    onSuccess: (response) => {
-      formStatus.loading = false
-      showSnackbar("success", "修改密码成功")
-      formStatus.windowStep = 0
-    }, 
-    onError: (error) => {      
-      formStatus.loading = false
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接失败")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        passwordData.captcha = ""
-        getCaptcha() 
-        if (error.response.data.code === "UserPasswordIncorrect") {
-          formStatus.windowStep = 1          
-        }
-        showSnackbar("error", error.response.data.msg)
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  })
-
-
-
-
-  const doEditProfile = useDebounce(() => {
-    if (formStatus.nicknameFormValid) {
-      editProfileMutation.mutate({
-        nickname: userData.nickname,
-        grade: gradeItems.indexOf(userData.grade),
-        year: userData.year === "暂不透露" ? 0 : userData.year,
-        realname: userData.realname,
-        is_anonymous: userData.is_anonymous === visibleItems[0],
-      })
-    }
-  })
-
-  const doChangePassword = useDebounce(() => {
-    if (formStatus.oldPasswordFormValid && formStatus.newPasswordFormValid) {
-      changePasswordMutation.mutate({
-        old_password: passwordData.oldPassword,
-        new_password: passwordData.newPassword,
-        captcha: passwordData.captcha,
-      })
-    }
-  })
-
-  const getCaptcha = useCaptcha("/user/get_captcha", {
-    onMutate: () => {
-      formStatus.captchaLoading = true
-    }, 
-    onSuccess: (response) => {
-      formStatus.captchaLoading = false
-      formStatus.captchaBase64 = response.data.data.img
-    },
-    onError: (error) => {
-      formStatus.captchaLoading = false
-      formStatus.captchaBase64 = ""
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接错误")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar("error", error.response.data.msg)
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  })  
-
-
-  const doResetStatus = () => {
-    formStatus.nicknameFormValid = false
-    formStatus.oldPasswordFormValid = false
-    formStatus.newPasswordFormValid = false
-    formStatus.loading = false
-    formStatus.captchaLoading = false
-    formStatus.windowStep = 0
-    formStatus.oldPasswordVisible = false
-    formStatus.newPasswordVisible = false
-    userData.nickname = useUserName(global.userProfile)
-    userData.avatar = global.userProfile.avatar ? global.userProfile.avatar : ""
-    userData.is_anonymous = global.userProfile.is_anonymous ? visibleItems[0] : visibleItems[1]
-    userData.year = global.userProfile.year ? global.userProfile.year : "暂不透露"
-    userData.grade = global.userProfile.grade ? gradeItems[global.userProfile.grade] : "暂不透露"
-    userData.realname = global.userProfile.realname ? global.userProfile.realname : ""
-    passwordData.oldPassword = ""
-    passwordData.newPassword = ""
-    passwordData.captcha = ""
-  }
-
-  watch(() => formStatus.editProfile, () => {
-    if (!formStatus.editProfile) {
-      doResetStatus()
-    }
-  })
-
-  useWatching(() => global.userProfile, () => {
-    userData.nickname = useUserName(global.userProfile)
-    userData.avatar = global.userProfile.avatar ? global.userProfile.avatar : ""
-    userData.is_anonymous = global.userProfile.is_anonymous ? visibleItems[0] : visibleItems[1]
-    userData.year = global.userProfile.year ? global.userProfile.year : "暂不透露"
-    userData.grade = global.userProfile.grade ? gradeItems[global.userProfile.grade] : "暂不透露"
-    userData.realname = global.userProfile.realname ? global.userProfile.realname : ""
-  })
-
-
-  return { statics, userData, passwordData, formStatus, doEditProfile, doChangePassword, getCaptcha }
-}
\ No newline at end of file
+import { inject, reactive, watch } from 'vue';
+import {
+  mdiAccountEditOutline,
+  mdiArrowLeft,
+  mdiEyeOff,
+  mdiEye,
+  mdiWindowClose,
+} from '@mdi/js';
+import useUserName from '@/composables/global/useUserName';
+import { gradeItems, visibleItems } from '@/composables/global/useStaticData';
+import useCaptcha from '@/composables/global/useCaptcha';
+import useMutation from '@/composables/global/useMutation';
+import { setPreset, getPreset } from '@/composables/global/useCookie';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import useDebounce from '@/composables/global/useDebounce';
+import useWatching from '@/composables/global/useWatching';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+  const global = inject('global');
+
+  const statics = {
+    icons: {
+      mdiAccountEditOutline,
+      mdiArrowLeft,
+      mdiEyeOff,
+      mdiEye,
+      mdiWindowClose,
+    },
+  };
+
+  const userData = reactive({
+    // These are just placeholders, please remember to convert them when sending to the server.
+    nickname: useUserName(global.userProfile),
+    avatar: global.userProfile.avatar ? global.userProfile.avatar : '',
+    is_anonymous: global.userProfile.is_anonymous
+      ? visibleItems[0]
+      : visibleItems[1],
+    year: global.userProfile.year ? global.userProfile.year : '暂不透露',
+    grade: global.userProfile.grade
+      ? gradeItems[global.userProfile.grade]
+      : '暂不透露',
+    realname: global.userProfile.realname ? global.userProfile.realname : '',
+  });
+
+  const passwordData = reactive({
+    oldPassword: '',
+    newPassword: '',
+    captcha: '',
+  });
+
+  const formStatus = reactive({
+    nicknameFormValid: false,
+    oldPasswordFormValid: false,
+    newPasswordFormValid: false,
+    editProfile: false,
+    loading: false,
+    captchaLoading: false,
+    captchaBase64: '',
+    windowStep: 0,
+    oldPasswordVisible: false,
+    newPasswordVisible: false,
+  });
+
+  const editProfileMutation = useMutation('/user/update_profile', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.loading = false;
+      setPreset({
+        id: global.userProfile.id,
+        email: global.userProfile.email,
+        nickname: userData.nickname,
+        avatar: userData.avatar,
+        is_anonymous: userData.is_anonymous === visibleItems[0],
+        year: userData.year === '暂不透露' ? 0 : userData.year,
+        grade: gradeItems.indexOf(userData.grade),
+        realname: userData.realname,
+      });
+      global.userProfile = getPreset();
+      formStatus.editProfile = false;
+      doResetStatus();
+      showSnackbar('success', '修改个人信息成功');
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const changePasswordMutation = useMutation('/user/update_password', {
+    onMutate: () => {
+      formStatus.loading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.loading = false;
+      showSnackbar('success', '修改密码成功');
+      formStatus.windowStep = 0;
+    },
+    onError: (error) => {
+      formStatus.loading = false;
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接失败');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        passwordData.captcha = '';
+        getCaptcha();
+        if (error.response.data.code === 'UserPasswordIncorrect') {
+          formStatus.windowStep = 1;
+        }
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const doEditProfile = useDebounce(() => {
+    if (formStatus.nicknameFormValid) {
+      editProfileMutation.mutate({
+        nickname: userData.nickname,
+        grade: gradeItems.indexOf(userData.grade),
+        year: userData.year === '暂不透露' ? 0 : userData.year,
+        realname: userData.realname,
+        is_anonymous: userData.is_anonymous === visibleItems[0],
+      });
+    }
+  });
+
+  const doChangePassword = useDebounce(() => {
+    if (formStatus.oldPasswordFormValid && formStatus.newPasswordFormValid) {
+      changePasswordMutation.mutate({
+        old_password: passwordData.oldPassword,
+        new_password: passwordData.newPassword,
+        captcha: passwordData.captcha,
+      });
+    }
+  });
+
+  const getCaptcha = useCaptcha('/user/get_captcha', {
+    onMutate: () => {
+      formStatus.captchaLoading = true;
+    },
+    onSuccess: (response) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = response.data.data.img;
+    },
+    onError: (error) => {
+      formStatus.captchaLoading = false;
+      formStatus.captchaBase64 = '';
+      if (isNetworkError(error.response)) {
+        showSnackbar('error', '网络连接错误');
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        showSnackbar('error', error.response.data.msg);
+      } else {
+        showSnackbar('error', '服务器发生错误');
+      }
+    },
+  });
+
+  const doResetStatus = () => {
+    formStatus.nicknameFormValid = false;
+    formStatus.oldPasswordFormValid = false;
+    formStatus.newPasswordFormValid = false;
+    formStatus.loading = false;
+    formStatus.captchaLoading = false;
+    formStatus.windowStep = 0;
+    formStatus.oldPasswordVisible = false;
+    formStatus.newPasswordVisible = false;
+    userData.nickname = useUserName(global.userProfile);
+    userData.avatar = global.userProfile.avatar
+      ? global.userProfile.avatar
+      : '';
+    userData.is_anonymous = global.userProfile.is_anonymous
+      ? visibleItems[0]
+      : visibleItems[1];
+    userData.year = global.userProfile.year
+      ? global.userProfile.year
+      : '暂不透露';
+    userData.grade = global.userProfile.grade
+      ? gradeItems[global.userProfile.grade]
+      : '暂不透露';
+    userData.realname = global.userProfile.realname
+      ? global.userProfile.realname
+      : '';
+    passwordData.oldPassword = '';
+    passwordData.newPassword = '';
+    passwordData.captcha = '';
+  };
+
+  watch(
+    () => formStatus.editProfile,
+    () => {
+      if (!formStatus.editProfile) {
+        doResetStatus();
+      }
+    },
+  );
+
+  useWatching(
+    () => global.userProfile,
+    () => {
+      userData.nickname = useUserName(global.userProfile);
+      userData.avatar = global.userProfile.avatar
+        ? global.userProfile.avatar
+        : '';
+      userData.is_anonymous = global.userProfile.is_anonymous
+        ? visibleItems[0]
+        : visibleItems[1];
+      userData.year = global.userProfile.year
+        ? global.userProfile.year
+        : '暂不透露';
+      userData.grade = global.userProfile.grade
+        ? gradeItems[global.userProfile.grade]
+        : '暂不透露';
+      userData.realname = global.userProfile.realname
+        ? global.userProfile.realname
+        : '';
+    },
+  );
+
+  return {
+    statics,
+    userData,
+    passwordData,
+    formStatus,
+    doEditProfile,
+    doChangePassword,
+    getCaptcha,
+  };
+};
diff --git a/src/composables/users/profile/useProfile.js b/src/composables/users/profile/useProfile.js
index 11473b2..83755e2 100644
--- a/src/composables/users/profile/useProfile.js
+++ b/src/composables/users/profile/useProfile.js
@@ -1,74 +1,86 @@
-import { inject } from "vue"
-import { mdiCamera } from "@mdi/js"
-import useDebounce from "@/composables/global/useDebounce"
-import useMutation from "@/composables/global/useMutation"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import { setPreset, getPreset } from "@/composables/global/useCookie"
-
-export default () => {
-
-  const showSnackbar = inject("showSnackbar")
-
-  // Fun fact: the injected reactive object remains reactive
-  //  but other reactive objects that depend on it cant sense its changes
-  const userProfile = inject("userProfile")
-  const global = inject("global")
-
-  const statics = {
-    icons: {
-      mdiCamera
-    }, 
-    avatarRules: [
-      (file) => { 
-        if (file && ["image/jpg", "image/jpeg", "image/png"].indexOf(file.type) == -1) {
-          showSnackbar("error", "无效的文件类型")
-          return false
-        }
-        return true
-      },       
-      (file) => {
-        if (file && file.size > 1024 * 1024) {
-          showSnackbar("error", "文件大小不能超过1MB")
-          return false
-        }
-        return true
-      }, 
-    ]
-  }
-
-  const changeAvatarMutation = useMutation("/user/upload_avatar", {
-    onMutate: () => {}, 
-    onSuccess: (response) => {
-      setPreset({
-        avatar: response.data.data.avatar
-      })
-      global.userProfile = getPreset()
-      showSnackbar("success", "头像修改成功")
-    }, 
-    onError: (error) => {
-      if (isNetworkError(error.response)) {
-        showSnackbar("error", "网络连接错误")
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        showSnackbar("error", error.response.data.msg)
-      } else {
-        showSnackbar("error", "服务器发生错误")
-      }
-    }
-  }, {
-    headers: {
-      "Content-Type": "multipart/form-data"
-    }
-  })
-
-  const doChangeAvatar = useDebounce((file) => {
-    if (file) {
-      if (file.size < 1024 * 1024 && ["image/jpg", "image/jpeg", "image/png"].indexOf(file.type) != -1) {
-        const formData = new FormData()
-        formData.append("avatar", file)
-        changeAvatarMutation.mutate(formData)
-      }
-    }
-  })
-
-  return { userProfile, statics, doChangeAvatar }
-}
\ No newline at end of file
+import { inject } from 'vue';
+import { mdiCamera } from '@mdi/js';
+import useDebounce from '@/composables/global/useDebounce';
+import useMutation from '@/composables/global/useMutation';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import { setPreset, getPreset } from '@/composables/global/useCookie';
+
+export default () => {
+  const showSnackbar = inject('showSnackbar');
+
+  // Fun fact: the injected reactive object remains reactive
+  //  but other reactive objects that depend on it cant sense its changes
+  const userProfile = inject('userProfile');
+  const global = inject('global');
+
+  const statics = {
+    icons: {
+      mdiCamera,
+    },
+    avatarRules: [
+      (file) => {
+        if (
+          file &&
+          ['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.type) == -1
+        ) {
+          showSnackbar('error', '无效的文件类型');
+          return false;
+        }
+        return true;
+      },
+      (file) => {
+        if (file && file.size > 1024 * 1024) {
+          showSnackbar('error', '文件大小不能超过1MB');
+          return false;
+        }
+        return true;
+      },
+    ],
+  };
+
+  const changeAvatarMutation = useMutation(
+    '/user/upload_avatar',
+    {
+      onMutate: () => {},
+      onSuccess: (response) => {
+        setPreset({
+          avatar: response.data.data.avatar,
+        });
+        global.userProfile = getPreset();
+        showSnackbar('success', '头像修改成功');
+      },
+      onError: (error) => {
+        if (isNetworkError(error.response)) {
+          showSnackbar('error', '网络连接错误');
+        } else if (isValidErrorMessage(error.response.data.msg)) {
+          showSnackbar('error', error.response.data.msg);
+        } else {
+          showSnackbar('error', '服务器发生错误');
+        }
+      },
+    },
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    },
+  );
+
+  const doChangeAvatar = useDebounce((file) => {
+    if (file) {
+      if (
+        file.size < 1024 * 1024 &&
+        ['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.type) != -1
+      ) {
+        const formData = new FormData();
+        formData.append('avatar', file);
+        changeAvatarMutation.mutate(formData);
+      }
+    }
+  });
+
+  return { userProfile, statics, doChangeAvatar };
+};
diff --git a/src/composables/users/useActive.js b/src/composables/users/useActive.js
index fabb6ea..9f8fdf0 100644
--- a/src/composables/users/useActive.js
+++ b/src/composables/users/useActive.js
@@ -1,67 +1,66 @@
-import { 
-  mdiCheckboxMarkedCircleOutline, 
-  mdiCloseCircleOutline,
-} from "@mdi/js"
-import { useRoute } from "@/router/migrateRouter"
-import { reactive, onMounted } from "vue"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import useMutation from "@/composables/global/useMutation"
-
-export default () => {
-
-  const route = useRoute()
-
-  const statics = {
-    backgroundLight: "#aaaaaa",
-    backgroundDark: 'grey darken-3',
-    icons: {
-      mdiCheckboxMarkedCircleOutline,
-      mdiCloseCircleOutline,
-    }
-  }
-
-  const status = reactive({
-    loading: true, 
-    errorMessage: "",
-  })
-
-  const verifyMutation = useMutation("/user/register_active", {
-    onMutate: () => {
-      status.loading = true
-      status.errorMessage = ""
-    }, 
-    onSuccess: () => {
-      status.errorMessage = ""
-    }, 
-    onError: (error) => {
-      if (isNetworkError(error.response)) {
-        status.errorMessage = "网络连接失败，请稍后重试。"
-      } else if (isValidErrorMessage(error.response.data.msg)) {
-        status.errorMessage = error.response.data.msg + "，请稍后重试。"
-      } else {
-        status.errorMessage = "服务器发生错误，请稍后重试。"
-      }
-    }, 
-    onSettled: () => {
-      status.loading = false
-    }
-  })
-
-  const doVerify = () => {
-    if (route.query.id && route.query.code) {
-      verifyMutation.mutate({
-        id: new Number(route.query.id),
-        code: route.query.code
-      })
-    } else {
-      status.loading = false
-      status.errorMessage = "激活链接无效，请检查链接是否正确。"
-    }
-  }
-
-  onMounted(() => {
-    doVerify()
-  })
-
-  return { statics, status }
-}
\ No newline at end of file
+import { mdiCheckboxMarkedCircleOutline, mdiCloseCircleOutline } from '@mdi/js';
+import { useRoute } from '@/router/migrateRouter';
+import { reactive, onMounted } from 'vue';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import useMutation from '@/composables/global/useMutation';
+
+export default () => {
+  const route = useRoute();
+
+  const statics = {
+    backgroundLight: '#aaaaaa',
+    backgroundDark: 'grey darken-3',
+    icons: {
+      mdiCheckboxMarkedCircleOutline,
+      mdiCloseCircleOutline,
+    },
+  };
+
+  const status = reactive({
+    loading: true,
+    errorMessage: '',
+  });
+
+  const verifyMutation = useMutation('/user/register_active', {
+    onMutate: () => {
+      status.loading = true;
+      status.errorMessage = '';
+    },
+    onSuccess: () => {
+      status.errorMessage = '';
+    },
+    onError: (error) => {
+      if (isNetworkError(error.response)) {
+        status.errorMessage = '网络连接失败，请稍后重试。';
+      } else if (isValidErrorMessage(error.response.data.msg)) {
+        status.errorMessage = error.response.data.msg + '，请稍后重试。';
+      } else {
+        status.errorMessage = '服务器发生错误，请稍后重试。';
+      }
+    },
+    onSettled: () => {
+      status.loading = false;
+    },
+  });
+
+  const doVerify = () => {
+    if (route.query.id && route.query.code) {
+      verifyMutation.mutate({
+        id: new Number(route.query.id),
+        code: route.query.code,
+      });
+    } else {
+      status.loading = false;
+      status.errorMessage = '激活链接无效，请检查链接是否正确。';
+    }
+  };
+
+  onMounted(() => {
+    doVerify();
+  });
+
+  return { statics, status };
+};
diff --git a/src/composables/users/useResetPasswordActive.js b/src/composables/users/useResetPasswordActive.js
index d2d8685..10962dd 100644
--- a/src/composables/users/useResetPasswordActive.js
+++ b/src/composables/users/useResetPasswordActive.js
@@ -1,84 +1,88 @@
-import { 
-    mdiCheckboxMarkedCircleOutline, 
-    mdiCloseCircleOutline,
-    mdiKeyVariant, 
-    mdiEye,
-    mdiEyeOff,
-  } from "@mdi/js"
-  import { useRoute } from "@/router/migrateRouter"
-  import { reactive, onMounted } from "vue"
-  import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-  import useMutation from "@/composables/global/useMutation"
-  
-  export default () => {
-  
-    const route = useRoute()
-  
-    const statics = {
-      backgroundLight: "#aaaaaa",
-      backgroundDark: 'grey darken-3',
-      icons: {
-        mdiCheckboxMarkedCircleOutline,
-        mdiCloseCircleOutline,
-        mdiKeyVariant, 
-        mdiEye,
-        mdiEyeOff,
-      }
-    }
-  
-    const status = reactive({
-      loading: false, 
-      errorMessage: "",
-      passwordFormValid: false,
-      passwordVisible: false,
-      inputFinished: false,
-    })
-
-    const userData = reactive({
-      password: ""
-    })
-  
-    const resetPasswordActiveMutation = useMutation("/user/reset_password_active", {
-      onMutate: () => {
-        status.loading = true
-        status.errorMessage = ""
-      }, 
-      onSuccess: () => {
-        status.errorMessage = ""
-      }, 
-      onError: (error) => {
-        if (isNetworkError(error.response)) {
-          status.errorMessage = "网络连接失败，请稍后重试。"
-        } else if (isValidErrorMessage(error.response.data.msg)) {
-          status.errorMessage = error.response.data.msg + "，请稍后重试。"
-        } else {
-          status.errorMessage = "服务器发生错误，请稍后重试。"
-        }
-      }, 
-      onSettled: () => {
-        status.loading = false
-      }
-    })
-
-    const doResetPasswordActive = () => {
-      if (status.passwordFormValid && userData.password !== "") {
-        status.inputFinished = true
-        resetPasswordActiveMutation.mutate({
-          id: new Number(route.query.id),
-          code: route.query.code, 
-          password: userData.password
-        })
-      }
-    }
-
-  
-    onMounted(() => {
-      if ((!route.query.id) || (!route.query.code)) {        
-        status.loading = false
-        status.inputFinished = true
-        status.errorMessage = "激活链接无效，请检查链接是否正确。"
-      }
-    })
-  
-    return { statics, status, userData, doResetPasswordActive }
-  }
\ No newline at end of file
+import {
+  mdiCheckboxMarkedCircleOutline,
+  mdiCloseCircleOutline,
+  mdiKeyVariant,
+  mdiEye,
+  mdiEyeOff,
+} from '@mdi/js';
+import { useRoute } from '@/router/migrateRouter';
+import { reactive, onMounted } from 'vue';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import useMutation from '@/composables/global/useMutation';
+
+export default () => {
+  const route = useRoute();
+
+  const statics = {
+    backgroundLight: '#aaaaaa',
+    backgroundDark: 'grey darken-3',
+    icons: {
+      mdiCheckboxMarkedCircleOutline,
+      mdiCloseCircleOutline,
+      mdiKeyVariant,
+      mdiEye,
+      mdiEyeOff,
+    },
+  };
+
+  const status = reactive({
+    loading: false,
+    errorMessage: '',
+    passwordFormValid: false,
+    passwordVisible: false,
+    inputFinished: false,
+  });
+
+  const userData = reactive({
+    password: '',
+  });
+
+  const resetPasswordActiveMutation = useMutation(
+    '/user/reset_password_active',
+    {
+      onMutate: () => {
+        status.loading = true;
+        status.errorMessage = '';
+      },
+      onSuccess: () => {
+        status.errorMessage = '';
+      },
+      onError: (error) => {
+        if (isNetworkError(error.response)) {
+          status.errorMessage = '网络连接失败，请稍后重试。';
+        } else if (isValidErrorMessage(error.response.data.msg)) {
+          status.errorMessage = error.response.data.msg + '，请稍后重试。';
+        } else {
+          status.errorMessage = '服务器发生错误，请稍后重试。';
+        }
+      },
+      onSettled: () => {
+        status.loading = false;
+      },
+    },
+  );
+
+  const doResetPasswordActive = () => {
+    if (status.passwordFormValid && userData.password !== '') {
+      status.inputFinished = true;
+      resetPasswordActiveMutation.mutate({
+        id: new Number(route.query.id),
+        code: route.query.code,
+        password: userData.password,
+      });
+    }
+  };
+
+  onMounted(() => {
+    if (!route.query.id || !route.query.code) {
+      status.loading = false;
+      status.inputFinished = true;
+      status.errorMessage = '激活链接无效，请检查链接是否正确。';
+    }
+  });
+
+  return { statics, status, userData, doResetPasswordActive };
+};
diff --git a/src/composables/users/useUser.js b/src/composables/users/useUser.js
index 87fd450..40efb58 100644
--- a/src/composables/users/useUser.js
+++ b/src/composables/users/useUser.js
@@ -1,208 +1,248 @@
-import { onMounted, provide, reactive, ref, inject, watch, computed } from "vue"
-import { instituteInfo, gradeItems } from "@/composables/global/useStaticData"
-import useDebounce from "@/composables/global/useDebounce"
-import useWatching from "@/composables/global/useWatching"
-import useRefCopy from "@/composables/global/useRefCopy"
-import useFetching from "@/composables/global/useFetching"
-import useUserName from "@/composables/global/useUserName"
-import { sortCmp } from "@/composables/global/useArrayUtils"
-import { sortPolicy, sortStatics } from "@/composables/global/useCommentSort"
-import { useRouter, useRoute } from "@/router/migrateRouter"
-import { isNetworkError, isValidErrorMessage } from "@/composables/global/useHttpError"
-import { setPreset, getPreset } from "@/composables/global/useCookie"
+import {
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  inject,
+  watch,
+  computed,
+} from 'vue';
+import { instituteInfo, gradeItems } from '@/composables/global/useStaticData';
+import useDebounce from '@/composables/global/useDebounce';
+import useWatching from '@/composables/global/useWatching';
+import useRefCopy from '@/composables/global/useRefCopy';
+import useFetching from '@/composables/global/useFetching';
+import useUserName from '@/composables/global/useUserName';
+import { sortCmp } from '@/composables/global/useArrayUtils';
+import { sortPolicy, sortStatics } from '@/composables/global/useCommentSort';
+import { useRouter, useRoute } from '@/router/migrateRouter';
+import {
+  isNetworkError,
+  isValidErrorMessage,
+} from '@/composables/global/useHttpError';
+import { setPreset, getPreset } from '@/composables/global/useCookie';
 
 const baseStatistic = {
   total: 0,
   score: 0,
   count: (() => {
-    let ret = {}
-    Object.keys(instituteInfo).filter(key => key !== '').forEach(key => {
-      ret[key] = 0
-    })
-    return ret
+    let ret = {};
+    Object.keys(instituteInfo)
+      .filter((key) => key !== '')
+      .forEach((key) => {
+        ret[key] = 0;
+      });
+    return ret;
   })(),
-}
+};
 
 export default () => {
+  const router = useRouter();
+  const route = useRoute();
+  const showSnackbar = inject('showSnackbar');
+  const global = inject('global');
 
-  const router = useRouter()
-  const route = useRoute()
-  const showSnackbar = inject("showSnackbar")
-  const global = inject('global')
-
-  const isSelf = ref(route.params.id == global.userProfile.id)
-
+  const isSelf = ref(route.params.id == global.userProfile.id);
 
   const userProfile = reactive({
-    email: "",
+    email: '',
     year: 0,
-    grade: "",
-    nickname: "",
-    realname: "",
-    avatar: "",
+    grade: '',
+    nickname: '',
+    realname: '',
+    avatar: '',
     is_anonymous: true,
-  })
+  });
 
-  const commentRawText = ref([])
-  const commentText = computed(() => commentRawText.value.filter(matchFilterComment))
+  const commentRawText = ref([]);
+  const commentText = computed(() =>
+    commentRawText.value.filter(matchFilterComment),
+  );
 
   const commentStatistic = computed(() => {
     if (commentRawText.value.length === 0) {
-      return baseStatistic
+      return baseStatistic;
     }
-    const res = { ...baseStatistic, count: {...baseStatistic.count} }
-    res.total = commentRawText.value.length
-    const schools = Object.keys(baseStatistic.count).filter((key) => key !== "__ob__")
+    const res = { ...baseStatistic, count: { ...baseStatistic.count } };
+    res.total = commentRawText.value.length;
+    const schools = Object.keys(baseStatistic.count).filter(
+      (key) => key !== '__ob__',
+    );
     for (let comment of commentRawText.value) {
       if (schools.indexOf(comment.course.institute) >= 0) {
-        res.count[comment.course.institute]++
+        res.count[comment.course.institute]++;
       } else {
-        res.count["其他学院"]++
+        res.count['其他学院']++;
       }
-      res.score += comment.like
+      res.score += comment.like;
     }
-    return res
-  })
-
-
+    return res;
+  });
 
   const status = reactive({
     profileLoading: true,
     commentLoading: true,
-  })
+  });
   const commentFilterStatus = reactive({
     selected: [],
     sortKey: '发布时间',
     order: '从后往前',
-  })
-
-
+  });
 
   const getUserProfile = () => {
-    const id = route.params.id
-    const { status: fetchStatus, data, error } = useFetching(["user_profile", id], "/user/profile/" + id)
+    const id = route.params.id;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['user_profile', id], '/user/profile/' + id);
     useWatching(fetchStatus, () => {
-      if (fetchStatus.value === "success") {
-        status.profileLoading = false
-      } else if (fetchStatus.value === "error") {
+      if (fetchStatus.value === 'success') {
+        status.profileLoading = false;
+      } else if (fetchStatus.value === 'error') {
         if (isNetworkError(error.value.response)) {
-          showSnackbar("error", "网络连接错误", 3000)
+          showSnackbar('error', '网络连接错误', 3000);
         } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar("error", error.value.response.data.msg, 3000)
+          showSnackbar('error', error.value.response.data.msg, 3000);
         } else {
-          showSnackbar("error", "服务器发生错误", 3000)
+          showSnackbar('error', '服务器发生错误', 3000);
         }
-        setTimeout(() => router.push("/"), 3000)
+        setTimeout(() => router.push('/'), 3000);
       }
-    })
+    });
     useWatching(data, () => {
       if (data.value) {
-        useRefCopy(data.value.data, userProfile)
+        useRefCopy(data.value.data, userProfile);
         if (isSelf.value) {
-          // if we see our own profile, we should not be anonymous    
-          setPreset(data.value.data)
-          global.userProfile = getPreset()
+          // if we see our own profile, we should not be anonymous
+          setPreset(data.value.data);
+          global.userProfile = getPreset();
         }
-        userProfile.nickname = useUserName(userProfile)
-        userProfile.grade = gradeItems[userProfile.grade]
-        userProfile.year = userProfile.year === 0 ? "暂不透露" : userProfile.year
-
+        userProfile.nickname = useUserName(userProfile);
+        userProfile.grade = gradeItems[userProfile.grade];
+        userProfile.year =
+          userProfile.year === 0 ? '暂不透露' : userProfile.year;
       }
-    })
-  }
+    });
+  };
 
   const getCommentText = () => {
-    const id = route.params.id
-    const { status: fetchStatus, data, error } = useFetching(["comment_text", id], "/comment/user/" + id)
+    const id = route.params.id;
+    const {
+      status: fetchStatus,
+      data,
+      error,
+    } = useFetching(['comment_text', id], '/comment/user/' + id);
     useWatching(fetchStatus, () => {
-      if (fetchStatus.value === "success") {
-        status.commentLoading = false
-      } else if (fetchStatus.value === "error") {
+      if (fetchStatus.value === 'success') {
+        status.commentLoading = false;
+      } else if (fetchStatus.value === 'error') {
         if (isNetworkError(error.value.response)) {
-          showSnackbar("error", "网络连接错误", 3000)
+          showSnackbar('error', '网络连接错误', 3000);
         } else if (isValidErrorMessage(error.value.response.data.msg)) {
-          showSnackbar("error", error.value.response.data.msg, 3000)
+          showSnackbar('error', error.value.response.data.msg, 3000);
         } else {
-          showSnackbar("error", "服务器发生错误", 3000)
+          showSnackbar('error', '服务器发生错误', 3000);
         }
-        setTimeout(() => router.push("/"), 3000)
+        setTimeout(() => router.push('/'), 3000);
       }
-    })
+    });
     useWatching(data, () => {
       if (data.value) {
-        const schools = Object.keys(baseStatistic.count).filter((key) => key !== "__ob__")
-        commentFilterStatus.selected = schools
-        if (data.value.data) {          
-          commentRawText.value = data.value.data.filter((comment) => !(comment.is_anonymous && !isSelf.value))
+        const schools = Object.keys(baseStatistic.count).filter(
+          (key) => key !== '__ob__',
+        );
+        commentFilterStatus.selected = schools;
+        if (data.value.data) {
+          commentRawText.value = data.value.data
+            .filter((comment) => !(comment.is_anonymous && !isSelf.value))
             .map((comment) => {
               if (schools.indexOf(comment.course.institute) >= 0) {
-                return comment
+                return comment;
               } else {
-                return { ...comment, course: { ...comment.course, institute: "其他学院" } }
+                return {
+                  ...comment,
+                  course: { ...comment.course, institute: '其他学院' },
+                };
               }
-            })
+            });
         } else {
-          commentRawText.value = []
+          commentRawText.value = [];
         }
-        commentRawText.value.sort(commentSortFunc)
+        commentRawText.value.sort(commentSortFunc);
       }
-    })
-  }
+    });
+  };
 
   const matchFilterComment = (comment) => {
-    return commentFilterStatus.selected.some((school) => comment.course.institute == school)
-  }
-
+    return commentFilterStatus.selected.some(
+      (school) => comment.course.institute == school,
+    );
+  };
 
   const commentSortFunc = (x, y) => {
     // by default, [0] is descending, [1] is ascending
-    return (commentFilterStatus.order === sortStatics.orderItem[commentFilterStatus.sortKey][0] ? 1 : -1) *
+    return (
+      (commentFilterStatus.order ===
+      sortStatics.orderItem[commentFilterStatus.sortKey][0]
+        ? 1
+        : -1) *
       sortCmp(
-        sortPolicy[commentFilterStatus.sortKey](x), sortPolicy[commentFilterStatus.sortKey](y)
+        sortPolicy[commentFilterStatus.sortKey](x),
+        sortPolicy[commentFilterStatus.sortKey](y),
       )
-  }
+    );
+  };
 
   // A notice for future developers: The if statement justifying if to and from are equal is not necessary
-  //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop  
-  watch(() => commentFilterStatus.order, useDebounce(() => {
-    commentRawText.value.sort(commentSortFunc)
-  }))
-
-  watch(() => commentFilterStatus.sortKey, useDebounce(() => {
-    if (commentFilterStatus.order == sortStatics.orderItem[commentFilterStatus.sortKey][0]) {
-      commentRawText.value.sort(commentSortFunc)
-    } else {
-      commentFilterStatus.order = sortStatics.orderItem[commentFilterStatus.sortKey][0]
-    } 
-  }))
-
-
-  provide("commentStatistic", commentStatistic)
-  provide("commentFilterStatus", commentFilterStatus)
-  provide("userProfile", userProfile)
-  provide("isSelf", isSelf)
+  //  if you dont change the watch target in the watch function, otherwise you must use it to avoid infinite loop
+  watch(
+    () => commentFilterStatus.order,
+    useDebounce(() => {
+      commentRawText.value.sort(commentSortFunc);
+    }),
+  );
+
+  watch(
+    () => commentFilterStatus.sortKey,
+    useDebounce(() => {
+      if (
+        commentFilterStatus.order ==
+        sortStatics.orderItem[commentFilterStatus.sortKey][0]
+      ) {
+        commentRawText.value.sort(commentSortFunc);
+      } else {
+        commentFilterStatus.order =
+          sortStatics.orderItem[commentFilterStatus.sortKey][0];
+      }
+    }),
+  );
 
+  provide('commentStatistic', commentStatistic);
+  provide('commentFilterStatus', commentFilterStatus);
+  provide('userProfile', userProfile);
+  provide('isSelf', isSelf);
 
   if (isSelf) {
-    watch(() => global.userProfile, () => {
-      if (!global.isLogin) {
-        isSelf.value = false
-      }
-      useRefCopy(global.userProfile, userProfile)
-      userProfile.nickname = useUserName(userProfile)
-      userProfile.grade = gradeItems[userProfile.grade]
-      userProfile.year = userProfile.year === 0 ? "暂不透露" : userProfile.year
-    })
+    watch(
+      () => global.userProfile,
+      () => {
+        if (!global.isLogin) {
+          isSelf.value = false;
+        }
+        useRefCopy(global.userProfile, userProfile);
+        userProfile.nickname = useUserName(userProfile);
+        userProfile.grade = gradeItems[userProfile.grade];
+        userProfile.year =
+          userProfile.year === 0 ? '暂不透露' : userProfile.year;
+      },
+    );
   }
 
-
-
   onMounted(() => {
-    getUserProfile()
-    getCommentText()
-  })
-
-
-  return { commentText, commentFilterStatus, status, userProfile }
+    getUserProfile();
+    getCommentText();
+  });
 
-}
\ No newline at end of file
+  return { commentText, commentFilterStatus, status, userProfile };
+};
diff --git a/src/main.js b/src/main.js
index 7b088eb..e302289 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,40 +1,40 @@
-import Vue from 'vue'
-import App from '@/App.vue'
-import vuetify from '@/plugins/vuetify'
-import router from '@/router/index'
-import NProgress from 'nprogress'
-import { VueQueryPlugin } from "vue-query"
-import 'nprogress/nprogress.css'
-import '@/styles/markdown.css'
-import '@/styles/prism.css'
-
-const vueQueryPluginOptions = {
-  queryClientConfig: {
-    defaultOptions: {
-      queries: {
-        retry: 0,
-        refetchOnWindowFocus: false,
-        refetchOnMount: false
-      }
-    }
-  }
-}
-
-Vue.config.productionTip = false
-Vue.use(VueQueryPlugin, vueQueryPluginOptions)
-
-router.beforeEach((to, from, next) => {
-  NProgress.start()
-  next()
-})
-
-router.afterEach(() => {
-  document.documentElement.scrollTop = 0
-  NProgress.done()
-})
-
-export default new Vue({
-  vuetify,
-  router,
-  render: h => h(App)
-}).$mount('#app')
+import Vue from 'vue';
+import App from '@/App.vue';
+import vuetify from '@/plugins/vuetify';
+import router from '@/router/index';
+import NProgress from 'nprogress';
+import { VueQueryPlugin } from 'vue-query';
+import 'nprogress/nprogress.css';
+import '@/styles/markdown.css';
+import '@/styles/prism.css';
+
+const vueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        retry: 0,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+      },
+    },
+  },
+};
+
+Vue.config.productionTip = false;
+Vue.use(VueQueryPlugin, vueQueryPluginOptions);
+
+router.beforeEach((to, from, next) => {
+  NProgress.start();
+  next();
+});
+
+router.afterEach(() => {
+  document.documentElement.scrollTop = 0;
+  NProgress.done();
+});
+
+export default new Vue({
+  vuetify,
+  router,
+  render: (h) => h(App),
+}).$mount('#app');
diff --git a/src/plugins/markdown-loader.js b/src/plugins/markdown-loader.js
index 8992f3b..bea1862 100644
--- a/src/plugins/markdown-loader.js
+++ b/src/plugins/markdown-loader.js
@@ -1,3 +1,3 @@
-module.exports = function(value) {
-  return 'module.exports = ' + JSON.stringify(value)
-}
\ No newline at end of file
+module.exports = function (value) {
+  return 'module.exports = ' + JSON.stringify(value);
+};
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 5f060bf..e5fe9ce 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,10 +1,10 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib/framework';
-
-Vue.use(Vuetify);
-
-export default new Vuetify({
-  icons: {
-    iconfont: 'mdiSvg',
-  }
-});
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+  icons: {
+    iconfont: 'mdiSvg',
+  },
+});
diff --git a/src/router/index.js b/src/router/index.js
index 1bdf422..a0afa3a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,58 +1,58 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
-export default new VueRouter({
-  mode: 'history',
-  routes: [
-    {
-      path: '/',
-      component: () => import('@/views/CourseAll.vue')
-    },
-    {
-      path: '/course/:id',
-      component: () => import('@/views/CourseDetails.vue')
-    },
-    {
-      path: '/teacher',
-      component: () => import('@/views/TeacherAll.vue')
-    },
-    {
-      path: '/teacher/:id',
-      component: () => import('@/views/TeacherDetails.vue')
-    },
-    {
-      path: '/user/:id',
-      component: () => import('@/views/User.vue')
-    },
-    {
-      path: '/active',
-      component: () => import('@/views/Active.vue')
-    },
-    {
-      path: '/reset_password_active',
-      component: () => import('@/views/ResetPasswordActive.vue')
-    },
-    {
-      path: '/about',
-      component: () => import('@/views/About.vue')
-    },
-    {
-      path: '/activities',
-      component: () => import('@/views/ActivityPoster.vue')
-    },
-    {
-      path: '*',
-      component: () => import('@/views/NotFound.vue')
-    },
-    {
-      path: '/recent',
-      component:() => import('@/views/Recent.vue')
-    },
-    {
-      path: '/ranking',
-      component: () => import('@/views/Ranking.vue')
-    }
-  ]
-})
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter);
+
+export default new VueRouter({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      component: () => import('@/views/CourseAll.vue'),
+    },
+    {
+      path: '/course/:id',
+      component: () => import('@/views/CourseDetails.vue'),
+    },
+    {
+      path: '/teacher',
+      component: () => import('@/views/TeacherAll.vue'),
+    },
+    {
+      path: '/teacher/:id',
+      component: () => import('@/views/TeacherDetails.vue'),
+    },
+    {
+      path: '/user/:id',
+      component: () => import('@/views/User.vue'),
+    },
+    {
+      path: '/active',
+      component: () => import('@/views/Active.vue'),
+    },
+    {
+      path: '/reset_password_active',
+      component: () => import('@/views/ResetPasswordActive.vue'),
+    },
+    {
+      path: '/about',
+      component: () => import('@/views/About.vue'),
+    },
+    {
+      path: '/activities',
+      component: () => import('@/views/ActivityPoster.vue'),
+    },
+    {
+      path: '*',
+      component: () => import('@/views/NotFound.vue'),
+    },
+    {
+      path: '/recent',
+      component: () => import('@/views/Recent.vue'),
+    },
+    {
+      path: '/ranking',
+      component: () => import('@/views/Ranking.vue'),
+    },
+  ],
+});
diff --git a/src/router/migrateRouter.js b/src/router/migrateRouter.js
index 5e96ce9..993e7a8 100644
--- a/src/router/migrateRouter.js
+++ b/src/router/migrateRouter.js
@@ -1,23 +1,23 @@
-import { reactive } from "vue"
-import router from "@/router/index"
+import { reactive } from 'vue';
+import router from '@/router/index';
 
-const currentRoute = reactive({ ...router.currentRoute })
+const currentRoute = reactive({ ...router.currentRoute });
 
-const useRoute = () => currentRoute
+const useRoute = () => currentRoute;
 
-const useRouter = () => router
+const useRouter = () => router;
 
 router.beforeEach((to, from, next) => {
-  if(/^\/teacher\/\d*$/.test(to.path) && to.params.id === '100000001'){
-    next(from)
+  if (/^\/teacher\/\d*$/.test(to.path) && to.params.id === '100000001') {
+    next(from);
   }
-  next()
-})
+  next();
+});
 
 router.afterEach((to, from, next) => {
   Object.keys(to).forEach((key) => {
-    currentRoute[key] = to[key]
-  })
-})
+    currentRoute[key] = to[key];
+  });
+});
 
-export { useRoute, useRouter }
+export { useRoute, useRouter };
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index 16e4f73..6f56b7e 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -1,117 +1,124 @@
-.markdown-body h1, h2, h3, h4, h5, h6 {
-    padding-bottom: 16px;
+.markdown-body h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding-bottom: 16px;
 }
 
 .markdown-body a :hover {
-    outline-width: 0;
+  outline-width: 0;
 }
 
 .markdown-body strong {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .markdown-body p {
-    margin: 0;
-    margin-bottom: 16px;
-    line-height: 1.8em;
+  margin: 0;
+  margin-bottom: 16px;
+  line-height: 1.8em;
 }
 
-.markdown-body img [align = right] {
-    padding-left: 20px;
+.markdown-body img [align='right'] {
+  padding-left: 20px;
 }
 
-.markdown-body img [align = left] {
-    padding-right: 20px;
+.markdown-body img [align='left'] {
+  padding-right: 20px;
 }
 
 .markdown-body a {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    font-weight: 700;
-    letter-spacing: .5px;
-    overflow-wrap: anywhere;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  overflow-wrap: anywhere;
 }
 
 .markdown-body a :hover {
-    text-decoration: underline;
-    outline-width: 0;
+  text-decoration: underline;
+  outline-width: 0;
 }
 
 .markdown-body blockquote {
-    margin-left: 0;
-    margin-bottom: 16px;
-    padding-left: 16px;
-    font-style: italic;
-    color: rgb(160, 160, 160);
-    background-color: rgba(160, 160, 160, .05);
-    border-left: .3em solid rgba(160, 160, 160, .6);
+  margin-left: 0;
+  margin-bottom: 16px;
+  padding-left: 16px;
+  font-style: italic;
+  color: rgb(160, 160, 160);
+  background-color: rgba(160, 160, 160, 0.05);
+  border-left: 0.3em solid rgba(160, 160, 160, 0.6);
 }
 
 .markdown-body blockquote > p {
-    padding: 16px 0;
+  padding: 16px 0;
 }
 
 .markdown-body hr {
-    margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 
-.markdown-body ul, ol {
-    padding-left: 1em;
-    padding-bottom: 16px;
+.markdown-body ul,
+ol {
+  padding-left: 1em;
+  padding-bottom: 16px;
 }
 
 .markdown-body ul > li {
-    list-style: inside;
+  list-style: inside;
 }
 
 .markdown-body ol > li {
-    list-style-position: inside;
+  list-style-position: inside;
 }
 
 .markdown-body img {
-    border-style: none;
-    max-width: 100%;
-    box-sizing: content-box;
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
 }
 
 @media screen and (min-width: 900px) {
-    .markdown-body img {
-        max-width: 80%;
-    }
+  .markdown-body img {
+    max-width: 80%;
+  }
 }
 
 .markdown-body table {
-    border-collapse: collapse;
-    border-style: hidden;
-    width: -webkit-max-content;
-    width: -moz-max-content;
-    width: max-content;
-    max-width: 100%;
-    overflow: auto;
-    margin-bottom: 16px;
-    color: #5f5f5f;
-    border-radius: 4px;
-    box-shadow: 0 0 0 1px #d8d8d8;
-    font-size: 0.95em;
-}
-
-@media(prefers-color-scheme: dark) {
-	.markdown-body table {
-        color: #d8d8d8;
-        box-shadow: 0 0 0 1px rgba(160, 160, 160, .5);
-    }
+  border-collapse: collapse;
+  border-style: hidden;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+  margin-bottom: 16px;
+  color: #5f5f5f;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #d8d8d8;
+  font-size: 0.95em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-body table {
+    color: #d8d8d8;
+    box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.5);
+  }
 }
 
 .markdown-body table tbody > :nth-child(2n) {
-    background-color: rgba(160, 160, 160, .1);
+  background-color: rgba(160, 160, 160, 0.1);
 }
 
 .markdown-body table th {
-    background-color: rgba(160, 160, 160, .2);
-    font-weight: 700;
+  background-color: rgba(160, 160, 160, 0.2);
+  font-weight: 700;
 }
 
-.markdown-body table th, .markdown-body table td {
-    padding: .5em 1.5em;
-    border: .5px solid rgba(160, 160, 160, .5);
-}
\ No newline at end of file
+.markdown-body table th,
+.markdown-body table td {
+  padding: 0.5em 1.5em;
+  border: 0.5px solid rgba(160, 160, 160, 0.5);
+}
diff --git a/src/styles/prism.css b/src/styles/prism.css
index 4b5e96f..89cb139 100644
--- a/src/styles/prism.css
+++ b/src/styles/prism.css
@@ -1,108 +1,133 @@
-.markdown-body code, pre {
-	font-family: Consolas, Monaco, 'Source Code Pro', 'Andale Mono', 'Ubuntu Mono', monospace;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-	-webkit-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-.markdown-body pre {
-	color: #cfcfcf;
-	background: #363636;
-	padding: 1em;
-	margin-top: 0;
-	margin-bottom: 16px;
-	overflow: auto;
-}
-
-.markdown-body pre > code {
-	padding: 0;
-	font-size: .9em;
-	background-color: rgba(255, 255, 255, 0) !important;
-	white-space: pre-wrap;
-}
-
-.markdown-body :not(pre) > code {
-	color: #cfcfcf;
-	background: #363636;
-	border-radius: .5em;
-	padding: .2em .6em;
-	font-size: 0.85em;
-	font-weight: 700;
-	white-space: normal;
-}
-
-@media (min-width: 1200px) {
-	.markdown-body pre > code {
-    	font-size: .95em;
-	}
-	.markdown-body :not(pre) > code {
-		font-size: .9em;
-	}
-}
-
-@media(prefers-color-scheme: light) {
-	.markdown-body :not(pre) > code {
-		color: #905;
-		background: #faf0ee;
-	}
-}
-
-.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata {
-	color: #999;
-}
-
-.token.punctuation {
-	color: #cfcfcf;
-}
-
-.token.tag, .token.attr-name, .token.namespace, .token.deleted {
-	color: #e2777a;
-}
-
-.token.function-name {
-	color: #6196cc;
-}
-
-.token.boolean, .token.number, .token.function {
-	color: #f08d49;
-}
-
-.token.property, .token.class-name, .token.constant, .token.symbol {
-	color: #f8c555;
-}
-
-.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin {
-	color: #cc99cd;
-}
-
-.token.string, .token.char, .token.attr-value, .token.regex, .token.variable {
-	color: #7ec699;
-}
-
-.token.operator, .token.entity, .token.url {
-	color: #67cdcc;
-}
-
-.token.important, .token.bold {
-	font-weight: 700;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-.token.inserted {
-	color: green;
-}
+.markdown-body code,
+pre {
+  font-family: Consolas, Monaco, 'Source Code Pro', 'Andale Mono', 'Ubuntu Mono',
+    monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.markdown-body pre {
+  color: #cfcfcf;
+  background: #363636;
+  padding: 1em;
+  margin-top: 0;
+  margin-bottom: 16px;
+  overflow: auto;
+}
+
+.markdown-body pre > code {
+  padding: 0;
+  font-size: 0.9em;
+  background-color: rgba(255, 255, 255, 0) !important;
+  white-space: pre-wrap;
+}
+
+.markdown-body :not(pre) > code {
+  color: #cfcfcf;
+  background: #363636;
+  border-radius: 0.5em;
+  padding: 0.2em 0.6em;
+  font-size: 0.85em;
+  font-weight: 700;
+  white-space: normal;
+}
+
+@media (min-width: 1200px) {
+  .markdown-body pre > code {
+    font-size: 0.95em;
+  }
+  .markdown-body :not(pre) > code {
+    font-size: 0.9em;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .markdown-body :not(pre) > code {
+    color: #905;
+    background: #faf0ee;
+  }
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #cfcfcf;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: 700;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
diff --git a/src/views/About.vue b/src/views/About.vue
index b8d2616..585cac9 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,363 +1,351 @@
-<template>
-  <div class="pt-sm-13 pt-6 d-flex justify-center">
-    <div
-      :style="{ width: $vuetify.breakpoint.width >= 1280 ? '1280px' : '100%' }"
-      class="about-container"
-    >
-      <div class="d-flex justify-center">
-        <div class="text-sm-h1 text-h2 font-weight-bold mx-sm-0 mx-4">
-          To be the best bench.
-        </div>
-      </div>
-      <div class="d-flex justify-center pt-8 mb-16 mx-sm-0 mx-4">
-        <div class="text-h4">一个真实可靠、不断完善的多维课程评价信息库</div>
-      </div>
-      <div class="d-flex justify-center" style="flex-wrap: wrap">
-        <div
-          class="mx-sm-6"
-          style="width: 168px"
-        >
-          <div class="text-h6 d-flex justify-center">
-            <div>真实评价</div>
-          </div>
-          <div class="text-body-2 d-flex justify-center">
-            <div>Real Comments</div>
-          </div>
-        </div>
-        <div
-          class="mx-sm-6"
-          style="width: 168px"
-        >
-          <div class="text-h6 d-flex justify-center">
-            <div>畅所欲言</div>
-          </div>
-          <div class="text-body-2 d-flex justify-center">
-            <div>Free Discussion</div>
-          </div>
-        </div>
-        <div
-          class="mx-sm-6"
-          style="width: 168px"
-        >
-          <div class="text-h6 d-flex justify-center">
-            <div>多维评分</div>
-          </div>
-          <div class="text-body-2 d-flex justify-center">
-            <div>Comprehensive Grading</div>
-          </div>
-        </div>
-        <div
-          class="mx-sm-6"
-          style="width: 168px"
-        >
-          <div class="text-h6 d-flex justify-center">
-            <div>简明易用</div>
-          </div>
-          <div class="text-body-2 d-flex justify-center">
-            <div>User Friendly</div>
-          </div>
-        </div>
-      </div>
-      <div class="d-flex justify-center mt-10">
-        <v-sheet width="318px" class="pa-6 d-flex justify-center" outlined>
-          <div class="pr-4">其他项目</div>
-          <div @click='openInplace("https://courseprettier.hcps.tech/")' class="coursePrettier">CoursePrettier</div>
-        </v-sheet>
-        <v-sheet width="318px" class="pa-6 d-flex justify-center" outlined>
-          <div>联系我们？</div>
-          <div>
-            <v-icon
-              class="ml-3"
-              @click="openInplace('https://jq.qq.com/?_wv=1027&k=nJPBtvhe')"
-            >{{ statics.icons.mdiQqchat }}
-            </v-icon
-            >
-            <v-icon
-              class="ml-3"
-              @click="openInplace('mailto:geekpie@geekpie.club')"
-            >{{ statics.icons.mdiEmail }}
-            </v-icon
-            >
-            <v-icon
-              class="ml-3"
-              @click="
-                openInplace(
-                  'https://github.com/ShanghaitechGeekPie/coursebench_official'
-                )
-              "
-            >{{ statics.icons.mdiGithub }}
-            </v-icon
-            >
-            <v-icon
-              class="ml-3"
-              @click="openInplace('https://geekpie.club')"
-            >{{ statics.icons.mdiWeb }}
-            </v-icon
-            >
-          </div>
-        </v-sheet>
-      </div>
-      <div class="mt-16">
-        <v-sheet
-          width="100%"
-          height="200px"
-          class="d-flex justify-center"
-        >
-          <div class="d-flex justify-center flex-column">
-            <div class="d-flex mx-2">
-              <div class="d-flex justify-center flex-column">
-                <div class="text-sm-h3 text-h4">Powered by</div>
-              </div>
-              <v-img src="@/assets/geekpie.svg" :width="$vuetify.breakpoint.xsOnly ? '160px' : ''"></v-img>
-            </div>
-          </div>
-        </v-sheet>
-      </div>
-      <div class="mt-16">
-        <div
-          :class="[
-            $vuetify.breakpoint.xsOnly
-              ? 'about-context-mobile px-4'
-              : 'about-context',
-          ]"
-        >
-          <div class="py-8">
-            <div class="text-h5">开发人员</div>
-            <div class="mt-4 d-sm-flex d-block" style="flex-wrap: wrap">
-              <div class="d-none">
-                <!--With great respect to our greatest developer-->
-                <div class="pr-4 pb-sm-4 pb-4 d-flex">
-                  <AvatarContainer
-                    :src="
-                      parseAvatarLink(
-                        'https://avatars.githubusercontent.com/u/52339623?s=64&v=4'
-                      )
-                    "
-                    :name="'spedoske'"
-                    size="32"
-                  />
-                  <a
-                    :href="parseHomeLink('https://github.com/Spedoske')"
-                    :class="[
-                      $vuetify.theme.dark
-                        ? 'inline-text-white'
-                        : 'inline-text-black',
-                      'inline-link-hover ml-2 mt-1',
-                    ]"
-                  >{{ "Spedoske" }}</a
-                  >
-                </div>
-              </div>
-              <div
-                v-for="(contributor, index) in contributors"
-                :key="index"
-                class="pr-4 pb-sm-4 pb-4 d-flex"
-              >
-                <AvatarContainer
-                  :src="parseAvatarLink(contributor.avatar)"
-                  :name="contributor.name"
-                  size="32"
-                />
-                <a
-                  :href="parseHomeLink(contributor.home)"
-                  :class="[
-                    $vuetify.theme.dark
-                      ? 'inline-text-white'
-                      : 'inline-text-black',
-                    'inline-link-hover ml-2 mt-1',
-                  ]"
-                >{{ contributor.name }}</a
-                >
-              </div>
-            </div>
-          </div>
-          <v-divider></v-divider>
-          <div class="py-8" id="bug_report">
-            <div class="text-h5">错误反馈</div>
-            <div class="mt-4">
-              如果您在使用中遇到了问题，欢迎联系 <a
-              href="mailto:zhaoqch1@shanghaitech.edu.cn"
-            >zhaoqch1@shanghaitech.edu.cn</a
-            >
-              或在 <a
-              href="https://github.com/ShanghaitechGeekPie/coursebench_official"
-            >GitHub Official Repository</a
-            > 中提出Issue。
-            </div>
-          </div>
-          <v-divider></v-divider>
-          <div class="py-8">
-            <div class="text-h5">友情赞助</div>
-            <div class="mt-4">
-              <div
-                v-for="(sponsor, index) in sponsors.cooperations"
-                :key="index"
-                :class="['d-flex', 'justify-center', index === 0 ? '' : 'mt-8']"
-              >
-                <div>
-                  <div class="d-flex justify-center" v-if="sponsor.logo !== ''">
-                    <div style="width: 56%">
-                      <v-img :src="sponsor.logo"></v-img>
-                    </div>
-                  </div>
-                  <div class="d-flex justify-center mt-2">
-                    <a
-                      :href="sponsor.home"
-                      :class="[
-                        $vuetify.theme.dark
-                          ? 'inline-text-white'
-                          : 'inline-text-black',
-                        'inline-link-hover',
-                      ]"
-                    >{{ sponsor.name }}</a
-                    >
-                  </div>
-                </div>
-              </div>
-              <div class="pt-8 d-flex justify-center">
-                <div
-                  class="d-flex justify-center"
-                  style="flex-wrap: wrap; width: 340px"
-                >
-                  <div
-                    v-for="(sponsor, index) in sponsors.individuals"
-                    :key="index"
-                    class="pr-4 pb-sm-4 pb-4 d-flex"
-                  >
-                    <AvatarContainer
-                      :src="parseAvatarLink(sponsor.avatar)"
-                      :name="sponsor.name"
-                      size="32"
-                    />
-                    <a
-                      :href="parseHomeLink(sponsor.home)"
-                      :class="[
-                        $vuetify.theme.dark
-                          ? 'inline-text-white'
-                          : 'inline-text-black',
-                        'inline-link-hover ml-2 mt-1',
-                      ]"
-                    >{{ sponsor.name }}</a
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <v-divider></v-divider>
-          <div class="py-8">
-            <div class="text-h5">支持我们</div>
-            <div class="mt-4">
-              如果您觉得我们的网站对您有帮助，您可以通过点击以下链接找到CourseBench的专属赞助方案并支持我们：
-              <a href="https://afdian.net/a/teafrogsf"
-              >爱发电（https://afdian.net/a/teafrogsf）</a
-              >
-            </div>
-          </div>
-          <v-divider></v-divider>
-          <div class="pt-8" id="service_terms">
-            <div class="text-h5">用户协议</div>
-            <div
-              class="mt-4"
-              v-html="useMarkdown(termsOfService)"
-              style="white-space: pre-line"
-            ></div>
-          </div>
-          <v-divider></v-divider>
-          <div class="pt-8" id="privacy_policy">
-            <div class="text-h5">隐私政策</div>
-            <div
-              class="mt-4"
-              v-html="useMarkdown(privacyPolicy)"
-              style="white-space: pre-line"
-            ></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import AvatarContainer from "@/components/users/profile/AvatarContainer";
-import contributors from "@/assets/contributors.json";
-import sponsors from "@/assets/sponsors.json";
-import { mdiQqchat, mdiEmail, mdiGithub, mdiWeb } from "@mdi/js";
-import {
-  parseAvatarLink,
-  parseHomeLink,
-} from "@/composables/global/useSponsors";
-import { openInplace } from "@/composables/global/useExternalUrl";
-import useMarkdown from "@/composables/global/useMarkdown";
-import { termsOfService, privacyPolicy } from "Policy";
-
-export default {
-  setup() {
-    const statics = {
-      icons: {
-        mdiQqchat,
-        mdiEmail,
-        mdiGithub,
-        mdiWeb,
-      },
-    };
-
-    return {
-      statics,
-      sponsors,
-      contributors,
-      parseHomeLink,
-      parseAvatarLink,
-      openInplace,
-      termsOfService,
-      privacyPolicy,
-      useMarkdown,
-    };
-  },
-  components: {
-    AvatarContainer,
-  },
-};
-</script>
-<style scoped>
-.about-context {
-  margin-left: 50%;
-  transform: translate(-50%, 0);
-}
-
-.about-context-mobile {
-  width: 100%;
-}
-
-.inline-link {
-  color: #0067bf;
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-link-hover:hover {
-  color: #0067bf;
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-link-hover {
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-text-black {
-  color: #000000de;
-}
-
-.inline-text-white {
-  color: #ffffff;
-}
-
-.coursePrettier {
-  cursor: pointer;
-  background-image: linear-gradient(to right, #7bb4e6, #e6c944, #f3b6cd);
-  -webkit-background-clip: text;
-  color: transparent;
-  font-weight: bold;
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="pt-sm-13 pt-6 d-flex justify-center">
+    <div
+      :style="{ width: $vuetify.breakpoint.width >= 1280 ? '1280px' : '100%' }"
+      class="about-container"
+    >
+      <div class="d-flex justify-center">
+        <div class="text-sm-h1 text-h2 font-weight-bold mx-sm-0 mx-4">
+          To be the best bench.
+        </div>
+      </div>
+      <div class="d-flex justify-center pt-8 mb-16 mx-sm-0 mx-4">
+        <div class="text-h4">一个真实可靠、不断完善的多维课程评价信息库</div>
+      </div>
+      <div class="d-flex justify-center" style="flex-wrap: wrap">
+        <div class="mx-sm-6" style="width: 168px">
+          <div class="text-h6 d-flex justify-center">
+            <div>真实评价</div>
+          </div>
+          <div class="text-body-2 d-flex justify-center">
+            <div>Real Comments</div>
+          </div>
+        </div>
+        <div class="mx-sm-6" style="width: 168px">
+          <div class="text-h6 d-flex justify-center">
+            <div>畅所欲言</div>
+          </div>
+          <div class="text-body-2 d-flex justify-center">
+            <div>Free Discussion</div>
+          </div>
+        </div>
+        <div class="mx-sm-6" style="width: 168px">
+          <div class="text-h6 d-flex justify-center">
+            <div>多维评分</div>
+          </div>
+          <div class="text-body-2 d-flex justify-center">
+            <div>Comprehensive Grading</div>
+          </div>
+        </div>
+        <div class="mx-sm-6" style="width: 168px">
+          <div class="text-h6 d-flex justify-center">
+            <div>简明易用</div>
+          </div>
+          <div class="text-body-2 d-flex justify-center">
+            <div>User Friendly</div>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex justify-center mt-10">
+        <v-sheet width="318px" class="pa-6 d-flex justify-center" outlined>
+          <div class="pr-4">其他项目</div>
+          <div
+            @click="openInplace('https://courseprettier.hcps.tech/')"
+            class="coursePrettier"
+          >
+            CoursePrettier
+          </div>
+        </v-sheet>
+        <v-sheet width="318px" class="pa-6 d-flex justify-center" outlined>
+          <div>联系我们？</div>
+          <div>
+            <v-icon
+              class="ml-3"
+              @click="openInplace('https://jq.qq.com/?_wv=1027&k=nJPBtvhe')"
+              >{{ statics.icons.mdiQqchat }}
+            </v-icon>
+            <v-icon
+              class="ml-3"
+              @click="openInplace('mailto:geekpie@geekpie.club')"
+              >{{ statics.icons.mdiEmail }}
+            </v-icon>
+            <v-icon
+              class="ml-3"
+              @click="
+                openInplace(
+                  'https://github.com/ShanghaitechGeekPie/coursebench_official',
+                )
+              "
+              >{{ statics.icons.mdiGithub }}
+            </v-icon>
+            <v-icon class="ml-3" @click="openInplace('https://geekpie.club')"
+              >{{ statics.icons.mdiWeb }}
+            </v-icon>
+          </div>
+        </v-sheet>
+      </div>
+      <div class="mt-16">
+        <v-sheet width="100%" height="200px" class="d-flex justify-center">
+          <div class="d-flex justify-center flex-column">
+            <div class="d-flex mx-2">
+              <div class="d-flex justify-center flex-column">
+                <div class="text-sm-h3 text-h4">Powered by</div>
+              </div>
+              <v-img
+                src="@/assets/geekpie.svg"
+                :width="$vuetify.breakpoint.xsOnly ? '160px' : ''"
+              ></v-img>
+            </div>
+          </div>
+        </v-sheet>
+      </div>
+      <div class="mt-16">
+        <div
+          :class="[
+            $vuetify.breakpoint.xsOnly
+              ? 'about-context-mobile px-4'
+              : 'about-context',
+          ]"
+        >
+          <div class="py-8">
+            <div class="text-h5">开发人员</div>
+            <div class="mt-4 d-sm-flex d-block" style="flex-wrap: wrap">
+              <div class="d-none">
+                <!--With great respect to our greatest developer-->
+                <div class="pr-4 pb-sm-4 pb-4 d-flex">
+                  <AvatarContainer
+                    :src="
+                      parseAvatarLink(
+                        'https://avatars.githubusercontent.com/u/52339623?s=64&v=4',
+                      )
+                    "
+                    :name="'spedoske'"
+                    size="32"
+                  />
+                  <a
+                    :href="parseHomeLink('https://github.com/Spedoske')"
+                    :class="[
+                      $vuetify.theme.dark
+                        ? 'inline-text-white'
+                        : 'inline-text-black',
+                      'inline-link-hover ml-2 mt-1',
+                    ]"
+                    >{{ 'Spedoske' }}</a
+                  >
+                </div>
+              </div>
+              <div
+                v-for="(contributor, index) in contributors"
+                :key="index"
+                class="pr-4 pb-sm-4 pb-4 d-flex"
+              >
+                <AvatarContainer
+                  :src="parseAvatarLink(contributor.avatar)"
+                  :name="contributor.name"
+                  size="32"
+                />
+                <a
+                  :href="parseHomeLink(contributor.home)"
+                  :class="[
+                    $vuetify.theme.dark
+                      ? 'inline-text-white'
+                      : 'inline-text-black',
+                    'inline-link-hover ml-2 mt-1',
+                  ]"
+                  >{{ contributor.name }}</a
+                >
+              </div>
+            </div>
+          </div>
+          <v-divider></v-divider>
+          <div class="py-8" id="bug_report">
+            <div class="text-h5">错误反馈</div>
+            <div class="mt-4">
+              如果您在使用中遇到了问题，欢迎联系
+              <a href="mailto:zhaoqch1@shanghaitech.edu.cn"
+                >zhaoqch1@shanghaitech.edu.cn</a
+              >
+              或在
+              <a
+                href="https://github.com/ShanghaitechGeekPie/coursebench_official"
+                >GitHub Official Repository</a
+              >
+              中提出Issue。
+            </div>
+          </div>
+          <v-divider></v-divider>
+          <div class="py-8">
+            <div class="text-h5">友情赞助</div>
+            <div class="mt-4">
+              <div
+                v-for="(sponsor, index) in sponsors.cooperations"
+                :key="index"
+                :class="['d-flex', 'justify-center', index === 0 ? '' : 'mt-8']"
+              >
+                <div>
+                  <div class="d-flex justify-center" v-if="sponsor.logo !== ''">
+                    <div style="width: 56%">
+                      <v-img :src="sponsor.logo"></v-img>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-center mt-2">
+                    <a
+                      :href="sponsor.home"
+                      :class="[
+                        $vuetify.theme.dark
+                          ? 'inline-text-white'
+                          : 'inline-text-black',
+                        'inline-link-hover',
+                      ]"
+                      >{{ sponsor.name }}</a
+                    >
+                  </div>
+                </div>
+              </div>
+              <div class="pt-8 d-flex justify-center">
+                <div
+                  class="d-flex justify-center"
+                  style="flex-wrap: wrap; width: 340px"
+                >
+                  <div
+                    v-for="(sponsor, index) in sponsors.individuals"
+                    :key="index"
+                    class="pr-4 pb-sm-4 pb-4 d-flex"
+                  >
+                    <AvatarContainer
+                      :src="parseAvatarLink(sponsor.avatar)"
+                      :name="sponsor.name"
+                      size="32"
+                    />
+                    <a
+                      :href="parseHomeLink(sponsor.home)"
+                      :class="[
+                        $vuetify.theme.dark
+                          ? 'inline-text-white'
+                          : 'inline-text-black',
+                        'inline-link-hover ml-2 mt-1',
+                      ]"
+                      >{{ sponsor.name }}</a
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <v-divider></v-divider>
+          <div class="py-8">
+            <div class="text-h5">支持我们</div>
+            <div class="mt-4">
+              如果您觉得我们的网站对您有帮助，您可以通过点击以下链接找到CourseBench的专属赞助方案并支持我们：
+              <a href="https://afdian.net/a/teafrogsf"
+                >爱发电（https://afdian.net/a/teafrogsf）</a
+              >
+            </div>
+          </div>
+          <v-divider></v-divider>
+          <div class="pt-8" id="service_terms">
+            <div class="text-h5">用户协议</div>
+            <div
+              class="mt-4"
+              v-html="useMarkdown(termsOfService)"
+              style="white-space: pre-line"
+            ></div>
+          </div>
+          <v-divider></v-divider>
+          <div class="pt-8" id="privacy_policy">
+            <div class="text-h5">隐私政策</div>
+            <div
+              class="mt-4"
+              v-html="useMarkdown(privacyPolicy)"
+              style="white-space: pre-line"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import contributors from '@/assets/contributors.json';
+import sponsors from '@/assets/sponsors.json';
+import { mdiQqchat, mdiEmail, mdiGithub, mdiWeb } from '@mdi/js';
+import {
+  parseAvatarLink,
+  parseHomeLink,
+} from '@/composables/global/useSponsors';
+import { openInplace } from '@/composables/global/useExternalUrl';
+import useMarkdown from '@/composables/global/useMarkdown';
+import { termsOfService, privacyPolicy } from 'Policy';
+
+export default {
+  setup() {
+    const statics = {
+      icons: {
+        mdiQqchat,
+        mdiEmail,
+        mdiGithub,
+        mdiWeb,
+      },
+    };
+
+    return {
+      statics,
+      sponsors,
+      contributors,
+      parseHomeLink,
+      parseAvatarLink,
+      openInplace,
+      termsOfService,
+      privacyPolicy,
+      useMarkdown,
+    };
+  },
+  components: {
+    AvatarContainer,
+  },
+};
+</script>
+<style scoped>
+.about-context {
+  margin-left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.about-context-mobile {
+  width: 100%;
+}
+
+.inline-link {
+  color: #0067bf;
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-link-hover:hover {
+  color: #0067bf;
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-link-hover {
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-text-black {
+  color: #000000de;
+}
+
+.inline-text-white {
+  color: #ffffff;
+}
+
+.coursePrettier {
+  cursor: pointer;
+  background-image: linear-gradient(to right, #7bb4e6, #e6c944, #f3b6cd);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/Active.vue b/src/views/Active.vue
index c625654..c8de95c 100644
--- a/src/views/Active.vue
+++ b/src/views/Active.vue
@@ -1,173 +1,182 @@
-<template>
-  <div v-if="$vuetify.breakpoint.xsOnly">
-    <div class="main-card" style="min-width: 300px">
-      <div class="d-flex justify-center">
-        <div v-if="status.loading"
-          class="loading-container-mobile d-flex justify-center"
-        >
-          <div class="d-flex justify-center flex-column">
-            <v-progress-circular 
-              indeterminate 
-              size="128"
-              width="8"
-              color="primary"
-            ></v-progress-circular>
-          </div> 
-        </div> 
-        <v-icon v-else-if="status.errorMessage == ''" size="160" color="success">
-          {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
-        </v-icon>
-        <v-icon v-else size="160" color="error">
-          {{ statics.icons.mdiCloseCircleOutline }}
-        </v-icon>
-      </div>
-      <div>
-        <div v-if="status.loading">
-          <div class="text-h4 pt-6 text-center">正在加载中...</div>
-          <div class="pt-6 word-wrap text-center">
-            您的账号即将完成激活，请稍等。
-          </div>
-        </div>
-        <div v-else-if="status.errorMessage == ''">
-          <div class="text-h4 pt-6 text-center">电子邮箱验证成功!</div>
-          <div class="pt-6 word-wrap text-center">
-            您的账号已经注册成功，欢迎您使用本系统。
-          </div>
-        </div>
-        <div v-else>
-          <div class="text-h4 pt-6 text-center">发生错误!</div>
-          <div class="pt-6 word-wrap text-center">
-            {{ status.errorMessage }}，请稍后重试。
-          </div>
-        </div>
-        <div v-if="!status.loading" class="d-flex justify-center pt-16">
-          <v-btn
-            width="90px"
-            elevation="1"
-            color="primary"
-            @click="$router.push('/')"
-          >
-            返回首页
-          </v-btn>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    :style="{ background: $vuetify.theme.isDark ? '' : '#f9f9f9', 'min-height': '100%' }"
-    v-else
-  >
-    <v-sheet
-      :color="$vuetify.theme.isDark ? statics.backgroundDark : statics.backgroundLight"
-      :height="$vuetify.breakpoint.xsOnly ? 91 : '40vh'"
-    ></v-sheet>
-    <v-fade-transition>
-      <div class="main-card">
-        <v-card
-          width="600px"
-          height="400px"
-          elevation="2"
-          class="d-flex justify-space-between flex-column"
-        >
-          <div class="px-16 pt-16 d-flex">
-            <div style="height: 100%">
-              <div v-if="status.loading"
-                class="loading-container d-flex justify-center"
-              >
-                <div class="d-flex justify-center flex-column">
-                  <v-progress-circular 
-                    indeterminate 
-                    size="100"
-                    width="8"
-                    color="primary"
-                  ></v-progress-circular>
-                </div> 
-              </div>              
-              <v-icon
-                v-else-if="status.errorMessage == ''"
-                size="128"
-                color="success"
-              >
-                {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
-              </v-icon>
-              <v-icon v-else size="128" color="error">
-                {{ statics.icons.mdiCloseCircleOutline }}
-              </v-icon>
-            </div>
-            <div
-              class="pl-6 d-flex justify-space-between flex-column"
-              style="max-width: 344px; height: 100%"
-            >
-              <div v-if="status.loading">
-                <div class="text-h4 pt-6">正在加载中...</div>
-                <div class="pt-6 word-wrap">
-                  您的账号即将完成激活，请稍等。
-                </div>
-              </div>            
-              <div v-else-if="status.errorMessage == ''">
-                <div class="text-h4 pt-6">电子邮箱验证成功!</div>
-                <div class="pt-6 word-wrap">
-                  您的账号已经注册成功，欢迎您使用本系统。
-                </div>
-              </div>
-              <div v-else>
-                <div class="text-h4 pt-6">发生错误!</div>
-                <div class="pt-6 word-wrap">
-                  {{ status.errorMessage }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="px-16 pb-16 d-flex justify-end">
-            <div class="d-flex justify-end pb-6 pr-4">
-              <v-btn
-                width="90px"
-                elevation="1"
-                color="primary"
-                @click="$router.push('/')"
-              >
-                返回首页
-              </v-btn>
-            </div>
-          </div>
-        </v-card>
-      </div>
-    </v-fade-transition>
-  </div>
-</template>
-
-<script>
-import useActive from "@/composables/users/useActive";
-
-export default {
-  setup() {
-    const { statics, status } = useActive();
-    return { statics, status };
-  },
-};
-</script>
-
-<style scoped>
-.main-card {
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  transform: translate(-50%, -50%);
-}
-
-.word-wrap {
-  word-wrap: break-word;
-  word-break: break-all;
-  overflow: hidden;
-}
-
-.loading-container {
-  width: 128px;
-  height: 128px;
-}
-
-.loading-container-mobile {
-  width: 160px;
-  height: 160px;
-}
-</style>
+<template>
+  <div v-if="$vuetify.breakpoint.xsOnly">
+    <div class="main-card" style="min-width: 300px">
+      <div class="d-flex justify-center">
+        <div
+          v-if="status.loading"
+          class="loading-container-mobile d-flex justify-center"
+        >
+          <div class="d-flex justify-center flex-column">
+            <v-progress-circular
+              indeterminate
+              size="128"
+              width="8"
+              color="primary"
+            ></v-progress-circular>
+          </div>
+        </div>
+        <v-icon
+          v-else-if="status.errorMessage == ''"
+          size="160"
+          color="success"
+        >
+          {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
+        </v-icon>
+        <v-icon v-else size="160" color="error">
+          {{ statics.icons.mdiCloseCircleOutline }}
+        </v-icon>
+      </div>
+      <div>
+        <div v-if="status.loading">
+          <div class="text-h4 pt-6 text-center">正在加载中...</div>
+          <div class="pt-6 word-wrap text-center">
+            您的账号即将完成激活，请稍等。
+          </div>
+        </div>
+        <div v-else-if="status.errorMessage == ''">
+          <div class="text-h4 pt-6 text-center">电子邮箱验证成功!</div>
+          <div class="pt-6 word-wrap text-center">
+            您的账号已经注册成功，欢迎您使用本系统。
+          </div>
+        </div>
+        <div v-else>
+          <div class="text-h4 pt-6 text-center">发生错误!</div>
+          <div class="pt-6 word-wrap text-center">
+            {{ status.errorMessage }}，请稍后重试。
+          </div>
+        </div>
+        <div v-if="!status.loading" class="d-flex justify-center pt-16">
+          <v-btn
+            width="90px"
+            elevation="1"
+            color="primary"
+            @click="$router.push('/')"
+          >
+            返回首页
+          </v-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    :style="{
+      background: $vuetify.theme.isDark ? '' : '#f9f9f9',
+      'min-height': '100%',
+    }"
+    v-else
+  >
+    <v-sheet
+      :color="
+        $vuetify.theme.isDark ? statics.backgroundDark : statics.backgroundLight
+      "
+      :height="$vuetify.breakpoint.xsOnly ? 91 : '40vh'"
+    ></v-sheet>
+    <v-fade-transition>
+      <div class="main-card">
+        <v-card
+          width="600px"
+          height="400px"
+          elevation="2"
+          class="d-flex justify-space-between flex-column"
+        >
+          <div class="px-16 pt-16 d-flex">
+            <div style="height: 100%">
+              <div
+                v-if="status.loading"
+                class="loading-container d-flex justify-center"
+              >
+                <div class="d-flex justify-center flex-column">
+                  <v-progress-circular
+                    indeterminate
+                    size="100"
+                    width="8"
+                    color="primary"
+                  ></v-progress-circular>
+                </div>
+              </div>
+              <v-icon
+                v-else-if="status.errorMessage == ''"
+                size="128"
+                color="success"
+              >
+                {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
+              </v-icon>
+              <v-icon v-else size="128" color="error">
+                {{ statics.icons.mdiCloseCircleOutline }}
+              </v-icon>
+            </div>
+            <div
+              class="pl-6 d-flex justify-space-between flex-column"
+              style="max-width: 344px; height: 100%"
+            >
+              <div v-if="status.loading">
+                <div class="text-h4 pt-6">正在加载中...</div>
+                <div class="pt-6 word-wrap">您的账号即将完成激活，请稍等。</div>
+              </div>
+              <div v-else-if="status.errorMessage == ''">
+                <div class="text-h4 pt-6">电子邮箱验证成功!</div>
+                <div class="pt-6 word-wrap">
+                  您的账号已经注册成功，欢迎您使用本系统。
+                </div>
+              </div>
+              <div v-else>
+                <div class="text-h4 pt-6">发生错误!</div>
+                <div class="pt-6 word-wrap">
+                  {{ status.errorMessage }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="px-16 pb-16 d-flex justify-end">
+            <div class="d-flex justify-end pb-6 pr-4">
+              <v-btn
+                width="90px"
+                elevation="1"
+                color="primary"
+                @click="$router.push('/')"
+              >
+                返回首页
+              </v-btn>
+            </div>
+          </div>
+        </v-card>
+      </div>
+    </v-fade-transition>
+  </div>
+</template>
+
+<script>
+import useActive from '@/composables/users/useActive';
+
+export default {
+  setup() {
+    const { statics, status } = useActive();
+    return { statics, status };
+  },
+};
+</script>
+
+<style scoped>
+.main-card {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+}
+
+.word-wrap {
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.loading-container {
+  width: 128px;
+  height: 128px;
+}
+
+.loading-container-mobile {
+  width: 160px;
+  height: 160px;
+}
+</style>
diff --git a/src/views/ActivityPoster.vue b/src/views/ActivityPoster.vue
index fb1cb43..c5406fd 100644
--- a/src/views/ActivityPoster.vue
+++ b/src/views/ActivityPoster.vue
@@ -1,97 +1,97 @@
-<template>
-  <div class="pt-sm-13 pt-6 d-flex justify-center">
-    <div
-      :style="{ width: $vuetify.breakpoint.width >= 1280 ? '1280px' : '100%' }"
-      class="about-container"
-    >
-      <div
-        class="mt-4"
-        v-html="useMarkdown(benchReviewerPolicy)"
-        style="white-space: pre-line"
-      ></div>
-    </div>
-  </div>
-</template>
-<script>
-import AvatarContainer from '@/components/users/profile/AvatarContainer';
-import contributors from '@/assets/contributors.json';
-import sponsors from '@/assets/sponsors.json';
-import { mdiQqchat, mdiEmail, mdiGithub, mdiWeb } from '@mdi/js';
-import {
-  parseAvatarLink,
-  parseHomeLink,
-} from '@/composables/global/useSponsors';
-import { openInplace } from '@/composables/global/useExternalUrl';
-import useMarkdown from '@/composables/global/useMarkdown';
-import { benchReviewerPolicy } from 'Policy';
-
-export default {
-  setup() {
-    const statics = {
-      icons: {
-        mdiQqchat,
-        mdiEmail,
-        mdiGithub,
-        mdiWeb,
-      },
-    };
-
-    return {
-      statics,
-      sponsors,
-      contributors,
-      parseHomeLink,
-      parseAvatarLink,
-      openInplace,
-      benchReviewerPolicy,
-      useMarkdown,
-    };
-  },
-  components: {
-    AvatarContainer,
-  },
-};
-</script>
-<style scoped>
-.about-context {
-  margin-left: 50%;
-  transform: translate(-50%, 0);
-}
-
-.about-context-mobile {
-  width: 100%;
-}
-
-.inline-link {
-  color: #0067bf;
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-link-hover:hover {
-  color: #0067bf;
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-link-hover {
-  cursor: pointer;
-  text-decoration-line: none;
-}
-
-.inline-text-black {
-  color: #000000de;
-}
-
-.inline-text-white {
-  color: #ffffff;
-}
-
-.coursePrettier {
-  cursor: pointer;
-  background-image: linear-gradient(to right, #7bb4e6, #e6c944, #f3b6cd);
-  -webkit-background-clip: text;
-  color: transparent;
-  font-weight: bold;
-}
-</style>
+<template>
+  <div class="pt-sm-13 pt-6 d-flex justify-center">
+    <div
+      :style="{ width: $vuetify.breakpoint.width >= 1280 ? '1280px' : '100%' }"
+      class="about-container"
+    >
+      <div
+        class="mt-4"
+        v-html="useMarkdown(benchReviewerPolicy)"
+        style="white-space: pre-line"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import AvatarContainer from '@/components/users/profile/AvatarContainer';
+import contributors from '@/assets/contributors.json';
+import sponsors from '@/assets/sponsors.json';
+import { mdiQqchat, mdiEmail, mdiGithub, mdiWeb } from '@mdi/js';
+import {
+  parseAvatarLink,
+  parseHomeLink,
+} from '@/composables/global/useSponsors';
+import { openInplace } from '@/composables/global/useExternalUrl';
+import useMarkdown from '@/composables/global/useMarkdown';
+import { benchReviewerPolicy } from 'Policy';
+
+export default {
+  setup() {
+    const statics = {
+      icons: {
+        mdiQqchat,
+        mdiEmail,
+        mdiGithub,
+        mdiWeb,
+      },
+    };
+
+    return {
+      statics,
+      sponsors,
+      contributors,
+      parseHomeLink,
+      parseAvatarLink,
+      openInplace,
+      benchReviewerPolicy,
+      useMarkdown,
+    };
+  },
+  components: {
+    AvatarContainer,
+  },
+};
+</script>
+<style scoped>
+.about-context {
+  margin-left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.about-context-mobile {
+  width: 100%;
+}
+
+.inline-link {
+  color: #0067bf;
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-link-hover:hover {
+  color: #0067bf;
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-link-hover {
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.inline-text-black {
+  color: #000000de;
+}
+
+.inline-text-white {
+  color: #ffffff;
+}
+
+.coursePrettier {
+  cursor: pointer;
+  background-image: linear-gradient(to right, #7bb4e6, #e6c944, #f3b6cd);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/CourseAll.vue b/src/views/CourseAll.vue
index af4721d..b162dd6 100755
--- a/src/views/CourseAll.vue
+++ b/src/views/CourseAll.vue
@@ -1,62 +1,108 @@
 <template>
-  <div style="min-height: 100%"> 
-    <div style="flex-wrap: wrap" class="d-flex justify-center flex-row-reverse pt-sm-13 pt-6">
+  <div style="min-height: 100%">
+    <div
+      style="flex-wrap: wrap"
+      class="d-flex justify-center flex-row-reverse pt-sm-13 pt-6"
+    >
       <div class="pa-lg-3 pb-3">
-        <div :class="[$vuetify.breakpoint.mdAndDown ? '' : 'statistic-card-container']">          
-          <div v-if="status.loading"
-            :style="{ width: $vuetify.breakpoint.mdAndDown ? adoptiveCardContainerWidth + 'px': '360px' }"
-          >     
+        <div
+          :class="[
+            $vuetify.breakpoint.mdAndDown ? '' : 'statistic-card-container',
+          ]"
+        >
+          <div
+            v-if="status.loading"
+            :style="{
+              width: $vuetify.breakpoint.mdAndDown
+                ? adoptiveCardContainerWidth + 'px'
+                : '360px',
+            }"
+          >
             <v-card class="pt-6 pb-8 px-6" outlined flat>
-              <v-sheet color="#e2e2e2" class="mx-lg-1 mx-2 mb-3" height="30px" width="80px"></v-sheet>
-              <StatisticLoader 
-                :length="9" 
-                offset="16px" 
-                :width="$vuetify.breakpoint.lgAndUp ? 'calc(100% - 8px)' : 'calc(100% - 16px)'" 
+              <v-sheet
+                color="#e2e2e2"
+                class="mx-lg-1 mx-2 mb-3"
+                height="30px"
+                width="80px"
+              ></v-sheet>
+              <StatisticLoader
+                :length="9"
+                offset="16px"
+                :width="
+                  $vuetify.breakpoint.lgAndUp
+                    ? 'calc(100% - 8px)'
+                    : 'calc(100% - 16px)'
+                "
               />
             </v-card>
           </div>
-          <StatisticCard 
-            :width="adoptiveCardContainerWidth + 'px'"
-            v-else
-          >
+          <StatisticCard :width="adoptiveCardContainerWidth + 'px'" v-else>
             <template #header>
               <div class="mb-3">
                 <div class="text-h5 font-weight-bold">选课互助，自此开始。</div>
-              </div>           
+              </div>
             </template>
             <template #footer="{ showAll }">
               <div></div>
-              <div :class="['mt-n2 pb-2 d-flex justify-end', showAll ? '' : 'pt-4' ]">
-                <div class="grey--text text-caption">共有{{courseText.length}}节课，当前第{{status.page}}页</div>
-              </div>   
+              <div
+                :class="[
+                  'mt-n2 pb-2 d-flex justify-end',
+                  showAll ? '' : 'pt-4',
+                ]"
+              >
+                <div class="grey--text text-caption">
+                  共有{{ courseText.length }}节课，当前第{{ status.page }}页
+                </div>
+              </div>
             </template>
-          </StatisticCard>          
+          </StatisticCard>
         </div>
       </div>
-      <div class="pa-3 px-0" 
-        :style="{ width: this.$vuetify.breakpoint.smAndDown ? '' : this.adoptiveCardNumber * 428 + 'px' }"
+      <div
+        class="pa-3 px-0"
+        :style="{
+          width: this.$vuetify.breakpoint.smAndDown
+            ? ''
+            : this.adoptiveCardNumber * 428 + 'px',
+        }"
       >
         <div>
           <div class="mx-3 d-md-block d-block d-sm-flex justify-center">
-            <SelectLoader :width="adoptiveCardContainerWidth + 'px'" type="select" v-if="status.loading" />
-            <SelectBar 
+            <SelectLoader
+              :width="adoptiveCardContainerWidth + 'px'"
+              type="select"
+              v-if="status.loading"
+            />
+            <SelectBar
               :width="adoptiveCardContainerWidth + 'px'"
               :key-items="sortStatics.sortKeyItem"
               :order-items="sortStatics.orderItem[courseFilterStatus.sortKey]"
               :sort-key.sync="courseFilterStatus.sortKey"
               :sort-order.sync="courseFilterStatus.order"
-              v-else 
+              v-else
             />
           </div>
           <div class="pt-6 px-0">
-            <div 
-              :style="{ width: this.$vuetify.breakpoint.smAndDown ? '' : this.adoptiveCardNumber * 428 + 'px' }"
+            <div
+              :style="{
+                width: this.$vuetify.breakpoint.smAndDown
+                  ? ''
+                  : this.adoptiveCardNumber * 428 + 'px',
+              }"
             >
               <div class="d-flex justify-center" v-if="status.loading">
                 <div :style="{ width: adoptiveCardContainerWidth + 24 + 'px' }">
-                  <div class="d-flex flex-wrap justify-start">                        
-                    <div v-for="index in adoptiveCardNumber * 2" :key="index" class="d-flex">
-                      <CourseLoader :width="adoptiveCardWidth + 'px'" height="303px" header="image" />
+                  <div class="d-flex flex-wrap justify-start">
+                    <div
+                      v-for="index in adoptiveCardNumber * 2"
+                      :key="index"
+                      class="d-flex"
+                    >
+                      <CourseLoader
+                        :width="adoptiveCardWidth + 'px'"
+                        height="303px"
+                        header="image"
+                      />
                     </div>
                   </div>
                 </div>
@@ -73,11 +119,20 @@
               >
                 <template #default="{ items }">
                   <div class="d-flex justify-center">
-                    <div :style="{ width: adoptiveCardContainerWidth + 24 + 'px' }">
-                      <div class="d-flex flex-wrap justify-start">                        
-                        <div v-for="(course) in items" :key="course.id" class="d-flex">
+                    <div
+                      :style="{ width: adoptiveCardContainerWidth + 24 + 'px' }"
+                    >
+                      <div class="d-flex flex-wrap justify-start">
+                        <div
+                          v-for="course in items"
+                          :key="course.id"
+                          class="d-flex"
+                        >
                           <v-fade-transition>
-                            <CourseCard :course="course" :width="adoptiveCardWidth + 'px'" />
+                            <CourseCard
+                              :course="course"
+                              :width="adoptiveCardWidth + 'px'"
+                            />
                           </v-fade-transition>
                         </div>
                       </div>
@@ -85,7 +140,8 @@
                   </div>
                 </template>
                 <template #footer>
-                  <div class="py-1 mt-2 d-flex justify-center justify-lg-start"
+                  <div
+                    class="py-1 mt-2 d-flex justify-center justify-lg-start"
                     v-if="adoptiveCoursePage > 1"
                   >
                     <div class="mx-1">
@@ -108,37 +164,44 @@
   </div>
 </template>
 <script>
-import StatisticCard from "@/components/courses/all/StatisticCard";
-import SelectBar from "@/components/courses/all/SelectBar";
-import useCourseAll from "@/composables/courses/all/useCourseAll";
-import CourseCard from "@/components/courses/all/CourseCard";
-import ElevatedPagination from "@/components/courses/all/ElevatedPagination";
-import { instituteInfo } from "@/composables/global/useStaticData";
-import CourseLoader from "@/components/teachers/loader/CourseLoader"
-import SelectLoader from "@/components/teachers/loader/SelectLoader"
-import StatisticLoader from "@/components/teachers/loader/StatisticLoader"
-import Nothing from "@/components/global/Nothing.vue"
+import StatisticCard from '@/components/courses/all/StatisticCard';
+import SelectBar from '@/components/courses/all/SelectBar';
+import useCourseAll from '@/composables/courses/all/useCourseAll';
+import CourseCard from '@/components/courses/all/CourseCard';
+import ElevatedPagination from '@/components/courses/all/ElevatedPagination';
+import { instituteInfo } from '@/composables/global/useStaticData';
+import CourseLoader from '@/components/teachers/loader/CourseLoader';
+import SelectLoader from '@/components/teachers/loader/SelectLoader';
+import StatisticLoader from '@/components/teachers/loader/StatisticLoader';
+import Nothing from '@/components/global/Nothing.vue';
 
 export default {
   setup() {
-    const { courseText, status, courseFilterStatus, sortStatics } = useCourseAll();
+    const { courseText, status, courseFilterStatus, sortStatics } =
+      useCourseAll();
 
-    return { instituteInfo, courseText, status, courseFilterStatus, sortStatics };
+    return {
+      instituteInfo,
+      courseText,
+      status,
+      courseFilterStatus,
+      sortStatics,
+    };
   },
   components: {
     SelectBar,
     StatisticCard,
     CourseCard,
-    ElevatedPagination, 
-    CourseLoader, 
-    SelectLoader, 
-    StatisticLoader, 
-    Nothing
+    ElevatedPagination,
+    CourseLoader,
+    SelectLoader,
+    StatisticLoader,
+    Nothing,
   },
   computed: {
     adoptiveCoursePage() {
-      return Math.ceil(this.courseText.length / (this.adoptiveCardNumber * 3))
-    }, 
+      return Math.ceil(this.courseText.length / (this.adoptiveCardNumber * 3));
+    },
 
     adoptiveCardWidth() {
       if (this.$vuetify.breakpoint.mdAndDown) {
@@ -160,24 +223,27 @@ export default {
       } else if (this.$vuetify.breakpoint.mdAndDown) {
         return 2;
       } else {
-        return Math.min(Math.floor((this.$vuetify.breakpoint.width - 428) / 428), 3);
+        return Math.min(
+          Math.floor((this.$vuetify.breakpoint.width - 428) / 428),
+          3,
+        );
       }
-    },    
+    },
 
     adoptiveCardContainerWidth() {
       if (this.$vuetify.breakpoint.xsOnly) {
-        return this.$vuetify.breakpoint.width - 24
+        return this.$vuetify.breakpoint.width - 24;
       } else if (this.$vuetify.breakpoint.smOnly) {
-        return this.adoptiveCardWidth * 2 + 24
+        return this.adoptiveCardWidth * 2 + 24;
       } else {
         return this.adoptiveCardNumber * 428 - 24;
-      }    
-    }
-  }
+      }
+    },
+  },
 };
 </script>
 <style scoped>
 .statistic-card-container {
   width: 360px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/CourseDetails.vue b/src/views/CourseDetails.vue
index 1d6de44..9bfc14f 100644
--- a/src/views/CourseDetails.vue
+++ b/src/views/CourseDetails.vue
@@ -1,189 +1,191 @@
-<template>
-  <v-container class="d-flex justify-center mt-6 mt-sm-13">
-    <v-row class="d-flex justify-center" style="max-width: 1300px">
-      <v-col sm="11" cols="12" class="pa-sm-3 pa-0">
-        <v-container class="px-0 mt-n3">
-          <v-row class="d-flex justify-center">
-            <v-col cols="11" class="px-0 mb-3">
-              <DetailCard
-                :details="courseDetail"
-                :comments="commentText"
-                v-if="!status.commentLoading && !status.detailLoading"
-              />
-              <DetailCardLoader v-else />
-            </v-col>
-            <v-col cols="11">
-              <v-row>
-                <v-col lg="3" cols="12" class="pt-0 pl-0 pr-lg-4 pr-0">
-                  <FilterBox
-                    :style="adoptiveCardPosition"
-                    v-if="!status.commentLoading && !status.detailLoading"
-                  />
-                  <FilterBoxLoader v-else />
-                </v-col>
-                <v-col lg="9" cols="12" class="pl-lg-5">
-                  <v-row>
-                    <v-col
-                      cols="12"
-                      class="px-0 pt-0 pb-3"
-                      v-if="
-                        !status.commentLoading &&
-                        !status.detailLoading &&
-                        global.isLogin
-                      "
-                    >
-                      <WritingCard />
-                    </v-col>
-                    <v-col
-                      class="pr-0 pl-0 pr-0 py-0"
-                      v-for="(comment, index) in selectedComment"
-                      :key="comment.id"
-                      cols="12"
-                    >
-                      <CourseCommentCard
-                        :comment="comment"
-                        v-if="!status.commentLoading && !status.detailLoading"
-                      >
-                      </CourseCommentCard>
-                    </v-col>
-                    <v-col
-                      class="pr-0 pl-0 pr-0 py-0"
-                      v-for="index in 2"
-                      :key="index"
-                      cols="12"
-                    >
-                      <CommentLoader
-                        height="290px"
-                        :max-width="null"
-                        v-if="status.commentLoading || status.detailLoading"
-                      />
-                    </v-col>
-                    <v-col
-                      v-if="
-                        selectedComment.length === 0 &&
-                        !status.commentLoading &&
-                        !status.detailLoading
-                      "
-                      class="d-flex justify-center"
-                      cols="12"
-                    >
-                      <nothing class="pt-10" :text="'还没有评论...'"></nothing>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-import DetailCard from "@/components/courses/DetailCard";
-import useCourseDetails from "@/composables/courses/comment/useCourseDetails";
-import CourseCommentCard from "@/components/courses/CourseCommentCard";
-import FilterBox from "@/components/courses/FilterBox";
-import WritingCard from "@/components/courses/WritingCard";
-import Nothing from "@/components/global/Nothing";
-import CommentLoader from "@/components/teachers/loader/CommentLoader";
-import FilterBoxLoader from "@/components/teachers/loader/FilterBoxLoader";
-import DetailCardLoader from "@/components/teachers/loader/DetailCardLoader";
-
-export default {
-  components: {
-    Nothing,
-    WritingCard,
-    DetailCard,
-    FilterBox,
-    CourseCommentCard,
-    CommentLoader,
-    FilterBoxLoader,
-    DetailCardLoader,
-  },
-  setup() {
-    const {
-      commentText,
-      status,
-      courseDetail,
-      selectedTeachers,
-      groups,
-      global,
-      route,
-    } = useCourseDetails();
-
-    const shareAnswer = route.query.answer ? Number(route.query.answer) : -1;
-
-    return {
-      commentText,
-      status,
-      courseDetail,
-      selectedTeachers,
-      groups,
-      global,
-      shareAnswer,
-    };
-  },
-  data() {
-    return {
-      currentTab: 0,
-      scrollTop: document.documentElement.scrollTop,
-      selectedComment: [],
-    };
-  },
-  mounted() {
-    document.addEventListener("scroll", () => {
-      this.scrollTop = document.documentElement.scrollTop;
-    });
-  },
-  methods: {
-    updateSelectedComment() {
-      let mappedGroup = this.selectedTeachers.map((item) => {
-        return this.groups[item].id;
-      });
-      this.selectedComment = this.commentText.filter((item) => {
-        return mappedGroup.includes(item.group.id);
-      });
-      if (this.shareAnswer === -1) return;
-      let itemIndex = this.selectedComment.findIndex((item) => item.id === this.shareAnswer);
-      if (itemIndex === -1) return;
-      let shareComment = this.selectedComment[itemIndex];
-      this.selectedComment.splice(itemIndex, 1);
-      this.selectedComment.unshift(shareComment);
-    },
-  },
-  watch: {
-    selectedTeachers: {
-      handler() {
-        this.updateSelectedComment();
-      },
-      immediate: true,
-      deep: true,
-    },
-    commentText: {
-      handler() {
-        this.updateSelectedComment();
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  computed: {
-    adoptiveCardPosition() {
-      if (this.$vuetify.breakpoint.mdAndDown) {
-        return {};
-      } else if (this.scrollTop <= 323) {
-        return {
-          transform: "translate(0, 0px)",
-        };
-      } else {
-        return {
-          transform: "translate(0, " + (this.scrollTop - 323) + "px)",
-        };
-      }
-    },
-  },
-};
-</script>
-<style></style>
+<template>
+  <v-container class="d-flex justify-center mt-6 mt-sm-13">
+    <v-row class="d-flex justify-center" style="max-width: 1300px">
+      <v-col sm="11" cols="12" class="pa-sm-3 pa-0">
+        <v-container class="px-0 mt-n3">
+          <v-row class="d-flex justify-center">
+            <v-col cols="11" class="px-0 mb-3">
+              <DetailCard
+                :details="courseDetail"
+                :comments="commentText"
+                v-if="!status.commentLoading && !status.detailLoading"
+              />
+              <DetailCardLoader v-else />
+            </v-col>
+            <v-col cols="11">
+              <v-row>
+                <v-col lg="3" cols="12" class="pt-0 pl-0 pr-lg-4 pr-0">
+                  <FilterBox
+                    :style="adoptiveCardPosition"
+                    v-if="!status.commentLoading && !status.detailLoading"
+                  />
+                  <FilterBoxLoader v-else />
+                </v-col>
+                <v-col lg="9" cols="12" class="pl-lg-5">
+                  <v-row>
+                    <v-col
+                      cols="12"
+                      class="px-0 pt-0 pb-3"
+                      v-if="
+                        !status.commentLoading &&
+                        !status.detailLoading &&
+                        global.isLogin
+                      "
+                    >
+                      <WritingCard />
+                    </v-col>
+                    <v-col
+                      class="pr-0 pl-0 pr-0 py-0"
+                      v-for="(comment, index) in selectedComment"
+                      :key="comment.id"
+                      cols="12"
+                    >
+                      <CourseCommentCard
+                        :comment="comment"
+                        v-if="!status.commentLoading && !status.detailLoading"
+                      >
+                      </CourseCommentCard>
+                    </v-col>
+                    <v-col
+                      class="pr-0 pl-0 pr-0 py-0"
+                      v-for="index in 2"
+                      :key="index"
+                      cols="12"
+                    >
+                      <CommentLoader
+                        height="290px"
+                        :max-width="null"
+                        v-if="status.commentLoading || status.detailLoading"
+                      />
+                    </v-col>
+                    <v-col
+                      v-if="
+                        selectedComment.length === 0 &&
+                        !status.commentLoading &&
+                        !status.detailLoading
+                      "
+                      class="d-flex justify-center"
+                      cols="12"
+                    >
+                      <nothing class="pt-10" :text="'还没有评论...'"></nothing>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import DetailCard from '@/components/courses/DetailCard';
+import useCourseDetails from '@/composables/courses/comment/useCourseDetails';
+import CourseCommentCard from '@/components/courses/CourseCommentCard';
+import FilterBox from '@/components/courses/FilterBox';
+import WritingCard from '@/components/courses/WritingCard';
+import Nothing from '@/components/global/Nothing';
+import CommentLoader from '@/components/teachers/loader/CommentLoader';
+import FilterBoxLoader from '@/components/teachers/loader/FilterBoxLoader';
+import DetailCardLoader from '@/components/teachers/loader/DetailCardLoader';
+
+export default {
+  components: {
+    Nothing,
+    WritingCard,
+    DetailCard,
+    FilterBox,
+    CourseCommentCard,
+    CommentLoader,
+    FilterBoxLoader,
+    DetailCardLoader,
+  },
+  setup() {
+    const {
+      commentText,
+      status,
+      courseDetail,
+      selectedTeachers,
+      groups,
+      global,
+      route,
+    } = useCourseDetails();
+
+    const shareAnswer = route.query.answer ? Number(route.query.answer) : -1;
+
+    return {
+      commentText,
+      status,
+      courseDetail,
+      selectedTeachers,
+      groups,
+      global,
+      shareAnswer,
+    };
+  },
+  data() {
+    return {
+      currentTab: 0,
+      scrollTop: document.documentElement.scrollTop,
+      selectedComment: [],
+    };
+  },
+  mounted() {
+    document.addEventListener('scroll', () => {
+      this.scrollTop = document.documentElement.scrollTop;
+    });
+  },
+  methods: {
+    updateSelectedComment() {
+      let mappedGroup = this.selectedTeachers.map((item) => {
+        return this.groups[item].id;
+      });
+      this.selectedComment = this.commentText.filter((item) => {
+        return mappedGroup.includes(item.group.id);
+      });
+      if (this.shareAnswer === -1) return;
+      let itemIndex = this.selectedComment.findIndex(
+        (item) => item.id === this.shareAnswer,
+      );
+      if (itemIndex === -1) return;
+      let shareComment = this.selectedComment[itemIndex];
+      this.selectedComment.splice(itemIndex, 1);
+      this.selectedComment.unshift(shareComment);
+    },
+  },
+  watch: {
+    selectedTeachers: {
+      handler() {
+        this.updateSelectedComment();
+      },
+      immediate: true,
+      deep: true,
+    },
+    commentText: {
+      handler() {
+        this.updateSelectedComment();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    adoptiveCardPosition() {
+      if (this.$vuetify.breakpoint.mdAndDown) {
+        return {};
+      } else if (this.scrollTop <= 323) {
+        return {
+          transform: 'translate(0, 0px)',
+        };
+      } else {
+        return {
+          transform: 'translate(0, ' + (this.scrollTop - 323) + 'px)',
+        };
+      }
+    },
+  },
+};
+</script>
+<style></style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 08c504f..f807bdb 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,16 +1,16 @@
-<template>
-  <v-container class="text-center fill-height">
-    <v-row>
-      <v-col cols="12" md="4" offset-md="4">
-        <v-card class="py-6" flat outlined>
-          <v-card-text>
-            <p class="text-h4 font-weight-bold primary--text">404 Not Found</p>
-            <v-btn to="/" color="primary" elevation="0"
-              class="mt-8" outlined
-            >返回首页</v-btn>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
+<template>
+  <v-container class="text-center fill-height">
+    <v-row>
+      <v-col cols="12" md="4" offset-md="4">
+        <v-card class="py-6" flat outlined>
+          <v-card-text>
+            <p class="text-h4 font-weight-bold primary--text">404 Not Found</p>
+            <v-btn to="/" color="primary" elevation="0" class="mt-8" outlined
+              >返回首页</v-btn
+            >
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/src/views/Ranking.vue b/src/views/Ranking.vue
index 003b280..6091379 100644
--- a/src/views/Ranking.vue
+++ b/src/views/Ranking.vue
@@ -3,7 +3,7 @@
     style="width: 100%"
     class="d-flex justify-center flex-row-reverse pt-sm-13 pt-6"
   >
-    <v-card max-width="800" class="pa-lg-3 pb-3" :width="adoptiveListWidth" >
+    <v-card max-width="800" class="pa-lg-3 pb-3" :width="adoptiveListWidth">
       <v-card-title>Ranking List</v-card-title>
       <v-data-table
         :headers="headers"
@@ -26,7 +26,6 @@ export default {
     return { status, rankList, headers };
   },
   computed: {
-
     adoptiveListWidth() {
       if (this.$vuetify.breakpoint.mdAndDown) {
         if (this.$vuetify.breakpoint.xsOnly) {
diff --git a/src/views/Recent.vue b/src/views/Recent.vue
index 128c8d4..ecdb38f 100644
--- a/src/views/Recent.vue
+++ b/src/views/Recent.vue
@@ -1,23 +1,35 @@
 <template>
   <div style="min-height: 100%">
     <ImageLoader v-if="status.commentLoading" />
-    <BackgroundImage :src="$vuetify.theme.dark ? backgroundDark : backgroundLight" v-else />
+    <BackgroundImage
+      :src="$vuetify.theme.dark ? backgroundDark : backgroundLight"
+      v-else
+    />
     <div style="flex-wrap: wrap" class="d-flex justify-center">
       <div class="pa-3">
         <v-container class="py-sm-3 py-0">
           <v-row>
             <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 pt-0 pb-3">
               <v-card
-                :width="$vuetify.breakpoint.width - 24 > 800 ? '800px' : $vuetify.breakpoint.width - 24 + 'px'"
+                :width="
+                  $vuetify.breakpoint.width - 24 > 800
+                    ? '800px'
+                    : $vuetify.breakpoint.width - 24 + 'px'
+                "
               >
               </v-card>
             </v-col>
           </v-row>
           <v-row>
             <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 py-0">
-              <div v-if="global.userProfile.is_admin || global.userProfile.is_community_admin">
+              <div
+                v-if="
+                  global.userProfile.is_admin ||
+                  global.userProfile.is_community_admin
+                "
+              >
                 <ManageCard />
-              </div>              
+              </div>
             </v-col>
           </v-row>
           <v-row>
@@ -46,17 +58,16 @@
 </template>
 
 <script>
-import BackgroundImage from "@/components/teachers/detail/BackgroundImage";
-import CommentCard from "@/components/users/comment/CommentCard";
-import ImageLoader from "@/components/teachers/loader/ImageLoader";
-import CommentLoader from "@/components/teachers/loader/CommentLoader";
-import ManageCard from "@/components/courses/ManageCard";
-import Nothing from "@/components/global/Nothing"
-import backgroundDark from "@/assets/user-background-dark.svg";
-import backgroundLight from "@/assets/user-background-light.svg";
+import BackgroundImage from '@/components/teachers/detail/BackgroundImage';
+import CommentCard from '@/components/users/comment/CommentCard';
+import ImageLoader from '@/components/teachers/loader/ImageLoader';
+import CommentLoader from '@/components/teachers/loader/CommentLoader';
+import ManageCard from '@/components/courses/ManageCard';
+import Nothing from '@/components/global/Nothing';
+import backgroundDark from '@/assets/user-background-dark.svg';
+import backgroundLight from '@/assets/user-background-light.svg';
 import useCommentRecent from '@/composables/courses/comment/useCommentRecent';
-import { provide } from "vue";
-
+import { provide } from 'vue';
 
 export default {
   components: {
@@ -65,13 +76,13 @@ export default {
     ImageLoader,
     CommentLoader,
     Nothing,
-    ManageCard
+    ManageCard,
   },
   setup() {
     const { commentText, status, global } = useCommentRecent();
-    provide("courseCommentText", commentText);
+    provide('courseCommentText', commentText);
     // console.log(global)
-    return { commentText, status, global ,backgroundDark, backgroundLight };
+    return { commentText, status, global, backgroundDark, backgroundLight };
   },
   data() {
     return {
@@ -79,7 +90,7 @@ export default {
     };
   },
   mounted() {
-    document.addEventListener("scroll", () => {
+    document.addEventListener('scroll', () => {
       this.scrollTop = document.documentElement.scrollTop;
     });
   },
@@ -89,15 +100,15 @@ export default {
         return {};
       } else if (this.scrollTop <= 40) {
         return {
-          transform: "translate(0, -160px)",
+          transform: 'translate(0, -160px)',
         };
       } else {
         return {
-          position: "fixed",
-          top: "90px",
+          position: 'fixed',
+          top: '90px',
         };
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/ResetPasswordActive.vue b/src/views/ResetPasswordActive.vue
index fc3330c..0c6b573 100644
--- a/src/views/ResetPasswordActive.vue
+++ b/src/views/ResetPasswordActive.vue
@@ -1,273 +1,293 @@
-<template>
-  <div>
-    <div v-if="$vuetify.breakpoint.xsOnly">
-      <div class="main-card" style="min-width: 300px">
-        <div class="d-flex justify-center">
-          <div v-if="!status.inputFinished"
-            class="loading-container-mobile d-flex justify-center"
-          >
-            <div class="d-flex justify-center flex-column">
-              <div class="d-flex justify-center flex-column">
-                <v-icon size="128">
-                  {{ statics.icons.mdiKeyVariant }}
-                </v-icon>   
-              </div> 
-            </div> 
-          </div>           
-          <div v-else-if="status.loading"
-            class="loading-container-mobile d-flex justify-center"
-          >
-            <div class="d-flex justify-center flex-column">
-              <v-progress-circular 
-                indeterminate 
-                size="128"
-                width="8"
-                color="primary"
-              ></v-progress-circular>
-            </div> 
-          </div> 
-          <v-icon v-else-if="status.errorMessage == ''" size="160" color="success">
-            {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
-          </v-icon>
-          <v-icon v-else size="160" color="error">
-            {{ statics.icons.mdiCloseCircleOutline }}
-          </v-icon>
-        </div>
-        <div>
-          <div v-if="!status.inputFinished">
-            <div class="text-h5 pt-6 d-sm-block d-flex justify-center">
-              <div>重置密码</div>
-            </div>
-            <!-- <div>
-              <v-input 
-                width="0" 
-                :value="userData.email" 
-                readonly 
-                hide-details
-              ></v-input>
-            </div>             -->
-            <v-form v-model="status.passwordFormValid" @submit="$event.preventDefault(), doResetPasswordActive()">
-              <v-text-field
-                v-model="userData.password"
-                :type="status.passwordVisible ? 'text' : 'password'"
-                :rules="[formRules.required, formRules.password]"
-                ref="passwordTextField"
-                :append-icon="
-                  status.passwordVisible
-                    ? statics.icons.mdiEyeOff
-                    : statics.icons.mdiEye
-                "
-                @click:append="
-                  status.passwordVisible = !status.passwordVisible
-                "
-              ></v-text-field>
-            </v-form>                  
-          </div>          
-          <div v-else-if="status.loading">
-            <div class="text-h4 pt-6 text-center">正在加载中...</div>
-            <div class="pt-6 word-wrap text-center">
-              您的密码即将完成重置，请稍等。
-            </div>
-          </div>
-          <div v-else-if="status.errorMessage == ''">
-            <div class="text-h4 pt-6 text-center">密码重置成功!</div>
-            <div class="pt-6 word-wrap text-center">
-              您的密码已经重置成功，感谢您使用本系统。
-            </div>
-          </div>
-          <div v-else>
-            <div class="text-h4 pt-6 text-center">发生错误!</div>
-            <div class="pt-6 word-wrap text-center">
-              {{ status.errorMessage }}，请稍后重试。
-            </div>
-          </div>
-          <div v-if="!status.loading" class="d-flex justify-center pt-16">
-            <v-btn
-              width="90px"
-              elevation="1"
-              color="primary"
-              @click="doResetPasswordActive()"
-              v-if="!status.inputFinished"
-            >
-              下一步
-            </v-btn>                
-            <v-btn
-              width="90px"
-              elevation="1"
-              color="primary"
-              @click="$router.push('/')"
-              v-else
-            >
-              返回首页
-            </v-btn>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      :style="{ background: $vuetify.theme.isDark ? '' : '#f9f9f9', 'min-height': '100%' }"
-      v-else
-    >
-      <v-sheet
-        :color="$vuetify.theme.isDark ? statics.backgroundDark : statics.backgroundLight"
-        :height="$vuetify.breakpoint.xsOnly ? 91 : '40vh'"
-      ></v-sheet>
-      <v-fade-transition>
-        <div class="main-card">
-          <v-card
-            width="600px"
-            height="400px"
-            elevation="2"
-            class="d-flex justify-space-between flex-column"
-          >
-            <div class="px-16 pt-16 d-flex">
-              <div style="height: 100%">
-                <div v-if="!status.inputFinished"
-                  class="loading-container d-flex justify-center"
-                >
-                  <div class="d-flex justify-center flex-column">
-                    <v-icon size="100">
-                      {{ statics.icons.mdiKeyVariant }}
-                    </v-icon>   
-                  </div> 
-                </div>                               
-                <div v-else-if="status.loading"
-                  class="loading-container d-flex justify-center"
-                >
-                  <div class="d-flex justify-center flex-column">
-                    <v-progress-circular 
-                      indeterminate 
-                      size="100"
-                      width="8"
-                      color="primary"
-                    ></v-progress-circular>
-                  </div> 
-                </div>              
-                <v-icon
-                  v-else-if="status.errorMessage == ''"
-                  size="128"
-                  color="success"
-                >
-                  {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
-                </v-icon>
-                <v-icon v-else size="128" color="error">
-                  {{ statics.icons.mdiCloseCircleOutline }}
-                </v-icon>
-              </div>
-              <div
-                class="pl-6 d-flex justify-space-between flex-column"
-                style="max-width: 344px; height: 100%; width: 100%"
-              >
-                <div v-if="!status.inputFinished">
-                  <div class="text-h5 pt-6">重置密码</div>
-                  <v-form v-model="status.passwordFormValid" @submit="$event.preventDefault(), doResetPasswordActive()">
-                    <v-text-field
-                      class="mr-4"
-                      v-model="userData.password"
-                      :type="status.passwordVisible ? 'text' : 'password'"
-                      :rules="[formRules.required, formRules.password]"
-                      ref="passwordTextField"
-                      :append-icon="
-                        status.passwordVisible
-                          ? statics.icons.mdiEyeOff
-                          : statics.icons.mdiEye
-                      "
-                      @click:append="
-                        status.passwordVisible = !status.passwordVisible
-                      "
-                    ></v-text-field>
-                  </v-form>                  
-                </div>
-                <div v-else-if="status.loading">
-                  <div class="text-h4 pt-6">正在加载中...</div>
-                  <div class="pt-6 word-wrap">
-                    您的密码即将完成重置，请稍等。
-                  </div>
-                </div>            
-                <div v-else-if="status.errorMessage == ''">
-                  <div class="text-h4 pt-6">密码重置成功!</div>
-                  <div class="pt-6 word-wrap">
-                    您的密码已经重置成功，感谢您使用本系统。
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="text-h4 pt-6">发生错误!</div>
-                  <div class="pt-6 word-wrap">
-                    {{ status.errorMessage }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="px-16 pb-16 d-flex justify-end">
-              <div class="d-flex justify-end pb-6 pr-4">
-                <v-btn
-                  width="90px"
-                  elevation="1"
-                  color="primary"
-                  @click="doResetPasswordActive()"
-                  v-if="!status.inputFinished"
-                >
-                  下一步
-                </v-btn>                
-                <v-btn
-                  width="90px"
-                  elevation="1"
-                  color="primary"
-                  @click="$router.push('/')"
-                  v-else
-                >
-                  返回首页
-                </v-btn>
-              </div>
-            </div>
-          </v-card>
-        </div>
-      </v-fade-transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import useResetPasswordActive from "@/composables/users/useResetPasswordActive";
-import useForms from "@/composables/users/forms/useForms";
-import useAfterRender from "@/composables/global/useAfterRender";
-
-export default {
-  setup() {
-    const { formRules } = useForms();
-    const { statics, status, userData, doResetPasswordActive } = useResetPasswordActive();
-
-    return { statics, status, userData, doResetPasswordActive, formRules };
-  },
-  mounted() {
-    useAfterRender(() => {
-      this.$refs.passwordTextField.focus();
-    });
-  }
-};
-</script>
-
-<style scoped>
-.main-card {
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  transform: translate(-50%, -50%);
-}
-
-.word-wrap {
-  word-wrap: break-word;
-  word-break: break-all;
-  overflow: hidden;
-}
-
-.loading-container {
-  width: 128px;
-  height: 128px;
-}
-
-.loading-container-mobile {
-  width: 160px;
-  height: 160px;
-}
-</style>
+<template>
+  <div>
+    <div v-if="$vuetify.breakpoint.xsOnly">
+      <div class="main-card" style="min-width: 300px">
+        <div class="d-flex justify-center">
+          <div
+            v-if="!status.inputFinished"
+            class="loading-container-mobile d-flex justify-center"
+          >
+            <div class="d-flex justify-center flex-column">
+              <div class="d-flex justify-center flex-column">
+                <v-icon size="128">
+                  {{ statics.icons.mdiKeyVariant }}
+                </v-icon>
+              </div>
+            </div>
+          </div>
+          <div
+            v-else-if="status.loading"
+            class="loading-container-mobile d-flex justify-center"
+          >
+            <div class="d-flex justify-center flex-column">
+              <v-progress-circular
+                indeterminate
+                size="128"
+                width="8"
+                color="primary"
+              ></v-progress-circular>
+            </div>
+          </div>
+          <v-icon
+            v-else-if="status.errorMessage == ''"
+            size="160"
+            color="success"
+          >
+            {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
+          </v-icon>
+          <v-icon v-else size="160" color="error">
+            {{ statics.icons.mdiCloseCircleOutline }}
+          </v-icon>
+        </div>
+        <div>
+          <div v-if="!status.inputFinished">
+            <div class="text-h5 pt-6 d-sm-block d-flex justify-center">
+              <div>重置密码</div>
+            </div>
+            <!-- <div>
+              <v-input 
+                width="0" 
+                :value="userData.email" 
+                readonly 
+                hide-details
+              ></v-input>
+            </div>             -->
+            <v-form
+              v-model="status.passwordFormValid"
+              @submit="$event.preventDefault(), doResetPasswordActive()"
+            >
+              <v-text-field
+                v-model="userData.password"
+                :type="status.passwordVisible ? 'text' : 'password'"
+                :rules="[formRules.required, formRules.password]"
+                ref="passwordTextField"
+                :append-icon="
+                  status.passwordVisible
+                    ? statics.icons.mdiEyeOff
+                    : statics.icons.mdiEye
+                "
+                @click:append="status.passwordVisible = !status.passwordVisible"
+              ></v-text-field>
+            </v-form>
+          </div>
+          <div v-else-if="status.loading">
+            <div class="text-h4 pt-6 text-center">正在加载中...</div>
+            <div class="pt-6 word-wrap text-center">
+              您的密码即将完成重置，请稍等。
+            </div>
+          </div>
+          <div v-else-if="status.errorMessage == ''">
+            <div class="text-h4 pt-6 text-center">密码重置成功!</div>
+            <div class="pt-6 word-wrap text-center">
+              您的密码已经重置成功，感谢您使用本系统。
+            </div>
+          </div>
+          <div v-else>
+            <div class="text-h4 pt-6 text-center">发生错误!</div>
+            <div class="pt-6 word-wrap text-center">
+              {{ status.errorMessage }}，请稍后重试。
+            </div>
+          </div>
+          <div v-if="!status.loading" class="d-flex justify-center pt-16">
+            <v-btn
+              width="90px"
+              elevation="1"
+              color="primary"
+              @click="doResetPasswordActive()"
+              v-if="!status.inputFinished"
+            >
+              下一步
+            </v-btn>
+            <v-btn
+              width="90px"
+              elevation="1"
+              color="primary"
+              @click="$router.push('/')"
+              v-else
+            >
+              返回首页
+            </v-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      :style="{
+        background: $vuetify.theme.isDark ? '' : '#f9f9f9',
+        'min-height': '100%',
+      }"
+      v-else
+    >
+      <v-sheet
+        :color="
+          $vuetify.theme.isDark
+            ? statics.backgroundDark
+            : statics.backgroundLight
+        "
+        :height="$vuetify.breakpoint.xsOnly ? 91 : '40vh'"
+      ></v-sheet>
+      <v-fade-transition>
+        <div class="main-card">
+          <v-card
+            width="600px"
+            height="400px"
+            elevation="2"
+            class="d-flex justify-space-between flex-column"
+          >
+            <div class="px-16 pt-16 d-flex">
+              <div style="height: 100%">
+                <div
+                  v-if="!status.inputFinished"
+                  class="loading-container d-flex justify-center"
+                >
+                  <div class="d-flex justify-center flex-column">
+                    <v-icon size="100">
+                      {{ statics.icons.mdiKeyVariant }}
+                    </v-icon>
+                  </div>
+                </div>
+                <div
+                  v-else-if="status.loading"
+                  class="loading-container d-flex justify-center"
+                >
+                  <div class="d-flex justify-center flex-column">
+                    <v-progress-circular
+                      indeterminate
+                      size="100"
+                      width="8"
+                      color="primary"
+                    ></v-progress-circular>
+                  </div>
+                </div>
+                <v-icon
+                  v-else-if="status.errorMessage == ''"
+                  size="128"
+                  color="success"
+                >
+                  {{ statics.icons.mdiCheckboxMarkedCircleOutline }}
+                </v-icon>
+                <v-icon v-else size="128" color="error">
+                  {{ statics.icons.mdiCloseCircleOutline }}
+                </v-icon>
+              </div>
+              <div
+                class="pl-6 d-flex justify-space-between flex-column"
+                style="max-width: 344px; height: 100%; width: 100%"
+              >
+                <div v-if="!status.inputFinished">
+                  <div class="text-h5 pt-6">重置密码</div>
+                  <v-form
+                    v-model="status.passwordFormValid"
+                    @submit="$event.preventDefault(), doResetPasswordActive()"
+                  >
+                    <v-text-field
+                      class="mr-4"
+                      v-model="userData.password"
+                      :type="status.passwordVisible ? 'text' : 'password'"
+                      :rules="[formRules.required, formRules.password]"
+                      ref="passwordTextField"
+                      :append-icon="
+                        status.passwordVisible
+                          ? statics.icons.mdiEyeOff
+                          : statics.icons.mdiEye
+                      "
+                      @click:append="
+                        status.passwordVisible = !status.passwordVisible
+                      "
+                    ></v-text-field>
+                  </v-form>
+                </div>
+                <div v-else-if="status.loading">
+                  <div class="text-h4 pt-6">正在加载中...</div>
+                  <div class="pt-6 word-wrap">
+                    您的密码即将完成重置，请稍等。
+                  </div>
+                </div>
+                <div v-else-if="status.errorMessage == ''">
+                  <div class="text-h4 pt-6">密码重置成功!</div>
+                  <div class="pt-6 word-wrap">
+                    您的密码已经重置成功，感谢您使用本系统。
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="text-h4 pt-6">发生错误!</div>
+                  <div class="pt-6 word-wrap">
+                    {{ status.errorMessage }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="px-16 pb-16 d-flex justify-end">
+              <div class="d-flex justify-end pb-6 pr-4">
+                <v-btn
+                  width="90px"
+                  elevation="1"
+                  color="primary"
+                  @click="doResetPasswordActive()"
+                  v-if="!status.inputFinished"
+                >
+                  下一步
+                </v-btn>
+                <v-btn
+                  width="90px"
+                  elevation="1"
+                  color="primary"
+                  @click="$router.push('/')"
+                  v-else
+                >
+                  返回首页
+                </v-btn>
+              </div>
+            </div>
+          </v-card>
+        </div>
+      </v-fade-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import useResetPasswordActive from '@/composables/users/useResetPasswordActive';
+import useForms from '@/composables/users/forms/useForms';
+import useAfterRender from '@/composables/global/useAfterRender';
+
+export default {
+  setup() {
+    const { formRules } = useForms();
+    const { statics, status, userData, doResetPasswordActive } =
+      useResetPasswordActive();
+
+    return { statics, status, userData, doResetPasswordActive, formRules };
+  },
+  mounted() {
+    useAfterRender(() => {
+      this.$refs.passwordTextField.focus();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.main-card {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+}
+
+.word-wrap {
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.loading-container {
+  width: 128px;
+  height: 128px;
+}
+
+.loading-container-mobile {
+  width: 160px;
+  height: 160px;
+}
+</style>
diff --git a/src/views/TeacherAll.vue b/src/views/TeacherAll.vue
index 311ec38..fa55535 100644
--- a/src/views/TeacherAll.vue
+++ b/src/views/TeacherAll.vue
@@ -1,8 +1,7 @@
-<template>
-  <v-container></v-container>
-</template>
-
-<script>
-export default {
-}
-</script>
\ No newline at end of file
+<template>
+  <v-container></v-container>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/src/views/TeacherDetails.vue b/src/views/TeacherDetails.vue
index 8dc6ac1..eeecc8e 100644
--- a/src/views/TeacherDetails.vue
+++ b/src/views/TeacherDetails.vue
@@ -1,202 +1,209 @@
-<template>
-  <div style="min-height: 100%">
-    <ImageLoader v-if="status.loading" />
-    <BackgroundImage
-      :color="
-        $vuetify.theme.isDark
-          ? 'grey darken-3'
-          : instituteInfo[teacherDetail.institute].color
-      "
-      v-else
-    />
-    <div style="flex-wrap: wrap" class="d-flex justify-center">
-      <div class="pa-lg-3">
-        <div
-          :style="{ width: $vuetify.breakpoint.mdAndDown ? '100vw' : '360px' }"
-        >
-          <v-card
-            :style="adoptiveCardPosition"
-            flat
-            outlined
-            :width="$vuetify.breakpoint.mdAndDown ? '100vw' : '360px'"
-            class="py-6 px-7"
-          >
-            <DetailLoader v-if="status.loading" />
-            <Detail v-else />
-            <StatisticLoader v-if="status.loading" class="pt-4" />
-            <StatisticCard v-else />
-          </v-card>
-        </div>
-      </div>
-      <div
-        class="pa-3 px-0"
-        :style="{
-          width: this.$vuetify.breakpoint.smAndDown
-            ? ''
-            : this.adoptiveCardNumber * 428 + 'px',
-        }"
-      >
-        <div class="py-sm-3 py-0">
-          <div>
-            <div class="px-0">
-              <div
-                :style="{
-                  width: this.$vuetify.breakpoint.smAndDown
-                    ? ''
-                    : this.adoptiveCardNumber * 428 + 'px',
-                }"
-              >
-                <div class="d-flex justify-center">
-                  <div
-                    :style="{ width: adoptiveCardContainerWidth + 24 + 'px' }"
-                  >
-                    <div
-                      class="d-flex flex-wrap justify-start"
-                      v-if="status.loading"
-                    >
-                      <div
-                        v-for="index in adoptiveCardNumber * 2"
-                        :key="index"
-                        class="d-flex"
-                      >
-                        <CourseLoader
-                          :width="adoptiveCardWidth + 'px'"
-                          height="303px"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      v-else-if="
-                        courseText.filter((course) =>
-                          courseFilterStatus.selected.some(
-                            (school) => school === course.institute
-                          )
-                        ).length === 0
-                      "
-                    >
-                      <Nothing class="py-16" />
-                    </div>
-                    <div class="d-flex flex-wrap justify-start" v-else>
-                      <div
-                        v-for="(course, index) in courseText"
-                        :key="course.id"
-                        class="d-flex"
-                      >
-                        <v-fade-transition>
-                          <CourseCard
-                            :course="course"
-                            :width="adoptiveCardWidth + 'px'"
-                            v-if="
-                              courseFilterStatus.selected.some(
-                                (school) => school === course.institute
-                              )
-                            "
-                          />
-                        </v-fade-transition>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Detail from "@/components/teachers/detail/Detail";
-import BackgroundImage from "@/components/teachers/detail/BackgroundImage";
-import CourseCard from "@/components/teachers/course/CourseCard";
-import StatisticCard from "@/components/teachers/course/StatisticCard";
-import useTeacherDetail from "@/composables/teachers/useTeacherDetail";
-import CourseLoader from "@/components/teachers/loader/CourseLoader";
-import DetailLoader from "@/components/teachers/loader/DetailLoader";
-import StatisticLoader from "@/components/teachers/loader/StatisticLoader";
-import ImageLoader from "@/components/teachers/loader/ImageLoader";
-import Nothing from "@/components/global/Nothing";
-import { instituteInfo } from "@/composables/global/useStaticData";
-
-export default {
-  components: {
-    Detail,
-    Comment,
-    BackgroundImage,
-    StatisticCard,
-    CourseCard,
-    CourseLoader,
-    DetailLoader,
-    StatisticLoader,
-    ImageLoader,
-    Nothing,
-  },
-  setup() {
-    const { courseText, status, courseFilterStatus, teacherDetail } = useTeacherDetail();
-    return { courseText, status, courseFilterStatus, instituteInfo, teacherDetail };
-  },
-  data() {
-    return {
-      scrollTop: document.documentElement.scrollTop,
-    };
-  },
-  computed: {
-    adoptiveCardPosition() {
-      if (this.$vuetify.breakpoint.mdAndDown) {
-        return {};
-      } else if (this.scrollTop <= 40) {
-        return {
-          transform: "translate(0, -160px)",
-        };
-      } else {
-        return {
-          position: "fixed",
-          top: "90px",
-        };
-      }
-    },
-
-    adoptiveCardWidth() {
-      if (this.$vuetify.breakpoint.mdAndDown) {
-        if (this.$vuetify.breakpoint.xsOnly) {
-          return this.$vuetify.breakpoint.width - 24;
-        } else if (404 * 2 + 80 > this.$vuetify.breakpoint.width) {
-          return (this.$vuetify.breakpoint.width - 80) / 2;
-        } else {
-          return 404;
-        }
-      } else {
-        return 404;
-      }
-    },
-
-    adoptiveCardNumber() {
-      if (this.$vuetify.breakpoint.xsOnly) {
-        return 1;
-      } else if (this.$vuetify.breakpoint.mdAndDown) {
-        return 2;
-      } else {
-        return Math.min(
-          Math.floor((this.$vuetify.breakpoint.width - 428) / 428),
-          3
-        );
-      }
-    },
-
-    adoptiveCardContainerWidth() {
-      if (this.$vuetify.breakpoint.xsOnly) {
-        return this.$vuetify.breakpoint.width - 24;
-      } else if (this.$vuetify.breakpoint.smOnly) {
-        return this.adoptiveCardWidth * 2 + 24;
-      } else {
-        return this.adoptiveCardNumber * 428 - 24;
-      }
-    },
-  },
-  mounted() {
-    document.addEventListener("scroll", () => {
-      this.scrollTop = document.documentElement.scrollTop;
-    });
-  },
-};
-</script>
+<template>
+  <div style="min-height: 100%">
+    <ImageLoader v-if="status.loading" />
+    <BackgroundImage
+      :color="
+        $vuetify.theme.isDark
+          ? 'grey darken-3'
+          : instituteInfo[teacherDetail.institute].color
+      "
+      v-else
+    />
+    <div style="flex-wrap: wrap" class="d-flex justify-center">
+      <div class="pa-lg-3">
+        <div
+          :style="{ width: $vuetify.breakpoint.mdAndDown ? '100vw' : '360px' }"
+        >
+          <v-card
+            :style="adoptiveCardPosition"
+            flat
+            outlined
+            :width="$vuetify.breakpoint.mdAndDown ? '100vw' : '360px'"
+            class="py-6 px-7"
+          >
+            <DetailLoader v-if="status.loading" />
+            <Detail v-else />
+            <StatisticLoader v-if="status.loading" class="pt-4" />
+            <StatisticCard v-else />
+          </v-card>
+        </div>
+      </div>
+      <div
+        class="pa-3 px-0"
+        :style="{
+          width: this.$vuetify.breakpoint.smAndDown
+            ? ''
+            : this.adoptiveCardNumber * 428 + 'px',
+        }"
+      >
+        <div class="py-sm-3 py-0">
+          <div>
+            <div class="px-0">
+              <div
+                :style="{
+                  width: this.$vuetify.breakpoint.smAndDown
+                    ? ''
+                    : this.adoptiveCardNumber * 428 + 'px',
+                }"
+              >
+                <div class="d-flex justify-center">
+                  <div
+                    :style="{ width: adoptiveCardContainerWidth + 24 + 'px' }"
+                  >
+                    <div
+                      class="d-flex flex-wrap justify-start"
+                      v-if="status.loading"
+                    >
+                      <div
+                        v-for="index in adoptiveCardNumber * 2"
+                        :key="index"
+                        class="d-flex"
+                      >
+                        <CourseLoader
+                          :width="adoptiveCardWidth + 'px'"
+                          height="303px"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      v-else-if="
+                        courseText.filter((course) =>
+                          courseFilterStatus.selected.some(
+                            (school) => school === course.institute,
+                          ),
+                        ).length === 0
+                      "
+                    >
+                      <Nothing class="py-16" />
+                    </div>
+                    <div class="d-flex flex-wrap justify-start" v-else>
+                      <div
+                        v-for="(course, index) in courseText"
+                        :key="course.id"
+                        class="d-flex"
+                      >
+                        <v-fade-transition>
+                          <CourseCard
+                            :course="course"
+                            :width="adoptiveCardWidth + 'px'"
+                            v-if="
+                              courseFilterStatus.selected.some(
+                                (school) => school === course.institute,
+                              )
+                            "
+                          />
+                        </v-fade-transition>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Detail from '@/components/teachers/detail/Detail';
+import BackgroundImage from '@/components/teachers/detail/BackgroundImage';
+import CourseCard from '@/components/teachers/course/CourseCard';
+import StatisticCard from '@/components/teachers/course/StatisticCard';
+import useTeacherDetail from '@/composables/teachers/useTeacherDetail';
+import CourseLoader from '@/components/teachers/loader/CourseLoader';
+import DetailLoader from '@/components/teachers/loader/DetailLoader';
+import StatisticLoader from '@/components/teachers/loader/StatisticLoader';
+import ImageLoader from '@/components/teachers/loader/ImageLoader';
+import Nothing from '@/components/global/Nothing';
+import { instituteInfo } from '@/composables/global/useStaticData';
+
+export default {
+  components: {
+    Detail,
+    Comment,
+    BackgroundImage,
+    StatisticCard,
+    CourseCard,
+    CourseLoader,
+    DetailLoader,
+    StatisticLoader,
+    ImageLoader,
+    Nothing,
+  },
+  setup() {
+    const { courseText, status, courseFilterStatus, teacherDetail } =
+      useTeacherDetail();
+    return {
+      courseText,
+      status,
+      courseFilterStatus,
+      instituteInfo,
+      teacherDetail,
+    };
+  },
+  data() {
+    return {
+      scrollTop: document.documentElement.scrollTop,
+    };
+  },
+  computed: {
+    adoptiveCardPosition() {
+      if (this.$vuetify.breakpoint.mdAndDown) {
+        return {};
+      } else if (this.scrollTop <= 40) {
+        return {
+          transform: 'translate(0, -160px)',
+        };
+      } else {
+        return {
+          position: 'fixed',
+          top: '90px',
+        };
+      }
+    },
+
+    adoptiveCardWidth() {
+      if (this.$vuetify.breakpoint.mdAndDown) {
+        if (this.$vuetify.breakpoint.xsOnly) {
+          return this.$vuetify.breakpoint.width - 24;
+        } else if (404 * 2 + 80 > this.$vuetify.breakpoint.width) {
+          return (this.$vuetify.breakpoint.width - 80) / 2;
+        } else {
+          return 404;
+        }
+      } else {
+        return 404;
+      }
+    },
+
+    adoptiveCardNumber() {
+      if (this.$vuetify.breakpoint.xsOnly) {
+        return 1;
+      } else if (this.$vuetify.breakpoint.mdAndDown) {
+        return 2;
+      } else {
+        return Math.min(
+          Math.floor((this.$vuetify.breakpoint.width - 428) / 428),
+          3,
+        );
+      }
+    },
+
+    adoptiveCardContainerWidth() {
+      if (this.$vuetify.breakpoint.xsOnly) {
+        return this.$vuetify.breakpoint.width - 24;
+      } else if (this.$vuetify.breakpoint.smOnly) {
+        return this.adoptiveCardWidth * 2 + 24;
+      } else {
+        return this.adoptiveCardNumber * 428 - 24;
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('scroll', () => {
+      this.scrollTop = document.documentElement.scrollTop;
+    });
+  },
+};
+</script>
diff --git a/src/views/User.vue b/src/views/User.vue
index 8478871..80ffe2d 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,129 +1,154 @@
-<template>
-  <div style="min-height: 100%">  
-    <ImageLoader v-if="status.profileLoading || status.commentLoading" />
-    <BackgroundImage :src="$vuetify.theme.dark ? backgroundDark : backgroundLight" v-else />
-    <div style="flex-wrap: wrap" class="d-flex justify-center">
-      <div class="pa-lg-3 pb-3">
-        <div :style="{ width: $vuetify.breakpoint.mdAndDown ? '100vw' : '360px' }">
-          <v-card
-            :style="adoptiveCardPosition"
-            flat
-            outlined
-            :width="$vuetify.breakpoint.mdAndDown ? '100vw' : '360px'"
-            class="py-6 px-7"
-          >
-            <DetailLoader v-if="status.profileLoading || status.commentLoading" />
-            <Profile v-else />
-            <StatisticLoader v-if="status.profileLoading || status.commentLoading" />
-            <StatisticCard v-else />
-          </v-card>
-        </div>
-      </div>
-      <div class="pa-3">
-        <v-container class="py-sm-3 py-0">
-          <v-row>
-            <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 pt-0 pb-3">
-              <SelectLoader 
-                :width="$vuetify.breakpoint.width - 24 > 800 ? '800px' : $vuetify.breakpoint.width - 24 + 'px'"
-                v-if="status.profileLoading || status.commentLoading" 
-              />
-              <SelectBar 
-                :width="$vuetify.breakpoint.width - 24 > 800 ? '800px' : $vuetify.breakpoint.width - 24 + 'px'"
-                :key-items="sortStatics.sortKeyItem"
-                :order-items="sortStatics.orderItem[commentFilterStatus.sortKey]"
-                :sort-key.sync="commentFilterStatus.sortKey"
-                :sort-order.sync="commentFilterStatus.order"
-                v-else 
-              />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 pt-sm-3 pt-0">
-              <div v-if="status.profileLoading || status.commentLoading">
-                <div v-for="index in 2" :key="index">
-                  <CommentLoader height="290px" />
-                </div> 
-              </div>
-              <div v-else-if="commentText.length === 0">
-                <Nothing class="py-16" />
-              </div>
-              <div v-else>                
-                <div v-for="(comment, index) in commentText" :key="comment.id">       
-                  <v-fade-transition>
-                    <CommentCard :comment="comment" />
-                  </v-fade-transition>
-                </div>  
-              </div>          
-            </v-col>        
-          </v-row>
-        </v-container>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Profile from "@/components/users/profile/Profile";
-import BackgroundImage from "@/components/teachers/detail/BackgroundImage";
-import CommentCard from "@/components/users/comment/CommentCard";
-import SelectBar from "@/components/courses/all/SelectBar";
-import StatisticCard from "@/components/users/comment/StatisticCard";
-import useUser from "@/composables/users/useUser";
-import { sortStatics } from "@/composables/global/useCommentSort";
-import DetailLoader from "@/components/teachers/loader/DetailLoader"
-import SelectLoader from "@/components/teachers/loader/SelectLoader"
-import StatisticLoader from "@/components/teachers/loader/StatisticLoader"
-import ImageLoader from "@/components/teachers/loader/ImageLoader";
-import CommentLoader from "@/components/teachers/loader/CommentLoader";
-import Nothing from "@/components/global/Nothing"
-import backgroundDark from "@/assets/user-background-dark.svg";
-import backgroundLight from "@/assets/user-background-light.svg";
-
-
-export default {
-  components: {
-    Profile,
-    Comment,
-    BackgroundImage,
-    StatisticCard,
-    CommentCard,
-    SelectBar,
-    DetailLoader, 
-    SelectLoader, 
-    StatisticLoader, 
-    ImageLoader,
-    CommentLoader, 
-    Nothing
-  },
-  setup() {
-    const { commentText, commentFilterStatus, status } = useUser();
-    return { commentText, commentFilterStatus, status, sortStatics, backgroundDark, backgroundLight };
-  },
-  data() {
-    return {
-      scrollTop: document.documentElement.scrollTop,
-    };
-  },
-  mounted() {
-    document.addEventListener("scroll", () => {
-      this.scrollTop = document.documentElement.scrollTop;
-    });
-  },
-  computed: {
-    adoptiveCardPosition() {
-      if (this.$vuetify.breakpoint.mdAndDown) {
-        return {};
-      } else if (this.scrollTop <= 40) {
-        return {
-          transform: "translate(0, -160px)",
-        };
-      } else {
-        return {
-          position: "fixed",
-          top: "90px",
-        };
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div style="min-height: 100%">
+    <ImageLoader v-if="status.profileLoading || status.commentLoading" />
+    <BackgroundImage
+      :src="$vuetify.theme.dark ? backgroundDark : backgroundLight"
+      v-else
+    />
+    <div style="flex-wrap: wrap" class="d-flex justify-center">
+      <div class="pa-lg-3 pb-3">
+        <div
+          :style="{ width: $vuetify.breakpoint.mdAndDown ? '100vw' : '360px' }"
+        >
+          <v-card
+            :style="adoptiveCardPosition"
+            flat
+            outlined
+            :width="$vuetify.breakpoint.mdAndDown ? '100vw' : '360px'"
+            class="py-6 px-7"
+          >
+            <DetailLoader
+              v-if="status.profileLoading || status.commentLoading"
+            />
+            <Profile v-else />
+            <StatisticLoader
+              v-if="status.profileLoading || status.commentLoading"
+            />
+            <StatisticCard v-else />
+          </v-card>
+        </div>
+      </div>
+      <div class="pa-3">
+        <v-container class="py-sm-3 py-0">
+          <v-row>
+            <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 pt-0 pb-3">
+              <SelectLoader
+                :width="
+                  $vuetify.breakpoint.width - 24 > 800
+                    ? '800px'
+                    : $vuetify.breakpoint.width - 24 + 'px'
+                "
+                v-if="status.profileLoading || status.commentLoading"
+              />
+              <SelectBar
+                :width="
+                  $vuetify.breakpoint.width - 24 > 800
+                    ? '800px'
+                    : $vuetify.breakpoint.width - 24 + 'px'
+                "
+                :key-items="sortStatics.sortKeyItem"
+                :order-items="
+                  sortStatics.orderItem[commentFilterStatus.sortKey]
+                "
+                :sort-key.sync="commentFilterStatus.sortKey"
+                :sort-order.sync="commentFilterStatus.order"
+                v-else
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col class="pl-sm-0 pr-lg-3 pr-0 pl-0 pr-0 pt-sm-3 pt-0">
+              <div v-if="status.profileLoading || status.commentLoading">
+                <div v-for="index in 2" :key="index">
+                  <CommentLoader height="290px" />
+                </div>
+              </div>
+              <div v-else-if="commentText.length === 0">
+                <Nothing class="py-16" />
+              </div>
+              <div v-else>
+                <div v-for="(comment, index) in commentText" :key="comment.id">
+                  <v-fade-transition>
+                    <CommentCard :comment="comment" />
+                  </v-fade-transition>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Profile from '@/components/users/profile/Profile';
+import BackgroundImage from '@/components/teachers/detail/BackgroundImage';
+import CommentCard from '@/components/users/comment/CommentCard';
+import SelectBar from '@/components/courses/all/SelectBar';
+import StatisticCard from '@/components/users/comment/StatisticCard';
+import useUser from '@/composables/users/useUser';
+import { sortStatics } from '@/composables/global/useCommentSort';
+import DetailLoader from '@/components/teachers/loader/DetailLoader';
+import SelectLoader from '@/components/teachers/loader/SelectLoader';
+import StatisticLoader from '@/components/teachers/loader/StatisticLoader';
+import ImageLoader from '@/components/teachers/loader/ImageLoader';
+import CommentLoader from '@/components/teachers/loader/CommentLoader';
+import Nothing from '@/components/global/Nothing';
+import backgroundDark from '@/assets/user-background-dark.svg';
+import backgroundLight from '@/assets/user-background-light.svg';
+
+export default {
+  components: {
+    Profile,
+    Comment,
+    BackgroundImage,
+    StatisticCard,
+    CommentCard,
+    SelectBar,
+    DetailLoader,
+    SelectLoader,
+    StatisticLoader,
+    ImageLoader,
+    CommentLoader,
+    Nothing,
+  },
+  setup() {
+    const { commentText, commentFilterStatus, status } = useUser();
+    return {
+      commentText,
+      commentFilterStatus,
+      status,
+      sortStatics,
+      backgroundDark,
+      backgroundLight,
+    };
+  },
+  data() {
+    return {
+      scrollTop: document.documentElement.scrollTop,
+    };
+  },
+  mounted() {
+    document.addEventListener('scroll', () => {
+      this.scrollTop = document.documentElement.scrollTop;
+    });
+  },
+  computed: {
+    adoptiveCardPosition() {
+      if (this.$vuetify.breakpoint.mdAndDown) {
+        return {};
+      } else if (this.scrollTop <= 40) {
+        return {
+          transform: 'translate(0, -160px)',
+        };
+      } else {
+        return {
+          position: 'fixed',
+          top: '90px',
+        };
+      }
+    },
+  },
+};
+</script>

From caa80f841eedb0b47534eb31f6e04b423f79ad51 Mon Sep 17 00:00:00 2001
From: longxiaokong <david060708@126.com>
Date: Sat, 29 Jun 2024 16:30:21 +0800
Subject: [PATCH 3/3] local added usemenubar

---
 src/composables/global/useMenuBar.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100755 src/composables/global/useMenuBar.js

diff --git a/src/composables/global/useMenuBar.js b/src/composables/global/useMenuBar.js
new file mode 100755
index 0000000..16b2495
--- /dev/null
+++ b/src/composables/global/useMenuBar.js
@@ -0,0 +1,21 @@
+import { inject, onMounted, onUnmounted } from 'vue';
+
+export default () => {
+  const menuBarStatus = inject('menu');
+
+  onMounted(() => {
+    updateMenuStatus();
+    window.addEventListener('resize', updateMenuStatus, { passive: true });
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateMenuStatus, { passive: true });
+  });
+
+  const updateMenuStatus = () => {
+    menuBarStatus.drawer =
+      window.innerWidth >= 960 ? false : menuBarStatus.drawer;
+  };
+
+  return { menuBarStatus };
+};