Initial commit

src/common/Track.js

@@ -0,0 +1,222 @@
+import { bindEvent, last } from 'vtils'
+
+const Track = {
+  app: null,
+  ready: false,
+  App: {
+    created() {
+      Track.app = this
+    },
+    watch: {
+      '$route.path': {
+        immediate: true,
+        handler: async (fromPath, toPath) => {
+          await Track.ensureReady()
+          Track.app.$nextTick(async () => {
+            const { id, name } = await Track.injectMark()
+            window.loadEventPush(
+              fromPath,
+              toPath || '',
+              Track.app.$route.query,
+              {
+                mark_id: id,
+                mark_name: name
+              }
+            )
+            Track.app.$nextTick(() => {
+              window.elementAddEventListener()
+            })
+          })
+        }
+      }
+    }
+  },
+  ensureReady: async () => {
+    if (Track.ready) return
+    return new Promise((resolve) => {
+      const timer = setInterval(() => {
+        if (
+          // @ts-ignore
+          typeof window.Countly !== 'undefined' &&
+          // @ts-ignore
+          typeof window.anyEventPush !== 'undefined' &&
+          Track.app !== null
+        ) {
+          clearInterval(timer)
+          Track.ready = true
+          resolve()
+        }
+      }, 60)
+    })
+  },
+  prepareData(data) {
+    return {
+      ...(data.id && data.name
+        ? {
+            control_id: data.id,
+            control_name: data.name,
+            control_value: data.value || data.name
+          }
+        : {}),
+      ...(data.goods
+        ? data.goods.isUniGoods
+          ? {
+              content_id: data.goods.id,
+              content_name: data.goods.name,
+              resource_id: data.goods.resourceId,
+              resource_name: data.goods.resourceName,
+              resource_position_id: data.goods.resourcePositionId,
+              resource_position_name: data.goods.resourcePositionName,
+              resource_position_no: data.index || 0
+            }
+          : {
+              content_id: data.goods.commodityId,
+              content_name:
+                data.goods.commodityTitle ||
+                // 兼容订单下的商品
+                data.goods.name,
+              ...(data.goods.commodityResourceId
+                ? {
+                    resource_id: data.goods.commodityResourceId,
+                    resource_name: data.goods.commodityTitle,
+                    resource_position_id: '',
+                    resource_position_name: data.name,
+                    resource_position_no: data.index || 0
+                  }
+                : {})
+            }
+        : {}),
+      ...(data.resource
+        ? {
+            resource_id: data.resource.id,
+            resource_name: data.resource.title || data.resource.name || '',
+            resource_position_id: data.resource.stateId || '',
+            resource_position_name: data.resource.stateName || '',
+            resource_position_no: data.index || 0
+          }
+        : {}),
+      ...(data.resourcePosition
+        ? {
+            resource_position_id: data.resourcePosition.id,
+            resource_position_name: data.resourcePosition.name,
+            resource_position_no: data.index || 0
+          }
+        : {}),
+      ...(data.mark
+        ? {
+            mark_id: data.mark.id,
+            mark_name: data.mark.name
+          }
+        : {}),
+      ...(data.content
+        ? {
+            content_name: data.content
+          }
+        : {})
+    }
+  },
+  pushEvent: async (data) => {
+    await Track.ensureReady()
+    const trackData = Track.prepareData(data)
+    if (!trackData.mark_id && !trackData.mark_name) {
+      const { id, name } = await Track.injectMark()
+      trackData.mark_id = id
+      trackData.mark_name = name
+    }
+    window.anyEventPush(data.type, data.path, data.name, trackData)
+  },
+  provideMark(cb) {
+    return {
+      methods: {
+        provideTrackMark: cb
+      }
+    }
+  },
+  injectMark: async () => {
+    const currentRoute = Track.app.$route
+    const matched = currentRoute.matched
+    const currentPage = last(matched)
+    const currentPageInstance = currentPage?.instances.default
+    const provideTrackMark = currentPageInstance?.provideTrackMark
+    const { id = 'NONE', name = 'NONE' } =
+      typeof provideTrackMark === 'function' ? await provideTrackMark() : {}
+    return {
+      id,
+      name
+    }
+  },
+  install(app, options) {
+    Track.ensureReady().then(() => {
+      // @ts-ignore
+      countlyConfig.baseContextPath = options.appid
+    })
+
+    async function applyTrack(el, payload) {
+      await Track.ensureReady()
+      let data = payload.value
+      // @ts-ignore
+      if (data && !data.disabled) {
+        data = {
+          ...data,
+          name: `${options.prefix || ''}${data.name}`,
+          // @ts-ignore
+          path: el.__track_data__?.path || window.getRoutePath()
+        }
+
+        el.__track_data__ = data
+
+        // 兼容曝光事件
+        if (data.expose !== false) {
+          el.setAttribute('exposure-event', data.name)
+          el.setAttribute(
+            'extend_attr',
+            JSON.stringify(Track.prepareData(data))
+          )
+          if (data.value !== null) {
+            el.setAttribute('alt', data.value)
+          }
+        }
+
+        const shouldListen = !el.dataset.track
+        if (shouldListen) {
+          el.dataset.track = '1'
+          el.__track_dispose__ = bindEvent(el)(
+            'click',
+            () => {
+              console.log(`埋点：点击「${data.name}」`)
+              Track.pushEvent({
+                type: 'click',
+                ...el.__track_data__,
+                value: el.innerText.trim().replace(/\s+/g, '')
+              })
+            },
+            {
+              // 必须使用捕获模式以在其他事件触发前处理（比如其他事件触发了页面跳转，就会导致问题）
+              capture: true,
+              // 使用被动模式告诉浏览器这不会产生阻塞行为
+              passive: true
+            }
+          )
+        }
+      }
+    }
+
+    function disposeTrack(el) {
+      // 需延时一下，不然当遇到点击跳转时页面卸载把事件也卸载了就触发不了了
+      setTimeout(() => {
+        delete el.__track_data__
+        el.__track_dispose__?.()
+        delete el.__track_dispose__
+      }, 0)
+    }
+
+    app.directive('track', {
+      mounted: applyTrack,
+      updated: applyTrack,
+      beforeUpdate: applyTrack,
+      unmounted: disposeTrack
+    })
+    console.log(1)
+  }
+}
+export default Track

src/common/ajax.js

@@ -0,0 +1,131 @@
+import axios from 'axios'
+import {
+  md5Hash,
+  rsaEncrypt,
+  rsaDecrypt,
+  aesEncrypt,
+  aesDecrypt,
+  generateUUID,
+  dataSign,
+  generateRandomString,
+  getLocalStorage
+} from '@dcb/utils'
+
+const encryptionOff = Number(import.meta.env.VITE_ENCRYPTION)
+const env = import.meta.env.VITE_ENV === 'development'
+const STORE_OFF = Number(import.meta.env.VITE_STORE_OFF)
+const RSA = import.meta.env.VITE_APP_RSA
+const DATA_RSA = STORE_OFF ? import.meta.env.VITE_DATA_RSA : RSA
+const martId = import.meta.env.VITE_MART_ID
+const appKey = import.meta.env.VITE_KEY
+const appSecret = import.meta.env.VITE_SECRET
+
+const request = async (method, url, data, config = {}) => {
+  const p = env ? import.meta.env.VITE_P : decodeURI(getLocalStorage('p'))
+  const options = Object.assign({}, config, {
+    url,
+    method
+  })
+
+  console.log('入参', data)
+
+  const uuid = generateUUID()
+  const secret = '4RBA7^@0$@KM$5D2333'
+  const title = md5Hash(uuid + secret)
+  const aesKey = generateRandomString(16) // 生成16位随机数
+
+  const init = rsaEncrypt(aesKey, RSA)
+  const base = aesEncrypt(JSON.stringify(data), aesKey)
+
+  options.data = options.data || {}
+
+  /*
+   * @ 验签
+   * @wiki: http://wiki.gogpay.cn/pages/viewpage.action?pageId=75301563
+   * */
+  url = url.replace(/^https?:\/\/.+?\/([^/]+)/, '')
+
+  const timestamp = Date.now()
+  let asHex = ''
+  const header = Object.assign(
+    { clientId: '03' },
+    STORE_OFF ? { martId, path: url, timestamp } : { path: url, timestamp }
+  )
+
+  for (const [key, value] of Object.entries(header)) {
+    asHex += key + value
+  }
+
+  // console.log(asHex + appSecret)
+  const sign = dataSign(header, appSecret)
+
+  if (method === 'post') {
+    if (!config.white && encryptionOff) {
+      options.data = {
+        timestamp: uuid,
+        title,
+        init,
+        base
+      }
+    } else {
+      options.data = data
+    }
+  }
+
+  options.headers = Object.assign({}, options.headers, header, {
+    sign,
+    appKey,
+    p
+  })
+
+  console.log(options.headers, STORE_OFF)
+
+  return new Promise((resolve, reject) => {
+    axios
+      .request(options)
+      .then((res) => {
+        let { data } = res
+
+        if (!data) {
+          return resolve(data)
+        }
+
+        if (method === 'post' && encryptionOff && !config.white) {
+          data = JSON.parse(
+            aesDecrypt(data.base, rsaDecrypt(data.init, DATA_RSA))
+          )
+        }
+
+        console.log('返回值', data)
+        resolve(data)
+      })
+      .catch((res) => {
+        reject(res)
+      })
+  })
+}
+
+export const ajax = {
+  request,
+  get(url, config) {
+    return request('get', url, null, config)
+  },
+  delete(url, config) {
+    return request('delete', url, null, config)
+  },
+  head(url, config) {
+    return request('head', url, null, config)
+  },
+  post(url, data, config) {
+    return request('post', url, data, config)
+  },
+  put(url, data, config) {
+    return request('put', url, data, config)
+  },
+  patch(url, data, config) {
+    return request('path', url, data, config)
+  },
+  setCommonHeader(key, value) {
+    window.axios.defaults.headers.common[key] = value
+  }
+}

src/common/dcb.ajax.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-process-env */
+import { initAjax } from '@dcb/ajax'
+const debug = import.meta.env.VITE_ENV
+const RSA = import.meta.env.VITE_APP_RSA
+const appid = import.meta.env.VITE_APP_ID
+const BASE_API = import.meta.env.VITE_BASE_API
+const encryptionOff = import.meta.env.VITE_ENCRYPTION
+
+export const useAjax = function () {
+  const ajax = initAjax(true)
+  const options = { RSA, appid, BASE_API, encryptionOff, debug }
+
+  ajax.config(options)
+
+  return ajax
+}

src/common/flexible.js

@@ -0,0 +1,50 @@
+// ref: https://github.com/amfe/lib-flexible/blob/2.0/index.js
+;(function flexible(window, document) {
+  const docEl = document.documentElement
+  const dpr = window.devicePixelRatio || 1
+
+  // adjust body font size
+  const setBodyFontSize = () => {
+    if (document.body) {
+      document.body.style.fontSize = `${12 * dpr}px`
+    } else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+
+  setBodyFontSize()
+
+  // set 1rem = viewWidth / 10
+  const setRemUnit = () => {
+    const rem =
+      Math.min(
+        // 宽度限制在 500 内
+        500,
+        docEl.clientWidth
+      ) / 10
+    docEl.style.fontSize = `${rem}px`
+  }
+
+  setRemUnit()
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit)
+  window.addEventListener('pageshow', (e) => {
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    const fakeBody = document.createElement('body')
+    const testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+})(window, document)

src/common/index.js

@@ -0,0 +1,3 @@
+import { ajax } from './ajax'
+
+export { ajax }