xt-element-ui 1.0.5 → 1.0.7

package/lib/index.umd.min.js

@@ -1 +1 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("ElementUI"),require("Vue")):"function"===typeof define&&define.amd?define("xt-element-ui",["ElementUI","Vue"],t):"object"===typeof exports?exports["xt-element-ui"]=t(require("ElementUI"),require("Vue")):e["xt-element-ui"]=t(e["ElementUI"],e["Vue"])})("undefined"!==typeof self?self:this,(function(e,t){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"0fae":function(e,t,n){},"5f72":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},fb15:function(e,t,n){"use strict";if(n.r(t),n.d(t,"getConfig",(function(){return z})),n.d(t,"setConfig",(function(){return V})),n.d(t,"setTheme",(function(){return X})),n.d(t,"setSize",(function(){return P})),n.d(t,"setPrimaryColor",(function(){return T})),n.d(t,"getTheme",(function(){return k})),n.d(t,"getSize",(function(){return R})),n.d(t,"getPrimaryColor",(function(){return q})),n.d(t,"resetConfig",(function(){return A})),n.d(t,"onConfigChange",(function(){return M})),"undefined"!==typeof window){var o=window.document.currentScript,r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=n("8bbf"),u=n.n(i),f=n("5f72"),c=n.n(f),l=(n("0fae"),function(){var e=this,t=e._self._c;return t("el-button",{on:{click:e.handleClick}},[e._t("default")],2)}),s=[],a={name:"XtButton",methods:{handleClick(){this.$emit("click")}}},d=a;function p(e,t,n,o,r,i,u,f){var c,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),i&&(l._scopeId="data-v-"+i),u?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(u)},l._ssrRegister=c):r&&(c=f?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(l.functional){l._injectStyles=c;var s=l.render;l.render=function(e,t){return c.call(t),s(e,t)}}else{var a=l.beforeCreate;l.beforeCreate=a?[].concat(a,c):[c]}return{exports:e,options:l}}var m=p(d,l,s,!1,null,null,null),h=m.exports,y=h,b=function(){var e=this,t=e._self._c;return t("el-input",{attrs:{value:e.value,placeholder:e.placeholder},on:{input:function(t){return e.$emit("input",t)}}})},_=[],v={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},g=v,C=p(g,b,_,!1,null,null,null),w=C.exports,x=w;"undefined"!==typeof window&&(window.Vue=u.a);const E=[y,x];u.a.use(c.a);const $=function(e){$.installed||($.installed=!0,E.forEach(t=>{e.component(t.name,t)}))};"undefined"!==typeof window&&window.Vue&&$(window.Vue);var j={install:$,Button:y,Input:x};const S={theme:"light",size:"medium",primaryColor:"#1890ff"};let I={...S};const U=[],O=function(e,t){U.forEach(n=>{n(e,t)})},z=function(){return{...I}},V=function(e){"object"===typeof e&&null!==e?(void 0!==e.theme&&X(e.theme),void 0!==e.size&&P(e.size),void 0!==e.primaryColor&&T(e.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},X=function(e){const t=["light","dark","compact"];t.includes(e)?(I.theme=e,document.documentElement.setAttribute("data-theme",e),O("theme",e)):console.warn(`[XtElementUI] 无效的主题值: ${e}，可选值: ${t.join(", ")}`)},P=function(e){const t=["small","medium","large"];t.includes(e)?(I.size=e,document.documentElement.setAttribute("data-size",e),O("size",e)):console.warn(`[XtElementUI] 无效的大小值: ${e}，可选值: ${t.join(", ")}`)},T=function(e){const t=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;t.test(e)?(I.primaryColor=e,document.documentElement.style.setProperty("--xt-color-primary",e),O("primaryColor",e)):console.warn(`[XtElementUI] 无效的颜色值: ${e}，请使用十六进制颜色格式，如 #1890ff`)},k=function(){return I.theme},R=function(){return I.size},q=function(){return I.primaryColor},A=function(){V(S)},M=function(e){if("function"===typeof e)return U.push(e),function(){const t=U.indexOf(e);t>-1&&U.splice(t,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")};t["default"]=j}})}));
+(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")}({1809:function(t,e,n){},"1e2e":function(t,e,n){"use strict";n("b7a7")},2580:function(t,e,n){"use strict";n("1809")},"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"}},4755:function(t,e,n){"use strict";n("991c")},"991c":function(t,e,n){},b7a7: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 l.a})),n.d(e,"getConfig",(function(){return rt})),n.d(e,"setConfig",(function(){return it})),n.d(e,"setTheme",(function(){return lt})),n.d(e,"setSize",(function(){return at})),n.d(e,"setPrimaryColor",(function(){return ut})),n.d(e,"getTheme",(function(){return st})),n.d(e,"getSize",(function(){return ct})),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"),l=n.n(i);const a={theme:"light",size:"medium",primaryColor:"#1890ff"};let u={...a};const s=[],c=function(t,e){s.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),c("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),c("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),c("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,l,a){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),o&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),l?(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(l)},s._ssrRegister=u):r&&(u=a?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(s.functional){s._injectStyles=u;var c=s.render;s.render=function(t,e){return u.call(e),c(t,e)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:s}}var _=y(h,x,C,!1,null,null,null),v=_.exports,S=v,b=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)}}})},E=[],F={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},$=F,w=y($,b,E,!1,null,null,null),B=w.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"}})},j=[],X={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}`]}}},I=X,T=(n("4755"),y(I,z,j,!1,null,"617fe54e",null)),A=T.exports,L=A,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("1e2e"),y(D,O,R,!1,null,null,null)),k=M.exports,V=k,N=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)])},H=[],W={name:"XtCardItem",props:{type:{},title:{},value:{},unit:{},icon:{},iconIn:{default:"right"},noPadding:{type:Boolean,default:!1}}},q=W,G=(n("2580"),y(q,N,H,!1,null,null,null)),J=G.exports,K=J;const Q=[S,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:S,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&&lt(t.theme),void 0!==t.size&&at(t.size),void 0!==t.primaryColor&&ut(t.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},lt=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(", ")}`)},at=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`)},st=function(){return et.theme},ct=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.5",
+  "version": "1.0.7",
   "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.4"
+    "xt-element-ui": "^1.0.6"
   }
 }

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">
+.xt-card{
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgha(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,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:"XtCardItem",
+  props:{
+    type:{},
+    title:{},
+    value:{},
+    unit:{},
+    icon:{},
+    iconIn:{default:"right"},
+    noPadding:{type:Boolean,default:false}
+  }
+}
+</script>
+<style lang="scss">
+.xt-card{
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgha(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/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">
+    
+  </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

@@ -1,29 +1,25 @@
-// 导入 Vue
-import Vue from 'vue'
+// 导入 SCSS 变量（通过 CSS Modules :export 导出）
+import variables from './styles/export.scss'
 
-// 在导入 Element UI 之前，先将 Vue 设置为全局变量
-if (typeof window !== 'undefined') {
-  window.Vue = Vue
-}
-
-// 导入 Element UI 并注册
-import Element from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+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
 ]
 
 
-// 注册 Element UI
-Vue.use(Element)
-
 // 定义 install 方法，Vue.use() 会自动调用
 const install = function (Vue) {
   if (install.installed) return
@@ -33,6 +29,7 @@ const install = function (Vue) {
   components.forEach(component => {
     Vue.component(component.name, component)
   })
+  Vue.prototype.$utils = utils
 }
 
 // 支持全局 script 标签引入
@@ -45,9 +42,17 @@ export default {
   install,
   // 按需导出组件
   Button,
-  Input
+  Input,
+  FlexBox,
+  Card,
+  CardItem
 }
 
+// 导出工具函数和变量
+export {
+  utils,
+  variables
+}
 
 // 默认配置
 const defaultConfig = {
@@ -91,9 +96,9 @@ export const setConfig = function(config) {
   }
 }
 
-// 设置主题
+// 设置主题（只控制颜色）
 export const setTheme = function(theme) {
-  const validThemes = ['light', 'dark', 'compact']
+  const validThemes = ['light', 'dark']
   if (!validThemes.includes(theme)) {
     console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
     return
@@ -104,7 +109,7 @@ export const setTheme = function(theme) {
   emitConfigChange('theme', theme)
 }
 
-// 设置字体大小
+// 设置字体大小和间距
 export const setSize = function(size) {
   const validSizes = ['small', 'medium', 'large']
   if (!validSizes.includes(size)) {
@@ -119,7 +124,6 @@ export const setSize = function(size) {
 
 // 设置主色调
 export const setPrimaryColor = function(color) {
-  // 简单的颜色格式验证
   const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
   if (!colorRegex.test(color)) {
     console.warn(`[XtElementUI] 无效的颜色值: ${color}，请使用十六进制颜色格式，如 #1890ff`)

package/src/styles/export.scss

@@ -0,0 +1,86 @@
+@use './variables.scss' as *;
+
+// SCSS 变量导出给 JavaScript 使用
+:export {
+  // ===========================
+  // 主色调系列
+  // ===========================
+  xtColorPrimary: #{$xt-color-primary};           // 主颜色 - Element UI 标准蓝色
+  xtColorSuccess: #{$xt-color-success};           // 成功色 - Element UI 标准绿色
+  xtColorWarning: #{$xt-color-warning};           // 警告色 - Element UI 标准橙色
+  xtColorDanger: #{$xt-color-danger};             // 危险色 - Element UI 标准红色
+  xtColorInfo: #{$xt-color-info};                 // 信息色 - Element UI 标准灰色
+
+  // 主色调浅色系列
+  xtColorPrimaryLight3: #{$xt-color-primary-light-3};   // 主色浅色 30%
+  xtColorPrimaryLight5: #{$xt-color-primary-light-5};   // 主色浅色 50%
+  xtColorPrimaryLight7: #{$xt-color-primary-light-7};   // 主色浅色 70%
+  xtColorPrimaryLight8: #{$xt-color-primary-light-8};   // 主色浅色 80%
+  xtColorPrimaryLight9: #{$xt-color-primary-light-9};   // 主色浅色 90%
+
+  // ===========================
+  // 文字颜色
+  // ===========================
+  xtColorTextPrimary: #{$xt-color-text-primary};       // 主要文字颜色 - 最深
+  xtColorTextRegular: #{$xt-color-text-regular};       // 常规文字颜色 - 中等
+  xtColorTextSecondary: #{$xt-color-text-secondary};   // 次要文字颜色 - 较浅
+  xtColorTextPlaceholder: #{$xt-color-text-placeholder}; // 占位符文字颜色
+  xtColorTextDisabled: #{$xt-color-text-disabled};     // 禁用状态文字颜色
+
+  // ===========================
+  // 背景颜色
+  // ===========================
+  xtColorBgPrimary: #{$xt-color-bg-primary};       // 主背景色 - 白色
+  xtColorBgSecondary: #{$xt-color-bg-secondary};   // 次要背景色 - 浅灰
+  xtColorBgHover: #{$xt-color-bg-hover};           // 悬停背景色
+  xtColorBgContainer: #{$xt-color-bg-container};   // 容器背景色
+  xtColorBgOverlay: #{$xt-color-bg-overlay};       // 浮层背景色
+
+  // ===========================
+  // 边框颜色
+  // ===========================
+  xtColorBorder: #{$xt-color-border};                   // 边框颜色 - 标准
+  xtColorBorderLight: #{$xt-color-border-light};       // 边框浅色
+  xtColorBorderLighter: #{$xt-color-border-lighter};   // 边框更浅色
+  xtColorBorderExtraLight: #{$xt-color-border-extra-light}; // 边框极浅色
+
+  // ===========================
+  // 字体大小
+  // ===========================
+  xtFontSizeExtraLarge: #{$xt-font-size-extra-large};   // 特大字体
+  xtFontSizeLarge: #{$xt-font-size-large};              // 大字体
+  xtFontSizeMedium: #{$xt-font-size-medium};            // 中等字体
+  xtFontSizeBase: #{$xt-font-size-base};                // 基准字体
+  xtFontSizeSmall: #{$xt-font-size-small};              // 小字体
+  xtFontSizeExtraSmall: #{$xt-font-size-extra-small};   // 特小字体
+
+  // ===========================
+  // 间距
+  // ===========================
+  xtSpacingXs: #{$xt-spacing-xs};   // 最小间距
+  xtSpacingSm: #{$xt-spacing-sm};   // 小间距
+  xtSpacingMd: #{$xt-spacing-md};   // 中间距
+  xtSpacingLg: #{$xt-spacing-lg};   // 大间距
+  xtSpacingXl: #{$xt-spacing-xl};   // 特大间距
+
+  // ===========================
+  // 圆角
+  // ===========================
+  xtBorderRadiusBase: #{$xt-border-radius-base};     // 基准圆角
+  xtBorderRadiusSmall: #{$xt-border-radius-small};   // 小圆角
+  xtBorderRadiusRound: #{$xt-border-radius-round};   // 圆角（胶囊状）
+  xtBorderRadiusCircle: #{$xt-border-radius-circle}; // 圆形
+
+  // ===========================
+  // 阴影
+  // ===========================
+  xtShadowSm: #{$xt-shadow-sm};   // 小阴影
+  xtShadowMd: #{$xt-shadow-md};   // 中等阴影
+  xtShadowLg: #{$xt-shadow-lg};   // 大阴影
+
+  // ===========================
+  // 过渡动画
+  // ===========================
+  xtTransitionDuration: #{$xt-transition-duration};         // 默认过渡时长
+  xtTransitionDurationFast: #{$xt-transition-duration-fast}; // 快速过渡时长
+}

package/src/styles/theme-element.scss

@@ -1,4 +1,4 @@
-@import './variables.scss';
+@use './variables.scss' as *;
 
 /* Element UI 风格主题 */
 :root {

package/src/styles/theme.scss

@@ -1,106 +1,128 @@
 @use './variables.scss' as *;
 
 :root {
+  // 主色调系列
   --xt-color-primary: #{$xt-color-primary};
   --xt-color-success: #{$xt-color-success};
   --xt-color-warning: #{$xt-color-warning};
   --xt-color-danger: #{$xt-color-danger};
   --xt-color-info: #{$xt-color-info};
 
+  // 主色调浅色系列
+  --xt-color-primary-light-3: #{$xt-color-primary-light-3};
+  --xt-color-primary-light-5: #{$xt-color-primary-light-5};
+  --xt-color-primary-light-7: #{$xt-color-primary-light-7};
+  --xt-color-primary-light-8: #{$xt-color-primary-light-8};
+  --xt-color-primary-light-9: #{$xt-color-primary-light-9};
+
+  // 文字颜色
   --xt-color-text-primary: #{$xt-color-text-primary};
+  --xt-color-text-regular: #{$xt-color-text-regular};
   --xt-color-text-secondary: #{$xt-color-text-secondary};
   --xt-color-text-placeholder: #{$xt-color-text-placeholder};
   --xt-color-text-disabled: #{$xt-color-text-disabled};
 
+  // 背景颜色
   --xt-color-bg-primary: #{$xt-color-bg-primary};
   --xt-color-bg-secondary: #{$xt-color-bg-secondary};
   --xt-color-bg-hover: #{$xt-color-bg-hover};
+  --xt-color-bg-container: #{$xt-color-bg-container};
+  --xt-color-bg-overlay: #{$xt-color-bg-overlay};
 
+  // 边框颜色
   --xt-color-border: #{$xt-color-border};
   --xt-color-border-light: #{$xt-color-border-light};
-
-  --xt-font-size-xs: #{$xt-font-size-xs};
-  --xt-font-size-sm: #{$xt-font-size-sm};
-  --xt-font-size-md: #{$xt-font-size-md};
-  --xt-font-size-lg: #{$xt-font-size-lg};
-  --xt-font-size-xl: #{$xt-font-size-xl};
-
+  --xt-color-border-lighter: #{$xt-color-border-lighter};
+  --xt-color-border-extra-light: #{$xt-color-border-extra-light};
+
+  // 字体大小
+  --xt-font-size-extra-large: #{$xt-font-size-extra-large};
+  --xt-font-size-large: #{$xt-font-size-large};
+  --xt-font-size-medium: #{$xt-font-size-medium};
+  --xt-font-size-base: #{$xt-font-size-base};
+  --xt-font-size-small: #{$xt-font-size-small};
+  --xt-font-size-extra-small: #{$xt-font-size-extra-small};
+
+  // 间距
   --xt-spacing-xs: #{$xt-spacing-xs};
   --xt-spacing-sm: #{$xt-spacing-sm};
   --xt-spacing-md: #{$xt-spacing-md};
   --xt-spacing-lg: #{$xt-spacing-lg};
   --xt-spacing-xl: #{$xt-spacing-xl};
 
-  --xt-border-radius-sm: #{$xt-border-radius-sm};
-  --xt-border-radius-md: #{$xt-border-radius-md};
-  --xt-border-radius-lg: #{$xt-border-radius-lg};
+  // 圆角
+  --xt-border-radius-base: #{$xt-border-radius-base};
+  --xt-border-radius-small: #{$xt-border-radius-small};
+  --xt-border-radius-round: #{$xt-border-radius-round};
+  --xt-border-radius-circle: #{$xt-border-radius-circle};
+
+  // 阴影
+  --xt-shadow-sm: #{$xt-shadow-sm};
+  --xt-shadow-md: #{$xt-shadow-md};
+  --xt-shadow-lg: #{$xt-shadow-lg};
+
+  // 过渡动画
+  --xt-transition-duration: #{$xt-transition-duration};
+  --xt-transition-duration-fast: #{$xt-transition-duration-fast};
 }
 
+// 暗色主题 - 只控制颜色
 [data-theme="dark"] {
-  --xt-color-primary: #177ddc;
-  --xt-color-success: #48b059;
-  --xt-color-warning: #d4981a;
-  --xt-color-danger: #d93030;
-  --xt-color-info: #177ddc;
+  --xt-color-primary: #{$xt-color-primary};
+  --xt-color-success: #67C23A;
+  --xt-color-warning: #E6A23C;
+  --xt-color-danger: #F56C6C;
+  --xt-color-info: #909399;
 
   --xt-color-text-primary: rgba(255, 255, 255, 0.95);
-  --xt-color-text-secondary: rgba(255, 255, 255, 0.75);
-  --xt-color-text-placeholder: rgba(255, 255, 255, 0.55);
-  --xt-color-text-disabled: rgba(255, 255, 255, 0.35);
+  --xt-color-text-regular: rgba(255, 255, 255, 0.8);
+  --xt-color-text-secondary: rgba(255, 255, 255, 0.6);
+  --xt-color-text-placeholder: rgba(255, 255, 255, 0.4);
+  --xt-color-text-disabled: rgba(255, 255, 255, 0.3);
 
   --xt-color-bg-primary: #1f1f1f;
   --xt-color-bg-secondary: #2d2d2d;
   --xt-color-bg-hover: #3d3d3d;
+  --xt-color-bg-container: #1f1f1f;
+  --xt-color-bg-overlay: #2d2d2d;
 
   --xt-color-border: #434343;
   --xt-color-border-light: #3d3d3d;
+  --xt-color-border-lighter: #3d3d3d;
+  --xt-color-border-extra-light: #434343;
 }
 
+// 紧凑主题
 [data-theme="compact"] {
-  --xt-color-primary: #096dd9;
-  --xt-color-success: #389e0d;
-  --xt-color-warning: #d49806;
-  --xt-color-danger: #cf1322;
-}
+  --xt-font-size-base: 13px;
+  --xt-font-size-small: 12px;
 
-[data-size="small"] {
-  --xt-font-size-xs: #{12 + 0}px;
-  --xt-font-size-sm: #{14 + 0}px;
-  --xt-font-size-md: #{16 + 0}px;
-  --xt-font-size-lg: #{18 + 0}px;
-  --xt-font-size-xl: #{20 + 0}px;
-
-  --xt-spacing-xs: #{4 + 0}px;
-  --xt-spacing-sm: #{8 + 0}px;
-  --xt-spacing-md: #{16 + 0}px;
-  --xt-spacing-lg: #{24 + 0}px;
-  --xt-spacing-xl: #{32 + 0}px;
+  --xt-spacing-xs: 3px;
+  --xt-spacing-sm: 6px;
+  --xt-spacing-md: 10px;
+  --xt-spacing-lg: 14px;
 }
 
-[data-size="medium"] {
-  --xt-font-size-xs: #{12 + 2}px;
-  --xt-font-size-sm: #{14 + 2}px;
-  --xt-font-size-md: #{16 + 2}px;
-  --xt-font-size-lg: #{18 + 2}px;
-  --xt-font-size-xl: #{20 + 2}px;
-
-  --xt-spacing-xs: #{4 + 1}px;
-  --xt-spacing-sm: #{8 + 2}px;
-  --xt-spacing-md: #{16 + 4}px;
-  --xt-spacing-lg: #{24 + 6}px;
-  --xt-spacing-xl: #{32 + 8}px;
+// 大字体主题
+[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;
 }
 
-[data-size="large"] {
-  --xt-font-size-xs: #{12 + 4}px;
-  --xt-font-size-sm: #{14 + 4}px;
-  --xt-font-size-md: #{16 + 4}px;
-  --xt-font-size-lg: #{18 + 4}px;
-  --xt-font-size-xl: #{20 + 4}px;
-
-  --xt-spacing-xs: #{4 + 2}px;
-  --xt-spacing-sm: #{8 + 4}px;
-  --xt-spacing-md: #{16 + 8}px;
-  --xt-spacing-lg: #{24 + 12}px;
-  --xt-spacing-xl: #{32 + 16}px;
+// 小字体主题
+[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;
 }