Fri Jan 26 17:16:00 CST 2024 inscode

src/App.vue

@@ -3,10 +3,10 @@ import GameChart from './components/GameChart.vue'
 import SearchGrade from './components/SearchGrade.vue'
 import Draw from './components/draw/Draw.vue'
 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 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 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'
     }
   }
@@ -94,39 +108,39 @@ onBeforeMount(() => {
 </script>
 
 <template>
-    <div class="container-main">
-        <div style="text-align: center;padding: 20px;">
-            <a-radio-group v-model:value="state.current" name="radioGroup">
-                <a-radio value="grade查询分数">csdn查询分数</a-radio>
-                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
-                <a-radio value="抽奖">随机抽奖</a-radio>
-                <a-radio value="评论">csdn分析评论</a-radio>
-                 <a-radio value="拖拽">拼图</a-radio>
-                 <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
-                 <a-radio value="VisualHtml">可视化 html</a-radio>
-            </a-radio-group>
-            <a-button type="primary" @click="shotAction">
-                截图
-            </a-button>
-        </div>
-        <div id="render-id">
-            <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'"/>
-            <Draw v-else />
-        </div>
+  <div class="container-main">
+    <div style="text-align: center;padding: 20px;">
+      <a-radio-group v-model:value="state.current" name="radioGroup">
+        <a-radio value="grade查询分数">csdn查询分数</a-radio>
+        <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
+        <a-radio value="抽奖">随机抽奖</a-radio>
+        <a-radio value="评论">csdn分析评论</a-radio>
+        <a-radio value="拖拽">拼图</a-radio>
+        <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
+        <a-radio value="VisualHtml">可视化 html</a-radio>
+      </a-radio-group>
+      <a-button type="primary" @click="shotAction">
+        截图
+      </a-button>
     </div>
+    <div id="render-id">
+      <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'" />
+      <Draw v-else />
+    </div>
+  </div>
 </template>
 
 <style scoped>
-    .container-main {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        padding: 10px;
-        margin: 0;
-    }
+.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
 }