mirror of
https://github.com/handsomezhuzhu/AeroStart.git
synced 2026-02-20 12:00:15 +00:00
插件功能完善,搜索框发光条可以调节
This commit is contained in:
@@ -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
3
pnpm-lock.yaml
generated
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -16,6 +16,7 @@ export const zh: Translation = {
|
||||
searchHistory: '搜索历史记录',
|
||||
backgroundBlur: '背景模糊度',
|
||||
searchBoxOpacity: '搜索框不透明度',
|
||||
searchGlow: '搜索框发光强度',
|
||||
maskOpacity: '遮罩层不透明度',
|
||||
|
||||
// Wallpaper Settings
|
||||
|
||||
@@ -16,6 +16,7 @@ export interface Translation {
|
||||
searchHistory: string;
|
||||
backgroundBlur: string;
|
||||
searchBoxOpacity: string;
|
||||
searchGlow: string;
|
||||
maskOpacity: string;
|
||||
|
||||
// Wallpaper Settings
|
||||
|
||||
@@ -39,6 +39,7 @@ export interface UserSettings {
|
||||
searchHistory: string[];
|
||||
language: Language;
|
||||
motto: string;
|
||||
searchGlow: number;
|
||||
}
|
||||
|
||||
export type SettingsSection = 'general' | 'wallpaper' | 'search';
|
||||
|
||||
Reference in New Issue
Block a user