xt-element-ui 1.1.4 → 1.1.5

package/src/components/xt-grid-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ex-grid-box" :style="styleAttrs">
+  <div class="xt-grid-box" :style="styleAttrs">
     <slot></slot>
   </div>
 </template>
@@ -8,35 +8,128 @@
 export default {
   name: "XtGridBox",
   props: {
+    // 列配置
     columns: {
-      type: [String, Array], // ["1fr","2fr", "20%"]
+      type: [String, Array, Number],
       default: "1fr"
     },
-    rows: { // 1
-      type: [String, Array], // ["1fr","2fr", "20%"]
-      default: "1fr"
+    // 行配置
+    rows: {
+      type: [String, Array],
+      default: "auto"
+    },
+    // 间距（同时控制行列间距）
+    gap: { type: String, default: "" },
+    // 行间距
+    rowGap: { type: String, default: "" },
+    // 列间距
+    colGap: { type: String, default: "" },
+    // 排列方向
+    flow: { 
+      type: String, 
+      default: "row",
+      validator: (val) => ['row', 'column', 'row dense', 'column dense'].includes(val)
+    },
+    // 命名区域
+    areas: { type: [String, Array], default: "" },
+    // 子项对齐（place-items）
+    align: { 
+      type: String, 
+      default: "stretch",
+      validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
     },
-    gap: { type: String, default: "" }
+    // 内容对齐（place-content）
+    justify: { 
+      type: String, 
+      default: "start",
+      validator: (val) => ['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'].includes(val)
+    },
+    // 响应式配置 { sm: 2, md: 3, lg: 4 }
+    responsive: { type: Object, default: () => ({}) },
+    // 是否自动填充
+    autoFlow: { type: String, default: "" }
   },
   computed: {
     styleAttrs() {
-      const gridTemplateRows = (typeof this.rows !== "string") ? this.rows.join(" ") : this.rows;
-      const gridTemplateColumns = (typeof this.columns !== "string") ? this.columns.join(" ") : this.columns;
-      return this.gap ? {
-        gridTemplateColumns,
-        gridTemplateRows,
-        gap: this.gap.toString().split(" ").map(_getGap).join(" ")
-      } : {
-        gridTemplateColumns,
-        gridTemplateRows
+      const styles = {
+        display: "grid"
+      };
+
+      // 处理列配置
+      if (typeof this.columns === 'number') {
+        styles.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
+      } else if (Array.isArray(this.columns)) {
+        styles.gridTemplateColumns = this.columns.join(" ");
+      } else {
+        styles.gridTemplateColumns = this.columns;
+      }
+
+      // 处理行配置
+      if (Array.isArray(this.rows)) {
+        styles.gridTemplateRows = this.rows.join(" ");
+      } else {
+        styles.gridTemplateRows = this.rows;
+      }
+
+      // 处理间距
+      if (this.gap) {
+        styles.gap = this.gap;
+      } else {
+        if (this.rowGap) styles.rowGap = this.rowGap;
+        if (this.colGap) styles.columnGap = this.colGap;
+      }
+
+      // 处理排列方向
+      if (this.flow) {
+        styles.gridAutoFlow = this.flow;
+      }
+
+      // 处理命名区域
+      if (this.areas) {
+        if (Array.isArray(this.areas)) {
+          styles.gridTemplateAreas = this.areas.map(row => `"${row}"`).join(" ");
+        } else {
+          styles.gridTemplateAreas = this.areas;
+        }
+      }
+
+      // 处理子项对齐
+      if (this.align) {
+        styles.placeItems = this.align;
+      }
+
+      // 处理内容对齐
+      if (this.justify) {
+        styles.placeContent = this.justify;
+      }
+
+      // 处理响应式断点
+      if (Object.keys(this.responsive).length > 0) {
+        this.addResponsiveStyles(styles);
+      }
+
+      return styles;
+    }
+  },
+  methods: {
+    addResponsiveStyles(styles) {
+      // 响应式断点映射
+      const breakpoints = {
+        xs: '(max-width: 575px)',
+        sm: '(min-width: 576px)',
+        md: '(min-width: 768px)',
+        lg: '(min-width: 992px)',
+        xl: '(min-width: 1200px)'
       };
+
+      Object.entries(this.responsive).forEach(([key, value]) => {
+        if (breakpoints[key]) {
+          const mediaQuery = `@media ${breakpoints[key]}`;
+          // 注意：内联样式不支持媒体查询，这里预留接口
+          // 实际响应式需要通过 CSS 类或其他方式实现
+        }
+      });
     }
   }
 };
 </script>
-
-<style lang="scss">
-.ex-grid-box{
-    display: grid;
-}
-</style>

package/src/components/xt-grid-box/style/index.scss

@@ -0,0 +1,93 @@
+@import '../../../styles/variables.scss';
+
+.xt-grid-box {
+  display: grid;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+// 默认间距变量
+:root {
+  --xt-grid-box-gap: 8px;
+}
+
+// 响应式网格类
+.xt-grid-box--auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
+}
+
+.xt-grid-box--auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--xt-grid-item-min-width, 200px), 1fr));
+}
+
+// 常见列数快捷类
+.xt-grid-box--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.xt-grid-box--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.xt-grid-box--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.xt-grid-box--cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.xt-grid-box--cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+// 子项默认样式
+.xt-grid-item {
+  box-sizing: border-box;
+}
+
+// 响应式断点
+@media (min-width: 576px) {
+  .xt-grid-box--sm-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .xt-grid-box--sm-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .xt-grid-box--md-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .xt-grid-box--md-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .xt-grid-box--md-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 992px) {
+  .xt-grid-box--lg-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .xt-grid-box--lg-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .xt-grid-box--lg-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .xt-grid-box--xl-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .xt-grid-box--xl-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .xt-grid-box--xl-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}

package/src/components/xt-grid-item/index.js

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

package/src/components/xt-grid-item/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="xt-grid-item" :style="styleAttrs">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XtGridItem",
+  props: {
+    // 跨列数
+    span: {
+      type: Number,
+      default: 1,
+      validator: (val) => val > 0
+    },
+    // 跨行数
+    rowSpan: {
+      type: Number,
+      default: 1,
+      validator: (val) => val > 0
+    },
+    // 起始列
+    start: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    // 起始行
+    rowStart: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    // 命名区域
+    area: {
+      type: String,
+      default: ""
+    },
+    // 对齐方式（justify-self）
+    justifySelf: {
+      type: String,
+      default: "auto",
+      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch'].includes(val)
+    },
+    // 对齐方式（align-self）
+    alignSelf: {
+      type: String,
+      default: "auto",
+      validator: (val) => ['auto', 'start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 自定义样式类
+    customClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    styleAttrs() {
+      const styles = {};
+
+      // 处理跨列
+      if (this.span > 1) {
+        styles.gridColumnEnd = `span ${this.span}`;
+      }
+
+      // 处理跨行
+      if (this.rowSpan > 1) {
+        styles.gridRowEnd = `span ${this.rowSpan}`;
+      }
+
+      // 处理起始列
+      if (this.start > 0) {
+        styles.gridColumnStart = this.start;
+      }
+
+      // 处理起始行
+      if (this.rowStart > 0) {
+        styles.gridRowStart = this.rowStart;
+      }
+
+      // 处理命名区域
+      if (this.area) {
+        styles.gridArea = this.area;
+      }
+
+      // 处理 justify-self
+      if (this.justifySelf && this.justifySelf !== 'auto') {
+        styles.justifySelf = this.justifySelf;
+      }
+
+      // 处理 align-self
+      if (this.alignSelf && this.alignSelf !== 'auto') {
+        styles.alignSelf = this.alignSelf;
+      }
+
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.xt-grid-item {
+  box-sizing: border-box;
+}
+</style>

package/src/components/xt-text/index.vue

@@ -3,6 +3,7 @@
     class="xt-text" 
     :class="[
       type ? 'xt-text--' + type : '',
+      'xt-text--' + size,
       { 'xt-text--bold': bold },
       { 'xt-text--money': money }
     ]"
@@ -27,6 +28,11 @@ export default {
       default: '',
       validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
+    size: {
+      type: String,
+      default: 'base',
+      validator: (val) => ['extra-large', 'large', 'medium', 'base', 'small', 'extra-small'].includes(val)
+    },
     bold: {
       type: Boolean,
       default: false

package/src/components/xt-text/style/index.scss

@@ -2,7 +2,32 @@
 
 // 文字组件
 .xt-text {
-  letter-spacing: $xt-spacing-xs;
+  letter-spacing: normal;
+}
+
+// 字体大小 - 使用增量方式
+.xt-text--extra-large {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-large);
+}
+
+.xt-text--large {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
+}
+
+.xt-text--medium {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
+}
+
+.xt-text--base {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
+}
+
+.xt-text--small {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-small);
+}
+
+.xt-text--extra-small {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
 }
 
 // 不同类型文字颜色

package/src/config/element-registry.js

@@ -8,8 +8,8 @@ export const existingExComponents = [
   'Button',       // ExButton 已存在
   'Card',         // ExCard 已存在
   'Input',        // XtInput 已存在（用户要求不自动注册）
-  'Table',        // ExTable 已存在（在 xt-table 目录中）
-  'TableColumn',  // ExColumn 已存在（在 xt-table 目录中）
+  'Table',        // ExTable 已存在（在 ex-table 目录中）
+  'TableColumn',  // ExColumn 已存在（在 ex-table 目录中）
   'Chart'         // ExChart 已存在
 ]
 

package/src/index.js

@@ -24,10 +24,12 @@ import XtCardItem from './components/xt-card-item'
 import XtConfigProvider from './components/xt-config-provider'
 import XtText from './components/xt-text'
 import XtGridBox from './components/xt-grid-box'
+import XtGridItem from './components/xt-grid-item'
 import XtDatePicker from './components/xt-date-picker'
 import ExButton from './components/ex-button'
 import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
 import ExCard from './components/ex-card'
+import ExTable from './components/ex-table'  // ExTable 组件（基于 ElementUI Table 封装）
 
 // 导入 Element UI 组件注册配置
 import { registerElementExComponents } from './config/element-registry'
@@ -42,10 +44,12 @@ const components = [
   XtConfigProvider,
   XtText,
   XtGridBox,
+  XtGridItem,
   XtDatePicker,
   ExButton,
   ExChart,
-  ExCard
+  ExCard,
+  ExTable
 ]
 
 // 定义 install 方法，Vue.use() 会自动调用
@@ -124,9 +128,11 @@ export default {
   XtConfigProvider,
   XtText,
   XtGridBox,
+  XtGridItem,
   XtDatePicker,
   ExButton,
-  ExCard
+  ExCard,
+  ExTable
 }
 
 // ExChart 组件按需导出（使用时需自行安装 echarts 依赖）

package/src/styles/theme/font.scss

@@ -5,6 +5,9 @@ $xt-font-size-base: 14px;                    // 基准字体 - Element UI 默认
 $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;          // 大尺寸增量
+$xt-font-size-increment-extra-small: -2px;   // 特小尺寸增量
+$xt-font-size-increment-small: -1px;          // 小尺寸增量
+$xt-font-size-increment-base: 0px;            // 基准尺寸增量
+$xt-font-size-increment-medium: 2px;          // 中尺寸增量
+$xt-font-size-increment-large: 4px;           // 大尺寸增量
+$xt-font-size-increment-extra-large: 6px;     // 特大尺寸增量