diff --git a/public/icons/q/renako.png b/public/icons/q/renako.png new file mode 100644 index 0000000..886c1eb Binary files /dev/null and b/public/icons/q/renako.png differ diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 7b80014..63d11a3 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -6268,6 +6268,9 @@ const ThemeConfigComponent = ({ customCSS: '', enableCache: true, cacheMinutes: 1440, // 默认1天(1440分钟) + progressThumbType: 'default' as 'default' | 'preset' | 'custom', + progressThumbPresetId: '', + progressThumbCustomUrl: '', }); const [loginBackgroundImages, setLoginBackgroundImages] = useState(['']); const [registerBackgroundImages, setRegisterBackgroundImages] = useState(['']); @@ -6280,6 +6283,9 @@ const ThemeConfigComponent = ({ customCSS: config.ThemeConfig.customCSS || '', enableCache: config.ThemeConfig.enableCache !== false, cacheMinutes: config.ThemeConfig.cacheMinutes || 1440, + progressThumbType: config.ThemeConfig.progressThumbType || 'default', + progressThumbPresetId: config.ThemeConfig.progressThumbPresetId || '', + progressThumbCustomUrl: config.ThemeConfig.progressThumbCustomUrl || '', }); // 解析背景图配置 @@ -6711,6 +6717,170 @@ const ThemeConfigComponent = ({

+ {/* 进度条图标配置 */} +
+

+ + 进度条图标 +

+

+ 自定义视频播放器进度条的滑块图标,让播放器更具个性 +

+ + {/* 图标类型选择 */} +
+ + + +
+ + {/* 预制图标选择 */} + {themeSettings.progressThumbType === 'preset' && ( +
+ +
+ {[ + { id: 'renako', name: '玲奈子', url: '/icons/q/renako.png', color: '#ec4899' }, + ].map((thumb) => ( + + ))} +
+

+ 选择玲奈子图标时,进度条将变为粉色主题 +

+
+ )} + + {/* 自定义图标URL输入 */} + {themeSettings.progressThumbType === 'custom' && ( +
+ + + setThemeSettings((prev) => ({ + ...prev, + progressThumbCustomUrl: e.target.value, + })) + } + /> +

+ 支持 PNG、JPG、GIF、WebP 格式,建议尺寸 32x32px,图片URL必须可公开访问 +

+ {themeSettings.progressThumbCustomUrl && ( +
+

预览:

+ 自定义图标预览 { + (e.target as HTMLImageElement).style.display = 'none'; + const parent = (e.target as HTMLImageElement).parentElement; + if (parent && !parent.querySelector('.error-msg')) { + const errorMsg = document.createElement('p'); + errorMsg.className = 'text-xs text-red-500 error-msg'; + errorMsg.textContent = '图片加载失败,请检查URL是否正确'; + parent.appendChild(errorMsg); + } + }} + /> +
+ )} +
+ )} +
+ {/* 保存按钮 */}