Merge branch 'dev' of https://gitee.com/dapppp/ruoyi-plus-vben5 into warmflow

packages/effects/common-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -29,7 +29,6 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
-    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",

packages/effects/common-ui/src/components/api-component/api-component.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { AnyPromiseFunction } from '@vben/types';
-
-import { type Component, computed, ref, unref, useAttrs, watch } from 'vue';
+import type { Component } from 'vue';
 
 import { LoaderCircle } from '@vben/icons';
 import { get, isEqual, isFunction } from '@vben-core/shared/utils';
-
 import { objectOmit } from '@vueuse/core';
+import { computed, ref, unref, useAttrs, watch } from 'vue';
 
 type OptionsItem = {
   [name: string]: any;

packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { PointSelectionCaptchaCardProps } from '../types';
 
-import { computed } from 'vue';
-
 import { $t } from '@vben/locales';
 import {
   Card,
@@ -11,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@vben-core/shadcn-ui';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
   height: '220px',

packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue

@@ -5,12 +5,10 @@ import type {
   SliderRotateVerifyPassingData,
 } from '../types';
 
-import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
-
 import { $t } from '@vben/locales';
 import { cn } from '@vben-core/shared/utils';
-
 import { useTimeoutFn } from '@vueuse/core';
+import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
 
 import SliderCaptchaAction from './slider-captcha-action.vue';
 import SliderCaptchaBar from './slider-captcha-bar.vue';

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
-import { computed, ref, useTemplateRef } from 'vue';
 
 import { Check, ChevronsRight } from '@vben/icons';
 import { Slot } from '@vben-core/shadcn-ui';
+import { computed, ref, useTemplateRef } from 'vue';
 
 const props = defineProps<{
   actionStyle: CSSProperties;

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, useTemplateRef } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, useTemplateRef } from 'vue';
 
 const props = defineProps<{
   barStyle: CSSProperties;

packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
-import { computed, useTemplateRef } from 'vue';
 
 import { VbenSpineText } from '@vben-core/shadcn-ui';
+import { computed, useTemplateRef } from 'vue';
 
 const props = defineProps<{
   contentStyle: CSSProperties;

packages/effects/common-ui/src/components/captcha/types.ts

@@ -1,5 +1,4 @@
 import type { ClassType } from '@vben/types';
-
 import type { CSSProperties } from 'vue';
 
 export interface CaptchaData {

packages/effects/common-ui/src/components/col-page/col-page.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { ColPageProps } from './types';
+
+import { computed, ref, useSlots } from 'vue';
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vben-core/shadcn-ui';
+
+import Page from '../page/page.vue';
+
+defineOptions({
+  name: 'ColPage',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ColPageProps>(), {
+  leftWidth: 30,
+  rightWidth: 70,
+  resizable: true,
+});
+
+const delegatedProps = computed(() => {
+  const { leftWidth: _, ...delegated } = props;
+  return delegated;
+});
+
+const slots = useSlots();
+
+const delegatedSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (!['default', 'left'].includes(key)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const leftPanelRef = ref<InstanceType<typeof ResizablePanel>>();
+
+function expandLeft() {
+  leftPanelRef.value?.expand();
+}
+
+function collapseLeft() {
+  leftPanelRef.value?.collapse();
+}
+
+defineExpose({
+  expandLeft,
+  collapseLeft,
+});
+</script>
+<template>
+  <Page v-bind="delegatedProps">
+    <!-- 继承默认的slot -->
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+
+    <ResizablePanelGroup class="w-full" direction="horizontal">
+      <ResizablePanel
+        ref="leftPanelRef"
+        :collapsed-size="leftCollapsedWidth"
+        :collapsible="leftCollapsible"
+        :default-size="leftWidth"
+        :max-size="leftMaxWidth"
+        :min-size="leftMinWidth"
+      >
+        <template #default="slotProps">
+          <slot
+            name="left"
+            v-bind="{
+              ...slotProps,
+              expand: expandLeft,
+              collapse: collapseLeft,
+            }"
+          ></slot>
+        </template>
+      </ResizablePanel>
+      <ResizableHandle
+        v-if="resizable"
+        :style="{ backgroundColor: splitLine ? undefined : 'transparent' }"
+        :with-handle="splitHandle"
+      />
+      <ResizablePanel
+        :collapsed-size="rightCollapsedWidth"
+        :collapsible="rightCollapsible"
+        :default-size="rightWidth"
+        :max-size="rightMaxWidth"
+        :min-size="rightMinWidth"
+      >
+        <template #default>
+          <slot></slot>
+        </template>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </Page>
+</template>

packages/effects/common-ui/src/components/col-page/index.ts

@@ -0,0 +1,2 @@
+export { default as ColPage } from './col-page.vue';
+export * from './types';

packages/effects/common-ui/src/components/col-page/types.ts

@@ -0,0 +1,26 @@
+import type { PageProps } from '../page/types';
+
+export interface ColPageProps extends PageProps {
+  /**
+   * 左侧宽度
+   * @default 30
+   */
+  leftWidth?: number;
+  leftMinWidth?: number;
+  leftMaxWidth?: number;
+  leftCollapsedWidth?: number;
+  leftCollapsible?: boolean;
+  /**
+   * 右侧宽度
+   * @default 70
+   */
+  rightWidth?: number;
+  rightMinWidth?: number;
+  rightCollapsedWidth?: number;
+  rightMaxWidth?: number;
+  rightCollapsible?: boolean;
+
+  resizable?: boolean;
+  splitLine?: boolean;
+  splitHandle?: boolean;
+}

packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, watchEffect } from 'vue';
+import type { CSSProperties } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
+import { computed, ref, watchEffect } from 'vue';
 
 interface Props {
   /**

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';
+import type { VNode } from 'vue';
 
 import { usePagination } from '@vben/hooks';
 import { EmptyIcon, Grip, listIcons } from '@vben/icons';
@@ -18,8 +18,8 @@ import {
   VbenIconButton,
   VbenPopover,
 } from '@vben-core/shadcn-ui';
-
 import { refDebounced } from '@vueuse/core';
+import { computed, h, ref, watch, watchEffect } from 'vue';
 
 interface Props {
   pageSize?: number;

packages/effects/common-ui/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './api-component';
 export * from './captcha';
 export * from './code-mirror';
+export * from './col-page';
 export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './json-preview';

packages/effects/common-ui/src/components/page/index.ts

@@ -1 +1,2 @@
 export { default as Page } from './page.vue';
+export * from './types';

packages/effects/common-ui/src/components/page/page.vue

@@ -1,33 +1,17 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  type StyleValue,
-  useTemplateRef,
-} from 'vue';
+import type { StyleValue } from 'vue';
+
+import type { PageProps } from './types';
 
 import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
 import { cn } from '@vben-core/shared/utils';
-
-interface Props {
-  title?: string;
-  description?: string;
-  contentClass?: string;
-  /**
-   * 根据content可见高度自适应
-   */
-  autoContentHeight?: boolean;
-  headerClass?: string;
-  footerClass?: string;
-}
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 
 defineOptions({
   name: 'Page',
 });
 
-const { autoContentHeight = false } = defineProps<Props>();
+const { autoContentHeight = false } = defineProps<PageProps>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -100,7 +84,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <div :class="contentClass" :style="contentStyle" class="h-full p-4">
+    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
       <slot></slot>
     </div>
 

packages/effects/common-ui/src/components/page/types.ts

@@ -0,0 +1,11 @@
+export interface PageProps {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
+  headerClass?: string;
+  footerClass?: string;
+}

packages/effects/common-ui/src/ui/about/about.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { AboutProps, DescriptionItem } from './about';
 
-import { h } from 'vue';
-
 import {
   VBEN_DOC_URL,
   VBEN_GITHUB_URL,
   VBEN_PREVIEW_URL,
 } from '@vben/constants';
 import { VbenRenderContent } from '@vben-core/shadcn-ui';
+import { h } from 'vue';
 
 import { Page } from '../../components';
 

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { $t } from '@vben/locales';
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 

packages/effects/common-ui/src/ui/authentication/forget-password.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { $t } from '@vben/locales';
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 

packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { AuthenticationProps } from './types';
 
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import { useVbenModal } from '@vben-core/popup-ui';
 import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
+  zIndex?: number;
 }
 
 defineOptions({
   name: 'LoginExpiredModal',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   avatar: '',
+  zIndex: 0,
 });
 
 const open = defineModel<boolean>('open');
@@ -28,6 +30,26 @@ watch(
     modalApi.setState({ isOpen: val });
   },
 );
+
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
+/**
+ * 获取最大的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))) {
+      maxZ = Math.max(maxZ, Number.parseInt(zIndex));
+    }
+  });
+  return maxZ + 1;
+}
 </script>
 
 <template>
@@ -39,6 +61,7 @@ watch(
       :footer="false"
       :fullscreen-button="false"
       :header="false"
+      :z-index="getZIndex"
       class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />

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

@@ -3,13 +3,12 @@ import type { VbenFormSchema } from '@vben-core/form-ui';
 
 import type { AuthenticationProps, LoginAndRegisterParams } from './types';
 
-import { computed, onMounted, reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { $t } from '@vben/locales';
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
 import { cloneDeep } from '@vben-core/shared/utils';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';

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

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { $t } from '@vben/locales';
 import { VbenButton } from '@vben-core/shadcn-ui';
-
 import { useQRCode } from '@vueuse/integrations/useQRCode';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -2,12 +2,11 @@
 import type { Recordable } from '@vben/types';
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { $t } from '@vben/locales';
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue

@@ -38,7 +38,7 @@ defineEmits(['click']);
             'border-b-0': index < 3,
             'pb-4': index > 2,
           }"
-          class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
         >
           <div class="flex items-center">
             <VbenIcon

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue

@@ -38,7 +38,7 @@ defineEmits(['click']);
             'pb-4': index > 2,
             'border-b-0': index < 3,
           }"
-          class="flex-col-center border-border group w-1/3 cursor-pointer border-b border-r border-t py-8 hover:shadow-xl"
+          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
           @click="$emit('click', item)"
         >
           <VbenIcon

packages/effects/common-ui/src/ui/fallback/fallback.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { FallbackProps } from './fallback';
 
-import { computed, defineAsyncComponent } from 'vue';
-import { useRouter } from 'vue-router';
-
 import { ArrowLeft, RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { VbenButton } from '@vben-core/shadcn-ui';
+import { computed, defineAsyncComponent } from 'vue';
+import { useRouter } from 'vue-router';
 
 interface Props extends FallbackProps {}