feat: web channel basic test

Author: FlyAndNotDown

Editor/Include/Editor/Widget/ProjectHub.h

@@ -7,10 +7,25 @@
 #include <Editor/Widget/WebWidget.h>
 
 namespace Editor {
+    class ProjectHub;
+
+    class ProjectHubBridge final : public QObject {
+        Q_OBJECT
+
+    public:
+        explicit ProjectHubBridge(ProjectHub* parent = nullptr);
+
+    public Q_SLOTS:
+        void CreateProject() const;
+    };
+
     class ProjectHub final : public WebWidget {
         Q_OBJECT
 
     public:
         explicit ProjectHub(QWidget* inParent = nullptr);
+
+    private:
+        ProjectHubBridge* bridge;
     };
 }

Editor/Include/Editor/Widget/WebWidget.h

@@ -4,6 +4,7 @@
 
 #pragma once
 
+#include <QWebChannel>
 #include <QWebEngineView>
 
 namespace Editor {
@@ -15,5 +16,11 @@ namespace Editor {
         ~WebWidget() override;
 
         void Load(const std::string& inUrl);
+
+    protected:
+        QWebChannel* GetWebChannel() const;
+
+    private:
+        QWebChannel* webChannel;
     };
 }

Editor/Src/Widget/ProjectHub.cpp

@@ -2,14 +2,31 @@
 // Created by johnk on 2025/8/3.
 //
 
+#include <QWebChannel>
+
 #include <Editor/Widget/ProjectHub.h>
 #include <Editor/Widget/moc_ProjectHub.cpp>
+#include <Core/Log.h>
 
 namespace Editor {
+    ProjectHubBridge::ProjectHubBridge(ProjectHub* parent)
+        : QObject(parent)
+    {
+    }
+
+    void ProjectHubBridge::CreateProject() const
+    {
+        // TODO
+        LogInfo(ProjectHub, "ProjectHubBridge::CreateProject");
+    }
+
     ProjectHub::ProjectHub(QWidget* inParent)
         : WebWidget(inParent)
     {
         setFixedSize(800, 600);
         Load("/project-hub");
+
+        bridge = new ProjectHubBridge(this);
+        GetWebChannel()->registerObject("bridge", bridge);
     }
 } // namespace Editor

Editor/Src/Widget/WebWidget.cpp

@@ -18,6 +18,8 @@ namespace Editor {
     WebWidget::WebWidget(QWidget* inParent)
         : QWebEngineView(inParent)
     {
+        webChannel = new QWebChannel(this);
+        page()->setWebChannel(webChannel);
     }
 
     WebWidget::~WebWidget() = default;
@@ -31,4 +33,9 @@ namespace Editor {
         const std::string fullUrl = baseUrl + inUrl;
         load(QUrl(fullUrl.c_str()));
     }
+
+    QWebChannel* WebWidget::GetWebChannel() const
+    {
+        return webChannel;
+    }
 } // namespace Editor

Editor/Web/src/pages/project-hub.tsx

@@ -1,10 +1,23 @@
+import { useEffect } from "react";
+import { QWebChannel } from '@/qwebchannel'
 import { Tabs, Tab } from '@heroui/tabs';
 import { User } from '@heroui/user';
 import { Form } from '@heroui/form';
 import { Button } from '@heroui/button';
 import { Input } from '@heroui/input';
 
 export default function ProjectHubPage() {
+  useEffect(() => {
+    new QWebChannel(window.qt.webChannelTransport, (channel: QWebChannel) : void => {
+      window.bridge = channel.objects.bridge;
+    })
+  }, []);
+
+  function onCreateProject(): void
+  {
+    window.bridge.CreateProject();
+  }
+
   return (
     <div className='h-screen p-6'>
       <div className='mb-4'>
@@ -23,7 +36,7 @@ export default function ProjectHubPage() {
             <Input fullWidth isRequired label='Project Name' labelPlacement='outside' placeholder='HelloExplosion'/>
             <Input fullWidth isRequired label='Project Description' labelPlacement='outside' placeholder='A simple explosion game project.'/>
             <Input fullWidth isRequired label='Project Path' labelPlacement='outside' placeholder='/path/to/your/project'/>
-            <Button color='primary'>Create</Button>
+            <Button color='primary' onPress={onCreateProject}>Create</Button>
           </Form>
         </Tab>
         <Tab title='Recently Projects'>

Editor/Web/src/qwebchannel.d.ts

@@ -0,0 +1,8 @@
+export { QWebChannel } from './qwebchannel.js';
+
+declare global {
+  interface Window {
+    qt: any;
+    bridge: any;
+  }
+}

Editor/Web/src/qwebchannel.js

@@ -448,8 +448,8 @@ QObject.prototype.toJSON = function() {
 };
 
 //required for use with nodejs
-if (typeof module === 'object') {
-    module.exports = {
-        QWebChannel: QWebChannel
-    };
+//++[kindem] use ES6 export
+export {
+    QWebChannel
 }
+//--[kindem]