From 559c0d10a985f464a462fefe86ae212df5de8ccd Mon Sep 17 00:00:00 2001
From: sheeplin <1270610465@qq.com>
Date: Sat, 9 Mar 2024 15:19:06 +0800
Subject: [PATCH] style: beautify u-parse

---
 src/utils/u-parse/components/IFramePlayer.vue | 58 ++++++-----
 src/utils/u-parse/components/wxParseAudio.vue | 28 +++---
 src/utils/u-parse/components/wxParseImg.vue   | 70 +++++++-------
 .../u-parse/components/wxParseMarkdown.vue    | 96 +++++++++++++------
 src/utils/u-parse/components/wxParseVideo.vue | 13 ++-
 src/utils/u-parse/libs/html2json.js           | 24 ++---
 src/utils/u-parse/libs/htmlparser.js          | 12 +--
 src/utils/u-parse/libs/wxDiscode.js           |  2 +-
 src/utils/u-parse/u-parse.vue                 | 43 +++++----
 9 files changed, 207 insertions(+), 139 deletions(-)

diff --git a/src/utils/u-parse/components/IFramePlayer.vue b/src/utils/u-parse/components/IFramePlayer.vue
index faec6b6b..aa503f52 100644
--- a/src/utils/u-parse/components/IFramePlayer.vue
+++ b/src/utils/u-parse/components/IFramePlayer.vue
@@ -1,63 +1,71 @@
 <template>
   <view>
     <view v-if="visible">
-      <button type="warn">视频正在加载中……</button>
-      <web-view :src="src" style="position: fixed; top:7vh; right: 0vw; height:83vh">
-      </web-view>
+      <button type="warn">
+        视频正在加载中……
+      </button>
+      <web-view
+        :src="src"
+        style="position: fixed; top:7vh; right: 0vw; height:83vh"
+      />
       <button
-          style="position: fixed; bottom: 2vh; right: 0vw; z-index: 1024;width: 100vw"
-          type="primary"
-          @tap="visible=false"
+        style="position: fixed; bottom: 2vh; right: 0vw; z-index: 1024;width: 100vw"
+        type="primary"
+        @tap="visible=false"
       >
         返回
       </button>
     </view>
     <view v-else>
-      <button type="link" @tap="onTap">点击查看视频</button>
+      <button
+        type="link"
+        @tap="onTap"
+      >
+        点击查看视频
+      </button>
     </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: "IFramePlayer",
+  name: 'IFramePlayer',
   props: {
     src: {
       type: String,
-      default: ""
-    }
+      default: '',
+    },
   },
   data() {
     return {
-      visible: false
-    }
+      visible: false,
+    };
   },
-  methods:{
-    onTap(){
+  methods: {
+    onTap() {
       // #ifdef MP
       uni.setClipboardData({
         data: this.src,
-        success: function () {
+        success() {
           uni.showToast({
             title: '已复制视频链接',
-          })
+          });
         },
-        fail: function () {
+        fail() {
           uni.showToast({
             title: '无法复制链接至剪切板，请手动复制',
-            icon: 'fail'
-          })
-          this.visible=true
-        }
+            icon: 'fail',
+          });
+          this.visible = true;
+        },
       });
       // #endif
       // #ifndef MP
       this.visible = true;
       // #endif
-
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/src/utils/u-parse/components/wxParseAudio.vue b/src/utils/u-parse/components/wxParseAudio.vue
index 6c94b23f..2f9cc3b9 100644
--- a/src/utils/u-parse/components/wxParseAudio.vue
+++ b/src/utils/u-parse/components/wxParseAudio.vue
@@ -1,23 +1,25 @@
 <template>
   <!--增加audio标签支持-->
   <luch-audio
-      :id="node.attr.id"
-      :author="node.attr.author"
-      :class="node.classStr"
-      :loop="node.attr.loop"
-      :name="node.attr.name"
-      :poster="node.attr.poster"
-      :src="node.attr.src"
-      :style="node.styleStr"
-      controls></luch-audio>
+    :id="node.attr.id"
+    :author="node.attr.author"
+    :class="node.classStr"
+    :loop="node.attr.loop"
+    :name="node.attr.name"
+    :poster="node.attr.poster"
+    :src="node.attr.src"
+    :style="node.styleStr"
+    controls
+  />
 </template>
 
 <script>
-import LuchAudio from "@/uni_modules/luch-audio/components/luch-audio/luch-audio.vue";
+import LuchAudio from '@/uni_modules/luch-audio/components/luch-audio/luch-audio.vue';
+
 export default {
-  name: 'wxParseAudio',
-  components:{
-    LuchAudio
+  name: 'WxParseAudio',
+  components: {
+    LuchAudio,
   },
   props: {
     node: {
diff --git a/src/utils/u-parse/components/wxParseImg.vue b/src/utils/u-parse/components/wxParseImg.vue
index 7b4427fd..5566a03d 100644
--- a/src/utils/u-parse/components/wxParseImg.vue
+++ b/src/utils/u-parse/components/wxParseImg.vue
@@ -1,30 +1,25 @@
 <template>
   <view>
-    <text v-if="errMsg">图片加载错误：{{ errMsg }}</text>
+    <text v-if="errMsg">
+      图片加载错误：{{ errMsg }}
+    </text>
     <image
-        v-else
-        :lazy-load="node.attr.lazyLoad"
-        :mode="node.attr.mode"
-        :src="node.attr.src"
-        :alt="node.attr.src"
-        :style="newStyleStr || node.styleStr"
-        @load="wxParseImgLoad"
-        @tap="wxParseImgTap(node.attr.src)"
-        @error="error"
+      v-else
+      :lazy-load="node.attr.lazyLoad"
+      :mode="node.attr.mode"
+      :src="node.attr.src"
+      :alt="node.attr.src"
+      :style="newStyleStr || node.styleStr"
+      @load="wxParseImgLoad"
+      @tap="wxParseImgTap(node.attr.src)"
+      @error="error"
     />
   </view>
 </template>
 
 <script>
 export default {
-  name: 'wxParseImg',
-  data() {
-    return {
-      newStyleStr: '',
-      preview: true,
-      errMsg: '',
-    };
-  },
+  name: 'WxParseImg',
   props: {
     node: {
       type: Object,
@@ -33,41 +28,48 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      newStyleStr: '',
+      preview: true,
+      errMsg: '',
+    };
+  },
   methods: {
     error(e) {
-      this.errMsg = e.detail.errMsg
+      this.errMsg = e.detail.errMsg;
     },
     wxParseImgTap(src) {
       if (!this.preview) return;
       if (!src) return;
       let parent = this.$parent;
-      while (!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
+      while (!parent.preview || typeof parent.preview !== 'function') { // TODO 遍历获取父节点执行方法
         parent = parent.$parent;
       }
       parent.preview(src);
     },
     // 图片视觉宽高计算函数区
     wxParseImgLoad(e) {
-      const {src} = e.currentTarget.dataset;
+      const { src } = e.currentTarget.dataset;
       if (!src) return;
-      const {width, height}           = e.mp.detail;
-      const recal                     = this.wxAutoImageCal(width, height);
-      const {imageheight, imageWidth} = recal;
-      const {padding, mode}           = this.node.attr;
-      const {styleStr}                = this.node;
-      const imageHeightStyle          = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
-      this.newStyleStr                = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
+      const { width, height } = e.mp.detail;
+      const recal = this.wxAutoImageCal(width, height);
+      const { imageheight, imageWidth } = recal;
+      const { padding, mode } = this.node.attr;
+      const { styleStr } = this.node;
+      const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
+      this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
     },
     // 计算视觉优先的图片宽高
     wxAutoImageCal(originalWidth, originalHeight) {
       // 获取图片的原始长宽
-      const {padding}   = this.node.attr;
+      const { padding } = this.node.attr;
       const windowWidth = this.node.$screen.width - (2 * padding);
-      const results     = {};
+      const results = {};
 
       if (originalWidth < 60 || originalHeight < 60) {
-        const {src} = this.node.attr;
-        let parent  = this.$parent;
+        const { src } = this.node.attr;
+        let parent = this.$parent;
         while (!parent.preview || typeof parent.preview !== 'function') {
           parent = parent.$parent;
         }
@@ -78,11 +80,11 @@ export default {
       // 判断按照那种方式进行缩放
       if (originalWidth > windowWidth) {
         // 在图片width大于手机屏幕width时候
-        results.imageWidth  = windowWidth;
+        results.imageWidth = windowWidth;
         results.imageheight = windowWidth * (originalHeight / originalWidth);
       } else {
         // 否则展示原来的数据
-        results.imageWidth  = originalWidth;
+        results.imageWidth = originalWidth;
         results.imageheight = originalHeight;
       }
 
diff --git a/src/utils/u-parse/components/wxParseMarkdown.vue b/src/utils/u-parse/components/wxParseMarkdown.vue
index 900d5455..f28e617f 100644
--- a/src/utils/u-parse/components/wxParseMarkdown.vue
+++ b/src/utils/u-parse/components/wxParseMarkdown.vue
@@ -2,8 +2,14 @@
   <!--判断是否是标签节点-->
   <block v-if="node.node === 'element'">
     <block v-if="node.tag === 'button'">
-      <button size="mini" type="default">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <button
+        size="mini"
+        type="default"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </button>
@@ -11,8 +17,14 @@
 
     <!--li类型-->
     <block v-else-if="node.tag === 'li'">
-      <view :class="node.classStr" :style="node.styleStr">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <view
+        :class="node.classStr"
+        :style="node.styleStr"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </view>
@@ -35,8 +47,16 @@
 
     <!--a类型-->
     <block v-else-if="node.tag === 'a'">
-      <view :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr" @tap="openURL(node.attr.href)">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <view
+        :class="node.classStr"
+        :data-href="node.attr.href"
+        :style="node.styleStr"
+        @tap="openURL(node.attr.href)"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </view>
@@ -44,8 +64,15 @@
 
     <!--table类型-->
     <block v-else-if="node.tag === 'table'">
-      <view :class="node.classStr" :style="node.styleStr" class="table">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <view
+        :class="node.classStr"
+        :style="node.styleStr"
+        class="table"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </view>
@@ -58,8 +85,14 @@
 
     <!--code类型-->
     <block v-else-if="node.tag === 'code'">
-      <view :class="node.classStr" :style="node.styleStr">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <view
+        :class="node.classStr"
+        :style="node.styleStr"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </view>
@@ -74,8 +107,14 @@
 
     <!--其他标签-->
     <block v-else>
-      <view :class="node.classStr" :style="node.styleStr">
-        <block v-for="(node, index) of node.nodes" :key="index">
+      <view
+        :class="node.classStr"
+        :style="node.styleStr"
+      >
+        <block
+          v-for="(node, index) of node.nodes"
+          :key="index"
+        >
           <wxParseMarkdown :node="node" />
         </block>
       </view>
@@ -83,50 +122,53 @@
   </block>
 
   <!--判断是否是文本节点-->
-  <block v-else-if="node.node === 'text'" style="display: inline-block">
+  <block
+    v-else-if="node.node === 'text'"
+    style="display: inline-block"
+  >
     {{ node.text }}
   </block>
 </template>
 
 <script>
-import wxParseImg from './wxParseImg';
-import wxParseVideo from './wxParseVideo';
-import wxParseAudio from './wxParseAudio';
-import IFramePlayer from './IFramePlayer';
+import wxParseImg from './wxParseImg.vue';
+import wxParseVideo from './wxParseVideo.vue';
+import wxParseAudio from './wxParseAudio.vue';
+import IFramePlayer from './IFramePlayer.vue';
 
 export default {
   name: 'WxParseMarkdown',
-  props: {
-    node: {},
-  },
   components: {
     IFramePlayer,
     wxParseImg,
     wxParseVideo,
     wxParseAudio,
   },
+  props: {
+    node: {},
+  },
   methods: {
     /**
      * 打开URL
      * @param href {String} 要打开的URL
      */
     openURL(href) {
-      //#ifdef H5
+      // #ifdef H5
       window.open(href);
-      //#endif
+      // #endif
 
-      //#ifndef H5
+      // #ifndef H5
       uni.setClipboardData({
         data: href,
-        success: function () {
+        success() {
           uni.showToast({
             title: '链接已复制！请在浏览器中打开',
             icon: 'success',
-            duration: 2000
+            duration: 2000,
           });
-        }
+        },
       });
-      //#endif
+      // #endif
     },
   },
 };
diff --git a/src/utils/u-parse/components/wxParseVideo.vue b/src/utils/u-parse/components/wxParseVideo.vue
index c641b51c..c1fc2353 100644
--- a/src/utils/u-parse/components/wxParseVideo.vue
+++ b/src/utils/u-parse/components/wxParseVideo.vue
@@ -1,13 +1,20 @@
 <template>
   <!--增加video标签支持，并循环添加-->
-  <view :class="node.classStr" :style="node.styleStr">
-    <video :class="node.classStr" :src="node.attr.src" class="video-video"></video>
+  <view
+    :class="node.classStr"
+    :style="node.styleStr"
+  >
+    <video
+      :class="node.classStr"
+      :src="node.attr.src"
+      class="video-video"
+    />
   </view>
 </template>
 
 <script>
 export default {
-  name: 'wxParseVideo',
+  name: 'WxParseVideo',
   props: {
     node: {},
   },
diff --git a/src/utils/u-parse/libs/html2json.js b/src/utils/u-parse/libs/html2json.js
index e353df8d..09fe3f45 100644
--- a/src/utils/u-parse/libs/html2json.js
+++ b/src/utils/u-parse/libs/html2json.js
@@ -12,11 +12,11 @@
  * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
  */
 
-import wxDiscode  from './wxDiscode';
+import wxDiscode from './wxDiscode';
 import HTMLParser from './htmlparser';
 
 function makeMap(str) {
-  const obj   = {};
+  const obj = {};
   const items = str.split(',');
   for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
   return obj;
@@ -50,7 +50,7 @@ function getScreenInfo() {
   const screen = {};
   wx.getSystemInfo({
     success: (res) => {
-      screen.width  = res.windowWidth;
+      screen.width = res.windowWidth;
       screen.height = res.windowHeight;
     },
   });
@@ -59,12 +59,12 @@ function getScreenInfo() {
 
 function html2json(html, customHandler, imageProp, host) {
   // 处理字符串
-  html           = removeDOCTYPE(html);
-  html           = trimHtml(html);
-  html           = wxDiscode.strDiscode(html);
+  html = removeDOCTYPE(html);
+  html = trimHtml(html);
+  html = wxDiscode.strDiscode(html);
   // 生成node节点
   const bufArray = [];
-  const results  = {
+  const results = {
     nodes: [],
     imageUrls: [],
   };
@@ -73,7 +73,7 @@ function html2json(html, customHandler, imageProp, host) {
 
   function Node(tag) {
     this.node = 'element';
-    this.tag  = tag;
+    this.tag = tag;
 
     this.$screen = screen;
   }
@@ -99,8 +99,8 @@ function html2json(html, customHandler, imageProp, host) {
       }
 
       node.attr = attrs.reduce((pre, attr) => {
-        const {name} = attr;
-        let {value}  = attr;
+        const { name } = attr;
+        let { value } = attr;
         if (name === 'class') {
           node.classStr = value;
         }
@@ -144,7 +144,7 @@ function html2json(html, customHandler, imageProp, host) {
       // 对img添加额外数据
       if (node.tag === 'img') {
         let imgUrl = node.attr.src;
-        imgUrl     = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
+        imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
         Object.assign(node.attr, imageProp, {
           src: imgUrl || '',
         });
@@ -160,7 +160,7 @@ function html2json(html, customHandler, imageProp, host) {
 
       // 处理font标签样式属性
       if (node.tag === 'font') {
-        const fontSize   = [
+        const fontSize = [
           'x-small',
           'small',
           'medium',
diff --git a/src/utils/u-parse/libs/htmlparser.js b/src/utils/u-parse/libs/htmlparser.js
index 597e0ea2..2939da3d 100644
--- a/src/utils/u-parse/libs/htmlparser.js
+++ b/src/utils/u-parse/libs/htmlparser.js
@@ -14,11 +14,11 @@
 // Regular Expressions for parsing tags and attributes
 
 const startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
-const endTag   = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
-const attr     = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+const attr = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
 
 function makeMap(str) {
-  const obj   = {};
+  const obj = {};
   const items = str.split(',');
   for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
   return obj;
@@ -44,7 +44,7 @@ function HTMLParser(html, handler) {
   let index;
   let chars;
   let match;
-  let last    = html;
+  let last = html;
   const stack = [];
 
   stack.last = () => stack[stack.length - 1];
@@ -132,11 +132,11 @@ function HTMLParser(html, handler) {
     }
 
     if (chars) {
-      index    = html.indexOf('<');
+      index = html.indexOf('<');
       let text = '';
       while (index === 0) {
         text += '<';
-        html  = html.substring(1);
+        html = html.substring(1);
         index = html.indexOf('<');
       }
       text += index < 0 ? html : html.substring(0, index);
diff --git a/src/utils/u-parse/libs/wxDiscode.js b/src/utils/u-parse/libs/wxDiscode.js
index a7a36a6f..0a3f7f5e 100644
--- a/src/utils/u-parse/libs/wxDiscode.js
+++ b/src/utils/u-parse/libs/wxDiscode.js
@@ -183,7 +183,7 @@ function strDiscode(str) {
 function urlToHttpUrl(url, domain) {
   if (/^\/\//.test(url)) {
     return `https:${url}`;
-  } else if (/^\//.test(url)) {
+  } if (/^\//.test(url)) {
     return `https://${domain}${url}`;
   }
   return url;
diff --git a/src/utils/u-parse/u-parse.vue b/src/utils/u-parse/u-parse.vue
index 654eed2e..42b9d92f 100644
--- a/src/utils/u-parse/u-parse.vue
+++ b/src/utils/u-parse/u-parse.vue
@@ -8,19 +8,29 @@
 
 <template>
   <!--基础元素-->
-  <div v-if="!loading" :class="className" class="wxParse">
-    <block v-for="(node,index) of nodes" :key="index">
-      <wxParseTemplate :node="node"/>
+  <div
+    v-if="!loading"
+    :class="className"
+    class="wxParse"
+  >
+    <block
+      v-for="(node,index) of nodes"
+      :key="index"
+    >
+      <wxParseTemplate :node="node" />
     </block>
   </div>
 </template>
 
 <script>
-import HtmlToJson      from './libs/html2json';
+import HtmlToJson from './libs/html2json';
 import wxParseTemplate from './components/wxParseMarkdown.vue';
 
 export default {
-  name: 'wxParse',
+  name: 'WxParse',
+  components: {
+    wxParseTemplate,
+  },
   props: {
     loading: {
       type: Boolean,
@@ -67,20 +77,17 @@ export default {
       },
     },
   },
-  components: {
-    wxParseTemplate,
-  },
   computed: {
     results() {
       const {
-              content,
-              noData,
-              imageProp,
-              startHandler,
-              endHandler,
-              charsHandler,
-            }             = this;
-      const parseData     = content || noData;
+        content,
+        noData,
+        imageProp,
+        startHandler,
+        endHandler,
+        charsHandler,
+      } = this;
+      const parseData = content || noData;
       const customHandler = {
         start: startHandler,
         end: endHandler,
@@ -102,14 +109,14 @@ export default {
     },
     preview(src, $event) {
       if (!this.imageUrls.length) return;
-      wx.previewImage({
+      uni.previewImage({
         current: src,
         urls: this.imageUrls,
       });
       this.$emit('preview', src, $event);
     },
     removeImageUrl(src) {
-      const {imageUrls} = this;
+      const { imageUrls } = this;
       imageUrls.splice(imageUrls.indexOf(src), 1);
     },
   },