mirror of
https://github.com/amark/gun.git
synced 2025-11-23 22:15:55 +00:00
relay-sqlite-example (#1403)
* relay-sqlite-example Manager+Adapter * Update README.md
This commit is contained in:
ponzS
GitHub
parent
4b43fa7f2c
commit
938697dee9
26
examples/relay-sqlite-example/README.md
Normal file
26
examples/relay-sqlite-example/README.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# gun-relay-sqlite
|
||||||
|
|
||||||
|
Manager+Adapter Stable version
|
||||||
|
|
||||||
|
Support iOS & Android
|
||||||
|
|
||||||
|
# Quickly build a relay manager and Gun storage adapter with sqlite persistence.
|
||||||
|
|
||||||
|
```base
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
```base
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
```base
|
||||||
|
npx cap sync
|
||||||
|
```
|
||||||
|
|
||||||
|
```base
|
||||||
|
npx cap open ios | android
|
||||||
|
```
|
||||||
|
|
||||||
|
# Preview
|
||||||
|
|
||||||
43
examples/relay-sqlite-example/capacitor.config.ts
Normal file
43
examples/relay-sqlite-example/capacitor.config.ts
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { CapacitorConfig } from '@capacitor/cli';
|
||||||
|
import { CapacitorHttp } from '@capacitor/core';
|
||||||
|
import { KeyboardResize, KeyboardStyle } from '@capacitor/keyboard'
|
||||||
|
const config: CapacitorConfig = {
|
||||||
|
appId: 'com.gun.relay',
|
||||||
|
appName: 'Relay',
|
||||||
|
webDir: 'dist',
|
||||||
|
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
CapacitorHttp: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
Keyboard: {
|
||||||
|
resize: KeyboardResize.None,
|
||||||
|
resizeOnFullScreen: true,
|
||||||
|
|
||||||
|
},
|
||||||
|
CapacitorSQLite: {
|
||||||
|
migrate: true,
|
||||||
|
iosDatabaseLocation: 'Library/CapacitorDatabase',
|
||||||
|
iosIsEncryption: true,
|
||||||
|
iosKeychainPrefix: 'gundb',
|
||||||
|
iosBiometric: {
|
||||||
|
biometricAuth: false,
|
||||||
|
biometricTitle : "Biometric login for capacitor sqlite"
|
||||||
|
},
|
||||||
|
androidIsEncryption: true,
|
||||||
|
androidBiometric: {
|
||||||
|
biometricAuth : false,
|
||||||
|
biometricTitle : "Biometric login for capacitor sqlite",
|
||||||
|
biometricSubTitle : "Log in using your biometric"
|
||||||
|
},
|
||||||
|
electronIsEncryption: true,
|
||||||
|
electronWindowsLocation: "C:\\ProgramData\\CapacitorDatabases",
|
||||||
|
electronMacLocation: "~/Databases/",
|
||||||
|
electronLinuxLocation: "Databases"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
31
examples/relay-sqlite-example/index.html
Normal file
31
examples/relay-sqlite-example/index.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Gun-Relay-sqlite</title>
|
||||||
|
|
||||||
|
<base href="/" />
|
||||||
|
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
<meta name="msapplication-tap-highlight" content="no" />
|
||||||
|
|
||||||
|
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
|
<!-- add to homescreen for ios -->
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Gun-Relay-sqlite" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
204
examples/relay-sqlite-example/package.json
Normal file
204
examples/relay-sqlite-example/package.json
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
{
|
||||||
|
"name": "gun-relay-sqlite",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npm run copy:sql:wasm && vite --host",
|
||||||
|
"build:web": "npm run copy:sql:wasm && npm run build",
|
||||||
|
"build:native": "npm run remove:sql:wasm && npm run build",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"ionic:serve:before": "npm run copy:sql:wasm",
|
||||||
|
"copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm public/assets",
|
||||||
|
"remove:sql:wasm": "rimraf public/assets/sql-wasm.wasm",
|
||||||
|
"ios:start": "npm run remove:sql:wasm && npm run build:native && npx cap sync && npx cap copy && npx cap open ios",
|
||||||
|
"android:start": "npm run remove:sql:wasm && npm run build:native && npx cap sync && npx cap copy && npx cap open android",
|
||||||
|
"electron:install": "cd electron && npm install && cd ..",
|
||||||
|
"electron:prepare": "npm run remove:sql:wasm && npm run build && npx cap sync @capacitor-community/electron && npx cap copy @capacitor-community/electron",
|
||||||
|
"electron:start": "npm run electron:prepare && cd electron && npm run electron:start",
|
||||||
|
"clean:vite:cache": "vite clean",
|
||||||
|
"test:e2e": "cypress run",
|
||||||
|
"test:unit": "vitest",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/core": "^19.1.6",
|
||||||
|
"@aparajita/capacitor-biometric-auth": "^9.0.0",
|
||||||
|
"@aparajita/capacitor-secure-storage": "^6.0.1",
|
||||||
|
"@capacitor-community/barcode-scanner": "^4.0.1",
|
||||||
|
"@capacitor-community/electron": "^4.1.2",
|
||||||
|
"@capacitor-community/media": "^8.0.0",
|
||||||
|
"@capacitor-community/speech-recognition": "^6.0.1",
|
||||||
|
"@capacitor-community/sqlite": "^5.2.3",
|
||||||
|
"@capacitor/action-sheet": "^7.0.0",
|
||||||
|
"@capacitor/android": "^7.0.0",
|
||||||
|
"@capacitor/app": "^7.0.0",
|
||||||
|
"@capacitor/assets": "latest",
|
||||||
|
"@capacitor/background-runner": "^2.1.0",
|
||||||
|
"@capacitor/browser": "^7.0.0",
|
||||||
|
"@capacitor/camera": "^7.0.0",
|
||||||
|
"@capacitor/clipboard": "^7.0.0",
|
||||||
|
"@capacitor/core": "^7.0.0",
|
||||||
|
"@capacitor/device": "^7.0.0",
|
||||||
|
"@capacitor/dialog": "^7.0.0",
|
||||||
|
"@capacitor/filesystem": "^7.0.0",
|
||||||
|
"@capacitor/geolocation": "^7.0.0",
|
||||||
|
"@capacitor/haptics": "^7.0.0",
|
||||||
|
"@capacitor/ios": "^7.0.0",
|
||||||
|
"@capacitor/keyboard": "^7.0.0",
|
||||||
|
"@capacitor/local-notifications": "^7.0.0",
|
||||||
|
"@capacitor/network": "^7.0.0",
|
||||||
|
"@capacitor/preferences": "^7.0.0",
|
||||||
|
"@capacitor/push-notifications": "^7.0.0",
|
||||||
|
"@capacitor/status-bar": "^7.0.0",
|
||||||
|
"@capacitor/toast": "^7.0.0",
|
||||||
|
"@ffmpeg/core": "^0.12.10",
|
||||||
|
"@ffmpeg/ffmpeg": "^0.12.15",
|
||||||
|
"@ffmpeg/util": "^0.12.2",
|
||||||
|
"@gun-vue/composables": "^0.24.2",
|
||||||
|
"@gun-vue/gun-es": "^0.3.1240",
|
||||||
|
"@iconify/tailwind": "latest",
|
||||||
|
"@ionic-native/background-mode": "^5.36.0",
|
||||||
|
"@ionic-native/core": "^5.36.0",
|
||||||
|
"@ionic-native/fingerprint-aio": "^5.36.0",
|
||||||
|
"@ionic-native/media": "^5.36.0",
|
||||||
|
"@ionic-native/qr-scanner": "^5.36.0",
|
||||||
|
"@ionic-native/secure-storage": "^5.36.0",
|
||||||
|
"@ionic-native/sqlite": "^5.36.0",
|
||||||
|
"@ionic/cli": "latest",
|
||||||
|
"@ionic/pwa-elements": "^3.2.2",
|
||||||
|
"@ionic/storage": "^4.0.0",
|
||||||
|
"@ionic/storage-angular": "^4.0.0",
|
||||||
|
"@ionic/vue": "^7.0.0",
|
||||||
|
"@ionic/vue-router": "^7.0.0",
|
||||||
|
"@joyid/capacitor-native-passkey": "^0.0.3",
|
||||||
|
"@peculiar/webcrypto": "^1.5.0",
|
||||||
|
"@rollup/plugin-inject": "^5.0.5",
|
||||||
|
"@scure/bip39": "^1.6.0",
|
||||||
|
"@simplewebauthn/browser": "^13.1.0",
|
||||||
|
"@tresjs/core": "latest",
|
||||||
|
"@tweenjs/tween.js": "latest",
|
||||||
|
"@types/gun": "^0.9.6",
|
||||||
|
"@types/text-encoding": "^0.0.40",
|
||||||
|
"@types/uuid": "^10.0.0",
|
||||||
|
"@types/webrtc": "^0.0.44",
|
||||||
|
"@vue/language-plugin-pug": "^2.2.2",
|
||||||
|
"@vueuse/core": "latest",
|
||||||
|
"@vueuse/gesture": "^2.0.0",
|
||||||
|
"add": "^2.0.6",
|
||||||
|
"animate.css": "latest",
|
||||||
|
"autopass": "^2.1.0",
|
||||||
|
"axios": "latest",
|
||||||
|
"b4a": "^1.6.7",
|
||||||
|
"better-scroll": "^2.5.1",
|
||||||
|
"btoa": "^1.2.1",
|
||||||
|
"buffer": "^6.0.3",
|
||||||
|
"capacitor-voice-recorder": "^7.0.5",
|
||||||
|
"cordova-plugin-background-mode": "^0.7.3",
|
||||||
|
"cordova-plugin-device": "^3.0.0",
|
||||||
|
"cordova-plugin-fingerprint-aio": "^6.0.0",
|
||||||
|
"cordova-plugin-secure-storage-echo": "^5.1.1",
|
||||||
|
"cordova-sqlite-storage": "^7.0.0",
|
||||||
|
"corestore": "^7.1.0",
|
||||||
|
"crypto-browserify": "^3.12.1",
|
||||||
|
"crypto-js": "^4.2.0",
|
||||||
|
"cryptojs": "^2.5.3",
|
||||||
|
"elliptic": "^6.6.1",
|
||||||
|
"ffmpeg": "^0.0.4",
|
||||||
|
"gsap": "^3.13.0",
|
||||||
|
"gun": "^0.2020.1240",
|
||||||
|
"gun-avatar": "^2.2.2",
|
||||||
|
"gun-flint": "^0.0.28",
|
||||||
|
"ionicons": "^7.4.0",
|
||||||
|
"jsqr": "latest",
|
||||||
|
"localforage-cordovasqlitedriver": "^1.8.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"native-run": "^2.0.1",
|
||||||
|
"node-forge": "^1.3.1",
|
||||||
|
"nvm": "latest",
|
||||||
|
"peerjs": "^1.5.4",
|
||||||
|
"photoswipe": "^5.4.4",
|
||||||
|
"pinia": "^3.0.1",
|
||||||
|
"pinyin-pro": "^3.26.0",
|
||||||
|
"postcss": "latest",
|
||||||
|
"postcss-loader": "latest",
|
||||||
|
"pug": "^3.0.3",
|
||||||
|
"qrcode.vue": "latest",
|
||||||
|
"qrcodejs2": "latest",
|
||||||
|
"sass": "latest",
|
||||||
|
"socket.io-client": "latest",
|
||||||
|
"stats.js": "latest",
|
||||||
|
"stream-browserify": "^3.0.0",
|
||||||
|
"swiper": "^11.2.6",
|
||||||
|
"tailwind": "latest",
|
||||||
|
"text-encoding": "^0.7.0",
|
||||||
|
"three": "latest",
|
||||||
|
"three-stdlib": "^2.35.16",
|
||||||
|
"tweakpane": "latest",
|
||||||
|
"uint8arrays": "latest",
|
||||||
|
"unplugin-auto-import": "^19.0.0",
|
||||||
|
"uuid": "^11.1.0",
|
||||||
|
"vite-plugin-pwa": "latest",
|
||||||
|
"vm-browserify": "^1.1.2",
|
||||||
|
"vue": "latest",
|
||||||
|
"vue-chartjs": "latest",
|
||||||
|
"vue-count-to": "^1.0.13",
|
||||||
|
"vue-i18n": "latest",
|
||||||
|
"vue-image-lightbox": "^7.2.0",
|
||||||
|
"vue-lazyload": "^3.0.0",
|
||||||
|
"vue-router": "^4.1.6",
|
||||||
|
"vue-virtual-scroller": "^2.0.0-beta.8",
|
||||||
|
"vue3-carousel": "^0.15.0",
|
||||||
|
"vue3-photo-preview": "^0.3.0",
|
||||||
|
"vue3-qrcode-reader": "latest",
|
||||||
|
"vue3-touch-events": "latest",
|
||||||
|
"webrtc-adapter": "^9.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@capacitor/cli": "^7.0.0",
|
||||||
|
"@iconify-json/tabler": "latest",
|
||||||
|
"@iconify/json": "latest",
|
||||||
|
"@tsconfig/node22": "latest",
|
||||||
|
"@types/jsdom": "latest",
|
||||||
|
"@types/node": "^22.10.7",
|
||||||
|
"@types/stats.js": "latest",
|
||||||
|
"@types/three": "latest",
|
||||||
|
"@unocss/preset-icons": "^65.4.2",
|
||||||
|
"@unocss/preset-uno": "^65.4.2",
|
||||||
|
"@vitejs/plugin-legacy": "^4.0.2",
|
||||||
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
|
"@vitest/eslint-plugin": "latest",
|
||||||
|
"@vue/eslint-config-prettier": "latest",
|
||||||
|
"@vue/eslint-config-typescript": "^11.0.2",
|
||||||
|
"@vue/test-utils": "^2.3.0",
|
||||||
|
"@vue/tsconfig": "latest",
|
||||||
|
"copyfiles": "^2.4.1",
|
||||||
|
"cypress": "^13.1.0",
|
||||||
|
"eslint": "^8.35.0",
|
||||||
|
"eslint-plugin-oxlint": "latest",
|
||||||
|
"eslint-plugin-vue": "^9.9.0",
|
||||||
|
"jsdom": "^22.1.0",
|
||||||
|
"npm-run-all2": "latest",
|
||||||
|
"oxlint": "latest",
|
||||||
|
"prettier": "latest",
|
||||||
|
"process": "^0.11.10",
|
||||||
|
"rimraf": "^5.0.1",
|
||||||
|
"tailwindcss": "latest",
|
||||||
|
"terser": "^5.37.0",
|
||||||
|
"typescript": "^5.1.6",
|
||||||
|
"unocss": "^65.4.2",
|
||||||
|
"unplugin-vue-components": "latest",
|
||||||
|
"vite": "^latest",
|
||||||
|
"vite-plugin-node-polyfills": "^0.23.0",
|
||||||
|
"vite-plugin-pages": "latest",
|
||||||
|
"vite-plugin-vue-devtools": "latest",
|
||||||
|
"vitest": "latest",
|
||||||
|
"vue-tsc": "latest"
|
||||||
|
},
|
||||||
|
"description": "gun-sqlite-relay",
|
||||||
|
"main": "index.js",
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
||||||
131
examples/relay-sqlite-example/src/App.vue
Normal file
131
examples/relay-sqlite-example/src/App.vue
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<ion-app>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ion-router-outlet />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ion-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
import { IonApp, IonRouterOutlet } from '@ionic/vue';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function setupNetworkListener() {
|
||||||
|
let debounceTimer: NodeJS.Timeout;
|
||||||
|
window.addEventListener('online', async () => {
|
||||||
|
clearTimeout(debounceTimer);
|
||||||
|
debounceTimer = setTimeout(async () => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 保存原始 console.warn
|
||||||
|
const originalConsoleWarn = console.warn;
|
||||||
|
|
||||||
|
|
||||||
|
function filterGunWarnings(...args: any[]) {
|
||||||
|
const message = args[0]?.toString() || '';
|
||||||
|
if (message.includes('Deprecated internal utility will break in next version')) {
|
||||||
|
return; // 忽略 Gun.js 警告
|
||||||
|
}
|
||||||
|
originalConsoleWarn.apply(console, args);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
console.warn = filterGunWarnings;
|
||||||
|
await setupNetworkListener();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('online', () => {});
|
||||||
|
window.removeEventListener('offline', () => {});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
|
||||||
|
/* 滚动条样式 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0px; /* 滚动条宽度 */
|
||||||
|
background-color: transparent; /* 透明背景 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条滑块 */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: transparent; /* 半透明的滑块颜色 */
|
||||||
|
border-radius: 4px; /* 圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent; /* 透明轨道 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ion-page,
|
||||||
|
ion-content {
|
||||||
|
background: transparent !important;
|
||||||
|
--background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* touch-action: none;
|
||||||
|
touch-action: pan-x pan-y;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none; */
|
||||||
|
background-color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
638
examples/relay-sqlite-example/src/components/RelayMode.vue
Normal file
638
examples/relay-sqlite-example/src/components/RelayMode.vue
Normal file
@ -0,0 +1,638 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, watch } from 'vue';
|
||||||
|
import { useNetworkStatus } from '@/composables/useNetworkStatus';
|
||||||
|
import {
|
||||||
|
IonIcon,
|
||||||
|
IonToggle,
|
||||||
|
IonModal,
|
||||||
|
IonHeader,
|
||||||
|
IonToolbar,
|
||||||
|
IonTitle,
|
||||||
|
IonContent,
|
||||||
|
IonItem,
|
||||||
|
IonLabel,
|
||||||
|
IonInput,
|
||||||
|
IonButton,
|
||||||
|
IonButtons
|
||||||
|
} from '@ionic/vue';
|
||||||
|
import { addCircleSharp, closeCircleSharp, searchSharp, closeSharp, refreshOutline } from 'ionicons/icons';
|
||||||
|
import StorageService from '@/services/storageService';
|
||||||
|
import { getCurrentInstance } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
const appInstance = getCurrentInstance();
|
||||||
|
const storageServ = appInstance?.appContext.config.globalProperties.$storageServ as StorageService;
|
||||||
|
|
||||||
|
|
||||||
|
const {
|
||||||
|
networkStatus,
|
||||||
|
peersStatus,
|
||||||
|
currentMode,
|
||||||
|
peerStatuses,
|
||||||
|
peersList,
|
||||||
|
enabledPeer,
|
||||||
|
addPeer,
|
||||||
|
removePeer,
|
||||||
|
enablePeer,
|
||||||
|
disablePeer,
|
||||||
|
peersNotes,
|
||||||
|
savePeerNote,
|
||||||
|
} = useNetworkStatus(storageServ);
|
||||||
|
|
||||||
|
|
||||||
|
const newPeerUrl = ref('');
|
||||||
|
const searchQuery = ref('');
|
||||||
|
const selectedPeer = ref<string | null>(null);
|
||||||
|
const isModalOpen = ref(false);
|
||||||
|
const notes = ref<Record<string, string>>({});
|
||||||
|
const isResetting = ref(false);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const savedNotes = localStorage.getItem('relayNotes');
|
||||||
|
if (savedNotes) {
|
||||||
|
const notes = JSON.parse(savedNotes);
|
||||||
|
for (const [peer, note] of Object.entries(notes)) {
|
||||||
|
await savePeerNote(peer as string, note as string);
|
||||||
|
}
|
||||||
|
localStorage.removeItem('relayNotes'); // 迁移后删除
|
||||||
|
console.log('Migrated relay notes to SQLite');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to migrate relay notes:', e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
watch(peersNotes, async (newNotes) => {
|
||||||
|
for (const [peer, note] of Object.entries(newNotes)) {
|
||||||
|
await savePeerNote(peer, note);
|
||||||
|
}
|
||||||
|
}, { deep: true });
|
||||||
|
|
||||||
|
|
||||||
|
const sortedPeers = computed(() => {
|
||||||
|
return peersList.value
|
||||||
|
.slice()
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a === enabledPeer.value) return -1;
|
||||||
|
if (b === enabledPeer.value) return 1;
|
||||||
|
return 0;
|
||||||
|
})
|
||||||
|
.filter((peer) => {
|
||||||
|
const searchLower = searchQuery.value.toLowerCase();
|
||||||
|
const peerLower = peer.toLowerCase();
|
||||||
|
const noteLower = (peersNotes.value[peer] || '').toLowerCase();
|
||||||
|
return peerLower.includes(searchLower) || noteLower.includes(searchLower);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const openModal = (peer: string) => {
|
||||||
|
selectedPeer.value = peer;
|
||||||
|
isModalOpen.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
isModalOpen.value = false;
|
||||||
|
selectedPeer.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="liquid-container" >
|
||||||
|
<div class="status-bar" :class="['indicator', networkStatus]">
|
||||||
|
|
||||||
|
<div >
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="add-peer">
|
||||||
|
<input
|
||||||
|
v-model="newPeerUrl"
|
||||||
|
placeholder="Enter relay URL"
|
||||||
|
@keyup.enter="addPeer(newPeerUrl)"
|
||||||
|
/>
|
||||||
|
<ion-icon
|
||||||
|
:icon="addCircleSharp"
|
||||||
|
class="addlink"
|
||||||
|
@click="addPeer(newPeerUrl);newPeerUrl = ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="peer-list">
|
||||||
|
<div class="peer-list-header">
|
||||||
|
<h3>Gun Relays</h3>
|
||||||
|
<div class="search-container">
|
||||||
|
<ion-icon :icon="searchSharp" class="search-icon" />
|
||||||
|
<input
|
||||||
|
v-model="searchQuery"
|
||||||
|
placeholder="Search relays..."
|
||||||
|
class="search-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="peer-scroll-container">
|
||||||
|
<div
|
||||||
|
v-for="peer in sortedPeers"
|
||||||
|
:key="peer"
|
||||||
|
class="peer-item"
|
||||||
|
@click="openModal(peer)"
|
||||||
|
>
|
||||||
|
<div class="peer-header">
|
||||||
|
<div :class="['status', peerStatuses[peer]]">
|
||||||
|
{{ peerStatuses[peer] || 'Checking' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="peer-content">
|
||||||
|
<span class="peer-url">{{ notes[peer] || peer }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="peer-actions">
|
||||||
|
<ion-toggle
|
||||||
|
@click.stop
|
||||||
|
:checked="enabledPeer === peer"
|
||||||
|
@ionChange="enabledPeer === peer ? disablePeer() : enablePeer(peer)"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-modal :is-open="isModalOpen" @didDismiss="closeModal">
|
||||||
|
|
||||||
|
<ion-content class="ion-padding">
|
||||||
|
<ion-item lines="none" v-if="selectedPeer">
|
||||||
|
<ion-label position="stacked">Relay URL</ion-label>
|
||||||
|
<ion-input :value="selectedPeer" readonly class="readonly-input" />
|
||||||
|
</ion-item>
|
||||||
|
<ion-item lines="none" v-if="selectedPeer">
|
||||||
|
<ion-label position="stacked">Status</ion-label>
|
||||||
|
<div :class="['status', peerStatuses[selectedPeer]]" class="status-display">
|
||||||
|
{{ peerStatuses[selectedPeer] || 'Checking' }}
|
||||||
|
</div>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item lines="none" v-if="selectedPeer">
|
||||||
|
<ion-label position="stacked">Note</ion-label>
|
||||||
|
<ion-input
|
||||||
|
v-model="notes[selectedPeer]"
|
||||||
|
placeholder=""
|
||||||
|
clear-input
|
||||||
|
style=" --padding-start: 12px;
|
||||||
|
--padding-end: 12px;"
|
||||||
|
/>
|
||||||
|
</ion-item>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<ion-button
|
||||||
|
expand="block"
|
||||||
|
color="danger"
|
||||||
|
@click="removePeer(selectedPeer!); closeModal()"
|
||||||
|
>
|
||||||
|
Remove Relay
|
||||||
|
</ion-button>
|
||||||
|
<ion-button
|
||||||
|
expand="block"
|
||||||
|
color="medium"
|
||||||
|
@click="closeModal"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</ion-button>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.liquid-container {
|
||||||
|
padding: 16px 20px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: transparent;
|
||||||
|
/* background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
background: rgba(130, 130, 130, 0.15);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 8px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.reset-button-container {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, rgba(102, 204, 255, 0.2), rgba(102, 204, 255, 0.4));
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
gap: 6px;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button:hover {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 204, 255, 0.3), rgba(102, 204, 255, 0.5));
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotating {
|
||||||
|
animation: spin 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-right: 6px;
|
||||||
|
/* color: #333; */
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
width: 100%;
|
||||||
|
/* padding: 4px 8px; */
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.online,
|
||||||
|
.indicator.connected,
|
||||||
|
.indicator.relay {
|
||||||
|
background: linear-gradient(135deg, #88ff88, #55ccaa);
|
||||||
|
color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.offline,
|
||||||
|
.indicator.disconnected,
|
||||||
|
.indicator.direct {
|
||||||
|
background: linear-gradient(135deg, #ff7777, #cc5555);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(150, 150, 150, 0.2);
|
||||||
|
font-size: 14px;
|
||||||
|
/* color: #333; */
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer input:hover,
|
||||||
|
.add-peer input:focus {
|
||||||
|
background: rgba(150, 150, 150, 0.25);
|
||||||
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addlink {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
/* color: #66ccff; */
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addlink:hover {
|
||||||
|
/* color: #88ddff; */
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-list {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-list-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-list h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
/* color: #333; */
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
position: relative;
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #777;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px 8px 36px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(150, 150, 150, 0.2);
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:hover,
|
||||||
|
.search-input:focus {
|
||||||
|
background: rgba(150, 150, 150, 0.25);
|
||||||
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container {
|
||||||
|
border-radius: 12px;
|
||||||
|
max-height: 539px;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-track {
|
||||||
|
background: rgba(150, 150, 150, 0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(180deg, #66ccff, #88ddff);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(180deg, #55bbff, #77ccff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-item {
|
||||||
|
padding: 12px;
|
||||||
|
background: linear-gradient(135deg, rgba(150, 150, 150, 0.15), rgba(255, 255, 255, 0.05));
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-item:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.connected {
|
||||||
|
background: linear-gradient(135deg, #88ff88, #55ccaa);
|
||||||
|
color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.disconnected {
|
||||||
|
background: linear-gradient(135deg, #ff7777, #cc5555);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.checking {
|
||||||
|
background: linear-gradient(135deg, #ffcc66, #ffaa33);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-content {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-url {
|
||||||
|
display: block;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 6px 10px;
|
||||||
|
background: rgba(150, 150, 150, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
/* color: #444; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toggle {
|
||||||
|
/* --background: rgba(150, 150, 150, 0.2);
|
||||||
|
--background-checked: linear-gradient(135deg, #66ccff, #88ddff);
|
||||||
|
--handle-background: #fff;
|
||||||
|
--handle-background-checked: #fff; */
|
||||||
|
width: 48px;
|
||||||
|
height: 24px;
|
||||||
|
/* --handle-width: 20px;
|
||||||
|
--handle-height: 20px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Styles */
|
||||||
|
ion-modal {
|
||||||
|
--border-radius: 12px;
|
||||||
|
--max-width: 400px;
|
||||||
|
--max-height: 46%;
|
||||||
|
|
||||||
|
--backdrop-opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ion-header {
|
||||||
|
--background: rgba(150, 150, 150, 0.1);
|
||||||
|
} */
|
||||||
|
|
||||||
|
ion-toolbar {
|
||||||
|
--background: transparent;
|
||||||
|
--border-width: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-buttons {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button {
|
||||||
|
--background-activated: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button ion-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button:hover ion-icon {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ion-padding {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-item {
|
||||||
|
--background: transparent;
|
||||||
|
--padding-start: 0;
|
||||||
|
--inner-padding-end: 0;
|
||||||
|
/* margin-bottom: 16px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-label {
|
||||||
|
/* color: #333 !important; */
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-input {
|
||||||
|
--background: rgba(150, 150, 150, 0.15);
|
||||||
|
--padding-start: 12px;
|
||||||
|
--padding-end: 12px;
|
||||||
|
--padding-top: 8px;
|
||||||
|
--padding-bottom: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.readonly-input {
|
||||||
|
--padding-start: 12px;
|
||||||
|
--padding-end: 12px;
|
||||||
|
|
||||||
|
--color: #666;
|
||||||
|
--background: rgba(150, 150, 150, 0.1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-display {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions ion-button {
|
||||||
|
--border-radius: 8px;
|
||||||
|
--padding-start: 16px;
|
||||||
|
--padding-end: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions ion-button[color="danger"] {
|
||||||
|
--background: #ff6666;
|
||||||
|
--background-hover: #ff8888;
|
||||||
|
--background-activated: #ff5555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions ion-button[color="medium"] {
|
||||||
|
--background: #ccc;
|
||||||
|
--background-hover: #ddd;
|
||||||
|
--background-activated: #bbb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
import { ref, Ref } from 'vue';
|
||||||
|
import { Flint, NodeAdapter } from 'gun-flint';
|
||||||
|
import StorageService from '../services/storageService';
|
||||||
|
import { ISQLiteService } from '../services/sqliteService';
|
||||||
|
import { IDbVersionService } from '../services/dbVersionService';
|
||||||
|
|
||||||
|
// 日志工具
|
||||||
|
// const log = {
|
||||||
|
// debug: (msg: string, ...args: any[]) => console.debug(`[Gun-SQLite-Adapter] ${msg}`, ...args),
|
||||||
|
// info: (msg: string, ...args: any[]) => console.info(`[Gun-SQLite-Adapter] ${msg}`, ...args),
|
||||||
|
// warn: (msg: string, ...args: any[]) => console.warn(`[Gun-SQLite-Adapter] ${msg}`, ...args),
|
||||||
|
// error: (msg: string, ...args: any[]) => console.error(`[Gun-SQLite-Adapter] ${msg}`, ...args),
|
||||||
|
// };
|
||||||
|
|
||||||
|
// 请求队列管理，防止重复查询
|
||||||
|
class RequestQueue {
|
||||||
|
private queue: Map<string, { resolve: (data: any) => void; reject: (err: any) => void }[]> = new Map();
|
||||||
|
private debounceTimers: Map<string, NodeJS.Timeout> = new Map();
|
||||||
|
private storageServ: StorageService;
|
||||||
|
|
||||||
|
constructor(storageServ: StorageService) {
|
||||||
|
this.storageServ = storageServ;
|
||||||
|
}
|
||||||
|
|
||||||
|
async get(key: string): Promise<any> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const handlers = this.queue.get(key) || [];
|
||||||
|
handlers.push({ resolve, reject });
|
||||||
|
this.queue.set(key, handlers);
|
||||||
|
|
||||||
|
if (!this.debounceTimers.has(key)) {
|
||||||
|
const timer = setTimeout(async () => {
|
||||||
|
const handlers = this.queue.get(key) || [];
|
||||||
|
this.queue.delete(key);
|
||||||
|
this.debounceTimers.delete(key);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (!this.storageServ.db) throw new Error('Database connection not available');
|
||||||
|
const result = await this.storageServ.query('SELECT value FROM gun_nodes WHERE key = ?', [key]);
|
||||||
|
const data = result.values && result.values.length > 0 ? JSON.parse(result.values[0].value) : null;
|
||||||
|
handlers.forEach(h => h.resolve(data));
|
||||||
|
} catch (err) {
|
||||||
|
//log.error(`Failed to get key=${key}:`, err);
|
||||||
|
handlers.forEach(h => h.reject(err));
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
this.debounceTimers.set(key, timer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async put(soul: string, node: any): Promise<void> {
|
||||||
|
await this.storageServ.run(
|
||||||
|
'INSERT OR REPLACE INTO gun_nodes (key, value, timestamp) VALUES (?, ?, ?)',
|
||||||
|
[soul, JSON.stringify(node), Date.now()]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async batchPut(nodes: Record<string, any>): Promise<void> {
|
||||||
|
const updates: [string, string, number][] = [];
|
||||||
|
for (const soul in nodes) {
|
||||||
|
updates.push([soul, JSON.stringify(nodes[soul]), Date.now()]);
|
||||||
|
}
|
||||||
|
await this.storageServ.run(
|
||||||
|
'INSERT OR REPLACE INTO gun_nodes (key, value, timestamp) VALUES ' + updates.map(() => '(?, ?, ?)').join(','),
|
||||||
|
updates.flat()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义适配器接口
|
||||||
|
interface GunAdapter {
|
||||||
|
opt?: (context: any, options: any) => void;
|
||||||
|
get: (key: string, done: (err: Error | null, node: any) => void) => void;
|
||||||
|
put: (node: any, done: (err: Error | null) => void) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IGunSQLiteAdapter {
|
||||||
|
initialize(): Promise<void>;
|
||||||
|
getAdapter(): GunAdapter;
|
||||||
|
isReady: Ref<boolean>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单例实例
|
||||||
|
let instance: IGunSQLiteAdapter | null = null;
|
||||||
|
|
||||||
|
export function useGunSQLiteAdapter(
|
||||||
|
sqliteService: ISQLiteService,
|
||||||
|
dbVersionService: IDbVersionService,
|
||||||
|
storageService: StorageService
|
||||||
|
): IGunSQLiteAdapter {
|
||||||
|
if (instance) return instance;
|
||||||
|
|
||||||
|
const isReady: Ref<boolean> = ref(false);
|
||||||
|
const storageServ = storageService;
|
||||||
|
let queue: RequestQueue | null = null;
|
||||||
|
|
||||||
|
async function initialize() {
|
||||||
|
if (isReady.value) return;
|
||||||
|
try {
|
||||||
|
//log.info('Initializing Gun SQLite adapter...');
|
||||||
|
// 检查 StorageService 是否已初始化数据库
|
||||||
|
if (!storageServ.db) {
|
||||||
|
//log.warn('StorageService database not initialized, initializing now...');
|
||||||
|
const dbName = 'talkflowdb';
|
||||||
|
const loadToVersion = storageServ.loadToVersion || 2;
|
||||||
|
storageServ.db = await sqliteService.openDatabase(dbName, loadToVersion, false);
|
||||||
|
} else {
|
||||||
|
const isOpen = await storageServ.db.isDBOpen();
|
||||||
|
if (!isOpen) {
|
||||||
|
//log.warn('Database not open, reopening...');
|
||||||
|
await storageServ.db.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 gun_nodes 表
|
||||||
|
const result = await storageServ.execute(`
|
||||||
|
CREATE TABLE IF NOT EXISTS gun_nodes (
|
||||||
|
key TEXT PRIMARY KEY NOT NULL,
|
||||||
|
value TEXT NOT NULL,
|
||||||
|
timestamp INTEGER DEFAULT (strftime('%s', 'now'))
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
if (result.changes && result.changes.changes >= 0) {
|
||||||
|
//log.info('gun_nodes table created or already exists');
|
||||||
|
} else {
|
||||||
|
throw new Error('Failed to create gun_nodes table: no changes returned');
|
||||||
|
}
|
||||||
|
|
||||||
|
queue = new RequestQueue(storageServ);
|
||||||
|
isReady.value = true;
|
||||||
|
//log.info('Gun SQLite adapter initialized successfully');
|
||||||
|
} catch (err) {
|
||||||
|
//log.error('Failed to initialize Gun SQLite adapter:', err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const adapterCore = {
|
||||||
|
storageServ,
|
||||||
|
queue,
|
||||||
|
opt: async function (context: any, options: any) {
|
||||||
|
// log.info('Adapter opt called:', { context, options });
|
||||||
|
await initialize();
|
||||||
|
return options;
|
||||||
|
},
|
||||||
|
get: async function (key: string, done: (err: Error | null, node: any) => void) {
|
||||||
|
try {
|
||||||
|
if (!isReady.value) await initialize();
|
||||||
|
if (!queue) throw new Error('Adapter not initialized');
|
||||||
|
const data = await queue.get(key);
|
||||||
|
done(null, data);
|
||||||
|
} catch (err) {
|
||||||
|
//log.error(`Get error for key=${key}:`, err);
|
||||||
|
done(err instanceof Error ? err : new Error('Unknown error'), null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
put: async function (node: any, done: (err: Error | null) => void) {
|
||||||
|
try {
|
||||||
|
if (!isReady.value) await initialize();
|
||||||
|
if (!queue) throw new Error('Adapter not initialized');
|
||||||
|
if (typeof node !== 'object' || node === null) throw new Error('Invalid node');
|
||||||
|
const souls = Object.keys(node).length > 1 ? Object.keys(node) : [node._?.['#'] || node._.id];
|
||||||
|
if (!souls[0]) throw new Error('Missing soul in node');
|
||||||
|
if (souls.length > 1) {
|
||||||
|
await queue.batchPut(node);
|
||||||
|
} else {
|
||||||
|
await queue.put(souls[0], node[souls[0]] || node);
|
||||||
|
}
|
||||||
|
done(null);
|
||||||
|
} catch (err) {
|
||||||
|
//log.error('Put error:', err);
|
||||||
|
done(err instanceof Error ? err : new Error('Unknown error'));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const adapter = new NodeAdapter(adapterCore);
|
||||||
|
Flint.register(adapter);
|
||||||
|
|
||||||
|
const gunSQLiteAdapter: IGunSQLiteAdapter = {
|
||||||
|
initialize,
|
||||||
|
getAdapter: () => adapter,
|
||||||
|
isReady,
|
||||||
|
};
|
||||||
|
|
||||||
|
instance = gunSQLiteAdapter;
|
||||||
|
return gunSQLiteAdapter;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getGunSQLiteAdapter(
|
||||||
|
sqliteService: ISQLiteService,
|
||||||
|
dbVersionService: IDbVersionService,
|
||||||
|
storageService: StorageService
|
||||||
|
): IGunSQLiteAdapter {
|
||||||
|
if (!instance) {
|
||||||
|
instance = useGunSQLiteAdapter(sqliteService, dbVersionService, storageService);
|
||||||
|
}
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getGunSQLiteAdapter;
|
||||||
121
examples/relay-sqlite-example/src/composables/useNetwork.ts
Normal file
121
examples/relay-sqlite-example/src/composables/useNetwork.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Gun, { IGunInstance } from 'gun';
|
||||||
|
|
||||||
|
// 模块级别的单例状态
|
||||||
|
const isOnline = ref(navigator.onLine);
|
||||||
|
const peersConnected = ref(false);
|
||||||
|
const checkInterval = 60000; // 每 60 秒检查一次
|
||||||
|
|
||||||
|
// 单例初始化标志和变量
|
||||||
|
let initialized = false;
|
||||||
|
let intervalId: number | null = null;
|
||||||
|
let currentGunInstance: IGunInstance<any> | null = null;
|
||||||
|
let instance: ReturnType<typeof createNetwork> | null = null;
|
||||||
|
|
||||||
|
function createNetwork(gunInstance: IGunInstance<any>) {
|
||||||
|
// 检查 Gun.js 对等节点，反复尝试直到成功
|
||||||
|
async function checkPeers(): Promise<boolean> {
|
||||||
|
const maxAttempts = 3;
|
||||||
|
let attempt = 0;
|
||||||
|
const retryDelay = 1000; // 每次尝试间隔 1 秒
|
||||||
|
|
||||||
|
while (attempt < maxAttempts) {
|
||||||
|
attempt++;
|
||||||
|
const result = await new Promise<boolean>((resolve) => {
|
||||||
|
let alive = false;
|
||||||
|
const off = gunInstance.get('~public').once((data) => {
|
||||||
|
alive = true;
|
||||||
|
off.off();
|
||||||
|
resolve(true);
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!alive) {
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
|
}, 5000); // 10 秒超时
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
peersConnected.value = true;
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, retryDelay));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false; // 理论上不会到达这里，因为 maxAttempts 是 Infinity
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateNetworkStatus() {
|
||||||
|
isOnline.value = navigator.onLine;
|
||||||
|
peersConnected.value = await checkPeers();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOnline() {
|
||||||
|
updateNetworkStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOffline() {
|
||||||
|
isOnline.value = false;
|
||||||
|
peersConnected.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function startChecking() {
|
||||||
|
updateNetworkStatus();
|
||||||
|
intervalId = window.setInterval(updateNetworkStatus, checkInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopChecking() {
|
||||||
|
if (intervalId !== null) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
intervalId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单例初始化逻辑
|
||||||
|
if (!initialized || currentGunInstance !== gunInstance) {
|
||||||
|
if (initialized && currentGunInstance !== gunInstance) {
|
||||||
|
// 如果 Gun 实例变了，清理旧的事件监听器和定时器
|
||||||
|
stopChecking();
|
||||||
|
window.removeEventListener('online', handleOnline);
|
||||||
|
window.removeEventListener('offline', handleOffline);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialized = true;
|
||||||
|
currentGunInstance = gunInstance;
|
||||||
|
|
||||||
|
window.addEventListener('online', handleOnline);
|
||||||
|
window.addEventListener('offline', handleOffline);
|
||||||
|
startChecking();
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isOnline,
|
||||||
|
peersConnected,
|
||||||
|
updateNetworkStatus,
|
||||||
|
checkPeers,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出单例
|
||||||
|
export function useNetwork(gunInstance: IGunInstance<any>) {
|
||||||
|
if (!instance || currentGunInstance !== gunInstance) {
|
||||||
|
instance = createNetwork(gunInstance);
|
||||||
|
}
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理函数（可选，用于测试或应用卸载时）
|
||||||
|
export function cleanupNetwork() {
|
||||||
|
if (instance) {
|
||||||
|
window.removeEventListener('online', instance.updateNetworkStatus);
|
||||||
|
window.removeEventListener('offline', instance.updateNetworkStatus);
|
||||||
|
if (intervalId !== null) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
intervalId = null;
|
||||||
|
}
|
||||||
|
instance = null;
|
||||||
|
initialized = false;
|
||||||
|
currentGunInstance = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,558 @@
|
|||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { useToast } from '@/composables/useToast';
|
||||||
|
import { useNetwork } from '@/composables/useNetwork';
|
||||||
|
import StorageService from '@/services/storageService';
|
||||||
|
import Gun from 'gun';
|
||||||
|
import 'gun/sea';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 模块级别的单例状态
|
||||||
|
const networkStatus = ref<'online' | 'offline'>('online');
|
||||||
|
const peersStatus = ref<'connected' | 'disconnected'>('disconnected');
|
||||||
|
const currentMode = ref<'direct' | 'relay'>('direct');
|
||||||
|
const peerStatuses = ref<Record<string, 'connected' | 'disconnected'>>({});
|
||||||
|
|
||||||
|
// 单例初始化标志
|
||||||
|
let initialized = false;
|
||||||
|
let instance: ReturnType<typeof createNetworkStatus> | null = null;
|
||||||
|
|
||||||
|
function createNetworkStatus(storageService: StorageService) {
|
||||||
|
|
||||||
|
const { showToast } = useToast();
|
||||||
|
const { isOnline, peersConnected, updateNetworkStatus, checkPeers } = useNetwork(gun);
|
||||||
|
const peersNotes = ref<Record<string, string>>({});
|
||||||
|
|
||||||
|
const peersList = ref<string[]>([
|
||||||
|
'https://peer.wallie.io/gun',
|
||||||
|
'https://gun.defucc.me/gun',
|
||||||
|
'https://talkflow.team/gun',
|
||||||
|
'https://gun-manhattan.herokuapp.com/gun',
|
||||||
|
'https://gundb-relay-mlccl.ondigitalocean.app/gun',
|
||||||
|
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
const enabledPeer = ref<string>(peersList.value[0]);
|
||||||
|
|
||||||
|
let gun = Gun({
|
||||||
|
|
||||||
|
peers: [ enabledPeer.value],
|
||||||
|
radisk: true,
|
||||||
|
localStorage: false,
|
||||||
|
gunSQLiteAdapter: {
|
||||||
|
key: 'gundb',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 确保 storageService 已初始化
|
||||||
|
async function ensureStorageReady() {
|
||||||
|
try {
|
||||||
|
if (!storageService.db || !(await storageService.db.isDBOpen())) {
|
||||||
|
console.log('[useNetworkStatus] Initializing StorageService database...');
|
||||||
|
await storageService.initializeDatabase();
|
||||||
|
if (!storageService.db) {
|
||||||
|
throw new Error('StorageService 初始化后仍无数据库连接');
|
||||||
|
}
|
||||||
|
console.log('[useNetworkStatus] StorageService database initialized');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[useNetworkStatus] Failed to initialize StorageService:', err);
|
||||||
|
showToast('数据库初始化失败，请重试', 'error');
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存 enabledPeer 到 SQLite
|
||||||
|
async function saveEnabledPeer() {
|
||||||
|
try {
|
||||||
|
await ensureStorageReady();
|
||||||
|
await storageService.run('UPDATE network_peers SET is_enabled = 0');
|
||||||
|
if (enabledPeer.value) {
|
||||||
|
await storageService.run(
|
||||||
|
'INSERT OR REPLACE INTO network_peers (url, is_enabled, note) VALUES (?, ?, ?)',
|
||||||
|
[enabledPeer.value, 1, peersNotes.value[enabledPeer.value] || '']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
console.log(`Enabled peer saved: ${enabledPeer.value}`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[useNetworkStatus] Failed to save enabled peer:', err);
|
||||||
|
showToast('无法保存启用节点', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存节点备注
|
||||||
|
async function savePeerNote(peer: string, note: string) {
|
||||||
|
try {
|
||||||
|
await ensureStorageReady();
|
||||||
|
await storageService.run(
|
||||||
|
'UPDATE network_peers SET note = ? WHERE url = ?',
|
||||||
|
[note, peer]
|
||||||
|
);
|
||||||
|
peersNotes.value[peer] = note;
|
||||||
|
console.log(`Peer note saved: ${peer} -> ${note}`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[useNetworkStatus] Failed to save peer note:', err);
|
||||||
|
showToast('无法保存节点备注', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从 SQLite 加载 Peer 配置和备注
|
||||||
|
// async function loadPeers() {
|
||||||
|
// try {
|
||||||
|
// await ensureStorageReady();
|
||||||
|
// const result = await storageService.query('SELECT url, is_enabled, note FROM network_peers');
|
||||||
|
// const peers = result.values || [];
|
||||||
|
// peersList.value = peers.map((peer: { url: string }) => peer.url);
|
||||||
|
// peersNotes.value = peers.reduce((acc: Record<string, string>, peer: { url: string; note: string }) => {
|
||||||
|
// acc[peer.url] = peer.note || '';
|
||||||
|
// return acc;
|
||||||
|
// }, {});
|
||||||
|
// const enabled = peers.find((peer: { is_enabled: number }) => peer.is_enabled === 1);
|
||||||
|
// if (enabled && peersList.value.includes(enabled.url)) {
|
||||||
|
// enabledPeer.value = enabled.url;
|
||||||
|
// } else if (peersList.value.length > 0) {
|
||||||
|
// enabledPeer.value = peersList.value[0];
|
||||||
|
// await saveEnabledPeer();
|
||||||
|
// }
|
||||||
|
// gun.opt({ peers: peersList.value });
|
||||||
|
// } catch (err) {
|
||||||
|
// console.error('[useNetworkStatus] Failed to load peers:', err);
|
||||||
|
// showToast('无法加载节点列表', 'error');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
async function loadPeers() {
|
||||||
|
try {
|
||||||
|
await ensureStorageReady();
|
||||||
|
const result = await storageService.query('SELECT url, is_enabled, note FROM network_peers');
|
||||||
|
const peers = result.values || [];
|
||||||
|
|
||||||
|
if (peers.length === 0) {
|
||||||
|
// 如果 SQLite 表为空，插入 TalkFlowCore 的预设节点
|
||||||
|
console.log('[useNetworkStatus] network_peers 表为空，插入预设节点');
|
||||||
|
const { peersList: defaultPeersList } = getTalkFlowCore(); // 获取预设节点
|
||||||
|
for (const peerUrl of defaultPeersList.value) {
|
||||||
|
await storageService.run(
|
||||||
|
'INSERT OR IGNORE INTO network_peers (url, is_enabled, note) VALUES (?, ?, ?)',
|
||||||
|
[peerUrl, 0, '']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// 重新查询以确保数据已插入
|
||||||
|
const newResult = await storageService.query('SELECT url, is_enabled, note FROM network_peers');
|
||||||
|
peersList.value = newResult.values.map((peer: { url: string }) => peer.url);
|
||||||
|
} else {
|
||||||
|
// 使用 SQLite 中的节点
|
||||||
|
peersList.value = peers.map((peer: { url: string }) => peer.url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载备注
|
||||||
|
peersNotes.value = peers.reduce((acc: Record<string, string>, peer: { url: string; note: string }) => {
|
||||||
|
acc[peer.url] = peer.note || '';
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
// 设置 enabledPeer
|
||||||
|
const enabled = peers.find((peer: { is_enabled: number }) => peer.is_enabled === 1);
|
||||||
|
if (enabled && peersList.value.includes(enabled.url)) {
|
||||||
|
enabledPeer.value = enabled.url;
|
||||||
|
} else if (peersList.value.length > 0) {
|
||||||
|
enabledPeer.value = peersList.value[0];
|
||||||
|
await saveEnabledPeer();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新 Gun 配置
|
||||||
|
gun.opt({ peers: peersList.value });
|
||||||
|
console.log('[useNetworkStatus] Gun 配置节点:', peersList.value);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[useNetworkStatus] 加载节点失败:', err);
|
||||||
|
showToast('无法加载节点列表', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新网络和 Peer 状态
|
||||||
|
async function updateStatus() {
|
||||||
|
networkStatus.value = isOnline.value ? 'online' : 'offline';
|
||||||
|
peersStatus.value = peersConnected.value ? 'connected' : 'disconnected';
|
||||||
|
currentMode.value = peersConnected.value && enabledPeer.value ? 'relay' : 'direct';
|
||||||
|
await updatePeerStatuses();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查单个 Peer 的状态（用于 UI 展示）
|
||||||
|
async function checkPeerStatus(peer: string): Promise<'connected' | 'disconnected'> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const tempGun = Gun({ peers: [peer] });
|
||||||
|
let connected = false;
|
||||||
|
tempGun.on('hi', () => {
|
||||||
|
connected = true;
|
||||||
|
resolve('connected');
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!connected) resolve('disconnected');
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新所有 Peer 的状态（用于 UI 展示）
|
||||||
|
async function updatePeerStatuses() {
|
||||||
|
for (const peer of peersList.value) {
|
||||||
|
const status = await checkPeerStatus(peer);
|
||||||
|
peerStatuses.value[peer] = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户手动启用某个 Peer
|
||||||
|
async function enablePeer(peer: string) {
|
||||||
|
if (!peersList.value.includes(peer)) {
|
||||||
|
showToast(`节点 ${peer} 不在列表中`, 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (enabledPeer.value === peer) {
|
||||||
|
showToast(`${peer} 已是启用状态`, 'info');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
enabledPeer.value = peer;
|
||||||
|
await saveEnabledPeer();
|
||||||
|
gun.opt({ peers: peersList.value, priorityPeer: peer });
|
||||||
|
showToast(`启用节点: ${peer}`, 'success');
|
||||||
|
|
||||||
|
const connected = await checkPeers();
|
||||||
|
if (!connected) {
|
||||||
|
showToast(`无法连接到 ${peer}，将回退到其他节点`, 'warning');
|
||||||
|
}
|
||||||
|
await updateStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户禁用当前启用的 Peer
|
||||||
|
async function disablePeer() {
|
||||||
|
if (!enabledPeer.value) {
|
||||||
|
showToast('无启用的节点', 'info');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const oldPeer = enabledPeer.value;
|
||||||
|
enabledPeer.value = peersList.value.length > 1 ? peersList.value.find(p => p !== oldPeer) || '' : '';
|
||||||
|
await saveEnabledPeer();
|
||||||
|
gun.opt({ peers: peersList.value });
|
||||||
|
showToast(`禁用节点: ${oldPeer}`, 'success');
|
||||||
|
await updateStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加 Peer（允许任意输入）
|
||||||
|
async function addPeer(url: string) {
|
||||||
|
if (!url) {
|
||||||
|
showToast('请输入节点地址', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const trimmedUrl = url.trim();
|
||||||
|
if (peersList.value.includes(trimmedUrl)) {
|
||||||
|
showToast('该节点已存在', 'warning');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await ensureStorageReady();
|
||||||
|
console.log('[useNetworkStatus] 添加节点:', trimmedUrl);
|
||||||
|
await storageService.run(
|
||||||
|
'INSERT INTO network_peers (url, is_enabled, note) VALUES (?, ?, ?)',
|
||||||
|
[trimmedUrl, 0, '']
|
||||||
|
);
|
||||||
|
|
||||||
|
// 重新查询 network_peers 表，确保数据一致
|
||||||
|
const result = await storageService.query('SELECT url FROM network_peers');
|
||||||
|
peersList.value = result.values.map((peer: { url: string }) => peer.url);
|
||||||
|
console.log('[useNetworkStatus] 更新 peersList:', peersList.value);
|
||||||
|
|
||||||
|
gun.opt({ peers: peersList.value });
|
||||||
|
showToast(`节点已添加: ${trimmedUrl}`, 'success');
|
||||||
|
await updatePeerStatuses();
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('[useNetworkStatus] Failed to add peer:', err);
|
||||||
|
showToast(`添加节点失败: ${err.message || '未知错误'}`, 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除 Peer
|
||||||
|
async function removePeer(peer: string) {
|
||||||
|
try {
|
||||||
|
await ensureStorageReady();
|
||||||
|
if (enabledPeer.value === peer) {
|
||||||
|
await disablePeer();
|
||||||
|
}
|
||||||
|
await storageService.run('DELETE FROM network_peers WHERE url = ?', [peer]);
|
||||||
|
peersList.value = peersList.value.filter(p => p !== peer);
|
||||||
|
delete peerStatuses.value[peer];
|
||||||
|
gun.opt({ peers: peersList.value });
|
||||||
|
showToast(`删除节点 ${peer}`, 'success');
|
||||||
|
await updatePeerStatuses();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[useNetworkStatus] Failed to remove peer:', err);
|
||||||
|
showToast('删除节点失败', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理网络状态变化
|
||||||
|
function handleOnline() {
|
||||||
|
updateNetworkStatus();
|
||||||
|
updateStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOffline() {
|
||||||
|
updateNetworkStatus();
|
||||||
|
updateStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化逻辑，只执行一次
|
||||||
|
if (!initialized) {
|
||||||
|
initialized = true;
|
||||||
|
loadPeers();
|
||||||
|
updateStatus();
|
||||||
|
|
||||||
|
// 添加网络事件监听
|
||||||
|
window.addEventListener('online', handleOnline);
|
||||||
|
window.addEventListener('offline', handleOffline);
|
||||||
|
|
||||||
|
// 监听 peersList 和 enabledPeer 的变化
|
||||||
|
watch(peersList, () => {
|
||||||
|
updatePeerStatuses();
|
||||||
|
});
|
||||||
|
watch(enabledPeer, () => {
|
||||||
|
saveEnabledPeer();
|
||||||
|
updateStatus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
networkStatus,
|
||||||
|
peersStatus,
|
||||||
|
currentMode,
|
||||||
|
peerStatuses,
|
||||||
|
peersList,
|
||||||
|
enabledPeer,
|
||||||
|
addPeer,
|
||||||
|
removePeer,
|
||||||
|
enablePeer,
|
||||||
|
disablePeer,
|
||||||
|
updateStatus,
|
||||||
|
peersNotes,
|
||||||
|
savePeerNote,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出单例
|
||||||
|
export function useNetworkStatus(storageService: StorageService) {
|
||||||
|
if (!instance) {
|
||||||
|
instance = createNetworkStatus(storageService);
|
||||||
|
}
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// import { ref, watch } from 'vue';
|
||||||
|
// import { useToast } from '@/composables/useToast';
|
||||||
|
// import { useNetwork } from '@/composables/useNetwork';
|
||||||
|
|
||||||
|
// // 模块级别的单例状态
|
||||||
|
// const networkStatus = ref<'online' | 'offline'>('online');
|
||||||
|
// const peersStatus = ref<'connected' | 'disconnected'>('disconnected');
|
||||||
|
// const currentMode = ref<'direct' | 'relay'>('direct');
|
||||||
|
// const peerStatuses = ref<Record<string, 'connected' | 'disconnected'>>({});
|
||||||
|
|
||||||
|
// // 单例初始化标志
|
||||||
|
// let initialized = false;
|
||||||
|
// let instance: ReturnType<typeof createNetworkStatus> | null = null;
|
||||||
|
|
||||||
|
// // 持久化 enabledPeer 的本地存储键
|
||||||
|
// const ENABLED_PEER_KEY = 'enabledPeer';
|
||||||
|
|
||||||
|
// function createNetworkStatus() {
|
||||||
|
// const { gun, peersList, enabledPeer } = getTalkFlowCore();
|
||||||
|
// const { showToast } = useToast();
|
||||||
|
// const { isOnline, peersConnected, updateNetworkStatus, checkPeers } = useNetwork(gun);
|
||||||
|
|
||||||
|
// // 保存 enabledPeer 到 localStorage
|
||||||
|
// function saveEnabledPeer() {
|
||||||
|
// localStorage.setItem(ENABLED_PEER_KEY, enabledPeer.value);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 从 localStorage 加载 Peer 配置
|
||||||
|
// function loadPeers() {
|
||||||
|
// const savedPeers = localStorage.getItem('peers');
|
||||||
|
// if (savedPeers) {
|
||||||
|
// peersList.value = JSON.parse(savedPeers);
|
||||||
|
// }
|
||||||
|
// const savedPeer = localStorage.getItem(ENABLED_PEER_KEY);
|
||||||
|
// if (savedPeer && peersList.value.includes(savedPeer)) {
|
||||||
|
// enabledPeer.value = savedPeer;
|
||||||
|
// } else if (peersList.value.length > 0) {
|
||||||
|
// enabledPeer.value = peersList.value[0];
|
||||||
|
// saveEnabledPeer();
|
||||||
|
// }
|
||||||
|
// // 初始化时使用完整的 peersList
|
||||||
|
// gun.opt({ peers: peersList.value });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 更新网络和 Peer 状态
|
||||||
|
// async function updateStatus() {
|
||||||
|
// networkStatus.value = isOnline.value ? 'online' : 'offline';
|
||||||
|
// peersStatus.value = peersConnected.value ? 'connected' : 'disconnected';
|
||||||
|
// currentMode.value = peersConnected.value && enabledPeer.value ? 'relay' : 'direct';
|
||||||
|
// await updatePeerStatuses();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 检查单个 Peer 的状态（用于 UI 展示）
|
||||||
|
// async function checkPeerStatus(peer: string): Promise<'connected' | 'disconnected'> {
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// const tempGun = Gun({ peers: [peer] });
|
||||||
|
// let connected = false;
|
||||||
|
// tempGun.on('hi', () => {
|
||||||
|
// connected = true;
|
||||||
|
// resolve('connected');
|
||||||
|
// });
|
||||||
|
// setTimeout(() => {
|
||||||
|
// if (!connected) resolve('disconnected');
|
||||||
|
// }, 5000);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 更新所有 Peer 的状态（用于 UI 展示）
|
||||||
|
// async function updatePeerStatuses() {
|
||||||
|
// for (const peer of peersList.value) {
|
||||||
|
// const status = await checkPeerStatus(peer);
|
||||||
|
// peerStatuses.value[peer] = status;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 用户手动启用某个 Peer
|
||||||
|
// async function enablePeer(peer: string) {
|
||||||
|
// if (!peersList.value.includes(peer)) {
|
||||||
|
// showToast(`Peer ${peer} not in list`, 'warning');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (enabledPeer.value === peer) {
|
||||||
|
// showToast(`${peer} is already enabled`, 'info');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// enabledPeer.value = peer;
|
||||||
|
// saveEnabledPeer();
|
||||||
|
// gun.opt({ peers: peersList.value, priorityPeer: peer }); // 自定义选项，优先尝试该 Peer
|
||||||
|
// showToast(`Enabled peer: ${peer}`, 'success');
|
||||||
|
|
||||||
|
// // 检查连接状态
|
||||||
|
// const connected = await checkPeers();
|
||||||
|
// if (!connected) {
|
||||||
|
// showToast(`Failed to connect to ${peer}, falling back to other peers`, 'warning');
|
||||||
|
// }
|
||||||
|
// await updateStatus();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 用户禁用当前启用的 Peer
|
||||||
|
// function disablePeer() {
|
||||||
|
// if (!enabledPeer.value) {
|
||||||
|
// showToast('No peer enabled', 'info');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// const oldPeer = enabledPeer.value;
|
||||||
|
// enabledPeer.value = peersList.value.length > 1 ? peersList.value.find(p => p !== oldPeer) || '' : '';
|
||||||
|
// saveEnabledPeer();
|
||||||
|
// gun.opt({ peers: peersList.value }); // 重置为完整列表
|
||||||
|
// showToast(`Disabled peer: ${oldPeer}`, 'success');
|
||||||
|
// updateStatus();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 添加 Peer
|
||||||
|
// function addPeer(url: string) {
|
||||||
|
// if (!url) {
|
||||||
|
// showToast('Please enter the node URL', 'warning');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (peersList.value.includes(url)) {
|
||||||
|
// showToast('This node already exists.', 'warning');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// peersList.value.push(url);
|
||||||
|
// localStorage.setItem('peers', JSON.stringify(peersList.value));
|
||||||
|
// gun.opt({ peers: peersList.value });
|
||||||
|
// showToast(`Node added: ${url}`, 'success');
|
||||||
|
// updatePeerStatuses();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 移除 Peer
|
||||||
|
// function removePeer(peer: string) {
|
||||||
|
// if (enabledPeer.value === peer) {
|
||||||
|
// disablePeer();
|
||||||
|
// }
|
||||||
|
// peersList.value = peersList.value.filter(p => p !== peer);
|
||||||
|
// delete peerStatuses.value[peer];
|
||||||
|
// localStorage.setItem('peers', JSON.stringify(peersList.value));
|
||||||
|
// gun.opt({ peers: peersList.value });
|
||||||
|
// showToast(`Deleted node ${peer}`, 'success');
|
||||||
|
// updatePeerStatuses();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 处理网络状态变化
|
||||||
|
// function handleOnline() {
|
||||||
|
// updateNetworkStatus();
|
||||||
|
// updateStatus();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function handleOffline() {
|
||||||
|
// updateNetworkStatus();
|
||||||
|
// updateStatus();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 初始化逻辑，只执行一次
|
||||||
|
// if (!initialized) {
|
||||||
|
// initialized = true;
|
||||||
|
// loadPeers();
|
||||||
|
// updateStatus();
|
||||||
|
|
||||||
|
// // 添加网络事件监听
|
||||||
|
// window.addEventListener('online', handleOnline);
|
||||||
|
// window.addEventListener('offline', handleOffline);
|
||||||
|
|
||||||
|
// // 监听 peersList 和 enabledPeer 的变化
|
||||||
|
// watch(peersList, () => {
|
||||||
|
// // gun.opt({ peers: peersList.value });
|
||||||
|
// updatePeerStatuses();
|
||||||
|
// });
|
||||||
|
// watch(enabledPeer, () => {
|
||||||
|
// saveEnabledPeer();
|
||||||
|
// updateStatus();
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// networkStatus,
|
||||||
|
// peersStatus,
|
||||||
|
// currentMode,
|
||||||
|
// peerStatuses,
|
||||||
|
// peersList,
|
||||||
|
// enabledPeer,
|
||||||
|
// addPeer,
|
||||||
|
// removePeer,
|
||||||
|
// enablePeer,
|
||||||
|
// disablePeer,
|
||||||
|
// updateStatus,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 导出单例
|
||||||
|
// export function useNetworkStatus() {
|
||||||
|
// if (!instance) {
|
||||||
|
// instance = createNetworkStatus();
|
||||||
|
// }
|
||||||
|
// return instance;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 清理函数（用于测试或应用卸载时）
|
||||||
|
// export function cleanupNetworkStatus() {
|
||||||
|
// if (instance) {
|
||||||
|
// window.removeEventListener('online', instance.updateStatus);
|
||||||
|
// window.removeEventListener('offline', instance.updateStatus);
|
||||||
|
// instance = null;
|
||||||
|
// initialized = false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
88
examples/relay-sqlite-example/src/composables/useToast.ts
Normal file
88
examples/relay-sqlite-example/src/composables/useToast.ts
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
// src/composables/useToast.ts
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { Directory, Encoding, Filesystem } from '@capacitor/filesystem';
|
||||||
|
|
||||||
|
type ToastType = 'info' | 'success' | 'error' | 'warning';
|
||||||
|
|
||||||
|
interface ToastMessage {
|
||||||
|
id: number;
|
||||||
|
text: string;
|
||||||
|
type: ToastType;
|
||||||
|
duration: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = ref<ToastMessage[]>([]);
|
||||||
|
let idCounter = 0;
|
||||||
|
const isEnabled = ref(false); // 默认开启提示
|
||||||
|
const SETTINGS_FILE = 'toast_settings.json';
|
||||||
|
|
||||||
|
async function loadSettings(): Promise<{ isToastEnabled: boolean }> {
|
||||||
|
const defaultSettings = { isToastEnabled: false };
|
||||||
|
try {
|
||||||
|
const result = await Filesystem.readFile({
|
||||||
|
path: SETTINGS_FILE,
|
||||||
|
directory: Directory.Data,
|
||||||
|
encoding: Encoding.UTF8,
|
||||||
|
});
|
||||||
|
const data = typeof result.data === 'string' ? result.data : await result.data.text();
|
||||||
|
return JSON.parse(data) || defaultSettings;
|
||||||
|
} catch (err) {
|
||||||
|
console.log('未找到提示设置文件，使用默认值');
|
||||||
|
return defaultSettings;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveSettings(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await Filesystem.writeFile({
|
||||||
|
path: SETTINGS_FILE,
|
||||||
|
data: JSON.stringify({ isToastEnabled: isEnabled.value }),
|
||||||
|
directory: Directory.Data,
|
||||||
|
encoding: Encoding.UTF8,
|
||||||
|
});
|
||||||
|
console.log('提示设置已保存:', { isToastEnabled: isEnabled.value });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存提示设置失败:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showToast(msg: string, msgType: ToastType = 'info', customDuration = 3000) {
|
||||||
|
if (!isEnabled.value) return; // 如果关闭则不显示
|
||||||
|
|
||||||
|
const toast = {
|
||||||
|
id: idCounter++,
|
||||||
|
text: msg,
|
||||||
|
type: msgType,
|
||||||
|
duration: customDuration,
|
||||||
|
};
|
||||||
|
messages.value.push(toast);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
messages.value = messages.value.filter(m => m.id !== toast.id);
|
||||||
|
}, customDuration);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideToast(id: number) {
|
||||||
|
messages.value = messages.value.filter(m => m.id !== id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleToast(enabled: boolean) {
|
||||||
|
isEnabled.value = enabled;
|
||||||
|
saveSettings(); // 保存设置
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化加载设置
|
||||||
|
onMounted(async () => {
|
||||||
|
const settings = await loadSettings();
|
||||||
|
isEnabled.value = settings.isToastEnabled;
|
||||||
|
});
|
||||||
|
|
||||||
|
export function useToast() {
|
||||||
|
return {
|
||||||
|
messages,
|
||||||
|
isEnabled,
|
||||||
|
showToast,
|
||||||
|
hideToast,
|
||||||
|
toggleToast,
|
||||||
|
};
|
||||||
|
}
|
||||||
97
examples/relay-sqlite-example/src/main.ts
Normal file
97
examples/relay-sqlite-example/src/main.ts
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './src/App.vue'
|
||||||
|
import router from './router';
|
||||||
|
|
||||||
|
import { IonicVue } from '@ionic/vue';
|
||||||
|
|
||||||
|
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Core CSS required for Ionic components to work properly */
|
||||||
|
import '@ionic/vue/css/core.css';
|
||||||
|
|
||||||
|
/* Basic CSS for apps built with Ionic */
|
||||||
|
import '@ionic/vue/css/normalize.css';
|
||||||
|
import '@ionic/vue/css/structure.css';
|
||||||
|
import '@ionic/vue/css/typography.css';
|
||||||
|
import '@ionic/vue/css/ionic.bundle.css'
|
||||||
|
/* Optional CSS utils that can be commented out */
|
||||||
|
import '@ionic/vue/css/padding.css';
|
||||||
|
import '@ionic/vue/css/float-elements.css';
|
||||||
|
import '@ionic/vue/css/text-alignment.css';
|
||||||
|
import '@ionic/vue/css/text-transformation.css';
|
||||||
|
import '@ionic/vue/css/flex-utils.css';
|
||||||
|
import '@ionic/vue/css/display.css';
|
||||||
|
|
||||||
|
/* Theme variables */
|
||||||
|
import './theme/variables.css';
|
||||||
|
|
||||||
|
import { Capacitor } from '@capacitor/core';
|
||||||
|
import { JeepSqlite } from 'jeep-sqlite/dist/components/jeep-sqlite';
|
||||||
|
import { defineCustomElements as pwaElements} from '@ionic/pwa-elements/loader';
|
||||||
|
import SqliteService from './services/sqliteService';
|
||||||
|
import DbVersionService from './services/dbVersionService';
|
||||||
|
import StorageService from './services/storageService';
|
||||||
|
import InitializeAppService from './services/initializeAppService';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
pwaElements(window);
|
||||||
|
customElements.define('jeep-sqlite', JeepSqlite);
|
||||||
|
const platform = Capacitor.getPlatform();
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
.use(IonicVue)
|
||||||
|
.use(useRouter)
|
||||||
|
|
||||||
|
.use(router);
|
||||||
|
|
||||||
|
|
||||||
|
// Set the platform as global properties on the app
|
||||||
|
app.config.globalProperties.$platform = platform;
|
||||||
|
|
||||||
|
// Define and instantiate the required services
|
||||||
|
const sqliteServ = new SqliteService();
|
||||||
|
const dbVersionServ = new DbVersionService();
|
||||||
|
const storageServ = new StorageService(sqliteServ, dbVersionServ);
|
||||||
|
// Set the services as global properties on the app
|
||||||
|
app.config.globalProperties.$sqliteServ = sqliteServ;
|
||||||
|
app.config.globalProperties.$dbVersionServ = dbVersionServ;
|
||||||
|
app.config.globalProperties.$storageServ = storageServ;
|
||||||
|
|
||||||
|
//Define and instantiate the InitializeAppService
|
||||||
|
const initAppServ = new InitializeAppService(sqliteServ, storageServ);
|
||||||
|
|
||||||
|
const mountApp = () => {
|
||||||
|
initAppServ.initializeApp()
|
||||||
|
.then(() => {
|
||||||
|
router.isReady().then(() => {
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('App Initialization error:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (platform !== "web") {
|
||||||
|
mountApp();
|
||||||
|
} else {
|
||||||
|
window.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
const jeepEl = document.createElement("jeep-sqlite");
|
||||||
|
document.body.appendChild(jeepEl);
|
||||||
|
customElements.whenDefined('jeep-sqlite').then(() => {
|
||||||
|
mountApp();
|
||||||
|
})
|
||||||
|
.catch ((err) => {
|
||||||
|
console.error('jeep-sqlite creation error:', err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
313
examples/relay-sqlite-example/src/pages/index.vue
Normal file
313
examples/relay-sqlite-example/src/pages/index.vue
Normal file
@ -0,0 +1,313 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
IonPage, IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonContent, IonIcon,
|
||||||
|
IonModal, IonToggle
|
||||||
|
} from '@ionic/vue';
|
||||||
|
import { addCircleSharp, closeCircleSharp, helpCircleOutline, closeOutline } from 'ionicons/icons';
|
||||||
|
import RelayMode from '@/components/RelayMode.vue';
|
||||||
|
|
||||||
|
|
||||||
|
const showHelpModal = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ion-page>
|
||||||
|
<ion-header :translucent="true" collapse="fade">
|
||||||
|
<ion-toolbar class="liquid-toolbar">
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-back-button text="Discover" color="dark"></ion-back-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Network Status</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button color="dark" @click="showHelpModal = true">
|
||||||
|
<ion-icon :icon="helpCircleOutline"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content :fullscreen="true" :scroll-y="false">
|
||||||
|
|
||||||
|
<RelayMode/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.addlink {
|
||||||
|
width: 39px;
|
||||||
|
height: 39px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ionic Toolbar */
|
||||||
|
.liquid-toolbar {
|
||||||
|
--border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ionic Content */
|
||||||
|
.liquid-content {
|
||||||
|
--background: transparent;
|
||||||
|
--padding-start: 0;
|
||||||
|
--padding-end: 0;
|
||||||
|
--padding-top: 0;
|
||||||
|
--padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Original Container Styles */
|
||||||
|
.liquid-container {
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background: rgba(130, 130, 130, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 10px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.online,
|
||||||
|
.indicator.connected,
|
||||||
|
.indicator.relay {
|
||||||
|
background: linear-gradient(45deg, #99ff99, #66ffcc);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.offline,
|
||||||
|
.indicator.disconnected,
|
||||||
|
.indicator.direct {
|
||||||
|
background: linear-gradient(45deg, #ff6666, #ff9999);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: rgba(134, 134, 134, 0.25);
|
||||||
|
font-size: 14px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-peer input:hover,
|
||||||
|
.add-peer input:focus {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-list {
|
||||||
|
margin-top: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-list h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container {
|
||||||
|
border-radius: 10px;
|
||||||
|
max-height: 390px;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-track {
|
||||||
|
background: rgba(125, 125, 125, 0.451);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(45deg, #66ccff, #99eeff);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-scroll-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(45deg, #00b7ff, #66ddff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-item {
|
||||||
|
padding: 15px;
|
||||||
|
background: linear-gradient(135deg, rgba(127, 127, 127, 0.15), rgba(255, 255, 255, 0.05));
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
animation: pulse 2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.connected {
|
||||||
|
background: linear-gradient(45deg, #99ff99, #66ffcc);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.disconnected {
|
||||||
|
background: linear-gradient(45deg, #ff6666, #ff9999);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.checking {
|
||||||
|
background: linear-gradient(45deg, #ffcc66, #ffdd99);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-content {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-url {
|
||||||
|
display: block;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: rgba(124, 124, 124, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toggle {
|
||||||
|
--background: rgba(128, 128, 128, 0.2);
|
||||||
|
--background-checked: #66ccff;
|
||||||
|
--handle-background: #fff;
|
||||||
|
--handle-background-checked: #fff;
|
||||||
|
width: 50px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-icon {
|
||||||
|
color: #ff6666;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-icon:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
color: #ff9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.help-modal {
|
||||||
|
--border-radius: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-modal ion-toolbar {
|
||||||
|
--border-width: 0;
|
||||||
|
--background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content {
|
||||||
|
padding: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin: 15px 0 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content ion-list {
|
||||||
|
background: transparent;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content ion-item {
|
||||||
|
--background: transparent;
|
||||||
|
--padding-start: 0;
|
||||||
|
--inner-padding-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content ion-label {
|
||||||
|
color: #666 !important;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button[color="dark"] {
|
||||||
|
--background: #333;
|
||||||
|
--border-radius: 12px;
|
||||||
|
height: 44px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-button[color="dark"]:hover {
|
||||||
|
--background: #444;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
46
examples/relay-sqlite-example/src/router/index.ts
Normal file
46
examples/relay-sqlite-example/src/router/index.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { createRouter, createWebHistory } from '@ionic/vue-router'
|
||||||
|
import { createAnimation } from '@ionic/vue'
|
||||||
|
import routes from 'virtual:generated-pages'
|
||||||
|
// import { useChatFlow } from '@/composables/TalkFlowCore'
|
||||||
|
|
||||||
|
// const { isLoggedIn } = useChatFlow()
|
||||||
|
|
||||||
|
const customRoutes = [
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('@/pages/index.vue'),
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
...routes,
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: customRoutes,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 导航守卫
|
||||||
|
// router.beforeEach((to, from, next) => {
|
||||||
|
// // 如果用户没有登录，且访问的不是 'i18n.vue' 页面，则重定向到 'i18n.vue'
|
||||||
|
// if (!isLoggedIn.value && to.path !== '/') {
|
||||||
|
// next('/'); // 重定向到 i18n 页面
|
||||||
|
// } else {
|
||||||
|
// next(); // 允许访问目标路由
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// router.beforeEach(async (to, from, next) => {
|
||||||
|
// const { isLoggedIn } = await import('@/composables/TalkFlowCore');
|
||||||
|
// if (!isLoggedIn.value && to.path !== '/') {
|
||||||
|
// next('/');
|
||||||
|
// } else {
|
||||||
|
// next();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
export interface IDbVersionService {
|
||||||
|
setDbVersion(dbName: string, version: number): void
|
||||||
|
getDbVersion(dbName: string):number| undefined
|
||||||
|
};
|
||||||
|
class DbVersionService implements IDbVersionService {
|
||||||
|
dbNameVersionDict: Map<string, number> = new Map();
|
||||||
|
|
||||||
|
setDbVersion(dbName: string, version: number) {
|
||||||
|
this.dbNameVersionDict.set(dbName, version);
|
||||||
|
console.log(`设置数据库 ${dbName} 版本为: ${version}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
getDbVersion(dbName: string): number | undefined {
|
||||||
|
const version = this.dbNameVersionDict.get(dbName);
|
||||||
|
console.log(`获取数据库 ${dbName} 版本: ${version}`);
|
||||||
|
return version;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default DbVersionService;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import SQLiteService from './sqliteService';
|
||||||
|
import DbVersionService from './dbVersionService';
|
||||||
|
import StorageService from './storageService';
|
||||||
|
|
||||||
|
const sqliteServ = new SQLiteService();
|
||||||
|
const dbVerServ = new DbVersionService();
|
||||||
|
const storageServ = new StorageService(sqliteServ, dbVerServ);
|
||||||
|
|
||||||
|
export { sqliteServ, dbVerServ, storageServ };
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import {ISQLiteService } from '../services/sqliteService';
|
||||||
|
import {IStorageService } from '../services/storageService';
|
||||||
|
|
||||||
|
export interface IInitializeAppService {
|
||||||
|
initializeApp(): Promise<boolean>
|
||||||
|
};
|
||||||
|
|
||||||
|
class InitializeAppService implements IInitializeAppService {
|
||||||
|
appInit = false;
|
||||||
|
sqliteServ!: ISQLiteService;
|
||||||
|
storageServ!: IStorageService;
|
||||||
|
platform!: string;
|
||||||
|
static platform: string;
|
||||||
|
|
||||||
|
constructor(sqliteService: ISQLiteService, storageService: IStorageService) {
|
||||||
|
this.sqliteServ = sqliteService;
|
||||||
|
this.storageServ = storageService;
|
||||||
|
this.platform = this.sqliteServ.getPlatform();
|
||||||
|
}
|
||||||
|
async initializeApp(): Promise<boolean> {
|
||||||
|
if (!this.appInit) {
|
||||||
|
try {
|
||||||
|
console.log('开始应用初始化');
|
||||||
|
if (this.platform === 'web') {
|
||||||
|
await this.sqliteServ.initWebStore();
|
||||||
|
console.log('Web 存储初始化完成');
|
||||||
|
}
|
||||||
|
await this.storageServ.initializeDatabase();
|
||||||
|
console.log('数据库初始化完成');
|
||||||
|
// if (this.platform === 'web') {
|
||||||
|
// await this.sqliteServ.saveToStore(this.storageServ.getDatabaseName());
|
||||||
|
// console.log('数据库保存到 Web 存储完成');
|
||||||
|
// }
|
||||||
|
this.appInit = true;
|
||||||
|
console.log('应用初始化成功');
|
||||||
|
} catch (error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
console.error(`initializeAppError.initializeApp: ${msg}`, error);
|
||||||
|
throw new Error(`initializeAppError.initializeApp: ${msg}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.appInit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default InitializeAppService;
|
||||||
114
examples/relay-sqlite-example/src/services/sqliteService.ts
Normal file
114
examples/relay-sqlite-example/src/services/sqliteService.ts
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import { CapacitorSQLite, SQLiteConnection, SQLiteDBConnection, capSQLiteUpgradeOptions } from '@capacitor-community/sqlite';
|
||||||
|
import { Capacitor } from '@capacitor/core';
|
||||||
|
|
||||||
|
export interface ISQLiteService {
|
||||||
|
getPlatform(): string
|
||||||
|
initWebStore(): Promise<void>
|
||||||
|
addUpgradeStatement(options: capSQLiteUpgradeOptions): Promise<void>
|
||||||
|
openDatabase(dbName: string, loadToVersion: number, readOnly: boolean): Promise<SQLiteDBConnection>
|
||||||
|
closeDatabase(dbName: string, readOnly: boolean): Promise<void>
|
||||||
|
saveToStore(dbName: string): Promise<void>
|
||||||
|
saveToLocalDisk(dbName: string): Promise<void>
|
||||||
|
isConnection(dbName: string, readOnly: boolean): Promise<boolean>
|
||||||
|
};
|
||||||
|
|
||||||
|
class SQLiteService implements ISQLiteService {
|
||||||
|
platform = Capacitor.getPlatform();
|
||||||
|
sqlitePlugin = CapacitorSQLite;
|
||||||
|
sqliteConnection = new SQLiteConnection(CapacitorSQLite);
|
||||||
|
dbNameVersionDict: Map<string, number> = new Map();
|
||||||
|
|
||||||
|
getPlatform(): string {
|
||||||
|
return this.platform;
|
||||||
|
}
|
||||||
|
async initWebStore() : Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.sqliteConnection.initWebStore();
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.initWebStore: ${msg}`);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
async addUpgradeStatement(options: capSQLiteUpgradeOptions): Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.sqlitePlugin.addUpgradeStatement(options);
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.addUpgradeStatement: ${msg}`);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
async openDatabase(dbName:string, loadToVersion: number,
|
||||||
|
readOnly: boolean): Promise<SQLiteDBConnection> {
|
||||||
|
this.dbNameVersionDict.set(dbName, loadToVersion);
|
||||||
|
let encrypted = false;
|
||||||
|
const mode = encrypted ? "secret" : "no-encryption";
|
||||||
|
try {
|
||||||
|
let db: SQLiteDBConnection;
|
||||||
|
const retCC = (await this.sqliteConnection.checkConnectionsConsistency()).result;
|
||||||
|
let isConn = (await this.sqliteConnection.isConnection(dbName, readOnly)).result;
|
||||||
|
if(retCC && isConn) {
|
||||||
|
db = await this.sqliteConnection.retrieveConnection(dbName, readOnly);
|
||||||
|
} else {
|
||||||
|
db = await this.sqliteConnection
|
||||||
|
.createConnection(dbName, encrypted, mode, loadToVersion, readOnly);
|
||||||
|
}
|
||||||
|
const jeepSQlEL = document.querySelector("jeep-sqlite")
|
||||||
|
|
||||||
|
await db.open();
|
||||||
|
const res = await db.isDBOpen();
|
||||||
|
return db;
|
||||||
|
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.openDatabase: ${msg}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
async isConnection(dbName:string, readOnly: boolean): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const isConn = (await this.sqliteConnection.isConnection(dbName, readOnly)).result;
|
||||||
|
if (isConn != undefined) {
|
||||||
|
return isConn
|
||||||
|
} else {
|
||||||
|
throw new Error(`sqliteService.isConnection undefined`);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.isConnection: ${msg}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async closeDatabase(dbName:string, readOnly: boolean):Promise<void> {
|
||||||
|
try {
|
||||||
|
const isConn = (await this.sqliteConnection.isConnection(dbName, readOnly)).result;
|
||||||
|
if(isConn) {
|
||||||
|
await this.sqliteConnection.closeConnection(dbName, readOnly);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.closeDatabase: ${msg}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async saveToStore(dbName: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.sqliteConnection.saveToStore(dbName);
|
||||||
|
return;
|
||||||
|
} catch(error: any) {
|
||||||
|
const msg = error.message ? error.message : error;
|
||||||
|
throw new Error(`sqliteService.saveToStore: ${msg}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async saveToLocalDisk(dbName: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
await this.sqliteConnection.saveToLocalDisk(dbName);
|
||||||
|
return;
|
||||||
|
} catch(err:any) {
|
||||||
|
const msg = err.message ? err.message : err;
|
||||||
|
throw new Error(`sqliteService.saveToLocalDisk: ${msg}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default SQLiteService;
|
||||||
153
examples/relay-sqlite-example/src/services/storageService.ts
Normal file
153
examples/relay-sqlite-example/src/services/storageService.ts
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
import { CapacitorSQLite, SQLiteDBConnection } from '@capacitor-community/sqlite';
|
||||||
|
import { getCurrentInstance } from 'vue';
|
||||||
|
import { ISQLiteService } from './sqliteService';
|
||||||
|
import { IDbVersionService } from './dbVersionService';
|
||||||
|
|
||||||
|
|
||||||
|
export interface IStorageService {
|
||||||
|
initializeDatabase(): Promise<void>;
|
||||||
|
|
||||||
|
|
||||||
|
query(sql: string, params?: any[]): Promise<any>;
|
||||||
|
run(sql: string, params?: any[]): Promise<any>;
|
||||||
|
execute(sql: string): Promise<any>;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class StorageService implements IStorageService {
|
||||||
|
versionUpgrades = [
|
||||||
|
|
||||||
|
{
|
||||||
|
toVersion: 1,
|
||||||
|
statements: [
|
||||||
|
|
||||||
|
`CREATE TABLE IF NOT EXISTS network_peers (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
url TEXT UNIQUE,
|
||||||
|
is_enabled INTEGER DEFAULT 0,
|
||||||
|
note TEXT DEFAULT ''
|
||||||
|
);`,
|
||||||
|
|
||||||
|
`CREATE TABLE IF NOT EXISTS gun_nodes (
|
||||||
|
key TEXT PRIMARY KEY NOT NULL,
|
||||||
|
value TEXT NOT NULL,
|
||||||
|
timestamp INTEGER DEFAULT (strftime('%s', 'now'))
|
||||||
|
);`,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
loadToVersion = 1;
|
||||||
|
momentsVersion = 2;
|
||||||
|
db!: SQLiteDBConnection;
|
||||||
|
database: string = 'gundb';
|
||||||
|
sqliteServ!: ISQLiteService;
|
||||||
|
dbVerServ!: IDbVersionService;
|
||||||
|
isInitCompleted = new BehaviorSubject(false);
|
||||||
|
appInstance = getCurrentInstance();
|
||||||
|
platform!: string;
|
||||||
|
private isInitialized = false;
|
||||||
|
|
||||||
|
constructor(sqliteService: ISQLiteService, dbVersionService: IDbVersionService) {
|
||||||
|
this.sqliteServ = sqliteService;
|
||||||
|
this.dbVerServ = dbVersionService;
|
||||||
|
this.platform = this.appInstance?.appContext.config.globalProperties.$platform || 'web';
|
||||||
|
}
|
||||||
|
|
||||||
|
async initializeDatabase(): Promise<void> {
|
||||||
|
if (this.isInitialized) {
|
||||||
|
console.log('数据库已初始化，跳过重复调用');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('开始初始化数据库:', this.database);
|
||||||
|
await this.sqliteServ.addUpgradeStatement({
|
||||||
|
database: this.database,
|
||||||
|
upgrade: this.versionUpgrades,
|
||||||
|
});
|
||||||
|
console.log('核心升级语句已添加');
|
||||||
|
|
||||||
|
this.db = await this.sqliteServ.openDatabase(this.database, this.loadToVersion, false);
|
||||||
|
console.log('数据库已打开，目标版本:', this.loadToVersion);
|
||||||
|
|
||||||
|
const currentVersionResult = await this.db.getVersion();
|
||||||
|
const currentVersion: number = currentVersionResult.version ?? 0;
|
||||||
|
console.log('当前数据库版本:', currentVersion);
|
||||||
|
|
||||||
|
for (const upgrade of this.versionUpgrades) {
|
||||||
|
console.log(`执行核心升级到版本 ${upgrade.toVersion}`);
|
||||||
|
for (const stmt of upgrade.statements) {
|
||||||
|
try {
|
||||||
|
await this.db.execute(stmt);
|
||||||
|
console.log('执行语句成功:', stmt);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('执行语句失败:', stmt, err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.dbVerServ.setDbVersion(this.database, this.loadToVersion);
|
||||||
|
console.log('核心数据库版本已设置为:', this.loadToVersion);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (this.platform === 'web') {
|
||||||
|
try {
|
||||||
|
await this.sqliteServ.saveToStore(this.database);
|
||||||
|
console.log('数据库已保存到 Web 存储');
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Web 存储保存失败（非致命错误）:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tablesAfter = await this.db.query("SELECT name FROM sqlite_master WHERE type='table'");
|
||||||
|
console.log('初始化后的表:', tablesAfter.values);
|
||||||
|
this.isInitCompleted.next(true);
|
||||||
|
this.isInitialized = true;
|
||||||
|
console.log('SQLite 数据库初始化成功');
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error(`storageService.initializeDatabase: ${error.message || error}`, error);
|
||||||
|
throw new Error(`storageService.initializeDatabase: ${error.message || error}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async query(sql: string, params: any[] = []): Promise<any> {
|
||||||
|
try {
|
||||||
|
return await this.db.query(sql, params);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`执行查询 ${sql} 失败:`, err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async run(sql: string, params: any[] = []): Promise<any> {
|
||||||
|
try {
|
||||||
|
return await this.db.run(sql, params);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`执行语句 ${sql} 失败:`, err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async execute(sql: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
return await this.db.execute(sql);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`执行语句 ${sql} 失败:`, err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StorageService;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
237
examples/relay-sqlite-example/src/theme/variables.css
Normal file
237
examples/relay-sqlite-example/src/theme/variables.css
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
/* Ionic Variables and Theming. For more info, please see:
|
||||||
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
|
/** Ionic CSS Variables **/
|
||||||
|
:root {
|
||||||
|
--ion-background-color: #ffffff;
|
||||||
|
/** primary **/
|
||||||
|
--ion-color-primary: #3880ff;
|
||||||
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-primary-shade: #3171e0;
|
||||||
|
--ion-color-primary-tint: #4c8dff;
|
||||||
|
|
||||||
|
/** secondary **/
|
||||||
|
--ion-color-secondary: #3dc2ff;
|
||||||
|
--ion-color-secondary-rgb: 61, 194, 255;
|
||||||
|
--ion-color-secondary-contrast: #e1dfdf;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-secondary-shade: #36abe0;
|
||||||
|
--ion-color-secondary-tint: #50c8ff;
|
||||||
|
|
||||||
|
/** tertiary **/
|
||||||
|
--ion-color-tertiary: #5260ff;
|
||||||
|
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||||
|
--ion-color-tertiary-contrast: #e3e3e3;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-tertiary-shade: #4854e0;
|
||||||
|
--ion-color-tertiary-tint: #6370ff;
|
||||||
|
|
||||||
|
/** success **/
|
||||||
|
--ion-color-success: #2dd36f;
|
||||||
|
--ion-color-success-rgb: 45, 211, 111;
|
||||||
|
--ion-color-success-contrast: #ededed;
|
||||||
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-success-shade: #28ba62;
|
||||||
|
--ion-color-success-tint: #42d77d;
|
||||||
|
|
||||||
|
/** warning #222428 **/
|
||||||
|
--ion-color-warning: #ffc409;
|
||||||
|
--ion-color-warning-rgb: 255, 196, 9;
|
||||||
|
--ion-color-warning-contrast: #222428;
|
||||||
|
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-warning-shade: #e0ac08;
|
||||||
|
--ion-color-warning-tint: #ffca22;
|
||||||
|
|
||||||
|
/** danger **/
|
||||||
|
--ion-color-danger: #eb445a;
|
||||||
|
--ion-color-danger-rgb: 235, 68, 90;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #cf3c4f;
|
||||||
|
--ion-color-danger-tint: #ed576b;
|
||||||
|
|
||||||
|
/** dark #000000 **/
|
||||||
|
--ion-color-dark: #000000;
|
||||||
|
--ion-color-dark-rgb: 34, 36, 40;
|
||||||
|
--ion-color-dark-contrast: #e1e1e1;
|
||||||
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-dark-shade: #1e2023;
|
||||||
|
--ion-color-dark-tint: #383a3e;
|
||||||
|
|
||||||
|
/** medium **/
|
||||||
|
--ion-color-medium: #92949c;
|
||||||
|
--ion-color-medium-rgb: 146, 148, 156;
|
||||||
|
--ion-color-medium-contrast: #e6e6e6;
|
||||||
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-medium-shade: #808289;
|
||||||
|
--ion-color-medium-tint: #9d9fa6;
|
||||||
|
|
||||||
|
/** light **/
|
||||||
|
--ion-color-light: #e8e8e8;
|
||||||
|
--ion-color-light-rgb: 244, 245, 248;
|
||||||
|
--ion-color-light-contrast: #000000;
|
||||||
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-light-shade: #d7d8da;
|
||||||
|
--ion-color-light-tint: #f5f6f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
/*
|
||||||
|
* Dark Colors
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
--ion-color-primary: #428cff;
|
||||||
|
--ion-color-primary-rgb: 66,140,255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-primary-shade: #3a7be0;
|
||||||
|
--ion-color-primary-tint: #5598ff;
|
||||||
|
|
||||||
|
--ion-color-secondary: #50c8ff;
|
||||||
|
--ion-color-secondary-rgb: 80,200,255;
|
||||||
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-secondary-shade: #46b0e0;
|
||||||
|
--ion-color-secondary-tint: #62ceff;
|
||||||
|
|
||||||
|
--ion-color-tertiary: #6a64ff;
|
||||||
|
--ion-color-tertiary-rgb: 106,100,255;
|
||||||
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-tertiary-shade: #5d58e0;
|
||||||
|
--ion-color-tertiary-tint: #7974ff;
|
||||||
|
|
||||||
|
--ion-color-success: #2fdf75;
|
||||||
|
--ion-color-success-rgb: 47,223,117;
|
||||||
|
--ion-color-success-contrast: #000000;
|
||||||
|
--ion-color-success-contrast-rgb: 0,0,0;
|
||||||
|
--ion-color-success-shade: #29c467;
|
||||||
|
--ion-color-success-tint: #44e283;
|
||||||
|
|
||||||
|
--ion-color-warning: #ffd534;
|
||||||
|
--ion-color-warning-rgb: 255,213,52;
|
||||||
|
--ion-color-warning-contrast: #000000;
|
||||||
|
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||||
|
--ion-color-warning-shade: #e0bb2e;
|
||||||
|
--ion-color-warning-tint: #ffd948;
|
||||||
|
|
||||||
|
--ion-color-danger: #ff4961;
|
||||||
|
--ion-color-danger-rgb: 255,73,97;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-danger-shade: #e04055;
|
||||||
|
--ion-color-danger-tint: #ff5b71;
|
||||||
|
|
||||||
|
--ion-color-dark: #dfdfdf;
|
||||||
|
--ion-color-dark-rgb: 244,245,248;
|
||||||
|
--ion-color-dark-contrast: #141414;
|
||||||
|
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||||
|
--ion-color-dark-shade: #b5b5b5;
|
||||||
|
--ion-color-dark-tint: #dedfe0;
|
||||||
|
|
||||||
|
--ion-color-medium: #989aa2;
|
||||||
|
--ion-color-medium-rgb: 152,154,162;
|
||||||
|
--ion-color-medium-contrast: #000000;
|
||||||
|
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||||
|
--ion-color-medium-shade: #86888f;
|
||||||
|
--ion-color-medium-tint: #a2a4ab;
|
||||||
|
|
||||||
|
--ion-color-light: #222428;
|
||||||
|
--ion-color-light-rgb: 34,36,40;
|
||||||
|
--ion-color-light-contrast: #ffffff;
|
||||||
|
--ion-color-light-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-light-shade: #1e2023;
|
||||||
|
--ion-color-light-tint: #383a3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* iOS Dark Theme #111111
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.ios body {
|
||||||
|
--ion-background-color: #000000;
|
||||||
|
--ion-background-color-rgb: 0,0,0;
|
||||||
|
|
||||||
|
--ion-text-color: #bfcbc7;
|
||||||
|
--ion-text-color-rgb: 255,255,255;
|
||||||
|
|
||||||
|
--ion-color-step-50: #0d0d0d;
|
||||||
|
--ion-color-step-100: #1a1a1a;
|
||||||
|
--ion-color-step-150: #262626;
|
||||||
|
--ion-color-step-200: #333333;
|
||||||
|
--ion-color-step-250: #404040;
|
||||||
|
--ion-color-step-300: #4d4d4d;
|
||||||
|
--ion-color-step-350: #595959;
|
||||||
|
--ion-color-step-400: #666666;
|
||||||
|
--ion-color-step-450: #737373;
|
||||||
|
--ion-color-step-500: #808080;
|
||||||
|
--ion-color-step-550: #8c8c8c;
|
||||||
|
--ion-color-step-600: #999999;
|
||||||
|
--ion-color-step-650: #a6a6a6;
|
||||||
|
--ion-color-step-700: #b3b3b3;
|
||||||
|
--ion-color-step-750: #bfbfbf;
|
||||||
|
--ion-color-step-800: #cccccc;
|
||||||
|
--ion-color-step-850: #d9d9d9;
|
||||||
|
--ion-color-step-900: #e6e6e6;
|
||||||
|
--ion-color-step-950: #f2f2f2;
|
||||||
|
|
||||||
|
--ion-item-background: #000000;
|
||||||
|
|
||||||
|
--ion-card-background: #1c1c1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios ion-modal {
|
||||||
|
--ion-background-color: var(--ion-color-step-50);
|
||||||
|
--ion-toolbar-background: var(--ion-color-step-100);
|
||||||
|
--ion-toolbar-border-color: var(--ion-color-step-150);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Material Design Dark Theme
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.md body {
|
||||||
|
--ion-background-color: #000000;
|
||||||
|
--ion-background-color-rgb: 18,18,18;
|
||||||
|
|
||||||
|
--ion-text-color: #dfdede;
|
||||||
|
--ion-text-color-rgb: 255,255,255;
|
||||||
|
|
||||||
|
--ion-border-color: #222222;
|
||||||
|
|
||||||
|
--ion-color-step-50: #1e1e1e;
|
||||||
|
--ion-color-step-100: #2a2a2a;
|
||||||
|
--ion-color-step-150: #363636;
|
||||||
|
--ion-color-step-200: #414141;
|
||||||
|
--ion-color-step-250: #4d4d4d;
|
||||||
|
--ion-color-step-300: #595959;
|
||||||
|
--ion-color-step-350: #656565;
|
||||||
|
--ion-color-step-400: #717171;
|
||||||
|
--ion-color-step-450: #7d7d7d;
|
||||||
|
--ion-color-step-500: #898989;
|
||||||
|
--ion-color-step-550: #949494;
|
||||||
|
--ion-color-step-600: #a0a0a0;
|
||||||
|
--ion-color-step-650: #acacac;
|
||||||
|
--ion-color-step-700: #b8b8b8;
|
||||||
|
--ion-color-step-750: #c4c4c4;
|
||||||
|
--ion-color-step-800: #d0d0d0;
|
||||||
|
--ion-color-step-850: #dbdbdb;
|
||||||
|
--ion-color-step-900: #e7e7e7;
|
||||||
|
--ion-color-step-950: #f3f3f3;
|
||||||
|
|
||||||
|
--ion-item-background: #000000;
|
||||||
|
|
||||||
|
--ion-toolbar-background: #000000;
|
||||||
|
|
||||||
|
--ion-tab-bar-background: #000000;
|
||||||
|
|
||||||
|
--ion-card-background: #1e1e1e;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
examples/relay-sqlite-example/tsconfig.json
Normal file
23
examples/relay-sqlite-example/tsconfig.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["ESNext", "DOM"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"bare-plugin": ["./bare-plugin/dist/plugin"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
9
examples/relay-sqlite-example/tsconfig.node.json
Normal file
9
examples/relay-sqlite-example/tsconfig.node.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
73
examples/relay-sqlite-example/vite.config.ts
Normal file
73
examples/relay-sqlite-example/vite.config.ts
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import legacy from '@vitejs/plugin-legacy'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Pages from 'vite-plugin-pages'
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
|
// import inject from "@rollup/plugin-inject";
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
legacy(),
|
||||||
|
Components(),
|
||||||
|
// inject({
|
||||||
|
// Buffer: ["buffer", "Buffer"],
|
||||||
|
// }),
|
||||||
|
AutoImport({
|
||||||
|
|
||||||
|
imports: ['vue', 'vue-router'],
|
||||||
|
|
||||||
|
|
||||||
|
dirs: [
|
||||||
|
'src/composables',
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
dts: 'src/auto-imports.d.ts',
|
||||||
|
|
||||||
|
|
||||||
|
}),
|
||||||
|
Pages(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
workbox: {
|
||||||
|
maximumFileSizeToCacheInBytes: 5000 * 1024 * 1024,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src'),
|
||||||
|
crypto: 'crypto-browserify',
|
||||||
|
buffer: "buffer",
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
global: "window",
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
rollupOptions: {
|
||||||
|
external: ['text-encoding'],
|
||||||
|
output:{
|
||||||
|
|
||||||
|
manualChunks(id) {
|
||||||
|
|
||||||
|
if (id.includes('node_modules')) {
|
||||||
|
return id.toString().split('node_modules/')[1].split('/')[0].toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// test: {
|
||||||
|
// globals: true,
|
||||||
|
// environment: 'jsdom'
|
||||||
|
// }
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user