Files
jiang13-bbs/frontend/components/admin/AdminSearchField.tsx
freefire 5f7193042f feat: 外观支持自定义 CSS/JS,并升级发帖工作台与积分存量看板
后台可注入全站 CSS/JS(SSR 生效,CSS 可热换);发帖/编辑改为锁一屏工作室;经济看板增加存量健康度;主题令牌与弹层误关一并收紧。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-18 04:16:32 +08:00

66 lines
1.5 KiB
TypeScript

"use client";
import { Search, X } from "lucide-react";
import type { FormEvent } from "react";
/** 左图标、可清除、Enter 提交;加高壳层便于后台工具条点按 */
export default function AdminSearchField({
value,
onChange,
onSubmit,
onClear,
placeholder,
ariaLabel,
}: {
value: string;
onChange: (v: string) => void;
onSubmit?: () => void;
onClear?: () => void;
placeholder?: string;
ariaLabel: string;
}) {
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
onSubmit?.();
};
const clear = () => {
onChange("");
onClear?.();
};
return (
<form
onSubmit={handleSubmit}
className="admin-field-shell admin-search-shell relative flex-1 min-w-0"
role="search"
>
<Search
size={17}
className="shrink-0 pointer-events-none"
style={{ color: value ? "var(--accent)" : "var(--ink-3)" }}
aria-hidden
/>
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
aria-label={ariaLabel}
className="admin-field-input"
/>
{value ? (
<button
type="button"
onClick={clear}
aria-label="清除搜索"
className="w-7 h-7 inline-flex items-center justify-center rounded-full shrink-0 transition-colors hover:bg-[var(--panel-2)]"
style={{ color: "var(--ink-3)" }}
>
<X size={15} />
</button>
) : null}
</form>
);
}