update jsdoc info and optimize code

.eslintrc.js

@@ -1,3 +1,11 @@
+/**
+ * @file Api config / Commonjs module
+ * @module eslint.config
+ * @author Surmon <https://github.com/surmon-china>
+*/
+
+const { isProdMode } = require('./environment')
+
 module.exports = {
   root: true,
   env: {
@@ -58,7 +66,7 @@ module.exports = {
     "no-control-regex": 2,
 
     // 禁止使用debugger语句
-    "no-debugger": process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "no-debugger": isProdMode ? 'error' : 'off',
 
     // 函数参数禁止重名
     "no-dupe-args": 2,

CHANGELOG.md

@@ -14,6 +14,8 @@
 - 规范编码风格
 - 增加壁纸功能
 - 优化开发时正向代理服务
+- 优化组件结构
+- 重新抽象一些方法
 
 ### v1.2.6
 - 修复 APP 下载地址

api.config.js

@@ -1,6 +1,7 @@
 /**
  * @file Api config / Commonjs module
- * @author Surmon <surmon@foxmail.com>
+ * @module api.config
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 const { isProdMode } = require('./environment')

components/archive/header.vue

@@ -62,7 +62,7 @@
     name: 'article-list-header',
     computed: {
       languageIsEn() {
-        return this.$store.state.option.language === 'en'
+        return this.$store.getters['option/langIsEn']
       },
       currentTag() {
         return this.$store.state.tag.data.data.find((tag, index, arr) => {

components/common/color-block/block.vue

@@ -14,11 +14,11 @@
     name: 'color-block-box',
     props: {
       left: Number,
+      color: String,
       border: {
         type: String,
         default: 'right'
-      },
-      color: String
+      }
     }
   }
 </script>

components/common/color-block/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Color block component / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/common/color-block
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import ColorBlockComponent from './block'

components/common/comment/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Comment box component / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/common/comment
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import vueComment from './comment'

components/common/empty/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Empty box component / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/common/empty
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import EmptyComponent from './empty'

components/common/loading/index.js

@@ -1,6 +1,7 @@
  /**
  * @file Loading component / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/common/loading
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import LoadingComponent from './loading'

components/common/wall-flower/index.js

@@ -1,6 +1,7 @@
  /**
  * @file Wall flower component / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/common/wall-flower
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import WallFlowerComponent from './garden'

components/layout/calendar.vue

@@ -19,15 +19,15 @@
     </div>
     <!-- 星期 -->
     <ul class="weekdays" v-if="languageIsEn">
-      <li v-for="day in weeksEn">{{ day }}</li>
+      <li :key="index" v-for="(day, index) in weeksEn">{{ day }}</li>
     </ul>
     <ul class="weekdays" v-else>
-      <li v-for="day in weeksZh">{{ day }}</li>
+      <li :key="index" v-for="(day, index) in weeksZh">{{ day }}</li>
     </ul>
     <!-- 日期 -->
     <ul class="days">
       <loading-box v-if="!days.length" class="loading-box"></loading-box>
-      <li v-for="day in days">
+      <li :key="index" v-for="(day, index) in days">
         <!--本月-->
         <span v-if="day.getMonth() + 1 != currentMonth" 
               class="other-month">{{ day.getDate() }}</span>
@@ -60,7 +60,7 @@
     },
     computed: {
       languageIsEn() {
-        return this.$store.state.option.language === 'en'
+        return this.$store.getters['option/langIsEn']
       }
     },
     methods: {
@@ -172,7 +172,7 @@
       margin-bottom: .5em;
 
       > li {
-        display: inline-block;
+        display: block;
         float: left;
         width: calc(100% / 7);
         text-align: center;

components/layout/emoji-rain.vue

@@ -7,6 +7,8 @@
 
 <script>
   import eventBus from '~/utils/event-bus'
+  import { isBrowser } from '~/environment'
+
   export default {
     name: 'global-emoji-rain',
     computed: {
@@ -16,7 +18,7 @@
     },
     methods: {
       buildEmojiBase() {
-        if (process.browser) {
+        if (isBrowser) {
           const emojiBase = this.$refs.emoji
           emojiBase.width = document.documentElement.clientWidth || document.body.clientWidth
           emojiBase.height = document.documentElement.clientHeight || document.body.clientHeight

components/layout/footer.vue

@@ -39,7 +39,7 @@
     name: 'layout-footer',
     computed: {
       languageIsEn() {
-        return this.$store.state.option.language === 'en'
+        return this.$store.getters['option/langIsEn']
       }
     }
   }

components/layout/header.vue

@@ -54,6 +54,8 @@
 
 <script>
   import EventBus from '~/utils/event-bus'
+  import { isBrowser } from '~/environment'
+
   export default {
     name: 'layout-header',
     data() {
@@ -62,7 +64,7 @@
       }
     },
     mounted() {
-      if (process.browser) {
+      if (isBrowser) {
         window.addLoadedTask(() => {
           this.preload = true;
         })

components/layout/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Layout components / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/layout/index
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import Background from './background.vue'

components/layout/language-psm.vue

@@ -28,7 +28,7 @@
         let psmText = ''
         let onText = ''
         let offText = ''
-        const isEn = this.language === 'en'
+        const isEn = this.$store.getters['option/langIsEn']
         if (isEn) {
           psmText = 'Canvas background, comment emoji rain, WebRTC, Theme、core socialist values'
         } else {

components/layout/tool-box.vue

@@ -49,8 +49,9 @@
 
 <script>
   import { mapState } from 'vuex'
-  import { scrollTo, Easing } from '~/utils/scroll-to-anywhere'
   import underscore from '~/utils/underscore-simple'
+  import { scrollTo, Easing } from '~/utils/scroll-to-anywhere'
+
   export default {
     name: 'tool-box',
     data() {
@@ -78,7 +79,7 @@
         scrollTo(window.scrollY + window.innerHeight, 300, { easing: Easing['ease-in'] })
       },
       setButtonState(position, state, start) {
-        this[(Object.is(position, 'bottom') ? 'bottomBtnMouseOver' : 'topBtnMouseOver')] = state
+        this[position === 'bottom' ? 'bottomBtnMouseOver' : 'topBtnMouseOver'] = state
         window.cancelAnimationFrame(this.animationFrameId)
         start && this.slowMoveToAnyWhere()
       },
@@ -94,7 +95,9 @@
             targetScrollY = currentScrollY
           }
           const canScrollTo = targetScrollY > 0 && targetScrollY < currentScrollY
-          if (!canScrollTo) return false
+          if (!canScrollTo) {
+            return false
+          }
           window.scrollTo(0, targetScrollY)
           if (this.bottomBtnMouseOver || this.topBtnMouseOver) {
             this.animationFrameId = window.requestAnimationFrame(step)
@@ -109,14 +112,11 @@
         this.$store.commit('option/UPDATE_BARRAGE_STATE')
       },
       toggleWebrtc() {
-        const isEn = this.language === 'en'
+        const isEn = this.$store.getters['option/langIsEn']
         if (this.firstOpenWeRtc && !this.webrtcState) {
-          let confirmText
-          if (isEn) {
-            confirmText = 'Will open WebRTC、WebGL、Canvas, ready?'
-          } else {
-            confirmText = '实验室功能需要 WebRTC、WebGL、Canvas 等技术的支持，可能占用较多 CPU/GPU 资源，甚至死机、起火、爆炸、毁灭，继续？'
-          }
+          const confirmText = isEn
+            ? 'Will open WebRTC、WebGL、Canvas, ready?'
+            : '实验室功能需要 WebRTC、WebGL、Canvas 等技术的支持，可能占用较多 CPU/GPU 资源，甚至死机、起火、爆炸、毁灭，继续？'
           if (!window.confirm(confirmText)) {
             this.$store.commit('option/UPDATE_WEBRTC_STATE', false)
             window.alert(isEn ? 'Sorry~' : '滚滚滚')

components/layout/webrtc/main.vue

@@ -106,9 +106,11 @@
 
 <script>
   import apiConfig from '~/api.config'
+  import { isDevMode } from '~/environment'
   import socketio from '~/plugins/socket.io'
   import SimpleWebRTC from '~/plugins/webrtc'
   import faceCtracker from './face-ctracker'
+  
   export default {
     name: 'webrtc',
     components: {
@@ -283,7 +285,7 @@
         localVideoEl: '',
         remoteVideosEl: '',
         debug: false,
-        // debug: process.env.NODE_ENV !== 'production',
+        debug: isDevMode,
         autoAdjustMic: true,
         autoRequestMedia: true,
         detectSpeakingEvents: true,

components/mobile/aside.vue

@@ -82,9 +82,9 @@
     computed: {
       gravatar() {
         const gravatar = this.$store.state.option.adminInfo.data.gravatar
-        return !!gravatar 
-                ? `${gravatar}?imageView2/1/w/180/h/180/interlace/1/q/75|imageslim` 
-                : `${this.cdnUrl}/images/gravatar.jpg`
+        return gravatar 
+          ? `${gravatar}?imageView2/1/w/180/h/180/interlace/1/q/75|imageslim` 
+          : `${this.cdnUrl}/images/gravatar.jpg`
       }
     }
   }

components/mobile/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Mobile Layout components / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module components/mobile/index
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import MobileHeader from './header.vue'

environment.js

@@ -1,10 +1,23 @@
 /**
  * @file Environment / Commonjs module
- * @author Surmon <surmon@foxmail.com>
+ * @module environment
+ * @author Surmon <https://github.com/surmon-china>
  */
 
-const isProdMode = Object.is(process.env.NODE_ENV, 'production')
+const environment = process.env
+const isDevMode = Object.is(environment.NODE_ENV, 'development')
+const isProdMode = Object.is(environment.NODE_ENV, 'production')
+
+const isStatic = process && process.static
+const isServer = process && process.server
+const isBrowser = process && process.browser
 
 module.exports = {
-  isProdMode
+  isDevMode,
+  isProdMode,
+  environment,
+
+  isStatic,
+  isBrowser,
+  isServer
 }

extend/html-cdn-loader.js

@@ -1,15 +1,16 @@
 /**
  * @file Webpack CDN 解析器 / Commonjs module
- * @author Surmon <surmon@foxmail.com>
+ * @module extend/html-cdn-loader
+ * @author Surmon <https://github.com/surmon-china>
  */
 
-const apiConfig = require('../api.config')
+const { cdnUrl } = require('../api.config')
 const { isProdMode } = require('../environment')
 
 module.exports = source => {
   if (isProdMode) {
-    source = source.replace(/src="\/images\//g, `src="${apiConfig.cdnUrl}/images/`)
-    source = source.replace(/src="\/partials\//g, `src="${apiConfig.cdnUrl}/partials/`)
+    source = source.replace(/src="\/images\//g, `src="${cdnUrl}/images/`)
+    source = source.replace(/src="\/partials\//g, `src="${cdnUrl}/partials/`)
   }
   return source
 }

filters/html-filter.js

@@ -1,6 +1,7 @@
 /**
  * @file Text Filters / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module filters/html-filter
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 // 文字溢出过滤器

filters/index.js

@@ -1,6 +1,7 @@
 /**
  * @file Filters / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module filters/index
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 import { textOverflow, firstUpperCase } from './html-filter.js'

filters/time-filter.js

@@ -1,6 +1,7 @@
 /**
  * @file Time Filters / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module filters/time-filter
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 // 取剩余秒

i18n.config.js

@@ -1,6 +1,7 @@
 /**
  * @file I18n config / Commonjs module
- * @author Surmon <surmon@foxmail.com>
+ * @module i18n.config
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 module.exports = {

middleware/change-page-col.js

@@ -1,6 +1,7 @@
 /**
  * @file 响应布局-中间件 / ES module
- * @author Surmon <surmon@foxmail.com>
+ * @module middleware/change-page-col
+ * @author Surmon <https://github.com/surmon-china>
  */
 
 export default ({ route, store }, next) => {