【油猴脚本】勋章触发记录 PAUSE(EA) 账本界面皮肤
本帖最后由 星之子 于 2024-10-15 15:51 编辑声明
本帖涉及的皮肤是基于 瓦尼老师 @GMagels 开发的勋章触发记录他来了-本地发回帖账本PAUSE（EA版），这个脚本好用到爆炸，非常方便地统计了勋章触发的结果，并记录了很多强运时刻~
我所做的工作只是搞耍CSS效果制作了此皮肤，并对原账本界面的页面结构进行了些许微调，于功能方面并无贡献。在这里郑重感谢瓦尼老师的免费开源！（请去原帖给瓦尼老师点个追随惹！）
效果图
左侧工具栏：
[*]调整了样式和颜色
[*]调整了文字大小比例，分级更加清晰
[*]为按钮添加了动效
[*]去掉了重置筛选栏目
[*]去掉展开折叠按钮的文字并改为圆形
右侧表格栏：
[*]仅保留表格外框并添加圆角，内容则通过隔行背景色区分，减轻视觉压力
[*]文字改为居中显示，视觉重心更稳定
[*]添加了鼠标悬停会平滑显示的强调色（由于鼠标悬停在了左侧按钮处，图中未能展示此效果）
代码
请用下方内容替换原脚本【PAUSE V062(EA持久版).txt】的404-570行：
//创建功能区
var fixedHTML = '<div id="fixedBox"><h3>记录工具箱</h3>';
//创建记录存档操作区
var toolHTML = '<div id="toolBox">';
// 添加导出按钮
toolHTML += '<button id="exportBtn">导出本地记录为.txt</button>';
// 添加导入按钮和文件输入框
toolHTML += '<input type="file" id="importFile" accept=".txt" style="display:none;">';
toolHTML += '<button id="importBtn">从.txt导入本地记录</button>';
// 添加删除按钮
toolHTML += '<button id="deleteBtn">删除所有本地记录</button>';
//提示信息
toolHTML += '<p id="exportNull" style="display: none;">没有数据可以导出。</p>'
toolHTML += '<p id="importSuccess" style="display: none;">导入成功！</p>'
toolHTML += '<p id="importFail" style="display: none;">导入失败，文件内容不是有效的JSON数组。</p>'
toolHTML += '<p id="importError" style="display: none;">导入失败，无法解析文件内容,请前往主页面弹窗查看原因。</p>'
toolHTML += '<div id="customConfirmModal" style="display: none;"><p>确定要删除所有本地积分记录吗？此操作不可逆！</p><div class="buttonContainer"><button id="confirmYes">确定</button><button id="confirmNo">取消</button></div></div>';
toolHTML += '<p id="deleteSuccess" style="display: none;">已删除所有记录</p>';
toolHTML += '</div>';
//创建右侧记录筛选区
var filterHTML = '<div id="toolBox"><h3>筛选记录</h3>';
filterHTML += `
<fieldset>
<legend>奖励类型</legend>
<div>
<input type="checkbox" id="showHuiTie" name="showHuiTie" checked />
<label for="showHuiTie">回帖奖励</label>
</div>
<div>
<input type="checkbox" id="showFaTie" name="showFaTie" checked />
<label for="showFaTie">发帖奖励</label>
</div>
<div>
<input type="checkbox" id="showQiTa" name="showQiTa" checked />
<label for="showQiTa">其他奖励</label>
</div>
</fieldset>
<fieldset>
<legend>时间范围</legend>
<input type="radio" id="option1" name="timeRange" value="1">
<label for="option1">当天</label><br>
<input type="radio" id="option2" name="timeRange" value="custom" checked>
<label for="option2">自定义<input type="number" min="0" id="customDays" value="0"></label><br>
<small>(N:过去N天内 1:当天 0:全部)</small>
</fieldset>
`;
filterHTML += '</div>'
//将左侧的模块都塞进fixed部分
fixedHTML += toolHTML;
fixedHTML += filterHTML;
fixedHTML += '</div>';
//最后塞入用于显示/隐藏的按钮
fixedHTML += '<button id="toggleToolBoxBtn"></button>'
//通过函数生成右侧表格内容（方便后期更新表格）
var rightHTML = '<div id="tableBox">' + generateRightHTML() + '</div>';
//总结构
var overallHTML = '<div class="container">' + fixedHTML + rightHTML + '</div>';
// 插入到新窗口的文档中
iframe.contentDocument.body.innerHTML += overallHTML;
//////////////////// 添加css/////////////////////////
// 获取IFrame的内容文档对象
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 创建一个新的<style>元素
var styleTag = iframeDoc.createElement('style');
// 定义CSS样式内容
var styles = `
#fixedBox {
position: fixed;
width: auto;
height: 96vh;
background: #eeeeee;
float: left;
min-width: 100px;
overflow-y: auto;
border-radius: 8px;
font-family: Noto Sans SC, Microsoft Yahei, Arial, sans-serif;
}
.container {
display: flex;
}
#toolBox {
padding: 10px;
}
#exportBtn,
#importBtn {
margin: 6px auto 20px;
}
#deleteBtn {
margin: auto;
}
#exportBtn,
#importBtn,
#deleteBtn {
display: block;
background-color: transparent;
border: 2px solid #1A1A1A;
border-radius: 0.6em;
color: #3B3B3B;
font-weight: 600;
font-size: 14.4px;
padding: 0.4em 1.2em;
text-align: center;
text-decoration: none;
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
font-family: Noto Sans SC, Microsoft Yahei, Arial, sans-serif;
}
#exportBtn:hover,
#importBtn:hover,
#deleteBtn:hover {
color: #fff;
background-color: #1A1A1A;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}
#exportBtn:active,
#importBtn:active,
#deleteBtn:active {
box-shadow: none;
transform: translateY(0);
}
h3 {
display: block;
text-align: center;
font-size: 2em;
margin: 36px auto 12px;
}
#customConfirmModal {
border-style: solid;
border-width: 3px;
border-color: red;
}
#customConfirmModal p {
color: red;
margin: 20px;
}
#confirmYes {
margin: 0 20% 20px 20%;
}
#customDays {
width: 4em;
font-family: Noto Sans SC, Microsoft Yahei, Arial, sans-serif;
border-radius: 6px;
border: 1px solid #333;
}
#tableBox {
width: 80%;
float: right;
margin-left: 20%;
}
#tableBox table {
margin: 20px auto 40px auto;
border: 2px solid #333;
border-radius: 6px;
border-spacing: 0;
overflow: hidden;
}
th,
td {
padding: 4px 8px;
text-align: center;
transition: all 0.2s;
border: none;
}
th {background-color: #f2f2f2;}
tr:nth-child(even) {background-color: #f2f2f2; transition: all 0.2s;}
tr:hover {background-color: #d3d3d3; transition: all 0.2s;}
#toggleToolBoxBtn {
position: fixed;
width: 16px;
height: 16px;
margin-top: 8px;
margin-left: 8px;
z-index: 1000;
border: 1px solid #333;
padding: 4px;
border-radius: 50%;
}
fieldset {
border: 2px solid #333; /* 设置边框 */
padding: 8px 12px 16px 12px; /* 设置内边距 */
margin: 20px 10px; /* 设置外边距 */
background-color: #f9f9f9; /* 设置背景颜色 */
border-radius: 6px; /* 设置圆角 */
}
legend {
font-weight: bold; /* 设置字体加粗 */
color: #000; /* 设置字体颜色 */
}
label {
font-size:14.4px;
}
`;
// 将样式内容赋值给<style>元素的textContent属性
styleTag.textContent = styles;
// 将<style>元素添加到IFrame的<head>中
var head = iframeDoc.head || iframeDoc.getElementsByTagName('head');
head.appendChild(styleTag);
//////////////添加网页标题////////////////
星象占卜 很有用的工具
对囤囤鼠非常友好，看到这一排就觉得很开心 这个脚本我也是一直有在用，看到记录的大数字会有种爽快感{:6_169:}
（话说效果图居然没有放刚刚三帖四魂的记录;P 每一次触发的收益都能记录下来好强大呀，也能知道一天的总收益好方便{:6_169:} 美观度的提升确实是很大了 你这不愧是天天玩前端的 有統計可以更直觀的看到今天水了多少金(?);P
喔⊙ω⊙都是视觉设计上的调整哇～还挺好的～ 不明觉厉，只能说一声大佬牛哔 论坛人才辈出惹 皮肤简洁好看的说
楼主好厉害;P 这个脚本很实用，每次触发都能记录，我更喜欢楼主黑白皮肤 看起来更美观了，楼主好厉害啊，膜拜大佬 某种意义上也可以当成运气记录 记账本本功能得前端优化，看起来美观了很多{:6_200:} 羡慕你这120帖1800+金币的收益，这就是强者的世界吗.jpg{:6_194:} {:6_188:}前端设计师好评 可以把这个加到空间里边去，加个标题，今日站街努力程度 {:6_178:} 楼主真厉害啊，收益能记小本本很厉害啊 楼主的优化让界面更好看了噜{:6_169:} 好强，能直观的感受到数据回帖动力就有了呢{:4_114:}