aibox-custom-component-packages 0.0.6 → 0.0.8

package/es/CreateMcpForm.mjs

@@ -0,0 +1,385 @@
+import { w as k } from "./chunks/index.bCzIhWFw.js";
+import { ref as R, reactive as S, watch as x, createBlock as d, openBlock as C, unref as e, withCtx as u, createVNode as i, createCommentVNode as f, createElementVNode as m, toDisplayString as E, createTextVNode as h } from "vue";
+import { ElForm as Q, ElFormItem as p, ElTooltip as b, ElIcon as F, ElInput as M, ElMessage as T } from "element-plus";
+import { IconTip as U } from "color-message-aibox-vue";
+import { u as K } from "./chunks/usePreview.BHvXwaNi.js";
+import { AuthSection as H } from "./AuthSection.mjs";
+import { RadioGroup as j } from "./RadioGroup.mjs";
+import { u as g } from "./chunks/i18n.k9Q_HVMs.js";
+import "./AddOrEditSupplierDialog.mjs";
+import { FileUploader as q } from "./FileUploader.mjs";
+import { MdEditor as z } from "./MdEditor.mjs";
+import { _ as W } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import { FilePreview as X } from "./FilePreview.mjs";
+import './assets/CreateMcpForm.css';const G = () => {
+  const { t: s } = g();
+  return {
+    rulesObj: {
+      name: [
+        {
+          required: !0,
+          message: s("LIBRARY_CREATEMCPFORM.MCP_NAME_PLACEHOLDER"),
+          trigger: "blur"
+        },
+        {
+          max: 20,
+          message: s("LIBRARY_CREATEMCPFORM.MCP_NAME_MAX"),
+          trigger: "blur"
+        }
+      ],
+      description: [
+        {
+          required: !0,
+          message: s("LIBRARY_CREATEMCPFORM.MCP_DESCRIPTION_REQUIRED"),
+          trigger: "blur"
+        },
+        {
+          max: 200,
+          message: s("LIBRARY_CREATEMCPFORM.MCP_DESCRIPTION_MAX"),
+          trigger: "blur"
+        }
+      ],
+      overview: [
+        {
+          required: !0,
+          message: s("LIBRARY_CREATEMCPFORM.MCP_OVERVIEW_REQUIRED"),
+          trigger: "blur"
+        }
+      ],
+      address: [
+        {
+          type: "url",
+          required: !0,
+          message: s("LIBRARY_CREATEMCPFORM.SERVICE_URL_INVALID"),
+          trigger: ["blur", "change"]
+        }
+      ],
+      communicationType: [
+        {
+          required: !0,
+          message: s("LIBRARY_CREATEMCPFORM.TRANSFER_METHOD_REQUIRED"),
+          trigger: "change"
+        }
+      ],
+      applyLink: [
+        {
+          type: "url",
+          message: s("LIBRARY_CREATEMCPFORM.DOCUMENTATION_URL_INVALID"),
+          trigger: ["blur", "change"]
+        }
+      ]
+    },
+    communicationTypeOpts: [
+      { label: "SSE", value: "SSE" },
+      { label: "Streamable HTTP", value: "HTTP" }
+    ]
+  };
+}, Z = { class: "label-with-icon" }, $ = { class: "label-with-icon" }, J = { class: "auth-section-wrapper" }, ee = {
+  __name: "CreateMcpForm",
+  props: {
+    // 控制是否显示 MCP 概览字段
+    showOverview: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(s, { expose: O }) {
+    const _ = s, { t } = g(), { previewImage: w } = K(), v = R(null), I = R(null), { rulesObj: P, communicationTypeOpts: V } = G(), l = S({
+      icon: "",
+      iconUrl: "",
+      name: "",
+      description: "",
+      overview: "",
+      communicationType: "HTTP",
+      // 默认值改为与 options 中的 value 匹配
+      address: "",
+      applyLink: ""
+    }), N = R(V), o = R({
+      auth: {
+        authType: "none",
+        keyType: "custom",
+        paramLocation: "header",
+        paramName: "",
+        paramValue: "",
+        token: ""
+      }
+    }), A = R({
+      ...P
+    }), L = () => {
+      _.showOverview ? A.value.overview = P.overview : delete A.value.overview;
+    };
+    x(
+      () => _.showOverview,
+      () => {
+        L();
+      },
+      { immediate: !0 }
+    );
+    const c = R([]), D = (a) => {
+      l.iconUrl = a.url, l.icon = a.bnid, c.value = [a];
+    }, B = () => {
+      l.iconUrl = "", l.icon = "", c.value = [];
+    }, Y = (a) => {
+      w(a.url);
+    };
+    return O({ validate: async (a) => {
+      if (!v.value) return !1;
+      if (L(), I.value?.validateField) {
+        const r = I.value.validateField();
+        if (Object.keys(r).length > 0)
+          return r.paramName ? T.error(
+            t("LIBRARY_CREATEMCPFORM.PARAMETER_NAME_REQUIRED") || "请输入密钥参数名"
+          ) : r.paramValue ? T.error(
+            t("LIBRARY_CREATEMCPFORM.INPUT_API_KEY_REQUIRED") || "请输入密钥值"
+          ) : r.token ? T.error(
+            t("LIBRARY_CREATEMCPFORM.INPUT_API_KEY_REQUIRED") || "请输入密钥值"
+          ) : T.error(
+            t("LIBRARY_CREATEMCPFORM.MCP_AUTH_REQUIRED") || "请完善鉴权信息"
+          ), a?.(
+            new Error(
+              t("LIBRARY_CREATEMCPFORM.MCP_AUTH_REQUIRED") || "请完善鉴权信息"
+            )
+          ), !1;
+      }
+      return v.value.validate(a);
+    }, getFormData: () => ({
+      name: l.name,
+      icon: l.icon,
+      // iconUrl: ruleForm.iconUrl,
+      description: l.description,
+      overview: _.showOverview ? l.overview : "",
+      // 根据是否显示返回概览值
+      address: l.address,
+      communicationType: l.communicationType,
+      // 鉴权相关字段
+      authType: o.value.auth.authType === "none" ? 0 : 1,
+      // none->0, apiKey->1
+      authLocation: o.value.auth.paramLocation === "header" ? 0 : 1,
+      // header->0, query->1
+      apiKeyName: o.value.auth.keyType === "bearer" ? "Authorization" : o.value.auth.paramName || "",
+      apiKeyValue: o.value.auth.keyType === "bearer" ? o.value.auth.token ? `Bearer ${o.value.auth.token}` : "" : o.value.auth.paramValue || "",
+      // 可选字段
+      applyLink: l.applyLink || "",
+      headerPrefixType: 1
+    }), setFormData: (a) => {
+      if (!a) return;
+      Object.assign(l, {
+        name: a.name || "",
+        description: a.description || "",
+        overview: a.overview || "",
+        icon: a.icon || "",
+        iconUrl: a.iconUrl || "",
+        communicationType: a.communicationType || "SSE",
+        address: a.address || "",
+        applyLink: a.applyLink || ""
+      });
+      const r = a.authType === 1 || a.authType === "1";
+      if (o.value.auth.authType = r ? "apiKey" : "none", o.value.auth.paramLocation = a.authLocation === 0 || a.authLocation === "0" ? "header" : "query", r) {
+        const n = !a.apiKeyName || a.apiKeyName === "Authorization";
+        if (o.value.auth.keyType = n ? "bearer" : "custom", n) {
+          o.value.auth.paramName = "", o.value.auth.paramValue = "";
+          const y = a.apiKeyValue || "";
+          o.value.auth.token = y.startsWith("Bearer ") ? y.substring(7) : y;
+        } else
+          o.value.auth.paramName = a.apiKeyName || "", o.value.auth.paramValue = a.apiKeyValue || "", o.value.auth.token = "";
+      } else
+        o.value.auth.keyType = "custom", o.value.auth.paramName = "", o.value.auth.paramValue = "", o.value.auth.token = "";
+      a.icon && a.icon !== "0" && a.iconUrl && (c.value = [{ bnid: a.icon, url: a.iconUrl }]);
+    } }), (a, r) => (C(), d(e(Q), {
+      ref_key: "ruleFormRef",
+      ref: v,
+      model: l,
+      rules: A.value,
+      "label-width": "auto",
+      "label-position": "top",
+      class: "scrollable-form"
+    }, {
+      default: u(() => [
+        i(e(p), {
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.MCP_ICON"),
+          prop: "icon"
+        }, {
+          label: u(() => [
+            m("div", Z, [
+              m("span", null, E(e(t)("LIBRARY_CREATEMCPFORM.MCP_ICON")), 1),
+              i(e(b), { placement: "top" }, {
+                content: u(() => [
+                  h(E(e(t)("LIBRARY_CREATEMCPFORM.MCP_ICON_TIP")), 1),
+                  r[7] || (r[7] = m("br", null, null, -1)),
+                  h(" " + E(e(t)("LIBRARY_CREATEMCPFORM.MCP_ICON_SIZE_TIP")), 1)
+                ]),
+                default: u(() => [
+                  i(e(F), {
+                    size: "14px",
+                    color: "#999"
+                  }, {
+                    default: u(() => [
+                      i(e(U))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: u(() => [
+            i(e(X), {
+              fileList: c.value,
+              previewType: "Card",
+              isCustom: !0,
+              onOnRemove: B,
+              onOnPreview: Y
+            }, {
+              CardUploader: u(() => [
+                c.value.length === 0 ? (C(), d(e(q), {
+                  key: 0,
+                  "upload-type": "Card",
+                  onOnSuccess: D,
+                  limitSize: 5,
+                  acceptType: ".jpg,.png",
+                  businessType: "mcp",
+                  defaultUploadIcon: "mcp"
+                })) : f("", !0)
+              ]),
+              _: 1
+            }, 8, ["fileList"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        i(e(p), {
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.MCP_NAME"),
+          prop: "name"
+        }, {
+          default: u(() => [
+            i(e(M), {
+              modelValue: l.name,
+              "onUpdate:modelValue": r[0] || (r[0] = (n) => l.name = n),
+              placeholder: e(t)("LIBRARY_CREATEMCPFORM.MCP_NAME_REQUIRED"),
+              maxlength: "20",
+              "show-word-limit": ""
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        i(e(p), {
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.MCP_DESCRIPTION"),
+          prop: "description"
+        }, {
+          default: u(() => [
+            i(e(M), {
+              modelValue: l.description,
+              "onUpdate:modelValue": r[1] || (r[1] = (n) => l.description = n),
+              type: "textarea",
+              rows: 3,
+              placeholder: e(t)("LIBRARY_CREATEMCPFORM.MCP_DESCRIPTION_REQUIRED"),
+              maxlength: "200",
+              "show-word-limit": ""
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        s.showOverview ? (C(), d(e(p), {
+          key: 0,
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.MCP_OVERVIEW"),
+          prop: "overview"
+        }, {
+          default: u(() => [
+            i(e(z), {
+              modelValue: l.overview,
+              "onUpdate:modelValue": r[2] || (r[2] = (n) => l.overview = n),
+              height: "300px",
+              placeholder: e(t)("LIBRARY_CREATEMCPFORM.MCP_OVERVIEW_REQUIRED"),
+              businessType: "mcp"
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["label"])) : f("", !0),
+        i(e(p), {
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.TRANSFER_METHOD"),
+          prop: "communicationType"
+        }, {
+          default: u(() => [
+            i(e(j), {
+              modelValue: l.communicationType,
+              "onUpdate:modelValue": r[3] || (r[3] = (n) => l.communicationType = n),
+              options: N.value,
+              layout: "vertical",
+              "class-name": "scrollable-form__item-radio"
+            }, null, 8, ["modelValue", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        i(e(p), {
+          class: "scrollable-form__item",
+          label: e(t)("LIBRARY_CREATEMCPFORM.SERVICE_URL"),
+          prop: "address"
+        }, {
+          default: u(() => [
+            i(e(M), {
+              modelValue: l.address,
+              "onUpdate:modelValue": r[4] || (r[4] = (n) => l.address = n),
+              placeholder: e(t)("LIBRARY_CREATEMCPFORM.SERVICE_URL_REQUIRED")
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        o.value.auth.authType === "apiKey" ? (C(), d(e(p), {
+          key: 1,
+          class: "scrollable-form__item",
+          prop: "applyLink"
+        }, {
+          label: u(() => [
+            m("div", $, [
+              m("span", null, E(e(t)("LIBRARY_CREATEMCPFORM.DOCUMENTATION_URL")), 1),
+              i(e(b), { placement: "top" }, {
+                content: u(() => [
+                  h(E(e(t)("LIBRARY_CREATEMCPFORM.DOCUMENTATION_URL_TIP")), 1)
+                ]),
+                default: u(() => [
+                  i(e(F), {
+                    size: "14px",
+                    color: "#999"
+                  }, {
+                    default: u(() => [
+                      i(e(U))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: u(() => [
+            i(e(M), {
+              modelValue: l.applyLink,
+              "onUpdate:modelValue": r[5] || (r[5] = (n) => l.applyLink = n),
+              placeholder: e(t)("LIBRARY_CREATEMCPFORM.DOCUMENTATION_URL_REQUIRED")
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          _: 1
+        })) : f("", !0),
+        m("div", J, [
+          i(e(H), {
+            ref_key: "authSectionRef",
+            ref: I,
+            featData: o.value,
+            "onUpdate:featData": r[6] || (r[6] = (n) => o.value = n),
+            layout: "vertical"
+          }, null, 8, ["featData"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["model", "rules"]));
+  }
+}, ae = /* @__PURE__ */ W(ee, [["__scopeId", "data-v-b8579cd8"]]), Me = k(ae);
+export {
+  Me as CreateMcpForm,
+  Me as default
+};