perf: 证书仓库页面增加到期状态查询条件

packages/ui/certd-client/src/components/vip-button/index.vue

@@ -445,6 +445,11 @@ function openUpgrade() {
           <div class="vip-type-vs">
             <a-row gutter={20}>{slots}</a-row>
           </div>
+          <div>
+            <a href="https://certd.docmirror.cn/guide/donate/#相关问题" target="_blank">
+              {t("vip.question")}
+            </a>
+          </div>
           <div class="mt-10">
             <div class=" w-100 flex-col md:flex-row ">
               <span>{t("vip.site_id")}：</span>

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -330,6 +330,11 @@ export default {
       certValidDays: "Certificate Valid Days",
       certValidDaysHelper: "Number of days before expiration to send a notification",
     },
+    cert: {
+      expired: "Expired",
+      expiring: "Expiring",
+      noExpired: "Not Expired",
+    },
   },
   checkStatus: {
     success: "Success",

packages/ui/certd-client/src/locales/langs/en-US/vip.ts

@@ -100,4 +100,5 @@ export default {
   confirm: "Confirm",
   not_effective: "Not effective or duration not sync?",
   learn_more: "More privileges",
+  question: "More VIP related questions",
 };

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -337,6 +337,12 @@ export default {
       certValidDays: "证书到期前天数",
       certValidDaysHelper: "证书到期前多少天发送通知",
     },
+
+    cert: {
+      expired: "已过期",
+      expiring: "即将过期",
+      noExpired: "未过期",
+    },
   },
   checkStatus: {
     success: "成功",

packages/ui/certd-client/src/locales/langs/zh-CN/vip.ts

@@ -99,4 +99,5 @@ export default {
   confirm: "确认",
   not_effective: "VIP没有生效/时长未同步?",
   learn_more: "更多特权(加VIP群等)",
+  question: "更多VIP相关问题",
 };

packages/ui/certd-client/src/store/settings/api.basic.ts

@@ -57,6 +57,8 @@ export type SysPublicSetting = {
 
   // 默认到期前更新天数
   defaultCertRenewDays?: number;
+  // 默认即将到期天数
+  defaultWillExpireDays?: number;
 
   //证书域名添加到监控
   certDomainAddToMonitorEnabled?: boolean;

packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx

@@ -4,7 +4,7 @@ import { useI18n } from "/src/locales";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { certInfoApi } from "./api";
 import dayjs from "dayjs";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useModal } from "/@/use/use-modal";
 import { notification } from "ant-design-vue";
 import CertView from "/@/views/certd/pipeline/cert-view.vue";
@@ -57,7 +57,14 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
     });
   };
 
-  const { openUploadCreateDialog, openUpdateCertDialog } = useCertUpload();
+  const { openUploadCreateDialog } = useCertUpload();
+
+  const DEFAULT_WILL_EXPIRE_DAYS = settingStore.sysPublic.defaultWillExpireDays || settingStore.sysPublic.defaultCertRenewDays || 15;
+  const route = useRoute();
+  const expireStatus = route?.query?.expireStatus as string;
+  const searchInitForm = {
+    expiresLeft: expireStatus,
+  };
   return {
     crudOptions: {
       request: {
@@ -66,6 +73,9 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         editRequest,
         delRequest,
       },
+      search: {
+        initialForm: searchInitForm,
+      },
       form: {
         labelCol: {
           //固定label宽度
@@ -213,7 +223,17 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         expiresLeft: {
           title: t("certd.validDays"),
           search: {
-            show: false,
+            show: true,
+            component: {
+              name: "fs-dict-select",
+              dict: dict({
+                data: [
+                  { label: t("certd.monitor.cert.expired"), value: "expired" },
+                  { label: t("certd.monitor.cert.expiring"), value: "expiring" },
+                  { label: t("certd.monitor.cert.noExpired"), value: "noExpired" },
+                ],
+              }),
+            },
           },
           type: "date",
           form: {
@@ -242,9 +262,9 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
 
               // 距离失效时间剩余天数
               const leftDays = dayjs(expiresTime).diff(dayjs(), "day");
-              const color = leftDays < 20 ? "red" : "#389e0d";
+              const color = leftDays < DEFAULT_WILL_EXPIRE_DAYS ? "red" : "#389e0d";
               const percent = (leftDays / effectiveDays) * 100;
-              const textColor = leftDays < 20 ? "red" : leftDays > 60 ? "#389e0d" : "";
+              const textColor = leftDays < DEFAULT_WILL_EXPIRE_DAYS ? "red" : leftDays > 60 ? "#389e0d" : "";
               const format = () => {
                 return <span style={{ color: textColor }}>{`${leftDays}${t("certd.days")}`}</span>;
               };

packages/ui/certd-client/src/views/certd/pipeline/crud.tsx

@@ -66,6 +66,8 @@ export default function ({ crudExpose, context: { selectedRowKeys, openCertApply
   const userStore = useUserStore();
   const settingStore = useSettingStore();
 
+  const DEFAULT_WILL_EXPIRE_DAYS = settingStore.sysPublic.defaultWillExpireDays || settingStore.sysPublic.defaultCertRenewDays || 15;
+
   function onDialogOpen(opt: any) {
     const searchForm = crudExpose.getSearchValidatedFormData();
     opt.initialForm = {
@@ -389,9 +391,9 @@ export default function ({ crudExpose, context: { selectedRowKeys, openCertApply
               }
               // 距离失效时间剩余天数
               const leftDays = dayjs(expiresTime).diff(dayjs(), "day");
-              const color = leftDays < 20 ? "red" : "#389e0d";
+              const color = leftDays < DEFAULT_WILL_EXPIRE_DAYS ? "red" : "#389e0d";
               const percent = (leftDays / effectiveDays) * 100;
-              const textColor = leftDays < 20 ? "red" : leftDays > 60 ? "#389e0d" : "";
+              const textColor = leftDays < DEFAULT_WILL_EXPIRE_DAYS ? "red" : leftDays > 60 ? "#389e0d" : "";
               const format = () => {
                 return <span style={{ color: textColor }}>{`${leftDays}${t("certd.days")}`}</span>;
               };