feat: add modal and drawer components and examples (#4229)

* feat: add modal component

* feat: add drawer component

* feat: apply new modal and drawer components to the layout

* chore: typo

* feat: add some unit tests

.vscode/settings.json

@@ -168,9 +168,10 @@
 
   "i18n-ally.localesPaths": [
     "packages/locales/src/langs",
-    "playground/src/langs",
+    "playground/src/locales/langs",
     "apps/*/src/locales/langs"
   ],
+  "i18n-ally.pathMatcher": "{locale}.json",
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",

apps/backend-mock/utils/jwt-utils.ts

@@ -14,7 +14,7 @@ export interface UserPayload extends UserInfo {
 }
 
 export function generateAccessToken(user: UserInfo) {
-  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '1d' });
+  return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
 }
 
 export function generateRefreshToken(user: UserInfo) {

cspell.json

@@ -37,6 +37,7 @@
     "astro",
     "ui-kit",
     "styl",
+    "vnode",
     "nocheck",
     "prefixs",
     "vitepress",
@@ -53,6 +54,9 @@
     "**/*-dist/**",
     "**/icons/**",
     "pnpm-lock.yaml",
-    "**/*.log"
+    "**/*.log",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/__tests__/**"
   ]
 }

internal/node-utils/src/hash.test.ts → internal/node-utils/src/__tests__/hash.test.ts

@@ -2,7 +2,7 @@ import { createHash } from 'node:crypto';
 
 import { describe, expect, it } from 'vitest';
 
-import { generatorContentHash } from './hash';
+import { generatorContentHash } from '../hash';
 
 describe('generatorContentHash', () => {
   it('should generate an MD5 hash for the content', () => {

internal/node-utils/src/path.test.ts → internal/node-utils/src/__tests__/path.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, it } from 'vitest';
 
-import { toPosixPath } from './path';
+import { toPosixPath } from '../path';
 
 describe('toPosixPath', () => {
   // 测试 Windows 风格路径到 POSIX 风格路径的转换

internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html

@@ -34,13 +34,6 @@
     transition: all 0.6s ease-out;
   }
 
-  .loading .dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 98px;
-  }
-
   .loading .title {
     margin-top: 36px;
     font-size: 30px;
@@ -109,6 +102,6 @@
   }
 </style>
 <div class="loading" id="__app-loading__">
-  <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+  <span class="dot"><i></i><i></i><i></i><i></i></span>
   <div class="title"><%= VITE_APP_TITLE %></div>
 </div>

packages/@core/base/icons/src/lucide.ts

@@ -20,12 +20,14 @@ export {
   CornerDownLeft,
   Disc as IconDefault,
   Ellipsis,
+  Expand,
   ExternalLink,
   Eye,
   EyeOff,
   FoldHorizontal,
   Fullscreen,
   Github,
+  Info,
   InspectionPanel,
   Languages,
   LoaderCircle,
@@ -46,6 +48,7 @@ export {
   Search,
   SearchX,
   Settings,
+  Shrink,
   Sun,
   SunMoon,
   SwatchBook,

packages/@core/base/shared/src/cache/storage-manager.test.ts → packages/@core/base/shared/src/cache/__tests__/storage-manager.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { StorageManager } from './storage-manager';
+import { StorageManager } from '../storage-manager';
 
 describe('storageManager', () => {
   let storageManager: StorageManager;

packages/@core/base/shared/src/color/convert.test.ts → packages/@core/base/shared/src/color/__tests__/convert.test.ts

@@ -5,7 +5,7 @@ import {
   convertToHslCssVar,
   convertToRgb,
   isValidColor,
-} from './convert';
+} from '../convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { diff } from './diff';
+import { diff } from '../diff';
 
 describe('diff function', () => {
   it('should return an empty object when comparing identical objects', () => {

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

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getElementVisibleRect } from './dom'; // 假设函数位于 utils.ts 中
+import { getElementVisibleRect } from '../dom'; // 假设函数位于 utils.ts 中
 
 describe('getElementVisibleRect', () => {
   // 设置浏览器视口尺寸的 mock

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

@@ -1,12 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
 import {
+  getFirstNonNullOrUndefined,
   isEmpty,
   isHttpUrl,
   isObject,
   isUndefined,
   isWindow,
-} from './inference';
+} from '../inference';
 
 describe('isHttpUrl', () => {
   it("should return true when given 'http://example.com'", () => {
@@ -103,7 +104,6 @@ describe('isObject', () => {
 
   it('should return false for non-objects', () => {
     expect(isObject(null)).toBe(false);
-    expect(isObject()).toBe(false);
     expect(isObject(42)).toBe(false);
     expect(isObject('string')).toBe(false);
     expect(isObject(true)).toBe(false);
@@ -112,3 +112,56 @@ describe('isObject', () => {
     expect(isObject(/regex/)).toBe(true);
   });
 });
+
+describe('getFirstNonNullOrUndefined', () => {
+  describe('getFirstNonNullOrUndefined', () => {
+    it('should return the first non-null and non-undefined value for a number array', () => {
+      expect(getFirstNonNullOrUndefined<number>(undefined, null, 0, 42)).toBe(
+        0,
+      );
+      expect(getFirstNonNullOrUndefined<number>(null, undefined, 42, 123)).toBe(
+        42,
+      );
+    });
+
+    it('should return the first non-null and non-undefined value for a string array', () => {
+      expect(
+        getFirstNonNullOrUndefined<string>(undefined, null, '', 'hello'),
+      ).toBe('');
+      expect(
+        getFirstNonNullOrUndefined<string>(null, undefined, 'test', 'world'),
+      ).toBe('test');
+    });
+
+    it('should return undefined if all values are null or undefined', () => {
+      expect(getFirstNonNullOrUndefined(undefined, null)).toBeUndefined();
+      expect(getFirstNonNullOrUndefined(null)).toBeUndefined();
+    });
+
+    it('should work with a single value', () => {
+      expect(getFirstNonNullOrUndefined(42)).toBe(42);
+      expect(getFirstNonNullOrUndefined()).toBeUndefined();
+      expect(getFirstNonNullOrUndefined(null)).toBeUndefined();
+    });
+
+    it('should handle mixed types correctly', () => {
+      expect(
+        getFirstNonNullOrUndefined<number | object | string>(
+          undefined,
+          null,
+          'test',
+          123,
+          { key: 'value' },
+        ),
+      ).toBe('test');
+      expect(
+        getFirstNonNullOrUndefined<number | object | string>(
+          null,
+          undefined,
+          [1, 2, 3],
+          'string',
+        ),
+      ).toEqual([1, 2, 3]);
+    });
+  });
+});

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

@@ -2,9 +2,10 @@ import { describe, expect, it } from 'vitest';
 
 import {
   capitalizeFirstLetter,
+  kebabToCamelCase,
   toCamelCase,
   toLowerCaseFirstLetter,
-} from './letter';
+} from '../letter';
 
 // 编写测试用例
 describe('capitalizeFirstLetter', () => {
@@ -76,3 +77,41 @@ describe('toCamelCase', () => {
     expect(toCamelCase('Child', 'Parent')).toBe('ParentChild');
   });
 });
+
+describe('kebabToCamelCase', () => {
+  it('should convert kebab-case to camelCase correctly', () => {
+    expect(kebabToCamelCase('my-component-name')).toBe('myComponentName');
+  });
+
+  it('should handle multiple consecutive hyphens', () => {
+    expect(kebabToCamelCase('my--component--name')).toBe('myComponentName');
+  });
+
+  it('should trim leading and trailing hyphens', () => {
+    expect(kebabToCamelCase('-my-component-name-')).toBe('myComponentName');
+  });
+
+  it('should preserve the case of the first word', () => {
+    expect(kebabToCamelCase('My-component-name')).toBe('MyComponentName');
+  });
+
+  it('should convert a single word correctly', () => {
+    expect(kebabToCamelCase('component')).toBe('component');
+  });
+
+  it('should return an empty string if input is empty', () => {
+    expect(kebabToCamelCase('')).toBe('');
+  });
+
+  it('should handle strings with no hyphens', () => {
+    expect(kebabToCamelCase('mycomponentname')).toBe('mycomponentname');
+  });
+
+  it('should handle strings with only hyphens', () => {
+    expect(kebabToCamelCase('---')).toBe('');
+  });
+
+  it('should handle mixed case inputs', () => {
+    expect(kebabToCamelCase('my-Component-Name')).toBe('myComponentName');
+  });
+});

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { filterTree, mapTree, traverseTreeValues } from './tree';
+import { filterTree, mapTree, traverseTreeValues } from '../tree';
 
 describe('traverseTreeValues', () => {
   interface Node {

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { uniqueByField } from './unique';
+import { uniqueByField } from '../unique';
 
 describe('uniqueByField', () => {
   it('should return an array with unique items based on id field', () => {

packages/@core/base/shared/src/utils/update-css-variables.test.ts → packages/@core/base/shared/src/utils/__tests__/update-css-variables.test.ts

@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest';
 
-import { updateCSSVariables } from './update-css-variables';
+import { updateCSSVariables } from '../update-css-variables';
 
 it('updateCSSVariables should update CSS variables in :root selector', () => {
   // 模拟初始的内联样式表内容

packages/@core/base/shared/src/utils/window.test.ts → 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'; // 假设你的函数在 'openWindow' 文件中
 
 describe('openWindow', () => {
   // 保存原始的 window.open 函数

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

@@ -24,7 +24,7 @@ function isUndefined(value?: unknown): value is undefined {
  * @param {T} value 要检查的值。
  * @returns {boolean} 如果值为空，返回true，否则返回false。
  */
-function isEmpty<T = unknown>(value: T): value is T {
+function isEmpty<T = unknown>(value?: T): value is T {
   if (value === null || value === undefined) {
     return true;
   }
@@ -105,7 +105,42 @@ function isNumber(value: any): value is number {
   return typeof value === 'number' && Number.isFinite(value);
 }
 
+/**
+ * Returns the first value in the provided list that is neither `null` nor `undefined`.
+ *
+ * This function iterates over the input values and returns the first one that is
+ * not strictly equal to `null` or `undefined`. If all values are either `null` or
+ * `undefined`, it returns `undefined`.
+ *
+ * @template T - The type of the input values.
+ * @param {...(T | null | undefined)[]} values - A list of values to evaluate.
+ * @returns {T | undefined} - The first value that is not `null` or `undefined`, or `undefined` if none are found.
+ *
+ * @example
+ * // Returns 42 because it is the first non-null, non-undefined value.
+ * getFirstNonNullOrUndefined(undefined, null, 42, 'hello'); // 42
+ *
+ * @example
+ * // Returns 'hello' because it is the first non-null, non-undefined value.
+ * getFirstNonNullOrUndefined(null, undefined, 'hello', 123); // 'hello'
+ *
+ * @example
+ * // Returns undefined because all values are either null or undefined.
+ * getFirstNonNullOrUndefined(undefined, null); // undefined
+ */
+function getFirstNonNullOrUndefined<T>(
+  ...values: (null | T | undefined)[]
+): T | undefined {
+  for (const value of values) {
+    if (value !== undefined && value !== null) {
+      return value;
+    }
+  }
+  return undefined;
+}
+
 export {
+  getFirstNonNullOrUndefined,
   isEmpty,
   isFunction,
   isHttpUrl,

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

@@ -29,4 +29,19 @@ function toCamelCase(key: string, parentKey: string): string {
   return parentKey + key.charAt(0).toUpperCase() + key.slice(1);
 }
 
-export { capitalizeFirstLetter, toCamelCase, toLowerCaseFirstLetter };
+function kebabToCamelCase(str: string): string {
+  return str
+    .split('-')
+    .filter(Boolean)
+    .map((word, index) =>
+      index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
+    )
+    .join('');
+}
+
+export {
+  capitalizeFirstLetter,
+  kebabToCamelCase,
+  toCamelCase,
+  toLowerCaseFirstLetter,
+};

packages/@core/composables/src/use-sortable.test.ts → packages/@core/composables/src/__tests__/use-sortable.test.ts

@@ -2,7 +2,7 @@ import type { SortableOptions } from 'sortablejs';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useSortable } from './use-sortable';
+import { useSortable } from '../use-sortable';
 
 describe('useSortable', () => {
   beforeEach(() => {
@@ -30,7 +30,6 @@ describe('useSortable', () => {
 
     // Import sortablejs to access the mocked create function
     const Sortable = await import(
-      // @ts-expect-error - This is a dynamic import
       'sortablejs/modular/sortable.complete.esm.js'
     );
 

packages/@core/composables/src/index.ts

@@ -1,5 +1,6 @@
 export * from './use-content-style';
 export * from './use-namespace';
+export * from './use-priority-value';
 export * from './use-sortable';
 export {
   useEmitAsProps,