@gm-pc/react 1.13.2 → 1.13.3-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.13.2",
+  "version": "1.13.3-alpha.2",
   "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.13.2",
+    "@gm-pc/locales": "^1.13.3-alpha.2",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "eed0722555286fb4c48d77c9fe1082db7c6ffb7f"
+  "gitHead": "bdd278fe8bf983b735b760af20581ab580972632"
 }

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

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

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

@@ -12,8 +12,8 @@ type Noop = () => void
  */
 export default function useWindowEffect(fn: () => Noop | void, deps: Array<any>) {
   const browser = useContext(BrowserContext)
-  /** hook所在窗口 */
-  const browserWindow = useContext(BrowserWindowContext)
+  const path = useContext(BrowserWindowContext)
+  const browserWindow = browser.windows.find((w) => w.path === path)!
   const cb = useRef<Noop | void>()
 
   useEffect(() => {
@@ -37,21 +37,15 @@ export default function useWindowEffect(fn: () => Noop | void, deps: Array<any>)
         const deactivate = pre?.path === browserWindow.path
         if (activate) {
           cb.current = fn()
-          console.log('activate', browserWindow.path)
+          // console.log('activate', browserWindow.path)
         }
         if (deactivate) {
           cb.current && cb.current()
-          console.log('deactivate', browserWindow.path)
+          // console.log('deactivate', browserWindow.path)
         }
       }
-      // { fireImmediately: true }
     )
     cb.current = fn()
-    console.log('effect', browserWindow.path, deps)
-    return () => {
-      console.log('dispose', browserWindow.path)
-      dispose()
-      cb.current && cb.current()
-    }
+    return dispose
   }, deps)
 }

package/src/component/v_browser/types.ts

@@ -14,7 +14,7 @@ export interface VBrowserWindow {
 export interface VBrowserProps {
   /** 窗口数量限制 */
   maxLength?: number
-  /** 准备就绪 */
+  /** 准备就绪 (读取Storage) */
   onReady?: Function
   /** 重新打开vBrowser时恢复已打开窗口, 默认为true */
   restore?: boolean
@@ -28,7 +28,13 @@ export interface VBrowserProps {
   auth?: (from?: VBrowserWindow, to?: VBrowserWindow) => Promise<boolean> | boolean
   /**
    * 错误码参考
+   *
    * code: 0, message: '超过最大允许的窗口数量'
+   *
+   * code: 1, message: '鉴权失败'
+   *
+   * code: 2, message: '路由不存在‘
+   *
    */
   onError?: (error: { code: number; message: string }) => void
   /** 打开窗口如果没有传入标题，则使用此方法取标题 */

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

@@ -64,7 +64,7 @@ const VBrowserContainer: FC<{ className?: string }> = observer(
       createPortal(
         pages.map((page, i) => {
           return (
-            <BrowserWindowContext.Provider key={i} value={page}>
+            <BrowserWindowContext.Provider key={i} value={page.path}>
               <WindowWrapper key={i} path={page.path} />
             </BrowserWindowContext.Provider>
           )

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

@@ -1,9 +1,11 @@
 /* eslint-disable dot-notation */
 import { get } from 'lodash'
 import { observer } from 'mobx-react'
-import React, { createRef, FC, useContext, useEffect } from 'react'
+import React, { createRef, FC, lazy, Suspense, useContext, useEffect } from 'react'
+import { Loading } from '../../loading'
 import { NProgress } from '../../n_progress'
 import BrowserContext from '../context/browser'
+import BrowserWindowContext from '../context/browserWindow'
 import { CacheItem } from '../types'
 import { pages } from '../v_browser'
 
@@ -34,27 +36,25 @@ const WindowWrapper: FC<WindowWrapperProps> = ({ path }) => {
       const page = pages.find((p) => p.path === path)
       if (!page) throw new Error('[VBrowser] page not found: ' + path)
 
-      NProgress.start()
-      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
-        })
-        .finally(() => {
-          NProgress.done()
-        })
+      const loading = (
+        <div className='tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center'>
+          <Loading size='24' />
+        </div>
+      )
+      const Component = lazy(page.loader)
+      const vNode = (
+        <div
+          className='v-browser-window-content'
+          data-vbrowser-window={path}
+          ref={createRef()}
+        >
+          <Suspense fallback={loading}>
+            <Component />
+          </Suspense>
+        </div>
+      ) as CacheItem['vNode']
+      browser['_setCache'](path, { vNode })
+      browser['_fire']('show', w!)
       return
     }
 

package/src/component/v_browser/v_browser.stories.mdx

@@ -89,6 +89,10 @@ vbrowser 暴露了以下属性和方法，详细信息见类型声明/代码提
 
   隐藏窗口管理栏，可以用于进入全屏模式的场景；
 
+- `clearSession`
+
+  清除会话缓存，使重新进入不恢复vbrowser窗口标签栏
+
 - `on`
 
   事件监听, `'error' | 'change' | 'close' | 'show'`，分别对应错误、窗口切换、窗口关闭、窗口激活事件；

package/src/component/v_browser/v_browser.tsx

@@ -15,7 +15,7 @@ export const pages = req.keys().map((key) => {
   }
 })
 
-const STORAGE_KEY = 'vbrowser-cache'
+export const VBROWSER_STORAGE_KEY = 'gm_vbrowser-cache'
 
 type EventName = 'error' | 'change' | 'close' | 'show'
 
@@ -36,7 +36,7 @@ class VBrowser implements VBrowser {
       </BrowserContext.Provider>
     )
     // this.open = debounce(this.open).bind(this) as typeof this.open
-    this._loadStash().then(async () => {
+    this._restoreSession().then(async () => {
       await when(() => this.mounted)
       this.props.onReady && this.props.onReady()
       return null
@@ -65,7 +65,7 @@ class VBrowser implements VBrowser {
     if (ignored) {
       const i = this.windows.indexOf(oldWindow!)
       this.windows.splice(i, 1)
-      delete this._cache[i]
+      delete this._cache[oldWindow?.path!]
     }
 
     if (typeof w === 'number') {
@@ -81,7 +81,7 @@ class VBrowser implements VBrowser {
 
     this.props.onChange &&
       this.props.onChange(oldWindow, this.windows[this.activeIndex], this.windows)
-    this._stash()
+    this._stashSession()
   }
 
   /** 打开新子窗口, 子窗口已存在则判断query是否相等，相等则切换，不相等则隐性销毁重新加载；子窗口不存在则新建子窗口；
@@ -110,9 +110,16 @@ class VBrowser implements VBrowser {
     } else {
       pass = (auth(this.activeWindow, w as VBrowserWindow) as boolean) ?? false
     }
-    if (!pass) return this._fire('error', new Error('鉴权失败'))
+    if (!pass) {
+      this._fire('error', { code: 1, message: '鉴权失败' })
+      return
+    }
     if (!pages.find((p) => p.path === (w as VBrowserWindow).path)) {
-      console.error(w.path, '页面不存在')
+      this._fire('error', {
+        code: 2,
+        message: `无法找到页面 ${w.path}, 可用路径：${pages.map((p) => p.path)}`,
+      })
+      return
     }
     // #endregion
 
@@ -123,8 +130,7 @@ class VBrowser implements VBrowser {
       )
       if (index === -1) {
         if (this.props.maxLength && this.windows.length >= this.props.maxLength) {
-          this.props.onError &&
-            this.props.onError({ code: 0, message: '超过最大允许的窗口数量' })
+          this._fire('error', { code: 0, message: '超过最大允许的窗口数量' })
           return
         }
 
@@ -151,16 +157,18 @@ class VBrowser implements VBrowser {
     // #region 打开新浏览器窗口
     if (target === '_blank') {
       // 避免继承
-      const currentCache = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}')
+      const currentCache = JSON.parse(
+        sessionStorage.getItem(VBROWSER_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))
+      sessionStorage.setItem(VBROWSER_STORAGE_KEY, JSON.stringify(newCache))
       window.open(`#${w.path}?${stringify(w.query || {})}`, '_blank')
-      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(currentCache))
+      sessionStorage.setItem(VBROWSER_STORAGE_KEY, JSON.stringify(currentCache))
     }
     // #endregion
   }
@@ -213,26 +221,31 @@ class VBrowser implements VBrowser {
   }
 
   // 保存已开窗口
-  private async _stash() {
+  private async _stashSession() {
     const windows = this.windows.slice().map((item) => ({ ...item }))
     const string = JSON.stringify({
       windows,
       activeIndex: this.activeIndex,
     })
-    sessionStorage.setItem(STORAGE_KEY, string)
+    sessionStorage.setItem(VBROWSER_STORAGE_KEY, string)
   }
 
   // 恢复已开窗口
-  private async _loadStash() {
+  private async _restoreSession() {
     await new Promise((resolve) => setTimeout(resolve, 100))
     const { windows = [], activeIndex = 0 } = JSON.parse(
-      sessionStorage.getItem(STORAGE_KEY) || '{}'
+      sessionStorage.getItem(VBROWSER_STORAGE_KEY) || '{}'
     )
     if (windows.length === 0) return
     this.windows = windows
     this.open(windows[activeIndex])
   }
 
+  /** 清除会话缓存，使重新进入不恢复vbrowser窗口标签栏 */
+  clearSession() {
+    sessionStorage.removeItem(VBROWSER_STORAGE_KEY)
+  }
+
   /** 隐藏标签栏  */
   hideTabs() {
     this._hidingTabs = true
@@ -264,6 +277,9 @@ class VBrowser implements VBrowser {
   private _fire(eventName: EventName, ...args: any[]) {
     const events = this._events[eventName] || []
     events.forEach((item) => item.event(...args))
+    if (eventName === 'error') {
+      this.props.onError && this.props.onError(args?.[0])
+    }
   }
 }