feat(doc): 新增 star-guide 引导组件
在 doc.html 和 index.html 中引入 star-guide.js， 新增 sa-token-doc/a/star-guide/ 目录，包含引导组件页面与脚本文件。
This commit is contained in:
click33
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>点击 Star 支持我们</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 100% 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.container img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.img-before {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.img-after {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/gitee-star-guide-1.png" alt="img 1">
|
||||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/gitee-star-guide-2.png" alt="img 2">
|
||||
<!-- <img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/github-star-guide-1.png" alt="img 1">
|
||||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/github-star-guide-2.png" alt="img 2"> -->
|
||||
<!-- <img class="img-before" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/atomgit-star-guide-1.png" alt="img 1">
|
||||
<img class="img-after" src="https://sa--file.oss-cn-beijing.aliyuncs.com/sa-token/doc/a/star-guide/atomgit-star-guide-2.png" alt="img 2"> -->
|
||||
</div>
|
||||
<script>
|
||||
const container = document.querySelector('.container');
|
||||
const imgBefore = document.querySelector('.img-before');
|
||||
|
||||
function startCycle() {
|
||||
|
||||
// ============================================================
|
||||
// 第3秒末 → 第0秒初：暴力瞬间复位，无任何过渡
|
||||
// 原理：先在当前帧写入 transition:none，
|
||||
// requestAnimationFrame 保证下一帧浏览器已提交该样式，
|
||||
// 再在下一帧改变属性值，此时过渡已关闭，改值不会触发动画。
|
||||
// ============================================================
|
||||
container.style.transition = 'none';
|
||||
imgBefore.style.transition = 'none';
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
// ← 此处已是新的一帧，transition:none 确保已生效
|
||||
container.style.transform = 'scale(1)'; // 瞬间复位缩放
|
||||
imgBefore.style.opacity = '1'; // 瞬间复位透明度
|
||||
|
||||
// 以下各阶段动画均有过渡效果
|
||||
// 0.5s~1.5s：放大（1s 过渡）
|
||||
setTimeout(() => {
|
||||
container.style.transition = 'transform 1s ease-in-out';
|
||||
container.style.transform = 'scale(2.5)';
|
||||
}, 500);
|
||||
|
||||
// 1.5s~2.0s：仅淡出图片1，窗口保持放大不动
|
||||
setTimeout(() => {
|
||||
imgBefore.style.transition = 'opacity 0.5s ease-in-out';
|
||||
imgBefore.style.opacity = '0';
|
||||
}, 1500);
|
||||
|
||||
// 第3s：进入下一轮，再次暴力复位（scale 和 opacity 同时瞬间归位）
|
||||
setTimeout(startCycle, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
startCycle();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
|
||||
// 判断当前是否已弹出
|
||||
function isShowStarGuide() {
|
||||
// 非PC端不检查
|
||||
if(document.body.offsetWidth < 800) {
|
||||
console.log('small screen ... isShowStarGuide ');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查成功后，多少天不再检查
|
||||
const alertAllowDisparity = 1000 * 60 * 60 * 24 * 30; // 30天
|
||||
// const allowDisparity = 1000 * 10;
|
||||
|
||||
// 判断是否近期已经判断过了
|
||||
const SAVE_KEY = 'isShowStarGuide';
|
||||
try{
|
||||
const showAlert = localStorage[SAVE_KEY];
|
||||
if(showAlert) {
|
||||
// 记录 star 的时间，和当前时间的差距
|
||||
const disparity = new Date().getTime() - parseInt(showAlert);
|
||||
|
||||
// 差距小于一月，不再检测，大于一月，再检测一下
|
||||
if(disparity < alertAllowDisparity) {
|
||||
console.log('checked ... wj ');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}catch(e){
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
// 本次打开页面的内存内已经弹出了的话，也不再弹了
|
||||
if(window.isYtcXsjfkasjda3232) {
|
||||
return;
|
||||
}
|
||||
window.isYtcXsjfkasjda3232 = true;
|
||||
|
||||
// 弹出弹框，邀请填写
|
||||
const tipStr = `
|
||||
<div style="color: #000;">
|
||||
<div>
|
||||
<iframe src="./a/star-guide/index.html"
|
||||
style="width:100%; height:250px; border:2px solid #ddd; border-radius: 2px;"></iframe>
|
||||
</div>
|
||||
<p style="margin-top: 18px;">
|
||||
<b style="color: green;">Sa-Token 采用 Apache-2.0 开源协议，承诺框架本身与在线文档永久免费开放</b>。
|
||||
</p>
|
||||
<p style="margin-top: 14px;">
|
||||
如果 Sa-Token 帮助到了你，希望你可以为项目点个 star ⭐，这对我们非常重要，感谢支持！
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const index = layer.confirm(tipStr, {
|
||||
title: '支持项目',
|
||||
btn: ['确定'],
|
||||
area: '570px',
|
||||
offset: '10%',
|
||||
cancel: function() {
|
||||
localStorage[SAVE_KEY] = new Date().getTime();
|
||||
}
|
||||
},
|
||||
// 点击确定
|
||||
function(index) {
|
||||
layer.close(index);
|
||||
localStorage[SAVE_KEY] = new Date().getTime();
|
||||
open('https://gitee.com/dromara/sa-token');
|
||||
// open('https://github.com/dromara/sa-token');
|
||||
// open('https://atomgit.com/dromara/sa-token');
|
||||
|
||||
},
|
||||
// 点击取消
|
||||
function(){
|
||||
localStorage[SAVE_KEY] = new Date().getTime();
|
||||
}
|
||||
);
|
||||
}
|
||||
isShowStarGuide();
|
||||
@@ -514,5 +514,6 @@
|
||||
</script> -->
|
||||
|
||||
|
||||
<script src="./a/star-guide/star-guide.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1348,6 +1348,9 @@
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script src="./a/star-guide/star-guide.js"></script>
|
||||
|
||||
<!-- 自定义滚动条颜色 -->
|
||||
<!-- <style>
|
||||
/* 自定义body滚动条样式 */
|
||||
|
||||
Reference in New Issue
Block a user