github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix：修改帮助页面和日志页面中英文的锚点问题

Browse Source
This commit is contained in:
spylecym 2023-07-18 15:48:57 +08:00
parent df287e7122
commit 04cb03e0b2
4 changed files with 2591 additions and 933 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3199
public/site/en/help.html
View File

File diff suppressed because it is too large Load Diff

114
public/site/en/log.html
View File

@ -186,7 +186,7 @@
<div class="logs-layout"> <div class="logs-layout">
<div class="logs-l logs-sticky"> <div class="logs-l logs-sticky">
<h5 class="logs-h5 mb-16">Logs</h5> <h5 class="logs-h5 mb-16">Logs</h5>
<ul class="logs-l-ul logs-l-1920"></ul> <ul class="logs-l-ul logs-l-1920" id="help-l-ul"></ul>
</div> </div>
<div class="logs-r" id="google_translate_element"> <div class="logs-r" id="google_translate_element">
<h1 class="txt-6003645 logs-h1 mb-36">DooTask Update Log </h1> <h1 class="txt-6003645 logs-h1 mb-36">DooTask Update Log </h1>
@ -211,19 +211,6 @@
<script src="../js/common.js"></script> <script src="../js/common.js"></script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script> <script>
window.onload = function() {
const targetId = window.location.hash.substring(1); // 获取 URL 中的锚点 id
const targetElement = document.getElementById(targetId); // 获取目标锚点元素
if (targetElement) {
const offset = 80; // 上偏移量（可以根据需要进行调整）
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition - offset,
behavior: "smooth"
});
}
};
const getItem = (key)=> { const getItem = (key)=> {
var record = JSON.parse(localStorage.getItem(key)); var record = JSON.parse(localStorage.getItem(key));
if (!record) return null; if (!record) return null;
@ -252,24 +239,26 @@ function domHandle (html){
const changelog = document.querySelector('.logs-r-ul'); const changelog = document.querySelector('.logs-r-ul');
const rlog = document.querySelector('.logs-l-1920'); const rlog = document.querySelector('.logs-l-1920');
const rlog2 = document.querySelector('.logs-l-768'); const rlog2 = document.querySelector('.logs-l-768');
const versions = html.match(/<h2>(.*?)<\/h2>/g).slice(0, 10); const versions = html.match(/<h2>(.*?)<\/h2>/g).slice(0, 15);
const versionsNumbers = versions.map(str => str.split('<h2>[')[1].split(']</h2>')[0]); const versionsNumbers = versions.map(str => str.split('<h2>[')[1].split(']</h2>')[0]);
for (let i = 0; i < versionsNumbers.length; i++) { for (let i = 0; i < versionsNumbers.length; i++) {
const updatesHtml = html.split(versionsNumbers[i])[1].split('<h2>')[0].match(/<li>(.*?)<\/li>/g); const updatesHtml = html.split(versionsNumbers[i])[1].split('<h2>')[0].match(/<li>(.*?)<\/li>/g);
const updatesHtmlText = updatesHtml.map(str => str.split('<li>')[1].split('</li>')[0]); const updatesHtmlText = updatesHtml.map(str => str.split('<li>')[1].split('</li>')[0]);
const rLi = document.createElement('li'); const rLi = document.createElement('li');
rLi.className = `l-ul-item ${i==0?'active':''}`; rLi.className = `l-ul-item ${i==0?'active':''}`;
rLi.setAttribute('data-id',`section-${i+1}`)
rLi.innerHTML = ` rLi.innerHTML = `
<a class="txt-4001620 txt log-a" href="#section-${i+1}">v${versionsNumbers[i]} update</a> <a class="txt-4001620 txt">v${versionsNumbers[i]} update</a>
`; `;
const rLi2 = document.createElement('li'); const rLi2 = document.createElement('li');
rLi2.className = `l-ul-item`; rLi2.className = `l-ul-item`;
rLi2.setAttribute('data-id',`section-${i+1}`)
rLi2.addEventListener('click', function() { rLi2.addEventListener('click', function() {
const logsDrawer = document.querySelector('.logs-drawer'); const logsDrawer = document.querySelector('.logs-drawer');
logsDrawer.classList.remove('open-logs-drawer'); logsDrawer.classList.remove('open-logs-drawer');
}); });
rLi2.innerHTML = ` rLi2.innerHTML = `
<a class="txt-4001620 txt log-a" href="#section-${i+1}">v${versionsNumbers[i]} update</a> <a class="txt-4001620 txt">v${versionsNumbers[i]} update</a>
`; `;
rlog.appendChild(rLi); rlog.appendChild(rLi);
rlog2.appendChild(rLi2); rlog2.appendChild(rLi2);
@ -278,7 +267,7 @@ function domHandle (html){
li.className = 'r-ul-item mb-36'; li.className = 'r-ul-item mb-36';
li.innerHTML = ` li.innerHTML = `
<ol class="logs-r-ol"> <ol class="logs-r-ol">
<li class="txt-4001624 r-ol-item mb-24"><h4 class="logs-h4" id="section-${i+1}">v${versionsNumbers[i]} update</h4></li> <li class="txt-4001624 r-ol-item mb-24" id="section-${i+1}"><h4 class="logs-h4">v${versionsNumbers[i]} update</h4></li>
</ol> </ol>
`; `;
changelog.appendChild(li); changelog.appendChild(li);
@ -358,33 +347,80 @@ if(!logs) {
let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000}; let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000};
localStorage.setItem('logs',JSON.stringify(record)) localStorage.setItem('logs',JSON.stringify(record))
domHandle(html) domHandle(html)
logsHandler()
}).catch(err=>{ }).catch(err=>{
console.log(err,"err"); console.log(err,"err");
}) })
}else{ }else{
domHandle(logs) domHandle(logs)
logsHandler()
} }
let tabItems1 = document.querySelectorAll('.l-ul-item');
function rm(){
document.addEventListener("DOMContentLoaded", function() { tabItems1.forEach(link1=>{
const anchors = document.querySelectorAll("a[href^='#section-']"); link1.classList.remove('active')
// 遍历所有锚点链接 })
for (const anchor of anchors) { }
anchor.addEventListener("click", function(event) { function logsHandler(){
event.preventDefault(); // 阻止默认的跳转行为 let tabItems = document.querySelectorAll('.l-ul-item');
const targetId = anchor.getAttribute("href").substring(1); // 获取目标锚点的 id function rm(){
const targetElement = document.getElementById(targetId); // 获取目标锚点元素 tabItems.forEach(link1=>{
if (targetElement) { link1.classList.remove('active')
const offset = 80; // 上偏移量（可以根据需要进行调整） })
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition-offset,
behavior: "smooth"
});
}
});
} }
}); tabItems.forEach(item=>{
item.addEventListener('click',function(event){
event.preventDefault()
const id = event.currentTarget.getAttribute('data-id')
const content = document.getElementById(`${id}`)
if (content) {
const offset = 90; // 上偏移量（可以根据需要进行调整）
const targetPosition = content.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition-offset,
behavior: "smooth"
});
}
})
})
}
function getAllDataIds(parentId) {
let parentElement = document.getElementById(parentId);
if (parentElement) {
let elementsWithDataId = parentElement.querySelectorAll("[data-id]");
let dataIds = [];
for (let i = 0; i < elementsWithDataId.length; i++) {
let dataId = elementsWithDataId[i].getAttribute("data-id");
dataIds.push(dataId);
}
return dataIds;
}
return [];
}
let allDataIds = getAllDataIds("help-l-ul");
let arrOffsetTop = []
allDataIds.map(item=>{
let id = document.getElementById(`${item}`);
arrOffsetTop.push(id.offsetTop)
})
// 监听页面滚动事件
window.addEventListener('scroll',scrollHandler)
function scrollHandler(){
for (let i = 0; i < arrOffsetTop.length; i++) {
if(window.scrollY<=arrOffsetTop[0]){
rm()
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${1}` + "']");
elementsWithDataId[1]?.classList?.add("active");
return;
}
if (arrOffsetTop[i] > window.scrollY || window.scrollY<=arrOffsetTop[0]){
rm()
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${i}` + "']");
elementsWithDataId[1]?.classList?.add("active");
return;
}
}
}
</script> </script>
</html> </html>

97
public/site/zh/help.html
View File

@ -154,13 +154,13 @@
<a class="txt-4001620 txt" href="#section-13">团队和成员</a> <a class="txt-4001620 txt" href="#section-13">团队和成员</a>
</li> </li>
<li class="l-ul-item" onclick="closeHelpDraweHandle()"> <li class="l-ul-item" onclick="closeHelpDraweHandle()">
<a class="txt-4001620 txt" href="#section-14">成员分组</a> <a class="txt-4001620 txt" href="#section-14">团队管理</a>
</li> </li>
<li class="l-ul-item" onclick="closeHelpDraweHandle()"> <li class="l-ul-item" onclick="closeHelpDraweHandle()">
<a class="txt-4001620 txt" href="#section-15">团队管理</a> <a class="txt-4001620 txt" href="#section-15">团队设置</a>
</li> </li>
<li class="l-ul-item" onclick="closeHelpDraweHandle()"> <li class="l-ul-item" onclick="closeHelpDraweHandle()">
<a class="txt-4001620 txt" href="#section-16">团队设置</a> <a class="txt-4001620 txt" href="#section-16">成员分组</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -276,16 +276,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">基本</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">基本</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item active" data-id="section-1"> <li class="l-ul-item active" data-id="section-1">
<a class="txt-4001620 txt help-a">了解DooTask</a> <a class="txt-4001620 txt">了解DooTask</a>
</li> </li>
<li class="l-ul-item" data-id="section-2"> <li class="l-ul-item" data-id="section-2">
<a class="txt-4001620 txt help-a">注册和登录</a> <a class="txt-4001620 txt">注册和登录</a>
</li> </li>
<li class="l-ul-item" data-id="section-3"> <li class="l-ul-item" data-id="section-3">
<a class="txt-4001620 txt help-a">通知公告</a> <a class="txt-4001620 txt">通知公告</a>
</li> </li>
<li class="l-ul-item" data-id="section-4"> <li class="l-ul-item" data-id="section-4">
<a class="txt-4001620 txt help-a">帐户设置</a> <a class="txt-4001620 txt">帐户设置</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -293,16 +293,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">项目</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">项目</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item" data-id="section-5"> <li class="l-ul-item" data-id="section-5">
<a class="txt-4001620 txt help-a">了解项目</a> <a class="txt-4001620 txt">了解项目</a>
</li> </li>
<li class="l-ul-item" data-id="section-6"> <li class="l-ul-item" data-id="section-6">
<a class="txt-4001620 txt help-a">创建项目</a> <a class="txt-4001620 txt">创建项目</a>
</li> </li>
<li class="l-ul-item" data-id="section-7"> <li class="l-ul-item" data-id="section-7">
<a class="txt-4001620 txt help-a">任务列表</a> <a class="txt-4001620 txt">任务列表</a>
</li> </li>
<li class="l-ul-item" data-id="section-8"> <li class="l-ul-item" data-id="section-8">
<a class="txt-4001620 txt help-a">项目进展</a> <a class="txt-4001620 txt">项目进展</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -310,16 +310,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">任务</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">任务</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item" data-id="section-9"> <li class="l-ul-item" data-id="section-9">
<a class="txt-4001620 txt help-a">任务的使用</a> <a class="txt-4001620 txt">任务的使用</a>
</li> </li>
<li class="l-ul-item" data-id="section-10"> <li class="l-ul-item" data-id="section-10">
<a class="txt-4001620 txt help-a">任务优先级</a> <a class="txt-4001620 txt">任务优先级</a>
</li> </li>
<li class="l-ul-item" data-id="section-11"> <li class="l-ul-item" data-id="section-11">
<a class="txt-4001620 txt help-a">评论与新闻</a> <a class="txt-4001620 txt">评论与新闻</a>
</li> </li>
<li class="l-ul-item" data-id="section-12"> <li class="l-ul-item" data-id="section-12">
<a class="txt-4001620 txt help-a">次要任务</a> <a class="txt-4001620 txt">次要任务</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -327,16 +327,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">团队</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">团队</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item" data-id="section-13"> <li class="l-ul-item" data-id="section-13">
<a class="txt-4001620 txt help-a">团队和成员</a> <a class="txt-4001620 txt">团队和成员</a>
</li> </li>
<li class="l-ul-item" data-id="section-14"> <li class="l-ul-item" data-id="section-14">
<a class="txt-4001620 txt help-a">成员分组</a> <a class="txt-4001620 txt">团队管理</a>
</li> </li>
<li class="l-ul-item" data-id="section-15"> <li class="l-ul-item" data-id="section-15">
<a class="txt-4001620 txt help-a">团队管理</a> <a class="txt-4001620 txt">团队设置</a>
</li> </li>
<li class="l-ul-item" data-id="section-16"> <li class="l-ul-item" data-id="section-16">
<a class="txt-4001620 txt help-a">团队设置</a> <a class="txt-4001620 txt">成员分组</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -344,13 +344,13 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">文件</h5> <h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">文件</h5>
<ol class="help-l-ol"> <ol class="help-l-ol">
<li class="l-ul-item" data-id="section-17"> <li class="l-ul-item" data-id="section-17">
<a class="txt-4001620 txt help-a">文件类型</a> <a class="txt-4001620 txt">文件类型</a>
</li> </li>
<li class="l-ul-item" data-id="section-18"> <li class="l-ul-item" data-id="section-18">
<a class="txt-4001620 txt help-a">共享的文件</a> <a class="txt-4001620 txt">共享的文件</a>
</li> </li>
<li class="l-ul-item" data-id="section-19"> <li class="l-ul-item" data-id="section-19">
<a class="txt-4001620 txt help-a">访问权限</a> <a class="txt-4001620 txt">访问权限</a>
</li> </li>
</ol> </ol>
</li> </li>
@ -562,7 +562,7 @@
<h4 class="txt-5002430 help-h4 mb-24">人事行政管理</h4> <h4 class="txt-5002430 help-h4 mb-24">人事行政管理</h4>
<h6 class="txt-4001624 help-h6">通过数据可视化统计报表获取多维度企业数据，全面了解员工表现，让绩效评价更客观、公正；使用公告发布通知，安排公司活动，传递企业决策，便于塑造企业文化，让员工更有参与感。</h6> <h6 class="txt-4001624 help-h6">通过数据可视化统计报表获取多维度企业数据，全面了解员工表现，让绩效评价更客观、公正；使用公告发布通知，安排公司活动，传递企业决策，便于塑造企业文化，让员工更有参与感。</h6>
</li> </li>
<li class="r-ul-item mb-36" id="section-15"> <li class="r-ul-item mb-36" id="section-14">
<h4 class="txt-5002430 help-h4 mb-24">工作报告</h4> <h4 class="txt-5002430 help-h4 mb-24">工作报告</h4>
<h6 class="txt-4001624 help-h6">1 我的汇报：</h6> <h6 class="txt-4001624 help-h6">1 我的汇报：</h6>
<h6 class="txt-4001624 help-h6">汇报搜索</h6> <h6 class="txt-4001624 help-h6">汇报搜索</h6>
@ -589,7 +589,7 @@
<h6 class="txt-4001624 help-h6">点击用户左上角头像→点击【团队管理】，根据需求选择点击【导出任务统计】/【导出超期任务】/【导出审批数据】/【导出签到数据】，导出关联数据记录。</h6> <h6 class="txt-4001624 help-h6">点击用户左上角头像→点击【团队管理】，根据需求选择点击【导出任务统计】/【导出超期任务】/【导出审批数据】/【导出签到数据】，导出关联数据记录。</h6>
<img class="r-ul-item-pic1" id="help_pic_team7" src="../img/light/help_pic_team7.png" alt="数据导出"> <img class="r-ul-item-pic1" id="help_pic_team7" src="../img/light/help_pic_team7.png" alt="数据导出">
</li> </li>
<li class="r-ul-item mb-36" id="section-16"> <li class="r-ul-item mb-36" id="section-15">
<h4 class="txt-5002430 help-h4 mb-24">新建部门</h4> <h4 class="txt-5002430 help-h4 mb-24">新建部门</h4>
<h6 class="txt-4001624 help-h6">(1) 点击用户左上角头像→点击【团队管理】列表中的“团队管理”选项，进入页面左下角点击【新建部门】；</h6> <h6 class="txt-4001624 help-h6">(1) 点击用户左上角头像→点击【团队管理】列表中的“团队管理”选项，进入页面左下角点击【新建部门】；</h6>
<img class="r-ul-item-pic1" id="help_pic_team8" src="../img/light/help_pic_team8.png" alt="新建部门"> <img class="r-ul-item-pic1" id="help_pic_team8" src="../img/light/help_pic_team8.png" alt="新建部门">
@ -607,7 +607,7 @@
<h6 class="txt-4001624 help-h6">点击用户左上角头像→点击【团队管理】列表中的“团队管理”选项，点击对应人员信息【操作】按键，可对该成员选择进行：设为管理员/设为临时账号/修改邮箱/修改密码/修改部门/操作离职/删除的操作。</h6> <h6 class="txt-4001624 help-h6">点击用户左上角头像→点击【团队管理】列表中的“团队管理”选项，点击对应人员信息【操作】按键，可对该成员选择进行：设为管理员/设为临时账号/修改邮箱/修改密码/修改部门/操作离职/删除的操作。</h6>
<img class="r-ul-item-pic1" id="help_pic_team11" src="../img/light/help_pic_team11.png" alt="团队成员操作"> <img class="r-ul-item-pic1" id="help_pic_team11" src="../img/light/help_pic_team11.png" alt="团队成员操作">
</li> </li>
<li class="r-ul-item mb-36" id="section-14"> <li class="r-ul-item mb-36" id="section-16">
<h4 class="txt-5002430 help-h4 mb-24">项目成员</h4> <h4 class="txt-5002430 help-h4 mb-24">项目成员</h4>
<h6 class="txt-4001624 help-h6">(1) 选择对应项目，点击右上方【成员管理】，添加/删除项目成员；</h6> <h6 class="txt-4001624 help-h6">(1) 选择对应项目，点击右上方【成员管理】，添加/删除项目成员；</h6>
<h6 class="txt-4001624 help-h6">(2) 点击【取消】取消成员管理设置，点击【保存】保存成员修改管理操作。</h6> <h6 class="txt-4001624 help-h6">(2) 点击【取消】取消成员管理设置，点击【保存】保存成员修改管理操作。</h6>
@ -754,29 +754,7 @@ helpMenuBtn.addEventListener('click', () => {
const closeHelpDraweHandle = ()=>{ const closeHelpDraweHandle = ()=>{
helpDrawer.classList.remove('open-help-drawer'); helpDrawer.classList.remove('open-help-drawer');
} }
// document.addEventListener("DOMContentLoaded", function() { // 监听页面滚动事件
// const anchors = document.querySelectorAll("a[href^='#section-']");
// // 遍历所有锚点链接
// for (const anchor of anchors) {
// anchor.addEventListener("click", function(event) {
// event.preventDefault(); // 阻止默认的跳转行为
// const targetId = anchor.getAttribute("href").substring(1); // 获取目标锚点的 id
// const targetElement = document.getElementById(targetId); // 获取目标锚点元素
// if (targetElement) {
// const offset = 90; // 上偏移量（可以根据需要进行调整）
// const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// // 滚动到目标位置，并考虑上偏移量
// window.scrollTo({
// top: targetPosition-offset,
// behavior: "smooth"
// });
// }
// });
// }
// });
// // 获取导航链接元素
// const anchorLinks = document.querySelectorAll(".help-a");
// // 监听页面滚动事件
window.addEventListener('scroll',scrollHandler) window.addEventListener('scroll',scrollHandler)
function getAllDataIds(parentId) { function getAllDataIds(parentId) {
@ -799,7 +777,6 @@ allDataIds.map(item=>{
let id = document.getElementById(`${item}`); let id = document.getElementById(`${item}`);
arrOffsetTop.push(id.offsetTop) arrOffsetTop.push(id.offsetTop)
}) })
function scrollHandler(){ function scrollHandler(){
// 遍历导航链接元素 // 遍历导航链接元素
allDataIds.map(item=>{ allDataIds.map(item=>{
@ -807,28 +784,18 @@ function scrollHandler(){
elements[0]?.classList?.remove("active"); elements[0]?.classList?.remove("active");
}) })
for (let i = 0; i < arrOffsetTop.length; i++) { for (let i = 0; i < arrOffsetTop.length; i++) {
if(window.scrollY<=arrOffsetTop[0]){
rm()
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${1}` + "']");
elementsWithDataId[0]?.classList?.add("active");
return;
}
if (arrOffsetTop[i] > window.scrollY){ if (arrOffsetTop[i] > window.scrollY){
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${i}` + "']"); let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${i}` + "']");
elementsWithDataId[0]?.classList?.add("active"); elementsWithDataId[0]?.classList?.add("active");
return; return;
} }
} }
// tabItems.forEach((link,index) => {
//
// let sectionId = link.getAttribute('data-id'); // 获取锚点ID
// let section = document.querySelector(`#${sectionId}`); // 获取对应的锚点元素
// if (
// section &&
// section.offsetTop>=110&&section.offsetTop<=150
// ) {
// rm()
// link.classList.add('active');
// }
// if( section &&index===0 && section.offsetTop>150){
// rm()
// link.classList.add('active')
// }
// });
} }
</script> </script>
</html> </html>

114
public/site/zh/log.html
View File

@ -186,7 +186,7 @@
<div class="logs-layout"> <div class="logs-layout">
<div class="logs-l logs-sticky"> <div class="logs-l logs-sticky">
<h5 class="logs-h5 mb-16" style="font-weight: 500;">更新日志</h5> <h5 class="logs-h5 mb-16" style="font-weight: 500;">更新日志</h5>
<ul class="logs-l-ul logs-l-1920"></ul> <ul class="logs-l-ul logs-l-1920" id="help-l-ul"></ul>
</div> </div>
<div class="logs-r"> <div class="logs-r">
<h1 class="txt-6003645 logs-h1 mb-36">DooTask更新日志</h1> <h1 class="txt-6003645 logs-h1 mb-36">DooTask更新日志</h1>
@ -212,19 +212,6 @@
<script src="https://cdn.jsdelivr.net/npm/markdown-it@12"></script> <script src="https://cdn.jsdelivr.net/npm/markdown-it@12"></script>
<script src="../js/common.js"></script> <script src="../js/common.js"></script>
<script> <script>
window.onload = function() {
const targetId = window.location.hash.substring(1); // 获取 URL 中的锚点 id
const targetElement = document.getElementById(targetId); // 获取目标锚点元素
if (targetElement) {
const offset = 80; // 上偏移量（可以根据需要进行调整）
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition - offset,
behavior: "smooth"
});
}
};
const getItem = (key)=> { const getItem = (key)=> {
var record = JSON.parse(localStorage.getItem(key)); var record = JSON.parse(localStorage.getItem(key));
if (!record) return null; if (!record) return null;
@ -260,17 +247,19 @@ const domHandle = (html)=>{
const updatesHtmlText = updatesHtml.map(str => str.split('<li>')[1].split('</li>')[0]); const updatesHtmlText = updatesHtml.map(str => str.split('<li>')[1].split('</li>')[0]);
const rLi = document.createElement('li'); const rLi = document.createElement('li');
rLi.className = `l-ul-item ${i==0?'active':''}`; rLi.className = `l-ul-item ${i==0?'active':''}`;
rLi.setAttribute('data-id',`section-${i+1}`)
rLi.innerHTML = ` rLi.innerHTML = `
<a class="txt-4001620 txt log-a" href="#section-${i+1}">v${versionsNumbers[i]} 更新</a> <a class="txt-4001620 txt">v${versionsNumbers[i]} 更新</a>
`; `;
const rLi2 = document.createElement('li'); const rLi2 = document.createElement('li');
rLi2.className = `l-ul-item`; rLi2.className = `l-ul-item`;
rLi2.setAttribute('data-id',`section-${i+1}`)
rLi2.addEventListener('click', function() { rLi2.addEventListener('click', function() {
const logsDrawer = document.querySelector('.logs-drawer'); const logsDrawer = document.querySelector('.logs-drawer');
logsDrawer.classList.remove('open-logs-drawer'); logsDrawer.classList.remove('open-logs-drawer');
}); });
rLi2.innerHTML = ` rLi2.innerHTML = `
<a class="txt-4001620 txt log-a" href="#section-${i+1}" >v${versionsNumbers[i]} 更新</a> <a class="txt-4001620 txt">v${versionsNumbers[i]} 更新</a>
`; `;
rlog.appendChild(rLi); rlog.appendChild(rLi);
rlog2.appendChild(rLi2); rlog2.appendChild(rLi2);
@ -278,7 +267,7 @@ const domHandle = (html)=>{
li.className = 'r-ul-item mb-36'; li.className = 'r-ul-item mb-36';
li.innerHTML = ` li.innerHTML = `
<ol class="logs-r-ol"> <ol class="logs-r-ol">
<li class="txt-4001624 r-ol-item mb-24"><h4 class="logs-h4" id="section-${i+1}">v${versionsNumbers[i]} 更新</h4></li> <li class="txt-4001624 r-ol-item mb-24" id="section-${i+1}"><h4 class="logs-h4">v${versionsNumbers[i]} 更新</h4></li>
</ol> </ol>
` `
changelog.appendChild(li); changelog.appendChild(li);
@ -318,7 +307,6 @@ const domHandle = (html)=>{
if(section.offsetParent.offsetTop <= currentScrollPosition){ if(section.offsetParent.offsetTop <= currentScrollPosition){
// 将对应的菜单项设置为激活状态 // 将对应的菜单项设置为激活状态
const activeMenuItem = logs_tabItems[index]; const activeMenuItem = logs_tabItems[index];
console.log(activeMenuItem,"activeMenuItem");
if (activeMenuItem) { if (activeMenuItem) {
Array.from(logs_tabItems).forEach(titem => titem.classList.remove('active')); Array.from(logs_tabItems).forEach(titem => titem.classList.remove('active'));
activeMenuItem.classList.add('active'); activeMenuItem.classList.add('active');
@ -350,7 +338,7 @@ const domHandle = (html)=>{
} }
const logs = getItem('logs') const logs = getItem('logs')
if(!logs) { if(!logs) {
const url = "https://www.dootask.com/api/system/get/updatelog" const url = "http://192.168.100.122:2222/api/system/get/updatelog"
axios.get(url).then(res=>{ axios.get(url).then(res=>{
const changelog=res.data.data.updateLog const changelog=res.data.data.updateLog
const md = new markdownit(); const md = new markdownit();
@ -358,32 +346,80 @@ if(!logs) {
let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000}; let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000};
localStorage.setItem('logs',JSON.stringify(record)) localStorage.setItem('logs',JSON.stringify(record))
domHandle(html) domHandle(html)
logsHandler()
}).catch(err=>{ }).catch(err=>{
console.log(err,"err"); console.log(err,"err");
}) })
}else{ }else{
domHandle(logs) domHandle(logs)
logsHandler()
} }
let tabItems1 = document.querySelectorAll('.l-ul-item');
document.addEventListener("DOMContentLoaded", function() { function rm(){
const anchors = document.querySelectorAll("a[href^='#section-']"); tabItems1.forEach(link1=>{
// 遍历所有锚点链接 link1.classList.remove('active')
for (const anchor of anchors) { })
anchor.addEventListener("click", function(event) { }
event.preventDefault(); // 阻止默认的跳转行为 function logsHandler(){
const targetId = anchor.getAttribute("href").substring(1); // 获取目标锚点的 id let tabItems = document.querySelectorAll('.l-ul-item');
const targetElement = document.getElementById(targetId); // 获取目标锚点元素 function rm(){
if (targetElement) { tabItems.forEach(link1=>{
const offset = 80; // 上偏移量（可以根据需要进行调整） link1.classList.remove('active')
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置 })
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition-offset,
behavior: "smooth"
});
}
});
} }
}); tabItems.forEach(item=>{
item.addEventListener('click',function(event){
event.preventDefault()
const id = event.currentTarget.getAttribute('data-id')
const content = document.getElementById(`${id}`)
if (content) {
const offset = 90; // 上偏移量（可以根据需要进行调整）
const targetPosition = content.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
// 滚动到目标位置，并考虑上偏移量
window.scrollTo({
top: targetPosition-offset,
behavior: "smooth"
});
}
})
})
}
function getAllDataIds(parentId) {
let parentElement = document.getElementById(parentId);
if (parentElement) {
let elementsWithDataId = parentElement.querySelectorAll("[data-id]");
let dataIds = [];
for (let i = 0; i < elementsWithDataId.length; i++) {
let dataId = elementsWithDataId[i].getAttribute("data-id");
dataIds.push(dataId);
}
return dataIds;
}
return [];
}
let allDataIds = getAllDataIds("help-l-ul");
let arrOffsetTop = []
allDataIds.map(item=>{
let id = document.getElementById(`${item}`);
arrOffsetTop.push(id.offsetTop)
})
// 监听页面滚动事件
window.addEventListener('scroll',scrollHandler)
function scrollHandler(){
for (let i = 0; i < arrOffsetTop.length; i++) {
if(window.scrollY<=arrOffsetTop[0]){
rm()
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${1}` + "']");
elementsWithDataId[1]?.classList?.add("active");
return;
}
if (arrOffsetTop[i] > window.scrollY || window.scrollY<=arrOffsetTop[0]){
rm()
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${i}` + "']");
elementsWithDataId[1]?.classList?.add("active");
return;
}
}
}
</script> </script>
</html> </html>