xt-element-ui 1.2.3 → 1.2.5

package/docs/components/extend/ex-chart.md

@@ -0,0 +1,355 @@
+## ExChart 图表组件
+
+图表组件基于 ECharts 封装，支持多种图表类型和主题样式。**使用前需自行安装 ECharts 依赖**。
+
+## 安装依赖
+
+```bash
+npm install echarts --save
+```
+
+## 基本用法
+
+::: demo 基础柱状图示例
+```vue
+<template>
+  <ExChart type="bar" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '张三', value: 65 },
+        { name: '李四', value: 78 },
+        { name: '王五', value: 89 },
+        { name: '赵六', value: 95 },
+        { name: '钱七', value: 72 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `type` | String | bar | 图表类型：`bar`、`line`、`pie`、`multi`、`trend` |
+| `theme` | String | - | 主题名称：`white`、`dark`、`blue`、`orange`、`starry` |
+| `size` | String | medium | 字体大小：`small`、`medium`、`large` |
+| `chartData` | Array | - | 图表数据，格式见各类型示例 |
+
+## 图表类型
+
+### 柱状图 (bar)
+
+::: demo 柱状图示例，支持显示标记点
+```vue
+<template>
+  <ExChart type="bar" :chartData="chartData" :markPoint="true" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '华东区', value: 1250 },
+        { name: '华南区', value: 980 },
+        { name: '华北区', value: 890 },
+        { name: '西南区', value: 720 },
+        { name: '西北区', value: 560 },
+        { name: '东北区', value: 680 },
+        { name: '华中区', value: 820 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+**柱状图属性**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `markPoint` | Boolean | false | 是否显示标记点（最大值、最小值） |
+| `showZoom` | Boolean | false | 是否显示缩放功能 |
+| `reverse` | Boolean | false | 是否反转坐标轴 |
+| `longLable` | Boolean | false | 是否启用长标签模式 |
+| `splitNumber` | Number | 5 | Y轴分割数量 |
+
+### 折线图 (line)
+
+::: demo 折线图示例，支持面积区域显示
+```vue
+<template>
+  <ExChart type="line" :chartData="chartData" :isArea="true" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '1月', value: 2450 },
+        { name: '2月', value: 2800 },
+        { name: '3月', value: 3200 },
+        { name: '4月', value: 2950 },
+        { name: '5月', value: 3500 },
+        { name: '6月', value: 3800 },
+        { name: '7月', value: 4200 },
+        { name: '8月', value: 4500 },
+        { name: '9月', value: 4100 },
+        { name: '10月', value: 3800 },
+        { name: '11月', value: 4600 },
+        { name: '12月', value: 5200 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+**折线图属性**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `isArea` | Boolean | false | 是否显示面积区域 |
+| `isDark` | Boolean | false | 是否暗色模式（文字标线为白色） |
+| `intervalvalue` | Number | 0 | 自定义间隔值 |
+
+### 饼图 (pie)
+
+::: demo 饼图示例
+```vue
+<template>
+  <ExChart type="pie" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '手机端', value: 4520 },
+        { name: 'PC端', value: 3280 },
+        { name: '平板端', value: 1250 },
+        { name: '小程序', value: 2150 },
+        { name: 'H5页面', value: 1800 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 组合图 (multi)
+
+::: demo 混合图表示例，支持多系列数据展示
+```vue
+<template>
+  <ExChart type="multi" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "入户量",
+          data: [
+            { label: "01月", value: 980 },
+            { label: "02月", value: 806 },
+            { label: "03月", value: 930 },
+            { label: "04月", value: 804 },
+            { label: "05月", value: 750 },
+            { label: "06月", value: 660 },
+            { label: "07月", value: 780 },
+            { label: "08月", value: 630 },
+            { label: "09月", value: 806 },
+            { label: "10月", value: 950 },
+            { label: "11月", value: 810 },
+            { label: "12月", value: 703 }
+          ]
+        },
+        {
+          label: "隐患量",
+          data: [
+            { label: "01月", value: 200 },
+            { label: "02月", value: 120 },
+            { label: "03月", value: 110 },
+            { label: "04月", value: 109 },
+            { label: "05月", value: 108 },
+            { label: "06月", value: 150 },
+            { label: "07月", value: 126 },
+            { label: "08月", value: 130 },
+            { label: "09月", value: 108 },
+            { label: "10月", value: 109 },
+            { label: "11月", value: 140 },
+            { label: "12月", value: 106 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 趋势图 (trend)
+
+趋势图适用于展示数据的连续变化趋势，常用于设备状态监控、指标趋势分析等场景。
+
+::: demo 趋势图示例
+```vue
+<template>
+  <ExChart type="trend" :chartData="chartData" style="height: 200px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { label: '00:00', value: 53 },
+        { label: '02:00', value: 48 },
+        { label: '04:00', value: 42 },
+        { label: '06:00', value: 55 },
+        { label: '08:00', value: 78 },
+        { label: '10:00', value: 89 },
+        { label: '12:00', value: 95 },
+        { label: '14:00', value: 88 },
+        { label: '16:00', value: 76 },
+        { label: '18:00', value: 65 },
+        { label: '20:00', value: 58 },
+        { label: '22:00', value: 52 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+**趋势图属性**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `type` | String | bar | 图表类型，可选 `bar` 或 `line` |
+| `width` | String | 100% | 图表宽度 |
+| `energyType` | String | m³ | 单位类型 |
+
+**趋势图数据格式**
+
+```javascript
+[
+  { label: '时间点', value: 数值 },
+  { label: '时间点', value: 数值 },
+  // ...
+]
+```
+
+## 主题示例
+
+::: demo 不同主题样式展示
+```vue
+<template>
+  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+    <div style="width: 300px; height: 200px;">
+      <ExChart type="bar" :chartData="chartData" theme="white" style="height: 200px;" />
+    </div>
+    <div style="width: 300px; height: 200px;">
+      <ExChart type="bar" :chartData="chartData" theme="dark" style="height: 200px;" />
+    </div>
+    <div style="width: 300px; height: 200px;">
+      <ExChart type="bar" :chartData="chartData" theme="blue" style="height: 200px;" />
+    </div>
+    <div style="width: 300px; height: 200px;">
+      <ExChart type="bar" :chartData="chartData" theme="orange" style="height: 200px;" />
+    </div>
+    <div style="width: 300px; height: 200px;">
+      <ExChart type="bar" :chartData="chartData" theme="starry" style="height: 200px;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '产品A', value: 1250 },
+        { name: '产品B', value: 980 },
+        { name: '产品C', value: 820 },
+        { name: '产品D', value: 750 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 主题列表
+
+| 主题名称 | 说明 |
+|----------|------|
+| `white` | 白色主题（默认） |
+| `dark` | 暗色主题 |
+| `blue` | 蓝色主题 |
+| `orange` | 橙色主题 |
+| `starry` | 星空主题 |
+
+## 动态数据
+
+::: demo 动态更新图表数据
+```vue
+<template>
+  <div>
+    <ExChart type="line" :chartData="chartData" :isArea="true" style="height: 400px;" />
+    <button @click="updateData" style="margin-top: 16px; padding: 8px 16px;">更新数据</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '1月', value: 50 },
+        { name: '2月', value: 60 },
+        { name: '3月', value: 70 },
+        { name: '4月', value: 80 }
+      ]
+    }
+  },
+  methods: {
+    updateData() {
+      this.chartData = [
+        { name: '1月', value: 55 },
+        { name: '2月', value: 75 },
+        { name: '3月', value: 65 },
+        { name: '4月', value: 90 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+1. **按需导入**：Chart 组件需要手动导入，不包含在默认安装中
+2. **依赖安装**：使用前必须安装 `echarts` 依赖
+3. **数据格式**：确保传入正确的数据格式，不同图表类型有不同的数据要求
+4. **容器尺寸**：确保图表容器有明确的宽高，否则可能无法正常显示

package/docs/components/extend/ex-icon.md

@@ -0,0 +1,190 @@
+## ExIcon 图标
+
+统一图标组件，支持 ElementUI 字体图标（el-icon）、SVG Sprite 图标、内联 SVG，以及可扩展的自定义字体图标。
+
+## 基础用法：ElementUI 字体图标
+
+`name` 以 `el-icon-` 开头时，自动识别为 ElementUI 字体图标：
+
+::: demo ElementUI 字体图标示例
+```vue
+<template>
+  <div style="font-size: 24px">
+    <ex-icon name="el-icon-edit" style="margin-right: 16px" />
+    <ex-icon name="el-icon-delete" style="margin-right: 16px" />
+    <ex-icon name="el-icon-search" style="margin-right: 16px" />
+    <ex-icon name="el-icon-share" style="margin-right: 16px" />
+    <ex-icon name="el-icon-setting" />
+  </div>
+</template>
+```
+:::
+
+## SVG Sprite 图标
+
+`name` 以 `#` 或 `svg:` 开头时，自动识别为 SVG Sprite（通过 `<use>` 引用）。使用前请确保项目已通过 `svg-sprite-loader` 等方式注册了对应的 SVG 图标：
+
+::: demo SVG Sprite 图标示例
+```vue
+<template>
+  <div style="font-size: 24px; color: #1890ff">
+    <ex-icon name="#icon-user" style="margin-right: 16px" />
+    <ex-icon name="svg:icon-home" style="margin-right: 16px" />
+    <ex-icon name="#icon-star" />
+  </div>
+</template>
+```
+:::
+
+## 内联 SVG 图标
+
+`name` 传入完整的 `<svg>` 字符串时，将作为内联 SVG 渲染：
+
+::: demo 内联 SVG 示例
+```vue
+<template>
+  <ex-icon
+    :size="32"
+    color="#f56c6c"
+    :name="'<svg viewBox=&quot;0 0 1024 1024&quot;><path d=&quot;M512 938.666667L85.333333 512l170.666667-170.666667 256 256 256-256L938.666667 512 512 938.666667z&quot; fill=&quot;currentColor&quot;></path></svg>'"
+  />
+</template>
+```
+:::
+
+## 自定义字体图标（本地扩展）
+
+除 `el-icon-` 前缀外，其它自定义前缀会自动作为自定义字体图标渲染（需在项目中自行准备 @font-face 字体文件及对应 class）。例如使用 `my-icon-star`：
+
+```scss
+// 项目中准备好字体文件及 class
+@font-face {
+  font-family: 'my-icon';
+  src: url('./fonts/my-icon.ttf') format('truetype');
+}
+.my-icon {
+  font-family: 'my-icon' !important;
+}
+.my-icon-star::before {
+  content: '\e001';
+}
+```
+
+::: demo 自定义字体图标示例
+```vue
+<template>
+  <div style="font-size: 24px">
+    <ex-icon name="my-icon-star" style="margin-right: 16px" />
+    <ex-icon name="my-icon-heart" />
+  </div>
+</template>
+
+<script>
+import ExIcon from '@/components/ex-icon'
+export default {
+  created() {
+    // 注册自定义前缀，避免自动添加 ex-icon 前缀
+    ExIcon.registerPrefix('my-icon-')
+  }
+}
+</script>
+```
+:::
+
+未注册自定义前缀时，组件会自动为其添加 `ex-icon` 作为基础 class，方便与项目本地的 @font-face 配合：
+
+```scss
+.ex-icon {
+  font-family: 'ex-iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+}
+.ex-icon-star::before { content: '\e001'; }
+```
+
+## 尺寸与颜色
+
+通过 `size` 和 `color` 属性控制图标大小与颜色：
+
+::: demo 图标尺寸颜色示例
+```vue
+<template>
+  <div>
+    <ex-icon name="el-icon-star-on" :size="16" color="#909399" style="margin-right: 16px" />
+    <ex-icon name="el-icon-star-on" :size="24" color="#e6a23c" style="margin-right: 16px" />
+    <ex-icon name="el-icon-star-on" :size="32" color="#f56c6c" style="margin-right: 16px" />
+    <ex-icon name="el-icon-star-on" :size="48" color="#67c23a" style="margin-right: 16px" />
+    <ex-icon name="el-icon-star-on" size="2em" color="#409eff" />
+  </div>
+</template>
+```
+:::
+
+## 旋转动画
+
+设置 `spin` 让图标持续旋转（常用于加载状态）：
+
+::: demo 图标旋转示例
+```vue
+<template>
+  <div style="font-size: 24px">
+    <ex-icon name="el-icon-loading" spin style="margin-right: 16px" />
+    <ex-icon name="el-icon-refresh" spin />
+  </div>
+</template>
+```
+:::
+
+## 点击事件
+
+支持 `@click` 事件：
+
+::: demo 图标点击示例
+```vue
+<template>
+  <div style="font-size: 24px">
+    <ex-icon
+      name="el-icon-favorite"
+      color="#f56c6c"
+      @click="handleClick"
+      style="cursor: pointer"
+    />
+    <span style="margin-left: 8px; font-size: 14px">点击次数：{{ count }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    handleClick() {
+      this.count++
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| name | 图标名称（支持 el-icon-xxx / #xxx / svg:xxx / <svg>.../ 自定义前缀） | string | — | '' |
+| size | 图标尺寸（数字单位 px，也可传入如 '2em' 的字符串） | string / number | — | '' |
+| color | 图标颜色（CSS color 值） | string | — | '' |
+| spin | 是否持续旋转 | boolean | — | false |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| click | 点击图标时触发 | event |
+
+## 静态方法
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| ExIcon.registerPrefix(prefix) | 注册自定义字体图标前缀，注册后该前缀的图标不会自动添加 `ex-icon` 基础 class | prefix: string |

package/docs/components/extend/ex-line.md

@@ -0,0 +1,71 @@
+## ExLine - 折线图组件
+
+基于 ECharts 封装的折线图组件。
+
+## 基本用法
+
+::: demo 折线图基础示例
+```vue
+<template>
+  <ExChart type="line" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '1月', value: 50 },
+        { name: '2月', value: 65 },
+        { name: '3月', value: 78 },
+        { name: '4月', value: 82 },
+        { name: '5月', value: 95 },
+        { name: '6月', value: 88 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 面积区域
+
+::: demo 显示面积区域
+```vue
+<template>
+  <ExChart type="line" :chartData="chartData" :isArea="true" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '1月', value: 2450 },
+        { name: '2月', value: 2800 },
+        { name: '3月', value: 3200 },
+        { name: '4月', value: 2950 },
+        { name: '5月', value: 3500 },
+        { name: '6月', value: 3800 },
+        { name: '7月', value: 4200 },
+        { name: '8月', value: 4500 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | [] | 图表数据 |
+| `theme` | String | '' | 主题名称 |
+| `size` | String | 'medium' | 尺寸 |
+| `isDark` | Boolean | false | 是否暗色模式 |
+| `isArea` | Boolean | false | 是否显示面积区域 |
+| `energyType` | String | '' | Y轴单位 |
+| `intervalvalue` | Number | 0 | 自定义间隔值 |