Merge branch 'v2-dev' into v2-dev-buy

2026-05-15 04:27:31 +08:00 · 2025-08-29 16:54:11 +08:00
parent fe9dd7d23f 44019e1042
commit b497eda26e
78 changed files with 1559 additions and 225 deletions
@@ -97,6 +97,7 @@ export type CertApplyPluginSysInput = {
 export type PluginSysSetting<T> = {
  sysSetting: {
    input?: T;
+    metadata?: Record<string, any>;
  };
 };
 export type CommPluginConfig = {
@@ -118,6 +119,14 @@ export async function SaveCommPluginConfigs(data: CommPluginConfig): Promise<voi
  });
 }

+export async function savePluginSetting(req: { name: string; sysSetting: any }): Promise<void> {
+  return await request({
+    url: apiPrefix + "/saveSetting",
+    method: "post",
+    data: req,
+  });
+}
+
 export async function DoTest(req: { id: number; input: any }): Promise<void> {
  return await request({
    url: apiPrefix + "/doTest",
@@ -0,0 +1,184 @@
+<template>
+  <div class="plugin-config">
+    <div class="origin-metadata w-100%">
+      <div class="block-title">
+        自定义插件参数配置
+        <div class="helper">可以设置插件选项的配置，设置配置默认值、修改帮助说明、设置是否显示该字段等</div>
+      </div>
+      <div class="p-10">
+        <div ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <table class="table-fixed w-full">
+            <thead>
+              <tr>
+                <th class="text-left p-5" width="200px">插件参数</th>
+                <th class="text-left p-5" width="100px">参数配置</th>
+                <th class="text-left flex-1 p-5">自定义</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="item in originInputs" :key="item.key">
+                <template v-for="prop in editableKeys" :key="prop.key">
+                  <tr>
+                    <td v-if="prop.key === 'value'" class="border-t-2 p-5" rowspan="3" :class="{ 'border-t-2': prop.key === 'value' }">{{ item.title }}</td>
+                    <td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }">{{ prop.label }}</td>
+                    <td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }">
+                      <rollbackable :value="configForm[item.key][prop.key]" @set="prop.onSet(item)" @clear="delete configForm[item.key][prop.key]">
+                        <template #default>
+                          <fs-render :render-func="prop.defaultRender(item)"></fs-render>
+                        </template>
+                        <template #edit>
+                          <fs-render :render-func="prop.editRender(item)"></fs-render>
+                        </template>
+                      </rollbackable>
+                    </td>
+                  </tr>
+                </template>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { computed, nextTick, onMounted, reactive, ref, Ref, unref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import * as api from "./api";
+import { usePluginStore } from "/@/store/plugin";
+import { cloneDeep, get, merge, set, unset } from "lodash-es";
+import Rollbackable from "./rollbackable.vue";
+import { FsRender } from "@fast-crud/fast-crud";
+const route = useRoute();
+const router = useRouter();
+const pluginStore = usePluginStore();
+const props = defineProps<{
+  plugin: any;
+}>();
+
+const pluginMetadata = ref<any>("");
+const currentPlugin = ref();
+const labelCol = ref({
+  span: null,
+  style: {
+    width: "145px",
+  },
+});
+const wrapperCol = ref({ span: 16 });
+const configForm: any = reactive({});
+
+function getScope() {
+  return {
+    form: configForm,
+  };
+}
+
+function getForm() {
+  return configForm;
+}
+
+const editableKeys = ref([
+  {
+    key: "value",
+    label: "默认值",
+    onSet(item: any) {
+      configForm[item.key]["value"] = item.value ?? null;
+    },
+    defaultRender(item: any) {
+      return () => {
+        return item["value"] ?? "";
+      };
+    },
+    editRender(item: any) {
+      return () => {
+        return <fs-component-render {...item.component} vModel:modelValue={configForm[item.key]["value"]} scope={getScope()} />;
+      };
+    },
+  },
+  {
+    key: "show",
+    label: "是否显示",
+    onSet(item: any) {
+      configForm[item.key]["show"] = item.show ?? true;
+    },
+    defaultRender(item: any) {
+      return () => {
+        const value = item["show"];
+        return value === false ? "不显示" : "显示";
+      };
+    },
+    editRender(item: any) {
+      return () => {
+        return <a-switch vModel:checked={configForm[item.key]["show"]} />;
+      };
+    },
+  },
+  {
+    key: "helper",
+    label: "帮助说明",
+    onSet(item: any) {
+      configForm[item.key]["helper"] = item.helper ?? "";
+    },
+    defaultRender(item: any) {
+      return () => {
+        return <pre class={"helper"}>{item["helper"]}</pre>;
+      };
+    },
+    editRender(item: any) {
+      return () => {
+        return <a-textarea rows={5} vModel:value={configForm[item.key]["helper"]} />;
+      };
+    },
+  },
+]);
+
+const originInputs = computed(() => {
+  if (!currentPlugin.value) {
+    return;
+  }
+  const input = cloneDeep(currentPlugin.value.input);
+  const newInputs: any = {};
+
+  for (const key in input) {
+    const value = input[key];
+    value.key = key;
+    const newInput: any = cloneDeep(value);
+    newInputs[key] = newInput;
+  }
+  return newInputs;
+});
+
+function clearFormValue(key: string) {
+  unset(configForm, key);
+  console.log(key, configForm);
+}
+
+async function loadPluginSetting() {
+  currentPlugin.value = await pluginStore.getPluginDefineFromOrigin(props.plugin.name);
+  for (const key in currentPlugin.value.input) {
+    configForm[key] = {};
+  }
+  const setting = props.plugin.sysSetting;
+  if (setting) {
+    const settingJson = JSON.parse(setting);
+    merge(configForm, settingJson.metadata?.input || {});
+  }
+}
+
+onMounted(async () => {
+  await loadPluginSetting();
+});
+
+defineExpose({
+  getForm,
+});
+</script>
+
+<style lang="less">
+.plugin-config {
+  pre {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+}
+</style>
@@ -1,11 +1,14 @@
 import * as api from "./api";
 import { useI18n } from "/src/locales";
-import { Ref, ref } from "vue";
+import { Ref, ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { Modal, notification } from "ant-design-vue";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { Modal } from "ant-design-vue";
 //@ts-ignore
 import yaml from "js-yaml";
+import { usePluginImport } from "./use-import";
+import { usePluginConfig } from "./use-config";
+import { useSettingStore } from "/src/store/settings/index";

 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const router = useRouter();
@@ -35,75 +38,11 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat

  const selectedRowKeys: Ref<any[]> = ref([]);
  context.selectedRowKeys = selectedRowKeys;
-  const { openCrudFormDialog } = useFormWrapper();

-  async function openImportDialog() {
-    function createCrudOptions() {
-      return {
-        crudOptions: {
-          columns: {
-            content: {
-              title: t("certd.pluginFile"),
-              type: "text",
-              form: {
-                component: {
-                  name: "pem-input",
-                  vModel: "modelValue",
-                  textarea: {
-                    rows: 8,
-                  },
-                },
-                col: {
-                  span: 24,
-                },
-                helper: t("certd.selectPluginFile"),
-              },
-            },
-            override: {
-              title: t("certd.overrideSameName"),
-              type: "dict-switch",
-              dict: dict({
-                data: [
-                  {
-                    value: true,
-                    label: t("certd.override"),
-                  },
-                  {
-                    value: false,
-                    label: t("certd.noOverride"),
-                  },
-                ],
-              }),
-              form: {
-                value: false,
-                col: {
-                  span: 24,
-                },
-                helper: t("certd.overrideHelper"),
-              },
-            },
-          },
-          form: {
-            wrapper: {
-              title: t("certd.importPlugin"),
-              saveRemind: false,
-            },
-            afterSubmit() {
-              notification.success({ message: t("certd.operationSuccess") });
-              crudExpose.doRefresh();
-            },
-            async doSubmit({ form }: any) {
-              return await api.ImportPlugin({
-                ...form,
-              });
-            },
-          },
-        },
-      };
-    }
-    const { crudOptions } = createCrudOptions();
-    await openCrudFormDialog({ crudOptions });
-  }
+  const { openImportDialog } = usePluginImport();
+  const { openConfigDialog } = usePluginConfig();
+
+  const settingStore = useSettingStore();
  return {
    crudOptions: {
      settings: {
@@ -139,7 +78,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
            text: t("certd.import"),
            type: "primary",
            async click() {
-              await openImportDialog();
+              await openImportDialog({ crudExpose });
            },
          },
        },
@@ -186,6 +125,21 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
              }
            },
          },
+          config: {
+            show: computed(() => {
+              return settingStore.isComm;
+            }),
+            text: null,
+            icon: "ion:settings-outline",
+            title: t("certd.config"),
+            type: "link",
+            async click({ row }) {
+              await openConfigDialog({
+                row,
+                crudExpose,
+              });
+            },
+          },
        },
      },
      table: {
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps<{ value: any }>();
+
+const emits = defineEmits(["set", "clear"]);
+function setValue() {
+  emits("set");
+}
+function clearValue() {
+  emits("clear");
+}
+</script>
+
+<template>
+  <div class="rollbackable">
+    <div class="flex">
+      <div style="width: 100px">
+        <a-tag v-if="value === undefined" color="green" size="small" class="pointer flex-inline items-center" @click.stop="setValue">
+          <fs-icon icon="material-symbols:edit" class="mr-5"></fs-icon>
+          自定义
+        </a-tag>
+        <a-tag v-else color="red" size="small" class="pointer flex-inline items-center" @click.stop="clearValue">
+          <fs-icon icon="material-symbols:undo" class="mr-5"></fs-icon>
+          还原
+        </a-tag>
+      </div>
+      <div class="flex-1 overflow-hidden value-render">
+        <slot v-if="value === undefined" name="default"></slot>
+        <slot v-else name="edit"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.rollbackable {
+  .value-render {
+    .ant-select,
+    .ant-input {
+      width: 100%;
+    }
+  }
+}
+</style>
@@ -0,0 +1,79 @@
+import * as api from "/@/views/sys/plugin/api";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+import { useI18n } from "/@/locales";
+import { notification } from "ant-design-vue";
+import ConfigEditor from "./config-editor.vue";
+import { ref } from "vue";
+import { usePluginStore } from "/@/store/plugin";
+
+export function usePluginConfig() {
+  const { openCrudFormDialog } = useFormWrapper();
+  const { t } = useI18n();
+
+  const pluginStore = usePluginStore();
+  // @ts-ignore
+  async function openConfigDialog({ row, crudExpose }) {
+    const configEditorRef = ref();
+    function createCrudOptions() {
+      return {
+        crudOptions: {
+          columns: {},
+          form: {
+            wrapper: {
+              width: "80%",
+              title: "插件参数自定义",
+              saveRemind: false,
+              slots: {
+                "form-body-top": () => {
+                  return (
+                    <div>
+                      <ConfigEditor ref={configEditorRef} plugin={row}></ConfigEditor>
+                    </div>
+                  );
+                },
+              },
+            },
+            afterSubmit() {
+              notification.success({ message: t("certd.operationSuccess") });
+              crudExpose.doRefresh();
+            },
+            async doSubmit({}: any) {
+              const form = configEditorRef.value.getForm();
+              const newForm: any = {};
+              for (const key in form) {
+                const value = form[key];
+                if (value && Object.keys(value).length > 0) {
+                  newForm[key] = value;
+                }
+              }
+              const res = await api.savePluginSetting({
+                name: row.name,
+                sysSetting: {
+                  metadata: {
+                    input: newForm,
+                  },
+                },
+              });
+              await pluginStore.clear();
+              return res;
+            },
+          },
+        },
+      };
+    }
+    const { crudOptions } = createCrudOptions();
+    await openCrudFormDialog({ crudOptions });
+
+    // modal.confirm({
+    //   title: "插件元数据配置",
+    //   width: "80%",
+    //   content: () => {
+    //     return <ConfigEditor plugin={row}></ConfigEditor>;
+    //   },
+    // });
+  }
+
+  return {
+    openConfigDialog,
+  };
+}
@@ -0,0 +1,80 @@
+import * as api from "/@/views/sys/plugin/api";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+import { useI18n } from "/@/locales";
+import { Modal, notification } from "ant-design-vue";
+export function usePluginImport() {
+  const { openCrudFormDialog } = useFormWrapper();
+  const { t } = useI18n();
+
+  async function openImportDialog({ crudExpose }) {
+    function createCrudOptions() {
+      return {
+        crudOptions: {
+          columns: {
+            content: {
+              title: t("certd.pluginFile"),
+              type: "text",
+              form: {
+                component: {
+                  name: "pem-input",
+                  vModel: "modelValue",
+                  textarea: {
+                    rows: 8,
+                  },
+                },
+                col: {
+                  span: 24,
+                },
+                helper: t("certd.selectPluginFile"),
+              },
+            },
+            override: {
+              title: t("certd.overrideSameName"),
+              type: "dict-switch",
+              dict: dict({
+                data: [
+                  {
+                    value: true,
+                    label: t("certd.override"),
+                  },
+                  {
+                    value: false,
+                    label: t("certd.noOverride"),
+                  },
+                ],
+              }),
+              form: {
+                value: false,
+                col: {
+                  span: 24,
+                },
+                helper: t("certd.overrideHelper"),
+              },
+            },
+          },
+          form: {
+            wrapper: {
+              title: t("certd.importPlugin"),
+              saveRemind: false,
+            },
+            afterSubmit() {
+              notification.success({ message: t("certd.operationSuccess") });
+              crudExpose.doRefresh();
+            },
+            async doSubmit({ form }: any) {
+              return await api.ImportPlugin({
+                ...form,
+              });
+            },
+          },
+        },
+      };
+    }
+    const { crudOptions } = createCrudOptions();
+    await openCrudFormDialog({ crudOptions });
+  }
+
+  return {
+    openImportDialog,
+  };
+}
@@ -45,6 +45,7 @@
          <a-form-item :label="t('certd.smsProvider')" :name="['private', 'sms', 'type']">
            <a-select v-model:value="formState.private.sms.type" @change="smsTypeChange">
              <a-select-option value="aliyun">{{ t("certd.aliyunSms") }}</a-select-option>
+              <a-select-option value="tencent">{{ t("certd.tencentSms") }}</a-select-option>
              <a-select-option value="yfysms">{{ t("certd.yfySms") }}</a-select-option>
            </a-select>
          </a-form-item>