修改本地设置面板可折叠

src/components/UserMenu.tsx

@@ -6,6 +6,7 @@ import {
   Bell,
   Check,
   ChevronDown,
+  ChevronUp,
   Copy,
   Download,
   ExternalLink,
@@ -101,6 +102,12 @@ export const UserMenu: React.FC = () => {
   const [nextEpisodePreCache, setNextEpisodePreCache] = useState(true);
   const [isBufferStrategyDropdownOpen, setIsBufferStrategyDropdownOpen] = useState(false);
 
+  // 折叠面板状态
+  const [isDoubanSectionOpen, setIsDoubanSectionOpen] = useState(true);
+  const [isUsageSectionOpen, setIsUsageSectionOpen] = useState(false);
+  const [isBufferSectionOpen, setIsBufferSectionOpen] = useState(false);
+  const [isDanmakuSectionOpen, setIsDanmakuSectionOpen] = useState(false);
+
   // 豆瓣数据源选项
   const doubanDataSourceOptions = [
     { value: 'direct', label: '直连（服务器直接请求豆瓣）' },
@@ -912,7 +919,7 @@ export const UserMenu: React.FC = () => {
       >
         {/* 内容容器 - 独立的滚动区域 */}
         <div
-          className='flex-1 p-6 overflow-y-auto'
+          className='flex-1 px-4 py-6 md:p-6 overflow-y-auto'
           data-panel-content
           style={{
             touchAction: 'pan-y', // 只允许垂直滚动
@@ -943,7 +950,24 @@ export const UserMenu: React.FC = () => {
           </div>
 
           {/* 设置项 */}
-          <div className='space-y-6'>
+          <div className='space-y-3 md:space-y-4'>
+            {/* 豆瓣设置 */}
+            <div className='border border-gray-200 dark:border-gray-700 rounded-lg overflow-visible'>
+              <button
+                onClick={() => setIsDoubanSectionOpen(!isDoubanSectionOpen)}
+                className='w-full px-3 py-2.5 md:px-4 md:py-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors flex items-center justify-between'
+              >
+                <h3 className='text-base font-semibold text-gray-800 dark:text-gray-200'>
+                  豆瓣设置
+                </h3>
+                {isDoubanSectionOpen ? (
+                  <ChevronUp className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                ) : (
+                  <ChevronDown className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                )}
+              </button>
+              {isDoubanSectionOpen && (
+                <div className='p-3 md:p-4 space-y-4 md:space-y-6'>
                   {/* 豆瓣数据源选择 */}
                   <div className='space-y-3'>
                     <div>
@@ -1151,10 +1175,27 @@ export const UserMenu: React.FC = () => {
                       />
                     </div>
                   )}
+                </div>
+              )}
+            </div>
 
-            {/* 分割线 */}
-            <div className='border-t border-gray-200 dark:border-gray-700'></div>
-
+            {/* 使用设置 */}
+            <div className='border border-gray-200 dark:border-gray-700 rounded-lg overflow-visible'>
+              <button
+                onClick={() => setIsUsageSectionOpen(!isUsageSectionOpen)}
+                className='w-full px-3 py-2.5 md:px-4 md:py-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors flex items-center justify-between'
+              >
+                <h3 className='text-base font-semibold text-gray-800 dark:text-gray-200'>
+                  使用设置
+                </h3>
+                {isUsageSectionOpen ? (
+                  <ChevronUp className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                ) : (
+                  <ChevronDown className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                )}
+              </button>
+              {isUsageSectionOpen && (
+                <div className='p-3 md:p-4 space-y-4 md:space-y-6'>
                   {/* 默认聚合搜索结果 */}
                   <div className='flex items-center justify-between'>
                     <div>
@@ -1251,7 +1292,6 @@ export const UserMenu: React.FC = () => {
                     </label>
                   </div>
 
-            {/* 禁用弹幕热力 */}
                   {/* 禁用背景图渲染 */}
                   <div className='flex items-center justify-between'>
                     <div>
@@ -1299,17 +1339,29 @@ export const UserMenu: React.FC = () => {
                       </div>
                     </label>
                   </div>
-
-            {/* 分割线 */}
-            <div className='border-t border-gray-200 dark:border-gray-700'></div>
+                </div>
+              )}
+            </div>
 
             {/* 缓冲设置 */}
-            <div className='space-y-4'>
-              <div>
-                <h4 className='text-base font-semibold text-gray-800 dark:text-gray-200'>
+            <div className='border border-gray-200 dark:border-gray-700 rounded-lg overflow-visible'>
+              <button
+                onClick={() => setIsBufferSectionOpen(!isBufferSectionOpen)}
+                className='w-full px-3 py-2.5 md:px-4 md:py-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors flex items-center justify-between'
+              >
+                <h3 className='text-base font-semibold text-gray-800 dark:text-gray-200'>
                   缓冲设置
-                </h4>
-                <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                </h3>
+                {isBufferSectionOpen ? (
+                  <ChevronUp className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                ) : (
+                  <ChevronDown className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                )}
+              </button>
+              {isBufferSectionOpen && (
+                <div className='p-3 md:p-4 space-y-4 md:space-y-6'>
+                  <div>
+                    <p className='text-xs text-gray-500 dark:text-gray-400'>
                       调整播放器缓冲策略（仅在播放页面生效）
                     </p>
                   </div>
@@ -1397,10 +1449,26 @@ export const UserMenu: React.FC = () => {
                     </label>
                   </div>
                 </div>
+              )}
+            </div>
 
-            {/* 分割线 */}
-            <div className='border-t border-gray-200 dark:border-gray-700'></div>
-
+            {/* 弹幕设置 */}
+            <div className='border border-gray-200 dark:border-gray-700 rounded-lg overflow-visible'>
+              <button
+                onClick={() => setIsDanmakuSectionOpen(!isDanmakuSectionOpen)}
+                className='w-full px-3 py-2.5 md:px-4 md:py-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors flex items-center justify-between'
+              >
+                <h3 className='text-base font-semibold text-gray-800 dark:text-gray-200'>
+                  弹幕设置
+                </h3>
+                {isDanmakuSectionOpen ? (
+                  <ChevronUp className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                ) : (
+                  <ChevronDown className='w-5 h-5 text-gray-600 dark:text-gray-400' />
+                )}
+              </button>
+              {isDanmakuSectionOpen && (
+                <div className='p-3 md:p-4 space-y-4 md:space-y-6'>
                   {/* 清除弹幕缓存 */}
                   <div className='space-y-3'>
                     <div>
@@ -1443,6 +1511,9 @@ export const UserMenu: React.FC = () => {
                     )}
                   </div>
                 </div>
+              )}
+            </div>
+          </div>
 
           {/* 底部说明 */}
           <div className='mt-6 pt-4 border-t border-gray-200 dark:border-gray-700'>