feat: Allow custom placeholder text for search components and enhance secret mode empty state message.

This commit is contained in:
kuekhaoyang
2025-11-29 13:20:28 +08:00
parent 9691cf5e97
commit 3a5c03dee0
3 changed files with 13 additions and 5 deletions
+7 -3
View File
@@ -38,6 +38,7 @@ function SecretHomePage() {
currentSource=""
checkedSources={completedSources}
totalSources={totalSources}
placeholder="输入关键词开始搜索..."
/>
</div>
@@ -57,10 +58,13 @@ function SecretHomePage() {
<NoResults onReset={handleReset} />
)}
{/* Empty State - Just show a dark placeholder or nothing for secret mode */}
{/* Empty State - Hidden mode information */}
{!loading && !hasSearched && (
<div className="flex flex-col items-center justify-center py-20 text-[var(--text-color-secondary)]">
<p>Secret Mode Active</p>
<div className="flex flex-col items-center justify-center py-20 text-center">
<p className="text-lg text-[var(--text-color)] mb-2"></p>
<p className="text-sm text-[var(--text-color-secondary)]">
</p>
</div>
)}
</main>
+3 -2
View File
@@ -10,9 +10,10 @@ interface SearchBoxProps {
onSearch: (query: string) => void;
onClear?: () => void;
initialQuery?: string;
placeholder?: string;
}
export function SearchBox({ onSearch, onClear, initialQuery = '' }: SearchBoxProps) {
export function SearchBox({ onSearch, onClear, initialQuery = '', placeholder = '搜索电影、电视剧、综艺...' }: SearchBoxProps) {
const [query, setQuery] = useState(initialQuery);
const inputRef = useRef<HTMLInputElement>(null);
@@ -74,7 +75,7 @@ export function SearchBox({ onSearch, onClear, initialQuery = '' }: SearchBoxPro
onFocus={handleInputFocus}
onBlur={handleInputBlur}
onKeyDown={handleKeyDown}
placeholder="搜索电影、电视剧、综艺..."
placeholder={placeholder}
className="text-base sm:text-lg pr-28 sm:pr-36 md:pr-44 truncate"
aria-label="搜索视频内容"
aria-expanded={isDropdownOpen}
+3
View File
@@ -11,6 +11,7 @@ interface SearchFormProps {
currentSource?: string;
checkedSources?: number;
totalSources?: number;
placeholder?: string;
}
export function SearchForm({
@@ -21,6 +22,7 @@ export function SearchForm({
currentSource = '',
checkedSources = 0,
totalSources = 16,
placeholder,
}: SearchFormProps) {
return (
<div className="max-w-3xl mx-auto">
@@ -28,6 +30,7 @@ export function SearchForm({
onSearch={onSearch}
onClear={onClear}
initialQuery={initialQuery}
placeholder={placeholder}
/>
{/* Loading Animation */}