chore:

packages/ui/certd-client/src/components/fold-box.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="cd-fold-box">
+    <div class="handle pointer">
+      <div class="line"></div>
+      <div class="icon">
+        <fs-icon icon="ion:chevron-collapse-sharp"></fs-icon>
+      </div>
+    </div>
+    <div class="content" :class="{ hidden: !props.open }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean;
+}>();
+</script>
+
+<style lang="less">
+.cd-fold-box {
+  .handle {
+    height: 20px;
+    display: flex;
+    align-items: center;
+    .line {
+      //虚线
+      border-top: 1px dashed #ccc;
+      width: 100%;
+      height: 1px;
+    }
+    .icon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    &.hidden {
+      display: none;
+    }
+  }
+}
+</style>

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

@@ -3,6 +3,7 @@ import TextEditable from "./editable.vue";
 import vip from "./vip-button/install.js";
 import { CheckCircleOutlined, InfoCircleOutlined, UndoOutlined } from "@ant-design/icons-vue";
 import CronEditor from "./cron-editor/index.vue";
+import FoldBox from "./fold-box.vue";
 import { CronLight } from "@vue-js-cron/light";
 import "@vue-js-cron/light/dist/light.css";
 import Plugins from "./plugins/index";
@@ -15,6 +16,8 @@ export default {
     app.component("CronLight", CronLight);
     app.component("CronEditor", CronEditor);
 
+    app.component("FoldBox", FoldBox);
+
     app.component("CheckCircleOutlined", CheckCircleOutlined);
     app.component("InfoCircleOutlined", InfoCircleOutlined);
     app.component("UndoOutlined", UndoOutlined);