xt-element-ui 1.1.2 → 1.1.4

package/src/components/ex-card/style/index.scss

@@ -0,0 +1,69 @@
+// ExCard 组件样式
+@import '../../../styles/variables.scss';
+
+.ex-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+  font-size: var(--ex-card-font-size, 14px);
+  
+  .el-card__header {
+    padding: var(--ex-card-header-padding, 16px 20px);
+    border-bottom: 1px solid #ebeef5;
+    background-color: #fafafa;
+    font-weight: 600;
+  }
+  
+  .el-card__body {
+    padding: var(--ex-card-body-padding, 20px);
+  }
+}
+
+.ex-card-small {
+  font-size: 12px;
+  
+  .el-card__header {
+    font-size: 12px;
+  }
+}
+
+.ex-card-medium {
+  font-size: 14px;
+  
+  .el-card__header {
+    font-size: 14px;
+  }
+}
+
+.ex-card-large {
+  font-size: 16px;
+  
+  .el-card__header {
+    font-size: 16px;
+  }
+}
+
+.ex-card-always {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.ex-card-hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  }
+}
+
+.ex-card-never {
+  box-shadow: none;
+  border: 1px solid #ebeef5;
+}
+
+.ex-card-no-border {
+  border: none;
+  
+  .el-card__header {
+    border-bottom: none;
+  }
+}
+

package/src/components/{chart → ex-chart}/ExBar.vue

@@ -90,6 +90,9 @@ export default {
         }
         _self.initChart();
       }
+    },
+    theme(newVal) {
+      this.initChart();
     }
   },
   mounted() {

package/src/components/{chart → ex-chart}/ExLine.vue

@@ -57,6 +57,9 @@ export default {
         const _self = this;
         _self.initChart();
       }
+    },
+    theme(newVal) {
+      this.initChart();
     }
   },
   mounted() {

package/src/components/{chart → ex-chart}/ExMulti.vue

@@ -125,6 +125,11 @@ export default {
         const _self = this;
         _self.initChart();
       }
+    },
+    theme(newVal) {
+      this.myChart && this.myChart.dispose();
+      this.myChart = null;
+      this.initChart();
     }
   },
   mounted() {

package/src/components/{chart → ex-chart}/ExPie.vue

@@ -67,6 +67,9 @@ export default {
         const _self = this;
         _self.initChart();
       }
+    },
+    theme(newVal) {
+      this.initChart();
     }
   },
   mounted() {

package/src/components/{chart → ex-chart}/ExTrend.vue

@@ -53,6 +53,9 @@ export default {
         const _self = this;
         _self.initChart();
       }
+    },
+    theme(newVal) {
+      this.initChart();
     }
   },
   mounted() {

package/src/components/ex-chart/index.js

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

package/src/components/ex-chart/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
+  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
+  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
+  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
+  <ex-trend v-else-if="type=='trend'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-trend>
+</template>
+<script>
+export default {
+  name: "ExChart",
+  components: {
+    ExBar: () => import("./ExBar.vue"),
+    ExLine: () => import("./ExLine.vue"),
+    ExPie: () => import("./ExPie.vue"),
+    ExMulti: () => import("./ExMulti.vue"),
+    ExTrend: () => import("./ExTrend.vue")
+  },
+  props: {
+    theme: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (value) => {
+        return ['small', 'medium', 'large'].includes(value)
+      }
+    },
+    type: {
+      type: String,
+      required: true,
+      default: "bar"
+    }
+  },
+  data() {
+    return {
+      myTheme: this.theme,
+      mySize: this.size,
+      observer: null
+    };
+  },
+  mounted() {
+    // 初始化时检测父元素的 data-theme
+    this.detectParentTheme();
+    
+    // 监听父元素的 data-theme 属性变化
+    this.observeThemeChange();
+  },
+  beforeUnmount() {
+    // 清理观察器
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  watch: {
+    theme(newVal) {
+      this.myTheme = newVal;
+    },
+    size(newVal) {
+      this.mySize = newVal;
+    }
+  },
+  methods: {
+    // 检测父元素的 data-theme 属性
+    detectParentTheme() {
+      if (this.theme) {
+        // 如果用户显式传入了 theme prop，使用传入的值
+        this.myTheme = this.theme;
+        return;
+      }
+      
+      // 查找最近的带有 data-theme 属性的父元素
+      let parent = this.$el ? this.$el.parentElement : null;
+      while (parent) {
+        const parentTheme = parent.getAttribute('data-theme');
+        if (parentTheme) {
+          this.myTheme = parentTheme === 'dark' ? 'dark' : 'default';
+          return;
+        }
+        parent = parent.parentElement;
+      }
+      
+      // 如果没有找到，检查 document.body 或 document.documentElement
+      const bodyTheme = document.body.getAttribute('data-theme');
+      const htmlTheme = document.documentElement.getAttribute('data-theme');
+      if (bodyTheme === 'dark' || htmlTheme === 'dark') {
+        this.myTheme = 'dark';
+      } else {
+        this.myTheme = 'default';
+      }
+    },
+    
+    // 监听主题变化
+    observeThemeChange() {
+      if (!this.$el) return;
+      
+      // 创建 MutationObserver 监听父元素的属性变化
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+            const newTheme = mutation.target.getAttribute('data-theme');
+            if (newTheme === 'dark') {
+              this.myTheme = 'dark';
+            } else if (newTheme === 'light') {
+              this.myTheme = 'default';
+            }
+          }
+        });
+      });
+      
+      // 监听当前元素和所有父元素的属性变化
+      let parent = this.$el.parentElement;
+      while (parent) {
+        this.observer.observe(parent, {
+          attributes: true,
+          attributeFilter: ['data-theme']
+        });
+        parent = parent.parentElement;
+      }
+      
+      // 同时监听 body 和 html 的变化
+      this.observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+      this.observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+    }
+  }
+};
+</script>

package/src/components/{chart → ex-chart}/theme/dark.js

@@ -1,6 +1,6 @@
 export default {
   color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
-  backgroundColor: "#ffffff",
+  backgroundColor: "transparent",
   textStyle: {
     fontFamily: "Microsoft YaHei, sans-serif"
   },

package/src/components/{chart → ex-chart}/utils.js

@@ -1,5 +1,3 @@
-import * as echarts from "echarts";
-
 import themeWhite from "./theme/white";
 import themeDark from "./theme/dark";
 import themeBlue from "./theme/blue";
@@ -15,8 +13,22 @@ const themeKeys = {
   "orange": themeOrange
 };
 
-for (const key in themeKeys) {
-  echarts.registerTheme(key, themeKeys[key]);
+// echarts 仅在客户端加载，避免 SSR 编译/渲染报错
+let echarts = null;
+
+function getEcharts() {
+  if (!echarts && typeof window !== 'undefined') {
+    try {
+      echarts = require('echarts');
+      // 注册所有主题
+      for (const key in themeKeys) {
+        echarts.registerTheme(key, themeKeys[key]);
+      }
+    } catch (e) {
+      console.warn('[ExChart] echarts 加载失败:', e.message);
+    }
+  }
+  return echarts;
 }
 
 // 字体大小配置
@@ -162,6 +174,10 @@ EchartsUtil.applyFontSize = function(themeOption, size) {
 };
 
 EchartsUtil.init = function(dom, theme, customOption, size) {
+  const ec = getEcharts();
+  // SSR 环境下忽略初始化
+  if (!ec || !dom) return null;
+  
   theme = theme || "default";
   size = size || "medium";
   customOption = customOption || {};
@@ -178,7 +194,7 @@ EchartsUtil.init = function(dom, theme, customOption, size) {
   
   const option = this.mergeOptions(themeOption, customOption);
   
-  const chart = echarts.init(dom, useTheme);
+  const chart = ec.init(dom, useTheme);
   chart.setOption(option, true);
   
   this.chartInstanceList.push({
@@ -193,7 +209,8 @@ EchartsUtil.init = function(dom, theme, customOption, size) {
 };
 
 EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme) {
-  if (!dom || !chartIns) return;
+  const ec = getEcharts();
+  if (!ec || !dom || !chartIns) return;
   
   customOption = customOption || {};
   newTheme = newTheme || "default";
@@ -201,7 +218,7 @@ EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme)
   this.currentTheme = newTheme;
   chartIns.dispose();
   
-  const newChart = echarts.init(dom, newTheme, customOption);
+  const newChart = ec.init(dom, newTheme, customOption);
   
   const item = this.chartInstanceList.find(function(v) {
     return v.dom === dom;
@@ -214,26 +231,37 @@ EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme)
   return newChart;
 };
 
-EchartsUtil.changeAllTheme = function(newTheme) {
-  if (!newTheme) return;
+EchartsUtil.changeAllTheme = function(newTheme, newSize) {
+  const ec = getEcharts();
+  if (!ec || !newTheme) return;
   
   this.currentTheme = newTheme;
+  // 如果传入了新的 size，则更新全局 size
+  if (newSize) {
+    this.currentSize = newSize;
+  }
   
   this.chartInstanceList.forEach(function(item) {
     const dom = item.dom;
     const chart = item.chart;
     const customOption = item.customOption;
+    // 使用图表自己的 size，如果没有则使用全局 size
+    const useSize = item.size || EchartsUtil.currentSize;
     
     if (chart) {
       chart.dispose();
     }
     
-    const newChart = echarts.init(dom, newTheme);
-    const themeOption = themeKeys[newTheme];
+    const newChart = ec.init(dom, newTheme);
+    let themeOption = themeKeys[newTheme];
+    // 应用字体大小配置
+    themeOption = EchartsUtil.applyFontSize(themeOption, useSize);
     const option = EchartsUtil.mergeOptions(themeOption, customOption);
     
     newChart.setOption(option, true);
     item.chart = newChart;
+    // 更新图表的 size 记录
+    item.size = useSize;
     EchartsUtil.bindResize(newChart);
   });
 };
@@ -270,4 +298,4 @@ EchartsUtil.destroyAll = function() {
 
 export default EchartsUtil;
 
-export { echarts };
+export { getEcharts };

package/src/components/index.scss

@@ -1,22 +1,28 @@
 // 组件样式统一入口文件
 
 // Button 组件样式
-@import './button/style/index.scss';
+@import './xt-button/style/index.scss';
 
 // Card 组件样式
-@import './card/style/index.scss';
+@import './xt-card/style/index.scss';
 
 // CardItem 组件样式
-@import './card-item/style/index.scss';
+@import './xt-card-item/style/index.scss';
 
 // Input 组件样式
-@import './input/style/index.scss';
+@import './xt-input/style/index.scss';
 
 // FlexBox 组件样式
-@import './flex-box/style/index.scss';
+@import './xt-flex-box/style/index.scss';
 
 // ConfigProvider 组件样式
-@import './config-provider/style/index.scss';
+@import './xt-config-provider/style/index.scss';
 
 // Text 组件样式
-@import './text/style/index.scss';
+@import './xt-text/style/index.scss';
+
+// ExButton 组件样式
+@import './ex-button/style/index.scss';
+
+// ExCard 组件样式
+@import './ex-card/style/index.scss';

package/src/components/{button → xt-button}/index.vue

@@ -23,7 +23,7 @@ export default {
     type: {
       type: String,
       default: '',
-      validator: (val) => ['primary', 'success', 'warning', 'danger'].includes(val)
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
     size: {
       type: String,

package/src/components/{card-item → xt-card-item}/index.vue

@@ -34,7 +34,7 @@
   </FlexBox>
 </template>
 <script>
-import FlexBox from '../flex-box/index.vue'
+import FlexBox from '../xt-flex-box/index.vue'
 export default {
   name: "XtCardItem",
   components: {

package/src/components/{config-provider → xt-config-provider}/index.vue

@@ -2,6 +2,38 @@
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
+  provide() {
+    return {
+      xtConfig: {
+        theme: this.theme,
+        size: this.size,
+        primaryColor: this.primaryColor
+      }
+    }
+  },
+  watch: {
+    theme(newVal) {
+      this.$provide('xtConfig', {
+        theme: newVal,
+        size: this.size,
+        primaryColor: this.primaryColor
+      })
+    },
+    size(newVal) {
+      this.$provide('xtConfig', {
+        theme: this.theme,
+        size: newVal,
+        primaryColor: this.primaryColor
+      })
+    },
+    primaryColor(newVal) {
+      this.$provide('xtConfig', {
+        theme: this.theme,
+        size: this.size,
+        primaryColor: newVal
+      })
+    }
+  },
   render(h) {
     // Vue 2 不支持 Fragment，当 tag="template" 时需要特殊处理
     // 如果设置了 proxyElement，则不渲染包裹元素，只渲染 slot 内容
@@ -77,6 +109,16 @@ export default {
       type: [HTMLElement, String, Object],
       default: null,
       description: '代理元素，将样式应用到该元素上。支持 HTMLElement、CSS选择器字符串或 ref 对象'
+    },
+    onThemeChange: {
+      type: Function,
+      default: null,
+      description: '主题改变时的钩子函数，接收参数: { theme, size, primaryColor }'
+    },
+    onStyleApplied: {
+      type: Function,
+      default: null,
+      description: '样式应用完成时的钩子函数，接收参数: { element, style, theme }'
     }
   },
   computed: {
@@ -257,13 +299,37 @@ export default {
       if (!element) return
       
       const style = this.mergedStyle
+      const prevTheme = element.getAttribute('data-theme')
       
+      // 应用样式到代理元素
       for (const key in style) {
         element.style.setProperty(key, style[key])
       }
       
       // 设置 data-theme 属性
       element.setAttribute('data-theme', this.theme)
+      
+      // 触发主题改变钩子（当主题实际发生变化时）
+      if (prevTheme !== this.theme && typeof this.onThemeChange === 'function') {
+        this.onThemeChange({
+          theme: this.theme,
+          size: this.size,
+          primaryColor: this.primaryColor,
+          prevTheme: prevTheme
+        })
+      }
+      
+      // 触发样式应用完成钩子
+      if (typeof this.onStyleApplied === 'function') {
+        this.onStyleApplied({
+          element: element,
+          style: style,
+          theme: this.theme,
+          size: this.size,
+          primaryColor: this.primaryColor
+        })
+      }
+      
     },
     
     clearProxyElementStyle() {

package/src/components/{date-picker → xt-date-picker}/index.vue

@@ -17,7 +17,7 @@ const typeFormatEnum = {
   datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
 };
 
-import FlexBox from '../flex-box/index.vue'
+import FlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
   name: "XtDatePicker",

package/src/components/{date-picker → xt-date-picker}/quarter.vue

@@ -1,4 +1,6 @@
-<template>
+ 
+ 
+ <template>
   <el-popover v-model="popoverVisible" trigger="click" :disabled="disabled" transition="el-zoom-in-top" :placement="placement" :width="popoverWidth" @hide="handleBlur">
     <div class="quarter-wrapper">
       <BaseFlexBox content="between">
@@ -15,7 +17,7 @@
 </template>
 
 <script>
-import BaseFlexBox from "../flex-box/index.vue";
+import BaseFlexBox from "../xt-flex-box/index.vue";
 import dateFns from "date-fns";
 export default {
   name: "DateQuarter",