@ithinkdt/naive/dist/NLogin-C04MfrK0.js

iThinkDT Naive UI

import { defineComponent as S, reactive as C, watch as f, ref as I, createVNode as e, h as g, Fragment as F } from "vue";
import { NForm as T, NFormItem as b, NInput as m, NIcon as d, NButton as R } from "ithinkdt-ui";
import { promiseTimeout as z } from "@vueuse/core";
import { useTheme as N, useI18n as A, usePageTab as D, useLogin as L } from "@ithinkdt/core";
import { cB as E, flexCenter as O, CSS_STYLE_PREFIX as l, cM as B, cE as r, fullWidth as h, flexGap as x, c as a, flexDirCol as M, flexAlignCenter as P, flexJustifySB as U, CSS_MOUNT_ANCHOR_META_NAME as j } from "@ithinkdt/core/cssr";
import { D as q, a as H, I as W, b as _, c as G, d as J, e as V } from "./index-CDEm3BS5.js";
const te = /* @__PURE__ */ S({
  name: "DtLogin",
  props: {
    logo: {
      type: [String, Object, Function],
      required: !1,
      default: void 0
    },
    background: {
      type: [Object, Function],
      required: !1,
      default: void 0
    },
    defaultUser: {
      type: Object,
      required: !1,
      default: void 0
    }
  },
  async setup(t) {
    const o = `${l}-login`;
    X(o);
    const u = N("scoped", ["fullTab", "multiTab", "watermark"]);
    u.fullTab = !0, u.multiTab = !1, u.watermark = !1;
    const {
      t: p
    } = A();
    D("登录");
    const n = C({});
    f(() => t.defaultUser, (s) => {
      s && Object.assign(n, s);
    }, {
      immediate: !0
    });
    const {
      user: Y,
      login: w,
      loging: v,
      next: y
    } = L(), i = I();
    f(n, () => i.value = void 0);
    async function $(s) {
      s?.preventDefault();
      try {
        await w(n), i.value = !0, await z(1300), y();
      } catch (k) {
        i.value = k.message;
      }
    }
    return () => e("div", {
      class: [o, {
        [`${o}--dark`]: u.isDark
      }]
    }, [e("div", {
      class: `${o}__wrapper`
    }, [e("div", {
      class: `${o}__wrapper-before`
    }, null), e("div", {
      class: `${o}__wrapper-after`
    }, null), e("span", {
      class: `${o}__top`
    }, [typeof t.logo == "string" ? e("img", {
      src: t.logo,
      alt: "logo"
    }, null) : g(t.logo), u.showAppearence ? e(q, null, null) : void 0, u.showI18n ? e(H, null, null) : void 0]), e("div", {
      class: `${o}__pic`
    }, [typeof t.background == "string" ? e("img", {
      src: t.background,
      alt: "background"
    }, null) : g(t.background)]), e("div", {
      class: `${o}__panel`
    }, [e("div", {
      class: `${o}__panel-title`
    }, [p("sys.login.title")]), e(T, {
      class: `${o}__form`,
      model: n,
      showLabel: !1,
      onSubmit: $
    }, {
      default: () => [e(b, {
        class: `${o}__form-item ${o}__form-username`,
        path: "username"
      }, {
        default: () => [e(m, {
          value: n.username,
          "onUpdate:value": (s) => n.username = s,
          autofocus: !0,
          clearable: !0,
          placeholder: p("sys.login.username")
        }, {
          prefix: () => e(d, {
            size: 20
          }, {
            default: () => [e(W, null, null)]
          }),
          "clear-icon": () => e(d, null, {
            default: () => [e(_, null, null)]
          })
        })]
      }), e(b, {
        class: `${o}__form-item ${o}__form-pwd`,
        path: "password"
      }, {
        default: () => [e(m, {
          value: n.password,
          "onUpdate:value": (s) => n.password = s,
          type: "password",
          showPasswordOn: "mousedown",
          clearable: !0,
          inputProps: {
            autocomplete: "off"
          },
          placeholder: p("sys.login.pwd")
        }, {
          prefix: () => e(d, {
            size: 20
          }, {
            default: () => [e(G, null, null)]
          }),
          "clear-icon": () => e(d, null, {
            default: () => [e(_, null, null)]
          })
        })]
      }), e("div", {
        class: `${o}__form-submit`
      }, [e("div", {
        class: `${o}__result`
      }, [typeof i.value == "string" ? e(F, null, [e(d, {
        size: 22
      }, {
        default: () => [e(J, null, null)]
      }), i.value]) : void 0]), e(R, {
        type: "primary",
        size: "large",
        block: !0,
        loading: v.value,
        disabled: typeof i.value == "string",
        bordered: !1,
        attrType: "submit"
      }, {
        default: () => i.value === !0 ? p("sys.login.success") : p("sys.login.btn"),
        icon: () => i.value === !0 ? e(d, {
          size: 22
        }, {
          default: () => [e(V, null, null)]
        }) : void 0
      })])]
    }), e("div", {
      class: `${o}__panel-tip`
    }, [p("sys.login.tip")])])])]);
  }
});
let c;
function X(t) {
  c || (c = E("login", {
    ...O,
    height: `var(--${l}_body-height)`,
    position: "relative",
    minHeight: "700px",
    [`--${t}__shadow-color`]: "rgba(0, 0, 0, .08)",
    color: `var(--${l}-base-color)`
  }, [B("dark", {
    [`--${t}__shadow-color`]: "rgba(255, 255, 255, .08)"
  }), r("wrapper", {
    boxSizing: "border-box",
    width: "1200px",
    height: "660px",
    position: "relative",
    padding: "24px 40px",
    borderRadius: "3px",
    boxShadow: `0 0 32px 24px var(--${t}__shadow-color)`,
    overflow: "hidden"
  }), r("top", {
    ...h,
    ...x("32px")
  }), r("wrapper-before, wrapper-after", {
    display: "inline-block",
    position: "absolute",
    borderRadius: "50%"
  }, [a("&::before", {
    display: "inline-block",
    content: "''",
    position: "absolute",
    borderRadius: "50%",
    backgroundColor: `var(--${l}-body-color)`,
    top: "15%",
    left: "15%",
    width: "70%",
    height: "70%"
  })]), r("wrapper-before", {
    width: "180px",
    height: "180px",
    bottom: "-80px",
    left: "-80px",
    backgroundColor: "#8CC63E"
  }, [a("&::before", {
    top: "17%",
    left: "17%",
    width: "66%",
    height: "66%"
  })]), r("wrapper-after", {
    width: "830px",
    height: "830px",
    top: "-200px",
    right: "-415px",
    background: "linear-gradient(0deg, #0074FF 0%, #049AFB 100%)"
  }), r("pic", {
    width: "520px",
    position: "absolute",
    top: "150px",
    left: "80px"
  }, [a("img", h)]), r("panel", {
    position: "absolute",
    top: "13%",
    right: "90px",
    zIndex: "1",
    borderRadius: "3px",
    padding: "40px 50px 30px",
    boxSizing: "border-box",
    width: "33%",
    height: "74%",
    boxShadow: `0 0 12px 4px var(--${t}__shadow-color)`,
    ...M,
    ...P,
    ...U,
    background: `var(--${l}-card-color)`
  }), r("panel-title", {
    fontWeight: "bold",
    fontSize: "20px",
    letterSpacing: "2px",
    color: `var(--${l}-text-color1)`
  }), r("panel-tip", {
    fontSize: "13px",
    color: `var(--${l}-text-color3)`
  }), r("form", {
    width: "100%"
  }), r("form-item", [a(".n-input__border, .n-input__state-border", {
    borderRadius: "0",
    borderLeft: "none !important",
    borderTop: "none !important",
    borderRight: "none !important",
    boxShadow: "none !important"
  }), a(".n-input__prefix", {
    marginRight: "12px"
  }), a(".n-input--focus .n-input__prefix > .n-icon", {
    color: `var(--${l}-primary-color-hover)`
  }), a(".n-input ::-ms-reveal", {
    display: "none"
  })]), r("form-username", {
    marginBottom: "28px"
  }), r("form-pwd", [a(".n-base-clear", {
    marginRight: "8px"
  })]), r("result", {
    height: "54px",
    padding: "6px 0 0 10px",
    ...x("12px"),
    color: `var(--${l}-error-color)`
  }), r("form-submit", [a("button", {
    borderRadius: "5px",
    height: "45px",
    transition: "box-shadow 0.3s ease-in-out",
    background: "linear-gradient(to right, #0074FF 0%, #049AFB 100%)"
  }, [a("&:hover", {
    boxShadow: "0 0 12px 8px rgba(4, 154, 251, .1)"
  })])])]), c.mount({
    id: t,
    anchorMetaName: j
  }));
}
export {
  te as DtLogin
};