xt-element-ui 1.0.6 → 1.0.8

package/lib/index.common.js

@@ -87,6 +87,13 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
+/***/ "11a3":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "27fd":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -95,6 +102,53 @@ module.exports = {"xtColorPrimary":"#409EFF","xtColorSuccess":"#67C23A","xtColor
 
 /***/ }),
 
+/***/ "3a26":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "43ae":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3a26");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "7876":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("ec69");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "d0ed":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("11a3");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "ec69":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "fb15":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -261,7 +315,7 @@ const setTheme = function(theme) {
     setSize,
     setPrimaryColor
   });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a978fd84-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/button/index.vue?vue&type=template&id=0ad9d4c9
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/button/index.vue?vue&type=template&id=0ad9d4c9
 var render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-button',{on:{"click":_vm.handleClick}},[_vm._t("default")],2)
 }
 var staticRenderFns = []
@@ -403,7 +457,7 @@ var component = normalizeComponent(
 // CONCATENATED MODULE: ./src/components/button/index.js
 
 /* harmony default export */ var src_components_button = (components_button);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a978fd84-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/input/index.vue?vue&type=template&id=fe9146e4
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/input/index.vue?vue&type=template&id=fe9146e4
 var inputvue_type_template_id_fe9146e4_render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-input',{attrs:{"value":_vm.value,"placeholder":_vm.placeholder},on:{"input":function($event){return _vm.$emit('input', $event)}}})
 }
 var inputvue_type_template_id_fe9146e4_staticRenderFns = []
@@ -449,6 +503,191 @@ var input_component = normalizeComponent(
 // CONCATENATED MODULE: ./src/components/input/index.js
 
 /* harmony default export */ var components_input = (input);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/flex-box/index.vue?vue&type=template&id=28fcf19e&scoped=true
+var flex_boxvue_type_template_id_28fcf19e_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"xt-flex-box",class:_vm.classAttrs,staticStyle:{"gap":"gap"}},[_vm._t("default")],2)
+}
+var flex_boxvue_type_template_id_28fcf19e_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue?vue&type=template&id=28fcf19e&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/flex-box/index.vue?vue&type=script&lang=js
+
+/* harmony default export */ var flex_boxvue_type_script_lang_js = ({
+    name: "XtFlex",
+    props: {
+        type: "flex",
+        align: "center",
+        content: "start",
+        direction: "row",
+        wrap: "unset",
+        gap: {}
+    },
+    computed: {
+        classAttrs(){
+            const {inline, align, wrap, direction,content} = this;
+            return [`${inline?'is-inline':'flex'}`, `align-${align} content-${content} direction-${direction} wrap-${wrap}`]
+        }
+    }
+});
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_flex_boxvue_type_script_lang_js = (flex_boxvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/flex-box/index.vue?vue&type=style&index=0&id=28fcf19e&prod&scoped=true&lang=scss
+var flex_boxvue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss = __webpack_require__("43ae");
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var flex_box_component = normalizeComponent(
+  components_flex_boxvue_type_script_lang_js,
+  flex_boxvue_type_template_id_28fcf19e_scoped_true_render,
+  flex_boxvue_type_template_id_28fcf19e_scoped_true_staticRenderFns,
+  false,
+  null,
+  "28fcf19e",
+  null
+  
+)
+
+/* harmony default export */ var flex_box = (flex_box_component.exports);
+// CONCATENATED MODULE: ./src/components/flex-box/index.js
+
+/* harmony default export */ var components_flex_box = (flex_box);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card/index.vue?vue&type=template&id=444d40a5&scoped=true
+var cardvue_type_template_id_444d40a5_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"xt-card",class:{'no-padding': _vm.noPadding }},[(_vm.title)?_c('div',{staticClass:"card_header"},[_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]})],2):_vm._e(),_c('div',{staticClass:"card_body"},[_vm._t("default",function(){return [_c('span',{staticClass:"value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.value))]})],2),_c('span',{staticClass:"unit"},[_vm._v(_vm._s(_vm.unit))])]})],2)])
+}
+var cardvue_type_template_id_444d40a5_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/card/index.vue?vue&type=template&id=444d40a5&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card/index.vue?vue&type=script&lang=js
+
+/* harmony default export */ var cardvue_type_script_lang_js = ({
+  name:"XtCard",
+  props:{
+    type:{},
+    title:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconIn:{default:"right"},
+    noPadding:{type:Boolean,default:false}
+  }
+});
+
+// CONCATENATED MODULE: ./src/components/card/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_cardvue_type_script_lang_js = (cardvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/card/index.vue?vue&type=style&index=0&id=444d40a5&prod&lang=scss&scoped=true
+var cardvue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true = __webpack_require__("d0ed");
+
+// CONCATENATED MODULE: ./src/components/card/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var card_component = normalizeComponent(
+  components_cardvue_type_script_lang_js,
+  cardvue_type_template_id_444d40a5_scoped_true_render,
+  cardvue_type_template_id_444d40a5_scoped_true_staticRenderFns,
+  false,
+  null,
+  "444d40a5",
+  null
+  
+)
+
+/* harmony default export */ var card = (card_component.exports);
+// CONCATENATED MODULE: ./src/components/card/index.js
+
+/* harmony default export */ var components_card = (card);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card-item/index.vue?vue&type=template&id=1100cec5&scoped=true
+var card_itemvue_type_template_id_1100cec5_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.iconType=='border')?_c('FlexBox',{staticClass:"xt-card-item is-border",class:[_vm.iconType=='border'?`is-${_vm.type}`:''],attrs:{"content":"between"}},[(_vm.title)?_c('span',{staticClass:"item_label"},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),_c('span',{staticClass:"item-value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.value))]})],2),_c('span',{staticClass:"item_unit"},[_vm._t("unit",function(){return [_vm._v(_vm._s(_vm.unit))]})],2)]):_c('FlexBox',{staticClass:"xt-card-item",attrs:{"direction":_vm.direction,"content":_vm.contentAlign}},[_vm._t("icon",function(){return [_c('el-button',{attrs:{"type":_vm.type,"circle":_vm.circle,"round":_vm.round,"plain":"","icon":_vm.icon}})]}),_c('div',{staticClass:"item-value"},[_c('span',{staticClass:"value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_c('div',{staticClass:"unit"},[_vm._v(_vm._s(_vm.value))])])],2)
+}
+var card_itemvue_type_template_id_1100cec5_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue?vue&type=template&id=1100cec5&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card-item/index.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ var card_itemvue_type_script_lang_js = ({
+  name:"XtCardItem",
+  components:{
+    FlexBox: flex_box
+  },
+  props:{
+    iconType:{default:"border"},
+    type:{default:"primary"},
+    label:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconAt:{default:"right"}
+  },
+  data(){
+    return{
+      circle: false,
+      round: false
+    }
+  },
+  computed:{
+    contentAlign(){
+      return this.iconAt=='center'?'center':'start'
+    },
+    direction(){
+      const iconAtMap = {
+        left:'row',
+        right:'row-reverse',
+        top:'column',
+        bottom:'column-reverse'
+      }
+      return iconAtMap[this.iconAt]
+    }
+  }
+});
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_card_itemvue_type_script_lang_js = (card_itemvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/card-item/index.vue?vue&type=style&index=0&id=1100cec5&prod&lang=scss&scoped=true
+var card_itemvue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true = __webpack_require__("7876");
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var card_item_component = normalizeComponent(
+  components_card_itemvue_type_script_lang_js,
+  card_itemvue_type_template_id_1100cec5_scoped_true_render,
+  card_itemvue_type_template_id_1100cec5_scoped_true_staticRenderFns,
+  false,
+  null,
+  "1100cec5",
+  null
+  
+)
+
+/* harmony default export */ var card_item = (card_item_component.exports);
+// CONCATENATED MODULE: ./src/components/card-item/index.js
+
+/* harmony default export */ var components_card_item = (card_item);
 // CONCATENATED MODULE: ./src/index.js
 // 导入 SCSS 变量（通过 CSS Modules :export 导出）
 
@@ -459,10 +698,16 @@ var input_component = normalizeComponent(
 
 
 
+
+
+
 // 存储组件列表
 const components = [
   src_components_button,
-  components_input
+  components_input,
+  components_flex_box,
+  components_card,
+  components_card_item
 ]
 
 
@@ -488,7 +733,10 @@ if (typeof window !== 'undefined' && window.Vue) {
   install,
   // 按需导出组件
   Button: src_components_button,
-  Input: components_input
+  Input: components_input,
+  FlexBox: components_flex_box,
+  Card: components_card,
+  CardItem: components_card_item
 });
 
 // 导出工具函数和变量

package/lib/index.css

@@ -0,0 +1 @@
+.xt-flex-box.flex[data-v-28fcf19e]{display:flex}.xt-flex-box.flex.direction-row-reverse>.flex[data-v-28fcf19e],.xt-flex-box.flex.direction-row>.flex[data-v-28fcf19e]{width:100%}.xt-flex-box.flex.direction-column-reverse>.flex[data-v-28fcf19e],.xt-flex-box.flex.direction-column>.flex[data-v-28fcf19e]{height:100%}.xt-flex-box.is-inline[data-v-28fcf19e]{display:inline-flex}.direction-row[data-v-28fcf19e]{flex-direction:row}.direction-row-reverse[data-v-28fcf19e]{flex-direction:row-reverse}.direction-column[data-v-28fcf19e]{flex-direction:column}.direction-column-reverse[data-v-28fcf19e]{flex-direction:column-reverse}.align-center[data-v-28fcf19e]{align-items:center}.align-start[data-v-28fcf19e]{align-items:flex-start}.align-end[data-v-28fcf19e]{align-items:flex-end}.content-center[data-v-28fcf19e]{justify-content:center}.content-around[data-v-28fcf19e]{justify-content:space-around}.content-between[data-v-28fcf19e]{justify-content:space-between}.content-start[data-v-28fcf19e]{justify-content:flex-start}.content-end[data-v-28fcf19e]{justify-content:flex-end}.wrap-wrap[data-v-28fcf19e]{flex-wrap:wrap}.wrap-nowrap[data-v-28fcf19e]{flex-wrap:nowrap}.wrap-unset[data-v-28fcf19e]{flex-wrap:wrap}.xt-card[data-v-444d40a5]{border-radius:4px;box-shadow:0 2px 12px 0 #000;background-color:#fff;overflow:hidden;color:#303133;transition:.35}.xt-card .card__header[data-v-444d40a5]{padding:18px 20px;box-sizing:border-box}.xt-card .card_body[data-v-444d40a5]{padding:20px}.xt-card .card_body .value[data-v-444d40a5]{font-size:20px;font-weight:600}.xt-card .value[data-v-444d40a5]{font-weight:600}.xt-card .card_header+.card__body[data-v-444d40a5]{padding-top:0}.xt-card.noPadding .card_body[data-v-444d40a5]{padding:0}.xt-card-item[data-v-1100cec5]{min-height:40px}.xt-card-item+.xt-card-item[data-v-1100cec5]{margin-top:10px}.xt-card-item.is-border[data-v-1100cec5]{border-right:3px solid transparent;background-color:#f5f7fa}.xt-card-item.is-border.is-primary[data-v-1100cec5]{border-right-color:#409eff}.xt-card-item.is-border.is-primary .item-value .value[data-v-1100cec5]{color:#409eff}.xt-card-item.is-border.is-success[data-v-1100cec5]{border-right-color:#67c23a}.xt-card-item.is-border.is-success .item-value .value[data-v-1100cec5]{color:#67c23a}.xt-card-item.is-border.is-warning[data-v-1100cec5]{border-right-color:#e6a23c}.xt-card-item.is-border.is-warning .item-value .value[data-v-1100cec5]{color:#e6a23c}.xt-card-item.is-border.is-danger[data-v-1100cec5]{border-right-color:#f56c6c}.xt-card-item.is-border.is-danger .item-value .value[data-v-1100cec5]{color:#f56c6c}.xt-card-item .item-value[data-v-1100cec5]{padding-right:10px}.xt-card-item .item-value .value[data-v-1100cec5]{font-weight:600;font-size:14px}.xt-card-item .item_label[data-v-1100cec5]{padding-left:10px}.xt-card-item .item_unit[data-v-1100cec5]{padding-left:5px}

package/lib/index.umd.js

@@ -96,6 +96,13 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
+/***/ "11a3":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "27fd":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -104,6 +111,53 @@ module.exports = {"xtColorPrimary":"#409EFF","xtColorSuccess":"#67C23A","xtColor
 
 /***/ }),
 
+/***/ "3a26":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "43ae":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3a26");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "7876":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("ec69");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "d0ed":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("11a3");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "ec69":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "fb15":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -270,7 +324,7 @@ const setTheme = function(theme) {
     setSize,
     setPrimaryColor
   });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a978fd84-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/button/index.vue?vue&type=template&id=0ad9d4c9
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/button/index.vue?vue&type=template&id=0ad9d4c9
 var render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-button',{on:{"click":_vm.handleClick}},[_vm._t("default")],2)
 }
 var staticRenderFns = []
@@ -412,7 +466,7 @@ var component = normalizeComponent(
 // CONCATENATED MODULE: ./src/components/button/index.js
 
 /* harmony default export */ var src_components_button = (components_button);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a978fd84-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/input/index.vue?vue&type=template&id=fe9146e4
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/input/index.vue?vue&type=template&id=fe9146e4
 var inputvue_type_template_id_fe9146e4_render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-input',{attrs:{"value":_vm.value,"placeholder":_vm.placeholder},on:{"input":function($event){return _vm.$emit('input', $event)}}})
 }
 var inputvue_type_template_id_fe9146e4_staticRenderFns = []
@@ -458,6 +512,191 @@ var input_component = normalizeComponent(
 // CONCATENATED MODULE: ./src/components/input/index.js
 
 /* harmony default export */ var components_input = (input);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/flex-box/index.vue?vue&type=template&id=28fcf19e&scoped=true
+var flex_boxvue_type_template_id_28fcf19e_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"xt-flex-box",class:_vm.classAttrs,staticStyle:{"gap":"gap"}},[_vm._t("default")],2)
+}
+var flex_boxvue_type_template_id_28fcf19e_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue?vue&type=template&id=28fcf19e&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/flex-box/index.vue?vue&type=script&lang=js
+
+/* harmony default export */ var flex_boxvue_type_script_lang_js = ({
+    name: "XtFlex",
+    props: {
+        type: "flex",
+        align: "center",
+        content: "start",
+        direction: "row",
+        wrap: "unset",
+        gap: {}
+    },
+    computed: {
+        classAttrs(){
+            const {inline, align, wrap, direction,content} = this;
+            return [`${inline?'is-inline':'flex'}`, `align-${align} content-${content} direction-${direction} wrap-${wrap}`]
+        }
+    }
+});
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_flex_boxvue_type_script_lang_js = (flex_boxvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/flex-box/index.vue?vue&type=style&index=0&id=28fcf19e&prod&scoped=true&lang=scss
+var flex_boxvue_type_style_index_0_id_28fcf19e_prod_scoped_true_lang_scss = __webpack_require__("43ae");
+
+// CONCATENATED MODULE: ./src/components/flex-box/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var flex_box_component = normalizeComponent(
+  components_flex_boxvue_type_script_lang_js,
+  flex_boxvue_type_template_id_28fcf19e_scoped_true_render,
+  flex_boxvue_type_template_id_28fcf19e_scoped_true_staticRenderFns,
+  false,
+  null,
+  "28fcf19e",
+  null
+  
+)
+
+/* harmony default export */ var flex_box = (flex_box_component.exports);
+// CONCATENATED MODULE: ./src/components/flex-box/index.js
+
+/* harmony default export */ var components_flex_box = (flex_box);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card/index.vue?vue&type=template&id=444d40a5&scoped=true
+var cardvue_type_template_id_444d40a5_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"xt-card",class:{'no-padding': _vm.noPadding }},[(_vm.title)?_c('div',{staticClass:"card_header"},[_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]})],2):_vm._e(),_c('div',{staticClass:"card_body"},[_vm._t("default",function(){return [_c('span',{staticClass:"value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.value))]})],2),_c('span',{staticClass:"unit"},[_vm._v(_vm._s(_vm.unit))])]})],2)])
+}
+var cardvue_type_template_id_444d40a5_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/card/index.vue?vue&type=template&id=444d40a5&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card/index.vue?vue&type=script&lang=js
+
+/* harmony default export */ var cardvue_type_script_lang_js = ({
+  name:"XtCard",
+  props:{
+    type:{},
+    title:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconIn:{default:"right"},
+    noPadding:{type:Boolean,default:false}
+  }
+});
+
+// CONCATENATED MODULE: ./src/components/card/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_cardvue_type_script_lang_js = (cardvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/card/index.vue?vue&type=style&index=0&id=444d40a5&prod&lang=scss&scoped=true
+var cardvue_type_style_index_0_id_444d40a5_prod_lang_scss_scoped_true = __webpack_require__("d0ed");
+
+// CONCATENATED MODULE: ./src/components/card/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var card_component = normalizeComponent(
+  components_cardvue_type_script_lang_js,
+  cardvue_type_template_id_444d40a5_scoped_true_render,
+  cardvue_type_template_id_444d40a5_scoped_true_staticRenderFns,
+  false,
+  null,
+  "444d40a5",
+  null
+  
+)
+
+/* harmony default export */ var card = (card_component.exports);
+// CONCATENATED MODULE: ./src/components/card/index.js
+
+/* harmony default export */ var components_card = (card);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ddfdb4f6-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card-item/index.vue?vue&type=template&id=1100cec5&scoped=true
+var card_itemvue_type_template_id_1100cec5_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.iconType=='border')?_c('FlexBox',{staticClass:"xt-card-item is-border",class:[_vm.iconType=='border'?`is-${_vm.type}`:''],attrs:{"content":"between"}},[(_vm.title)?_c('span',{staticClass:"item_label"},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),_c('span',{staticClass:"item-value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.value))]})],2),_c('span',{staticClass:"item_unit"},[_vm._t("unit",function(){return [_vm._v(_vm._s(_vm.unit))]})],2)]):_c('FlexBox',{staticClass:"xt-card-item",attrs:{"direction":_vm.direction,"content":_vm.contentAlign}},[_vm._t("icon",function(){return [_c('el-button',{attrs:{"type":_vm.type,"circle":_vm.circle,"round":_vm.round,"plain":"","icon":_vm.icon}})]}),_c('div',{staticClass:"item-value"},[_c('span',{staticClass:"value"},[_vm._t("value",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_c('div',{staticClass:"unit"},[_vm._v(_vm._s(_vm.value))])])],2)
+}
+var card_itemvue_type_template_id_1100cec5_scoped_true_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue?vue&type=template&id=1100cec5&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/card-item/index.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ var card_itemvue_type_script_lang_js = ({
+  name:"XtCardItem",
+  components:{
+    FlexBox: flex_box
+  },
+  props:{
+    iconType:{default:"border"},
+    type:{default:"primary"},
+    label:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconAt:{default:"right"}
+  },
+  data(){
+    return{
+      circle: false,
+      round: false
+    }
+  },
+  computed:{
+    contentAlign(){
+      return this.iconAt=='center'?'center':'start'
+    },
+    direction(){
+      const iconAtMap = {
+        left:'row',
+        right:'row-reverse',
+        top:'column',
+        bottom:'column-reverse'
+      }
+      return iconAtMap[this.iconAt]
+    }
+  }
+});
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_card_itemvue_type_script_lang_js = (card_itemvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/card-item/index.vue?vue&type=style&index=0&id=1100cec5&prod&lang=scss&scoped=true
+var card_itemvue_type_style_index_0_id_1100cec5_prod_lang_scss_scoped_true = __webpack_require__("7876");
+
+// CONCATENATED MODULE: ./src/components/card-item/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var card_item_component = normalizeComponent(
+  components_card_itemvue_type_script_lang_js,
+  card_itemvue_type_template_id_1100cec5_scoped_true_render,
+  card_itemvue_type_template_id_1100cec5_scoped_true_staticRenderFns,
+  false,
+  null,
+  "1100cec5",
+  null
+  
+)
+
+/* harmony default export */ var card_item = (card_item_component.exports);
+// CONCATENATED MODULE: ./src/components/card-item/index.js
+
+/* harmony default export */ var components_card_item = (card_item);
 // CONCATENATED MODULE: ./src/index.js
 // 导入 SCSS 变量（通过 CSS Modules :export 导出）
 
@@ -468,10 +707,16 @@ var input_component = normalizeComponent(
 
 
 
+
+
+
 // 存储组件列表
 const components = [
   src_components_button,
-  components_input
+  components_input,
+  components_flex_box,
+  components_card,
+  components_card_item
 ]
 
 
@@ -497,7 +742,10 @@ if (typeof window !== 'undefined' && window.Vue) {
   install,
   // 按需导出组件
   Button: src_components_button,
-  Input: components_input
+  Input: components_input,
+  FlexBox: components_flex_box,
+  Card: components_card,
+  CardItem: components_card_item
 });
 
 // 导出工具函数和变量

package/lib/index.umd.min.js

@@ -1 +1 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("xt-element-ui",[],e):"object"===typeof exports?exports["xt-element-ui"]=e():t["xt-element-ui"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"27fd":function(t,e,n){t.exports={xtColorPrimary:"#409EFF",xtColorSuccess:"#67C23A",xtColorWarning:"#E6A23C",xtColorDanger:"#F56C6C",xtColorInfo:"#909399",xtColorPrimaryLight3:"#79BBFF",xtColorPrimaryLight5:"#A0CFFF",xtColorPrimaryLight7:"#C6E2FF",xtColorPrimaryLight8:"#D9ECFF",xtColorPrimaryLight9:"#ECF5FF",xtColorTextPrimary:"#303133",xtColorTextRegular:"#606266",xtColorTextSecondary:"#909399",xtColorTextPlaceholder:"#C0C4CC",xtColorTextDisabled:"#C0C4CC",xtColorBgPrimary:"#ffffff",xtColorBgSecondary:"#f5f7fa",xtColorBgHover:"#f5f5f5",xtColorBgContainer:"#f5f7fa",xtColorBgOverlay:"#ffffff",xtColorBorder:"#DCDFE6",xtColorBorderLight:"#E4E7ED",xtColorBorderLighter:"#EBEEF5",xtColorBorderExtraLight:"#F2F6FC",xtFontSizeExtraLarge:"20px",xtFontSizeLarge:"18px",xtFontSizeMedium:"16px",xtFontSizeBase:"14px",xtFontSizeSmall:"13px",xtFontSizeExtraSmall:"12px",xtSpacingXs:"4px",xtSpacingSm:"8px",xtSpacingMd:"12px",xtSpacingLg:"16px",xtSpacingXl:"20px",xtBorderRadiusBase:"4px",xtBorderRadiusSmall:"2px",xtBorderRadiusRound:"20px",xtBorderRadiusCircle:"50%",xtShadowSm:"0 2px 4px rgba(0, 0, 0, 0.04)",xtShadowMd:"0 4px 12px rgba(0, 0, 0, 0.08)",xtShadowLg:"0 8px 24px rgba(0, 0, 0, 0.12)",xtTransitionDuration:"0.3s",xtTransitionDurationFast:"0.2s"}},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"utils",(function(){return p})),n.d(e,"variables",(function(){return l.a})),n.d(e,"getConfig",(function(){return O})),n.d(e,"setConfig",(function(){return R})),n.d(e,"setTheme",(function(){return U})),n.d(e,"setSize",(function(){return D})),n.d(e,"setPrimaryColor",(function(){return M})),n.d(e,"getTheme",(function(){return k})),n.d(e,"getSize",(function(){return V})),n.d(e,"getPrimaryColor",(function(){return N})),n.d(e,"resetConfig",(function(){return H})),n.d(e,"onConfigChange",(function(){return W})),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=n("27fd"),l=n.n(i);const u={theme:"light",size:"medium",primaryColor:"#1890ff"};let a={...u};const c=[],f=function(t,e){c.forEach(n=>{n(t,e)})},s=function(t){const e=["light","dark","compact"];e.includes(t)?(a.theme=t,document.documentElement.setAttribute("data-theme",t),f("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},d=function(t){const e=["small","medium","large"];e.includes(t)?(a.size=t,document.documentElement.setAttribute("data-size",t),f("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},m=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(a.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),f("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)};var p={setTheme:s,setSize:d,setPrimaryColor:m},x=function(){var t=this,e=t._self._c;return e("el-button",{on:{click:t.handleClick}},[t._t("default")],2)},C=[],h={name:"XtButton",methods:{handleClick(){this.$emit("click")}}},g=h;function y(t,e,n,o,r,i,l,u){var a,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),l?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(l)},c._ssrRegister=a):r&&(a=u?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(c.functional){c._injectStyles=a;var f=c.render;c.render=function(t,e){return a.call(e),f(t,e)}}else{var s=c.beforeCreate;c.beforeCreate=s?[].concat(s,a):[a]}return{exports:t,options:c}}var S=y(g,x,C,!1,null,null,null),E=S.exports,b=E,v=function(){var t=this,e=t._self._c;return e("el-input",{attrs:{value:t.value,placeholder:t.placeholder},on:{input:function(e){return t.$emit("input",e)}}})},F=[],_={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},$=_,w=y($,v,F,!1,null,null,null),z=w.exports,B=z;const P=[b,B],j=function(t){j.installed||(j.installed=!0,P.forEach(e=>{t.component(e.name,e)}),t.prototype.$utils=p)};"undefined"!==typeof window&&window.Vue&&j(window.Vue);var T={install:j,Button:b,Input:B};const X={theme:"light",size:"medium",primaryColor:"#1890ff"};let I={...X};const L=[],A=function(t,e){L.forEach(n=>{n(t,e)})},O=function(){return{...I}},R=function(t){"object"===typeof t&&null!==t?(void 0!==t.theme&&U(t.theme),void 0!==t.size&&D(t.size),void 0!==t.primaryColor&&M(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},U=function(t){const e=["light","dark"];e.includes(t)?(I.theme=t,document.documentElement.setAttribute("data-theme",t),A("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},D=function(t){const e=["small","medium","large"];e.includes(t)?(I.size=t,document.documentElement.setAttribute("data-size",t),A("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},M=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(I.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),A("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)},k=function(){return I.theme},V=function(){return I.size},N=function(){return I.primaryColor},H=function(){R(X)},W=function(t){if("function"===typeof t)return L.push(t),function(){const e=L.indexOf(t);e>-1&&L.splice(e,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};e["default"]=T}})}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define("xt-element-ui",[],e):"object"===typeof exports?exports["xt-element-ui"]=e():t["xt-element-ui"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"11a3":function(t,e,n){},"27fd":function(t,e,n){t.exports={xtColorPrimary:"#409EFF",xtColorSuccess:"#67C23A",xtColorWarning:"#E6A23C",xtColorDanger:"#F56C6C",xtColorInfo:"#909399",xtColorPrimaryLight3:"#79BBFF",xtColorPrimaryLight5:"#A0CFFF",xtColorPrimaryLight7:"#C6E2FF",xtColorPrimaryLight8:"#D9ECFF",xtColorPrimaryLight9:"#ECF5FF",xtColorTextPrimary:"#303133",xtColorTextRegular:"#606266",xtColorTextSecondary:"#909399",xtColorTextPlaceholder:"#C0C4CC",xtColorTextDisabled:"#C0C4CC",xtColorBgPrimary:"#ffffff",xtColorBgSecondary:"#f5f7fa",xtColorBgHover:"#f5f5f5",xtColorBgContainer:"#f5f7fa",xtColorBgOverlay:"#ffffff",xtColorBorder:"#DCDFE6",xtColorBorderLight:"#E4E7ED",xtColorBorderLighter:"#EBEEF5",xtColorBorderExtraLight:"#F2F6FC",xtFontSizeExtraLarge:"20px",xtFontSizeLarge:"18px",xtFontSizeMedium:"16px",xtFontSizeBase:"14px",xtFontSizeSmall:"13px",xtFontSizeExtraSmall:"12px",xtSpacingXs:"4px",xtSpacingSm:"8px",xtSpacingMd:"12px",xtSpacingLg:"16px",xtSpacingXl:"20px",xtBorderRadiusBase:"4px",xtBorderRadiusSmall:"2px",xtBorderRadiusRound:"20px",xtBorderRadiusCircle:"50%",xtShadowSm:"0 2px 4px rgba(0, 0, 0, 0.04)",xtShadowMd:"0 4px 12px rgba(0, 0, 0, 0.08)",xtShadowLg:"0 8px 24px rgba(0, 0, 0, 0.12)",xtTransitionDuration:"0.3s",xtTransitionDurationFast:"0.2s"}},"3a26":function(t,e,n){},"43ae":function(t,e,n){"use strict";n("3a26")},7876:function(t,e,n){"use strict";n("ec69")},d0ed:function(t,e,n){"use strict";n("11a3")},ec69:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"utils",(function(){return m})),n.d(e,"variables",(function(){return a.a})),n.d(e,"getConfig",(function(){return rt})),n.d(e,"setConfig",(function(){return it})),n.d(e,"setTheme",(function(){return at})),n.d(e,"setSize",(function(){return lt})),n.d(e,"setPrimaryColor",(function(){return ut})),n.d(e,"getTheme",(function(){return ct})),n.d(e,"getSize",(function(){return st})),n.d(e,"getPrimaryColor",(function(){return ft})),n.d(e,"resetConfig",(function(){return dt})),n.d(e,"onConfigChange",(function(){return pt})),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=n("27fd"),a=n.n(i);const l={theme:"light",size:"medium",primaryColor:"#1890ff"};let u={...l};const c=[],s=function(t,e){c.forEach(n=>{n(t,e)})},f=function(t){const e=["light","dark","compact"];e.includes(t)?(u.theme=t,document.documentElement.setAttribute("data-theme",t),s("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},d=function(t){const e=["small","medium","large"];e.includes(t)?(u.size=t,document.documentElement.setAttribute("data-size",t),s("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},p=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(u.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),s("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)};var m={setTheme:f,setSize:d,setPrimaryColor:p},x=function(){var t=this,e=t._self._c;return e("el-button",{on:{click:t.handleClick}},[t._t("default")],2)},C=[],g={name:"XtButton",methods:{handleClick(){this.$emit("click")}}},h=g;function y(t,e,n,o,r,i,a,l){var u,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):r&&(u=l?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var s=c.render;c.render=function(t,e){return u.call(e),s(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:c}}var _=y(h,x,C,!1,null,null,null),v=_.exports,b=v,S=function(){var t=this,e=t._self._c;return e("el-input",{attrs:{value:t.value,placeholder:t.placeholder},on:{input:function(e){return t.$emit("input",e)}}})},F=[],E={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},w=E,$=y(w,S,F,!1,null,null,null),B=$.exports,P=B,z=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-flex-box",class:t.classAttrs,staticStyle:{gap:"gap"}},[t._t("default")],2)},T=[],A={name:"XtFlex",props:{type:"flex",align:"center",content:"start",direction:"row",wrap:"unset",gap:{}},computed:{classAttrs(){const{inline:t,align:e,wrap:n,direction:o,content:r}=this;return[""+(t?"is-inline":"flex"),`align-${e} content-${r} direction-${o} wrap-${n}`]}}},j=A,X=(n("43ae"),y(j,z,T,!1,null,"28fcf19e",null)),I=X.exports,L=I,O=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xt-card",class:{"no-padding":t.noPadding}},[t.title?e("div",{staticClass:"card_header"},[t._t("title",(function(){return[t._v(t._s(t.title))]}))],2):t._e(),e("div",{staticClass:"card_body"},[t._t("default",(function(){return[e("span",{staticClass:"value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"unit"},[t._v(t._s(t.unit))])]}))],2)])},R=[],U={name:"XtCard",props:{type:{},title:{},value:{},unit:{},icon:{},iconIn:{default:"right"},noPadding:{type:Boolean,default:!1}}},D=U,M=(n("d0ed"),y(D,O,R,!1,null,"444d40a5",null)),k=M.exports,V=k,N=function(){var t=this,e=t._self._c;return"border"==t.iconType?e("FlexBox",{staticClass:"xt-card-item is-border",class:["border"==t.iconType?"is-"+t.type:""],attrs:{content:"between"}},[t.title?e("span",{staticClass:"item_label"},[t._t("label",(function(){return[t._v(t._s(t.label))]}))],2):t._e(),e("span",{staticClass:"item-value"},[t._t("value",(function(){return[t._v(t._s(t.value))]}))],2),e("span",{staticClass:"item_unit"},[t._t("unit",(function(){return[t._v(t._s(t.unit))]}))],2)]):e("FlexBox",{staticClass:"xt-card-item",attrs:{direction:t.direction,content:t.contentAlign}},[t._t("icon",(function(){return[e("el-button",{attrs:{type:t.type,circle:t.circle,round:t.round,plain:"",icon:t.icon}})]})),e("div",{staticClass:"item-value"},[e("span",{staticClass:"value"},[t._t("value",(function(){return[t._v(t._s(t.label))]}))],2),e("div",{staticClass:"unit"},[t._v(t._s(t.value))])])],2)},H=[],W={name:"XtCardItem",components:{FlexBox:I},props:{iconType:{default:"border"},type:{default:"primary"},label:{},value:{},unit:{},icon:{},iconAt:{default:"right"}},data(){return{circle:!1,round:!1}},computed:{contentAlign(){return"center"==this.iconAt?"center":"start"},direction(){const t={left:"row",right:"row-reverse",top:"column",bottom:"column-reverse"};return t[this.iconAt]}}},q=W,G=(n("7876"),y(q,N,H,!1,null,"1100cec5",null)),J=G.exports,K=J;const Q=[b,P,L,V,K],Y=function(t){Y.installed||(Y.installed=!0,Q.forEach(e=>{t.component(e.name,e)}),t.prototype.$utils=m)};"undefined"!==typeof window&&window.Vue&&Y(window.Vue);var Z={install:Y,Button:b,Input:P,FlexBox:L,Card:V,CardItem:K};const tt={theme:"light",size:"medium",primaryColor:"#1890ff"};let et={...tt};const nt=[],ot=function(t,e){nt.forEach(n=>{n(t,e)})},rt=function(){return{...et}},it=function(t){"object"===typeof t&&null!==t?(void 0!==t.theme&&at(t.theme),void 0!==t.size&&lt(t.size),void 0!==t.primaryColor&&ut(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},at=function(t){const e=["light","dark"];e.includes(t)?(et.theme=t,document.documentElement.setAttribute("data-theme",t),ot("theme",t)):console.warn(`[XtElementUI] 无效的主题值: ${t}，可选值: ${e.join(", ")}`)},lt=function(t){const e=["small","medium","large"];e.includes(t)?(et.size=t,document.documentElement.setAttribute("data-size",t),ot("size",t)):console.warn(`[XtElementUI] 无效的大小值: ${t}，可选值: ${e.join(", ")}`)},ut=function(t){const e=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;e.test(t)?(et.primaryColor=t,document.documentElement.style.setProperty("--xt-color-primary",t),ot("primaryColor",t)):console.warn(`[XtElementUI] 无效的颜色值: ${t}，请使用十六进制颜色格式，如 #1890ff`)},ct=function(){return et.theme},st=function(){return et.size},ft=function(){return et.primaryColor},dt=function(){it(tt)},pt=function(t){if("function"===typeof t)return nt.push(t),function(){const e=nt.indexOf(t);e>-1&&nt.splice(e,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};e["default"]=Z}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "基于 Vue2.7 + ElementUI 的组件库",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -32,6 +32,6 @@
   ],
   "dependencies": {
     "vue-server-renderer": "^2.7.14",
-    "xt-element-ui": "^1.0.5"
+    "xt-element-ui": "^1.0.7"
   }
 }

package/src/components/card/index.js

@@ -0,0 +1,2 @@
+import XtCard from './index.vue'
+export default XtCard

package/src/components/card/index.vue

@@ -0,0 +1,48 @@
+<template>
+<div class="xt-card" :class="{'no-padding': noPadding }">
+  <div class="card_header" v-if="title">
+    <slot name="title">{{title }}</slot>
+  </div>
+  <div class="card_body">
+    <slot>
+      <span class="value"><slot name="value">{{value}}</slot></span>
+      <span class="unit">{{ unit }}</span>
+    </slot>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  name:"XtCard",
+  props:{
+    type:{},
+    title:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconIn:{default:"right"},
+    noPadding:{type:Boolean,default:false}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.xt-card{
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,1); 
+  background-color:#fff;
+  overflow: hidden; color:#303133; transition:.35;
+ .card__header{
+  padding:18px 20px;
+  box-sizing:border-box;
+}
+  .card_body{
+    padding:20px;
+    .value{
+      font-size:20px; font-weight: 600;
+    }
+  }
+  .value{font-weight:600;}
+  .card_header + .card__body{padding-top:0;}
+  &.noPadding{ .card_body{padding:0px;}}
+}
+</style>

package/src/components/card-item/index.js

@@ -0,0 +1,2 @@
+import XtCardItem from './index.vue'
+export default XtCardItem

package/src/components/card-item/index.vue

@@ -0,0 +1,112 @@
+<template>
+<FlexBox v-if="iconType=='border'" class="xt-card-item is-border" :class="[iconType=='border'?`is-${type}`:'']" content="between">
+  <span class="item_label" v-if="title">
+    <slot name="label">{{label }}</slot>
+  </span>
+   <span class="item-value">
+    <slot name="value">{{value }}</slot>
+  </span>
+  <span class="item_unit">
+    <slot name="unit">{{ unit }}</slot>
+  </span>
+</FlexBox>
+<FlexBox v-else class="xt-card-item" :direction="direction" :content="contentAlign">
+  <slot name="icon">
+    <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
+  </slot>
+   <div class="item-value">
+    <span class="value">
+      <slot name="value">{{ label }}</slot>
+    </span>
+    <div class="unit">{{ value }}</div>
+  </div>
+  
+</FlexBox>
+</template>
+<script>
+import FlexBox from '../flex-box/index.vue'
+export default {
+  name:"XtCardItem",
+  components:{
+    FlexBox
+  },
+  props:{
+    iconType:{default:"border"},
+    type:{default:"primary"},
+    label:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconAt:{default:"right"}
+  },
+  data(){
+    return{
+      circle: false,
+      round: false
+    }
+  },
+  computed:{
+    contentAlign(){
+      return this.iconAt=='center'?'center':'start'
+    },
+    direction(){
+      const iconAtMap = {
+        left:'row',
+        right:'row-reverse',
+        top:'column',
+        bottom:'column-reverse'
+      }
+      return iconAtMap[this.iconAt]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.xt-card-item{  
+  min-height: 40px;
+  + .xt-card-item{
+    margin-top: 10px;
+  }
+  &.is-border{
+    border-right: 3px solid transparent;
+    background-color: #f5f7fa;
+    &.is-primary{
+      border-right-color: $xt-color-primary;
+      .item-value .value{
+        color: $xt-color-primary;
+      }
+    }
+    &.is-success{
+      border-right-color: #67c23a;
+      .item-value .value{
+        color: #67c23a;
+      }
+    }
+    &.is-warning{
+      border-right-color: #e6a23c;
+      .item-value .value{
+        color: #e6a23c;
+      }
+    }
+    &.is-danger{
+      border-right-color: #f56c6c;
+      .item-value .value{
+        color: #f56c6c;
+      }
+    }
+  }
+  .item-value{
+    padding-right: 10px;
+    .value{
+      font-weight: 600;
+      font-size: $xt-font-size-base;
+    }
+  }
+  .item_label{
+    padding-left: 10px;
+  }
+  .item_unit{
+    padding-left: 5px;
+  }
+}
+</style>

package/src/components/flex-box/index.js

@@ -0,0 +1,2 @@
+import XtFlexBox from './index.vue'
+export default XtFlexBox

package/src/components/flex-box/index.vue

@@ -0,0 +1,104 @@
+<<template>
+  <div class="xt-flex-box" :class="classAttrs" style="gap: gap">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "XtFlex",
+    props: {
+        type: "flex",
+        align: "center",
+        content: "start",
+        direction: "row",
+        wrap: "unset",
+        gap: {}
+    },
+    computed: {
+        classAttrs(){
+            const {inline, align, wrap, direction,content} = this;
+            return [`${inline?'is-inline':'flex'}`, `align-${align} content-${content} direction-${direction} wrap-${wrap}`]
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.xt-flex-box{
+    &.flex{
+        display: flex;
+        &.direction{
+            &-row,&-row-reverse{
+                >.flex{
+                    width: 100%;
+                }
+            }
+            &-column,&-column-reverse{
+                >.flex{
+                    height: 100%;
+                }
+            }
+        }
+    }
+    &.is-inline{
+        display: inline-flex;
+    }
+    
+}
+.direction{
+    &-row{
+        flex-direction: row;
+        &-reverse{
+            flex-direction: row-reverse;
+        }
+    }
+    &-column{
+        flex-direction: column;
+        &-reverse{
+            flex-direction: column-reverse;
+        }
+    }
+}
+.align{
+    &-center{
+        align-items: center;
+    }
+    &-start{
+        align-items: flex-start;
+    }
+    &-end{
+        align-items: flex-end;
+    }
+
+}
+
+.content{
+    &-center{
+        justify-content: center;
+    }
+    &-around{
+        justify-content: space-around;
+    }
+    &-between{
+        justify-content: space-between;
+    }
+    &-start{
+        justify-content: flex-start;
+    }
+    &-end{
+        justify-content: flex-end;
+    }
+}
+.wrap{
+    &-wrap{
+        flex-wrap: wrap;
+    }
+    &-nowrap{
+        flex-wrap: nowrap;
+    }
+    &-unset{
+        flex-wrap: wrap;
+    }
+}
+</style>

package/src/index.js

@@ -6,11 +6,17 @@ import utils from './utils/index'
 // 导入组件
 import Button from './components/button'
 import Input from './components/input'
+import FlexBox from './components/flex-box'
+import Card from './components/card'
+import CardItem from './components/card-item'
 
 // 存储组件列表
 const components = [
   Button,
-  Input
+  Input,
+  FlexBox,
+  Card,
+  CardItem
 ]
 
 
@@ -36,7 +42,10 @@ export default {
   install,
   // 按需导出组件
   Button,
-  Input
+  Input,
+  FlexBox,
+  Card,
+  CardItem
 }
 
 // 导出工具函数和变量

package/src/styles/theme.scss

@@ -92,37 +92,36 @@
   --xt-color-border-extra-light: #434343;
 }
 
-// 紧凑主题
-[data-theme="compact"] {
-  --xt-font-size-base: 13px;
-  --xt-font-size-small: 12px;
-
-  --xt-spacing-xs: 3px;
-  --xt-spacing-sm: 6px;
-  --xt-spacing-md: 10px;
-  --xt-spacing-lg: 14px;
+// ===========================
+// 字体大小主题（基于增量）
+// ===========================
+
+// 小字体主题 - 增量 0px
+[data-size="small"] {
+  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-small};
+  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-small};
+  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-small};
+  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-small};
+  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-small};
+  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-small};
 }
 
-// 大字体主题
-[data-size="large"] {
-  --xt-font-size-base: 16px;
-  --xt-font-size-medium: 18px;
-  --xt-font-size-large: 20px;
-
-  --xt-spacing-xs: 5px;
-  --xt-spacing-sm: 10px;
-  --xt-spacing-md: 15px;
-  --xt-spacing-lg: 20px;
+// 中等字体主题 - 增量 2px
+[data-size="medium"] {
+  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-medium};
+  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-medium};
+  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-medium};
+  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-medium};
+  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-medium};
+  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-medium};
 }
 
-// 小字体主题
-[data-size="small"] {
-  --xt-font-size-base: 12px;
-  --xt-font-size-small: 11px;
-  --xt-font-size-extra-small: 10px;
-
-  --xt-spacing-xs: 3px;
-  --xt-spacing-sm: 6px;
-  --xt-spacing-md: 9px;
-  --xt-spacing-lg: 12px;
+// 大字体主题 - 增量 4px
+[data-size="large"] {
+  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-large};
+  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-large};
+  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-large};
+  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-large};
+  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-large};
+  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-large};
 }

package/src/styles/variables.scss

@@ -44,14 +44,21 @@ $xt-color-border-lighter: #EBEEF5;          // 边框更浅色
 $xt-color-border-extra-light: #F2F6FC;      // 边框极浅色
 
 // ===========================
-// 字体大小
+// 字体大小 - 基础值
 // ===========================
-$xt-font-size-extra-large: 20px;             // 特大字体
-$xt-font-size-large: 18px;                   // 大字体
-$xt-font-size-medium: 16px;                  // 中等字体
+$xt-font-size-extra-large: 20px;             // 特大字体基础值
+$xt-font-size-large: 18px;                   // 大字体基础值
+$xt-font-size-medium: 16px;                  // 中等字体基础值
 $xt-font-size-base: 14px;                    // 基准字体 - Element UI 默认
-$xt-font-size-small: 13px;                   // 小字体
-$xt-font-size-extra-small: 12px;             // 特小字体
+$xt-font-size-small: 13px;                   // 小字体基础值
+$xt-font-size-extra-small: 12px;             // 特小字体基础值
+
+// ===========================
+// 字体大小增量（用于主题切换）
+// ===========================
+$xt-font-size-increment-small: 0px;          // 小尺寸增量
+$xt-font-size-increment-medium: 2px;         // 中尺寸增量
+$xt-font-size-increment-large: 4px;          // 大尺寸增量
 
 // ===========================
 // 间距