feat: 增加获取时间差过滤器

Author: mutoe

components/feed/FeedItem.vue

@@ -5,7 +5,7 @@
         <Avatar :user="feed.user" />
         <span class="username">{{ feed.user.name }}</span>
       </div>
-      <div class="post-info">17小时前</div>
+      <div class="post-info">{{ feed.created_at | fromNow }}</div>
     </div>
     <div class="feed-content">
       {{ feed.feed_content }}

jsconfig.json

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./*"]
+		}
+	}
+}

nuxt.config.js

@@ -58,6 +58,7 @@ module.exports = {
   plugins: [
     { src: '@/plugins/iview', ssr: true },
     { src: '@/plugins/components', ssr: true },
+    { src: '@/plugins/filters', ssr: true },
   ],
 
   /*

plugins/filters.js

@@ -0,0 +1,17 @@
+/**
+ * 全局过滤器
+ */
+import Vue from 'vue'
+import { fromNow } from '@/utils/date'
+
+const filter = {
+  fromNow,
+}
+
+const install = function (Vue) {
+  if (install.installed) return
+  Object.keys(filter).forEach(key => {
+    Vue.filter(key, filter[key])
+  })
+}
+Vue.use({ install })

utils/date.js

@@ -0,0 +1,72 @@
+/**
+ * Date Utilities
+ * 处理时间的工具类
+ * @typedef {Date|string|number} DateLike
+ */
+
+/**
+ * UTC 时间转化为祖鲁时间
+ * 避免使用 new Date() 时产生时区时差
+ *
+ * @author mutoe <mutoe@foxmail.com>
+ * @param {DateLike} date
+ * @returns {string}
+ * @example const date = "2018-12-24 10:06:48"
+ *          toZuluTimezone(date) // -> "2018-12-24T10:06:48Z"
+ */
+export function toZuluTimezone (date) {
+  const matcher = /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})$/
+  if (!matcher.test(date)) return date
+  return date.replace(matcher, '$1T$2Z')
+}
+
+/**
+ * 判断目标日期是否是昨天
+ *
+ * @author mutoe <mutoe@foxmail.com>
+ * @export
+ * @param {DateLike} target
+ * @returns {boolean}
+ */
+export function isYesterday (target) {
+  const date = new Date()
+  const today = +new Date(date.getFullYear(), date.getMonth(), date.getDate()) // 今日凌晨
+  const yesterday = +new Date(today - 1000 * 24 * 3600) // 昨日凌晨
+  target = +new Date(target)
+  return target < today && target > yesterday
+}
+
+/**
+ * 获取目标时间到当前时间的时间差
+ *
+ * @author mutoe <mutoe@foxmail.com>
+ * @param {DateLike} target
+ * @returns {string}
+ */
+export function fromNow (target) {
+  const zulu = toZuluTimezone(target)
+  const date = new Date(zulu)
+  const offset = (new Date() - new Date(date)) / 1000
+  if (Number.isNaN(offset)) {
+    console.error('时间解析错误:', target) // eslint-disable-line no-console
+    return String(target)
+  }
+  let relative = offset
+
+  // 今天
+  if (relative < 60) return '1分钟内'
+  relative = Math.floor(relative / 60) // min
+  if (relative < 60) return `${relative}分钟前`
+  relative = Math.floor(relative / 60) // hour
+  if (relative < 24) return `${relative}小时前`
+
+  // 超过 1 天
+  const timeString = date.toTimeString().substr(0, 5)
+  relative = Math.floor(relative / 24) // day
+  if (isYesterday(date)) return `昨天 ${timeString}`
+  if (relative < 9) return `${relative}天前`
+
+  // 超过 9 天
+  const dateString = `${date.getMonth()}-${date.getDate()}`
+  return dateString
+}

utils/index.js

@@ -0,0 +1,3 @@
+export default {
+
+}