纯会话页面添加退出登录功能

- ChatHeader 新增可选 onLogout 回调,传入时在更多菜单中显示退出登录项
- ChatPagePure 中集成 useAuth 的 logout 方法,点击后确认并跳转登录页
- 不影响原有聊天页(未传 onLogout 时不显示)
main
sp mac bookpro 2605 2026-07-31 16:37:49 +08:00
parent 1b4812acae
commit 7cf5e1406f
2 changed files with 30 additions and 4 deletions

View File

@ -1,5 +1,5 @@
import { useEffect, useState, useCallback, useRef } from 'react';
import { App as AntApp, Empty } from 'antd';
import { App as AntApp, Empty, Modal } from 'antd';
import type { ChatPageLogicOutput } from './ChatPageLogic';
import { markdownToPlainText } from './utils/copy';
import { useChatPageLogic } from './ChatPageLogic';
@ -9,6 +9,7 @@ import ChatHeader from './components/ChatHeader';
import ChatInput from './components/ChatInput';
import ChatOutline from './components/ChatOutline';
import type { ModelOverrides } from '../../api';
import { useAuth } from '../../store/auth';
import './styles/chat-page-pure.css';
/**
@ -19,6 +20,7 @@ import './styles/chat-page-pure.css';
export default function ChatPagePure() {
const logic = useChatPageLogic();
const { message } = AntApp.useApp();
const { logout } = useAuth();
const [outlineCollapsed, setOutlineCollapsed] = useState(true);
const isAutoScrolling = useRef(false);
@ -70,6 +72,17 @@ export default function ChatPagePure() {
}
}, [setHighlightId]);
// 退出登录
const handleLogout = () => {
Modal.confirm({
title: '确定要退出登录吗?',
onOk: async () => {
await logout();
window.location.href = '/login';
},
});
};
return (
<div className="chat-pure-shell">
<section className="chat-main">
@ -89,6 +102,7 @@ export default function ChatPagePure() {
onOpenMcp={() => setMcpDrawerOpen(true)}
onManageAgent={() => navigate(`/agents/${id}`)}
onClear={sender.handleClear}
onLogout={handleLogout}
/>
<ChatBody

View File

@ -1,4 +1,4 @@
import { ApiOutlined, DeleteOutlined, EditOutlined, SettingOutlined, EllipsisOutlined, HistoryOutlined } from '@ant-design/icons';
import { ApiOutlined, DeleteOutlined, EditOutlined, SettingOutlined, EllipsisOutlined, HistoryOutlined, LogoutOutlined } from '@ant-design/icons';
import { Button, Dropdown, Modal, Switch } from 'antd';
import type { Agent } from '../../../api';
import './ChatHeader.css';
@ -37,8 +37,9 @@ export default function ChatHeader(props: {
onOpenMcp: () => void;
onManageAgent: () => void;
onClear: () => void;
onLogout?: () => void;
}) {
const { agent, useStream, setUseStream, onOpenHistory, onOpenParams, onOpenMcp, onManageAgent, onClear } = props;
const { agent, useStream, setUseStream, onOpenHistory, onOpenParams, onOpenMcp, onManageAgent, onClear, onLogout } = props;
const modelText = formatAgentModel(agent.model);
return (
@ -86,7 +87,18 @@ export default function ChatHeader(props: {
onClick: () => {
Modal.confirm({ title: '清空当前会话所有消息?', onOk: onClear });
}
}
},
...(onLogout
? [
{ type: 'divider' as const },
{
key: 'logout',
label: '退出登录',
icon: <LogoutOutlined />,
onClick: onLogout,
}
]
: [])
]
}}
placement="bottomRight"