1523 lines
89 KiB
JavaScript
1523 lines
89 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect, useMemo } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import { useAppStore } from '../store/useAppStore';
|
||
import {
|
||
getProjectSettings,
|
||
saveProjectSettings,
|
||
getSettingsNodes,
|
||
addSettingsNode,
|
||
updateSettingsNode,
|
||
deleteSettingsNode,
|
||
WRITING_MODES,
|
||
getWritingMode,
|
||
setWritingMode,
|
||
createWorkNode,
|
||
saveSettingsNodes,
|
||
getActiveWorkId,
|
||
setActiveWorkId,
|
||
getAllWorks,
|
||
rebuildAllEmbeddings,
|
||
} from '../lib/settings';
|
||
import SettingsTree from './SettingsTree';
|
||
import { useI18n } from '../lib/useI18n';
|
||
import SettingsItemEditor from './SettingsItemEditor';
|
||
import { downloadFile, downloadBlob } from '../lib/project-io';
|
||
import {
|
||
detectCategory, parseTextToFields, mapFieldsToContent,
|
||
parseMultipleEntries, isStructuredText, parseStructuredText,
|
||
preprocessPdfText,
|
||
exportNodesToTxt, exportNodesToMarkdown,
|
||
exportNodesToDocx, exportSettingsAsPdf, parseDocxToText, parsePdfToText,
|
||
} from '../lib/settings-io';
|
||
import SettingsConflictModal from './SettingsConflictModal';
|
||
|
||
const CAT_STYLES = {
|
||
work: { color: 'var(--cat-work)', bg: 'var(--cat-work-bg)', icon: '📕' },
|
||
character: { color: 'var(--cat-character)', bg: 'var(--cat-character-bg)', icon: '👤' },
|
||
location: { color: 'var(--cat-location)', bg: 'var(--cat-location-bg)', icon: '🗺️' },
|
||
world: { color: 'var(--cat-world)', bg: 'var(--cat-world-bg)', icon: '🌍' },
|
||
object: { color: 'var(--cat-object)', bg: 'var(--cat-object-bg)', icon: '🔮' },
|
||
plot: { color: 'var(--cat-plot)', bg: 'var(--cat-plot-bg)', icon: '📋' },
|
||
rules: { color: 'var(--cat-rules)', bg: 'var(--cat-rules-bg)', icon: '📐' },
|
||
};
|
||
|
||
export default function SettingsPanel() {
|
||
const {
|
||
showSettings: open,
|
||
setShowSettings,
|
||
setWritingMode: setGlobalWritingMode,
|
||
incrementSettingsVersion,
|
||
jumpToNodeId,
|
||
setJumpToNodeId,
|
||
} = useAppStore();
|
||
|
||
const onClose = () => {
|
||
setShowSettings(false);
|
||
setGlobalWritingMode(getWritingMode());
|
||
incrementSettingsVersion();
|
||
};
|
||
|
||
const [settings, setSettings] = useState(null);
|
||
const [activeTab, setActiveTab] = useState('settings');
|
||
const [nodes, setNodes] = useState([]);
|
||
const [selectedNodeId, setSelectedNodeId] = useState(null);
|
||
const [writingMode, setWritingModeState] = useState('webnovel');
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [activeWorkId, setActiveWorkIdState] = useState(null);
|
||
const [showNewWorkInput, setShowNewWorkInput] = useState(false);
|
||
const [newWorkName, setNewWorkName] = useState('');
|
||
const { t } = useI18n();
|
||
|
||
const [expandedCategory, setExpandedCategory] = useState(null);
|
||
const [showExportFormat, setShowExportFormat] = useState(false);
|
||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||
|
||
// 删除确认弹窗状态
|
||
const [deleteConfirm, setDeleteConfirm] = useState(null); // { message, onConfirm }
|
||
|
||
// 检查是否应跳过删除确认
|
||
const shouldSkipDeleteConfirm = () => {
|
||
try {
|
||
if (localStorage.getItem('author-delete-never-remind') === 'true') return true;
|
||
const skipDate = localStorage.getItem('author-delete-skip-today');
|
||
if (skipDate && skipDate === new Date().toISOString().slice(0, 10)) return true;
|
||
} catch { /* ignore */ }
|
||
return false;
|
||
};
|
||
|
||
// 获取当前作品的节点
|
||
useEffect(() => {
|
||
if (open) {
|
||
setSettings(getProjectSettings());
|
||
const loadNodes = async () => {
|
||
const allNodes = await getSettingsNodes();
|
||
setNodes(allNodes);
|
||
setWritingModeState(getWritingMode());
|
||
setSearchQuery('');
|
||
// 初始化激活作品
|
||
let wid = getActiveWorkId();
|
||
if (!wid || !allNodes.find(n => n.id === wid)) {
|
||
const firstWork = allNodes.find(n => n.type === 'work');
|
||
wid = firstWork?.id || null;
|
||
if (wid) setActiveWorkId(wid);
|
||
}
|
||
setActiveWorkIdState(wid);
|
||
|
||
// 跳转到指定节点
|
||
if (jumpToNodeId) {
|
||
setActiveTab('settings');
|
||
setSelectedNodeId(jumpToNodeId);
|
||
setJumpToNodeId(null);
|
||
}
|
||
};
|
||
loadNodes();
|
||
}
|
||
}, [open]);
|
||
|
||
// 所有作品列表
|
||
const works = useMemo(() => getAllWorks(nodes), [nodes]);
|
||
|
||
// 当前作品下的节点
|
||
const visibleNodes = useMemo(() => {
|
||
if (!activeWorkId) return nodes;
|
||
// 递归收集当前作品的所有后代 id
|
||
const workDescendants = new Set();
|
||
const collectDescendants = (parentId) => {
|
||
nodes.filter(n => n.parentId === parentId).forEach(n => {
|
||
workDescendants.add(n.id);
|
||
collectDescendants(n.id);
|
||
});
|
||
};
|
||
workDescendants.add(activeWorkId);
|
||
collectDescendants(activeWorkId);
|
||
return nodes.filter(n => workDescendants.has(n.id));
|
||
}, [nodes, activeWorkId]);
|
||
|
||
const stats = useMemo(() => {
|
||
const items = visibleNodes.filter(n => n.type === 'item');
|
||
return Object.entries(CAT_STYLES).filter(([cat]) => cat !== 'work').map(([cat, style]) => ({
|
||
category: cat,
|
||
count: items.filter(n => n.category === cat).length,
|
||
label: t(`settings.categories.${cat}`),
|
||
...style,
|
||
}));
|
||
}, [visibleNodes, t]);
|
||
|
||
// 作品管理
|
||
const handleSwitchWork = (workId) => {
|
||
setActiveWorkIdState(workId);
|
||
setActiveWorkId(workId);
|
||
// 同步 Zustand store，触发 page.js 重载章节
|
||
useAppStore.getState().setActiveWorkId(workId);
|
||
setSelectedNodeId(null);
|
||
};
|
||
|
||
const handleCreateWork = async () => {
|
||
const name = newWorkName.trim();
|
||
if (!name) return;
|
||
const { workNode, subNodes } = createWorkNode(name);
|
||
const updatedNodes = [...nodes, workNode, ...subNodes];
|
||
await saveSettingsNodes(updatedNodes);
|
||
setNodes(updatedNodes);
|
||
setActiveWorkIdState(workNode.id);
|
||
setActiveWorkId(workNode.id);
|
||
// 同步 Zustand store，触发 page.js 重载章节
|
||
useAppStore.getState().setActiveWorkId(workNode.id);
|
||
setNewWorkName('');
|
||
setShowNewWorkInput(false);
|
||
setSelectedNodeId(null);
|
||
};
|
||
|
||
const handleDeleteWork = async (workId) => {
|
||
const work = nodes.find(n => n.id === workId);
|
||
if (!work) return;
|
||
if (works.length <= 1) { alert(t('settings.deleteWorkAlert')); return; }
|
||
if (shouldSkipDeleteConfirm()) {
|
||
await doDeleteWork(workId);
|
||
} else {
|
||
return new Promise((resolve) => {
|
||
setDeleteConfirm({
|
||
message: t('settings.deleteWorkPrompt').replace('{name}', work.name),
|
||
onConfirm: async () => { setDeleteConfirm(null); await doDeleteWork(workId); resolve(); },
|
||
onCancel: () => { setDeleteConfirm(null); resolve(); },
|
||
});
|
||
});
|
||
}
|
||
};
|
||
|
||
const doDeleteWork = async (workId) => {
|
||
// 递归删除作品及其所有后代
|
||
const toDelete = new Set();
|
||
const collect = (pid) => { toDelete.add(pid); nodes.filter(n => n.parentId === pid).forEach(n => collect(n.id)); };
|
||
collect(workId);
|
||
const updatedNodes = nodes.filter(n => !toDelete.has(n.id));
|
||
await saveSettingsNodes(updatedNodes);
|
||
setNodes(updatedNodes);
|
||
// 切换到第一个存活的作品
|
||
const nextWork = updatedNodes.find(n => n.type === 'work');
|
||
if (nextWork) {
|
||
setActiveWorkIdState(nextWork.id);
|
||
setActiveWorkId(nextWork.id);
|
||
}
|
||
setSelectedNodeId(null);
|
||
};
|
||
|
||
// 一键清空当前作品的所有条目（保留文件夹结构）
|
||
const handleClearAllItems = async () => {
|
||
if (!activeWorkId) return;
|
||
const workNode = nodes.find(n => n.id === activeWorkId);
|
||
const workName = workNode?.name || '';
|
||
// 统计当前作品下的 item 数量
|
||
const workDescendants = new Set();
|
||
const collectWork = (pid) => { nodes.filter(n => n.parentId === pid).forEach(n => { workDescendants.add(n.id); collectWork(n.id); }); };
|
||
workDescendants.add(activeWorkId);
|
||
collectWork(activeWorkId);
|
||
const itemCount = nodes.filter(n => workDescendants.has(n.id) && n.type === 'item').length;
|
||
if (itemCount === 0) return;
|
||
|
||
const msg = t('settings.clearAllPrompt').replace('{name}', workName).replace('{count}', itemCount);
|
||
setDeleteConfirm({
|
||
message: msg,
|
||
onConfirm: async () => {
|
||
setDeleteConfirm(null);
|
||
const updatedNodes = nodes.filter(n => !(workDescendants.has(n.id) && n.type === 'item'));
|
||
await saveSettingsNodes(updatedNodes);
|
||
setNodes(updatedNodes);
|
||
setSelectedNodeId(null);
|
||
},
|
||
onCancel: () => setDeleteConfirm(null),
|
||
});
|
||
};
|
||
|
||
// 收集当前作品的所有节点
|
||
const getWorkNodes = () => {
|
||
if (!activeWorkId) return [];
|
||
const workDescendants = new Set();
|
||
const collect = (parentId) => {
|
||
nodes.filter(n => n.parentId === parentId).forEach(n => {
|
||
workDescendants.add(n.id);
|
||
collect(n.id);
|
||
});
|
||
};
|
||
workDescendants.add(activeWorkId);
|
||
collect(activeWorkId);
|
||
return nodes.filter(n => workDescendants.has(n.id));
|
||
};
|
||
|
||
// 导出当前作品的设定集
|
||
const handleExportSettings = async (format = 'json') => {
|
||
if (!activeWorkId) return;
|
||
const workNode = nodes.find(n => n.id === activeWorkId);
|
||
if (!workNode) return;
|
||
const workNodes = getWorkNodes();
|
||
const baseName = workNode.name || '设定集';
|
||
setShowExportFormat(false);
|
||
|
||
if (format === 'txt') {
|
||
const txt = exportNodesToTxt(workNodes);
|
||
await downloadFile(txt, `${baseName}-设定集.txt`, 'text/plain');
|
||
} else if (format === 'md') {
|
||
const md = exportNodesToMarkdown(workNodes);
|
||
await downloadFile(md, `${baseName}-设定集.md`, 'text/markdown');
|
||
} else if (format === 'docx') {
|
||
const blob = await exportNodesToDocx(workNodes);
|
||
await downloadBlob(blob, `${baseName}-设定集.docx`, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
|
||
} else if (format === 'pdf') {
|
||
exportSettingsAsPdf(workNodes);
|
||
} else {
|
||
// JSON 格式
|
||
const exportNodes = workNodes.map(({ embedding, ...rest }) => rest);
|
||
const projectSettings = getProjectSettings();
|
||
const data = {
|
||
type: 'author-settings-export',
|
||
version: 2,
|
||
workName: workNode.name,
|
||
exportedAt: new Date().toISOString(),
|
||
nodes: exportNodes,
|
||
writingMode: projectSettings.writingMode || 'webnovel',
|
||
};
|
||
await downloadFile(JSON.stringify(data, null, 2), `${baseName}-设定集.json`, 'application/json');
|
||
}
|
||
};
|
||
|
||
// 导入设定集
|
||
const handleImportSettings = async (e) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
e.target.value = '';
|
||
const ext = file.name.split('.').pop().toLowerCase();
|
||
|
||
// 先把文件转换为纯文本
|
||
let text;
|
||
if (ext === 'json') {
|
||
text = await file.text();
|
||
} else if (ext === 'docx') {
|
||
text = await parseDocxToText(file);
|
||
} else if (ext === 'pdf') {
|
||
text = await parsePdfToText(file);
|
||
text = preprocessPdfText(text); // 恢复标题结构
|
||
} else {
|
||
text = await file.text();
|
||
}
|
||
|
||
// JSON 导入
|
||
if (ext === 'json') {
|
||
try {
|
||
const data = JSON.parse(text);
|
||
if (data.type !== 'author-settings-export' || !Array.isArray(data.nodes)) {
|
||
alert(t('settings.importInvalidFile')); return;
|
||
}
|
||
const importedNodes = data.nodes;
|
||
const workNode = importedNodes.find(n => n.type === 'work');
|
||
if (!workNode) { alert(t('settings.importNoWork')); return; }
|
||
|
||
const restorePS = () => {
|
||
if (data.writingMode) {
|
||
const ps = getProjectSettings();
|
||
if (data.writingMode) ps.writingMode = data.writingMode;
|
||
saveProjectSettings(ps); setSettings(ps);
|
||
if (data.writingMode) { setWritingModeState(data.writingMode); setWritingMode(data.writingMode); }
|
||
}
|
||
// 兼容旧版导出：如果 JSON 中有 bookInfo，写入作品的 bookInfo 节点
|
||
if (data.bookInfo && Object.values(data.bookInfo).some(v => v)) {
|
||
const importedNodes = data.nodes;
|
||
const importedWork = importedNodes.find(n => n.type === 'work');
|
||
if (importedWork) {
|
||
const biNode = importedNodes.find(n => n.parentId === importedWork.id && n.category === 'bookInfo');
|
||
if (biNode && (!biNode.content || Object.keys(biNode.content).length === 0)) {
|
||
biNode.content = data.bookInfo;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
const existingWork = nodes.find(n => n.type === 'work' && n.name === workNode.name);
|
||
if (existingWork) {
|
||
if (!confirm((t('settings.importOverwrite')).replace('{name}', workNode.name))) return;
|
||
const toDelete = new Set();
|
||
const collectDel = (pid) => { toDelete.add(pid); nodes.filter(n => n.parentId === pid).forEach(n => collectDel(n.id)); };
|
||
collectDel(existingWork.id);
|
||
const merged = [...nodes.filter(n => !toDelete.has(n.id)), ...importedNodes];
|
||
await saveSettingsNodes(merged); setNodes(merged); restorePS(); handleSwitchWork(workNode.id);
|
||
} else {
|
||
const merged = [...nodes, ...importedNodes];
|
||
await saveSettingsNodes(merged); setNodes(merged); restorePS(); handleSwitchWork(workNode.id);
|
||
}
|
||
} catch (err) { alert((t('settings.importError')) + err.message); }
|
||
return;
|
||
}
|
||
|
||
// TXT / MD / DOCX / PDF 智能导入
|
||
try {
|
||
if (!activeWorkId) { alert(t('settings.importNoWork')); return; }
|
||
|
||
console.log('[Settings Import] activeWorkId:', activeWorkId);
|
||
console.log('[Settings Import] text length:', text?.length, 'first 500 chars:', text?.substring(0, 500));
|
||
console.log('[Settings Import] isStructured:', isStructuredText(text));
|
||
|
||
// 解析文本为条目列表 [{name, category, content}]
|
||
let importedItems = [];
|
||
|
||
if (isStructuredText(text)) {
|
||
const parsedEntries = parseStructuredText(text);
|
||
console.log('[Settings Import] structured entries:', parsedEntries.length, parsedEntries.map(e => e.name));
|
||
for (const entry of parsedEntries) {
|
||
const mapped = mapFieldsToContent(entry.fields, entry.category);
|
||
const nodeName = mapped.name || entry.name || '导入条目';
|
||
if (Object.keys(mapped.content).length === 0) continue;
|
||
importedItems.push({ name: nodeName, category: entry.category, content: mapped.content });
|
||
}
|
||
} else {
|
||
const blocks = parseMultipleEntries(text);
|
||
console.log('[Settings Import] unstructured blocks:', blocks.length);
|
||
for (const block of blocks) {
|
||
const parsed = parseTextToFields(block);
|
||
if (Object.keys(parsed).length === 0) continue;
|
||
const category = detectCategory(block);
|
||
const mapped = mapFieldsToContent(parsed, category);
|
||
const nodeName = mapped.name || Object.values(parsed)[0]?.substring(0, 20) || '导入条目';
|
||
importedItems.push({ name: nodeName, category, content: mapped.content });
|
||
}
|
||
}
|
||
|
||
console.log('[Settings Import] importedItems:', importedItems.length, importedItems.map(i => i.name));
|
||
|
||
if (importedItems.length === 0) {
|
||
alert(t('settings.importEmpty') || '未能从文件中解析出任何设定条目');
|
||
return;
|
||
}
|
||
|
||
// 检测冲突（同名 + 同分类）
|
||
const existingItems = nodes.filter(n => n.type === 'item' && n.parentId);
|
||
console.log('[Settings Import] existingItems in activeWork:', existingItems.filter(n =>
|
||
nodes.find(p => p.id === n.parentId && (p.parentId === activeWorkId || p.id === activeWorkId))
|
||
).map(n => `${n.name}(${n.category})`));
|
||
const conflicts = [];
|
||
const noConflicts = [];
|
||
|
||
for (const item of importedItems) {
|
||
const existing = existingItems.find(n =>
|
||
n.name === item.name && n.category === item.category &&
|
||
nodes.find(p => p.id === n.parentId && (p.parentId === activeWorkId || p.id === activeWorkId))
|
||
);
|
||
console.log('[Settings Import] checking:', item.name, 'cat:', item.category, '→', existing ? 'CONFLICT' : 'new');
|
||
if (existing) {
|
||
conflicts.push({ name: item.name, category: item.category, existing, imported: item });
|
||
} else {
|
||
noConflicts.push(item);
|
||
}
|
||
}
|
||
|
||
console.log('[Settings Import] conflicts:', conflicts.length, 'noConflicts:', noConflicts.length);
|
||
|
||
if (conflicts.length > 0) {
|
||
// 有冲突 → 显示冲突弹窗
|
||
console.log('[Settings Import] SHOWING CONFLICT MODAL with', conflicts.length, 'conflicts');
|
||
setConflictData({ conflicts, noConflicts });
|
||
return; // 不继续执行后续逻辑
|
||
} else {
|
||
// 无冲突 → 直接导入
|
||
await doImportItems(noConflicts, []);
|
||
}
|
||
} catch (err) {
|
||
alert((t('settings.importError')) + err.message);
|
||
}
|
||
};
|
||
|
||
// 冲突解决状态
|
||
const [conflictData, setConflictData] = useState(null);
|
||
|
||
// 查找分类对应的父文件夹
|
||
const catSuffixMap = {
|
||
character: 'characters', location: 'locations', object: 'objects',
|
||
world: 'world', plot: 'plot', rules: 'rules',
|
||
};
|
||
const findParentFolder = (category) => {
|
||
const suffix = catSuffixMap[category] || category;
|
||
let parentId = nodes.find(n => n.parentId === activeWorkId && n.id.endsWith('-' + suffix))?.id;
|
||
if (!parentId) {
|
||
parentId = nodes.find(n => n.parentId === activeWorkId && n.category === category)?.id;
|
||
}
|
||
return parentId || activeWorkId;
|
||
};
|
||
|
||
// 执行导入
|
||
const doImportItems = async (items, updates) => {
|
||
let updatedNodes = [...nodes];
|
||
|
||
// 处理冲突解决的更新
|
||
for (const up of updates) {
|
||
updatedNodes = updatedNodes.map(n => {
|
||
if (n.id === up.nodeId) {
|
||
return { ...n, content: up.content, name: up.name || n.name, updatedAt: new Date().toISOString() };
|
||
}
|
||
return n;
|
||
});
|
||
}
|
||
|
||
// 添加新条目
|
||
let importedCount = 0;
|
||
for (const item of items) {
|
||
const parentId = findParentFolder(item.category);
|
||
const nodeId = Date.now().toString(36) + Math.random().toString(36).substr(2, 6) + importedCount;
|
||
updatedNodes.push({
|
||
id: nodeId, name: item.name, type: 'item',
|
||
category: item.category, parentId, order: importedCount,
|
||
icon: '📄', content: item.content,
|
||
collapsed: false, enabled: true,
|
||
createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
|
||
});
|
||
importedCount++;
|
||
}
|
||
|
||
await saveSettingsNodes(updatedNodes);
|
||
setNodes(updatedNodes);
|
||
const totalCount = items.length + updates.length;
|
||
alert((t('settings.importTextSuccess') || '成功导入 {count} 个设定条目').replace('{count}', totalCount));
|
||
};
|
||
|
||
// 冲突解决确认
|
||
const handleConflictConfirm = async (resolvedUpdates, noConflictItems) => {
|
||
setConflictData(null);
|
||
await doImportItems(noConflictItems, resolvedUpdates);
|
||
};
|
||
|
||
if ((!open && !conflictData) || !settings) return null;
|
||
|
||
const handleSettingsSave = (section, data) => {
|
||
const newSettings = { ...settings, [section]: data };
|
||
setSettings(newSettings);
|
||
saveProjectSettings(newSettings);
|
||
};
|
||
|
||
// 节点操作
|
||
const handleAddNode = async (parentId, category) => {
|
||
const parent = parentId ? nodes.find(n => n.id === parentId) : null;
|
||
let cat = category || (parent ? parent.category : 'custom');
|
||
// 如果父节点是作品节点，创建文件夹（大分类）；否则创建条目
|
||
const isParentWork = parent && parent.type === 'work';
|
||
const newNode = await addSettingsNode({
|
||
name: isParentWork ? t('settings.newFolder') : t('settings.newItem'),
|
||
type: isParentWork ? 'folder' : 'item',
|
||
category: cat,
|
||
parentId,
|
||
enabled: true,
|
||
});
|
||
setNodes(await getSettingsNodes());
|
||
setSelectedNodeId(newNode.id);
|
||
};
|
||
|
||
const handleDeleteNode = async (id) => {
|
||
const node = nodes.find(n => n.id === id);
|
||
if (!node) return;
|
||
if (shouldSkipDeleteConfirm()) {
|
||
await doDeleteNode(id);
|
||
} else {
|
||
return new Promise((resolve) => {
|
||
setDeleteConfirm({
|
||
message: t('settings.deleteNodePrompt').replace('{name}', node.name),
|
||
onConfirm: async () => { setDeleteConfirm(null); await doDeleteNode(id); resolve(); },
|
||
onCancel: () => { setDeleteConfirm(null); resolve(); },
|
||
});
|
||
});
|
||
}
|
||
};
|
||
|
||
const doDeleteNode = async (id) => {
|
||
await deleteSettingsNode(id);
|
||
setNodes(await getSettingsNodes());
|
||
if (selectedNodeId === id) setSelectedNodeId(null);
|
||
};
|
||
|
||
const handleRenameNode = async (id, newName) => {
|
||
await updateSettingsNode(id, { name: newName });
|
||
setNodes(await getSettingsNodes());
|
||
};
|
||
|
||
const handleToggleEnabled = async (id) => {
|
||
const node = nodes.find(n => n.id === id);
|
||
if (!node) return;
|
||
const newEnabled = node.enabled === false ? true : false;
|
||
await updateSettingsNode(id, { enabled: newEnabled });
|
||
setNodes(prev => prev.map(n => n.id === id ? { ...n, enabled: newEnabled } : n));
|
||
};
|
||
|
||
const handleUpdateNode = (id, updates) => {
|
||
// 乐观更新：立即同步 React 状态，防止异步操作（如 embedding API）导致文字回退
|
||
setNodes(prev => prev.map(n => n.id === id ? { ...n, ...updates, updatedAt: new Date().toISOString() } : n));
|
||
// 后台持久化（不 await，避免阻塞 UI）
|
||
updateSettingsNode(id, updates);
|
||
};
|
||
|
||
const selectedNode = visibleNodes.find(n => n.id === selectedNodeId);
|
||
const showBookInfo = selectedNode?.type === 'special' && selectedNode?.category === 'bookInfo';
|
||
|
||
const tabs = [
|
||
{ key: 'settings', label: t('settings.tabSettings') },
|
||
{ key: 'apiConfig', label: t('settings.tabApi') },
|
||
{ key: 'preferences', label: t('settings.tabPreferences') },
|
||
];
|
||
|
||
return (
|
||
<div className="settings-panel-overlay" onClick={onClose}>
|
||
<div className={`settings-panel-container glass-panel${isFullscreen ? ' fullscreen' : ''}`} onClick={e => e.stopPropagation()}>
|
||
{/* 头部 */}
|
||
<div className="settings-header" style={{ background: 'transparent' }}>
|
||
<h2>
|
||
⚙️ {t('settings.title')}
|
||
<span className="subtitle">— {t('settings.subtitle')}</span>
|
||
</h2>
|
||
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
||
<button className="btn btn-ghost btn-icon" onClick={() => setIsFullscreen(!isFullscreen)} title={isFullscreen ? '退出全屏' : '全屏'}>
|
||
{isFullscreen ? '⛶' : '⛶'}
|
||
</button>
|
||
<button className="btn btn-ghost btn-icon" onClick={onClose}>✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tab 导航 */}
|
||
<div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-glass)', padding: '0 24px' }}>
|
||
{tabs.map(tab => (
|
||
<button
|
||
key={tab.key}
|
||
style={{
|
||
padding: '10px 16px', border: 'none', background: 'none', cursor: 'pointer',
|
||
fontSize: 13, color: activeTab === tab.key ? 'var(--accent)' : 'var(--text-secondary)',
|
||
borderBottom: activeTab === tab.key ? '2px solid var(--accent)' : '2px solid transparent',
|
||
fontWeight: activeTab === tab.key ? 600 : 400, transition: 'all 0.15s', whiteSpace: 'nowrap',
|
||
}}
|
||
onClick={() => setActiveTab(tab.key)}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* 内容区 */}
|
||
{activeTab === 'apiConfig' ? (
|
||
<div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
|
||
<ApiConfigForm data={settings.apiConfig} onChange={data => handleSettingsSave('apiConfig', data)} />
|
||
</div>
|
||
) : activeTab === 'preferences' ? (
|
||
<div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
|
||
<PreferencesForm />
|
||
</div>
|
||
) : (
|
||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
{/* 写作模式选择器 */}
|
||
<div style={{ display: 'flex', gap: 10, padding: '14px 24px', borderBottom: '1px solid var(--border-light)', background: 'var(--bg-secondary)' }}>
|
||
{Object.values(WRITING_MODES).map(m => (
|
||
<button
|
||
key={m.key}
|
||
className={`writing-mode-card ${writingMode === m.key ? 'active' : ''}`}
|
||
style={{
|
||
border: writingMode === m.key ? `2px solid ${m.color}` : '1px solid var(--border-light)',
|
||
background: writingMode === m.key ? `${m.color}10` : 'var(--bg-primary)',
|
||
}}
|
||
onClick={() => { setWritingModeState(m.key); setWritingMode(m.key); }}
|
||
>
|
||
<div style={{ fontSize: 18, marginBottom: 4 }}>{m.icon}</div>
|
||
<div style={{ fontSize: 13, fontWeight: 600, color: writingMode === m.key ? m.color : 'var(--text-primary)', marginBottom: 2 }}>{m.label}</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.4 }}>{m.desc}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* 作品切换器 */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 24px', borderBottom: '1px solid var(--border-light)', background: 'var(--bg-primary)' }}>
|
||
<span style={{ fontSize: 13, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{t('settings.workLabel')}</span>
|
||
<div style={{ display: 'flex', gap: 6, flex: 1, flexWrap: 'wrap', alignItems: 'center' }}>
|
||
{works.map(w => (
|
||
<div key={w.id} style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
|
||
<button
|
||
style={{
|
||
padding: '5px 12px', border: activeWorkId === w.id ? '2px solid var(--cat-work)' : '1px solid var(--border-light)',
|
||
borderRadius: 'var(--radius-sm)', background: activeWorkId === w.id ? 'var(--cat-work-bg)' : 'var(--bg-secondary)',
|
||
cursor: 'pointer', fontSize: 12, fontWeight: activeWorkId === w.id ? 600 : 400,
|
||
color: activeWorkId === w.id ? 'var(--cat-work)' : 'var(--text-primary)', transition: 'all 0.15s',
|
||
}}
|
||
onClick={() => handleSwitchWork(w.id)}
|
||
>
|
||
{w.name}
|
||
</button>
|
||
{works.length > 1 && (
|
||
<button
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 10, padding: '2px 4px', lineHeight: 1, opacity: 0.6 }}
|
||
onClick={() => handleDeleteWork(w.id)}
|
||
title={t('common.delete') + ' ' + w.name}
|
||
>✕</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
{showNewWorkInput ? (
|
||
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
||
<input
|
||
style={{ padding: '4px 8px', border: '1px solid var(--accent)', borderRadius: 'var(--radius-sm)', fontSize: 12, background: 'var(--bg-primary)', color: 'var(--text-primary)', outline: 'none', width: 120 }}
|
||
value={newWorkName}
|
||
onChange={e => setNewWorkName(e.target.value)}
|
||
onKeyDown={e => { if (e.key === 'Enter') handleCreateWork(); if (e.key === 'Escape') setShowNewWorkInput(false); }}
|
||
placeholder={t('settings.workNamePlaceholder')}
|
||
autoFocus
|
||
/>
|
||
<button className="btn btn-primary btn-sm" style={{ padding: '4px 10px', fontSize: 11 }} onClick={handleCreateWork}>{t('settings.confirmBtn')}</button>
|
||
<button className="btn btn-ghost btn-sm" style={{ padding: '4px 8px', fontSize: 11 }} onClick={() => setShowNewWorkInput(false)}>{t('common.cancel')}</button>
|
||
</div>
|
||
) : (<>
|
||
<button
|
||
style={{ padding: '5px 10px', border: '1px dashed var(--border-light)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--text-muted)', transition: 'all 0.15s' }}
|
||
onClick={() => { setNewWorkName(''); setShowNewWorkInput(true); }}
|
||
>{t('settings.newWork')}</button>
|
||
<div style={{ position: 'relative', display: 'inline-block' }}>
|
||
<button
|
||
style={{ padding: '5px 10px', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--accent)', transition: 'all 0.15s' }}
|
||
onClick={() => setShowExportFormat(!showExportFormat)}
|
||
title={t('settings.exportSettingsTitle')}
|
||
>📤 {t('settings.exportSettings')}</button>
|
||
{showExportFormat && (
|
||
<div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, background: 'var(--bg-primary)', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', boxShadow: 'var(--shadow-md)', zIndex: 10, overflow: 'hidden', minWidth: 130 }}>
|
||
{[{ key: 'json', label: 'JSON (完整)', icon: '📋' }, { key: 'txt', label: 'TXT (纯文本)', icon: '📝' }, { key: 'md', label: 'Markdown', icon: '📖' }, { key: 'docx', label: 'Word (.docx)', icon: '📘' }, { key: 'pdf', label: 'PDF (打印)', icon: '📕' }].map(f => (
|
||
<button key={f.key} style={{ display: 'block', width: '100%', padding: '8px 14px', border: 'none', background: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--text-primary)', textAlign: 'left', transition: 'background 0.1s' }}
|
||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
|
||
onMouseLeave={e => e.currentTarget.style.background = 'none'}
|
||
onClick={() => handleExportSettings(f.key)}
|
||
>{f.icon} {f.label}</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<label
|
||
style={{ padding: '5px 10px', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--accent)', transition: 'all 0.15s', display: 'inline-block' }}
|
||
title={t('settings.importSettingsTitle')}
|
||
>
|
||
📥 {t('settings.importSettings')}
|
||
<input type="file" accept=".json,.txt,.md,.markdown,.docx,.pdf" style={{ display: 'none' }} onChange={handleImportSettings} />
|
||
</label>
|
||
<button
|
||
style={{ padding: '5px 10px', border: '1px solid rgba(229,62,62,0.3)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', fontSize: 12, color: '#e53e3e', transition: 'all 0.15s' }}
|
||
onClick={handleClearAllItems}
|
||
title={t('settings.clearAllTitle')}
|
||
>🗑️ {t('settings.clearAll')}</button>
|
||
</>)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 统计栏 */}
|
||
<div className="settings-stats">
|
||
{stats.map(s => (
|
||
<div
|
||
key={s.category}
|
||
className="stat-badge"
|
||
style={{ background: s.bg, color: s.color, borderColor: s.color + '33', cursor: 'pointer' }}
|
||
title={t('settings.statsTitle') + ': ' + s.label}
|
||
onClick={() => setExpandedCategory(s.category)}
|
||
>
|
||
<span>{s.icon}</span>
|
||
<span className="stat-count">{s.count}</span>
|
||
<span>{s.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||
{/* 左侧：搜索 + 树形导航 */}
|
||
<div style={{
|
||
width: 260, minWidth: 260, borderRight: '1px solid var(--border-light)',
|
||
display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)',
|
||
}}>
|
||
{/* 搜索框 */}
|
||
<div className="settings-search">
|
||
<input
|
||
className="settings-search-input"
|
||
type="text"
|
||
placeholder={t('settings.searchPlaceholder')}
|
||
value={searchQuery}
|
||
onChange={e => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
{/* 树 */}
|
||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||
<SettingsTree
|
||
nodes={visibleNodes}
|
||
selectedId={selectedNodeId}
|
||
onSelect={setSelectedNodeId}
|
||
onAdd={handleAddNode}
|
||
onDelete={handleDeleteNode}
|
||
onRename={handleRenameNode}
|
||
onToggleEnabled={handleToggleEnabled}
|
||
searchQuery={searchQuery}
|
||
expandedCategory={expandedCategory}
|
||
onExpandComplete={() => setExpandedCategory(null)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右侧：编辑器 */}
|
||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||
{showBookInfo ? (
|
||
<div style={{ padding: '20px 24px' }}>
|
||
<BookInfoForm data={selectedNode.content || {}} onChange={data => handleUpdateNode(selectedNode.id, { content: data })} />
|
||
</div>
|
||
) : (
|
||
<SettingsItemEditor
|
||
selectedNode={selectedNode}
|
||
allNodes={visibleNodes}
|
||
onUpdate={handleUpdateNode}
|
||
onSelect={setSelectedNodeId}
|
||
onAdd={handleAddNode}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{
|
||
conflictData && createPortal(
|
||
<SettingsConflictModal
|
||
conflicts={conflictData.conflicts}
|
||
noConflicts={conflictData.noConflicts}
|
||
onConfirm={handleConflictConfirm}
|
||
onClose={() => setConflictData(null)}
|
||
/>,
|
||
document.body // Render into document.body or a specific portal root
|
||
)
|
||
}
|
||
{
|
||
deleteConfirm && createPortal(
|
||
<DeleteConfirmModal
|
||
message={deleteConfirm.message}
|
||
onConfirm={deleteConfirm.onConfirm}
|
||
onCancel={deleteConfirm.onCancel}
|
||
/>,
|
||
document.body
|
||
)
|
||
}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const PROVIDERS = [
|
||
{ key: 'zhipu', label: '智谱AI (GLM)', baseUrl: 'https://open.bigmodel.cn/api/paas/v4', models: ['glm-4-flash', 'glm-4-plus', 'glm-4-long', 'glm-4'] },
|
||
{ key: 'deepseek', label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1', models: ['deepseek-chat', 'deepseek-reasoner'] },
|
||
{ key: 'openai', label: 'OpenAI', baseUrl: 'https://api.openai.com/v1', models: ['gpt-4o-mini', 'gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'] },
|
||
{ key: 'claude', label: 'Claude (Anthropic)', baseUrl: 'https://api.anthropic.com', models: ['claude-sonnet-4-20250514', 'claude-3-7-sonnet-20250219', 'claude-3-5-haiku-20241022'] },
|
||
{ key: 'gemini', label: 'Gemini (OpenAI兼容)', baseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai', models: ['gemini-2.0-flash', 'gemini-2.0-flash-lite', 'gemini-1.5-flash', 'gemini-1.5-pro'] },
|
||
{ key: 'gemini-native', label: 'Gemini（原生格式）', baseUrl: 'https://generativelanguage.googleapis.com/v1beta', models: ['gemini-2.0-flash', 'gemini-2.0-flash-lite', 'gemini-1.5-flash', 'gemini-1.5-pro'] },
|
||
{ key: 'openai-responses', label: 'OpenAI Responses', baseUrl: 'https://api.openai.com/v1', models: [] },
|
||
{ key: 'siliconflow', label: 'SiliconFlow (硅基流动)', baseUrl: 'https://api.siliconflow.cn/v1', models: ['deepseek-ai/DeepSeek-V3', 'Qwen/Qwen2.5-72B-Instruct', 'THUDM/glm-4-9b-chat'] },
|
||
{ key: 'volcengine', label: '火山引擎 (豆包)', baseUrl: 'https://ark.cn-beijing.volces.com/api/v3', models: [] },
|
||
{ key: 'moonshot', label: 'Moonshot (Kimi)', baseUrl: 'https://api.moonshot.cn/v1', models: ['moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'] },
|
||
{ key: 'custom', label: '自定义 (OpenAI兼容)', baseUrl: '', models: [] },
|
||
{ key: 'custom-gemini', label: '自定义 (Gemini格式)', baseUrl: '', models: [] },
|
||
{ key: 'custom-claude', label: '自定义 (Claude格式)', baseUrl: '', models: [] },
|
||
];
|
||
|
||
function PreferencesForm() {
|
||
const { language, setLanguage, visualTheme, setVisualTheme } = useAppStore();
|
||
const { t } = useI18n();
|
||
|
||
return (
|
||
<div style={{ maxWidth: 640 }}>
|
||
<p style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 24 }}>
|
||
{t('preferences.intro')}
|
||
</p>
|
||
|
||
<div style={{ marginBottom: 28 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 12 }}>{t('preferences.langLabel')}</label>
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
{['zh', 'en', 'ru'].map(lang => (
|
||
<button
|
||
key={lang}
|
||
style={{
|
||
flex: 1, padding: '12px 16px', border: language === lang ? '2px solid var(--accent)' : '1px solid var(--border-light)',
|
||
borderRadius: 'var(--radius-md)', background: language === lang ? 'var(--accent-light)' : 'var(--bg-primary)',
|
||
cursor: 'pointer', fontSize: 14, fontWeight: language === lang ? 600 : 400,
|
||
color: language === lang ? 'var(--accent)' : 'var(--text-primary)', transition: 'all 0.15s',
|
||
boxShadow: language === lang ? '0 2px 8px var(--accent-glow)' : 'var(--shadow-sm)'
|
||
}}
|
||
onClick={() => setLanguage(lang)}
|
||
>
|
||
{lang === 'zh' ? '🇨🇳 简体中文' : lang === 'en' ? '🇬🇧 English' : '🇷🇺 Русский'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 24 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 12 }}>{t('preferences.themeLabel')}</label>
|
||
<div style={{ display: 'flex', gap: 16 }}>
|
||
{[{ id: 'warm', label: t('preferences.themeWarm'), desc: t('preferences.themeWarmDesc') }, { id: 'modern', label: t('preferences.themeModern'), desc: t('preferences.themeModernDesc') }].map(theme => (
|
||
<button
|
||
key={theme.id}
|
||
style={{
|
||
flex: 1, padding: '20px 16px', border: visualTheme === theme.id ? '2px solid var(--accent)' : '1px solid var(--border-light)',
|
||
borderRadius: 'var(--radius-lg)', background: visualTheme === theme.id ? 'var(--accent-light)' : 'var(--bg-primary)',
|
||
cursor: 'pointer', textAlign: 'left', transition: 'all 0.15s cubic-bezier(0.16, 1, 0.3, 1)',
|
||
boxShadow: visualTheme === theme.id ? '0 6px 16px var(--accent-glow)' : 'var(--shadow-sm)'
|
||
}}
|
||
onMouseEnter={e => { if (visualTheme !== theme.id) e.currentTarget.style.transform = 'translateY(-2px)' }}
|
||
onMouseLeave={e => { if (visualTheme !== theme.id) e.currentTarget.style.transform = 'none' }}
|
||
onClick={() => {
|
||
setVisualTheme(theme.id);
|
||
document.documentElement.setAttribute('data-visual', theme.id);
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 15, fontWeight: 600, color: visualTheme === theme.id ? 'var(--accent)' : 'var(--text-primary)', marginBottom: 6 }}>
|
||
{theme.label}
|
||
</div>
|
||
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{theme.desc}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ApiConfigForm({ data, onChange }) {
|
||
const update = (field, value) => onChange({ ...data, [field]: value });
|
||
const [testStatus, setTestStatus] = useState(null);
|
||
const [fetchedModels, setFetchedModels] = useState(null);
|
||
const [fetchedEmbedModels, setFetchedEmbedModels] = useState(null);
|
||
const [rebuildStatus, setRebuildStatus] = useState(null); // null | 'loading' | {done, total, failed}
|
||
const [balanceInfo, setBalanceInfo] = useState(null); // null | 'loading' | { supported, balance, currency, ... } | { error }
|
||
const [savedProfiles, setSavedProfiles] = useState([]);
|
||
const [profileName, setProfileName] = useState('');
|
||
const [showSaveInput, setShowSaveInput] = useState(false);
|
||
const { t } = useI18n();
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const saved = localStorage.getItem('author-api-profiles');
|
||
if (saved) setSavedProfiles(JSON.parse(saved));
|
||
} catch { /* ignore */ }
|
||
}, []);
|
||
|
||
const persistProfiles = (profiles) => {
|
||
setSavedProfiles(profiles);
|
||
localStorage.setItem('author-api-profiles', JSON.stringify(profiles));
|
||
import('../lib/persistence').then(m => m.persistSet('author-api-profiles', profiles).catch(() => { }));
|
||
};
|
||
|
||
const handleSaveProfile = () => {
|
||
const name = profileName.trim();
|
||
if (!name) return;
|
||
const profile = { id: Date.now().toString(36), name, config: { ...data }, createdAt: new Date().toLocaleString('zh-CN') };
|
||
const updated = savedProfiles.filter(p => p.name !== name);
|
||
updated.unshift(profile);
|
||
persistProfiles(updated);
|
||
setProfileName('');
|
||
setShowSaveInput(false);
|
||
};
|
||
|
||
const handleLoadProfile = (profile) => { onChange({ ...profile.config }); setTestStatus(null); setFetchedModels(null); };
|
||
const handleDeleteProfile = (id) => { persistProfiles(savedProfiles.filter(p => p.id !== id)); };
|
||
|
||
const handleProviderChange = (providerKey) => {
|
||
const provider = PROVIDERS.find(p => p.key === providerKey);
|
||
if (provider) {
|
||
onChange({ ...data, provider: providerKey, baseUrl: providerKey === 'custom' ? '' : (provider.baseUrl || data.baseUrl), model: providerKey === 'custom' ? '' : (provider.models[0] || data.model) });
|
||
}
|
||
setTestStatus(null);
|
||
setFetchedModels(null);
|
||
setFetchedEmbedModels(null);
|
||
setBalanceInfo(null);
|
||
};
|
||
|
||
const handleTestConnection = async () => {
|
||
setTestStatus('loading');
|
||
try {
|
||
const res = await fetch('/api/ai/test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiConfig: data }) });
|
||
setTestStatus(await res.json());
|
||
} catch { setTestStatus({ success: false, error: t('apiConfig.networkError') }); }
|
||
};
|
||
|
||
const handleFetchModels = async () => {
|
||
setFetchedModels('loading');
|
||
try {
|
||
const res = await fetch('/api/ai/models', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: data.apiKey, baseUrl: data.baseUrl, provider: data.provider }) });
|
||
const result = await res.json();
|
||
if (result.error) { setFetchedModels(null); setTestStatus({ success: false, error: result.error }); }
|
||
else { setFetchedModels(result.models || []); }
|
||
} catch { setFetchedModels(null); setTestStatus({ success: false, error: t('apiConfig.fetchModelsFailed') }); }
|
||
};
|
||
|
||
const handleFetchEmbedModels = async () => {
|
||
setFetchedEmbedModels('loading');
|
||
try {
|
||
const embedKey = data.embedApiKey || data.apiKey;
|
||
const embedBase = data.embedBaseUrl || data.baseUrl;
|
||
const res = await fetch('/api/ai/models', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: embedKey, baseUrl: embedBase, provider: data.embedProvider, embedOnly: true }) });
|
||
const result = await res.json();
|
||
if (result.error) { setFetchedEmbedModels(null); setTestStatus({ success: false, error: t('apiConfig.embedApiPrefix') + result.error }); }
|
||
else { setFetchedEmbedModels(result.models || []); }
|
||
} catch { setFetchedEmbedModels(null); setTestStatus({ success: false, error: t('apiConfig.fetchEmbedModelsFailed') }); }
|
||
};
|
||
|
||
const handleRebuildEmbeddings = async () => {
|
||
setRebuildStatus({ done: 0, total: 0, failed: 0 });
|
||
try {
|
||
const result = await rebuildAllEmbeddings((done, total, failed) => {
|
||
setRebuildStatus({ done, total, failed });
|
||
});
|
||
setRebuildStatus({ ...result, finished: true });
|
||
setTimeout(() => setRebuildStatus(null), 5000);
|
||
} catch {
|
||
setRebuildStatus({ error: true });
|
||
setTimeout(() => setRebuildStatus(null), 3000);
|
||
}
|
||
};
|
||
|
||
const currentProvider = PROVIDERS.find(p => p.key === data.provider) || PROVIDERS[7];
|
||
const isCustom = ['custom', 'custom-gemini', 'custom-claude'].includes(data.provider);
|
||
|
||
// 余额查询
|
||
const handleQueryBalance = async () => {
|
||
setBalanceInfo('loading');
|
||
try {
|
||
const res = await fetch('/api/balance', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ provider: data.provider, apiKey: data.apiKey, baseUrl: data.baseUrl }),
|
||
});
|
||
const result = await res.json();
|
||
if (res.ok) {
|
||
setBalanceInfo(result);
|
||
} else {
|
||
setBalanceInfo({ error: result.error || '查询失败' });
|
||
}
|
||
} catch (e) {
|
||
setBalanceInfo({ error: e.message || '网络错误' });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
{savedProfiles.length > 0 && (
|
||
<div style={{ marginBottom: 16 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 6 }}>{t('apiConfig.savedProfiles')}</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||
{savedProfiles.map(p => (
|
||
<div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: 'var(--bg-secondary)', fontSize: 12 }}>
|
||
<button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--accent)', fontWeight: 500, fontSize: 12, padding: 0 }} onClick={() => handleLoadProfile(p)} title={`${p.config.provider} | ${p.config.model}`}>{p.name}</button>
|
||
<button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 11, padding: '0 2px', lineHeight: 1 }} onClick={() => handleDeleteProfile(p.id)} title={t('apiConfig.deleteProfile')}>✕</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<p style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 16 }}>{t('apiConfig.intro')}</p>
|
||
|
||
{/* 供应商选择 */}
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 8 }}>{t('apiConfig.provider')}</label>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
|
||
{PROVIDERS.map(p => (
|
||
<button key={p.key} style={{ padding: '8px 12px', border: data.provider === p.key ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-md)', background: data.provider === p.key ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 12, fontWeight: data.provider === p.key ? 600 : 400, color: data.provider === p.key ? 'var(--accent)' : 'var(--text-primary)', transition: 'all 0.15s' }} onClick={() => handleProviderChange(p.key)}>{p.label}</button>
|
||
))}
|
||
</div>
|
||
{data.provider === 'gemini-native' && (
|
||
<div style={{ marginTop: 8, padding: '8px 12px', background: 'var(--accent-light)', borderRadius: 'var(--radius-sm)', fontSize: 11, color: 'var(--accent)', lineHeight: 1.6 }}>
|
||
{t('apiConfig.geminiNativeHint')}
|
||
</div>
|
||
)}
|
||
{data.provider === 'openai-responses' && (
|
||
<div style={{ marginTop: 10 }}>
|
||
<label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 6 }}>思考等级 (Reasoning Effort)</label>
|
||
<div style={{ display: 'flex', gap: 6 }}>
|
||
{[
|
||
{ key: 'low', label: 'low' },
|
||
{ key: 'medium', label: 'medium' },
|
||
{ key: 'high', label: 'high' },
|
||
{ key: 'xhigh', label: 'xhigh' },
|
||
].map(opt => (
|
||
<button key={opt.key} style={{ padding: '5px 14px', border: (data.reasoningEffort || 'medium') === opt.key ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: (data.reasoningEffort || 'medium') === opt.key ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 12, fontWeight: (data.reasoningEffort || 'medium') === opt.key ? 600 : 400, color: (data.reasoningEffort || 'medium') === opt.key ? 'var(--accent)' : 'var(--text-primary)', transition: 'all 0.15s' }} onClick={() => update('reasoningEffort', opt.key)}>{opt.label}</button>
|
||
))}
|
||
</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>控制模型推理深度，默认 Medium，XHigh 质量最高但更慢</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<FieldInput label="API Key" value={data.apiKey} onChange={v => update('apiKey', v)} placeholder={t('apiConfig.apiKeyPlaceholder')} secret />
|
||
{data.apiKey && <div style={{ fontSize: 11, color: 'var(--success)', marginTop: -10, marginBottom: 10 }}>{t('apiConfig.apiKeyConfigured')}</div>}
|
||
|
||
{/* 余额查询卡片 */}
|
||
{data.apiKey && (
|
||
<div style={{
|
||
marginBottom: 14, padding: '10px 14px', borderRadius: 'var(--radius-md)',
|
||
background: 'var(--bg-secondary)', border: '1px solid var(--border-light)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
|
||
<span style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)' }}>💰 {t('apiConfig.balance') || 'API 余额'}</span>
|
||
<button
|
||
className="btn btn-ghost btn-sm"
|
||
style={{ fontSize: 11, padding: '3px 10px' }}
|
||
onClick={handleQueryBalance}
|
||
disabled={balanceInfo === 'loading'}
|
||
>
|
||
{balanceInfo === 'loading' ? (t('apiConfig.balanceQuerying') || '查询中...') : (t('apiConfig.balanceQuery') || '查询余额')}
|
||
</button>
|
||
</div>
|
||
{balanceInfo && balanceInfo !== 'loading' && (
|
||
<div style={{ marginTop: 8 }}>
|
||
{balanceInfo.error ? (
|
||
<div style={{ fontSize: 12, color: 'var(--error)' }}>❌ {balanceInfo.error}</div>
|
||
) : balanceInfo.supported === false ? (
|
||
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>⚠️ {balanceInfo.message || t('apiConfig.balanceNotSupported') || '当前供应商不支持余额查询'}</div>
|
||
) : (
|
||
<div>
|
||
<div style={{ fontSize: 20, fontWeight: 700, color: 'var(--accent)', lineHeight: 1.2 }}>
|
||
{balanceInfo.currency === 'CNY' ? '¥' : '$'}{balanceInfo.balance?.toFixed(2)}
|
||
<span style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>{balanceInfo.currency}</span>
|
||
</div>
|
||
{balanceInfo.detail && (
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 14px', marginTop: 6, fontSize: 11, color: 'var(--text-muted)' }}>
|
||
{balanceInfo.detail.granted != null && balanceInfo.detail.granted > 0 && <span>赠送: {balanceInfo.detail.granted.toFixed(2)}</span>}
|
||
{balanceInfo.detail.topped_up != null && balanceInfo.detail.topped_up > 0 && <span>充值: {balanceInfo.detail.topped_up.toFixed(2)}</span>}
|
||
{balanceInfo.detail.used != null && <span>已用: {balanceInfo.detail.used.toFixed(2)}</span>}
|
||
{balanceInfo.detail.total_limit != null && <span>额度: {balanceInfo.detail.total_limit.toFixed(2)}</span>}
|
||
{balanceInfo.detail.remaining != null && balanceInfo.detail.total_limit != null && <span>剩余: {balanceInfo.detail.remaining.toFixed(2)}</span>}
|
||
</div>
|
||
)}
|
||
{balanceInfo.source && <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 4 }}>via {balanceInfo.source}</div>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<FieldInput label={isCustom ? t('apiConfig.apiAddress') : t('apiConfig.apiAddressAuto')} value={data.baseUrl} onChange={v => update('baseUrl', v)} placeholder={t('apiConfig.apiAddressPlaceholder')} />
|
||
|
||
{/* 模型选择 */}
|
||
{currentProvider.models.length > 0 && !isCustom ? (
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.model')}
|
||
{data.apiKey && (
|
||
<button style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }} onClick={handleFetchModels} disabled={fetchedModels === 'loading'}>
|
||
{fetchedModels === 'loading' ? t('apiConfig.fetching') : t('apiConfig.fetchModels')}
|
||
</button>
|
||
)}
|
||
</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, ...(Array.isArray(fetchedModels) && fetchedModels.length > 20 ? { maxHeight: 200, overflowY: 'auto', padding: 4, border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)' } : {}) }}>
|
||
{(Array.isArray(fetchedModels) ? fetchedModels.map(m => m.id) : currentProvider.models).map(m => (
|
||
<button key={m} style={{ padding: '5px 12px', border: data.model === m ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: data.model === m ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 12, color: data.model === m ? 'var(--accent)' : 'var(--text-primary)', fontFamily: 'monospace' }} onClick={() => update('model', m)}>{m}</button>
|
||
))}
|
||
</div>
|
||
{Array.isArray(fetchedModels) && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>{t('apiConfig.fetchedCount').replace('{count}', fetchedModels.length)}</div>}
|
||
</div>
|
||
) : (
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.modelName')}
|
||
{data.apiKey && data.baseUrl && (
|
||
<button style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }} onClick={handleFetchModels} disabled={fetchedModels === 'loading'}>
|
||
{fetchedModels === 'loading' ? t('apiConfig.fetching') : t('apiConfig.fetchModels')}
|
||
</button>
|
||
)}
|
||
</label>
|
||
<input className="modal-input" style={{ marginBottom: 0 }} value={data.model || ''} onChange={e => update('model', e.target.value)} placeholder="例如：gpt-4o-mini" />
|
||
{Array.isArray(fetchedModels) && fetchedModels.length > 0 && (
|
||
<>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', margin: '6px 0 4px' }}>{t('apiConfig.fetchedCountClick').replace('{count}', fetchedModels.length)}</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||
{fetchedModels.map(m => (
|
||
<button key={m.id} style={{ padding: '4px 10px', border: data.model === m.id ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: data.model === m.id ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 11, color: data.model === m.id ? 'var(--accent)' : 'var(--text-primary)', fontFamily: 'monospace' }} onClick={() => update('model', m.id)}>{m.id}</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 高级模型参数 */}
|
||
<div style={{ marginTop: 24, marginBottom: 14, paddingTop: 16, borderTop: '1px solid var(--border-light)' }}>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={data.useAdvancedParams || false}
|
||
onChange={e => update('useAdvancedParams', e.target.checked)}
|
||
style={{ margin: 0 }}
|
||
/>
|
||
{t('apiConfig.advancedParamsTitle')}
|
||
</label>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4, paddingLeft: 22 }}>
|
||
{t('apiConfig.advancedParamsDesc')}
|
||
</div>
|
||
</div>
|
||
|
||
{data.useAdvancedParams && (
|
||
<div style={{ padding: '16px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)', marginBottom: 20 }}>
|
||
{/* Temperature */}
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.temperature')}
|
||
</label>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<input
|
||
type="range" min="0" max="2" step="0.05"
|
||
value={data.temperature ?? 1}
|
||
onChange={e => update('temperature', parseFloat(e.target.value))}
|
||
style={{ flex: 1, accentColor: 'var(--accent)' }}
|
||
/>
|
||
<input
|
||
type="number" min="0" max="2" step="0.05"
|
||
className="modal-input"
|
||
style={{ width: 72, margin: 0, padding: '5px 8px', fontSize: 13, textAlign: 'center' }}
|
||
value={data.temperature ?? 1}
|
||
onChange={e => update('temperature', parseFloat(e.target.value) || 0)}
|
||
/>
|
||
</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('apiConfig.temperatureDesc')}</div>
|
||
</div>
|
||
|
||
{/* Top P */}
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.topP')}
|
||
</label>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<input
|
||
type="range" min="0" max="1" step="0.05"
|
||
value={data.topP ?? 0.95}
|
||
onChange={e => update('topP', parseFloat(e.target.value))}
|
||
style={{ flex: 1, accentColor: 'var(--accent)' }}
|
||
/>
|
||
<input
|
||
type="number" min="0" max="1" step="0.05"
|
||
className="modal-input"
|
||
style={{ width: 72, margin: 0, padding: '5px 8px', fontSize: 13, textAlign: 'center' }}
|
||
value={data.topP ?? 0.95}
|
||
onChange={e => update('topP', parseFloat(e.target.value) || 0)}
|
||
/>
|
||
</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('apiConfig.topPDesc')}</div>
|
||
</div>
|
||
|
||
{/* 最大上下文长度 */}
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.maxContextLength')}
|
||
</label>
|
||
<input
|
||
type="number" min="1024" step="1024"
|
||
className="modal-input"
|
||
style={{ margin: 0, width: 160, padding: '5px 8px', fontSize: 13 }}
|
||
value={data.maxContextLength ?? 200000}
|
||
onChange={e => update('maxContextLength', parseInt(e.target.value) || 4096)}
|
||
/>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('apiConfig.maxContextLengthDesc')}</div>
|
||
</div>
|
||
|
||
{/* 最大输出 Token — Responses API 不适用 */}
|
||
{data.provider !== 'openai-responses' && (
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.maxOutputTokens')}
|
||
</label>
|
||
<input
|
||
type="number" min="256" step="256"
|
||
className="modal-input"
|
||
style={{ margin: 0, width: 160, padding: '5px 8px', fontSize: 13 }}
|
||
value={data.maxOutputTokens ?? 65536}
|
||
onChange={e => update('maxOutputTokens', parseInt(e.target.value) || 4096)}
|
||
/>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('apiConfig.maxOutputTokensDesc')}</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 思考层级 — Responses API 有自己的内置思考层级 */}
|
||
{data.provider !== 'openai-responses' && (
|
||
<div style={{ marginBottom: 0 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.reasoningEffort')}
|
||
</label>
|
||
<select
|
||
className="modal-input"
|
||
style={{ margin: 0, width: 160, padding: '5px 8px', fontSize: 13 }}
|
||
value={data.reasoningEffort || 'auto'}
|
||
onChange={e => update('reasoningEffort', e.target.value)}
|
||
>
|
||
<option value="auto">{t('apiConfig.reasoningAuto')}</option>
|
||
<option value="low">Low</option>
|
||
<option value="medium">Medium</option>
|
||
<option value="high">High</option>
|
||
</select>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('apiConfig.reasoningEffortDesc')}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 独立 Embedding 配置 */}
|
||
<div style={{ marginTop: 24, marginBottom: 14, paddingTop: 16, borderTop: '1px solid var(--border-light)' }}>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={data.useCustomEmbed || false}
|
||
onChange={e => update('useCustomEmbed', e.target.checked)}
|
||
style={{ margin: 0 }}
|
||
/>
|
||
{t('apiConfig.embedTitle')}
|
||
</label>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4, paddingLeft: 22 }}>
|
||
{t('apiConfig.embedDesc')}
|
||
</div>
|
||
</div>
|
||
|
||
{data.useCustomEmbed && (
|
||
<div style={{ padding: '16px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)', marginBottom: 20 }}>
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 8 }}>{t('apiConfig.embedProvider')}</label>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
|
||
{PROVIDERS.filter(p => !['deepseek', 'moonshot', 'siliconflow', 'openai'].includes(p.key)).map(p => (
|
||
<button key={p.key} style={{ padding: '8px 12px', border: data.embedProvider === p.key ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-md)', background: data.embedProvider === p.key ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 12, fontWeight: data.embedProvider === p.key ? 600 : 400, color: data.embedProvider === p.key ? 'var(--accent)' : 'var(--text-primary)', transition: 'all 0.15s' }} onClick={() => onChange({ ...data, embedProvider: p.key, embedBaseUrl: p.key === 'custom' ? '' : (p.baseUrl || data.embedBaseUrl), embedModel: p.key === 'custom' ? '' : (p.key === 'zhipu' ? 'embedding-3' : 'text-embedding-v3-small') })}>{p.label}</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<FieldInput label="Embedding API Key" value={data.embedApiKey} onChange={v => update('embedApiKey', v)} placeholder={t('apiConfig.embedApiKeyPlaceholder')} secret />
|
||
<FieldInput label={data.embedProvider === 'custom' ? t('apiConfig.embedApiAddress') : t('apiConfig.embedApiAddressAuto')} value={data.embedBaseUrl} onChange={v => update('embedBaseUrl', v)} placeholder="https://api.example.com/v1" />
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>
|
||
{t('apiConfig.embedModel')}
|
||
{data.embedApiKey || data.apiKey ? (
|
||
<button style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }} onClick={handleFetchEmbedModels} disabled={fetchedEmbedModels === 'loading'}>
|
||
{fetchedEmbedModels === 'loading' ? t('apiConfig.fetching') : t('apiConfig.fetchEmbedModels')}
|
||
</button>
|
||
) : null}
|
||
</label>
|
||
<input className="modal-input" style={{ marginBottom: 0 }} value={data.embedModel || ''} onChange={e => update('embedModel', e.target.value)} placeholder="例如：text-embedding-v3-small" />
|
||
{Array.isArray(fetchedEmbedModels) && fetchedEmbedModels.length > 0 && (
|
||
<>
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', margin: '6px 0 4px' }}>{t('apiConfig.fetchedCountClick').replace('{count}', fetchedEmbedModels.length)}</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 120, overflowY: 'auto', padding: '4px', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)' }}>
|
||
{fetchedEmbedModels.map(m => (
|
||
<button key={m.id} style={{ padding: '4px 10px', border: data.embedModel === m.id ? '2px solid var(--accent)' : '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', background: data.embedModel === m.id ? 'var(--accent-light)' : 'var(--bg-primary)', cursor: 'pointer', fontSize: 11, color: data.embedModel === m.id ? 'var(--accent)' : 'var(--text-primary)', fontFamily: 'monospace', flexShrink: 0 }} onClick={() => update('embedModel', m.id)}>{m.id}</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 重建向量按钮 */}
|
||
<div style={{ marginTop: 8 }}>
|
||
<button
|
||
style={{ padding: '8px 16px', border: '1px solid var(--accent)', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', cursor: rebuildStatus && !rebuildStatus.finished ? 'wait' : 'pointer', fontSize: 12, color: 'var(--accent)', fontWeight: 500, opacity: rebuildStatus && !rebuildStatus.finished ? 0.7 : 1 }}
|
||
onClick={handleRebuildEmbeddings}
|
||
disabled={rebuildStatus && !rebuildStatus.finished && !rebuildStatus.error}
|
||
>
|
||
{rebuildStatus && !rebuildStatus.finished && !rebuildStatus.error
|
||
? `向量化中... ${rebuildStatus.done}/${rebuildStatus.total}`
|
||
: '🔄 重建所有设定向量'}
|
||
</button>
|
||
{rebuildStatus?.finished && (
|
||
<span style={{ marginLeft: 8, fontSize: 11, color: rebuildStatus.failed > 0 ? 'var(--warning)' : 'var(--success)' }}>
|
||
✓ 完成！{rebuildStatus.done - rebuildStatus.failed}/{rebuildStatus.total} 成功{rebuildStatus.failed > 0 ? `，${rebuildStatus.failed} 失败` : ''}
|
||
</span>
|
||
)}
|
||
{rebuildStatus?.error && (
|
||
<span style={{ marginLeft: 8, fontSize: 11, color: 'var(--error)' }}>重建失败</span>
|
||
)}
|
||
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>首次开启或更换嵌入模型后，需要重建向量才能使用 RAG 智能检索</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 测试连接 */}
|
||
{data.apiKey && (
|
||
<div style={{ marginBottom: 14 }}>
|
||
<button style={{ padding: '8px 16px', border: '1px solid var(--accent)', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', cursor: testStatus === 'loading' ? 'wait' : 'pointer', fontSize: 13, color: 'var(--accent)', fontWeight: 500, transition: 'all 0.15s', opacity: testStatus === 'loading' ? 0.7 : 1 }} onClick={handleTestConnection} disabled={testStatus === 'loading'}>
|
||
{testStatus === 'loading' ? t('apiConfig.testLoading') : t('apiConfig.testBtn')}
|
||
</button>
|
||
{testStatus && testStatus !== 'loading' && (
|
||
<div style={{ marginTop: 8, padding: '8px 12px', borderRadius: 'var(--radius-sm)', fontSize: 12, lineHeight: 1.6, background: testStatus.success ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)', color: testStatus.success ? 'var(--success)' : 'var(--error)', border: `1px solid ${testStatus.success ? 'rgba(34,197,94,0.3)' : 'rgba(239,68,68,0.3)'}` }}>
|
||
{testStatus.success ? <>{testStatus.message}<br />{testStatus.reply && <span>{t('apiConfig.testReply')}{testStatus.reply}</span>}</> : <>❌ {testStatus.error}</>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 保存配置 */}
|
||
{data.apiKey && (
|
||
<div style={{ marginBottom: 14 }}>
|
||
{!showSaveInput ? (
|
||
<button style={{ padding: '8px 16px', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', cursor: 'pointer', fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500 }} onClick={() => { const pl = PROVIDERS.find(p => p.key === data.provider)?.label || data.provider; setProfileName(`${pl} - ${data.model || t('common.confirm')}`); setShowSaveInput(true); }}>
|
||
{t('apiConfig.saveProfileBtn')}
|
||
</button>
|
||
) : (
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<input className="modal-input" style={{ margin: 0, flex: 1, padding: '7px 10px', fontSize: 13 }} value={profileName} onChange={e => setProfileName(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleSaveProfile()} placeholder={t('apiConfig.saveProfilePlaceholder')} autoFocus />
|
||
<button className="btn btn-primary btn-sm" style={{ padding: '7px 14px', whiteSpace: 'nowrap' }} onClick={handleSaveProfile}>{t('apiConfig.saveBtn')}</button>
|
||
<button className="btn btn-ghost btn-sm" style={{ padding: '7px 10px' }} onClick={() => setShowSaveInput(false)}>{t('common.cancel')}</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ marginTop: 16, padding: '12px 14px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)', fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.8 }}>
|
||
<strong>{t('apiConfig.howToGetKey')}</strong><br />
|
||
• {t('apiConfig.keyGuide').split('\n').map((line, i) => <span key={i}>{line.replace(/^• /, '')}<br /></span>)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ==================== 表单组件 ====================
|
||
|
||
function FieldInput({ label, value, onChange, placeholder, multiline, rows, secret }) {
|
||
const [showSecret, setShowSecret] = useState(false);
|
||
const Component = multiline ? 'textarea' : 'input';
|
||
return (
|
||
<div style={{ marginBottom: 14 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 5 }}>{label}</label>
|
||
<div style={{ position: 'relative' }}>
|
||
<Component
|
||
className="modal-input"
|
||
style={{ marginBottom: 0, ...(multiline ? { resize: 'vertical', minHeight: `${(rows || 3) * 22}px` } : {}), ...(secret ? { paddingRight: 36 } : {}) }}
|
||
{...(!multiline ? { type: secret && !showSecret ? 'password' : 'text' } : {})}
|
||
value={value || ''}
|
||
onChange={e => onChange(e.target.value)}
|
||
placeholder={placeholder}
|
||
rows={rows || 3}
|
||
/>
|
||
{secret && value && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowSecret(!showSecret)}
|
||
style={{
|
||
position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
|
||
background: 'none', border: 'none', cursor: 'pointer',
|
||
fontSize: 14, color: 'var(--text-muted)', padding: '2px 4px',
|
||
opacity: 0.7, lineHeight: 1,
|
||
}}
|
||
title={showSecret ? '隐藏' : '显示'}
|
||
>
|
||
{showSecret ? '🙈' : '👁'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BookInfoForm({ data, onChange }) {
|
||
const update = (field, value) => onChange({ ...data, [field]: value });
|
||
const { t } = useI18n();
|
||
return (
|
||
<div>
|
||
<p style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 16 }}>{t('bookInfo.intro')}</p>
|
||
<FieldInput label={t('bookInfo.title')} value={data.title} onChange={v => update('title', v)} placeholder={t('bookInfo.titlePlaceholder')} />
|
||
<FieldInput label={t('bookInfo.genre')} value={data.genre} onChange={v => update('genre', v)} placeholder={t('bookInfo.genrePlaceholder')} />
|
||
<FieldInput label={t('bookInfo.synopsis')} value={data.synopsis} onChange={v => update('synopsis', v)} placeholder={t('bookInfo.synopsisPlaceholder')} multiline rows={3} />
|
||
<FieldInput label={t('bookInfo.style')} value={data.style} onChange={v => update('style', v)} placeholder={t('bookInfo.stylePlaceholder')} />
|
||
<FieldInput label={t('bookInfo.tone')} value={data.tone} onChange={v => update('tone', v)} placeholder={t('bookInfo.tonePlaceholder')} />
|
||
<FieldInput label={t('bookInfo.pov')} value={data.pov} onChange={v => update('pov', v)} placeholder={t('bookInfo.povPlaceholder')} />
|
||
<FieldInput label={t('bookInfo.targetAudience')} value={data.targetAudience} onChange={v => update('targetAudience', v)} placeholder={t('bookInfo.targetAudiencePlaceholder')} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DeleteConfirmModal({ message, onConfirm, onCancel }) {
|
||
const [skipToday, setSkipToday] = useState(false);
|
||
const [neverRemind, setNeverRemind] = useState(false);
|
||
const { t } = useI18n();
|
||
|
||
const handleConfirm = () => {
|
||
try {
|
||
if (neverRemind) {
|
||
localStorage.setItem('author-delete-never-remind', 'true');
|
||
} else if (skipToday) {
|
||
localStorage.setItem('author-delete-skip-today', new Date().toISOString().slice(0, 10));
|
||
}
|
||
} catch { /* ignore */ }
|
||
onConfirm();
|
||
};
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'fixed', inset: 0, zIndex: 99999,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(4px)',
|
||
}}
|
||
onClick={onCancel}
|
||
>
|
||
<div
|
||
style={{
|
||
background: 'var(--bg-primary)', border: '1px solid var(--border-light)',
|
||
borderRadius: 'var(--radius-lg, 12px)', padding: '24px 28px',
|
||
minWidth: 340, maxWidth: 440,
|
||
boxShadow: '0 12px 40px rgba(0,0,0,0.25)',
|
||
animation: 'scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
|
||
}}
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
{/* 标题 */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
|
||
<span style={{ fontSize: 20 }}>⚠️</span>
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>
|
||
{t('settings.deleteConfirmTitle')}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 消息 */}
|
||
<p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '0 0 20px' }}>
|
||
{message}
|
||
</p>
|
||
|
||
{/* 复选框 */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: 'var(--text-secondary)' }}>
|
||
<input
|
||
type="checkbox" checked={skipToday} disabled={neverRemind}
|
||
onChange={e => setSkipToday(e.target.checked)}
|
||
style={{ accentColor: 'var(--accent)', width: 15, height: 15, cursor: 'pointer' }}
|
||
/>
|
||
{t('settings.dontRemindToday')}
|
||
</label>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: 'var(--text-secondary)' }}>
|
||
<input
|
||
type="checkbox" checked={neverRemind}
|
||
onChange={e => { setNeverRemind(e.target.checked); if (e.target.checked) setSkipToday(false); }}
|
||
style={{ accentColor: 'var(--accent)', width: 15, height: 15, cursor: 'pointer' }}
|
||
/>
|
||
{t('settings.dontRemindForever')}
|
||
</label>
|
||
</div>
|
||
|
||
{/* 按钮 */}
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
|
||
<button
|
||
onClick={onCancel}
|
||
style={{
|
||
padding: '8px 20px', border: '1px solid var(--border-light)',
|
||
borderRadius: 'var(--radius-md, 8px)', background: 'var(--bg-secondary)',
|
||
cursor: 'pointer', fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500,
|
||
transition: 'all 0.15s',
|
||
}}
|
||
>
|
||
{t('common.cancel')}
|
||
</button>
|
||
<button
|
||
onClick={handleConfirm}
|
||
style={{
|
||
padding: '8px 20px', border: 'none',
|
||
borderRadius: 'var(--radius-md, 8px)', background: '#e53e3e',
|
||
cursor: 'pointer', fontSize: 13, color: '#fff', fontWeight: 600,
|
||
transition: 'all 0.15s',
|
||
boxShadow: '0 2px 8px rgba(229,62,62,0.3)',
|
||
}}
|
||
>
|
||
{t('common.delete')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|