update

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "axios": "^1.6.2",
+    "bookmark-file-parser": "^1.0.6",
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",

src/components/detail/NavDetail.vue

@@ -29,7 +29,7 @@
                             trigger="hover"
                             effect="dark" close-delay="2000">
                   <div class="MyPopover" slot="content">
-                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
+                    <span v-if="UrlObj.name" style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
                     <div style="width:100% ;text-align: center"><img style="width:150px"
                                                                      :src="getQR(UrlId,UrlObj.icon)"></div>
                   </div>
@@ -171,8 +171,6 @@ export default {
       //   创建时间：
       UnDate: null,
       Cdate: null,
-      //   时间趋势对象：
-      viewByTime: null,
       // 处理后的时间对象：
       //   横轴时间：
       xTime: [],
@@ -182,11 +180,18 @@ export default {
     }
   },
   mounted() {
-    this.initPage();
-    this.getQR(this.UrlId, this.UrlObj.icon);
+    if(this.UrlId && this.UrlObj.icon){
+      this.getQR(this.UrlId, this.UrlObj.icon);
+    }
+
 
   },
   created() {
+    this.UrlId = this.$route.query.uid;
+    this.GetNav(this.UrlId);
+    if(this.UrlId){
+      this.ViewByTime(this.UrlId)
+    }
 
   },
   computed: {},
@@ -199,13 +204,13 @@ export default {
           urlId: id
         }
       }).then(function (res) {
-        _this.viewByTime = res.data;
-        // console.log(_this.viewByTime)
-        Object.keys(_this.viewByTime).forEach(key => {
-          _this.xTime.push(_this.viewByTime[key].time);
-          _this.YView.push(_this.viewByTime[key].views);
-        })
-        _this.initEchart(_this.xTime,_this.YView);
+        if(res.data){
+          Object.keys(res.data).forEach(key => {
+            _this.xTime.push(res.data[key].time);
+            _this.YView.push(res.data[key].views);
+          })
+          _this.initEchart(_this.xTime,_this.YView);
+        }
       }).catch((error) => {
         Vue.prototype.$notify.error({
           title: '错误',
@@ -259,13 +264,6 @@ export default {
     },
 
 
-    // 初始化页面
-    initPage() {
-      this.UrlId = this.$route.query.uid;
-      this.GetNav(this.UrlId);
-
-      // this.initEchart();
-    },
     //   初始化Echart图
     initEchart(xline,yline) {
       // var that = this;
@@ -380,7 +378,7 @@ export default {
     },
     //   向管理员反馈
     WarnToAdmin() {
-      console.log(this.xTime);
+      // console.log(this.xTime);
     }
   }
 

src/components/home/HomePage.vue

@@ -98,7 +98,6 @@ export default {
       }).then(function (res) {
         if (res.data) {
           _this.navList = res.data;
-          console.log(res.data);
         }
       }).catch((error) => {
         Vue.prototype.$notify.error({

src/components/myNav/MyNav.vue

@@ -91,7 +91,7 @@ export default {
 
     getUserNav() {
       let _this = this;
-      if (localStorage.getItem("userId")) {
+      if (localStorage.getItem("userId")&&localStorage.getItem('Authorization')) {
         axios({
           method: 'post',
           url: '/api/UrlAndCate/disposeBookmarkToJson',

src/components/setting/onsite/Import.vue

@@ -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>

src/components/setting/onsite/ImportExport.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="main">
-    <div>
-      <el-image style="margin-top: 20px;width: 300px;height: 250px" :src="require('@/assets/img/daoru.a909296f.webp')"></el-image>
-    </div>
     <div style="margin-top: 20px;display: flex;align-items: center;flex-direction: column">
       <span class="title">导入数据</span>
-      <div style="width: 200px;height: 70px">
+      <div>
         <Import></Import>
       </div>
     </div>
 
-    <div style="margin-top: 20px">
+    <div style="margin-top: 20px;display: flex;align-items: center;flex-direction: column">
       <span class="title">导出数据</span>
       <div>
         <Export></Export>