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

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": {
"react": "^19.2.0",
"react-dom": "^19.2.1"
"react-dom": "^19.2.1",
"workbox-window": "^7.4.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.17",

3
pnpm-lock.yaml generated
View File

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

View File

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

View File

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

View File

@@ -37,6 +37,10 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdateSetting
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>) => {
onUpdateSettings({ ...settings, maskOpacity: parseFloat(e.target.value) });
};
@@ -200,6 +204,23 @@ const ThemeSettings: React.FC<ThemeSettingsProps> = ({ settings, onUpdateSetting
/>
</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 */}
<div className="space-y-3">
<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',
backgroundBlur: 'Background Blur',
searchBoxOpacity: 'Search Box Opacity',
searchGlow: 'Search Box Glow',
maskOpacity: 'Mask Opacity',
// Wallpaper Settings

View File

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

View File

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

View File

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