Fri Jan 26 17:16:00 CST 2024 inscode

src/App.vue

@@ -6,7 +6,7 @@ import Commit from './components/commit/Commit.vue'
 import Drag from './components/drag/Drag.vue'
 import Visual from './components/visual/index.vue'
 import VisualHtml from './components/visualHtml/index.vue'
-import { reactive, onBeforeMount,onMounted } from 'vue';
+import { reactive, onBeforeMount, onMounted } from 'vue';
 import html2canvas from 'html2canvas';
 
 // state
@@ -15,7 +15,7 @@ const state = reactive({
 })
 
 /** 下载图片 */
-const downloadBase64 = (content,fileName) => {
+const downloadBase64 = (content, fileName) => {
   const base64ToBlob = function (code) {
     let parts = code.split(';base64,');
     let contentType = parts[0].split(':')[1];
@@ -38,23 +38,37 @@ const downloadBase64 = (content,fileName) => {
 };
 
 // 截图
-const shotAction=()=>{
-    html2canvas(document.getElementById('render-id'),{
-        useCORS:true,
-        proxy:'inscode.csdn.net',
-        allowTaint:true,
-        scale:2,
-    }).then(function(canvas) {
-    console.log('canvas',canvas)
+const shotAction = () => {
+  html2canvas(document.getElementById('render-id'), {
+    useCORS: true,
+    proxy: 'inscode.csdn.net',
+    allowTaint: true,
+    scale: 2,
+  }).then(function (canvas) {
+    console.log('canvas', canvas)
     const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
     const base64img = `data:image/png;base64,${base64}`;
     downloadBase64(base64img, state.current);
     // document.body.appendChild(canvas);
-});
+  });
 }
 
-onMounted(()=>{
-    console.log('html2canvas',html2canvas)
+
+
+onMounted(() => {
+  console.log('html2canvas', html2canvas)
+  // 计算DOMContentLoaded
+  const observer = new PerformanceObserver((list) => {
+    list.getEntries().forEach((entry) => {
+      const domContentLoadedTime =
+        entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+      console.log(
+        `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
+      );
+    });
+  });
+
+  observer.observe({ type: "navigation", buffered: true });
 })
 
 // 之前
@@ -70,23 +84,23 @@ onBeforeMount(() => {
       const value = itemArray[1]
       data[key] = value
     })
-    console.log('urlArray',urlArray)
+    console.log('urlArray', urlArray)
     if (data['type'] = 'csdn_game') {
       state.current = '新星赛道选手信息可视化'
     }
-    else if(data['type'] = 'csdn_grade'){
+    else if (data['type'] = 'csdn_grade') {
       state.current = 'grade查询分数'
     }
-    else if(data['type'] = 'draw'){
+    else if (data['type'] = 'draw') {
       state.current = '抽奖'
     }
-    else if(data['type'] = 'commit'){
+    else if (data['type'] = 'commit') {
       state.current = '评论'
     }
-    else if(data['type'] = 'grag'){
+    else if (data['type'] = 'grag') {
       state.current = '拖拽'
     }
-    else if(data['type'] = 'Visual'){
+    else if (data['type'] = 'Visual') {
       state.current = 'Visual'
     }
   }
@@ -113,20 +127,20 @@ onBeforeMount(() => {
       <SearchGrade v-if="state.current === 'grade查询分数'" />
       <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
       <Commit v-else-if="state.current === '评论'" />
-            <Drag v-else-if="state.current === '拖拽'"/>
-            <Visual v-else-if="state.current === 'Visual'"/>
-            <VisualHtml v-else-if="state.current === 'VisualHtml'"/>
+      <Drag v-else-if="state.current === '拖拽'" />
+      <Visual v-else-if="state.current === 'Visual'" />
+      <VisualHtml v-else-if="state.current === 'VisualHtml'" />
       <Draw v-else />
     </div>
   </div>
 </template>
 
 <style scoped>
-    .container-main {
+.container-main {
   position: absolute;
   width: 100vw;
   height: 100vh;
   padding: 10px;
   margin: 0;
-    }
+}
 </style>

src/components/Author.vue

@@ -27,15 +27,15 @@
 import {ref,onMounted} from 'vue'
 const imgRef=ref(null)
 onMounted(()=>{
-    console.log('imgRef',imgRef)
-    try{
-        if(imgRef&&imgRef.value){
-        imgRef.value.click()
-    }
-    }
-    catch(e){
-        console.log(e)
-    }
+    // console.log('imgRef',imgRef)
+    // try{
+    //     if(imgRef&&imgRef.value){
+    //     imgRef.value.click()
+    // }
+    // }
+    // catch(e){
+    //     console.log(e)
+    // }
 })
 </script>
 <style>

src/components/visualHtml/html/data.js

@@ -29,12 +29,12 @@ const genTreeData = async (htmlHref) => {
     // 请求 html 内容
     const {data:htmlContent}=await axios.get(htmlHref)
 
-    console.log('htmlContent',htmlContent)
+    // console.log('htmlContent',htmlContent)
 
     const htmlDoc = getHtmlDoc(htmlContent)
 
     const treeData=traverse(htmlDoc.body)
-    console.log('treeData',treeData)
+    // console.log('treeData',treeData)
     return treeData
 }