kevin/meshtastic_mqtt_server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化前端

Browse Source
This commit is contained in:
kevin
2026-06-06 02:10:56 +08:00
parent 71282f4e4f
commit 35823507a0
9 changed files with 951 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
meshmap_frontend/package-lock.json
Generated
+369
View File
@@ -12,10 +12,12 @@
"vue": "^3.5.34"
},
"devDependencies": {
"@tailwindcss/vite": "^4.3.0",
"@types/leaflet": "^1.9.21",
"@types/node": "^24.12.3",
"@vitejs/plugin-vue": "^6.0.6",
"@vue/tsconfig": "^0.9.1",
"tailwindcss": "^4.3.0",
"typescript": "~6.0.2",
"vite": "^8.0.12",
"vue-tsc": "^3.2.8"
@@ -101,12 +103,55 @@
"tslib": "^2.4.0"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/remapping": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@napi-rs/wasm-runtime": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -400,6 +445,278 @@
"dev": true,
"license": "MIT"
},
"node_modules/@tailwindcss/node": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
"integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.5",
"enhanced-resolve": "^5.21.0",
"jiti": "^2.6.1",
"lightningcss": "1.32.0",
"magic-string": "^0.30.21",
"source-map-js": "^1.2.1",
"tailwindcss": "4.3.0"
}
},
"node_modules/@tailwindcss/oxide": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
"integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 20"
},
"optionalDependencies": {
"@tailwindcss/oxide-android-arm64": "4.3.0",
"@tailwindcss/oxide-darwin-arm64": "4.3.0",
"@tailwindcss/oxide-darwin-x64": "4.3.0",
"@tailwindcss/oxide-freebsd-x64": "4.3.0",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
"@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
"@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
"@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
"@tailwindcss/oxide-linux-x64-musl": "4.3.0",
"@tailwindcss/oxide-wasm32-wasi": "4.3.0",
"@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
"@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
}
},
"node_modules/@tailwindcss/oxide-android-arm64": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
"integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-darwin-arm64": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
"integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-darwin-x64": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
"integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-freebsd-x64": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
"integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
"integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
"integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
"integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
"integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
"integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-wasm32-wasi": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
"integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
"bundleDependencies": [
"@napi-rs/wasm-runtime",
"@emnapi/core",
"@emnapi/runtime",
"@tybys/wasm-util",
"@emnapi/wasi-threads",
"tslib"
],
"cpu": [
"wasm32"
],
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"@emnapi/core": "^1.10.0",
"@emnapi/runtime": "^1.10.0",
"@emnapi/wasi-threads": "^1.2.1",
"@napi-rs/wasm-runtime": "^1.1.4",
"@tybys/wasm-util": "^0.10.1",
"tslib": "^2.8.1"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
"integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
"integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 20"
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.0.tgz",
"integrity": "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tailwindcss/node": "4.3.0",
"@tailwindcss/oxide": "4.3.0",
"tailwindcss": "4.3.0"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6 || ^7 || ^8"
}
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -642,6 +959,20 @@
"node": ">=8"
}
},
"node_modules/enhanced-resolve": {
"version": "5.23.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.23.0.tgz",
"integrity": "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==",
"dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.4",
"tapable": "^2.3.3"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/entities": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -693,6 +1024,23 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"license": "ISC"
},
"node_modules/jiti": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
"integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/leaflet": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -1091,6 +1439,27 @@
"node": ">=0.10.0"
}
},
"node_modules/tailwindcss": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
"integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
"dev": true,
"license": "MIT"
},
"node_modules/tapable": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
"integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/tinyglobby": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
meshmap_frontend/package.json
+2
View File
@@ -13,10 +13,12 @@
"vue": "^3.5.34"
},
"devDependencies": {
"@tailwindcss/vite": "^4.3.0",
"@types/leaflet": "^1.9.21",
"@types/node": "^24.12.3",
"@vitejs/plugin-vue": "^6.0.6",
"@vue/tsconfig": "^0.9.1",
"tailwindcss": "^4.3.0",
"typescript": "~6.0.2",
"vite": "^8.0.12",
"vue-tsc": "^3.2.8"
meshmap_frontend/src/components/AdminDashboard.vue
+28 -30
View File
@@ -190,10 +190,8 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
gap: 1rem;
border: 1px solid rgba(37, 99, 235, 0.14);
background:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 32%),
linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef6ff 100%);
border: 1px solid var(--color-border);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
}
.control-header {
@@ -210,19 +208,19 @@ onBeforeUnmount(() => {
.control-badge {
display: inline-flex;
align-items: center;
border: 1px solid #cbd5e1;
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 6px 12px;
color: #475569;
color: var(--color-muted);
font-size: 12px;
font-weight: 800;
background: rgba(255, 255, 255, 0.8);
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
}
.control-badge.active {
border-color: rgba(22, 163, 74, 0.32);
color: #15803d;
background: #dcfce7;
border-color: color-mix(in srgb, var(--color-success) 36%, white);
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
background: var(--color-success-soft);
}
.control-body {
@@ -235,10 +233,10 @@ onBeforeUnmount(() => {
.control-copy,
.switch-card {
border: 1px solid rgba(203, 213, 225, 0.78);
border-radius: 18px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
box-shadow: var(--shadow-sm);
}
.control-copy {
@@ -247,13 +245,13 @@ onBeforeUnmount(() => {
.control-copy h3 {
margin: 0 0 0.45rem;
color: #0f172a;
color: var(--color-heading);
font-size: 18px;
}
.control-copy p {
margin: 0;
color: #64748b;
color: var(--color-muted);
line-height: 1.7;
}
@@ -269,20 +267,20 @@ onBeforeUnmount(() => {
gap: 1rem;
min-height: 108px;
padding: 1rem;
color: #334155;
color: var(--color-text);
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.switch-card:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.35);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.switch-card.enabled {
border-color: rgba(22, 163, 74, 0.35);
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
border-color: color-mix(in srgb, var(--color-success) 42%, white);
background: var(--color-success-soft);
}
.switch-card.saving {
@@ -303,12 +301,12 @@ onBeforeUnmount(() => {
}
.switch-text strong {
color: #0f172a;
color: var(--color-heading);
font-size: 15px;
}
.switch-text small {
color: #64748b;
color: var(--color-muted);
font-size: 12px;
line-height: 1.45;
}
@@ -319,9 +317,9 @@ onBeforeUnmount(() => {
width: 54px;
height: 30px;
border-radius: 999px;
background: #cbd5e1;
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.14);
transition: background 0.15s ease;
background: var(--color-border-strong);
box-shadow: inset 0 2px 4px rgba(47, 52, 50, 0.12);
transition: background-color 0.16s ease;
}
.switch-toggle::after {
@@ -333,12 +331,12 @@ onBeforeUnmount(() => {
height: 22px;
border-radius: 999px;
background: #fff;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.24);
transition: transform 0.15s ease;
box-shadow: 0 4px 10px rgba(47, 52, 50, 0.18);
transition: transform 0.16s ease;
}
.switch-card.enabled .switch-toggle {
background: linear-gradient(135deg, #16a34a, #22c55e);
background: var(--color-success);
}
.switch-card.enabled .switch-toggle::after {
meshmap_frontend/src/components/AdminMapSource.vue
+40 -41
View File
@@ -286,20 +286,19 @@ onMounted(refreshItems)
.map-source-page :deep(input) {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
padding: 9px 11px;
color: #0f172a;
color: var(--color-heading);
font: inherit;
background: #fff;
background: var(--color-surface);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.map-source-page :deep(input:focus) {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.map-source-page :deep(input[type='checkbox']) {
@@ -317,7 +316,7 @@ onMounted(refreshItems)
align-items: center;
justify-content: space-between;
gap: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
}
.hero-copy {
@@ -332,17 +331,17 @@ onMounted(refreshItems)
.hero-stats div {
min-width: 0;
border: 1px solid #dbeafe;
border-radius: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 16px;
text-align: center;
background: rgba(255, 255, 255, 0.78);
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
}
.hero-stats strong {
display: block;
overflow: hidden;
color: #1d4ed8;
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
font-size: 22px;
text-overflow: ellipsis;
white-space: nowrap;
@@ -352,7 +351,7 @@ onMounted(refreshItems)
.source-meta span,
.template-tip,
.source-url {
color: #64748b;
color: var(--color-muted);
font-size: 13px;
}
@@ -386,7 +385,7 @@ onMounted(refreshItems)
.field {
display: grid;
gap: 6px;
color: #334155;
color: var(--color-text);
font-size: 13px;
font-weight: 700;
}
@@ -410,13 +409,13 @@ onMounted(refreshItems)
justify-content: center;
gap: 8px;
min-height: 39px;
border: 1px solid #dbe4ef;
border-radius: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 9px 11px;
color: #334155;
color: var(--color-text);
font-size: 13px;
font-weight: 700;
background: #f8fafc;
background: var(--color-surface-soft);
}
.template-tip {
@@ -424,26 +423,26 @@ onMounted(refreshItems)
}
.map-source-card {
border: 1px solid #dbe4ef;
border-radius: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
margin-top: 1rem;
background: #fff;
box-shadow: inset 4px 0 0 #dbeafe;
background: var(--color-surface);
box-shadow: inset 4px 0 0 var(--color-primary-soft);
}
.map-source-card.default {
box-shadow: inset 4px 0 0 #22c55e;
box-shadow: inset 4px 0 0 var(--color-success);
}
.map-source-card.disabled {
background: #f8fafc;
box-shadow: inset 4px 0 0 #cbd5e1;
background: var(--color-surface-soft);
box-shadow: inset 4px 0 0 var(--color-border-strong);
}
.source-title-row h3 {
margin: 0;
color: #0f172a;
color: var(--color-heading);
font-size: 18px;
}
@@ -451,26 +450,26 @@ onMounted(refreshItems)
max-width: 860px;
margin: 6px 0 0;
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-family: var(--font-mono);
}
.status-pill {
border-radius: 999px;
padding: 7px 12px;
color: #1d4ed8;
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
font-size: 13px;
font-weight: 800;
background: #dbeafe;
background: var(--color-primary-soft);
}
.status-pill.ok {
color: #166534;
background: #dcfce7;
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
background: var(--color-success-soft);
}
.status-pill.disabled {
color: #475569;
background: #e2e8f0;
color: var(--color-muted);
background: var(--color-surface-muted);
}
.source-edit-grid {
@@ -487,16 +486,16 @@ onMounted(refreshItems)
.source-meta div {
min-width: 0;
border-radius: 12px;
border-radius: var(--radius-md);
padding: 10px 12px;
background: #f8fafc;
background: var(--color-surface-soft);
}
.source-meta strong {
display: block;
margin-top: 3px;
overflow-wrap: anywhere;
color: #0f172a;
color: var(--color-heading);
}
.actions {
@@ -504,12 +503,12 @@ onMounted(refreshItems)
}
.empty-state {
border: 1px dashed #cbd5e1;
border-radius: 16px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
padding: 24px;
color: #64748b;
color: var(--color-muted);
text-align: center;
background: #f8fafc;
background: var(--color-surface-soft);
}
@media (max-width: 1100px) {
meshmap_frontend/src/components/AdminMqttForward.vue
+50 -65
View File
@@ -582,21 +582,20 @@ onBeforeUnmount(() => {
.mqtt-forward-page :deep(input),
.mqtt-forward-page :deep(select) {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
padding: 9px 11px;
color: #0f172a;
color: var(--color-heading);
font: inherit;
background: #fff;
background: var(--color-surface);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.mqtt-forward-page :deep(input:focus),
.mqtt-forward-page :deep(select:focus) {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.mqtt-hero,
@@ -610,7 +609,7 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: space-between;
gap: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
}
.mqtt-hero h2 {
@@ -624,23 +623,23 @@ onBeforeUnmount(() => {
}
.hero-stats div {
border: 1px solid #dbeafe;
border-radius: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 16px;
text-align: center;
background: rgba(255, 255, 255, 0.78);
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
}
.hero-stats strong {
display: block;
color: #1d4ed8;
color: color-mix(in srgb, var(--color-primary) 72%, var(--color-heading));
font-size: 24px;
}
.hero-stats span,
.endpoint-line,
.runtime-grid span {
color: #64748b;
color: var(--color-muted);
font-size: 13px;
}
@@ -674,7 +673,7 @@ onBeforeUnmount(() => {
.field {
display: grid;
gap: 6px;
color: #334155;
color: var(--color-text);
font-size: 13px;
font-weight: 700;
}
@@ -687,9 +686,9 @@ onBeforeUnmount(() => {
.edit-section,
.forwarder-card,
.topics-box {
border: 1px solid #dbe4ef;
border-radius: 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.broker-card {
@@ -702,16 +701,16 @@ onBeforeUnmount(() => {
.broker-card legend {
padding: 0 8px;
color: #334155;
color: var(--color-text);
font-weight: 800;
}
.source-card {
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
}
.target-card {
background: linear-gradient(180deg, #f8fffb 0%, #fff 100%);
background: linear-gradient(180deg, var(--color-success-soft) 0%, var(--color-surface) 100%);
}
.form-actions {
@@ -726,13 +725,13 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #dbe4ef;
border-radius: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 9px 11px;
color: #334155;
color: var(--color-text);
font-size: 13px;
font-weight: 700;
background: #f8fafc;
background: var(--color-surface-soft);
}
.switch-card input,
@@ -743,34 +742,34 @@ onBeforeUnmount(() => {
.forwarder-card {
padding: 1rem;
margin-top: 1rem;
box-shadow: inset 4px 0 0 #dbeafe;
box-shadow: inset 4px 0 0 var(--color-primary-soft);
}
.forwarder-title h3 {
color: #0f172a;
color: var(--color-heading);
font-size: 18px;
}
.status-pill {
border-radius: 999px;
padding: 7px 12px;
color: #92400e;
background: #fffbeb;
color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
background: var(--color-warning-soft);
}
.status-pill.ok {
color: #166534;
background: #dcfce7;
color: color-mix(in srgb, var(--color-success) 72%, var(--color-heading));
background: var(--color-success-soft);
}
.status-pill.warn {
color: #92400e;
background: #fef3c7;
color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
background: var(--color-warning-soft);
}
.status-pill.disabled {
color: #475569;
background: #e2e8f0;
color: var(--color-muted);
background: var(--color-surface-muted);
}
.runtime-grid {
@@ -781,23 +780,23 @@ onBeforeUnmount(() => {
}
.runtime-grid div {
border-radius: 12px;
border-radius: var(--radius-md);
padding: 10px 12px;
background: #f8fafc;
background: var(--color-surface-soft);
}
.runtime-grid strong {
display: block;
margin-top: 3px;
color: #0f172a;
color: var(--color-heading);
}
.inline-error {
border: 1px solid #fecaca;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-danger) 36%, white);
border-radius: var(--radius-md);
padding: 10px 12px;
color: #b91c1c;
background: #fef2f2;
color: color-mix(in srgb, var(--color-danger) 74%, var(--color-heading));
background: var(--color-danger-soft);
word-break: break-word;
}
@@ -831,24 +830,10 @@ onBeforeUnmount(() => {
margin-top: 0.75rem;
}
.admin-button.ghost {
color: #1d4ed8;
border: 1px solid #bfdbfe;
background: #eff6ff;
}
.admin-button.secondary {
background: #475569;
}
.admin-button.danger {
background: #dc2626;
}
.topics-box {
margin-top: 1rem;
padding: 1rem;
background: #f8fafc;
background: var(--color-surface-soft);
}
.topic-row {
@@ -856,25 +841,25 @@ onBeforeUnmount(() => {
grid-template-columns: minmax(180px, 1.6fr) minmax(90px, 0.7fr) minmax(150px, 1fr) repeat(2, minmax(120px, 1fr)) minmax(90px, 0.7fr) minmax(90px, 0.7fr) auto auto;
gap: 0.5rem;
align-items: center;
border-top: 1px solid #e2e8f0;
border-top: 1px solid var(--color-border);
padding-top: 0.75rem;
margin-top: 0.75rem;
}
.topic-row.new-topic {
border: 1px dashed #93c5fd;
border-radius: 14px;
border: 1px dashed color-mix(in srgb, var(--color-primary) 54%, white);
border-radius: var(--radius-md);
padding: 0.75rem;
background: #eff6ff;
background: var(--color-primary-soft);
}
.empty-state {
border: 1px dashed #cbd5e1;
border-radius: 16px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
padding: 24px;
color: #64748b;
color: var(--color-muted);
text-align: center;
background: #f8fafc;
background: var(--color-surface-soft);
}
.pagination {
meshmap_frontend/src/components/MeshMap.vue
+6 -6
View File
@@ -370,15 +370,15 @@ function nodeColor(nodeId: string): string {
}
const hueRanges = [
[35, 75],
[95, 165],
[185, 250],
[265, 315],
[42, 68],
[92, 136],
[188, 218],
[330, 354],
]
const range = hueRanges[hash % hueRanges.length]
const hue = range[0] + (hash % (range[1] - range[0]))
const saturation = 68 + (hash % 18)
const lightness = 32 + (hash % 10)
const saturation = 24 + (hash % 14)
const lightness = 42 + (hash % 12)
return `hsl(${hue} ${saturation}% ${lightness}%)`
}
meshmap_frontend/src/components/NodeTrajectoryMap.vue
+3 -3
View File
@@ -56,10 +56,10 @@ function renderTrajectory() {
}
if (points.length > 1) {
L.polyline(points, { color: '#2563eb', weight: 4, opacity: 0.8 }).addTo(layer)
L.polyline(points, { color: '#7d8f9a', weight: 4, opacity: 0.78 }).addTo(layer)
}
L.circleMarker(points[0], { radius: 6, color: '#16a34a', fillColor: '#22c55e', fillOpacity: 0.9 }).bindPopup('起点').addTo(layer)
L.circleMarker(points[points.length - 1], { radius: 6, color: '#dc2626', fillColor: '#ef4444', fillOpacity: 0.9 }).bindPopup('终点').addTo(layer)
L.circleMarker(points[0], { radius: 6, color: '#7f9183', fillColor: '#9aaa95', fillOpacity: 0.88 }).bindPopup('起点').addTo(layer)
L.circleMarker(points[points.length - 1], { radius: 6, color: '#b4877f', fillColor: '#c59b93', fillOpacity: 0.88 }).bindPopup('终点').addTo(layer)
map.fitBounds(L.latLngBounds(points), { padding: [24, 24], maxZoom: 14 })
}
meshmap_frontend/src/style.css
+451 -302
View File
File diff suppressed because it is too large Load Diff
meshmap_frontend/vite.config.ts
+2 -1
View File
@@ -1,9 +1,10 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
plugins: [vue(), tailwindcss()],
build: {
outDir: "../dist",
assetsDir: "assets",