初始化 Vue3+Vite 前端模板，适配 WebView2 桥接

新增项目基础结构与配置，集成 Vue3、Vite、TypeScript、ESLint 等开发环境。实现主页面、样式、图标组件，封装 http 请求，支持 WebView2 与普通浏览器统一 API 调用，便于与 C# 后端通信。完善类型声明与开发文档。
2026-04-24 11:56:02 +08:00 · 2026-04-24 11:56:02 +08:00 · 7a5273dc56
commit 7a5273dc56
parent 6f279fcae0
66 changed files with 4307 additions and 402 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,7 +9,12 @@
 /Avalonia-API/obj
 /Avalonia-Services/bin
 /Avalonia-Services/obj
-/Avalonia-Web/.vscode
-/Avalonia-Web/obj
-/Avalonia-Web/node_modules
-/Avalonia-Web/dist
+/Avalonia-Web-VUE/.vscode
+/Avalonia-Web-VUE/obj
+/Avalonia-Web-VUE/node_modules
+/Avalonia-Web-VUE/dist
+/Avalonia-Web-VUE/.vscode
+/avalonia-web-react/obj
+/avalonia-web-react/obj
+/avalonia-web-react/node_modules
+/avalonia-web-react/dist
--- a/Avalonia-PC/.github/copilot-instructions.md
+++ b/Avalonia-PC/.github/copilot-instructions.md
@ -0,0 +1,4 @@
+# Copilot Instructions
+
+## 项目指南
+- 用户偏好：仅修改明确要求的内容，不要做额外改动（如未请求的 ViewModel DI 注册）。
--- a/Avalonia-PC/App.axaml.cs
+++ b/Avalonia-PC/App.axaml.cs
@ -3,6 +3,7 @@ using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
 using Avalonia_PC.ViewModels;
 using Avalonia_PC.Views;
+using Microsoft.Extensions.DependencyInjection;

 namespace Avalonia_PC
 {
@ -17,10 +18,8 @@ namespace Avalonia_PC
        {
            if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
            {
-                desktop.MainWindow = new MainWindow
-                {
-                    DataContext = new MainWindowViewModel(),
-                };
+                desktop.MainWindow = Program.Services.GetRequiredService<MainWindow>();
+                desktop.MainWindow.DataContext = new MainWindowViewModel();
            }

            base.OnFrameworkInitializationCompleted();
--- a/Avalonia-PC/Avalonia-PC.csproj
+++ b/Avalonia-PC/Avalonia-PC.csproj
@ -15,6 +15,10 @@
    </Content>
  </ItemGroup>

+  <ItemGroup>
+    <None Include=".github\copilot-instructions.md" />
+  </ItemGroup>
+
  <ItemGroup>
    <PackageReference Include="Avalonia" Version="12.0.1" />
    <PackageReference Include="Avalonia.Desktop" Version="12.0.1" />
@ -24,7 +28,12 @@
      <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
      <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
    </PackageReference>
-    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.1" />
    <PackageReference Include="Avalonia.Controls.WebView" Version="12.0.0" />
+    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.2" />
+    <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="10.0.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Avalonia-Services\Avalonia-Services.csproj" />
  </ItemGroup>
 </Project>
--- a/Avalonia-PC/Avalonia-PC.slnx
+++ b/Avalonia-PC/Avalonia-PC.slnx
@ -1,7 +1,11 @@
 <Solution>
  <Project Path="../Avalonia-API/Avalonia-API.csproj" Id="e33aba9a-a56b-4f6b-8eaa-3acbed65ebad" />
  <Project Path="../Avalonia-Services/Avalonia-Services.csproj" Id="b8757cf9-5422-4c67-acae-3c967c95f866" />
-  <Project Path="../Avalonia-Web/avalonia-web.esproj">
+  <Project Path="../avalonia-web-react/avalonia-web-react.esproj">
+    <Build />
+    <Deploy />
+  </Project>
+  <Project Path="../Avalonia-Web/avalonia-web-vue.esproj">
    <Build />
    <Deploy />
  </Project>
--- a/Avalonia-PC/Program.cs
+++ b/Avalonia-PC/Program.cs
@ -1,16 +1,23 @@
 using Avalonia;
+using Avalonia_PC.Views;
+using Avalonia_Services.Services;
+using Microsoft.Extensions.DependencyInjection;
 using System;

 namespace Avalonia_PC
 {
    internal sealed class Program
    {
+        public static IServiceProvider Services { get; private set; } = null!;
+
        // Initialization code. Don't use any Avalonia, third-party APIs or any
        // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
        // yet and stuff might break.
        [STAThread]
        public static void Main(string[] args)
        {
+            ConfigureServices();
+
 #if DEBUG
            // 开启 WebView2 远程调试，启动后在 Edge 中访问 edge://inspect 调试网页
            Environment.SetEnvironmentVariable(
@ -20,7 +27,14 @@ namespace Avalonia_PC
            BuildAvaloniaApp().StartWithClassicDesktopLifetime(args);
        }

+        private static void ConfigureServices()
+        {
+            var services = new ServiceCollection();
+            services.AddSingleton<WeatherForecastService>();
+            services.AddTransient<MainWindow>(sp => new MainWindow(sp));

+            Services = services.BuildServiceProvider();
+        }

        // Avalonia configuration, don't remove; also used by visual designer.
        public static AppBuilder BuildAvaloniaApp()
--- a/Avalonia-PC/Views/MainWindow.BridgeScript.cs
+++ b/Avalonia-PC/Views/MainWindow.BridgeScript.cs
@ -0,0 +1,339 @@
+namespace Avalonia_PC.Views
+{
+    public partial class MainWindow
+    {
+        private const string BridgeScript = """
+if (!window.__appBridgeInstalled) {
+    window.__appBridgeInstalled = true;
+    window.isWebView2 = true;
+    const pending = new Map();
+
+    const tryOpenDevTools = () => {
+        window.invokeCSharpAction(JSON.stringify({ kind: 'app-open-devtools' }));
+    };
+
+    window.__dispatchAppResponse = function(jsonStr) {
+        const payload = JSON.parse(jsonStr);
+        const responseId = payload.id ?? payload.Id;
+        const entry = pending.get(responseId);
+        if (!entry) return;
+        pending.delete(responseId);
+        entry.resolve(new Response(payload.body ?? payload.Body ?? '', {
+            status: payload.statusCode ?? payload.StatusCode ?? 200,
+            statusText: payload.statusMessage ?? payload.StatusMessage ?? 'OK',
+            headers: payload.headers ?? payload.Headers ?? { 'Content-Type': 'application/json' }
+        }));
+    };
+
+    const nativeFetch = window.fetch ? window.fetch.bind(window) : null;
+    const NativeXMLHttpRequest = window.XMLHttpRequest;
+
+    const sendAppBridgeRequest = ({ requestUrl, method, headers, body, timeoutMs = 30000 }) => {
+        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+
+        const responsePromise = new Promise((resolve, reject) => {
+            const timeoutId = setTimeout(() => {
+                pending.delete(id);
+                reject(new Error(`Timed out waiting for ${requestUrl}`));
+            }, timeoutMs);
+
+            pending.set(id, {
+                resolve: response => { clearTimeout(timeoutId); resolve(response); },
+                reject: error => { clearTimeout(timeoutId); reject(error); }
+            });
+        });
+
+        window.invokeCSharpAction(JSON.stringify({
+            kind: 'app-request',
+            id,
+            url: requestUrl,
+            method,
+            headers,
+            body
+        }));
+
+        return responsePromise;
+    };
+
+    document.addEventListener('keydown', event => {
+        if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'i'))) {
+            event.preventDefault();
+            tryOpenDevTools();
+        }
+    }, true);
+
+    document.addEventListener('contextmenu', event => {
+        if (event.shiftKey) {
+            event.preventDefault();
+            tryOpenDevTools();
+        }
+    }, true);
+
+    window.fetch = async (input, init) => {
+        const request = input instanceof Request ? input : null;
+        const requestUrl = typeof input === 'string' || input instanceof URL
+            ? input.toString()
+            : request?.url;
+
+        if (!requestUrl || !requestUrl.startsWith('app://')) {
+            if (!nativeFetch) throw new Error('window.fetch is not available.');
+            return nativeFetch(input, init);
+        }
+
+        const combinedHeaders = new Headers(request?.headers);
+        if (init?.headers) {
+            new Headers(init.headers).forEach((value, key) => combinedHeaders.set(key, value));
+        }
+
+        const headers = {};
+        combinedHeaders.forEach((value, key) => headers[key] = value);
+
+        let body = init?.body;
+        if (body === undefined && request) {
+            body = await request.clone().text();
+        }
+
+        if (body && typeof body !== 'string') {
+            body = await new Response(body).text();
+        }
+
+        return sendAppBridgeRequest({
+            requestUrl,
+            method: init?.method ?? request?.method ?? 'GET',
+            headers,
+            body: body ?? null,
+            timeoutMs: 30000
+        });
+    };
+
+    class BridgeXMLHttpRequest {
+        constructor() {
+            this._native = new NativeXMLHttpRequest();
+            this._isAppRequest = false;
+            this._requestUrl = '';
+            this._method = 'GET';
+            this._headers = {};
+            this._responseHeaders = {};
+            this._responseHeadersRaw = '';
+            this._aborted = false;
+
+            this.readyState = 0;
+            this.status = 0;
+            this.statusText = '';
+            this.response = null;
+            this.responseText = '';
+            this.responseType = '';
+            this.responseURL = '';
+            this.timeout = 0;
+            this.withCredentials = false;
+
+            this.onreadystatechange = null;
+            this.onload = null;
+            this.onerror = null;
+            this.ontimeout = null;
+            this.onabort = null;
+            this.onloadend = null;
+
+            this.upload = {
+                addEventListener: () => {},
+                removeEventListener: () => {}
+            };
+
+            this._native.onreadystatechange = () => {
+                if (this._isAppRequest) {
+                    return;
+                }
+
+                this.readyState = this._native.readyState;
+                this.status = this._native.status;
+                this.statusText = this._native.statusText;
+                this.responseURL = this._native.responseURL ?? '';
+                this.response = this._native.response;
+                this.responseText = this._native.responseText ?? '';
+                this._raiseReadyStateChange();
+            };
+
+            this._native.onload = event => {
+                if (!this._isAppRequest && typeof this.onload === 'function') {
+                    this.onload(event);
+                }
+            };
+
+            this._native.onerror = event => {
+                if (!this._isAppRequest && typeof this.onerror === 'function') {
+                    this.onerror(event);
+                }
+            };
+
+            this._native.ontimeout = event => {
+                if (!this._isAppRequest && typeof this.ontimeout === 'function') {
+                    this.ontimeout(event);
+                }
+            };
+
+            this._native.onabort = event => {
+                if (!this._isAppRequest && typeof this.onabort === 'function') {
+                    this.onabort(event);
+                }
+            };
+
+            this._native.onloadend = event => {
+                if (!this._isAppRequest && typeof this.onloadend === 'function') {
+                    this.onloadend(event);
+                }
+            };
+        }
+
+        open(method, url, async = true, user, password) {
+            const requestUrl = typeof url === 'string' || url instanceof URL
+                ? url.toString()
+                : `${url ?? ''}`;
+
+            this._requestUrl = requestUrl;
+            this._method = method ?? 'GET';
+            this._isAppRequest = requestUrl.startsWith('app://');
+            this._headers = {};
+            this._responseHeaders = {};
+            this._responseHeadersRaw = '';
+            this._aborted = false;
+
+            if (!this._isAppRequest) {
+                this._native.open(method, url, async, user, password);
+                return;
+            }
+
+            this.readyState = 1;
+            this._raiseReadyStateChange();
+        }
+
+        setRequestHeader(name, value) {
+            if (!this._isAppRequest) {
+                this._native.setRequestHeader(name, value);
+                return;
+            }
+
+            this._headers[name] = value;
+        }
+
+        getAllResponseHeaders() {
+            if (!this._isAppRequest) {
+                return this._native.getAllResponseHeaders();
+            }
+
+            return this._responseHeadersRaw;
+        }
+
+        getResponseHeader(name) {
+            if (!this._isAppRequest) {
+                return this._native.getResponseHeader(name);
+            }
+
+            return this._responseHeaders[name.toLowerCase()] ?? null;
+        }
+
+        overrideMimeType(mimeType) {
+            if (!this._isAppRequest && typeof this._native.overrideMimeType === 'function') {
+                this._native.overrideMimeType(mimeType);
+            }
+        }
+
+        abort() {
+            if (!this._isAppRequest) {
+                this._native.abort();
+                return;
+            }
+
+            this._aborted = true;
+            if (typeof this.onabort === 'function') {
+                this.onabort();
+            }
+            if (typeof this.onloadend === 'function') {
+                this.onloadend();
+            }
+        }
+
+        async send(body = null) {
+            if (!this._isAppRequest) {
+                this._native.send(body);
+                return;
+            }
+
+            let requestBody = body;
+            if (requestBody && typeof requestBody !== 'string') {
+                requestBody = await new Response(requestBody).text();
+            }
+
+            try {
+                const response = await sendAppBridgeRequest({
+                    requestUrl: this._requestUrl,
+                    method: this._method,
+                    headers: this._headers,
+                    body: requestBody ?? null,
+                    timeoutMs: this.timeout > 0 ? this.timeout : 30000
+                });
+
+                if (this._aborted) {
+                    return;
+                }
+
+                this.status = response.status;
+                this.statusText = response.statusText;
+                this.responseURL = this._requestUrl;
+
+                this._responseHeaders = {};
+                this._responseHeadersRaw = '';
+                response.headers.forEach((value, key) => {
+                    this._responseHeaders[key.toLowerCase()] = value;
+                    this._responseHeadersRaw += `${key}: ${value}\r\n`;
+                });
+
+                const text = await response.text();
+                this.responseText = text;
+                this.response = this.responseType === 'json'
+                    ? (text ? JSON.parse(text) : null)
+                    : text;
+
+                this.readyState = 4;
+                this._raiseReadyStateChange();
+
+                if (typeof this.onload === 'function') {
+                    this.onload();
+                }
+                if (typeof this.onloadend === 'function') {
+                    this.onloadend();
+                }
+            } catch (error) {
+                if (this._aborted) {
+                    return;
+                }
+
+                this.status = 0;
+                this.statusText = '';
+                this.readyState = 4;
+                this._raiseReadyStateChange();
+
+                const errorMessage = error?.message ?? '';
+                if (errorMessage.includes('Timed out waiting') && typeof this.ontimeout === 'function') {
+                    this.ontimeout(error);
+                } else if (typeof this.onerror === 'function') {
+                    this.onerror(error);
+                }
+
+                if (typeof this.onloadend === 'function') {
+                    this.onloadend();
+                }
+            }
+        }
+
+        _raiseReadyStateChange() {
+            if (typeof this.onreadystatechange === 'function') {
+                this.onreadystatechange();
+            }
+        }
+    }
+
+    window.XMLHttpRequest = BridgeXMLHttpRequest;
+}
+""";
+    }
+}
--- a/Avalonia-PC/Views/MainWindow.Routes.cs
+++ b/Avalonia-PC/Views/MainWindow.Routes.cs
@ -0,0 +1,49 @@
+using Avalonia_Services.Services;
+using Microsoft.Extensions.DependencyInjection;
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace Avalonia_PC.Views
+{
+    public partial class MainWindow
+    {
+        // 路由表：key = 接口路径（忽略大小写），value = 处理方法
+        // 新增接口：在此方法中添加一行 _routes["api/xxx"] = ctx => ...
+        private Dictionary<string, Func<RouteRequestContext, Task<object?>>> _routes = [];
+
+        // 服务容器，通过构造函数注入，路由注册时按需解析服务
+        private IServiceProvider _services = null!;
+
+        private void RegisterRoutes()
+        {
+            var weather = _services.GetRequiredService<WeatherForecastService>();
+            // 新增服务示例：var myService = _services.GetRequiredService<MyService>();
+
+            _routes = new Dictionary<string, Func<RouteRequestContext, Task<object?>>>(StringComparer.OrdinalIgnoreCase)
+            {
+                ["api/getUser"]     = _ => GetUserFromDatabaseAsync(),
+                ["api/processData"] = ctx => ProcessDataAsync(ExtractInput(ctx)),
+                ["api/wData"]       = _ => Task.FromResult<object?>(weather.GetWeatherForecasts()),
+            };
+        }
+
+        /// <summary>
+        /// 示例：模拟读取用户数据。
+        /// </summary>
+        private static async Task<object?> GetUserFromDatabaseAsync()
+        {
+            await Task.Delay(100);
+            return new { id = 1, name = "张三", email = "zhangsan@example.com" };
+        }
+
+        /// <summary>
+        /// 示例：模拟处理输入数据。
+        /// </summary>
+        private static async Task<object?> ProcessDataAsync(string? input)
+        {
+            await Task.Delay(200);
+            return $"Processed: {input?.ToUpperInvariant()}";
+        }
+    }
+}
--- a/Avalonia-PC/Views/MainWindow.axaml.cs
+++ b/Avalonia-PC/Views/MainWindow.axaml.cs
@ -15,8 +15,8 @@ namespace Avalonia_PC.Views
    public partial class MainWindow : Window
    {
        private const string AppScheme = "app";
-        //private const string? OnlineStartupUrl = "https://re.laitool.cn";
-        private const string? OnlineStartupUrl = null;
+        private const string? OnlineStartupUrl = "http://localhost:51240";
+        //private const string? OnlineStartupUrl = null;
        private const string? LocalStartupPath = null;
        private static readonly JsonSerializerOptions BridgeJsonSerializerOptions = new()
        {
@ -36,12 +36,14 @@ namespace Avalonia_PC.Views
        /// <summary>
        /// 初始化窗口并注册生命周期事件。
        /// </summary>
-        public MainWindow()
+        public MainWindow(IServiceProvider services)
        {
+            _services = services;
            InitializeComponent();
-
            Opened += OnOpened;
            Closed += OnClosed;
+
+            RegisterRoutes();
        }

        /// <summary>
@ -212,341 +214,7 @@ namespace Avalonia_PC.Views
                return;
            }

-            const string script = """
-if (!window.__appBridgeInstalled) {
-    window.__appBridgeInstalled = true;
-    window.isWebView2 = true;
-    const pending = new Map();
-
-    const tryOpenDevTools = () => {
-        window.invokeCSharpAction(JSON.stringify({ kind: 'app-open-devtools' }));
-    };
-
-    window.__dispatchAppResponse = function(jsonStr) {
-        const payload = JSON.parse(jsonStr);
-        const responseId = payload.id ?? payload.Id;
-        const entry = pending.get(responseId);
-        if (!entry) return;
-        pending.delete(responseId);
-        entry.resolve(new Response(payload.body ?? payload.Body ?? '', {
-            status: payload.statusCode ?? payload.StatusCode ?? 200,
-            statusText: payload.statusMessage ?? payload.StatusMessage ?? 'OK',
-            headers: payload.headers ?? payload.Headers ?? { 'Content-Type': 'application/json' }
-        }));
-    };
-
-    const nativeFetch = window.fetch ? window.fetch.bind(window) : null;
-    const NativeXMLHttpRequest = window.XMLHttpRequest;
-
-    const sendAppBridgeRequest = ({ requestUrl, method, headers, body, timeoutMs = 30000 }) => {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-
-        const responsePromise = new Promise((resolve, reject) => {
-            const timeoutId = setTimeout(() => {
-                pending.delete(id);
-                reject(new Error(`Timed out waiting for ${requestUrl}`));
-            }, timeoutMs);
-
-            pending.set(id, {
-                resolve: response => { clearTimeout(timeoutId); resolve(response); },
-                reject: error => { clearTimeout(timeoutId); reject(error); }
-            });
-        });
-
-        window.invokeCSharpAction(JSON.stringify({
-            kind: 'app-request',
-            id,
-            url: requestUrl,
-            method,
-            headers,
-            body
-        }));
-
-        return responsePromise;
-    };
-
-    document.addEventListener('keydown', event => {
-        if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'i'))) {
-            event.preventDefault();
-            tryOpenDevTools();
-        }
-    }, true);
-
-    document.addEventListener('contextmenu', event => {
-        if (event.shiftKey) {
-            event.preventDefault();
-            tryOpenDevTools();
-        }
-    }, true);
-
-    window.fetch = async (input, init) => {
-        const request = input instanceof Request ? input : null;
-        const requestUrl = typeof input === 'string' || input instanceof URL
-            ? input.toString()
-            : request?.url;
-
-        if (!requestUrl || !requestUrl.startsWith('app://')) {
-            if (!nativeFetch) throw new Error('window.fetch is not available.');
-            return nativeFetch(input, init);
-        }
-
-        const combinedHeaders = new Headers(request?.headers);
-        if (init?.headers) {
-            new Headers(init.headers).forEach((value, key) => combinedHeaders.set(key, value));
-        }
-
-        const headers = {};
-        combinedHeaders.forEach((value, key) => headers[key] = value);
-
-        let body = init?.body;
-        if (body === undefined && request) {
-            body = await request.clone().text();
-        }
-
-        if (body && typeof body !== 'string') {
-            body = await new Response(body).text();
-        }
-
-        return sendAppBridgeRequest({
-            requestUrl,
-            method: init?.method ?? request?.method ?? 'GET',
-            headers,
-            body: body ?? null,
-            timeoutMs: 30000
-        });
-    };
-
-    class BridgeXMLHttpRequest {
-        constructor() {
-            this._native = new NativeXMLHttpRequest();
-            this._isAppRequest = false;
-            this._requestUrl = '';
-            this._method = 'GET';
-            this._headers = {};
-            this._responseHeaders = {};
-            this._responseHeadersRaw = '';
-            this._aborted = false;
-
-            this.readyState = 0;
-            this.status = 0;
-            this.statusText = '';
-            this.response = null;
-            this.responseText = '';
-            this.responseType = '';
-            this.responseURL = '';
-            this.timeout = 0;
-            this.withCredentials = false;
-
-            this.onreadystatechange = null;
-            this.onload = null;
-            this.onerror = null;
-            this.ontimeout = null;
-            this.onabort = null;
-            this.onloadend = null;
-
-            this.upload = {
-                addEventListener: () => {},
-                removeEventListener: () => {}
-            };
-
-            this._native.onreadystatechange = () => {
-                if (this._isAppRequest) {
-                    return;
-                }
-
-                this.readyState = this._native.readyState;
-                this.status = this._native.status;
-                this.statusText = this._native.statusText;
-                this.responseURL = this._native.responseURL ?? '';
-                this.response = this._native.response;
-                this.responseText = this._native.responseText ?? '';
-                this._raiseReadyStateChange();
-            };
-
-            this._native.onload = event => {
-                if (!this._isAppRequest && typeof this.onload === 'function') {
-                    this.onload(event);
-                }
-            };
-
-            this._native.onerror = event => {
-                if (!this._isAppRequest && typeof this.onerror === 'function') {
-                    this.onerror(event);
-                }
-            };
-
-            this._native.ontimeout = event => {
-                if (!this._isAppRequest && typeof this.ontimeout === 'function') {
-                    this.ontimeout(event);
-                }
-            };
-
-            this._native.onabort = event => {
-                if (!this._isAppRequest && typeof this.onabort === 'function') {
-                    this.onabort(event);
-                }
-            };
-
-            this._native.onloadend = event => {
-                if (!this._isAppRequest && typeof this.onloadend === 'function') {
-                    this.onloadend(event);
-                }
-            };
-        }
-
-        open(method, url, async = true, user, password) {
-            const requestUrl = typeof url === 'string' || url instanceof URL
-                ? url.toString()
-                : `${url ?? ''}`;
-
-            this._requestUrl = requestUrl;
-            this._method = method ?? 'GET';
-            this._isAppRequest = requestUrl.startsWith('app://');
-            this._headers = {};
-            this._responseHeaders = {};
-            this._responseHeadersRaw = '';
-            this._aborted = false;
-
-            if (!this._isAppRequest) {
-                this._native.open(method, url, async, user, password);
-                return;
-            }
-
-            this.readyState = 1;
-            this._raiseReadyStateChange();
-        }
-
-        setRequestHeader(name, value) {
-            if (!this._isAppRequest) {
-                this._native.setRequestHeader(name, value);
-                return;
-            }
-
-            this._headers[name] = value;
-        }
-
-        getAllResponseHeaders() {
-            if (!this._isAppRequest) {
-                return this._native.getAllResponseHeaders();
-            }
-
-            return this._responseHeadersRaw;
-        }
-
-        getResponseHeader(name) {
-            if (!this._isAppRequest) {
-                return this._native.getResponseHeader(name);
-            }
-
-            return this._responseHeaders[name.toLowerCase()] ?? null;
-        }
-
-        overrideMimeType(mimeType) {
-            if (!this._isAppRequest && typeof this._native.overrideMimeType === 'function') {
-                this._native.overrideMimeType(mimeType);
-            }
-        }
-
-        abort() {
-            if (!this._isAppRequest) {
-                this._native.abort();
-                return;
-            }
-
-            this._aborted = true;
-            if (typeof this.onabort === 'function') {
-                this.onabort();
-            }
-            if (typeof this.onloadend === 'function') {
-                this.onloadend();
-            }
-        }
-
-        async send(body = null) {
-            if (!this._isAppRequest) {
-                this._native.send(body);
-                return;
-            }
-
-            let requestBody = body;
-            if (requestBody && typeof requestBody !== 'string') {
-                requestBody = await new Response(requestBody).text();
-            }
-
-            try {
-                const response = await sendAppBridgeRequest({
-                    requestUrl: this._requestUrl,
-                    method: this._method,
-                    headers: this._headers,
-                    body: requestBody ?? null,
-                    timeoutMs: this.timeout > 0 ? this.timeout : 30000
-                });
-
-                if (this._aborted) {
-                    return;
-                }
-
-                this.status = response.status;
-                this.statusText = response.statusText;
-                this.responseURL = this._requestUrl;
-
-                this._responseHeaders = {};
-                this._responseHeadersRaw = '';
-                response.headers.forEach((value, key) => {
-                    this._responseHeaders[key.toLowerCase()] = value;
-                    this._responseHeadersRaw += `${key}: ${value}\r\n`;
-                });
-
-                const text = await response.text();
-                this.responseText = text;
-                this.response = this.responseType === 'json'
-                    ? (text ? JSON.parse(text) : null)
-                    : text;
-
-                this.readyState = 4;
-                this._raiseReadyStateChange();
-
-                if (typeof this.onload === 'function') {
-                    this.onload();
-                }
-                if (typeof this.onloadend === 'function') {
-                    this.onloadend();
-                }
-            } catch (error) {
-                if (this._aborted) {
-                    return;
-                }
-
-                this.status = 0;
-                this.statusText = '';
-                this.readyState = 4;
-                this._raiseReadyStateChange();
-
-                const errorMessage = error?.message ?? '';
-                if (errorMessage.includes('Timed out waiting') && typeof this.ontimeout === 'function') {
-                    this.ontimeout(error);
-                } else if (typeof this.onerror === 'function') {
-                    this.onerror(error);
-                }
-
-                if (typeof this.onloadend === 'function') {
-                    this.onloadend();
-                }
-            }
-        }
-
-        _raiseReadyStateChange() {
-            if (typeof this.onreadystatechange === 'function') {
-                this.onreadystatechange();
-            }
-        }
-    }
-
-    window.XMLHttpRequest = BridgeXMLHttpRequest;
-}
-""";
-
-            await _webView.InvokeScript(script);
+            await _webView.InvokeScript(BridgeScript);
        }

        #endregion
@ -590,8 +258,6 @@ if (!window.__appBridgeInstalled) {
            {
                var uri = new Uri(rawUrl ?? throw new InvalidOperationException("请求地址不能为空。"));
                var requestContext = CreateRouteRequestContext(uri, body);
-                var authorization = GetAuthorizationHeader(headers);
-                _ = authorization;

                if (string.Equals(method, "OPTIONS", StringComparison.OrdinalIgnoreCase))
                {
@ -625,37 +291,14 @@ if (!window.__appBridgeInstalled) {
        }

        /// <summary>
-        /// 按请求前缀分发处理器（例如 api、sys、admin 等）。
+        /// 按路由表匹配并调用对应处理器。
        /// </summary>
        private async Task<RouteDispatchResult> DispatchByPrefixAsync(RouteRequestContext requestContext)
        {
-            if (requestContext.PathSegments.Length > 0 &&
-                string.Equals(requestContext.PathSegments[0], "api", StringComparison.OrdinalIgnoreCase))
+            if (_routes.TryGetValue(requestContext.NormalizedPath, out var handler))
            {
-                return await HandleApiPrefixAsync(requestContext);
-            }
-
-            return RouteDispatchResult.NotMatched();
-        }
-
-        /// <summary>
-        /// 处理 api 前缀下的具体业务路由。
-        /// </summary>
-        private static async Task<RouteDispatchResult> HandleApiPrefixAsync(RouteRequestContext requestContext)
-        {
-            if (string.Equals(requestContext.NormalizedPath, "api/getUser", StringComparison.OrdinalIgnoreCase))
-            {
-                var user = await GetUserFromDatabaseAsync();
-                return RouteDispatchResult.Success(user);
-            }
-
-            if (string.Equals(requestContext.NormalizedPath, "api/processData", StringComparison.OrdinalIgnoreCase) ||
-                (requestContext.PathSegments.Length > 1 &&
-                 string.Equals(requestContext.PathSegments[1], "processData", StringComparison.OrdinalIgnoreCase)))
-            {
-                var input = ExtractInput(requestContext);
-                var result = await ProcessDataAsync(input);
-                return RouteDispatchResult.Success(result);
+                var data = await handler(requestContext);
+                return RouteDispatchResult.Success(data);
            }

            return RouteDispatchResult.NotMatched();
@ -1000,28 +643,6 @@ if (!window.__appBridgeInstalled) {

        #endregion

-        #region 业务示例方法
-
-        /// <summary>
-        /// 示例：模拟读取用户数据。
-        /// </summary>
-        private static async Task<object> GetUserFromDatabaseAsync()
-        {
-            await Task.Delay(100);
-            return new { id = 1, name = "张三", email = "zhangsan@example.com" };
-        }
-
-        /// <summary>
-        /// 示例：模拟处理输入数据。
-        /// </summary>
-        private static async Task<string> ProcessDataAsync(string? input)
-        {
-            await Task.Delay(200);
-            return $"Processed: {input?.ToUpperInvariant()}";
-        }
-
-        #endregion
-
        #region DTO / 路由上下文模型

        private sealed class AppResponse
--- a/Avalonia-PC/www/api.js
+++ b/Avalonia-PC/www/api.js
@ -46,5 +46,6 @@ async function callApi(endpoint, options = {}) {

 window.api = {
    getUser: () => callApi("getUser?t=1"),
-    processData: (input) => callApi("processData", { method: "POST", body: { input } })
+    processData: (input) => callApi("processData", { method: "POST", body: { input } }),
+    wData: (input) => callApi("wData", { method: "POST", body: { input } }),
 };
--- a/Avalonia-PC/www/index.html
+++ b/Avalonia-PC/www/index.html
@ -8,6 +8,7 @@
    <h1>WebView2 自定义协议演示</h1>
    <button id="getUserBtn">获取用户信息</button>
    <button id="processBtn">处理数据</button>
+    <button id="wBtn">天气数据</button>
    <pre id="output"></pre>

    <script src="./api.js"></script>
@ -32,6 +33,15 @@
            }
        };

+        document.getElementById('wBtn').onclick = async () => {
+            try {
+                const result = await window.api.wData('hello world');
+                output.textContent = JSON.stringify(result, null, 2);
+            } catch (err) {
+                output.textContent = `错误: ${err.message}`;
+            }
+        };
+
        const detectIsWebView2 = () => window.isWebView2 === true || typeof window.invokeCSharpAction === 'function';

        const renderEnvironment = () => {
--- a/Avalonia-Web-VUE/.editorconfig
+++ b/Avalonia-Web-VUE/.editorconfig
--- a/Avalonia-Web-VUE/.gitattributes
+++ b/Avalonia-Web-VUE/.gitattributes
--- a/Avalonia-Web-VUE/.gitignore
+++ b/Avalonia-Web-VUE/.gitignore
--- a/Avalonia-Web-VUE/.oxlintrc.json
+++ b/Avalonia-Web-VUE/.oxlintrc.json
--- a/Avalonia-Web-VUE/CHANGELOG.md
+++ b/Avalonia-Web-VUE/CHANGELOG.md
--- a/Avalonia-Web-VUE/README.md
+++ b/Avalonia-Web-VUE/README.md
--- a/Avalonia-Web-VUE/avalonia-web-vue.esproj
+++ b/Avalonia-Web-VUE/avalonia-web-vue.esproj
--- a/Avalonia-Web-VUE/env.d.ts
+++ b/Avalonia-Web-VUE/env.d.ts
--- a/Avalonia-Web-VUE/eslint.config.ts
+++ b/Avalonia-Web-VUE/eslint.config.ts
--- a/Avalonia-Web-VUE/index.html
+++ b/Avalonia-Web-VUE/index.html
--- a/Avalonia-Web-VUE/package-lock.json
+++ b/Avalonia-Web-VUE/package-lock.json
@ -8,6 +8,7 @@
      "name": "avalonia-web",
      "version": "0.0.0",
      "dependencies": {
+        "axios": "^1.15.2",
        "vue": "^3.5.32"
      },
      "devDependencies": {
@ -2131,6 +2132,23 @@
        "node": ">=14"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.2.tgz",
+      "integrity": "sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@ -2247,6 +2265,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001790",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001790.tgz",
@ -2268,6 +2299,18 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -2377,6 +2420,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/detect-libc": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@ -2387,6 +2439,20 @@
        "node": ">=8"
      }
    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.344",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.344.tgz",
@ -2416,6 +2482,51 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/escalade": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@ -2793,6 +2904,42 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -2808,6 +2955,15 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@ -2818,6 +2974,43 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/glob-parent": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@ -2831,6 +3024,57 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/hookable": {
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@ -3369,6 +3613,15 @@
        "@jridgewell/sourcemap-codec": "^1.5.5"
      }
    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/memorystream": {
      "version": "0.3.1",
      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@ -3402,6 +3655,27 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "10.2.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@ -3809,6 +4083,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/Avalonia-Web-VUE/package.json
+++ b/Avalonia-Web-VUE/package.json
@ -14,6 +14,7 @@
    "lint:eslint": "eslint . --fix --cache"
  },
  "dependencies": {
+    "axios": "^1.15.2",
    "vue": "^3.5.32"
  },
  "devDependencies": {
--- a/Avalonia-Web-VUE/public/favicon.ico
+++ b/Avalonia-Web-VUE/public/favicon.ico
--- a/Avalonia-Web-VUE/src/App.vue
+++ b/Avalonia-Web-VUE/src/App.vue
--- a/Avalonia-Web-VUE/src/api/env.ts
+++ b/Avalonia-Web-VUE/src/api/env.ts
@ -0,0 +1,15 @@
+// 扩展 Window 接口，声明 C# 桥接注入的全局属性
+declare global {
+  interface Window {
+    /** 由 C# BridgeScript 注入，标记当前运行在 WebView2 环境中 */
+    isWebView2?: boolean
+    /** 由 WebView2 宿主注入，用于向 C# 发送消息 */
+    invokeCSharpAction?: (message: string) => void
+  }
+}
+
+// 判断当前是否运行在 WebView2 环境中
+// 参考 www/index.html 中的判断逻辑
+export const isWebView2 = (): boolean =>
+  window.isWebView2 === true ||
+  typeof window.invokeCSharpAction === 'function'
--- a/Avalonia-Web-VUE/src/api/http.ts
+++ b/Avalonia-Web-VUE/src/api/http.ts
@ -0,0 +1,84 @@
+import axios from 'axios'
+import { isWebView2 } from './env'
+
+// WebView2 自定义协议前缀
+const WEBVIEW2_BASE = 'app://api/'
+
+// 普通浏览器 HTTP API 地址，按需修改
+const HTTP_BASE = 'http://localhost:5000/api/'
+
+// ─── axios 实例 ────────────────────────────────────────────────────────────────
+
+const http = axios.create({
+  headers: { 'Content-Type': 'application/json' },
+})
+
+// 请求拦截器：仅在浏览器环境下注入鉴权 Token
+// WebView2 本地运行，不需要鉴权
+http.interceptors.request.use((config) => {
+  if (!isWebView2()) {
+    const token = localStorage.getItem('authToken')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+  }
+  return config
+})
+
+// 响应拦截器：统一解包 C# 返回的 { success, data/error } 结构
+// C# BuildSuccessResponseBody 固定格式：{ "success": true,  "data": ... }
+//                              错误格式：{ "success": false, "error": "..." }
+// WebView2 桥接和 HTTP 两个环境返回结构相同，拦截器可统一处理
+http.interceptors.response.use(
+  (response) => {
+    const payload = response.data as { success: boolean; data?: unknown; error?: string }
+    if (payload?.success === false) {
+      return Promise.reject(new Error(payload.error ?? '请求失败'))
+    }
+    return (payload?.data ?? payload) as never
+  },
+  (error) => {
+    const msg: string =
+      error.response?.data?.error ??
+      error.response?.data?.message ??
+      error.message ??
+      '网络错误'
+    return Promise.reject(new Error(msg))
+  },
+)
+
+// ─── 统一请求方法 ──────────────────────────────────────────────────────────────
+
+interface RequestOptions {
+  method?: string
+  headers?: Record<string, string>
+  body?: unknown
+}
+
+export async function request<T = unknown>(endpoint: string, options: RequestOptions = {}): Promise<T> {
+  const url = (isWebView2() ? WEBVIEW2_BASE : HTTP_BASE) + endpoint
+
+  // WebView2：直接走桥接 fetch（桥接脚本已完整覆盖 window.fetch）
+  if (isWebView2()) {
+    const res = await fetch(url, {
+      method: options.method ?? 'GET',
+      headers: { 'Content-Type': 'application/json', ...(options.headers ?? {}) },
+      body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
+    })
+    const payload = await res.json() as { success: boolean; data?: T; error?: string }
+    // eslint-disable-next-line no-debugger
+    debugger
+    if (payload?.success === false) {
+      throw new Error(payload.error ?? '请求失败')
+    }
+    return (payload?.data ?? payload) as T
+  }
+
+  // 普通浏览器：走 axios（拦截器处理鉴权和响应解包）
+  return http.request<T>({
+    url,
+    method: options.method ?? 'GET',
+    headers: options.headers,
+    data: options.body,
+  }) as Promise<T>
+}
--- a/Avalonia-Web-VUE/src/api/index.ts
+++ b/Avalonia-Web-VUE/src/api/index.ts
@ -0,0 +1,8 @@
+import { request } from './http'
+
+// 业务接口定义，新增接口在此处添加一行即可
+export const api = {
+  getUser:     ()             => request('getUser'),
+  processData: (input: string) => request('processData', { method: 'POST', body: { input } }),
+  wData:       (input: string) => request('wData',       { method: 'POST', body: { input } }),
+}
--- a/Avalonia-Web-VUE/src/assets/base.css
+++ b/Avalonia-Web-VUE/src/assets/base.css
--- a/Avalonia-Web-VUE/src/assets/logo.svg
+++ b/Avalonia-Web-VUE/src/assets/logo.svg
--- a/Avalonia-Web-VUE/src/assets/main.css
+++ b/Avalonia-Web-VUE/src/assets/main.css
--- a/Avalonia-Web-VUE/src/components/HelloWorld.vue
+++ b/Avalonia-Web-VUE/src/components/HelloWorld.vue
--- a/Avalonia-Web-VUE/src/components/TheWelcome.vue
+++ b/Avalonia-Web-VUE/src/components/TheWelcome.vue
--- a/Avalonia-Web-VUE/src/components/WelcomeItem.vue
+++ b/Avalonia-Web-VUE/src/components/WelcomeItem.vue
--- a/Avalonia-Web-VUE/src/components/icons/IconCommunity.vue
+++ b/Avalonia-Web-VUE/src/components/icons/IconCommunity.vue
--- a/Avalonia-Web-VUE/src/components/icons/IconDocumentation.vue
+++ b/Avalonia-Web-VUE/src/components/icons/IconDocumentation.vue
--- a/Avalonia-Web-VUE/src/components/icons/IconEcosystem.vue
+++ b/Avalonia-Web-VUE/src/components/icons/IconEcosystem.vue
--- a/Avalonia-Web-VUE/src/components/icons/IconSupport.vue
+++ b/Avalonia-Web-VUE/src/components/icons/IconSupport.vue
--- a/Avalonia-Web-VUE/src/components/icons/IconTooling.vue
+++ b/Avalonia-Web-VUE/src/components/icons/IconTooling.vue
--- a/Avalonia-Web-VUE/src/main.ts
+++ b/Avalonia-Web-VUE/src/main.ts
--- a/Avalonia-Web-VUE/src/shims-vue.d.ts
+++ b/Avalonia-Web-VUE/src/shims-vue.d.ts
--- a/Avalonia-Web-VUE/tsconfig.app.json
+++ b/Avalonia-Web-VUE/tsconfig.app.json
--- a/Avalonia-Web-VUE/tsconfig.json
+++ b/Avalonia-Web-VUE/tsconfig.json
--- a/Avalonia-Web-VUE/tsconfig.node.json
+++ b/Avalonia-Web-VUE/tsconfig.node.json
--- a/Avalonia-Web-VUE/vite.config.ts
+++ b/Avalonia-Web-VUE/vite.config.ts
--- a/avalonia-web-react/.gitignore
+++ b/avalonia-web-react/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/avalonia-web-react/CHANGELOG.md
+++ b/avalonia-web-react/CHANGELOG.md
@ -0,0 +1,12 @@
+此文件解释 Visual Studio 如何创建项目。
+
+以下工具用于生成此项目:
+- create-vite
+
+以下为生成此项目的步骤:
+- 使用 create-vite: `npm init --yes vite@latest avalonia-web-react -- --template=react  --no-rolldown --no-immediate`. 创建 react 项目
+- 正在使用端口更新 `vite.config.js`。
+- 创建项目文件 (`avalonia-web-react.esproj`)。
+- 创建 `launch.json` 以启用调试。
+- 向解决方案添加项目。
+- 写入此文件。
--- a/avalonia-web-react/README.md
+++ b/avalonia-web-react/README.md
@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/avalonia-web-react/avalonia-web-react.esproj
+++ b/avalonia-web-react/avalonia-web-react.esproj
@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.5171056">
+  <PropertyGroup>
+    <StartupCommand>npm run dev</StartupCommand>
+    <JavaScriptTestRoot>src\</JavaScriptTestRoot>
+    <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
+    <!-- Allows the build (or compile) script located on package.json to run on Build -->
+    <ShouldRunBuildScript>false</ShouldRunBuildScript>
+    <!-- Folder where production build objects will be placed -->
+    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
+  </PropertyGroup>
+</Project>
--- a/avalonia-web-react/eslint.config.js
+++ b/avalonia-web-react/eslint.config.js
@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
--- a/avalonia-web-react/index.html
+++ b/avalonia-web-react/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>avalonia-web-react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/avalonia-web-react/package-lock.json
+++ b/avalonia-web-react/package-lock.json
--- a/avalonia-web-react/package.json
+++ b/avalonia-web-react/package.json
@ -0,0 +1,28 @@
+{
+  "name": "avalonia-web-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.15.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "vite": "^8.0.10"
+  }
+}
--- a/avalonia-web-react/public/favicon.svg
+++ b/avalonia-web-react/public/favicon.svg
--- a/avalonia-web-react/public/icons.svg
+++ b/avalonia-web-react/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/avalonia-web-react/src/App.css
+++ b/avalonia-web-react/src/App.css
@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/avalonia-web-react/src/App.jsx
+++ b/avalonia-web-react/src/App.jsx
@ -0,0 +1,151 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from './assets/vite.svg'
+import heroImg from './assets/hero.png'
+import './App.css'
+import { api } from './api/index'
+
+function App() {
+    const [count, setCount] = useState(0)
+    const [weatherData, setWeatherData] = useState(null)
+    const [weatherLoading, setWeatherLoading] = useState(false)
+    const [weatherError, setWeatherError] = useState(null)
+
+    async function fetchWeather() {
+        setWeatherLoading(true)
+        setWeatherError(null)
+        try {
+            const data = await api.wData()
+            setWeatherData(data)
+        } catch (e) {
+            setWeatherError(e.message)
+        } finally {
+            setWeatherLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <section id="center">
+                <div className="hero">
+                    <img src={heroImg} className="base" width="170" height="179" alt="" />
+                    <img src={reactLogo} className="framework" alt="React logo" />
+                    <img src={viteLogo} className="vite" alt="Vite logo" />
+                </div>
+                <div>
+                    <h1>Get started</h1>
+                    <p>
+                        Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
+                    </p>
+                </div>
+                <button
+                    type="button"
+                    className="counter"
+                    onClick={() => setCount((count) => count + 1)}
+                >
+                    Count is {count}
+                </button>
+
+                <div style={{ marginTop: '1.5rem' }}>
+                    <button type="button" className="counter" onClick={fetchWeather} disabled={weatherLoading}>
+                        {weatherLoading ? '加载中...' : '获取天气数据 (C# 桥接)'}
+                    </button>
+                    {weatherError && (
+                        <p style={{ color: 'red', marginTop: '0.5rem' }}>错误：{weatherError}</p>
+                    )}
+                    {weatherData && (
+                        <p>{JSON.stringify(weatherData)}</p>
+                    )}
+                </div>
+            </section>
+
+            <div className="ticks"></div>
+
+            <section id="next-steps">
+                <div id="docs">
+                    <svg className="icon" role="presentation" aria-hidden="true">
+                        <use href="/icons.svg#documentation-icon"></use>
+                    </svg>
+                    <h2>Documentation</h2>
+                    <p>Your questions, answered</p>
+                    <ul>
+                        <li>
+                            <a href="https://vite.dev/" target="_blank">
+                                <img className="logo" src={viteLogo} alt="" />
+                                Explore Vite
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://react.dev/" target="_blank">
+                                <img className="button-icon" src={reactLogo} alt="" />
+                                Learn more
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div id="social">
+                    <svg className="icon" role="presentation" aria-hidden="true">
+                        <use href="/icons.svg#social-icon"></use>
+                    </svg>
+                    <h2>Connect with us</h2>
+                    <p>Join the Vite community</p>
+                    <ul>
+                        <li>
+                            <a href="https://github.com/vitejs/vite" target="_blank">
+                                <svg
+                                    className="button-icon"
+                                    role="presentation"
+                                    aria-hidden="true"
+                                >
+                                    <use href="/icons.svg#github-icon"></use>
+                                </svg>
+                                GitHub
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://chat.vite.dev/" target="_blank">
+                                <svg
+                                    className="button-icon"
+                                    role="presentation"
+                                    aria-hidden="true"
+                                >
+                                    <use href="/icons.svg#discord-icon"></use>
+                                </svg>
+                                Discord
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://x.com/vite_js" target="_blank">
+                                <svg
+                                    className="button-icon"
+                                    role="presentation"
+                                    aria-hidden="true"
+                                >
+                                    <use href="/icons.svg#x-icon"></use>
+                                </svg>
+                                X.com
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://bsky.app/profile/vite.dev" target="_blank">
+                                <svg
+                                    className="button-icon"
+                                    role="presentation"
+                                    aria-hidden="true"
+                                >
+                                    <use href="/icons.svg#bluesky-icon"></use>
+                                </svg>
+                                Bluesky
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+
+            <div className="ticks"></div>
+            <section id="spacer"></section>
+        </>
+    )
+}
+
+export default App
--- a/avalonia-web-react/src/api/env.js
+++ b/avalonia-web-react/src/api/env.js
@ -0,0 +1,4 @@
+// 判断当前是否运行在 WebView2 环境中
+// 参考 www/index.html 中的判断逻辑
+export const isWebView2 = () =>
+  window.isWebView2 === true || typeof window.invokeCSharpAction === 'function'
--- a/avalonia-web-react/src/api/http.js
+++ b/avalonia-web-react/src/api/http.js
@ -0,0 +1,88 @@
+import axios from 'axios'
+import { isWebView2 } from './env'
+
+// WebView2 自定义协议前缀
+const WEBVIEW2_BASE = 'app://api/'
+
+// 普通浏览器 HTTP API 地址，按需修改
+const HTTP_BASE = 'http://localhost:5000/api/'
+
+// ─── axios 实例 ────────────────────────────────────────────────────────────────
+
+const http = axios.create({
+  headers: { 'Content-Type': 'application/json' },
+})
+
+// 请求拦截器：仅在浏览器环境下注入鉴权 Token
+// WebView2 本地运行，不需要鉴权
+http.interceptors.request.use((config) => {
+  if (!isWebView2()) {
+    const token = localStorage.getItem('authToken')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+  }
+  return config
+})
+
+// 响应拦截器：统一解包 C# 返回的 { success, data/error } 结构
+// C# BuildSuccessResponseBody 固定格式：{ "success": true,  "data": ... }
+//                              错误格式：{ "success": false, "error": "..." }
+// WebView2 桥接和 HTTP 两个环境返回结构相同，拦截器可统一处理
+http.interceptors.response.use(
+  (response) => {
+    // eslint-disable-next-line no-debugger
+    debugger
+    const payload = response.data
+    if (payload?.success === false) {
+      return Promise.reject(new Error(payload.error ?? '请求失败'))
+    }
+    // 直接返回业务数据，调用方无需再写 .data.data
+    return payload?.data ?? payload
+  },
+  (error) => {
+    const msg =
+      error.response?.data?.error ??
+      error.response?.data?.message ??
+      error.message ??
+      '网络错误'
+    return Promise.reject(new Error(msg))
+  },
+)
+
+// ─── 统一请求方法 ──────────────────────────────────────────────────────────────
+
+/**
+ * WebView2 桥接环境使用原生 fetch（桥接脚本已完整覆盖 window.fetch）
+ * 普通浏览器使用 axios 实例（支持拦截器、鉴权等）
+ *
+ * @param {string} endpoint
+ * @param {{ method?: string, headers?: Record<string,string>, body?: unknown }} options
+ */
+export async function request(endpoint, options = {}) {
+  const url = (isWebView2() ? WEBVIEW2_BASE : HTTP_BASE) + endpoint
+
+  // WebView2：直接走桥接 fetch，不经过 axios
+  if (isWebView2()) {
+    const res = await fetch(url, {
+      method: options.method ?? 'GET',
+      headers: { 'Content-Type': 'application/json', ...(options.headers ?? {}) },
+      body: options.body !== undefined ? JSON.stringify(options.body) : undefined,
+    })
+    const payload = await res.json()
+    // eslint-disable-next-line no-debugger
+    debugger
+    if (payload?.success === false) {
+      throw new Error(payload.error ?? '请求失败')
+    }
+    return payload?.data ?? payload
+  }
+
+  // 普通浏览器：走 axios（拦截器处理鉴权和响应解包）
+  return http.request({
+    url,
+    method: options.method ?? 'GET',
+    headers: options.headers,
+    data: options.body,
+  })
+}
--- a/avalonia-web-react/src/api/index.js
+++ b/avalonia-web-react/src/api/index.js
@ -0,0 +1,8 @@
+import { request } from './http'
+
+// 业务接口定义，新增接口在此处添加一行即可
+export const api = {
+  getUser:     ()      => request('getUser'),
+  processData: (input) => request('processData', { method: 'POST', body: { input } }),
+  wData:       (input) => request('wData',       { method: 'POST', body: { input } }),
+}
--- a/avalonia-web-react/src/assets/hero.png
+++ b/avalonia-web-react/src/assets/hero.png
--- a/avalonia-web-react/src/assets/react.svg
+++ b/avalonia-web-react/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/avalonia-web-react/src/assets/vite.svg
+++ b/avalonia-web-react/src/assets/vite.svg
--- a/avalonia-web-react/src/index.css
+++ b/avalonia-web-react/src/index.css
@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}
--- a/avalonia-web-react/src/main.jsx
+++ b/avalonia-web-react/src/main.jsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/avalonia-web-react/vite.config.js
+++ b/avalonia-web-react/vite.config.js
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import plugin from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [plugin()],
+    server: {
+        port: 51239,
+    }
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>