feat: 聊天侧边栏新对话按钮统一为 antd Button 样式

This commit is contained in:
2026-06-03 15:17:05 +08:00
parent 02a202290f
commit 714da2d633
2 changed files with 32 additions and 14 deletions

View File

@@ -1,7 +1,7 @@
import { DeleteOutlined, MoreOutlined } from "@ant-design/icons";
import { DeleteOutlined, MoreOutlined, PlusOutlined } from "@ant-design/icons";
import { Conversations } from "@ant-design/x";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { App, Spin } from "antd";
import { App, Button, Spin } from "antd";
import { useMemo, useState } from "react";
import type { Conversation } from "../../../shared/api";
@@ -52,23 +52,30 @@ export function ChatPage() {
return (
<div className="app-chat-page">
<div className="app-chat-conversations">
<div className="app-chat-conversations-header">
<Button
block
icon={<PlusOutlined />}
onClick={() => {
void createConversation(project.id, defaultModelId ?? undefined)
.then((conv) => {
void queryClient.invalidateQueries({ queryKey: CONVERSATIONS_KEY });
setActiveConversationId(conv.id);
})
.catch((err: Error) => {
void message.error(`创建会话失败:${err.message}`);
});
}}
type="primary"
>
</Button>
</div>
{isLoading ? (
<Spin />
) : (
<Conversations
activeKey={activeConversationId ?? ""}
creation={{
onClick: () => {
void createConversation(project.id, defaultModelId ?? undefined)
.then((conv) => {
void queryClient.invalidateQueries({ queryKey: CONVERSATIONS_KEY });
setActiveConversationId(conv.id);
})
.catch((err: Error) => {
void message.error(`创建会话失败:${err.message}`);
});
},
}}
items={conversations}
menu={(conv) => ({
items: [
@@ -85,6 +92,7 @@ export function ChatPage() {
trigger: <MoreOutlined />,
})}
onActiveChange={(key) => setActiveConversationId(key)}
rootClassName="app-chat-conversations-list"
/>
)}
</div>

View File

@@ -90,6 +90,16 @@ body {
background: var(--ant-color-bg-container);
}
.app-chat-conversations-header {
padding: var(--ant-padding-sm);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.app-chat-conversations-list {
flex: 1;
min-height: 0;
}
.app-chat-panel {
display: flex;
flex: 1;