perf: 授权配置支持加密

原本已经添加的授权配置，再次编辑保存即变成加密配置

packages/ui/certd-client/package.json

@@ -30,6 +30,7 @@
     "@fast-crud/ui-interface": "^1.21.2",
     "@iconify/vue": "^4.1.1",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
+    "@vue-js-cron/light": "^4.0.5",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.7.2",
     "axios-mock-adapter": "^1.22.0",

packages/ui/certd-client/src/components/cron-editor/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="cron-editor">
+    <div class="flex-o">
+      <cron-light
+        :disabled="disabled"
+        :readonly="readonly"
+        :period="period"
+        class="flex-o cron-ant"
+        locale="zh-CN"
+        format="quartz"
+        :model-value="modelValue"
+        @update:model-value="onUpdate"
+        @error="onError"
+      />
+    </div>
+    <div class="mt-5">
+      <a-input :disabled="true" :readonly="readonly" :value="modelValue" @change="onChange"></a-input>
+    </div>
+    <div class="fs-helper">{{ errorMessage }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+const props = defineProps<{
+  modelValue?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+}>();
+
+const period = ref<string>("day");
+
+const emit = defineEmits<{
+  "update:modelValue": any;
+}>();
+
+const errorMessage = ref<string | null>(null);
+
+const onUpdate = (value: string) => {
+  if (value === props.modelValue) {
+    return;
+  }
+  emit("update:modelValue", value);
+  errorMessage.value = undefined;
+};
+
+const onPeriod = (value: string) => {
+  period.value = value;
+};
+
+const onChange = (e: any) => {
+  const value = e.target.value;
+  onUpdate(value);
+};
+const onError = (error: any) => {
+  errorMessage.value = error;
+};
+</script>
+<style lang="less">
+.cron-editor {
+  .cron-ant {
+    flex-wrap: wrap;
+    &* > {
+      margin-bottom: 2px;
+      display: flex;
+      align-items: center;
+    }
+    .vcron-select-list {
+      min-width: 56px;
+    }
+    .vcron-select-input {
+      min-height: 22px;
+    }
+    .vcron-select-container {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>

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

@@ -5,6 +5,9 @@ import PiOutputSelector from "../views/certd/pipeline/pipeline/component/output-
 import PiEditable from "./editable.vue";
 import VipButton from "./vip-button/index.vue";
 import { CheckCircleOutlined, InfoCircleOutlined, UndoOutlined } from "@ant-design/icons-vue";
+import CronEditor from "./cron-editor/index.vue";
+import { CronLight } from "@vue-js-cron/light";
+import "@vue-js-cron/light/dist/light.css";
 export default {
   install(app: any) {
     app.component("PiContainer", PiContainer);
@@ -13,6 +16,8 @@ export default {
     app.component("PiOutputSelector", PiOutputSelector);
     app.component("PiDnsProviderSelector", PiDnsProviderSelector);
     app.component("VipButton", VipButton);
+    app.component("CronLight", CronLight);
+    app.component("CronEditor", CronEditor);
 
     app.component("CheckCircleOutlined", CheckCircleOutlined);
     app.component("InfoCircleOutlined", InfoCircleOutlined);

packages/ui/certd-client/src/style/common.less

@@ -64,7 +64,9 @@ h1, h2, h3, h4, h5, h6 {
   flex: 1;
 }
 
-
+.mb-2{
+  margin-bottom:2px;
+}
 .ml-5{
   margin-left:5px;
 }
@@ -84,6 +86,9 @@ h1, h2, h3, h4, h5, h6 {
 .mr-15{
   margin-right: 15px;
 }
+.mt-5{
+  margin-top:5px;
+}
 .mt-10{
   margin-top:10px;
 }

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

@@ -39,7 +39,8 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
       form: {
         wrapper: {
           width: "1150px",
-          saveRemind: false
+          saveRemind: false,
+          title: "创建证书申请流水线"
         }
       },
       columns: {
@@ -73,6 +74,8 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
           type: "text",
           form: {
             component: {
+              name: "cron-editor",
+              vModel: "modelValue",
               placeholder: "0 0 4 * * *"
             },
             helper: "请输入cron表达式, 例如：0 0 4 * * *，每天凌晨4点触发",

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

@@ -112,7 +112,7 @@ export default function ({ crudExpose, context: { certdFormRef } }: CreateCrudOp
           },
           addCertd: {
             order: 1,
-            text: "添加证书流水线",
+            text: "创建证书流水线",
             type: "primary",
             click() {
               addCertdPipeline();

packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/trigger-form/index.vue

@@ -15,13 +15,7 @@
     </template>
     <template v-if="currentTrigger">
       <pi-container>
-        <a-form
-          ref="triggerFormRef"
-          class="trigger-form"
-          :model="currentTrigger"
-          :label-col="labelCol"
-          :wrapper-col="wrapperCol"
-        >
+        <a-form ref="triggerFormRef" class="trigger-form" :model="currentTrigger" :label-col="labelCol" :wrapper-col="wrapperCol">
           <fs-form-item
             v-model="currentTrigger.title"
             :item="{
@@ -59,8 +53,8 @@
               key: 'props.cron',
               component: {
                 disabled: !editMode,
-                name: 'a-input',
-                vModel: 'value'
+                name: 'cron-editor',
+                vModel: 'modelValue'
               },
               helper: 'cron表达式，例如： 0 0 3 * * * ，表示每天凌晨3点触发',
               rules: [{ required: true, message: '此项必填' }]