完善查询界面和复制功能

添加 Axios 以实现更稳健的 HTTP 请求。 标准化错误处理和
单元格溢出行为。 启用将所有敏感 ID 复制到剪贴板。
限制 API url 修剪。 调整复制按钮的样式。

这些更改提高了查询界面的可靠性和美观性。
axios 替代了之前 HTTP 请求的 Fetch API 来处理错误
更加优雅。 单元格内容被截断并带有工具提示以保持
布局。 新的复制按钮让用户可以轻松收集所有敏感 ID。
细微的样式调整也增强了可用性。

总体而言，查询组件现在更具弹性且用户友好。

get_sess2.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="./static/css-1.css" type="text/css" />
     <link rel="stylesheet" href="./static/mdui/mdui.css" />
     <script src="./static/mdui/mdui.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.3/axios.min.js" integrity="sha512-JWQFV6OCC2o2x8x46YrEeFEQtzoNV++r9im8O8stv91YwHNykzIS2TbvAlFdeH0GVlpnyd79W0ZGmffcRi++Bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <script>
       mdui.setColorScheme("#0d2d44");
@@ -24,6 +25,7 @@
         cursor: pointer; /* 添加鼠标指针样式 */
         white-space: normal; /* 设置为normal使内容自动换行 */
         word-wrap: break-word; /* 设置为break-word以确保长单词/链接被截断换行 */
+        max-width: 300px;
       }
       /* 复制按钮样式 */
       .copy-button {
@@ -36,13 +38,17 @@
         border-radius: 4px;
         margin: 8px 0;
         margin-top: 20px;
+        margin-left:20px;
       }
     </style>
     <mdui-layout>
       <mdui-layout-main>
         <div class="mdui-main-container">
           <div style="display: flex">
             <h2 style="flex: 1">查询结果</h2>
+            <button class="copy-button" onclick="copySess()">
+              复制sess
+            </button>
             <button class="copy-button" onclick="copyTable()">
               复制全部内容
             </button>

static/getsess2.js

@@ -12,14 +12,12 @@ function checkBilling(apiKey, apiUrl) {
     }
 
     try {
-      const response = await fetch(urlGetsess, {
-        method: "POST", // 设置请求方法为 POST
+      const response = await axios.post(urlGetsess, urlencoded, {
         headers: headers,
-        body: urlencoded,
-        redirect: "follow",
+        maxRedirects: 0,
       });
 
-      const getsessdata = await response.json();
+      const getsessdata = response.data;
       if (getsessdata && getsessdata.login_info && getsessdata.token_info) {
         resolve(getsessdata); // 返回getsessdata对象
       } else {
@@ -31,6 +29,7 @@ function checkBilling(apiKey, apiUrl) {
   });
 }
 
+
 //查询函数
 async function sendRequest() {
   let apiKeyInput = document.getElementById("api-key-input");
@@ -41,6 +40,9 @@ async function sendRequest() {
     .getElementsByTagName("tbody")[0].innerHTML = "";
 
   let apiUrl = customUrlInput.value.trim();
+  if (apiUrl.endsWith('/')) {
+    apiUrl = apiUrl.slice(0, -1); // 去掉末尾的"/"
+  }
   let userList = apiKeyInput.value.split(/[,\s，\n]+/);
   if (!apiUrl) {
     mdui.alert({
@@ -104,26 +106,29 @@ async function sendRequest() {
       let user = data.login_info.user;
       let session = user.session;
       let token_info = data.token_info;
+      let cell = document.createElement("td");
+      let cellValue = '';
       properties.forEach((prop) => {
         console.log(prop);
         let cell = document.createElement("td");
         if (prop === "created") {
-          cell.textContent = new Date(
-            session["created"] * 1000
-          ).toLocaleString();
+          cellValue = new Date(session["created"] * 1000).toLocaleString();
         } else if (prop === "sensitive_id") {
-          cell.textContent = session[prop]; // 获取 session 对象中的 sensitive_id
+          cellValue = session[prop]; // 获取 session 对象中的 sensitive_id
           cell.onclick = function () {
             copyCell(cell, `Sensitive ID复制成功`);
           };
         } else if (prop === "refresh_token" || prop === "access_token") {
-          cell.textContent = token_info[prop];
+          cellValue = token_info[prop];
           cell.onclick = function () {
             copyCell(cell, `${prop === "refresh_token" ? 'Refresh Token' : 'Access Token'}复制成功`);
           };
         } else {
-          cell.textContent = user[prop];
+          cellValue = user[prop] ? user[prop] : ''; // 确保在user[prop]为空时，cellValue被赋予空字符串
         }
+
+        cell.textContent = cellValue && cellValue.length > 50 ? cellValue.substring(0, 57) + "..." : cellValue; // 如果长度超过60，显示"..."
+        cell.innerHTML = `<span title="${cellValue}">${cell.textContent}</span>`; // 在悬停时显示全部内容
         row.appendChild(cell);
       });
     } catch (error) {
@@ -133,8 +138,12 @@ async function sendRequest() {
       let errorMessageCell = document.createElement("td");
       errorMessageCell.colSpan = "8";
       errorMessageCell.classList.add("status-error");
-      errorMessageCell.textContent =
-        error && error.detail ? error.detail : error;
+      // 在这里检查错误信息是否为 "error request login url"
+      if (error === 'error request login url') {
+        errorMessageCell.textContent = '请求错误，请稍后重试';
+      } else {
+        errorMessageCell.textContent = error && error.detail ? error.detail : error;
+      }
       row.appendChild(errorMessageCell);
     }
 
@@ -180,6 +189,22 @@ function copyTable() {
   });
 }
 
+function copySess() {
+  var sensitiveCells = document.querySelectorAll("tbody td:nth-child(4) span"); // 选择所有的Sensitive ID单元格
+  var sensitiveIds = Array.from(sensitiveCells).map((cell) => cell.title); // 从单元格中获取所有的Sensitive ID
+  var textarea = document.createElement("textarea");
+  textarea.value = sensitiveIds.join("\n"); // 用换行符连接所有的Sensitive ID
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
+  mdui.alert({
+    headline: "提示",
+    description: "Sensitive ID复制成功",
+    confirmText: "OK",
+  });
+}
+
 function showLoadingAnimation() {
   const button = document.getElementById("query-button");
 
@@ -213,10 +238,10 @@ const toggleButton = document.getElementById("toggle-button");
 let isOpen = true;
 
 toggleButton.addEventListener("click", () => {
-    isOpen = !isOpen;
-    if (isOpen) {
-        navigationDrawer.open = true;
-    } else {
-        navigationDrawer.open = false;
-    }
+  isOpen = !isOpen;
+  if (isOpen) {
+    navigationDrawer.open = true;
+  } else {
+    navigationDrawer.open = false;
+  }
 });