Akiba So
3db3b12480
Atomic foundation for the consensus-approved UX modernization (makes the platform URL-addressable, refresh-safe, and mobile-usable for hospital demos). - Migrate hand-rolled useState page switching → react-router v6 (routes.tsx, thin App.tsx auth gate, NavLink SideNav, lazy+Suspense per route) - Add responsive AppShell: persistent rail (lg:) ⇄ off-canvas drawer + hamburger (<lg); kills hardcoded ml-[200px]; usable at 375px - Add ui primitive kit (Skeleton/LoadingState/EmptyState/Card/Panel/Segmented) - Sweep all raw "加载中..." text loaders → skeleton primitives (G4) - Centralize test ids (utils/testids.ts); rewrite e2e for URL nav (17/17 pass: deep-link, refresh-preserves-page, back, 375px drawer/no-scroll) - Harden DemographicAnalysis against API shape mismatch (defensive normalize) - gitignore playwright-report/ and test-results/ Gates: tsc --noEmit 0 · pnpm build ok · e2e 17/17 · grep 加载中 zero outside ui/ Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { memo } from 'react';
|
|
|
|
export const Segmented = memo(function Segmented<T extends string>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
size = 'md',
|
|
testid,
|
|
}: {
|
|
options: { value: T; label: string }[];
|
|
value: T;
|
|
onChange: (v: T) => void;
|
|
size?: 'sm' | 'md';
|
|
testid?: string;
|
|
}): JSX.Element {
|
|
const sizeClasses = size === 'sm'
|
|
? 'px-2.5 py-0.5 text-xs'
|
|
: 'px-3.5 py-1 text-[13px]';
|
|
|
|
return (
|
|
<div
|
|
data-testid={testid}
|
|
className="inline-flex items-center gap-0.5 rounded-full bg-bg-hover p-0.5"
|
|
>
|
|
{options.map((opt) => {
|
|
const isActive = opt.value === value;
|
|
return (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
data-testid={testid ? `${testid}-${opt.value}` : undefined}
|
|
onClick={() => onChange(opt.value)}
|
|
className={[
|
|
'rounded-full font-medium transition-colors',
|
|
sizeClasses,
|
|
isActive
|
|
? 'bg-primary text-white shadow-sm'
|
|
: 'text-text-secondary hover:bg-bg-active',
|
|
].join(' ')}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}) as <T extends string>(props: {
|
|
options: { value: T; label: string }[];
|
|
value: T;
|
|
onChange: (v: T) => void;
|
|
size?: 'sm' | 'md';
|
|
testid?: string;
|
|
}) => JSX.Element;
|