refactor(adapter): separate form and component adapters so that components adapt to components other than the form (#4628)

* refactor: global components can be customized

* refactor: remove use Toast and reconstruct the form adapter

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

@@ -13,7 +13,7 @@ import {
 import { useLockStore } from '@vben/stores';
 import { deepToRaw, mapTree } from '@vben/utils';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
-import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
+import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
 import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
 import { LayoutContent, LayoutContentSpinner } from './content';
@@ -312,7 +312,6 @@ const headerSlots = computed(() => {
 
     <template #extra>
       <slot name="extra"></slot>
-      <Toaster />
       <CheckUpdates
         v-if="preferences.app.enableCheckUpdates"
         :check-updates-interval="preferences.app.checkUpdatesInterval"

packages/effects/layouts/src/widgets/check-updates/check-updates.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { h, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 import { $t } from '@vben/locales';
-import { ToastAction, useToast } from '@vben-core/shadcn-ui';
+import { useVbenModal } from '@vben-core/popup-ui';
 
 interface Props {
   // 轮训时间，分钟
@@ -18,10 +18,21 @@ const props = withDefaults(defineProps<Props>(), {
   checkUpdateUrl: import.meta.env.BASE_URL || '/',
 });
 
-const lastVersionTag = ref('');
 let isCheckingUpdates = false;
+const currentVersionTag = ref('');
+const lastVersionTag = ref('');
 const timer = ref<ReturnType<typeof setInterval>>();
-const { toast } = useToast();
+
+const [UpdateNoticeModal, modalApi] = useVbenModal({
+  closable: false,
+  closeOnPressEscape: false,
+  closeOnClickModal: false,
+  onConfirm() {
+    lastVersionTag.value = currentVersionTag.value;
+    window.location.reload();
+    // handleSubmitLogout();
+  },
+});
 
 async function getVersionTag() {
   try {
@@ -63,38 +74,8 @@ async function checkForUpdates() {
   }
 }
 function handleNotice(versionTag: string) {
-  const { dismiss } = toast({
-    action: h('div', { class: 'inline-flex items-center' }, [
-      h(
-        ToastAction,
-        {
-          altText: $t('common.cancel'),
-          onClick: () => dismiss(),
-        },
-        {
-          default: () => $t('common.cancel'),
-        },
-      ),
-      h(
-        ToastAction,
-        {
-          altText: $t('common.refresh'),
-          class:
-            'bg-primary text-primary-foreground hover:bg-primary-hover mx-1',
-          onClick: () => {
-            lastVersionTag.value = versionTag;
-            window.location.reload();
-          },
-        },
-        {
-          default: () => $t('common.refresh'),
-        },
-      ),
-    ]),
-    description: $t('widgets.checkUpdatesDescription'),
-    duration: 0,
-    title: $t('widgets.checkUpdatesTitle'),
-  });
+  currentVersionTag.value = versionTag;
+  modalApi.open();
 }
 
 function start() {
@@ -138,5 +119,16 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <slot></slot>
+  <UpdateNoticeModal
+    :cancel-text="$t('common.cancel')"
+    :confirm-text="$t('common.refresh')"
+    :fullscreen-button="false"
+    :title="$t('widgets.checkUpdatesTitle')"
+    centered
+    content-class="px-8 min-h-10"
+    footer-class="border-none mb-3 mr-3"
+    header-class="border-none"
+  >
+    {{ $t('widgets.checkUpdatesDescription') }}
+  </UpdateNoticeModal>
 </template>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -24,11 +24,11 @@ import {
 } from '@vben/preferences';
 import { useVbenDrawer } from '@vben-core/popup-ui';
 import {
-  useToast,
   VbenButton,
   VbenIconButton,
   VbenSegmented,
 } from '@vben-core/shadcn-ui';
+import { globalShareState } from '@vben-core/shared/global-state';
 
 import { useClipboard } from '@vueuse/core';
 
@@ -54,7 +54,9 @@ import {
 } from './blocks';
 
 const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
-const { toast } = useToast();
+
+const message = globalShareState.getMessage();
+
 const appLocale = defineModel<SupportedLanguagesType>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 const appLayout = defineModel<LayoutType>('appLayout');
@@ -196,10 +198,10 @@ const showBreadcrumbConfig = computed(() => {
 async function handleCopy() {
   await copy(JSON.stringify(diffPreference.value, null, 2));
 
-  toast({
-    description: $t('preferences.copyPreferences'),
-    title: $t('preferences.copyPreferencesSuccess'),
-  });
+  message.copyPreferencesSuccess?.(
+    $t('preferences.copyPreferencesSuccessTitle'),
+    $t('preferences.copyPreferencesSuccess'),
+  );
 }
 
 async function handleClearCache() {
@@ -214,10 +216,6 @@ async function handleReset() {
   }
   resetPreferences();
   await loadLocaleMessages(preferences.app.locale);
-  toast({
-    description: $t('preferences.resetTitle'),
-    title: $t('preferences.resetSuccess'),
-  });
 }
 </script>
 

packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue

@@ -149,7 +149,7 @@ if (enableShortcutKey.value) {
     :title="$t('common.prompt')"
     centered
     content-class="px-8 min-h-10"
-    footer-class="border-none mb-4 mr-4"
+    footer-class="border-none mb-3 mr-3"
     header-class="border-none"
   >
     {{ $t('widgets.logoutTip') }}