From 00ecb8f0f96bbcc79427f97a5a71317cd0e42b80 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 22:53:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20fullData=E9=A1=B5=E5=86=85=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=A4=8D=E5=88=B6=E4=B8=8E=E5=88=86=E8=AF=8D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=E8=B0=83=E6=95=B4prop=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipFullData.vue          | 43 ++++++++++++++++++++++++++----
 src/style/cpns/clip-full-data.less | 29 +++++++++++++++++---
 src/views/Main.vue                 | 13 +++------
 3 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/cpns/ClipFullData.vue b/src/cpns/ClipFullData.vue
index fd89f6d..5453575 100644
--- a/src/cpns/ClipFullData.vue
+++ b/src/cpns/ClipFullData.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="clip-full-data">
     <Transition name="fade">
-      <div class="clip-full" v-show="isShow">
-        <div v-if="fullData.type === 'text'">
-          <div v-text="fullData.data"></div>
+      <div class="clip-full-wrapper" v-show="isShow">
+        <div class="clip-full-operate-list">
+          <template v-for="{ id, name } of btns">
+            <div
+              class="clip-full-operate-list-item"
+              v-if="id !== 'word-split' || (id === 'word-split' && fullData.type !== 'file')"
+              @click="handleBtnClick(id)"
+            >
+              {{ name }}
+            </div>
+          </template>
         </div>
-        <div v-else>
-          <FileList :data="fullData.data"></FileList>
+        <template v-if="fullData.type === 'text'">
+          <div class="clip-full-content" v-text="fullData.data"></div>
+        </template>
+        <div v-else class="clip-full-content">
+          <FileList :data="JSON.parse(fullData.data)"></FileList>
         </div>
       </div>
     </Transition>
@@ -32,6 +43,28 @@ const props = defineProps({
 const emit = defineEmits(['onOverlayClick'])
 const onOverlayClick = () => emit('onOverlayClick')
 
+const btns = [
+  {
+    id: 'copy-all',
+    name: '📄 复制全部'
+  },
+  {
+    id: 'word-split',
+    name: '🎁 智慧分词'
+  }
+]
+const handleBtnClick = (id) => {
+  switch (id) {
+    case 'copy-all':
+      window.copy(props.fullData)
+      emit('onOverlayClick') // 退出侧栏
+      break
+    case 'word-split':
+      window.alert('增值服务 Comming Soon...')
+      break
+  }
+}
+
 onMounted(() => {
   document.addEventListener('keydown', (e) => {
     const { key } = e
diff --git a/src/style/cpns/clip-full-data.less b/src/style/cpns/clip-full-data.less
index e5a5e8f..f5f81c1 100644
--- a/src/style/cpns/clip-full-data.less
+++ b/src/style/cpns/clip-full-data.less
@@ -1,4 +1,4 @@
-.clip-full {
+.clip-full-wrapper {
   z-index: 9999999999;
   position: fixed;
   top: 0;
@@ -11,9 +11,32 @@
   overflow-y: scroll;
   word-break: break-all;
   white-space: pre-wrap;
-  div {
+  .clip-full-operate-list {
+    position: fixed;
+    top: 15px;
+    right: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @text-color;
+    &-item {
+      padding: 10px;
+      border-radius: 5px;
+      cursor: pointer;
+      user-select: none;
+      margin: 5px 5px;
+      background-color: @bg-color;
+      &:hover {
+        color: @bg-color;
+        background-color: @primary-color;
+        transition: all 0.15s;
+      }
+    }
+  }
+  .clip-full-content {
     background-color: @text-bg-color;
-    padding: 10px;
+    padding: 20px;
+    border-radius: 5px;
   }
   &::-webkit-scrollbar {
     width: 10px;
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 6e26c12..12d6de8 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -59,18 +59,13 @@ const handleNavClick = (type) => {
   offset.value = 0 // 重置懒加载偏移量
 }
 
-const fullData = ref({ type: 'text', data: '' })
+const fullData = ref({ type: 'text' })
 const fullDataShow = ref(false)
 const toggleFullData = (item) => {
   // 是否显示全部数据 (查看全部)
-  const { type, data } = item
-  // type: 'text' | 'file'
-  if (type === 'text') {
-    fullData.value.type = 'text'
-    fullData.value.data = data
-  } else if (type === 'file') {
-    fullData.value.type = 'file'
-    fullData.value.data = JSON.parse(data)
+  const { type } = item
+  if (type === 'text' || type === 'file') {
+    fullData.value = item
   }
   fullDataShow.value = !fullDataShow.value
 }