纯会话页面添加退出登录功能
- ChatHeader 新增可选 onLogout 回调,传入时在更多菜单中显示退出登录项 - ChatPagePure 中集成 useAuth 的 logout 方法,点击后确认并跳转登录页 - 不影响原有聊天页(未传 onLogout 时不显示)main
parent
1b4812acae
commit
7cf5e1406f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue