From 6f279fcae089db8d4ba0ae8b15ce0914ffc3cbac Mon Sep 17 00:00:00 2001
From: luoqiang <2769838458@qq.com>
Date: Thu, 23 Apr 2026 17:49:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eavalonia-web=E5=89=8D?=
=?UTF-8?q?=E7=AB=AF=E5=AD=90=E9=A1=B9=E7=9B=AE=E5=8F=8AWebView=E6=A1=A5?=
=?UTF-8?q?=E6=8E=A5=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
新增基于Vite+Vue3的avalonia-web前端子项目，包含完整工程结构、配置文件、静态资源和组件。完善.gitignore等忽略规则，并将前端项目集成进解决方案。增强MainWindow.axaml.cs中WebView脚本，支持自定义协议的XMLHttpRequest桥接，提升JS与C#通信能力。补充CHANGELOG及环境检测提示。
---
.gitignore | 6 +-
Avalonia-PC/Avalonia-PC.slnx | 4 +
Avalonia-PC/Views/MainWindow.axaml.cs | 282 +-
Avalonia-PC/www/index.html | 19 +-
Avalonia-Web/.editorconfig | 8 +
Avalonia-Web/.gitattributes | 1 +
Avalonia-Web/.gitignore | 39 +
Avalonia-Web/.oxlintrc.json | 10 +
Avalonia-Web/CHANGELOG.md | 13 +
Avalonia-Web/README.md | 48 +
Avalonia-Web/avalonia-web.esproj | 11 +
Avalonia-Web/env.d.ts | 1 +
Avalonia-Web/eslint.config.ts | 23 +
Avalonia-Web/index.html | 13 +
Avalonia-Web/package-lock.json | 4597 +++++++++++++++++
Avalonia-Web/package.json | 39 +
Avalonia-Web/public/favicon.ico | Bin 0 -> 4286 bytes
Avalonia-Web/src/App.vue | 47 +
Avalonia-Web/src/assets/base.css | 86 +
Avalonia-Web/src/assets/logo.svg | 1 +
Avalonia-Web/src/assets/main.css | 35 +
Avalonia-Web/src/components/HelloWorld.vue | 41 +
Avalonia-Web/src/components/TheWelcome.vue | 95 +
Avalonia-Web/src/components/WelcomeItem.vue | 87 +
.../src/components/icons/IconCommunity.vue | 7 +
.../components/icons/IconDocumentation.vue | 7 +
.../src/components/icons/IconEcosystem.vue | 7 +
.../src/components/icons/IconSupport.vue | 7 +
.../src/components/icons/IconTooling.vue | 19 +
Avalonia-Web/src/main.ts | 6 +
Avalonia-Web/src/shims-vue.d.ts | 6 +
Avalonia-Web/tsconfig.app.json | 18 +
Avalonia-Web/tsconfig.json | 11 +
Avalonia-Web/tsconfig.node.json | 27 +
Avalonia-Web/vite.config.ts | 10 +
35 files changed, 5605 insertions(+), 26 deletions(-)
create mode 100644 Avalonia-Web/.editorconfig
create mode 100644 Avalonia-Web/.gitattributes
create mode 100644 Avalonia-Web/.gitignore
create mode 100644 Avalonia-Web/.oxlintrc.json
create mode 100644 Avalonia-Web/CHANGELOG.md
create mode 100644 Avalonia-Web/README.md
create mode 100644 Avalonia-Web/avalonia-web.esproj
create mode 100644 Avalonia-Web/env.d.ts
create mode 100644 Avalonia-Web/eslint.config.ts
create mode 100644 Avalonia-Web/index.html
create mode 100644 Avalonia-Web/package-lock.json
create mode 100644 Avalonia-Web/package.json
create mode 100644 Avalonia-Web/public/favicon.ico
create mode 100644 Avalonia-Web/src/App.vue
create mode 100644 Avalonia-Web/src/assets/base.css
create mode 100644 Avalonia-Web/src/assets/logo.svg
create mode 100644 Avalonia-Web/src/assets/main.css
create mode 100644 Avalonia-Web/src/components/HelloWorld.vue
create mode 100644 Avalonia-Web/src/components/TheWelcome.vue
create mode 100644 Avalonia-Web/src/components/WelcomeItem.vue
create mode 100644 Avalonia-Web/src/components/icons/IconCommunity.vue
create mode 100644 Avalonia-Web/src/components/icons/IconDocumentation.vue
create mode 100644 Avalonia-Web/src/components/icons/IconEcosystem.vue
create mode 100644 Avalonia-Web/src/components/icons/IconSupport.vue
create mode 100644 Avalonia-Web/src/components/icons/IconTooling.vue
create mode 100644 Avalonia-Web/src/main.ts
create mode 100644 Avalonia-Web/src/shims-vue.d.ts
create mode 100644 Avalonia-Web/tsconfig.app.json
create mode 100644 Avalonia-Web/tsconfig.json
create mode 100644 Avalonia-Web/tsconfig.node.json
create mode 100644 Avalonia-Web/vite.config.ts
diff --git a/.gitignore b/.gitignore
index 3eadd6c..945b906 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,8 @@
/Avalonia-API/bin
/Avalonia-API/obj
/Avalonia-Services/bin
-/Avalonia-Services/obj
\ No newline at end of file
+/Avalonia-Services/obj
+/Avalonia-Web/.vscode
+/Avalonia-Web/obj
+/Avalonia-Web/node_modules
+/Avalonia-Web/dist
\ No newline at end of file
diff --git a/Avalonia-PC/Avalonia-PC.slnx b/Avalonia-PC/Avalonia-PC.slnx
index 9200293..0509c92 100644
--- a/Avalonia-PC/Avalonia-PC.slnx
+++ b/Avalonia-PC/Avalonia-PC.slnx
@@ -1,5 +1,9 @@
+
+
+
+
diff --git a/Avalonia-PC/Views/MainWindow.axaml.cs b/Avalonia-PC/Views/MainWindow.axaml.cs
index 267b166..2e67699 100644
--- a/Avalonia-PC/Views/MainWindow.axaml.cs
+++ b/Avalonia-PC/Views/MainWindow.axaml.cs
@@ -236,6 +236,34 @@ if (!window.__appBridgeInstalled) {
};
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'))) {
@@ -279,30 +307,242 @@ if (!window.__appBridgeInstalled) {
body = await new Response(body).text();
}
- 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}`));
- }, 30000);
-
- 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,
+ return sendAppBridgeRequest({
+ requestUrl,
method: init?.method ?? request?.method ?? 'GET',
headers,
- body: body ?? null
- }));
-
- return responsePromise;
+ 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;
}
""";
diff --git a/Avalonia-PC/www/index.html b/Avalonia-PC/www/index.html
index 952f347..91245ba 100644
--- a/Avalonia-PC/www/index.html
+++ b/Avalonia-PC/www/index.html
@@ -32,10 +32,21 @@
}
};
- const isWV2 = window.isWebView2 === true;
- setTimeout(() => {
- document.body.insertAdjacentHTML('beforeend', `当前环境: ${isWV2 ? 'WebView2 (自定义协议)' : '普通浏览器 (HTTP API)'}
`);
- }, 100)
+ const detectIsWebView2 = () => window.isWebView2 === true || typeof window.invokeCSharpAction === 'function';
+
+ const renderEnvironment = () => {
+ const isWV2 = detectIsWebView2();
+ const existing = document.getElementById('envTip');
+ if (existing) {
+ existing.textContent = `当前环境: ${isWV2 ? 'WebView2 (自定义协议)' : '普通浏览器 (HTTP API)'}`;
+ return;
+ }
+
+ document.body.insertAdjacentHTML('beforeend', `当前环境: ${isWV2 ? 'WebView2 (自定义协议)' : '普通浏览器 (HTTP API)'}
`);
+ };
+
+ renderEnvironment();
+ setTimeout(renderEnvironment, 300);