xt-element-ui 1.1.3 → 1.1.5

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/{text → 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/{text → 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

@@ -0,0 +1,136 @@
+/**
+ * XT-UI 组件注册配置文件
+ * 用于统一管理 Element UI 组件的自动注册配置
+ */
+
+// 已存在的 Ex 组件列表（不需要从 Element UI 自动注册）
+export const existingExComponents = [
+  'Button',       // ExButton 已存在
+  'Card',         // ExCard 已存在
+  'Input',        // XtInput 已存在（用户要求不自动注册）
+  'Table',        // ExTable 已存在（在 ex-table 目录中）
+  'TableColumn',  // ExColumn 已存在（在 ex-table 目录中）
+  'Chart'         // ExChart 已存在
+]
+
+// Element UI 组件列表（用于自动注册为 Ex 开头，但排除已存在的组件）
+export const elementComponentNames = [
+  'Autocomplete',
+  'Avatar',
+  'Backtop',
+  'Badge',
+  'Breadcrumb',
+  'BreadcrumbItem',
+  'ButtonGroup',
+  'Calendar',
+  'Carousel',
+  'CarouselItem',
+  'Cascader',
+  'Checkbox',
+  'CheckboxButton',
+  'CheckboxGroup',
+  'Col',
+  'Collapse',
+  'CollapseItem',
+  'ColorPicker',
+  'Container',
+  'DatePicker',
+  'Dialog',
+  'Divider',
+  'Drawer',
+  'Dropdown',
+  'DropdownItem',
+  'DropdownMenu',
+  'Footer',
+  'Form',
+  'FormItem',
+  'Header',
+  'Icon',
+  'Image',
+  'InputNumber',
+  'Link',
+  'Main',
+  'Menu',
+  'MenuItem',
+  'MenuItemGroup',
+  'Option',
+  'OptionGroup',
+  'Pagination',
+  'Popconfirm',
+  'Popover',
+  'Progress',
+  'Radio',
+  'RadioButton',
+  'RadioGroup',
+  'Rate',
+  'Row',
+  'Scrollbar',
+  'Select',
+  'Slider',
+  'Step',
+  'Steps',
+  'Submenu',
+  'Switch',
+  'TabPane',
+  'Tabs',
+  'Tag',
+  'TimePicker',
+  'TimeSelect',
+  'Timeline',
+  'TimelineItem',
+  'Tooltip',
+  'Transfer',
+  'Tree',
+  'Upload'
+]
+
+// Element UI 指令列表
+export const elementDirectives = [
+  'Loading',
+  'Popover',
+  'Tooltip'
+]
+
+// 注册 Element UI 组件为 Ex 开头的工具函数
+export function registerElementExComponents(Vue, ElementUI) {
+  if (!ElementUI) {
+    console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration')
+    return
+  }
+
+  elementComponentNames.forEach(componentName => {
+    // 如果组件已存在于排除列表中，则跳过
+    if (existingExComponents.includes(componentName)) {
+      console.log(`[XT-UI] ${componentName} already exists, skipping registration`)
+      return
+    }
+    
+    const exComponentName = `Ex${componentName}`
+    
+    // 检查是否已经注册过该组件
+    if (Vue.options.components[exComponentName]) {
+      return
+    }
+    
+    // 注册 Element 的组件为 Ex 开头
+    const elementComponent = ElementUI[componentName]
+    if (elementComponent) {
+      Vue.component(exComponentName, elementComponent)
+      console.log(`[XT-UI] Registered Element component as ${exComponentName}`)
+    }
+  })
+}
+
+// 注册 Element UI 指令的工具函数
+export function registerElementDirectives(Vue, ElementUI) {
+  if (!ElementUI) {
+    return
+  }
+
+  elementDirectives.forEach(directiveName => {
+    const directive = ElementUI[directiveName]
+    if (directive && directive.install) {
+      Vue.use(directive)
+    }
+  })
+}

package/src/index.js

@@ -16,38 +16,48 @@ const utils = utilsModule.default || utilsModule
 const { getConfig, setConfig, getTheme, getSize, getPrimaryColor, resetConfig, onConfigChange, setTheme, setSize, setPrimaryColor } = utils
 
 // 导入组件
-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'
-import ConfigProvider from './components/config-provider'
-import Text from './components/text'
-import Chart from './components/chart'  // Chart 组件
-import GridBox from './components/grid-box'
-import DatePicker from './components/date-picker'
+import XtButton from './components/xt-button'
+import XtInput from './components/xt-input'
+import XtFlexBox from './components/xt-flex-box'
+import XtCard from './components/xt-card'
+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'
 
 // 存储组件列表
 const components = [
-  Button,
-  Input,
-  FlexBox,
-  Card, 
-  CardItem,
-  ConfigProvider,
-  Text,
-  Chart,
-  GridBox,
-  DatePicker
+  XtButton,
+  XtInput,
+  XtFlexBox,
+  XtCard, 
+  XtCardItem,
+  XtConfigProvider,
+  XtText,
+  XtGridBox,
+  XtGridItem,
+  XtDatePicker,
+  ExButton,
+  ExChart,
+  ExCard,
+  ExTable
 ]
 
-
 // 定义 install 方法，Vue.use() 会自动调用
 const install = function (Vue, options = {}) {
   if (install.installed) return
   install.installed = true
 
-  // 全局注册所有 xt- 组件
+  // 全局注册所有组件
   components.forEach(component => {
     Vue.component(component.name, component)
   })
@@ -85,6 +95,18 @@ const install = function (Vue, options = {}) {
       setConfig(options.config)
     }
   }
+
+  // 尝试获取 ElementUI（如果已安装）并注册 Ex 开头的组件
+  let ElementUI = null
+  try {
+    ElementUI = require('element-ui')
+  } catch (e) {
+    console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration for Element components')
+    return
+  }
+
+  // 调用统一的注册函数
+  registerElementExComponents(Vue, ElementUI)
 }
 
 // 支持全局 script 标签引入
@@ -95,18 +117,26 @@ if (typeof window !== 'undefined' && window.Vue) {
 // 导出
 export default {
   install,
+  // 导出组件列表
+  components,
   // 按需导出组件
-  Button,
-  Input,
-  FlexBox,
-  Card,
-  CardItem,
-  ConfigProvider,
-  Text
+  XtButton,
+  XtInput,
+  XtFlexBox,
+  XtCard,
+  XtCardItem,
+  XtConfigProvider,
+  XtText,
+  XtGridBox,
+  XtGridItem,
+  XtDatePicker,
+  ExButton,
+  ExCard,
+  ExTable
 }
 
-// Chart 组件按需导出（使用时需自行安装 echarts 依赖）
-export { default as Chart } from './components/chart'
+// ExChart 组件按需导出（使用时需自行安装 echarts 依赖）
+export { default as ExChart } from './components/ex-chart'
 
 // 导出工具函数和变量
 export {
@@ -123,4 +153,4 @@ export {
   setTheme,
   setSize,
   setPrimaryColor
-}
+}

package/src/styles/theme/colors.scss

@@ -98,3 +98,4 @@ $xt-dark-color-info-light-7: #393a3c;      // 信息色暗色 70%
 $xt-dark-color-info-light-8: #2d2d2f;      // 信息色暗色 80%
 $xt-dark-color-info-light-9: #202121;      // 信息色暗色 90%
 $xt-dark-color-info-dark-2: #a6a9ad;       // 信息色亮色 20%
+

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;     // 特大尺寸增量

package/lib/css/2.3f7aa432.css

@@ -1 +0,0 @@
-.bar-box[data-v-730aa873]{position:relative;height:100%;width:100%}

package/lib/css/3.ffcc175d.css

@@ -1 +0,0 @@
-.line-box[data-v-52e2b0b2]{position:relative;height:100%;width:100%}

package/lib/css/4.9abd1f2b.css

@@ -1 +0,0 @@
-.multiline-box[data-v-6f25e9c5]{height:100%;width:100%}

package/lib/css/5.1a31ed8a.css

@@ -1 +0,0 @@
-.pie-box[data-v-6735cf79]{position:relative;height:100%;width:100%}

package/lib/css/6.c2d0d77e.css

@@ -1 +0,0 @@
-.bar-box[data-v-9e2bb3de]{position:relative}

package/src/components/chart/index.js

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

package/src/components/chart/index.vue

@@ -1,51 +0,0 @@
-<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: "XtChart",
-  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
-    };
-  },
-  watch: {
-    theme(newVal) {
-      this.myTheme = newVal;
-    },
-    size(newVal) {
-      this.mySize = newVal;
-    }
-  }
-};
-</script>

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

@@ -1,42 +0,0 @@
-<template>
-  <div class="ex-grid-box" :style="styleAttrs">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "XtGridBox",
-  props: {
-    columns: {
-      type: [String, Array], // ["1fr","2fr", "20%"]
-      default: "1fr"
-    },
-    rows: { // 1
-      type: [String, Array], // ["1fr","2fr", "20%"]
-      default: "1fr"
-    },
-    gap: { 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
-      };
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.ex-grid-box{
-    display: grid;
-}
-</style>