xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-11-04 16:23:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: ui fixed

Browse Source
This commit is contained in:
butterfly
2024-04-28 12:49:06 +08:00
parent 1a636b0f50
commit 9569888b0e
13 changed files with 180 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/ActionsBar/index.tsx
View File

@@ -12,6 +12,7 @@ interface Action {
icons: JSX.Element | IconMap;
className?: string;
onClick?: () => void;
activeClassName?: string;
}
type Groups = {
@@ -100,7 +101,7 @@ export default function ActionsBar(props: ActionsBarProps) {
key={action.id}
className={`cursor-pointer p-3 ${
selected === action.id
? "bg-actions-bar-btn-default"
? `!bg-actions-bar-btn-default ${action.activeClassName}`
: "bg-transparent"
} rounded-md items-center ${action.className}`}
onClick={handlerClick(action)}

4
app/components/Btn/index.tsx
View File

@@ -36,10 +36,10 @@ export default function Btn(props: {
} text-text-btn-primary `;
break;
case "danger":
btnClassName = `bg-danger-btn text-text-btn-danger`;
btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-btn`;
break;
default:
btnClassName = `bg-default-btn text-text-btn-default`;
btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`;
}
return (

10
app/components/MenuLayout/index.tsx
View File

@@ -73,11 +73,11 @@ export default function MenuLayout<
max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
md:relative md:basis-sidebar md:h-[calc(100%-1.25rem)] md:pb-6 md:rounded-md md:my-2.5 md:bg-menu
`}
onClick={(e) => {
if (e.target === e.currentTarget) {
navigate(Path.Home);
}
}}
// onClick={(e) => {
// if (e.target === e.currentTarget) {
// navigate(Path.Home);
// }
// }}
>
<ListComponent
{...props}

133
app/components/Popover/index.tsx
View File

@@ -79,7 +79,7 @@ export default function Popover(props: PopoverProps) {
const mergedShow = show ?? internalShow;
const { arrowClassName, placementStyle } = useMemo(() => {
const { arrowClassName, placementStyle, placementClassName } = useMemo(() => {
const arrowCommonClassName = `${
noArrow ? "hidden" : ""
} absolute z-10 left-[50%] translate-x-[calc(-50%)]`;
@@ -105,28 +105,32 @@ export default function Popover(props: PopoverProps) {
bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
},
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`,
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName: "bottom-[calc(100%+0.5rem)] left-[calc(-2%)]",
},
lb: {
placementStyle: {
top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
},
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`,
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName: "top-[calc(100%+0.5rem)] left-[calc(-2%)]",
},
rt: {
placementStyle: {
bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
},
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`,
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName: "bottom-[calc(100%+0.5rem)] right-[calc(-2%)]",
},
rb: {
placementStyle: {
top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
},
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`,
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName: "top-[calc(100%+0.5rem)] right-[calc(-2%)]",
},
t: {
placementStyle: {
@@ -134,7 +138,9 @@ export default function Popover(props: PopoverProps) {
left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
transform: "translateX(-50%)",
},
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)]`,
arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
placementClassName:
"bottom-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
},
b: {
placementStyle: {
@@ -142,7 +148,9 @@ export default function Popover(props: PopoverProps) {
left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
transform: "translateX(-50%)",
},
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]`,
arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
placementClassName:
"top-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
},
};
@@ -236,54 +244,83 @@ export default function Popover(props: PopoverProps) {
);
}
// return (
// <div
// className={`relative ${className}`}
// onPointerEnter={(e) => {
// e.preventDefault();
// clearTimeout(closeTimer.current);
// onShow?.(true);
// setShow(true);
// getRelativePosition(e.currentTarget, "");
// window.document.documentElement.style.overflow = "hidden";
// }}
// onPointerLeave={(e) => {
// e.preventDefault();
// if (delayClose) {
// closeTimer.current = window.setTimeout(() => {
// onShow?.(false);
// setShow(false);
// }, delayClose);
// } else {
// onShow?.(false);
// setShow(false);
// }
// window.document.documentElement.style.overflow = "auto";
// }}
// >
// {children}
// {mergedShow && (
// <>
// <div
// className={`${
// noArrow ? "opacity-0" : ""
// } bg-inherit ${arrowClassName}`}
// style={{ zIndex: baseZIndex + 1 }}
// >
// <ArrowIcon sibling={popoverRef} />
// </div>
// {createPortal(
// <div
// className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
// style={{ zIndex: baseZIndex + 1, ...placementStyle }}
// ref={popoverRef}
// >
// {content}
// </div>,
// popoverRoot,
// )}
// </>
// )}
// </div>
// );
return (
<div
className={`relative ${className}`}
className={`group relative ${className}`}
onPointerEnter={(e) => {
e.preventDefault();
clearTimeout(closeTimer.current);
onShow?.(true);
setShow(true);
getRelativePosition(e.currentTarget, "");
window.document.documentElement.style.overflow = "hidden";
}}
onPointerLeave={(e) => {
e.preventDefault();
if (delayClose) {
closeTimer.current = window.setTimeout(() => {
onShow?.(false);
setShow(false);
}, delayClose);
} else {
onShow?.(false);
setShow(false);
}
window.document.documentElement.style.overflow = "auto";
}}
>
{children}
{mergedShow && (
<>
<div
className={`${
noArrow ? "opacity-0" : ""
} bg-inherit ${arrowClassName}`}
style={{ zIndex: baseZIndex + 1 }}
>
<ArrowIcon sibling={popoverRef} />
</div>
{createPortal(
<div
className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
style={{ zIndex: baseZIndex + 1, ...placementStyle }}
ref={popoverRef}
>
{content}
</div>,
popoverRoot,
)}
</>
)}
<div
className={`
hidden group-hover:block
${noArrow ? "opacity-0" : ""}
bg-inherit
${arrowClassName}
`}
style={{ zIndex: baseZIndex + 1 }}
>
<ArrowIcon sibling={popoverRef} />
</div>
<div
className={`hidden group-hover:block whitespace-nowrap ${popoverCommonClass} ${placementClassName} ${popoverClassName}`}
ref={popoverRef}
style={{ zIndex: 10000 }}
>
{content}
</div>
</div>
);
}

2
app/components/Select/index.tsx
View File

@@ -58,7 +58,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
{options?.map((o) => (
<div
key={o.value}
className={`flex items-center p-3 gap-2 rounded-action-btn hover:bg-select-option-hovered`}
className={`flex items-center p-3 gap-2 rounded-action-btn hover:bg-select-option-hovered cursor-pointer`}
onClick={() => {
onSelect?.(o.value);
}}

2
app/containers/Chat/components/ChatActions.tsx
View File

@@ -182,7 +182,7 @@ export function ChatActions(props: {
return (
<div
key={act.text}
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`}
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClick={act.onClick}
>
{act.icon}

2
app/containers/Chat/components/ChatMessagePanel.tsx
View File

@@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
)}
</div>
<div
className={`group relative flex-1 flex ${
className={`group relative flex flex ${
isUser ? "flex-row-reverse" : ""
}`}
>

14
app/containers/Chat/components/MessageActions.tsx
View File

@@ -261,17 +261,13 @@ export default function MessageActions(props: MessageActionsProps) {
showActions && (
<div
className={`
absolute z-10
absolute z-10 w-[100%]
${isUser ? "right-0" : "left-0"}
transition-all duration-300
opacity-0
pointer-events-none
group-hover:opacity-100
group-hover:pointer-events-auto
bg-chat-message-actions
rounded-md
shadow-message-actions-bar
dark:bg-none
${className}
`}
>
@@ -285,7 +281,13 @@ export default function MessageActions(props: MessageActionsProps) {
onUserStop,
})}
groups={groupsTypes[groupsType]}
className="flex flex-row gap-1 p-1"
className={`
float-right flex flex-row gap-1 p-1
bg-chat-message-actions
rounded-md
shadow-message-actions-bar
dark:bg-none
`}
/>
</div>
)

31
app/containers/Chat/index.tsx
View File

@@ -54,12 +54,17 @@ export function SessionItem(props: {
<Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => (
<div
className={`group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 ${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home)
? `bg-chat-menu-session-selected border-chat-menu-session-selected border `
: `bg-chat-menu-session-unselected hover:bg-chat-menu-session-hovered`
}`}
className={`
group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2
border
bg-chat-menu-session-unselected border-chat-menu-session-unselected
${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home)
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
}
`}
onClick={props.onClick}
ref={(ele) => {
draggableRef.current = ele;
@@ -94,7 +99,7 @@ export function SessionItem(props: {
<Popover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6`}
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
@@ -208,12 +213,12 @@ export default MenuLayout(function SessionList(props) {
</div>
<div
className={`flex-1 overflow-y-auto overflow-x-hidden`}
onClick={(e) => {
if (e.target === e.currentTarget) {
navigate(Path.Home);
}
}}
className={`flex-1 overflow-y-auto`}
// onClick={(e) => {
// if (e.target === e.currentTarget) {
// navigate(Path.Home);
// }
// }}
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="chat-list">

61
app/containers/Settings/index.tsx
View File

@@ -5,6 +5,7 @@ import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg";
import { useAppConfig } from "@/app/store";
import { useState } from "react";
export default MenuLayout(function SettingList(props) {
const { setShowPanel } = props;
@@ -12,12 +13,21 @@ export default MenuLayout(function SettingList(props) {
const { isMobileScreen } = config;
const list = [
{
id: Locale.Settings.GeneralSettings,
title: Locale.Settings.GeneralSettings,
icon: null,
},
];
const [selected, setSelected] = useState(list[0].id);
return (
<div
className={`
px-6
max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
md:pt-7 md:px-4
md:pt-7
`}
>
<div data-tauri-drag-region>
@@ -25,7 +35,7 @@ export default MenuLayout(function SettingList(props) {
className={`
flex items-center justify-between
max-md:h-menu-title-mobile
md:pb-5
md:pb-5 md:px-4
`}
data-tauri-drag-region
>
@@ -38,22 +48,35 @@ export default MenuLayout(function SettingList(props) {
<div
className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
>
<div
className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
border
border-opacity-0 rounded-md
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected
flex justify-between items-center
max-md:bg-settings-menu-item-mobile
`}
onClick={() => {
setShowPanel?.(true);
}}
>
{Locale.Settings.GeneralSettings}
{isMobileScreen && <GotoIcon />}
</div>
{list.map((i) => (
<div
key={i.id}
className={`
p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
cursor-pointer
border
rounded-md
bg-chat-menu-session-unselected border-chat-menu-session-unselected
${
selected === i.id && !isMobileScreen
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
}
hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected
flex justify-between items-center
max-md:bg-settings-menu-item-mobile
`}
onClick={() => {
setShowPanel?.(true);
}}
>
{i.title}
{i.icon}
{isMobileScreen && <GotoIcon />}
</div>
))}
</div>
</div>
);

8
app/containers/Sidebar/index.tsx
View File

@@ -61,6 +61,8 @@ export function SideBar(props: { className?: string }) {
mobileInactive: <DiscoverMobileInactive />,
},
title: "Discover",
activeClassName: "shadow-sidebar-btn-shadow",
className: "mb-4 hover:bg-sidebar-btn-hovered",
},
{
id: Path.Home,
@@ -71,11 +73,13 @@ export function SideBar(props: { className?: string }) {
mobileInactive: <AssistantMobileInactive />,
},
title: "Assistant",
activeClassName: "shadow-sidebar-btn-shadow",
className: "mb-4 hover:bg-sidebar-btn-hovered",
},
{
id: "github",
icons: <GitHubIcon />,
className: "p-2",
className: "!p-2 mb-3 hover:bg-sidebar-btn-hovered",
},
{
id: Path.Settings,
@@ -85,7 +89,7 @@ export function SideBar(props: { className?: string }) {
mobileActive: <SettingMobileActive />,
mobileInactive: <SettingMobileInactive />,
},
className: "p-2",
className: "!p-2 hover:bg-sidebar-btn-hovered",
title: "Settrings",
},
]}

4
app/styles/globals.css
View File

@@ -77,6 +77,10 @@ body {
--delete-chat-cancel-btn-bg: #fff;
--delete-chat-cancel-btn-text: #18182a;
--delete-chat-cancel-btn-border: #e2e2e6;
--sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05);
--chat-menu-session-unselected-border: #f0f0f3;
--chat-menu-session-hovered-border: #e2e2e6;
--hovered-btn-bg: rgba(0, 0, 0, 0.05);
}
.dark {

5
tailwind.config.js
View File

@@ -90,6 +90,7 @@ module.exports = {
'primary-btn-disabled': 'var(--primary-btn-disabled-bg)',
'danger-btn': 'var(--danger-btn-bg)',
'default-btn': 'var(--default-widget-bg)',
'hovered-btn': 'var(--hovered-btn-bg)',
'card': 'var(--similar-panel-bg)',
'input': 'var(--default-widget-bg)',
'list-item-divider': 'var(--similar-line-bg)',
@@ -127,6 +128,7 @@ module.exports = {
'settings-header-mobile': 'var(--similar-highlight-hood-bg)',
'settings-panel': 'var(--default-container-bg)',
'sidebar-mobile': 'var(--similar-highlight-hood-bg)',
'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)',
'delete-chat-popover-panel': 'var(--similar-panel-bg)',
'confirm-mask': 'var(--confirm-mask-bg)',
'confirm-panel': 'var(--similar-panel-bg)',
@@ -154,6 +156,7 @@ module.exports = {
'message-actions-bar': '0px 4px 30px 0px var(--small-widget-border)',
'prompt-hint-container': 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.1)',
'delete-chat-popover-shadow': '0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 8px 20px 0px rgba(0, 0, 0, 0.08)',
'sidebar-btn-shadow': '4px 8px 16px 0px rgba(60, 68, 255, 0.20);',
},
colors: {
'select-popover': 'var(--small-widget-border)',
@@ -169,6 +172,8 @@ module.exports = {
'settings-header': 'var(--panel-header-border)',
'delete-chat-popover': 'var(--small-widget-border)',
'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)',
'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)',
'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)',
'text-sidebar-tab-mobile-active': 'var(--sidebar-tab-mobile-active-text)',
'text-sidebar-tab-mobile-inactive': 'var(--weakness-text)',
'text-btn-primary': 'var(--bg-contract-text)',