From f0a5473bdefd310331c7ae11eda7745a9531380a Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Fri, 17 Mar 2023 15:00:01 +0800
Subject: [PATCH] fix

---
 src/components/layout/NavBar.vue | 38 +++++++++++++++++++++++++++-----
 src/hooks/useCopyToClipboard.js  | 16 ++++++++++++++
 2 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useCopyToClipboard.js

diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 777e87d..47071d6 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -46,9 +46,11 @@
             />
             <!-- 下拉菜单 -->
             <div class="menu" v-show="showMenu">
-              <div class="menu-item">
+              <div class="menu-item-top">
                 <div class="title">{{ formatAddress }}</div>
-                <div><img src="../../assets/img/home/copy.png" alt="" /></div>
+                <div @click="copyToClipboard">
+                  <img src="../../assets/img/home/copy.png" alt="" />
+                </div>
               </div>
               <div class="menu-item" @click="logout">Logout</div>
             </div>
@@ -67,6 +69,8 @@ import { useAppStore } from "@/store/app";
 
 import { useRouter, useRoute } from "vue-router";
 import ChainModel from "../../components/home/ChainModel.vue";
+import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";
+
 const AppModule = useAppStore();
 const router = useRouter();
 const route = useRoute();
@@ -76,7 +80,10 @@ const app = useAppStore();
 function click(event) {
   router.push(event.key);
 }
-
+const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
+const message = copied.value
+  ? "Text copied!"
+  : "Click the button to copy text.";
 const formatAddress = computed(() => {
   const accountId = AppModule.accountId;
   if (!accountId) return "-";
@@ -306,11 +313,32 @@ watchEffect(() => {
   li {
     margin: 5px 0;
   }
-  .menu-item {
-    padding: 0px 15px;
+  .menu-item-top {
+    padding: 10px 15px;
     color: #f5f5f5;
     display: flex;
     align-items: center;
+    position: relative;
+    padding-bottom: 15px;
+    .title {
+      margin-right: 20px;
+    }
+  }
+  .menu-item-top:before {
+    position: absolute;
+    top: 100%;
+    left: 15px;
+    content: "";
+    width: 140px;
+    height: 1px;
+    background: #676767;
+  }
+  .menu-item {
+    padding: 5px 15px;
+    color: #f5f5f5;
+    display: flex;
+    padding-top: 10px;
+    align-items: center;
     .title {
       margin-right: 10px;
     }
diff --git a/src/hooks/useCopyToClipboard.js b/src/hooks/useCopyToClipboard.js
new file mode 100644
index 0000000..a70c987
--- /dev/null
+++ b/src/hooks/useCopyToClipboard.js
@@ -0,0 +1,16 @@
+import { ref } from "vue";
+
+export function useCopyToClipboard(text) {
+  const copied = ref(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = true;
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return { copied, copyToClipboard };
+}
\ No newline at end of file