chore: add micro adaptation (#596)

Co-authored-by: yaojiping <yaojiping@infini.ltd>

Author: yaojp123

web/packages/axios/src/index.ts

@@ -14,6 +14,8 @@ import type {
   ResponseType
 } from './type';
 
+axios.defaults.withCredentials = true;
+
 function createCommonRequest<ResponseData = any>(
   axiosConfig?: CreateAxiosDefaults,
   options?: Partial<RequestOption<ResponseData>>

web/packages/utils/src/storage.ts

@@ -3,8 +3,8 @@ import localforage from 'localforage';
 /** The storage type */
 export type StorageType = 'local' | 'session';
 
-export function createStorage<T extends object>(type: StorageType, storagePrefix: string) {
-  const stg = type === 'session' ? window.sessionStorage : window.localStorage;
+export function createStorage<T extends object>(type: StorageType, storagePrefix: string, proxy?: any) {
+  const stg = proxy ? proxy : (type === 'session' ? window.sessionStorage : window.localStorage);
 
   const storage = {
     clear() {

web/src/App.tsx

@@ -4,7 +4,7 @@ import type { WatermarkProps } from 'antd';
 
 import { info } from '@/constants/app';
 import { router } from '@/router';
-import { getLocale } from '@/store/slice/app';
+import { changeLocale, getLocale } from '@/store/slice/app';
 import { getDarkMode, getThemeSettings, themeColors } from '@/store/slice/theme';
 import { getAntdTheme, setupThemeVarsToHtml, toggleCssDarkMode } from '@/store/slice/theme/shared';
 import { localStg } from '@/utils/storage';
@@ -48,6 +48,13 @@ const App = () => {
   const locale = useAppSelector(getLocale);
 
   const { antdTheme, themeSettings } = useTheme();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (window.$wujie?.props?.locale) {
+      dispatch(changeLocale(window.$wujie?.props?.locale));
+    }
+  }, [window.$wujie?.props?.locale]);
 
   return (
     <AConfigProvider
@@ -63,7 +70,7 @@ const App = () => {
           {...watermarkProps}
         >
           <RouterProvider
-            fallback={<GlobalLoading />}
+            fallback={<GlobalLoading className={window.__POWERED_BY_WUJIE__ ? 'absolute' : ''} />}
             router={router}
           />
         </AWatermark>

web/src/assets/svg-icon/folder.svg

@@ -3,7 +3,10 @@ import React from 'react';
 
 import FontIcon from '@/components/common/font_icon';
 
-const Icon = ({ className, src, style, ...rest }) => {
+import normalizeUrl from 'normalize-url';
+import { getProxyEndpoint } from '@/components/micro/utils'
+
+const Icon = ({ className, src, style, server, ...rest }) => {
   if (!src) {
     return null;
   }
@@ -17,9 +20,13 @@ const Icon = ({ className, src, style, ...rest }) => {
       />
     );
   }
+  let formatSrc = src
+  if (!src.startsWith('http')) {
+    formatSrc = normalizeUrl(`${getProxyEndpoint() || server}/${src}`)
+  }
   return (
     <Image
-      src={src}
+      src={formatSrc}
       style={style}
       {...rest}
       preview={false}

web/src/assets/svg-icon/home.svg

@@ -0,0 +1,55 @@
+export function setupMicro(root, renderRoot) {
+
+    window.__WUJIE_MOUNT = () => {
+      renderRoot(root)
+    };
+    window.__WUJIE_UNMOUNT = () => {
+      root.unmount()
+    };
+    window.__WUJIE.mount()
+    
+    setupIcons();
+    setupHistoryHooks();
+}
+
+function setupIcons() {
+    const parentDoc = window.$wujie?.props?.parentDocument;
+    if (!parentDoc) return; 
+
+    const existingMicroIcon = parentDoc.getElementById('__MICRO__SVG_ICON_LOCAL__');
+    if (existingMicroIcon) return;
+
+    const sourceIcon = document.getElementById('__SVG_ICON_LOCAL__');
+    if (!sourceIcon) return;
+
+    const clonedIcon = sourceIcon.cloneNode(true) as any;
+    clonedIcon.id = '__MICRO__SVG_ICON_LOCAL__';
+
+    parentDoc.body.appendChild(clonedIcon);
+}
+
+function setupHistoryHooks() {
+    let lastUrl = window.location.href;
+
+    function handleUrlChange() {
+        const currentUrl = window.location.href;
+        if (currentUrl !== lastUrl) {
+            lastUrl = currentUrl;
+            window.$wujie?.props?.onRouteChange({ 
+                url: currentUrl, 
+            })
+        }
+    }
+
+    const originalPushState = window.history.pushState;
+    window.history.pushState = function(...args) {
+        originalPushState.apply(this, args);
+        handleUrlChange(); 
+    };
+
+    const originalReplaceState = window.history.replaceState;
+    window.history.replaceState = function(...args) {
+        originalReplaceState.apply(this, args);
+        handleUrlChange(); 
+    };
+}