From 3d99965a8ff4a7eb7a63188bc442d6a97b2ae368 Mon Sep 17 00:00:00 2001 From: butterfly Date: Tue, 30 Apr 2024 19:11:59 +0800 Subject: [PATCH] feat: bugfix --- app/components/Card/index.tsx | 2 +- app/components/HoverPopover/index.tsx | 4 +- app/components/MenuLayout/index.tsx | 28 ++-- app/components/Popover/index.tsx | 17 ++- app/components/Screen/index.tsx | 8 +- app/components/Switch/index.tsx | 14 +- app/containers/Chat/ChatPanel.tsx | 2 +- .../Chat/components/ChatActions.tsx | 10 +- app/containers/Chat/components/ChatHeader.tsx | 3 +- .../Chat/components/ChatInputPanel.tsx | 2 +- .../Chat/components/ChatMessagePanel.tsx | 4 +- .../Chat/components/ModelSelect.tsx | 8 +- .../Chat/components/SessionItem.tsx | 116 ++++++++++++----- app/containers/Settings/SettingPanel.tsx | 97 +++++++------- .../Settings/components/SettingHeader.tsx | 2 +- app/containers/Settings/index.tsx | 45 +++++-- app/containers/Sidebar/index.tsx | 2 +- app/locales/cn.ts | 2 + app/locales/en.ts | 2 + app/styles/base-new.scss | 120 ++++++++++-------- tailwind.config.js | 18 +-- 21 files changed, 313 insertions(+), 193 deletions(-) diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx index d6f2eb635..782d62cc5 100644 --- a/app/components/Card/index.tsx +++ b/app/components/Card/index.tsx @@ -14,7 +14,7 @@ export default function Card(props: CardProps) { {title && (
["align"]; + openDelay?: number; } export default function HoverPopover(props: PopoverProps) { @@ -18,9 +19,10 @@ export default function HoverPopover(props: PopoverProps) { popoverClassName, noArrow = false, align, + openDelay = 300, } = props; return ( - + {children} ) => void; setShowPanel?: (v: boolean) => void; showPanel?: boolean; + [k: string]: any; } export default function MenuLayout< @@ -27,8 +26,7 @@ export default function MenuLayout< ) { return function MenuHood(props: ListComponentProps & PanelComponentProps) { const [showPanel, setShowPanel] = useState(false); - - const navigate = useNavigate(); + const [externalProps, setExternalProps] = useState({}); const config = useAppConfig(); const isMobileScreen = useMobileScreen(); @@ -62,38 +60,34 @@ export default function MenuLayout< return (
{ - // if (e.target === e.currentTarget) { - // navigate(Path.Home); - // } - // }} >
{!isMobileScreen && (
{ startDragWidth.current = config.sidebarWidth; onDragStart(e as any); }} > -
+
 
@@ -108,7 +102,9 @@ export default function MenuLayout< >
diff --git a/app/components/Popover/index.tsx b/app/components/Popover/index.tsx index 2baebc143..54491f17a 100644 --- a/app/components/Popover/index.tsx +++ b/app/components/Popover/index.tsx @@ -312,17 +312,21 @@ export default function Popover(props: PopoverProps) { return (
{ getRelativePosition(e.currentTarget, ""); e.preventDefault(); e.stopPropagation(); }} + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + }} > {children} diff --git a/app/components/Screen/index.tsx b/app/components/Screen/index.tsx index e5ed0d3f0..a2e1fafbc 100644 --- a/app/components/Screen/index.tsx +++ b/app/components/Screen/index.tsx @@ -28,9 +28,9 @@ export default function Screen(props: ScreenProps) { return (
diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx index f6bfeddfc..3957a6136 100644 --- a/app/containers/Chat/components/ChatActions.tsx +++ b/app/containers/Chat/components/ChatActions.tsx @@ -30,6 +30,7 @@ export interface Action { render?: (key: string) => JSX.Element; icon?: JSX.Element; placement: "left" | "right"; + className?: string; } export function ChatActions(props: { @@ -220,7 +221,11 @@ export function ChatActions(props: { .filter((v) => v.placement === "left" && v.isShow) .map((act, ind) => { if (act.render) { - return act.render(act.text); + return ( +
+ {act.render(act.text)} +
+ ); } return (
{act.icon} diff --git a/app/containers/Chat/components/ChatHeader.tsx b/app/containers/Chat/components/ChatHeader.tsx index a6608f523..21346e4ba 100644 --- a/app/containers/Chat/components/ChatHeader.tsx +++ b/app/containers/Chat/components/ChatHeader.tsx @@ -6,7 +6,6 @@ import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat"; import LogIcon from "@/app/icons/logIcon.svg"; import GobackIcon from "@/app/icons/goback.svg"; import ShareIcon from "@/app/icons/shareIcon.svg"; -import BottomArrow from "@/app/icons/bottomArrow.svg"; import ModelSelect from "./ModelSelect"; export interface ChatHeaderProps { @@ -79,7 +78,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
{ setShowExport(true); }} diff --git a/app/containers/Chat/components/ChatInputPanel.tsx b/app/containers/Chat/components/ChatInputPanel.tsx index 7d9829467..12a91b9e0 100644 --- a/app/containers/Chat/components/ChatInputPanel.tsx +++ b/app/containers/Chat/components/ChatInputPanel.tsx @@ -250,7 +250,7 @@ export default forwardRef(
diff --git a/app/containers/Settings/components/SettingHeader.tsx b/app/containers/Settings/components/SettingHeader.tsx index 0ecdbe63f..47b945ed6 100644 --- a/app/containers/Settings/components/SettingHeader.tsx +++ b/app/containers/Settings/components/SettingHeader.tsx @@ -36,7 +36,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
{Locale.Settings.Title} diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx index 5b449552e..6429b5d8c 100644 --- a/app/containers/Settings/index.tsx +++ b/app/containers/Settings/index.tsx @@ -1,3 +1,4 @@ +"use client"; import Locale from "@/app/locales"; import MenuLayout from "@/app/components/MenuLayout"; @@ -5,24 +6,38 @@ import Panel from "./SettingPanel"; import GotoIcon from "@/app/icons/goto.svg"; import { useAppConfig } from "@/app/store"; -import { useState } from "react"; +import { useEffect, useState } from "react"; + +export const list = [ + { + id: Locale.Settings.GeneralSettings, + title: Locale.Settings.GeneralSettings, + icon: null, + }, + { + id: Locale.Settings.ModelSettings, + title: Locale.Settings.ModelSettings, + icon: null, + }, + { + id: Locale.Settings.DataSettings, + title: Locale.Settings.DataSettings, + icon: null, + }, +]; export default MenuLayout(function SettingList(props) { - const { setShowPanel } = props; + const { setShowPanel, setExternalProps } = props; const config = useAppConfig(); const { isMobileScreen } = config; - const list = [ - { - id: Locale.Settings.GeneralSettings, - title: Locale.Settings.GeneralSettings, - icon: null, - }, - ]; - const [selected, setSelected] = useState(list[0].id); + useEffect(() => { + setExternalProps?.(list[0]); + }, []); + return (
-
+
{Locale.Settings.Title}
{list.map((i) => (
{ setShowPanel?.(true); + setExternalProps?.(i); + setSelected(i.id); }} > {i.title} diff --git a/app/containers/Sidebar/index.tsx b/app/containers/Sidebar/index.tsx index 1665a8bb6..8a3c53391 100644 --- a/app/containers/Sidebar/index.tsx +++ b/app/containers/Sidebar/index.tsx @@ -115,7 +115,7 @@ export function SideBar(props: { className?: string }) { }} selected={selectedTab} className={` - max-md:bg-sidebar-mobile max-md:rounded-tl-md max-md:rounded-tr-md max-md:h-mobile max-md:justify-around + max-md:bg-sidebar-mobile max-md:h-mobile max-md:justify-around 2xl:px-5 xl:px-4 md:px-2 md:py-6 md:flex-col `} /> diff --git a/app/locales/cn.ts b/app/locales/cn.ts index caa07a333..dec63e6ce 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -134,6 +134,8 @@ const cn = { Title: "设置", SubTitle: "所有设置选项", GeneralSettings: "通用设置", + ModelSettings: "模型设置", + DataSettings: "同步设置", Basic: { Title: "基础设置", }, diff --git a/app/locales/en.ts b/app/locales/en.ts index 738ebcb21..7fa9670f9 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -138,6 +138,8 @@ const en: LocaleType = { Title: "Settings", SubTitle: "All Settings", GeneralSettings: "General settings", + ModelSettings: "Model settings", + DataSettings: "Sync settings", Basic: { Title: "Basic Settings", }, diff --git a/app/styles/base-new.scss b/app/styles/base-new.scss index 0cb2b88f1..38ff01e1c 100644 --- a/app/styles/base-new.scss +++ b/app/styles/base-new.scss @@ -22,14 +22,23 @@ body { background-color: inherit; } + .follow-parent-svg { + svg { + *:not(rect) { + fill: currentColor; + } + } + } + --siderbar-mobile-height: 3.125rem; --max-message-width: calc(var(--chat-panel-max-width) * 0.6); } .light-new { --global-bg: #e3e3ed; + --global-mobile-bg: #f0f0f3; --actions-bar-btn-default-bg: #2e42f3; - --primary-btn: #2e42f3; + --primary-btn-bg: #2e42f3; --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); --danger-btn-bg: #fff6f6; --default-btn-bg: #f7f7f8; @@ -72,16 +81,18 @@ body { --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05); --delete-chat-popover-panel-bg: #fff; --modal-mask-bg: rgba(0, 0, 0, 0.7); - --moda-panel-bg: #fff; + --modal-panel-bg: #fff; --delete-chat-ok-btn-bg: #ff5454; --delete-chat-cancel-btn-bg: #fff; --chat-message-actions-bg: #fff; - --menu-dragger-bg: blue; + --menu-dragger-bg: #2E42F3; --chat-actions-select-model-bg: rgba(0, 0, 0, 0.05); --chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1); --select-hover-bg: rgba(0, 0, 0, 0.05); --input-input-ele-hover-bg: rgba(0, 0, 0, 0); --slider-block-hover-bg: #F7F7F8; + --chat-menu-session-unselected-mobile-bg:#FFF; + --chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05); --select-popover-border: rgba(0, 0, 0, 0.1); --slider-block-border: #c9c9d1; @@ -99,6 +110,8 @@ body { --chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-hovered-border: #e2e2e6; --modal-header-bottom-border: #f0f0f3; + --chat-menu-session-unselected-mobile-border: #FFF; + --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0); --sidebar-tab-mobile-active-text: #2e42f3; --sidebar-tab-mobile-inactive-text: #a5a5b3; @@ -126,6 +139,7 @@ body { --modal-mask-text: #18182a; --delete-chat-ok-btn-text: #fff; --delete-chat-cancel-btn-text: #18182a; + --chat-menu-item-delete-text: #FF5454; --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); @@ -141,58 +155,61 @@ body { .dark-new { --global-bg: #303030; --actions-bar-btn-default-bg: #384cfc; - --primary-btn: #384cfc; + --primary-btn-bg: #384cfc; --primary-btn-disabled-bg: rgba(60, 68, 255, 0.2); --danger-btn-bg: #20131A; --default-btn-bg: #1D1D1D; - --hovered-btn-bg: rgba(0, 0, 0, 0.05); - --card-bg: #fff; - --input-bg: #f7f7f8; - --list-item-divider-bg: #f0f0f3; - --menu-bg: #f7f7f8; - --select-option-hovered-bg: rgba(0, 0, 0, 0.05); - --select-popover-panel-bg: #fff; - --select-bg: #f7f7f8; - --slider-bg: #f0f0f3; - --slider-slided-travel-bg: #88889a; - --slider-block-bg: #fff; - --switch-unchecked-bg: #c9c9d1; - --switch-checked-bg: #2e42f3; - --switch-btn-bg: #fff; - --chat-actions-popover-panel-mobile-bg: #fff; - --chat-actions-btn-popover-bg: #434360; - --chat-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05); - --chat-panel-header-mask-bg: #f7f7f8; - --chat-panel-header-mobile-bg: #fff; - --chat-panel-input-hood-bg: #fff; + --hovered-btn-bg: #303030; + --card-bg: #111; + --input-bg: #1D1D1D; + --list-item-divider-bg: #303030; + --menu-bg: #1D1D1D; + --select-option-hovered-bg: rgba(255, 255, 255, 0.05); + --select-popover-panel-bg: #1D1D1D; + --select-bg: #1D1D1D; + --slider-bg: #303030; + --slider-slided-travel-bg: #B0B0B0; + --slider-block-bg: #111; + --switch-unchecked-bg: #303030; + --switch-checked-bg: #384CFC; + --switch-btn-bg: #111; + --chat-actions-popover-panel-mobile-bg: #111; + --chat-actions-btn-popover-bg: #F0F0F0; + --chat-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05); + --chat-panel-header-mask-bg: #1D1D1D; + --chat-panel-header-mobile-bg: #111; + --chat-panel-input-hood-bg: #111; --chat-panel-message-user-bg: #4a5cff; - --chat-panel-message-bot-bg: #fff; - --chat-panel-message-bg: #f7f7f8; - --chat-panel-message-mobile-bg: #f0f0f3; - --chat-message-actions-btn-hovered-bg: rgba(0, 0, 0, 0.05); - --chat-panel-bg: #f7f7f8; - --chat-panel-message-clear-divider-bg: #e2e2e6; - --chat-menu-session-selected-bg: #dee1fd; - --chat-menu-session-unselected-bg: #f0f0f3; - --chat-menu-session-hovered-bg: #e2e2e6; - --settings-menu-mobile-bg: #f7f7f8; - --settings-menu-item-mobile-bg: #fff; - --settings-menu-item-selected-bg: #dee1fd; - --settings-header-mobile-bg: #fff; - --settings-panel-bg: #f7f7f8; - --sidebar-mobile-bg: #fff; - --sidebar-btn-hovered-bg: rgba(0, 0, 0, 0.05); - --delete-chat-popover-panel-bg: #fff; - --modal-mask-bg: rgba(0, 0, 0, 0.7); - --moda-panel-bg: #fff; - --delete-chat-ok-btn-bg: #ff5454; - --delete-chat-cancel-btn-bg: #fff; - --chat-message-actions-bg: #fff; - --menu-dragger-bg: blue; - --chat-actions-select-model-bg: rgba(0, 0, 0, 0.05); - --chat-actions-select-model-hover-bg: rgba(0, 0, 0, 0.1); - --select-hover-bg: rgba(0, 0, 0, 0.05); + --chat-panel-message-bot-bg: #111; + --chat-panel-message-bg: #1D1D1D; + --chat-panel-message-mobile-bg: #303030; + --chat-message-actions-btn-hovered-bg: rgba(255, 255, 255, 0.05); + --chat-panel-bg: #1D1D1D; + --chat-panel-message-clear-divider-bg: #e2e2e6; ////////// + --chat-menu-session-selected-bg: #182455; + --chat-menu-session-unselected-bg: #303030; + --chat-menu-session-hovered-bg: #404040; + --settings-menu-mobile-bg: #1D1D1D; + --settings-menu-item-mobile-bg: #111; + --settings-menu-item-selected-bg: #182455; + --settings-header-mobile-bg: #111; + --settings-panel-bg: #1D1D1D; + --sidebar-mobile-bg: #111; + --sidebar-btn-hovered-bg: rgba(255, 255, 255, 0.05); + --delete-chat-popover-panel-bg: #111; + --modal-mask-bg: rgba(0, 0, 0, 0.85); + --modal-panel-bg: #111; + --delete-chat-ok-btn-bg: #F55151; + --delete-chat-cancel-btn-bg: #404040; + --chat-message-actions-bg: rgba(255, 255, 255, 0); + --menu-dragger-bg: #2E42F3; /////////// + --chat-actions-select-model-bg: rgba(255, 255, 255, 0.05); + --chat-actions-select-model-hover-bg: rgba(255, 255, 255, 0.1); + --select-hover-bg: #303030; --input-input-ele-hover-bg: rgba(0, 0, 0, 0); + --chat-menu-session-unselected-mobile-bg:#111; + --chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05);//////////// + --global-mobile-bg: #303030; --select-popover-border: rgba(0, 0, 0, 0.1); --slider-block-border: #c9c9d1; @@ -210,6 +227,8 @@ body { --chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-hovered-border: #e2e2e6; --modal-header-bottom-border: #f0f0f3; + --chat-menu-session-unselected-mobile-border: #FFF; + --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0.05); --sidebar-tab-mobile-active-text: #2e42f3; --sidebar-tab-mobile-inactive-text: #a5a5b3; @@ -237,6 +256,7 @@ body { --modal-mask-text: #18182a; --delete-chat-ok-btn-text: #fff; --delete-chat-cancel-btn-text: #18182a; + --chat-menu-item-delete-text: #FF5454; --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); diff --git a/tailwind.config.js b/tailwind.config.js index a23ed6f9a..fa8b3387b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,10 +21,6 @@ module.exports = { 'setting-title': '1.25rem', 'setting-items': '1rem', }, - fontWeight: { - 'setting-title': '700', - 'setting-card-title': '600', - }, fontFamily: { 'common': ['Satoshi Variable', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'], 'time': ['Hind', "SF Pro Text", "SF Pro Icons", "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif'], @@ -71,7 +67,7 @@ module.exports = { 'page': 'calc(100% - var(--menu-width))', 'thumbnail': '5rem', 'actions-popover': '203px', - 'switch': '2.25rem', + 'switch': '2rem', 'modal-modal-type': '26.25rem', 'modal-modal-type-mobile': 'calc(100vw - 2 * 44px)', }, @@ -87,6 +83,7 @@ module.exports = { }, backgroundColor: { 'global': 'var(--global-bg)', + 'global-mobile': 'var(--global-mobile-bg)', 'actions-bar-btn-default': 'var(--actions-bar-btn-default-bg)', 'primary-btn': 'var(--primary-btn-bg)', 'primary-btn-disabled': 'var(--primary-btn-disabled-bg)', @@ -122,7 +119,9 @@ module.exports = { 'chat-panel': 'var(--chat-panel-bg)', 'chat-panel-message-clear-divider': 'var(--chat-panel-message-clear-divider-bg)', 'chat-menu-session-selected': 'var(--chat-menu-session-selected-bg)', + 'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-bg)', 'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-bg)', + 'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-bg)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-bg)', 'settings-menu-mobile': 'var(--settings-menu-mobile-bg)', 'settings-menu-item-mobile': 'var(--settings-menu-item-mobile-bg)', @@ -133,7 +132,7 @@ module.exports = { 'sidebar-btn-hovered': 'var(--sidebar-btn-hovered-bg)', 'delete-chat-popover-panel': 'var(--delete-chat-popover-panel-bg)', 'modal-mask': 'var(--modal-mask-bg)', - 'moda-panel': 'var(--moda-panel-bg)', + 'moda-panel': 'var(--modal-panel-bg)', 'delete-chat-ok-btn': 'var(--delete-chat-ok-btn-bg)', 'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-bg)', 'menu-dragger': 'var(--menu-dragger-bg)', @@ -155,7 +154,7 @@ module.exports = { }, maxWidth: { 'message-width': 'var(--max-message-width)', - 'chat-actions-select-model': '82px', + 'chat-actions-select-model': '282px', }, boxShadow: { 'btn': 'var(--btn-shadow)', @@ -176,12 +175,14 @@ module.exports = { 'chat-input-top': 'var(--chat-input-top-border)', 'chat-input-hood': 'var(--chat-input-hood-border)', 'chat-input-hood-focus': 'var(--chat-input-hood-focus-border)', - 'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)', 'settings-menu-item-selected': 'var(--settings-menu-item-selected-border)', 'settings-header': 'var(--settings-header-border)', 'delete-chat-popover': 'var(--delete-chat-popover-border)', 'delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-border)', + 'chat-menu-session-selected': 'var(--chat-menu-session-selected-border)', + 'chat-menu-session-selected-mobile': 'var(--chat-menu-session-selected-mobile-border)', 'chat-menu-session-unselected': 'var(--chat-menu-session-unselected-border)', + 'chat-menu-session-unselected-mobile': 'var(--chat-menu-session-unselected-mobile-border)', 'chat-menu-session-hovered': 'var(--chat-menu-session-hovered-border)', 'modal-header-bottom': 'var(--modal-header-bottom-border)', @@ -204,6 +205,7 @@ module.exports = { 'text-chat-panel-message-clear-revert': 'var(--chat-panel-message-clear-revert-text)', 'text-chat-menu-item-title': 'var(--chat-menu-item-title-text)', 'text-chat-menu-item-time': 'var(--chat-menu-item-time-text)', + 'text-chat-menu-item-delete': 'var(--chat-menu-item-delete-text)', 'text-chat-menu-item-description': 'var(--chat-menu-item-description-text)', 'text-settings-menu-title': 'var(--settings-menu-title-text)', 'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)',