From b8a4fba78cb35cf5222681b08bf346c66efe063e Mon Sep 17 00:00:00 2001
From: Donny Wang <53386850+coderwyd@users.noreply.github.com>
Date: Sat, 14 Sep 2024 17:27:25 +0800
Subject: [PATCH 1/5] chore: fix ci (#4404)

---
 .../ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts  | 7 ++++---
 .../utils/src/helpers/__tests__/generate-menus.test.ts     | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
index 90eb634d..41ca2ad1 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -1,8 +1,9 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { ModalApi } from '../modal-api'; // 假设 ModalApi 位于同一目录
 import type { ModalState } from '../modal';
 
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// 假设 ModalApi 位于同一目录
+import { ModalApi } from '../modal-api';
+
 vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
diff --git a/packages/utils/src/helpers/__tests__/generate-menus.test.ts b/packages/utils/src/helpers/__tests__/generate-menus.test.ts
index d8ffc0bb..7e967b80 100644
--- a/packages/utils/src/helpers/__tests__/generate-menus.test.ts
+++ b/packages/utils/src/helpers/__tests__/generate-menus.test.ts
@@ -1,6 +1,3 @@
-import { describe, expect, it, vi } from 'vitest';
-
-import { generateMenus } from '../generate-menus'; // 替换为您的实际路径
 import {
   createRouter,
   createWebHistory,
@@ -8,6 +5,10 @@ import {
   type RouteRecordRaw,
 } from 'vue-router';
 
+import { describe, expect, it, vi } from 'vitest';
+// 替换为您的实际路径
+import { generateMenus } from '../generate-menus';
+
 // Nested route setup to test child inclusion and hideChildrenInMenu functionality
 
 describe('generateMenus', () => {

From 38fe6426a296b7b7ff396022aba1a5687f76b992 Mon Sep 17 00:00:00 2001
From: Squall2017 <252766926@qq.com>
Date: Sat, 14 Sep 2024 21:21:16 +0800
Subject: [PATCH 2/5] fix: Improve the problem of inaccurate captcha accuracy
 (#4401)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: captcha example

* fix: fix lint errors

* chore: event handling and methods

* chore: add accessibility features ARIA labels and roles

* refactor: refactor code structure and improve captcha demo page

* feat: add captcha internationalization

* chore: 适配时间戳国际化展示

* fix: 1. 添加点击位置边界校验，防止点击外部导致x,y误差。2. 演示页面宽度过长添加滚动条。3. 添加hooks

---------
---
 .../captcha/hooks/useCaptchaPoints.ts         | 18 ++++++
 .../captcha/point-selection-captcha.vue       | 60 ++++++++-----------
 .../src/views/examples/captcha/index.vue      |  5 +-
 3 files changed, 47 insertions(+), 36 deletions(-)
 create mode 100644 packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts

diff --git a/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts b/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
new file mode 100644
index 00000000..6032d41a
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
@@ -0,0 +1,18 @@
+import type { CaptchaPoint } from '../types';
+
+import { reactive } from 'vue';
+
+export function useCaptchaPoints() {
+  const points = reactive<CaptchaPoint[]>([]);
+  function addPoint(point: CaptchaPoint) {
+    points.push(point);
+  }
+  function clearPoints() {
+    points.splice(0, points.length);
+  }
+  return {
+    addPoint,
+    clearPoints,
+    points,
+  };
+}
diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
index 3b1ac907..249cc110 100644
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { CaptchaPoint, PointSelectionCaptchaProps } from './types';
 
-import { ref } from 'vue';
-
 import { RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { CaptchaCard } from '.';
+import { useCaptchaPoints } from './hooks/useCaptchaPoints';
 
 const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
   height: '220px',
@@ -19,44 +18,24 @@ const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
   title: '',
   width: '300px',
 });
-
 const emit = defineEmits<{
   click: [CaptchaPoint];
   confirm: [Array<CaptchaPoint>, clear: () => void];
   refresh: [];
 }>();
+const { addPoint, clearPoints, points } = useCaptchaPoints();
 
 if (!props.hintImage && !props.hintText) {
-  throw new Error('At least one of hint image or hint text must be provided');
+  console.warn('At least one of hint image or hint text must be provided');
 }
 
-const points = ref<CaptchaPoint[]>([]);
 const POINT_OFFSET = 11;
 
 function getElementPosition(element: HTMLElement) {
-  let posX = 0;
-  let posY = 0;
-  if (element.getBoundingClientRect) {
-    const rect = element.getBoundingClientRect();
-    const doc = document.documentElement;
-    posX =
-      rect.left +
-      Math.max(doc.scrollLeft, document.body.scrollLeft) -
-      doc.clientLeft;
-    posY =
-      rect.top +
-      Math.max(doc.scrollTop, document.body.scrollTop) -
-      doc.clientTop;
-  } else {
-    while (element !== document.body) {
-      posX += element.offsetLeft;
-      posY += element.offsetTop;
-      element = element.offsetParent as HTMLElement;
-    }
-  }
+  const rect = element.getBoundingClientRect();
   return {
-    x: posX,
-    y: posY,
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY,
   };
 }
 
@@ -67,25 +46,35 @@ function handleClick(e: MouseEvent) {
 
     const { x: domX, y: domY } = getElementPosition(dom);
 
-    const mouseX = e.pageX || e.clientX;
-    const mouseY = e.pageY || e.clientY;
+    const mouseX = e.clientX + window.scrollX;
+    const mouseY = e.clientY + window.scrollY;
 
-    if (mouseX === undefined || mouseY === undefined)
-      throw new Error('Mouse coordinates not found');
+    if (typeof mouseX !== 'number' || typeof mouseY !== 'number') {
+      throw new TypeError('Mouse coordinates not found');
+    }
 
     const xPos = mouseX - domX;
     const yPos = mouseY - domY;
 
+    const rect = dom.getBoundingClientRect();
+
+    // 点击位置边界校验
+    if (xPos < 0 || yPos < 0 || xPos > rect.width || yPos > rect.height) {
+      console.warn('Click position is out of the valid range');
+      return;
+    }
+
     const x = Math.ceil(xPos);
     const y = Math.ceil(yPos);
 
     const point = {
-      i: points.value.length,
+      i: points.length,
       t: Date.now(),
       x,
       y,
     };
-    points.value.push(point);
+
+    addPoint(point);
 
     emit('click', point);
     e.stopPropagation();
@@ -97,7 +86,7 @@ function handleClick(e: MouseEvent) {
 
 function clear() {
   try {
-    points.value = [];
+    clearPoints();
   } catch (error) {
     console.error('Error in clear:', error);
   }
@@ -115,7 +104,7 @@ function handleRefresh() {
 function handleConfirm() {
   if (!props.showConfirm) return;
   try {
-    emit('confirm', points.value, clear);
+    emit('confirm', points, clear);
   } catch (error) {
     console.error('Error in handleConfirm:', error);
   }
@@ -164,6 +153,7 @@ function handleConfirm() {
       }"
       class="bg-primary text-primary-50 border-primary-50 absolute z-20 flex h-5 w-5 cursor-default items-center justify-center rounded-full border-2"
       role="button"
+      tabindex="0"
     >
       {{ index + 1 }}
     </div>
diff --git a/playground/src/views/examples/captcha/index.vue b/playground/src/views/examples/captcha/index.vue
index 7ceecb31..80e40a82 100644
--- a/playground/src/views/examples/captcha/index.vue
+++ b/playground/src/views/examples/captcha/index.vue
@@ -46,7 +46,10 @@ const handleClick = (point: CaptchaPoint) => {
     :description="$t('page.examples.captcha.pageDescription')"
     :title="$t('page.examples.captcha.pageTitle')"
   >
-    <Card :title="$t('page.examples.captcha.basic')" class="mb-4">
+    <Card
+      :title="$t('page.examples.captcha.basic')"
+      class="mb-4 overflow-x-auto"
+    >
       <div class="mb-3 flex items-center justify-start">
         <Input
           v-model:value="params.title"

From c3d0102cdad95e2a204c45bcb7f16838359650cf Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sat, 14 Sep 2024 21:35:12 +0800
Subject: [PATCH 3/5] fix: the brand color setting does not take effect (#4405)

---
 .../@core/base/shared/src/color/generator.ts  |  1 +
 .../shared/src/utils/__tests__/window.test.ts |  2 +-
 .../preferences/src/update-css-variables.ts   | 29 ++++++++++---------
 .../src/modal/__tests__/modal-api.test.ts     |  2 +-
 .../components/ui/dialog/DialogContent.vue    |  4 ++-
 .../components/ui/dialog/DialogOverlay.vue    |  2 +-
 .../src/components/ui/sheet/SheetContent.vue  |  4 ++-
 .../src/components/ui/sheet/SheetOverlay.vue  |  2 +-
 packages/stores/src/modules/lock.test.ts      |  1 -
 packages/stores/src/modules/tabbar.test.ts    | 13 ++++-----
 packages/stores/src/modules/user.test.ts      |  2 +-
 .../helpers/__tests__/generate-menus.test.ts  | 11 +++----
 playground/src/preferences.ts                 |  1 +
 .../demos/features/login-expired/index.vue    |  2 +-
 14 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/@core/base/shared/src/color/generator.ts b/packages/@core/base/shared/src/color/generator.ts
index c7a5cbb2..ac7bd8ad 100644
--- a/packages/@core/base/shared/src/color/generator.ts
+++ b/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);
diff --git a/packages/@core/base/shared/src/utils/__tests__/window.test.ts b/packages/@core/base/shared/src/utils/__tests__/window.test.ts
index 69ad4f7d..ebb04bb0 100644
--- a/packages/@core/base/shared/src/utils/__tests__/window.test.ts
+++ b/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 函数
diff --git a/packages/@core/preferences/src/update-css-variables.ts b/packages/@core/preferences/src/update-css-variables.ts
index 507da91c..ae6f7e5e 100644
--- a/packages/@core/preferences/src/update-css-variables.ts
+++ b/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);
 }
 
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
index 41ca2ad1..e12b144f 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -1,7 +1,7 @@
 import type { ModalState } from '../modal';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-// 假设 ModalApi 位于同一目录
+
 import { ModalApi } from '../modal-api';
 
 vi.mock('@vben-core/shared/store', () => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
index 3f12dc16..233a2778 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
+++ b/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"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
index a32bfc02..64113eee 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
+++ b/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>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
index 71fcac14..361396ae 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
+++ b/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 }"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
index cfedd918..64113eee 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
+++ b/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>
diff --git a/packages/stores/src/modules/lock.test.ts b/packages/stores/src/modules/lock.test.ts
index c012a4f8..d8dbe554 100644
--- a/packages/stores/src/modules/lock.test.ts
+++ b/packages/stores/src/modules/lock.test.ts
@@ -5,7 +5,6 @@ import { useLockStore } from './lock';
 
 describe('useLockStore', () => {
   beforeEach(() => {
-    // 每个测试前重置 Pinia
     setActivePinia(createPinia());
   });
 
diff --git a/packages/stores/src/modules/tabbar.test.ts b/packages/stores/src/modules/tabbar.test.ts
index 9451c4a1..d74615ca 100644
--- a/packages/stores/src/modules/tabbar.test.ts
+++ b/packages/stores/src/modules/tabbar.test.ts
@@ -63,12 +63,11 @@ describe('useAccessStore', () => {
     store.tabs = [
       { fullPath: '/home', meta: {}, name: 'Home', path: '/home' },
     ] as any;
-    router.replace = vi.fn(); // 使用 vitest 的 mock 函数
+    router.replace = vi.fn();
 
     await store.closeAllTabs(router);
 
-    expect(store.tabs.length).toBe(1); // 假设没有固定的标签页
-    // expect(router.replace).toHaveBeenCalled();
+    expect(store.tabs.length).toBe(1);
   });
 
   it('closes a non-affix tab', () => {
@@ -161,7 +160,7 @@ describe('useAccessStore', () => {
     await store._bulkCloseByPaths(['/home', '/contact']);
 
     expect(store.tabs).toHaveLength(1);
-    expect(store.tabs[0].name).toBe('About');
+    expect(store.tabs[0]?.name).toBe('About');
   });
 
   it('closes all tabs to the left of the specified tab', async () => {
@@ -189,7 +188,7 @@ describe('useAccessStore', () => {
     await store.closeLeftTabs(targetTab);
 
     expect(store.tabs).toHaveLength(1);
-    expect(store.tabs[0].name).toBe('Contact');
+    expect(store.tabs[0]?.name).toBe('Contact');
   });
 
   it('closes all tabs except the specified tab', async () => {
@@ -217,7 +216,7 @@ describe('useAccessStore', () => {
     await store.closeOtherTabs(targetTab);
 
     expect(store.tabs).toHaveLength(1);
-    expect(store.tabs[0].name).toBe('About');
+    expect(store.tabs[0]?.name).toBe('About');
   });
 
   it('closes all tabs to the right of the specified tab', async () => {
@@ -245,7 +244,7 @@ describe('useAccessStore', () => {
     await store.closeRightTabs(targetTab);
 
     expect(store.tabs).toHaveLength(1);
-    expect(store.tabs[0].name).toBe('Home');
+    expect(store.tabs[0]?.name).toBe('Home');
   });
 
   it('closes the tab with the specified key', async () => {
diff --git a/packages/stores/src/modules/user.test.ts b/packages/stores/src/modules/user.test.ts
index 19a42f2f..3d8a22c4 100644
--- a/packages/stores/src/modules/user.test.ts
+++ b/packages/stores/src/modules/user.test.ts
@@ -24,7 +24,7 @@ describe('useUserStore', () => {
     expect(store.userInfo).not.toBeNull();
     expect(store.userRoles.length).toBeGreaterThan(0);
 
-    store.setUserInfo(null as any); // 重置用户信息
+    store.setUserInfo(null as any);
     expect(store.userInfo).toBeNull();
     expect(store.userRoles).toEqual([]);
   });
diff --git a/packages/utils/src/helpers/__tests__/generate-menus.test.ts b/packages/utils/src/helpers/__tests__/generate-menus.test.ts
index 7e967b80..9d98b5a1 100644
--- a/packages/utils/src/helpers/__tests__/generate-menus.test.ts
+++ b/packages/utils/src/helpers/__tests__/generate-menus.test.ts
@@ -1,12 +1,9 @@
-import {
-  createRouter,
-  createWebHistory,
-  type Router,
-  type RouteRecordRaw,
-} from 'vue-router';
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import { createRouter, createWebHistory } from 'vue-router';
 
 import { describe, expect, it, vi } from 'vitest';
-// 替换为您的实际路径
+
 import { generateMenus } from '../generate-menus';
 
 // Nested route setup to test child inclusion and hideChildrenInMenu functionality
diff --git a/playground/src/preferences.ts b/playground/src/preferences.ts
index 63edb3a9..1e7ab05e 100644
--- a/playground/src/preferences.ts
+++ b/playground/src/preferences.ts
@@ -9,4 +9,5 @@ export const overridesPreferences = defineOverridesPreferences({
   app: {
     name: import.meta.env.VITE_APP_TITLE,
   },
+  theme: {},
 });
diff --git a/playground/src/views/demos/features/login-expired/index.vue b/playground/src/views/demos/features/login-expired/index.vue
index 28191693..532839af 100644
--- a/playground/src/views/demos/features/login-expired/index.vue
+++ b/playground/src/views/demos/features/login-expired/index.vue
@@ -24,7 +24,7 @@ async function handleClick(type: LoginExpiredModeType) {
         接口请求遇到401状态码时，需要重新登录。有两种方式：
         <p>1.转到登录页，登录成功后跳转回原页面</p>
         <p>
-          2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
+          2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后还是会跳转登录页面）
         </p>
       </div>
     </template>

From 02c4014ae36e7bcf177b12ee32c151d533afdcc1 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sat, 14 Sep 2024 22:07:50 +0800
Subject: [PATCH 4/5] fix: when the form is opened repeatedly, the state is
 unexpectedly destroyed (#4406)

---
 packages/@core/ui-kit/form-ui/src/form-api.ts           | 2 +-
 playground/src/views/examples/modal/form-model-demo.vue | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index f4c92abd..c49f01f4 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/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();
   }
diff --git a/playground/src/views/examples/modal/form-model-demo.vue b/playground/src/views/examples/modal/form-model-demo.vue
index 9b688c79..959a3ce8 100644
--- a/playground/src/views/examples/modal/form-model-demo.vue
+++ b/playground/src/views/examples/modal/form-model-demo.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { useVbenForm } from '#/adapter';
 
 defineOptions({
   name: 'FormModelDemo',
 });
 
+function onSubmit(values: Record<string, any>) {
+  message.info(JSON.stringify(values)); // 只会执行一次
+}
+
 const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
   schema: [
     {
       component: 'Input',

From bfae9626dd4f8e244086e9d573b042c178bf1ba6 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sat, 14 Sep 2024 22:44:21 +0800
Subject: [PATCH 5/5] perf: display border status color when the form is
 verified incorrectly (#4407)

* perf: display border status color when the form is verified incorrectly

* chore: adjust the document preview file order
---
 .dockerignore                                          |  2 ++
 .vscode/settings.json                                  |  1 -
 docs/.vitepress/config/plugins/demo-preview.ts         |  7 ++++++-
 docs/src/guide/introduction/thin.md                    |  9 +++++++++
 .../ui-kit/form-ui/src/form-render/form-field.vue      | 10 +++++++++-
 packages/styles/src/antd/index.css                     |  4 ++++
 Dockerfile => scripts/deploy/Dockerfile                |  0
 .../deploy/build-local-docker-image.sh                 |  0
 nginx.conf => scripts/deploy/nginx.conf                |  0
 9 files changed, 30 insertions(+), 3 deletions(-)
 rename Dockerfile => scripts/deploy/Dockerfile (100%)
 rename build-local-docker-image.sh => scripts/deploy/build-local-docker-image.sh (100%)
 rename nginx.conf => scripts/deploy/nginx.conf (100%)

diff --git a/.dockerignore b/.dockerignore
index 4f75c951..52b833a9 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -3,3 +3,5 @@ node_modules
 .gitignore
 *.md
 dist
+.turbo
+dist.zip
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f1a0e9db..92b4f1d2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -212,7 +212,6 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
-    "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
     "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
     "tailwind.config.mjs": "postcss.*"
   },
diff --git a/docs/.vitepress/config/plugins/demo-preview.ts b/docs/.vitepress/config/plugins/demo-preview.ts
index fba835cc..03b1698c 100644
--- a/docs/.vitepress/config/plugins/demo-preview.ts
+++ b/docs/.vitepress/config/plugins/demo-preview.ts
@@ -83,7 +83,12 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => {
       if (!state.tokens[index]) {
         return '';
       }
-
+      const firstString = 'index.vue';
+      childFiles = childFiles.sort((a, b) => {
+        if (a === firstString) return -1;
+        if (b === firstString) return 1;
+        return a.localeCompare(b, 'en', { sensitivity: 'base' });
+      });
       state.tokens[index].content =
         `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
         `;
diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md
index 7df3c9f8..523c6f8d 100644
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@@ -65,3 +65,12 @@ pnpm install
   }
 }
 ```
+
+## 其他
+
+如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+
+- `.changeset` 文件夹用于管理版本变更
+- `.github` 文件夹用于存放 GitHub 的配置文件
+- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
+- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 3cb5f6a5..6c0ecbdf 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/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"
             >
diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
index 77df64fd..b6246ea4 100644
--- a/packages/styles/src/antd/index.css
+++ b/packages/styles/src/antd/index.css
@@ -11,3 +11,7 @@
 .ant-notification-notice {
   @apply dark:border-border/60 dark:border;
 }
+
+.ant-app .form-valid-error .ant-select-selector {
+  border-color: hsl(var(--destructive));
+}
diff --git a/Dockerfile b/scripts/deploy/Dockerfile
similarity index 100%
rename from Dockerfile
rename to scripts/deploy/Dockerfile
diff --git a/build-local-docker-image.sh b/scripts/deploy/build-local-docker-image.sh
similarity index 100%
rename from build-local-docker-image.sh
rename to scripts/deploy/build-local-docker-image.sh
diff --git a/nginx.conf b/scripts/deploy/nginx.conf
similarity index 100%
rename from nginx.conf
rename to scripts/deploy/nginx.conf