xt-element-ui 1.1.3 → 1.1.5

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

@@ -0,0 +1,150 @@
+<template>
+  <el-card 
+    class="ex-card" 
+    :class="cardClasses"
+    v-bind="$attrs"
+  >
+    <template #header v-if="$slots.header || title">
+      <slot name="header">{{ title }}</slot>
+    </template>
+    <slot></slot>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ExCard',
+  inheritAttrs: false,
+  inject: {
+    xtConfig: {
+      default: () => ({
+        theme: 'light',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+      validator: (val) => ['always', 'hover', 'never'].includes(val)
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    bodyClass: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: (val) => !val || ['small', 'medium', 'large'].includes(val)
+    }
+  },
+  computed: {
+    finalSize() {
+      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
+      return this.size || this.xtConfig.size || 'medium'
+    },
+    cardClasses() {
+      return [
+        `ex-card-${this.shadow}`,
+        `ex-card-${this.finalSize}`,
+        {
+          'ex-card-no-border': !this.bordered,
+          [this.bodyClass]: this.bodyClass
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ex-card {
+  transition: all 0.3s;
+  border-radius: 8px;
+  
+  ::v-deep .el-card__header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #ebeef5;
+    background-color: #fafafa;
+    font-weight: 600;
+  }
+  
+  ::v-deep .el-card__body {
+    padding: 16px;
+  }
+}
+
+/* small size */
+.ex-card-small {
+  border-radius: 8px;
+  
+  ::v-deep .el-card__header {
+    padding: 12px 16px;
+  }
+  
+  ::v-deep .el-card__body {
+    padding: 16px;
+  }
+}
+
+/* medium size */
+.ex-card-medium {
+  border-radius: 10px;
+  
+  ::v-deep .el-card__header {
+    padding: 14px 18px;
+  }
+  
+  ::v-deep .el-card__body {
+    padding: 18px;
+  }
+}
+
+/* large size */
+.ex-card-large {
+  border-radius: 12px;
+  
+  ::v-deep .el-card__header {
+    padding: 16px 20px;
+  }
+  
+  ::v-deep .el-card__body {
+    padding: 20px;
+  }
+}
+
+.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;
+  
+  ::v-deep .el-card__header {
+    border-bottom: none;
+  }
+}
+</style>

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 };