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> -->
|
||||||
|
|
||||||
|
|
||||||
|
<script src="./a/star-guide/star-guide.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1348,6 +1348,9 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="./a/star-guide/star-guide.js"></script>
|
||||||
|
|
||||||
<!-- 自定义滚动条颜色 -->
|
<!-- 自定义滚动条颜色 -->
|
||||||
<!-- <style>
|
<!-- <style>
|
||||||
/* 自定义body滚动条样式 */
|
/* 自定义body滚动条样式 */
|
||||||
|
|||||||
Reference in New Issue
Block a user