@tzk-design-vue2/shared 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# @tzk-design-vue2/shared
+
+共享资源包 - TZK Design Vue2 组件库
+
+## 说明
+
+这是 TZK Design Vue2 组件库的共享资源包,包含:
+
+- 🎨 通用样式变量
+- 🛠️ 工具函数
+- 📦 公共类型定义
+- 🔧 辅助方法
+
+## 安装
+
+```bash
+npm install @tzk-design-vue2/shared
+# 或
+yarn add @tzk-design-vue2/shared
+# 或
+pnpm add @tzk-design-vue2/shared
+```
+
+## 使用
+
+### 样式变量
+
+```less
+// 在你的 Less 文件中导入
+@import '@tzk-design-vue2/shared/styles/variables.less';
+
+.my-component {
+  color: @primary-color;
+  border-radius: @border-radius-base;
+}
+```
+
+### 工具函数
+
+```javascript
+import { utils } from '@tzk-design-vue2/shared';
+
+// 使用工具函数
+const result = utils.someFunction();
+```
+
+## 内容
+
+### 样式资源
+
+- `styles/variables.less` - Less 变量
+- `styles/mixins.less` - Less 混入
+- `styles/common.less` - 通用样式
+
+### 工具函数
+
+- 类型判断
+- 数据处理
+- DOM 操作
+- 其他辅助函数
+
+## 注意事项
+
+> [!IMPORTANT]
+> 此包通常作为其他组件包的依赖使用,一般不需要单独安装。
+> 如果使用完整的 `@tzk-design-vue2/ui` 包,会自动包含此依赖。
+
+## 开源协议
+
+MIT

package/adapters/api.js

@@ -0,0 +1,234 @@
+/**
+ * API 适配器
+ * 统一不同平台的 API 差异
+ */
+
+/**
+ * 显示 Toast
+ * @param {Object} options - 配置项
+ */
+export function showToast(options) {
+  const { title, icon = 'none', duration = 2000, mask = false } = options;
+
+  // #ifdef MP-WEIXIN
+  wx.showToast({ title, icon, duration, mask });
+  // #endif
+
+  // #ifdef MP-ALIPAY
+  my.showToast({ content: title, type: icon, duration, mask });
+  // #endif
+
+  // #ifndef MP-WEIXIN || MP-ALIPAY
+  uni.showToast({ title, icon, duration, mask });
+  // #endif
+}
+
+/**
+ * 显示 Loading
+ * @param {Object} options - 配置项
+ */
+export function showLoading(options) {
+  const { title = '加载中...', mask = true } = options;
+
+  // #ifdef MP-WEIXIN
+  wx.showLoading({ title, mask });
+  // #endif
+
+  // #ifdef MP-ALIPAY
+  my.showLoading({ content: title, delay: 0 });
+  // #endif
+
+  // #ifndef MP-WEIXIN || MP-ALIPAY
+  uni.showLoading({ title, mask });
+  // #endif
+}
+
+/**
+ * 隐藏 Loading
+ */
+export function hideLoading() {
+  // #ifdef MP-WEIXIN
+  wx.hideLoading();
+  // #endif
+
+  // #ifdef MP-ALIPAY
+  my.hideLoading();
+  // #endif
+
+  // #ifndef MP-WEIXIN || MP-ALIPAY
+  uni.hideLoading();
+  // #endif
+}
+
+/**
+ * 显示模态对话框
+ * @param {Object} options - 配置项
+ * @returns {Promise}
+ */
+export function showModal(options) {
+  const {
+    title = '提示',
+    content = '',
+    showCancel = true,
+    cancelText = '取消',
+    confirmText = '确定'
+  } = options;
+
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    wx.showModal({
+      title,
+      content,
+      showCancel,
+      cancelText,
+      confirmText,
+      success: res => resolve(res),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    my.confirm({
+      title,
+      content,
+      confirmButtonText: confirmText,
+      cancelButtonText: cancelText,
+      success: res => resolve({ confirm: res.confirm }),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifndef MP-WEIXIN || MP-ALIPAY
+    uni.showModal({
+      title,
+      content,
+      showCancel,
+      cancelText,
+      confirmText,
+      success: res => resolve(res),
+      fail: err => reject(err)
+    });
+    // #endif
+  });
+}
+
+/**
+ * 设置导航栏标题
+ * @param {string} title - 标题
+ */
+export function setNavigationBarTitle(title) {
+  // #ifdef MP-WEIXIN
+  wx.setNavigationBarTitle({ title });
+  // #endif
+
+  // #ifdef MP-ALIPAY
+  my.setNavigationBar({ title });
+  // #endif
+
+  // #ifndef MP-WEIXIN || MP-ALIPAY
+  uni.setNavigationBarTitle({ title });
+  // #endif
+}
+
+/**
+ * 获取存储数据
+ * @param {string} key - 键名
+ * @returns {Promise}
+ */
+export function getStorage(key) {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    wx.getStorage({
+      key,
+      success: res => resolve(res.data),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    my.getStorage({
+      key,
+      success: res => resolve(res.data),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifndef MP-WEIXIN || MP-ALIPAY
+    uni.getStorage({
+      key,
+      success: res => resolve(res.data),
+      fail: err => reject(err)
+    });
+    // #endif
+  });
+}
+
+/**
+ * 设置存储数据
+ * @param {string} key - 键名
+ * @param {*} data - 数据
+ * @returns {Promise}
+ */
+export function setStorage(key, data) {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    wx.setStorage({
+      key,
+      data,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    my.setStorage({
+      key,
+      data,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifndef MP-WEIXIN || MP-ALIPAY
+    uni.setStorage({
+      key,
+      data,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+  });
+}
+
+/**
+ * 移除存储数据
+ * @param {string} key - 键名
+ * @returns {Promise}
+ */
+export function removeStorage(key) {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    wx.removeStorage({
+      key,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    my.removeStorage({
+      key,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+
+    // #ifndef MP-WEIXIN || MP-ALIPAY
+    uni.removeStorage({
+      key,
+      success: () => resolve(),
+      fail: err => reject(err)
+    });
+    // #endif
+  });
+}

package/adapters/event.js

@@ -0,0 +1,86 @@
+/**
+ * 事件适配器
+ * 统一不同平台的事件处理
+ */
+
+/**
+ * 获取事件详情
+ * @param {Event} event - 事件对象
+ * @returns {Object}
+ */
+export function getEventDetail(event) {
+  if (!event) return {};
+
+  // 微信小程序
+  if (event.detail) {
+    return event.detail;
+  }
+
+  // 支付宝小程序
+  if (event.target && event.target.dataset) {
+    return event.target.dataset;
+  }
+
+  return {};
+}
+
+/**
+ * 阻止事件冒泡
+ * @param {Event} event - 事件对象
+ */
+export function stopPropagation(event) {
+  if (!event) return;
+
+  if (event.stopPropagation) {
+    event.stopPropagation();
+  }
+
+  // 小程序
+  if (event.detail && event.detail.stopPropagation) {
+    event.detail.stopPropagation();
+  }
+}
+
+/**
+ * 阻止默认行为
+ * @param {Event} event - 事件对象
+ */
+export function preventDefault(event) {
+  if (!event) return;
+
+  if (event.preventDefault) {
+    event.preventDefault();
+  }
+
+  // 小程序
+  if (event.detail && event.detail.preventDefault) {
+    event.detail.preventDefault();
+  }
+}
+
+/**
+ * 获取触摸点坐标
+ * @param {Event} event - 事件对象
+ * @returns {Object}
+ */
+export function getTouchPoint(event) {
+  if (!event) return { x: 0, y: 0 };
+
+  // H5
+  if (event.touches && event.touches[0]) {
+    return {
+      x: event.touches[0].clientX,
+      y: event.touches[0].clientY
+    };
+  }
+
+  // 小程序
+  if (event.changedTouches && event.changedTouches[0]) {
+    return {
+      x: event.changedTouches[0].x || event.changedTouches[0].clientX,
+      y: event.changedTouches[0].y || event.changedTouches[0].clientY
+    };
+  }
+
+  return { x: 0, y: 0 };
+}

package/adapters/style.js

@@ -0,0 +1,89 @@
+/**
+ * 样式适配器
+ */
+
+import { getSystemInfo } from '../utils/platform';
+
+/**
+ * 添加单位
+ * @param {number|string} value - 值
+ * @param {string} unit - 单位
+ * @returns {string}
+ */
+export function addUnit(value, unit = 'rpx') {
+  if (value === undefined || value === null || value === '') {
+    return '';
+  }
+
+  if (typeof value === 'number') {
+    return `${value}${unit}`;
+  }
+
+  if (typeof value === 'string') {
+    // 如果已经有单位,直接返回
+    if (/^\d+(\.\d+)?(px|rpx|rem|em|%|vh|vw)$/.test(value)) {
+      return value;
+    }
+    // 如果是纯数字字符串,添加单位
+    if (/^\d+(\.\d+)?$/.test(value)) {
+      return `${value}${unit}`;
+    }
+  }
+
+  return value;
+}
+
+/**
+ * 获取样式对象
+ * @param {Object} styles - 样式对象
+ * @returns {string}
+ */
+export function getStyle(styles) {
+  if (!styles || typeof styles !== 'object') {
+    return '';
+  }
+
+  return Object.keys(styles)
+    .map(key => {
+      const value = styles[key];
+      const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      return `${cssKey}: ${value}`;
+    })
+    .join('; ');
+}
+
+/**
+ * 获取安全区域
+ * @returns {Object}
+ */
+export function getSafeArea() {
+  const systemInfo = getSystemInfo();
+  const { safeArea, safeAreaInsets, screenHeight, statusBarHeight } = systemInfo;
+
+  // 支付宝小程序
+  if (safeAreaInsets) {
+    return {
+      top: safeAreaInsets.top || 0,
+      bottom: safeAreaInsets.bottom || 0,
+      left: safeAreaInsets.left || 0,
+      right: safeAreaInsets.right || 0
+    };
+  }
+
+  // 微信小程序
+  if (safeArea) {
+    return {
+      top: safeArea.top || statusBarHeight || 0,
+      bottom: screenHeight - safeArea.bottom || 0,
+      left: safeArea.left || 0,
+      right: safeArea.right || 0
+    };
+  }
+
+  return {
+    top: statusBarHeight || 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  };
+}

package/config/error.js

@@ -0,0 +1,36 @@
+/**
+ * 错误处理配置
+ */
+
+export default {
+  // 是否启用错误上报
+  enableReport: false,
+
+  // 错误上报地址
+  reportUrl: '',
+
+  // 错误过滤规则
+  filterRules: [
+    // 示例:过滤特定错误
+    // errorLog => errorLog.error.message.includes('Script error')
+  ],
+
+  // 错误采样率 (0-1)
+  sampleRate: 1,
+
+  // 开发环境行为
+  development: {
+    // 显示错误详情
+    showErrorDetail: true,
+    // 显示错误提示组件
+    showErrorBoundary: true
+  },
+
+  // 生产环境行为
+  production: {
+    // 显示错误详情
+    showErrorDetail: false,
+    // 显示错误提示组件
+    showErrorBoundary: true
+  }
+};

package/index.js

@@ -0,0 +1,32 @@
+/**
+ * 共享资源包入口文件
+ */
+
+// 样式
+import './styles/index.less';
+
+// 工具函数
+export * from './utils/type';
+export * from './utils/format';
+export * from './utils/performance';
+export * from './utils/dom';
+export * from './utils/platform';
+export * from './utils/error-handler';
+export * from './utils/warn';
+
+// Mixins
+export { default as componentMixin } from './mixins/component';
+export { default as eventMixin } from './mixins/event';
+export { default as formMixin } from './mixins/form';
+export { default as errorBoundaryMixin } from './mixins/error-boundary';
+
+// 适配器
+export * from './adapters/api';
+export * from './adapters/style';
+export * from './adapters/event';
+
+// Store
+export { default as store } from './store';
+
+// 配置
+export { default as errorConfig } from './config/error';

package/mixins/component.js

@@ -0,0 +1,44 @@
+/**
+ * 组件基础 Mixin
+ */
+
+export default {
+  data() {
+    return {
+      // 组件名称前缀
+      componentPrefix: 'tzk'
+    };
+  },
+
+  methods: {
+    /**
+     * 生成 BEM 类名
+     * @param {string} block - 块名
+     * @param {string} element - 元素名
+     * @param {string} modifier - 修饰符
+     * @returns {string}
+     */
+    bem(block, element, modifier) {
+      let className = `${this.componentPrefix}-${block}`;
+
+      if (element) {
+        className += `__${element}`;
+      }
+
+      if (modifier) {
+        className += `--${modifier}`;
+      }
+
+      return className;
+    },
+
+    /**
+     * 触发自定义事件
+     * @param {string} eventName - 事件名
+     * @param {*} detail - 事件数据
+     */
+    emitEvent(eventName, detail) {
+      this.$emit(eventName, detail);
+    }
+  }
+};

package/mixins/error-boundary.js

@@ -0,0 +1,15 @@
+/**
+ * 错误边界 Mixin
+ */
+
+import { handleError } from '../utils/error-handler';
+
+export default {
+  errorCaptured(err, vm, info) {
+    // 捕获子组件错误
+    handleError(err, vm, info);
+
+    // 阻止错误继续向上传播
+    return false;
+  }
+};

package/mixins/event.js

@@ -0,0 +1,44 @@
+/**
+ * 事件处理 Mixin
+ */
+
+export default {
+  methods: {
+    /**
+     * 绑定事件
+     * @param {string} event - 事件名
+     * @param {Function} handler - 事件处理函数
+     * @param {Object} options - 事件选项
+     */
+    bindEvent(event, handler, options = {}) {
+      if (!this._eventHandlers) {
+        this._eventHandlers = new Map();
+      }
+
+      this._eventHandlers.set(event, { handler, options });
+    },
+
+    /**
+     * 解绑事件
+     * @param {string} event - 事件名
+     */
+    unbindEvent(event) {
+      if (this._eventHandlers) {
+        this._eventHandlers.delete(event);
+      }
+    },
+
+    /**
+     * 解绑所有事件
+     */
+    unbindAllEvents() {
+      if (this._eventHandlers) {
+        this._eventHandlers.clear();
+      }
+    }
+  },
+
+  beforeDestroy() {
+    this.unbindAllEvents();
+  }
+};