超好用的备忘录～再也不用担心忘记什么啦！
当前为
// ==UserScript==
// @name 网站备忘录
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 超好用的备忘录～再也不用担心忘记什么啦！
// @author Priate
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// @grant GM_notification
// @grant GM_setClipboard
// @require https://cdn.jsdelivr.net/npm/vue
// @supportURL https://greasyforks.org/zh-CN
// @source https://github.com/PriateXYF
// ==/UserScript==
(function() {
'use strict';
function initSetting(){
if (!GM_getValue('priate_script_note_data')) {
GM_setValue('priate_script_note_data', [])
}
if (!GM_getValue('priate_script_note_setting')) {
GM_setValue('priate_script_note_setting', {
hide : true,
number : 0,
})
}
}
function injectDiv(){
var priate_script_div = document.createElement("div")
priate_script_div.innerHTML = `
<div id="priate_script_div" :class="setting.hide || add ? '' : 'priate_script_hide'">
<span v-show="!setting.hide" @click="showScript" class="hide-button">{{hideTipe}}</span>
<div v-show="setting.hide">
<b style='font-size:30px; margin: 0 0'>网站备忘录</b><p style='margin: 0 0'>by Priate</p>
<button @click="showAdd">添加</button>
  
<button @click='hideScript'>隐藏</button>
  
<button id='readme' @click="clearHostData">清空</button>
  
<button @click='resetScript'>重置</button>
</br>
<table>
<thead><tr><th>内容</th><th>时间</th><th>操作</th></tr></thead>
<tbody id="priate_script_table">
<tr v-for="(item, index) in filterData" key="index">
<td v-show="!item.isHide">{{item.content}}</td>
<td v-show="item.isHide"><a style='color:blue' @click="showNote(item.id)">显示</a> | <a style='color:red' @click="copyNote(item.content)">复制</a></td>
<td>{{item.time}}</td>
<td><a style='color:#993333' @click="deleteNote(item.id)">删除</a> | <a style='color:green'>修改</a></td>
</tr>
</tbody>
</table>
</div>
<div id="add_note" v-show="add">
<h2>添加记录</h2>
<table>
<tr><td><input v-model="note.content" placeholder="添加笔记"></td></tr>
<tr><td>隐藏文本<input v-model="note.isHide" type="checkbox"></td></tr>
<tr><td><button @click="hideAdd">取消</button> <button @click="addNote">确定</button></td></tr>
</table>
</div>
</div>
`
GM_addStyle(`
#priate_script_div{
font-size : 15px;
position: fixed;
left: 20px;
top:100px;
background-color: rgba(254, 244, 139, 0.8);
text-align : center;
padding: 10px;
z-index : 2147483647;
border-radius : 20px;
border:2px solid black;
box-shadow: 5px 5px 5px #000000;
}
.priate_script_hide{
padding: 0 !important;
}
a{
cursor : pointer;
text-decoration : none;
}
/*表格样式*/
#priate_script_div table{
text-align: center;
border:2px solid #000000;
margin: 5px auto;
padding: 2px;
border-collapse: collapse;
}
/*表格框样式*/
#priate_script_div td{
border:2px solid #000000;
padding: 8px 12px;
}
/*表头样式*/
#priate_script_div th{
border:2px solid #000000;
padding: 8px 12px;
}
/*脚本按钮样式*/
#priate_script_div button{
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
background-color: transparent;
color: #3b8070;
text-decoration: none;
padding: 5px 10px;
}
/*脚本按钮悬浮样式*/
#priate_script_div button:hover{
cursor : pointer;
color: #ffffff;
background-color: #3b8070;
}
/*右下角显示按钮*/
#priate_script_div .hide-button{
z-index: 2147483647;
width: 32px;
height: 32px;
cursor: pointer;
position: fixed;
left: 0px;
bottom: 0px;
color: rgb(32, 150, 243);
text-align: center;
line-height: 32px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(32, 150, 243);
border-image: initial;
border-radius: 100%;
}
#priate_script_div .hide-button:hover{
background-color: rgb(32, 150, 243);
color: #fff;
}
`);
document.querySelector("html").appendChild(priate_script_div)
}
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
};
// 获取当前时间
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes()
return currentdate;
}
//初始化脚本设置
initSetting()
//注入脚本div
injectDiv()
// 处理数据等逻辑
var vm = new Vue({
el: '#priate_script_div',
data: {
setting: GM_getValue('priate_script_note_setting'),
add: false,
//添加的内容
note : {
content : "",
// 是否隐藏
isHide : false,
},
data: GM_getValue('priate_script_note_data'),
},
methods : {
hideScript(){
this.setting.hide = false
GM_setValue('priate_script_note_setting', this.setting)
},
showScript(){
this.setting.hide = true
this.add = false
GM_setValue('priate_script_note_setting', this.setting)
},
showAdd(){
this.add = true
this.setting.hide = false
},
hideAdd(){
this.add = false
this.setting.hide = true
},
addNote(){
var origan_data = GM_getValue('priate_script_note_data')
this.note.id = this.setting.number++
this.note.time = getNowFormatDate()
this.note.host = location.host
origan_data.push(this.note)
GM_setValue('priate_script_note_data', origan_data)
this.data = origan_data
this.hideAdd()
GM_setValue('priate_script_note_setting', this.setting)
},
// 重置脚本数据
resetScript(){
const flag = confirm("是否重置全部脚本数据？")
if(flag){
GM_setValue('priate_script_note_data', [])
GM_setValue('priate_script_note_setting', {
hide : true,
number : 0,
})
GM_notification("已清除全部数据，请刷新页面。", "操作成功!");
}
},
deleteNote(id){
var origan_data = GM_getValue('priate_script_note_data')
var new_data = origan_data.filter((item)=> item.id != id)
GM_setValue('priate_script_note_data', new_data)
this.data = new_data
},
// 清空站点全部记录
clearHostData(){
const flag = confirm("是否清空【该站点】下的全部数据？")
if(flag){
var origan_data = GM_getValue('priate_script_note_data')
var new_data = origan_data.filter((item)=> item.host != location.host)
GM_setValue('priate_script_note_data', new_data)
this.data = new_data
}
},
// 显示隐藏的内容
showNote(id){
for(var index in this.data){
if(this.data[index].id == id){
this.data[index].isHide = false
break
}
}
},
copyNote(content){
GM_setClipboard(content)
}
},
computed: {
filterData(){
return this.data.filter((item)=> item.host == location.host)
},
hideTipe(){
return this.filterData.length
}
}
})
//设置div可拖动
dragFunc("priate_script_div");
})();