@travel-screen/l-module-components 1.0.0

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="l-label-value">
+    <div
+      v-for="(item, index) in dataList"
+      :key="`item-${index}`"
+      class="l-label-value__item"
+      :class="{ 'l-label-value__item--last': index === dataList.length - 1 }"
+    >
+      <div class="l-label-value__value" :style="numStyle">{{ item.num }}</div>
+      <div class="l-label-value__label" :style="labelStyle">{{ item.label }}</div>
+      <!-- 分隔线：除了最后一项，其他项右侧都显示分隔线 -->
+      <img
+        v-if="index < dataList.length - 1"
+        class="l-label-value__divider"
+        :src="computedLineImage"
+        :style="dividerStyle"
+        alt=""
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getLinePath } from './img/images'
+
+export default {
+  name: 'LLabelValue',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 分隔线图片（外部传入优先，否则使用默认）
+    computedLineImage() {
+      if (this.lineImage) {
+        return this.lineImage
+      }
+      // 使用默认分隔线
+      return getLinePath()
+    },
+
+    // 数值样式
+    numStyle() {
+      return {
+        fontFamily: this.valueFontFamily,
+        fontWeight: this.valueFontWeight,
+        fontStyle: this.valueFontStyle,
+        fontSize: typeof this.valueFontSize === 'number' ? `${this.valueFontSize}px` : this.valueFontSize,
+        lineHeight: typeof this.valueLineHeight === 'number' ? this.valueLineHeight : this.valueLineHeight,
+        color: this.valueColor,
+        background: this.valueBackground,
+        WebkitBackgroundClip: this.valueBackgroundClip,
+        backgroundClip: this.valueBackgroundClip,
+        textShadow: this.valueTextShadow,
+        marginBottom: typeof this.valueMarginBottom === 'number' ? `${this.valueMarginBottom}px` : this.valueMarginBottom
+      }
+    },
+
+    // 标签样式
+    labelStyle() {
+      return {
+        fontFamily: this.labelFontFamily,
+        fontWeight: this.labelFontWeight,
+        fontSize: typeof this.labelFontSize === 'number' ? `${this.labelFontSize}px` : this.labelFontSize,
+        color: this.labelColor,
+        lineHeight: typeof this.labelLineHeight === 'number' ? this.labelLineHeight : this.labelLineHeight,
+        textAlign: this.labelTextAlign
+      }
+    },
+
+    // 分隔线样式
+    dividerStyle() {
+      return {
+        width: typeof this.lineWidth === 'number' ? `${this.lineWidth}px` : this.lineWidth,
+        height: typeof this.lineHeight === 'number' ? `${this.lineHeight}px` : this.lineHeight
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.l-label-value {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    position: relative;
+
+    // 最后一项不需要右侧边距
+    &--last {
+      .l-label-value__divider {
+        display: none;
+      }
+    }
+  }
+
+  &__value {
+    width: 100%;
+    text-align: center;
+    // 数值样式通过内联样式控制
+  }
+
+  &__label {
+    width: 100%;
+    text-align: center;
+    margin-top: 8px;
+    // 标签样式通过内联样式控制
+  }
+
+  &__divider {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/l-label-value/interface/index.js

@@ -0,0 +1,116 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 数据列表：每项包含 num（数值）和 label（标签文字）
+  dataList: {
+    type: Array,
+    default: () => [
+      { num: '-', label: '风险总数' },
+      { num: '-', label: '风险解除率' },
+      { num: '-', label: '隐患总数' },
+      { num: '-', label: '隐患整改率' }
+    ]
+  },
+
+  // ========== 分隔线相关 ==========
+  // 分隔线图片：分隔线的图片URL，未传入时使用默认分隔线
+  lineImage: {
+    type: String,
+    default: ''
+  },
+  // 分隔线宽度：分隔线的宽度
+  lineWidth: {
+    type: [String, Number],
+    default: '2px'
+  },
+  // 分隔线高度：分隔线的高度
+  lineHeight: {
+    type: [String, Number],
+    default: '36px'
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体：数值文字的字体族
+  valueFontFamily: {
+    type: String,
+    default: 'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'
+  },
+  // 数值字重：数值文字的粗细
+  valueFontWeight: {
+    type: [String, Number],
+    default: 'bold'
+  },
+  // 数值字体样式：数值文字的样式（italic为斜体）
+  valueFontStyle: {
+    type: String,
+    default: 'italic'
+  },
+  // 数值字号：数值文字的大小
+  valueFontSize: {
+    type: [String, Number],
+    default: '28px'
+  },
+  // 数值行高：数值文字的行高
+  valueLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 数值颜色：数值文字的颜色（使用渐变时设为transparent）
+  valueColor: {
+    type: String,
+    default: 'transparent'
+  },
+  // 数值渐变背景：数值文字的渐变背景
+  valueBackground: {
+    type: String,
+    default: 'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'
+  },
+  // 数值背景裁剪：背景裁剪方式（text表示只在文字上显示背景）
+  valueBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 数值文字阴影：数值文字的阴影效果
+  valueTextShadow: {
+    type: String,
+    default: '0px 2px 6px rgba(74, 239, 160, 0.5)'
+  },
+  // 数值底部边距：数值与标签之间的间距
+  valueMarginBottom: {
+    type: [String, Number],
+    default: '8px'
+  },
+
+  // ========== 标签相关 ==========
+  // 标签字体：标签文字的字体族
+  labelFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标签字重：标签文字的粗细
+  labelFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 标签字号：标签文字的大小
+  labelFontSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 标签颜色：标签文字的颜色
+  labelColor: {
+    type: String,
+    default: '#A3C2CC'
+  },
+  // 标签行高：标签文字的行高
+  labelLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 标签对齐方式：标签文字的水平对齐
+  labelTextAlign: {
+    type: String,
+    default: 'center'
+  }
+}
+
+export default interfaceObj

package/src/l-metric-tile/README.md

@@ -0,0 +1,391 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'f7fab33e-05a1-405f-bfec-a824de3d5b45'
+  PropagateID: 'f7fab33e-05a1-405f-bfec-a824de3d5b45'
+  ReservedCode1: '925bb0b0-3bf5-491c-b92a-a3a967b66cde'
+  ReservedCode2: '925bb0b0-3bf5-491c-b92a-a3a967b66cde'
+---
+
+# LMetricTile 组件说明
+
+## 概述
+
+`LMetricTile` 是一个参数化驱动的指标卡片组件，采用类似 Element UI 的封装方式。所有样式（背景图、卡片尺寸、文字大小、颜色等）均通过 props 参数动态控制，不再依赖 CSS 样式文件。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **内联样式**：使用 computed 属性动态生成内联样式
+- ✅ **高度灵活**：支持自定义背景图、卡片尺寸、字体、颜色等
+- ✅ **默认背景图**：未传入背景图时自动使用组件内置默认背景图
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+
+## 设计原则
+
+### Element UI 风格封装
+
+```vue
+<!-- 类似 Element UI 的使用方式 -->
+<l-metric-tile
+  title="消费品牌"
+  :data="128"
+  unit="个"
+  :num-font-size="24"
+  num-color="transparent"
+  num-background="linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)"
+/>
+```
+
+## 文件结构
+
+```
+l-metric-tile/
+├── img/                        # 默认图片资源
+│   ├── images.js               # 图片映射文件
+│   └── l-metric-tile_bg_1.png  # 默认背景图
+├── interface/
+│   └── index.js                # Props 定义
+├── index.vue                   # 主组件（内联样式驱动）
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础参数
+
+| 参数名 | 类型 | 默认值 | 必填 | 说明 |
+|--------|------|--------|------|------|
+| `title` | String | `'标题'` | 否 | 标题文本 |
+| `data` | String/Number | `0` | 否 | 数据值 |
+| `unit` | String | `''` | 否 | 单位 |
+| `bgImage` | String | `''` | 否 | 背景图 URL（可选，未传时使用默认） |
+
+### 卡片容器参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `cardWidth` | String/Number | `'95px'` | 卡片宽度 |
+| `cardHeight` | String/Number | `'70px'` | 卡片高度 |
+| `cardPadding` | String/Number | `0` | 卡片内边距 |
+| `cardDisplay` | String | `'flex'` | 显示方式 |
+| `cardFlexDirection` | String | `'column'` | 主轴方向 |
+| `cardAlignItems` | String | `'center'` | 交叉轴对齐 |
+| `cardJustifyContent` | String | `'center'` | 主轴对齐 |
+| `cardBoxSizing` | String | `'border-box'` | 盒模型 |
+| `cardBgSize` | String | `'100% 100%'` | 背景图尺寸 |
+
+### 标题参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleFontFamily` | String | `'PingFangSC, PingFang SC'` | 标题字体 |
+| `titleFontWeight` | String/Number | `400` | 标题字重 |
+| `titleFontSize` | String/Number | `'14px'` | 标题字号 |
+| `titleColor` | String | `'#ffffff'` | 标题颜色 |
+| `titleLineHeight` | String/Number | `1` | 标题行高 |
+| `titleMarginBottom` | String/Number | `'10px'` | 标题下边距 |
+| `titleTextAlign` | String | `'center'` | 标题对齐 |
+| `titlePadding` | String/Number | `0` | 标题内边距 |
+
+### 数值容器参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numDisplay` | String | `'flex'` | 显示方式 |
+| `numAlignItems` | String | `'baseline'` | 交叉轴对齐 |
+| `numLineHeight` | String/Number | `1` | 行高 |
+| `numMarginBottom` | String/Number | `0` | 下边距 |
+| `numJustifyContent` | String | `'center'` | 主轴对齐 |
+
+### 数值参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+| `numFontSize` | String/Number | `'20px'` | 数值字号 |
+| `numColor` | String | `'transparent'` | 数值颜色 |
+| `numBackground` | String | `'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'` | 数值渐变背景 |
+| `numBackgroundClip` | String | `'text'` | 背景裁剪方式 |
+| `numTextShadow` | String | `'0px 2px 6px rgba(74, 239, 160, 0.5)'` | 数值阴影 |
+| `numPaddingRight` | String/Number | `'3px'` | 数值右内边距 |
+| `numMarginRight` | String/Number | `'4px'` | 数值右边距 |
+
+### 单位参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `unitFontFamily` | String | `'PingFangSC, PingFang SC'` | 单位字体 |
+| `unitFontWeight` | String/Number | `400` | 单位字重 |
+| `unitFontSize` | String/Number | `'12px'` | 单位字号 |
+| `unitColor` | String | `'#ffffff'` | 单位颜色 |
+| `unitLineHeight` | String/Number | `1` | 单位行高 |
+| `unitMarginLeft` | String/Number | `0` | 单位左边距 |
+
+## 使用方式
+
+### 基本使用（使用默认样式）
+
+```vue
+<template>
+  <l-metric-tile
+    title="消费品牌"
+    :data="128"
+    unit="个"
+  />
+</template>
+
+<script>
+import LMetricTile from '@/components/moduleDataNew/l-metric-tile/index.vue'
+
+export default {
+  components: {
+    LMetricTile
+  }
+}
+</script>
+```
+
+### 自定义背景图
+
+```vue
+<template>
+  <l-metric-tile
+    title="停车场"
+    :data="128"
+    unit="个"
+    :bg-image="require('@/assets/parking-bg.png')"
+    :card-width="120"
+    :card-height="90"
+  />
+</template>
+```
+
+### 自定义数值样式（绿色渐变）
+
+```vue
+<template>
+  <l-metric-tile
+    title="星级酒店"
+    :data="56"
+    unit="家"
+    :num-font-size="24"
+    num-color="transparent"
+    num-background="linear-gradient(180deg, #ffffff 0%, #4CE27E 100%)"
+    :num-text-shadow="'0px 2px 6px rgba(76, 226, 126, 0.5)'"
+  />
+</template>
+```
+
+### 自定义数值样式（橙色渐变）
+
+```vue
+<template>
+  <l-metric-tile
+    title="民宿"
+    :data="238"
+    unit="家"
+    :num-font-size="24"
+    num-color="transparent"
+    num-background="linear-gradient(180deg, #ffffff 0%, #FF8C42 100%)"
+    :num-text-shadow="'0px 2px 6px rgba(255, 140, 66, 0.5)'"
+    unit-color="#ffffff"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-metric-tile
+    title="客流指数"
+    :data="95.2"
+    :card-width="150"
+    :card-height="100"
+    :card-padding="10"
+    :title-font-size="16"
+    title-color="#FFFFFF"
+    :num-font-size="28"
+    :num-font-weight="700"
+    num-color="transparent"
+    num-background="linear-gradient(180deg, #00F2FE 0%, #4FACFE 100%)"
+    :num-text-shadow="'0px 2px 6px rgba(0, 242, 254, 0.5)'"
+    :unit-font-size="14"
+    unit-color="rgba(255,255,255,0.8)"
+  />
+</template>
+```
+
+### 循环渲染（推荐）
+
+```vue
+<template>
+  <l-metric-tile
+    v-for="(item, index) in list"
+    :key="index"
+    :title="item.title"
+    :data="item.data"
+    :unit="item.unit"
+    :bg-image="item.bgImage"
+    :num-background="item.numBackground"
+    :num-text-shadow="item.numTextShadow"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          title: '消费品牌',
+          data: 128,
+          unit: '个',
+          bgImage: require('@/assets/brand-bg.png'),
+          numBackground: 'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)',
+          numTextShadow: '0px 2px 6px rgba(74, 239, 160, 0.5)'
+        },
+        {
+          title: '星级酒店',
+          data: 56,
+          unit: '家',
+          bgImage: require('@/assets/hotel-bg.png'),
+          numBackground: 'linear-gradient(180deg, #ffffff 0%, #4CE27E 100%)',
+          numTextShadow: '0px 2px 6px rgba(76, 226, 126, 0.5)'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 背景图使用方式
+
+组件接受一个背景图参数：
+
+1. **bgImage**（可选）：背景图 URL
+
+**说明**：
+- 如果未传入背景图，组件会自动使用内部的默认背景图
+- 如果传入了背景图，则使用外部传入的背景图
+
+### 使用默认背景图（不传参）
+
+```vue
+<l-metric-tile
+  title="消费品牌"
+  :data="128"
+  unit="个"
+/>
+<!-- 自动使用组件内置的默认背景图 -->
+```
+
+### 使用 require 引入
+
+```vue
+<l-metric-tile
+  :bg-image="require('@/assets/bg/parking-bg.png')"
+/>
+```
+
+### 使用外部 URL
+
+```vue
+<l-metric-tile
+  bg-image="https://example.com/bg.png"
+/>
+```
+
+### 从数据对象传入
+
+```vue
+<l-metric-tile
+  :bg-image="item.bgImage"
+/>
+```
+
+## 尺寸参数说明
+
+所有尺寸参数均支持 String 和 Number 两种类型：
+
+```vue
+<!-- String 类型（带单位） -->
+<l-metric-tile :num-font-size="'24px'" />
+
+<!-- Number 类型（自动添加 px） -->
+<l-metric-tile :num-font-size="24" />
+```
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 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
+    }
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<span class="l-metric-tile__value-num" :style="numStyle">{{ data }}</span>
+```
+
+## 注意事项
+
+1. **渐变文字兼容**：使用了 `WebkitBackgroundClip` 和 `backgroundClip` 实现渐变文字效果
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认背景图**：组件内置默认背景图，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-metric-tile__title`、`l-metric-tile__value-num` 等 BEM 命名规范
+
+## 适用场景
+
+- ✅ 需要动态调整样式的指标卡片
+- ✅ 不同页面使用不同主题的卡片
+- ✅ 需要根据数据状态改变颜色/大小
+- ✅ 类似 Element UI 的组件化开发方式
+- ✅ 消费品牌、停车服务、住宿服务等指标展示
+
+## 更新日志
+
+- **v1.1.0** (2026-06-10)
+  - 恢复内部默认背景图支持（img/ 目录）
+  - bgImage 改为可选参数
+  - 新增 computedBgImage 兜底逻辑
+  - 图片命名规范：l-metric-tile_bg_X.png
+  - 更新 README 文档
+
+- **v1.0.0** (2026-06-10)
+  - 从 moduleData_5 重命名为 `l-metric-tile`
+  - 移除 CSS 文件依赖，改为 props 驱动
+  - 移除内部图片索引机制（cssStyle + imgIndex）
+  - 新增 30+ 个样式控制参数
+  - 使用内联样式实现（类似 Element UI）
+  - 支持 String/Number 类型的尺寸参数
+  - 背景图通过 bgImage 参数外部传入
+
+> AI生成

package/src/l-metric-tile/img/images.js

@@ -0,0 +1,19 @@
+/**
+ * l-metric-tile 组件图片资源映射
+ * 提供默认背景图获取函数
+ */
+
+const images = {
+  // 背景图
+  bg1: require('./l-metric-tile_bg_1.png')
+}
+
+/**
+ * 获取背景图路径
+ * @param {Number|String} index - 背景图索引（默认 1）
+ * @returns {String} 背景图路径
+ */
+export function getBgPath(index = 1) {
+  const key = `bg${index}`
+  return images[key] || images.bg1
+}