duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update ChatHistoryPanel layout and styling for improved UI consistency

Browse Source
This commit is contained in:
duanshuwen
2026-04-18 00:05:20 +08:00
parent 33e428cc94
commit 1205a96661
1 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/chat/ChatHistoryPanel.tsx
View File

@@ -100,7 +100,7 @@ export default function ChatHistoryPanel({
}; };
}, [menuState]); }, [menuState]);
const panelWidthClass = isCompact ? 'md:w-[96px] lg:w-[96px]' : 'md:w-[240px] lg:w-[252px]'; const panelWidthClass = isCompact ? 'md:w-[70px] lg:w-[70px]' : 'md:w-[240px] lg:w-[252px]';
return ( return (
<aside <aside
@@ -118,7 +118,7 @@ export default function ChatHistoryPanel({
<div className="flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-[16px] border border-white bg-white shadow-[0_6px_16px_rgba(15,23,42,0.08)]"> <div className="flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-[16px] border border-white bg-white shadow-[0_6px_16px_rgba(15,23,42,0.08)]">
<img className="h-full w-full object-cover" src={blueLogo} alt="YINIAN" /> <img className="h-full w-full object-cover" src={blueLogo} alt="YINIAN" />
</div> </div>
<div className="truncate text-[20px] font-semibold tracking-[0.06em] text-[#111827] dark:text-gray-50"> <div className="truncate text-[20px] font-semibold whitespace-nowrap tracking-[0.06em] text-[#111827] dark:text-gray-50">
YINIAN YINIAN
</div> </div>
</div> </div>
@@ -127,21 +127,21 @@ export default function ChatHistoryPanel({
<button <button
type="button" type="button"
className="inline-flex h-8 w-8 items-center justify-center text-[#64748b] transition-colors hover:border-[#cfd8e3] hover:text-[#111827] dark:border-[#2a2a2d] dark:text-gray-300 dark:hover:border-[#3a3a3f] dark:hover:text-gray-100" className="inline-flex h-12 w-12 items-center justify-center text-[#64748b] transition-colors border border-white hover:text-[#111827] rounded-[14px] dark:border-[#2a2a2d] dark:text-gray-300 dark:hover:border-[#3a3a3f] dark:hover:text-gray-100"
title={isCompact ? '展开侧栏' : '收起侧栏'} title={isCompact ? '展开侧栏' : '收起侧栏'}
onClick={() => { onClick={() => {
setMenuState(null); setMenuState(null);
setIsCompact((current) => !current); setIsCompact((current) => !current);
}} }}
> >
{isCompact ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />} {isCompact ? <PanelLeftOpen /> : <PanelLeftClose />}
</button> </button>
</div> </div>
<button <button
type="button" type="button"
className={cx( className={cx(
'mt-4 inline-flex h-12 items-center justify-center gap-2 rounded-[14px] border border-[#e3eaf3] bg-white px-4 text-[15px] font-medium text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.05)] transition-all hover:-translate-y-px hover:border-[#d5e3f4] hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-100 dark:hover:border-[#3a3a3f]', 'mt-4 inline-flex h-12 items-center justify-center gap-2 rounded-lg border border-[#e3eaf3] bg-white px-4 text-[15px] font-medium text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.05)] transition-all hover:-translate-y-px hover:border-[#d5e3f4] hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-100 dark:hover:border-[#3a3a3f]',
isCompact && 'px-0', isCompact && 'px-0',
)} )}
title="新对话" title="新对话"
@@ -171,9 +171,9 @@ export default function ChatHistoryPanel({
return ( return (
<section key={bucket.key} className="mb-4 last:mb-0"> <section key={bucket.key} className="mb-4 last:mb-0">
<button {bucket.sessions.length ? (<button
type="button" type="button"
className="flex w-full items-center justify-between rounded-[12px] px-1 py-1 text-left transition-colors hover:bg-[#eef4fb] dark:hover:bg-[#222225]" className="flex w-full items-center justify-between rounded-lg px-4 py-4 text-left transition-colors border border-[#e5edf7] dark:border-[#2f3136] dark:bg-[#202024]"
aria-expanded={!isCollapsed} aria-expanded={!isCollapsed}
onClick={() => { onClick={() => {
setMenuState(null); setMenuState(null);
@@ -193,7 +193,8 @@ export default function ChatHistoryPanel({
isCollapsed && '-rotate-90', isCollapsed && '-rotate-90',
)} )}
/> />
</button> </button>) : null}
{!isCollapsed ? ( {!isCollapsed ? (
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
@@ -207,9 +208,9 @@ export default function ChatHistoryPanel({
<button <button
type="button" type="button"
className={cx( className={cx(
'flex w-full items-center gap-2 rounded-[14px] px-3 py-3 pr-11 text-left text-[12px] transition-all', 'flex w-full items-center gap-2 rounded-lg px-3 py-3 pr-11 text-left text-[12px] transition-all',
isActive isActive
? 'border border-[#e5edf7] bg-white text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.06)] dark:border-[#2f3136] dark:bg-[#202024] dark:text-gray-50' ? 'text-[#111827] shadow-[0_4px_14px_rgba(15,23,42,0.06)] dark:text-gray-50'
: 'border border-transparent text-[#5b6472] hover:border-[#e5edf7] hover:bg-white hover:text-[#111827] hover:shadow-[0_4px_14px_rgba(15,23,42,0.05)] dark:text-gray-400 dark:hover:border-[#2a2a2d] dark:hover:bg-[#202024] dark:hover:text-gray-100', : 'border border-transparent text-[#5b6472] hover:border-[#e5edf7] hover:bg-white hover:text-[#111827] hover:shadow-[0_4px_14px_rgba(15,23,42,0.05)] dark:text-gray-400 dark:hover:border-[#2a2a2d] dark:hover:bg-[#202024] dark:hover:text-gray-100',
)} )}
onClick={() => { onClick={() => {
@@ -293,12 +294,6 @@ export default function ChatHistoryPanel({
); );
}) })
: null} : null}
{isCompact && hasSessions ? (
<div className="mt-4 rounded-[18px] border border-dashed border-[#dbe7f4] bg-white px-3 py-4 text-center text-xs text-[#94a3b8] shadow-[0_4px_14px_rgba(15,23,42,0.04)] dark:border-[#2a2a2d] dark:bg-[#202024] dark:text-gray-500">
已收起历史
</div>
) : null}
</div> </div>
</div> </div>
</aside> </aside>