xt-element-ui 2.0.2 → 2.0.4

package/docs/README.md

@@ -7,7 +7,7 @@ actionText: 🚀 快速上手
 actionLink: /components/base/xt-button
 features:
   - title: 🎯 丰富的组件
-    details: 提供 15+ 组件，覆盖布局、表单、数据展示、图表等常见场景
+    details: 提供 20+ 组件，覆盖布局、表单、数据展示、图表等常见场景
   - title: 📦 开箱即用
     details: 基于 ElementUI 构建，与现有 ElementUI 项目无缝集成
   - title: 🪶 按需引入
@@ -70,6 +70,7 @@ Vue.use(XtElementUI)
 | **XtProgress** | 进度条组件 |
 | **XtTabs** | 标签页组件 |
 | **XtBadge** | 徽标组件 |
+| **XtScrollArrow** | 滚动箭头组件 |
 
 ### 📊 图表组件
 

package/docs/components/base/xt-badge.md

@@ -42,7 +42,7 @@
     <XtBadge :value="5" type="warning">
       <XtButton size="small">通知</XtButton>
     </XtBadge>
-    <XtBadge :value="99+" type="danger">
+    <XtBadge value="99+" type="danger">
       <XtButton size="small">消息</XtButton>
     </XtBadge>
   </div>
@@ -126,7 +126,7 @@
 <template>
   <div style="display: flex; gap: 16px;">
     <XtBadge :value="12" />
-    <XtBadge :value="99+" type="danger" />
+    <XtBadge value="99+" type="danger" />
     <XtBadge is-dot type="success" />
   </div>
 </template>

package/docs/components/base/xt-bar.md

@@ -7,7 +7,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtBar :chart-data="chartData" />
+  <XtBar :chart-data="chartData" width="600px" height="400px"  />
 </template>
 
 <script>

package/docs/components/base/xt-map-provider.md

@@ -4,6 +4,7 @@
 
 使用 `XtMapProvider` 统一配置项目中所有地图，无需在每个 `<XtMap>` 上重复写密钥：
 
+::: demo 全局配置（推荐）
 ```vue
 <template>
   <XtMapProvider
@@ -21,3 +22,4 @@
   </XtMapProvider>
 </template>
 ```
+:::

package/docs/components/base/xt-map.md

@@ -53,13 +53,14 @@ export default {
 
 使用 `XtMapProvider` 统一配置项目中所有地图，无需在每个 `<XtMap>` 上重复写密钥：
 
+::: demo 基本用法
 ```vue
 <template>
   <XtMapProvider
     provider="amap"
-    api-key="你的高德密钥"
-    security-js-code="你的安全密钥"
-    theme="light"
+    api-key="AMAP_KEY"
+    security-js-code="AMAP_SECURITY_CODE"
+    theme="dark"
   >
     <div style="width: 100%; height: 500px;">
       <XtMap :center="[116.397428, 39.90923]" :zoom="11" />
@@ -70,6 +71,7 @@ export default {
   </XtMapProvider>
 </template>
 ```
+:::
 
 或通过 `Vue.prototype.$xt` 方式配置（入口文件）：
 
@@ -92,18 +94,20 @@ setMapTheme('dark')
 
 #### 高德地图（推荐）
 
+::: demo
 ```vue
 <XtMap
   provider="amap"
-  api-key="AMAP_KEY"
-  security-js-code="AMAP_SECURITY_CODE"
+  api-key="4a32fafb17f9e5236c4bb5f2e538d43b"
+  security-js-code="50f302bf821cda57f798308236e7f8e2"
   :center="[116.397428, 39.90923]"
   :zoom="11"
 />
 ```
+:::
 
 #### 天地图
-
+::: demo 天地图
 ```vue
 <XtMap
   provider="tianditu"
@@ -112,9 +116,10 @@ setMapTheme('dark')
   :zoom="11"
 />
 ```
+:::
 
 #### 百度地图
-
+::: demo 百度地图
 ```vue
 <XtMap
   provider="baidu"
@@ -123,9 +128,10 @@ setMapTheme('dark')
   :zoom="11"
 />
 ```
+:::
 
 ### 暗黑主题
-
+::: demo 暗黑主题
 ```vue
 <template>
   <div style="width: 100%; height: 500px;">
@@ -139,11 +145,12 @@ setMapTheme('dark')
   </div>
 </template>
 ```
+:::
 
 高德地图原生支持 dark 主题样式；天地图、百度地图通过 CSS 滤镜实现近似效果。
 
 ### 地图类型切换
-
+::: demo 地图类型切换
 ```vue
 <template>
   <div>
@@ -176,9 +183,10 @@ export default {
 }
 </script>
 ```
+:::
 
 ### 通过 ref 调用实例方法
-
+::: demo 通过 ref 调用实例方法
 ```vue
 <template>
   <div>
@@ -228,11 +236,13 @@ export default {
 }
 </script>
 ```
+:::
 
 ### 自定义 API URL
 
 如需使用自建代理或反向代理（例如解决密钥暴露问题），可通过 `api-url` 覆盖：
 
+::: demo 自定义 API URL
 ```vue
 <XtMap
   provider="amap"
@@ -241,6 +251,7 @@ export default {
   :zoom="11"
 />
 ```
+:::
 
 ---
 

package/docs/components/base/xt-page.md

@@ -71,8 +71,10 @@ export default {
 ::: demo 仅主内容
 ```vue
 <template>
-  <XtPage :show-header="false" :show-footer="false">
-    <template #default>仅主内容区域</template>
+  <XtPage :show-header="false" :show-footer="false" style="height: 600px;">
+    <template #default="{ tableHeight }">
+      <div class="multiline-box" :style="{ height: tableHeight+'px' }">自适应容器</div> 
+    </template>
   </XtPage>
 </template>
 ```

package/docs/components/base/xt-scroll-arrow.md

@@ -0,0 +1,158 @@
+## XtScrollArrow 滚动箭头组件
+
+滚动箭头组件用于在内容溢出时显示滚动箭头，支持水平和垂直方向的滚动。
+
+## 基本用法
+
+::: demo 水平滚动
+```vue
+<template>
+  <XtScrollArrow :width="300">
+    <div style="display: flex; gap: 16px; padding: 8px;">
+      <div v-for="i in 10" :key="i" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
+        项目 {{ i }}
+      </div>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `direction` | String | horizontal | `horizontal`、`vertical` | 滚动方向 |
+| `scrollStep` | Number | 100 | - | 每次滚动的步长（像素） |
+| `autoHide` | Boolean | true | - | 是否自动隐藏箭头（滚动到边界时隐藏） |
+| `height` | String / Number | - | - | 容器高度 |
+| `width` | String / Number | - | - | 容器宽度 |
+
+## 事件说明
+| 事件名称 | 说明 | 参数 |
+|----------|------|------|
+| `scroll` | 滚动时触发 | `scrollContainer` - 滚动容器元素 |
+
+## 示例
+
+### 垂直滚动
+
+::: demo 垂直滚动
+```vue
+<template>
+  <XtScrollArrow direction="vertical" :height="200" :width="200">
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 8px;">
+      <div v-for="i in 10" :key="i" style="height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
+        项目 {{ i }}
+      </div>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::
+
+### 自定义滚动步长
+
+::: demo 自定义滚动步长
+```vue
+<template>
+  <XtScrollArrow :width="300" :scrollStep="50">
+    <div style="display: flex; gap: 16px; padding: 8px;">
+      <div v-for="i in 10" :key="i" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
+        项目 {{ i }}
+      </div>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::
+
+### 始终显示箭头
+
+::: demo 始终显示箭头
+```vue
+<template>
+  <XtScrollArrow :width="300" :autoHide="false">
+    <div style="display: flex; gap: 16px; padding: 8px;">
+      <div v-for="i in 10" :key="i" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
+        项目 {{ i }}
+      </div>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::
+
+### 结合其他组件使用
+
+::: demo 结合按钮组使用
+```vue
+<template>
+  <XtScrollArrow :width="400">
+    <div style="display: flex; gap: 8px; padding: 8px;">
+      <el-button v-for="i in 8" :key="i" type="primary" plain>按钮 {{ i }}</el-button>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::
+
+### 动态内容
+
+::: demo 动态内容
+```vue
+<template>
+  <div>
+    <el-button @click="addItem" style="margin-bottom: 12px;">添加项目</el-button>
+    <XtScrollArrow ref="arrow" :width="300" :appendMode="true">
+      <div style="display: flex; gap: 12px; padding: 8px;">
+        <div v-for="item in items" :key="item.id" style="width: 80px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+          {{ item.name }}
+        </div>
+      </div>
+    </XtScrollArrow>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { id: 1, name: '项目 1' },
+        { id: 2, name: '项目 2' },
+        { id: 3, name: '项目 3' },
+        { id: 4, name: '项目 4' },
+        { id: 5, name: '项目 5' }
+      ],
+      count: 5
+    }
+  },
+  methods: {
+    addItem() {
+      this.count++
+      this.items.push({ id: this.count, name: `项目 ${this.count}` })
+      // this.$nextTick(() => {
+      //   this.$refs.arrow.scrollToEnd()
+      // })
+    }
+  }
+}
+</script>
+```
+:::
+
+### 响应式宽度
+
+::: demo 响应式宽度
+```vue
+<template>
+  <XtScrollArrow width="100%">
+    <div style="display: flex; gap: 16px; padding: 8px;">
+      <div v-for="i in 10" :key="i" style="width: 100px; height: 60px; background: #f5f7fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+        项目 {{ i }}
+      </div>
+    </div>
+  </XtScrollArrow>
+</template>
+```
+:::

package/docs/components/base/xt-step-price.md

@@ -121,7 +121,8 @@ export default {
 | `fieldKeys` | Object | `{ min: 'min', max: 'max', price: 'price' }` | 字段名映射，支持自定义字段名 |
 | `limit` | Number | `0` | 阶梯数量上限，<=0 表示不限制 |
 | `step` | Number | `10` | 阶梯增量，新增时自动填充下一级的 min 值 |
-| `disabled` | Boolean | `false` | 是否禁用所有操作 |
+| `disabled` | Boolean | `false` | 是否禁用所有操作 |
+| `allowNegative` | Boolean | `false` | 是否允许输入负数价格和下限 |
 | `tip` | String | `'区间左闭右闭 [min, max]，最后一级为 [min, +∞)，保证连续且不重叠。'` | 底部提示文本 |
 | `defaultFirst` | Boolean | `true` | 空数组时是否自动生成默认阶梯 |