├── README.md
└── worker.js


/README.md:
--------------------------------------------------------------------------------
 1 | # car-qrcode-notify
 2 | 挪车二维码
 3 | 
 4 | 在大佬的基础上增加了，部分后台管理功能（需要绑定 KV 数据库），可通过 api 添加，删除，更新、查看车辆列表，部署一次可多辆车辆一起使用，无需重复部署。通知发送、获取手机号都由服务器处理，通知渠道支持 WxPusher、Bark、飞书机器人、微信机器人、钉钉机器人、NapCatQQ、Lagrange.Onebot，如需更多渠道可自行增加。可设置发送通知的速率，可设置首页风格。
 5 | 
 6 | 【V1.5更新内容】\
 7 | 1、增加消息通知、电话通知开关，可单独控制通知功能开启（默认为全开） \
 8 | 2、修复已知问题 
 9 | 
10 | 【V1.4更新内容】\
11 | 1、后台管理增加登录页面https://xxxxxx.workers.dev/login \
12 | 2、移除/add页面，添加车辆登录后，统一到/manager页面添加 \
13 | 3、增加车牌号字段，发送通知时会附带车牌号。 
14 | 
15 | 【V1.3 更新内容】\
16 | 1、新增一套首页风格，https://xxxxxx.workers.dev/?id=1&style=2 ，默认为风格1（sytle=1 风格1，style=2 风格2）\
17 | 2、页面交互优化\
18 | 3、修复已知问题
19 | 
20 | 【V1.2 更新内容】\
21 | 1、增加多个通知渠道现在支持（WxPusher、Bark、飞书机器人、微信机器人、钉钉机器人、NapCatQQ、Lagrange.Onebot）\
22 | 2、修复已知问题
23 | 
24 | # 正文开始
25 | 
26 | 1、复制 [worker.js](https://github.com/oozzbb/car-qrcode-notify/blob/main/worker.js) 文件内的代码部署到 cloudflare workers 即可\
27 | 2、在新建的 workers 的设置中绑定 KV 数据库，具体如下图（变量名称必须为 DATA）
28 | ![image](https://github.com/user-attachments/assets/b1641ff6-92d4-44bb-8edf-d598f2f188b3)
29 | 
30 | # API 部分
31 | 
32 | 可通过 http 请求软件，或者去 KV 数据库直接修改，所有请求都为 POST 模式，不可在浏览器中直接访问，请求时需要添加 Authorization: Bearer API_KEY 授权头\
33 | 
34 | ```
35 | 添加车辆api
36 | * https://xxxxxx.workers.dev/api/addOwner
37 | {"id":"1","phone":"1234567890","notifyType":"1","notifyToken":"AT_xxxxxx|UID_xxxxxx"}
38 | id：每台车辆唯一标识
39 | phone：手机号
40 | notifyType：通知方式，notifyTypeMap对应即可
41 | notifyToken：通知渠道所使用的token
42 | 
43 | notifyType为1则使用wxpusher，notifyToken格式为AT_xxxxxx|UID_xxxxxx
44 | notifyType为2则使用bark，notifyToken为bark token
45 | notifyType为3则使用feishu，notifyToken为xxxxxx的值，不需要输入完整链接，https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxx
46 | 
47 | 删除车辆api
48 | * https://xxxxxx.workers.dev/api/deleteOwner
49 | {"id":"1"}
50 | 
51 | 车辆列表api
52 | * https://xxxxxx.workers.dev/api/listOwner
53 | ```
54 | 
55 | # 使用方法
56 | 
57 | 部署完后访问你自己的 workers 即可\
58 | <del> 1、https://xxxxxx.workers.dev/add 访问你自己的链接添加车辆 （该页面已移除，请访问登录页面，进后台添加）</del> \
59 | 2、https://xxxxxx.workers.dev/login 后台车辆管理登录页面\
60 | 3、https://xxxxxx.workers.dev/manager 后台车辆管理页面\
61 | 4、https://xxxxxx.workers.dev/?id=1&style=2 默认为风格1（sytle=1 风格1，style=2 风格2）访问你自己的链接发送通知或拨打电话。需要带相应的车辆 id
62 | 
63 | ![1731510826119](https://github.com/user-attachments/assets/eb400783-25f4-49f2-bda7-afba87e0adbd)
64 | 
65 | ![1731591538885](https://github.com/user-attachments/assets/be461088-4769-45ea-b11d-bfe1f7e104c9)
66 | 
67 | ![image](https://github.com/user-attachments/assets/c7070a26-83c0-4c29-993f-cc8107488151)
68 | 
69 | ![1731510915932](https://github.com/user-attachments/assets/22def089-bfc9-407e-b083-8c5898fd3b31)
70 | 


--------------------------------------------------------------------------------
/worker.js:
--------------------------------------------------------------------------------
   1 | //Version:1.5.0
   2 | //Date:2024-11-22 10:50:47
   3 | 
   4 | addEventListener('fetch', event => {
   5 |     event.respondWith(handleRequest(event.request));
   6 | });
   7 | 
   8 | //防止被滥用，在添加车辆信息时需要用来鉴权
   9 | const API_KEY = "sk-@Admin123";
  10 | const notifyMessage = "您好，有人需要您挪车，请及时处理。";
  11 | const sendSuccessMessage = "您好，我已收到你的挪车通知，我正在赶来的路上，请稍等片刻！";
  12 | //300秒内可发送5次通知
  13 | const rateLimitDelay = 300;
  14 | const rateLimitMaxRequests = 5;
  15 | //达到速率限制时返回内容
  16 | const rateLimitMessage = "我正在赶来的路上,请稍等片刻~~~";
  17 | 
  18 | //通知类型，其他的通知类型可自行实现
  19 | const notifyTypeMap = [
  20 |     { "id": "1", "name": "WxPusher", "functionName": wxpusher, "tip": "\r\nAT_xxxxxx|UID_xxxxxx" },
  21 |     { "id": "2", "name": "Bark", "functionName": bark, "tip": "\r\ntoken|soundName\r\n\r\n注：token为xxxxxx代表的值，直接输入该值即可，请勿输入完整链接（https://api.day.app/xxxxxx），soundName为铃声名称（默认使用：multiwayinvitation），如需自定义铃声需要把铃声文件先上传到BarkApp" },
  22 |     { "id": "3", "name": "飞书机器人", "functionName": feishu, "tip": "\r\ntoken\r\n\r\n注：token为xxxxxx代表的值，直接输入该值即可，请勿输入完整链接（https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxx）" },
  23 |     { "id": "4", "name": "企业微信机器人", "functionName": weixin, "tip": "\r\ntoken\r\n\r\n注：token为xxxxxx代表的值，直接输入该值即可，请勿输入完整链接（https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxxx）" },
  24 |     { "id": "5", "name": "钉钉机器人", "functionName": dingtalk, "tip": "\r\ntoken\r\n\r\n注：token为xxxxxx代表的值，直接输入该值即可，请勿输入完整链接（https://oapi.dingtalk.com/robot/send?access_token=xxxxxx）" },
  25 |     { "id": "6", "name": "NapCatQQ", "functionName": onebot, "tip": "http://127.0.0.1:8000/send_private_msg|access_token|接收人QQ号" },
  26 |     { "id": "7", "name": "Lagrange.Onebot", "functionName": onebot, "tip": "http://127.0.0.1:8000/send_private_msg|access_token|接收人QQ号" }
  27 | ]
  28 | 
  29 | async function handleRequest(request) {
  30 |     try {
  31 |         const url = new URL(request.url);
  32 |         const pathname = url.pathname;
  33 |         if (request.method === "OPTIONS") {
  34 |             return getResponse("", 204);
  35 |         }
  36 |         else if (request.method == "POST") {
  37 |             if (pathname == '/api/notifyOwner') {
  38 |                 const json = await request.json();
  39 |                 return await notifyOwner(json);
  40 |             }
  41 |             else if (pathname == '/api/callOwner') {
  42 |                 const json = await request.json();
  43 |                 return await callOwner(json);
  44 |             }
  45 |             else if (pathname == '/api/addOwner') {
  46 |                 if (!isAuth(request)) {
  47 |                     return getResponse(JSON.stringify({ code: 500, data: "Auth error", message: "fail" }), 200);
  48 |                 }
  49 |                 const json = await request.json();
  50 |                 return await addOwner(json);
  51 |             }
  52 |             else if (pathname == '/api/deleteOwner') {
  53 |                 if (!isAuth(request)) {
  54 |                     return getResponse(JSON.stringify({ code: 500, data: "Auth error", message: "fail" }), 200);
  55 |                 }
  56 |                 const json = await request.json();
  57 |                 return await deleteOwner(json);
  58 |             }
  59 |             else if (pathname == '/api/listOwner') {
  60 |                 if (!isAuth(request)) {
  61 |                     return getResponse(JSON.stringify({ code: 500, data: "Auth error", message: "fail" }), 200);
  62 |                 }
  63 |                 return await listOwner();
  64 |             }
  65 |             else if (pathname == '/api/notifyTypeList') {
  66 |                 return getNotifyTypeList();
  67 |             }
  68 |             else if (pathname == '/api/login') {
  69 |                 const { apiKey } = await request.json();
  70 |                 if (apiKey && apiKey == API_KEY) {
  71 |                     return getResponse(JSON.stringify({ code: 200, data: "Authorized", message: "success" }), 200);
  72 |                 }
  73 |                 else {
  74 |                     return getResponse(JSON.stringify({ code: 401, data: "Unauthorized", message: "fail" }), 200);
  75 |                 }
  76 |             }
  77 |         }
  78 |         else if (request.method == "GET") {
  79 |             if (pathname == "/login") {
  80 |                 return login();
  81 |             }
  82 |             else if (pathname == "/manager") {
  83 |                 return managerOwnerIndex();
  84 |             }
  85 |             else {
  86 |                 const style = url.searchParams.get("style") || "1";
  87 |                 const id = url.searchParams.get("id") || "";
  88 |                 return style == "2" ? await index2(id) : await index1(id);
  89 |             }
  90 |         }
  91 |     } catch (error) {
  92 |         return getResponse(JSON.stringify({ code: 500, data: error.message, message: "fail" }), 200);
  93 |     }
  94 | }
  95 | 
  96 | function isAuth(request) {
  97 |     const authHeader = request.headers.get("Authorization");
  98 |     if (!authHeader || !authHeader.startsWith("Bearer ") || authHeader.split(" ")[1] !== API_KEY) {
  99 |         return false;
 100 |     }
 101 |     else {
 102 |         return true;
 103 |     }
 104 | }
 105 | 
 106 | async function getKV(id) {
 107 |     try {
 108 |         if (id) {
 109 |             const owner = await DATA.get(id) || null;
 110 |             if (owner) {
 111 |                 return JSON.parse(owner);
 112 |             }
 113 |         }
 114 |     } catch (e) {
 115 |     }
 116 |     return null;
 117 | }
 118 | 
 119 | async function putKV(id, owner, cfg) {
 120 |     if (id) {
 121 |         await DATA.put(id, JSON.stringify(owner), cfg);
 122 |         return true;
 123 |     }
 124 |     else {
 125 |         return false;
 126 |     }
 127 | }
 128 | 
 129 | async function delKV(id) {
 130 |     if (id) {
 131 |         await DATA.delete(id);
 132 |         return true;
 133 |     }
 134 |     else {
 135 |         return false;
 136 |     }
 137 | }
 138 | 
 139 | async function listKV(prefix, limit) {
 140 |     return await DATA.list({ prefix, limit });
 141 | }
 142 | 
 143 | async function rateLimit(id) {
 144 |     const key = `ratelimit:${id.toLowerCase()}`;
 145 |     const currentCount = await getKV(key) || 0;
 146 |     const notifyCount = parseInt(currentCount);
 147 |     if (notifyCount >= rateLimitMaxRequests) {
 148 |         return false;
 149 |     }
 150 |     await putKV(key, notifyCount + 1, {
 151 |         expirationTtl: rateLimitDelay
 152 |     });
 153 |     return true
 154 | }
 155 | 
 156 | async function notifyOwner(json) {
 157 |     const { id, message } = json;
 158 |     const isCanSend = await rateLimit(id);
 159 |     if (!isCanSend) {
 160 |         return getResponse(JSON.stringify({ code: 200, data: rateLimitMessage, message: "success" }), 200);
 161 |     }
 162 |     const owner = await getKV(`car_${id.toLowerCase()}`);
 163 |     if (!owner) {
 164 |         return getResponse(JSON.stringify({ code: 500, data: "车辆信息错误！", message: "fail" }), 200);
 165 |     }
 166 |     if(!owner.isNotify){
 167 |         return getResponse(JSON.stringify({ code: 500, data: "车主未开启该功能,请使用其他方式联系车主!", message: "fail" }), 200); 
 168 |     }
 169 |     let resp = null;
 170 |     const { no, notifyType, notifyToken } = owner;
 171 |     const provider = notifyTypeMap.find(element => element.id == notifyType);
 172 |     if (provider && provider.functionName && typeof provider.functionName === 'function') {
 173 |         const sendMsg = `【${no}】${message || notifyMessage}`;
 174 |         resp = await provider.functionName(notifyToken, sendMsg);
 175 |     }
 176 |     else {
 177 |         resp = { code: 500, data: "发送失败!", message: "fail" };
 178 |     }
 179 |     return getResponse(JSON.stringify(resp), 200);
 180 | }
 181 | 
 182 | async function callOwner(json) {
 183 |     const { id } = json;
 184 |     const owner = await getKV(`car_${id.toLowerCase()}`);
 185 |     if (!owner) {
 186 |         return getResponse(JSON.stringify({ code: 500, data: "车辆信息错误！", message: "fail" }), 200);
 187 |     }
 188 |     if(!owner.isCall){
 189 |         return getResponse(JSON.stringify({ code: 500, data: "车主未开启该功能,请使用其他方式联系车主!", message: "fail" }), 200); 
 190 |     }
 191 |     const { phone } = owner;
 192 |     return getResponse(JSON.stringify({ code: 200, data: phone, message: "success" }), 200);
 193 | }
 194 | 
 195 | async function addOwner(json) {
 196 |     try {
 197 |         const { id, no, phone, notifyType, notifyToken, isNotify, isCall } = json;
 198 |         await putKV(`car_${id.toLowerCase()}`, { id, no, phone, notifyType, notifyToken, isNotify, isCall });
 199 |         return getResponse(JSON.stringify({ code: 200, data: "添加成功", message: "success" }), 200);
 200 |     } catch (e) {
 201 |         return getResponse(JSON.stringify({ code: 500, data: "添加失败，" + e.message, message: "success" }), 200);
 202 |     }
 203 | }
 204 | 
 205 | async function deleteOwner(json) {
 206 |     try {
 207 |         const { id } = json;
 208 |         await delKV(`car_${id.toLowerCase()}`);
 209 |         return getResponse(JSON.stringify({ code: 200, data: "删除成功", message: "success" }), 200);
 210 |     } catch (e) {
 211 |         return getResponse(JSON.stringify({ code: 500, data: "删除失败，" + e.message, message: "success" }), 200);
 212 |     }
 213 | }
 214 | 
 215 | async function listOwner() {
 216 |     const value = await listKV("car_", 50);
 217 |     const keys = value.keys;
 218 |     const arrys = [];
 219 |     for (let i = 0; i < keys.length; i++) {
 220 |         const owner = await getKV(keys[i].name);
 221 |         if (!owner || !owner?.id) {
 222 |             continue;
 223 |         }
 224 |         arrys.push(owner);
 225 |     }
 226 |     return getResponse(JSON.stringify({ code: 200, data: arrys, message: "success" }), 200);
 227 | }
 228 | 
 229 | function getNotifyTypeList() {
 230 |     const types = [];
 231 |     notifyTypeMap.forEach(element => {
 232 |         types.push({ text: element.name, value: element.id, tip: element.tip })
 233 |     });
 234 | 
 235 |     return getResponse(JSON.stringify({ code: 200, data: types, message: "success" }), 200);
 236 | }
 237 | 
 238 | function login() {
 239 |     const htmlContent = `<!DOCTYPE html>
 240 |     <html lang="zh-CN">
 241 |     
 242 |     <head>
 243 |         <meta charset="UTF-8">
 244 |         <meta name="viewport"
 245 |             content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 246 |         <title>通知车主挪车</title>
 247 |         <style>
 248 |             * {
 249 |                 box-sizing: border-box;
 250 |                 margin: 0;
 251 |                 padding: 0;
 252 |             }
 253 |     
 254 |             body {
 255 |                 font-family: Arial, sans-serif;
 256 |                 display: flex;
 257 |                 align-items: center;
 258 |                 justify-content: center;
 259 |                 height: 100vh;
 260 |                 background: #f0f2f5;
 261 |                 color: #333;
 262 |             }
 263 |     
 264 |             .container {
 265 |                 text-align: center;
 266 |                 padding: 20px;
 267 |                 width: 100%;
 268 |                 max-width: 400px;
 269 |                 border-radius: 8px;
 270 |                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 271 |                 background: #fff;
 272 |                 margin: 10px
 273 |             }
 274 |     
 275 |             h1 {
 276 |                 font-size: 24px;
 277 |                 margin-bottom: 20px;
 278 |                 color: #007bff;
 279 |             }
 280 |  
 281 |             input{
 282 |                 padding: 5px;
 283 |                 width: 100%;
 284 |             }
 285 |     
 286 |             button {
 287 |                 width: 100%;
 288 |                 padding: 5px;
 289 |                 margin: 10px 0;
 290 |                 font-size: 18px;
 291 |                 font-weight: bold;
 292 |                 color: #fff;
 293 |                 border: none;
 294 |                 border-radius: 6px;
 295 |                 cursor: pointer;
 296 |                 transition: background 0.3s;
 297 |             }
 298 |     
 299 |             .call-btn {
 300 |                 background: #17a2b8;
 301 |             }
 302 |     
 303 |             .call-btn:hover {
 304 |                 background: #138496;
 305 |             }
 306 |     
 307 |             @keyframes float {
 308 |                 0% {
 309 |                     transform: translateY(0px) rotate(0deg);
 310 |                 }
 311 |     
 312 |                 50% {
 313 |                     transform: translateY(-20px) rotate(5deg);
 314 |                 }
 315 |     
 316 |                 100% {
 317 |                     transform: translateY(0px) rotate(0deg);
 318 |                 }
 319 |             }
 320 |     
 321 |             .loading {
 322 |                 pointer-events: none;
 323 |                 position: absolute;
 324 |                 top: 50%;
 325 |                 left: 50%;
 326 |                 transform: translate(-50%, -50%);
 327 |             }
 328 |     
 329 |             .loading::after {
 330 |                 content: "";
 331 |                 position: absolute;
 332 |                 width: 20px;
 333 |                 height: 20px;
 334 |                 border: 3px solid #ffffff;
 335 |                 border-radius: 50%;
 336 |                 border-top-color: transparent;
 337 |                 animation: spin 0.8s linear infinite;
 338 |                 margin-left: 10px;
 339 |             }
 340 |     
 341 |             @keyframes spin {
 342 |                 to {
 343 |                     transform: rotate(360deg);
 344 |                 }
 345 |             }
 346 |     
 347 |             .toast {
 348 |                 position: fixed;
 349 |                 bottom: 20px;
 350 |                 left: 50%;
 351 |                 transform: translateX(-50%);
 352 |                 background: rgba(0, 0, 0, 0.8);
 353 |                 color: white;
 354 |                 padding: 12px 24px;
 355 |                 border-radius: 50px;
 356 |                 font-size: 16px;
 357 |                 opacity: 0;
 358 |                 transition: opacity 0.3s;
 359 |             }
 360 |     
 361 |             .toast.show {
 362 |                 opacity: 1;
 363 |             }
 364 |     
 365 |             .modal {
 366 |                 display: none;
 367 |                 position: fixed;
 368 |                 top: 0;
 369 |                 left: 0;
 370 |                 width: 100%;
 371 |                 height: 100%;
 372 |                 background-color: rgba(0, 0, 0, 0.5);
 373 |             }
 374 |         </style>
 375 |     </head>
 376 |     
 377 |     <body>
 378 |         <div class="container">
 379 |         <h1>登录</h1>
 380 |             <input type="text" id="apiKey" placeholder="请输入API_KEY"/>
 381 |             <button class="call-btn" onclick="login()">登录</button>
 382 |         </div>
 383 |         <div id="toast" class="toast"></div>
 384 |         <div id="loadingBox" class="modal">
 385 |             <div class="loading"></div>
 386 |         </div>
 387 |     
 388 |         <script>
 389 |             function login() {
 390 |                 const authKey = document.getElementById('apiKey').value; 
 391 | 
 392 |                 if (!authKey) {
 393 |                     showToast("请输入API_KEY");
 394 |                     return;
 395 |                 }
 396 |     
 397 |                 showLoading(true);
 398 |                 fetch("/api/login", {
 399 |                     method: "POST",
 400 |                     headers: { "Content-Type": "application/json" },
 401 |                     body: JSON.stringify({
 402 |                         apiKey: authKey 
 403 |                     })
 404 |                 })
 405 |                     .then(response => response.json())
 406 |                     .then(data => {
 407 |                         showLoading(false);                        
 408 |                         if(data.code==200){
 409 |                             showToast("登录成功！");
 410 |                             setTimeout(() => {
 411 |                                 localStorage.setItem('API_KEY', authKey);
 412 |                                 window.location.href="/manager";
 413 |                             }, 500);                            
 414 |                         }
 415 |                         else{
 416 |                             showToast("登录失败，API_KEY错误！");
 417 |                         }
 418 |                     })
 419 |                     .catch(error => {
 420 |                         showLoading(false);
 421 |                         console.error("Error sending notification:", error);
 422 |                         alert("通知发送出错，请检查网络连接。");
 423 |                     });
 424 |             }
 425 |     
 426 |             function showToast(message, duration = 5000) {
 427 |                 const toast = document.getElementById('toast');
 428 |                 toast.textContent = message;
 429 |                 toast.classList.add('show');
 430 |                 setTimeout(() => {
 431 |                     toast.classList.remove('show');
 432 |                 }, duration);
 433 |             }
 434 |     
 435 |             // 显示添加模态框
 436 |             function showLoading(isShow) {
 437 |                 if (isShow) {
 438 |                     document.getElementById('loadingBox').style.display = 'block';
 439 |                 }
 440 |                 else {
 441 |                     document.getElementById('loadingBox').style.display = 'none';
 442 |                 }
 443 |             }
 444 |         </script>
 445 |     </body>
 446 |     
 447 |     </html>`;
 448 | 
 449 |     return new Response(htmlContent, {
 450 |         headers: {
 451 |             'Content-Type': 'text/html;charset=UTF-8',
 452 |             'Access-Control-Allow-Origin': '*',
 453 |             'Access-Control-Allow-Headers': '*'
 454 |         }
 455 |     })
 456 | }
 457 | 
 458 | async function index1(id) {
 459 |     const owner = await getKV(`car_${id.toLowerCase()}`);
 460 |     const isNotify = owner?.isNotify ?? true;
 461 |     const isCall = owner?.isCall ?? true;
 462 | 
 463 |     const htmlContent = `<!DOCTYPE html>
 464 |     <html lang="zh-CN">
 465 |     
 466 |     <head>
 467 |         <meta charset="UTF-8">
 468 |         <meta name="viewport"
 469 |             content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 470 |         <title>通知车主挪车</title>
 471 |         <style>
 472 |             * {
 473 |                 box-sizing: border-box;
 474 |                 margin: 0;
 475 |                 padding: 0;
 476 |             }
 477 |     
 478 |             body {
 479 |                 font-family: Arial, sans-serif;
 480 |                 display: flex;
 481 |                 align-items: center;
 482 |                 justify-content: center;
 483 |                 height: 100vh;
 484 |                 background: #f0f2f5;
 485 |                 color: #333;
 486 |             }
 487 |     
 488 |             .container {
 489 |                 text-align: center;
 490 |                 padding: 20px;
 491 |                 width: 100%;
 492 |                 max-width: 400px;
 493 |                 border-radius: 8px;
 494 |                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 495 |                 background: #fff;
 496 |                 margin: 10px
 497 |             }
 498 |     
 499 |             h1 {
 500 |                 font-size: 24px;
 501 |                 margin-bottom: 20px;
 502 |                 color: #007bff;
 503 |             }
 504 |     
 505 |             p {
 506 |                 margin-bottom: 20px;
 507 |                 font-size: 16px;
 508 |                 color: #555;
 509 |             }
 510 |     
 511 |             button {
 512 |                 width: 100%;
 513 |                 padding: 15px;
 514 |                 margin: 10px 0;
 515 |                 font-size: 18px;
 516 |                 font-weight: bold;
 517 |                 color: #fff;
 518 |                 border: none;
 519 |                 border-radius: 6px;
 520 |                 cursor: pointer;
 521 |                 transition: background 0.3s;
 522 |             }
 523 |     
 524 |             .notify-btn {
 525 |                 background: #28a745;
 526 |             }
 527 |     
 528 |             .notify-btn:hover {
 529 |                 background: #218838;
 530 |             }
 531 |     
 532 |             .call-btn {
 533 |                 background: #17a2b8;
 534 |             }
 535 |     
 536 |             .call-btn:hover {
 537 |                 background: #138496;
 538 |             }
 539 |     
 540 |             .loading {
 541 |                 pointer-events: none;
 542 |                 position: absolute;
 543 |                 top: 50%;
 544 |                 left: 50%;
 545 |                 transform: translate(-50%, -50%);
 546 |             }
 547 |     
 548 |             .loading::after {
 549 |                 content: "";
 550 |                 position: absolute;
 551 |                 width: 20px;
 552 |                 height: 20px;
 553 |                 border: 3px solid #ffffff;
 554 |                 border-radius: 50%;
 555 |                 border-top-color: transparent;
 556 |                 animation: spin 0.8s linear infinite;
 557 |             }
 558 |     
 559 |             @keyframes spin {
 560 |                 0% { transform: translate(-50%, -50%) rotate(0deg); }
 561 |                 100% { transform: translate(-50%, -50%) rotate(360deg); }
 562 |             }
 563 |     
 564 |             .toast {
 565 |                 position: fixed;
 566 |                 bottom: 20px;
 567 |                 left: 50%;
 568 |                 transform: translateX(-50%);
 569 |                 background: rgba(0, 0, 0, 0.8);
 570 |                 color: white;
 571 |                 padding: 12px 24px;
 572 |                 border-radius: 50px;
 573 |                 font-size: 16px;
 574 |                 opacity: 0;
 575 |                 transition: opacity 0.3s;
 576 |             }
 577 |     
 578 |             .toast.show {
 579 |                 opacity: 1;
 580 |             }
 581 |     
 582 |             .modal {
 583 |                 display: none;
 584 |                 position: fixed;
 585 |                 top: 0;
 586 |                 left: 0;
 587 |                 width: 100%;
 588 |                 height: 100%;
 589 |                 background-color: rgba(0, 0, 0, 0.5);
 590 |             }
 591 | 
 592 |             .hide-notify{
 593 |                 ${!isNotify ? `display: none;` : ""}
 594 |             }
 595 |     
 596 |             .hide-call{
 597 |                 ${!isCall ? `display: none;` : ""}
 598 |             }
 599 |         </style>
 600 |     </head>
 601 |     
 602 |     <body>
 603 |         <div class="container">
 604 |             <h1>通知车主挪车</h1>
 605 |             <p>如需通知车主，请点击以下按钮</p>
 606 |             <button class="notify-btn hide-notify" onclick="notifyOwner()">通知车主挪车</button>                    
 607 |             <button class="call-btn hide-call" onclick="callOwner()">拨打车主电话</button>
 608 |         </div>
 609 |         <div id="toast" class="toast"></div>
 610 |         <div id="loadingBox" class="modal">
 611 |             <div class="loading"></div>
 612 |         </div>
 613 |     
 614 |         <script>
 615 |             function getQueryVariable(variable) {
 616 |                 let query = window.location.search.substring(1);
 617 |                 let vars = query.split("&");
 618 |                 for (let i = 0; i < vars.length; i++) {
 619 |                     let pair = vars[i].split("=");
 620 |                     if (pair[0].toLowerCase() == variable.toLowerCase()) {
 621 |                         return pair[1];
 622 |                     }
 623 |                 }
 624 |                 return "";
 625 |             }
 626 |     
 627 |             // 发送通知
 628 |             function notifyOwner() {
 629 |                 let id = getQueryVariable("id");
 630 |     
 631 |                 if (!id) {
 632 |                     showToast("未获取到id参数");
 633 |                     return;
 634 |                 }
 635 |     
 636 |                 showLoading(true);
 637 |                 fetch("/api/notifyOwner", {
 638 |                     method: "POST",
 639 |                     headers: { "Content-Type": "application/json" },
 640 |                     body: JSON.stringify({
 641 |                         id: id,
 642 |                         message: ""
 643 |                     })
 644 |                 })
 645 |                     .then(response => response.json())
 646 |                     .then(data => {
 647 |                         showLoading(false);
 648 |                         showToast(data.data);
 649 |                     })
 650 |                     .catch(error => {
 651 |                         showLoading(false);
 652 |                         console.error("Error sending notification:", error);
 653 |                         alert("通知发送出错，请检查网络连接。");
 654 |                     });
 655 |             }
 656 |     
 657 |             // 拨打车主电话
 658 |             function callOwner() {
 659 |                 let id = getQueryVariable("id");
 660 |     
 661 |                 if (!id) {
 662 |                     showToast("未获取到id参数");
 663 |                     return;
 664 |                 }
 665 |                 showLoading(true);
 666 |                 fetch("/api/callOwner", {
 667 |                     method: "POST",
 668 |                     headers: { "Content-Type": "application/json" },
 669 |                     body: JSON.stringify({
 670 |                         id: id,
 671 |                     })
 672 |                 })
 673 |                     .then(response => response.json())
 674 |                     .then(data => {
 675 |                         showLoading(false);
 676 |                         if (data.code === 200) {
 677 |                             window.location.href = "tel:" + data.data;
 678 |                         } else {
 679 |                             alert(data.data);
 680 |                         }
 681 |                     })
 682 |                     .catch(error => {
 683 |                         showLoading(false);
 684 |                         console.error("Error sending notification:", error);
 685 |                         alert("通知发送出错，请检查网络连接。");
 686 |                     });
 687 |             }
 688 |     
 689 |             function showToast(message, duration = 5000) {
 690 |                 const toast = document.getElementById('toast');
 691 |                 toast.textContent = message;
 692 |                 toast.classList.add('show');
 693 |                 setTimeout(() => {
 694 |                     toast.classList.remove('show');
 695 |                 }, duration);
 696 |             }
 697 |     
 698 |             // 显示添加模态框
 699 |             function showLoading(isShow) {
 700 |                 if (isShow) {
 701 |                     document.getElementById('loadingBox').style.display = 'block';
 702 |                 }
 703 |                 else {
 704 |                     document.getElementById('loadingBox').style.display = 'none';
 705 |                 }
 706 |             }
 707 |         </script>
 708 |     </body>
 709 |     
 710 |     </html>`;
 711 | 
 712 |     return new Response(htmlContent, {
 713 |         headers: {
 714 |             'Content-Type': 'text/html;charset=UTF-8',
 715 |             'Access-Control-Allow-Origin': '*',
 716 |             'Access-Control-Allow-Headers': '*'
 717 |         }
 718 |     })
 719 | }
 720 | 
 721 | async function index2(id) {
 722 |     const owner = await getKV(`car_${id.toLowerCase()}`);
 723 |     const isNotify = owner?.isNotify ?? true;
 724 |     const isCall = owner?.isCall ?? true;
 725 | 
 726 |     const htmlContent = `<!DOCTYPE html>
 727 |     <html lang="zh-CN">
 728 |     
 729 |     <head>
 730 |       <meta charset="UTF-8">
 731 |       <meta name="viewport"
 732 |         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 733 |       <title>通知车主挪车</title>
 734 |       <style>
 735 |         * {
 736 |           box-sizing: border-box;
 737 |           margin: 0;
 738 |           padding: 0;
 739 |         }
 740 |     
 741 |         :root {
 742 |           --primary-color: #4776E6;
 743 |           --secondary-color: #8E54E9;
 744 |           --text-color: #2c3e50;
 745 |           --shadow-color: rgba(0, 0, 0, 0.1);
 746 |         }
 747 |     
 748 |         body {
 749 |           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 750 |           display: flex;
 751 |           align-items: center;
 752 |           justify-content: center;
 753 |           min-height: 100vh;
 754 |           background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 755 |           color: var(--text-color);
 756 |           padding: 20px;
 757 |           line-height: 1.6;
 758 |         }
 759 |     
 760 |         .container {
 761 |           text-align: center;
 762 |           padding: 40px 30px;
 763 |           width: 100%;
 764 |           max-width: 400px;
 765 |           border-radius: 16px;
 766 |           box-shadow: 0 10px 40px var(--shadow-color);
 767 |           background: rgba(255, 255, 255, 0.95);
 768 |           /* backdrop-filter: blur(10px); */
 769 |           transform: translateY(0);
 770 |           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 771 |         }
 772 |     
 773 |         .container:hover {
 774 |           transform: translateY(-8px);
 775 |           box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
 776 |         }
 777 |     
 778 |         h1 {
 779 |           /* font-size: 32px;  */
 780 |           margin-bottom: 25px;
 781 |           background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
 782 |           -webkit-background-clip: text;
 783 |           -webkit-text-fill-color: transparent;
 784 |           font-weight: 700;
 785 |         }
 786 |     
 787 |         .car-icon {
 788 |           font-size: 64px;
 789 |           margin-bottom: 25px;
 790 |           display: inline-block;
 791 |           animation: float 6s ease-in-out infinite;
 792 |         }
 793 |     
 794 |         p {
 795 |           margin-bottom: 30px;
 796 |           /* font-size: 18px;  */
 797 |           color: #546e7a;
 798 |           line-height: 1.8;
 799 |         }
 800 |     
 801 |         .button-group {
 802 |           display: flex;
 803 |           flex-wrap: wrap;
 804 |           /* 允许子元素换行 */
 805 |           justify-content: space-between;
 806 |           /* 子元素在主轴上均匀分布 */
 807 |           gap: 10px;
 808 |           margin-bottom: 20px;
 809 |         }
 810 |     
 811 |         button {
 812 |           flex: 1;
 813 |           padding: 10px;
 814 |           /* font-size: 18px; 
 815 |                 font-weight: 600;  */
 816 |           border-radius: 10px;
 817 |           color: #fff;
 818 |           border: none;
 819 |     
 820 |           cursor: pointer;
 821 |           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 822 |           display: flex;
 823 |           align-items: center;
 824 |           justify-content: center;
 825 |           gap: 10px;
 826 |         }
 827 |     
 828 |         button:active {
 829 |           transform: scale(0.98);
 830 |         }
 831 |     
 832 |         .action-btn {
 833 |           background: linear-gradient(45deg, #546c7c, #546c7c);
 834 |           box-shadow: 0 4px 15px rgba(71, 118, 230, 0.2);
 835 |         }
 836 |     
 837 |         .action-btn:hover {
 838 |           box-shadow: 0 6px 20px rgba(71, 118, 230, 0.3);
 839 |           transform: translateY(-2px);
 840 |         }
 841 |     
 842 |         .notify-btn {
 843 |           background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
 844 |           box-shadow: 0 4px 15px rgba(71, 118, 230, 0.2);
 845 |         }
 846 |     
 847 |         .notify-btn:hover {
 848 |           box-shadow: 0 6px 20px rgba(71, 118, 230, 0.3);
 849 |           transform: translateY(-2px);
 850 |         }
 851 |     
 852 |         .call-btn {
 853 |           background: linear-gradient(45deg, #00b09b, #96c93d);
 854 |           box-shadow: 0 4px 15px rgba(0, 176, 155, 0.2);
 855 |         }
 856 |     
 857 |         .call-btn:hover {
 858 |           box-shadow: 0 6px 20px rgba(0, 176, 155, 0.3);
 859 |           transform: translateY(-2px);
 860 |         }
 861 |     
 862 |         @keyframes float {
 863 |           0% {
 864 |             transform: translateY(0px) rotate(0deg);
 865 |           }
 866 |     
 867 |           50% {
 868 |             transform: translateY(-20px) rotate(5deg);
 869 |           }
 870 |     
 871 |           100% {
 872 |             transform: translateY(0px) rotate(0deg);
 873 |           }
 874 |         }
 875 |     
 876 |         .loading {
 877 |           pointer-events: none;
 878 |           position: absolute;
 879 |           top: 50%;
 880 |           left: 50%;
 881 |           transform: translate(-50%, -50%);
 882 |         }
 883 |     
 884 |         .loading::after {
 885 |           content: "";
 886 |           position: absolute;
 887 |           width: 20px;
 888 |           height: 20px;
 889 |           border: 3px solid #ffffff;
 890 |           border-radius: 50%;
 891 |           border-top-color: transparent;
 892 |           animation: spin 0.8s linear infinite;
 893 |         }
 894 |     
 895 |         @keyframes spin {
 896 |             0% { transform: translate(-50%, -50%) rotate(0deg); }
 897 |             100% { transform: translate(-50%, -50%) rotate(360deg); }
 898 |         }
 899 |     
 900 |         .toast {
 901 |           position: fixed;
 902 |           bottom: 20px;
 903 |           left: 50%;
 904 |           transform: translateX(-50%);
 905 |           background: rgba(0, 0, 0, 0.8);
 906 |           color: white;
 907 |           padding: 12px 24px;
 908 |           border-radius: 50px;
 909 |           font-size: 16px;
 910 |           opacity: 0;
 911 |           transition: opacity 0.3s;
 912 |         }
 913 |     
 914 |         .toast.show {
 915 |           opacity: 1;
 916 |         }
 917 |     
 918 |         textarea {
 919 |           width: 100%;
 920 |           padding: 10px;
 921 |           margin-bottom: 20px;
 922 |           border: 1px solid #ccc;
 923 |           border-radius: 4px;
 924 |         }
 925 |     
 926 |         .modal {
 927 |           display: none;
 928 |           position: fixed;
 929 |           top: 0;
 930 |           left: 0;
 931 |           width: 100%;
 932 |           height: 100%;
 933 |           background-color: rgba(0, 0, 0, 0.5);
 934 |         }
 935 | 
 936 |         .hide-notify{
 937 |             ${!isNotify ? `display: none;` : ""}
 938 |         }
 939 | 
 940 |         .hide-call{
 941 |             ${!isCall ? `display: none;` : ""}
 942 |         }
 943 |       </style>
 944 |     </head>
 945 |     
 946 |     <body>
 947 |       <div class="container">
 948 |         <div class="car-icon">🚗</div>
 949 |         <h1>温馨提示</h1>
 950 |         <p>不好意思阻碍到您的出行了<br>请通过以下方式联系我，我会立即前来挪车</p>
 951 |         <div class="button-group hide-notify">
 952 |             <textarea rows="5" id="notifyMessage" placeholder="给车主留言">车主，有人需要您挪车，请及时处理一下哦。</textarea>
 953 |         </div>        
 954 |         <div class="button-group hide-notify">
 955 |           <button class="action-btn" data-msg="车主，有人需要您挪车，请及时处理一下哦。">
 956 |             <span>挪车</span>
 957 |           </button>
 958 |           <button class="action-btn" data-msg="车主，您爱车的车窗未关，请及时处理一下哦。">
 959 |             <span>未关窗</span>
 960 |           </button>
 961 |         </div>
 962 |         <div class="button-group hide-notify">
 963 |           <button class="action-btn" data-msg="车主，您爱车的车灯未关，请及时处理一下哦。">
 964 |             <span>未关灯</span>
 965 |           </button>
 966 |           <button class="action-btn" data-msg="车主，此处有交警查车，请及时处理一下哦。">
 967 |             <span>交警</span>
 968 |           </button>
 969 |         </div>
 970 |         <div class="button-group">
 971 |           <button class="notify-btn hide-notify" onclick="notifyOwner()">
 972 |             <span>微信通知</span> 📱
 973 |           </button>
 974 |           <button class="call-btn hide-call" onclick="callOwner()">
 975 |             <span>电话联系</span> 📞
 976 |           </button>
 977 |         </div>
 978 |       </div>
 979 |       <div id="toast" class="toast"></div>
 980 |       <div id="loadingBox" class="modal">
 981 |         <div class="loading"></div>
 982 |       </div>
 983 |       <script>
 984 |     
 985 |         document.addEventListener('DOMContentLoaded', () => {
 986 |           let btns = document.querySelectorAll(".action-btn");
 987 |           btns.forEach(element => {
 988 |             element.addEventListener("click", function (e) {
 989 |               document.getElementById("notifyMessage").value = e.currentTarget.dataset.msg;
 990 |             })
 991 |           });
 992 |         });
 993 |     
 994 |         function showToast(message, duration = 5000) {
 995 |           const toast = document.getElementById('toast');
 996 |           toast.textContent = message;
 997 |           toast.classList.add('show');
 998 |           setTimeout(() => {
 999 |             toast.classList.remove('show');
1000 |           }, duration);
1001 |         }
1002 |     
1003 |         // 显示关闭加载框
1004 |         function showLoading(isShow) {
1005 |           if (isShow) {
1006 |             document.getElementById('loadingBox').style.display = 'block';
1007 |           }
1008 |           else {
1009 |             document.getElementById('loadingBox').style.display = 'none';
1010 |           }
1011 |         }
1012 |     
1013 |         function getQueryVariable(variable) {
1014 |           let query = window.location.search.substring(1);
1015 |           let vars = query.split("&");
1016 |           for (let i = 0; i < vars.length; i++) {
1017 |             let pair = vars[i].split("=");
1018 |             if (pair[0].toLowerCase() == variable.toLowerCase()) {
1019 |               return pair[1];
1020 |             }
1021 |           }
1022 |           return "";
1023 |         }
1024 |     
1025 |         // 发送通知
1026 |         function notifyOwner() {
1027 |           let id = getQueryVariable("id");
1028 |           let message = document.getElementById("notifyMessage").value || "您好，有人需要您挪车，请及时处理。"
1029 |           if (!id) {
1030 |             showToast("未获取到id参数");
1031 |             return;
1032 |           }
1033 |           showLoading(true);
1034 |           fetch("/api/notifyOwner", {
1035 |             method: "POST",
1036 |             headers: { "Content-Type": "application/json" },
1037 |             body: JSON.stringify({
1038 |               id: id,
1039 |               message: message
1040 |             })
1041 |           })
1042 |             .then(response => response.json())
1043 |             .then(data => {
1044 |               showLoading(false);
1045 |               showToast(data.data);
1046 |             })
1047 |             .catch(error => {
1048 |               showLoading(false);
1049 |               console.error("Error sending notification:", error);
1050 |               alert("通知发送出错，请检查网络连接。");
1051 |             });
1052 |         }
1053 |     
1054 |         // 拨打车主电话
1055 |         function callOwner() {
1056 |           let id = getQueryVariable("id");
1057 |     
1058 |           if (!id) {
1059 |             showToast("未获取到id参数");
1060 |             return;
1061 |           }
1062 |           showLoading(true);
1063 |           fetch("/api/callOwner", {
1064 |             method: "POST",
1065 |             headers: { "Content-Type": "application/json" },
1066 |             body: JSON.stringify({
1067 |               id: id,
1068 |             })
1069 |           })
1070 |             .then(response => response.json())
1071 |             .then(data => {
1072 |               showLoading(false);
1073 |               if (data.code === 200) {
1074 |                 window.location.href = "tel:" + data.data;
1075 |               } else {
1076 |                 alert(data.data);
1077 |               }
1078 |             })
1079 |             .catch(error => {
1080 |               showLoading(false);
1081 |               console.error("Error sending notification:", error);
1082 |               alert("通知发送出错，请检查网络连接。");
1083 |             });
1084 |         }
1085 |       </script>
1086 |     </body>
1087 |     
1088 |     </html>`;
1089 |     return new Response(htmlContent, {
1090 |         headers: {
1091 |             'Content-Type': 'text/html;charset=UTF-8',
1092 |             'Access-Control-Allow-Origin': '*',
1093 |             'Access-Control-Allow-Headers': '*'
1094 |         }
1095 |     })
1096 | }
1097 | 
1098 | function managerOwnerIndex() {
1099 |     const htmlContent = `<!DOCTYPE html>
1100 |     <html lang="zh">
1101 |     
1102 |     <head>
1103 |         <meta charset="UTF-8">
1104 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
1105 |         <title>车辆管理系统</title>
1106 |         <style>
1107 |             * {
1108 |                 margin: 0;
1109 |                 padding: 0;
1110 |                 box-sizing: border-box;
1111 |             }
1112 |     
1113 |             body {
1114 |                 font-family: Arial, sans-serif;
1115 |                 background-color: #f5f5f5;
1116 |                 padding: 20px;
1117 |             }
1118 |     
1119 |             .container {
1120 |                 max-width: 1200px;
1121 |                 margin: 0 auto;
1122 |             }
1123 |     
1124 |             .header {
1125 |                 background-color: #fff;
1126 |                 padding: 20px;
1127 |                 border-radius: 8px;
1128 |                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1129 |                 margin-bottom: 20px;
1130 |             }
1131 |     
1132 |             .header h1 {
1133 |                 color: #333;
1134 |                 margin-bottom: 20px;
1135 |             }
1136 |     
1137 |             .add-btn {
1138 |                 padding: 8px 16px;
1139 |                 background-color: #4CAF50;
1140 |                 color: white;
1141 |                 border: none;
1142 |                 border-radius: 4px;
1143 |                 cursor: pointer;
1144 |                 transition: background-color 0.3s;
1145 |                 margin-bottom: 20px;
1146 |             }
1147 |     
1148 |             .add-btn:hover {
1149 |                 background-color: #45a049;
1150 |             }
1151 | 
1152 |             .loginOut-btn {
1153 |                 padding: 8px 16px;
1154 |                 background-color: #dc3545;
1155 |                 color: white;
1156 |                 border: none;
1157 |                 border-radius: 4px;
1158 |                 cursor: pointer;
1159 |                 transition: background-color 0.3s;
1160 |                 margin-bottom: 20px;
1161 |             }
1162 |     
1163 |             .loginOut-btn:hover {
1164 |                 background-color: #c82333;
1165 |             }            
1166 |     
1167 |             .table-container {
1168 |                 background-color: #fff;
1169 |                 border-radius: 8px;
1170 |                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1171 |                 overflow-x: auto;
1172 |             }
1173 |     
1174 |             table {
1175 |                 width: 100%;
1176 |                 border-collapse: collapse;
1177 |             }
1178 |     
1179 |             th,
1180 |             td {
1181 |                 padding: 12px 15px;
1182 |                 text-align: left;
1183 |                 border-bottom: 1px solid #ddd;
1184 |                 white-space:nowrap;                
1185 |             }
1186 |     
1187 |             th {
1188 |                 background-color: #f8f9fa;
1189 |                 font-weight: 600;
1190 |             }
1191 |     
1192 |             .actions {
1193 |                 display: flex;
1194 |                 gap: 8px;
1195 |             }
1196 |     
1197 |             .delete-btn {
1198 |                 background-color: #dc3545;
1199 |                 color: white;
1200 |                 padding: 5px;
1201 |                 border: none;
1202 |                 border-radius: 4px;
1203 |                 cursor: pointer;
1204 |                 transition: background-color 0.3s;
1205 |             }
1206 |     
1207 |             .delete-btn:hover {
1208 |                 background-color: #c82333;
1209 |             }
1210 |     
1211 |             .edit-btn {
1212 |                 background-color: #ffc107;
1213 |                 color: white;
1214 |                 padding: 5px;
1215 |                 border: none;
1216 |                 border-radius: 4px;
1217 |                 cursor: pointer;
1218 |                 transition: background-color 0.3s;
1219 |             }
1220 |     
1221 |             .edit-btn:hover {
1222 |                 background-color: #e0a800;
1223 |             }
1224 | 
1225 |             .notify-btn {
1226 |                 background-color: #17a2b8;
1227 |                 color: white;
1228 |                 padding: 5px;
1229 |                 border: none;
1230 |                 border-radius: 4px;
1231 |                 cursor: pointer;
1232 |                 transition: background-color 0.3s;
1233 |             }
1234 |     
1235 |             .notify-btn:hover {
1236 |                 background-color: #138496;
1237 |             }
1238 |     
1239 |             .modal {
1240 |                 display: none;
1241 |                 position: fixed;
1242 |                 top: 0;
1243 |                 left: 0;
1244 |                 width: 100%;
1245 |                 height: 100%;
1246 |                 background-color: rgba(0, 0, 0, 0.5);
1247 |                 overflow-y: scroll;
1248 |             }
1249 |     
1250 |             .modal-content {
1251 |                 background-color: #fff;
1252 |                 margin: auto auto;
1253 |                 padding: 20px;
1254 |                 border-radius: 8px;
1255 |                 width: 80%;
1256 |                 max-width: 500px;
1257 |                 position: absolute;
1258 |                 top: 50%;
1259 |                 left: 50%;
1260 |                 transform: translate(-50%, -50%);
1261 |             }
1262 |     
1263 |             .loading {
1264 |                 pointer-events: none;
1265 |                 position: absolute;
1266 |                 top: 50%;
1267 |                 left: 50%;
1268 |                 transform: translate(-50%, -50%);
1269 |               }
1270 |           
1271 |               .loading::after {
1272 |                 content: "";
1273 |                 position: absolute;
1274 |                 width: 20px;
1275 |                 height: 20px;
1276 |                 border: 3px solid #ffffff;
1277 |                 border-radius: 50%;
1278 |                 border-top-color: transparent;
1279 |                 animation: spin 0.8s linear infinite;
1280 |               }
1281 |           
1282 |               @keyframes spin {
1283 |                   0% { transform: translate(-50%, -50%) rotate(0deg); }
1284 |                   100% { transform: translate(-50%, -50%) rotate(360deg); }
1285 |               }            
1286 |     
1287 |             .close {
1288 |                 float: right;
1289 |                 cursor: pointer;
1290 |                 font-size: 24px;
1291 |             }
1292 |     
1293 |             .add-form {
1294 |                 display: flex;
1295 |                 flex-direction: column;
1296 |                 gap: 10px;
1297 |             }
1298 |     
1299 |             .input-group {
1300 |                 display: flex;
1301 |                 flex-direction: column;
1302 |             }
1303 |     
1304 |             input,
1305 |             textarea,
1306 |             select {
1307 |                 padding: 8px 4px;
1308 |                 border: 1px solid #ddd;
1309 |                 border-radius: 4px;
1310 |                 font-size: 14px;
1311 |             }
1312 |     
1313 |             h2,
1314 |             label {
1315 |                 margin-bottom: 5px;
1316 |             }
1317 |             
1318 |         </style>
1319 |     </head>
1320 |     
1321 |     <body>
1322 |         <div class="container">
1323 |             <div class="header">
1324 |                 <h1>车辆管理系统</h1>
1325 |                 <button class="add-btn" onclick="getOwnerList()">刷新列表</button>
1326 |                 <button class="add-btn" onclick="showAddModal()">添加车辆</button>
1327 |                 <button class="loginOut-btn" onclick="loginOut()">注销登录</button>
1328 |             </div>
1329 |             <div class="table-container">
1330 |                 <table>
1331 |                     <thead>
1332 |                         <tr>
1333 |                             <th>车辆ID</th>
1334 |                             <th>车牌号</th>
1335 |                             <th>手机号</th>
1336 |                             <th>通知方式</th>
1337 |                             <th>通知Token</th>
1338 |                             <th>消息通知</th>
1339 |                             <th>电话通知</th>
1340 |                             <th>操作</th>
1341 |                         </tr>
1342 |                     </thead>
1343 |                     <tbody id="ownerList">
1344 |                     </tbody>
1345 |                 </table>
1346 |             </div>
1347 |         </div>
1348 |         <div id="addModal" class="modal">
1349 |             <div class="modal-content">
1350 |                 <span class="close" onclick="closeAddModal()">&times;</span>
1351 |                 <h2>车辆信息</h2>
1352 |                 <form class="add-form" onsubmit="event.preventDefault(); addOwner();">
1353 |                     <div class="input-group">
1354 |                         <label for="addId">车辆ID</label>
1355 |                         <input type="text" id="addId" placeholder="车辆ID，可为任意内容唯一即可">
1356 |                     </div>
1357 |                     <div class="input-group">
1358 |                         <label for="addId">车牌号</label>
1359 |                         <input type="text" id="addNo" placeholder="车牌号">
1360 |                     </div>
1361 |                     <div class="input-group">
1362 |                         <label for="addPhone">手机号</label>
1363 |                         <input type="text" id="addPhone" placeholder="手机号">
1364 |                     </div>
1365 |                     <div class="input-group">
1366 |                         <label for="addNotifyType">通知方式</label>
1367 |                         <select id="addNotifyType"></select>
1368 |                     </div>
1369 |                     <div class="input-group">
1370 |                         <label for="addNotifyToken">通知Token</label>
1371 |                         <textarea rows="10" id="addNotifyToken" placeholder="通知Token"></textarea>
1372 |                     </div>                   
1373 |                     <div>
1374 |                         <input type="checkbox" id="addIsNotify" />
1375 |                         <label for="addIsNotify">开启消息通知</label>
1376 | 
1377 |                         <input type="checkbox" id="addIsCall" />
1378 |                         <label for="addIsCall">开启电话通知</label>
1379 |                     </div>   
1380 |                     <button type="submit" class="add-btn">确定</button>
1381 |                 </form>
1382 |             </div>
1383 |         </div>
1384 |         <div id="loadingBox" class="modal">
1385 |             <div class="loading"></div>
1386 |         </div>        
1387 |     
1388 |         <script>
1389 |             function loginOut() {
1390 |                 if (!confirm('确认退出登录吗？')) {
1391 |                     return;
1392 |                 } 
1393 |                 localStorage.clear();
1394 |                 setTimeout(()=>{
1395 |                     window.location.href="/login"
1396 |                 },1000)
1397 |             }
1398 | 
1399 |             // 显示关闭加载框
1400 |             function showLoading(isShow) {
1401 |               if (isShow) {
1402 |                 document.getElementById('loadingBox').style.display = 'block';
1403 |               }
1404 |               else {
1405 |                 document.getElementById('loadingBox').style.display = 'none';
1406 |               }
1407 |             }            
1408 |     
1409 |             // 获取车辆列表
1410 |             function getOwnerList() {
1411 |                 const authKey = localStorage.getItem('API_KEY') || "";
1412 |                 if (!authKey) {
1413 |                     alert("请输入API_KEY");
1414 |                     return;
1415 |                 }
1416 | 
1417 |                 showLoading(true);
1418 |     
1419 |                 fetch("/api/listOwner", {
1420 |                         method: 'POST',
1421 |                         headers: {
1422 |                             "Content-Type": "application/json",
1423 |                             "Authorization": "Bearer " + authKey
1424 |                         },
1425 |                     })
1426 |                     .then(response => response.json())
1427 |                     .then(data => {
1428 |                         showLoading(false);
1429 |                         if (data.code === 200) {
1430 |                             displayOwnerList(data.data);
1431 |                         } else {
1432 |                             alert(data.data);
1433 |                         }
1434 |                     })
1435 |                     .catch(error => {
1436 |                         showLoading(false);
1437 |                         console.error("Error sending notification:", error);
1438 |                         alert("通知发送出错，请检查网络连接。");
1439 |                     });
1440 |             }
1441 |     
1442 |             // 显示车辆列表
1443 |             function displayOwnerList(data) {
1444 |                 const tbody = document.getElementById('ownerList');
1445 |                 tbody.innerHTML = '';
1446 |                 data.forEach(owner => {
1447 |                     const tr = document.createElement('tr');
1448 |                     tr.innerHTML =\`
1449 |                     <td><a href="/?id=\${owner.id}" target="_blank">\${owner.id}</a></td>
1450 |                     <td>\${owner.no}</td>
1451 |                     <td>\${owner.phone}</td>
1452 |                     <td>\${owner.notifyType}</td>
1453 |                     <td>\${owner.notifyToken.length>30?owner.notifyToken.substring(0,30)+"...":owner.notifyToken}</td>
1454 |                     <td>\${owner.isNotify?"已开启":"未开启"}</td>
1455 |                     <td>\${owner.isCall?"已开启":"未开启"}</td>
1456 |                     <td class="actions">
1457 |                         <button class="notify-btn" onclick="notifyOwner('\${owner.id}')">通知</button>
1458 |                         <button class="edit-btn" onclick="showEditModal('\${owner.id}', '\${owner.no}', '\${owner.phone}', '\${owner.notifyType}', '\${owner.notifyToken}', \${owner.isNotify}, \${owner.isCall})">编辑</button>
1459 |                         <button class="delete-btn" onclick="deleteOwner('\${owner.id}')">删除</button>
1460 |                     </td>\`;
1461 |                     tbody.appendChild(tr);
1462 |                 });
1463 |             }
1464 | 
1465 |             // 通知车辆
1466 |             function notifyOwner(id) {
1467 |                 showLoading(true);
1468 |                 fetch("/api/notifyOwner", {
1469 |                         method: 'POST',
1470 |                         headers: {
1471 |                             'Content-Type': 'application/json'
1472 |                         },
1473 |                         body: JSON.stringify({
1474 |                             id
1475 |                         })
1476 |                     })
1477 |                     .then(response => response.json())
1478 |                     .then(data => {
1479 |                         showLoading(false);
1480 |                         if (data.code === 200) {
1481 |                             alert(data.data);
1482 |                         } else {
1483 |                             alert(data.data);
1484 |                         }
1485 |                     })
1486 |                     .catch(error => {
1487 |                         showLoading(false);
1488 |                         console.error("Error sending notification:", error);
1489 |                         alert("通知发送出错，请检查网络连接。");
1490 |                     });
1491 |             }
1492 | 
1493 |             // 添加车辆
1494 |             function addOwner() {
1495 |                 const id = document.getElementById('addId').value;
1496 |                 const no = document.getElementById('addNo').value;
1497 |                 const phone = document.getElementById('addPhone').value;
1498 |                 const notifyType = document.getElementById('addNotifyType').value;
1499 |                 const notifyToken = document.getElementById('addNotifyToken').value;
1500 |                 const isNotify = document.getElementById('addIsNotify').checked;
1501 |                 const isCall = document.getElementById('addIsCall').checked;
1502 |                 if (!id || !phone || !notifyType || !notifyToken) {
1503 |                     alert('请填写所有字段');
1504 |                     return;
1505 |                 }
1506 | 
1507 |                 if (!isNotify && !isCall ) {
1508 |                     alert('请选择通知方式');
1509 |                     return;
1510 |                 }
1511 |     
1512 |                 const authKey = localStorage.getItem('API_KEY') || "";
1513 |                 if (!authKey) {
1514 |                     alert("请输入API_KEY");
1515 |                     return;
1516 |                 }
1517 | 
1518 |                 showLoading(true);
1519 |     
1520 |                 fetch("/api/addOwner", {
1521 |                         method: 'POST',
1522 |                         headers: {
1523 |                             'Content-Type': 'application/json',
1524 |                             "Authorization": "Bearer " + authKey
1525 |                         },
1526 |                         body: JSON.stringify({
1527 |                             id,
1528 |                             no,
1529 |                             phone,
1530 |                             notifyType,
1531 |                             notifyToken,
1532 |                             isNotify,
1533 |                             isCall
1534 |                         })
1535 |                     })
1536 |                     .then(response => response.json())
1537 |                     .then(data => {
1538 |                         showLoading(false);
1539 |                         if (data.code === 200) {
1540 |                             alert(data.data);
1541 |                             closeAddModal();
1542 |                             getOwnerList();
1543 |                         } else {
1544 |                             alert(data.data);
1545 |                         }
1546 |                     })
1547 |                     .catch(error => {
1548 |                         showLoading(false);
1549 |                         console.error("Error sending notification:", error);
1550 |                         alert("通知发送出错，请检查网络连接。");
1551 |                     });
1552 |     
1553 |             }
1554 |     
1555 |             // 删除车辆
1556 |             function deleteOwner(id) {
1557 |                 const authKey = localStorage.getItem('API_KEY') || "";
1558 |                 if (!authKey) {
1559 |                     alert("请输入API_KEY");
1560 |                     return;
1561 |                 }
1562 |     
1563 |                 if (!confirm('确认删除该车辆？')) {
1564 |                     return;
1565 |                 }
1566 |     
1567 |                 showLoading(true);
1568 |                 fetch("/api/deleteOwner", {
1569 |                         method: 'POST',
1570 |                         headers: {
1571 |                             'Content-Type': 'application/json',
1572 |                             "Authorization": "Bearer " + authKey
1573 |                         },
1574 |                         body: JSON.stringify({
1575 |                             id
1576 |                         })
1577 |                     })
1578 |                     .then(response => response.json())
1579 |                     .then(data => {
1580 |                         showLoading(false);
1581 |                         if (data.code === 200) {
1582 |                             alert(data.data);
1583 |                             getOwnerList();
1584 |                         } else {
1585 |                             alert(data.data);
1586 |                         }
1587 |                     })
1588 |                     .catch(error => {
1589 |                         showLoading(false);
1590 |                         console.error("Error sending notification:", error);
1591 |                         alert("通知发送出错，请检查网络连接。");
1592 |                     });
1593 |             }
1594 |     
1595 |             //获取通知渠道列表
1596 |             function notifyTypeList() {
1597 |                 const notifyType = document.getElementById('addNotifyType');
1598 |                 fetch("/api/notifyTypeList", {
1599 |                         method: "POST",
1600 |                         headers: {
1601 |                             "Content-Type": "application/json"
1602 |                         }
1603 |                     })
1604 |                     .then(response => response.json())
1605 |                     .then(data => {
1606 |                         if (data.code == 200) {
1607 |                             data.data.forEach(optionData => {
1608 |                                 const optionElement = document.createElement('option');
1609 |                                 optionElement.value = optionData.value;
1610 |                                 optionElement.textContent = optionData.text;
1611 |                                 optionElement.dataset.tip = optionData.tip; // 存储 tip 值
1612 |                                 notifyType.appendChild(optionElement);
1613 |                             });
1614 |     
1615 |                             if (notifyType.options.length > 0) {
1616 |                                 addNotifyToken.placeholder = "请输入通知渠道所需的参数格式如下：" + notifyType.options[0].dataset.tip;
1617 |                             }
1618 |     
1619 |                             // 添加 change 事件监听器
1620 |                             notifyType.addEventListener('change', () => {
1621 |                                 const selectedOption = notifyType.options[notifyType.selectedIndex];
1622 |                                 addNotifyToken.placeholder = "请输入通知渠道所需的参数格式如下：" + selectedOption.dataset.tip;
1623 |                             });
1624 |                         }
1625 |                     })
1626 |                     .catch(error => {
1627 |                         console.error('Error fetching options:', error);
1628 |                     });
1629 |             }
1630 |     
1631 |             // 显示编辑模态框
1632 |             function showEditModal(id, no, phone, notifyType, notifyToken, isNotify, isCall) {
1633 |                 document.getElementById('addId').value = id;
1634 |                 document.getElementById('addNo').value = no;
1635 |                 document.getElementById('addPhone').value = phone;
1636 |                 document.getElementById('addNotifyType').value = notifyType;
1637 |                 document.getElementById('addNotifyToken').value = notifyToken;
1638 |                 document.getElementById('addIsNotify').checked = isNotify;
1639 |                 document.getElementById('addIsCall').checked = isCall;
1640 |                 document.getElementById('addModal').style.display = 'block';
1641 |             }
1642 |     
1643 |             // 显示添加模态框
1644 |             function showAddModal() {
1645 |                 document.getElementById('addModal').style.display = 'block';
1646 |             }
1647 |     
1648 |             // 关闭添加模态框
1649 |             function closeAddModal() {
1650 |                 document.getElementById('addModal').style.display = 'none';
1651 |                 clearAddForm();
1652 |             }
1653 |     
1654 |             // 清空添加表单
1655 |             function clearAddForm() {
1656 |                 document.getElementById('addId').value = '';
1657 |                 document.getElementById('addNo').value = '';
1658 |                 document.getElementById('addPhone').value = '';
1659 |                 //document.getElementById('addNotifyType').value = '';
1660 |                 document.getElementById('addNotifyToken').value = '';
1661 |                 document.getElementById('addIsNotify').checked = false;
1662 |                 document.getElementById('addIsCall').checked = false;
1663 |             }
1664 |     
1665 |             // 页面加载时获取车辆列表
1666 |             // window.onload = function() {
1667 |             //    getOwnerList();
1668 |             // }
1669 |     
1670 |             document.addEventListener('DOMContentLoaded', () => {
1671 |                 const apiKey = localStorage.getItem('API_KEY')||"";
1672 |                 if(!apiKey){
1673 |                     window.location.href="/login";
1674 |                     return;
1675 |                 }
1676 | 
1677 |                 getOwnerList();
1678 |                 notifyTypeList();
1679 |             });
1680 |     
1681 |             // 点击模态框外部关闭模态框
1682 |             // window.onclick = function (event) {
1683 |             //     if (event.target == document.getElementById('addModal')) {
1684 |             //         closeAddModal();
1685 |             //     }
1686 |             // }
1687 |         </script>
1688 |     </body>
1689 |     
1690 |     </html>`;
1691 | 
1692 |     return new Response(htmlContent, {
1693 |         headers: {
1694 |             'Content-Type': 'text/html;charset=UTF-8',
1695 |             'Access-Control-Allow-Origin': '*',
1696 |             'Access-Control-Allow-Headers': '*'
1697 |         }
1698 |     })
1699 | }
1700 | 
1701 | async function wxpusher(token, message) {
1702 |     const tokens = token.split('|');
1703 |     const reqUrl = 'https://wxpusher.zjiecode.com/api/send/message';
1704 |     const jsonBody = {
1705 |         appToken: `${tokens[0]}`,
1706 |         uids: [`${tokens[1]}`],
1707 |         content: `${message}`,
1708 |         contentType: 1
1709 |     }
1710 |     const response = await postRequest(reqUrl, jsonBody);
1711 |     const json = await response.json();
1712 |     const { code } = json;
1713 |     if (code == 1000) {
1714 |         return { code: 200, data: sendSuccessMessage, message: "success" };
1715 |     }
1716 |     else {
1717 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1718 |     }
1719 | }
1720 | 
1721 | async function bark(token, message) {
1722 |     const tokens = token.split('|');
1723 |     const reqUrl = 'https://api.day.app/push';
1724 |     const jsonBody = {
1725 |         "body": message,
1726 |         "title": "挪车通知",
1727 |         "device_key": tokens[0] || "",
1728 |         "sound": tokens[1] || "multiwayinvitation",
1729 |         "group": "挪车通知",
1730 |         "call": "1"
1731 |     }
1732 | 
1733 |     const response = await postRequest(reqUrl, jsonBody);
1734 |     const json = await response.json();
1735 |     const { code } = json;
1736 |     if (code == 200) {
1737 |         return { code: 200, data: sendSuccessMessage, message: "success" }
1738 |     }
1739 |     else {
1740 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1741 |     }
1742 | }
1743 | 
1744 | async function feishu(token, message) {
1745 |     const reqUrl = `https://open.feishu.cn/open-apis/bot/v2/hook/${token}`;
1746 |     const jsonBody = {
1747 |         "msg_type": "text",
1748 |         "content": {
1749 |             "text": message
1750 |         }
1751 |     }
1752 |     const response = await postRequest(reqUrl, jsonBody);
1753 |     const json = await response.json();
1754 |     const { code } = json;
1755 |     if (code == 0) {
1756 |         return { code: 200, data: sendSuccessMessage, message: "success" };
1757 |     }
1758 |     else {
1759 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1760 |     }
1761 | }
1762 | 
1763 | async function weixin(token, message) {
1764 |     const reqUrl = `https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=${token}`;
1765 |     const jsonBody = {
1766 |         "msgtype": "text",
1767 |         "text": {
1768 |             "content": message
1769 |         }
1770 |     }
1771 |     const response = await postRequest(reqUrl, jsonBody);
1772 |     const json = await response.json();
1773 |     const { errcode } = json;
1774 |     if (errcode == 0) {
1775 |         return { code: 200, data: sendSuccessMessage, message: "success" };
1776 |     }
1777 |     else {
1778 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1779 |     }
1780 | }
1781 | 
1782 | async function dingtalk(token, message) {
1783 |     const reqUrl = `https://oapi.dingtalk.com/robot/send?access_token=${token}`;
1784 |     const jsonBody = {
1785 |         "msgtype": "text",
1786 |         "text": {
1787 |             "content": message
1788 |         }
1789 |     }
1790 |     const response = await postRequest(reqUrl, jsonBody);
1791 |     const json = await response.json();
1792 |     const { errcode } = json;
1793 |     if (errcode == 0) {
1794 |         return { code: 200, data: sendSuccessMessage, message: "success" };
1795 |     }
1796 |     else {
1797 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1798 |     }
1799 | }
1800 | 
1801 | async function onebot(token, message) {
1802 |     const tokens = token.split('|');
1803 |     const reqUrl = tokens[0];
1804 |     const access_token = tokens[1];
1805 |     const uid = tokens[2];
1806 |     const jsonBody = {
1807 |         "message": message
1808 |     }
1809 | 
1810 |     if (reqUrl.includes("send_private_msg")) {
1811 |         jsonBody["user_id"] = uid;
1812 |     }
1813 |     else {
1814 |         jsonBody["group_id"] = uid;
1815 |     }
1816 | 
1817 |     const headers = { "Authorization": `Bearer ${access_token}` };
1818 |     const response = await postRequest(reqUrl, jsonBody, headers);
1819 |     const json = await response.json();
1820 |     const { retcode } = json;
1821 |     if (retcode == 0) {
1822 |         return { code: 200, data: sendSuccessMessage, message: "success" };
1823 |     }
1824 |     else {
1825 |         return { code: 500, data: "通知发送失败，请稍后重试。", message: "fail" };
1826 |     }
1827 | }
1828 | 
1829 | function getResponse(resp, status = 200, headers = {}) {
1830 |     return new Response(resp, {
1831 |         status: status,
1832 |         headers: {
1833 |             'Content-Type': 'application/json',
1834 |             'Access-Control-Allow-Origin': '*',
1835 |             'Access-Control-Allow-Headers': '*',
1836 |             ...headers
1837 |         }
1838 |     });
1839 | }
1840 | 
1841 | async function postRequest(reqUrl, jsonBody, headers) {
1842 |     const response = await fetch(reqUrl, {
1843 |         method: 'POST',
1844 |         headers: {
1845 |             'Content-Type': 'application/json',
1846 |             ...headers
1847 |         },
1848 |         body: JSON.stringify(jsonBody)
1849 |     });
1850 | 
1851 |     if (!response.ok) {
1852 |         throw new Error('Unexpected response ' + response.status);
1853 |     }
1854 |     return response;
1855 | }
1856 | 


--------------------------------------------------------------------------------