perf: 优化时间组件

app/Http/Controllers/Api/SystemController.php

@@ -133,6 +133,7 @@ class SystemController extends AbstractController
         $setting['file_upload_limit'] = $setting['file_upload_limit'] ?: '';
         $setting['unclaimed_task_reminder'] = $setting['unclaimed_task_reminder'] ?: 'close';
         $setting['unclaimed_task_reminder_time'] = $setting['unclaimed_task_reminder_time'] ?: '';
+        $setting['server_timezone'] = config('app.timezone');
         $setting['server_version'] = Base::getVersion();
         //
         return Base::retSuccess('success', $setting ?: json_decode('{}'));

resources/assets/js/functions/common.js

@@ -11,33 +11,12 @@ const timezone = require("dayjs/plugin/timezone");
     window.modalTransferIndex = 1000;
     localforage.config({name: 'DooTask', storeName: 'common'});
 
-    dayjs.extend(utc);
-    dayjs.extend(timezone);
-    dayjs.tz.setDefault("Asia/Shanghai");
     /**
      * =============================================================================
      * *******************************   基础函数类   *******************************
      * =============================================================================
      */
     $.extend({
-        /**
-         * 时间对象
-         * @param v
-         * @returns {*|dayjs.Dayjs}
-         */
-        dayjs(v = undefined) {
-            if (/^\d{13,}$/.test(v)) {
-                return dayjs(Number(v));
-            }
-            if (/^\d{10,}$/.test(v)) {
-                return dayjs(Number(v) * 1000);
-            }
-            if (v === null) {
-                v = 0
-            }
-            return dayjs(v);
-        },
-
         /**
          * 是否数组
          * @param obj
@@ -280,51 +259,11 @@ const timezone = require("dayjs/plugin/timezone");
          * @param after
          * @returns {*}
          */
-        zeroFill(str, length, after) {
+        zeroFill(str, length, after = false) {
-            str+= "";
+            if (after) {
-            if (str.length >= length) {
+                return `${str}`.padEnd(length, '0')
-                return str;
-            }
-            let _str = '', _ret = '';
-            for (let i = 0; i < length; i++) {
-                _str += '0';
-            }
-            if (after || typeof after === 'undefined') {
-                _ret = (_str + "" + str).substr(length * -1);
-            } else {
-                _ret = (str + "" + _str).substr(0, length);
-            }
-            return _ret;
-        },
-
-        /**
-         * 租用时间差(不够1个小时算一个小时)
-         * @param s
-         * @param e
-         * @returns {*}
-         */
-        timeDiff(s, e) {
-            if (typeof e === 'undefined') {
-                e = $A.dayjs().unix();
-            }
-            let d = e - s;
-            if (d > 86400) {
-                let day = Math.floor(d / 86400);
-                let hour = Math.ceil((d - (day * 86400)) / 3600);
-                if (hour > 0) {
-                    return day + '天' + hour + '小时';
-                } else {
-                    return day + '天';
-                }
-            } else if (d > 3600) {
-                return Math.ceil(d / 3600) + '小时';
-            } else if (d > 60) {
-                return Math.ceil(d / 60) + '分钟';
-            } else if (d > 10) {
-                return d + '秒';
-            } else {
-                return '刚刚';
             }
+            return `${str}`.padStart(length, '0')
         },
 
         /**
@@ -1041,69 +980,6 @@ const timezone = require("dayjs/plugin/timezone");
         },
         __loadIframe: {},
 
-        /**
-         *  对象中有Date格式的转成指定格式
-         * @param value
-         * @param format  默认格式：YYYY-MM-DD HH:mm:ss
-         * @returns {*}
-         */
-        newDateString(value, format = "YYYY-MM-DD HH:mm:ss") {
-            if (value === null) {
-                return value;
-            }
-            if (value instanceof dayjs || value instanceof Date) {
-                value = $A.dayjs(value).format(format);
-            } else if ($A.isJson(value)) {
-                value = Object.assign({}, value)
-                for (let key in value) {
-                    if (!value.hasOwnProperty(key)) continue;
-                    value[key] = $A.newDateString(value[key], format);
-                }
-            } else if ($A.isArray(value)) {
-                value = Object.assign([], value)
-                value.forEach((val, index) => {
-                    value[index] = $A.newDateString(val, format);
-                });
-            }
-            return value;
-        },
-
-        /**
-         * 对象中有Date格式的转成时间戳
-         * @param value
-         * @returns {number|*}
-         */
-        newTimestamp(value) {
-            if (value === null) {
-                return value;
-            }
-            if (value instanceof dayjs || value instanceof Date || $A.isDateString(value)) {
-                value = $A.dayjs(value).unix();
-            } else if ($A.isJson(value)) {
-                value = Object.assign({}, value)
-                for (let key in value) {
-                    if (!value.hasOwnProperty(key)) continue;
-                    value[key] = $A.newTimestamp(value[key]);
-                }
-            } else if ($A.isArray(value)) {
-                value = Object.assign([], value)
-                value.forEach((val, index) => {
-                    value[index] = $A.newTimestamp(val);
-                });
-            }
-            return value;
-        },
-
-        /**
-         * 判断是否是日期格式
-         * 支持格式：YYYY-MM-DD HH:mm:ss、YYYY-MM-DD HH:mm、YYYY-MM-DD HH、YYYY-MM-DD
-         * @param value
-         * @returns {boolean}
-         */
-        isDateString(value) {
-            return typeof value === "string" && /^\d{4}-\d{2}-\d{2}( \d{2}(:\d{2}(:\d{2})?)?)?$/i.test(value);
-        },
-
         /**
          * 字节转换
          * @param bytes
@@ -1984,5 +1860,174 @@ const timezone = require("dayjs/plugin/timezone");
         __ajaxList: [],
     });
 
+    /**
+     * =============================================================================
+     * ***********************************   time   ********************************
+     * =============================================================================
+     */
+
+    dayjs.extend(utc);
+    dayjs.extend(timezone);
+    $.extend({
+        /**
+         * 时间对象
+         * @param v
+         * @returns {*|dayjs.Dayjs}
+         */
+        dayjs(v = undefined) {
+            if (/^\d{13,}$/.test(v)) {
+                return dayjs(Number(v));
+            }
+            if (/^\d{10,}$/.test(v)) {
+                return dayjs(Number(v) * 1000);
+            }
+            if (v === null) {
+                v = 0
+            }
+            return dayjs(v);
+        },
+
+        /**
+         * 设置时区
+         * @param tz
+         */
+        setTimezone(tz) {
+            const local = $A.dayjs().startOf('hour');
+            const server = local.tz(tz);
+            $A.timezoneDifference = local.startOf('hour').diff(server.format("YYYY-MM-DD HH:mm:ss"), 'hour')
+        },
+        timezoneDifference: 0,
+
+        /**
+         *  对象中有Date格式的转成指定格式
+         * @param value
+         * @param format  默认格式：YYYY-MM-DD HH:mm:ss
+         * @returns {*}
+         */
+        newDateString(value, format = "YYYY-MM-DD HH:mm:ss") {
+            if (value === null) {
+                return value;
+            }
+            if (value instanceof dayjs || value instanceof Date) {
+                value = $A.dayjs(value).format(format);
+            } else if ($A.isJson(value)) {
+                value = Object.assign({}, value)
+                for (let key in value) {
+                    if (!value.hasOwnProperty(key)) continue;
+                    value[key] = $A.newDateString(value[key], format);
+                }
+            } else if ($A.isArray(value)) {
+                value = Object.assign([], value)
+                value.forEach((val, index) => {
+                    value[index] = $A.newDateString(val, format);
+                });
+            }
+            return value;
+        },
+
+        /**
+         * 对象中有Date格式的转成时间戳
+         * @param value
+         * @returns {number|*}
+         */
+        newTimestamp(value) {
+            if (value === null) {
+                return value;
+            }
+            if (value instanceof dayjs || value instanceof Date || $A.isDateString(value)) {
+                value = $A.dayjs(value).unix();
+            } else if ($A.isJson(value)) {
+                value = Object.assign({}, value)
+                for (let key in value) {
+                    if (!value.hasOwnProperty(key)) continue;
+                    value[key] = $A.newTimestamp(value[key]);
+                }
+            } else if ($A.isArray(value)) {
+                value = Object.assign([], value)
+                value.forEach((val, index) => {
+                    value[index] = $A.newTimestamp(val);
+                });
+            }
+            return value;
+        },
+
+        /**
+         * 判断是否是日期格式
+         * 支持格式：YYYY-MM-DD HH:mm:ss、YYYY-MM-DD HH:mm、YYYY-MM-DD HH、YYYY-MM-DD
+         * @param value
+         * @returns {boolean}
+         */
+        isDateString(value) {
+            return typeof value === "string" && /^\d{4}-\d{2}-\d{2}( \d{2}(:\d{2}(:\d{2})?)?)?$/i.test(value);
+        },
+
+        /**
+         * 秒数倒计时，格式：00:00:00, 00:00, 0s
+         * @param s
+         * @returns {string}
+         */
+        secondsToTime(s) {
+            let pre = '';
+            if (s < 0) {
+                pre = '-';
+                s = -s;
+            }
+            let duration
+            const days = Math.floor(s / 86400);
+            const hours = Math.floor((s % 86400) / 3600);
+            const minutes = Math.floor(((s % 86400) % 3600) / 60);
+            const seconds = Math.floor(((s % 86400) % 3600) % 60);
+            if (days > 0) {
+                if (hours > 0) duration = days + "d," + $A.zeroFill(hours, 2) + "h";
+                else if (minutes > 0) duration = days + "d," + $A.zeroFill(minutes, 2) + "min";
+                else if (seconds > 0) duration = days + "d," + $A.zeroFill(seconds, 2) + "s";
+                else duration = days + "d";
+            }
+            else if (hours > 0) duration = $A.zeroFill(hours, 2) + ":" + $A.zeroFill(minutes, 2) + ":" + $A.zeroFill(seconds, 2);
+            else if (minutes > 0) duration = $A.zeroFill(minutes, 2) + ":" + $A.zeroFill(seconds, 2);
+            else if (seconds > 0) duration = $A.zeroFill(seconds, 2) + "s";
+            return pre + duration;
+        },
+
+        /**
+         * 格式化时间（本地时间自动减去时区差）
+         * @param date
+         * @returns {string}
+         */
+        timeFormat(date) {
+            const local = $A.dayjs().subtract($A.timezoneDifference, "hour"),
+                time = $A.dayjs(date);
+            if (local.format("YYYY-MM-DD") === time.format("YYYY-MM-DD")) {
+                return time.format("HH:mm")
+            }
+            if (local.clone().subtract(1, 'day').format('YYYY-MM-DD') === time.format("YYYY-MM-DD")) {
+                return `${$A.L('昨天')} ${time.format("HH:mm")}`
+            }
+            if (local.year() === time.year()) {
+                return time.format("MM-DD")
+            }
+            return time.format("YYYY-MM-DD") || '';
+        },
+
+        /**
+         * 倒计时
+         * @param s 开始时间自动减去时区差
+         * @param e
+         * @returns {string}
+         */
+        countDownFormat(s, e) {
+            s = $A.dayjs(s).subtract($A.timezoneDifference, "hour")
+            e = $A.dayjs(e)
+            const diff = e.diff(s, 'second');
+            if (diff == 0) {
+                return '0s';
+            }
+            if (Math.abs(diff) < 86400 * 7) {
+                return $A.secondsToTime(diff);
+            }
+            return $A.timeFormat(e)
+        },
+    });
+
     window.$A = $;
 })(window, window.$ = window.jQuery = require('jquery'));

resources/assets/js/functions/web.js

@@ -114,77 +114,6 @@ import {MarkdownPreview} from "../store/markdown";
             }
         },
 
-        /**
-         * 格式化时间
-         * @param date
-         * @returns {*|string}
-         */
-        formatTime(date) {
-            let now = $A.dayjs(),
-                time = $A.dayjs(date);
-            if (now.format("YYYY-MM-DD") === time.format("YYYY-MM-DD")) {
-                return time.format("HH:mm")
-            }
-            if (now.clone().subtract(1, 'day').format('YYYY-MM-DD') === time.format("YYYY-MM-DD")) {
-                return `${$A.L('昨天')} ${time.format("HH:mm")}`
-            }
-            if (now.year() === time.year()) {
-                return time.format("MM-DD")
-            }
-            return time.format("YYYY-MM-DD") || '';
-        },
-
-        /**
-         * 小于9补0
-         * @param val
-         * @returns {number|string}
-         */
-        formatBit(val) {
-            val = +val
-            return val > 9 ? val : '0' + val
-        },
-
-        /**
-         * 秒转时间
-         * @param second
-         * @returns {string}
-         */
-        formatSeconds(second) {
-            let duration
-            let days = Math.floor(second / 86400);
-            let hours = Math.floor((second % 86400) / 3600);
-            let minutes = Math.floor(((second % 86400) % 3600) / 60);
-            let seconds = Math.floor(((second % 86400) % 3600) % 60);
-            if (days > 0) {
-                if (hours > 0) duration = days + "d," + this.formatBit(hours) + "h";
-                else if (minutes > 0) duration = days + "d," + this.formatBit(minutes) + "min";
-                else if (seconds > 0) duration = days + "d," + this.formatBit(seconds) + "s";
-                else duration = days + "d";
-            }
-            else if (hours > 0) duration = this.formatBit(hours) + ":" + this.formatBit(minutes) + ":" + this.formatBit(seconds);
-            else if (minutes > 0) duration = this.formatBit(minutes) + ":" + this.formatBit(seconds);
-            else if (seconds > 0) duration = this.formatBit(seconds) + "s";
-            return duration;
-        },
-
-        /**
-         * 倒计时格式
-         * @param date
-         * @param nowTime
-         * @returns {string|*}
-         */
-        countDownFormat(date, nowTime) {
-            let time = $A.dayjs(date).unix() - nowTime;
-            if (time < 86400 * 7 && time > 0 ) {
-                return this.formatSeconds(time);
-            } else if (time < 0) {
-                return '-' + this.formatSeconds(time * -1);
-            } else if (time == 0) {
-                return 0 + 's';
-            }
-            return this.formatTime(date)
-        },
-
         /**
          * 获取日期选择器的 shortcuts 模板参数
          * @returns {(*)[]|[{text, value(): [Date,*]},{text, value(): [Date,*]},{text, value(): [*,*]},{text, value(): [*,*]},{text, value(): [Date,*]},null,null]|(Date|*)[]}

resources/assets/js/pages/manage/components/DialogView.vue

@@ -248,7 +248,7 @@
             <template v-else>
                 <!--时间-->
                 <div v-if="timeShow" class="time" @click="timeShow=false">{{msgData.created_at}}</div>
-                <div v-else class="time" :title="msgData.created_at" @click="timeShow=true">{{$A.formatTime(msgData.created_at)}}</div>
+                <div v-else class="time" :title="msgData.created_at" @click="timeShow=true">{{$A.timeFormat(msgData.created_at)}}</div>
                 <!--阅读-->
                 <template v-if="!hidePercentage">
                     <div v-if="msgData.send > 1 || dialogType === 'group'" class="percent" @click="openReadPercentage">

resources/assets/js/pages/manage/components/ProjectPanel.vue

@@ -1501,7 +1501,7 @@ export default {
         },
 
         expiresFormat(date) {
-            return $A.countDownFormat(date, this.nowTime)
+            return $A.countDownFormat(this.nowTime, date)
         },
 
         tabTypeChange(type) {

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -954,7 +954,7 @@ export default {
         },
 
         expiresFormat(date) {
-            return $A.countDownFormat(date, this.nowTime)
+            return $A.countDownFormat(this.nowTime, date)
         },
 
         tagColor(taskDetail) {

resources/assets/js/pages/manage/components/TaskRow.vue

@@ -263,7 +263,7 @@ export default {
         },
 
         expiresFormat(date) {
-            return $A.countDownFormat(date, this.nowTime)
+            return $A.countDownFormat(this.nowTime, date)
         },
 
         completeAtFormat(date) {

resources/assets/js/pages/manage/dashboard.vue

@@ -230,7 +230,7 @@ export default {
         },
 
         expiresFormat(date) {
-            return $A.countDownFormat(date, this.nowTime)
+            return $A.countDownFormat(this.nowTime, date)
         },
 
         loadInterval(load) {

resources/assets/js/pages/manage/messenger.vue

@@ -97,7 +97,7 @@
                                         </template>
                                         <span>{{dialog.name}}</span>
                                         <Icon v-if="dialog.type == 'user' && lastMsgReadDone(dialog.last_msg) && dialog.dialog_user.userid != userId" :type="lastMsgReadDone(dialog.last_msg)"/>
-                                        <em v-if="dialog.last_at">{{$A.formatTime(dialog.last_at)}}</em>
+                                        <em v-if="dialog.last_at">{{$A.timeFormat(dialog.last_at)}}</em>
                                     </div>
                                     <div class="dialog-text no-dark-content">
                                         <template v-if="dialog.extra_draft_has && dialog.id != dialogId">

resources/assets/js/store/actions.js

@@ -340,6 +340,7 @@ export default {
                     dispatch("call", {
                         url: "system/setting",
                     }).then(({data}) => {
+                        $A.setTimezone(data.server_timezone);
                         state.systemConfig = Object.assign(data, {
                             __state: "success",
                         })