-
e.stopPropagation()} style={{ maxWidth: 420 }}>
-
修改管理员 Token
-
-
+ return (
+
+
+ void handleSubmit()} variant="primary" loading={saving} loadingLabel="更新中...">
+ 确认修改
+
+
+ )}
+ >
+ <>
)}
-
-
-
-
-
-
-
-
+
+
);
-
- return typeof document !== 'undefined' ? createPortal(modal, document.body) : modal;
}
diff --git a/src/web/components/DeleteConfirmModal.tsx b/src/web/components/DeleteConfirmModal.tsx
index 5c9f0d4..b67fb9a 100644
--- a/src/web/components/DeleteConfirmModal.tsx
+++ b/src/web/components/DeleteConfirmModal.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import CenteredModal from './CenteredModal.js';
+import { AsyncButton, Button } from './ui/Button.js';
type DeleteConfirmModalProps = {
open: boolean;
@@ -31,12 +32,10 @@ export default function DeleteConfirmModal({
bodyStyle={{ display: 'flex', flexDirection: 'column', gap: 12 }}
footer={(
<>
-
-
+
+
+ {confirmText}
+
)}
>
diff --git a/src/web/components/MobileDrawer.tsx b/src/web/components/MobileDrawer.tsx
index 6816ff0..b27a35e 100644
--- a/src/web/components/MobileDrawer.tsx
+++ b/src/web/components/MobileDrawer.tsx
@@ -1,13 +1,18 @@
-import React, { useEffect, useId, useMemo, useState, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import type React from 'react';
+import { Drawer } from './ui/Dialog.js';
-type MobileDrawerProps = {
+export type MobileDrawerProps = {
open: boolean;
onClose: () => void;
children: React.ReactNode;
title?: React.ReactNode;
closeLabel?: string;
side?: 'left' | 'right';
+ closeOnBackdrop?: boolean;
+ closeOnEscape?: boolean;
+ showCloseButton?: boolean;
+ ariaLabel?: string;
+ ariaDescribedBy?: string;
};
function MobileDrawer({
@@ -17,80 +22,28 @@ function MobileDrawer({
title,
closeLabel = '关闭导航',
side = 'left',
+ closeOnBackdrop = true,
+ closeOnEscape = true,
+ showCloseButton = true,
+ ariaLabel,
+ ariaDescribedBy,
}: MobileDrawerProps) {
- const [shouldRender, setShouldRender] = useState(open);
- const [isClosing, setIsClosing] = useState(false);
- const titleId = useId();
- const labelledBy = title ? titleId : undefined;
-
- useEffect(() => {
- if (open) {
- setShouldRender(true);
- setIsClosing(false);
- } else if (shouldRender) {
- setIsClosing(true);
- const timer = setTimeout(() => {
- setShouldRender(false);
- setIsClosing(false);
- }, 280);
- return () => clearTimeout(timer);
- }
- }, [open]);
-
- const handleClose = useCallback(() => {
- setIsClosing(true);
- onClose();
- }, [onClose]);
-
- useEffect(() => {
- if (!open || typeof document === 'undefined') return;
- const previousOverflow = document.body.style.overflow;
- document.body.style.overflow = 'hidden';
- return () => {
- document.body.style.overflow = previousOverflow;
- };
- }, [open]);
-
- useEffect(() => {
- if (!open || typeof document === 'undefined') return;
- const handleKeydown = (event: KeyboardEvent) => {
- if (event.key === 'Escape') {
- handleClose();
- }
- };
- document.addEventListener('keydown', handleKeydown);
- return () => {
- document.removeEventListener('keydown', handleKeydown);
- };
- }, [handleClose, open]);
-
- if (!shouldRender) return null;
-
- const drawer = (
-
-
-
-
- {title ? (
-
- {title}
-
- ) :
}
-
-
- {children}
-
-
+ return (
+
+ {children}
+
);
-
- const portalTarget = typeof document !== 'undefined' ? document.body : null;
- return portalTarget ? createPortal(drawer, portalTarget) : drawer;
}
export { MobileDrawer };
diff --git a/src/web/components/ModernSelect.test.tsx b/src/web/components/ModernSelect.test.tsx
index 0694433..074dd9e 100644
--- a/src/web/components/ModernSelect.test.tsx
+++ b/src/web/components/ModernSelect.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
import { act, create, type ReactTestInstance } from 'react-test-renderer';
import ModernSelect from './ModernSelect.js';
@@ -90,4 +90,47 @@ describe('ModernSelect', () => {
));
expect(optionButtons.map((node) => collectInstanceText(node))).toEqual(['Gamma APIhttps://third.example.com']);
});
+
+ it('keeps keyboard navigation and selection inside the facade contract', async () => {
+ const onChange = vi.fn();
+ const root = create(
+
,
+ );
+ const trigger = root.root.find((node) => (
+ node.type === 'button'
+ && typeof node.props.className === 'string'
+ && node.props.className.includes('modern-select-trigger')
+ ));
+
+ await act(async () => {
+ trigger.props.onClick();
+ });
+ expect(trigger.props['aria-expanded']).toBe(true);
+
+ await act(async () => {
+ trigger.props.onKeyDown({ key: 'ArrowDown', preventDefault: vi.fn() });
+ });
+ let highlighted = root.root.findAll((node) => (
+ node.type === 'button'
+ && typeof node.props.className === 'string'
+ && node.props.className.includes('modern-select-option')
+ && node.props.className.includes('is-highlighted')
+ ));
+ expect(highlighted).toHaveLength(1);
+ expect(collectInstanceText(highlighted[0])).toContain('Beta');
+
+ await act(async () => {
+ trigger.props.onKeyDown({ key: 'Enter', preventDefault: vi.fn() });
+ });
+ expect(onChange).toHaveBeenCalledWith('beta');
+ expect(trigger.props['aria-expanded']).toBe(false);
+ });
});
diff --git a/src/web/components/ModernSelect.tsx b/src/web/components/ModernSelect.tsx
index 363410b..af0ec0a 100644
--- a/src/web/components/ModernSelect.tsx
+++ b/src/web/components/ModernSelect.tsx
@@ -1,202 +1,9 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-
-type ModernSelectOption = {
- value: string;
- label: string;
- description?: string;
- disabled?: boolean;
- iconNode?: ReactNode;
- iconUrl?: string;
- iconText?: string;
-};
-
-type ModernSelectProps = {
- value: string;
- onChange: (value: string) => void;
- options: ModernSelectOption[];
- 'data-testid'?: string;
- placeholder?: string;
- disabled?: boolean;
- emptyLabel?: string;
- menuMaxHeight?: number;
- className?: string;
- size?: 'md' | 'sm';
- searchable?: boolean;
- searchPlaceholder?: string;
-};
-
-export default function ModernSelect({
- value,
- onChange,
- options,
- 'data-testid': dataTestId,
- placeholder = 'Select',
- disabled = false,
- emptyLabel = 'No options',
- menuMaxHeight = 280,
- className = '',
- size = 'md',
- searchable = false,
- searchPlaceholder = 'Search...',
-}: ModernSelectProps) {
- const [open, setOpen] = useState(false);
- const [searchQuery, setSearchQuery] = useState('');
- const rootRef = useRef
(null);
-
- const selected = useMemo(
- () => options.find((item) => item.value === value),
- [options, value],
- );
-
- const visibleOptions = useMemo(() => {
- const query = searchQuery.trim().toLowerCase();
- if (!searchable || !query) return options;
-
- return options.filter((item) => {
- const haystack = [
- item.label,
- item.description,
- item.value,
- ]
- .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
- .join(' ')
- .toLowerCase();
- return haystack.includes(query);
- });
- }, [options, searchQuery, searchable]);
-
- useEffect(() => {
- if (!open) return;
- if (typeof document === 'undefined') return;
-
- const handleOutsideClick = (event: MouseEvent) => {
- if (!rootRef.current) return;
- if (!rootRef.current.contains(event.target as Node)) {
- setOpen(false);
- }
- };
-
- const handleEscape = (event: KeyboardEvent) => {
- if (event.key === 'Escape') setOpen(false);
- };
-
- document.addEventListener('mousedown', handleOutsideClick);
- document.addEventListener('keydown', handleEscape);
- return () => {
- document.removeEventListener('mousedown', handleOutsideClick);
- document.removeEventListener('keydown', handleEscape);
- };
- }, [open]);
-
- useEffect(() => {
- if (disabled) setOpen(false);
- }, [disabled]);
-
- useEffect(() => {
- if (!open && searchQuery) {
- setSearchQuery('');
- }
- }, [open, searchQuery]);
-
- const renderOptionIcon = (item: ModernSelectOption) => {
- if (item.iconNode) {
- return item.iconNode;
- }
- if (item.iconUrl) {
- return 
;
- }
- if (item.iconText) {
- return {item.iconText};
- }
- return null;
- };
-
- return (
-
-
-
-
- {searchable && (
-
- setSearchQuery(event.target.value)}
- placeholder={searchPlaceholder}
- className="modern-select-search-input"
- />
-
- )}
-
- {visibleOptions.length === 0 ? (
-
{emptyLabel}
- ) : (
- visibleOptions.map((item) => {
- const active = item.value === value;
- return (
-
- );
- })
- )}
-
-