feat: 增强组件功能与样式优化

- 在多个组件中添加了新的属性和方法以提升功能性，如在卡片组件中引入 _ActiveTab 属性以管理活动标签。
- 优化了商品详情和商户页面的收藏逻辑，确保在未登录状态下引导用户登录。
- 更新了轮播组件的路由解析逻辑，增强了用户体验。
- 改进了投诉列表和收藏列表的样式，提升了响应式布局和可读性。
- 在全局配置中添加了对开发环境的错误处理，提升了调试体验。

seller/src/views/shop/hotzone/directives/addItem.js

@@ -1,34 +1,31 @@
 import _ from '../utils'
 
 export default {
-  bind: function (el, binding, vnode) {
-    const MIN_LIMIT = _.MIN_LIMIT
+  mounted(el, binding) {
+    const handleMouseDown = (e) => {
+      const ctx = binding.instance
+      if (!ctx) return
 
-    el.addEventListener('mousedown', handleMouseDown, { passive: false })
-
-    function handleMouseDown(e) {
-      // console.log('additem', e)
       e && e.preventDefault()
 
       let itemInfo = {
         top: _.getDistanceY(e, el),
         left: _.getDistanceX(e, el),
         width: 0,
-        height: 0
+        height: 0,
       }
-      let container = _.getOffset(el)
+      const container = _.getOffset(el)
 
-      // Only used once at the beginning of init
-      let setting = {
+      const setting = {
         topPer: _.decimalPoint(itemInfo.top / container.height),
         leftPer: _.decimalPoint(itemInfo.left / container.width),
         widthPer: 0,
-        heightPer: 0
+        heightPer: 0,
       }
       let preX = _.getPageX(e)
       let preY = _.getPageY(e)
 
-      vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知
+      ctx.addItem(setting)
 
       window.addEventListener('mousemove', handleChange, { passive: false })
       window.addEventListener('mouseup', handleMouseUp, { passive: false })
@@ -36,56 +33,58 @@ export default {
       function handleChange(e) {
         e && e.preventDefault()
 
-        let moveX = _.getPageX(e) - preX
-        let moveY = _.getPageY(e) - preY
+        const moveX = _.getPageX(e) - preX
+        const moveY = _.getPageY(e) - preY
         preX = _.getPageX(e)
         preY = _.getPageY(e)
 
-        // Not consider the direction of movement first, consider only the lower right drag point
-        let minLimit = 0
-        // 添加热区时，判定鼠标释放时，满足（热区大于48*48时）条件时生效
-        let styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
+        const minLimit = 0
+        const styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
 
-        // Boundary value processing 改变热区大小时边界条件的处理
-        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.zones)
+        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, ctx.zones)
 
         Object.assign(el.lastElementChild.style, {
           top: `${itemInfo.top}px`,
           left: `${itemInfo.left}px`,
           width: `${itemInfo.width}px`,
-          height: `${itemInfo.height}px`
+          height: `${itemInfo.height}px`,
         })
       }
 
       function handleMouseUp() {
-        let perInfo = {
+        const perInfo = {
           topPer: _.decimalPoint(itemInfo.top / container.height),
           leftPer: _.decimalPoint(itemInfo.left / container.width),
           widthPer: _.decimalPoint(itemInfo.width / container.width),
           heightPer: _.decimalPoint(itemInfo.height / container.height),
-          img: "",
-          link: "",
-          type: "",
-          title: ""
+          img: '',
+          link: '',
+          type: '',
+          title: '',
         }
 
-        if (vnode.context.isOverRange()) {
-          vnode.context.overRange() // 判断超出个数限制，给overRange钩子抛回调
-        } else if (container.height < MIN_LIMIT && itemInfo.width > MIN_LIMIT) {
-          vnode.context.changeItem(Object.assign(perInfo, {
-            topPer: 0,
-            heightPer: 1
-          }), true)
-        } else if (container.width < MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
-          vnode.context.changeItem(Object.assign(perInfo, {
-            leftper: 0,
-            widthPer: 1
-          }), true)
-        } else if (itemInfo.width > MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
-          vnode.context.changeItem(perInfo, true)
+        if (ctx.isOverRange()) {
+          ctx.overRange()
+        } else if (container.height < _.MIN_LIMIT && itemInfo.width > _.MIN_LIMIT) {
+          ctx.changeItem(
+            Object.assign(perInfo, {
+              topPer: 0,
+              heightPer: 1,
+            }),
+            true
+          )
+        } else if (container.width < _.MIN_LIMIT && itemInfo.height > _.MIN_LIMIT) {
+          ctx.changeItem(
+            Object.assign(perInfo, {
+              leftper: 0,
+              widthPer: 1,
+            }),
+            true
+          )
+        } else if (itemInfo.width > _.MIN_LIMIT && itemInfo.height > _.MIN_LIMIT) {
+          ctx.changeItem(perInfo, true)
         } else {
-          // 当添加区域超出范围或小于最小区域（48*48）时触发，删除当亲绘制的热区并发送erase事件通知
-          vnode.context.eraseItem()
+          ctx.eraseItem()
         }
 
         window.removeEventListener('mousemove', handleChange)
@@ -93,9 +92,10 @@ export default {
       }
     }
 
-    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.__hotzoneAddDestroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.addEventListener('mousedown', handleMouseDown, { passive: false })
+  },
+  beforeUnmount(el) {
+    el.__hotzoneAddDestroy?.()
   },
-  unbind: function (el) {
-    el.$destroy()
-  }
 }