后台可注入全站 CSS/JS(SSR 生效,CSS 可热换);发帖/编辑改为锁一屏工作室;经济看板增加存量健康度;主题令牌与弹层误关一并收紧。 Co-authored-by: Cursor <cursoragent@cursor.com>
66 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|