From 35448e84b32ed80a2512bc5eb236ae3d6aaae9fc Mon Sep 17 00:00:00 2001
From: HXY <2479895356@qq.com>
Date: Sat, 9 Sep 2023 14:16:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=88=86=E4=BA=AB=E7=A0=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=94=B1=E5=88=97=E8=A1=A8=E5=8F=98?=
 =?UTF-8?q?=E4=B8=BA=E8=A1=A8=E6=A0=BC=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E4=BA=AB=E7=A0=81=E7=82=B9=E5=87=BB=E5=A4=8D=E5=88=B6=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E6=9B=B4=E6=96=B0=E5=88=A0=E9=99=A4=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/ShareKey.vue | 397 ++++++++++++++-----------------------
 1 file changed, 146 insertions(+), 251 deletions(-)

diff --git a/web/src/views/ShareKey.vue b/web/src/views/ShareKey.vue
index 61801039..aba96bde 100644
--- a/web/src/views/ShareKey.vue
+++ b/web/src/views/ShareKey.vue
@@ -1,112 +1,80 @@
 <template>
     <div>
-        <!-- <main-nav title="我的分享码" /> -->
-
-        <n-list class="main-content-wrap" bordered>
-            <div class="balance-wrap">
-                <div class="balance-line">
-                    <n-statistic style="color:black; font-weight:bold;">我的分享码</n-statistic>
-                </div>
-            </div>
-            <template #footer>
-                <div class="pagination-wrap" v-if="totalPage > 1">
-                    <n-pagination
-                        :page="page"
-                        @update:page="updatePage"
-                        :page-slot="!store.state.collapsedRight ? 8 : 5"
-                        :page-count="totalPage"
-                    />
-                </div>
-            </template>
-
-            <div v-if="loading" class="skeleton-wrap">
-                <post-skeleton :num="pageSize" />
-            </div>
-            <div v-else>
-                <div class="empty-wrap" v-if="shareKeys.length === 0">
-                    <n-empty size="large" description="暂无数据" />
-                </div>
-
-                <n-list-item v-for="sharekey in shareKeys" :key="sharekey.share_key">
-                    <div class="bill-line">
-                        <div>{{ sharekey.share_key }}</div>
-                        <div>{{ sharekey.name }}</div>
-                        <!-- <div>{{ sharekey.description }}</div> -->
-                        <div>
-                        <span
-                            class="truncated-content"
-                            @mouseover="showFullContent(sharekey.share_key)"
-                            @mouseleave="hideFullContent"
-                        >
-                            {{ truncatedDescription(sharekey.description) }}
-                        </span>
-                        <!-- 气泡弹出框 -->
-                        <div
-                            class="popover-content"
-                            v-show="showFullContentId === sharekey.share_key"
-                        >
-                            {{ sharekey.description }}
-                        </div>
-                        </div>
-                        <n-button
-                                size="small"
-                                secondary
-                                type="primary"
-                                @click="isDelete(sharekey)"
-                            >
-                                删除
-                        </n-button>
-                    </div>
-                </n-list-item>
-            </div>
-        </n-list>
-        <n-modal v-model:show="showRecharge">
-            <n-card
-                :bordered="false"
-                title="删除"
-                role="dialog"
-                aria-modal="true"
-                style="width: 100%; max-width: 330px"
-            >
-                <div class="amount-options" v-if="rechargeQrcode.length === 0">
-                    <div v-if="selectedShareKey !== null" class="amount-options">
-                    <n-space align="baseline">
-                        <div>  {{selectedShareKey.name}}  {{ selectedShareKey.share_key }}</div>
-                    </n-space>
-                </div>
-                </div>
-                <div v-if="selectedShareKey !== null"
-                    style="margin-top: 20px"
-                >
-                    <n-button
-                    style="width: 30%;left: 10%;"
-                    type="primary"
-                    @click="deleteShareKey(selectedShareKey.share_key)"
-                    >
-                        确定
-                    </n-button>
-                    <n-button
-                    style="width: 30% ; left: 30%"
-                    @click="showRecharge = false"
-                    >
-                        取消
-                    </n-button>
-                </div>
-            </n-card>
-        </n-modal>
+      <n-list class="main-content-wrap" bordered>
+        <div class="balance-wrap">
+          <n-statistic style="color: black; font-weight: bold">我的分享码</n-statistic>
+        </div>
+        <template #footer>
+          <div class="pagination-wrap" v-if="totalPage > 1">
+            <n-pagination
+              :page="page"
+              @update:page="updatePage"
+              :page-slot="!store.state.collapsedRight ? 8 : 5"
+              :page-count="totalPage"
+            />
+          </div>
+        </template>
+  
+        <div v-if="loading" class="skeleton-wrap">
+          <post-skeleton :num="pageSize" />
+        </div>
+        <div v-else>
+          <div class="empty-wrap" v-if="shareKeys.length === 0">
+            <n-empty size="large" description="暂无数据" />
+          </div>
+  
+          <n-table :bordered="false" :single-line="false" striped>
+            <thead>
+              <tr>
+                <th>分享码</th>
+                <th>名称</th>
+                <th>描述</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="sharekey in shareKeys" :key="sharekey.share_key">
+                <td @click="copyToClipboard(sharekey.share_key)" class="copy-code">
+                  {{ sharekey.share_key }}
+                </td>
+                <td>{{ sharekey.name }}</td>
+                <td><n-ellipsis style="max-width: 240px">{{ sharekey.description }}</n-ellipsis></td>
+                <td>
+                  <n-button size="small" secondary type="primary" @click="isDelete(sharekey)">删除</n-button>
+                </td>
+              </tr>
+            </tbody>
+          </n-table>
+        </div>
+      </n-list>
+      
+      <n-modal v-model:show="showRecharge">
+        <n-card :bordered="false" title="删除" role="dialog" aria-modal="true" style="width: 100%; max-width: 330px">
+          <div class="amount-options" v-if="rechargeQrcode.length === 0 && selectedShareKey">
+            <n-space align="baseline">
+              <div>删除分享码会影响排行榜分数评定,是否删除:</div>
+              <div>{{ selectedShareKey.name }} {{ selectedShareKey.share_key }}</div>
+            </n-space>
+          </div>
+          <div v-if="selectedShareKey" style="margin-top: 20px">
+            <n-button style="width: 30%; left: 10%" type="primary" @click="deleteShareKey(selectedShareKey.share_key)">确定</n-button>
+            <n-button style="width: 30%; left: 30%" @click="showRecharge = false">取消</n-button>
+          </div>
+        </n-card>
+      </n-modal>
     </div>
-</template>
+  </template>  
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRoute } from 'vue-router';
-import { getShareKeys, deleteThisShareKey } from '@/api/shareKey';
+import { ref, onMounted } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+import { getShareKeys, deleteThisShareKey } from "@/api/shareKey";
 
 const store = useStore();
 const route = useRoute();
 const showRecharge = ref(false);
-const rechargeQrcode = ref('');
+const rechargeQrcode = ref("");
 const loading = ref(false);
 // 获取 ShareKey
 const shareKeys = ref<Item.ShareKeyProps[]>([]);
@@ -116,184 +84,111 @@ const page = ref(+(route.query.p as string) || 1);
 const pageSize = ref(10);
 const totalPage = ref(0);
 
+const copyToClipboard = (text: any) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+  window.$message.success("复制成功，快去分享吧~");
+};
+
 const loadKeys = () => {
-    loading.value = true;
-    const token = localStorage.getItem('PAOPAO_TOKEN') || '';
-    if(token) {
-        const params: NetParams.UserGetShareKeys = {
-            page: page.value,
-            page_size: pageSize.value,
-        }
-        getShareKeys(params, token)
-        .then((rsp) => {
-            loading.value = false;
-            shareKeys.value = rsp.list;
-            totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-            window.scrollTo(0, 0);
-        })
-        .catch((err) => {
-            loading.value = false;
-            store.commit('triggerAuth', true);
-            store.commit('userLogout');
-        });
-    } else {
+  loading.value = true;
+  const token = localStorage.getItem("PAOPAO_TOKEN") || "";
+  if (token) {
+    const params: NetParams.UserGetShareKeys = {
+      page: page.value,
+      page_size: pageSize.value,
+    };
+    getShareKeys(params, token)
+      .then((rsp) => {
+        loading.value = false;
+        shareKeys.value = rsp.list;
+        totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
+        window.scrollTo(0, 0);
+      })
+      .catch((err) => {
         loading.value = false;
-        store.commit('triggerAuth', true);
-        store.commit('userLogout');
-    }
+        store.commit("triggerAuth", true);
+        store.commit("userLogout");
+      });
+  } else {
+    loading.value = false;
+    store.commit("triggerAuth", true);
+    store.commit("userLogout");
+  }
 };
 const isDelete = (sharekey: Item.ShareKeyProps) => {
-    selectedShareKey.value = sharekey;
-    showRecharge.value = true;
+  selectedShareKey.value = sharekey;
+  showRecharge.value = true;
 };
 const deleteShareKey = (keyToDelete: string) => {
-    const params: NetParams.UserDeleteShareKey = {
-        share_key: keyToDelete,
-    }
-    const token = localStorage.getItem('PAOPAO_TOKEN') || '';
-    if(token) {
-        deleteThisShareKey(params, token)
-        .then((rsp) => {
-            if(rsp.Status === "DELETE_SUCCESS") {
-                window.$message.success('删除成功');
-                showRecharge.value = false;
-                loadKeys();
-            }
-            loading.value = false;
-            window.scrollTo(0, 0);
-        })
-        .catch((err) => {
-            loading.value = false;
-            store.commit('triggerAuth', true);
-            store.commit('userLogout');
-        });
-    } else {
+  const params: NetParams.UserDeleteShareKey = {
+    share_key: keyToDelete,
+  };
+  const token = localStorage.getItem("PAOPAO_TOKEN") || "";
+  if (token) {
+    deleteThisShareKey(params, token)
+      .then((rsp) => {
+        if (rsp.Status === "DELETE_SUCCESS") {
+          window.$message.success("删除成功");
+          showRecharge.value = false;
+          loadKeys();
+        }
+        loading.value = false;
+        window.scrollTo(0, 0);
+      })
+      .catch((err) => {
         loading.value = false;
-        store.commit('triggerAuth', true);
-        store.commit('userLogout');
-    }
-    showRecharge.value = false;
+        store.commit("triggerAuth", true);
+        store.commit("userLogout");
+      });
+  } else {
+    loading.value = false;
+    store.commit("triggerAuth", true);
+    store.commit("userLogout");
+  }
+  showRecharge.value = false;
 };
 
 const updatePage = (p: number) => {
-    page.value = p;
-    loadKeys();
-};
-
-const showFullContent = (shareKeyId: string) => {
-  showFullContentId.value = shareKeyId;
-};
-
-const hideFullContent = () => {
-  showFullContentId.value = null;
-};
-
-const truncatedDescription = (description: string) => {
-  const maxLength = 6;
-  if (description.length <= maxLength) {
-    return description;
-  }
-  return `${description.slice(0, maxLength)}...`;
+  page.value = p;
+  loadKeys();
 };
 
 onMounted(() => {
-    loadKeys();
+  loadKeys();
 });
 </script>
 
 <style lang="less" scoped>
-.popover-content {
-  position: absolute;
-  background-color: #fff; /* 白色背景 */
-  color: #000; /* 弹出框文字颜色 */
-  padding: 8px; /* 弹出框内边距 */
-  border-radius: 4px; /* 弹出框边框圆角 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 弹出框阴影效果 */
-  max-width: 200px; /* 弹出框最大宽度 */
-  white-space: pre-wrap; /* 弹出框内容换行 */
-  z-index: 999; /* 设置弹出框显示在文字上方，值越大显示越靠上 */
-
-  /* 创建气泡三角形 */
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -8px; /* 三角形的位置在弹出框中心 */
-    border-width: 8px;
-    border-style: solid;
-    border-color: transparent transparent #fff transparent; /* 透明 上方白色 透明 透明 */
-  }
-}
-
-/* 鼠标悬浮时显示弹出框 */
-.truncated-content:hover + .popover-content {
-  display: block;
-}
-
-/* 隐藏弹出框 */
-.popover-content {
-  display: none;
-}
-
-
 .balance-wrap {
-    padding: 16px;
+  padding: 16px;
 
-    .balance-line {
-        display: flex;
-        justify-content: space-between;
-
-        .balance-opts {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-}
-
-.bill-line {
-    padding: 16px;
+  .balance-line {
     display: flex;
     justify-content: space-between;
-    .income,
-    .out {
-        font-weight: bold;
-    }
-
-    .income {
-        color: #063c62;
-    }
+  }
 }
+
 .pagination-wrap {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
 }
 
-.qrcode-wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .pay-tips {
-        margin-top: 16px;
-    }
-    .pay-sub-tips {
-        margin-top: 4px;
-        font-size: 12px;
-        opacity: 0.75;
-        display: flex;
-        align-items: center;
-    }
+.copy-code {
+  cursor: pointer;
 }
 
 .dark {
-    .income {
-        color: #2080f0;
-    }
-    .main-content-wrap {
-        background-color: rgba(16, 16, 20, 0.75);
-    }
+  .income {
+    color: #2080f0;
+  }
+  .main-content-wrap {
+    background-color: rgba(16, 16, 20, 0.75);
+  }
 }
 </style>
\ No newline at end of file