Merge pull request #400 from FlyAndNotDown/master

Feat: WebUI Update

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/WebUIServer.cpp

@@ -21,6 +21,9 @@ namespace Editor {
         serverThread = std::make_unique<Common::NamedThread>("WebUIServerThread", [this]() -> void {
             server = Common::MakeUnique<httplib::Server>();
             server->set_mount_point("/", "./Web");
+            server->Get("/(.+)", [](const httplib::Request&, httplib::Response& res) {
+                res.set_file_content("./Web/index.html");
+            });
             server->listen("localhost", caWebUIPort.GetValue());
         });
     }

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

@@ -7,7 +7,7 @@
 #include <Editor/Widget/moc_WebWidget.cpp>
 
 static Core::CmdlineArgValue<bool> caWebUIDev(
-    "wevUIDev", "-wevUIDev", false,
+    "webUIDev", "-webUIDev", false,
     "Whether to enable hot reload for web UI");
 
 static Core::CmdlineArgValue<uint32_t> caWebUIDevServerPort(
@@ -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/package.json

@@ -10,24 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroui/avatar": "^2.2.20",
+    "@heroui/breadcrumbs": "^2.2.20",
     "@heroui/button": "^2.2.24",
+    "@heroui/chip": "^2.2.20",
     "@heroui/code": "^2.2.18",
     "@heroui/dropdown": "^2.3.24",
+    "@heroui/form": "^2.1.24",
     "@heroui/input": "^2.4.25",
-    "@heroui/breadcrumbs": "^2.2.20",
-    "@heroui/avatar": "^2.2.20",
     "@heroui/kbd": "^2.2.19",
     "@heroui/link": "^2.2.21",
-    "@heroui/tabs": "^2.2.21",
     "@heroui/navbar": "^2.2.22",
+    "@heroui/react": "^2.8.2",
     "@heroui/snippet": "^2.2.25",
-    "@heroui/form": "^2.1.24",
     "@heroui/switch": "^2.2.22",
-    "@heroui/chip": "^2.2.20",
-    "@heroui/user": "^2.2.20",
     "@heroui/system": "^2.4.20",
+    "@heroui/tabs": "^2.2.21",
     "@heroui/theme": "^2.4.20",
     "@heroui/use-theme": "2.1.10",
+    "@heroui/user": "^2.2.20",
     "@react-aria/visually-hidden": "3.8.26",
     "@react-types/shared": "3.31.0",
     "@tailwindcss/postcss": "4.1.11",

Editor/Web/src/App.tsx

@@ -1,10 +1,10 @@
-import { Route, Routes } from "react-router-dom";
-import ProjectHubPage from "@/pages/project-hub";
+import { Route, Routes } from 'react-router-dom';
+import ProjectHubPage from '@/pages/project-hub';
 
 function App() {
   return (
     <Routes>
-      <Route element={<ProjectHubPage/>} path="/project-hub"/>
+      <Route element={<ProjectHubPage/>} path='/project-hub'/>
     </Routes>
   );
 }

Editor/Web/src/main.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
-import App from "./App.tsx";
-import { Provider } from "./provider.tsx";
-import "@/styles/globals.css";
+import App from './App.tsx';
+import { Provider } from './provider.tsx';
+import '@/styles/globals.css';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider>
-        <main className="dark text-foreground bg-background">
+        <main className='dark text-foreground bg-background'>
           <App />
         </main>
       </Provider>

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

@@ -1,19 +1,32 @@
-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";
+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'>
         <User
           avatarProps={{
-            src: "/logo.png",
+            src: '/logo.png',
           }}
-          description="v0.0.1"
-          name="Explosion Game Engine"
+          description='v0.0.1'
+          name='Explosion Game Engine'
         />
       </div>
 
@@ -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/provider.tsx

@@ -1,9 +1,9 @@
-import type { NavigateOptions } from "react-router-dom";
+import type { NavigateOptions } from 'react-router-dom';
 
-import { HeroUIProvider } from "@heroui/system";
-import { useHref, useNavigate } from "react-router-dom";
+import { HeroUIProvider } from '@heroui/system';
+import { useHref, useNavigate } from 'react-router-dom';
 
-declare module "@react-types/shared" {
+declare module '@react-types/shared' {
   interface RouterConfig {
     routerOptions: NavigateOptions;
   }