From 7fe706d94ff81c8f7c74f703a99fa888825fcbe2 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Wed, 7 Sep 2022 16:55:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=88=86=E8=AF=8D?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A0=B7=E5=BC=8F=E4=B8=8E=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipFullData.vue           | 17 +++++++++++++----
 src/cpns/ClipWordBreak.vue          | 22 ++++++++++++++++++++++
 src/style/cpns/clip-word-break.less | 19 +++++++++++++++++++
 src/style/index.less                |  1 +
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/cpns/ClipWordBreak.vue
 create mode 100644 src/style/cpns/clip-word-break.less

diff --git a/src/cpns/ClipFullData.vue b/src/cpns/ClipFullData.vue
index 5d99aef..c0ec14d 100644
--- a/src/cpns/ClipFullData.vue
+++ b/src/cpns/ClipFullData.vue
@@ -16,9 +16,10 @@
         <template v-if="fullData.type === 'text'">
           <div class="clip-full-content" v-text="fullData.data"></div>
         </template>
-        <div v-else class="clip-full-content">
+        <div v-else-if="fullData.type === 'file'" class="clip-full-content">
           <FileList :data="JSON.parse(fullData.data)"></FileList>
         </div>
+        <ClipWordBreak :words="splitWords"></ClipWordBreak>
       </div>
     </Transition>
     <div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
@@ -27,7 +28,8 @@
 
 <script setup>
 import FileList from './FileList.vue'
-import { onMounted } from 'vue'
+import ClipWordBreak from './ClipWordBreak.vue'
+import { ref, onMounted } from 'vue'
 
 const props = defineProps({
   isShow: {
@@ -67,6 +69,8 @@ const handleBtnClick = (id) => {
   }
 }
 
+const splitWords = ref([])
+
 const fetchUserInfo = async () => {
   return utools.fetchUserServerTemporaryToken().then(({ token, expired_at }) => {
     return {
@@ -77,7 +81,8 @@ const fetchUserInfo = async () => {
 }
 
 const fetchWordBreakResult = async (origin) => {
-  const url = 'https://service-a0pyrkub-1304937021.sh.apigw.tencentcs.com/release/v1/word-break'
+  const baseUrl = 'https://service-a0pyrkub-1304937021.sh.apigw.tencentcs.com/release'
+  const url = baseUrl + '/v1/word-break'
   const info = await fetchUserInfo()
   console.log(info)
   return fetch(url, {
@@ -86,7 +91,8 @@ const fetchWordBreakResult = async (origin) => {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({
-      word: origin
+      word: origin,
+      ...info
     })
   })
     .then((res) => res.json())
@@ -94,6 +100,9 @@ const fetchWordBreakResult = async (origin) => {
       if (code !== 0) {
         console.log(msg)
       } else {
+        splitWords.value = data.splitWord.filter(
+          (w) => w !== '' && w !== ' ' && w.indexOf('\n') === -1
+        )
         console.log(data.splitWord)
         console.log(data.extractWord)
       }
diff --git a/src/cpns/ClipWordBreak.vue b/src/cpns/ClipWordBreak.vue
new file mode 100644
index 0000000..f35ce28
--- /dev/null
+++ b/src/cpns/ClipWordBreak.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="clip-word-break">
+    <div class="clip-word-break-content">
+      <template v-for="w of words">
+        <div class="clip-word-break-content-item">{{ w }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  words: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '../style/index.less';
+</style>
diff --git a/src/style/cpns/clip-word-break.less b/src/style/cpns/clip-word-break.less
new file mode 100644
index 0000000..561e36d
--- /dev/null
+++ b/src/style/cpns/clip-word-break.less
@@ -0,0 +1,19 @@
+.clip-word-break {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  &-content-item {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+    word-break: break-all;
+    word-wrap: break-word;
+    padding: 5px;
+    margin: 2px 5px;
+    cursor: pointer;
+    user-select: none;
+    background-color: @text-bg-color;
+    border-radius: 5px;
+  }
+}
diff --git a/src/style/index.less b/src/style/index.less
index cfc9ed5..3b70f66 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -5,6 +5,7 @@
   @import (multiple) './cpns/clip-item-list.less';
   @import (multiple) './cpns/clip-search.less';
   @import (multiple) './cpns/clip-switch.less';
+  @import (multiple) './cpns/clip-word-break.less';
   @import (multiple) './cpns/file-list.less';
 }