From a9c163fa2bb44ee39d4b9653e8354a34ac45914c Mon Sep 17 00:00:00 2001 From: jude Date: Thu, 1 Jun 2023 18:14:37 +0800 Subject: [PATCH] chore: up prompt style & page data localstorage --- package.json | 1 + src/components/Layout/index.tsx | 11 ++- src/components/pages/chat/InputArea.tsx | 38 +++++---- src/components/pages/chat/Option.tsx | 42 ++-------- src/components/pages/prompt/Edit.tsx | 40 +++++---- src/components/pages/prompt/List.tsx | 106 ++++++++++++------------ src/components/pages/prompt/Store.tsx | 2 +- src/contexts/prompt.tsx | 2 + src/contexts/setting.tsx | 37 +++++++++ src/contexts/site.tsx | 17 ++-- src/locales/index.ts | 37 +++++---- 11 files changed, 180 insertions(+), 153 deletions(-) diff --git a/package.json b/package.json index 05c29ca..82fc29c 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "emoji-mart": "5.5.2", "github-markdown-css": "5.2.0", "i18next": "22.5.0", + "i18next-browser-languagedetector": "^7.0.2", "katex": "0.16.7", "markdown-it": "13.0.1", "nanoid": "4.0.2", diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index e79513a..b656d64 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -36,7 +36,6 @@ export default function LayoutBase(props: any) { const { title, theme, setTheme, event$ } = useSiteContext() const { surface: surfaceConfig, common: commonConfig } = useSettingContext() const router = useRouter() - const [colorBgContainer, setColorBgContainer] = useState(token.colorBgContainer) const [colorPrimary, setColorPrimary] = useState(token.colorPrimary) const [collapsed, setCollapsed] = useState(true) const [side, setSide] = useState(true) @@ -87,7 +86,6 @@ export default function LayoutBase(props: any) { default: break } - setColorBgContainer(newTheme == 'dark' ? token.colorFillContent : token.colorBgContainer) console.log('switchTheme', theme, newTheme) setTheme(newTheme) } @@ -196,13 +194,14 @@ export default function LayoutBase(props: any) { setHeadTitle(t('c.setting')) router.push('/setting') }} - ghost={getActive('/setting') ? false : true} + type={getActive('/setting') ? 'primary' : 'text'} + // ghost={getActive('/setting') ? false : true} style={{ border: getActive('/setting') ? undefined : 'none', color: getActive('/setting') ? colorPrimary : theme === 'dark' ? iconColor : '#555' }} size={'large'} icon={} > openAction('edit', { prompt: item })} + onClick={() => toEdit(item)} > { e.stopPropagation() - openAction('message', { prompt: item }) + toChat(item) }} />, ]} @@ -123,14 +96,14 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties }) style={{ alignItems: 'center' }} avatar={null} title={ - + {item.name} } description={ {item.intro || 'No intro'} @@ -181,7 +154,32 @@ function IndexPage(props: { setContent: Function; style?: React.CSSProperties }) } - onClose={() => setOpen(false)} + footer={ + + + + + } + onClose={() => { + setOpen(false) + setOpenItem(null) + }} open={open} width={578} height={'80%'} diff --git a/src/components/pages/prompt/Store.tsx b/src/components/pages/prompt/Store.tsx index c7cd5ec..44b7ea3 100644 --- a/src/components/pages/prompt/Store.tsx +++ b/src/components/pages/prompt/Store.tsx @@ -163,7 +163,7 @@ function OnlinePrompt() { } const toCopy = (item: Prompt) => { - addPrompt(item) + addPrompt({ ...item, uuid: uuidv4() }) message.success(t('prompt.copySuccess')) } diff --git a/src/contexts/prompt.tsx b/src/contexts/prompt.tsx index 4447432..7bb7a46 100644 --- a/src/contexts/prompt.tsx +++ b/src/contexts/prompt.tsx @@ -2,6 +2,7 @@ import { Prompt } from '@/types/prompt' import { createContext, useContext, useEffect, useRef, useState } from 'react' import { useRouter } from 'next/router' import storage from '@/utils/storage' +import { uuidv4 } from '@/utils' export type PromptContentType = { promptList: Array @@ -52,6 +53,7 @@ export function PromptProvider({ children }) { if (!prompt) { return } + prompt.uuid = uuidv4() console.log('addPrompt', prompt) if (!prompt?.name || !prompt?.prompt) { return diff --git a/src/contexts/setting.tsx b/src/contexts/setting.tsx index b0c1724..4ca5150 100644 --- a/src/contexts/setting.tsx +++ b/src/contexts/setting.tsx @@ -35,6 +35,43 @@ export function SettingProvider({ children }) { // console.log('window prefers-color-scheme:', window?.matchMedia('(prefers-color-scheme)')) // }, [theme]) + useEffect(() => { + storage.get('setting_common').then((res) => { + let _value = res + if (!_value) { + _value = {} + } + setCommon(_value) + }) + storage.get('setting_surface').then((res) => { + let _value = res + if (!_value) { + _value = {} + } + setSurface(_value) + }) + storage.get('setting_network').then((res) => { + let _value = res + if (!_value) { + _value = {} + } + setNetwork(_value) + }) + }, []) + + useEffect(() => { + // refLang.current = lang + storage.set('setting_common', common) + }, [common]) + useEffect(() => { + // refLang.current = lang + storage.set('setting_surface', surface) + }, [surface]) + useEffect(() => { + // refLang.current = lang + storage.set('setting_network', network) + }, [network]) + return ( ('zh_CN') useEffect(() => { - // storage.get('theme').then((res) => { - // let _theme = res - // if (_theme !== 'dark' && _theme !== 'light' && _theme !== 'auto') { - // _theme = 'light' - // } - // setTheme(_theme) - // }) + storage.get('theme').then((res) => { + let _theme = res + if (_theme !== 'dark' && _theme !== 'light' && _theme !== 'auto') { + _theme = 'light' + } + setTheme(_theme) + }) storage.get('lang').then((res) => { let _lang = res if (_lang !== 'zh_CN' && _lang !== 'en_US' && _lang !== 'zh_TW') { _lang = 'zh_CN' } setLang(_lang) + // 切换语言 + changeLanguage(_lang) }) }, []) diff --git a/src/locales/index.ts b/src/locales/index.ts index b905414..7dc58f1 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -1,5 +1,6 @@ import i18next from 'i18next' import { initReactI18next } from 'react-i18next' +import LanguageDetector from 'i18next-browser-languagedetector' // import path from 'path' // 导入语言枚举 // const LanguageList = ['zh_CN', 'zh_TW', 'en_US'] @@ -18,24 +19,26 @@ const resources = () => { } // init i18next -i18next.use(initReactI18next) -i18next.init( - { - resources: resources(), - fallbackLng: { - default: [LanguageList?.[0]?.value], +i18next + .use(LanguageDetector) + .use(initReactI18next) + .init( + { + resources: resources(), + fallbackLng: { + default: [LanguageList?.[0]?.value], + }, + defaultNS: 'translation', + ns: [], + detection: { + caches: ['localStorage', 'sessionStorage', 'cookie'], + }, + debug: false, }, - defaultNS: 'translation', - ns: [], - detection: { - caches: ['localStorage', 'sessionStorage', 'cookie'], - }, - debug: false, - }, - () => { - console.log('i18next init', i18next.t('title')) - } -) + () => { + console.log('i18next init', i18next.t('title')) + } + ) export default i18next export const changeLanguage = (val: string | undefined) => {