feat: fullData页内添加复制与分词功能 调整prop内容

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>
-        <div v-else>
-          <FileList :data="fullData.data"></FileList>
+          </template>
+        </div>
+        <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

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 {
-    background-color: @text-bg-color;
+  .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: 20px;
+    border-radius: 5px;
   }
   &::-webkit-scrollbar {
     width: 10px;

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
 }