@tzk-design-vue2/shared 1.0.0

package/mixins/form.js

@@ -0,0 +1,81 @@
+/**
+ * 表单 Mixin
+ */
+
+export default {
+  props: {
+    // 表单值
+    value: {
+      type: [String, Number, Boolean, Array, Object],
+      default: ''
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否只读
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      // 内部值
+      innerValue: this.value,
+      // 是否聚焦
+      isFocused: false
+    };
+  },
+
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal;
+    },
+
+    innerValue(newVal) {
+      this.$emit('input', newVal);
+      this.$emit('change', newVal);
+    }
+  },
+
+  methods: {
+    /**
+     * 更新值
+     * @param {*} value - 新值
+     */
+    updateValue(value) {
+      this.innerValue = value;
+    },
+
+    /**
+     * 聚焦处理
+     * @param {Event} event - 事件对象
+     */
+    handleFocus(event) {
+      if (this.disabled || this.readonly) return;
+      this.isFocused = true;
+      this.$emit('focus', event);
+    },
+
+    /**
+     * 失焦处理
+     * @param {Event} event - 事件对象
+     */
+    handleBlur(event) {
+      if (this.disabled || this.readonly) return;
+      this.isFocused = false;
+      this.$emit('blur', event);
+    },
+
+    /**
+     * 清空值
+     */
+    clearValue() {
+      this.updateValue('');
+      this.$emit('clear');
+    }
+  }
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tzk-design-vue2/shared",
+  "version": "1.0.0",
+  "description": "TZK Design 共享资源包",
+  "main": "index.js",
+  "keywords": [
+    "vue",
+    "uniapp",
+    "shared",
+    "utils"
+  ],
+  "author": "TZK Design Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^2.7.14",
+    "vuex": "^3.6.2"
+  },
+  "dependencies": {
+    "vuex": "^3.6.2"
+  }
+}

package/store/index.js

@@ -0,0 +1,19 @@
+/**
+ * Vuex Store 入口
+ */
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import componentModule from './modules/component';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    component: componentModule
+  },
+
+  strict: process.env.NODE_ENV !== 'production'
+});
+
+export default store;

package/store/modules/component.js

@@ -0,0 +1,124 @@
+/**
+ * 组件通信 Store 模块
+ * 用于组件间状态共享和通信
+ */
+
+const state = {
+  // 全局配置
+  globalConfig: {},
+
+  // 组件状态映射
+  componentStates: {}
+};
+
+const mutations = {
+  /**
+   * 设置全局配置
+   * @param {Object} state - 状态
+   * @param {Object} config - 配置
+   */
+  SET_GLOBAL_CONFIG(state, config) {
+    state.globalConfig = { ...state.globalConfig, ...config };
+  },
+
+  /**
+   * 设置组件状态
+   * @param {Object} state - 状态
+   * @param {Object} payload - 载荷
+   */
+  SET_COMPONENT_STATE(state, { id, data }) {
+    state.componentStates = {
+      ...state.componentStates,
+      [id]: data
+    };
+  },
+
+  /**
+   * 移除组件状态
+   * @param {Object} state - 状态
+   * @param {string} id - 组件 ID
+   */
+  REMOVE_COMPONENT_STATE(state, id) {
+    const newStates = { ...state.componentStates };
+    delete newStates[id];
+    state.componentStates = newStates;
+  },
+
+  /**
+   * 清空所有组件状态
+   * @param {Object} state - 状态
+   */
+  CLEAR_COMPONENT_STATES(state) {
+    state.componentStates = {};
+  }
+};
+
+const actions = {
+  /**
+   * 更新全局配置
+   * @param {Object} context - 上下文
+   * @param {Object} config - 配置
+   */
+  updateGlobalConfig({ commit }, config) {
+    commit('SET_GLOBAL_CONFIG', config);
+  },
+
+  /**
+   * 更新组件状态
+   * @param {Object} context - 上下文
+   * @param {Object} payload - 载荷
+   */
+  updateComponentState({ commit }, payload) {
+    commit('SET_COMPONENT_STATE', payload);
+  },
+
+  /**
+   * 移除组件状态
+   * @param {Object} context - 上下文
+   * @param {string} id - 组件 ID
+   */
+  removeComponentState({ commit }, id) {
+    commit('REMOVE_COMPONENT_STATE', id);
+  },
+
+  /**
+   * 清空所有组件状态
+   * @param {Object} context - 上下文
+   */
+  clearComponentStates({ commit }) {
+    commit('CLEAR_COMPONENT_STATES');
+  }
+};
+
+const getters = {
+  /**
+   * 获取全局配置
+   * @param {Object} state - 状态
+   * @returns {Object}
+   */
+  globalConfig: state => state.globalConfig,
+
+  /**
+   * 获取组件状态
+   * @param {Object} state - 状态
+   * @returns {Function}
+   */
+  getComponentState: state => id => {
+    return state.componentStates[id] || null;
+  },
+
+  /**
+   * 获取所有组件状态
+   * @param {Object} state - 状态
+   * @returns {Object}
+   */
+  allComponentStates: state => state.componentStates
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+};

package/styles/index.css

@@ -0,0 +1,21 @@
+/**
+ * 样式入口文件
+ */
+/**
+ * 色彩系统 Token
+ * 参考 NutUI 设计规范
+ */
+/**
+ * 字体系统 Token
+ */
+/**
+ * 间距系统 Token
+ * 基础单位: 4px (8rpx)
+ */
+/**
+ * 通用变量 Token
+ */
+/**
+ * Less Mixins
+ * 常用样式混入
+ */

package/styles/index.less

@@ -0,0 +1,9 @@
+/**
+ * 样式入口文件
+ */
+
+@import './variables/color.less';
+@import './variables/typography.less';
+@import './variables/spacing.less';
+@import './variables/common.less';
+@import './mixins.less';

package/styles/mixins.css

@@ -0,0 +1,18 @@
+/**
+ * Less Mixins
+ * 常用样式混入
+ */
+/**
+ * 色彩系统 Token
+ * 参考 NutUI 设计规范
+ */
+/**
+ * 字体系统 Token
+ */
+/**
+ * 间距系统 Token
+ * 基础单位: 4px (8rpx)
+ */
+/**
+ * 通用变量 Token
+ */

package/styles/mixins.less

@@ -0,0 +1,136 @@
+/**
+ * Less Mixins
+ * 常用样式混入
+ */
+
+@import './variables/color.less';
+@import './variables/typography.less';
+@import './variables/spacing.less';
+@import './variables/common.less';
+
+// ========== 清除浮动 ==========
+.clearfix() {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// ========== 文本溢出省略 ==========
+.ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-ellipsis(@lines: 2) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @lines;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+// ========== Flex 布局 ==========
+.flex-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between() {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-start() {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flex-end() {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+// ========== 绝对定位居中 ==========
+.absolute-center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// ========== 1px 边框 ==========
+.hairline(@direction: all, @color: @border-color-base, @radius: 0) {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border: 0 solid @color;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    pointer-events: none;
+
+    & when (@direction = all) {
+      border-width: 2rpx;
+      border-radius: @radius * 2;
+    }
+
+    & when (@direction = top) {
+      border-top-width: 2rpx;
+    }
+
+    & when (@direction = right) {
+      border-right-width: 2rpx;
+    }
+
+    & when (@direction = bottom) {
+      border-bottom-width: 2rpx;
+    }
+
+    & when (@direction = left) {
+      border-left-width: 2rpx;
+    }
+  }
+}
+
+// ========== 安全区域 ==========
+.safe-area-top(@padding: 0) {
+  padding-top: calc(@padding + constant(safe-area-inset-top));
+  padding-top: calc(@padding + env(safe-area-inset-top));
+}
+
+.safe-area-bottom(@padding: 0) {
+  padding-bottom: calc(@padding + constant(safe-area-inset-bottom));
+  padding-bottom: calc(@padding + env(safe-area-inset-bottom));
+}
+
+// ========== 禁用状态 ==========
+.disabled() {
+  opacity: @opacity-disabled;
+  cursor: not-allowed;
+}
+
+// ========== 点击态 ==========
+.active-opacity(@opacity: 0.6) {
+  &:active {
+    opacity: @opacity;
+  }
+}
+
+// ========== 过渡动画 ==========
+.transition(@property: all, @duration: @animation-duration-base, @timing: @animation-timing-function-ease) {
+  transition: @property @duration @timing;
+}

package/styles/variables/color.css

@@ -0,0 +1,4 @@
+/**
+ * 色彩系统 Token
+ * 参考 NutUI 设计规范
+ */

package/styles/variables/color.less

@@ -0,0 +1,54 @@
+/**
+ * 色彩系统 Token
+ * 参考 NutUI 设计规范
+ */
+
+// ========== 品牌色 ==========
+@primary-color: #fa2c19; // 主色
+@primary-color-light: #ff6034; // 浅主色
+@primary-color-dark: #d81e06; // 深主色
+
+// ========== 功能色 ==========
+@success-color: #1ba784; // 成功
+@warning-color: #ff8800; // 警告
+@danger-color: #fa2c19; // 危险
+@info-color: #3460fa; // 信息
+
+// ========== 中性色 ==========
+@gray-1: #f7f8fa; // 浅灰色-1
+@gray-2: #f2f3f5; // 浅灰色-2
+@gray-3: #e5e6eb; // 浅灰色-3
+@gray-4: #dcdee3; // 浅灰色-4
+@gray-5: #c5c6cc; // 灰色-5
+@gray-6: #a8abb2; // 灰色-6
+@gray-7: #888b94; // 深灰色-7
+@gray-8: #6c6f7a; // 深灰色-8
+@gray-9: #494d56; // 深灰色-9
+@gray-10: #1a1c24; // 深灰色-10
+
+// ========== 文本色 ==========
+@text-color-primary: #1a1c24; // 主要文本
+@text-color-secondary: #494d56; // 次要文本
+@text-color-tertiary: #888b94; // 三级文本
+@text-color-disabled: #c5c6cc; // 禁用文本
+@text-color-inverse: #ffffff; // 反色文本
+
+// ========== 背景色 ==========
+@bg-color-page: #f7f8fa; // 页面背景
+@bg-color-container: #ffffff; // 容器背景
+@bg-color-overlay: rgba(0, 0, 0, 0.7); // 遮罩背景
+@bg-color-disabled: #f2f3f5; // 禁用背景
+
+// ========== 边框色 ==========
+@border-color-base: #e5e6eb; // 基础边框
+@border-color-light: #f2f3f5; // 浅色边框
+@border-color-dark: #dcdee3; // 深色边框
+
+// ========== 链接色 ==========
+@link-color: #3460fa; // 链接颜色
+@link-hover-color: #5a7eff; // 链接悬停颜色
+@link-active-color: #2347d9; // 链接激活颜色
+
+// ========== 白色和黑色 ==========
+@white: #ffffff;
+@black: #000000;

package/styles/variables/common.css

@@ -0,0 +1,3 @@
+/**
+ * 通用变量 Token
+ */

package/styles/variables/common.less

@@ -0,0 +1,64 @@
+/**
+ * 通用变量 Token
+ */
+
+// ========== 圆角 ==========
+@border-radius-none: 0;
+@border-radius-sm: 4rpx; // 2px
+@border-radius-base: 8rpx; // 4px
+@border-radius-md: 12rpx; // 6px
+@border-radius-lg: 16rpx; // 8px
+@border-radius-xl: 24rpx; // 12px
+@border-radius-2xl: 32rpx; // 16px
+@border-radius-round: 9999rpx; // 圆形
+@border-radius-circle: 50%; // 圆形百分比
+
+// ========== 边框宽度 ==========
+@border-width-none: 0;
+@border-width-thin: 1rpx; // 0.5px
+@border-width-base: 2rpx; // 1px
+@border-width-thick: 4rpx; // 2px
+
+// ========== 阴影 ==========
+@box-shadow-none: none;
+@box-shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+@box-shadow-base: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+@box-shadow-md: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+@box-shadow-lg: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
+@box-shadow-xl: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+
+// ========== 层级 (z-index) ==========
+@z-index-base: 1;
+@z-index-dropdown: 1000;
+@z-index-sticky: 1020;
+@z-index-fixed: 1030;
+@z-index-modal-backdrop: 1040;
+@z-index-modal: 1050;
+@z-index-popover: 1060;
+@z-index-tooltip: 1070;
+@z-index-toast: 1080;
+
+// ========== 动画时长 ==========
+@animation-duration-fast: 150ms;
+@animation-duration-base: 300ms;
+@animation-duration-slow: 500ms;
+
+// ========== 动画曲线 ==========
+@animation-timing-function-ease: ease;
+@animation-timing-function-ease-in: ease-in;
+@animation-timing-function-ease-out: ease-out;
+@animation-timing-function-ease-in-out: ease-in-out;
+@animation-timing-function-linear: linear;
+
+// ========== 透明度 ==========
+@opacity-disabled: 0.4;
+@opacity-loading: 0.6;
+@opacity-overlay: 0.7;
+
+// ========== 组件尺寸 ==========
+@height-xs: 48rpx; // 24px
+@height-sm: 56rpx; // 28px
+@height-base: 64rpx; // 32px
+@height-md: 80rpx; // 40px
+@height-lg: 96rpx; // 48px
+@height-xl: 112rpx; // 56px

package/styles/variables/spacing.css

@@ -0,0 +1,4 @@
+/**
+ * 间距系统 Token
+ * 基础单位: 4px (8rpx)
+ */

package/styles/variables/spacing.less

@@ -0,0 +1,38 @@
+/**
+ * 间距系统 Token
+ * 基础单位: 4px (8rpx)
+ */
+
+// ========== 基础间距单位 ==========
+@spacing-unit: 8rpx; // 4px
+
+// ========== Padding ==========
+@padding-xs: 8rpx; // 4px
+@padding-sm: 16rpx; // 8px
+@padding-base: 24rpx; // 12px
+@padding-md: 32rpx; // 16px
+@padding-lg: 48rpx; // 24px
+@padding-xl: 64rpx; // 32px
+@padding-2xl: 96rpx; // 48px
+
+// ========== Margin ==========
+@margin-xs: 8rpx; // 4px
+@margin-sm: 16rpx; // 8px
+@margin-base: 24rpx; // 12px
+@margin-md: 32rpx; // 16px
+@margin-lg: 48rpx; // 24px
+@margin-xl: 64rpx; // 32px
+@margin-2xl: 96rpx; // 48px
+
+// ========== 组件内边距 ==========
+@padding-h-xs: 16rpx; // 水平内边距-xs
+@padding-h-sm: 24rpx; // 水平内边距-sm
+@padding-h-base: 32rpx; // 水平内边距-base
+@padding-h-md: 40rpx; // 水平内边距-md
+@padding-h-lg: 48rpx; // 水平内边距-lg
+
+@padding-v-xs: 8rpx; // 垂直内边距-xs
+@padding-v-sm: 16rpx; // 垂直内边距-sm
+@padding-v-base: 24rpx; // 垂直内边距-base
+@padding-v-md: 32rpx; // 垂直内边距-md
+@padding-v-lg: 40rpx; // 垂直内边距-lg

package/styles/variables/typography.css

@@ -0,0 +1,3 @@
+/**
+ * 字体系统 Token
+ */

package/styles/variables/typography.less

@@ -0,0 +1,35 @@
+/**
+ * 字体系统 Token
+ */
+
+// ========== 字体族 ==========
+@font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+@font-family-number: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// ========== 字号 ==========
+@font-size-xs: 20rpx; // 10px
+@font-size-sm: 24rpx; // 12px
+@font-size-base: 28rpx; // 14px
+@font-size-md: 32rpx; // 16px
+@font-size-lg: 36rpx; // 18px
+@font-size-xl: 40rpx; // 20px
+@font-size-2xl: 48rpx; // 24px
+@font-size-3xl: 56rpx; // 28px
+@font-size-4xl: 64rpx; // 32px
+
+// ========== 字重 ==========
+@font-weight-light: 300;
+@font-weight-normal: 400;
+@font-weight-medium: 500;
+@font-weight-semibold: 600;
+@font-weight-bold: 700;
+
+// ========== 行高 ==========
+@line-height-xs: 1.2;
+@line-height-sm: 1.4;
+@line-height-base: 1.5;
+@line-height-md: 1.6;
+@line-height-lg: 1.8;
+@line-height-xl: 2;