mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-22 10:34:42 +08:00
feat: add local settings
This commit is contained in:
shinya
185
src/components/SettingsButton.tsx
Normal file
185
src/components/SettingsButton.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
'use client';
|
||||
|
||||
import { Settings, X } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
export const SettingsButton: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [defaultAggregateSearch, setDefaultAggregateSearch] = useState(true);
|
||||
const [doubanProxyUrl, setDoubanProxyUrl] = useState('');
|
||||
const [imageProxyUrl, setImageProxyUrl] = useState('');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// 确保组件已挂载
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// 从 localStorage 读取设置
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const savedAggregateSearch = localStorage.getItem(
|
||||
'defaultAggregateSearch'
|
||||
);
|
||||
if (savedAggregateSearch !== null) {
|
||||
setDefaultAggregateSearch(JSON.parse(savedAggregateSearch));
|
||||
}
|
||||
|
||||
const savedDoubanProxyUrl = localStorage.getItem('doubanProxyUrl');
|
||||
if (savedDoubanProxyUrl !== null) {
|
||||
setDoubanProxyUrl(savedDoubanProxyUrl);
|
||||
}
|
||||
|
||||
const savedImageProxyUrl = localStorage.getItem('imageProxyUrl');
|
||||
if (savedImageProxyUrl !== null) {
|
||||
setImageProxyUrl(savedImageProxyUrl);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 保存设置到 localStorage
|
||||
const handleAggregateToggle = (value: boolean) => {
|
||||
setDefaultAggregateSearch(value);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('defaultAggregateSearch', JSON.stringify(value));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDoubanProxyUrlChange = (value: string) => {
|
||||
setDoubanProxyUrl(value);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('doubanProxyUrl', value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageProxyUrlChange = (value: string) => {
|
||||
setImageProxyUrl(value);
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('imageProxyUrl', value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSettingsClick = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const handleClosePanel = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
// 设置面板内容
|
||||
const settingsPanel = (
|
||||
<>
|
||||
{/* 背景遮罩 */}
|
||||
<div
|
||||
className='fixed inset-0 bg-black/50 backdrop-blur-sm z-40'
|
||||
onClick={handleClosePanel}
|
||||
/>
|
||||
|
||||
{/* 设置面板 */}
|
||||
<div className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-xl z-50 p-6'>
|
||||
{/* 标题栏 */}
|
||||
<div className='flex items-center justify-between mb-6'>
|
||||
<h3 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
|
||||
本地设置
|
||||
</h3>
|
||||
<button
|
||||
onClick={handleClosePanel}
|
||||
className='w-8 h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
|
||||
aria-label='Close'
|
||||
>
|
||||
<X className='w-full h-full' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 设置项 */}
|
||||
<div className='space-y-6'>
|
||||
{/* 默认聚合搜索结果 */}
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
默认聚合搜索结果
|
||||
</h4>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
|
||||
搜索时默认按标题和年份聚合显示结果
|
||||
</p>
|
||||
</div>
|
||||
<label className='flex items-center cursor-pointer'>
|
||||
<div className='relative'>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='sr-only peer'
|
||||
checked={defaultAggregateSearch}
|
||||
onChange={(e) => handleAggregateToggle(e.target.checked)}
|
||||
/>
|
||||
<div className='w-11 h-6 bg-gray-300 rounded-full peer-checked:bg-green-500 transition-colors dark:bg-gray-600'></div>
|
||||
<div className='absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5'></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 豆瓣代理设置 */}
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
豆瓣数据代理
|
||||
</h4>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
|
||||
设置代理URL以绕过豆瓣访问限制，留空则使用服务端API
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type='text'
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
||||
placeholder='例如: https://proxy.example.com/fetch?url='
|
||||
value={doubanProxyUrl}
|
||||
onChange={(e) => handleDoubanProxyUrlChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 图片代理设置 */}
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
图片代理
|
||||
</h4>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
|
||||
设置代理URL以加速图片加载，留空则直接加载原图
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type='text'
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
|
||||
placeholder='例如: https://imageproxy.example.com/?url='
|
||||
value={imageProxyUrl}
|
||||
onChange={(e) => handleImageProxyUrlChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部说明 */}
|
||||
<div className='mt-6 pt-4 border-t border-gray-200 dark:border-gray-700'>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400 text-center'>
|
||||
这些设置保存在本地浏览器中
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={handleSettingsClick}
|
||||
className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
|
||||
aria-label='Settings'
|
||||
>
|
||||
<Settings className='w-full h-full' />
|
||||
</button>
|
||||
|
||||
{/* 使用 Portal 将设置面板渲染到 document.body */}
|
||||
{isOpen && mounted && createPortal(settingsPanel, document.body)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user