🐛 fix: try to fix header bug #46

lobehub · Apr 22, 2023 · afdbe53 · afdbe53
1 parent 894aec6
commit afdbe53
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,17 +2,15 @@
 
 ## [1.6.1](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.6.0...v1.6.1) (2023-04-22)
 
-
 ### 🐛 Bug Fixes
 
-* fix typo ([9faf33e](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/9faf33e))
+- fix typo ([9faf33e](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/9faf33e))
 
 # [1.6.0](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.5.2...v1.6.0) (2023-04-22)
 
-
 ### ✨ Features
 
-* add setting panel ([f2beaaa](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/f2beaaa)), closes [#44](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/44)
+- add setting panel ([f2beaaa](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/f2beaaa)), closes [#44](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/44)
 
 ## [1.5.2](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.5.1...v1.5.2) (2023-04-22)
 

diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -65,6 +65,7 @@ http://localhost:7860/?__theme=dark
 ## ⚒️ 推荐设置
 
 Kitchen WebUI Setting
+
 > 右上角 ⚙ 图标打开设置面板，当前可用设置如下
 
 - Sidebar default width (快捷设置侧边栏默认宽度): 280

diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ http://localhost:7860/?__theme=dark
 ## ⚒️ Recommended Settings
 
 Kitchen WebUI Setting
+
 > top right ⚙ icon in header
 
 - Sidebar default width: 280

diff --git a/javascript/index.js b/javascript/index.js
diff --git a/src/components/DraggablePanel/DraggablePanel.tsx b/src/components/DraggablePanel/DraggablePanel.tsx
@@ -92,6 +92,7 @@ export interface DraggablePanelProps {
    * 类名前缀
    */
   prefixCls?: string
+  maxHeight?: boolean
 }
 
 export const Draggable: FC<DraggablePanelProps> = memo(
@@ -114,6 +115,7 @@ export const Draggable: FC<DraggablePanelProps> = memo(
     expandable = true,
     isExpand,
     onExpandChange,
+    maxHeight,
   }) => {
     const prefixCls = 'draggable-panel'
 
@@ -138,6 +140,7 @@ export const Draggable: FC<DraggablePanelProps> = memo(
             className={className}
             placement={placement}
             style={style}
+            maxHeight={maxHeight}
           >
             {children}
           </FixMode>

diff --git a/src/components/DraggablePanel/FixMode.tsx b/src/components/DraggablePanel/FixMode.tsx
@@ -94,6 +94,7 @@ export interface FixModePanelProps {
    * 类名前缀
    */
   prefixCls?: string
+  maxHeight?: boolean
 }
 
 const DEFAULT_HEIGHT = 150
@@ -128,12 +129,13 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
     isExpand: expand,
     onExpandChange,
     className,
+    maxHeight,
   }) => {
     const prefixCls = 'draggable-panel'
 
     const isVertical = placement === 'top' || placement === 'bottom'
 
-    const { styles, cx } = useStyle(prefixCls)
+    const { styles, cx } = useStyle({ prefix: prefixCls, maxHeight })
 
     const [isExpand, setIsExpand] = useControlledState(true, {
       value: expand,

diff --git a/src/components/DraggablePanel/FloatMode.tsx b/src/components/DraggablePanel/FloatMode.tsx
@@ -102,7 +102,7 @@ export const FloatMode: FC<FloatProps> = memo(
     prefixCls,
     canResizing,
   }) => {
-    const { styles } = useStyle(prefixCls)
+    const { styles } = useStyle({ prefix: prefixCls, maxHeight: false })
 
     const resizeHandleClassNames: HandleClassName = useMemo(() => {
       if (!canResizing) return {}

diff --git a/src/components/DraggablePanel/style.ts b/src/components/DraggablePanel/style.ts
@@ -1,7 +1,8 @@
 import { createStyles, css, cx } from 'antd-style'
 import { rgba } from 'polished'
 
-export const useStyle = createStyles(({ token }, prefix: string) => {
+export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHeight?: boolean }) => {
+  const { prefix, maxHeight } = props
   const commonHandle = css`
     position: relative;
     &::before {
@@ -117,7 +118,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
         backdrop-filter: blur(40px);
         overflow: hidden;
         position: relative;
-        height: 100% !important;
+        ${maxHeight ? 'height: 100% !important;' : ''}
       `
     ),
     float: cx(

diff --git a/src/components/ExtraNetworkSidebar/index.tsx b/src/components/ExtraNetworkSidebar/index.tsx
@@ -78,6 +78,7 @@ const Sidebar: React.FC<SidebarProps> = ({ children, style }) => {
     <>
       <GlobalStyle />
       <DraggablePanel
+        maxHeight
         style={style}
         placement="right"
         defaultSize={{ width: setting.extraNetworkSidebarWidth }}

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -57,7 +57,7 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({ children, themeMode }) => {
   const { mobile } = useResponsive()
-  const [expand, setExpand] = useState<boolean>(!mobile)
+  const [expand, setExpand] = useState<boolean>(true)
   const handleSetTheme = useCallback(() => {
     const theme = themeMode === 'light' ? 'dark' : 'light'
     const gradioURL = qs.parseUrl(window.location.href)
@@ -66,8 +66,8 @@ const Header: React.FC<HeaderProps> = ({ children, themeMode }) => {
   }, [themeMode])
 
   useEffect(() => {
-    setExpand(!mobile)
-  }, [mobile])
+    if (mobile) setExpand(false)
+  }, [])
 
   return (
     <DraggablePanel placement="top" defaultSize={{ height: 'auto' }} isExpand={expand} onExpandChange={setExpand}>

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -31,6 +31,7 @@ const Sidebar: React.FC<SidebarProps> = ({ children, loading, style }) => {
 
   return (
     <DraggablePanel
+      maxHeight
       style={style}
       placement="left"
       defaultSize={{ width: setting.sidebarWidth }}