LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
landaiqing
2023-12-24 22:54:17 +08:00
parent a3479d41b8
commit b8a53d8d90
7 changed files with 9909 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/components/setting/onsite/Import.vue
View File

@@ -1,25 +1,17 @@
<template>
<div class="container">
<div class="main-box">
<div class="box-content">
<div class="svg">
<svg width="33" height="28.5" viewBox="0 0 66 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z" transform="translate(0.0177612 0.740387)" fill="#4F8AFE"></path>
</svg>
</div>
<div class="text">
<p class="title">上传文件</p>
</div>
<div class="dots">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<el-upload
class="upload-demo"
drag
action=""
:on-change="handleChange"
:auto-upload="false"
:limit="1"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传html文件</div>
</el-upload>
</template>
<script>
export default {
@@ -34,194 +26,105 @@ export default {
},
computed: {},
methods: {}
methods: {
getBookmarksStrRootNode(str) {
// 创建iframe
let iframe = document.createElement('iframe')
document.body.appendChild(iframe)
iframe.style.display = 'none'
// 添加书签dom字符串
iframe.contentWindow.document.documentElement.innerHTML = str
// 获取书签树根节点
return iframe.contentWindow.document.querySelector('dl')
},
walkBookmarksTree (root) {
let result = []
// 深度优先遍历
let walk = (node, list) => {
let els = node.children
if (els && els.length > 0) {
for (let i = 0; i < els.length; i++) {
let item = els[i]
// p标签或h3标签直接跳过
if (item.tagName === 'P' || item.tagName === 'H3') {
continue
}
// 文件夹不用创建元素
if (item.tagName === 'DL') {
walk(els[i], list)
} else {// DT节点
let child = null
// 判断是否是文件夹
let children = item.children
let isDir = false
for(let j = 0; j < children.length; j++) {
if (children[j].tagName === 'H3' || children[j].tagName === 'DL') {
isDir = true
}
}
// 文件夹
if (isDir) {
child = {
name: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '',
folder: true,
children: []
}
walk(els[i], child.children)
} else {// 书签
let _item = item.querySelector('a')
let icon=$('a').attr('ICON');
console.log(icon);
child = {
name: _item.innerText,
url: _item.href,
icon:icon,
folder: false,
}
}
list.push(child)
}
}
}
}
walk(root, result)
return result
},
analysisBookmarksStr(str) {
let root = this.getBookmarksStrRootNode(str)
let result = this.walkBookmarksTree(root)
console.log(result);
},
handleChange(file) {
let _this=this;
let reader = new FileReader(); //先new 一个读文件的对象 FileReader
if (typeof FileReader === "undefined") { //用来判断你的浏览器是否支持 FileReader
this.$message({
type: "info",
message: "您的浏览器不支持文件读取。"
});
return;
}
// reader.readAsText(file.raw, "gb2312"); //读.txt文件
reader.readAsArrayBuffer(file.raw); //读任意文件
reader.onload = function (e) {
var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
// ints = ints.slice(0, 5000); //截取一段读取的内容
// let snippets = new TextDecoder('gb2312').decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
let snippets = new TextDecoder('utf-8').decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
// console.log("读取的内容如下：");
// console.log(snippets);
_this.analysisBookmarksStr(snippets);
};
},
}
}
</script>
<style scoped>
.container {
-webkit-transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
}
.main-box {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 250px;
height: 70px;
background: #FFFFFF;
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
border-radius: 24px;
padding: 40px;
-webkit-transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.box-content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
/* flex-direction: row; */
/* flex-wrap: nowrap; */
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box-content .text {
position: relative;
left: -10px;
//margin-left: 82px;
}
.text .title {
font-family: sans-serif;
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 18px;
color: #4F4F4F;
}
.text span {
font-family: sans-serif;
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
color: #4F4F4F;
}
.dots div {
width: 6px;
height: 6px;
background: #4F8AFE;
margin: 3px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}
.blue-bg {
display: none;
position: absolute;
right: 400px;
z-index: 1;
width: 82.35px;
height: 70px;
background: #4F8AFE;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
border-radius: 0 24px 24px 0;
-webkit-border-radius: 0 24px 24px 0;
-moz-border-radius: 0 24px 24px 0;
-ms-border-radius: 0 24px 24px 0;
-o-border-radius: 0 24px 24px 0;
}
.box-content::after {
content: '';
/*display: none;
*/
opacity: 0;
position: absolute;
right: -10px;
z-index: -1;
width: 100px;
height: 70px;
background: #4F8AFE;
border-radius: 0 24px 24px 0;
-webkit-border-radius: 0 24px 24px 0;
-moz-border-radius: 0 24px 24px 0;
-ms-border-radius: 0 24px 24px 0;
-o-border-radius: 0 24px 24px 0;
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::after {
opacity: 1;
position: absolute;
z-index: -1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
.box-content::before {
content: '';
opacity: 0;
position: absolute;
right: -30px;
/* z-index:1; */
width: 162px;
height: 70px;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA5MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljc2ODkgNTZINzMuNzcyM0M4My41ODYyIDU2IDkxLjU0NDggNDguMDQxMyA5MS41NDQ4IDM4LjIyNzZDOTEuNTQ0OCAyOS40NzM4IDg1LjIxNjQgMjIuMjE4MSA3Ni44ODQgMjAuNzQ0Qzc0LjYzMTMgMTQuMTQyNSA2OC4zOTEzIDkuMzg4MDcgNjEuMDI2NiA5LjM4ODA3QzU4LjQwMDUgOS4zODgwNyA1NS45MjcgMTAuMDEwNSA1My43MTQ0IDExLjA4NjZDNTAuMzEzMyA0LjUwNTI1IDQzLjQ1ODggMCAzNS41NDQyIDBDMjQuMjQ4OSAwIDE1LjA4OTggOS4xNTkzNSAxNS4wODk4IDIwLjQ1NDRDMTUuMDg5OCAyMC41MzA3IDE1LjEwMTggMjAuNjAzIDE1LjEwMTggMjAuNjc5M0M2LjU1Njg3IDIxLjk3MjIgNi4wNzE3OGUtMDYgMjkuMzI0NiA2LjA3MTc4ZS0wNiAzOC4yMzA3Qy0wLjAwODAyNDM3IDQ4LjA0NDUgNy45NTA2OCA1NS45OTkgMTcuNzY4MyA1NS45OTlMMTcuNzY4OSA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjk0MjUgMC4yNDAzODcpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
background-repeat: no-repeat;
background-position: 45px center;
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::before {
opacity: 1;
position: absolute;
/* z-index: 1; */
-webkit-transform: translateX(120px) scale(.7);
transform: translateX(120px) scale(.7);
}
.dots div {
-webkit-transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
}
.main-box:hover .dots div:nth-child(1) {
-webkit-transform: translateY(9px);
transform: translateY(9px);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(2) {
-webkit-transform: scale(3);
transform: scale(3);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(3) {
-webkit-transform: translateY(-9px);
transform: translateY(-9px);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.container:hover {
/* z-index: 2; */
-webkit-transform: translateX(-75px);
transform: translateX(-75px);
.el-upload__tip {
color: var(--theme-color);
}
.dr {
position: absolute;
bottom: 16px;
right: 16px;
width:70px;
}
</style>