mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-13 02:47:10 +08:00
feat: 组件解耦 提取样式文件
This commit is contained in:
ZiuChen
parent
2840f21b63
commit
b4bb815ac8
35
src/cpns/ClipFullData.vue
Normal file
35
src/cpns/ClipFullData.vue
Normal file
@ -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>
|
||||
60
src/cpns/ClipItemList.vue
Normal file
60
src/cpns/ClipItemList.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
20
src/style/cpns/clip-full-data.less
Normal file
20
src/style/cpns/clip-full-data.less
Normal file
@ -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);
|
||||
}
|
||||
76
src/style/cpns/clip-item-list.less
Normal file
76
src/style/cpns/clip-item-list.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
16
src/style/cpns/file-list.less
Normal file
16
src/style/cpns/file-list.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
6
src/style/variable.less
Normal file
6
src/style/variable.less
Normal file
@ -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;
|
||||
22
src/utils/index.js
Normal file
22
src/utils/index.js
Normal file
@ -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 }
|
||||
@ -1,17 +1,11 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="clip-restore" @click="restoreDataBase">🧺</div>
|
||||
<transition name="fade">
|
||||
<div class="clip-full" v-show="fullDataShow">
|
||||
<div v-if="fullData.type === 'text'">
|
||||
<div v-text="fullData.data"></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<file-list :data="fullData.data"></file-list>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="clip-overlay" v-show="fullDataShow" @click="toggleFullData('')"></div>
|
||||
<ClipFullData
|
||||
:isShow="fullDataShow"
|
||||
:fullData="fullData"
|
||||
@onOverlayClick="toggleFullData('')"
|
||||
></ClipFullData>
|
||||
<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
|
||||
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>
|
||||
<ClipItemList :showList="showList" @onDataChange="toggleFullData"></ClipItemList>
|
||||
</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>
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
<style lang="less">
|
||||
@import '../style/variable.less';
|
||||
.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;
|
||||
}
|
||||
.clip-restore:hover {
|
||||
background-color: var(--primary--color);
|
||||
transition: all 0.15s;
|
||||
&:hover {
|
||||
background-color: @primary-color;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
}
|
||||
.clip-switch {
|
||||
z-index: 999;
|
||||
@ -288,49 +220,49 @@ export default {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.clip-switch-items {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.clip-switch .clip-switch-item {
|
||||
padding: 10px 15px 10px 15px;
|
||||
margin: 10px 5px 10px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.clip-switch .clip-switch-item:hover {
|
||||
background-color: rgb(222, 222, 222);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
.clip-switch .active {
|
||||
color: var(--primary--color);
|
||||
background-color: white;
|
||||
transition: all 0.15s ease-in-out;
|
||||
.active {
|
||||
color: @primary-color;
|
||||
background-color: white;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
.clip-switch-items {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.clip-switch-item {
|
||||
padding: 10px 15px 10px 15px;
|
||||
margin: 10px 5px 10px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background-color: rgb(222, 222, 222);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.clip-search {
|
||||
width: 40%;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.clip-search input {
|
||||
width: 100%;
|
||||
/* normalize */
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
/* custom */
|
||||
color: var(--text-color);
|
||||
background-color: white;
|
||||
height: fit-content;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.clip-search input::placeholder {
|
||||
color: var(--text-color-lighter);
|
||||
input {
|
||||
width: 100%;
|
||||
/* normalize */
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
/* custom */
|
||||
color: @text-color;
|
||||
background-color: white;
|
||||
height: fit-content;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
&::placeholder {
|
||||
color: @text-color-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clip-break {
|
||||
height: 55px;
|
||||
@ -343,107 +275,13 @@ export default {
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.clip-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 0px solid #eee;
|
||||
border-width: 0px 0px 1px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clip-item:hover {
|
||||
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);
|
||||
}
|
||||
|
||||
// .fade-enter-active,
|
||||
// .fade-leave-active {
|
||||
// transition: all 0.15s;
|
||||
// }
|
||||
// .fade-enter,
|
||||
// .fade-leave-to {
|
||||
// opacity: 0;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user