mirror of
https://gitee.com/dromara/sa-token.git
synced 2026-05-14 12:52:08 +08:00
docs: 添加 Sa-Token 内容合作者群
This commit is contained in:
@@ -124,6 +124,7 @@
|
|||||||
- [框架博客](/more/blog)
|
- [框架博客](/more/blog)
|
||||||
- [推荐公众号](/more/tj-gzh)
|
- [推荐公众号](/more/tj-gzh)
|
||||||
- [加入讨论群](/more/join-group)
|
- [加入讨论群](/more/join-group)
|
||||||
|
- [Sa-Token 内容合作群](/more/content-cooperation)
|
||||||
- [赞助 Sa-Token](/more/sa-token-donate)
|
- [赞助 Sa-Token](/more/sa-token-donate)
|
||||||
- [需求提交](/more/demand-commit)
|
- [需求提交](/more/demand-commit)
|
||||||
- [问卷调查](/more/wenjuan)
|
- [问卷调查](/more/wenjuan)
|
||||||
|
|||||||
@@ -124,9 +124,10 @@
|
|||||||
<a href="https://www.bilibili.com/video/BV11u4y197JL/" target="_blank">达达-Java(26集)</a>
|
<a href="https://www.bilibili.com/video/BV11u4y197JL/" target="_blank">达达-Java(26集)</a>
|
||||||
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐(22集)</a>
|
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐(22集)</a>
|
||||||
<div class="zk-fengexian"></div>
|
<div class="zk-fengexian"></div>
|
||||||
<a href="javascript: layer.alert('如您有 Sa-Token 相关课程录制,请联系官网文档右侧 < sa-token 小助手 > 进行提交');">
|
<a href="doc.html#/more/content-cooperation">[ + 课程提交 ]</a>
|
||||||
|
<!-- <a href="javascript: layer.alert('如您有 Sa-Token 相关课程录制,请联系官网文档右侧 < sa-token 小助手 > 进行提交');">
|
||||||
[ + 课程提交 ]
|
[ + 课程提交 ]
|
||||||
</a>
|
</a> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -258,7 +259,8 @@
|
|||||||
<script src="./static/is-star-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">
|
<link rel="stylesheet" href="./static/custom-docsify-plugins/doc-lock-plugin.css">
|
||||||
<script src="./static/custom-docsify-plugins/doc-lock-plugin.js"></script>
|
<!-- <script src="./static/custom-docsify-plugins/doc-lock-plugin.js"></script> -->
|
||||||
|
<script src="./static/custom-docsify-plugins/doc-lock-by-gzh-plugin.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var saTokenTopVersion = '1.44.0'; // Sa-Token最新版本
|
var saTokenTopVersion = '1.44.0'; // Sa-Token最新版本
|
||||||
var name = '<img style="width: 60px; height: 60px; vertical-align: middle;" src="logo.png" alt="logo" /> ';
|
var name = '<img style="width: 60px; height: 60px; vertical-align: middle;" src="logo.png" alt="logo" /> ';
|
||||||
@@ -320,7 +322,7 @@
|
|||||||
myDocsifyPlugin, // 基础插件
|
myDocsifyPlugin, // 基础插件
|
||||||
// window.isStarPlugin, // 是否 star
|
// window.isStarPlugin, // 是否 star
|
||||||
// window.isFillInWjPlugin // 问卷填写
|
// window.isFillInWjPlugin // 问卷填写
|
||||||
window.docLockPlugin // 问卷填写
|
window.docLockPlugin, // 章节锁
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -71,9 +71,10 @@
|
|||||||
<a href="https://www.bilibili.com/video/BV11u4y197JL/" target="_blank">达达-Java(26集)</a>
|
<a href="https://www.bilibili.com/video/BV11u4y197JL/" target="_blank">达达-Java(26集)</a>
|
||||||
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐(22集)</a>
|
<a href="https://space.bilibili.com/473679148/video" target="_blank">晒太阳的盐(22集)</a>
|
||||||
<div class="zk-fengexian"></div>
|
<div class="zk-fengexian"></div>
|
||||||
<a href="javascript: layer.alert('如您有 Sa-Token 相关课程录制,请联系官网文档右侧 < sa-token 小助手 > 进行提交');">
|
<a href="doc.html#/more/content-cooperation">[ + 课程提交 ]</a>
|
||||||
|
<!-- <a href="javascript: layer.alert('如您有 Sa-Token 相关课程录制,请联系官网文档右侧 < sa-token 小助手 > 进行提交');">
|
||||||
[ + 课程提交 ]
|
[ + 课程提交 ]
|
||||||
</a>
|
</a> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1109,7 +1110,7 @@
|
|||||||
<h3>关注我们</h3>
|
<h3>关注我们</h3>
|
||||||
<ul class="list-unstyle">
|
<ul class="list-unstyle">
|
||||||
<li><a href="https://space.bilibili.com/3546758575557094" target="_blank">哔哩哔哩</a></li>
|
<li><a href="https://space.bilibili.com/3546758575557094" target="_blank">哔哩哔哩</a></li>
|
||||||
<li><a href="https://cloud.tencent.com/" target="_blank">抖音</a></li>
|
<li><a href="https://www.douyin.com/user/MS4wLjABAAAArVqj2lGRurfj-9eO0T12q6_vrbIK-Om9bi3eo4OwB2g" target="_blank">抖音</a></li>
|
||||||
<li><a href="https://www.xiaohongshu.com/user/profile/67063b01000000001e00ef23" target="_blank">小红书</a></li>
|
<li><a href="https://www.xiaohongshu.com/user/profile/67063b01000000001e00ef23" target="_blank">小红书</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# 框架博客
|
# 框架博客
|
||||||
|
|
||||||
<!-- > 此页面收集 Sa-Token 相关技术文章,欢迎大家投稿(不限平台,按照发表日期倒序), -->
|
> 此页面收集 Sa-Token 相关技术文章(不限平台,按照发表日期倒序),
|
||||||
<!-- > [投稿链接](https://wj.qq.com/s2/10596458/aa96/) -->
|
> 如果你也想投稿,请考虑加入:[Sa-Token 内容合作群 ](/more/content-cooperation)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
104
sa-token-doc/more/content-cooperation.md
Normal file
104
sa-token-doc/more/content-cooperation.md
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
# Sa-Token 内容合作群
|
||||||
|
|
||||||
|
**好内容值得被看见!**
|
||||||
|
|
||||||
|
为感谢 Sa-Token 的内容创作者们,我们特别创建了「Sa-Token 内容合作群」,帮助大家的内容触达更多 Sa-Token 的使用者 (加群方式在最下方)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
### 📖 1、一些碎碎念,想和写公众号/录视频的朋友们聊聊
|
||||||
|
|
||||||
|
前几天,我在公众号上搜索 “Sa-Token”,想看看有没有人写过相关的教程或者踩坑心得。
|
||||||
|
|
||||||
|
说实话,当时没抱太大期望。毕竟我们开发团队这几年来几乎将所有精力都放在了代码开发,而一直疏于内容运营建设。
|
||||||
|
|
||||||
|
但结果让我挺意外的 —— **我发现了不少公众号都在写 Sa-Token 的文章,而且其中不少都写得很用心**。
|
||||||
|
|
||||||
|
有从零开始的入门教程,有深入源码的解析文章,有对框架各个功能的介绍,还有一些结合真实业务场景的实战案例 …… 解决的都是实实在在的问题。
|
||||||
|
|
||||||
|
但这些文章的阅读量… 很多都只有几百,有些甚至只有几十。
|
||||||
|
|
||||||
|
我知道这很正常。**技术公众号起步非常不容易,粉丝少的时候,再好的内容也很难被看到**。我自己也经历过这个阶段,知道那种 [ 写了一整天,发出来没人看 ] 的感觉。
|
||||||
|
|
||||||
|
为了不让这些有价值的内容埋没,我连夜将这些文章整理到了 Sa-Token 官网:[框架博客](/more/blog)。
|
||||||
|
|
||||||
|
在整理这些博客的过程中,我突然有了一个想法。
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ 2、一个可能 [三赢] 的想法
|
||||||
|
|
||||||
|
我在想,我为什么不拉一个群聊,把这些为 Sa-Token 写文章的博主们,给聚集起来呢?
|
||||||
|
|
||||||
|
只要有朋友写了 Sa-Token 相关文章,都可以转发到群里,我们团队会把这个文章转发到 Sa-Token 所有粉丝群里:
|
||||||
|
|
||||||
|
这可能是一个三赢的合作:
|
||||||
|
|
||||||
|
- **对于 Sa-Token 来说**:能获得更多的优质内容,帮助新用户更快上手,生态也能更丰富。
|
||||||
|
- **对写文章的朋友来说**:你的好文章能被更多人看到,公众号能涨涨粉,付出的时间更有价值。
|
||||||
|
- **对 Sa-Token 的用户来说**:能看到更多的技术干货,学到更多知识,找到各种场景的解决方案,不用重复踩坑。
|
||||||
|
|
||||||
|
听起来好像…还不错?
|
||||||
|
|
||||||
|
所以我打算建个群,名字就叫 「Sa-Token 内容合作群」。不是什么正式的组织,就是一群对技术内容感兴趣的朋友,凑在一起互相帮帮忙。
|
||||||
|
|
||||||
|
|
||||||
|
### 🤝 3、这个群主要用来做什么?
|
||||||
|
|
||||||
|
1、如果你写了 Sa-Token 相关的文章(或录制了视频课程),可以分享到群里,我们团队会把文章:
|
||||||
|
|
||||||
|
- **转发到 Sa-Token 所有粉丝群里**:Sa-Token 目前拥有 30+ 微信粉丝群 (500人),10+ QQ粉丝群 (1000人 or 2000人)。
|
||||||
|
- **挂载到 Sa-Token 在线文档博客栏目**:Sa-Token 目前在线文档访问量月PV 20万+。
|
||||||
|
|
||||||
|
相信这一定可以大大提高文章的曝光量。
|
||||||
|
|
||||||
|
2、我们团队偶尔也会为 Sa-Token 撰写技术文章,发到群里:
|
||||||
|
|
||||||
|
- 如果你觉得内容不错,想转载到自己的公众号,**直接转就行**。
|
||||||
|
- 不用专门申请授权,Sa-Token 官方订阅号所有内容均开放版权,任何人都可以自由转载。
|
||||||
|
|
||||||
|
|
||||||
|
### ❤️ 4、几个你可能关心的小问题
|
||||||
|
|
||||||
|
#### Q:我没写过 Sa-Token 的文章,可以加入吗?
|
||||||
|
可以。完全没问题。哪怕你之前从来没写过 Sa-Token 的文章,但只要你有公众号,想试试写相关的内容,都欢迎。
|
||||||
|
|
||||||
|
如果你没有公众号,但是在别的平台,比如掘金、CSDN有写过文章,也可以加入。如果你在 B站/抖音录制过视频,也可以加入。
|
||||||
|
|
||||||
|
总之:只要你有意向在任意平台创作 Sa-Token 相关内容,就可以加入。
|
||||||
|
|
||||||
|
|
||||||
|
#### Q:有 KPI 吗?是不是进了群就要为 Sa-Token 写文章?
|
||||||
|
没有。 想写就写,不想写就不写。哪怕加群后一篇都不写,也没关系。**这就是个「互助群」,不是「任务群」**。
|
||||||
|
|
||||||
|
#### Q:文章有什么要求吗?
|
||||||
|
就一点:认真写。
|
||||||
|
可以是入门教程、源码解析、实战心得、bug排查、常见踩坑、对比测评…什么形式都行。不需要多长的篇幅,能把一个知识点讲清楚就好。唯一的要求是:不要是纯 AI 生成的粗制滥造文,不要写明显错误的技术观点。
|
||||||
|
|
||||||
|
#### Q:对粉丝量有要求吗?
|
||||||
|
没有要求。 我自己也是从小号做起来的,完全理解起步的难处。群里不分大号小号,只看内容用不用心。
|
||||||
|
|
||||||
|
#### Q:除了转发,还有别的吗?
|
||||||
|
有。 我偶尔会分享一些 Sa-Token 的更新动态、设计思路,或者我发现的其他好的技术文章。大家也可以互相**聊聊技术写作、视频制作的心得,分享好用的工具**。就是个普通的交流群,只不过主题稍微聚焦一点。
|
||||||
|
|
||||||
|
说到底,我希望这个群不只是一个内容分发渠道,更是一个 「Sa-Token内容共创伙伴」的聚集地。我们一起,让好的技术方案被更多人看见和使用。
|
||||||
|
|
||||||
|
|
||||||
|
### 👋 5、怎么加群?
|
||||||
|
|
||||||
|
你可以在 [加入讨论群](/more/join-group) 处,添加我们的微信账号, **请在添加时备注或者加好友成功后发送以下信息:[申请加入 Sa-Token 内容合作群]** 。
|
||||||
|
|
||||||
|
一定要备注以上信息,否则我们团队人员只会把你拉入到普通粉丝交流群。
|
||||||
|
|
||||||
|
<img class="s-w" src="/big-file/contact/show/wx-sthzq-show.png" style="max-width: 50%;" alt="Sa-Token 生态合作群" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -70,5 +70,6 @@ QQ群聊号码:939849926
|
|||||||
(例如:xx开源项目作者集成了 sa-token,申请加入群聊),如果字数太多无法写完,也可在开源交流群里@管理员协助交流。
|
(例如:xx开源项目作者集成了 sa-token,申请加入群聊),如果字数太多无法写完,也可在开源交流群里@管理员协助交流。
|
||||||
|
|
||||||
|
|
||||||
|
### 5、Sa-Token 内容合作群
|
||||||
|
专门为 Sa-Token 内容创作者们准备的交流群:[Sa-Token 内容合作群](/more/content-cooperation)
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,521 @@
|
|||||||
|
// 章节锁定插件
|
||||||
|
|
||||||
|
// 声明 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', '/up/*', '/micro/*', '/plugin/*'
|
||||||
|
];
|
||||||
|
// 排除 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', // 正确密码
|
||||||
|
gzhImageUrl: './big-file/contact/lykj-gzh.jpg',
|
||||||
|
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" style="text-align: center;">
|
||||||
|
关注公众号可查看密码:
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="images-container" style="text-align: center;">
|
||||||
|
<div class="qr-image-container" style="border: 0;">
|
||||||
|
<img src="${CONFIG.gzhImageUrl}" alt="QQ 群公告" class="qr-image" style="width: 200px; height: 200px; margin: 0 auto; ">
|
||||||
|
<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();
|
||||||
@@ -15,7 +15,7 @@ var docLockPlugin = function(hook, vm) {
|
|||||||
|
|
||||||
// 钩子函数:每次路由切换时数据全部加载完成后调用,没有参数。
|
// 钩子函数:每次路由切换时数据全部加载完成后调用,没有参数。
|
||||||
hook.doneEach(function() {
|
hook.doneEach(function() {
|
||||||
isShowTanChuang(vm);
|
// isShowTanChuang(vm);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 钩子函数:初始化并第一次加载完成数据后调用,没有参数。
|
// 钩子函数:初始化并第一次加载完成数据后调用,没有参数。
|
||||||
|
|||||||
Reference in New Issue
Block a user