@tzk-design-vue2/shared 1.0.0

package/utils/dom.js

@@ -0,0 +1,134 @@
+/**
+ * DOM 操作工具函数
+ * 主要用于 H5 环境,小程序环境使用 uni API
+ */
+
+/**
+ * 获取元素信息
+ * @param {string} selector - 选择器
+ * @param {Object} context - 上下文 (Vue 组件实例)
+ * @returns {Promise<Object>}
+ */
+export function getRect(selector, context) {
+  return new Promise(resolve => {
+    // #ifdef H5
+    const el = document.querySelector(selector);
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      resolve(rect);
+    } else {
+      resolve(null);
+    }
+    // #endif
+
+    // #ifndef H5
+    uni
+      .createSelectorQuery()
+      .in(context)
+      .select(selector)
+      .boundingClientRect(rect => {
+        resolve(rect);
+      })
+      .exec();
+    // #endif
+  });
+}
+
+/**
+ * 获取所有元素信息
+ * @param {string} selector - 选择器
+ * @param {Object} context - 上下文 (Vue 组件实例)
+ * @returns {Promise<Array>}
+ */
+export function getAllRect(selector, context) {
+  return new Promise(resolve => {
+    // #ifdef H5
+    const elements = document.querySelectorAll(selector);
+    const rects = Array.from(elements).map(el => el.getBoundingClientRect());
+    resolve(rects);
+    // #endif
+
+    // #ifndef H5
+    uni
+      .createSelectorQuery()
+      .in(context)
+      .selectAll(selector)
+      .boundingClientRect(rects => {
+        resolve(rects || []);
+      })
+      .exec();
+    // #endif
+  });
+}
+
+/**
+ * 获取滚动位置
+ * @returns {Promise<Object>}
+ */
+export function getScrollOffset() {
+  return new Promise(resolve => {
+    // #ifdef H5
+    resolve({
+      scrollLeft: window.pageXOffset || document.documentElement.scrollLeft,
+      scrollTop: window.pageYOffset || document.documentElement.scrollTop
+    });
+    // #endif
+
+    // #ifndef H5
+    uni
+      .createSelectorQuery()
+      .selectViewport()
+      .scrollOffset(res => {
+        resolve(res);
+      })
+      .exec();
+    // #endif
+  });
+}
+
+/**
+ * 滚动到指定位置
+ * @param {number} scrollTop - 滚动位置
+ * @param {number} duration - 动画时长
+ */
+export function scrollTo(scrollTop, duration = 300) {
+  // #ifdef H5
+  window.scrollTo({
+    top: scrollTop,
+    behavior: duration > 0 ? 'smooth' : 'auto'
+  });
+  // #endif
+
+  // #ifndef H5
+  uni.pageScrollTo({
+    scrollTop,
+    duration
+  });
+  // #endif
+}
+
+/**
+ * 锁定滚动
+ */
+let scrollTop = 0;
+
+export function lockScroll() {
+  // #ifdef H5
+  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  document.body.style.position = 'fixed';
+  document.body.style.top = `-${scrollTop}px`;
+  document.body.style.width = '100%';
+  // #endif
+}
+
+/**
+ * 解锁滚动
+ */
+export function unlockScroll() {
+  // #ifdef H5
+  document.body.style.position = '';
+  document.body.style.top = '';
+  document.body.style.width = '';
+  window.scrollTo(0, scrollTop);
+  // #endif
+}

package/utils/error-handler.js

@@ -0,0 +1,191 @@
+/**
+ * 全局错误处理器
+ */
+
+import errorConfig from '../config/error';
+import { warn } from './warn';
+
+/**
+ * 错误类型
+ */
+export const ErrorType = {
+  COMPONENT: 'component',
+  NETWORK: 'network',
+  BUSINESS: 'business',
+  UNKNOWN: 'unknown'
+};
+
+/**
+ * 错误日志存储
+ */
+const errorLogs = [];
+
+/**
+ * 处理错误
+ * @param {Error} err - 错误对象
+ * @param {Object} vm - Vue 实例
+ * @param {string} info - 错误信息
+ */
+export function handleError(err, vm, info) {
+  const errorLog = {
+    type: ErrorType.COMPONENT,
+    error: err,
+    vm,
+    info,
+    timestamp: new Date().toISOString()
+  };
+
+  // 添加到错误日志
+  errorLogs.push(errorLog);
+
+  // 开发环境打印错误
+  if (process.env.NODE_ENV === 'development') {
+    console.error('[TZK Error]', err);
+    console.error('[TZK Error Info]', info);
+    console.error('[TZK Error VM]', vm);
+  }
+
+  // 错误上报
+  if (errorConfig.enableReport && shouldReport(errorLog)) {
+    reportError(errorLog);
+  }
+}
+
+/**
+ * 处理网络错误
+ * @param {Error} err - 错误对象
+ */
+export function handleNetworkError(err) {
+  const errorLog = {
+    type: ErrorType.NETWORK,
+    error: err,
+    timestamp: new Date().toISOString()
+  };
+
+  errorLogs.push(errorLog);
+
+  if (process.env.NODE_ENV === 'development') {
+    console.error('[TZK Network Error]', err);
+  }
+
+  if (errorConfig.enableReport && shouldReport(errorLog)) {
+    reportError(errorLog);
+  }
+}
+
+/**
+ * 处理业务错误
+ * @param {Error} err - 错误对象
+ * @param {Object} context - 上下文
+ */
+export function handleBusinessError(err, context) {
+  const errorLog = {
+    type: ErrorType.BUSINESS,
+    error: err,
+    context,
+    timestamp: new Date().toISOString()
+  };
+
+  errorLogs.push(errorLog);
+
+  if (process.env.NODE_ENV === 'development') {
+    console.error('[TZK Business Error]', err);
+    console.error('[TZK Business Context]', context);
+  }
+
+  if (errorConfig.enableReport && shouldReport(errorLog)) {
+    reportError(errorLog);
+  }
+}
+
+/**
+ * 判断是否应该上报
+ * @param {Object} errorLog - 错误日志
+ * @returns {boolean}
+ */
+function shouldReport(errorLog) {
+  // 过滤规则
+  if (errorConfig.filterRules && errorConfig.filterRules.length > 0) {
+    const shouldFilter = errorConfig.filterRules.some(rule => {
+      if (typeof rule === 'function') {
+        return rule(errorLog);
+      }
+      return false;
+    });
+
+    if (shouldFilter) return false;
+  }
+
+  // 采样率
+  if (errorConfig.sampleRate < 1) {
+    return Math.random() < errorConfig.sampleRate;
+  }
+
+  return true;
+}
+
+/**
+ * 上报错误
+ * @param {Object} errorLog - 错误日志
+ */
+function reportError(errorLog) {
+  if (!errorConfig.reportUrl) {
+    warn('Error report URL is not configured');
+    return;
+  }
+
+  // 构建上报数据
+  const reportData = {
+    type: errorLog.type,
+    message: errorLog.error.message,
+    stack: errorLog.error.stack,
+    info: errorLog.info,
+    timestamp: errorLog.timestamp,
+    userAgent: navigator.userAgent || '',
+    url: window.location?.href || ''
+  };
+
+  // 发送上报请求
+  try {
+    // #ifdef H5
+    fetch(errorConfig.reportUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(reportData)
+    }).catch(err => {
+      console.error('[TZK Error Report Failed]', err);
+    });
+    // #endif
+
+    // #ifndef H5
+    uni.request({
+      url: errorConfig.reportUrl,
+      method: 'POST',
+      data: reportData,
+      fail: err => {
+        console.error('[TZK Error Report Failed]', err);
+      }
+    });
+    // #endif
+  } catch (err) {
+    console.error('[TZK Error Report Exception]', err);
+  }
+}
+
+/**
+ * 获取错误日志
+ * @param {number} limit - 限制数量
+ * @returns {Array}
+ */
+export function getErrorLogs(limit = 100) {
+  return errorLogs.slice(-limit);
+}
+
+/**
+ * 清空错误日志
+ */
+export function clearErrorLogs() {
+  errorLogs.length = 0;
+}

package/utils/format.js

@@ -0,0 +1,127 @@
+/**
+ * 格式化工具函数
+ */
+
+/**
+ * 数字格式化
+ * @param {number} num - 数字
+ * @param {number} precision - 精度
+ * @returns {string}
+ */
+export function formatNumber(num, precision = 2) {
+  if (typeof num !== 'number' || isNaN(num)) return '0';
+  return num.toFixed(precision);
+}
+
+/**
+ * 千分位格式化
+ * @param {number} num - 数字
+ * @returns {string}
+ */
+export function formatThousands(num) {
+  if (typeof num !== 'number' || isNaN(num)) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+/**
+ * 金额格式化
+ * @param {number} amount - 金额
+ * @param {number} precision - 精度
+ * @param {string} symbol - 货币符号
+ * @returns {string}
+ */
+export function formatMoney(amount, precision = 2, symbol = '¥') {
+  if (typeof amount !== 'number' || isNaN(amount)) return `${symbol}0.00`;
+  const formatted = formatThousands(amount.toFixed(precision));
+  return `${symbol}${formatted}`;
+}
+
+/**
+ * 日期格式化
+ * @param {Date|string|number} date - 日期
+ * @param {string} format - 格式 (YYYY-MM-DD HH:mm:ss)
+ * @returns {string}
+ */
+export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return '';
+
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hour = String(d.getHours()).padStart(2, '0');
+  const minute = String(d.getMinutes()).padStart(2, '0');
+  const second = String(d.getSeconds()).padStart(2, '0');
+
+  return format
+    .replace('YYYY', year)
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hour)
+    .replace('mm', minute)
+    .replace('ss', second);
+}
+
+/**
+ * 相对时间格式化
+ * @param {Date|string|number} date - 日期
+ * @returns {string}
+ */
+export function formatRelativeTime(date) {
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return '';
+
+  const now = new Date();
+  const diff = now.getTime() - d.getTime();
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) return '刚刚';
+  if (minutes < 60) return `${minutes}分钟前`;
+  if (hours < 24) return `${hours}小时前`;
+  if (days < 7) return `${days}天前`;
+  return formatDate(date, 'YYYY-MM-DD');
+}
+
+/**
+ * 文件大小格式化
+ * @param {number} bytes - 字节数
+ * @param {number} precision - 精度
+ * @returns {string}
+ */
+export function formatFileSize(bytes, precision = 2) {
+  if (typeof bytes !== 'number' || bytes < 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let index = 0;
+  let size = bytes;
+
+  while (size >= 1024 && index < units.length - 1) {
+    size /= 1024;
+    index++;
+  }
+
+  return `${size.toFixed(precision)} ${units[index]}`;
+}
+
+/**
+ * 手机号格式化 (中间4位隐藏)
+ * @param {string} phone - 手机号
+ * @returns {string}
+ */
+export function formatPhone(phone) {
+  if (!phone || typeof phone !== 'string') return '';
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+}
+
+/**
+ * 身份证号格式化 (中间部分隐藏)
+ * @param {string} idCard - 身份证号
+ * @returns {string}
+ */
+export function formatIdCard(idCard) {
+  if (!idCard || typeof idCard !== 'string') return '';
+  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2');
+}

package/utils/performance.js

@@ -0,0 +1,137 @@
+/**
+ * 性能优化工具函数
+ */
+
+/**
+ * 防抖函数
+ * @param {Function} func - 需要防抖的函数
+ * @param {number} wait - 等待时间(ms)
+ * @param {boolean} immediate - 是否立即执行
+ * @returns {Function}
+ */
+export function debounce(func, wait = 300, immediate = false) {
+  let timeout;
+
+  return function (...args) {
+    const context = this;
+
+    const later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+
+    const callNow = immediate && !timeout;
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+
+    if (callNow) func.apply(context, args);
+  };
+}
+
+/**
+ * 节流函数
+ * @param {Function} func - 需要节流的函数
+ * @param {number} wait - 等待时间(ms)
+ * @param {Object} options - 配置项
+ * @param {boolean} options.leading - 是否在开始时执行
+ * @param {boolean} options.trailing - 是否在结束时执行
+ * @returns {Function}
+ */
+export function throttle(func, wait = 300, options = {}) {
+  let timeout;
+  let previous = 0;
+  const { leading = true, trailing = true } = options;
+
+  return function (...args) {
+    const context = this;
+    const now = Date.now();
+
+    if (!previous && !leading) previous = now;
+
+    const remaining = wait - (now - previous);
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      func.apply(context, args);
+    } else if (!timeout && trailing) {
+      timeout = setTimeout(() => {
+        previous = leading ? Date.now() : 0;
+        timeout = null;
+        func.apply(context, args);
+      }, remaining);
+    }
+  };
+}
+
+/**
+ * 请求动画帧节流
+ * @param {Function} func - 需要节流的函数
+ * @returns {Function}
+ */
+export function rafThrottle(func) {
+  let rafId = null;
+
+  return function (...args) {
+    const context = this;
+
+    if (rafId) return;
+
+    rafId = requestAnimationFrame(() => {
+      func.apply(context, args);
+      rafId = null;
+    });
+  };
+}
+
+/**
+ * 延迟执行
+ * @param {number} ms - 延迟时间(ms)
+ * @returns {Promise}
+ */
+export function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * 函数缓存
+ * @param {Function} func - 需要缓存的函数
+ * @returns {Function}
+ */
+export function memoize(func) {
+  const cache = new Map();
+
+  return function (...args) {
+    const key = JSON.stringify(args);
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+
+    const result = func.apply(this, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+/**
+ * 函数只执行一次
+ * @param {Function} func - 需要执行的函数
+ * @returns {Function}
+ */
+export function once(func) {
+  let called = false;
+  let result;
+
+  return function (...args) {
+    if (!called) {
+      called = true;
+      result = func.apply(this, args);
+    }
+    return result;
+  };
+}