@travel-screen/l-module-components 1.0.0

package/src/l-data-panel/README.md

@@ -0,0 +1,331 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '2ea2d13c-1fa6-4562-ba6a-3d802bb1abf8'
+  PropagateID: '2ea2d13c-1fa6-4562-ba6a-3d802bb1abf8'
+  ReservedCode1: '8cf2c751-c37c-421c-bc38-47dabc47f145'
+  ReservedCode2: '8cf2c751-c37c-421c-bc38-47dabc47f145'
+---
+
+# LDataPanel 组件说明
+
+## 概述
+
+`LDataPanel` 是一个参数化驱动的数据面板组件，采用类似 Element UI 的封装方式。用于展示3个并列的数据卡片（如：重点景区实时接待量、全域实时客流量、文博场馆实时接待量）。所有样式（背景图、数值大小/颜色、标签样式、布局等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **默认背景图**：未传入背景图时自动使用组件内置默认背景图
+- ✅ **高度灵活**：支持自定义背景图、尺寸、颜色、字体等所有样式
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **3卡片布局**：固定展示3个数据卡片，布局统一
+
+## 文件结构
+
+```
+l-data-panel/
+├── img/
+│   ├── images.js                       # 图片映射文件
+│   ├── l-data-panel_bg_1.png           # 卡片1默认背景图
+│   ├── l-data-panel_bg_2.png           # 卡片2默认背景图
+│   └── l-data-panel_bg_3.png           # 卡片3默认背景图
+├── interface/
+│   └── index.js                        # Props 定义（30+ 个参数）
+├── index.vue                           # 主组件（内联样式驱动）
+└── README.md                           # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `dataList` | Array | `[]` | 数据列表，每项包含 num（数值）和 label（标签文字） |
+
+### 容器相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `containerDisplay` | String | `'flex'` | 容器显示方式 |
+| `containerJustifyContent` | String | `'space-between'` | 容器对齐方式 |
+| `containerWidth` | String/Number | `'100%'` | 容器宽度 |
+| `containerHeight` | String/Number | `'140px'` | 容器高度 |
+| `containerPadding` | String | `'0 40px'` | 容器内边距 |
+| `containerMarginTop` | String/Number | `'40px'` | 容器顶部外边距 |
+| `containerPointerEvents` | String | `'auto'` | 容器指针事件 |
+
+### 卡片通用样式
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `cardHeight` | String/Number | `'110px'` | 卡片高度 |
+| `cardDisplay` | String | `'flex'` | 卡片显示方式 |
+| `cardFlexDirection` | String | `'column'` | 卡片主轴方向 |
+| `cardJustifyContent` | String | `'center'` | 卡片交叉轴对齐 |
+| `cardBgRepeat` | String | `'no-repeat'` | 卡片背景重复方式 |
+| `cardBgPosition` | String | `'center'` | 卡片背景位置 |
+| `cardBgSize` | String | `'100% 100%'` | 卡片背景尺寸 |
+
+### 卡片1（左侧）相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `card1Position` | String | `'relative'` | 卡片1定位方式 |
+| `card1Left` | String/Number | `'7px'` | 卡片1左侧偏移 |
+| `card1PaddingRight` | String/Number | `'62px'` | 卡片1右侧内边距 |
+| `card1Width` | String/Number | `'288px'` | 卡片1宽度 |
+| `card1TextAlign` | String | `'right'` | 卡片1文字对齐 |
+| `card1BgImage` | String | `''` | 卡片1背景图（留空使用默认） |
+
+### 卡片2（中间）相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `card2TextAlign` | String | `'center'` | 卡片2文字对齐 |
+| `card2Width` | String/Number | `'267px'` | 卡片2宽度 |
+| `card2BgImage` | String | `''` | 卡片2背景图（留空使用默认） |
+
+### 卡片3（右侧）相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `card3TextAlign` | String | `'left'` | 卡片3文字对齐 |
+| `card3Position` | String | `'relative'` | 卡片3定位方式 |
+| `card3PaddingLeft` | String/Number | `'62px'` | 卡片3左侧内边距 |
+| `card3Left` | String/Number | `'-7px'` | 卡片3左侧偏移 |
+| `card3Width` | String/Number | `'288px'` | 卡片3宽度 |
+| `card3BgImage` | String | `''` | 卡片3背景图（留空使用默认） |
+
+### 数值相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+| `numFontSize` | String/Number | `'44px'` | 数值字号 |
+| `numColor` | String | `'#ffffff'` | 数值颜色 |
+| `numBackground` | String | `'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'` | 数值背景渐变色 |
+| `numBackgroundClip` | String | `'text'` | 数值背景裁剪 |
+| `numTextShadow` | String | `'0px 2px 6px rgba(74, 239, 160, 0.5)'` | 数值文字阴影 |
+| `numLineHeight` | String/Number | `1` | 数值行高 |
+| `numMarginBottom` | String/Number | `'10px'` | 数值底部边距 |
+| `numPaddingRight` | String/Number | `'5px'` | 数值右侧内边距 |
+
+### 标签相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `labelFontFamily` | String | `'PingFangSC, PingFang SC'` | 标签字体 |
+| `labelFontWeight` | String/Number | `500` | 标签字重 |
+| `labelFontSize` | String/Number | `'20px'` | 标签字号 |
+| `labelColor` | String | `'#ffffff'` | 标签颜色 |
+| `labelLineHeight` | String/Number | `1` | 标签行高 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-data-panel
+    :dataList="passengerFlowList"
+  />
+</template>
+
+<script>
+import LDataPanel from '@/components/moduleDataNew/l-data-panel/index.vue'
+
+export default {
+  components: {
+    LDataPanel
+  },
+  data() {
+    return {
+      passengerFlowList: [
+        { num: 359647, label: '重点景区实时接待量' },
+        { num: 4230737, label: '全域实时客流量' },
+        { num: 690, label: '文博场馆实时接待量' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义背景图
+
+```vue
+<template>
+  <l-data-panel
+    :dataList="passengerFlowList"
+    :card1BgImage="require('@/assets/custom-bg-1.png')"
+    :card2BgImage="require('@/assets/custom-bg-2.png')"
+    :card3BgImage="require('@/assets/custom-bg-3.png')"
+  />
+</template>
+```
+
+### 自定义数值和标签样式
+
+```vue
+<template>
+  <l-data-panel
+    :dataList="passengerFlowList"
+    :numFontSize="48"
+    numColor="#FF6B6B"
+    :numBackground="'linear-gradient(180deg, #FF6B6B 0%, #4CE27E 100%)'"
+    :numTextShadow="'0px 2px 8px rgba(255, 107, 107, 0.6)'"
+    :labelFontSize="18"
+    labelColor="#E8EEF4"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-data-panel
+    :dataList="passengerFlowList"
+    :containerHeight="150"
+    :containerPadding="'0 50px'"
+    :containerMarginTop="50"
+    :cardHeight="120"
+    :card1Width="300"
+    :card2Width="280"
+    :card3Width="300"
+    :numFontSize="48"
+    numColor="#4CE27E"
+    :numBackground="'linear-gradient(180deg, #4CE27E 0%, #36D399 100%)'"
+    :numTextShadow="'0px 2px 10px rgba(76, 226, 126, 0.7)'"
+    :labelFontSize="18"
+    labelColor="#E8EEF4"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      passengerFlowList: [
+        { num: 359647, label: '重点景区实时接待量' },
+        { num: 4230737, label: '全域实时客流量' },
+        { num: 690, label: '文博场馆实时接待量' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 数据结构
+
+### dataList 格式
+
+```javascript
+[
+  { num: 359647, label: '重点景区实时接待量' },
+  { num: 4230737, label: '全域实时客流量' },
+  { num: 690, 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 { getImagePath } from './img/images'
+
+methods: {
+  getCardStyle(cardIndex) {
+    const baseStyle = { ...this.cardBaseStyle }
+    
+    // 使用传入的背景图或默认背景图
+    backgroundImage: this.card1BgImage || `url(${getImagePath(1)})`
+    
+    return baseStyle
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<div class="l-data-panel" :style="containerStyle">
+  <div
+    v-for="(item, index) in dataList"
+    :key="index"
+    class="l-data-panel__item"
+    :class="`l-data-panel__item--${index + 1}`"
+    :style="getCardStyle(index + 1)"
+  >
+    <div class="l-data-panel__num" :style="numStyle">{{ item.num }}</div>
+    <div class="l-data-panel__label" :style="labelStyle">{{ item.label }}</div>
+  </div>
+</div>
+```
+
+## 注意事项
+
+1. **背景图可选**：`card1BgImage`、`card2BgImage`、`card3BgImage` 参数是可选的，未传入时使用默认背景图
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认背景图**：组件内置3张默认背景图，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-data-panel__item`、`l-data-panel__num`、`l-data-panel__label` 等 BEM 命名规范
+6. **固定3卡片**：本组件固定展示3个数据卡片，数据列表应为3项
+7. **卡片索引**：卡片索引从1开始（1=左侧，2=中间，3=右侧）
+
+## 适用场景
+
+- ✅ 实时客流数据展示
+- ✅ 多维度数据面板展示
+- ✅ 3卡片并排数据对比
+- ✅ 需要自定义背景图和样式的场景
+- ✅ 顶部指标展示模块
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `moduleData_8` 重命名为 `l-data-panel`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数（替代 SCSS 变量）
+  - 添加详细的字段注释说明
+  - 添加默认背景图支持（3张卡片背景图）
+  - 支持容器、卡片、数值、标签等所有样式自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 移除 css/*.scss 文件，全部改为动态参数控制
+
+> AI生成

package/src/l-data-panel/img/images.js

@@ -0,0 +1,47 @@
+/**
+ * LDataPanel 组件图片资源映射
+ * 提供默认背景图和通过索引获取背景图的方法
+ */
+
+// 预加载所有图片资源
+const images = {
+  bg1: require('./l-data-panel_bg_1.png'),
+  bg2: require('./l-data-panel_bg_2.png'),
+  bg3: require('./l-data-panel_bg_3.png')
+}
+
+/**
+ * 获取背景图路径
+ * @param {number} index - 图片索引（1, 2, 3）
+ * @returns {string} 背景图路径
+ */
+export function getImagePath(index) {
+  const key = `bg${index}`
+  return images[key] || images.bg1
+}
+
+/**
+ * 获取第一张背景图路径（默认）
+ * @returns {string} 背景图路径
+ */
+export function getBgPath1() {
+  return images.bg1
+}
+
+/**
+ * 获取第二张背景图路径
+ * @returns {string} 背景图路径
+ */
+export function getBgPath2() {
+  return images.bg2
+}
+
+/**
+ * 获取第三张背景图路径
+ * @returns {string} 背景图路径
+ */
+export function getBgPath3() {
+  return images.bg3
+}
+
+export default images

package/src/l-data-panel/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="l-data-panel" :style="containerStyle">
+    <div
+      v-for="(item, index) in dataList"
+      :key="index"
+      class="l-data-panel__item"
+      :class="`l-data-panel__item--${index + 1}`"
+      :style="getCardStyle(index + 1)"
+    >
+      <div class="l-data-panel__num" :style="numStyle">{{ item.num }}</div>
+      <div class="l-data-panel__label" :style="labelStyle">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getImagePath } from './img/images'
+
+export default {
+  name: 'LDataPanel',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 容器样式
+    containerStyle() {
+      return {
+        display: this.containerDisplay,
+        justifyContent: this.containerJustifyContent,
+        width: typeof this.containerWidth === 'number' ? `${this.containerWidth}px` : this.containerWidth,
+        height: typeof this.containerHeight === 'number' ? `${this.containerHeight}px` : this.containerHeight,
+        padding: this.containerPadding,
+        marginTop: typeof this.containerMarginTop === 'number' ? `${this.containerMarginTop}px` : this.containerMarginTop,
+        pointerEvents: this.containerPointerEvents
+      }
+    },
+
+    // 卡片通用样式
+    cardBaseStyle() {
+      return {
+        height: typeof this.cardHeight === 'number' ? `${this.cardHeight}px` : this.cardHeight,
+        display: this.cardDisplay,
+        flexDirection: this.cardFlexDirection,
+        justifyContent: this.cardJustifyContent,
+        backgroundRepeat: this.cardBgRepeat,
+        backgroundPosition: this.cardBgPosition,
+        backgroundSize: this.cardBgSize
+      }
+    },
+
+    // 数值样式
+    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,
+        lineHeight: typeof this.numLineHeight === 'number' ? this.numLineHeight : this.numLineHeight,
+        marginBottom: typeof this.numMarginBottom === 'number' ? `${this.numMarginBottom}px` : this.numMarginBottom,
+        paddingRight: typeof this.numPaddingRight === 'number' ? `${this.numPaddingRight}px` : this.numPaddingRight
+      }
+    },
+
+    // 标签样式
+    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
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {
+    // 获取每个卡片的样式
+    getCardStyle(cardIndex) {
+      const baseStyle = { ...this.cardBaseStyle }
+
+      // 根据卡片索引添加特定样式
+      if (cardIndex === 1) {
+        Object.assign(baseStyle, {
+          position: this.card1Position,
+          left: typeof this.card1Left === 'number' ? `${this.card1Left}px` : this.card1Left,
+          paddingRight: typeof this.card1PaddingRight === 'number' ? `${this.card1PaddingRight}px` : this.card1PaddingRight,
+          width: typeof this.card1Width === 'number' ? `${this.card1Width}px` : this.card1Width,
+          textAlign: this.card1TextAlign,
+          backgroundImage: this.card1BgImage || `url(${getImagePath(1)})`
+        })
+      } else if (cardIndex === 2) {
+        Object.assign(baseStyle, {
+          textAlign: this.card2TextAlign,
+          width: typeof this.card2Width === 'number' ? `${this.card2Width}px` : this.card2Width,
+          backgroundImage: this.card2BgImage || `url(${getImagePath(2)})`
+        })
+      } else if (cardIndex === 3) {
+        Object.assign(baseStyle, {
+          textAlign: this.card3TextAlign,
+          position: this.card3Position,
+          paddingLeft: typeof this.card3PaddingLeft === 'number' ? `${this.card3PaddingLeft}px` : this.card3PaddingLeft,
+          left: typeof this.card3Left === 'number' ? `${this.card3Left}px` : this.card3Left,
+          width: typeof this.card3Width === 'number' ? `${this.card3Width}px` : this.card3Width,
+          backgroundImage: this.card3BgImage || `url(${getImagePath(3)})`
+        })
+      }
+
+      return baseStyle
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-data-panel {
+  &__item {
+    // 基础样式通过内联样式控制
+
+    &--1 {
+      // 卡片1特定样式通过内联样式控制
+    }
+
+    &--2 {
+      // 卡片2特定样式通过内联样式控制
+    }
+
+    &--3 {
+      // 卡片3特定样式通过内联样式控制
+    }
+  }
+
+  &__num {
+    // 数值样式通过内联样式控制
+  }
+
+  &__label {
+    // 标签样式通过内联样式控制
+  }
+}
+</style>