mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-06 13:24:06 +08:00
init commit
This commit is contained in:
ZiuChen
commit
e8de8b6e06
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
37
package.json
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "clipboard-manager",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.6.4",
|
||||||
|
"crypto": "^1.0.1",
|
||||||
|
"licia": "^1.23.0",
|
||||||
|
"material-design-icons": "^3.0.1",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-material": "^1.0.0-beta-12",
|
||||||
|
"vue-router": "^3.1.6",
|
||||||
|
"vuex": "^3.1.3",
|
||||||
|
"webpack": "4.37.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.3.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.3.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.3.0",
|
||||||
|
"@vue/cli-service": "~4.3.0",
|
||||||
|
"copy-webpack-plugin": "^6.0.2",
|
||||||
|
"deepmerge": "^4.2.2",
|
||||||
|
"sass": "^1.26.9",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
11778
pnpm-lock.yaml
generated
Normal file
11778
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
public/index.html
Normal file
21
public/index.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
22
public/plugin.json
Normal file
22
public/plugin.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "clipboard",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"pluginName": "剪切板",
|
||||||
|
"description": "剪切板历史,snippet,代码片段",
|
||||||
|
"author": "inu1255",
|
||||||
|
"homepage": "https://github.com/inu1255/utools-clipboard",
|
||||||
|
"main": "index.html",
|
||||||
|
"preload": "preload.js",
|
||||||
|
"development": {
|
||||||
|
"main": "http://localhost:8081/"
|
||||||
|
},
|
||||||
|
"logo": "logo.png",
|
||||||
|
"platform": ["win32", "darwin", "linux"],
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"code": "clipboard",
|
||||||
|
"explain": "剪切板历史、剪贴板快速粘贴",
|
||||||
|
"cmds": ["剪切板", "剪贴板", "Clipboard"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
142
public/preload.js
Normal file
142
public/preload.js
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
// /*
|
||||||
|
// name: powerful_clipboard_manager
|
||||||
|
// author: Github @ZiuChen
|
||||||
|
// lastUpdate: v0.0.1 2022/08/14
|
||||||
|
// desc: 监听剪贴板 读写本地文件
|
||||||
|
// */
|
||||||
|
|
||||||
|
const fs = require('fs')
|
||||||
|
const crypto = require('crypto')
|
||||||
|
const { clipboard } = require('electron')
|
||||||
|
const nativeImage = require('electron').nativeImage
|
||||||
|
|
||||||
|
const home = utools.getPath('home')
|
||||||
|
|
||||||
|
const dbName = '_utools_clipboard_manager_storage'
|
||||||
|
|
||||||
|
class DB {
|
||||||
|
constructor(path) {
|
||||||
|
const d = new Date()
|
||||||
|
this.path = path
|
||||||
|
this.dataBase = {}
|
||||||
|
this.createTime = d.getTime()
|
||||||
|
this.updateTime = d.getTime()
|
||||||
|
}
|
||||||
|
init() {
|
||||||
|
const isExist = fs.existsSync(this.path)
|
||||||
|
|
||||||
|
if (isExist) {
|
||||||
|
const data = fs.readFileSync(this.path, {
|
||||||
|
encoding: 'utf8'
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const dataBase = JSON.parse(data)
|
||||||
|
this.dataBase = dataBase
|
||||||
|
} catch (err) {
|
||||||
|
utools.showNotification('读取剪切板出错' + err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultDB = {
|
||||||
|
data: [],
|
||||||
|
createTime: this.createTime,
|
||||||
|
updateTime: this.updateTime
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataBase = defaultDB
|
||||||
|
this.updateDataBaseLocal(defaultDB)
|
||||||
|
}
|
||||||
|
updateDataBase() {
|
||||||
|
// 更新内存数据
|
||||||
|
this.dataBase.updateTime = new Date().getTime()
|
||||||
|
}
|
||||||
|
updateDataBaseLocal(dataBase) {
|
||||||
|
// 更新文件数据
|
||||||
|
fs.writeFileSync(this.path, JSON.stringify(dataBase || this.dataBase), (err) => {
|
||||||
|
if (err) {
|
||||||
|
utools.showNotification('写入剪切板出错' + err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setItem(cItem) {
|
||||||
|
this.dataBase.data.unshift(cItem)
|
||||||
|
this.updateDataBase()
|
||||||
|
this.updateDataBaseLocal()
|
||||||
|
}
|
||||||
|
emptyDataBase() {
|
||||||
|
this.dataBase.data = []
|
||||||
|
this.updateDataBase()
|
||||||
|
this.updateDataBaseLocal()
|
||||||
|
}
|
||||||
|
filterDataBase(key) {
|
||||||
|
// 过滤展示数据
|
||||||
|
// TODO: 添加文件/目录名筛选
|
||||||
|
const filterValue = key.toLowerCase()
|
||||||
|
const textItems = this.dataBase.data.filter((item) => item.type === 'text')
|
||||||
|
return textItems.filter((item) => item.data.toLowerCase().indexOf(filterValue) !== -1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// inu1255: pbpaste & watchClipboard
|
||||||
|
function pbpaste() {
|
||||||
|
// let file;
|
||||||
|
// if (file) return {type: "file", data: file};
|
||||||
|
const image = clipboard.readImage()
|
||||||
|
if (!image.isEmpty())
|
||||||
|
return {
|
||||||
|
type: 'image',
|
||||||
|
size: `${image.getSize().width}x${image.getSize().height}`,
|
||||||
|
data: image.toDataURL()
|
||||||
|
}
|
||||||
|
let text = clipboard.readText()
|
||||||
|
if (text.trim()) return { type: 'text', data: text }
|
||||||
|
}
|
||||||
|
|
||||||
|
function watchClipboard(fn) {
|
||||||
|
let prev = {}
|
||||||
|
setInterval(() => {
|
||||||
|
const item = pbpaste()
|
||||||
|
console.log(item)
|
||||||
|
// 比较前后两次剪切板内容的哈希值是否相同 如果相同则不更新
|
||||||
|
item._id = crypto.createHash('md5').update(item).digest('hex')
|
||||||
|
if (item && prev._id != item._id) {
|
||||||
|
// 剪切板有更新
|
||||||
|
prev = item
|
||||||
|
fn(item)
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
function copy(item) {
|
||||||
|
switch (item.type) {
|
||||||
|
case 'text':
|
||||||
|
clipboard.writeText(item.data)
|
||||||
|
break
|
||||||
|
case 'image':
|
||||||
|
const nImg = nativeImage.createFromDataURL(item.data)
|
||||||
|
clipboard.writeImage(nImg)
|
||||||
|
break
|
||||||
|
case 'file':
|
||||||
|
clipboard.writeText(item.data)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const path = `${home}\\${dbName}`
|
||||||
|
const db = new DB(path)
|
||||||
|
db.init()
|
||||||
|
|
||||||
|
watchClipboard((item) => {
|
||||||
|
if (!item) return
|
||||||
|
item.id = crypto.createHash('md5').update(item.data).digest('hex')
|
||||||
|
item.createTime = new Date().getTime()
|
||||||
|
db.setItem(item)
|
||||||
|
})
|
||||||
|
|
||||||
|
window.db = db
|
||||||
|
window.copy = copy
|
||||||
5
src/App.vue
Normal file
5
src/App.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
43
src/cpns/FileList.vue
Normal file
43
src/cpns/FileList.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="clip-file-list">
|
||||||
|
<div class="clip-file" v-for="file of data.slice(0, 8)" @click.stop="openFile(file.path)">
|
||||||
|
<img class="clip-file-icon" :src="getIcon(file.path)" alt="icon" />
|
||||||
|
<!-- <span class="clip-file-icon" v-if="file.isFile">📄</span>
|
||||||
|
<span class="clip-folder-icon" v-else>📁</span> -->
|
||||||
|
{{ file.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'fileList',
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openFile(path) {
|
||||||
|
window.openFile(path)
|
||||||
|
},
|
||||||
|
getIcon(path) {
|
||||||
|
return window.getIcon(path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.clip-file:hover {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.clip-file:hover::after {
|
||||||
|
content: '📤';
|
||||||
|
}
|
||||||
|
.clip-file-icon {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
render: (h) => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
5
src/plugins/material.js
Normal file
5
src/plugins/material.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import 'material-design-icons/iconfont/material-icons.css';
|
||||||
|
import 'vue-material/dist/vue-material.min.css';
|
||||||
|
import 'vue-material/dist/theme/default.css';
|
||||||
|
import {} from 'vue-material/dist/components';
|
||||||
18
src/router/index.js
Normal file
18
src/router/index.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Main',
|
||||||
|
component: () => import('../views/Main.vue')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
349
src/views/Main.vue
Normal file
349
src/views/Main.vue
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
<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-if="fullData.type === 'file'">
|
||||||
|
<file-list :data="fullData.data"></file-list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<div class="clip-overlay" v-show="fullDataShow" @click="toggleFullData('')"></div>
|
||||||
|
<div class="clip-switch">
|
||||||
|
<template v-for="tab of tabs">
|
||||||
|
<div :class="{ active: activeTab === tab.type }" @click="toggleNav(tab.type)">
|
||||||
|
{{ tab.name }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileList from '../cpns/FileList.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Main',
|
||||||
|
components: {
|
||||||
|
FileList
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
GAP: 10,
|
||||||
|
offset: 0,
|
||||||
|
showList: [],
|
||||||
|
list: [],
|
||||||
|
fullData: { type: '', data: '' },
|
||||||
|
fullDataShow: false,
|
||||||
|
tabs: [
|
||||||
|
{
|
||||||
|
name: '📚 全部',
|
||||||
|
type: 'all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '📋 文字',
|
||||||
|
type: 'text'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '⛺ 图片',
|
||||||
|
type: 'image'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '📂 文件',
|
||||||
|
type: 'file'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
activeTab: 'all'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.list = window.db.dataBase.data
|
||||||
|
this.showList = this.list.slice(0, this.GAP) // 最初展示 10条
|
||||||
|
|
||||||
|
// 初始化导航
|
||||||
|
this.toggleNav(this.activeTab)
|
||||||
|
// 懒加载
|
||||||
|
document.addEventListener('scroll', (e) => {
|
||||||
|
console.log('scroll')
|
||||||
|
const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement
|
||||||
|
if (scrollTop + clientHeight + 25 >= scrollHeight) {
|
||||||
|
console.log('bottom')
|
||||||
|
this.offset += this.GAP + 1
|
||||||
|
let addition = []
|
||||||
|
if (this.activeTab !== 'all') {
|
||||||
|
addition = this.list.filter((item) => item.type === this.activeTab)
|
||||||
|
} else {
|
||||||
|
addition = this.list
|
||||||
|
}
|
||||||
|
addition = addition.slice(this.offset, this.offset + this.GAP)
|
||||||
|
if (addition.length) {
|
||||||
|
this.showList.push(...addition)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleNav(type) {
|
||||||
|
this.activeTab = type
|
||||||
|
if (type === 'all') {
|
||||||
|
this.showList = this.list.slice(0, this.GAP)
|
||||||
|
} else {
|
||||||
|
this.showList = this.list.filter((item) => item.type === type).slice(0, this.GAP)
|
||||||
|
}
|
||||||
|
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
|
||||||
|
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
|
||||||
|
},
|
||||||
|
executeCopy(item) {
|
||||||
|
window.copy(item)
|
||||||
|
},
|
||||||
|
restoreDataBase() {
|
||||||
|
console.log('restore clicked')
|
||||||
|
// window.db.emptyDataBase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
.clip-restore {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: rgb(232, 232, 232);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.clip-restore:hover {
|
||||||
|
background-color: var(--primary--color);
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
.clip-switch {
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
.clip-switch * {
|
||||||
|
padding: 10px 15px 10px 15px;
|
||||||
|
margin: 10px 5px 10px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.clip-switch *: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;
|
||||||
|
}
|
||||||
|
.clip-break {
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
.clip-empty-status {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
26
vue.config.js
Normal file
26
vue.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
||||||
|
const CopyPlugin = require('copy-webpack-plugin')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
publicPath: './',
|
||||||
|
productionSourceMap: false,
|
||||||
|
chainWebpack: config => {
|
||||||
|
config.optimization
|
||||||
|
.minimizer('uglify-plugin')
|
||||||
|
.use(UglifyJsPlugin, [{
|
||||||
|
uglifyOptions: {
|
||||||
|
drop_console: false,
|
||||||
|
drop_debugger: false,
|
||||||
|
pure_funcs: ['console.log']
|
||||||
|
}
|
||||||
|
}])
|
||||||
|
config.plugin('copy-plugin')
|
||||||
|
.use(CopyPlugin, [{
|
||||||
|
patterns: [{
|
||||||
|
from: path.join(__dirname, 'README.md'),
|
||||||
|
to: path.join(__dirname, 'dist', 'README.md'),
|
||||||
|
}],
|
||||||
|
}])
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user