From 89c56485448c3773b520ab1ccf488c5bd794cc0c Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Fri, 29 Sep 2023 03:41:32 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20Refactor=20set?= =?UTF-8?q?tings=20page=20and=20mobile=20ux?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en_US/common.json | 2 +- locales/ru_RU/common.json | 2 +- locales/zh_CN/common.json | 2 +- locales/zh_TW/common.json | 2 +- public/images/screenshot_background.webp | Bin 13212 -> 5164 bytes src/app/chat/features/Header/Mobile.tsx | 19 ++-- .../features/Header/ShareButton/Inner.tsx | 57 ++++++----- .../features/Header/ShareButton/index.tsx | 7 +- .../features/SessionList/Header/Desktop.tsx | 6 +- .../features/SessionList/Header/Mobile.tsx | 29 +++--- src/app/chat/features/Sidebar/Mobile.tsx | 20 +--- src/app/chat/layout.desktop.tsx | 3 +- src/app/chat/layout.mobile.tsx | 3 +- .../chat/settings/features/Header/index.tsx | 6 +- src/app/chat/settings/layout.mobile.tsx | 9 +- .../features/AgentCard/AgentCardBanner.tsx | 3 +- src/app/market/features/Header/Mobile.tsx | 23 +---- .../features/SideBar/AgentInfo/Header.tsx | 3 +- .../features/SideBar/AgentInfo/index.tsx | 12 ++- src/app/market/features/SideBar/Mobile.tsx | 20 +--- src/app/market/layout.desktop.tsx | 3 +- src/app/market/layout.mobile.tsx | 3 +- .../{features/Settings => agent}/Agent.tsx | 0 src/app/settings/agent/index.tsx | 20 ++++ src/app/settings/agent/page.tsx | 7 ++ .../{features/Settings => common}/Common.tsx | 2 +- src/app/settings/common/index.tsx | 20 ++++ src/app/settings/common/page.tsx | 7 ++ src/app/settings/features/Banner/index.tsx | 94 ------------------ src/app/settings/features/Header/Desktop.tsx | 11 +- src/app/settings/features/Header/Mobile.tsx | 7 +- src/app/settings/features/Settings/index.tsx | 53 ---------- src/app/settings/features/SideBar/Item.tsx | 39 ++++++++ src/app/settings/features/SideBar/List.tsx | 30 ++++++ src/app/settings/features/SideBar/index.tsx | 38 +++++++ src/app/settings/index.tsx | 12 +-- src/app/settings/layout.desktop.tsx | 8 +- src/app/settings/layout.mobile.tsx | 4 +- .../Settings => llm}/LLM/Checker.tsx | 0 .../Settings => llm}/LLM/ModelList.tsx | 0 .../Settings => llm}/LLM/getModelList.ts | 0 .../{features/Settings => llm}/LLM/index.tsx | 6 +- src/app/settings/llm/index.tsx | 20 ++++ src/app/settings/llm/page.tsx | 7 ++ src/app/settings/mobile/ExtraList.tsx | 61 ++++++++++++ src/app/settings/mobile/index.tsx | 43 ++++++++ src/app/settings/mobile/page.tsx | 7 ++ src/app/settings/page.tsx | 8 +- src/components/MobilePadding/index.tsx | 32 ++++++ src/const/layoutTokens.ts | 1 + src/features/AgentSetting/AgentMeta/index.tsx | 1 - .../AgentPlugin/MarketSettingModal.tsx | 45 ++++++--- src/features/MobileTabBar/index.tsx | 18 +++- src/features/PluginDevModal/PluginPreview.tsx | 15 ++- src/features/PluginDevModal/index.tsx | 24 +++-- src/features/SideBar/BottomActions.tsx | 6 +- src/features/SideBar/TopActions.tsx | 9 +- src/locales/default/common.ts | 2 +- src/locales/default/plugin.ts | 3 +- .../global/hooks/useSwitchSettingsOnInit.ts | 9 ++ src/store/global/initialState.ts | 17 +++- src/store/global/store.ts | 4 - .../session/slices/chat/actions/share.ts | 2 +- src/styles/antdOverride.ts | 28 +----- src/styles/global.ts | 9 ++ 65 files changed, 582 insertions(+), 381 deletions(-) rename src/app/settings/{features/Settings => agent}/Agent.tsx (100%) create mode 100644 src/app/settings/agent/index.tsx create mode 100644 src/app/settings/agent/page.tsx rename src/app/settings/{features/Settings => common}/Common.tsx (98%) create mode 100644 src/app/settings/common/index.tsx create mode 100644 src/app/settings/common/page.tsx delete mode 100644 src/app/settings/features/Banner/index.tsx delete mode 100644 src/app/settings/features/Settings/index.tsx create mode 100644 src/app/settings/features/SideBar/Item.tsx create mode 100644 src/app/settings/features/SideBar/List.tsx create mode 100644 src/app/settings/features/SideBar/index.tsx rename src/app/settings/{features/Settings => llm}/LLM/Checker.tsx (100%) rename src/app/settings/{features/Settings => llm}/LLM/ModelList.tsx (100%) rename src/app/settings/{features/Settings => llm}/LLM/getModelList.ts (100%) rename src/app/settings/{features/Settings => llm}/LLM/index.tsx (96%) create mode 100644 src/app/settings/llm/index.tsx create mode 100644 src/app/settings/llm/page.tsx create mode 100644 src/app/settings/mobile/ExtraList.tsx create mode 100644 src/app/settings/mobile/index.tsx create mode 100644 src/app/settings/mobile/page.tsx create mode 100644 src/components/MobilePadding/index.tsx create mode 100644 src/store/global/hooks/useSwitchSettingsOnInit.ts diff --git a/locales/en_US/common.json b/locales/en_US/common.json index 20a13dbeb2..096f4a3bc3 100644 --- a/locales/en_US/common.json +++ b/locales/en_US/common.json @@ -36,7 +36,7 @@ "historyRange": "History Range", "import": "Import Configuration", "inbox": { - "defaultMessage": "Hello, I'm your intelligent agent. You can ask me any questions and I will do my best to answer you. If you need a more professional or customized agent, you can click + to create a custom agent.", + "defaultMessage": "Hello, I'm your intelligent agent. You can ask me any questions and I will do my best to answer you. If you need a more professional or customized agent, you can click `+` to create a custom agent.", "desc": "Activate the brain cluster and spark your thinking. Your intelligent agent is here to communicate with you about everything.", "title": "Chat Freely" }, diff --git a/locales/ru_RU/common.json b/locales/ru_RU/common.json index 25f17a3046..023da79ad5 100644 --- a/locales/ru_RU/common.json +++ b/locales/ru_RU/common.json @@ -36,7 +36,7 @@ "historyRange": "Исторический диапазон", "import": "Импорт конфига", "inbox": { - "defaultMessage": "Hello, I'm your intelligent assistant. You can ask me any questions and I will do my best to answer you. If you need a more professional or customized assistant, you can click + to create a custom assistant.", + "defaultMessage": "Hello, I'm your intelligent assistant. You can ask me any questions and I will do my best to answer you. If you need a more professional or customized assistant, you can click `+` to create a custom assistant.", "desc": "Activate the brain cluster and spark your thinking. Your intelligent assistant is here to communicate with you about everything.", "title": "Chat Freely" }, diff --git a/locales/zh_CN/common.json b/locales/zh_CN/common.json index e3318a7f39..59d7c18cae 100644 --- a/locales/zh_CN/common.json +++ b/locales/zh_CN/common.json @@ -36,7 +36,7 @@ "historyRange": "历史范围", "import": "导入配置", "inbox": { - "defaultMessage": "你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击+创建自定义助手", + "defaultMessage": "你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击`+`创建自定义助手", "desc": "开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切", "title": "随便聊聊" }, diff --git a/locales/zh_TW/common.json b/locales/zh_TW/common.json index 4ab001b3c1..6140754c82 100644 --- a/locales/zh_TW/common.json +++ b/locales/zh_TW/common.json @@ -36,7 +36,7 @@ "historyRange": "歷史範圍", "import": "匯入設定", "inbox": { - "defaultMessage": "您好，我是您的智慧助理。您可以問我任何問題，我會盡力回答您。如果您需要更專業或自訂的助理，您可以點選 + 來建立一個自訂助理。", + "defaultMessage": "您好，我是您的智慧助理。您可以問我任何問題，我會盡力回答您。如果您需要更專業或自訂的助理，您可以點選 `+` 來建立一個自訂助理。", "desc": "啟動思維並激發你的創意。你的智慧助理已經準備好與你討論所有事情。", "title": "隨便聊聊" }, diff --git a/public/images/screenshot_background.webp b/public/images/screenshot_background.webp index aa1c56bdffaad0b6fc61aeb46d14461bb6dc0ab8..97b0b82825477e1bfab53f43ce00e3569d1c90cd 100644 GIT binary patch delta 4741 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 { const { t } = useTranslation('common'); const router = useRouter(); - const [isInbox, title, model] = useSessionStore((s) => [ + const [isInbox, title] = useSessionStore((s) => [ sessionSelectors.isInboxSession(s), agentSelectors.currentAgentTitle(s), - agentSelectors.currentAgentModel(s), ]); const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]); @@ -25,17 +26,21 @@ const MobileHeader = memo(() => { return ( } + center={} onBackClick={() => router.push('/chat')} right={ <> - toggleConfig()} /> + + toggleConfig()} + size={MOBILE_HEADER_ICON_SIZE} + /> {!isInbox && ( { - router.push(pathString('/chat/settings', { hash: location.hash })); - }} + onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))} + size={MOBILE_HEADER_ICON_SIZE} /> )} diff --git a/src/app/chat/features/Header/ShareButton/Inner.tsx b/src/app/chat/features/Header/ShareButton/Inner.tsx index 2a4304e676..99cdcfb70e 100644 --- a/src/app/chat/features/Header/ShareButton/Inner.tsx +++ b/src/app/chat/features/Header/ShareButton/Inner.tsx @@ -5,6 +5,7 @@ import { memo, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; +import MobilePadding from '@/components/MobilePadding'; import { FORM_STYLE } from '@/const/layoutTokens'; import { useGlobalStore } from '@/store/global'; import { useSessionStore } from '@/store/session'; @@ -89,33 +90,37 @@ const Inner = memo(() => { return ( - setTab(value as Tab)} - options={options} - style={{ width: '100%' }} - value={tab} - /> -

- {tab === Tab.Screenshot && ( - - )} - {tab === Tab.ShareGPT && ( - - )} + onChange={(value) => setTab(value as Tab)} + options={options} + style={{ width: '100%' }} + value={tab} + /> + + + + {tab === Tab.Screenshot && ( + + )} + {tab === Tab.ShareGPT && ( + + )} + ); }); diff --git a/src/app/chat/features/Header/ShareButton/index.tsx b/src/app/chat/features/Header/ShareButton/index.tsx index 91017bae20..923fd1ef3d 100644 --- a/src/app/chat/features/Header/ShareButton/index.tsx +++ b/src/app/chat/features/Header/ShareButton/index.tsx @@ -1,8 +1,10 @@ import { ActionIcon, Modal } from '@lobehub/ui'; +import { useResponsive } from 'antd-style'; import { Share2 } from 'lucide-react'; import { memo, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens'; import { useSessionStore } from '@/store/session'; import Inner from './Inner'; @@ -11,6 +13,9 @@ const ShareButton = memo(() => { const [isModalOpen, setIsModalOpen] = useState(false); const { t } = useTranslation('common'); const [shareLoading] = useSessionStore((s) => [s.shareLoading]); + const { mobile } = useResponsive(); + + const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 }; return ( <> @@ -18,7 +23,7 @@ const ShareButton = memo(() => { icon={Share2} loading={shareLoading} onClick={() => setIsModalOpen(true)} - size={{ fontSize: 24 }} + size={size} title={t('share')} /> { return ( - - - + + createSession()} diff --git a/src/app/chat/features/SessionList/Header/Mobile.tsx b/src/app/chat/features/SessionList/Header/Mobile.tsx index d0cb04d2e3..61f6f15608 100644 --- a/src/app/chat/features/SessionList/Header/Mobile.tsx +++ b/src/app/chat/features/SessionList/Header/Mobile.tsx @@ -1,10 +1,11 @@ -import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui'; +import { ActionIcon, Avatar, Logo, MobileNavBar } from '@lobehub/ui'; import { createStyles } from 'antd-style'; -import { MessageSquarePlus, Settings2 } from 'lucide-react'; +import { MessageSquarePlus } from 'lucide-react'; import { useRouter } from 'next/navigation'; import { memo } from 'react'; -import AvatarWithUpload from '@/features/AvatarWithUpload'; +import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens'; +import { useGlobalStore } from '@/store/global'; import { useSessionStore } from '@/store/session'; export const useStyles = createStyles(({ css, token }) => ({ @@ -20,21 +21,21 @@ export const useStyles = createStyles(({ css, token }) => ({ const Header = memo(() => { const [createSession] = useSessionStore((s) => [s.createSession]); const router = useRouter(); - + const avatar = useGlobalStore((st) => st.settings.avatar); return ( } - left={} + left={ +
router.push('/settings/mobile')} style={{ marginLeft: 8 }}> + {avatar ? : } +
+ } right={ - <> - createSession()} /> - { - router.push('/settings'); - }} - /> - + createSession()} + size={MOBILE_HEADER_ICON_SIZE} + /> } /> ); diff --git a/src/app/chat/features/Sidebar/Mobile.tsx b/src/app/chat/features/Sidebar/Mobile.tsx index 8a223edebb..245ee61332 100644 --- a/src/app/chat/features/Sidebar/Mobile.tsx +++ b/src/app/chat/features/Sidebar/Mobile.tsx @@ -1,14 +1,10 @@ -import { ActionIcon } from '@lobehub/ui'; -import { Drawer } from 'antd'; -import { useTheme } from 'antd-style'; -import { X } from 'lucide-react'; +import { Modal } from '@lobehub/ui'; import { PropsWithChildren, memo } from 'react'; import { useTranslation } from 'react-i18next'; import { useGlobalStore } from '@/store/global'; const Mobile = memo(({ children }) => { - const theme = useTheme(); const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [ s.preference.mobileShowTopic, s.toggleMobileTopic, @@ -17,19 +13,9 @@ const Mobile = memo(({ children }) => { const { t } = useTranslation('common'); return ( - } - drawerStyle={{ background: theme.colorBgContainer }} - headerStyle={{ padding: '8px 4px' }} - height={'75vh'} - onClose={() => toggleConfig(false)} - open={showAgentSettings} - placement={'bottom'} - title={t('topic.title')} - > + toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}> {children} - + ); }); diff --git a/src/app/chat/layout.desktop.tsx b/src/app/chat/layout.desktop.tsx index 6c168d016c..55ececd597 100644 --- a/src/app/chat/layout.desktop.tsx +++ b/src/app/chat/layout.desktop.tsx @@ -3,11 +3,12 @@ import { Flexbox } from 'react-layout-kit'; import AppLayout from '@/layout/AppLayout'; import { useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import { Sessions } from './features/SessionList'; const ChatLayout = memo(({ children }) => { - useSwitchSideBarOnInit('chat'); + useSwitchSideBarOnInit(SidebarTabKey.Chat); return ( diff --git a/src/app/chat/layout.mobile.tsx b/src/app/chat/layout.mobile.tsx index 6b35d8f996..fa58ae74a5 100644 --- a/src/app/chat/layout.mobile.tsx +++ b/src/app/chat/layout.mobile.tsx @@ -2,12 +2,13 @@ import { memo } from 'react'; import AppMobileLayout from '@/layout/AppMobileLayout'; import { useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import { Sessions } from './features/SessionList'; import Header from './features/SessionList/Header'; const ChatMobileLayout = memo(() => { - useSwitchSideBarOnInit('chat'); + useSwitchSideBarOnInit(SidebarTabKey.Chat); return ( } showTabBar> diff --git a/src/app/chat/settings/features/Header/index.tsx b/src/app/chat/settings/features/Header/index.tsx index c9b11eb108..1dc7c8ee56 100644 --- a/src/app/chat/settings/features/Header/index.tsx +++ b/src/app/chat/settings/features/Header/index.tsx @@ -1,10 +1,11 @@ import { ActionIcon } from '@lobehub/ui'; import { Dropdown, MenuProps } from 'antd'; import { useResponsive } from 'antd-style'; -import { HardDriveDownload, Share2 } from 'lucide-react'; +import { HardDriveDownload } from 'lucide-react'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens'; import { exportSingleAgent, exportSingleSession } from '@/helpers/export'; import { useSessionStore } from '@/store/session'; @@ -42,11 +43,10 @@ const Header = memo<{ mobile?: boolean }>(() => { [], ); - const size = mobile ? undefined : { fontSize: 24 }; + const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 }; return ( - diff --git a/src/app/chat/settings/layout.mobile.tsx b/src/app/chat/settings/layout.mobile.tsx index 6684b40ac1..9103c07c25 100644 --- a/src/app/chat/settings/layout.mobile.tsx +++ b/src/app/chat/settings/layout.mobile.tsx @@ -1,18 +1,11 @@ import { PropsWithChildren, memo } from 'react'; -import { Flexbox } from 'react-layout-kit'; import AppMobileLayout from '@/layout/AppMobileLayout'; import Header from './features/Header'; const MobileLayout = memo(({ children }) => { - return ( - }> - - {children} - - - ); + return }>{children}; }); export default MobileLayout; diff --git a/src/app/market/features/AgentCard/AgentCardBanner.tsx b/src/app/market/features/AgentCard/AgentCardBanner.tsx index ae039a4dca..0f6730a711 100644 --- a/src/app/market/features/AgentCard/AgentCardBanner.tsx +++ b/src/app/market/features/AgentCard/AgentCardBanner.tsx @@ -39,7 +39,7 @@ interface AgentCardBannerProps extends DivProps { } const AgentCardBanner = memo( - ({ meta, className, mask, size = 8, maskColor, ...props }) => { + ({ meta, className, mask, size = 8, maskColor, children, ...props }) => { const { styles, theme, cx } = useStyles(maskColor); return ( @@ -56,6 +56,7 @@ const AgentCardBanner = memo( style={{ transform: `scale(${size})` }} /> {mask &&
} + {children} ); }, diff --git a/src/app/market/features/Header/Mobile.tsx b/src/app/market/features/Header/Mobile.tsx index ba140d1fea..db13c46d5b 100644 --- a/src/app/market/features/Header/Mobile.tsx +++ b/src/app/market/features/Header/Mobile.tsx @@ -1,27 +1,8 @@ -import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui'; -import { Settings2 } from 'lucide-react'; -import { useRouter } from 'next/navigation'; +import { Logo, MobileNavBar } from '@lobehub/ui'; import { memo } from 'react'; -import AvatarWithUpload from '@/features/AvatarWithUpload'; - const Header = memo(() => { - const router = useRouter(); - - return ( - } - left={} - right={ - { - router.push('/settings'); - }} - /> - } - /> - ); + return } />; }); export default Header; diff --git a/src/app/market/features/SideBar/AgentInfo/Header.tsx b/src/app/market/features/SideBar/AgentInfo/Header.tsx index 00a46f85e7..97b6712cd7 100644 --- a/src/app/market/features/SideBar/AgentInfo/Header.tsx +++ b/src/app/market/features/SideBar/AgentInfo/Header.tsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'; import { Center } from 'react-layout-kit'; import { useGlobalStore } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import { agentMarketSelectors, useMarketStore } from '@/store/market'; import { useSessionStore } from '@/store/session'; @@ -54,7 +55,7 @@ const Header = memo(() => { if (!agentItem) return; createSession({ config, meta }); - switchSideBar('chat'); + switchSideBar(SidebarTabKey.Chat); }} type={'primary'} > diff --git a/src/app/market/features/SideBar/AgentInfo/index.tsx b/src/app/market/features/SideBar/AgentInfo/index.tsx index c0e3013914..fa5f784100 100644 --- a/src/app/market/features/SideBar/AgentInfo/index.tsx +++ b/src/app/market/features/SideBar/AgentInfo/index.tsx @@ -1,4 +1,5 @@ import { Markdown, TabsNav } from '@lobehub/ui'; +import { useResponsive } from 'antd-style'; import { memo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; @@ -22,7 +23,8 @@ const AgentModalInner = memo(() => { s.useFetchAgent, s.currentIdentifier, ]); - const { styles } = useStyles(); + const { styles, theme } = useStyles(); + const { mobile } = useResponsive(); const { data, isLoading } = useFetchAgent(currentIdentifier); const { t } = useTranslation('market'); const [tab, setTab] = useState(InfoTabs.prompt); @@ -34,7 +36,13 @@ const AgentModalInner = memo(() => { return ( <> - +
(({ children }) => { - const theme = useTheme(); const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [ agentMarketSelectors.showSideBar(s), s.deactivateAgent, @@ -17,19 +13,9 @@ const Mobile = memo(({ children }) => { const { t } = useTranslation('market'); return ( - } - drawerStyle={{ background: theme.colorBgLayout }} - headerStyle={{ padding: '8px 4px' }} - height={'75vh'} - onClose={deactivateAgent} - open={showAgentSidebar} - placement={'bottom'} - title={t('sidebar.title')} - > + {children} - + ); }); diff --git a/src/app/market/layout.desktop.tsx b/src/app/market/layout.desktop.tsx index 7cbbc03949..7c7f73f237 100644 --- a/src/app/market/layout.desktop.tsx +++ b/src/app/market/layout.desktop.tsx @@ -6,6 +6,7 @@ import { Center, Flexbox } from 'react-layout-kit'; import SafeSpacing from '@/components/SafeSpacing'; import { MAX_WIDTH } from '@/const/layoutTokens'; import { useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import AppLayout from '../../layout/AppLayout'; import Header from './features/Header'; @@ -27,7 +28,7 @@ const useStyles = createStyles(({ css }) => ({ const MarketLayout = memo(({ children }) => { const { theme, styles } = useStyles(); - useSwitchSideBarOnInit('market'); + useSwitchSideBarOnInit(SidebarTabKey.Market); return ( diff --git a/src/app/market/layout.mobile.tsx b/src/app/market/layout.mobile.tsx index 2d3e52adc1..a34cd09fbd 100644 --- a/src/app/market/layout.mobile.tsx +++ b/src/app/market/layout.mobile.tsx @@ -3,12 +3,13 @@ import { Flexbox } from 'react-layout-kit'; import AppMobileLayout from '@/layout/AppMobileLayout'; import { useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import Header from './features/Header'; import SideBar from './features/SideBar'; const MarketLayout = memo<{ children: ReactNode }>(({ children }) => { - useSwitchSideBarOnInit('market'); + useSwitchSideBarOnInit(SidebarTabKey.Market); return ( } showTabBar> diff --git a/src/app/settings/features/Settings/Agent.tsx b/src/app/settings/agent/Agent.tsx similarity index 100% rename from src/app/settings/features/Settings/Agent.tsx rename to src/app/settings/agent/Agent.tsx diff --git a/src/app/settings/agent/index.tsx b/src/app/settings/agent/index.tsx new file mode 100644 index 0000000000..2e976df1cd --- /dev/null +++ b/src/app/settings/agent/index.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { memo } from 'react'; + +import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit'; +import { SettingsTabs } from '@/store/global/initialState'; + +import Layout from '../index'; +import Agent from './Agent'; + +const AgentSetting = memo(() => { + useSwitchSideBarOnInit(SettingsTabs.Agent); + return ( + + + + ); +}); + +export default AgentSetting; diff --git a/src/app/settings/agent/page.tsx b/src/app/settings/agent/page.tsx new file mode 100644 index 0000000000..7d7a98c07b --- /dev/null +++ b/src/app/settings/agent/page.tsx @@ -0,0 +1,7 @@ +import Page from './index'; + +const Index = () => { + return ; +}; + +export default Index; diff --git a/src/app/settings/features/Settings/Common.tsx b/src/app/settings/common/Common.tsx similarity index 98% rename from src/app/settings/features/Settings/Common.tsx rename to src/app/settings/common/Common.tsx index 583386f8b2..c0f06317da 100644 --- a/src/app/settings/features/Settings/Common.tsx +++ b/src/app/settings/common/Common.tsx @@ -15,7 +15,7 @@ import { useSessionStore } from '@/store/session'; import { ConfigKeys } from '@/types/settings'; import { switchLang } from '@/utils/switchLang'; -import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches'; +import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches'; type SettingItemGroup = ItemGroup & { children: { diff --git a/src/app/settings/common/index.tsx b/src/app/settings/common/index.tsx new file mode 100644 index 0000000000..0643ad4b9d --- /dev/null +++ b/src/app/settings/common/index.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { memo } from 'react'; + +import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit'; +import { SettingsTabs } from '@/store/global/initialState'; + +import Layout from '../index'; +import Common from './Common'; + +const CommonSetting = memo(() => { + useSwitchSideBarOnInit(SettingsTabs.Common); + return ( + + + + ); +}); + +export default CommonSetting; diff --git a/src/app/settings/common/page.tsx b/src/app/settings/common/page.tsx new file mode 100644 index 0000000000..7d7a98c07b --- /dev/null +++ b/src/app/settings/common/page.tsx @@ -0,0 +1,7 @@ +import Page from './index'; + +const Index = () => { + return ; +}; + +export default Index; diff --git a/src/app/settings/features/Banner/index.tsx b/src/app/settings/features/Banner/index.tsx deleted file mode 100644 index 8a579a5d1a..0000000000 --- a/src/app/settings/features/Banner/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { GridBackground, Icon, Logo } from '@lobehub/ui'; -import { createStyles, useResponsive } from 'antd-style'; -import { PackageCheck } from 'lucide-react'; -import { rgba } from 'polished'; -import { ReactNode, memo } from 'react'; -import { Flexbox } from 'react-layout-kit'; - -import pkg from '@/../package.json'; - -const useStyles = createStyles(({ css, token, isDarkMode, prefixCls }) => ({ - background: css` - position: absolute; - bottom: -10%; - left: 0; - width: 100%; - `, - banner: css` - position: relative; - - overflow: hidden; - - width: 100%; - max-width: 1024px; - height: 160px; - padding: 4px; - - background: radial-gradient( - 120% 120% at 20% 100%, - ${isDarkMode ? rgba(token.colorBgContainer, 0.5) : token.colorBgContainer} 32%, - ${isDarkMode ? token.colorPrimaryBgHover : rgba(token.colorPrimaryBgHover, 0.3)} 50%, - ${isDarkMode ? token.colorPrimaryHover : rgba(token.colorPrimaryHover, 0.3)} 100% - ); - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusLG}px; - `, - logo: css` - position: absolute; - top: 50%; - left: 32px; - transform: translateY(-50%); - `, - mobile: css` - margin-top: -16px; - - .${prefixCls}-tabs-tab, .${prefixCls}-tabs-tab + .${prefixCls}-tabs-tab { - margin: 4px 8px !important; - } - `, - tag: css` - position: absolute; - top: 6px; - right: 12px; - - font-family: ${token.fontFamilyCode}; - font-size: 12px; - color: ${isDarkMode ? token.colorPrimaryBg : token.colorPrimaryActive}; - - opacity: 0.5; - `, -})); - -const Banner = memo<{ nav: ReactNode }>(({ nav }) => { - const { styles, theme } = useStyles(); - const { mobile } = useResponsive(); - - if (mobile) - return ( - - {nav} - - ); - - return ( - - - {nav} -
- -
- - -
{`${pkg.version}`}
- - - ); -}); - -export default Banner; diff --git a/src/app/settings/features/Header/Desktop.tsx b/src/app/settings/features/Header/Desktop.tsx index fe746f370d..bf6b74fb84 100644 --- a/src/app/settings/features/Header/Desktop.tsx +++ b/src/app/settings/features/Header/Desktop.tsx @@ -1,13 +1,20 @@ -import { ChatHeader, ChatHeaderTitle, Logo } from '@lobehub/ui'; +import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; +import { useGlobalStore } from '@/store/global'; + const Index = memo(() => { const { t } = useTranslation('setting'); + const tab = useGlobalStore((s) => s.settingsTab); return ( } />} + left={ +
+ +
+ } /> ); }); diff --git a/src/app/settings/features/Header/Mobile.tsx b/src/app/settings/features/Header/Mobile.tsx index 133e2bc152..950e91e04d 100644 --- a/src/app/settings/features/Header/Mobile.tsx +++ b/src/app/settings/features/Header/Mobile.tsx @@ -3,14 +3,17 @@ import { useRouter } from 'next/navigation'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; +import { useGlobalStore } from '@/store/global'; + const Header = memo(() => { const { t } = useTranslation('setting'); + const tab = useGlobalStore((s) => s.settingsTab); const router = useRouter(); return ( } - onBackClick={() => router.push('/chat')} + center={} + onBackClick={() => router.back()} showBackButton /> ); diff --git a/src/app/settings/features/Settings/index.tsx b/src/app/settings/features/Settings/index.tsx deleted file mode 100644 index a35c2bdcbd..0000000000 --- a/src/app/settings/features/Settings/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { TabsNav } from '@lobehub/ui'; -import { memo, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Center } from 'react-layout-kit'; - -import { useGlobalStore } from '@/store/global'; - -import Banner from '../Banner'; -import Agent from './Agent'; -import Common from './Common'; -import LLM from './LLM'; - -const Settings = memo(() => { - const { t } = useTranslation('setting'); - - const [tab, setTab] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]); - - const content = useMemo(() => { - switch (tab) { - case 'llm': { - return ; - } - case 'agent': { - return ; - } - default: - case 'common': { - return ; - } - } - }, [tab]); - - return ( -
- setTab(e as any)} - /> - } - /> - {content} -
- ); -}); - -export default Settings; diff --git a/src/app/settings/features/SideBar/Item.tsx b/src/app/settings/features/SideBar/Item.tsx new file mode 100644 index 0000000000..b289d517ef --- /dev/null +++ b/src/app/settings/features/SideBar/Item.tsx @@ -0,0 +1,39 @@ +import { Icon, List } from '@lobehub/ui'; +import { createStyles, useResponsive } from 'antd-style'; +import { ChevronRight, type LucideIcon } from 'lucide-react'; +import { CSSProperties, ReactNode, memo } from 'react'; + +const { Item } = List; + +const useStyles = createStyles(({ css }) => ({ + container: css` + padding-top: 20px; + padding-bottom: 20px; + `, +})); + +export interface ItemProps { + active?: boolean; + className?: string; + icon: LucideIcon; + label: ReactNode; + style?: CSSProperties; +} + +const SettingItem = memo(({ label, icon, active = false, style, className }) => { + const { cx, styles } = useStyles(); + const { mobile } = useResponsive(); + return ( + } + className={cx(styles.container, className)} + style={style} + title={label as string} + > + {mobile && } + + ); +}); + +export default SettingItem; diff --git a/src/app/settings/features/SideBar/List.tsx b/src/app/settings/features/SideBar/List.tsx new file mode 100644 index 0000000000..66e26377c1 --- /dev/null +++ b/src/app/settings/features/SideBar/List.tsx @@ -0,0 +1,30 @@ +import { useResponsive } from 'antd-style'; +import { Bot, Settings2, Webhook } from 'lucide-react'; +import { useRouter } from 'next/navigation'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useGlobalStore } from '@/store/global'; +import { SettingsTabs } from '@/store/global/initialState'; + +import Item from './Item'; + +const List = memo(() => { + const { t } = useTranslation('setting'); + const tab = useGlobalStore((s) => s.settingsTab); + const router = useRouter(); + const { mobile } = useResponsive(); + const items = [ + { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common }, + { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM }, + { icon: Bot, label: t('tab.agent'), value: SettingsTabs.Agent }, + ]; + + return items.map(({ value, icon, label }) => ( +
router.push(`/settings/${value}`)}> + +
+ )); +}); + +export default List; diff --git a/src/app/settings/features/SideBar/index.tsx b/src/app/settings/features/SideBar/index.tsx new file mode 100644 index 0000000000..5b0396b955 --- /dev/null +++ b/src/app/settings/features/SideBar/index.tsx @@ -0,0 +1,38 @@ +import { DraggablePanelBody, Logo } from '@lobehub/ui'; +import { createStyles } from 'antd-style'; +import { memo } from 'react'; +import { Flexbox } from 'react-layout-kit'; + +import FolderPanel from '@/features/FolderPanel'; + +import List from './List'; + +const useStyles = createStyles(({ stylish, token, css }) => ({ + body: stylish.noScrollbar, + logo: css` + fill: ${token.colorText}; + `, + top: css` + position: sticky; + top: 0; + `, +})); + +const SideBar = memo(() => { + const { styles } = useStyles(); + + return ( + + + +
+ +
+ + + + + ); +}); + +export default SideBar; diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx index bf720d9eca..99ef9d4b0a 100644 --- a/src/app/settings/index.tsx +++ b/src/app/settings/index.tsx @@ -2,33 +2,31 @@ import { useResponsive } from 'antd-style'; import Head from 'next/head'; -import { memo } from 'react'; +import { ReactNode, memo } from 'react'; import { useTranslation } from 'react-i18next'; import { useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle'; -import Settings from './features/Settings'; import DesktopLayout from './layout.desktop'; import MobileLayout from './layout.mobile'; -const Setting = memo(() => { +const Setting = memo<{ children: ReactNode }>(({ children }) => { const { mobile } = useResponsive(); const { t } = useTranslation('setting'); const pageTitle = genSiteHeadTitle(t('header.global')); const RenderLayout = mobile ? MobileLayout : DesktopLayout; - useSwitchSideBarOnInit('settings'); + useSwitchSideBarOnInit(SidebarTabKey.Setting); return ( <> {pageTitle} - - - + {children} ); }); diff --git a/src/app/settings/layout.desktop.tsx b/src/app/settings/layout.desktop.tsx index 7e9e29de44..ec89c4da70 100644 --- a/src/app/settings/layout.desktop.tsx +++ b/src/app/settings/layout.desktop.tsx @@ -1,19 +1,23 @@ import { ReactNode, memo } from 'react'; -import { Flexbox } from 'react-layout-kit'; +import { Center, Flexbox } from 'react-layout-kit'; import SafeSpacing from '@/components/SafeSpacing'; import AppLayout from '@/layout/AppLayout'; import Header from './features/Header'; +import SideBar from './features/SideBar'; const SettingLayout = memo<{ children: ReactNode }>(({ children }) => { return ( +
- {children} +
+ {children} +
diff --git a/src/app/settings/layout.mobile.tsx b/src/app/settings/layout.mobile.tsx index 303d563f92..462e505150 100644 --- a/src/app/settings/layout.mobile.tsx +++ b/src/app/settings/layout.mobile.tsx @@ -8,9 +8,7 @@ import Header from './features/Header'; const SettingLayout = memo<{ children: ReactNode }>(({ children }) => { return ( }> - - {children} - + {children} ); }); diff --git a/src/app/settings/features/Settings/LLM/Checker.tsx b/src/app/settings/llm/LLM/Checker.tsx similarity index 100% rename from src/app/settings/features/Settings/LLM/Checker.tsx rename to src/app/settings/llm/LLM/Checker.tsx diff --git a/src/app/settings/features/Settings/LLM/ModelList.tsx b/src/app/settings/llm/LLM/ModelList.tsx similarity index 100% rename from src/app/settings/features/Settings/LLM/ModelList.tsx rename to src/app/settings/llm/LLM/ModelList.tsx diff --git a/src/app/settings/features/Settings/LLM/getModelList.ts b/src/app/settings/llm/LLM/getModelList.ts similarity index 100% rename from src/app/settings/features/Settings/LLM/getModelList.ts rename to src/app/settings/llm/LLM/getModelList.ts diff --git a/src/app/settings/features/Settings/LLM/index.tsx b/src/app/settings/llm/LLM/index.tsx similarity index 96% rename from src/app/settings/features/Settings/LLM/index.tsx rename to src/app/settings/llm/LLM/index.tsx index fdacd6b9f6..3e4890524b 100644 --- a/src/app/settings/features/Settings/LLM/index.tsx +++ b/src/app/settings/llm/LLM/index.tsx @@ -1,4 +1,4 @@ -import { Form, Markdown } from '@lobehub/ui'; +import { Form, type ItemGroup, Markdown } from '@lobehub/ui'; import { Form as AntForm, AutoComplete, Input, Switch } from 'antd'; import { createStyles } from 'antd-style'; import { debounce } from 'lodash-es'; @@ -49,7 +49,7 @@ const LLM = memo(() => { const useAzure = useGlobalStore((s) => s.settings.languageModel.openAI.useAzure); - const openAI = { + const openAI: ItemGroup = { children: [ { children: ( @@ -94,6 +94,7 @@ const LLM = memo(() => { ), desc: t('llm.OpenAI.useAzure.desc'), label: t('llm.OpenAI.useAzure.title'), + minWidth: undefined, name: [configKey, 'openAI', 'useAzure'], valuePropName: 'checked', }, @@ -124,6 +125,7 @@ const LLM = memo(() => { children: , desc: t('llm.OpenAI.check.desc'), label: t('llm.OpenAI.check.title'), + minWidth: undefined, }, // { // children: useAzure ? {t('llm.OpenAI.models.notSupport')} : , diff --git a/src/app/settings/llm/index.tsx b/src/app/settings/llm/index.tsx new file mode 100644 index 0000000000..643e0f6f65 --- /dev/null +++ b/src/app/settings/llm/index.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { memo } from 'react'; + +import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit'; +import { SettingsTabs } from '@/store/global/initialState'; + +import Layout from '../index'; +import LLM from './LLM'; + +const LLMSetting = memo(() => { + useSwitchSideBarOnInit(SettingsTabs.LLM); + return ( + + + + ); +}); + +export default LLMSetting; diff --git a/src/app/settings/llm/page.tsx b/src/app/settings/llm/page.tsx new file mode 100644 index 0000000000..7d7a98c07b --- /dev/null +++ b/src/app/settings/llm/page.tsx @@ -0,0 +1,7 @@ +import Page from './index'; + +const Index = () => { + return ; +}; + +export default Index; diff --git a/src/app/settings/mobile/ExtraList.tsx b/src/app/settings/mobile/ExtraList.tsx new file mode 100644 index 0000000000..ac950ac4e8 --- /dev/null +++ b/src/app/settings/mobile/ExtraList.tsx @@ -0,0 +1,61 @@ +import { Upload } from 'antd'; +import { useResponsive } from 'antd-style'; +import { Feather, FileClock, HardDriveDownload, HardDriveUpload, Heart } from 'lucide-react'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url'; +import { useExportConfig } from '@/hooks/useExportConfig'; +import { useImportConfig } from '@/hooks/useImportConfig'; +import { useGlobalStore } from '@/store/global'; + +import Item from '../features/SideBar/Item'; + +const ExtraList = memo(() => { + const { t } = useTranslation('common'); + const { exportAll } = useExportConfig(); + const { importConfig } = useImportConfig(); + const tab = useGlobalStore((s) => s.settingsTab); + const { mobile } = useResponsive(); + const items = [ + { + icon: HardDriveDownload, + label: t('export'), + onClick: exportAll, + value: 'export', + }, + { + icon: Feather, + label: t('feedback'), + onClick: () => window.open(FEEDBACK, '__blank'), + value: 'feedback', + }, + { + icon: FileClock, + label: t('changelog'), + onClick: () => window.open(CHANGELOG, '__blank'), + value: 'changelog', + }, + { + icon: Heart, + label: t('about'), + onClick: () => window.open(ABOUT, '__blank'), + value: 'about', + }, + ]; + + return ( + <> + + + + {items.map(({ value, icon, label, onClick }) => ( +
+ +
+ ))} + + ); +}); + +export default ExtraList; diff --git a/src/app/settings/mobile/index.tsx b/src/app/settings/mobile/index.tsx new file mode 100644 index 0000000000..b359165e88 --- /dev/null +++ b/src/app/settings/mobile/index.tsx @@ -0,0 +1,43 @@ +'use client'; + +import { Divider } from 'antd'; +import { memo } from 'react'; +import { Center } from 'react-layout-kit'; + +import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner'; +import Header from '@/app/market/features/Header'; +import AvatarWithUpload from '@/features/AvatarWithUpload'; +import AppMobileLayout from '@/layout/AppMobileLayout'; +import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; +import { AVATAR } from '@/store/session/slices/chat/actions/share'; + +import List from '../features/SideBar/List'; +import ExtraList from './ExtraList'; + +const Setting = memo(() => { + const avatar = useGlobalStore((s) => s.settings.avatar); + useSwitchSideBarOnInit(SidebarTabKey.Setting); + return ( + } showTabBar> + +
+ +
+ +
+ + + + +
+ + ); +}); + +export default Setting; diff --git a/src/app/settings/mobile/page.tsx b/src/app/settings/mobile/page.tsx new file mode 100644 index 0000000000..7d7a98c07b --- /dev/null +++ b/src/app/settings/mobile/page.tsx @@ -0,0 +1,7 @@ +import Page from './index'; + +const Index = () => { + return ; +}; + +export default Index; diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 7d7a98c07b..de7a4163d0 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -1,7 +1 @@ -import Page from './index'; - -const Index = () => { - return ; -}; - -export default Index; +export { default } from './common/page'; diff --git a/src/components/MobilePadding/index.tsx b/src/components/MobilePadding/index.tsx new file mode 100644 index 0000000000..110130c4d1 --- /dev/null +++ b/src/components/MobilePadding/index.tsx @@ -0,0 +1,32 @@ +import { useResponsive } from 'antd-style'; +import { ReactNode, memo } from 'react'; +import { Flexbox } from 'react-layout-kit'; + +interface MobilePaddingProps { + bottom?: number; + children: ReactNode; + gap?: number; + left?: number; + right?: number; + top?: number; +} + +const MobilePadding = memo( + ({ children, top = 16, right = 16, left = 16, bottom = 16, gap }) => { + const { mobile } = useResponsive(); + + if (mobile) + return ( + + {children} + + ); + + return children; + }, +); + +export default MobilePadding; diff --git a/src/const/layoutTokens.ts b/src/const/layoutTokens.ts index 6402fa96cf..39e7201e9f 100644 --- a/src/const/layoutTokens.ts +++ b/src/const/layoutTokens.ts @@ -13,3 +13,4 @@ export const FORM_STYLE: FormProps = { itemMinWidth: 'max(30%,240px)', style: { maxWidth: MAX_WIDTH, width: '100%' }, }; +export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 }; diff --git a/src/features/AgentSetting/AgentMeta/index.tsx b/src/features/AgentSetting/AgentMeta/index.tsx index 042b159db1..7f8eadeb76 100644 --- a/src/features/AgentSetting/AgentMeta/index.tsx +++ b/src/features/AgentSetting/AgentMeta/index.tsx @@ -78,7 +78,6 @@ const AgentMeta = memo(() => { onChange={(backgroundColor) => updateMeta({ backgroundColor })} /> ), - divider: false, label: t('settingAgent.backgroundColor.title'), minWidth: undefined, }, diff --git a/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx index 60197e1993..d602f103a3 100644 --- a/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx +++ b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx @@ -1,9 +1,10 @@ -import { Input, Modal, Tooltip } from '@lobehub/ui'; -import { Form } from 'antd'; +import { Form, Input, Modal } from '@lobehub/ui'; +import { Alert } from 'antd'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; +import MobilePadding from '@/components/MobilePadding'; import { PLUGINS_INDEX_URL } from '@/const/url'; interface MarketSettingModalProps { @@ -15,20 +16,32 @@ const MarketSettingModal = memo(({ open, onOpenChange } const { t } = useTranslation('plugin'); return ( - onOpenChange(false)} - open={open} - title={t('settings.title')} - > - - - - - - - - + onOpenChange(false)} open={open} title={t('setting')}> + + + + +
+ ), + desc: t('settings.modalDesc'), + label: t('settings.indexUrl.title'), + }, + ], + title: t('settings.title'), + }, + ]} + /> ); diff --git a/src/features/MobileTabBar/index.tsx b/src/features/MobileTabBar/index.tsx index 82f71f01a9..b3a328d7aa 100644 --- a/src/features/MobileTabBar/index.tsx +++ b/src/features/MobileTabBar/index.tsx @@ -1,12 +1,13 @@ import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui'; import { createStyles } from 'antd-style'; -import { Bot, MessageSquare } from 'lucide-react'; +import { Bot, MessageSquare, User } from 'lucide-react'; import { useRouter } from 'next/navigation'; import { rgba } from 'polished'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useGlobalStore } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; const useStyles = createStyles(({ css, token }) => ({ active: css` @@ -27,20 +28,31 @@ export default memo<{ className?: string }>(({ className }) => { icon: (active) => ( ), - key: 'chat', + key: SidebarTabKey.Chat, onClick: () => { + setTab(SidebarTabKey.Chat); router.push('/chat'); }, title: t('tab.chat'), }, { icon: (active) => , - key: 'market', + key: SidebarTabKey.Market, onClick: () => { + setTab(SidebarTabKey.Market); router.push('/market'); }, title: t('tab.market'), }, + { + icon: (active) => , + key: SidebarTabKey.Setting, + onClick: () => { + setTab(SidebarTabKey.Setting); + router.push('/settings/mobile'); + }, + title: t('tab.setting'), + }, ], [t], ); diff --git a/src/features/PluginDevModal/PluginPreview.tsx b/src/features/PluginDevModal/PluginPreview.tsx index 4b104b71b0..04112f4749 100644 --- a/src/features/PluginDevModal/PluginPreview.tsx +++ b/src/features/PluginDevModal/PluginPreview.tsx @@ -1,5 +1,5 @@ import { Avatar, Form } from '@lobehub/ui'; -import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd'; +import { Form as AForm, FormInstance, Switch, Tag } from 'antd'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; @@ -28,9 +28,16 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => { }; return ( - - - + ); }); diff --git a/src/features/PluginDevModal/index.tsx b/src/features/PluginDevModal/index.tsx index bd54553ef6..5df54f7c4c 100644 --- a/src/features/PluginDevModal/index.tsx +++ b/src/features/PluginDevModal/index.tsx @@ -1,9 +1,11 @@ import { Modal } from '@lobehub/ui'; -import { App, Button, Form, Popconfirm } from 'antd'; +import { Alert, App, Button, Form, Popconfirm } from 'antd'; +import { useResponsive } from 'antd-style'; import { memo, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; +import MobilePadding from '@/components/MobilePadding'; import { CustomPlugin } from '@/types/plugin'; import ManifestForm from './ManifestForm'; @@ -25,7 +27,7 @@ const DevModal = memo( const isEditMode = mode === 'edit'; const { t } = useTranslation('plugin'); const { message } = App.useApp(); - + const { mobile } = useResponsive(); const [submitting, setSubmitting] = useState(false); const [form] = Form.useForm(); useEffect(() => { @@ -98,14 +100,16 @@ const DevModal = memo( open={open} title={t('dev.title')} > - - {t('dev.modalDesc')} - {/*, key: 'meta', label: t('dev.tabs.meta') },*/} - {/* { children: , key: 'manifest', label: t('dev.tabs.manifest') },*/} - {/* ]}*/} - {/*/>*/} + + + + {/*, key: 'meta', label: t('dev.tabs.meta') },*/} + {/* { children: , key: 'manifest', label: t('dev.tabs.manifest') },*/} + {/* ]}*/} + {/*/>*/} + diff --git a/src/features/SideBar/BottomActions.tsx b/src/features/SideBar/BottomActions.tsx index c7faa95d72..8df02cdba8 100644 --- a/src/features/SideBar/BottomActions.tsx +++ b/src/features/SideBar/BottomActions.tsx @@ -18,6 +18,7 @@ import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url'; import { useExportConfig } from '@/hooks/useExportConfig'; import { useImportConfig } from '@/hooks/useImportConfig'; import { GlobalStore } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; export interface BottomActionProps { setTab: GlobalStore['switchSideBar']; @@ -27,7 +28,6 @@ export interface BottomActionProps { const BottomActions = memo(({ tab, setTab }) => { const router = useRouter(); const { t } = useTranslation('common'); - const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig(); const { importConfig } = useImportConfig(); @@ -101,7 +101,7 @@ const BottomActions = memo(({ tab, setTab }) => { key: 'setting', label: t('setting'), onClick: () => { - setTab('settings'); + setTab(SidebarTabKey.Setting); router.push('/settings'); }, }, @@ -124,7 +124,7 @@ const BottomActions = memo(({ tab, setTab }) => { title={'Github'} /> - + ); diff --git a/src/features/SideBar/TopActions.tsx b/src/features/SideBar/TopActions.tsx index 031c8313b3..fe5bb00c29 100644 --- a/src/features/SideBar/TopActions.tsx +++ b/src/features/SideBar/TopActions.tsx @@ -5,6 +5,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { GlobalStore } from '@/store/global'; +import { SidebarTabKey } from '@/store/global/initialState'; import { useSessionStore } from '@/store/session'; export interface TopActionProps { @@ -20,25 +21,25 @@ const TopActions = memo(({ tab, setTab }) => { return ( <> { // 如果已经在 chat 路径下了，那么就不用再跳转了 if (pathname?.startsWith('/chat')) return; switchBackToChat(); - setTab('chat'); + setTab(SidebarTabKey.Chat); }} placement={'right'} size="large" title={t('tab.chat')} /> { if (pathname?.startsWith('/market')) return; router.push('/market'); - setTab('market'); + setTab(SidebarTabKey.Market); }} placement={'right'} size="large" diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts index f0aa5407e2..3247dffe71 100644 --- a/src/locales/default/common.ts +++ b/src/locales/default/common.ts @@ -38,7 +38,7 @@ export default { import: '导入配置', inbox: { defaultMessage: - '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击+创建自定义助手', + '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击`+`创建自定义助手', desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切', title: '随便聊聊', }, diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts index 793ca80c12..c8b7a540be 100644 --- a/src/locales/default/plugin.ts +++ b/src/locales/default/plugin.ts @@ -96,10 +96,11 @@ export default { plugins: { unknown: '插件检测中...', }, + setting: '插件设置', settings: { indexUrl: { title: '市场索引', - tooltip: '暂不支持编辑', + tooltip: '暂不支持在线编辑，请通过部署时环境变量进行设置', }, modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场', title: '设置插件市场', diff --git a/src/store/global/hooks/useSwitchSettingsOnInit.ts b/src/store/global/hooks/useSwitchSettingsOnInit.ts new file mode 100644 index 0000000000..74f386eb26 --- /dev/null +++ b/src/store/global/hooks/useSwitchSettingsOnInit.ts @@ -0,0 +1,9 @@ +import { SettingsTabs } from '../initialState'; +import { useGlobalStore } from '../store'; + +/** + * 切换设置侧边栏选项 + */ +export const useSwitchSideBarOnInit = (key: SettingsTabs) => { + useGlobalStore.getState().switchSettingTabs(key); +}; diff --git a/src/store/global/initialState.ts b/src/store/global/initialState.ts index a9080db3a5..df744b0967 100644 --- a/src/store/global/initialState.ts +++ b/src/store/global/initialState.ts @@ -1,9 +1,17 @@ import { DEFAULT_SETTINGS } from '@/const/settings'; import type { GlobalSettings } from '@/types/settings'; -export type SidebarTabKey = 'chat' | 'market' | 'settings'; +export enum SidebarTabKey { + Chat = 'chat', + Market = 'market', + Setting = 'settings', +} -export type SettingsTabs = 'agent' | 'common' | 'llm'; +export enum SettingsTabs { + Agent = 'agent', + Common = 'common', + LLM = 'llm', +} export interface Guide { // Topic 引导 @@ -21,7 +29,7 @@ export interface GlobalState { * 用户设置 */ settings: GlobalSettings; - settingsTab?: SettingsTabs; + settingsTab: SettingsTabs; sidebarKey: SidebarTabKey; } @@ -44,5 +52,6 @@ export const initialState: GlobalState = { showSessionPanel: true, }, settings: DEFAULT_SETTINGS, - sidebarKey: 'chat', + settingsTab: SettingsTabs.Common, + sidebarKey: SidebarTabKey.Chat, }; diff --git a/src/store/global/store.ts b/src/store/global/store.ts index 99fdd498ff..99bc916c74 100644 --- a/src/store/global/store.ts +++ b/src/store/global/store.ts @@ -69,10 +69,6 @@ const persistOptions: PersistOptions = { dbName: 'LobeHub', selectors: ['preference', 'settings'], }, - url: { - mode: 'hash', - selectors: [{ settingsTab: 'tab' }], - }, }), }; diff --git a/src/store/session/slices/chat/actions/share.ts b/src/store/session/slices/chat/actions/share.ts index 7a5b6c5684..9a93718026 100644 --- a/src/store/session/slices/chat/actions/share.ts +++ b/src/store/session/slices/chat/actions/share.ts @@ -14,7 +14,7 @@ interface ShareMessage { from: 'human' | 'gpt'; value: string; } -const AVATAR = +export const AVATAR = 'data:image/webp;base64,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'; const Footer: ShareMessage = { diff --git a/src/styles/antdOverride.ts b/src/styles/antdOverride.ts index 8787ee06bd..03f59e07ae 100644 --- a/src/styles/antdOverride.ts +++ b/src/styles/antdOverride.ts @@ -1,31 +1,7 @@ import { Theme, css } from 'antd-style'; -import { readableColor } from 'polished'; -export default ({ token, prefixCls }: { prefixCls: string; token: Theme }) => css` - .${prefixCls}-btn { - box-shadow: none; - } - - .${prefixCls}-popover { +export default ({ token }: { prefixCls: string; token: Theme }) => css` + .${token.prefixCls}-popover { z-index: 1100; } - - .${prefixCls}-slider-track, .${prefixCls}-tabs-ink-bar, .${prefixCls}-switch-checked { - background: ${token.colorPrimary} !important; - } - - .${prefixCls}-btn-primary:not(.${prefixCls}-btn-dangerous) { - color: ${readableColor(token.colorPrimary)}; - background: ${token.colorPrimary}; - - &:hover { - color: ${readableColor(token.colorPrimary)} !important; - background: ${token.colorPrimaryHover} !important; - } - - &:active { - color: ${readableColor(token.colorPrimaryActive)} !important; - background: ${token.colorPrimaryActive} !important; - } - } `; diff --git a/src/styles/global.ts b/src/styles/global.ts index 4397de71cf..2e611d65d3 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -20,4 +20,13 @@ export default ({ prefixCls }: { prefixCls: string }) => css` p { margin-bottom: 0; } + + @media (max-width: 575px) { + * { + ::-webkit-scrollbar { + width: 0; + height: 0; + } + } + } `;