纯会话页面添加退出登录功能
- ChatHeader 新增可选 onLogout 回调,传入时在更多菜单中显示退出登录项 - ChatPagePure 中集成 useAuth 的 logout 方法,点击后确认并跳转登录页 - 不影响原有聊天页(未传 onLogout 时不显示)main
parent
1b4812acae
commit
7cf5e1406f
|
|
@ -1,5 +1,5 @@
|
||||||
import { useEffect, useState, useCallback, useRef } from 'react';
|
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 type { ChatPageLogicOutput } from './ChatPageLogic';
|
||||||
import { markdownToPlainText } from './utils/copy';
|
import { markdownToPlainText } from './utils/copy';
|
||||||
import { useChatPageLogic } from './ChatPageLogic';
|
import { useChatPageLogic } from './ChatPageLogic';
|
||||||
|
|
@ -9,6 +9,7 @@ import ChatHeader from './components/ChatHeader';
|
||||||
import ChatInput from './components/ChatInput';
|
import ChatInput from './components/ChatInput';
|
||||||
import ChatOutline from './components/ChatOutline';
|
import ChatOutline from './components/ChatOutline';
|
||||||
import type { ModelOverrides } from '../../api';
|
import type { ModelOverrides } from '../../api';
|
||||||
|
import { useAuth } from '../../store/auth';
|
||||||
import './styles/chat-page-pure.css';
|
import './styles/chat-page-pure.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -19,6 +20,7 @@ import './styles/chat-page-pure.css';
|
||||||
export default function ChatPagePure() {
|
export default function ChatPagePure() {
|
||||||
const logic = useChatPageLogic();
|
const logic = useChatPageLogic();
|
||||||
const { message } = AntApp.useApp();
|
const { message } = AntApp.useApp();
|
||||||
|
const { logout } = useAuth();
|
||||||
const [outlineCollapsed, setOutlineCollapsed] = useState(true);
|
const [outlineCollapsed, setOutlineCollapsed] = useState(true);
|
||||||
const isAutoScrolling = useRef(false);
|
const isAutoScrolling = useRef(false);
|
||||||
|
|
||||||
|
|
@ -70,6 +72,17 @@ export default function ChatPagePure() {
|
||||||
}
|
}
|
||||||
}, [setHighlightId]);
|
}, [setHighlightId]);
|
||||||
|
|
||||||
|
// 退出登录
|
||||||
|
const handleLogout = () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确定要退出登录吗?',
|
||||||
|
onOk: async () => {
|
||||||
|
await logout();
|
||||||
|
window.location.href = '/login';
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="chat-pure-shell">
|
<div className="chat-pure-shell">
|
||||||
<section className="chat-main">
|
<section className="chat-main">
|
||||||
|
|
@ -89,6 +102,7 @@ export default function ChatPagePure() {
|
||||||
onOpenMcp={() => setMcpDrawerOpen(true)}
|
onOpenMcp={() => setMcpDrawerOpen(true)}
|
||||||
onManageAgent={() => navigate(`/agents/${id}`)}
|
onManageAgent={() => navigate(`/agents/${id}`)}
|
||||||
onClear={sender.handleClear}
|
onClear={sender.handleClear}
|
||||||
|
onLogout={handleLogout}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ChatBody
|
<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 { Button, Dropdown, Modal, Switch } from 'antd';
|
||||||
import type { Agent } from '../../../api';
|
import type { Agent } from '../../../api';
|
||||||
import './ChatHeader.css';
|
import './ChatHeader.css';
|
||||||
|
|
@ -37,8 +37,9 @@ export default function ChatHeader(props: {
|
||||||
onOpenMcp: () => void;
|
onOpenMcp: () => void;
|
||||||
onManageAgent: () => void;
|
onManageAgent: () => void;
|
||||||
onClear: () => 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);
|
const modelText = formatAgentModel(agent.model);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -86,8 +87,19 @@ export default function ChatHeader(props: {
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
Modal.confirm({ title: '清空当前会话所有消息?', onOk: onClear });
|
Modal.confirm({ title: '清空当前会话所有消息?', onOk: onClear });
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
...(onLogout
|
||||||
|
? [
|
||||||
|
{ type: 'divider' as const },
|
||||||
|
{
|
||||||
|
key: 'logout',
|
||||||
|
label: '退出登录',
|
||||||
|
icon: <LogoutOutlined />,
|
||||||
|
onClick: onLogout,
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
: [])
|
||||||
|
]
|
||||||
}}
|
}}
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue