mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-12 10:14:06 +08:00
feat: 拆分组件 用Vue3重写Main.vue
This commit is contained in:
parent
94161453b4
commit
6b63c7a4f7
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FileListVue from './FileList.vue'
|
||||
import FileList from './FileList.vue'
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
|
22
src/cpns/ClipSearch.vue
Normal file
22
src/cpns/ClipSearch.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="clip-search">
|
||||
<input v-model="filterText" autofocus type="text" placeholder="输入关键词检索" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
const filterText = ref('')
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
watch(filterText, (val) => emit('update:modelValue', val))
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-search.less';
|
||||
</style>
|
42
src/cpns/ClipSwitch.vue
Normal file
42
src/cpns/ClipSwitch.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="clip-switch">
|
||||
<div class="clip-switch-items">
|
||||
<template v-for="tab of tabs">
|
||||
<div
|
||||
:class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
|
||||
@click="onNavClick(tab.type)"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<slot name="SidePanel"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const tabs = ref([
|
||||
{ name: '📚 全部', type: 'all' },
|
||||
{ name: '📋 文字', type: 'text' },
|
||||
{ name: '⛺ 图片', type: 'image' },
|
||||
{ name: '📂 文件', type: 'file' }
|
||||
])
|
||||
const activeTab = ref('all')
|
||||
const emit = defineEmits(['onNavClick'])
|
||||
const toggleNav = (type) => (activeTab.value = type)
|
||||
const onNavClick = (type) => {
|
||||
toggleNav(type)
|
||||
emit('onNavClick', type)
|
||||
}
|
||||
defineExpose({
|
||||
tabs,
|
||||
activeTab,
|
||||
toggleNav
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../style/cpns/clip-switch.less';
|
||||
</style>
|
@ -7,24 +7,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fileList',
|
||||
props: {
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFile(path) {
|
||||
window.openFile(path)
|
||||
},
|
||||
getIcon(path) {
|
||||
return window.getIcon(path)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const openFile = (path) => window.openFile(path)
|
||||
const getIcon = (path) => window.getIcon(path)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
22
src/style/cpns/clip-search.less
Normal file
22
src/style/cpns/clip-search.less
Normal file
@ -0,0 +1,22 @@
|
||||
@import '../variable.less';
|
||||
.clip-search {
|
||||
width: 40%;
|
||||
margin-right: 30px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
34
src/style/cpns/clip-switch.less
Normal file
34
src/style/cpns/clip-switch.less
Normal file
@ -0,0 +1,34 @@
|
||||
@import '../variable.less';
|
||||
.clip-switch {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -6,81 +6,92 @@
|
||||
:fullData="fullData"
|
||||
@onOverlayClick="toggleFullData('')"
|
||||
></ClipFullData>
|
||||
<div class="clip-switch">
|
||||
<div class="clip-switch-items">
|
||||
<template v-for="tab of tabs">
|
||||
<div
|
||||
:class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
|
||||
@click="toggleNav(tab.type)"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</div>
|
||||
<ClipSwitch ref="ClipSwitchRef" @onNavClick="updateShowList">
|
||||
<template #SidePanel>
|
||||
<ClipSearch v-model="filterText"></ClipSearch>
|
||||
</template>
|
||||
</div>
|
||||
<div class="clip-search">
|
||||
<input v-model="filterText" autofocus type="text" placeholder="输入关键词检索" />
|
||||
</div>
|
||||
</div>
|
||||
</ClipSwitch>
|
||||
<div class="clip-break"></div>
|
||||
<div class="clip-empty-status" v-if="showList.length === 0">📪 无记录</div>
|
||||
<ClipItemList :showList="showList" @onDataChange="toggleFullData"> </ClipItemList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileList from '../cpns/FileList.vue'
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue'
|
||||
import ClipItemList from '../cpns/ClipItemList.vue'
|
||||
import ClipFullData from '../cpns/ClipFullData.vue'
|
||||
import ClipSearch from '../cpns/ClipSearch.vue'
|
||||
import ClipSwitch from '../cpns/ClipSwitch.vue'
|
||||
|
||||
export default {
|
||||
name: 'Main',
|
||||
components: {
|
||||
FileList,
|
||||
ClipItemList,
|
||||
ClipFullData
|
||||
},
|
||||
const ClipSwitchRef = ref()
|
||||
|
||||
data() {
|
||||
return {
|
||||
GAP: 10,
|
||||
offset: 0,
|
||||
showList: [],
|
||||
list: [],
|
||||
fullData: { type: 'text', data: '' },
|
||||
fullDataShow: false,
|
||||
filterText: '',
|
||||
tabs: [
|
||||
{
|
||||
name: '📚 全部',
|
||||
type: 'all'
|
||||
},
|
||||
{
|
||||
name: '📋 文字',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
name: '⛺ 图片',
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
name: '📂 文件',
|
||||
type: 'file'
|
||||
}
|
||||
],
|
||||
activeTab: 'all'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText: function (val) {
|
||||
this.updateShowList()
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.list = window.db.dataBase.data
|
||||
this.showList = this.list.slice(0, this.GAP) // 最初展示 10条
|
||||
const fullData = ref({ type: 'text', data: '' })
|
||||
const fullDataShow = ref(false)
|
||||
|
||||
// 初始化导航
|
||||
this.toggleNav(this.activeTab)
|
||||
const filterText = ref('')
|
||||
|
||||
const GAP = 10
|
||||
const list = ref([])
|
||||
const showList = ref([])
|
||||
const offset = ref(0)
|
||||
const updateShowList = (type) => {
|
||||
if (type === 'all') {
|
||||
if (filterText.value) {
|
||||
// 有过滤词 则过滤掉图片
|
||||
showList.value = list.value
|
||||
.filter((item) => item.type !== 'image')
|
||||
.filter((item) => item.data.indexOf(filterText.value) !== -1)
|
||||
.slice(0, GAP)
|
||||
} else {
|
||||
// 无过滤词 直接更新
|
||||
showList.value = list.value
|
||||
.filter((item) => item.data.indexOf(filterText.value) !== -1)
|
||||
.slice(0, GAP)
|
||||
}
|
||||
} else if (type === 'image') {
|
||||
// 排除掉对图片 DataURL的筛选
|
||||
showList.value = list.value.filter((item) => item.type === type).slice(0, GAP)
|
||||
} else {
|
||||
// `file`类型 在stringify的data里搜
|
||||
// `text`类型 在data里搜
|
||||
showList.value = list.value
|
||||
.filter((item) => item.type === type)
|
||||
.filter((item) => item.data.indexOf(filterText.value) !== -1)
|
||||
.slice(0, GAP)
|
||||
}
|
||||
document.scrollingElement.scrollTop = 0
|
||||
}
|
||||
|
||||
const toggleFullData = (item) => {
|
||||
// only text || file
|
||||
const { type, data } = item
|
||||
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)
|
||||
}
|
||||
fullDataShow.value = !fullDataShow.value
|
||||
}
|
||||
|
||||
const restoreDataBase = () => {
|
||||
const flag = window.confirm('确定要清空剪贴板记录吗?')
|
||||
if (flag) {
|
||||
window.db.emptyDataBase()
|
||||
updateShowList('all')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取挂载 Ref
|
||||
const activeTab = computed(() => ClipSwitchRef.value.activeTab)
|
||||
|
||||
// 初始化数据
|
||||
list.value = window.db.dataBase.data
|
||||
showList.value = list.value.slice(0, GAP) // 最初展示 10条
|
||||
updateShowList(activeTab.value)
|
||||
|
||||
// 定期检查更新
|
||||
let prev = {}
|
||||
@ -89,30 +100,38 @@ export default {
|
||||
if (prev?.id === now?.id) {
|
||||
} else {
|
||||
// 有更新
|
||||
this.list = window.db.dataBase.data
|
||||
this.toggleNav(this.activeTab)
|
||||
list.value = window.db.dataBase.data
|
||||
updateShowList(activeTab.value)
|
||||
prev = now
|
||||
}
|
||||
}, 500)
|
||||
|
||||
// 懒加载
|
||||
const callBack = (e) => {
|
||||
// 监听搜索框
|
||||
watch(filterText, (val) => {
|
||||
console.log(val)
|
||||
console.log(ClipSwitchRef)
|
||||
updateShowList(activeTab.value)
|
||||
})
|
||||
|
||||
// 列表懒加载
|
||||
document.addEventListener('scroll', (e) => {
|
||||
const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement
|
||||
if (scrollTop + clientHeight + 20 >= scrollHeight) {
|
||||
this.offset += this.GAP + 1
|
||||
offset.value += GAP + 1
|
||||
let addition = []
|
||||
if (this.activeTab !== 'all') {
|
||||
addition = this.list.filter((item) => item.type === this.activeTab)
|
||||
if (activeTab.value !== 'all') {
|
||||
addition = list.value.filter((item) => item.type === activeTab.value)
|
||||
} else {
|
||||
addition = this.list
|
||||
addition = list.value
|
||||
}
|
||||
addition = addition.slice(this.offset, this.offset + this.GAP)
|
||||
addition = addition.slice(offset.value, offset.value + GAP)
|
||||
if (addition.length) {
|
||||
this.showList.push(...addition)
|
||||
showList.value.push(...addition)
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('scroll', callBack)
|
||||
})
|
||||
|
||||
// 监听键盘事件
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const { key, ctrlKey } = e
|
||||
const isTab = key === 'Tab'
|
||||
@ -122,74 +141,20 @@ export default {
|
||||
(ctrlKey && (key === 'L' || key === 'l'))
|
||||
const isExit = key === 'Escape'
|
||||
if (isTab) {
|
||||
const l = ['all', 'text', 'image', 'file']
|
||||
const i = l.indexOf(this.activeTab)
|
||||
const t = i === l.length - 1 ? l[0] : l[i + 1]
|
||||
this.toggleNav(t)
|
||||
const list = ['all', 'text', 'image', 'file']
|
||||
const index = list.indexOf(activeTab.value)
|
||||
const target = index === list.length - 1 ? list[0] : list[index + 1]
|
||||
updateShowList(target)
|
||||
} else if (isSearch) {
|
||||
document.querySelector('input').focus()
|
||||
} else if (isExit) {
|
||||
this.filterText = ''
|
||||
filterText.value = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleNav(type) {
|
||||
// 切换导航 同时更新展示的数据
|
||||
this.activeTab = type
|
||||
this.updateShowList()
|
||||
},
|
||||
updateShowList(type = this.activeTab) {
|
||||
if (type === 'all') {
|
||||
if (this.filterText) {
|
||||
// 有过滤词 则过滤掉图片
|
||||
this.showList = this.list
|
||||
.filter((item) => item.type !== 'image')
|
||||
.filter((item) => item.data.indexOf(this.filterText) !== -1)
|
||||
.slice(0, this.GAP)
|
||||
} else {
|
||||
// 无过滤词 直接更新
|
||||
this.showList = this.list
|
||||
.filter((item) => item.data.indexOf(this.filterText) !== -1)
|
||||
.slice(0, this.GAP)
|
||||
}
|
||||
} else if (type === 'image') {
|
||||
// 排除掉对图片 DataURL的筛选
|
||||
this.showList = this.list.filter((item) => item.type === type).slice(0, this.GAP)
|
||||
} else {
|
||||
// `file`类型 在stringify的data里搜
|
||||
// `text`类型 在data里搜
|
||||
this.showList = this.list
|
||||
.filter((item) => item.type === type)
|
||||
.filter((item) => item.data.indexOf(this.filterText) !== -1)
|
||||
.slice(0, this.GAP)
|
||||
}
|
||||
document.scrollingElement.scrollTop = 0
|
||||
},
|
||||
toggleFullData(item) {
|
||||
// only text || file
|
||||
const { type, data } = item
|
||||
if (type === 'text') {
|
||||
this.fullData.type = 'text'
|
||||
this.fullData.data = data
|
||||
} else if (type === 'file') {
|
||||
this.fullData.type = 'file'
|
||||
this.fullData.data = JSON.parse(data)
|
||||
}
|
||||
this.fullDataShow = !this.fullDataShow
|
||||
},
|
||||
restoreDataBase() {
|
||||
const flag = window.confirm('确定要清空剪贴板记录吗?')
|
||||
if (flag) {
|
||||
window.db.emptyDataBase()
|
||||
this.updateShowList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
@import '../style/variable.less';
|
||||
.clip-restore {
|
||||
display: flex;
|
||||
@ -210,60 +175,7 @@ export default {
|
||||
transition: all 0.15s;
|
||||
}
|
||||
}
|
||||
.clip-switch {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
@ -275,13 +187,4 @@ export default {
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
// .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