@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/common-ui/ui/authentication/forget-password.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '@melt-js/comps-vben/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+import { VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'ForgetPassword',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Record<string, any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <div>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        aria-label="submit"
+        class="mt-2 w-full"
+        @click="handleSubmit"
+      >
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.sendResetLink') }}
+        </slot>
+      </VbenButton>
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+        {{ $t('common.back') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>

package/src/common-ui/ui/authentication/index.ts

@@ -0,0 +1,7 @@
+export { default as AuthenticationCodeLogin } from './code-login.vue';
+export { default as AuthenticationForgetPassword } from './forget-password.vue';
+export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
+export { default as AuthenticationLogin } from './login.vue';
+export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
+export { default as AuthenticationRegister } from './register.vue';
+export type { AuthenticationProps } from './types';

package/src/common-ui/ui/authentication/login-expired-modal.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { AuthenticationProps } from './types';
+
+import { computed, watch } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenModal } from '@melt-js/comps-vben/popup-ui';
+import { Slot, VbenAvatar } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props extends AuthenticationProps {
+  avatar?: string;
+  zIndex?: number;
+}
+
+defineOptions({
+  name: 'LoginExpiredModal',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  zIndex: 0,
+});
+
+const open = defineModel<boolean>('open');
+
+const [Modal, modalApi] = useVbenModal();
+
+watch(
+  () => open.value,
+  (val) => {
+    modalApi.setState({ isOpen: val });
+  },
+);
+
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
+/**
+ * 排除ant-message和loading:9999的z-index
+ */
+const zIndexExcludeClass = ['ant-message', 'loading'];
+function isZIndexExcludeClass(element: Element) {
+  return zIndexExcludeClass.some((className) =>
+    element.classList.contains(className),
+  );
+}
+
+/**
+ * 获取最大的zIndex值
+ */
+function calcZIndex() {
+  let maxZ = 0;
+  const elements = document.querySelectorAll('*');
+  [...elements].forEach((element) => {
+    const style = window.getComputedStyle(element);
+    const zIndex = style.getPropertyValue('z-index');
+    if (
+      zIndex &&
+      !Number.isNaN(Number.parseInt(zIndex)) &&
+      !isZIndexExcludeClass(element)
+    ) {
+      maxZ = Math.max(maxZ, Number.parseInt(zIndex));
+    }
+  });
+  return maxZ + 1;
+}
+</script>
+
+<template>
+  <div>
+    <Modal
+      :closable="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :footer="false"
+      :fullscreen-button="false"
+      :header="false"
+      :z-index="getZIndex"
+      class="border-none px-10 py-6 text-center shadow-xl sm:w-150 sm:rounded-2xl md:h-[unset]"
+    >
+      <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
+      <Slot
+        :show-forget-password="false"
+        :show-register="false"
+        :show-remember-me="false"
+        :sub-title="$t('authentication.loginAgainSubTitle')"
+        :title="$t('authentication.loginAgainTitle')"
+      >
+        <slot> </slot>
+      </Slot>
+    </Modal>
+  </div>
+</template>

package/src/common-ui/ui/authentication/login.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { VbenFormSchema } from '@melt-js/comps-vben/form-ui';
+
+import type { AuthenticationProps } from './types';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+import { VbenButton, VbenCheckbox } from '@melt-js/comps-vben/shadcn-ui';
+
+import Title from './auth-title.vue';
+import ThirdPartyLogin from './third-party-login.vue';
+
+interface Props extends AuthenticationProps {
+  formSchema?: VbenFormSchema[];
+}
+
+defineOptions({
+  name: 'AuthenticationLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  codeLoginPath: '/auth/code-login',
+  forgetPasswordPath: '/auth/forget-password',
+  formSchema: () => [],
+  loading: false,
+  qrCodeLoginPath: '/auth/qrcode-login',
+  registerPath: '/auth/register',
+  showCodeLogin: true,
+  showForgetPassword: true,
+  showQrcodeLogin: true,
+  showRegister: true,
+  showRememberMe: true,
+  showThirdPartyLogin: true,
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+const router = useRouter();
+
+const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
+
+const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
+
+const rememberMe = ref(!!localUsername);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    localStorage.setItem(
+      REMEMBER_ME_KEY,
+      rememberMe.value ? values?.username : '',
+    );
+    emit('submit', values);
+  }
+}
+
+function handleGo(path: string) {
+  router.push(path);
+}
+
+onMounted(() => {
+  if (localUsername) {
+    formApi.setFieldValue('username', localUsername);
+  }
+});
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div @keydown.enter.prevent="handleSubmit">
+    <slot name="title">
+      <Title>
+        <slot name="title">
+          {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        </slot>
+        <template #desc>
+          <span class="text-muted-foreground">
+            <slot name="subTitle">
+              {{ subTitle || $t('authentication.loginSubtitle') }}
+            </slot>
+          </span>
+        </template>
+      </Title>
+    </slot>
+
+    <Form />
+
+    <div
+      v-if="showRememberMe || showForgetPassword"
+      class="mb-6 flex justify-between"
+    >
+      <div class="flex-center">
+        <VbenCheckbox
+          v-if="showRememberMe"
+          v-model="rememberMe"
+          name="rememberMe"
+        >
+          {{ $t('authentication.rememberMe') }}
+        </VbenCheckbox>
+      </div>
+
+      <span
+        v-if="showForgetPassword"
+        class="vben-link text-sm font-normal"
+        @click="handleGo(forgetPasswordPath)"
+      >
+        {{ $t('authentication.forgetPassword') }}
+      </span>
+    </div>
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      aria-label="login"
+      class="w-full"
+      @click="handleSubmit"
+    >
+      {{ submitButtonText || $t('common.login') }}
+    </VbenButton>
+
+    <div
+      v-if="showCodeLogin || showQrcodeLogin"
+      class="mt-4 mb-2 flex items-center justify-between"
+    >
+      <VbenButton
+        v-if="showCodeLogin"
+        class="w-1/2"
+        variant="outline"
+        @click="handleGo(codeLoginPath)"
+      >
+        {{ $t('authentication.mobileLogin') }}
+      </VbenButton>
+      <VbenButton
+        v-if="showQrcodeLogin"
+        class="ml-4 w-1/2"
+        variant="outline"
+        @click="handleGo(qrCodeLoginPath)"
+      >
+        {{ $t('authentication.qrcodeLogin') }}
+      </VbenButton>
+    </div>
+
+    <!-- 第三方登录 -->
+    <slot name="third-party-login">
+      <ThirdPartyLogin v-if="showThirdPartyLogin" />
+    </slot>
+
+    <slot name="to-register">
+      <div v-if="showRegister" class="mt-3 text-center text-sm">
+        {{ $t('authentication.accountTip') }}
+        <span
+          class="vben-link text-sm font-normal"
+          @click="handleGo(registerPath)"
+        >
+          {{ $t('authentication.createAccount') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>

package/src/common-ui/ui/authentication/qrcode-login.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
+  /**
+   * @zh_CN 是否显示返回按钮
+   */
+  showBack?: boolean;
+}
+
+defineOptions({
+  name: 'AuthenticationQrCodeLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  loading: false,
+  showBack: true,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const router = useRouter();
+
+const text = ref('https://vben.vvbin.cn');
+
+const qrcode = useQRCode(text, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+});
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📱
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.qrcodeSubtitle') }}
+          </slot>
+        </span>
+      </template>
+    </Title>
+
+    <div class="mt-6 flex-col-center">
+      <img :src="qrcode" alt="qrcode" class="w-1/2" />
+      <p class="mt-4 text-sm text-muted-foreground">
+        <slot name="description">
+          {{ description || $t('authentication.qrcodePrompt') }}
+        </slot>
+      </p>
+    </div>
+
+    <VbenButton
+      v-if="showBack"
+      class="mt-4 w-full"
+      variant="outline"
+      @click="goToLogin()"
+    >
+      {{ $t('common.back') }}
+    </VbenButton>
+  </div>
+</template>

package/src/common-ui/ui/authentication/register.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { VbenFormSchema } from '@melt-js/comps-vben/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+import { VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'RegisterForm',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values as { password: string; username: string });
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.createAnAccount') }} 🚀
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.signUpSubtitle') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      aria-label="register"
+      class="mt-2 w-full"
+      @click="handleSubmit"
+    >
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('authentication.signUp') }}
+      </slot>
+    </VbenButton>
+    <div class="mt-4 text-center text-sm">
+      {{ $t('authentication.alreadyHaveAccount') }}
+      <span class="vben-link text-sm font-normal" @click="goToLogin()">
+        {{ $t('authentication.goToLogin') }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/common-ui/ui/authentication/third-party-login.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useAppConfig } from '@melt-js/libs-vben/hooks';
+import {
+  SvgGithubIcon,
+  SvgGoogleIcon,
+  SvgQQChatIcon,
+  SvgWeChatIcon,
+} from '@melt-js/libs-vben/icons';
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { VbenIconButton } from '@melt-js/comps-vben/shadcn-ui';
+
+import DingdingLogin from './dingding-login.vue';
+
+defineOptions({
+  name: 'ThirdPartyLogin',
+});
+
+const {
+  auth: { dingding: dingdingAuthConfig },
+} = useAppConfig(import.meta.env, import.meta.env.PROD);
+</script>
+
+<template>
+  <div class="w-full sm:mx-auto md:max-w-md">
+    <div class="mt-4 flex items-center justify-between">
+      <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
+      <span class="text-center text-xs text-muted-foreground uppercase">
+        {{ $t('authentication.thirdPartyLogin') }}
+      </span>
+      <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
+    </div>
+
+    <div class="mt-4 flex flex-wrap justify-center">
+      <VbenIconButton
+        :tooltip="$t('authentication.wechatLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <SvgWeChatIcon />
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.qqLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <SvgQQChatIcon />
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.githubLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <SvgGithubIcon />
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.googleLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <SvgGoogleIcon />
+      </VbenIconButton>
+      <DingdingLogin
+        v-if="dingdingAuthConfig"
+        :corp-id="dingdingAuthConfig.corpId"
+        :client-id="dingdingAuthConfig.clientId"
+        class="mb-3"
+      />
+    </div>
+  </div>
+</template>