feat: use toast instead of alert (#24)

* feat: use toast instead of alert * feat: remove toastify * feat: use alert and translate
HuolalaTech · Dec 18, 2023 · 235e403 · 235e403
1 parent 28d0aaa
commit 235e403
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 30 deletions.
diff --git a/src/component/content.ts b/src/component/content.ts
@@ -1,11 +1,8 @@
-import copy from 'copy-to-clipboard';
-import { Config } from 'src/utils/config';
-
 interface ContentParams {
   className?: string;
   tagName?: string;
   onOk?: () => void;
-  content: Record<string, any>;
+  content: string;
 }
 
 export class Content {
@@ -30,37 +27,20 @@ export class Content {
   }
 
   render() {
-    const { content = {}, onOk } = this.options;
-    const { name = '--', address = '--' } = content;
-    const { project, clientOrigin } = Config.get();
-    const [os, browser] = name.split(' ');
-    const contentText = `
-      <p><b>Device ID:</b> <span style="font-family: 'Monaco'">${address.slice(
-        0,
-        4,
-      )}</span></p>
-      <p><b>System:</b> ${os}</p>
-      <p><b>Browser:</b> ${browser}</p>
-      <p><b>Project:</b> ${project}</p>
-      `;
-
+    const { content = '', onOk } = this.options;
     /* info */
     const info = document.createElement('div');
     info.className = 'page-spy-content__info';
-    info.innerHTML = contentText;
+    info.innerHTML = content;
     /* bottom button */
     const button = document.createElement('div');
     button.dataset.testid = 'copy-button';
     button.className = 'page-spy-content__ok';
-    button.textContent = 'Copy';
+    const lang = navigator.language;
+    button.textContent = lang === 'zh-CN' ? '拷贝' : 'Copy';
     button.onclick = (e) => {
       e.stopPropagation();
-      const text = `${clientOrigin}/devtools?version=${name}&address=${address}`;
-      const copyResult = copy(text);
-      if (copyResult) {
-        alert('Copy successfully!');
-        if (onOk) onOk();
-      }
+      if (onOk) onOk();
     };
     this.el.append(info, button);
   }

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 import type { InitConfig } from 'types';
+import copy from 'copy-to-clipboard';
 import { Modal } from './component/modal';
 import { Content } from './component/content';
 
@@ -204,6 +205,7 @@ export default class PageSpy {
   }
 
   startRender() {
+    const { project, clientOrigin } = Config.get();
     const ok = this.checkConfig();
     if (!ok) return;
 
@@ -225,12 +227,28 @@ export default class PageSpy {
     });
 
     const modal = new Modal();
+    const [os, browser] = this.name.split(' ');
     const content = new Content({
-      content: {
-        name: this.name,
-        address: this.address,
-      },
+      content: `
+      <p><b>Device ID:</b> <span style="font-family: 'Monaco'">${this.address.slice(
+        0,
+        4,
+      )}</span></p>
+      <p><b>System:</b> ${os}</p>
+      <p><b>Browser:</b> ${browser}</p>
+      <p><b>Project:</b> ${project}</p>
+      `,
       onOk: () => {
+        const text = `${clientOrigin}/devtools?version=${this.name}&address=${this.address}`;
+        const copyRes = copy(text);
+        let message = '';
+        const lang = navigator.language;
+        if (lang === 'zh-CN') {
+          message = copyRes ? '拷贝成功!' : '拷贝失败!';
+        } else {
+          message = copyRes ? 'Copy successfully!' : 'Copy failed!';
+        }
+        alert(message);
         modal.close();
       },
     });