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

packages/@core/base/shared/src/color/generator.ts

@@ -14,6 +14,7 @@ function generatorColorVariables(colorItems: ColorItem[]) {
   colorItems.forEach(({ alias, color, name }) => {
     if (color) {
       const colorsMap = getColors(new TinyColor(color).toHexString());
+
       let mainColor = colorsMap['500'];
 
       const colorKeys = Object.keys(colorsMap);

packages/@core/base/shared/src/utils/__tests__/window.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { openWindow } from '../window'; // 假设你的函数在 'openWindow' 文件中
+import { openWindow } from '../window';
 
 describe('openWindow', () => {
   // 保存原始的 window.open 函数

packages/@core/preferences/src/update-css-variables.ts

@@ -86,21 +86,22 @@ function updateMainColorVariables(preference: Preferences) {
     { alias: 'destructive', color: colorDestructive, name: 'red' },
   ]);
 
-  if (colorPrimary) {
-    const mainColor = colorVariables['--primary-500'];
-    mainColor &&
-      document.documentElement.style.setProperty('--primary', mainColor);
-  }
+  // 要设置的 CSS 变量映射
+  const colorMappings = {
+    '--green-500': '--success',
+    '--primary-500': '--primary',
+    '--red-500': '--destructive',
+    '--yellow-500': '--warning',
+  };
+
+  // 统一处理颜色变量的更新
+  Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
+    const colorValue = colorVariables[sourceVar];
+    if (colorValue) {
+      document.documentElement.style.setProperty(targetVar, colorValue);
+    }
+  });
 
-  if (colorVariables['--green-500']) {
-    colorVariables['--success'] = colorVariables['--green-500'];
-  }
-  if (colorVariables['--yellow-500']) {
-    colorVariables['--warning'] = colorVariables['--yellow-500'];
-  }
-  if (colorVariables['--red-500']) {
-    colorVariables['--destructive'] = colorVariables['--red-500'];
-  }
   executeUpdateCSSVariables(colorVariables);
 }
 

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -177,7 +177,7 @@ export class FormApi {
   }
 
   unmounted() {
-    this.state = null;
+    // this.state = null;
     this.isMounted = false;
     this.stateHandler.reset();
   }

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -16,7 +16,7 @@ import {
 import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
 
 import { toTypedSchema } from '@vee-validate/zod';
-import { useFormValues } from 'vee-validate';
+import { useFieldError, useFormValues } from 'vee-validate';
 
 import { injectRenderFormProps, useFormContext } from './context';
 import useDependencies from './dependencies';
@@ -43,8 +43,11 @@ const {
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
 const formRenderProps = injectRenderFormProps();
 const values = useFormValues();
+const errors = useFieldError(fieldName);
 const formApi = formRenderProps.form;
 
+const isInValid = computed(() => errors.value?.length > 0);
+
 const fieldComponent = computed(() => {
   const finalComponent = isString(component)
     ? componentMap.value[component]
@@ -217,6 +220,7 @@ function createComponentProps(slotProps: Record<string, any>) {
     <FormItem
       v-show="isShow"
       :class="{
+        'form-valid-error': isInValid,
         'flex-col': isVertical,
         'flex-row items-center': !isVertical,
       }"
@@ -248,10 +252,14 @@ function createComponentProps(slotProps: Record<string, any>) {
               ...slotProps,
               ...createComponentProps(slotProps),
               disabled: shouldDisabled,
+              isInValid,
             }"
           >
             <component
               :is="fieldComponent"
+              :class="{
+                'border-destructive focus:border-destructive': isInValid,
+              }"
               v-bind="createComponentProps(slotProps)"
               :disabled="shouldDisabled"
             >

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

@@ -1,7 +1,8 @@
+import type { ModalState } from '../modal';
+
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { ModalApi } from '../modal-api'; // 假设 ModalApi 位于同一目录
-import type { ModalState } from '../modal';
+import { ModalApi } from '../modal-api';
 
 vi.mock('@vben-core/shared/store', () => {
   return {

packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue

@@ -52,7 +52,9 @@ defineExpose({
 
 <template>
   <DialogPortal>
-    <DialogOverlay v-if="open && modal" @click="() => emits('close')" />
+    <Transition name="fade">
+      <DialogOverlay v-if="open && modal" @click="() => emits('close')" />
+    </Transition>
     <DialogContent
       ref="contentRef"
       v-bind="forwarded"

packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue

@@ -5,7 +5,7 @@ useScrollLock();
 </script>
 <template>
   <div
-    class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]"
+    class="bg-overlay fixed inset-0 z-[1000]"
     data-dismissable-modal="true"
   ></div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue

@@ -46,7 +46,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <DialogPortal>
-    <SheetOverlay v-if="open && modal" />
+    <Transition name="fade">
+      <SheetOverlay v-if="open && modal" />
+    </Transition>
     <DialogContent
       :class="cn(sheetVariants({ side }), 'z-[1000]', props.class)"
       v-bind="{ ...forwarded, ...$attrs }"

packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue

@@ -5,7 +5,7 @@ useScrollLock();
 </script>
 <template>
   <div
-    class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
+    class="bg-overlay fixed inset-0 z-[1000]"
     data-dismissable-modal="true"
   ></div>
 </template>