@travel-screen/l-module-components 1.0.0

package/src/l-rank-list/interface/index.js

@@ -0,0 +1,343 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 布局类型：控制数值显示位置
+  // 'value-bottom'（默认）：数值在进度条右侧（moduleData_3 风格）
+  // 'value-top'：数值在标题右侧（moduleData_2 风格）
+  layoutType: {
+    type: String,
+    default: 'value-bottom'
+  },
+  // 数值单位：数值后面的单位文字（如：人、%、家等）
+  unit: {
+    type: String,
+    default: '人'
+  },
+  // 排行榜数据列表：每项包含 name（名称）和 value（数值）
+  dataList: {
+    type: Array,
+    default: () => {
+      return [
+        { name: '拉萨市', value: 832 },
+        { name: '拉萨市2', value: 732 },
+        { name: '拉萨市32', value: 732 }
+      ]
+    }
+  },
+  // 自动滚动触发阈值：当数据条数超过此值时触发自动滚动
+  // 例如：displayLimit=20，数据超过20条时自动滚动，20条及以下不滚动
+  displayLimit: {
+    type: Number,
+    default: 20
+  },
+  // 是否自动滚动：当数据超过显示限制时是否自动滚动
+  autoScroll: {
+    type: Boolean,
+    default: false
+  },
+  // 滚动速度：自动滚动时的速度（像素/秒）
+  scrollSpeed: {
+    type: Number,
+    default: 30
+  },
+
+  // ========== 容器相关 ==========
+  // 容器宽度：整个排行榜容器的宽度
+  containerWidth: {
+    type: String,
+    default: '100%'
+  },
+  // 容器高度：整个排行榜容器的高度
+  containerHeight: {
+    type: String,
+    default: '100%'
+  },
+  // 容器左边距：容器整体的左侧偏移量
+  containerLeft: {
+    type: [String, Number],
+    default: '-5px'
+  },
+  // 列表项宽度：单个排行榜项的宽度
+  listItemWidth: {
+    type: String,
+    default: '98%'
+  },
+  // 列表项间距：排名图标与右侧内容之间的间距
+  listItemGap: {
+    type: [String, Number],
+    default: 8
+  },
+
+  // ========== 排名图标相关 ==========
+  // 排名图标宽度：排名图标的显示宽度
+  rankIconWidth: {
+    type: [String, Number],
+    default: '39px'
+  },
+  // 排名图标高度：排名图标的显示高度
+  rankIconHeight: {
+    type: [String, Number],
+    default: '37px'
+  },
+  // 排名图标字号：排名数字的字体大小
+  rankIconFontSize: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 排名图标字体：排名数字的字体族
+  rankIconFontFamily: {
+    type: String,
+    default: 'REEJI-PinboGB, REEJI-PinboGB'
+  },
+  // 排名图标字重：排名数字的字体粗细
+  rankIconFontWeight: {
+    type: [String, Number],
+    default: 'normal'
+  },
+  // 排名图标颜色：排名数字的颜色
+  rankIconColor: {
+    type: String,
+    default: '#FFFFFF'
+  },
+  // 排名图标1：第1名的排名图标URL，未传入时使用默认
+  rankIcon1: {
+    type: String,
+    default: ''
+  },
+  // 排名图标2：第2名的排名图标URL，未传入时使用默认
+  rankIcon2: {
+    type: String,
+    default: ''
+  },
+  // 排名图标其他：第3名及以后的排名图标URL，未传入时使用默认
+  rankIconOther: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 标题相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标题字重：标题文字的字体粗细
+  titleFontWeight: {
+    type: [String, Number],
+    default: 500
+  },
+  // 标题字号：标题文字的字体大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '14px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#E8EEF4'
+  },
+  // 标题下边距：标题与下方内容的间距（value-top 布局时生效）
+  titleMarginBottom: {
+    type: [String, Number],
+    default: '4px'
+  },
+
+  // ========== 进度条相关 ==========
+  // 进度条高度：进度条的显示高度
+  progressBarHeight: {
+    type: [String, Number],
+    default: '6px'
+  },
+  // 进度条区域宽度百分比：进度条区域占可用宽度的百分比
+  // 与 valueWidth 配合使用，两者之和应为 100%
+  // 默认值 80 表示进度条区域占 80%，数值区域占 20%
+  progressBarWidth: {
+    type: [String, Number],
+    default: 80
+  },
+  // 进度条圆角：进度条的圆角半径
+  progressBarBorderRadius: {
+    type: [String, Number],
+    default: '5px'
+  },
+  // 进度条默认背景：进度条未填充部分的背景颜色
+  progressBarBg: {
+    type: String,
+    default: 'rgba(85,219,209,0.3)'
+  },
+  // 进度条内阴影：进度条未填充部分的内阴影效果
+  progressBarBoxShadow: {
+    type: String,
+    default: 'inset 0px 0px 3px 1px rgba(255,255,255,0.15)'
+  },
+  // 进度条激活背景：进度条第3名及以后填充部分的背景颜色
+  progressBarActiveBg: {
+    type: String,
+    default: 'rgba(85,219,209,1)'
+  },
+  // 进度条第1名颜色：第1名进度条填充的颜色
+  rank1Color: {
+    type: String,
+    default: '#40FF8F'
+  },
+  // 进度条第2名颜色：第2名进度条填充的颜色
+  rank2Color: {
+    type: String,
+    default: '#FFD073'
+  },
+
+  // ========== 滑块图标相关 ==========
+  // 滑块图标宽度：进度条滑块的图标宽度
+  sliderIconWidth: {
+    type: [String, Number],
+    default: '15px'
+  },
+  // 滑块图标高度：进度条滑块的图标高度
+  sliderIconHeight: {
+    type: [String, Number],
+    default: '15px'
+  },
+  // 滑块图标上边距：滑块图标距离进度条顶部的偏移
+  sliderIconTop: {
+    type: [String, Number],
+    default: '-4px'
+  },
+  // 滑块图标：进度条滑块的图标URL，未传入时使用默认
+  sliderIcon: {
+    type: String,
+    default: ''
+  },
+  // 滑块左偏移百分比：滑块相对于进度条末端的向左偏移量
+  // 计算公式：left = (item.value / maxValue * 100) - sliderLeftOffset
+  // sliderLeftOffset = 滑块宽度的一半占进度条总长度的百分比
+  // 例如：滑块宽度 15px，容器宽度约 300px，则偏移 = 7.5 / 300 * 100 = 2.5%
+  // 默认值 1.5 表示滑块宽度的一半占进度条总长度的百分比
+  sliderLeftOffset: {
+    type: [String, Number],
+    default: 1.5
+  },
+
+  // ========== 数值相关 ==========
+  // 数值最小宽度：数值区域的最小宽度
+  valueMinWidth: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 数值区域宽度百分比：数值区域占可用宽度的百分比
+  // 与 progressBarWidth 配合使用，两者之和应为 100%
+  // 默认值 20 表示数值区域占 20%，进度条区域占 80%
+  valueWidth: {
+    type: [String, Number],
+    default: 20
+  },
+  // 数值字体：数值文字的字体族
+  valueFontFamily: {
+    type: String,
+    default: 'DIN, DIN'
+  },
+  // 数值字重：数值文字的字体粗细
+  valueFontWeight: {
+    type: [String, Number],
+    default: 'normal'
+  },
+  // 数值字号：数值文字的字体大小
+  valueFontSize: {
+    type: [String, Number],
+    default: '14px'
+  },
+  // 数值颜色：数值文字的颜色（使用渐变时设为transparent）
+  valueColor: {
+    type: String,
+    default: 'transparent'
+  },
+  // 数值渐变背景：数值文字的渐变背景
+  valueBackground: {
+    type: String,
+    default: 'linear-gradient(270deg, #4CE27E 0%, #FFFFFF 100%)'
+  },
+  // 数值背景裁剪：背景裁剪方式（text表示只在文字上显示背景）
+  valueBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 数值行高：数值文字的行高
+  valueLineHeight: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 数值字体样式：数值文字的样式（italic为斜体）
+  valueFontStyle: {
+    type: String,
+    default: 'italic'
+  },
+  // 数值阴影：数值文字的阴影效果
+  valueTextShadow: {
+    type: String,
+    default: '0px 2px 3px rgba(22, 72, 56, 0.6)'
+  },
+  // 数值对齐方式：数值文字的水平对齐
+  valueTextAlign: {
+    type: String,
+    default: 'left'
+  },
+
+  // ========== 单位相关 ==========
+  // 单位字体：单位文字的字体族
+  unitFontFamily: {
+    type: String,
+    default: 'SourceHanSansCN, SourceHanSansCN'
+  },
+  // 单位字重：单位文字的字体粗细
+  unitFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 单位字号：单位文字的字体大小
+  unitFontSize: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 单位左边距：单位与数值之间的间距
+  unitMarginLeft: {
+    type: [String, Number],
+    default: '2px'
+  },
+
+  // ========== 顶部数值相关（value-top 布局专用） ==========
+  // 顶部数值字号：value-top 布局中数值的字体大小
+  topValueFontSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 顶部数值颜色：value-top 布局中数值的颜色（使用渐变时设为transparent）
+  topValueColor: {
+    type: String,
+    default: 'transparent'
+  },
+  // 顶部数值渐变背景：value-top 布局中数值的渐变背景
+  topValueBackground: {
+    type: String,
+    default: 'linear-gradient(0deg, #4CE27E 0%, #FFFFFF 100%)'
+  },
+  // 顶部数值背景裁剪：背景裁剪方式
+  topValueBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 顶部数值行高：value-top 布局中数值的行高
+  topValueLineHeight: {
+    type: [String, Number],
+    default: '1'
+  },
+  // 顶部数值字体样式：value-top 布局中数值的样式
+  topValueFontStyle: {
+    type: String,
+    default: 'normal'
+  },
+  // 顶部数值阴影：value-top 布局中数值的阴影效果
+  topValueTextShadow: {
+    type: String,
+    default: 'none'
+  }
+}
+
+export default interfaceObj

package/src/l-stat-card/README.md

@@ -0,0 +1,309 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'a714df1f-f138-45ba-bb10-a6112fd7313f'
+  PropagateID: 'a714df1f-f138-45ba-bb10-a6112fd7313f'
+  ReservedCode1: 'fd849c5b-2105-47a7-8864-77f66fb74206'
+  ReservedCode2: 'fd849c5b-2105-47a7-8864-77f66fb74206'
+---
+
+# LStatCard 组件说明
+
+## 概述
+
+`LStatCard` 是一个参数化驱动的统计卡片组件，采用类似 Element UI 的封装方式。所有样式（背景图、图标尺寸、文字大小、颜色等）均通过 props 参数动态控制，不再依赖 CSS 样式文件。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **内联样式**：使用 computed 属性动态生成内联样式
+- ✅ **高度灵活**：支持自定义背景图、图标尺寸、字体、颜色等
+- ✅ **默认图片**：未传入图片时自动使用组件内置默认图片
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+
+## 设计原则
+
+### Element UI 风格封装
+
+```vue
+<!-- 类似 Element UI 的使用方式 -->
+<l-stat-card
+  title="接待游客"
+  :data="12345"
+  unit="人次"
+  :num-font-size="24"
+  num-color="#4CE27E"
+/>
+```
+
+## 文件结构
+
+```
+l-stat-card/
+├── img/                        # 默认图片资源
+│   ├── images.js               # 图片映射文件
+│   ├── img-bg.png              # 默认背景图
+│   └── l-stat-card_img_1.png   # 默认图标
+├── interface/
+│   └── index.js                # Props 定义
+├── index.vue                   # 主组件（内联样式驱动）
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础参数
+
+| 参数名 | 类型 | 默认值 | 必填 | 说明 |
+|--------|------|--------|------|------|
+| `title` | String | `'标题'` | 否 | 标题文本 |
+| `data` | String/Number | `0` | 否 | 数据值 |
+| `unit` | String | `''` | 否 | 单位 |
+| `icon` | String | `''` | 否 | 图标图片 URL（可选，未传时使用默认） |
+| `bgImage` | String | `''` | 否 | 背景图 URL（可选，未传时使用默认） |
+
+### 背景图参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `bgImage` | String | `''` | 背景图 URL（可选） |
+| `bgWidth` | String/Number | `'60px'` | 背景图宽度 |
+| `bgHeight` | String/Number | `'49px'` | 背景图高度 |
+| `bgSize` | String | `'100% 100%'` | 背景图尺寸 |
+
+### 图标参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `iconWidth` | String/Number | `'32px'` | 图标宽度 |
+| `iconHeight` | String/Number | `'32px'` | 图标高度 |
+| `iconLeft` | String/Number | `'14px'` | 图标左边距 |
+| `iconBottom` | String/Number | `'2px'` | 图标下边距 |
+
+### 标题参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleWidth` | String/Number | `'98px'` | 标题宽度 |
+| `titleFontFamily` | String | `'PingFangSC, PingFang SC'` | 标题字体 |
+| `titleFontWeight` | String/Number | `400` | 标题字重 |
+| `titleFontSize` | String/Number | `'16px'` | 标题字号 |
+| `titleColor` | String | `'#A3C2CC'` | 标题颜色 |
+
+### 数值参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DIN, DIN'` | 数值字体 |
+| `numFontWeight` | String/Number | `600` | 数值字重 |
+| `numFontSize` | String/Number | `'22px'` | 数值字号 |
+| `numColor` | String | `'transparent'` | 数值颜色 |
+| `numBackground` | String | `'linear-gradient(270deg, #4CE27E 0%, #FFFFFF 100%)'` | 数值渐变背景 |
+| `numBackgroundClip` | String | `'text'` | 背景裁剪方式 |
+| `numMarginRight` | String/Number | `'3px'` | 数值右边距 |
+| `numLineHeight` | String/Number | `1` | 数值行高 |
+
+### 单位参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `unitFontFamily` | String | `'SourceHanSansCN, SourceHanSansCN'` | 单位字体 |
+| `unitFontWeight` | String/Number | `400` | 单位字重 |
+| `unitFontSize` | String/Number | `'13px'` | 单位字号 |
+| `unitColor` | String | `'rgba(255,255,255,0.67)'` | 单位颜色 |
+
+## 使用方式
+
+### 基本使用（使用默认样式）
+
+```vue
+<template>
+  <l-stat-card
+    title="接待游客"
+    :data="12345"
+    unit="人次"
+  />
+</template>
+
+<script>
+import LStatCard from '@/components/moduleDataNew/l-stat-card/index.vue'
+
+export default {
+  components: {
+    LStatCard
+  }
+}
+</script>
+```
+
+### 自定义数值样式
+
+```vue
+<template>
+  <l-stat-card
+    title="今日收入"
+    :data="9876.5"
+    unit="元"
+    :num-font-size="28"
+    num-color="#FF6B6B"
+    num-background="linear-gradient(270deg, #FF6B6B 0%, #FFE66D 100%)"
+  />
+</template>
+```
+
+### 自定义背景图和图标
+
+```vue
+<template>
+  <l-stat-card
+    title="停车场"
+    :data="128"
+    unit="个"
+    :icon="require('@/assets/parking-icon.png')"
+    bg-image="https://example.com/bg.png"
+    :bg-width="80"
+    :bg-height="60"
+    :icon-width="40"
+    :icon-height="40"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-stat-card
+    title="客流指数"
+    :data="95.2"
+    :title-font-size="18"
+    title-color="#FFFFFF"
+    :num-font-size="32"
+    :num-font-weight="700"
+    num-color="transparent"
+    num-background="linear-gradient(90deg, #00F2FE 0%, #4FACFE 100%)"
+    :unit-font-size="14"
+    unit-color="rgba(255,255,255,0.8)"
+  />
+</template>
+```
+
+### 循环渲染（推荐）
+
+```vue
+<template>
+  <l-stat-card
+    v-for="(item, index) in list"
+    :key="index"
+    :title="item.title"
+    :data="item.data"
+    :unit="item.unit"
+    :icon="item.icon"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          title: '均衡指数',
+          data: 92.1,
+          icon: require('@/assets/index/icon-1.png')
+        },
+        {
+          title: '热度指数',
+          data: 95.20,
+          icon: require('@/assets/index/icon-2.png')
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 尺寸参数说明
+
+所有尺寸参数均支持 String 和 Number 两种类型：
+
+```vue
+<!-- String 类型（带单位） -->
+<l-stat-card :num-font-size="'24px'" />
+
+<!-- Number 类型（自动添加 px） -->
+<l-stat-card :num-font-size="24" />
+```
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 computed 属性动态生成内联样式：
+
+```javascript
+computed: {
+  numStyle() {
+    return {
+      fontFamily: this.numFontFamily,
+      fontWeight: this.numFontWeight,
+      fontSize: typeof this.numFontSize === 'number' 
+        ? `${this.numFontSize}px` 
+        : this.numFontSize,
+      color: this.numColor,
+      background: this.numBackground,
+      WebkitBackgroundClip: this.numBackgroundClip,
+      backgroundClip: this.numBackgroundClip
+    }
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<span class="l-stat-card__value-num" :style="numStyle">{{ data }}</span>
+```
+
+## 注意事项
+
+1. **图片可选**：icon 和 bgImage 都是可选参数，未传入时使用默认图片
+2. **渐变文字兼容**：使用了 `WebkitBackgroundClip` 和 `backgroundClip` 实现渐变文字效果
+3. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+4. **默认图片**：组件内置默认图片，位于 `img/` 目录下
+5. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+
+## 适用场景
+
+- ✅ 需要动态调整样式的统计卡片
+- ✅ 不同页面使用不同主题的卡片
+- ✅ 需要根据数据状态改变颜色/大小
+- ✅ 类似 Element UI 的组件化开发方式
+
+## 更新日志
+
+- **v2.2.0** (2026-06-10)
+  - 恢复内部默认图片支持（img/ 目录）
+  - icon 和 bgImage 改为可选参数
+  - 新增 computedIcon 和 computedBgImage 兜底逻辑
+  - 图片命名规范：l-stat-card_img_X.png
+  - 更新 README 文档
+
+- **v2.1.0** (2026-05-18)
+  - 移除内部图片索引机制（imgIndex）
+  - 移除 css/ 和 img/ 目录
+  - 简化为纯外部图片传入（icon + bgImage）
+  - 移除 EXAMPLES.md 和 MIGRATION.md
+  - 精简 README 文档
+
+- **v2.0.0** (2026-05-18)
+  - 重命名为 `l-stat-card`
+  - 移除 CSS 文件依赖，改为 props 驱动
+  - 新增 28 个样式控制参数
+  - 使用内联样式实现（类似 Element UI）
+  - 支持 String/Number 类型的尺寸参数
+
+> AI生成

package/src/l-stat-card/img/images.js

@@ -0,0 +1,36 @@
+/**
+ * LStatCard 组件图片资源映射
+ *
+ * 图片命名规范：
+ * - img-bg.png：背景图
+ * - l-stat-card_img_1.png ~ l-stat-card_img_5.png：图标图片
+ */
+
+const images = {
+  // 背景图
+  bg: require('./img-bg.png'),
+
+  // 图标图片（1-5）
+  icons: {
+    1: require('./l-stat-card_img_1.png')
+  }
+}
+
+/**
+ * 获取图标图片路径
+ * @param {Number|String} index - 图标索引（1-5）
+ * @returns {String} 图片路径
+ */
+export function getIconPath(index = 1) {
+  return images.icons[index] || images.icons[1]
+}
+
+/**
+ * 获取背景图路径
+ * @returns {String} 背景图路径
+ */
+export function getBgPath() {
+  return images.bg
+}
+
+export default images