style:更新所有Modal弹窗样式使用自定义风格

This commit is contained in:
xiamuceer
2025-12-30 10:05:34 +08:00
parent cb036deb15
commit 19665e9938
7 changed files with 42 additions and 17 deletions
@@ -28,6 +28,7 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
}) => { }) => {
const [applying, setApplying] = useState(false); const [applying, setApplying] = useState(false);
const [viewMode, setViewMode] = useState<'split' | 'unified'>('split'); const [viewMode, setViewMode] = useState<'split' | 'unified'>('split');
const [modal, contextHolder] = Modal.useModal();
const originalWordCount = originalContent.length; const originalWordCount = originalContent.length;
const wordCountDiff = wordCount - originalWordCount; const wordCountDiff = wordCount - originalWordCount;
@@ -85,9 +86,10 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
}; };
const handleDiscard = () => { const handleDiscard = () => {
Modal.confirm({ modal.confirm({
title: '确认放弃', title: '确认放弃',
content: '确定要放弃新生成的内容吗?此操作不可恢复。', content: '确定要放弃新生成的内容吗?此操作不可恢复。',
centered: true,
okText: '确定放弃', okText: '确定放弃',
cancelText: '取消', cancelText: '取消',
okButtonProps: { danger: true }, okButtonProps: { danger: true },
@@ -100,7 +102,9 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
}; };
return ( return (
<Modal <>
{contextHolder}
<Modal
title={`内容对比 - ${chapterTitle}`} title={`内容对比 - ${chapterTitle}`}
open={visible} open={visible}
onCancel={onClose} onCancel={onClose}
@@ -215,7 +219,8 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
}} }}
/> />
</div> </div>
</Modal> </Modal>
</>
); );
}; };
@@ -55,6 +55,7 @@ const ChapterRegenerationModal: React.FC<ChapterRegenerationModalProps> = ({
hasAnalysis hasAnalysis
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [modal, contextHolder] = Modal.useModal();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [status, setStatus] = useState<'idle' | 'generating' | 'success' | 'error'>('idle'); const [status, setStatus] = useState<'idle' | 'generating' | 'success' | 'error'>('idle');
@@ -202,9 +203,10 @@ const ChapterRegenerationModal: React.FC<ChapterRegenerationModalProps> = ({
const handleCancel = () => { const handleCancel = () => {
if (loading) { if (loading) {
Modal.confirm({ modal.confirm({
title: '确认取消', title: '确认取消',
content: '生成正在进行中,确定要取消吗?', content: '生成正在进行中,确定要取消吗?',
centered: true,
onOk: () => { onOk: () => {
setLoading(false); setLoading(false);
setStatus('idle'); setStatus('idle');
@@ -217,7 +219,9 @@ const ChapterRegenerationModal: React.FC<ChapterRegenerationModalProps> = ({
}; };
return ( return (
<Modal <>
{contextHolder}
<Modal
title={`重新生成章节 - 第${chapterNumber}章:${chapterTitle}`} title={`重新生成章节 - 第${chapterNumber}章:${chapterTitle}`}
open={visible} open={visible}
onCancel={handleCancel} onCancel={handleCancel}
@@ -386,7 +390,8 @@ const ChapterRegenerationModal: React.FC<ChapterRegenerationModalProps> = ({
message={`正在重新生成中... (已生成 ${wordCount} 字)`} message={`正在重新生成中... (已生成 ${wordCount} 字)`}
title="重新生成章节" title="重新生成章节"
/> />
</Modal> </Modal>
</>
); );
}; };
@@ -57,6 +57,7 @@ export const CharacterCareerCard: React.FC<Props> = ({
const [mainForm] = Form.useForm(); const [mainForm] = Form.useForm();
const [subForm] = Form.useForm(); const [subForm] = Form.useForm();
const [progressForm] = Form.useForm(); const [progressForm] = Form.useForm();
const [modal, contextHolder] = Modal.useModal();
useEffect(() => { useEffect(() => {
fetchCharacterCareers(); fetchCharacterCareers();
@@ -149,9 +150,10 @@ export const CharacterCareerCard: React.FC<Props> = ({
}; };
const handleRemoveSubCareer = (careerId: string) => { const handleRemoveSubCareer = (careerId: string) => {
Modal.confirm({ modal.confirm({
title: '确认删除', title: '确认删除',
content: '确定要移除这个副职业吗?', content: '确定要移除这个副职业吗?',
centered: true,
onOk: async () => { onOk: async () => {
try { try {
await axios.delete( await axios.delete(
@@ -237,6 +239,7 @@ export const CharacterCareerCard: React.FC<Props> = ({
return ( return (
<> <>
{contextHolder}
<Card <Card
title={ title={
<Space> <Space>
+8 -3
View File
@@ -39,6 +39,7 @@ export default function Careers() {
const [editingCareer, setEditingCareer] = useState<Career | null>(null); const [editingCareer, setEditingCareer] = useState<Career | null>(null);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [aiForm] = Form.useForm(); const [aiForm] = Form.useForm();
const [modal, contextHolder] = Modal.useModal();
// AI生成状态 // AI生成状态
const [aiGenerating, setAiGenerating] = useState(false); const [aiGenerating, setAiGenerating] = useState(false);
@@ -129,9 +130,10 @@ export default function Careers() {
}; };
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
Modal.confirm({ modal.confirm({
title: '确认删除', title: '确认删除',
content: '确定要删除这个职业吗?如果有角色使用了该职业,将无法删除。', content: '确定要删除这个职业吗?如果有角色使用了该职业,将无法删除。',
centered: true,
onOk: async () => { onOk: async () => {
try { try {
await api.delete(`/careers/${id}`); await api.delete(`/careers/${id}`);
@@ -264,7 +266,9 @@ export default function Careers() {
]; ];
return ( return (
<div style={{ <>
{contextHolder}
<div style={{
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -423,6 +427,7 @@ export default function Careers() {
title="AI生成新职业中..." title="AI生成新职业中..."
onCancel={() => setAiGenerating(false)} onCancel={() => setAiGenerating(false)}
/> />
</div> </div>
</>
); );
} }
+2 -1
View File
@@ -113,9 +113,10 @@ export default function MCPPluginsPage() {
}; };
const handleDelete = (plugin: MCPPlugin) => { const handleDelete = (plugin: MCPPlugin) => {
Modal.confirm({ modal.confirm({
title: '删除插件', title: '删除插件',
content: `确定要删除插件 "${plugin.display_name || plugin.plugin_name}" 吗?`, content: `确定要删除插件 "${plugin.display_name || plugin.plugin_name}" 吗?`,
centered: true,
okText: '确定', okText: '确定',
cancelText: '取消', cancelText: '取消',
okType: 'danger', okType: 'danger',
+8 -4
View File
@@ -43,6 +43,7 @@ export default function Relationships() {
const [isEditMode, setIsEditMode] = useState(false); const [isEditMode, setIsEditMode] = useState(false);
const [editingRelationship, setEditingRelationship] = useState<Relationship | null>(null); const [editingRelationship, setEditingRelationship] = useState<Relationship | null>(null);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [modal, contextHolder] = Modal.useModal();
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@@ -149,7 +150,7 @@ export default function Relationships() {
}; };
const handleDeleteRelationship = async (id: string) => { const handleDeleteRelationship = async (id: string) => {
Modal.confirm({ modal.confirm({
title: '确认删除', title: '确认删除',
content: '确定要删除这条关系吗?', content: '确定要删除这条关系吗?',
centered: true, centered: true,
@@ -304,8 +305,10 @@ export default function Relationships() {
}; };
return ( return (
<div> <>
<Card {contextHolder}
<div>
<Card
title={ title={
<Space wrap> <Space wrap>
<ApartmentOutlined /> <ApartmentOutlined />
@@ -522,6 +525,7 @@ export default function Relationships() {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
</div> </div>
</>
); );
} }
+4 -2
View File
@@ -107,9 +107,10 @@ export default function SettingsPage() {
}; };
const handleReset = () => { const handleReset = () => {
Modal.confirm({ modal.confirm({
title: '重置设置', title: '重置设置',
content: '确定要重置为默认值吗?', content: '确定要重置为默认值吗?',
centered: true,
okText: '确定', okText: '确定',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
@@ -127,9 +128,10 @@ export default function SettingsPage() {
}; };
const handleDelete = () => { const handleDelete = () => {
Modal.confirm({ modal.confirm({
title: '删除设置', title: '删除设置',
content: '确定要删除所有设置吗?此操作不可恢复。', content: '确定要删除所有设置吗?此操作不可恢复。',
centered: true,
okText: '确定', okText: '确定',
cancelText: '取消', cancelText: '取消',
okType: 'danger', okType: 'danger',