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] 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>