@travel-screen/l-module-components 1.0.0

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

@@ -0,0 +1,234 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 标题：显示的标题文字
+  title: {
+    type: String,
+    default: '标题'
+  },
+  // 数值：显示的数值
+  data: {
+    type: [String, Number],
+    default: 0
+  },
+  // 单位：数值单位
+  unit: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 背景图相关 ==========
+  // 背景图图片：卡片背景图URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+  // 背景图尺寸：背景图的缩放方式（如：100% 100%）
+  bgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+
+  // ========== 图标相关 ==========
+  // 图标图片：卡片图标URL，未传入时使用默认图标
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 图标宽度：图标的宽度
+  iconWidth: {
+    type: [String, Number],
+    default: '40px'
+  },
+  // 图标高度：图标的高度
+  iconHeight: {
+    type: [String, Number],
+    default: '40px'
+  },
+  // 图标右侧边距：图标与右侧内容的间距
+  iconMarginRight: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 图标flex收缩：图标是否允许收缩（0为不允许）
+  iconFlexShrink: {
+    type: [String, Number],
+    default: 0
+  },
+
+  // ========== 卡片容器相关 ==========
+  // 卡片宽度：容器的宽度
+  cardWidth: {
+    type: [String, Number],
+    default: '230px'
+  },
+  // 卡片高度：容器的高度
+  cardHeight: {
+    type: [String, Number],
+    default: '66px'
+  },
+  // 卡片内边距：容器的内边距
+  cardPadding: {
+    type: String,
+    default: '0 14px'
+  },
+  // 卡片盒模型：box-sizing 属性
+  cardBoxSizing: {
+    type: String,
+    default: 'border-box'
+  },
+  // 卡片对齐方式：交叉轴对齐方式
+  cardAlignItems: {
+    type: String,
+    default: 'center'
+  },
+
+  // ========== 信息容器相关 ==========
+  // 信息容器flex：信息区域的flex值
+  infoFlex: {
+    type: [String, Number],
+    default: 1
+  },
+  // 信息容器显示方式：display 属性
+  infoDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 信息容器主轴方向：flex-direction 属性
+  infoFlexDirection: {
+    type: String,
+    default: 'column'
+  },
+  // 信息容器交叉轴对齐：justify-content 属性
+  infoJustifyContent: {
+    type: String,
+    default: 'center'
+  },
+
+  // ========== 标题相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标题字重：标题文字的粗细
+  titleFontWeight: {
+    type: [String, Number],
+    default: 500
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '18px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 标题行高：标题文字的行高
+  titleLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 标题底部边距：标题与下方数值的间距
+  titleMarginBottom: {
+    type: [String, Number],
+    default: '2px'
+  },
+
+  // ========== 数值相关 ==========
+  // 数值显示方式：数值容器的display属性
+  numDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 数值对齐方式：数值与单位的对齐方式（baseline、center等）
+  numAlignItems: {
+    type: String,
+    default: 'baseline'
+  },
+  // 数值字体：数值文字的字体族
+  numFontFamily: {
+    type: String,
+    default: 'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'
+  },
+  // 数值字重：数值文字的粗细
+  numFontWeight: {
+    type: [String, Number],
+    default: 'bold'
+  },
+  // 数值字体样式：数值文字的样式（italic为斜体）
+  numFontStyle: {
+    type: String,
+    default: 'italic'
+  },
+  // 数值字号：数值文字的大小
+  numFontSize: {
+    type: [String, Number],
+    default: '26px'
+  },
+  // 数值行高：数值文字的行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 数值右侧边距：数值与单位之间的间距
+  numMarginRight: {
+    type: [String, Number],
+    default: '4px'
+  },
+  // 数值右侧内边距：数值的右侧内边距
+  numPaddingRight: {
+    type: [String, Number],
+    default: '2px'
+  },
+  // 数值颜色：数值文字的颜色（使用渐变色时设为transparent）
+  numColor: {
+    type: String,
+    default: 'transparent'
+  },
+  // 数值背景渐变色：数值文字的渐变背景
+  numBackground: {
+    type: String,
+    default: 'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'
+  },
+  // 数值背景裁剪：背景裁剪方式（text为文字裁剪）
+  numBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 数值文字阴影：数值文字的阴影效果
+  numTextShadow: {
+    type: String,
+    default: '0px 2px 4px rgba(74, 239, 160, 0.5)'
+  },
+
+  // ========== 单位相关 ==========
+  // 单位字体：单位文字的字体族
+  unitFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 单位字重：单位文字的粗细
+  unitFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 单位字号：单位文字的大小
+  unitFontSize: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 单位颜色：单位文字的颜色
+  unitColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 单位行高：单位文字的行高
+  unitLineHeight: {
+    type: [String, Number],
+    default: 1
+  }
+}
+
+export default interfaceObj

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

@@ -0,0 +1,358 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '8bc7d291-59d3-4168-844c-745e620ac407'
+  PropagateID: '8bc7d291-59d3-4168-844c-745e620ac407'
+  ReservedCode1: '592eb883-2e1e-4c1e-b53e-3b49995352f9'
+  ReservedCode2: '592eb883-2e1e-4c1e-b53e-3b49995352f9'
+---
+
+# LLabelValue 组件说明
+
+## 概述
+
+`LLabelValue` 是一个参数化驱动的标签数值展示组件，采用类似 Element UI 的封装方式。用于展示带数值、标签和可选分隔线的单项数据（如：风险总数、隐患总数等指标）。所有样式（数值大小/颜色、标签样式、分隔线等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **默认分隔线**：未传入分隔线图片时自动使用组件内置默认分隔线
+- ✅ **高度灵活**：支持自定义分隔线、数值样式、标签样式等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **渐变数值**：支持数值文字渐变效果
+- ✅ **可选分隔线**：通过 `showLine` 参数控制是否显示分隔线
+
+## 文件结构
+
+```
+l-label-value/
+├── img/
+│   ├── images.js                   # 图片映射文件
+│   └── l-label-value_line.png      # 默认分隔线图片
+├── interface/
+│   └── index.js                    # Props 定义（20+ 个参数）
+├── index.vue                       # 主组件（内联样式驱动）
+└── README.md                       # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `num` | String/Number | `'-'` | 显示的数值 |
+| `label` | String | `''` | 数值下方的标签文字 |
+
+### 分隔线相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `lineImage` | String | `''` | 分隔线图片URL（留空则使用默认分隔线） |
+| `lineWidth` | String/Number | `'2px'` | 分隔线宽度 |
+| `lineHeight` | String/Number | `'36px'` | 分隔线高度 |
+| `showLine` | Boolean | `true` | 是否显示分隔线 |
+
+### 数值相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+| `numFontSize` | String/Number | `'28px'` | 数值字号 |
+| `numLineHeight` | String/Number | `1` | 数值行高 |
+| `numColor` | String | `'transparent'` | 数值颜色（使用渐变时设为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'` | 数值右侧内边距 |
+| `numMarginBottom` | String/Number | `'8px'` | 数值底部边距（与标签的间距） |
+
+### 标签相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `labelFontFamily` | String | `'PingFangSC, PingFang SC'` | 标签字体 |
+| `labelFontWeight` | String/Number | `400` | 标签字重 |
+| `labelFontSize` | String/Number | `'16px'` | 标签字号 |
+| `labelColor` | String | `'#A3C2CC'` | 标签颜色 |
+| `labelLineHeight` | String/Number | `1` | 标签行高 |
+| `labelTextAlign` | String | `'center'` | 标签对齐方式 |
+
+## 使用方式
+
+### 基本使用（单个数据项）
+
+```vue
+<template>
+  <l-label-value
+    num="19503"
+    label="风险总数"
+  />
+</template>
+
+<script>
+import LLabelValue from '@/components/moduleDataNew/l-label-value/index.vue'
+
+export default {
+  components: {
+    LLabelValue
+  }
+}
+</script>
+```
+
+### 多项数据展示（带分隔线）
+
+```vue
+<template>
+  <div class="risk-container">
+    <l-label-value
+      v-for="(item, index) in riskList"
+      :key="index"
+      :num="item.num"
+      :label="item.label"
+    />
+    <img
+      v-for="index in riskList.length - 1"
+      :key="`line-${index}`"
+      class="risk-line"
+      src="@/assets/index/line-img.png"
+    >
+  </div>
+</template>
+
+<script>
+import LLabelValue from '@/components/moduleDataNew/l-label-value/index.vue'
+
+export default {
+  components: {
+    LLabelValue
+  },
+  data() {
+    return {
+      riskList: [
+        { num: 19503, label: '风险总数' },
+        { num: '95.51%', label: '风险解除率' },
+        { num: 6995, label: '隐患总数' },
+        { num: '77.30%', label: '隐患整改率' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.risk-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 74px;
+  padding: 0 4px;
+}
+
+.risk-line {
+  width: 2px;
+  height: 36px;
+  flex-shrink: 0;
+}
+</style>
+```
+
+### 自定义分隔线
+
+```vue
+<template>
+  <l-label-value
+    num="100"
+    label="测试数据"
+    :lineImage="require('@/assets/custom-line.png')"
+    :lineWidth="3"
+    :lineHeight="40"
+  />
+</template>
+```
+
+### 自定义数值和标签样式
+
+```vue
+<template>
+  <l-label-value
+    num="19503"
+    label="风险总数"
+    :numFontSize="32"
+    :numBackground="'linear-gradient(180deg, #FF6B6B 0%, #4CE27E 100%)'"
+    :numTextShadow="'0px 2px 8px rgba(255, 107, 107, 0.6)'"
+    :labelFontSize="18"
+    labelColor="#E8EEF4"
+    :showLine="false"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <div class="risk-container">
+    <l-label-value
+      v-for="(item, index) in riskList"
+      :key="index"
+      :num="item.num"
+      :label="item.label"
+    />
+    <img
+      v-for="index in riskList.length - 1"
+      :key="`line-${index}`"
+      class="risk-line"
+      src="@/assets/index/line-img.png"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      riskList: [
+        { num: 19503, label: '风险总数' },
+        { num: '95.51%', label: '风险解除率' },
+        { num: 6995, label: '隐患总数' },
+        { num: '77.30%', label: '隐患整改率' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.risk-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 74px;
+  padding: 0 4px;
+}
+
+.risk-line {
+  width: 2px;
+  height: 36px;
+  flex-shrink: 0;
+}
+</style>
+```
+
+## 数据结构
+
+### riskList 格式（用于 v-for 循环）
+
+```javascript
+[
+  { num: 19503, label: '风险总数' },
+  { num: '95.51%', label: '风险解除率' },
+  { num: 6995, label: '隐患总数' },
+  { num: '77.30%', label: '隐患整改率' }
+]
+```
+
+- `num`: 数值（支持数字或字符串）
+- `label`: 标签文字
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 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 { getLinePath } from './img/images'
+
+computed: {
+  computedLineImage() {
+    if (this.lineImage) {
+      return this.lineImage
+    }
+    // 使用默认分隔线
+    return getLinePath()
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<template>
+  <div class="l-label-value">
+    <div class="l-label-value__content">
+      <div class="l-label-value__num" :style="numStyle">{{ num }}</div>
+      <div class="l-label-value__label" :style="labelStyle">{{ label }}</div>
+    </div>
+    <div v-if="showLine" class="l-label-value__separator">
+      <img
+        class="l-label-value__line"
+        :src="computedLineImage"
+        :style="lineStyle"
+      >
+    </div>
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **分隔线可选**：`lineImage` 参数是可选的，未传入时使用默认分隔线；`showLine` 参数控制是否显示分隔线
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认分隔线**：组件内置默认分隔线图片，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-label-value__content`、`l-label-value__separator`、`l-label-value__num`、`l-label-value__line` 等 BEM 命名规范
+6. **渐变数值**：使用渐变色时，`numColor` 应设为 `transparent`，通过 `numBackground` 设置渐变色
+7. **flex 布局**：组件使用 `inline-flex` 布局，内容区域和分隔线水平排列，垂直居中对齐
+8. **分隔线居中**：分隔线通过 `l-label-value__separator` 容器包裹，使用 flex 布局确保分隔线在内容区域之间水平垂直居中，默认左右各 10px 内边距
+9. **父容器布局**：建议在父容器中使用 `display: flex; align-items: center; justify-content: space-around;` 来实现多项数据的均匀分布
+
+## 适用场景
+
+- ✅ 文旅风险隐患监管数据展示
+- ✅ 单项指标数值展示
+- ✅ 多项数据横向排列展示（通过 v-for）
+- ✅ 需要自定义分隔线和样式的场景
+- ✅ 顶部指标展示模块
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 创建 `l-label-value` 组件
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 添加默认分隔线图片支持
+  - 支持数值、标签、分隔线等所有样式自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 支持通过 `showLine` 参数控制分隔线显示
+
+> AI生成

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

@@ -0,0 +1,19 @@
+/**
+ * LLabelValue 组件图片资源映射
+ * 提供默认分隔线图片的导出函数
+ */
+
+// 预加载所有图片资源
+const images = {
+  line: require('./l-label-value_line.png')
+}
+
+/**
+ * 获取默认分隔线图片路径
+ * @returns {string} 分隔线图片路径
+ */
+export function getLinePath() {
+  return images.line
+}
+
+export default images