feat: 组件解耦 提取样式文件

src/cpns/ClipFullData.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="clip-full-data">
+    <div class="clip-full" v-show="isShow">
+      <div v-if="fullData.type === 'text'">
+        <div v-text="fullData.data"></div>
+      </div>
+      <div v-else>
+        <FileList :data="fullData.data"></FileList>
+      </div>
+    </div>
+  </div>
+  <div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
+</template>
+
+<script setup>
+import FileListVue from './FileList.vue'
+
+const props = defineProps({
+  isShow: {
+    type: Boolean,
+    required: true
+  },
+  fullData: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['onOverlayClick'])
+const onOverlayClick = () => emit('onOverlayClick')
+</script>
+
+<style lang="less" scoped>
+@import '../style/cpns/clip-full-data.less';
+</style>

src/cpns/ClipItemList.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="clip-item-list">
+    <div
+      class="clip-item"
+      v-for="(item, index) in showList"
+      :key="item.createTime"
+      @click="executeCopy(item)"
+    >
+      <div class="clip-info">
+        <div class="clip-time">
+          <span>{{ dateFormat(item.updateTime) }}</span>
+        </div>
+        <div class="clip-data">
+          <template v-if="item.type === 'text'">
+            {{ item.data.slice(0, 500).trim() }}
+          </template>
+          <template v-if="item.type === 'image'">
+            <img :src="item.data" alt="Image" />
+            <div class="clip-image-size">{{ item.size }}</div>
+          </template>
+          <template v-if="item.type === 'file'">
+            <FileList :data="JSON.parse(item.data)" />
+          </template>
+        </div>
+      </div>
+      <div class="clip-count">{{ index + 1 }}</div>
+      <div
+        class="clip-more"
+        v-if="
+          (item.type === 'text' && item.data.length >= 500) ||
+          (item.type === 'file' && JSON.parse(item.data).length >= 8)
+        "
+        @click.stop="onDataChange(item)"
+      >
+        📃
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FileList from './FileList.vue'
+import { dateFormat } from '../utils'
+const props = defineProps({
+  showList: {
+    type: Array,
+    required: true
+  }
+})
+const emit = defineEmits(['onDataChange'])
+const executeCopy = (item) => window.copy(item)
+const onDataChange = (item) => {
+  console.log(item)
+  emit('onDataChange', item)
+}
+</script>
+
+<style lang="less" scoped>
+@import '../style/cpns/clip-item-list.less';
+</style>

src/cpns/FileList.vue

@@ -27,21 +27,6 @@ export default {
 }
 </script>
 
-<style scoped>
-.clip-file {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-}
-.clip-file:hover {
-  font-weight: 600;
-}
-.clip-file:hover::after {
-  content: '📤';
-}
-.clip-file-icon {
-  width: 15px;
-  height: 15px;
-}
+<style lang="less" scoped>
+@import '../style/cpns/file-list.less';
 </style>