修复下载格式与优化配置
This commit is contained in:
mtvpls
+362
-124
@@ -49,7 +49,7 @@ import {
|
||||
Trash2,
|
||||
} from 'lucide-react';
|
||||
import { GripVertical } from 'lucide-react';
|
||||
import { memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Fragment, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
import { AdminConfig, AdminConfigResult } from '@/lib/admin.types';
|
||||
@@ -11248,6 +11248,7 @@ const OPDSConfigComponent = ({
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [cacheTTL, setCacheTTL] = useState(10 * 60 * 1000);
|
||||
const [sources, setSources] = useState<BookSource[]>([]);
|
||||
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.OPDSConfig) {
|
||||
@@ -11269,56 +11270,73 @@ const OPDSConfigComponent = ({
|
||||
language: item.language || '',
|
||||
}))
|
||||
);
|
||||
setEditingIndex(null);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
useEffect(() => {
|
||||
setEditingIndex((prev) => {
|
||||
if (prev === null) return prev;
|
||||
return prev >= sources.length ? null : prev;
|
||||
});
|
||||
}, [sources.length]);
|
||||
|
||||
const updateSource = (index: number, patch: Partial<BookSource>) => {
|
||||
setSources((prev) => prev.map((item, idx) => (idx === index ? { ...item, ...patch } : item)));
|
||||
};
|
||||
|
||||
const addSource = () => {
|
||||
setSources((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: `source_${prev.length + 1}`,
|
||||
name: `书源 ${prev.length + 1}`,
|
||||
url: '',
|
||||
enabled: true,
|
||||
authMode: 'none',
|
||||
username: '',
|
||||
password: '',
|
||||
headerName: '',
|
||||
headerValue: '',
|
||||
searchTemplate: '',
|
||||
preferFormat: ['epub', 'pdf'],
|
||||
language: '',
|
||||
},
|
||||
]);
|
||||
setSources((prev) => {
|
||||
const nextIndex = prev.length;
|
||||
setEditingIndex(nextIndex);
|
||||
return [
|
||||
...prev,
|
||||
{
|
||||
id: `source_${prev.length + 1}`,
|
||||
name: `书源 ${prev.length + 1}`,
|
||||
url: '',
|
||||
enabled: true,
|
||||
authMode: 'none',
|
||||
username: '',
|
||||
password: '',
|
||||
headerName: '',
|
||||
headerValue: '',
|
||||
searchTemplate: '',
|
||||
preferFormat: ['epub', 'pdf'],
|
||||
language: '',
|
||||
},
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
const removeSource = (index: number) => {
|
||||
setSources((prev) => prev.filter((_, idx) => idx !== index));
|
||||
setEditingIndex((prev) => {
|
||||
if (prev === null) return prev;
|
||||
if (prev === index) return null;
|
||||
return prev > index ? prev - 1 : prev;
|
||||
});
|
||||
};
|
||||
|
||||
const normalizeSource = (source: BookSource, index: number) => ({
|
||||
id: source.id?.trim() || `source_${index + 1}`,
|
||||
name: source.name?.trim() || `书源 ${index + 1}`,
|
||||
url: source.url?.trim() || '',
|
||||
enabled: source.enabled !== false,
|
||||
authMode: source.authMode || 'none',
|
||||
username: source.authMode === 'none' ? '' : source.username?.trim() || '',
|
||||
password: source.authMode === 'none' ? '' : source.password || '',
|
||||
headerName: source.authMode === 'header' ? source.headerName?.trim() || '' : '',
|
||||
headerValue: source.authMode === 'header' ? source.headerValue || '' : '',
|
||||
searchTemplate: source.searchTemplate?.trim() || '',
|
||||
preferFormat: source.preferFormat?.length ? source.preferFormat : ['epub', 'pdf'],
|
||||
language: source.language?.trim() || '',
|
||||
});
|
||||
|
||||
const buildConfig = () => ({
|
||||
Enabled: enabled,
|
||||
CacheTTL: Math.max(60_000, cacheTTL || 10 * 60 * 1000),
|
||||
Sources: sources
|
||||
.map((source, index) => ({
|
||||
id: source.id?.trim() || `source_${index + 1}`,
|
||||
name: source.name?.trim() || `书源 ${index + 1}`,
|
||||
url: source.url?.trim() || '',
|
||||
enabled: source.enabled !== false,
|
||||
authMode: source.authMode || 'none',
|
||||
username: source.authMode === 'none' ? '' : source.username?.trim() || '',
|
||||
password: source.authMode === 'none' ? '' : source.password || '',
|
||||
headerName: source.authMode === 'header' ? source.headerName?.trim() || '' : '',
|
||||
headerValue: source.authMode === 'header' ? source.headerValue || '' : '',
|
||||
searchTemplate: source.searchTemplate?.trim() || '',
|
||||
preferFormat: source.preferFormat?.length ? source.preferFormat : ['epub', 'pdf'],
|
||||
language: source.language?.trim() || '',
|
||||
}))
|
||||
.filter((source) => !!source.url),
|
||||
Sources: sources.map(normalizeSource).filter((source) => !!source.url),
|
||||
});
|
||||
|
||||
const handleSave = async () => {
|
||||
@@ -11346,26 +11364,31 @@ const OPDSConfigComponent = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
await withLoading('testOPDSConfig', async () => {
|
||||
const handleTest = async (index: number) => {
|
||||
await withLoading(`testOPDSConfig-${index}`, async () => {
|
||||
try {
|
||||
const source = normalizeSource(sources[index], index);
|
||||
if (!source?.url) {
|
||||
throw new Error('请先填写书源地址');
|
||||
}
|
||||
const response = await fetch('/api/admin/opds', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(buildConfig()),
|
||||
body: JSON.stringify({
|
||||
Enabled: true,
|
||||
CacheTTL: Math.max(60_000, cacheTTL || 10 * 60 * 1000),
|
||||
Sources: [source],
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(data.message || data.error || '测试连接失败');
|
||||
}
|
||||
const summary = Array.isArray(data.results)
|
||||
? data.results
|
||||
.map((item: { name: string; capability: { catalogSupported: boolean; searchSupported: boolean; lastError?: string } }) =>
|
||||
`${item.name}: 分类${item.capability.catalogSupported ? '√' : '×'} / 搜索${item.capability.searchSupported ? '√' : '×'}${item.capability.lastError ? ` (${item.capability.lastError})` : ''}`
|
||||
)
|
||||
.join('\n')
|
||||
: '';
|
||||
showSuccess(summary || data.message || '测试成功', showAlert);
|
||||
const result = Array.isArray(data.results) ? data.results[0] : null;
|
||||
const summary = result
|
||||
? `${result.name}: 分类${result.capability.catalogSupported ? '√' : '×'} / 搜索${result.capability.searchSupported ? '√' : '×'}${result.capability.lastError ? ` (${result.capability.lastError})` : ''}`
|
||||
: data.message || '测试成功';
|
||||
showSuccess(summary, showAlert);
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '测试连接失败', showAlert);
|
||||
throw error;
|
||||
@@ -11422,92 +11445,307 @@ const OPDSConfigComponent = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sources.map((source, index) => (
|
||||
<div key={`${source.id}-${index}`} className='rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-4'>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<div className='text-sm font-medium text-gray-900 dark:text-white'>书源 #{index + 1}</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => updateSource(index, { enabled: source.enabled === false })}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${source.enabled !== false ? 'bg-green-600' : 'bg-gray-200 dark:bg-gray-700'}`}
|
||||
>
|
||||
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${source.enabled !== false ? 'translate-x-6' : 'translate-x-1'}`} />
|
||||
</button>
|
||||
<button type='button' onClick={() => removeSource(index)} className={buttonStyles.danger}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{sources.length > 0 && (
|
||||
<>
|
||||
<div className='space-y-3 md:hidden'>
|
||||
{sources.map((source, index) => {
|
||||
const isEditing = editingIndex === index;
|
||||
return (
|
||||
<div key={`opds-source-${index}`} className='overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'>
|
||||
<div className='space-y-3 p-4'>
|
||||
<div className='flex items-start justify-between gap-3'>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<div className='text-sm font-medium text-gray-900 dark:text-gray-100'>
|
||||
{source.name || `书源 ${index + 1}`}
|
||||
</div>
|
||||
<div className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
{source.id || '未设置 ID'}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => updateSource(index, { enabled: source.enabled === false })}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${source.enabled !== false ? 'bg-green-600' : 'bg-gray-200 dark:bg-gray-700'}`}
|
||||
>
|
||||
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${source.enabled !== false ? 'translate-x-6' : 'translate-x-1'}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 text-xs text-gray-600 dark:text-gray-300'>
|
||||
<div className='flex items-start justify-between gap-3'>
|
||||
<span className='shrink-0 text-gray-500 dark:text-gray-400'>地址</span>
|
||||
<span className='min-w-0 text-right break-all'>{source.url || '-'}</span>
|
||||
</div>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<span className='text-gray-500 dark:text-gray-400'>认证</span>
|
||||
<span>{source.authMode === 'none' ? '无认证' : source.authMode === 'basic' ? 'Basic Auth' : '自定义 Header'}</span>
|
||||
</div>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<span className='text-gray-500 dark:text-gray-400'>搜索</span>
|
||||
<span>{source.searchTemplate?.trim() ? '已配置' : '未配置'}</span>
|
||||
</div>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<span className='text-gray-500 dark:text-gray-400'>格式</span>
|
||||
<span>{source.preferFormat?.join(', ') || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap items-center justify-end gap-2'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => handleTest(index)}
|
||||
disabled={isLoading(`testOPDSConfig-${index}`)}
|
||||
className={buttonStyles.primarySmall}
|
||||
>
|
||||
{isLoading(`testOPDSConfig-${index}`) ? '测试中...' : '测试'}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => setEditingIndex(isEditing ? null : index)}
|
||||
className={buttonStyles.secondarySmall}
|
||||
>
|
||||
{isEditing ? <><ChevronUp size={14} className='inline mr-1' />收起</> : <><Settings size={14} className='inline mr-1' />编辑</>}
|
||||
</button>
|
||||
<button type='button' onClick={() => removeSource(index)} className={buttonStyles.dangerSmall}>
|
||||
<Trash2 size={14} className='inline mr-1' />删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isEditing && (
|
||||
<div className='space-y-4 border-t border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/40'>
|
||||
<div className='text-sm font-medium text-gray-900 dark:text-white'>编辑书源 #{index + 1}</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>书源 ID</label>
|
||||
<input type='text' value={source.id} onChange={(e) => updateSource(index, { id: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>书源名称</label>
|
||||
<input type='text' value={source.name} onChange={(e) => updateSource(index, { name: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>根地址</label>
|
||||
<input type='text' value={source.url} onChange={(e) => updateSource(index, { url: e.target.value })} placeholder='https://example.com/opds' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>认证方式</label>
|
||||
<select value={source.authMode || 'none'} onChange={(e) => updateSource(index, { authMode: e.target.value as BookSource['authMode'] })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100'>
|
||||
<option value='none'>无认证</option>
|
||||
<option value='basic'>Basic Auth</option>
|
||||
<option value='header'>自定义 Header</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>语言</label>
|
||||
<input type='text' value={source.language || ''} onChange={(e) => updateSource(index, { language: e.target.value })} placeholder='zh / en' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>搜索模板</label>
|
||||
<input type='text' value={source.searchTemplate || ''} onChange={(e) => updateSource(index, { searchTemplate: e.target.value })} placeholder='https://...{searchTerms}' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{source.authMode === 'basic' && (
|
||||
<div className='grid grid-cols-1 gap-4'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>用户名</label>
|
||||
<input type='text' value={source.username || ''} onChange={(e) => updateSource(index, { username: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>密码</label>
|
||||
<input type='password' value={source.password || ''} onChange={(e) => updateSource(index, { password: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{source.authMode === 'header' && (
|
||||
<div className='grid grid-cols-1 gap-4'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>Header 名称</label>
|
||||
<input type='text' value={source.headerName || ''} onChange={(e) => updateSource(index, { headerName: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>Header 值</label>
|
||||
<input type='password' value={source.headerValue || ''} onChange={(e) => updateSource(index, { headerValue: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>书源 ID</label>
|
||||
<input type='text' value={source.id} onChange={(e) => updateSource(index, { id: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>书源名称</label>
|
||||
<input type='text' value={source.name} onChange={(e) => updateSource(index, { name: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
<div className='hidden overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 md:block'>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
<thead className='bg-gray-50 dark:bg-gray-800/70'>
|
||||
<tr>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>启用</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>名称</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>ID</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>地址</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>认证</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>搜索</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>格式偏好</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400'>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900'>
|
||||
{sources.map((source, index) => {
|
||||
const isEditing = editingIndex === index;
|
||||
return (
|
||||
<Fragment key={`opds-source-${index}`}>
|
||||
<tr className='align-top'>
|
||||
<td className='px-4 py-3'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => updateSource(index, { enabled: source.enabled === false })}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${source.enabled !== false ? 'bg-green-600' : 'bg-gray-200 dark:bg-gray-700'}`}
|
||||
>
|
||||
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${source.enabled !== false ? 'translate-x-6' : 'translate-x-1'}`} />
|
||||
</button>
|
||||
</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-900 dark:text-gray-100'>
|
||||
<div className='font-medium'>{source.name || `书源 ${index + 1}`}</div>
|
||||
<div className='mt-1 text-xs text-gray-500 dark:text-gray-400'>{source.language || '未设置语言'}</div>
|
||||
</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-600 dark:text-gray-300'>{source.id || '-'}</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-600 dark:text-gray-300'>
|
||||
<div className='max-w-[320px] truncate' title={source.url || ''}>{source.url || '-'}</div>
|
||||
</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-600 dark:text-gray-300'>
|
||||
{source.authMode === 'none' ? '无认证' : source.authMode === 'basic' ? 'Basic Auth' : '自定义 Header'}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-600 dark:text-gray-300'>
|
||||
{source.searchTemplate?.trim() ? '已配置' : '未配置'}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-sm text-gray-600 dark:text-gray-300'>{source.preferFormat?.join(', ') || '-'}</td>
|
||||
<td className='px-4 py-3'>
|
||||
<div className='flex flex-wrap items-center justify-end gap-2'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => handleTest(index)}
|
||||
disabled={isLoading(`testOPDSConfig-${index}`)}
|
||||
className={buttonStyles.primarySmall}
|
||||
>
|
||||
{isLoading(`testOPDSConfig-${index}`) ? '测试中...' : '测试'}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => setEditingIndex(isEditing ? null : index)}
|
||||
className={buttonStyles.secondarySmall}
|
||||
>
|
||||
{isEditing ? <><ChevronUp size={14} className='inline mr-1' />收起</> : <><Settings size={14} className='inline mr-1' />编辑</>}
|
||||
</button>
|
||||
<button type='button' onClick={() => removeSource(index)} className={buttonStyles.dangerSmall}>
|
||||
<Trash2 size={14} className='inline mr-1' />删除
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{isEditing && (
|
||||
<tr>
|
||||
<td colSpan={8} className='bg-gray-50 px-4 py-4 dark:bg-gray-800/40'>
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<div>
|
||||
<div className='text-sm font-medium text-gray-900 dark:text-white'>编辑书源 #{index + 1}</div>
|
||||
<div className='mt-1 text-xs text-gray-500 dark:text-gray-400'>仅展开当前书源，保存时统一提交。</div>
|
||||
</div>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => setEditingIndex(null)}
|
||||
className={buttonStyles.secondarySmall}
|
||||
>
|
||||
<ChevronUp size={14} className='inline mr-1' />收起
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>书源 ID</label>
|
||||
<input type='text' value={source.id} onChange={(e) => updateSource(index, { id: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>书源名称</label>
|
||||
<input type='text' value={source.name} onChange={(e) => updateSource(index, { name: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>根地址</label>
|
||||
<input type='text' value={source.url} onChange={(e) => updateSource(index, { url: e.target.value })} placeholder='https://example.com/opds' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>认证方式</label>
|
||||
<select value={source.authMode || 'none'} onChange={(e) => updateSource(index, { authMode: e.target.value as BookSource['authMode'] })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100'>
|
||||
<option value='none'>无认证</option>
|
||||
<option value='basic'>Basic Auth</option>
|
||||
<option value='header'>自定义 Header</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>语言</label>
|
||||
<input type='text' value={source.language || ''} onChange={(e) => updateSource(index, { language: e.target.value })} placeholder='zh / en' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>搜索模板</label>
|
||||
<input type='text' value={source.searchTemplate || ''} onChange={(e) => updateSource(index, { searchTemplate: e.target.value })} placeholder='https://...{searchTerms}' className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{source.authMode === 'basic' && (
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>用户名</label>
|
||||
<input type='text' value={source.username || ''} onChange={(e) => updateSource(index, { username: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>密码</label>
|
||||
<input type='password' value={source.password || ''} onChange={(e) => updateSource(index, { password: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{source.authMode === 'header' && (
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>Header 名称</label>
|
||||
<input type='text' value={source.headerName || ''} onChange={(e) => updateSource(index, { headerName: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300'>Header 值</label>
|
||||
<input type='password' value={source.headerValue || ''} onChange={(e) => updateSource(index, { headerValue: e.target.value })} className='w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>根地址</label>
|
||||
<input type='text' value={source.url} onChange={(e) => updateSource(index, { url: e.target.value })} placeholder='https://example.com/opds' className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>认证方式</label>
|
||||
<select value={source.authMode || 'none'} onChange={(e) => updateSource(index, { authMode: e.target.value as BookSource['authMode'] })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
|
||||
<option value='none'>无认证</option>
|
||||
<option value='basic'>Basic Auth</option>
|
||||
<option value='header'>自定义 Header</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>语言</label>
|
||||
<input type='text' value={source.language || ''} onChange={(e) => updateSource(index, { language: e.target.value })} placeholder='zh / en' className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>搜索模板</label>
|
||||
<input type='text' value={source.searchTemplate || ''} onChange={(e) => updateSource(index, { searchTemplate: e.target.value })} placeholder='https://...{searchTerms}' className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{source.authMode === 'basic' && (
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>用户名</label>
|
||||
<input type='text' value={source.username || ''} onChange={(e) => updateSource(index, { username: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>密码</label>
|
||||
<input type='password' value={source.password || ''} onChange={(e) => updateSource(index, { password: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{source.authMode === 'header' && (
|
||||
<div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>Header 名称</label>
|
||||
<input type='text' value={source.headerName || ''} onChange={(e) => updateSource(index, { headerName: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>Header 值</label>
|
||||
<input type='password' value={source.headerValue || ''} onChange={(e) => updateSource(index, { headerValue: e.target.value })} className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-3'>
|
||||
<button onClick={handleTest} disabled={isLoading('testOPDSConfig')} className={buttonStyles.primary}>
|
||||
{isLoading('testOPDSConfig') ? '测试中...' : '测试书源'}
|
||||
</button>
|
||||
<button onClick={handleSave} disabled={isLoading('saveOPDSConfig')} className={buttonStyles.success}>
|
||||
{isLoading('saveOPDSConfig') ? '保存中...' : '保存 OPDS 配置'}
|
||||
</button>
|
||||
|
||||
@@ -73,7 +73,9 @@ async function proxyFile(request: NextRequest, sourceId: string, href: string) {
|
||||
const acceptRanges = response.headers.get('accept-ranges');
|
||||
const contentRange = response.headers.get('content-range');
|
||||
const disposition = response.headers.get('content-disposition');
|
||||
if (contentType) outHeaders.set('Content-Type', contentType);
|
||||
const normalizedHref = href.toLowerCase();
|
||||
const resolvedContentType = contentType || (normalizedHref.endsWith('.pdf') ? 'application/pdf' : normalizedHref.endsWith('.epub') ? 'application/epub+zip' : '');
|
||||
if (resolvedContentType) outHeaders.set('Content-Type', resolvedContentType);
|
||||
if (contentLength) outHeaders.set('Content-Length', contentLength);
|
||||
if (acceptRanges) outHeaders.set('Accept-Ranges', acceptRanges);
|
||||
if (contentRange) outHeaders.set('Content-Range', contentRange);
|
||||
|
||||
@@ -31,7 +31,23 @@ function DetailSkeleton() {
|
||||
);
|
||||
}
|
||||
|
||||
async function openBookFile(sourceId: string, bookId: string, format?: 'epub' | 'pdf', download = false, href?: string) {
|
||||
function parseDownloadFilename(disposition: string | null) {
|
||||
if (!disposition) return '';
|
||||
const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
|
||||
if (utf8Match?.[1]) {
|
||||
try {
|
||||
return decodeURIComponent(utf8Match[1]);
|
||||
} catch {}
|
||||
}
|
||||
const plainMatch = disposition.match(/filename="?([^";]+)"?/i);
|
||||
return plainMatch?.[1] || '';
|
||||
}
|
||||
|
||||
function sanitizeFilename(name: string) {
|
||||
return name.replace(/[\/:*?"<>|]/g, '_').trim();
|
||||
}
|
||||
|
||||
async function openBookFile(sourceId: string, bookId: string, format?: 'epub' | 'pdf', download = false, href?: string, title?: string) {
|
||||
const response = await fetch('/api/books/file', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -48,9 +64,13 @@ async function openBookFile(sourceId: string, bookId: string, format?: 'epub' |
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
if (download) {
|
||||
const headerFilename = parseDownloadFilename(response.headers.get('content-disposition'));
|
||||
const fallbackBaseName = sanitizeFilename(title || bookId || 'book') || 'book';
|
||||
const extension = format === 'pdf' ? 'pdf' : 'epub';
|
||||
const finalFilename = headerFilename || `${fallbackBaseName}.${extension}`;
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = '';
|
||||
link.download = finalFilename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
@@ -155,7 +175,7 @@ export default function BookDetailPage() {
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
{readable ? <Link href={buildBookReadPath(detail.sourceId, detail.id)} onClick={() => cacheBookDetail(detail)} className='rounded-2xl bg-sky-600 px-4 py-2 text-sm text-white'>在线阅读</Link> : null}
|
||||
<button onClick={toggleShelf} className='rounded-2xl border border-gray-200 px-4 py-2 text-sm dark:border-gray-700'>{shelf[`${detail.sourceId}+${detail.id}`] ? '移出书架' : '加入书架'}</button>
|
||||
{readable ? <button onClick={async () => { try { setFileBusy('download'); await openBookFile(detail.sourceId, detail.id, readableFormat, true, readable?.href); } catch (err) { setError((err as Error).message || '下载文件失败'); } finally { setFileBusy(''); } }} disabled={fileBusy !== ''} className='rounded-2xl border border-gray-200 px-4 py-2 text-sm dark:border-gray-700'>{fileBusy === 'download' ? '下载中...' : '下载文件'}</button> : null}
|
||||
{readable ? <button onClick={async () => { try { setFileBusy('download'); await openBookFile(detail.sourceId, detail.id, readableFormat, true, readable?.href, detail.title); } catch (err) { setError((err as Error).message || '下载文件失败'); } finally { setFileBusy(''); } }} disabled={fileBusy !== ''} className='rounded-2xl border border-gray-200 px-4 py-2 text-sm dark:border-gray-700'>{fileBusy === 'download' ? '下载中...' : '下载文件'}</button> : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user