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

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

File diff suppressed because it is too large Load Diff

View File

@ -186,7 +186,7 @@
<div class="logs-layout">
<div class="logs-l logs-sticky">
<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 class="logs-r" id="google_translate_element">
<h1 class="txt-6003645 logs-h1 mb-36">DooTask Update Log </h1>
@ -211,19 +211,6 @@
<script src="../js/common.js"></script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></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)=> {
var record = JSON.parse(localStorage.getItem(key));
if (!record) return null;
@ -252,24 +239,26 @@ function domHandle (html){
const changelog = document.querySelector('.logs-r-ul');
const rlog = document.querySelector('.logs-l-1920');
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]);
for (let i = 0; i < versionsNumbers.length; i++) {
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 rLi = document.createElement('li');
rLi.className = `l-ul-item ${i==0?'active':''}`;
rLi.setAttribute('data-id',`section-${i+1}`)
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');
rLi2.className = `l-ul-item`;
rLi2.setAttribute('data-id',`section-${i+1}`)
rLi2.addEventListener('click', function() {
const logsDrawer = document.querySelector('.logs-drawer');
logsDrawer.classList.remove('open-logs-drawer');
});
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);
rlog2.appendChild(rLi2);
@ -278,7 +267,7 @@ function domHandle (html){
li.className = 'r-ul-item mb-36';
li.innerHTML = `
<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>
`;
changelog.appendChild(li);
@ -358,33 +347,80 @@ if(!logs) {
let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000};
localStorage.setItem('logs',JSON.stringify(record))
domHandle(html)
logsHandler()
}).catch(err=>{
console.log(err,"err");
})
}else{
domHandle(logs)
logsHandler()
}
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 = 80; // 上偏移量(可以根据需要进行调整)
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
let tabItems1 = document.querySelectorAll('.l-ul-item');
function rm(){
tabItems1.forEach(link1=>{
link1.classList.remove('active')
})
}
function logsHandler(){
let tabItems = document.querySelectorAll('.l-ul-item');
function rm(){
tabItems.forEach(link1=>{
link1.classList.remove('active')
})
}
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>
</html>

View File

@ -154,13 +154,13 @@
<a class="txt-4001620 txt" href="#section-13">团队和成员</a>
</li>
<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 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 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>
</ol>
</li>
@ -276,16 +276,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">基本</h5>
<ol class="help-l-ol">
<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 class="l-ul-item" data-id="section-2">
<a class="txt-4001620 txt help-a">注册和登录</a>
<a class="txt-4001620 txt">注册和登录</a>
</li>
<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 class="l-ul-item" data-id="section-4">
<a class="txt-4001620 txt help-a">帐户设置</a>
<a class="txt-4001620 txt">帐户设置</a>
</li>
</ol>
</li>
@ -293,16 +293,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">项目</h5>
<ol class="help-l-ol">
<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 class="l-ul-item" data-id="section-6">
<a class="txt-4001620 txt help-a">创建项目</a>
<a class="txt-4001620 txt">创建项目</a>
</li>
<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 class="l-ul-item" data-id="section-8">
<a class="txt-4001620 txt help-a">项目进展</a>
<a class="txt-4001620 txt">项目进展</a>
</li>
</ol>
</li>
@ -310,16 +310,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">任务</h5>
<ol class="help-l-ol">
<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 class="l-ul-item" data-id="section-10">
<a class="txt-4001620 txt help-a">任务优先级</a>
<a class="txt-4001620 txt">任务优先级</a>
</li>
<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 class="l-ul-item" data-id="section-12">
<a class="txt-4001620 txt help-a">次要任务</a>
<a class="txt-4001620 txt">次要任务</a>
</li>
</ol>
</li>
@ -327,16 +327,16 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">团队</h5>
<ol class="help-l-ol">
<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 class="l-ul-item" data-id="section-14">
<a class="txt-4001620 txt help-a">成员分组</a>
<a class="txt-4001620 txt">团队管理</a>
</li>
<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 class="l-ul-item" data-id="section-16">
<a class="txt-4001620 txt help-a">团队设置</a>
<a class="txt-4001620 txt">成员分组</a>
</li>
</ol>
</li>
@ -344,13 +344,13 @@
<h5 class="txt-4001620 help-h5 mb-16" style="font-weight: 500;">文件</h5>
<ol class="help-l-ol">
<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 class="l-ul-item" data-id="section-18">
<a class="txt-4001620 txt help-a">共享的文件</a>
<a class="txt-4001620 txt">共享的文件</a>
</li>
<li class="l-ul-item" data-id="section-19">
<a class="txt-4001620 txt help-a">访问权限</a>
<a class="txt-4001620 txt">访问权限</a>
</li>
</ol>
</li>
@ -562,7 +562,7 @@
<h4 class="txt-5002430 help-h4 mb-24">人事行政管理</h4>
<h6 class="txt-4001624 help-h6">通过数据可视化统计报表获取多维度企业数据,全面了解员工表现,让绩效评价更客观、公正;使用公告发布通知,安排公司活动,传递企业决策,便于塑造企业文化,让员工更有参与感。</h6>
</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>
<h6 class="txt-4001624 help-h6">1 我的汇报:</h6>
<h6 class="txt-4001624 help-h6">汇报搜索</h6>
@ -589,7 +589,7 @@
<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="数据导出">
</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>
<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="新建部门">
@ -607,7 +607,7 @@
<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="团队成员操作">
</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>
<h6 class="txt-4001624 help-h6">(1) 选择对应项目,点击右上方【成员管理】,添加/删除项目成员;</h6>
<h6 class="txt-4001624 help-h6">(2) 点击【取消】取消成员管理设置,点击【保存】保存成员修改管理操作。</h6>
@ -754,29 +754,7 @@ helpMenuBtn.addEventListener('click', () => {
const closeHelpDraweHandle = ()=>{
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)
function getAllDataIds(parentId) {
@ -799,7 +777,6 @@ allDataIds.map(item=>{
let id = document.getElementById(`${item}`);
arrOffsetTop.push(id.offsetTop)
})
function scrollHandler(){
// 遍历导航链接元素
allDataIds.map(item=>{
@ -807,28 +784,18 @@ function scrollHandler(){
elements[0]?.classList?.remove("active");
})
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){
let elementsWithDataId = document.querySelectorAll("[data-id='" + `section-${i}` + "']");
elementsWithDataId[0]?.classList?.add("active");
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>
</html>

View File

@ -186,7 +186,7 @@
<div class="logs-layout">
<div class="logs-l logs-sticky">
<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 class="logs-r">
<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="../js/common.js"></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)=> {
var record = JSON.parse(localStorage.getItem(key));
if (!record) return null;
@ -260,17 +247,19 @@ const domHandle = (html)=>{
const updatesHtmlText = updatesHtml.map(str => str.split('<li>')[1].split('</li>')[0]);
const rLi = document.createElement('li');
rLi.className = `l-ul-item ${i==0?'active':''}`;
rLi.setAttribute('data-id',`section-${i+1}`)
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');
rLi2.className = `l-ul-item`;
rLi2.setAttribute('data-id',`section-${i+1}`)
rLi2.addEventListener('click', function() {
const logsDrawer = document.querySelector('.logs-drawer');
logsDrawer.classList.remove('open-logs-drawer');
});
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);
rlog2.appendChild(rLi2);
@ -278,7 +267,7 @@ const domHandle = (html)=>{
li.className = 'r-ul-item mb-36';
li.innerHTML = `
<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>
`
changelog.appendChild(li);
@ -318,7 +307,6 @@ const domHandle = (html)=>{
if(section.offsetParent.offsetTop <= currentScrollPosition){
// 将对应的菜单项设置为激活状态
const activeMenuItem = logs_tabItems[index];
console.log(activeMenuItem,"activeMenuItem");
if (activeMenuItem) {
Array.from(logs_tabItems).forEach(titem => titem.classList.remove('active'));
activeMenuItem.classList.add('active');
@ -350,7 +338,7 @@ const domHandle = (html)=>{
}
const logs = getItem('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=>{
const changelog=res.data.data.updateLog
const md = new markdownit();
@ -358,32 +346,80 @@ if(!logs) {
let record = {value: html, expired: new Date().getTime() + 30 * 60 * 1000};
localStorage.setItem('logs',JSON.stringify(record))
domHandle(html)
logsHandler()
}).catch(err=>{
console.log(err,"err");
})
}else{
domHandle(logs)
logsHandler()
}
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 = 80; // 上偏移量(可以根据需要进行调整)
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset; // 目标位置相对于视口的位置
let tabItems1 = document.querySelectorAll('.l-ul-item');
function rm(){
tabItems1.forEach(link1=>{
link1.classList.remove('active')
})
}
function logsHandler(){
let tabItems = document.querySelectorAll('.l-ul-item');
function rm(){
tabItems.forEach(link1=>{
link1.classList.remove('active')
})
}
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>
</html>