@travel-screen/l-module-components 1.0.0

package/src/l-icon-label/README.md

@@ -0,0 +1,356 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '53e2959e-837d-40d7-95d7-41823961efef'
+  PropagateID: '53e2959e-837d-40d7-95d7-41823961efef'
+  ReservedCode1: 'e5c50599-74e3-4476-8032-ba40ea2f6708'
+  ReservedCode2: 'e5c50599-74e3-4476-8032-ba40ea2f6708'
+---
+
+# LIconLabel 组件说明
+
+## 概述
+
+`LIconLabel` 是一个参数化驱动的图标标签卡片组件，采用类似 Element UI 的封装方式。用于展示带图标、标题、数值和单位的卡片（如今日累计客流、住宿监测等）。所有样式（背景图、图标、文字大小/颜色等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **默认背景图和图标**：未传入时自动使用组件内置默认背景图和图标
+- ✅ **高度灵活**：支持自定义背景图、图标、尺寸、颜色、字体等所有样式
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **渐变数值**：支持数值文字渐变效果
+
+## 文件结构
+
+```
+l-icon-label/
+├── img/
+│   ├── images.js                   # 图片映射文件
+│   ├── l-icon-label_bg.png         # 默认背景图
+│   └── l-icon-label_icon.png       # 默认图标
+├── interface/
+│   └── index.js                    # Props 定义（30+ 个参数）
+├── index.vue                       # 主组件（内联样式驱动）
+└── README.md                       # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `title` | String | `'标题'` | 显示的标题文字 |
+| `data` | String/Number | `0` | 显示的数值 |
+| `unit` | String | `''` | 数值单位 |
+
+### 背景图相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `bgImage` | String | `''` | 背景图图片URL（留空则使用默认背景图） |
+| `bgSize` | String | `'100% 100%'` | 背景图尺寸（缩放方式） |
+
+### 图标相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `icon` | String | `''` | 图标图片URL（留空则使用默认图标） |
+| `iconWidth` | String/Number | `'40px'` | 图标宽度 |
+| `iconHeight` | String/Number | `'40px'` | 图标高度 |
+| `iconMarginRight` | String/Number | `'12px'` | 图标右侧边距 |
+| `iconFlexShrink` | String/Number | `0` | 图标flex收缩（0为不允许） |
+
+### 卡片容器相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `cardWidth` | String/Number | `'230px'` | 卡片宽度 |
+| `cardHeight` | String/Number | `'66px'` | 卡片高度 |
+| `cardPadding` | String | `'0 14px'` | 卡片内边距 |
+| `cardBoxSizing` | String | `'border-box'` | 卡片盒模型 |
+| `cardAlignItems` | String | `'center'` | 卡片对齐方式 |
+
+### 信息容器相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `infoFlex` | String/Number | `1` | 信息容器flex值 |
+| `infoDisplay` | String | `'flex'` | 信息容器显示方式 |
+| `infoFlexDirection` | String | `'column'` | 信息容器主轴方向 |
+| `infoJustifyContent` | String | `'center'` | 信息容器交叉轴对齐 |
+
+### 标题相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleFontFamily` | String | `'PingFangSC, PingFang SC'` | 标题字体 |
+| `titleFontWeight` | String/Number | `500` | 标题字重 |
+| `titleFontSize` | String/Number | `'18px'` | 标题字号 |
+| `titleColor` | String | `'#ffffff'` | 标题颜色 |
+| `titleLineHeight` | String/Number | `1` | 标题行高 |
+| `titleMarginBottom` | String/Number | `'2px'` | 标题底部边距 |
+
+### 数值相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numDisplay` | String | `'flex'` | 数值显示方式 |
+| `numAlignItems` | String | `'baseline'` | 数值对齐方式 |
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+| `numFontSize` | String/Number | `'26px'` | 数值字号 |
+| `numLineHeight` | String/Number | `1` | 数值行高 |
+| `numMarginRight` | String/Number | `'4px'` | 数值右侧边距 |
+| `numPaddingRight` | String/Number | `'2px'` | 数值右侧内边距 |
+| `numColor` | String | `'transparent'` | 数值颜色（使用渐变色时设为transparent） |
+| `numBackground` | String | `'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'` | 数值背景渐变色 |
+| `numBackgroundClip` | String | `'text'` | 数值背景裁剪 |
+| `numTextShadow` | String | `'0px 2px 4px rgba(74, 239, 160, 0.5)'` | 数值文字阴影 |
+
+### 单位相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `unitFontFamily` | String | `'PingFangSC, PingFang SC'` | 单位字体 |
+| `unitFontWeight` | String/Number | `400` | 单位字重 |
+| `unitFontSize` | String/Number | `'12px'` | 单位字号 |
+| `unitColor` | String | `'#ffffff'` | 单位颜色 |
+| `unitLineHeight` | String/Number | `1` | 单位行高 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-icon-label
+    title="全域客流"
+    :data="359647"
+    unit="人次"
+  />
+</template>
+
+<script>
+import LIconLabel from '@/components/moduleDataNew/l-icon-label/index.vue'
+
+export default {
+  components: {
+    LIconLabel
+  }
+}
+</script>
+```
+
+### 自定义图标
+
+```vue
+<template>
+  <l-icon-label
+    title="重点景区客流"
+    :data="123456"
+    unit="人次"
+    :icon="require('@/assets/custom-icon.png')"
+  />
+</template>
+```
+
+### 自定义背景图
+
+```vue
+<template>
+  <l-icon-label
+    title="住宿监测"
+    :data="85"
+    unit="%"
+    :bgImage="require('@/assets/custom-bg.png')"
+  />
+</template>
+```
+
+### 自定义数值和标题样式
+
+```vue
+<template>
+  <l-icon-label
+    title="今日累计客流"
+    :data="4230737"
+    unit="人次"
+    :numFontSize="30"
+    :numBackground="'linear-gradient(180deg, #FF6B6B 0%, #4CE27E 100%)'"
+    :numTextShadow="'0px 2px 8px rgba(255, 107, 107, 0.6)'"
+    :titleFontSize="16"
+    titleColor="#E8EEF4"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-icon-label
+    title="文博场馆接待量"
+    :data="690"
+    unit="人次"
+    :cardWidth="250"
+    :cardHeight="70"
+    :cardPadding="'0 16px'"
+    :iconWidth="44"
+    :iconHeight="44"
+    :iconMarginRight="14"
+    :numFontSize="28"
+    :numBackground="'linear-gradient(180deg, #4CE27E 0%, #36D399 100%)'"
+    :numTextShadow="'0px 2px 10px rgba(76, 226, 126, 0.7)'"
+    :titleFontSize="16"
+    :titleMarginBottom="4"
+    :unitFontSize="14"
+  />
+</template>
+```
+
+### 循环使用（v-for）
+
+```vue
+<template>
+  <div class="today-flow-list">
+    <l-icon-label
+      v-for="(item, index) in todayFlowList"
+      :key="index"
+      :title="item.title"
+      :data="item.num"
+      :unit="item.unit"
+      :icon="item.icon"
+    />
+  </div>
+</template>
+
+<script>
+import LIconLabel from '@/components/moduleDataNew/l-icon-label/index.vue'
+
+export default {
+  components: {
+    LIconLabel
+  },
+  data() {
+    return {
+      todayFlowList: [
+        { title: '全域客流', num: 359647, unit: '人次', icon: require('@/assets/icon-1.png') },
+        { title: '重点景区客流', num: 123456, unit: '人次', icon: require('@/assets/icon-2.png') },
+        { title: '文博场馆客流', num: 690, unit: '人次', icon: require('@/assets/icon-3.png') }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.today-flow-list {
+  display: flex;
+  gap: 16px;
+}
+</style>
+```
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 computed 属性动态生成内联样式：
+
+```javascript
+computed: {
+  numStyle() {
+    return {
+      fontFamily: this.numFontFamily,
+      fontWeight: this.numFontWeight,
+      fontStyle: this.numFontStyle,
+      fontSize: typeof this.numFontSize === 'number' 
+        ? `${this.numFontSize}px` 
+        : this.numFontSize,
+      color: this.numColor,
+      background: this.numBackground,
+      WebkitBackgroundClip: this.numBackgroundClip,
+      backgroundClip: this.numBackgroundClip,
+      textShadow: this.numTextShadow
+    }
+  }
+}
+```
+
+### 默认背景图和图标兜底
+
+```javascript
+import { getBgPath, getIconPath } from './img/images'
+
+computed: {
+  computedIcon() {
+    if (this.icon) {
+      return this.icon
+    }
+    // 使用默认图标
+    return getIconPath()
+  },
+
+  computedBgImage() {
+    if (this.bgImage) {
+      return this.bgImage
+    }
+    // 使用默认背景图
+    return getBgPath()
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<template>
+  <div class="l-icon-label" :style="cardStyle">
+    <img class="l-icon-label__icon" :src="computedIcon" :style="iconStyle" />
+    <div class="l-icon-label__info" :style="infoStyle">
+      <div class="l-icon-label__title" :style="titleStyle">{{ title }}</div>
+      <div class="l-icon-label__num" :style="numContainerStyle">
+        <span class="l-icon-label__num-value" :style="numStyle">{{ data }}</span>
+        <span class="l-icon-label__num-unit" :style="unitStyle">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **背景图和图标可选**：`bgImage` 和 `icon` 参数是可选的，未传入时使用默认值
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认资源**：组件内置默认背景图和图标，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-icon-label__icon`、`l-icon-label__title`、`l-icon-label__num-value` 等 BEM 命名规范
+6. **渐变数值**：使用渐变色时，`numColor` 应设为 `transparent`，通过 `numBackground` 设置渐变色
+7. **flex 布局**：组件使用 flex 布局，图标和信息容器水平排列
+
+## 适用场景
+
+- ✅ 今日累计客流展示
+- ✅ 住宿监测数据展示
+- ✅ 带图标的数据卡片
+- ✅ 需要自定义背景图和图标的场景
+- ✅ 多项指标并排展示（通过 v-for）
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `moduleData_7` 重命名为 `l-icon-label`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数（替代 SCSS 变量）
+  - 添加详细的字段注释说明
+  - 添加默认背景图和默认图标支持
+  - 支持背景图、图标、数值、标题、单位等所有样式自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 移除 css/*.scss 文件，全部改为动态参数控制
+
+> AI生成

package/src/l-icon-label/img/images.js

@@ -0,0 +1,28 @@
+/**
+ * LIconLabel 组件图片资源映射
+ * 提供默认背景图和默认图标的导出函数
+ */
+
+// 预加载所有图片资源
+const images = {
+  bg: require('./l-icon-label_bg.png'),
+  icon: require('./l-icon-label_icon.png')
+}
+
+/**
+ * 获取默认背景图路径
+ * @returns {string} 背景图路径
+ */
+export function getBgPath() {
+  return images.bg
+}
+
+/**
+ * 获取默认图标路径
+ * @returns {string} 图标路径
+ */
+export function getIconPath() {
+  return images.icon
+}
+
+export default images

package/src/l-icon-label/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="l-icon-label" :style="cardStyle">
+    <img class="l-icon-label__icon" :src="computedIcon" :style="iconStyle" />
+    <div class="l-icon-label__info" :style="infoStyle">
+      <div class="l-icon-label__title" :style="titleStyle">{{ title }}</div>
+      <div class="l-icon-label__num" :style="numContainerStyle">
+        <span class="l-icon-label__num-value" :style="numStyle">{{ data }}</span>
+        <span class="l-icon-label__num-unit" :style="unitStyle">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getBgPath, getIconPath } from './img/images'
+
+export default {
+  name: 'LIconLabel',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 图标图片（外部传入优先，否则使用默认）
+    computedIcon() {
+      if (this.icon) {
+        return this.icon
+      }
+      // 使用默认图标
+      return getIconPath()
+    },
+
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      // 使用默认背景图
+      return getBgPath()
+    },
+
+    // 卡片容器样式
+    cardStyle() {
+      return {
+        display: 'flex',
+        alignItems: this.cardAlignItems,
+        width: typeof this.cardWidth === 'number' ? `${this.cardWidth}px` : this.cardWidth,
+        height: typeof this.cardHeight === 'number' ? `${this.cardHeight}px` : this.cardHeight,
+        background: this.computedBgImage ? `url(${this.computedBgImage}) 0 0 no-repeat` : '',
+        backgroundSize: this.bgSize,
+        padding: this.cardPadding,
+        boxSizing: this.cardBoxSizing
+      }
+    },
+
+    // 图标样式
+    iconStyle() {
+      return {
+        width: typeof this.iconWidth === 'number' ? `${this.iconWidth}px` : this.iconWidth,
+        height: typeof this.iconHeight === 'number' ? `${this.iconHeight}px` : this.iconHeight,
+        flexShrink: this.iconFlexShrink,
+        marginRight: typeof this.iconMarginRight === 'number' ? `${this.iconMarginRight}px` : this.iconMarginRight
+      }
+    },
+
+    // 信息容器样式
+    infoStyle() {
+      return {
+        flex: this.infoFlex,
+        display: this.infoDisplay,
+        flexDirection: this.infoFlexDirection,
+        justifyContent: this.infoJustifyContent
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontWeight: this.titleFontWeight,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        lineHeight: typeof this.titleLineHeight === 'number' ? this.titleLineHeight : this.titleLineHeight,
+        marginBottom: typeof this.titleMarginBottom === 'number' ? `${this.titleMarginBottom}px` : this.titleMarginBottom
+      }
+    },
+
+    // 数值容器样式
+    numContainerStyle() {
+      return {
+        display: this.numDisplay,
+        alignItems: this.numAlignItems
+      }
+    },
+
+    // 数值样式
+    numStyle() {
+      return {
+        fontFamily: this.numFontFamily,
+        fontWeight: this.numFontWeight,
+        fontStyle: this.numFontStyle,
+        fontSize: typeof this.numFontSize === 'number' ? `${this.numFontSize}px` : this.numFontSize,
+        lineHeight: typeof this.numLineHeight === 'number' ? this.numLineHeight : this.numLineHeight,
+        marginRight: typeof this.numMarginRight === 'number' ? `${this.numMarginRight}px` : this.numMarginRight,
+        paddingRight: typeof this.numPaddingRight === 'number' ? `${this.numPaddingRight}px` : this.numPaddingRight,
+        color: this.numColor,
+        background: this.numBackground,
+        WebkitBackgroundClip: this.numBackgroundClip,
+        backgroundClip: this.numBackgroundClip,
+        textShadow: this.numTextShadow
+      }
+    },
+
+    // 单位样式
+    unitStyle() {
+      return {
+        fontFamily: this.unitFontFamily,
+        fontWeight: this.unitFontWeight,
+        fontSize: typeof this.unitFontSize === 'number' ? `${this.unitFontSize}px` : this.unitFontSize,
+        color: this.unitColor,
+        lineHeight: typeof this.unitLineHeight === 'number' ? this.unitLineHeight : this.unitLineHeight
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.l-icon-label {
+  // 基础样式通过内联样式控制
+
+  &__icon {
+    // 图标样式通过内联样式控制
+  }
+
+  &__info {
+    // 信息容器样式通过内联样式控制
+  }
+
+  &__title {
+    // 标题样式通过内联样式控制
+  }
+
+  &__num {
+    // 数值容器样式通过内联样式控制
+
+    &-value {
+      // 数值样式通过内联样式控制
+    }
+
+    &-unit {
+      // 单位样式通过内联样式控制
+    }
+  }
+}
+</style>