@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/v_browser/ui/index.tsx

@@ -1,213 +1,213 @@
-/* eslint-disable dot-notation */
-import React, { createRef, FC, useContext, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { observer } from 'mobx-react'
-import classNames from 'classnames'
-import Context from '../context/browser'
-import { pages } from '../v_browser'
-import WindowWrapper from './window_wrapper'
-import Delete from '../../../svg/vbrowser-tab-delete.svg'
-import Left from '../../../svg/vbrowser-tab-left.svg'
-import Right from '../../../svg/vbrowser-tab-right.svg'
-import { clamp, throttle } from 'lodash'
-import BrowserWindowContext from '../context/browserWindow'
-import './style.less'
-
-const VBrowserContainer: FC<{ className?: string }> = observer(
-  ({ className, ...props }) => {
-    const containerRef = createRef<HTMLDivElement>()
-    const browser = useContext(Context)
-    // const leftInterval = useRef<number>()
-    // const rightInterval = useRef<number>()
-
-    const [state, setState] = useState({ scrollLeft: 0, scrollWidth: 0, width: 0 })
-
-    useEffect(() => {
-      const container = containerRef.current
-      if (container) {
-        container.appendChild(browser['_portal'])
-      }
-      browser.mounted = true
-    }, [])
-
-    // #region  Tabs滚动处理
-    useEffect(() => {
-      const wrapper: HTMLDivElement | null = document.querySelector(
-        '.v-browser-tabs-items'
-      )
-      if (!wrapper) return
-      const onScroll = throttle(() => {
-        setState({
-          width: wrapper.getBoundingClientRect().width,
-          scrollWidth: wrapper.scrollWidth,
-          scrollLeft: wrapper.scrollLeft,
-        })
-      }, 20)
-      wrapper.addEventListener('scroll', onScroll)
-      onScroll()
-      return () => {
-        wrapper.removeEventListener('scroll', onScroll)
-      }
-    }, [browser.windows.length])
-
-    const _handleScroll = (offset: number) => {
-      const wrapper = document.querySelector('.v-browser-tabs-items')
-      if (!wrapper) return
-      wrapper.scrollTo({
-        left: clamp(wrapper.scrollLeft + offset, 0, wrapper.scrollWidth),
-        behavior: 'smooth',
-      })
-    }
-    // #endregion
-
-    const portal = useRef(
-      createPortal(
-        pages.map((page, i) => {
-          return (
-            <BrowserWindowContext.Provider key={i} value={page}>
-              <WindowWrapper key={i} path={page.path} />
-            </BrowserWindowContext.Provider>
-          )
-        }),
-        browser['_portal']
-      )
-    )
-    const ignored = browser.props.ignoredPath?.find((p) =>
-      typeof p === 'string'
-        ? p === browser.activeWindow?.path
-        : p.test(browser.activeWindow?.path!)
-    )
-    return (
-      <div
-        className={classNames('v-browser tw-relative', {
-          'hiding-tabs': browser['_hidingTabs'] || ignored,
-        })}
-      >
-        <div
-          className={classNames(
-            'v-browser-tabs tw-w-full tw-flex tw-items-center tw-overflow-x-auto tw-shadow',
-            { 'tw-hidden': browser['_hidingTabs'] || ignored }
-          )}
-        >
-          <div
-            className={classNames('v-browser-tabs-left tw-font-sm tw-px-2.5', {
-              disabled: state.scrollLeft === 0,
-              'tw-hidden': state.width === state.scrollWidth,
-            })}
-            onClick={(e) => {
-              e.stopPropagation()
-              _handleScroll(-160)
-            }}
-            // onMouseEnter={() => {
-            //   leftInterval.current = setInterval(() => {
-            //     _handleScroll(-1)
-            //   }, 0) as any
-            // }}
-            // onMouseLeave={() => {
-            //   clearInterval(leftInterval.current)
-            // }}
-          >
-            <Left
-              className={classNames(
-                'v-browser-tabs-arrow tw-w-3.5 tw-h-3.5 tw-text-gray-500',
-                {}
-              )}
-            />
-          </div>
-          <div className='v-browser-tabs-items tw-w-full tw-h-full tw-flex tw-items-center'>
-            {browser.windows.map((w, i) => {
-              return (
-                <>
-                  <div
-                    key={i}
-                    className={classNames(
-                      'v-browser-tabs-items-item tw-font-sm tw-px-2.5 tw-flex-shrink-0 tw-flex tw-items-center tw-truncate tw-w-min',
-                      {
-                        active: i === browser.activeIndex,
-                        border:
-                          i !== browser.activeIndex && i !== browser.activeIndex - 1,
-                      }
-                    )}
-                    data-tab-id={w.path}
-                    onClick={() => browser.switchWindow(w)}
-                  >
-                    <div
-                      className='tw-flex-grow tw-text-sm'
-                      style={{ minWidth: typeof w.title !== 'string' ? 'auto' : '100px' }}
-                    >
-                      <div className='tw-flex tw-items-center'>
-                        {w.faviconURL && (
-                          <img
-                            src={w.faviconURL}
-                            className={classNames('tw-w-3.5 tw-h-3.5 tw-mr-0.5', {
-                              'tw-opacity-70': i !== browser.activeIndex,
-                            })}
-                          />
-                        )}
-                        <span>{w.title || '-'}</span>
-                      </div>
-                    </div>
-
-                    <div className='tw-pl-2 tw-flex tw-items-center'>
-                      <Delete
-                        className={classNames(
-                          'v-browser-tabs-items-item-close tw-w-3.5 tw-h-3.5',
-                          {
-                            'tw-hidden': !w.closeable,
-                          }
-                        )}
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          browser.close(w)
-                        }}
-                      />
-                    </div>
-                  </div>
-                  <div key={`divider-${i}`} className='v-browser-tabs-items-divider' />
-                </>
-              )
-            })}
-          </div>
-
-          <div
-            className={classNames('v-browser-tabs-right tw-font-sm tw-px-2.5', {
-              disabled: state.scrollWidth - state.width - state.scrollLeft < 1,
-              'tw-hidden': state.width === state.scrollWidth,
-            })}
-            onClick={(e) => {
-              e.stopPropagation()
-              _handleScroll(160)
-            }}
-            // onMouseEnter={() => {
-            //   rightInterval.current = setInterval(() => {
-            //     _handleScroll(+1)
-            //   }, 0) as any
-            // }}
-            // onMouseLeave={() => {
-            //   clearInterval(rightInterval.current)
-            // }}
-          >
-            <Right
-              className={classNames(
-                'v-browser-tabs-arrow tw-w-3.5 tw-h-3.5 tw-text-gray-500'
-              )}
-            />
-          </div>
-        </div>
-
-        <div className='v-browser-window-wrapper'>
-          <div
-            className={classNames('v-browser-window', className, {
-              'hiding-tabs': browser['_hidingTabs'] || ignored,
-            })}
-            ref={containerRef}
-            {...props}
-          />
-          {portal.current}
-        </div>
-      </div>
-    )
-  }
-)
-
-export default VBrowserContainer
+/* eslint-disable dot-notation */
+import React, { createRef, FC, useContext, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { observer } from 'mobx-react'
+import classNames from 'classnames'
+import Context from '../context/browser'
+import { pages } from '../v_browser'
+import WindowWrapper from './window_wrapper'
+import Delete from '../../../svg/vbrowser-tab-delete.svg'
+import Left from '../../../svg/vbrowser-tab-left.svg'
+import Right from '../../../svg/vbrowser-tab-right.svg'
+import { clamp, throttle } from 'lodash'
+import BrowserWindowContext from '../context/browserWindow'
+import './style.less'
+
+const VBrowserContainer: FC<{ className?: string }> = observer(
+  ({ className, ...props }) => {
+    const containerRef = createRef<HTMLDivElement>()
+    const browser = useContext(Context)
+    // const leftInterval = useRef<number>()
+    // const rightInterval = useRef<number>()
+
+    const [state, setState] = useState({ scrollLeft: 0, scrollWidth: 0, width: 0 })
+
+    useEffect(() => {
+      const container = containerRef.current
+      if (container) {
+        container.appendChild(browser['_portal'])
+      }
+      browser.mounted = true
+    }, [])
+
+    // #region  Tabs滚动处理
+    useEffect(() => {
+      const wrapper: HTMLDivElement | null = document.querySelector(
+        '.v-browser-tabs-items'
+      )
+      if (!wrapper) return
+      const onScroll = throttle(() => {
+        setState({
+          width: wrapper.getBoundingClientRect().width,
+          scrollWidth: wrapper.scrollWidth,
+          scrollLeft: wrapper.scrollLeft,
+        })
+      }, 20)
+      wrapper.addEventListener('scroll', onScroll)
+      onScroll()
+      return () => {
+        wrapper.removeEventListener('scroll', onScroll)
+      }
+    }, [browser.windows.length])
+
+    const _handleScroll = (offset: number) => {
+      const wrapper = document.querySelector('.v-browser-tabs-items')
+      if (!wrapper) return
+      wrapper.scrollTo({
+        left: clamp(wrapper.scrollLeft + offset, 0, wrapper.scrollWidth),
+        behavior: 'smooth',
+      })
+    }
+    // #endregion
+
+    const portal = useRef(
+      createPortal(
+        pages.map((page, i) => {
+          return (
+            <BrowserWindowContext.Provider key={i} value={page}>
+              <WindowWrapper key={i} path={page.path} />
+            </BrowserWindowContext.Provider>
+          )
+        }),
+        browser['_portal']
+      )
+    )
+    const ignored = browser.props.ignoredPath?.find((p) =>
+      typeof p === 'string'
+        ? p === browser.activeWindow?.path
+        : p.test(browser.activeWindow?.path!)
+    )
+    return (
+      <div
+        className={classNames('v-browser tw-relative', {
+          'hiding-tabs': browser['_hidingTabs'] || ignored,
+        })}
+      >
+        <div
+          className={classNames(
+            'v-browser-tabs tw-w-full tw-flex tw-items-center tw-overflow-x-auto tw-shadow',
+            { 'tw-hidden': browser['_hidingTabs'] || ignored }
+          )}
+        >
+          <div
+            className={classNames('v-browser-tabs-left tw-font-sm tw-px-2.5', {
+              disabled: state.scrollLeft === 0,
+              'tw-hidden': state.width === state.scrollWidth,
+            })}
+            onClick={(e) => {
+              e.stopPropagation()
+              _handleScroll(-160)
+            }}
+            // onMouseEnter={() => {
+            //   leftInterval.current = setInterval(() => {
+            //     _handleScroll(-1)
+            //   }, 0) as any
+            // }}
+            // onMouseLeave={() => {
+            //   clearInterval(leftInterval.current)
+            // }}
+          >
+            <Left
+              className={classNames(
+                'v-browser-tabs-arrow tw-w-3.5 tw-h-3.5 tw-text-gray-500',
+                {}
+              )}
+            />
+          </div>
+          <div className='v-browser-tabs-items tw-w-full tw-h-full tw-flex tw-items-center'>
+            {browser.windows.map((w, i) => {
+              return (
+                <>
+                  <div
+                    key={i}
+                    className={classNames(
+                      'v-browser-tabs-items-item tw-font-sm tw-px-2.5 tw-flex-shrink-0 tw-flex tw-items-center tw-truncate tw-w-min',
+                      {
+                        active: i === browser.activeIndex,
+                        border:
+                          i !== browser.activeIndex && i !== browser.activeIndex - 1,
+                      }
+                    )}
+                    data-tab-id={w.path}
+                    onClick={() => browser.switchWindow(w)}
+                  >
+                    <div
+                      className='tw-flex-grow tw-text-sm'
+                      style={{ minWidth: typeof w.title !== 'string' ? 'auto' : '100px' }}
+                    >
+                      <div className='tw-flex tw-items-center'>
+                        {w.faviconURL && (
+                          <img
+                            src={w.faviconURL}
+                            className={classNames('tw-w-3.5 tw-h-3.5 tw-mr-0.5', {
+                              'tw-opacity-70': i !== browser.activeIndex,
+                            })}
+                          />
+                        )}
+                        <span>{w.title || '-'}</span>
+                      </div>
+                    </div>
+
+                    <div className='tw-pl-2 tw-flex tw-items-center'>
+                      <Delete
+                        className={classNames(
+                          'v-browser-tabs-items-item-close tw-w-3.5 tw-h-3.5',
+                          {
+                            'tw-hidden': !w.closeable,
+                          }
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          browser.close(w)
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div key={`divider-${i}`} className='v-browser-tabs-items-divider' />
+                </>
+              )
+            })}
+          </div>
+
+          <div
+            className={classNames('v-browser-tabs-right tw-font-sm tw-px-2.5', {
+              disabled: state.scrollWidth - state.width - state.scrollLeft < 1,
+              'tw-hidden': state.width === state.scrollWidth,
+            })}
+            onClick={(e) => {
+              e.stopPropagation()
+              _handleScroll(160)
+            }}
+            // onMouseEnter={() => {
+            //   rightInterval.current = setInterval(() => {
+            //     _handleScroll(+1)
+            //   }, 0) as any
+            // }}
+            // onMouseLeave={() => {
+            //   clearInterval(rightInterval.current)
+            // }}
+          >
+            <Right
+              className={classNames(
+                'v-browser-tabs-arrow tw-w-3.5 tw-h-3.5 tw-text-gray-500'
+              )}
+            />
+          </div>
+        </div>
+
+        <div className='v-browser-window-wrapper'>
+          <div
+            className={classNames('v-browser-window', className, {
+              'hiding-tabs': browser['_hidingTabs'] || ignored,
+            })}
+            ref={containerRef}
+            {...props}
+          />
+          {portal.current}
+        </div>
+      </div>
+    )
+  }
+)
+
+export default VBrowserContainer

package/src/component/v_browser/ui/style.less

@@ -1,113 +1,113 @@
-:root {
-  --v-browser-tabs-bg: white;
-  --v-browser-tabs-text-color: #333;
-  --v-browser-tabs-height: 40px;
-}
-
-.v-browser {
-  height: calc(100vh - var(--gm-framework-size-top-right-height));
-  overflow: hidden;
-
-  &-tabs {
-    position: relative;
-    height: var(--v-browser-tabs-height);
-    background-color: var(--v-browser-tabs-bg);
-    z-index: 100;
-    color: var(--v-browser-tabs-text-color);
-    user-select: none;
-    padding: 0;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &-left,
-    &-right {
-      width: 40px;
-      cursor: pointer;
-      // position: absolute;
-      background-color: var(--v-browser-tabs-bg);
-      height: var(--v-browser-tabs-height);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &-left {
-      left: 0;
-    }
-
-    &-right {
-      right: 0;
-    }
-
-    &-items {
-      overflow-x: auto;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      &-item {
-        height: 100%;
-        cursor: pointer;
-        position: relative;
-
-        &.active {
-          background-color: #dae7ff !important;
-        }
-
-        &-close:hover {
-          filter: brightness(0);
-        }
-      }
-
-      &-divider {
-        width: 1px;
-        height: 24px;
-        background-color: #e8ecf3;
-        flex-shrink: 0;
-      }
-    }
-
-    &-left,
-    &-right,
-    &-items-item {
-      &:hover {
-        background-color: #f7f7f7;
-
-        .v-browser-tabs-arrow {
-          filter: brightness(0);
-        }
-      }
-
-      &.disabled {
-        opacity: 0.25;
-      }
-    }
-  }
-
-  &.hiding-tabs {
-    height: 100vh;
-  }
-
-  &-window {
-    .v-browser-window-content {
-      height:
-        calc(
-          100vh - var(--gm-framework-size-top-right-height) - var(--v-browser-tabs-height)
-        );
-      overflow: auto;
-      background-color: white;
-      position: relative;
-    }
-
-    &.hiding-tabs {
-      height: 100vh;
-
-      .v-browser-window-content {
-        height: 100vh;
-      }
-    }
-  }
-}
+:root {
+  --v-browser-tabs-bg: white;
+  --v-browser-tabs-text-color: #333;
+  --v-browser-tabs-height: 40px;
+}
+
+.v-browser {
+  height: calc(100vh - var(--gm-framework-size-top-right-height));
+  overflow: hidden;
+
+  &-tabs {
+    position: relative;
+    height: var(--v-browser-tabs-height);
+    background-color: var(--v-browser-tabs-bg);
+    z-index: 100;
+    color: var(--v-browser-tabs-text-color);
+    user-select: none;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &-left,
+    &-right {
+      width: 40px;
+      cursor: pointer;
+      // position: absolute;
+      background-color: var(--v-browser-tabs-bg);
+      height: var(--v-browser-tabs-height);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-left {
+      left: 0;
+    }
+
+    &-right {
+      right: 0;
+    }
+
+    &-items {
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &-item {
+        height: 100%;
+        cursor: pointer;
+        position: relative;
+
+        &.active {
+          background-color: #dae7ff !important;
+        }
+
+        &-close:hover {
+          filter: brightness(0);
+        }
+      }
+
+      &-divider {
+        width: 1px;
+        height: 24px;
+        background-color: #e8ecf3;
+        flex-shrink: 0;
+      }
+    }
+
+    &-left,
+    &-right,
+    &-items-item {
+      &:hover {
+        background-color: #f7f7f7;
+
+        .v-browser-tabs-arrow {
+          filter: brightness(0);
+        }
+      }
+
+      &.disabled {
+        opacity: 0.25;
+      }
+    }
+  }
+
+  &.hiding-tabs {
+    height: 100vh;
+  }
+
+  &-window {
+    .v-browser-window-content {
+      height:
+        calc(
+          100vh - var(--gm-framework-size-top-right-height) - var(--v-browser-tabs-height)
+        );
+      overflow: auto;
+      background-color: white;
+      position: relative;
+    }
+
+    &.hiding-tabs {
+      height: 100vh;
+
+      .v-browser-window-content {
+        height: 100vh;
+      }
+    }
+  }
+}