perf(plugin): 在线插件编辑支持配置第三方依赖和插件依赖

packages/ui/certd-client/src/components/plugins/common/kv-input.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="kv-input">
+    <div v-for="(item, index) of items" :key="index" class="kv-row">
+      <a-input :value="item.key" placeholder="名称" class="kv-key" @input="onKeyChange(index, $event)" @blur="emitValue" />
+      <span class="kv-sep">:</span>
+      <a-input :value="item.value" placeholder="版本" class="kv-value" @input="onValueChange(index, $event)" @blur="emitValue" />
+      <a-button type="link" danger @click="removeItem(index)">
+        <template #icon><DeleteOutlined /></template>
+      </a-button>
+    </div>
+    <a-button type="dashed" block @click="addItem">
+      <template #icon><PlusOutlined /></template>
+      添加
+    </a-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons-vue";
+
+const props = defineProps<{
+  modelValue: Record<string, string>;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: Record<string, string>): void;
+}>();
+
+interface KvItem {
+  key: string;
+  value: string;
+}
+
+const items = ref<KvItem[]>([]);
+
+function initItems(val: Record<string, string>) {
+  if (val && typeof val === "object" && !Array.isArray(val)) {
+    items.value = Object.entries(val).map(([k, v]) => ({
+      key: k,
+      value: v ?? "",
+    }));
+  } else {
+    items.value = [];
+  }
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    initItems(val);
+  },
+  { deep: true, immediate: true }
+);
+
+function rebuildRecord(): Record<string, string> {
+  const record: Record<string, string> = {};
+  for (const item of items.value) {
+    const k = item.key?.trim();
+    if (k) {
+      record[k] = item.value?.trim() ?? "";
+    }
+  }
+  return record;
+}
+
+function emitValue() {
+  emit("update:modelValue", rebuildRecord());
+}
+
+function onKeyChange(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  items.value[index].key = target.value;
+}
+
+function onValueChange(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  items.value[index].value = target.value;
+}
+
+function addItem() {
+  items.value.push({ key: "", value: "" });
+}
+
+function removeItem(index: number) {
+  items.value.splice(index, 1);
+  emitValue();
+}
+</script>
+
+<style lang="less" scoped>
+.kv-input {
+  .kv-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 4px;
+    .kv-key {
+      flex: 1;
+      min-width: 0;
+    }
+    .kv-sep {
+      flex-shrink: 0;
+      padding: 0 2px;
+      color: #999;
+    }
+    .kv-value {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+</style>

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

@@ -26,7 +26,9 @@ export default {
   store: "Store",
   version: "Version",
   pluginDependencies: "Plugin Dependencies",
-  pluginDependenciesHelper: "Dependencies to install first in format: [author/]pluginName[:version]",
+  pluginDependenciesHelper: "Format: [author/]pluginName[:version]. Required plugins must be installed first",
+  thirdPartyDependencies: "Third-party Dependencies",
+  thirdPartyDependenciesHelper: "Format: npmPackageName: version. Auto-installed at runtime",
   editableRunStrategy: "Editable Run Strategy",
   editable: "Editable",
   notEditable: "Not Editable",

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

@@ -27,6 +27,8 @@ export default {
   version: "版本",
   pluginDependencies: "插件依赖",
   pluginDependenciesHelper: "格式: [作者/]插件名[:版本]，需先安装依赖插件",
+  thirdPartyDependencies: "第三方依赖",
+  thirdPartyDependenciesHelper: "格式: npm包名: 版本号，运行时自动安装",
   editableRunStrategy: "可编辑运行策略",
   editable: "可编辑",
   notEditable: "不可编辑",

packages/ui/certd-client/src/views/sys/plugin/crud.tsx

@@ -7,6 +7,7 @@ import { Modal, message } from "ant-design-vue";
 //@ts-ignore
 import yaml from "js-yaml";
 import { usePluginImport } from "./use-import";
+import KvInput from "/@/components/plugins/common/kv-input.vue";
 import { usePluginConfig } from "./use-config";
 import { useSettingStore } from "/src/store/settings/index";
 import { usePluginStore } from "/@/store/plugin";
@@ -37,6 +38,10 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
     return res;
   };
 
+  // const infoRequest = async ({ row }: AddReq) => {
+  //   return await api.GetObj(row.id);
+  // };
+
   const selectedRowKeys: Ref<any[]> = ref([]);
   context.selectedRowKeys = selectedRowKeys;
 
@@ -66,6 +71,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         addRequest,
         editRequest,
         delRequest,
+        // infoRequest,
       },
       actionbar: {
         buttons: {
@@ -187,6 +193,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
                 id: opts.res.id,
               },
             });
+          } else {
+            crudExpose.doRefresh();
           }
         },
       },
@@ -363,10 +371,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           type: "text",
           form: {
             component: {
-              name: "a-select",
-              mode: "tags",
-              open: false,
-              allowClear: true,
+              name: KvInput,
+              vModel: "modelValue",
             },
             helper: t("certd.pluginDependenciesHelper"),
           },
@@ -374,6 +380,20 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             show: false,
           },
         },
+        "extra.dependPackages": {
+          title: t("certd.thirdPartyDependencies"),
+          type: "text",
+          form: {
+            component: {
+              name: KvInput,
+              vModel: "modelValue",
+            },
+            helper: t("certd.thirdPartyDependenciesHelper"),
+          },
+          column: {
+            show: false,
+          },
+        },
         "extra.showRunStrategy": {
           title: t("certd.editableRunStrategy"),
           type: "dict-switch",
@@ -419,12 +439,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             show: false,
           },
           valueBuilder({ row }) {
-            if (row.extra) {
+            if (typeof row.extra === "string") {
               row.extra = yaml.load(row.extra);
             }
           },
           valueResolve({ row }) {
-            if (row.extra) {
+            if (row.extra && typeof row.extra === "object") {
               row.extra = yaml.dump(row.extra);
             }
           },