💚 fix: setting crash #46

lobehub · Apr 22, 2023 · 4f1a030 · 4f1a030
1 parent afdbe53
commit 4f1a030
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 65 deletions.
diff --git a/javascript/index.js b/javascript/index.js
diff --git a/src/components/ExtraNetworkSidebar/index.tsx b/src/components/ExtraNetworkSidebar/index.tsx
@@ -81,15 +81,21 @@ const Sidebar: React.FC<SidebarProps> = ({ children, style }) => {
         maxHeight
         style={style}
         placement="right"
-        defaultSize={{ width: setting.extraNetworkSidebarWidth }}
+        defaultSize={{ width: setting?.extraNetworkSidebarWidth || 340 }}
         isExpand={expand}
         onExpandChange={setExpand}
       >
         <View>
           <SidebarView size={size}>{children}</SidebarView>
           <Footer>
             <ZoomInOutlined />
-            <ZoomSlider defaultValue={setting.extraNetworkCardSize} step={8} max={256} min={64} onChange={setSize} />
+            <ZoomSlider
+              defaultValue={setting?.extraNetworkCardSize || 86}
+              step={8}
+              max={256}
+              min={64}
+              onChange={setSize}
+            />
           </Footer>
         </View>
       </DraggablePanel>

diff --git a/src/components/Header/Setting.tsx b/src/components/Header/Setting.tsx
@@ -10,7 +10,7 @@ export interface WebuiSetting {
   extraNetworkCardSize: number
 }
 
-const defaultValue = {
+export const defaultValue = {
   sidebarWidth: 280,
   enableExtraNetworkSidebar: true,
   extraNetworkSidebarWidth: 340,

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -34,7 +34,7 @@ const Sidebar: React.FC<SidebarProps> = ({ children, loading, style }) => {
       maxHeight
       style={style}
       placement="left"
-      defaultSize={{ width: setting.sidebarWidth }}
+      defaultSize={{ width: setting?.sidebarWidth || 280 }}
       isExpand={expand}
       onExpandChange={setExpand}
     >

diff --git a/src/pages/index/App.tsx b/src/pages/index/App.tsx
@@ -1,5 +1,5 @@
 import { Content, ExtraNetworkSidebar, Header, Sidebar } from '@/components'
-import { WebuiSetting } from '@/components/Header/Setting'
+import { WebuiSetting, defaultValue } from '@/components/Header/Setting'
 import { useAppStore } from '@/store'
 import { useLocalStorageState } from 'ahooks'
 import { Spin } from 'antd'
@@ -38,7 +38,9 @@ interface AppProps {
 }
 
 const App: React.FC<AppProps> = ({ themeMode }) => {
-  const [setting] = useLocalStorageState<WebuiSetting>('SD-KITCHEN-SETTING')
+  const [setting] = useLocalStorageState<WebuiSetting>('SD-KITCHEN-SETTING', {
+    defaultValue,
+  })
   const [currentTab, setCurrentTab] = useAppStore((st) => [st.currentTab, st.setCurrentTab], shallow)
   const [loading, setLoading] = useState(true)
   const sidebarRef: any = useRef<HTMLElement>()
@@ -64,7 +66,7 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
       if (sidebar) sidebarRef.current?.appendChild(sidebar)
 
       // ExtraNetworkSidebar
-      if (setting.enableExtraNetworkSidebar) {
+      if (setting?.enableExtraNetworkSidebar) {
         const txt2imgExtraNetworks = gradioApp().querySelector('div#txt2img_extra_networks')
         const img2imgExtraNetworks = gradioApp().querySelector('div#img2img_extra_networks')
         if (txt2imgExtraNetworks && img2imgExtraNetworks) {
@@ -107,7 +109,7 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
           )}
           <div id="content" ref={mainRef} />
         </Content>
-        {setting.enableExtraNetworkSidebar && (
+        {setting?.enableExtraNetworkSidebar && (
           <ExtraNetworkSidebar style={['tab_txt2img', 'tab_img2img'].includes(currentTab) ? {} : { display: 'none' }}>
             {loading && (
               <LoadingBox>