fix 剪切板

package-lock.json

@@ -8,6 +8,7 @@
       "name": "alipan-tv-token-next",
       "version": "0.1.0",
       "dependencies": {
+        "clipboard": "^2.0.11",
         "crypto-js": "^4.2.0",
         "js-md5": "^0.8.3",
         "next": "14.2.5",
@@ -2607,6 +2608,16 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
@@ -2764,6 +2775,11 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "dev": true
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -3598,6 +3614,14 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -5040,6 +5064,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "node_modules/selfsigned": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
@@ -5516,6 +5545,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -12,11 +12,12 @@
     "deploy": "npm run pages:build && wrangler pages deploy"
   },
   "dependencies": {
+    "clipboard": "^2.0.11",
+    "crypto-js": "^4.2.0",
+    "js-md5": "^0.8.3",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18",
+    "react-dom": "^18"
-    "crypto-js": "^4.2.0",
-    "js-md5": "^0.8.3"
   },
   "devDependencies": {
     "@cloudflare/next-on-pages": "^1.13.6",
@@ -29,4 +30,4 @@
   "overrides": {
     "vercel": "$vercel"
   }
-}
+}

src/app/page.js

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState, useRef } from 'react'
-
+import ClipboardJS from 'clipboard'; 
 export default function Home() {
   // 添加状态变量
   const [alertMsg, setAlertMsg] = useState('');
@@ -29,7 +29,8 @@ export default function Home() {
         document.getElementById("refreshToken").value = data.refresh_token;
         document.getElementById("tokens").style.display = "block";
         document.getElementById("qrCodeContainer").style.display = "none";
-        // 登录成功，不再继续调用 checkStatus
+        // 初始化复制功能
+        initializeClipboard();
       } else if (data.status === "ScanSuccess") {
         document.querySelector("h1").innerText = "扫码成功，等待手机端授权";
         // 继续轮询
@@ -50,15 +51,26 @@ export default function Home() {
     }
   }
 
-  function copyToClipboard(elementId,msg) {
+  function initializeClipboard() {
-    const copyText = document.getElementById(elementId).value;
+    // 初始化 access token 复制
-    navigator.clipboard.writeText(copyText).then(() => {
+    const accessTokenClipboard = new ClipboardJS('[data-clipboard-target="#accessToken"]');
-      // 复制成功
+    accessTokenClipboard.on('success', () => {
-      setAlertMsg(msg);
+      setAlertMsg('已复制访问令牌');
       setAlertType('success');
-    }).catch(err => {
+    });
-      // 复制失败
+    accessTokenClipboard.on('error', () => {
-      setAlertMsg("复制失败");
+      setAlertMsg('复制失败');
+      setAlertType('error');
+    });
+
+    // 初始化 refresh token 复制
+    const refreshTokenClipboard = new ClipboardJS('[data-clipboard-target="#refreshToken"]');
+    refreshTokenClipboard.on('success', () => {
+      setAlertMsg('已复制刷新令牌');
+      setAlertType('success');
+    });
+    refreshTokenClipboard.on('error', () => {
+      setAlertMsg('复制失败');
       setAlertType('error');
     });
   }
@@ -100,8 +112,8 @@ export default function Home() {
             <label htmlFor="accessToken" className="block text-gray-700 font-medium mb-2">访问令牌:</label>
             <div className="flex">
               <input type="text" id="accessToken" className="flex-1 p-2 border border-gray-300 rounded-l" readOnly />
-              <button onClick={() => copyToClipboard('accessToken','已复制访问令牌')} 
+              <button data-clipboard-target="#accessToken"
-                      className="px-4 bg-blue-500 text-white rounded-r hover:bg-blue-600">
+                className="px-4 bg-blue-500 text-white rounded-r hover:bg-blue-600">
                 复制
               </button>
             </div>
@@ -110,8 +122,8 @@ export default function Home() {
             <label htmlFor="refreshToken" className="block text-gray-700 font-medium mb-2">刷新令牌:</label>
             <div className="flex">
               <input type="text" id="refreshToken" className="flex-1 p-2 border border-gray-300 rounded-l" readOnly />
-              <button onClick={() => copyToClipboard('refreshToken','已复制刷新令牌')} 
+              <button data-clipboard-target="#refreshToken"
-                      className="px-4 bg-blue-500 text-white rounded-r hover:bg-blue-600">
+                className="px-4 bg-blue-500 text-white rounded-r hover:bg-blue-600">
                 复制
               </button>
             </div>