Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

packages/effects/access/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/common-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/common-ui/src/ui/authentication/dingding-login.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+import { RiDingding } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { alert, useVbenModal } from '@vben-core/popup-ui';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+import { loadScript } from '@vben-core/shared/utils';
+
+interface Props {
+  clientId: string;
+  corpId: string;
+  // 登录回调地址
+  redirectUri?: string;
+  // 是否内嵌二维码登录
+  isQrCode?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const route = useRoute();
+
+const [Modal, modalApi] = useVbenModal({
+  header: false,
+  footer: false,
+  fullscreenButton: false,
+  class: 'w-[302px] h-[302px] dingding-qrcode-login-modal',
+  onOpened() {
+    handleQrCodeLogin();
+  },
+});
+
+const getRedirectUri = () => {
+  const { redirectUri } = props;
+  if (redirectUri) {
+    return redirectUri;
+  }
+  return window.location.origin + route.fullPath;
+};
+
+/**
+ * 内嵌二维码登录
+ */
+const handleQrCodeLogin = async () => {
+  const { clientId, corpId } = props;
+  if (!(window as any).DTFrameLogin) {
+    // 二维码登录 加载资源
+    await loadScript(
+      'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js',
+    );
+  }
+  (window as any).DTFrameLogin(
+    {
+      id: 'dingding_qrcode_login_element',
+      width: 300,
+      height: 300,
+    },
+    {
+      // 注意：redirect_uri 需为完整URL，扫码后钉钉会带code跳转到这里
+      redirect_uri: encodeURIComponent(getRedirectUri()),
+      client_id: clientId,
+      scope: 'openid corpid',
+      response_type: 'code',
+      state: '1',
+      prompt: 'consent',
+      corpId,
+    },
+    (loginResult: any) => {
+      const { redirectUrl } = loginResult;
+      // 这里可以直接进行重定向
+      window.location.href = redirectUrl;
+    },
+    (errorMsg: string) => {
+      // 这里一般需要展示登录失败的具体原因
+      alert(`Login Error: ${errorMsg}`);
+    },
+  );
+};
+
+const handleLogin = () => {
+  const { clientId, corpId, isQrCode } = props;
+  if (isQrCode) {
+    // 内嵌二维码登录
+    modalApi.open();
+  } else {
+    window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${encodeURIComponent(getRedirectUri())}&response_type=code&client_id=${clientId}&scope=openid&corpid=${corpId}&prompt=consent`;
+  }
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      @click="handleLogin"
+      :tooltip="$t('authentication.dingdingLogin')"
+      tooltip-side="top"
+    >
+      <RiDingding />
+    </VbenIconButton>
+    <Modal>
+      <div id="dingding_qrcode_login_element"></div>
+    </Modal>
+  </div>
+</template>
+
+<style>
+.dingding-qrcode-login-modal {
+  .relative {
+    padding: 0 !important;
+  }
+}
+</style>

packages/effects/common-ui/src/ui/authentication/third-party-login.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AntdDingTalk, MdiGithub, MdiQqchat, MdiWechat } from '@vben/icons';
+import { MdiGithub, MdiQqchat, MdiWechat, RiDingding } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { VbenIconButton } from '@vben-core/shadcn-ui';
@@ -37,7 +37,7 @@ function handleThirdLogin(type: number) {
         <MdiWechat />
       </VbenIconButton>
       <VbenIconButton class="mb-3" @click="handleThirdLogin(20)">
-        <AntdDingTalk />
+        <RiDingding />
       </VbenIconButton>
       <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
         <MdiQqchat />

packages/effects/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/hooks/src/use-app-config.ts

@@ -15,11 +15,24 @@ export function useAppConfig(
     ? window._VBEN_ADMIN_PRO_APP_CONF_
     : (env as VbenAdminProAppConfigRaw);
 
-  const { VITE_GLOB_API_URL } = config;
+  const {
+    VITE_GLOB_API_URL,
+    VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+  } = config;
 
-  return {
+  const applicationConfig: ApplicationConfig = {
     apiURL: VITE_GLOB_API_URL,
+    auth: {},
   };
+  if (VITE_GLOB_AUTH_DINGDING_CORP_ID && VITE_GLOB_AUTH_DINGDING_CLIENT_ID) {
+    applicationConfig.auth.dingding = {
+      clientId: VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+      corpId: VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    };
+  }
+
+  return applicationConfig;
 }
 
 export function isTenantEnable(): boolean {

packages/effects/layouts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/layouts/src/basic/layout.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import type { SetupContext } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import type { MenuRecordRaw } from '@vben/types';
 
-import { computed, useSlots, watch } from 'vue';
+import { computed, onMounted, useSlots, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useRefresh } from '@vben/hooks';
 import { $t, i18n } from '@vben/locales';
@@ -153,6 +155,23 @@ function clickLogo() {
   emit('clickLogo');
 }
 
+function autoCollapseMenuByRouteMeta(route: RouteLocationNormalizedLoaded) {
+  // 只在双列模式下生效
+  if (
+    preferences.app.layout === 'sidebar-mixed-nav' &&
+    route.meta &&
+    route.meta.hideInMenu
+  ) {
+    sidebarExtraVisible.value = false;
+  }
+}
+
+const route = useRoute();
+
+onMounted(() => {
+  autoCollapseMenuByRouteMeta(route);
+});
+
 watch(
   () => preferences.app.layout,
   async (val) => {

packages/effects/layouts/src/basic/menu/use-navigation.ts

@@ -32,6 +32,10 @@ function useNavigation() {
     return route?.meta?.openInNewWindow ?? false;
   };
 
+  const resolveHref = (path: string): string => {
+    return router.resolve(path).href;
+  };
+
   const navigation = async (path: string) => {
     try {
       const route = routeMetaMap.get(path);
@@ -40,7 +44,7 @@ function useNavigation() {
       if (isHttpUrl(path)) {
         openWindow(path, { target: '_blank' });
       } else if (openInNewWindow) {
-        openRouteInNewWindow(path);
+        openRouteInNewWindow(resolveHref(path));
       } else {
         await router.push({
           path,

packages/effects/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/plugins",
-  "version": "5.5.6",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/effects/request/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {