perf: extends增加人性化时间格式化组件

packages/fast-extends/package.json

@@ -24,6 +24,7 @@
     "cropperjs": "^1.5.12",
     "dayjs": "^1.10.4",
     "glob": "^7.1.6",
+    "humanize-duration": "^3.27.3",
     "jsoneditor": "^9.5.6",
     "lodash-es": "^4.17.20",
     "object-assign": "^4.1.1",
@@ -40,6 +41,8 @@
     "@rollup/plugin-strip": "^2.0.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@types/chai": "^4.2.11",
+    "@types/humanize-duration": "^3.27.1",
+    "@types/lodash-es": "^4.17.6",
     "@types/mocha": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",

packages/fast-extends/src/index.js

@@ -2,3 +2,4 @@ export * from "./uploader";
 export * from "./editor";
 export * from "./json";
 export * from "./copyable";
+export * from "./time";

packages/fast-extends/src/index.umd.js

@@ -2,3 +2,4 @@ export * from "./uploader/index.umd";
 export * from "./editor/index.umd";
 export * from "./json/index.umd";
 export * from "./copyable/index.umd";
+export * from "./time/index.umd";

packages/fast-extends/src/time/components/fs-time-humanize.vue

@@ -0,0 +1,91 @@
+<template>
+  <span>{{ formatted }}</span>
+</template>
+
+<script lang="ts">
+import dayjs, { Dayjs } from "dayjs";
+import { computed, PropType } from "vue";
+import _ from "lodash-es";
+import humanizeDuration, { HumanizerOptions } from "humanize-duration";
+const defaultOptions = {
+  language: "zh_CN",
+  largest: 1
+};
+/**
+ * 日期人性化格式展示组件
+ * 例如几天前，几分钟前，几个小时前
+ */
+export default {
+  name: "FsTimeHumanize",
+  props: {
+    /**
+     * 日期时间值，支持long,string,date等，由dayjs转化
+     */
+    modelValue: { required: false, default: undefined },
+    /**
+     *  输入格式化，不传则由dayjs自动转化
+     */
+    valueFormat: { type: String, default: undefined, required: false },
+    /**
+     *  日期输出格式化
+     */
+    format: { type: String, default: "YYYY-MM-DD HH:mm:ss", required: false },
+
+    /**
+     * 距离时间超过多少毫秒时，直接使用format格式，默认大于3天后
+     */
+    useFormatGreater: { type: Number, default: 1000 * 60 * 60 * 24 * 3, required: false },
+
+    /**
+     * HumanizeDuration参数
+     * https://github.com/EvanHahn/HumanizeDuration.js
+     */
+    options: {
+      type: Object as PropType<HumanizerOptions>,
+      default() {
+        return {};
+      }
+    },
+
+    /**
+     * 前后文本
+     */
+    text: {
+      type: Object as PropType<{ prev: string; after: string }>,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(props) {
+    const formatted = computed(() => {
+      if (props.modelValue == null || props.modelValue === "") {
+        return "";
+      }
+
+      let date: Dayjs;
+      if (props.valueFormat != null) {
+        date = dayjs(props.modelValue, props.valueFormat);
+      } else {
+        date = dayjs(props.modelValue);
+      }
+
+      let duration = dayjs().valueOf() - date.valueOf();
+      let suffix = props.text.ago ?? "前";
+      if (duration < 0) {
+        suffix = props.text.after ?? "后";
+        duration = -duration;
+      }
+      if (duration > props.useFormatGreater) {
+        //间隔时长超过3天，则直接显示格式化时间
+        return date.format(props.format);
+      }
+      return humanizeDuration(duration, _.merge({}, defaultOptions, props.options)) + suffix;
+    });
+
+    return {
+      formatted
+    };
+  }
+};
+</script>

packages/fast-extends/src/time/index.js

@@ -0,0 +1,16 @@
+import FsExtendsType from "./type";
+import { utils } from "@fast-crud/fast-crud";
+const asyncModules = import.meta.glob("./components/*.vue");
+const FsExtendsComponents = {
+  install(app) {
+    //加载异步组件，异步组件将会被懒加载，所以不用担心打包之后的体积问题
+    utils.vite.installAsyncComponents(app, asyncModules, []);
+  }
+};
+
+export const FsExtendsTime = {
+  install(app, options) {
+    app.use(FsExtendsType, options);
+    app.use(FsExtendsComponents);
+  }
+};

packages/fast-extends/src/time/index.umd.js

@@ -0,0 +1,15 @@
+import FsExtendsType from "./type";
+import { utils } from "@fast-crud/fast-crud";
+const modules = import.meta.globEager("./components/*.vue");
+const FsExtendsComponents = {
+  install(app) {
+    utils.vite.installSyncComponents(app, modules);
+  }
+};
+
+export const FsExtendsTime = {
+  install(app, options) {
+    app.use(FsExtendsType, options);
+    app.use(FsExtendsComponents);
+  }
+};

packages/fast-extends/src/time/type/index.js

@@ -0,0 +1,11 @@
+import { useTypes } from "@fast-crud/fast-crud";
+import types from "./types";
+
+//兼容旧版本
+export default {
+  install(app, options) {
+    const newTypes = types();
+    const { addTypes } = useTypes();
+    addTypes(newTypes);
+  }
+};

packages/fast-extends/src/time/type/types.js

@@ -0,0 +1,12 @@
+export default function () {
+  return {
+    "time-humanize": {
+      column: {
+        component: {
+          name: "fs-time-humanize",
+          vModel: "modelValue"
+        }
+      }
+    }
+  };
+}