跟随页面动态显示title #5

src/pages/oj/App.vue

@@ -40,14 +40,17 @@
       this.getWebsiteConfig()
     },
     methods: {
-      ...mapActions(['getWebsiteConfig'])
+      ...mapActions(['getWebsiteConfig', 'changeDomTitle'])
     },
     computed: {
       ...mapState(['website'])
     },
     watch: {
-      'website' (newVal) {
-        document.title = newVal.website_name
+      'website' () {
+        this.changeDomTitle()
+      },
+      '$route' () {
+        this.changeDomTitle()
       }
     }
   }

src/pages/oj/router/routes.js

@@ -1,11 +1,20 @@
 // all routes here.
 import {
-  Home, NotFound, Announcements,
-  UserHome, Logout, About, FAQ,
-  ProblemList, Problem,
-  SubmissionList, SubmissionDetails,
-  ACMRank, OIRank,
-  ApplyResetPassword, ResetPassword
+  About,
+  ACMRank,
+  Announcements,
+  ApplyResetPassword,
+  FAQ,
+  Home,
+  Logout,
+  NotFound,
+  OIRank,
+  Problem,
+  ProblemList,
+  ResetPassword,
+  SubmissionDetails,
+  SubmissionList,
+  UserHome
 } from '../views'
 
 import * as Contest from '@oj/views/contest'
@@ -15,52 +24,62 @@ export default [
   {
     name: 'home',
     path: '/',
+    meta: {title: 'Home'},
     component: Home
   },
   {
     name: 'logout',
     path: '/logout',
+    meta: {title: 'Logout'},
     component: Logout
   },
   {
     name: 'apply-reset-password',
     path: '/apply-reset-password',
+    meta: {title: 'Apply Reset Password'},
     component: ApplyResetPassword
   },
   {
     name: 'reset-password',
     path: '/reset-password/:token',
+    meta: {title: 'Reset Password'},
     component: ResetPassword
   },
   {
     name: 'problem-list',
     path: '/problems',
+    meta: {title: 'Problem List'},
     component: ProblemList
   },
   {
     name: 'problem-details',
     path: '/problem/:problemID',
+    meta: {title: 'Problem Details'},
     component: Problem
   },
   {
     name: 'submission-list',
     path: '/status',
+    meta: {title: 'Submission List'},
     component: SubmissionList
   },
   {
     name: 'submission-details',
     path: '/status/:id/',
+    meta: {title: 'Submission Details'},
     component: SubmissionDetails
   },
   {
     name: 'contest-list',
     path: '/contests',
+    meta: {title: 'Contest List'},
     component: Contest.ContestList
   },
   {
     name: 'contest-details',
     path: '/contest/:contestID/',
     component: Contest.ContestDetails,
+    meta: {title: 'Contest Details'},
     children: [
       {
         name: 'contest-submission-list',
@@ -97,58 +116,66 @@ export default [
   {
     name: 'acm-rank',
     path: '/acm-rank',
+    meta: {title: 'ACM Rankings'},
     component: ACMRank
   },
   {
     name: 'oi-rank',
     path: '/oi-rank',
+    meta: {title: 'OI Rankings'},
     component: OIRank
   },
   {
     name: 'user-home',
     path: '/user-home',
     component: UserHome,
-    meta: {requiresAuth: true}
+    meta: {requiresAuth: true, title: 'User Home'}
   },
   {
     path: '/setting',
     component: Setting.Settings,
-    meta: {requiresAuth: true},
     children: [
       {
         name: 'default-setting',
         path: '',
+        meta: {requiresAuth: true, title: 'Default Settings'},
         component: Setting.ProfileSetting
       },
       {
         name: 'profile-setting',
         path: 'profile',
+        meta: {requiresAuth: true, title: 'Profile Settings'},
         component: Setting.ProfileSetting
       },
       {
         name: 'account-setting',
         path: 'account',
+        meta: {requiresAuth: true, title: 'Account Settings'},
         component: Setting.AccountSetting
       },
       {
         name: 'security-setting',
         path: 'security',
+        meta: {requiresAuth: true, title: 'Security Settings'},
         component: Setting.SecuritySetting
       }
     ]
   },
   {
     path: '/about',
     name: 'about',
+    meta: {title: 'About'},
     component: About
   },
   {
     path: '/faq',
     name: 'faq',
+    meta: {title: 'FAQ'},
     component: FAQ
   },
   {
     path: '*',
+    meta: {title: '404'},
     component: NotFound
   }
 ]

src/pages/oj/store/index.js

@@ -49,6 +49,13 @@ const rootActions = {
   },
   changeModalStatus ({commit}, payload) {
     commit(types.CHANGE_MODAL_STATUS, payload)
+  },
+  changeDomTitle ({commit, state}, payload) {
+    if (payload && payload.title) {
+      window.document.title = state.website.website_name_shortcut + ' | ' + payload.title
+    } else {
+      window.document.title = state.website.website_name_shortcut + ' | ' + state.route.meta.title
+    }
   }
 }
 

src/pages/oj/views/contest/ContestDetail.vue

@@ -78,7 +78,7 @@
 <script>
   import moment from 'moment'
   import api from '@oj/api'
-  import { mapState, mapGetters } from 'vuex'
+  import { mapState, mapGetters, mapActions } from 'vuex'
   import { types } from '@oj/store'
   import { CONTEST_STATUS_REVERSE, CONTEST_STATUS } from '@/utils/constants'
   import time from '@/utils/time'
@@ -127,6 +127,7 @@
       this.contestID = this.$route.params.contestID
       this.route_name = this.$route.name
       this.$store.dispatch('getContest').then(res => {
+        this.changeDomTitle({title: res.data.data.title})
         let data = res.data.data
         let endTime = moment(data.end_time)
         if (endTime.isAfter(moment(data.now))) {
@@ -137,6 +138,7 @@
       })
     },
     methods: {
+      ...mapActions(['changeDomTitle']),
       handleRoute (route) {
         this.$router.push(route)
       },
@@ -179,6 +181,7 @@
       '$route' (newVal) {
         this.route_name = newVal.name
         this.contestID = newVal.params.contestID
+        this.changeDomTitle({title: this.contest.title})
       }
     },
     beforeDestroy () {

src/pages/oj/views/problem/Problem.vue

@@ -189,11 +189,11 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
+  import { types } from '@oj/store'
   import CodeMirror from '@oj/components/CodeMirror.vue'
   import storage from '@/utils/storage'
   import { FormMixin } from '@oj/components/mixins'
-  import { types } from '@oj/store'
   import { JUDGE_STATUS, CONTEST_STATUS, buildProblemCodeKey } from '@/utils/constants'
   import api from '@oj/api'
   import { pie, largePie } from './chartData'
@@ -258,6 +258,7 @@
       this.init()
     },
     methods: {
+      ...mapActions(['changeDomTitle']),
       init () {
         this.$Loading.start()
         this.contestID = this.$route.params.contestID
@@ -269,6 +270,7 @@
             window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, 'problem-content'])
           })
           let problem = res.data.data
+          this.changeDomTitle({title: problem.title})
           api.submissionExists(problem.id).then(res => {
             this.submissionExists = res.data.data
           })

src/pages/oj/views/user/UserHome.vue

@@ -29,15 +29,15 @@
           </div>
         </div>
         <div id="problems">
-          <p v-if="problems.length">List of solved problems
+          <div v-if="problems.length">List of solved problems
             <Poptip v-if="refreshVisible" trigger="hover" placement="right-start">
               <Icon type="ios-help-outline"></Icon>
               <div slot="content">
                 <p>If you find the following problem id does not exist,<br> try to click the button.</p>
                 <Button type="info" @click="freshProblemDisplayID">regenerate</Button>
               </div>
             </Poptip>
-          </p>
+          </div>
           <p v-else>The guy is so lazy that has not solved any problem yet.</p>
           <div class="btns">
             <div class="problem-btn" v-for="problemID in problems">
@@ -61,6 +61,7 @@
   </div>
 </template>
 <script>
+  import { mapActions } from 'vuex'
   import time from '@/utils/time'
   import api from '@oj/api'
 
@@ -76,9 +77,11 @@
       this.init()
     },
     methods: {
+      ...mapActions(['changeDomTitle']),
       init () {
         this.username = this.$route.query.username
         api.getUserInfo(this.username).then(res => {
+          this.changeDomTitle({title: res.data.data.user.username})
           this.profile = res.data.data
           this.getSolvedProblems()
           let registerTime = time.utcToLocal(this.profile.user.create_time, 'YYYY-MM-D')