build: trident-sync prepare

packages/ui/certd-client/src/components/container.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="pi-container">
+    <div class="box">
+      <div class="inner">
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PiContainer"
+};
+</script>
+
+<style lang="less">
+.pi-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  .box {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    .inner {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .header {
+        flex-shrink: 0;
+      }
+      .body {
+        overflow-y: auto;
+        flex: 1;
+      }
+      .footer {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>

packages/ui/certd-client/src/components/dns-provider-selector/api.ts

@@ -0,0 +1,10 @@
+import { request } from "/src/api/service";
+
+const apiPrefix = "/pi/dnsProvider";
+
+export async function GetList() {
+  return await request({
+    url: apiPrefix + "/list",
+    method: "post"
+  });
+}

packages/ui/certd-client/src/components/dns-provider-selector/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <a-select class="pi-dns-provider-selector" :value="modelValue" :options="options" @update:value="onChanged">
+  </a-select>
+</template>
+
+<script lang="ts">
+import { inject, Ref, ref, watch } from "vue";
+import * as api from "./api";
+
+export default {
+  name: "PiDnsProviderSelector",
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const options = ref<any[]>([]);
+
+    async function onCreate() {
+      const list = await api.GetList();
+      const array: any[] = [];
+      for (let item of list) {
+        array.push({
+          value: item.name,
+          label: item.title
+        });
+      }
+      options.value = array;
+      if (props.modelValue == null && options.value.length > 0) {
+        ctx.emit("update:modelValue", options.value[0].value);
+      }
+    }
+    onCreate();
+
+    function onChanged(value) {
+      ctx.emit("update:modelValue", value);
+    }
+    return {
+      options,
+      onChanged
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.step-edit-form {
+  .body {
+    padding: 10px;
+    .ant-card {
+      margin-bottom: 10px;
+
+      &.current {
+        border-color: #00b7ff;
+      }
+
+      .ant-card-meta-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+      }
+
+      .ant-avatar {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+
+      .title {
+        margin-left: 5px;
+        white-space: nowrap;
+        flex: 1;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .ant-card-body {
+      padding: 14px;
+      height: 100px;
+
+      overflow-y: hidden;
+
+      .ant-card-meta-description {
+        font-size: 10px;
+        line-height: 20px;
+        height: 40px;
+        color: #7f7f7f;
+      }
+    }
+  }
+}
+</style>

packages/ui/certd-client/src/components/editable.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="pi-editable" :class="{ disabled, 'hover-show': hoverShow }">
+    <div v-if="isEdit" class="input">
+      <a-input
+        ref="inputRef"
+        v-model:value="valueRef"
+        :validate-status="modelValue ? '' : 'error'"
+        v-bind="input"
+        @keyup.enter="save()"
+        @blur="save()"
+      >
+        <template #suffix>
+          <fs-icon icon="ant-design:check-outlined" @click="save()"></fs-icon>
+        </template>
+      </a-input>
+    </div>
+    <div v-else class="view" @click="edit">
+      <span> {{ modelValue }}</span>
+      <fs-icon class="edit-icon" icon="ant-design:edit-outlined"></fs-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { watch, ref, nextTick } from "vue";
+
+export default {
+  name: "PiEditable",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    input: {
+      type: Object
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hoverShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const inputRef = ref();
+    const valueRef = ref(props.modelValue);
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value) => {
+        valueRef.value = value;
+      }
+    );
+    const isEdit = ref(false);
+    async function edit() {
+      if (props.disabled) {
+        return;
+      }
+      isEdit.value = true;
+      await nextTick();
+      inputRef.value.focus();
+    }
+    function save() {
+      isEdit.value = false;
+      ctx.emit("update:modelValue", valueRef.value);
+    }
+    return {
+      valueRef,
+      isEdit,
+      save,
+      edit,
+      inputRef
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.pi-editable {
+  line-height: 34px;
+
+  span.fs-iconify {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+
+  &.disabled {
+    .edit-icon {
+      visibility: hidden !important;
+    }
+  }
+  &.hover-show {
+    .edit-icon {
+      visibility: hidden;
+    }
+    &:hover {
+      .edit-icon {
+        visibility: visible;
+      }
+    }
+  }
+  .edit-icon {
+    line-height: 34px;
+  }
+  .view {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+import PiContainer from "./container.vue";
+import PiAccessSelector from "../views/certd/access/access-selector/index.vue";
+import PiDnsProviderSelector from "./dns-provider-selector/index.vue";
+import PiOutputSelector from "../views/certd/pipeline/pipeline/component/output-selector/index.vue";import PiEditable from "./editable.vue";
+import { CheckCircleOutlined, InfoCircleOutlined, UndoOutlined } from "@ant-design/icons-vue";
+export default {
+  install(app) {
+    app.component("PiContainer", PiContainer);
+    app.component("PiAccessSelector", PiAccessSelector);
+    app.component("PiEditable", PiEditable);
+    app.component("PiOutputSelector", PiOutputSelector);
+    app.component("PiDnsProviderSelector", PiDnsProviderSelector);
+
+    app.component("CheckCircleOutlined", CheckCircleOutlined);
+    app.component("InfoCircleOutlined", InfoCircleOutlined);
+    app.component("UndoOutlined", UndoOutlined);
+  }
+};