perf: 支持设置用户有效期

packages/ui/certd-client/src/components/index.ts

@@ -15,6 +15,7 @@ import PemInput from "./pem-input.vue";
 import { defineAsyncComponent } from "vue";
 import NotificationSelector from "../views/certd/notification/notification-selector/index.vue";
 import EmailSelector from "./email-selector/index.vue";
+import ValidTimeFormat from "./valid-time-format.vue";
 export default {
   install(app: any) {
     app.component(
@@ -27,6 +28,7 @@ export default {
     app.component("TextEditable", TextEditable);
     app.component("FileInput", FileInput);
     app.component("PemInput", PemInput);
+    app.component("ValidTimeFormat", ValidTimeFormat);
     // app.component("CodeEditor", CodeEditor);
 
     app.component("CronLight", CronLight);

packages/ui/certd-client/src/components/valid-time-format.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="valid-time-format">
+    <a-tag v-if="isExpired" color="red">{{ prefix || "" }}已过期</a-tag>
+    <a-tag v-if="isValid" color="green" :title="date">
+      <fs-time-humanize v-if="humanize" :model-value="modelValue" :options="{ largest: 1, units: ['y', 'd', 'h'] }" :use-format-greater="30000000000" />
+      <template v-else> {{ prefix || "" }}{{ date }} </template>
+    </a-tag>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import dayjs from "dayjs";
+
+const props = defineProps<{
+  modelValue: number;
+  humanize?: boolean;
+  prefix?: string;
+}>();
+
+const date = computed(() => {
+  return dayjs(props.modelValue || 0).format("YYYY-MM-DD");
+});
+
+const isValid = computed(() => {
+  return props.modelValue > 0 && props.modelValue > new Date().getTime();
+});
+
+const isExpired = computed(() => {
+  return props.modelValue > 0 && props.modelValue < new Date().getTime();
+});
+</script>