mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-03 17:06:36 +08:00
fix(frontend): ship pending card-view animation and interaction refinements
This commit is contained in:
sagitchu
@@ -6,21 +6,21 @@ import React from "react";
|
||||
* Use this as the outermost wrapper inside each page component.
|
||||
*/
|
||||
export const AnimatedPage = ({
|
||||
children,
|
||||
className,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => (
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={className}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={className}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
/**
|
||||
@@ -28,26 +28,26 @@ export const AnimatedPage = ({
|
||||
* Children should use `staggerItem` as their `variants` prop.
|
||||
*/
|
||||
export const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.05,
|
||||
delayChildren: 0.05,
|
||||
},
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.05,
|
||||
delayChildren: 0.05,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Individual stagger item variant — fade-in + slide-up.
|
||||
*/
|
||||
export const staggerItem = {
|
||||
hidden: { opacity: 0, y: 12 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
|
||||
},
|
||||
hidden: { opacity: 0, y: 12 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -55,47 +55,47 @@ export const staggerItem = {
|
||||
* Renders a `motion.div` (or `motion.ul/motion.tbody`) with stagger behaviour.
|
||||
*/
|
||||
export const StaggerList = ({
|
||||
children,
|
||||
className,
|
||||
as = "div",
|
||||
children,
|
||||
className,
|
||||
as = "div",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
as?: "div" | "ul" | "tbody";
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
as?: "div" | "ul" | "tbody";
|
||||
}) => {
|
||||
const Component = motion[as] as React.ElementType;
|
||||
const Component = motion[as] as React.ElementType;
|
||||
|
||||
return (
|
||||
<Component
|
||||
animate="show"
|
||||
className={className}
|
||||
initial="hidden"
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
return (
|
||||
<Component
|
||||
animate="show"
|
||||
className={className}
|
||||
initial="hidden"
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Individual animated item for use inside StaggerList.
|
||||
*/
|
||||
export const StaggerItem = ({
|
||||
children,
|
||||
className,
|
||||
as = "div",
|
||||
children,
|
||||
className,
|
||||
as = "div",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
as?: "div" | "li" | "tr";
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
as?: "div" | "li" | "tr";
|
||||
}) => {
|
||||
const Component = motion[as] as React.ElementType;
|
||||
const Component = motion[as] as React.ElementType;
|
||||
|
||||
return (
|
||||
<Component className={className} variants={staggerItem}>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
return (
|
||||
<Component className={className} variants={staggerItem}>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -103,20 +103,20 @@ export const StaggerItem = ({
|
||||
* Uses opacity + translateY to avoid font blurriness caused by scale transforms.
|
||||
*/
|
||||
export const FadeIn = ({
|
||||
children,
|
||||
delay = 0,
|
||||
className,
|
||||
children,
|
||||
delay = 0,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
delay?: number;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
delay?: number;
|
||||
className?: string;
|
||||
}) => (
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={className}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
transition={{ duration: 0.2, delay, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={className}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
transition={{ duration: 0.2, delay, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@@ -5,97 +5,97 @@ import { Input } from "@/shadcn-bridge/heroui/input";
|
||||
import { SearchIcon } from "@/components/icons";
|
||||
|
||||
interface SearchBarProps {
|
||||
isVisible: boolean;
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
onOpen: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
isVisible: boolean;
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
onOpen: () => void;
|
||||
onClose: () => void;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export function SearchBar({
|
||||
isVisible,
|
||||
value,
|
||||
placeholder = "搜索",
|
||||
onOpen,
|
||||
onClose,
|
||||
onChange,
|
||||
isVisible,
|
||||
value,
|
||||
placeholder = "搜索",
|
||||
onOpen,
|
||||
onClose,
|
||||
onChange,
|
||||
}: SearchBarProps) {
|
||||
return (
|
||||
// Fixed h-8 so the container never changes height — eliminates the vertical jitter
|
||||
<div className="flex items-center gap-2 h-8 overflow-hidden">
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{!isVisible ? (
|
||||
<motion.div
|
||||
key="search-btn"
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ duration: 0.12 }}
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="搜索"
|
||||
className="text-default-600"
|
||||
color="default"
|
||||
size="sm"
|
||||
variant="flat"
|
||||
onPress={onOpen}
|
||||
>
|
||||
<SearchIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="search-input"
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className="flex w-full items-center gap-2"
|
||||
exit={{ opacity: 0, x: -8 }}
|
||||
initial={{ opacity: 0, x: -16 }}
|
||||
transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
>
|
||||
<Input
|
||||
autoFocus
|
||||
classNames={{
|
||||
base: "bg-default-100",
|
||||
input: "bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
|
||||
inputWrapper:
|
||||
"bg-default-100 border-0 shadow-none h-8 min-h-8",
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="关闭搜索"
|
||||
className="text-default-600 shrink-0"
|
||||
color="default"
|
||||
size="sm"
|
||||
variant="light"
|
||||
onPress={() => {
|
||||
onClose();
|
||||
onChange("");
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
// Fixed h-8 so the container never changes height — eliminates the vertical jitter
|
||||
<div className="flex items-center gap-2 h-8 overflow-hidden">
|
||||
<AnimatePresence initial={false} mode="wait">
|
||||
{!isVisible ? (
|
||||
<motion.div
|
||||
key="search-btn"
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ duration: 0.12 }}
|
||||
>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="搜索"
|
||||
className="text-default-600"
|
||||
color="default"
|
||||
size="sm"
|
||||
variant="flat"
|
||||
onPress={onOpen}
|
||||
>
|
||||
<SearchIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="search-input"
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className="flex w-full items-center gap-2"
|
||||
exit={{ opacity: 0, x: -8 }}
|
||||
initial={{ opacity: 0, x: -16 }}
|
||||
transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
>
|
||||
<Input
|
||||
autoFocus
|
||||
classNames={{
|
||||
base: "bg-default-100",
|
||||
input:
|
||||
"bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
|
||||
inputWrapper: "bg-default-100 border-0 shadow-none h-8 min-h-8",
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="关闭搜索"
|
||||
className="text-default-600 shrink-0"
|
||||
color="default"
|
||||
size="sm"
|
||||
variant="light"
|
||||
onPress={() => {
|
||||
onClose();
|
||||
onChange("");
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ function SelectContent({
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className,
|
||||
)}
|
||||
data-slot="select-content"
|
||||
@@ -104,7 +104,7 @@ function SelectContent({
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user