From 9569888b0ef3db2b44b358f3fe6af9801a482f57 Mon Sep 17 00:00:00 2001 From: butterfly Date: Sun, 28 Apr 2024 12:49:06 +0800 Subject: [PATCH] feat: ui fixed --- app/components/ActionsBar/index.tsx | 3 +- app/components/Btn/index.tsx | 4 +- app/components/MenuLayout/index.tsx | 10 +- app/components/Popover/index.tsx | 133 +++++++++++------- app/components/Select/index.tsx | 2 +- .../Chat/components/ChatActions.tsx | 2 +- .../Chat/components/ChatMessagePanel.tsx | 2 +- .../Chat/components/MessageActions.tsx | 14 +- app/containers/Chat/index.tsx | 31 ++-- app/containers/Settings/index.tsx | 61 +++++--- app/containers/Sidebar/index.tsx | 8 +- app/styles/globals.css | 4 + tailwind.config.js | 5 + 13 files changed, 180 insertions(+), 99 deletions(-) diff --git a/app/components/ActionsBar/index.tsx b/app/components/ActionsBar/index.tsx index 3c6132f7f..03699a5b5 100644 --- a/app/components/ActionsBar/index.tsx +++ b/app/components/ActionsBar/index.tsx @@ -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)} diff --git a/app/components/Btn/index.tsx b/app/components/Btn/index.tsx index 6be9883f1..9f86866d9 100644 --- a/app/components/Btn/index.tsx +++ b/app/components/Btn/index.tsx @@ -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 ( diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx index d3bc17cfd..1a6b6e3fc 100644 --- a/app/components/MenuLayout/index.tsx +++ b/app/components/MenuLayout/index.tsx @@ -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); + // } + // }} > { + 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 ( + //
{ + // 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 && ( + // <> + //
+ // + //
+ // {createPortal( + //
+ // {content} + //
, + // popoverRoot, + // )} + // + // )} + //
+ // ); + return (
{ - 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 && ( - <> -
- -
- {createPortal( -
- {content} -
, - popoverRoot, - )} - - )} + +
+ {content} +
); } diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx index f58f34b92..e1a67cba1 100644 --- a/app/components/Select/index.tsx +++ b/app/components/Select/index.tsx @@ -58,7 +58,7 @@ const Select = (props: SearchProps) => { {options?.map((o) => (
{ onSelect?.(o.value); }} diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx index 39aa5cf1a..8163a7525 100644 --- a/app/containers/Chat/components/ChatActions.tsx +++ b/app/containers/Chat/components/ChatActions.tsx @@ -182,7 +182,7 @@ export function ChatActions(props: { return (
{act.icon} diff --git a/app/containers/Chat/components/ChatMessagePanel.tsx b/app/containers/Chat/components/ChatMessagePanel.tsx index 3972943f6..318963a30 100644 --- a/app/containers/Chat/components/ChatMessagePanel.tsx +++ b/app/containers/Chat/components/ChatMessagePanel.tsx @@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) { )}
diff --git a/app/containers/Chat/components/MessageActions.tsx b/app/containers/Chat/components/MessageActions.tsx index 43cce4cad..7044e06fd 100644 --- a/app/containers/Chat/components/MessageActions.tsx +++ b/app/containers/Chat/components/MessageActions.tsx @@ -261,17 +261,13 @@ export default function MessageActions(props: MessageActionsProps) { showActions && (
@@ -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 + `} />
) diff --git a/app/containers/Chat/index.tsx b/app/containers/Chat/index.tsx index 6c0cf00a4..334be9bee 100644 --- a/app/containers/Chat/index.tsx +++ b/app/containers/Chat/index.tsx @@ -54,12 +54,17 @@ export function SessionItem(props: { {(provided) => (
{ draggableRef.current = ele; @@ -94,7 +99,7 @@ export function SessionItem(props: { { props.onDelete?.(); e.preventDefault(); @@ -208,12 +213,12 @@ export default MenuLayout(function SessionList(props) {
{ - if (e.target === e.currentTarget) { - navigate(Path.Home); - } - }} + className={`flex-1 overflow-y-auto`} + // onClick={(e) => { + // if (e.target === e.currentTarget) { + // navigate(Path.Home); + // } + // }} > diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx index 50a0d2ca0..78a431d73 100644 --- a/app/containers/Settings/index.tsx +++ b/app/containers/Settings/index.tsx @@ -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 (
@@ -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) {
-
{ - setShowPanel?.(true); - }} - > - {Locale.Settings.GeneralSettings} - {isMobileScreen && } -
+ {list.map((i) => ( +
{ + setShowPanel?.(true); + }} + > + {i.title} + {i.icon} + {isMobileScreen && } +
+ ))}
); diff --git a/app/containers/Sidebar/index.tsx b/app/containers/Sidebar/index.tsx index 571553236..1665a8bb6 100644 --- a/app/containers/Sidebar/index.tsx +++ b/app/containers/Sidebar/index.tsx @@ -61,6 +61,8 @@ export function SideBar(props: { className?: string }) { mobileInactive: , }, 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: , }, title: "Assistant", + activeClassName: "shadow-sidebar-btn-shadow", + className: "mb-4 hover:bg-sidebar-btn-hovered", }, { id: "github", icons: , - 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: , mobileInactive: , }, - className: "p-2", + className: "!p-2 hover:bg-sidebar-btn-hovered", title: "Settrings", }, ]} diff --git a/app/styles/globals.css b/app/styles/globals.css index 994f440aa..dd94c4442 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -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 { diff --git a/tailwind.config.js b/tailwind.config.js index 35359a05c..2b74d4832 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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)',