@matechat/core 1.9.0 → 1.10.0-alpha.0

package/Attachment/index.css

@@ -0,0 +1 @@
+.mc-alert{position:fixed;top:50px;left:50%;transform:translate(-50%);padding:10px;border-radius:var(--devui-border-radius, 2px);transition:all .3s ease-in-out;z-index:10000}.mc-alert--error{background-color:var(--devui-info-bg, #e9edfa)}.mc-alert__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mc-alert__title{font-weight:700;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.mc-alert__close-btn{background:none;border:none;cursor:pointer;font-size:16px;color:var(--devui-aide-text, #71757f)}.mc-alert__close-btn:hover{color:var(--devui-text, #252b3a)}.mc-alert__content{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f)}.mc-alert__message{white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:inherit}.mc-alert-fade-enter-from,.mc-alert-fade-leave-to{opacity:0;transform:translate(-50%) translateY(-100%)}.mc-attachment{display:inline-block;cursor:pointer;position:relative}.mc-attachment .mc-attachment-file{display:none}.mc-attachment .mc-attachment-default-trigger{padding:4px 8px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size-sm, 12px);cursor:pointer;outline:none;transition:all .3s ease;box-sizing:border-box;border:1px solid transparent}.mc-attachment .mc-attachment-default-trigger:disabled{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3)}.mc-attachment-drag-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 40px;background-color:var(--devui-base-bg, #ffffff);border:2px dashed var(--devui-brand, #5e7ce0);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700;z-index:9999;pointer-events:none}.mc-attachment-drag-modal.is-disabled{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a)}

package/Attachment/index.js

@@ -0,0 +1,387 @@
+import "./index.css";
+import { createApp as $, h as H, defineComponent as P, ref as D, onMounted as R, createBlock as j, openBlock as v, Transition as L, withCtx as W, createElementBlock as F, createCommentVNode as E, normalizeClass as S, createElementVNode as g, toDisplayString as _, computed as Y, onUnmounted as X, mergeModels as M, useModel as G, Fragment as N, unref as u, renderSlot as J, Teleport as K, createTextVNode as V } from "vue";
+import { useMcI18n as q } from "@matechat/core/Locale";
+const Q = {
+  uploadOptions: {
+    type: Object,
+    default: {}
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  accept: {
+    type: String,
+    default: ""
+  },
+  maxCount: {
+    type: Number,
+    default: Number.POSITIVE_INFINITY
+  },
+  maxSize: {
+    type: Number,
+    default: Number.POSITIVE_INFINITY
+  },
+  multiple: {
+    type: Boolean,
+    default: !0
+  },
+  draggable: {
+    type: Boolean,
+    default: !0
+  },
+  beforeUpload: {
+    type: Function,
+    default: null
+  }
+}, Z = {
+  change: (e, s) => e instanceof File && Array.isArray(s),
+  success: (e, s, t) => e instanceof File && Array.isArray(t),
+  error: (e, s, t) => e instanceof File && Array.isArray(t),
+  progress: (e, s) => e instanceof File && Array.isArray(s),
+  drop: (e) => Array.isArray(e)
+}, ee = { class: "mc-alert__header" }, te = { class: "mc-alert__title" }, ae = { class: "mc-alert__content" }, ne = { class: "mc-alert__message" };
+function z(e) {
+  const s = document.createElement("div");
+  document.body.appendChild(s);
+  const t = $({
+    render() {
+      return H(se, {
+        ...e,
+        // 这个函数将作为 'onClose' prop 传递给 AlertComponent 实例
+        onClose: () => {
+          t.unmount(), s.parentNode && s.parentNode.removeChild(s);
+        }
+      });
+    }
+  });
+  t.mount(s);
+}
+const se = /* @__PURE__ */ P({
+  __name: "Alert",
+  props: {
+    type: {
+      type: String,
+      default: "info"
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    message: {
+      type: String,
+      required: !0
+    },
+    duration: {
+      type: Number,
+      default: 4500
+    },
+    // 这个 prop 由上面的 showAlert 函数传入
+    onClose: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const s = e, t = D(!1);
+    R(() => {
+      t.value = !0, s.duration > 0 && setTimeout(l, s.duration);
+    });
+    function l() {
+      t.value = !1, setTimeout(() => {
+        s.onClose();
+      }, 300);
+    }
+    return (m, f) => (v(), j(L, { name: "mc-alert-fade" }, {
+      default: W(() => [
+        t.value ? (v(), F(
+          "div",
+          {
+            key: 0,
+            class: S(["mc-alert", `mc-alert--${e.type}`])
+          },
+          [
+            g("div", ee, [
+              g(
+                "span",
+                te,
+                _(e.title),
+                1
+                /* TEXT */
+              ),
+              g("button", {
+                class: "mc-alert__close-btn",
+                onClick: l
+              }, "✕")
+            ]),
+            g("div", ae, [
+              g(
+                "pre",
+                ne,
+                _(e.message),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )) : E("v-if", !0)
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+});
+function oe(e) {
+  const { file: s, options: t, onProgress: l, onSuccess: m, onError: f } = e, a = new XMLHttpRequest();
+  a.upload.onprogress = (i) => {
+    if (i.lengthComputable) {
+      const h = Math.round(i.loaded * 100 / i.total);
+      l(h);
+    }
+  }, a.onerror = () => {
+    f({
+      message: "Upload failed due to a network error.",
+      status: a.status,
+      statusText: a.statusText
+    });
+  }, a.onload = () => {
+    if (a.status >= 200 && a.status < 300) {
+      const i = t.responseType === "text" || !a.response ? a.responseText : a.response;
+      m(i);
+    } else
+      f({
+        message: `Upload failed with status: ${a.status}`,
+        status: a.status,
+        statusText: a.statusText,
+        response: a.response
+      });
+  };
+  const p = new FormData(), b = t.fileFieldName || "file";
+  if (p.append(b, s, s.name), t.additionalParameter)
+    for (const i of Object.keys(t.additionalParameter))
+      p.append(i, t.additionalParameter[i]);
+  if (a.open(t.method || "POST", t.uri, !0), t.withCredentials && (a.withCredentials = !0), t.responseType && (a.responseType = t.responseType), t.headers)
+    for (const i of Object.keys(t.headers))
+      a.setRequestHeader(i, t.headers[i]);
+  if (t.authToken) {
+    const i = t.authTokenHeader || "Authorization";
+    a.setRequestHeader(i, t.authToken);
+  }
+  a.send(p);
+}
+let re = Date.now();
+function le(e, s, t, l) {
+  const { t: m } = q(), f = D(!1);
+  let a = 0;
+  const p = Y(() => e.disabled || l.value.length >= e.maxCount), b = (n) => {
+    const d = URL.createObjectURL(n);
+    return {
+      uid: re++,
+      name: n.name,
+      size: n.size,
+      type: n.type,
+      status: "uploading",
+      percentage: 0,
+      url: d,
+      thumbUrl: d
+    };
+  }, i = async (n) => {
+    if (n.length === 0) return;
+    if (l.value.length + n.length > e.maxCount) {
+      z({
+        type: "error",
+        title: m("Attachment.exceedCountTitle"),
+        message: m("Attachment.exceedCountMessage", {
+          maxCount: e.maxCount
+        })
+      });
+      return;
+    }
+    const d = [], c = [];
+    for (const o of n) {
+      let r = !0;
+      if (e.accept && e.accept !== "*") {
+        const C = e.accept.split(",").map((y) => y.trim().toLowerCase()), k = o.type.toLowerCase(), B = o.name.toLowerCase();
+        C.some((y) => y.endsWith("/*") ? k.startsWith(y.slice(0, -1)) : y.startsWith(".") ? B.endsWith(y) : k === y) || (c.push(
+          m("Attachment.unsupportedFileType", { fileName: o.name })
+        ), r = !1);
+      }
+      if (r && o.size / 1024 / 1024 > e.maxSize && (c.push(
+        m("Attachment.exceedSizeLimit", {
+          fileName: o.name,
+          maxSize: e.maxSize
+        })
+      ), r = !1), r && e.beforeUpload)
+        try {
+          await Promise.resolve(e.beforeUpload(o)) === !1 && (c.push(
+            m("Attachment.uploadRejected", { fileName: o.name })
+          ), r = !1);
+        } catch (C) {
+          const k = C instanceof Error ? C.message : String(C);
+          c.push(
+            m("Attachment.beforeUploadFailed", {
+              fileName: o.name,
+              errorMsg: k
+            })
+          ), r = !1;
+        }
+      r && d.push(o);
+    }
+    if (c.length > 0 && z({
+      type: "error",
+      title: m("Attachment.uploadFailedTitle"),
+      message: c.join(`
+`)
+    }), d.length !== 0)
+      for (const o of d) {
+        const r = b(o);
+        l.value.push(r), s("change", o, [...l.value]), h(o, r);
+      }
+  }, h = (n, d) => {
+    const c = () => l.value.findIndex((o) => o.uid === d.uid);
+    oe({
+      file: n,
+      options: e.uploadOptions,
+      onProgress: (o) => {
+        const r = c();
+        r > -1 && (l.value[r].percentage = o, s("progress", n, [...l.value]));
+      },
+      onSuccess: (o) => {
+        const r = c();
+        r > -1 && (l.value[r].status = "success", l.value[r].response = o, s("success", n, o, [...l.value]));
+      },
+      onError: (o) => {
+        const r = c();
+        r > -1 && (l.value[r].status = "uploadError", l.value[r].error = o, s("error", n, o, [...l.value]));
+      }
+    });
+  }, x = (n) => {
+    const d = n.target.files;
+    d && i(Array.from(d));
+  }, A = () => {
+    var n;
+    p.value || (n = t.value) == null || n.click();
+  }, T = (n) => {
+    n.preventDefault(), a++, a === 1 && (f.value = !0);
+  }, I = (n) => {
+    n.preventDefault();
+  }, U = (n) => {
+    n.preventDefault(), a--, a === 0 && (f.value = !1);
+  }, w = (n) => {
+    var c;
+    if (n.preventDefault(), f.value = !1, a = 0, p.value) return;
+    const d = Array.from(((c = n.dataTransfer) == null ? void 0 : c.files) || []);
+    d.length > 0 && (s("drop", d), i(d));
+  };
+  return R(() => {
+    e.draggable && (document.body.addEventListener("dragenter", T), document.body.addEventListener("dragover", I), document.body.addEventListener("dragleave", U), document.body.addEventListener("drop", w));
+  }), X(() => {
+    e.draggable && (document.body.removeEventListener("dragenter", T), document.body.removeEventListener("dragover", I), document.body.removeEventListener("dragleave", U), document.body.removeEventListener("drop", w));
+  }), {
+    isDragging: f,
+    isDisabled: p,
+    handleClick: A,
+    handleFileChange: x
+  };
+}
+const ie = ["disabled"], de = ["accept", "multiple", "disabled"], O = /* @__PURE__ */ P({
+  name: "McAttachment",
+  __name: "Attachment",
+  props: /* @__PURE__ */ M(Q, {
+    modelValue: { default: [] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ M(Z, ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    const t = e, l = s, m = G(e, "modelValue"), { t: f } = q(), a = D(), { handleClick: p, handleFileChange: b, isDragging: i, isDisabled: h } = le(
+      t,
+      l,
+      a,
+      m
+    );
+    return (x, A) => (v(), F(
+      N,
+      null,
+      [
+        g(
+          "div",
+          {
+            class: S(["mc-attachment", { "is-disabled": u(h) }]),
+            onClick: A[1] || (A[1] = //@ts-ignore
+            (...T) => u(p) && u(p)(...T))
+          },
+          [
+            E(" 使用插槽允许用户自定义触发器内容，例如按钮或文本 "),
+            J(x.$slots, "default", {}, () => [
+              g("button", {
+                class: "mc-attachment-default-trigger",
+                disabled: u(h)
+              }, " + " + _(u(f)("Attachment.attachFile")), 9, ie)
+            ]),
+            g("input", {
+              ref_key: "inputRef",
+              ref: a,
+              type: "file",
+              class: "mc-attachment-file",
+              accept: x.accept,
+              multiple: x.multiple,
+              disabled: u(h),
+              onChange: A[0] || (A[0] = //@ts-ignore
+              (...T) => u(b) && u(b)(...T))
+            }, null, 40, de)
+          ],
+          2
+          /* CLASS */
+        ),
+        (v(), j(K, { to: "body" }, [
+          u(i) ? (v(), F(
+            "div",
+            {
+              key: 0,
+              class: S(["mc-attachment-drag-modal", { "is-disabled": u(h) }])
+            },
+            [
+              u(h) ? (v(), F(
+                N,
+                { key: 0 },
+                [
+                  V(
+                    _(u(f)("Attachment.disabledUpload")),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : (v(), F(
+                N,
+                { key: 1 },
+                [
+                  V(
+                    _(u(f)("Attachment.dragToUpload")),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
+            ],
+            2
+            /* CLASS */
+          )) : E("v-if", !0)
+        ]))
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    ));
+  }
+});
+O.install = (e) => {
+  e.component("McAttachment", O);
+};
+export {
+  O as McAttachment
+};

package/FileList/index.css

@@ -0,0 +1 @@
+.mc-file-list{background-color:var(--devui-base-bg, #ffffff);padding:0 10px}.mc-file-list--context-input{position:relative;padding-bottom:5px}.mc-file-list--context-input .mc-file-list__container{max-height:170px;overflow-y:auto}.mc-file-list--context-input:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:97%;height:1px;background-color:var(--devui-dividing-line, #f2f2f3)}.mc-file-list--context-dialog{padding:0}.mc-file-list--context-dialog .mc-file-list__container{max-width:606px;max-height:none;overflow-y:visible;background-color:var(--devui-global-bg, #f6f6f8);border-radius:var(--devui-border-radius-card, 6px)}.mc-file-list--context-dialog .mc-file-item{border-color:transparent}.mc-file-list--context-dialog .mc-file-item--downloadError,.mc-file-list--context-dialog .mc-file-item--downloading{background-color:var(--devui-base-bg, #ffffff)}.mc-file-list__container{display:flex;padding:2px 0;flex-wrap:wrap}.mc-file-list__container::-webkit-scrollbar{width:4px}.mc-file-list__container::-webkit-scrollbar-track{background:var(--devui-global-bg, #f6f6f8)}.mc-file-list__container::-webkit-scrollbar-thumb{background:var(--devui-disabled-bg, #f5f5f5);border-radius:2px}.mc-file-item{position:relative;width:192px;height:58px;margin:5px;display:flex;align-items:center;padding:4px 8px;border:1px solid var(--devui-line, #d7d8da);transition:all .3s ease;border-radius:var(--devui-border-radius-card, 6px)}.mc-file-item:hover .mc-file-item__actions{opacity:1}.mc-file-item__image-preview{width:36px;height:36px;object-fit:cover;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.mc-file-item--success,.mc-file-item--uploadError,.mc-file-item--downloadError{background-color:var(--devui-base-bg, #ffffff)}.mc-file-item__icon{margin-right:10px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}.mc-file-item__type-icon{display:inline-block}.mc-file-item__info{flex:1;min-width:0}.mc-file-item__name{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-text, #252b3a);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-file-item__meta{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f);gap:8px}.mc-file-item__meta-action{color:var(--devui-link, #526ecc);cursor:pointer}.mc-file-item__size{color:var(--devui-aide-text, #71757f)}.mc-file-item__status--error{color:var(--devui-danger, #f66f6a)}.mc-file-item__progress-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:105%;height:105%;display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden}.mc-file-item__progress-mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006}.mc-file-item__wrong-icon{position:relative;z-index:999}.mc-file-item__progress-ring{position:relative;width:17.5px;height:17.5px}.mc-file-item__progress-ring-track,.mc-file-item__progress-ring-circle{fill:transparent;stroke-width:5}.mc-file-item__progress-ring-track{stroke:var(--devui-disabled-bg, #f5f5f5);stroke-opacity:.3}.mc-file-item__progress-ring-circle{stroke:var(--devui-base-bg, #ffffff);stroke-linecap:round;transition:stroke-dashoffset .3s}.mc-file-item__actions{position:absolute;top:-6px;right:-6px;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.mc-file-item__action-btn{border:none;background:#c2c2c2;cursor:pointer;border-radius:50%;font-size:8px;width:12px;height:12px;transition:all .3s ease}.mc-file-item__action-btn--remove{color:var(--devui-light-text, #ffffff)}.mc-file-preview__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.mc-file-preview__content{max-width:90vw;max-height:90vh;object-fit:contain}.mc-file-preview__iframe{width:80vw;height:90vh;border:none}.mc-file-preview__unsupported{padding:40px 60px;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px)}.mc-file-preview__close-btn{position:absolute;top:40px;right:40px;width:40px;height:40px;border-radius:50%;background:#1e1e1e80;color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.mc-file-preview__close-btn:hover{background:#0009}.mc-file-preview-fade-enter-active,.mc-file-preview-fade-leave-active{transition:opacity .3s ease}.mc-file-preview-fade-enter-from,.mc-file-preview-fade-leave-to{opacity:0}