How biugle/web_base works
web_base is a React/TypeScript enterprise front-end application base, with this tree representing its web app branch rather than the README’s separate Electron and ServiceWorker variants. The principal workflow is app startup, route selection, and rendering login, home, list-demo, or not-found screens. The tree also exposes reusable UI components, custom hooks, Redux state, and request utilities. Edges reflect the sampled entry, routing, login, and hook code; wiring for unsampled screens and components is intentionally not inferred.
Main entry points: index.ts Route config · main.tsx React entry · index.tsx App shell · RouterView.tsx Route view
Components 25
App startup
- React entry
src/main.tsx - App shell
src/App/index.tsx
Routing and screens
- Route config
src/router/index.ts - App router
src/router/AppRouter/index.tsx - Route view
src/router/AppRouter/RouterView.tsx - Route access
src/router/AppRouter/AuthRouteDom.tsx - Route listener
src/router/AppRouter/RouterListener.tsx - Home screen
src/views/Home/index.tsx - List demo
src/views/ListDemo/index.tsx - Login screen
src/views/LoginRwd/index.tsx - Not found
src/views/404/index.tsx
Shared capabilities
- UI components
src/components - Fire utilities
src/components/Fire - Router hooks
src/_custom/hooks/useRouterChange.ts - Fetch hook
src/_custom/hooks/useFetch.ts - Storage hook
src/_custom/hooks/useStorage.ts - Startup loading
src/components/AppLoading/index.tsx - Route loading
src/components/RouterLoading/index.tsx - Route event bus
State and requests
- Redux store
src/store/all.ts - App state
src/store/states - Browser storage
- Demo service
src/services/demo.ts - HTTP utility
src/tools/xhttp.ts
Other components
- User
Connections 23
- User → React entry: opens app
- React entry → App shell: renders
- React entry → Redux store: provides state
- React entry → Route config: passes routes
- App shell → App router: renders after load
- App shell → Redux store: selects state
- App shell → Startup loading: shows while loading
- App router → Route view: renders routes
- App router → Route listener: mounts listener
- Route view → Route config: matches config
- Route view → Route access: renders route
- Route view → Route loading: suspends to
- Route config → Home screen: lazy loads
- Route config → List demo: lazy loads
- Route config → Login screen: lazy loads
- Route config → Not found: lazy loads
- Login screen → User: accepts interaction
- Route listener → Route event bus: dispatches change
- Router hooks → Route event bus: subscribes
- Storage hook → Browser storage: reads and writes
- Fetch hook → Demo service: fetches URL
- Demo service → HTTP utility: uses utility
- Redux store → App state: combines state