Browse Source

minor: 微前端框架问题比较多,子应用改成iframe嵌套

tuonian 1 week ago
parent
commit
f2829c82d5

File diff suppressed because it is too large
+ 0 - 0
frontend/dist/assets/index-8e85d0ec.js


File diff suppressed because it is too large
+ 0 - 0
frontend/dist/assets/index-bfcad9eb.js


+ 1 - 1
frontend/dist/cdn/rich.js

@@ -1,2 +1,2 @@
-import{a as f,R as w,w as D}from"./react-all-18.2.0.js";import"./ace-builds-1.23.0.js";import{j as S}from"../assets/index-8e85d0ec.js";var g=function(t){var e;return typeof t=="string"||!t||isNaN(t)?e=t:e="".concat(t,"px"),e};function j(r,t){return x(r)||E(r,t)||T(r,t)||I()}function I(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+import{a as f,R as w,w as D}from"./react-all-18.2.0.js";import"./ace-builds-1.23.0.js";import{j as S}from"../assets/index-bfcad9eb.js";var g=function(t){var e;return typeof t=="string"||!t||isNaN(t)?e=t:e="".concat(t,"px"),e};function j(r,t){return x(r)||E(r,t)||T(r,t)||I()}function I(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function T(r,t){if(r){if(typeof r=="string")return O(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);if(e==="Object"&&r.constructor&&(e=r.constructor.name),e==="Map"||e==="Set")return Array.from(r);if(e==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return O(r,t)}}function O(r,t){(t==null||t>r.length)&&(t=r.length);for(var e=0,o=new Array(t);e<t;e++)o[e]=r[e];return o}function E(r,t){var e=r==null?null:typeof Symbol<"u"&&r[Symbol.iterator]||r["@@iterator"];if(e!=null){var o,i,u,l,n=[],a=!0,s=!1;try{if(u=(e=e.call(r)).next,t===0){if(Object(e)!==e)return;a=!1}else for(;!(a=(o=u.call(e)).done)&&(n.push(o.value),n.length!==t);a=!0);}catch(c){s=!0,i=c}finally{try{if(!a&&e.return!=null&&(l=e.return(),Object(l)!==l))return}finally{if(s)throw i}}return n}}function x(r){if(Array.isArray(r))return r}var L=function(t,e){return!e||!t.saveAsObj?e:t.mode==="json"?JSON.parse(e):t.mode==="yaml"||t.mode==="yml"?S.load(e):e},M=function(t,e){return typeof e=="string"||!e?e:t.mode==="json"?JSON.stringify(e,null,2):t.mode==="yaml"||t.mode==="yml"?S.dump(e):e};const k=function(r){var t=r.value,e=r.className,o=e===void 0?"":e,i=r.column,u=r.onChange,l=r.readonly,n=i,a=n.mode;a==="yml"?a="yaml":a||(a="json");var s=f.useState(),c=j(s,2),A=c[0],y=c[1],C=f.useState(""),h=j(C,2),N=h[0],p=h[1],m=f.useRef(),R=function(v){y(v);try{var b=L(n,v);m.current=b,u==null||u(b),p("")}catch{p("has-err")}};return f.useEffect(function(){if(!(m.current&&t===m.current))try{y(M(n,t))}catch(d){console.warn("fromObjData: ",d)}},[t]),w.createElement(D,{mode:a,value:A,showPrintMargin:n.printMargin,showGutter:!n.hiddenLines,highlightActiveLine:!0,theme:"chrome",height:g(i.height||120),width:g(i.width)||"80%",onChange:R,readOnly:!!i.disabled||l,setOptions:n.options,className:"rich-input json-input ".concat(o," ").concat(N),placeholder:n.placeholder})};export{k as default,M as fromObjData,L as toObjData};

+ 1 - 1
frontend/dist/index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NginxUI</title>
     <script type="application/javascript" src="/nginx-ui/config.js"></script>
-    <script crossorigin="">import('/nginx-ui/assets/index-8e85d0ec.js').finally(() => {
+    <script crossorigin="">import('/nginx-ui/assets/index-bfcad9eb.js').finally(() => {
             
     const qiankunLifeCycle = window.moudleQiankunAppLifeCycles && window.moudleQiankunAppLifeCycles['nginx-ui'];
     if (qiankunLifeCycle) {

+ 48 - 45
frontend/src/pages/microApp/index.tsx

@@ -5,64 +5,63 @@ import {ErrorComponent} from "../../components/error/Error.tsx";
 import {useAppDispatch, useAppSelector} from "../../store";
 import {LoadingText} from "../../components/loading";
 import {settingsActions} from "../../store/slice/settings.ts";
-import {startApp} from "wujie";
+// import {startApp} from "wujie";
 
 // 腾讯无界: https://wujie-micro.github.io/doc/guide/start.html
 export const MicroAppPage = () => {
 
     const params = useParams<{ id: string }>()
     const [error, setError] = useState<any>()
-    const [loading, setLoading] = useState(false)
+    const [loading, setLoading] = useState(true)
 
     const routeMap = useAppSelector(state => state.user.routeMap)
     const dispatch = useAppDispatch();
     const domRef = useRef<HTMLDivElement>(null);
-    const destroyRef = useRef<any>()
-
-
-    const setFullScreen = (full:boolean) => {
-        dispatch(settingsActions.setFullScreen(full))
-    }
-
     const app = useMemo(() => {
         return params?.id ? routeMap[params.id] : undefined
     }, [routeMap, params.id])
 
-    const onActivated = (e: any) => {
-        console.log('activated', e)
-    }
 
-    const onLoadFail = (url: any, e: any) => {
-        setLoading(false)
-        console.log('load fail', url)
-        setError(e)
-    }
-    const afterMounted = () => {
-        console.log('afterMounted', app)
+    const setFullScreen = (full:boolean) => {
+        dispatch(settingsActions.setFullScreen(full))
     }
 
-    const handleStartApp = () => {
-        if (!domRef.current || !app) {
-            return
-        }
-        console.log('startApp', app.path)
-        startApp({
-            name: app.id,
-            url: app.path,
-            alive: true,
-            el: domRef.current,
-            beforeMount: () => setLoading(true),
-            afterMount: afterMounted,
-            loadError: onLoadFail,
-            activated: onActivated,
-            degrade: true,
-            sync: true,
-        }).then(func=>{
-            destroyRef.current = func
-        }).catch(err=>{
-            console.log('startApp error ',err)
-        })
-    }
+    // const destroyRef = useRef<any>()
+    // const onActivated = (e: any) => {
+    //     console.log('activated', e)
+    // }
+    //
+    // const onLoadFail = (url: any, e: any) => {
+    //     setLoading(false)
+    //     console.log('load fail', url)
+    //     setError(e)
+    // }
+    // const afterMounted = () => {
+    //     console.log('afterMounted', app)
+    // }
+
+    // const handleStartApp = () => {
+    //     if (!domRef.current || !app) {
+    //         return
+    //     }
+    //     console.log('startApp', app.path)
+    //     startApp({
+    //         name: app.id,
+    //         url: app.path,
+    //         alive: true,
+    //         el: domRef.current,
+    //         beforeMount: () => setLoading(true),
+    //         afterMount: afterMounted,
+    //         loadError: onLoadFail,
+    //         activated: onActivated,
+    //         degrade: true,
+    //         sync: true,
+    //     }).then(func=>{
+    //         destroyRef.current = func
+    //     }).catch(err=>{
+    //         console.log('startApp error ',err)
+    //     })
+    // }
 
     useEffect(() => {
         setFullScreen(true)
@@ -71,13 +70,17 @@ export const MicroAppPage = () => {
         }
     }, []);
 
-    useEffect(() => {
-        handleStartApp()
-    }, [domRef.current,app]);
+    // useEffect(() => {
+    //     handleStartApp()
+    // }, [domRef.current,app]);
 
     return (<div id={'micro_app_'+app?.id} className="micro-app">
         <LoadingText loading={loading} text="加载中,请稍后..."/>
         {error ?<ErrorComponent noRedirect={true} error={error}/>: null}
-        <div className="micro-app-container" ref={domRef} />
+        <div className="micro-app-container" ref={domRef}>
+            <iframe src={app?.path} style={{width:'100%',height:'100%'}}
+                    onLoad={() => setLoading(false)}
+                    onError={e=>setError(e)}/>
+        </div>
     </div>)
 }

Some files were not shown because too many files changed in this diff