🐛 fix: 修正没有将设置缓存下来的问题

lobehub · Jan 18, 2024 · f708fc5 · f708fc5
1 parent 2bc4754
commit f708fc5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/features/Settings.tsx b/src/features/Settings.tsx
@@ -1,9 +1,9 @@
 import { Alert, Icon, Input } from '@lobehub/ui';
-import { Drawer, FloatButton, Typography } from 'antd';
+import { Button, Drawer, FloatButton, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideSettings } from 'lucide-react';
 import Link from 'next/link';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '@/store';
@@ -27,6 +27,7 @@ const Settings = memo(() => {
   ]);
   const requestError = useStore((s) => s.requestError, isEqual);
 
+  const [url, setUrl] = useState(MIDJOURNEY_API_URL);
   return (
     <>
       <Drawer
@@ -46,20 +47,28 @@ const Settings = memo(() => {
             />
           )}
           <Flexbox gap={12}>
-            <div>MIDJOURNEY API 代理地址</div>
+            <div>Midjourney API 代理地址</div>
             <Input
               onChange={(e) => {
-                updateSettings({ MIDJOURNEY_PROXY_URL: e.target.value });
+                setUrl(e.target.value);
               }}
               placeholder={'http://localhost:8080/'}
-              value={MIDJOURNEY_API_URL}
+              value={url}
             />
             <Typography.Text type={'secondary'}>
               请参考{' '}
               <Link href={'https://github.com/novicezk/midjourney-proxy'}>midjourney-proxy</Link>{' '}
               部署好服务端后使用
             </Typography.Text>
           </Flexbox>
+          <Button
+            onClick={() => {
+              updateSettings({ MIDJOURNEY_PROXY_URL: url });
+            }}
+            type={'primary'}
+          >
+            保存
+          </Button>
         </Flexbox>
       </Drawer>
       <FloatButton

diff --git a/src/services/storageService.ts b/src/services/storageService.ts
@@ -1,15 +1,19 @@
 import { lobeChat } from '@lobehub/chat-plugin-sdk/client';
 
+import { AppSettings } from '@/store/initialState';
+
 class StorageService {
   private storageKey = 'MIDJOURNEY_DATA';
+  private settingKey = 'APP_SETTINGS';
+
   async saveToLocalStorage(state: object) {
     const data = await this.getFromLocalStorage();
 
     localStorage.setItem(this.storageKey, JSON.stringify({ ...data, ...state }));
   }
 
-  async getFromLocalStorage(): Promise<object> {
-    return JSON.parse(localStorage.getItem(this.storageKey) || '{}');
+  async getFromLocalStorage(key = this.storageKey): Promise<object> {
+    return JSON.parse(localStorage.getItem(key) || '{}');
   }
 
   async saveToLobeChat(state: object) {
@@ -18,6 +22,12 @@ class StorageService {
       lobeChat.setPluginState(key, value);
     }
   }
+
+  async setSettings(state: Partial<AppSettings>) {
+    const data = await this.getFromLocalStorage(this.settingKey);
+
+    localStorage.setItem(this.settingKey, JSON.stringify({ ...data, ...state }));
+  }
 }
 
 export const storageService = new StorageService();
diff --git a/src/store/action.ts b/src/store/action.ts
@@ -168,6 +168,8 @@ export const actions: StateCreator<
 
   updateSettings: (settings) => {
     set({ settings: { ...get().settings, ...settings } });
+
+    storageService.setSettings(settings);
   },
   useInitApp: () => {
     return useSWR<AppState>(