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>
+<style lang="less" scoped>
-.clip-file {
+@import '../style/cpns/file-list.less';
-  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>

src/style/cpns/clip-full-data.less

@@ -0,0 +1,20 @@
+.clip-full {
+  z-index: 9999999999;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: 60%;
+  background: white;
+  padding: 0px 20px 0px 20px;
+  overflow-y: scroll;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.clip-overlay {
+  z-index: 999999999;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}

src/style/cpns/clip-item-list.less

@@ -0,0 +1,76 @@
+@import '../style/variable.less';
+.clip-item {
+  display: flex;
+  justify-content: space-between;
+  border: 0px solid #eee;
+  border-width: 0px 0px 1px 0px;
+  cursor: pointer;
+  &:hover {
+    background-color: @text-bg-color-lighter;
+    transition: all 0.15s;
+  }
+  .clip-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    padding: 10px;
+    .clip-time {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 100px;
+      span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 13px;
+        color: @text-color-lighter;
+        background-color: @text-bg-color;
+        border-radius: 5px;
+        min-width: 50px;
+        padding: 5px 10px 5px 10px;
+      }
+    }
+    .clip-data {
+      display: flex;
+      overflow: hidden;
+      word-break: break-all;
+      max-height: 150px;
+      padding: 5px;
+      white-space: pre-wrap;
+      flex-direction: column;
+      background-color: white;
+      img {
+        max-height: 150px;
+      }
+      .clip-image-size {
+        position: absolute;
+        background-color: white;
+      }
+    }
+  }
+  .clip-count {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    padding: 10px;
+    font-size: 13px;
+    color: @text-color-lighter;
+    padding: 10px;
+  }
+  .clip-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    font-size: 13px;
+    cursor: pointer;
+    border-radius: 0px 5px 5px 0px;
+  }
+  .clip-more:hover {
+    background-color: @text-bg-color;
+    transition: all 0.15s;
+  }
+}

src/style/cpns/file-list.less

@@ -0,0 +1,16 @@
+.clip-file {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    font-weight: 600;
+    &::after {
+      content: '📤';
+    }
+  }
+  .clip-file-icon {
+    width: 15px;
+    height: 15px;
+  }
+}

src/style/variable.less

@@ -0,0 +1,6 @@
+@primary-color: #8a2be2;
+@primary-color-lighter: #d3b8ec;
+@text-color: #333;
+@text-color-lighter: rgb(138, 138, 138);
+@text-bg-color: #e3d9ec;
+@text-bg-color-lighter: #eeeaf3;

src/utils/index.js

@@ -0,0 +1,22 @@
+const dateFormat = (timeStamp) => {
+  const startTime = new Date(timeStamp) // 开始时间
+  const endTime = new Date() // 结束时间
+  const gaps = [
+    Math.floor((endTime - startTime) / 1000 / 60), // 分钟
+    Math.floor((endTime - startTime) / 1000 / 60 / 60), // 小时
+    Math.floor((endTime - startTime) / 1000 / 60 / 60 / 24) // 天
+  ]
+  let info = ''
+  if (gaps[2] > 0) {
+    info = `${gaps[2]}天前`
+  } else if (gaps[1] > 0) {
+    info = `${gaps[1]}小时前`
+  } else if (gaps[0] > 0) {
+    info = `${gaps[0]}分钟前`
+  } else {
+    info = '刚刚'
+  }
+  return info
+}
+
+export { dateFormat }

src/views/Main.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="main">
     <div class="clip-restore" @click="restoreDataBase">🧺</div>
-    <transition name="fade">
+    <ClipFullData
-      <div class="clip-full" v-show="fullDataShow">
+      :isShow="fullDataShow"
-        <div v-if="fullData.type === 'text'">
+      :fullData="fullData"
-          <div v-text="fullData.data"></div>
+      @onOverlayClick="toggleFullData('')"
-        </div>
+    ></ClipFullData>
-        <div v-else>
-          <file-list :data="fullData.data"></file-list>
-        </div>
-      </div>
-    </transition>
-    <div class="clip-overlay" v-show="fullDataShow" @click="toggleFullData('')"></div>
     <div class="clip-switch">
       <div class="clip-switch-items">
         <template v-for="tab of tabs">
@@ -23,58 +17,27 @@
           </div>
         </template>
       </div>
-
       <div class="clip-search">
         <input v-model="filterText" autofocus type="text" placeholder="输入关键词检索" />
       </div>
     </div>
     <div class="clip-break"></div>
     <div class="clip-empty-status" v-if="showList.length === 0">📪 无记录</div>
-    <div
+    <ClipItemList :showList="showList" @onDataChange="toggleFullData"></ClipItemList>
-      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'">
-            <file-list :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="toggleFullData(item)"
-      >
-        📃
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import FileList from '../cpns/FileList.vue'
+import ClipItemList from '../cpns/ClipItemList.vue'
+import ClipFullData from '../cpns/ClipFullData.vue'
 
 export default {
   name: 'Main',
   components: {
-    FileList
+    FileList,
+    ClipItemList,
+    ClipFullData
   },
 
   data() {
@@ -203,26 +166,6 @@ export default {
       }
       document.scrollingElement.scrollTop = 0
     },
-    dateFormat(timeStamp) {
-      const startTime = new Date(timeStamp) // 开始时间
-      const endTime = new Date() // 结束时间
-      const gaps = [
-        Math.floor((endTime - startTime) / 1000 / 60), // 分钟
-        Math.floor((endTime - startTime) / 1000 / 60 / 60), // 小时
-        Math.floor((endTime - startTime) / 1000 / 60 / 60 / 24) // 天
-      ]
-      let info = ''
-      if (gaps[2] > 0) {
-        info = `${gaps[2]}天前`
-      } else if (gaps[1] > 0) {
-        info = `${gaps[1]}小时前`
-      } else if (gaps[0] > 0) {
-        info = `${gaps[0]}分钟前`
-      } else {
-        info = '刚刚'
-      }
-      return info
-    },
     toggleFullData(item) {
       // only text || file
       const { type, data } = item
@@ -233,12 +176,8 @@ export default {
         this.fullData.type = 'file'
         this.fullData.data = JSON.parse(data)
       }
-
       this.fullDataShow = !this.fullDataShow
     },
-    executeCopy(item) {
-      window.copy(item)
-    },
     restoreDataBase() {
       const flag = window.confirm('确定要清空剪贴板记录吗?')
       if (flag) {
@@ -250,15 +189,8 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
-:root {
+@import '../style/variable.less';
-  --primary--color: #8a2be2;
-  --primary--color-lighter: #d3b8ec;
-  --text-color: #333;
-  --text-color-lighter: rgb(138, 138, 138);
-  --text-bg-color: #e3d9ec;
-  --text-bg-color-lighter: #eeeaf3;
-}
 .clip-restore {
   display: flex;
   justify-content: center;
@@ -273,10 +205,10 @@ export default {
   font-size: 20px;
   background-color: rgb(232, 232, 232);
   user-select: none;
-}
+  &:hover {
-.clip-restore:hover {
+    background-color: @primary-color;
-  background-color: var(--primary--color);
+    transition: all 0.15s;
-  transition: all 0.15s;
+  }
 }
 .clip-switch {
   z-index: 999;
@@ -288,49 +220,49 @@ export default {
   flex-direction: row;
   width: 100%;
   background-color: #eeeeee;
-}
+  .active {
-.clip-switch-items {
+    color: @primary-color;
-  display: flex;
+    background-color: white;
-  justify-content: left;
+    transition: all 0.15s ease-in-out;
-  align-items: center;
+  }
-  flex-direction: row;
+  .clip-switch-items {
-}
+    display: flex;
-.clip-switch .clip-switch-item {
+    justify-content: left;
-  padding: 10px 15px 10px 15px;
+    align-items: center;
-  margin: 10px 5px 10px 10px;
+    flex-direction: row;
-  cursor: pointer;
+    .clip-switch-item {
-  border-radius: 5px;
+      padding: 10px 15px 10px 15px;
-  font-size: 14px;
+      margin: 10px 5px 10px 10px;
-}
+      cursor: pointer;
-.clip-switch .clip-switch-item:hover {
+      border-radius: 5px;
-  background-color: rgb(222, 222, 222);
+      font-size: 14px;
-  transition: all 0.15s ease-in-out;
+      &:hover {
-}
+        background-color: rgb(222, 222, 222);
-.clip-switch .active {
+        transition: all 0.15s ease-in-out;
-  color: var(--primary--color);
+      }
-  background-color: white;
+    }
-  transition: all 0.15s ease-in-out;
+  }
 }
 .clip-search {
   width: 40%;
   margin-right: 30px;
-}
+  input {
-.clip-search input {
+    width: 100%;
-  width: 100%;
+    /* normalize */
-  /* normalize */
+    background: none;
-  background: none;
+    outline: none;
-  outline: none;
+    border: none;
-  border: none;
+    /* custom */
-  /* custom */
+    color: @text-color;
-  color: var(--text-color);
+    background-color: white;
-  background-color: white;
+    height: fit-content;
-  height: fit-content;
+    font-size: 15px;
-  font-size: 15px;
+    padding: 10px;
-  padding: 10px;
+    border-radius: 5px;
-  border-radius: 5px;
+    &::placeholder {
-}
+      color: @text-color-lighter;
-.clip-search input::placeholder {
+    }
-  color: var(--text-color-lighter);
+  }
 }
 .clip-break {
   height: 55px;
@@ -343,107 +275,13 @@ export default {
   align-items: center;
   margin-top: 50px;
 }
-.clip-item {
+
-  display: flex;
+// .fade-enter-active,
-  justify-content: space-between;
+// .fade-leave-active {
-  border: 0px solid #eee;
+//   transition: all 0.15s;
-  border-width: 0px 0px 1px 0px;
+// }
-  cursor: pointer;
+// .fade-enter,
-}
+// .fade-leave-to {
-.clip-item:hover {
+//   opacity: 0;
-  background-color: var(--text-bg-color-lighter);
+// }
-  transition: all 0.15s;
-}
-.clip-info {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  padding: 10px;
-}
-.clip-time {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 100px;
-}
-.clip-time span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 13px;
-  color: var(--text-color-lighter);
-  background-color: var(--text-bg-color);
-  border-radius: 5px;
-  min-width: 50px;
-  padding: 5px 10px 5px 10px;
-}
-.clip-data {
-  display: flex;
-  overflow: hidden;
-  word-break: break-all;
-  max-height: 150px;
-  padding: 5px;
-  white-space: pre-wrap;
-  flex-direction: column;
-  background-color: white;
-}
-.clip-data img {
-  max-height: 150px;
-}
-.clip-data .clip-image-size {
-  position: absolute;
-  background-color: white;
-}
-.clip-count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 50px;
-  padding: 10px;
-  font-size: 13px;
-  color: var(--text-color-lighter);
-  padding: 10px;
-}
-.clip-more {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  font-size: 13px;
-  cursor: pointer;
-  border-radius: 0px 5px 5px 0px;
-}
-.clip-more:hover {
-  background-color: var(--text-bg-color);
-  transition: all 0.15s;
-}
-.clip-full {
-  z-index: 9999999999;
-  position: fixed;
-  top: 0;
-  height: 100%;
-  width: 60%;
-  background: white;
-  padding: 0px 20px 0px 20px;
-  overflow-y: scroll;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.15s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-.clip-overlay {
-  z-index: 999999999;
-  position: fixed;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
 </style>