docs: 增加部分章节锁定功能
This commit is contained in:
click33
@@ -235,7 +235,6 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- UI逐渐显现 -->
|
||||
<style type="text/css">
|
||||
body {
|
||||
@@ -257,7 +256,9 @@
|
||||
<!-- -->
|
||||
<script src="./static/docsify-plugin.js?v=7"></script>
|
||||
<script src="./static/is-star-plugin.js?v=7"></script>
|
||||
<script src="./static/is-fill-in-wj-plugin.js?v=7"></script>
|
||||
<!-- <script src="./static/is-fill-in-wj-plugin.js?v=7"></script> -->
|
||||
<link rel="stylesheet" href="./static/custom-docsify-plugins/doc-lock-plugin.css">
|
||||
<script src="./static/custom-docsify-plugins/doc-lock-plugin.js"></script>
|
||||
<script>
|
||||
var saTokenTopVersion = '1.44.0'; // Sa-Token最新版本
|
||||
var name = '<img style="width: 60px; height: 60px; vertical-align: middle;" src="logo.png" alt="logo" /> ';
|
||||
@@ -315,7 +316,12 @@
|
||||
},
|
||||
},
|
||||
// 自定义插件
|
||||
plugins: [myDocsifyPlugin, window.isStarPlugin, window.isFillInWjPlugin],
|
||||
plugins: [
|
||||
myDocsifyPlugin, // 基础插件
|
||||
// window.isStarPlugin, // 是否 star
|
||||
// window.isFillInWjPlugin // 问卷填写
|
||||
window.docLockPlugin // 问卷填写
|
||||
],
|
||||
}
|
||||
</script>
|
||||
<script src="static/docsify.min.js"></script>
|
||||
|
||||
@@ -196,6 +196,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ------------ 支持特性 ------------- -->
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
/* 弹窗遮罩层样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 弹窗主体样式 */
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 4px; /* 弹窗圆角4px */
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
padding: 25px 30px;
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-20px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.modal-overlay.active .modal {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 弹窗标题样式 */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
/* color: green; */
|
||||
/* color: #2d8cf0; */
|
||||
color: green;
|
||||
}
|
||||
|
||||
.modal-header i {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 16px;
|
||||
/* color: #e74c3c; */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 密码输入区域样式 */
|
||||
.password-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 2px; /* 输入框圆角2px */
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.password-input:focus {
|
||||
border-color: #2d8cf0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 按钮区域样式 */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 3px; /* 按钮圆角2px */
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
|
||||
.btn-verify {
|
||||
background-color: #2d8cf0;
|
||||
}
|
||||
|
||||
.btn-verify:hover {
|
||||
background-color: #1c7ae0;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background-color: #888;
|
||||
}
|
||||
|
||||
/* 错误提示样式 */
|
||||
.error-message {
|
||||
color: #e74c3c;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
background-color: #ffebee;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
border-left: 3px solid #e74c3c;
|
||||
}
|
||||
|
||||
.error-message.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 提示区域样式 */
|
||||
.password-help-section {
|
||||
margin-top: 25px;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.help-text a {
|
||||
color: #0c6ae0;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-text a:hover {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 二维码图片区域样式 */
|
||||
.images-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr-image-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0px;
|
||||
/* box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); */
|
||||
border: 1px #ddd solid;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 100%;
|
||||
height: 110px; /* 3:2比例 */
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.qr-image-container:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.qr-image-container:hover .qr-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.image-label {
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: #7f8c8d;
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 图片放大效果样式 */
|
||||
.image-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.4s ease, visibility 0.4s ease;
|
||||
}
|
||||
|
||||
.image-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.enlarged-image {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
|
||||
transform: scale(0.8);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.image-overlay.active .enlarged-image {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* 移动端适配样式 */
|
||||
/* ============================ */
|
||||
|
||||
/* 移动端：屏幕宽度小于等于768px时应用 */
|
||||
@media (max-width: 768px) {
|
||||
/* 弹窗宽度调整，左右留出边距 */
|
||||
.modal {
|
||||
width: calc(100% - 30px); /* 左右各15px边距 */
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
/* 弹窗标题调整 */
|
||||
.modal-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.modal-header i {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 密码输入框调整 */
|
||||
.password-input {
|
||||
padding: 12px;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 按钮区域调整 */
|
||||
.form-actions {
|
||||
flex-direction: column; /* 按钮垂直排列 */
|
||||
gap: 10px;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 错误提示调整 */
|
||||
.error-message {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 提示区域调整 */
|
||||
.password-help-section {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 移动端隐藏图片区域 */
|
||||
.images-container {
|
||||
display: none; /* 移动端隐藏图片 */
|
||||
}
|
||||
|
||||
/* 图片放大效果在移动端隐藏 */
|
||||
.image-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 弹窗内容垂直居中优化 */
|
||||
.modal {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕适配：屏幕宽度小于等于480px时应用 */
|
||||
@media (max-width: 480px) {
|
||||
.modal {
|
||||
width: calc(100% - 20px); /* 左右各10px边距 */
|
||||
margin: 0 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,525 @@
|
||||
// 章节锁定插件
|
||||
|
||||
// 声明 docsify 插件
|
||||
var docLockPlugin = function(hook, vm) {
|
||||
|
||||
// 钩子函数：解析之前执行
|
||||
hook.beforeEach(function(content) {
|
||||
return content;
|
||||
});
|
||||
|
||||
// 钩子函数：每次路由切换时，解析内容之后执行
|
||||
hook.afterEach(function(html) {
|
||||
return html;
|
||||
});
|
||||
|
||||
// 钩子函数：每次路由切换时数据全部加载完成后调用，没有参数。
|
||||
hook.doneEach(function() {
|
||||
isShowTanChuang(vm);
|
||||
});
|
||||
|
||||
// 钩子函数：初始化并第一次加载完成数据后调用，没有参数。
|
||||
hook.ready(function() {
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ======================================== 弹窗方法
|
||||
|
||||
// 检查成功后，多少天不再检查
|
||||
const dl_AllowDisparity = 1000 * 60 * 60 * 24 * 30 * 1; // 1个月
|
||||
// 拦截 path ，如果填 /** 代表所有路径，填 /sso/* 代表 /sso/ 目录下所有路径
|
||||
const dl_exeArray = [
|
||||
'/sso/*', '/oauth2/*', '/more/common-questions'
|
||||
];
|
||||
// 排除 path
|
||||
const dl_excludeArray = [
|
||||
'/sso/readme', '/oauth2/readme'
|
||||
];
|
||||
// 本次存储时，使用的标记 key
|
||||
const dl_saveKey = 'dl_saveKey';
|
||||
|
||||
|
||||
// 判断当前是否应该弹出
|
||||
function isShowTanChuang(vm) {
|
||||
// 非PC端不检查
|
||||
// if(document.body.offsetWidth < 800) {
|
||||
// console.log('small screen ... wj ');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 判断是否需要拦截
|
||||
const isExe = isExePath(vm.route.path, dl_exeArray, dl_excludeArray);
|
||||
if(!isExe) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 判断是否近期已经判断过了
|
||||
try{
|
||||
const flagTime = localStorage[dl_saveKey];
|
||||
if(flagTime) {
|
||||
// 记录 存储 的时间，和当前时间的差距
|
||||
const disparity = new Date().getTime() - parseInt(flagTime);
|
||||
|
||||
// 差距小于指定时间，不再检测
|
||||
if(disparity < dl_AllowDisparity) {
|
||||
console.log('checked ... docLock ');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}catch(e){
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
// 本次打开页面的内存内已经弹出了的话，也不再弹了
|
||||
// if(window.isYtcXsjfkasjdaaaa) {
|
||||
// return;
|
||||
// }
|
||||
// window.isYtcXsjfkasjdaaaa = true;
|
||||
|
||||
// 验证成功的回调
|
||||
const okFn = function() {
|
||||
console.log('ok 了');
|
||||
localStorage.setItem(dl_saveKey, new Date().getTime() );
|
||||
$('body').css({'overflow': 'auto'});
|
||||
layer.msg('感谢你的支持，Sa-Token 将努力变得更加完善！ ❤️ ❤️ ❤️ ');
|
||||
}
|
||||
// 点了返回的回调
|
||||
const backFu = function() {
|
||||
$('body').css({'overflow': 'auto'});
|
||||
location.href = '#/';
|
||||
}
|
||||
// 弹窗验证
|
||||
showDocLock(okFn, backFu);
|
||||
$('body').css({'overflow': 'hidden'});
|
||||
|
||||
// 弹出弹框，邀请填写
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// ======================================== 路径判断
|
||||
|
||||
/**
|
||||
* 判断一个路径，是否会被成功拦截，返回 true 或 false
|
||||
* @param {Object} path 要判断的路径，例如：/sso/apidoc
|
||||
* @param {Object} exeArray 要拦截的路径数组，例如：['/sso/*', '/oauth2/*', '/more/common-questions' ]，如果填 /** 代表所有路径，填 /sso/* 代表 /sso/ 目录下所有路径
|
||||
* @param {Object} excludeArray 要排除的路径数组，规则同上
|
||||
*/
|
||||
function isExePath( path, exeArray, excludeArray) {
|
||||
// 参数验证和初始化
|
||||
exeArray = exeArray || [];
|
||||
excludeArray = excludeArray || [];
|
||||
|
||||
// 标准化路径，确保以 / 开头
|
||||
path = normalizePath(path);
|
||||
|
||||
// 先检查排除规则（优先级更高）
|
||||
for (let pattern of excludeArray) {
|
||||
if (matchPattern(path, pattern)) {
|
||||
return false; // 被排除，不拦截
|
||||
}
|
||||
}
|
||||
|
||||
// 再检查拦截规则
|
||||
for (let pattern of exeArray) {
|
||||
if (matchPattern(path, pattern)) {
|
||||
return true; // 需要拦截
|
||||
}
|
||||
}
|
||||
|
||||
return false; // 默认不拦截
|
||||
}
|
||||
|
||||
/**
|
||||
* 标准化路径
|
||||
*/
|
||||
function normalizePath(path) {
|
||||
if (!path) return '/';
|
||||
if (!path.startsWith('/')) return '/' + path;
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* 增强版模式匹配
|
||||
*/
|
||||
function matchPattern(path, pattern) {
|
||||
// 处理空值
|
||||
if (!pattern) return false;
|
||||
|
||||
pattern = pattern.trim();
|
||||
|
||||
// /** 匹配所有
|
||||
if (pattern === '/**' || pattern === '**') {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 处理前置和后置通配符
|
||||
if (pattern === '*' || pattern === '/*') {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 精确匹配
|
||||
if (!pattern.includes('*')) {
|
||||
return path === pattern || path === normalizePath(pattern);
|
||||
}
|
||||
|
||||
// 转换模式为正则表达式
|
||||
const regexStr = pattern
|
||||
// 转义正则特殊字符
|
||||
.replace(/[.+?^${}()|[\]\\]/g, '\\$&')
|
||||
// 处理 ** 通配符（匹配多级目录）
|
||||
.replace(/\/\*\*/g, '(/.*)?')
|
||||
// 处理 * 通配符（匹配单级目录）
|
||||
.replace(/\*/g, '[^/]*')
|
||||
// 确保匹配完整路径
|
||||
.replace(/^\//, '^/')
|
||||
.replace(/$/, '$');
|
||||
|
||||
try {
|
||||
const regex = new RegExp(regexStr);
|
||||
return regex.test(path);
|
||||
} catch (e) {
|
||||
console.error(`Invalid pattern: ${pattern}`, e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// =========================== AI 生成的弹窗代码
|
||||
|
||||
function initTanChuangFun() {
|
||||
|
||||
// 配置项
|
||||
const CONFIG = {
|
||||
correctPassword: 'sa-token yyds', // 正确密码
|
||||
qqImageUrl: './big-file/doc/zong/doc-lock-pre-qq.png',
|
||||
wechatImageUrl: './big-file/doc/zong/doc-lock-pre-wx.png'
|
||||
};
|
||||
|
||||
// 弹窗HTML模板
|
||||
const modalHTML = `
|
||||
<div class="modal-overlay" id="passwordModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>🔒 本章节已锁定，输入密码后即可正常访问：</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="error-message" id="errorMessage">密码错误，请重新输入！</p>
|
||||
|
||||
<div class="password-form">
|
||||
<input type="text" class="password-input" id="passwordInput" placeholder="加群可获得访问密码" autocomplete="off">
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="form-btn btn-verify" id="verifyBtn">验证</button>
|
||||
<button class="form-btn btn-back" id="backBtn">回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="password-help-section">
|
||||
<div class="help-text">
|
||||
加入 QQ群 或 微信群 后可在群公告查看密码：<a href="#/more/join-group" target="_black">加群链接</a>
|
||||
</div>
|
||||
|
||||
<div class="images-container">
|
||||
<div class="qr-image-container">
|
||||
<img src="${CONFIG.qqImageUrl}" alt="QQ 群公告" class="qr-image">
|
||||
<div class="image-label">QQ 群公告</div>
|
||||
</div>
|
||||
<div class="qr-image-container">
|
||||
<img src="${CONFIG.wechatImageUrl}" alt="微信群公告" class="qr-image">
|
||||
<div class="image-label">微信群公告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-overlay" id="imageOverlay">
|
||||
<img src="" alt="放大图片" class="enlarged-image" id="enlargedImage">
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 初始化变量
|
||||
let passwordModal, passwordInput, errorMessage, verifyBtn, backBtn;
|
||||
let imageOverlay, enlargedImage;
|
||||
|
||||
|
||||
let okCallFn = null;
|
||||
let backCallFn = null;
|
||||
|
||||
/**
|
||||
* 初始化弹窗
|
||||
* 将弹窗HTML插入到页面中，并绑定事件
|
||||
*/
|
||||
function initModal() {
|
||||
// 插入弹窗HTML到页面
|
||||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
||||
|
||||
// 获取DOM元素
|
||||
passwordModal = document.getElementById('passwordModal');
|
||||
passwordInput = document.getElementById('passwordInput');
|
||||
errorMessage = document.getElementById('errorMessage');
|
||||
verifyBtn = document.getElementById('verifyBtn');
|
||||
backBtn = document.getElementById('backBtn');
|
||||
imageOverlay = document.getElementById('imageOverlay');
|
||||
enlargedImage = document.getElementById('enlargedImage');
|
||||
|
||||
// 绑定事件
|
||||
bindEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定所有事件
|
||||
*/
|
||||
function bindEvents() {
|
||||
// 触发按钮点击事件
|
||||
// document.getElementById('accessBtn').addEventListener('click', openModal);
|
||||
|
||||
// 验证按钮点击事件
|
||||
verifyBtn.addEventListener('click', validatePassword);
|
||||
|
||||
// 返回按钮点击事件
|
||||
backBtn.addEventListener('click', function(){
|
||||
closeModal();
|
||||
backCallFn();
|
||||
});
|
||||
|
||||
// 输入框回车事件
|
||||
passwordInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
validatePassword();
|
||||
}
|
||||
});
|
||||
|
||||
// 只在非移动端绑定图片点击事件
|
||||
if (!isMobileDevice()) {
|
||||
// 图片点击放大事件
|
||||
document.querySelectorAll('.qr-image').forEach(img => {
|
||||
img.addEventListener('click', function() {
|
||||
enlargeImage(this.src);
|
||||
});
|
||||
});
|
||||
|
||||
// 放大图片关闭事件
|
||||
imageOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === this || e.target === enlargedImage) {
|
||||
closeImageOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC键关闭放大图片
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && imageOverlay.classList.contains('active')) {
|
||||
closeImageOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为移动设备
|
||||
* @returns {boolean} 是否为移动设备
|
||||
*/
|
||||
function isMobileDevice() {
|
||||
return window.innerWidth <= 768;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开密码弹窗
|
||||
*/
|
||||
function openModal() {
|
||||
passwordModal.classList.add('active');
|
||||
passwordInput.focus();
|
||||
errorMessage.classList.remove('show');
|
||||
passwordInput.value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭密码弹窗
|
||||
*/
|
||||
function closeModal() {
|
||||
passwordModal.classList.remove('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 密码验证函数
|
||||
* 宽松验证策略：允许左右空格，中间空格可省略
|
||||
*/
|
||||
function validatePassword() {
|
||||
let enteredPassword = passwordInput.value.trim(); // 去除左右空格
|
||||
|
||||
// 标准化：移除所有空格
|
||||
const normalizedEntered = enteredPassword.replace(/\s+/g, '');
|
||||
const normalizedCorrect = CONFIG.correctPassword.replace(/\s+/g, '');
|
||||
|
||||
if (normalizedEntered === normalizedCorrect) {
|
||||
// 密码正确，解锁章节
|
||||
unlockChapter();
|
||||
} else {
|
||||
// 密码错误，显示错误信息
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示密码错误提示
|
||||
*/
|
||||
function showError() {
|
||||
errorMessage.classList.add('show');
|
||||
passwordInput.value = '';
|
||||
passwordInput.focus();
|
||||
|
||||
// 添加抖动效果
|
||||
passwordInput.classList.add('shake');
|
||||
setTimeout(() => {
|
||||
passwordInput.classList.remove('shake');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/**
|
||||
* 解锁章节
|
||||
*/
|
||||
function unlockChapter() {
|
||||
closeModal();
|
||||
okCallFn();
|
||||
|
||||
|
||||
// // 更新章节内容
|
||||
// const lockedSection = document.querySelector('.locked-section');
|
||||
// const tocLockedItems = document.querySelectorAll('.toc a.locked');
|
||||
|
||||
// // 更新章节显示
|
||||
// lockedSection.innerHTML = `
|
||||
// <h3><i class="fas fa-unlock-alt" style="color:#2ecc71;"></i> 章节已解锁</h3>
|
||||
// <p>感谢您加入我们的社区！现在您可以查看高级配置指南的全部内容。</p>
|
||||
// <div style="text-align: left; margin-top: 20px;">
|
||||
// <h4>高级配置内容示例：</h4>
|
||||
// <p>1. 自定义插件开发：详细讲解如何为项目开发自定义插件，包括插件结构、API接口和最佳实践。</p>
|
||||
// <p>2. 性能调优指南：深入分析项目性能瓶颈，并提供多种优化方案和调优技巧。</p>
|
||||
// <p>3. 高级集成方案：介绍如何将项目与其他流行框架和工具进行深度集成。</p>
|
||||
// <p>4. 企业级部署：针对生产环境的企业级部署方案，包括高可用、负载均衡和监控配置。</p>
|
||||
// </div>
|
||||
// <p style="margin-top: 20px; color: #27ae60; font-weight: 600;">
|
||||
// <i class="fas fa-check-circle"></i> 您现在可以访问所有高级章节内容了！
|
||||
// </p>
|
||||
// `;
|
||||
|
||||
// // 更新目录状态
|
||||
// tocLockedItems.forEach(item => {
|
||||
// if (item.textContent.includes('高级配置指南')) {
|
||||
// item.classList.remove('locked');
|
||||
// item.innerHTML = '<i class="fas fa-unlock-alt" style="color:#2ecc71;"></i> 高级配置指南';
|
||||
// }
|
||||
// });
|
||||
|
||||
// // 显示成功通知
|
||||
// showNotification('章节解锁成功！您现在可以访问高级配置指南。');
|
||||
}
|
||||
|
||||
/**
|
||||
* 放大图片
|
||||
* @param {string} src - 图片地址
|
||||
*/
|
||||
function enlargeImage(src) {
|
||||
enlargedImage.src = src;
|
||||
imageOverlay.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭图片放大层
|
||||
*/
|
||||
function closeImageOverlay() {
|
||||
imageOverlay.classList.remove('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示通知
|
||||
* @param {string} message - 通知内容
|
||||
*/
|
||||
function showNotification(message) {
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: #2ecc71;
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1001;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transform: translateX(150%);
|
||||
transition: transform 0.5s ease;
|
||||
`;
|
||||
|
||||
notification.innerHTML = `<i class="fas fa-check-circle"></i><span>${message}</span>`;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// 显示通知
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(0)';
|
||||
}, 10);
|
||||
|
||||
// 3秒后隐藏
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(150%)';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(notification);
|
||||
}, 500);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加抖动动画样式
|
||||
*/
|
||||
function addShakeAnimation() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(5px); }
|
||||
}
|
||||
.shake {
|
||||
animation: shake 0.5s;
|
||||
border-color: #e74c3c !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initModal();
|
||||
addShakeAnimation();
|
||||
});
|
||||
|
||||
// 显示弹窗： 验证成功的回调、点击返回的回调
|
||||
window.showDocLock = function(okFn, backFn) {
|
||||
okCallFn = okFn;
|
||||
backCallFn = backFn;
|
||||
// 打开
|
||||
openModal();
|
||||
}
|
||||
|
||||
};
|
||||
initTanChuangFun();
|
||||
@@ -51,7 +51,11 @@ window.$docsify.plugins = [].concat(subNavDraw, window.$docsify.plugins)
|
||||
// 滚动时设置一下左侧滚动条高度，不要超出可视区域
|
||||
$(document).scroll(function(){
|
||||
if(isOpenRightSubTitle) {
|
||||
const offsetTop = $('.active-rep').get(0).offsetTop;
|
||||
$('.sidebar').scrollTop(offsetTop - ($('.sidebar').height() / 2))
|
||||
try{
|
||||
const offsetTop = $('.active-rep').get(0).offsetTop;
|
||||
$('.sidebar').scrollTop(offsetTop - ($('.sidebar').height() / 2))
|
||||
} catch (e) {
|
||||
// console.log(e);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user