优化代码逻辑

增加界面懒加载
优化日志显示

src/FastGateway.Service/Dockerfile

@@ -16,10 +16,8 @@ EXPOSE 8080
 FROM node as builder
 WORKDIR /src
 COPY web .
-RUN yarn config set registry https://registry.npm.taobao.org
-RUN npm install -g bun 
-RUN bun i 
-RUN bun run build
+RUN npm i
+RUN npm run build
 
 
 FROM registry.token-ai.cn/dotnet/sdk:9.0-preview AS build

src/FastGateway.Service/Gateway/Gateway.cs

@@ -167,6 +167,18 @@ public static async Task BuilderGateway(Server server, List<DomainName> domainNa
                 options.MultipartHeadersLengthLimit = int.MaxValue;
             });
 
+
+            builder.Services
+                .AddCors(options =>
+                {
+                    options.AddPolicy("AllowAll",
+                        builder => builder
+                            .SetIsOriginAllowed(_ => true)
+                            .AllowAnyMethod()
+                            .AllowAnyHeader()
+                            .AllowCredentials());
+                });
+
             var (routes, clusters) = BuildConfig(domainNames);
 
             builder.Services.AddRateLimitService(rateLimits);
@@ -183,6 +195,8 @@ public static async Task BuilderGateway(Server server, List<DomainName> domainNa
 
             var app = builder.Build();
 
+            app.UseCors("AllowAll");
+
             if (is80)
             {
                 // 用于HTTPS证书签名校验
@@ -215,7 +229,10 @@ public static async Task BuilderGateway(Server server, List<DomainName> domainNa
 
             app.MapReverseProxy();
 
-            app.Lifetime.ApplicationStopping.Register(() => { GatewayWebApplications.Remove(server.Id, out _); });
+            app.Lifetime.ApplicationStopping.Register(() =>
+            {
+                GatewayWebApplications.Remove(server.Id, out _);
+            });
 
             await app.RunAsync();
         }

src/FastGateway.Service/Infrastructure/DateTimeJsonConverter.cs

@@ -0,0 +1,17 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Watermelon.Service.Infrastructure;
+
+public sealed class DateTimeJsonConverter : JsonConverter<DateTime>
+{
+    public override DateTime Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        return DateTime.Parse(reader.GetString());
+    }
+
+    public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options)
+    {
+        writer.WriteStringValue(value.ToString("yyyy-MM-dd HH:mm:ss"));
+    }
+}

src/FastGateway.Service/Program.cs

@@ -1,4 +1,3 @@
-using FastGateway.Entities.Core;
 using FastGateway.Service.BackgroundTask;
 using FastGateway.Service.DataAccess;
 using FastGateway.Service.Infrastructure;
@@ -7,7 +6,7 @@
 using IP2Region.Net.XDB;
 using Microsoft.EntityFrameworkCore;
 using Serilog;
-using Serilog.Core;
+using Watermelon.Service.Infrastructure;
 
 namespace FastGateway.Service;
 
@@ -23,6 +22,11 @@ public static async Task Main(string[] args)
 
         builder.Host.UseSerilog(logger);
         builder.Services.AddHttpClient();
+        builder.Services.ConfigureHttpJsonOptions(options =>
+        {
+            options.SerializerOptions.Converters.Add(new DateTimeJsonConverter());
+        });
+        builder.Services.AddResponseCompression();
         builder.Services.AddSingleton<ISearcher>(new Searcher(CachePolicy.File, "ip2region.xdb"));
         builder.Services.AddHostedService<LoggerBackgroundTask>();
         builder.Services.AddHostedService<ClientRequestBackgroundTask>();
@@ -78,8 +82,11 @@ await Gateway.Gateway.BuilderGateway(item, domainNames.Where(x => x.ServerId ==
             }
         }));
 
+        app.UseResponseCompression();
+
         app.UseStaticFiles();
 
+
         app.MapDomain()
             .MapBlacklistAndWhitelist()
             .MapCert()

web/src/App.tsx

@@ -1,18 +1,20 @@
 import './App.css'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import Layout from './layout'
-import MainLayout from './pages/layout'
-import NotFoundPage from './pages/not-page'
-import ServerPage from './pages/server/page'
-import ServerInfoPage from './pages/server/info/page'
-import BlackListPage from './pages/protect-config/blacklist'
-import WhiteListPage from './pages/protect-config/whitelist'
-import RateLimitPage from './pages/protect-config/rate-limit'
-import CertPage from './pages/cert/page'
-import AboutPage from './pages/about/page'
-import FileStoragePage from './pages/filestorage/page'
-import DashboardPage from './pages/dashboard/page'
-import ApplicationLoggerPage from './pages/application-logger/page'
+import Loading from './components/Loading'
+import { lazy, Suspense } from 'react'
+const MainLayout = lazy(() => import('./pages/layout'))
+const NotFoundPage = lazy(() => import('./pages/not-page'))
+const ServerPage = lazy(() => import('./pages/server/page'))
+const ServerInfoPage = lazy(() => import('./pages/server/info/page'))
+const BlackListPage = lazy(() => import('./pages/protect-config/blacklist'))
+const WhiteListPage = lazy(() => import('./pages/protect-config/whitelist'))
+const RateLimitPage = lazy(() => import('./pages/protect-config/rate-limit'))
+const CertPage = lazy(() => import('./pages/cert/page'))
+const AboutPage = lazy(() => import('./pages/about/page'))
+const FileStoragePage = lazy(() => import('./pages/filestorage/page'))
+const DashboardPage = lazy(() => import('./pages/dashboard/page'))
+const ApplicationLoggerPage = lazy(() => import('./pages/application-logger/page'))
 
 const router = createBrowserRouter([
   {
@@ -21,47 +23,74 @@ const router = createBrowserRouter([
     children: [
       {
         path: '',
-        element: <MainLayout></MainLayout>,
+        element:
+          <Suspense fallback={<Loading></Loading>}>
+            <MainLayout></MainLayout>
+          </Suspense>,
         children: [
           {
             path: 'server',
-            element: <ServerPage />
+            element:
+              <Suspense fallback={<Loading></Loading>}>
+                <ServerPage />
+              </Suspense>
           },
           {
             path: 'server/:id',
-            element: <ServerInfoPage />
+            element:
+              <Suspense fallback={<Loading></Loading>}>
+                <ServerInfoPage />
+              </Suspense>
           },
           {
             path: 'protect-config/blacklist',
-            element: <BlackListPage></BlackListPage>
+            element:
+              <Suspense fallback={<Loading></Loading>}>
+                <BlackListPage />
+              </Suspense>
           },
           {
             path: 'dashboard',
-            element: <DashboardPage></DashboardPage>
+            element:
+              <Suspense fallback={<Loading></Loading>}>
+                <DashboardPage />
+              </Suspense>
           },
           {
             path: 'protect-config/whitelist',
-            element: <WhiteListPage></WhiteListPage>
+            element: <Suspense fallback={<Loading></Loading>}>
+              <WhiteListPage />
+            </Suspense>
           },
           {
             path: 'protect-config/rate-limit',
-            element: <RateLimitPage></RateLimitPage>
+            element: <Suspense fallback={<Loading></Loading>}>
+              <RateLimitPage />
+            </Suspense>
           },
           {
             path: 'cert',
-            element: <CertPage />
+            element: <Suspense fallback={<Loading></Loading>}>
+              <CertPage />
+            </Suspense>
           },
           {
             path: 'log',
-            element: <ApplicationLoggerPage />
+            element: <Suspense fallback={<Loading></Loading>}>
+              <ApplicationLoggerPage />
+            </Suspense>
           },
           {
             path: 'about',
-            element: <AboutPage />
+            element: <Suspense fallback={<Loading></Loading>}>
+              <AboutPage />
+            </Suspense>
           },
           {
             path: 'filestorage',
-            element: <FileStoragePage />
+            element: <Suspense fallback={<Loading></Loading>}>
+              <FileStoragePage />
+            </Suspense>
           },
           {
             path: '*',

web/src/components/Loading/index.tsx

@@ -0,0 +1,26 @@
+import { Icon, } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+    return <Flexbox height={'100%'} style={{ userSelect: 'none' }} width={'100%'}>
+        <Center flex={1} gap={12} width={'100%'}>
+            <span style={{
+                fontSize: '40px',
+                fontWeight: 'bold',
+                fontFamily: 'Arial, sans-serif',
+                userSelect: 'none',
+            }}>
+                Fast Gateway
+            </span>
+            <Center gap={16} horizontal>
+                <Icon icon={Loader2} spin />
+
+                加载中...
+            </Center>
+        </Center>
+    </Flexbox>;
+})
+
+export default Loading;

web/src/pages/application-logger/page.tsx

@@ -56,6 +56,9 @@ export default function ApplicationLoggerPage() {
                         title: '请求耗时',
                         dataIndex: 'elapsed',
                         key: 'elapsed',
+                        render: (text) => {
+                            return text + 'ms';
+                        }
                     },
                     {
                         title: '请求域名',

web/src/pages/dashboard/page.tsx

@@ -83,7 +83,7 @@ const Dashboard = () => {
 
     let qps_chart: echarts.ECharts | null = null;
     useEffect(() => {
-
+        setLocationData([])
         qps_chart = echarts.init(document.getElementById('qps_chart'));
         // 将qps_chartData.series[0].data中的数据全部替换为0
         qps_chartData.series[0].data = qps_chartData.series[0].data.map(() => 0);
@@ -102,7 +102,7 @@ const Dashboard = () => {
         window.addEventListener('resize', resizeHandler);
 
         async function stream() {
-            const response = await getQpsChart();
+            const response = await getQpsChart() as any;
             for await (const data of response) {
 
                 qps_chartData.xAxis.data.shift();