插件功能完善,搜索框发光条可以调节

This commit is contained in:
2025-12-20 22:49:58 +08:00
parent a7556418ae
commit 32bf9f0ffe
9 changed files with 38 additions and 5 deletions

View File

@@ -11,7 +11,8 @@
}, },
"dependencies": { "dependencies": {
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.1" "react-dom": "^19.2.1",
"workbox-window": "^7.4.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.17", "@tailwindcss/postcss": "^4.1.17",

3
pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ importers:
react-dom: react-dom:
specifier: ^19.2.1 specifier: ^19.2.1
version: 19.2.1(react@19.2.1) version: 19.2.1(react@19.2.1)
workbox-window:
specifier: ^7.4.0
version: 7.4.0
devDependencies: devDependencies:
'@tailwindcss/postcss': '@tailwindcss/postcss':
specifier: ^4.1.17 specifier: ^4.1.17

View File

@@ -30,7 +30,8 @@ const DEFAULT_SETTINGS: UserSettings = {
enableSearchHistory: true, enableSearchHistory: true,
searchHistory: [], searchHistory: [],
language: 'zh', language: 'zh',
motto: '同是天涯沦落人,相逢何必曾相识' motto: '同是天涯沦落人,相逢何必曾相识',
searchGlow: 0.35
}; };
type ViewMode = 'search' | 'dashboard'; type ViewMode = 'search' | 'dashboard';
@@ -247,6 +248,7 @@ const App: React.FC = () => {
onSelectEngine={handleSelectEngine} onSelectEngine={handleSelectEngine}
themeColor={settings.themeColor} themeColor={settings.themeColor}
opacity={settings.searchOpacity} opacity={settings.searchOpacity}
searchGlow={settings.searchGlow}
onInteractionChange={setIsSearchActive} onInteractionChange={setIsSearchActive}
enableHistory={settings.enableSearchHistory} enableHistory={settings.enableSearchHistory}
history={settings.searchHistory} history={settings.searchHistory}

View File

@@ -12,6 +12,7 @@ interface SearchBoxProps {
onSelectEngine: (name: string) => void; onSelectEngine: (name: string) => void;
themeColor: string; themeColor: string;
opacity: number; opacity: number;
searchGlow: number;
onInteractionChange?: (isActive: boolean) => void; onInteractionChange?: (isActive: boolean) => void;
enableHistory: boolean; enableHistory: boolean;
history: string[]; history: string[];
@@ -24,6 +25,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({
onSelectEngine, onSelectEngine,
themeColor, themeColor,
opacity, opacity,
searchGlow,
onInteractionChange, onInteractionChange,
enableHistory, enableHistory,
history, history,
@@ -219,7 +221,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({
style={{ style={{
backgroundColor: isActive ? themeColor : 'transparent', backgroundColor: isActive ? themeColor : 'transparent',
filter: isActive ? 'blur(45px)' : 'blur(0px)', // High blur for aperture effect filter: isActive ? 'blur(45px)' : 'blur(0px)', // High blur for aperture effect
opacity: isActive ? 0.35 : 0, opacity: isActive ? searchGlow : 0,
transform: isActive ? 'scale(1.15)' : 'scale(0.8)', transform: isActive ? 'scale(1.15)' : 'scale(0.8)',
zIndex: 10 zIndex: 10
}} }}
@@ -229,8 +231,8 @@ const SearchBox: React.FC<SearchBoxProps> = ({
<div <div
className="absolute inset-0 rounded-full pointer-events-none transition-all duration-500 ease-out" className="absolute inset-0 rounded-full pointer-events-none transition-all duration-500 ease-out"
style={{ style={{
boxShadow: isActive ? `0 0 25px 5px ${themeColor}60` : 'none', boxShadow: isActive ? `0 0 25px 5px ${themeColor}${Math.round(searchGlow * 255).toString(16).padStart(2, '0')}` : 'none',
opacity: isActive ? 0.8 : 0, opacity: isActive ? Math.min(searchGlow * 2.3, 1) : 0,
zIndex: 10 zIndex: 10
}} }}
/> />

View File

@@ -37,6 +37,10 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdateSetting
onUpdateSettings({ ...settings, searchOpacity: parseFloat(e.target.value) }); onUpdateSettings({ ...settings, searchOpacity: parseFloat(e.target.value) });
}; };
const handleSearchGlowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onUpdateSettings({ ...settings, searchGlow: parseFloat(e.target.value) });
};
const handleMaskOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleMaskOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onUpdateSettings({ ...settings, maskOpacity: parseFloat(e.target.value) }); onUpdateSettings({ ...settings, maskOpacity: parseFloat(e.target.value) });
}; };
@@ -200,6 +204,23 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdateSetting
/> />
</div> </div>
{/* Search box glow slider */}
<div className="space-y-3">
<div className="flex justify-between text-xs text-white/50 font-medium uppercase tracking-wider">
<span>{t.searchGlow}</span>
<span>{Math.round(settings.searchGlow * 100)}%</span>
</div>
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.searchGlow}
onChange={handleSearchGlowChange}
className="w-full h-1 bg-white/20 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-lg"
/>
</div>
{/* Mask opacity slider */} {/* Mask opacity slider */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between text-xs text-white/50 font-medium uppercase tracking-wider"> <div className="flex justify-between text-xs text-white/50 font-medium uppercase tracking-wider">

View File

@@ -16,6 +16,7 @@ export const en: Translation = {
searchHistory: 'Search History', searchHistory: 'Search History',
backgroundBlur: 'Background Blur', backgroundBlur: 'Background Blur',
searchBoxOpacity: 'Search Box Opacity', searchBoxOpacity: 'Search Box Opacity',
searchGlow: 'Search Box Glow',
maskOpacity: 'Mask Opacity', maskOpacity: 'Mask Opacity',
// Wallpaper Settings // Wallpaper Settings

View File

@@ -16,6 +16,7 @@ export const zh: Translation = {
searchHistory: '搜索历史记录', searchHistory: '搜索历史记录',
backgroundBlur: '背景模糊度', backgroundBlur: '背景模糊度',
searchBoxOpacity: '搜索框不透明度', searchBoxOpacity: '搜索框不透明度',
searchGlow: '搜索框发光强度',
maskOpacity: '遮罩层不透明度', maskOpacity: '遮罩层不透明度',
// Wallpaper Settings // Wallpaper Settings

View File

@@ -16,6 +16,7 @@ export interface Translation {
searchHistory: string; searchHistory: string;
backgroundBlur: string; backgroundBlur: string;
searchBoxOpacity: string; searchBoxOpacity: string;
searchGlow: string;
maskOpacity: string; maskOpacity: string;
// Wallpaper Settings // Wallpaper Settings

View File

@@ -39,6 +39,7 @@ export interface UserSettings {
searchHistory: string[]; searchHistory: string[];
language: Language; language: Language;
motto: string; motto: string;
searchGlow: number;
} }
export type SettingsSection = 'general' | 'wallpaper' | 'search'; export type SettingsSection = 'general' | 'wallpaper' | 'search';