feat: 聊天侧边栏新对话按钮统一为 antd Button 样式
This commit is contained in:
@@ -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 { Conversations } from "@ant-design/x";
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
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 { useMemo, useState } from "react";
|
||||||
|
|
||||||
import type { Conversation } from "../../../shared/api";
|
import type { Conversation } from "../../../shared/api";
|
||||||
@@ -52,23 +52,30 @@ export function ChatPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="app-chat-page">
|
<div className="app-chat-page">
|
||||||
<div className="app-chat-conversations">
|
<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 ? (
|
{isLoading ? (
|
||||||
<Spin />
|
<Spin />
|
||||||
) : (
|
) : (
|
||||||
<Conversations
|
<Conversations
|
||||||
activeKey={activeConversationId ?? ""}
|
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}
|
items={conversations}
|
||||||
menu={(conv) => ({
|
menu={(conv) => ({
|
||||||
items: [
|
items: [
|
||||||
@@ -85,6 +92,7 @@ export function ChatPage() {
|
|||||||
trigger: <MoreOutlined />,
|
trigger: <MoreOutlined />,
|
||||||
})}
|
})}
|
||||||
onActiveChange={(key) => setActiveConversationId(key)}
|
onActiveChange={(key) => setActiveConversationId(key)}
|
||||||
|
rootClassName="app-chat-conversations-list"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -90,6 +90,16 @@ body {
|
|||||||
background: var(--ant-color-bg-container);
|
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 {
|
.app-chat-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user