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

.github/workflows/build.yml

@@ -20,7 +20,13 @@ permissions:
 jobs:
   post-update:
     # if: ${{ github.actor == 'dependabot[bot]' }}
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          # - macos-latest
+          - windows-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

packages/@core/base/design/src/css/global.css

@@ -32,9 +32,13 @@
   body,
   html {
     @apply size-full overscroll-none;
+
+    /* scrollbar-gutter: stable; */
   }
 
   body {
+    @apply !pointer-events-auto;
+
     min-height: 100vh;
 
     /* overflow: overlay; */
@@ -90,6 +94,7 @@
   }
 
   /* 只有非mac下才进行调整，mac下使用默认滚动条 */
+
   html:not([data-platform='macOs']) {
     ::-webkit-scrollbar {
       @apply h-[10px] w-[10px];

packages/@core/base/shared/package.json

@@ -71,6 +71,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@tanstack/vue-store": "^0.5.5",
+    "@vue/reactivity": "^3.5.4",
     "@vue/shared": "^3.5.4",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",

packages/@core/base/shared/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from './inference';
 export * from './letter';
 export * from './merge';
 export * from './nprogress';
+export * from './reactivity';
 export * from './state-handler';
 export * from './to';
 export * from './tree';

packages/@core/base/shared/src/utils/reactivity.ts

@@ -0,0 +1,26 @@
+import { isProxy, isReactive, isRef, toRaw } from '@vue/reactivity';
+
+function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
+  const objectIterator = (input: any): any => {
+    if (Array.isArray(input)) {
+      return input.map((item) => objectIterator(item));
+    }
+    if (isRef(input) || isReactive(input) || isProxy(input)) {
+      return objectIterator(toRaw(input));
+    }
+    if (input && typeof input === 'object') {
+      const result = {} as T;
+      for (const key in input) {
+        if (Object.prototype.hasOwnProperty.call(input, key)) {
+          result[key as keyof T] = objectIterator(input[key]);
+        }
+      }
+      return result;
+    }
+    return input;
+  };
+
+  return objectIterator(sourceObj);
+}
+
+export { deepToRaw };

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -41,6 +41,7 @@ export class ModalApi {
       isOpen: false,
       loading: false,
       modal: true,
+      openAutoFocus: false,
       showCancelButton: true,
       showConfirmButton: true,
       title: '',

packages/@core/ui-kit/popup-ui/src/modal/modal.ts

@@ -75,6 +75,10 @@ export interface ModalProps {
    * @default true
    */
   modal?: boolean;
+  /**
+   * 是否自动聚焦
+   */
+  openAutoFocus?: boolean;
   /**
    * 是否显示取消按钮
    * @default true

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -68,6 +68,7 @@ const {
   header,
   loading: showLoading,
   modal,
+  openAutoFocus,
   showCancelButton,
   showConfirmButton,
   title,
@@ -133,6 +134,13 @@ function escapeKeyDown(e: KeyboardEvent) {
     e.preventDefault();
   }
 }
+
+function handerOpenAutoFocus(e: Event) {
+  if (!openAutoFocus.value) {
+    e?.preventDefault();
+  }
+}
+
 // pointer-down-outside
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
@@ -166,6 +174,7 @@ function pointerDownOutside(e: Event) {
       close-class="top-3"
       @escape-key-down="escapeKeyDown"
       @interact-outside="interactOutside"
+      @open-auto-focus="handerOpenAutoFocus"
       @pointer-down-outside="pointerDownOutside"
     >
       <DialogHeader

packages/@core/ui-kit/tabs-ui/package.json

@@ -40,6 +40,7 @@
     "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "vue": "^3.5.4"

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -7,6 +7,7 @@ import { computed, ref } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
+import { deepToRaw } from '@vben-core/shared/utils';
 
 interface Props extends TabsProps {}
 
@@ -40,7 +41,8 @@ const style = computed(() => {
 });
 
 const tabsView = computed((): TabConfig[] => {
-  return props.tabs.map((tab) => {
+  return props.tabs.map((_tab) => {
+    const tab = deepToRaw(_tab);
     return {
       ...tab,
       affixTab: !!tab.meta?.affixTab,

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -7,6 +7,7 @@ import { computed } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
+import { deepToRaw } from '@vben-core/shared/utils';
 
 interface Props extends TabsProps {}
 
@@ -46,7 +47,8 @@ const typeWithClass = computed(() => {
 });
 
 const tabsView = computed((): TabConfig[] => {
-  return props.tabs.map((tab) => {
+  return props.tabs.map((_tab) => {
+    const tab = deepToRaw(_tab);
     return {
       ...tab,
       affixTab: !!tab.meta?.affixTab,

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

@@ -22,6 +22,18 @@ interface Props {
    * @zh_CN 登陆路径
    */
   loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }
 
 defineOptions({
@@ -31,6 +43,9 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
   loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });
 
 const emit = defineEmits<{
@@ -69,16 +84,22 @@ function goToLogin() {
 <template>
   <div>
     <Title>
-      {{ $t('authentication.welcomeBack') }} 📲
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📲
+      </slot>
       <template #desc>
         <span class="text-muted-foreground">
-          {{ $t('authentication.codeSubtitle') }}
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.codeSubtitle') }}
+          </slot>
         </span>
       </template>
     </Title>
     <Form />
     <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-      {{ $t('common.login') }}
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('common.login') }}
+      </slot>
     </VbenButton>
     <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
       {{ $t('common.back') }}

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

@@ -11,6 +11,7 @@ import { VbenButton } from '@vben-core/shadcn-ui';
 import Title from './auth-title.vue';
 
 interface Props {
+  formSchema: VbenFormSchema[];
   /**
    * @zh_CN 是否处于加载处理状态
    */
@@ -19,8 +20,18 @@ interface Props {
    * @zh_CN 登陆路径
    */
   loginPath?: string;
-
-  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }
 
 defineOptions({
@@ -30,6 +41,9 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
   loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });
 
 const emit = defineEmits<{
@@ -65,16 +79,22 @@ function goToLogin() {
 <template>
   <div>
     <Title>
-      {{ $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      <slot name="title">
+        {{ title || $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      </slot>
       <template #desc>
-        {{ $t('authentication.forgetPasswordSubtitle') }}
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
+        </slot>
       </template>
     </Title>
     <Form />
 
     <div>
       <VbenButton class="mt-2 w-full" @click="handleSubmit">
-        {{ $t('authentication.sendResetLink') }}
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.sendResetLink') }}
+        </slot>
       </VbenButton>
       <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
         {{ $t('common.back') }}

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

@@ -38,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   showRegister: true,
   showRememberMe: true,
   showThirdPartyLogin: true,
+  submitButtonText: '',
   subTitle: '',
   title: '',
 });
@@ -94,10 +95,14 @@ defineExpose({ setFieldValue });
   <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>
@@ -109,8 +114,12 @@ defineExpose({ setFieldValue });
       v-if="showRememberMe || showForgetPassword"
       class="mb-6 flex justify-between"
     >
-      <div v-if="showRememberMe" class="flex-center">
-        <VbenCheckbox v-model:checked="rememberMe" name="rememberMe">
+      <div class="flex-center">
+        <VbenCheckbox
+          v-if="showRememberMe"
+          v-model:checked="rememberMe"
+          name="rememberMe"
+        >
           {{ $t('authentication.rememberMe') }}
         </VbenCheckbox>
       </div>
@@ -124,7 +133,7 @@ defineExpose({ setFieldValue });
       </span>
     </div>
     <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-      {{ $t('common.login') }}
+      {{ submitButtonText || $t('common.login') }}
     </VbenButton>
 
     <div

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

@@ -18,6 +18,22 @@ interface Props {
    * @zh_CN 登陆路径
    */
   loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
 }
 
 defineOptions({
@@ -25,8 +41,12 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  description: '',
   loading: false,
   loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });
 
 const router = useRouter();
@@ -46,10 +66,14 @@ function goToLogin() {
 <template>
   <div>
     <Title>
-      {{ $t('authentication.welcomeBack') }} 📱
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📱
+      </slot>
       <template #desc>
         <span class="text-muted-foreground">
-          {{ $t('authentication.qrcodeSubtitle') }}
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.qrcodeSubtitle') }}
+          </slot>
         </span>
       </template>
     </Title>
@@ -57,7 +81,9 @@ function goToLogin() {
     <div class="flex-col-center mt-6">
       <img :src="qrcode" alt="qrcode" class="w-1/2" />
       <p class="text-muted-foreground mt-4 text-sm">
-        {{ $t('authentication.qrcodePrompt') }}
+        <slot name="description">
+          {{ description || $t('authentication.qrcodePrompt') }}
+        </slot>
       </p>
     </div>
 

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

@@ -22,6 +22,18 @@ interface Props {
    * @zh_CN 登陆路径
    */
   loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }
 
 defineOptions({
@@ -32,6 +44,9 @@ const props = withDefaults(defineProps<Props>(), {
   formSchema: () => [],
   loading: false,
   loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });
 
 const emit = defineEmits<{
@@ -66,13 +81,21 @@ function goToLogin() {
 <template>
   <div>
     <Title>
-      {{ $t('authentication.createAnAccount') }} 🚀
-      <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
+      <slot name="title">
+        {{ title || $t('authentication.createAnAccount') }} 🚀
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.signUpSubtitle') }}
+        </slot>
+      </template>
     </Title>
     <Form />
 
     <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
-      {{ $t('authentication.signUp') }}
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('authentication.signUp') }}
+      </slot>
     </VbenButton>
     <div class="mt-4 text-center text-sm">
       {{ $t('authentication.alreadyHaveAccount') }}

packages/effects/common-ui/src/ui/authentication/types.ts

@@ -63,6 +63,10 @@ interface AuthenticationProps {
    * @zh_CN 登录框标题
    */
   title?: string;
+  /**
+   * @zh_CN 提交按钮文本
+   */
+  submitButtonText?: string;
 }
 
 /**

packages/effects/layouts/src/authentication/toolbar.vue

@@ -31,9 +31,9 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
   <div
     :class="{
-      'bg-accent z-10 rounded-3xl px-3 py-1': toolbarList.length > 1,
+      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
     }"
-    class="flex-center absolute right-2 top-4"
+    class="flex-center absolute right-2 top-4 z-10"
   >
     <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">

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

@@ -11,7 +11,7 @@ import {
   usePreferences,
 } from '@vben/preferences';
 import { useLockStore, useUserStore } from '@vben/stores';
-import { mapTree } from '@vben/utils';
+import { deepToRaw, mapTree } from '@vben/utils';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
@@ -113,7 +113,7 @@ const {
 
 function wrapperMenus(menus: MenuRecordRaw[]) {
   return mapTree(menus, (item) => {
-    return { ...item, name: $t(item.name) };
+    return { ...deepToRaw(item), name: $t(item.name) };
   });
 }
 

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

@@ -5,7 +5,7 @@ import type { MenuProps } from '@vben-core/menu-ui';
 import { Menu } from '@vben-core/menu-ui';
 
 interface Props extends MenuProps {
-  menus?: MenuRecordRaw[];
+  menus: MenuRecordRaw[];
 }
 
 const props = withDefaults(defineProps<Props>(), {

playground/src/views/examples/modal/form-model-demo.vue

@@ -27,6 +27,19 @@ const [Form, formApi] = useVbenForm({
       label: '字段2',
       rules: 'required',
     },
+    {
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '选项1', value: '1' },
+          { label: '选项2', value: '2' },
+        ],
+        placeholder: '请输入',
+      },
+      fieldName: 'field3',
+      label: '字段3',
+      rules: 'required',
+    },
   ],
   showDefaultActions: false,
 });