@gm-pc/react 1.9.2-beta.2 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.9.2-beta.2",
+  "version": "1.10.4",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.9.2-beta.2",
+    "@gm-pc/locales": "^1.10.4",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -33,6 +33,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
@@ -44,7 +45,8 @@
     "moment": "^2.29.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "f99ad9c66bd178f107535136d9938422fb756fda"
+  "gitHead": "9422d0611d5399c0fe0ed3a924b3f429c01cdfc0"
 }

package/src/component/nav/style.less

@@ -5,7 +5,7 @@
 }
 
 .gm-nav {
-  width: 136px;
+  width: inherit;
   height: 100vh;
   background: var(--gm-nav-background-color);
 

package/src/component/v_browser/context/browser.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+import VBrowser from '../v_browser'
+
+const BrowserContext = createContext<VBrowser>(undefined as any)
+BrowserContext.displayName = 'VBrowserContext'
+
+export default BrowserContext

package/src/component/v_browser/context/browserWindow.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+import { VBrowserWindow } from '../types'
+
+const BrowserWindowContext = createContext<VBrowserWindow>(undefined as any)
+BrowserWindowContext.displayName = 'VBrowserWindowContext'
+
+export default BrowserWindowContext

package/src/component/v_browser/hooks/useWindowEffect.ts

@@ -0,0 +1,40 @@
+import { reaction } from 'mobx'
+import React, { useEffect, useContext } from 'react'
+import BrowserContext from '../context/browser'
+import BrowserWindowContext from '../context/browserWindow'
+
+type Noop = () => void
+/**
+ * 多窗口中的子页面组件因为被缓存，原来的useEffect受到影响： effect仅在子窗口创建时触发，销毁函数仅在窗口关闭时触发；子窗口失活时依然会观察deps，并触发effect；
+ *
+ * 根据情况可以考虑使用useWindowEffect来替换useEffect，功能： 窗口激活时、deps更新时，触发fn执行； 窗口失活时执行fn返回的销毁函数； 如果子窗口为失活状态，不观察deps的更新；
+ *
+ */
+export default function useWindowEffect(fn: () => Noop | void, deps: Array<any>) {
+  const browser = useContext(BrowserContext)
+  const browserWindow = useContext(BrowserWindowContext)
+
+  let cb: Noop | void
+  useEffect(() => {
+    if (!browser || !browserWindow) {
+      console.warn('useWindowEffect需要在VBrowser中使用, 否则将回退到useEffect')
+      cb = fn()
+      return cb
+    }
+
+    const alive = browserWindow.path === browser.activeWindow?.path
+    if (!alive) return
+
+    const dispose = reaction(
+      () => browser.activeWindow,
+      (cur, pre) => {
+        const activate = cur?.path === browserWindow.path
+        const deactivate = pre?.path === browserWindow.path
+        if (activate) cb = fn()
+        if (deactivate) cb && cb()
+      }
+    )
+    cb = fn()
+    return dispose
+  }, deps)
+}

package/src/component/v_browser/index.ts

@@ -0,0 +1,4 @@
+export { default as VBrowser } from './v_browser'
+export { default as IframePortal } from './ui/iframe_portal'
+export type { VBrowserProps } from './types'
+export { default as useWindowEffect } from './hooks/useWindowEffect'

package/src/component/v_browser/stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { observable } from 'mobx'
+
+const store = observable({})
+
+export const ComSwitch = () => <div />
+
+export default {
+  title: '表单/V-Browser',
+}

package/src/component/v_browser/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+
+export interface VBrowserWindow {
+  path: string
+  query?: { [key: string]: string }
+  /** 窗口图标 */
+  faviconURL?: string
+  /** 窗口名，如果不存在将尝试从vBrowser的autoTitle中取 */
+  title?: ReactNode | Element
+  /** 可否关闭，默认为true */
+  closeable?: boolean
+}
+
+export interface VBrowserProps {
+  /** 窗口数量限制 */
+  maxLength?: number
+  /** 这里的路由将全屏显示,且不会呈现在Tab栏中 */
+  onReady?: Function
+  /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
+  restore?: boolean
+  /** 窗口变化事件 */
+  onChange?: (
+    from: VBrowserWindow | undefined,
+    to: VBrowserWindow,
+    windows: VBrowserWindow[]
+  ) => void
+  /** 窗口打开/切换前调用，返回false会阻止窗口打开/切换 */
+  auth?: (from?: VBrowserWindow, to?: VBrowserWindow) => Promise<boolean> | boolean
+  onError?: (error: { code: number; message: string }) => void
+  autoTitle?: (path: string) => string
+}
+
+export interface CacheItem {
+  vNode: JSX.Element & {
+    ref: {
+      current: HTMLDivElement | undefined
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import React, { FC, useEffect, useState } from 'react'
+import { pages } from '../v_browser'
+
+interface IframePortalProps {}
+
+/**
+ * 此组件使用在Switch中，用来访问任意子页面，子页面路径通过url参数path指定
+ */
+const IframePortal: FC<IframePortalProps> = () => {
+  const [component, setComponent] = useState<JSX.Element | null>(null)
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.href.split('?')[1] || '')
+    const path = query.get('path')
+    const page = pages.find((p) => p.path === path)
+    if (!page) throw new Error('[VWindow] page not found: ' + path)
+    page.loader().then((module) => {
+      const Component = module.default
+      setComponent(<Component />)
+      console.timeEnd('IframePortal')
+      return null
+    })
+  }, [])
+
+  return component
+}
+
+export default IframePortal

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

@@ -0,0 +1,204 @@
+/* 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']
+      )
+    )
+    return (
+      <div
+        className={classNames('v-browser tw-relative', {
+          'hiding-tabs': browser['_hidingTabs'],
+        })}
+      >
+        <div
+          className={classNames(
+            'v-browser-tabs tw-w-full tw-flex tw-items-center tw-overflow-x-auto tw-shadow',
+            { 'tw-hidden': browser['_hidingTabs'] }
+          )}
+        >
+          <div
+            className={classNames('v-browser-tabs-left tw-font-sm tw-px-2.5', {
+              disabled: state.scrollLeft === 0,
+            })}
+            // onClick={(e) => {
+            //   e.stopPropagation()
+            //   _handleScroll(-150)
+            // }}
+            onMouseEnter={() => {
+              leftInterval.current = setInterval(() => {
+                _handleScroll(-15)
+              }, 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.windows.length - 1 &&
+                        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='tw-w-3.5 tw-h-3.5 tw-mr-0.5'
+                          style={{ color: '#6A6A6A' }}
+                        />
+                      )}
+                      <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>
+
+          <div
+            className={classNames('v-browser-tabs-right tw-font-sm tw-px-2.5', {
+              disabled: state.scrollWidth - state.width - state.scrollLeft === 0,
+            })}
+            // onClick={(e) => {
+            //   e.stopPropagation()
+            //   _handleScroll(150)
+            // }}
+            onMouseEnter={() => {
+              rightInterval.current = setInterval(() => {
+                _handleScroll(+15)
+              }, 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'],
+            })}
+            ref={containerRef}
+            {...props}
+          />
+          {portal.current}
+        </div>
+      </div>
+    )
+  }
+)
+
+export default VBrowserContainer

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

@@ -0,0 +1,118 @@
+: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 40px;
+
+    &::-webkit-scrollbar {
+      display: none; /* for Chrome, Safari, and Opera */
+    }
+
+    &-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;
+        }
+
+        &.border::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          width: 1px;
+          height: 24px;
+          background-color: #e8ecf3;
+        }
+
+        &:hover::after {
+          content: none;
+        }
+
+        &-close:hover {
+          filter: brightness(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;
+    }
+
+    &.hiding-tabs {
+      height: 100vh;
+
+      .v-browser-window-content {
+        height: 100vh;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+/* eslint-disable dot-notation */
+import { get } from 'lodash'
+import { observer } from 'mobx-react'
+import React, { createRef, FC, useContext, useEffect } from 'react'
+import BrowserContext from '../context/browser'
+import { CacheItem } from '../types'
+import { pages } from '../v_browser'
+
+interface WindowWrapperProps {
+  path: string
+}
+const WindowWrapper: FC<WindowWrapperProps> = ({ path }) => {
+  const placeholder = (<div className='v-browser-placeholder' />) as CacheItem['vNode']
+  const browser = useContext(BrowserContext)
+  const w = browser.windows.find((w) => w.path === path)
+
+  const _handleShow = (vNode: CacheItem['vNode']) => {
+    const active = browser.activeWindow?.path === path
+    if (vNode?.ref.current) vNode.ref.current.style.display = 'none'
+    // 激活窗口
+    if (vNode && active) {
+      if (!vNode.ref.current) return
+      vNode.ref.current.style.display = 'block'
+      browser['_fire']('show', w!)
+    }
+  }
+
+  useEffect(() => {
+    const active = browser.activeWindow?.path === path
+    const vNode = get(browser['_cache'], [path, 'vNode'])
+    if (!vNode && active) {
+      // 创建缓存
+      const page = pages.find((p) => p.path === path)
+      if (!page) throw new Error('[VBrowser] page not found: ' + path)
+      page.loader().then((module) => {
+        const Component = module.default
+        const vNode = (
+          <div
+            className='v-browser-window-content'
+            data-vbrowser-window={path}
+            ref={createRef()}
+          >
+            <Component />
+          </div>
+        ) as CacheItem['vNode']
+        browser['_setCache'](path, { vNode })
+        browser['_fire']('show', w!)
+        return null
+      })
+      return
+    }
+
+    _handleShow(vNode)
+  }, [browser.activeWindow?.path])
+
+  // 创建缓存完成
+  useEffect(() => {
+    const vNode = get(browser['_cache'], [path, 'vNode'])
+    if (!vNode) return
+    _handleShow(vNode)
+  }, [browser['_cache'][path]])
+
+  return get(browser['_cache'], [path, 'vNode']) || placeholder
+}
+
+export default observer(WindowWrapper)

package/src/component/v_browser/v_browser.tsx

@@ -0,0 +1,264 @@
+import React from 'react'
+import { makeAutoObservable, observable, reaction, when } from 'mobx'
+import VBrowserContainer from './ui/index'
+import BrowserContext from './context/browser'
+import { CacheItem, VBrowserProps, VBrowserWindow } from './types'
+import { parse, stringify } from 'querystring'
+import { isEqual } from 'lodash'
+
+// @ts-ignore
+const req = require.context('@/pages', true, __AUTO_ROUTER_REG__, 'lazy')
+export const pages = req.keys().map((key) => {
+  return {
+    path: key.replace(/^\./, '').replace('/index.page.tsx', ''),
+    loader: () => Promise.resolve(req(key)),
+  }
+})
+
+const STORAGE_KEY = 'vbrowser-cache'
+
+type EventName = 'error' | 'change' | 'close' | 'show'
+
+interface VBrowser {
+  on(e: 'error', fn: (err: Error) => void): void
+  on(e: 'change', fn: (to: VBrowserWindow, from: VBrowserWindow) => void): void
+  on(e: 'close', fn: (w: VBrowserWindow) => void): void
+  on(e: 'show', fn: (w: VBrowserWindow) => void): void
+}
+
+class VBrowser implements VBrowser {
+  constructor(props: VBrowserProps) {
+    this.props = props
+    this.props.restore = this.props.restore ?? true
+    this.ui = (
+      <BrowserContext.Provider value={this}>
+        <VBrowserContainer />
+      </BrowserContext.Provider>
+    )
+    this._loadStash().then(async () => {
+      await when(() => this.mounted)
+      this.props.onReady && this.props.onReady()
+      return null
+    })
+    makeAutoObservable(this, { ui: false, windows: observable.shallow })
+  }
+
+  props!: VBrowserProps
+
+  /** 窗口列表 */
+  windows: VBrowserWindow[] = []
+  /** 选中窗口索引 */
+  activeIndex = -1
+  /** 选中窗口 */
+  get activeWindow() {
+    return this.windows[this.activeIndex] as VBrowserWindow | undefined
+  }
+
+  /** 切换已打开窗口 */
+  switchWindow(w: number | VBrowserWindow) {
+    const oldWindow = this.activeWindow
+    if (typeof w === 'number') {
+      this.activeIndex = w
+    } else {
+      const index = this.windows.findIndex((item) => item.path === w.path)
+      if (index === -1) {
+        throw new Error(`窗口不存在（${w.path} ）`)
+      }
+      this.activeIndex = index
+    }
+    setTimeout(() => this._scrollToActiveTab(), 100)
+
+    this.props.onChange &&
+      this.props.onChange(oldWindow, this.windows[this.activeIndex], this.windows)
+    this._stash()
+  }
+
+  /** 打开新子窗口,路由已打开则判断query是否相等，相等则切换，不相等则销毁重新加载，未打开则新建子窗口
+   *
+   * target为'_blank'时，新开浏览器窗口
+   */
+  async open(
+    w: VBrowserWindow | string,
+    { target = '_self' }: { target: '_self' | '_blank' } = { target: '_self' }
+  ) {
+    await when(() => this.mounted)
+    // #region 格式化
+    if (typeof w === 'string') {
+      w = { path: w.split('?')[0], query: parse(w.split('?')[1]) as {} }
+    }
+    w.closeable = w.closeable ?? true
+    w.title = w.title ?? (this.props.autoTitle && this.props.autoTitle(w.path)) ?? '-'
+    // #endregion
+
+    // #region 鉴权
+    let pass = true
+    const auth = this.props.auth || (() => true)
+    // @ts-ignore
+    if (auth[Symbol.toStringTag] === 'AsyncFunction') {
+      pass = (await auth(this.activeWindow, w as VBrowserWindow)) ?? false
+    } else {
+      pass = (auth(this.activeWindow, w as VBrowserWindow) as boolean) ?? false
+    }
+    if (!pass) return this._fire('error', new Error('鉴权失败'))
+    if (!pages.find((p) => p.path === (w as VBrowserWindow).path)) {
+      console.error(w.path, '页面不存在')
+    }
+    // #endregion
+
+    // #region 打开新子窗口
+    if (target === '_self') {
+      const index = this.windows.findIndex(
+        (item) => item.path === (w as VBrowserWindow).path
+      )
+      if (index === -1) {
+        if (this.props.maxLength && this.windows.length >= this.props.maxLength) {
+          this.props.onError &&
+            this.props.onError({ code: 0, message: '超过最大允许的窗口数量' })
+          return
+        }
+        this.windows.push(w)
+      } else {
+        /**
+         * 打开已存在的相同路由的子窗口，此时情况比较复杂
+         * 当前浏览器窗口中不能开多个相同路由的子窗口，因为存在store共用冲突
+         *   如果参数相同，切换到已存在的窗口
+         *   如果不相同，销毁旧窗口重新新建，以重新触发其中的生命周期
+         */
+        const oldW = this.windows[index]
+        if (!isEqual(oldW.query, w.query)) {
+          // 删除缓存，使其需要重建
+          delete this._cache[w.path]
+        }
+        Object.assign(this.windows[index], w)
+      }
+
+      this.switchWindow(w as VBrowserWindow)
+    }
+    // #endregion
+
+    // #region 打开新浏览器窗口
+    if (target === '_blank') {
+      // 避免继承
+      const currentCache = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}')
+      const newCache = { windows: [] as VBrowserWindow[], activeIndex: 0 }
+      newCache.windows.push(...this.windows.filter((w) => !w.closeable))
+      newCache.windows.push(w)
+      newCache.activeIndex = newCache.windows.findIndex(
+        (item) => item.path === (w as VBrowserWindow).path
+      )
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(newCache))
+      window.open(`#${w.path}?${stringify(w.query || {})}`, '_blank')
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(currentCache))
+    }
+    // #endregion
+  }
+
+  /** 关闭窗口 */
+  close(i: number | VBrowserWindow) {
+    if (typeof i !== 'number') {
+      i = this.windows.findIndex((item) => item.path === (i as VBrowserWindow).path)
+    }
+    const originWindows = this.windows.slice()
+    const activeWindow = this.activeWindow
+    this.windows.splice(i, 1)
+    delete this._cache[i]
+    if (this.activeIndex === i) {
+      const left = originWindows.slice(0, i).reverse()[0]
+      const right = originWindows.slice(i + 1, originWindows.length)[0]
+      const to = this.windows.findIndex(
+        (w) => w.path === left?.path || w.path === right?.path
+      )
+      this.switchWindow(to)
+    } else {
+      this.switchWindow(this.windows.indexOf(activeWindow!))
+    }
+  }
+
+  private _scrollToActiveTab() {
+    const tabEl: HTMLDivElement | null = document.querySelector(
+      `[data-tab-id="${this.activeWindow?.path}"]`
+    )
+    if (!tabEl) return
+    tabEl.scrollIntoView()
+  }
+
+  readonly ui!: JSX.Element
+
+  /** ui是否已挂载 */
+  mounted = false
+
+  /** 是否隐藏标签栏 */
+  private _hidingTabs = false
+
+  private readonly _portal = document.createElement('div')
+
+  /** 窗口组件的缓存 */
+  private _cache: { [key: string]: CacheItem } = {}
+  /** 设置缓存 */
+  private _setCache(key: string, { vNode }: CacheItem) {
+    // key被重新设置会使原有的子窗口被销毁
+    this._cache[key] = { vNode }
+  }
+
+  // 保存已开窗口
+  private async _stash() {
+    const windows = this.windows.slice().map((item) => ({ ...item }))
+    const string = JSON.stringify({
+      windows,
+      activeIndex: this.activeIndex,
+    })
+    sessionStorage.setItem(STORAGE_KEY, string)
+  }
+
+  // 恢复已开窗口
+  private _loadStash() {
+    return new Promise((resolve, reject) => {
+      const { windows = [], activeIndex = 0 } = JSON.parse(
+        sessionStorage.getItem(STORAGE_KEY) || '{}'
+      )
+      if (windows.length === 0) return resolve(undefined)
+      this.windows = windows
+      const onShow = (w: VBrowserWindow) => {
+        this.switchWindow(activeIndex)
+        this.off('show', onShow)
+        resolve(undefined)
+      }
+      this.on('show', onShow)
+    })
+  }
+
+  /** 隐藏标签栏  */
+  hideTabs() {
+    this._hidingTabs = true
+  }
+
+  /** 显示标签栏  */
+  showTabs() {
+    this._hidingTabs = false
+  }
+
+  private _events: {
+    [eventName: string]: Array<{ event: Function }>
+  } = {}
+
+  on(eventName: EventName, event: Function) {
+    if (!this._events[eventName]) {
+      this._events[eventName] = []
+    }
+    this._events[eventName].push({ event })
+    return this
+  }
+
+  off(eventName: EventName, event: Function) {
+    const events = this._events[eventName] || []
+    const index = events.findIndex((item) => item.event === event)
+    events.splice(index, 1)
+  }
+
+  private _fire(eventName: EventName, ...args: any[]) {
+    const events = this._events[eventName] || []
+    events.forEach((item) => item.event(...args))
+  }
+}
+
+export default VBrowser

package/src/index.ts

@@ -56,3 +56,4 @@ export * from './component/uploader'
 export * from './component/recommend_input'
 export * from './component/card'
 export * from './component/controlled_form'
+export * from './component/v_browser'

package/src/svg/vbrowser-tab-delete.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/tab-delete</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/tab-delete" fill="#6a6a6a">
+            <path d="M10,4 C10.4142136,4 10.75,4.33578644 10.75,4.75 L10.75,9.25 L15.25,9.25 C15.6642136,9.25 16,9.58578644 16,10 C16,10.4142136 15.6642136,10.75 15.25,10.75 L10.75,10.75 L10.75,15.25 C10.75,15.6642136 10.4142136,16 10,16 C9.58578644,16 9.25,15.6642136 9.25,15.25 L9.25,10.75 L4.75,10.75 C4.33578644,10.75 4,10.4142136 4,10 C4,9.58578644 4.33578644,9.25 4.75,9.25 L9.25,9.25 L9.25,4.75 C9.25,4.33578644 9.58578644,4 10,4 Z" id="形状结合" transform="translate(10.000000, 10.000000) rotate(-315.000000) translate(-10.000000, -10.000000) "></path>
+        </g>
+    </g>
+</svg>

package/src/svg/vbrowser-tab-left.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/左右滑动/禁用@2x</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="icon/左右滑动/禁用" stroke="#575757" stroke-width="1.5">
+            <path d="M7.8822128,6.07106781 L7.8822128,13.8710678 C7.8822128,13.9815248 7.97175585,14.0710678 8.0822128,14.0710678 L15.8822128,14.0710678 L15.8822128,14.0710678" id="路径-4" transform="translate(11.882213, 10.071068) rotate(-315.000000) translate(-11.882213, -10.071068) "></path>
+        </g>
+    </g>
+</svg>

package/src/svg/vbrowser-tab-right.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/左右滑动/禁用@2x</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="icon/左右滑动/右/禁用" stroke="#575757" stroke-width="1.5">
+            <path d="M3.8822128,6.07106781 L3.8822128,13.8710678 C3.8822128,13.9815248 3.97175585,14.0710678 4.0822128,14.0710678 L11.8822128,14.0710678 L11.8822128,14.0710678" id="路径-4" transform="translate(7.882213, 10.071068) rotate(-135.000000) translate(-7.882213, -10.071068) "></path>
+        </g>
+    </g>
+</svg>

package/yarn-error.log

@@ -0,0 +1,267 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/bin/yarn add react-router-dom^5.2.0 --peer
+
+PATH: 
+  /opt/intel/openvino_2021/deployment_tools/model_optimizer:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/usr/local/go/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Users/jawei/google-cloud-sdk/bin:/Users/jawei/opt/anaconda3/bin:/Users/jawei/opt/anaconda3/condabin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/Users/jawei/flutter/bin:/Users/yuanzhiying/Library/flutter/bin:/usr/local/go/bin
+
+Yarn version: 
+  1.22.10
+
+Node version: 
+  14.15.1
+
+Platform: 
+  darwin x64
+
+Trace: 
+  Error: https://registry.npm.taobao.org/react-router-dom%5E5.2.0: [NOT_FOUND] react-router-dom^5.2.0 not found
+      at Request.params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66988:18)
+      at Request.self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140662:22)
+      at Request.emit (events.js:315:20)
+      at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141634:10)
+      at Request.emit (events.js:315:20)
+      at Gunzip.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141556:12)
+      at Object.onceWrapper (events.js:421:28)
+      at Gunzip.emit (events.js:315:20)
+      at endReadableNT (_stream_readable.js:1327:12)
+      at processTicksAndRejections (internal/process/task_queues.js:80:21)
+
+npm manifest: 
+  {
+    "name": "@gm-pc/react",
+    "version": "1.7.4-alpha.0",
+    "description": "观麦前端基础组件库",
+    "author": "liyatang <liyatang@qq.com>",
+    "homepage": "https://github.com/gmfe/gm-pc#readme",
+    "license": "ISC",
+    "publishConfig": {
+      "access": "public"
+    },
+    "main": "src/index.ts",
+    "module": "src/index.ts",
+    "types": "src/index.ts",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/gmfe/gm-pc.git"
+    },
+    "scripts": {
+      "test": "echo \"Error: run tests from root\" && exit 1"
+    },
+    "bugs": {
+      "url": "https://github.com/gmfe/gm-pc/issues"
+    },
+    "dependencies": {
+      "@gm-common/hooks": "^2.10.0",
+      "@gm-common/tool": "^2.10.0",
+      "@gm-pc/locales": "^1.7.4-alpha.0",
+      "big.js": "^6.0.1",
+      "classnames": "^2.2.5",
+      "lodash": "^4.17.19",
+      "modern-normalize": "^1.0.0",
+      "moment": "^2.29.1",
+      "react-window": "^1.8.5"
+    },
+    "devDependencies": {
+      "@types/react-router-dom": "^5.3.3",
+      "react": "^16.14.0",
+      "react-dom": "^16.14.0"
+    },
+    "peerDependencies": {
+      "big.js": "^6.0.1",
+      "classnames": "^2.2.5",
+      "lodash": "^4.17.19",
+      "modern-normalize": "^1.0.0",
+      "moment": "^2.29.1",
+      "react": "^16.14.0",
+      "react-dom": "^16.14.0",
+      "react-router-dom": "^5.2.0",
+      "react-window": "^1.8.5"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+  # yarn lockfile v1
+  
+  
+  "@babel/runtime@^7.0.0":
+    version "7.12.1"
+    resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.12.1.tgz?cache=0&sync_timestamp=1602799933339&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+    integrity sha1-tBFqa2cR0BCy2tO3tuQ78bmVR0A=
+    dependencies:
+      regenerator-runtime "^0.13.4"
+  
+  "@gm-common/hooks@^2.10.0":
+    version "2.10.0"
+    resolved "https://registry.npmmirror.com/@gm-common/hooks/download/@gm-common/hooks-2.10.0.tgz#c67e02875b4d266ef911e7828257d957e923826b"
+    integrity sha1-xn4Ch1tNJm75EeeCglfZV+kjgms=
+    dependencies:
+      "@gm-common/tool" "^2.10.0"
+      ts-config-gm-react-app "^3.4.5"
+  
+  "@gm-common/tool@^2.10.0":
+    version "2.10.0"
+    resolved "https://registry.npmmirror.com/@gm-common/tool/download/@gm-common/tool-2.10.0.tgz#f4f512233ff1118eff8bbdeca9762f0e65ce26bd"
+    integrity sha1-9PUSIz/xEY7/i73sqXYvDmXOJr0=
+    dependencies:
+      lodash "^4.17.20"
+  
+  "@gm-pc/locales@^1.7.4-alpha.0":
+    version "1.8.6-alpha.0"
+    resolved "https://registry.npmmirror.com/@gm-pc/locales/-/locales-1.8.6-alpha.0.tgz#9fc9918454ee774c0d61ff41f5b33343411dd3c3"
+    integrity sha512-iNAdAuu8bg7F3xB7Vr0DgvY+jpJ1lxkOTAOw+2BK3ljI1eRTbIYkqvazX9ImrdcaB+7R0sbDGUMeR8Ca7iRY3w==
+  
+  "@types/history@^4.7.11":
+    version "4.7.11"
+    resolved "https://registry.npmmirror.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+    integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
+  
+  "@types/prop-types@*":
+    version "15.7.4"
+    resolved "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+    integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+  
+  "@types/react-router-dom@^5.3.3":
+    version "5.3.3"
+    resolved "https://registry.npmmirror.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
+    integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
+    dependencies:
+      "@types/history" "^4.7.11"
+      "@types/react" "*"
+      "@types/react-router" "*"
+  
+  "@types/react-router@*":
+    version "5.1.18"
+    resolved "https://registry.npmmirror.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
+    integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
+    dependencies:
+      "@types/history" "^4.7.11"
+      "@types/react" "*"
+  
+  "@types/react@*":
+    version "17.0.39"
+    resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
+    integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
+    dependencies:
+      "@types/prop-types" "*"
+      "@types/scheduler" "*"
+      csstype "^3.0.2"
+  
+  "@types/scheduler@*":
+    version "0.16.2"
+    resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+    integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+  
+  big.js@^6.0.1:
+    version "6.0.1"
+    resolved "https://registry.npm.taobao.org/big.js/download/big.js-6.0.1.tgz#9e0a2e8b1825ce006cd4a096d6f294738cd5cff6"
+    integrity sha1-ngouixglzgBs1KCW1vKUc4zVz/Y=
+  
+  classnames@^2.2.5:
+    version "2.2.6"
+    resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+    integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
+  
+  csstype@^3.0.2:
+    version "3.0.10"
+    resolved "https://registry.npmmirror.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+    integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+  
+  "js-tokens@^3.0.0 || ^4.0.0":
+    version "4.0.0"
+    resolved "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+    integrity sha1-GSA/tZmR35jjoocFDUZHzerzJJk=
+  
+  lodash@^4.17.19, lodash@^4.17.20:
+    version "4.17.20"
+    resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+    integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  
+  loose-envify@^1.1.0, loose-envify@^1.4.0:
+    version "1.4.0"
+    resolved "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+    integrity sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=
+    dependencies:
+      js-tokens "^3.0.0 || ^4.0.0"
+  
+  "memoize-one@>=3.1.1 <6":
+    version "5.1.1"
+    resolved "https://registry.npm.taobao.org/memoize-one/download/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+    integrity sha1-BHtuMZm1COrsA1BN5xIpuOsddcA=
+  
+  modern-normalize@^1.0.0:
+    version "1.0.0"
+    resolved "https://registry.npm.taobao.org/modern-normalize/download/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
+    integrity sha1-U52EoeFBM4sBs0bz4nOW0O0XYB4=
+  
+  moment@^2.29.1:
+    version "2.29.1"
+    resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+    integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
+  
+  object-assign@^4.1.1:
+    version "4.1.1"
+    resolved "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+    integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+  
+  prop-types@^15.6.2:
+    version "15.7.2"
+    resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+    integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
+    dependencies:
+      loose-envify "^1.4.0"
+      object-assign "^4.1.1"
+      react-is "^16.8.1"
+  
+  react-dom@^16.14.0:
+    version "16.14.0"
+    resolved "https://registry.npm.taobao.org/react-dom/download/react-dom-16.14.0.tgz?cache=0&sync_timestamp=1603367590403&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dom%2Fdownload%2Freact-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+    integrity sha1-etg47Cmnd/s8dcOhkPZhz5Kri4k=
+    dependencies:
+      loose-envify "^1.1.0"
+      object-assign "^4.1.1"
+      prop-types "^15.6.2"
+      scheduler "^0.19.1"
+  
+  react-is@^16.8.1:
+    version "16.13.1"
+    resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz?cache=0&sync_timestamp=1603367576715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-is%2Fdownload%2Freact-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+    integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
+  
+  react-window@^1.8.5:
+    version "1.8.6"
+    resolved "https://registry.npm.taobao.org/react-window/download/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+    integrity sha1-0BGVCsZDqZQRhjJmWq0MY4LioRI=
+    dependencies:
+      "@babel/runtime" "^7.0.0"
+      memoize-one ">=3.1.1 <6"
+  
+  react@^16.14.0:
+    version "16.14.0"
+    resolved "https://registry.npm.taobao.org/react/download/react-16.14.0.tgz?cache=0&sync_timestamp=1603367592109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+    integrity sha1-lNd23dCqo32j7aj8W2sYpMmjEU0=
+    dependencies:
+      loose-envify "^1.1.0"
+      object-assign "^4.1.1"
+      prop-types "^15.6.2"
+  
+  regenerator-runtime@^0.13.4:
+    version "0.13.7"
+    resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595456311465&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+    integrity sha1-ysLazIoepnX+qrrriugziYrkb1U=
+  
+  scheduler@^0.19.1:
+    version "0.19.1"
+    resolved "https://registry.npm.taobao.org/scheduler/download/scheduler-0.19.1.tgz?cache=0&sync_timestamp=1603367591660&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fscheduler%2Fdownload%2Fscheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+    integrity sha1-Tz4u0sGn1laB9MhU+oxaHMtA8ZY=
+    dependencies:
+      loose-envify "^1.1.0"
+      object-assign "^4.1.1"
+  
+  ts-config-gm-react-app@^3.4.5:
+    version "3.4.7"
+    resolved "https://registry.npmjs.org/ts-config-gm-react-app/-/ts-config-gm-react-app-3.4.7.tgz#51decbf847c991ae8e3bd950f3f84cfb0523ba4b"
+    integrity sha512-1XOMmAIEiUr2R0JTasF30zj5ZRZgVTOx/ycZJOh2xusQCYC4n1/wGbXfEzm8Dzhv2YSWHEWPVHpytAM3mYsu9Q==