jcjy-components 0.0.61 → 0.0.63

package/dist/components/auth-gateway/bind-org-dialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    v-model="isShow"
+    fullscreen
+    :show-close="false"
+    body-class="!p-0"
+    header-class="hidden"
+    class="!p-0"
+  >
+    <header class="h-100 relative">
+      <img
+        src="./img/bind-bg.jpg"
+        class="w-full h-full"
+        style="object-fit: cover"
+      />
+      <div
+        class="absolute top-0 left-0 right-0 bottom-0 bg-black/40 w-full h-full"
+      ></div>
+    </header>
+    <div class="text-center -mt-100 relative z-1 pt-20">
+      <div class="text-white font-bold text-2xl">验证身份信息</div>
+      <div class="font-400 text-lg text-white my-2">
+        我们需要验证你的身份信息，以便为你提供更好的服务
+      </div>
+
+      <el-card class="w-4/5 lg:w-1/2 mx-auto">
+        <el-form
+          :model="model"
+          :rules="rules"
+          ref="formRef"
+          size="large"
+          label-position="top"
+          @keydown.enter="handleConfirm"
+        >
+          <el-form-item prop="orgName" label="学校">
+            <el-input
+              v-model="model.orgName"
+              placeholder="请输入学校"
+              :model-modifiers="{ trim: true }"
+            />
+          </el-form-item>
+          <el-form-item prop="name" label="姓名">
+            <el-input
+              v-model="model.name"
+              placeholder="请输入姓名"
+              :model-modifiers="{ trim: true }"
+            />
+          </el-form-item>
+          <el-form-item prop="code" label="学号/工号">
+            <el-input
+              v-model="model.code"
+              placeholder="请输入学号/工号"
+              :model-modifiers="{ trim: true }"
+            />
+          </el-form-item>
+
+          <el-button class="w-full my-4" type="primary" @click="handleConfirm"
+            >验证</el-button
+          >
+          <div></div>
+          <el-button type="primary" class="w-full" plain @click="handleClose"
+            >返回</el-button
+          >
+        </el-form>
+      </el-card>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElCard,
+  ElButton,
+  ElInput,
+} from "element-plus";
+const emits = defineEmits<{
+  (e: "confirm", v: any): void;
+}>();
+const isShow = ref(false);
+function open() {
+  isShow.value = true;
+}
+function close() {
+  isShow.value = false;
+}
+
+const formRef = ref();
+const model = ref({
+  orgName: "",
+  name: "",
+  code: "",
+});
+
+const rules = {
+  orgName: {
+    required: true,
+    message: "请输入学校",
+    trigger: "",
+  },
+  name: {
+    required: true,
+    message: "请输入姓名",
+    trigger: "",
+  },
+  code: {
+    required: true,
+    message: "请输入学号/工号",
+    trigger: "",
+  },
+};
+
+function handleClose() {
+  close();
+}
+
+async function handleConfirm() {
+  await formRef.value.validate();
+  emits("confirm", model.value);
+}
+defineExpose({
+  open,
+  close,
+});
+</script>

package/dist/components/auth-gateway/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div
+    class="auth-gateway w-screen h-screen overflow-hidden"
+    :class="rootClass"
+    :style="rootStyle"
+  >
+    <div v-if="isInited" class="auth-gateway-card" v-loading="confirmLoading">
+      <transition name="zoom-in-center" mode="out-in">
+        <el-card
+          class="w-[90vw] lg:w-105 max-w-130"
+          v-if="currentTab === TabKey.LOGIN"
+          shadow="hover"
+        >
+          <LoginForm
+            key="login"
+            :hide-login-methods="isHideWx"
+            @toggle="setCurrentTab"
+            @submit="(e) => _login(e, 'normal')"
+          />
+        </el-card>
+        <el-card
+          class="w-[90vw] lg:w-105 max-w-130"
+          v-else-if="currentTab === TabKey.REGISTER"
+          shadow="hover"
+        >
+          <RegisterForm
+            :strict="props.strictRegister"
+            @back="setCurrentTab(TabKey.LOGIN)"
+            @submit="_register"
+          />
+        </el-card>
+        <WechatScanView
+          v-else-if="currentTab === TabKey.WECHAT_SCAN"
+          @back="setCurrentTab(TabKey.LOGIN)"
+          @submit="(e: any) => _login(e, 'wechat')"
+        />
+        <WechatForm
+          v-else-if="currentTab === TabKey.WECHAT"
+          :info="wechatUserInfo"
+          class="w-[90vw] lg:w-175"
+          @back="handleWechatBack"
+        />
+      </transition>
+    </div>
+
+    <footer
+      class="fixed bottom-3 left-0 right-0 text-center text-white"
+      v-html="footerText"
+    ></footer>
+
+    <BindOrgDialog ref="bindOrgDialogRef" @confirm="_binding" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, onMounted, provide, nextTick } from "vue";
+import { setThemeByUrl, setTitle } from "./util";
+import LoginForm from "./login-form.vue";
+import { type AuthGatewayProps, DEFAULT_CONFIG, TabKey } from "./interface";
+import BindOrgDialog from "./bind-org-dialog.vue";
+import RegisterForm from "./register-form.vue";
+import WechatForm from "./wechat-form.vue";
+import WechatScanView from "./wechat-scan-view.vue";
+import { ElMessage, ElLoading, ElCard } from "element-plus";
+
+const emits = defineEmits<{
+  (e: "success", v: any): void;
+}>();
+const props = withDefaults(defineProps<AuthGatewayProps>(), {
+  strictRegister: false,
+});
+
+const config = computed(() => {
+  return {
+    ...DEFAULT_CONFIG,
+    ...props.config,
+  };
+});
+
+const bindOrgDialogRef = ref();
+const currentTab = ref<TabKey>(TabKey.LOGIN);
+const isInited = ref(false);
+const rootClass = computed(() => {
+  const { layout } = config.value;
+  return layout;
+});
+
+const isShowBg = computed(() => {
+  const { nb } = config.value;
+
+  return +(nb || 0) !== 1;
+});
+const rootStyle = computed(() => {
+  const { loginBackground } = config.value;
+
+  if (isShowBg.value) {
+    return {
+      background: `url('${loginBackground}') no-repeat center/100% 100%`,
+    };
+  }
+  return {};
+});
+
+const isNeedBind = computed(() => {
+  return config.value.skipBind === "0";
+});
+const isHideWx = computed(() => {
+  return !!config.value.hideWx;
+});
+async function init() {
+  try {
+    const { loginBackground, favicon, title } = config.value;
+    setTitle(title, favicon);
+    if (isShowBg.value) {
+      await setThemeByUrl(loginBackground);
+    }
+    await nextTick();
+  } finally {
+    isInited.value = true;
+  }
+}
+
+const footerText = computed(() => {
+  const hide = +(config.value.hf || 0) === 1;
+  if (hide) {
+    return "";
+  } else {
+    return config.value.cf;
+  }
+});
+
+function setCurrentTab(key: TabKey) {
+  currentTab.value = key;
+}
+const userInfo = ref<any>();
+const wechatUserInfo = ref<any>();
+const confirmLoading = ref(false);
+
+async function _binding(body: { orgName: string; name: string; code: string }) {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "正在验证...",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  try {
+    await props.binding(body, {
+      token: userInfo.value.token,
+    });
+    ElMessage.success("验证成功!");
+    emits("success", userInfo.value);
+  } finally {
+    loading.close();
+  }
+}
+
+async function _register(body: {
+  userName: string;
+  passwd: string;
+  weChatOpenId?: string;
+}) {
+  try {
+    confirmLoading.value = true;
+    const res = await props.register(body);
+    userInfo.value = res;
+    if (isNeedBind.value) {
+      ElMessage.success("注册成功!请验证身份信息");
+      setCurrentTab(TabKey.LOGIN);
+      bindOrgDialogRef.value.open();
+    } else {
+      ElMessage.success("注册成功!");
+      emits("success", userInfo.value);
+    }
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+async function _login(
+  body: {
+    weChatCode?: string;
+    userName?: string;
+    passwd?: string;
+    weChatOpenId?: string;
+  },
+  from: "wechat" | "normal"
+) {
+  try {
+    confirmLoading.value = true;
+
+    const res = await props.login(body);
+    if (from === "wechat") {
+      if (res.err === 4004) {
+        ElMessage.error(res.msg);
+        wechatUserInfo.value = res.weChatUserDetail;
+        currentTab.value = TabKey.WECHAT;
+        return;
+      }
+    }
+
+    userInfo.value = res;
+
+    if (!res.type && isNeedBind.value) {
+      ElMessage.success("登录成功！请验证身份信息");
+      bindOrgDialogRef.value.open();
+    } else {
+      emits("success", userInfo.value);
+    }
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+
+function handleWechatBack() {
+  wechatUserInfo.value = null;
+  setCurrentTab(TabKey.LOGIN);
+}
+onMounted(init);
+
+provide("contextProps", { ...props, config: config.value });
+provide("_login", _login);
+provide("_register", _register);
+</script>
+
+<style lang="scss">
+.auth-gateway {
+  * {
+    box-sizing: border-box;
+  }
+  /* 进入动画：缩放 + 淡入 */
+  .zoom-in-center-enter-active {
+    transition: all 0.2s ease;
+  }
+  .zoom-in-center-enter-from {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+  .zoom-in-center-enter-to {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  /* 离开动画：缩放 + 淡出 */
+  .zoom-in-center-leave-active {
+    transition: all 0.2s ease;
+  }
+  .zoom-in-center-leave-from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  .zoom-in-center-leave-to {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+
+  &.default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (min-width: 1024px) {
+    &.default {
+      justify-content: flex-end;
+    }
+  }
+
+  &.default .auth-gateway-card {
+    margin-right: 6rem; /* lg:mr-24 = 24 * 0.25rem = 6rem */
+  }
+
+  &.center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (min-width: 1024px) {
+    &.left {
+      justify-content: flex-start;
+    }
+  }
+
+  &.left .auth-gateway-card {
+    margin-left: 6rem; /* lg:ml-24 = 24 * 0.25rem = 6rem */
+  }
+}
+</style>

package/dist/components/auth-gateway/interface.ts

@@ -0,0 +1,81 @@
+import IMG_LOGO from "./img/logo.png";
+import IMG_BG from "./img/bg.jpg";
+
+export const TabKey = {
+  LOGIN: 0,
+  REGISTER: 1,
+  WECHAT: 2,
+  WECHAT_SCAN: 3,
+} as const;
+
+export type TabKey = (typeof TabKey)[keyof typeof TabKey];
+
+export interface AuthGatewayProps {
+  config: AuthGatewayConfig;
+  strictRegister?: boolean;
+  binding: (
+    v: { orgName: string; name: string; code: string },
+    headers: { token: string }
+  ) => Promise<any>;
+  register: (params: {
+    userName: string;
+    passwd: string;
+    weChatOpenId?: string;
+  }) => Promise<any>;
+  login: (params: {
+    weChatCode?: string;
+    userName?: string;
+    passwd?: string;
+    weChatOpenId?: string;
+  }) => Promise<
+    | {
+        err: number;
+        msg: string;
+        weChatUserDetail: any;
+      }
+    | any
+  >;
+  wechatConfig?: {
+    appId: string;
+    redirectUrl: string;
+  };
+}
+export interface AuthGatewayConfig {
+  title?: string;
+  // redirect: string;
+  // args: string;
+  // loginUrl: string; // 登录页url
+  favicon?: string; // icon url
+  loginBackground?: string; // 登录页背景 url
+  skipBind?: "0" | "1"; //  是否绑定 0 :默认绑定  1: 不需要绑定
+  hf?: "0" | "1"; // 是否隐藏登录页页脚 (0:显示 1:隐藏)
+  nb?: "0" | "1"; // 使用无logo的背景(0:显示,1:隐藏)
+  cf?: string; // 自定义页脚内容
+  from?: "inline"; // 来源 inline 则不自动跳转
+  hideWx?: string; // 隐藏微信登录  有数据就隐藏
+  layout?: "default" | "center" | "left";
+}
+
+export const DEFAULT_CONFIG: AuthGatewayConfig = {
+  title: "AIGC实训平台",
+  favicon: IMG_LOGO,
+  loginBackground: IMG_BG,
+  layout: "default",
+  skipBind: "0",
+  nb: "0",
+  hf: "0",
+  cf: `
+          <div style="font-size:14px;color:white;">
+              <a
+                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010702009439"
+                target="_blank"
+                style="text-decoration: none;color:white;"
+              >
+                沪公网安备 31010702009439 号
+              </a>
+              |
+              <a href="https://beian.miit.gov.cn/" style="text-decoration: none;color:white;">沪ICP备2020031101号-3</a>
+              | © 2025 晶程甲宇科技（上海）有限公司 版权所有
+            </div>
+        `,
+};

package/dist/components/auth-gateway/login-form.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="model"
+    :rules="rules"
+    label-position="top"
+    @keydown.enter="confirm"
+  >
+    <div
+      v-if="contextProps.config?.favicon || contextProps.config?.title"
+      class="flex items-center justify-center gap-3 mb-4"
+    >
+      <img
+        v-if="contextProps.config.favicon"
+        :src="contextProps.config.favicon"
+        class="w-7"
+      />
+      <b class="text-xl">
+        {{ contextProps.config.title }}
+      </b>
+    </div>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        v-model="model.email"
+        placeholder="请输入邮箱"
+        :model-modifiers="{
+          trim: true,
+        }"
+      />
+    </el-form-item>
+    <el-form-item label="密码" prop="password">
+      <el-input
+        v-model="model.password"
+        placeholder="请输入密码"
+        type="password"
+        :model-modifiers="{
+          trim: true,
+        }"
+        show-password
+      />
+    </el-form-item>
+    <el-button class="w-full mt-2" type="primary" @click="confirm">
+      {{ props.confirmText || "登&nbsp;&nbsp;录" }}
+    </el-button>
+
+    <div class="text-center mt-4">
+      <el-link class="!font-400" @click="handleToggle(TabKey.REGISTER)"
+        >注册账号</el-link
+      >
+
+      <template v-if="!hideLoginMethods">
+        <el-divider
+          ><span class="text-xs text-black/40"> 其他登录方式 </span></el-divider
+        >
+
+        <el-button link @click="handleToggle(TabKey.WECHAT_SCAN)">
+          <img src="./img/wechat.png" alt="" class="size-6" />
+        </el-button>
+      </template>
+    </div>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from "vue";
+import { type AuthGatewayProps, TabKey } from "./interface";
+import { transformModel } from "./util";
+import {
+  ElForm,
+  ElFormItem,
+  ElButton,
+  ElInput,
+  ElDivider,
+  ElLink,
+} from "element-plus";
+const contextProps = inject<AuthGatewayProps>("contextProps")!;
+const emits = defineEmits<{
+  (e: "toggle", v: TabKey): void;
+  (e: "submit", v: any): void;
+}>();
+const props = defineProps<{
+  confirmText?: string;
+  hideLoginMethods?: boolean;
+}>();
+const model = ref({
+  email: "",
+  password: "",
+});
+const rules = {
+  email: [
+    {
+      required: true,
+      message: "请输入邮箱",
+      trigger: "blur",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入密码",
+      trigger: "blur",
+    },
+  ],
+};
+
+const formRef = ref();
+async function confirm() {
+  await formRef.value.validate();
+  emits("submit", transformModel(model.value));
+}
+
+function handleToggle(key: TabKey) {
+  emits("toggle", key);
+}
+</script>

package/dist/components/auth-gateway/register-form.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="model"
+    :rules="rules"
+    label-position="top"
+    class="py-2"
+    @keydown.enter="confirm"
+  >
+    <div class="text-lg font-bold mb-3">注册邮箱账号</div>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        v-model="model.email"
+        :model-modifiers="{
+          trim: true,
+        }"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="密码" prop="password">
+      <el-input
+        v-model="model.password"
+        placeholder="请输入密码"
+        type="password"
+        :model-modifiers="{
+          trim: true,
+        }"
+        autocomplete="new-password"
+        show-password
+      />
+    </el-form-item>
+    <el-form-item label="再次输入密码" prop="password2">
+      <el-input
+        v-model="model.password2"
+        placeholder="请再次输入密码"
+        :model-modifiers="{
+          trim: true,
+        }"
+        autocomplete="new-password"
+        type="password"
+        show-password
+      />
+    </el-form-item>
+
+    <el-button class="w-full mt-2" type="primary" @click="confirm">
+      {{ props.confirmText || "注&nbsp;&nbsp;册" }}
+    </el-button>
+    <div></div>
+    <el-button @click="emits('back')" type="primary" plain class="w-full mt-4">
+      返&nbsp;&nbsp;回
+    </el-button>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed } from "vue";
+import type { FormItemRule } from "element-plus";
+import { passwordValidator, transformModel } from "./util";
+import type { AuthGatewayProps } from "./interface";
+import { ElForm, ElFormItem, ElButton, ElInput } from "element-plus";
+const contextProps = inject<AuthGatewayProps>("contextProps");
+
+const emits = defineEmits<{
+  (e: "back"): void;
+  (e: "submit", v: any): void;
+}>();
+const props = defineProps<{
+  confirmText?: string;
+}>();
+const model = ref({
+  email: "",
+  password: "",
+  password2: "",
+});
+const baseRules: Record<string, FormItemRule[]> = {
+  email: [
+    {
+      required: true,
+      message: "请输入邮箱",
+      trigger: "blur",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入密码",
+      trigger: "blur",
+    },
+  ],
+  password2: [
+    {
+      required: true,
+      message: "请再次输入密码",
+      trigger: "blur",
+    },
+    {
+      validator: (_rule: any, value: string, callback: Function) => {
+        if (value === "") {
+          callback(new Error("请再次输入密码"));
+        } else if (value !== model.value.password) {
+          callback(new Error("两次输入密码不一致"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+
+const strictRules: Record<string, FormItemRule[]> = {
+  email: [
+    {
+      required: true,
+      message: "请输入邮箱",
+      trigger: "blur",
+      type: "email",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入密码",
+      trigger: "blur",
+    },
+    {
+      validator: passwordValidator(),
+      trigger: ["change", "blur"],
+    },
+  ],
+  password2: [
+    {
+      required: true,
+      message: "请再次输入密码",
+      trigger: "blur",
+    },
+    {
+      validator: (_rule: any, value: string, callback: Function) => {
+        if (value === "") {
+          callback(new Error("请再次输入密码"));
+        } else if (value !== model.value.password) {
+          callback(new Error("两次输入密码不一致"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+
+const rules = computed(() => {
+  return contextProps?.strictRegister ? strictRules : baseRules;
+});
+
+const formRef = ref();
+async function confirm() {
+  await formRef.value.validate();
+  emits("submit", transformModel(model.value));
+}
+</script>

package/dist/components/auth-gateway/util.ts

@@ -0,0 +1,146 @@
+import { Vibrant } from "node-vibrant/browser";
+import { Md5 } from "ts-md5";
+
+export function transformModel(v: { email: string; password: string }) {
+  const { email, password } = v;
+  const md5 = new Md5();
+  return {
+    userName: email,
+    passwd: md5.appendAsciiStr(password).end(),
+  };
+}
+export async function setThemeByUrl(src?: string) {
+  if (!src) {
+    return;
+  }
+  const palette = await Vibrant.from(src).getPalette();
+  const { r, g, b } = palette.Vibrant!;
+  setTheme([r, g, b]);
+}
+
+export function setTheme(colors: any[]) {
+  const [r, g, b] = colors;
+  const root = document.documentElement;
+  const color = `${r} ${g} ${b}`;
+  const elColor = `rgb(${r},${g},${b})`;
+  root.style.setProperty("--color-primary", color);
+  root.style.setProperty("--el-color-primary", elColor);
+
+  for (let i = 1; i <= 10; i++) {
+    root.style.setProperty(
+      `--el-color-primary-light-${i}`,
+      generateLightColors(i, { r, g, b })
+    );
+    root.style.setProperty(
+      `--el-color-primary-dark-${i}`,
+      generateLightColors(i, { r, g, b }, { r: 0, g: 0, b: 0 })
+    );
+  }
+}
+
+export function setTitle(title?: string, favicon?: string) {
+  if (title) document.title = title;
+
+  if (favicon) {
+    let iconEl = document.querySelector("link[rel='icon']");
+
+    if (!iconEl) {
+      iconEl = document.createElement("link");
+      iconEl.setAttribute("rel", "icon");
+      document.head.appendChild(iconEl);
+    }
+
+    // 防止缓存 & 兼容 https
+    const href = favicon.startsWith("http")
+      ? favicon
+      : `${window.location.origin}${favicon}`;
+    iconEl.setAttribute("href", `${href}?v=${Date.now()}`);
+  }
+}
+/**
+ * RGB 颜色混合函数
+ * @param mixColor 混合颜色 {r,g,b}
+ * @param baseColor 基础颜色 {r,g,b}
+ * @param ratio 混合比例 0~1，越大越偏 mixColor
+ * @returns {r,g,b}
+ */
+function mixColors(
+  mixColor: { r: number; g: number; b: number },
+  baseColor: { r: number; g: number; b: number },
+  ratio: number
+) {
+  const r = Math.round(baseColor.r + (mixColor.r - baseColor.r) * ratio);
+  const g = Math.round(baseColor.g + (mixColor.g - baseColor.g) * ratio);
+  const b = Math.round(baseColor.b + (mixColor.b - baseColor.b) * ratio);
+  return { r, g, b };
+}
+
+/**
+ * RGB 转 CSS rgba 字符串
+ */
+function rgbToCss({ r, g, b }: { r: number; g: number; b: number }, alpha = 1) {
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * 生成浅色系列
+ * @param baseColor 主色 {r,g,b}
+ * @param mixColor 混合颜色 {r,g,b}，默认为白色
+ */
+function generateLightColors(
+  level: number,
+  baseColor: { r: number; g: number; b: number },
+  mixColor = { r: 255, g: 255, b: 255 }
+) {
+  const ratio = level / 10; // 1~9 -> 0.1~0.9
+  const mixed = mixColors(mixColor, baseColor, ratio);
+  return rgbToCss(mixed);
+}
+
+// validators/password.ts
+export const passwordValidator = (
+  config?: Partial<{
+    minLength: number;
+    lowercase: number;
+    uppercase: number;
+    numbers: number;
+    symbols: number;
+  }>
+) => {
+  const defaultConfig: any = {
+    minLength: 8,
+    lowercase: 1,
+    uppercase: 1,
+    numbers: 1,
+    symbols: 1,
+    ...config,
+  };
+
+  const rulesMap: any = {
+    lowercase: { reg: /[a-z]/g, msg: "小写字母" },
+    uppercase: { reg: /[A-Z]/g, msg: "大写字母" },
+    numbers: { reg: /[0-9]/g, msg: "数字" },
+    symbols: { reg: /[^a-zA-Z0-9]/g, msg: "特殊符号" },
+  };
+
+  return (_rule: any, value: string, callback: any) => {
+    if (!value) {
+      return callback(new Error("请输入密码"));
+    }
+
+    if (value.length < defaultConfig.minLength) {
+      return callback(new Error(`密码至少 ${defaultConfig.minLength} 位`));
+    }
+
+    for (const key in rulesMap) {
+      const count = (value.match(rulesMap[key].reg) || []).length;
+      if (count < defaultConfig[key]) {
+        return callback(
+          new Error(`密码至少包含 ${defaultConfig[key]} 个${rulesMap[key].msg}`)
+        );
+      }
+    }
+
+    callback();
+  };
+};

package/dist/components/auth-gateway/wechat-form.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-card
+    shadow="hover"
+    class="h-105"
+    body-class="relative flex h-full items-center"
+  >
+    <el-link
+      type="primary"
+      class="!font-400 !absolute top-4 left-4"
+      @click="emits('back')"
+      >返&nbsp;&nbsp;回</el-link
+    >
+    <div class="flex flex-col flex-1 items-center justify-center gap-5 px-4">
+      <img
+        v-if="props.info?.headimgurl"
+        :src="props.info?.headimgurl"
+        class="size-24 rounded-full shadow-2xl"
+      />
+      <div v-else class="size-24 rounded-full bg-gray-200 shadow-2xl"></div>
+      <div>{{ props.info?.nickname }}</div>
+      <div class="text-sm text-gray-500">
+        <div>已有账号？输入账号信息登录立即绑定</div>
+        <div class="font-bold">如没有账号，注册后登录即绑定</div>
+      </div>
+    </div>
+    <transition name="zoom-in-center" mode="out-in">
+      <LoginForm
+        v-if="currentTab === TabKey.LOGIN"
+        class="w-90"
+        hideLoginMethods
+        confirmText="登录并绑定"
+        @toggle="setCurrentTab"
+        @submit="handleLoginSubmit"
+      />
+      <RegisterForm
+        v-else-if="currentTab === TabKey.REGISTER"
+        class="w-90"
+        confirmText="注册并绑定"
+        @back="setCurrentTab(TabKey.LOGIN)"
+        @submit="handleRegisterSubmit"
+      />
+    </transition>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from "vue";
+import { TabKey } from "./interface";
+import LoginForm from "./login-form.vue";
+import RegisterForm from "./register-form.vue";
+import { ElCard, ElLink } from "element-plus";
+const _login = inject<any>("_login");
+const _register = inject<any>("_register");
+const props = defineProps<{
+  info: any;
+}>();
+const emits = defineEmits<{
+  (e: "back"): void;
+}>();
+const currentTab = ref<TabKey>(TabKey.LOGIN);
+function setCurrentTab(key: TabKey) {
+  currentTab.value = key;
+}
+
+function handleLoginSubmit(e: { userName: string; passwd: string }) {
+  _login(
+    {
+      ...e,
+      weChatOpenId: props.info.openid,
+    },
+    "normal"
+  );
+}
+
+function handleRegisterSubmit(e: { userName: string; passwd: string }) {
+  _register({
+    ...e,
+    weChatOpenId: props.info.openid,
+  });
+}
+</script>

package/dist/components/auth-gateway/wechat-scan-view.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-card
+    shadow="hover"
+    class="size-90"
+    body-class="flex flex-col items-center justify-center h-full box-border"
+  >
+    <div :id="DOM_ID" class="size-40"></div>
+    <b class="my-4">请使用微信扫码登录</b>
+    <el-link class="!font-400" @click="emits('back')">
+      返&nbsp;&nbsp;回
+    </el-link>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { inject, onUnmounted } from "vue";
+import { ElCard, ElLink } from "element-plus";
+const DOM_ID = "login_container";
+import type { AuthGatewayProps } from "./interface";
+
+const contextProps = inject<AuthGatewayProps>("contextProps");
+
+const emits = defineEmits<{
+  (e: "back"): void;
+  (e: "submit", v: { weChatCode: string }): void;
+}>();
+function init() {
+  const scriptEl = document.createElement("script");
+  scriptEl.type = "text/javascript";
+  scriptEl.src =
+    "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
+  const wxElement = document.body.appendChild(scriptEl);
+  wxElement.onload = () => {
+    const config = {
+      self_redirect: true,
+      id: DOM_ID,
+      appid: contextProps?.wechatConfig?.appId,
+      scope: "snsapi_login",
+      redirect_uri: encodeURIComponent(
+        `${contextProps?.wechatConfig?.redirectUrl}`
+      ),
+      state: "ssssss",
+      href: "",
+      stylelite: 1,
+    };
+
+    new (window as any).WxLogin(config);
+
+    window.addEventListener("message", handleMessage);
+  };
+}
+
+function handleMessage(e: any) {
+  if (e.data.type === "router_data") {
+    emits("submit", {
+      weChatCode: e.data.data.query?.code,
+    });
+    window.removeEventListener("message", handleMessage);
+  }
+}
+
+onUnmounted(() => {
+  window.removeEventListener("message", handleMessage);
+});
+init();
+</script>
+
+<style lang="scss">
+#login_container {
+  iframe {
+    width: 160px;
+    height: 160px;
+  }
+}
+</style>

package/dist/components/file-manager/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>file-manager</div>
+</template>

package/{src → dist}/index.ts

@@ -1,6 +1,5 @@
 import type { App } from "vue";
 import AuthGateway from "./components/auth-gateway/index.vue";
-import { ElLoadingDirective } from "element-plus";
 import { setTheme, setThemeByUrl } from "./components/auth-gateway/util";
 export const theme = {
   setTheme,
@@ -14,8 +13,6 @@ export interface AuthGatewayOptions {
 
 export default {
   install(app: App) {
-    // 只注册自定义组件，Element Plus 组件由父项目提供
-    app.directive("loading", ElLoadingDirective);
     app.component("AuthGateway", AuthGateway);
   },
 };

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "jcjy-components",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "description": "Vue 3 组件库",
   "type": "module",
   "main": "./index.ts",
   "files": [
-    "components",
-    "src/index.ts",
+    "dist",
     "package.json"
   ],
   "keywords": [
@@ -46,6 +45,6 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "build:types": "vue-tsc -b && vite build --mode build-types",
-    "push": "pnpm publish"
+    "push:npm": "node build.js && pnpm publish"
   }
 }