From a81a437249eed927c200e48dd1371893f9d334f4 Mon Sep 17 00:00:00 2001
From: coderlyu <974257574@qq.com>
Date: Fri, 19 Mar 2021 18:28:50 +0800
Subject: [PATCH] feat: add test

---
 package.json                    |   9 +-
 src/components/au-code-diff.vue |  73 +++++++++++
 src/components/au-diff.vue      | 152 ++++++++++++++++++++++
 src/components/au-nav.vue       |   8 ++
 src/components/au-scroll.vue    | 222 ++++++++++++++++++++++++++++++++
 src/router/index.ts             |  20 +++
 src/views/diff/index.vue        |  27 ++++
 src/views/scroll/index.vue      |  18 +++
 vite.config.ts                  |   9 +-
 9 files changed, 534 insertions(+), 4 deletions(-)
 create mode 100644 src/components/au-code-diff.vue
 create mode 100644 src/components/au-diff.vue
 create mode 100644 src/components/au-scroll.vue
 create mode 100644 src/views/diff/index.vue
 create mode 100644 src/views/scroll/index.vue

diff --git a/package.json b/package.json
index 130710d..596bc20 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
   "main": "./src/main.ts",
   "license": "MIT",
   "author": {
-    "name" : "刘誉",
-    "email" : "974257574@qq.com"
+    "name": "刘誉",
+    "email": "974257574@qq.com"
   },
   "scripts": {
     "dev": "vite --mode development",
@@ -37,8 +37,13 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "codemirror": "^5.59.4",
+    "diff": "^5.0.0",
+    "diff-match-patch": "^1.0.5",
+    "diff2html": "^3.2.0",
     "echarts": "^5.0.2",
     "element-plus": "^1.0.2-beta.32",
+    "highlight.js": "^10.6.0",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "vite-plugin-mockit": "^1.0.1",
diff --git a/src/components/au-code-diff.vue b/src/components/au-code-diff.vue
new file mode 100644
index 0000000..4493cfa
--- /dev/null
+++ b/src/components/au-code-diff.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-form ref="form" :model="form" label-width="80px">
+    <el-form-item label="旧文件">
+      <input
+        type="file"
+        name="file-old"
+        id="file-old"
+        @change="fileChange(0, $event)"
+      />
+    </el-form-item>
+    <el-form-item label="新文件">
+      <input
+        type="file"
+        name="file-new"
+        id="file-new"
+        @change="fileChange(1, $event)"
+      />
+    </el-form-item>
+  </el-form>
+  <div ref="root" />
+</template>
+<script>
+import { defineComponent, onMounted, reactive, ref, watchEffect } from 'vue'
+import * as diff from 'diff'
+import * as Diff2Html from 'diff2html'
+// import hljs from 'highlight.js'
+// import 'highlight.js/styles/googlecode.css'
+import 'diff2html/bundles/css/diff2html.min.css'
+export default defineComponent({
+  name: 'AuCodeDiff',
+  setup(prop, ctx) {
+    const root = ref(null)
+    const diffHtml = ref('')
+    const oldVal = ref('')
+    const newVal = ref('')
+    const form = reactive({
+      name: '',
+    })
+    onMounted(() => {
+      if (root.value) {
+        root.value.innerHTML = diffHtml.value
+      }
+    })
+    const fileChange = (type, e) => {
+      let url = e.target.files[0]
+      const reader = new FileReader()
+      reader.onload = function (ev) {
+        let result = ev.target.result
+        console.log(type)
+        type ? (newVal.value = result) : (oldVal.value = result)
+      }
+      reader.readAsText(url)
+    }
+    watchEffect(() => {
+      if (oldVal.value && newVal.value) {
+        console.log('asdf')
+        let tempStr = diff.createPatch('index.html', oldVal.value, newVal.value)
+        diffHtml.value = Diff2Html.html(tempStr, {
+          drawFileList: true,
+          matching: 'lines',
+          outputFormat: 'side-by-side',
+        })
+        root.value.innerHTML = diffHtml.value
+      }
+    })
+    return {
+      root,
+      fileChange,
+      form,
+    }
+  },
+})
+</script>
diff --git a/src/components/au-diff.vue b/src/components/au-diff.vue
new file mode 100644
index 0000000..b4f6d48
--- /dev/null
+++ b/src/components/au-diff.vue
@@ -0,0 +1,152 @@
+<template>
+  <div ref="refDiv"></div>
+</template>
+<script>
+import { defineComponent, onMounted, ref } from 'vue'
+import DiffMatchPatch from 'diff-match-patch'
+// 引入全局实例
+import CodeMirror from 'codemirror'
+// 核心样式
+import 'codemirror/lib/codemirror.css'
+// 引入主题后还需要在 options 中指定主题才会生效
+import 'codemirror/theme/idea.css'
+
+// 需要引入具体的语法高亮库才会有对应的语法高亮效果
+// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
+// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/css/css.js'
+import 'codemirror/mode/xml/xml.js'
+import 'codemirror/mode/shell/shell.js'
+import 'codemirror/mode/sql/sql.js'
+
+//代码补全提示
+import 'codemirror/addon/hint/anyword-hint.js'
+import 'codemirror/addon/hint/css-hint.js'
+import 'codemirror/addon/hint/html-hint.js'
+import 'codemirror/addon/hint/javascript-hint.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/sql-hint.js'
+import 'codemirror/addon/hint/xml-hint.js'
+
+//代码版本差异比较
+import 'codemirror/addon/merge/merge.js'
+import 'codemirror/addon/merge/merge.css'
+
+window.diff_match_patch = DiffMatchPatch
+window.DIFF_DELETE = -1
+window.DIFF_INSERT = 1
+window.DIFF_EQUAL = 0
+export default defineComponent({
+  name: 'AuDiff',
+  setup(prop, ctx) {
+    const refDiv = ref('')
+    const dmp = new DiffMatchPatch()
+    const diff = dmp.diff_main(
+      `
+      <div></div>\n
+    `,
+      `
+    <a>\n
+      <div> name </div>\n
+    </a>\n
+    `
+    )
+    console.log(diff)
+    onMounted(() => {
+      let str = ''
+      diff.forEach(([index, content]) => {
+        if (index === 0) {
+          str += content
+        } else if (index === -1) {
+          str += `<span class="sub-str">${content}</span>`
+        } else {
+          str += `<span class="add-str">${content}</span>`
+        }
+      })
+      console.log(str)
+      console.log(refDiv.value)
+      // refDiv.value.innerHTML = str
+      CodeMirror.MergeView(refDiv.value, {
+        value:
+          '/*以下为演示内容，请添加您自己的内容 ~_~ */\n' +
+          '\n' +
+          'html,\n' +
+          'body {\n' +
+          '  width: 100%;\n' +
+          '  height: 100%;\n' +
+          '  margin: 0;\n' +
+          '  padding: 0;\n' +
+          '  overflow: hidden;\n' +
+          "  font-family: 'Fira Mono', helvetica, arial, sans-serif;\n" +
+          '  font-weight: 400;\n' +
+          '  font-size: 62.5%;\n' +
+          '}\n' +
+          '\n' +
+          '#webgl-container {\n' +
+          '  width: 100%;\n' +
+          '  height: 100%;\n' +
+          '  cursor: pointer;\n' +
+          '}\n' +
+          '\n' +
+          '.loading {\n' +
+          '  position: absolute;\n' +
+          '  width: 100%;\n' +
+          '  height: 100%;\n' +
+          '  background-color: #000000;\n' +
+          '  opacity: 1;\n' +
+          '  -webkit-transition: opacity 1.2s ease-out;\n' +
+          '  -o-transition: opacity 1.2s ease-out;\n' +
+          '  transition: opacity 1.2s ease-out;\n' +
+          '  pointer-events: none;\n' +
+          '  z-index: 5;' +
+          '}', //上次内容
+        origLeft: null,
+        orig:
+          '.dialog-footwer {\n' +
+          '  text-align: center;\n' +
+          '  margin-top: 20px;\n' +
+          '}\n' +
+          '\n' +
+          '.toggle_wrap {\n' +
+          '  margin-bottom: 6px;\n' +
+          '  height: auto;\n' +
+          '  overflow-y: auto;\n' +
+          '}\n' +
+          '.toggle_wrap_card {\n' +
+          '  padding: 0 10px 10px 10px;\n' +
+          '}\n' +
+          '\n' +
+          '/deep/.el-button--success {\n' +
+          '  background-color: transparent;\n' +
+          '  border-color: #5bacff;\n' +
+          '  color: #5bacff;\n' +
+          '}\n' +
+          '</style>', //本次内容
+        lineNumbers: true, //显示行号
+        smartIndent: true, //自动缩进是否开启\
+        indentUnit: 2,
+        mode: 'text/html',
+        highlightDifferences: false,
+        styleActiveLine: false,
+        matchBrackets: false,
+        connect: 'align',
+        theme: '3024-night',
+        readOnly: true, //只读 不可修改
+      })
+    })
+    return {
+      refDiv,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+:deep(.sub-str) {
+  color: red;
+}
+:deep(.add-str) {
+  color: green;
+}
+</style>
diff --git a/src/components/au-nav.vue b/src/components/au-nav.vue
index b058f0a..15f43e5 100644
--- a/src/components/au-nav.vue
+++ b/src/components/au-nav.vue
@@ -23,6 +23,14 @@
           <template #title>实时信息</template>
         </el-menu-item>
       </el-submenu>
+      <el-menu-item index="CodeDiff">
+        <i class="el-icon-s-order"></i>
+        <template #title>文本差异</template>
+      </el-menu-item>
+      <el-menu-item index="ListScroll">
+        <i class="el-icon-s-order"></i>
+        <template #title>滚动回弹</template>
+      </el-menu-item>
       <el-menu-item index="About">
         <i class="el-icon-s-order"></i>
         <template #title>关于</template>
diff --git a/src/components/au-scroll.vue b/src/components/au-scroll.vue
new file mode 100644
index 0000000..4d77e9c
--- /dev/null
+++ b/src/components/au-scroll.vue
@@ -0,0 +1,222 @@
+<template>
+  <div
+    class="wrapper"
+    ref="wrapper"
+    @touchstart.prevent="onStart"
+    @touchmove.prevent="onMove"
+    @touchend.prevent="onEnd"
+    @touchcancel.prevent="onEnd"
+    @mousedown.prevent="onStart"
+    @mousemove.prevent="onMove"
+    @mouseup.prevent="onEnd"
+    @mousecancel.prevent="onEnd"
+    @mouseleave.prevent="onEnd"
+    @transitionend="onTransitionEnd"
+  >
+    <ul class="list" ref="scroller" :style="scrollerStyle">
+      <li class="list-item" v-for="item in 100" :key="item">
+        {{ item }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+} from 'vue'
+export default defineComponent({
+  name: 'AuScroll',
+  setup(prop, ctx) {
+    const wrapper = ref(null)
+    const scroller = ref(null)
+    const scroll = reactive({
+      minY: 0,
+      maxY: 0,
+      wrapperHeight: 0,
+      offsetY: 0,
+      duration: 0,
+      bezier: 'linear',
+      startY: 0,
+      pointY: 0,
+      startTime: 0, // 惯性滑动范围内的 startTime
+      momentumStartY: 0, // 惯性滑动范围内的 startY
+      momentumTimeThreshold: 300, // 惯性滑动的启动 时间阈值
+      momentumYThreshold: 15, // 惯性滑动的启动 距离阈值
+      isStarted: false, // start锁
+    })
+    const scrollerStyle = computed(() => {
+      return {
+        transform: `translate3d(0, ${scroll.offsetY}px, 0)`,
+        'transition-duration': `${scroll.duration}ms`,
+        'transition-timing-function': scroll.bezier,
+      }
+    })
+    onMounted(() => {
+      nextTick(() => {
+        const { height: wrapperHeight } = wrapper.value.getBoundingClientRect()
+        const { height: scrollHeight } = scroller.value.getBoundingClientRect()
+        scroll.wrapperHeight = wrapperHeight
+        scroll.minY = wrapperHeight - scrollHeight
+      })
+    })
+    const onStart = (e) => {
+      const point = e.touches ? e.touches[0] : e
+      scroll.isStarted = true
+      scroll.duration = 0
+      stop()
+      scroll.pointY = point.pageY
+      scroll.momentumStartY = scroll.startY = scroll.offsetY
+      scroll.startTime = new Date().getTime()
+    }
+    const onMove = (e) => {
+      if (!scroll.isStarted) return
+      const point = e.touches ? e.touches[0] : e
+      const deltaY = point.pageY - scroll.pointY
+      // 浮点数坐标会影响渲染速度
+      let offsetY = Math.round(scroll.startY + deltaY)
+      // 超出边界时增加阻力
+      if (offsetY < scroll.minY || offsetY > scroll.maxY) {
+        offsetY = Math.round(scroll.startY + deltaY / 3)
+      }
+      scroll.offsetY = offsetY
+      const now = new Date().getTime()
+      // 记录在触发惯性滑动条件下的偏移值和时间
+      if (now - scroll.startTime > scroll.momentumTimeThreshold) {
+        scroll.momentumStartY = scroll.offsetY
+        scroll.startTime = now
+      }
+    }
+    const onEnd = (e) => {
+      if (!scroll.isStarted) return
+      scroll.isStarted = false
+      if (isNeedReset()) return
+      const absDeltaY = Math.abs(scroll.offsetY - scroll.momentumStartY)
+      const duration = new Date().getTime() - scroll.startTime
+      // 启动惯性滑动
+      if (
+        duration < scroll.momentumTimeThreshold &&
+        absDeltaY > scroll.momentumYThreshold
+      ) {
+        let moment = momentum(scroll.offsetY, scroll.momentumStartY, duration)
+        scroll.offsetY = Math.round(moment.destination)
+        scroll.duration = moment.duration
+        scroll.bezier = moment.bezier
+      }
+    }
+    const momentum = (current, start, duration) => {
+      const durationMap = {
+        noBounce: 2500,
+        weekBounce: 800,
+        strongBounce: 400,
+      }
+      const bezierMap = {
+        noBounce: 'cubic-bezier(.17, .89, .45, 1)',
+        weekBounce: 'cubic-bezier(.25, .46, .45, .94)',
+        strongBounce: 'cubic-bezier(.25, .46, .45, .94)',
+      }
+      let type = 'noBounce'
+      // 惯性滑动加速度
+      const deceleration = 0.003
+      // 回弹阻力
+      const bounceRate = 10
+      // 强弱回弹的分割值
+      const bounceThreshold = 300
+      // 回弹的最大限度
+      const maxOverflowY = scroll.wrapperHeight / 6
+      let overflowY
+
+      const distance = current - start
+      const speed = (2 * Math.abs(distance)) / duration
+      let destination =
+        current + (speed / deceleration) * (distance < 0 ? -1 : 1)
+      if (destination < scroll.minY) {
+        overflowY = scroll.minY - destination
+        type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce'
+        destination = Math.max(
+          scroll.minY - maxOverflowY,
+          scroll.minY - overflowY / bounceRate
+        )
+      } else if (destination > scroll.maxY) {
+        overflowY = destination - scroll.maxY
+        type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce'
+        destination = Math.min(
+          scroll.maxY + maxOverflowY,
+          scroll.maxY + overflowY / bounceRate
+        )
+      }
+
+      return {
+        destination,
+        duration: durationMap[type],
+        bezier: bezierMap[type],
+      }
+    }
+    const onTransitionEnd = () => {
+      isNeedReset()
+    }
+    const isNeedReset = () => {
+      // 超出边界时需要重置位置
+      let offsetY
+      if (scroll.offsetY < scroll.minY) {
+        offsetY = scroll.minY
+      } else if (scroll.offsetY > scroll.maxY) {
+        offsetY = scroll.maxY
+      }
+      if (typeof offsetY !== 'undefined') {
+        scroll.offsetY = offsetY
+        scroll.duration = 500
+        scroll.bezier = 'cubic-bezier(.165, .84, .44, 1)'
+        return true
+      }
+      return false
+    }
+    const stop = () => {
+      // 获取当前 translate 的位置
+      const matrix = window
+        .getComputedStyle(scroller.value)
+        .getPropertyValue('transform')
+      scroll.offsetY = Math.round(+matrix.split(')')[0].split(', ')[5])
+    }
+    return {
+      wrapper,
+      scroller,
+      scrollerStyle,
+      ...toRefs(scroll),
+      onStart,
+      onMove,
+      onEnd,
+      onTransitionEnd,
+      stop,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+ul {
+  list-style: none;
+}
+
+.wrapper {
+  height: 80%;
+  max-height: 500px;
+  overflow: hidden;
+}
+
+.list {
+  background-color: #fff7f7;
+}
+
+.list-item {
+  height: 40px;
+  line-height: 40px;
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px dashed #e0e0e0;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9b23a6d..ab1ad8f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,6 +69,26 @@ const routes: Array<RouteRecordRaw> = [
           },
         ],
       },
+      {
+        path: 'codeDiff',
+        name: 'CodeDiff',
+        component: () =>
+          import(/* webpackChunkName: 'codeDiff' */ '../views/diff/index.vue'),
+        meta: {
+          title: '文本差异',
+        },
+      },
+      {
+        path: 'listScroll',
+        name: 'ListScroll',
+        component: () =>
+          import(
+            /* webpackChunkName: 'listScroll' */ '../views/scroll/index.vue'
+          ),
+        meta: {
+          title: '滚动回弹',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/diff/index.vue b/src/views/diff/index.vue
new file mode 100644
index 0000000..c51e472
--- /dev/null
+++ b/src/views/diff/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-row class="au-card au-pd-16">
+      <el-col>
+        <au-code-diff />
+      </el-col>
+    </el-row>
+    <!-- <el-row class="au-card au-pd-16">
+      <el-col>
+        <au-diff />
+      </el-col>
+    </el-row> -->
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import AuDiff from '../../components/au-diff.vue'
+import AuCodeDiff from '../../components/au-code-diff.vue'
+export default defineComponent({
+  name: 'Diff',
+  components: {
+    AuDiff,
+    AuCodeDiff
+  },
+  setup(prop, ctx) {},
+})
+</script>
diff --git a/src/views/scroll/index.vue b/src/views/scroll/index.vue
new file mode 100644
index 0000000..9eac55b
--- /dev/null
+++ b/src/views/scroll/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="au-card au-box-shadow au-pd-16 au-mt-32 au-mr-16">
+    <au-scroll />
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import AuScroll from '../../components/au-scroll.vue'
+export default defineComponent({
+  name: 'Scroll',
+  components: {
+    AuScroll
+  },
+  setup(prop, ctx) {
+
+  }
+})
+</script>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 3d9d22a..fdf17a2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,11 +8,11 @@ export default defineConfig({
   root: process.cwd(),
   server: {
     open: false,
-    port: 3030,
+    port: 3010,
     strictPort: true,
     proxy: {
       '/au': {
-        target: `http://localhost:3030`,
+        target: `http://localhost:3010`,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/au/, '')
       }
@@ -20,6 +20,11 @@ export default defineConfig({
   },
   publicDir: 'public',
   logLevel: 'error',
+  build: {
+    minify: 'esbuild',
+    sourcemap: false,
+    assetsInlineLimit: 8192
+  },
   plugins: [
     vue(),
     styleImport({