@travel-screen/l-module-components 1.0.0

package/src/l-metric-tile/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="l-metric-tile" :style="cardStyle">
+    <!-- layoutType='title-top'（默认）：标题在上，数值在下 -->
+    <template v-if="layoutType === 'title-top'">
+      <div class="l-metric-tile__title" :style="titleStyle">{{ title }}</div>
+      <div class="l-metric-tile__value" :style="valueContainerStyle">
+        <span class="l-metric-tile__value-num" :style="numStyle">{{ data }}</span>
+        <span class="l-metric-tile__value-unit" :style="unitStyle">{{ unit }}</span>
+      </div>
+    </template>
+    <!-- layoutType='title-bottom'：数值在上，标题在下 -->
+    <template v-else>
+      <div class="l-metric-tile__value" :style="valueContainerStyle">
+        <span class="l-metric-tile__value-num" :style="numStyle">{{ data }}</span>
+        <span class="l-metric-tile__value-unit" :style="unitStyle">{{ unit }}</span>
+      </div>
+      <div class="l-metric-tile__title" :style="titleStyle">{{ title }}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getBgPath } from './img/images'
+
+export default {
+  name: 'LMetricTile',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      // 使用默认背景图
+      return getBgPath(1)
+    },
+
+    // 卡片容器样式
+    cardStyle() {
+      return {
+        width: typeof this.cardWidth === 'number' ? `${this.cardWidth}px` : this.cardWidth,
+        height: typeof this.cardHeight === 'number' ? `${this.cardHeight}px` : this.cardHeight,
+        padding: typeof this.cardPadding === 'number' ? `${this.cardPadding}px` : this.cardPadding,
+        paddingLeft: typeof this.cardPaddingLeft === 'number' ? `${this.cardPaddingLeft}px` : this.cardPaddingLeft,
+        paddingTop: typeof this.cardPaddingTop === 'number' ? `${this.cardPaddingTop}px` : this.cardPaddingTop,
+        display: this.cardDisplay,
+        flexDirection: this.cardFlexDirection,
+        alignItems: this.cardAlignItems,
+        justifyContent: this.cardJustifyContent,
+        boxSizing: this.cardBoxSizing,
+        background: this.computedBgImage ? `url(${this.computedBgImage}) 0 0 no-repeat` : '',
+        backgroundSize: this.cardBgSize
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontWeight: this.titleFontWeight,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        lineHeight: this.titleLineHeight,
+        // 根据布局类型调整边距方向
+        marginBottom: this.layoutType === 'title-top'
+          ? (typeof this.titleMarginBottom === 'number' ? `${this.titleMarginBottom}px` : this.titleMarginBottom)
+          : 0,
+        marginTop: this.layoutType === 'title-bottom'
+          ? (typeof this.titleMarginBottom === 'number' ? `${this.titleMarginBottom}px` : this.titleMarginBottom)
+          : 0,
+        textAlign: this.titleTextAlign,
+        padding: typeof this.titlePadding === 'number' ? `${this.titlePadding}px` : this.titlePadding
+      }
+    },
+
+    // 数值容器样式
+    valueContainerStyle() {
+      return {
+        display: this.numDisplay,
+        alignItems: this.numAlignItems,
+        lineHeight: this.numLineHeight,
+        // 根据布局类型调整边距方向
+        marginBottom: this.layoutType === 'title-top'
+          ? (typeof this.numMarginBottom === 'number' ? `${this.numMarginBottom}px` : this.numMarginBottom)
+          : 0,
+        marginTop: this.layoutType === 'title-bottom'
+          ? (typeof this.numMarginBottom === 'number' ? `${this.numMarginBottom}px` : this.numMarginBottom)
+          : 0,
+        justifyContent: this.numJustifyContent
+      }
+    },
+
+    // 数值样式
+    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,
+        paddingRight: typeof this.numPaddingRight === 'number' ? `${this.numPaddingRight}px` : this.numPaddingRight,
+        marginRight: typeof this.numMarginRight === 'number' ? `${this.numMarginRight}px` : this.numMarginRight
+      }
+    },
+
+    // 单位样式
+    unitStyle() {
+      return {
+        fontFamily: this.unitFontFamily,
+        fontWeight: this.unitFontWeight,
+        fontSize: typeof this.unitFontSize === 'number' ? `${this.unitFontSize}px` : this.unitFontSize,
+        color: this.unitColor,
+        lineHeight: this.unitLineHeight,
+        marginLeft: typeof this.unitMarginLeft === 'number' ? `${this.unitMarginLeft}px` : this.unitMarginLeft
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.l-metric-tile {
+  // 所有样式通过内联样式控制
+}
+</style>

package/src/l-metric-tile/interface/index.js

@@ -0,0 +1,241 @@
+const interfaceObj = {
+  // 标题文本：显示在卡片上的标题文字
+  title: {
+    type: String,
+    default: '标题'
+  },
+  // 数值：卡片显示的主要数据值
+  data: {
+    type: [String, Number],
+    default: 0
+  },
+  // 单位：数值后面的单位文字（如：道、家、个等）
+  unit: {
+    type: String,
+    default: ''
+  },
+  // 背景图：卡片容器的背景图片URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+  // 布局类型：控制标题和数值的上下位置
+  // 'title-top'（默认）：标题在上，数值在下
+  // 'title-bottom'：数值在上，标题在下
+  layoutType: {
+    type: String,
+    default: 'title-top'
+  },
+
+  // ========== 卡片容器相关 ==========
+  // 卡片宽度：整个卡片的宽度
+  cardWidth: {
+    type: [String, Number],
+    default: '95px'
+  },
+  // 卡片高度：整个卡片的高度
+  cardHeight: {
+    type: [String, Number],
+    default: '70px'
+  },
+  // 卡片内边距：卡片内容与边缘的间距
+  cardPadding: {
+    type: [String, Number],
+    default: 0
+  },
+  // 卡片左侧内边距：卡片左侧内容与边缘的间距
+  cardPaddingLeft: {
+    type: [String, Number],
+    default: 0
+  },
+  // 卡片顶部内边距：卡片顶部内容与边缘的间距
+  cardPaddingTop: {
+    type: [String, Number],
+    default: 0
+  },
+  // 卡片显示方式：CSS display属性
+  cardDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 卡片主轴方向：flex布局的主轴方向（column为垂直）
+  cardFlexDirection: {
+    type: String,
+    default: 'column'
+  },
+  // 卡片交叉轴对齐：flex布局的交叉轴对齐方式
+  cardAlignItems: {
+    type: String,
+    default: 'center'
+  },
+  // 卡片主轴对齐：flex布局的主轴对齐方式
+  cardJustifyContent: {
+    type: String,
+    default: 'center'
+  },
+  // 卡片盒模型：CSS box-sizing属性
+  cardBoxSizing: {
+    type: String,
+    default: 'border-box'
+  },
+  // 背景图尺寸：背景图的缩放方式（如：100% 100%）
+  cardBgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+
+  // ========== 标题相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标题字重：标题文字的粗细
+  titleFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '14px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 标题行高：标题文字的行高
+  titleLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 标题下边距：标题与下方数值的间距
+  titleMarginBottom: {
+    type: [String, Number],
+    default: '10px'
+  },
+  // 标题对齐方式：标题文字的水平对齐
+  titleTextAlign: {
+    type: String,
+    default: 'center'
+  },
+  // 标题内边距：标题文字的内边距
+  titlePadding: {
+    type: [String, Number],
+    default: 0
+  },
+
+  // ========== 数值容器相关 ==========
+  // 数值容器显示方式：数值区域的CSS display属性
+  numDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 数值容器交叉轴对齐：数值区域的flex交叉轴对齐
+  numAlignItems: {
+    type: String,
+    default: 'baseline'
+  },
+  // 数值容器行高：数值区域的行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 数值容器下边距：数值区域与下方的间距
+  numMarginBottom: {
+    type: [String, Number],
+    default: 0
+  },
+  // 数值容器主轴对齐：数值区域的flex主轴对齐
+  numJustifyContent: {
+    type: String,
+    default: 'center'
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体：数值文字的字体族
+  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: '20px'
+  },
+  // 数值颜色：数值文字的颜色（使用渐变时设为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 6px rgba(74, 239, 160, 0.5)'
+  },
+  // 数值右内边距：数值文字右侧的内边距
+  numPaddingRight: {
+    type: [String, Number],
+    default: '3px'
+  },
+  // 数值右边距：数值与单位之间的外边距
+  numMarginRight: {
+    type: [String, Number],
+    default: '4px'
+  },
+
+  // ========== 单位相关 ==========
+  // 单位字体：单位文字的字体族
+  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
+  },
+  // 单位左边距：单位与数值之间的间距
+  unitMarginLeft: {
+    type: [String, Number],
+    default: 0
+  }
+}
+
+export default interfaceObj

package/src/l-module-box/README.md

@@ -0,0 +1,289 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'fde9a66f-ec6a-4aa8-bc13-15f5bebbbf28'
+  PropagateID: 'fde9a66f-ec6a-4aa8-bc13-15f5bebbbf28'
+  ReservedCode1: '8c413d0d-d05b-40eb-9650-e57940fcbacc'
+  ReservedCode2: '8c413d0d-d05b-40eb-9650-e57940fcbacc'
+---
+
+# LModuleBox 组件说明
+
+## 概述
+
+`LModuleBox` 是一个参数化驱动的模块容器组件，采用类似 Element UI 的封装方式。用于展示带背景图、图标和标题的模块容器。所有样式（背景图、图标、标题文字等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **默认背景图和图标**：未传入时自动使用组件内置默认资源
+- ✅ **高度灵活**：支持自定义背景图、图标、标题样式等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **插槽支持**：支持默认插槽和 `headerBtn` 插槽
+
+## 文件结构
+
+```
+l-module-box/
+├── img/
+│   ├── images.js                       # 图片映射文件
+│   ├── l-module-box_icon.png           # 默认图标
+│   └── l-module-box_bg.png             # 默认背景图
+├── interface/
+│   └── index.js                        # Props 定义（17个参数）
+├── index.vue                           # 主组件（内联样式驱动）
+└── README.md                           # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `title` | String | `'中文标题'` | 显示的标题文字 |
+
+### 背景图相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `bgImage` | String | `''` | 背景图图片URL（留空则使用默认背景图） |
+| `bgWidth` | String/Number | `'432px'` | 背景图宽度 |
+| `bgHeight` | String/Number | `'32px'` | 背景图高度 |
+| `bgSize` | String | `'100% 100%'` | 背景图尺寸（缩放方式） |
+| `bgPadding` | String | `'0 8px'` | 背景图内边距 |
+
+### 图标相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `icon` | String | `''` | 图标图片URL（留空则使用默认图标） |
+| `iconWidth` | String/Number | `'20px'` | 图标宽度 |
+| `iconHeight` | String/Number | `'20px'` | 图标高度 |
+| `iconGap` | String/Number | `'7px'` | 图标右边距（与标题的间距） |
+
+### 标题文字相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleFontFamily` | String | `'YouSheBiaoTiHei'` | 标题字体 |
+| `titleFontSize` | String/Number | `'20px'` | 标题字号 |
+| `titleColor` | String | `'#FFFFFF'` | 标题颜色 |
+| `titleLineHeight` | String/Number | `'26px'` | 标题行高 |
+| `titleTextShadow` | String | `'0px 2px 4px rgba(0,0,0,0.5)'` | 标题文字阴影 |
+
+### 按钮容器相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `btnContainerRight` | String/Number | `'8px'` | 按钮容器右边距 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-module-box title="文旅风险隐患监管">
+    <!-- 模块内容 -->
+    <div>内容区域</div>
+  </l-module-box>
+</template>
+
+<script>
+import LModuleBox from '@/components/moduleBox/l-module-box/index.vue'
+
+export default {
+  components: {
+    LModuleBox
+  }
+}
+</script>
+```
+
+### 带按钮插槽
+
+```vue
+<template>
+  <l-module-box title="旅游投诉处理">
+    <template #headerBtn>
+      <el-button size="mini">重置</el-button>
+    </template>
+    <!-- 模块内容 -->
+    <div>内容区域</div>
+  </l-module-box>
+</template>
+
+<script>
+import LModuleBox from '@/components/moduleBox/l-module-box/index.vue'
+
+export default {
+  components: {
+    LModuleBox
+  }
+}
+</script>
+```
+
+### 自定义背景图和图标
+
+```vue
+<template>
+  <l-module-box
+    title="自定义模块"
+    :bgImage="require('@/assets/custom-bg.png')"
+    :icon="require('@/assets/custom-icon.png')"
+    :bgWidth="500"
+    :bgHeight="40"
+  >
+    <!-- 模块内容 -->
+    <div>内容区域</div>
+  </l-module-box>
+</template>
+
+<script>
+import LModuleBox from '@/components/moduleBox/l-module-box/index.vue'
+
+export default {
+  components: {
+    LModuleBox
+  }
+}
+</script>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-module-box
+    title="旅游服务"
+    :bgWidth="450"
+    :bgHeight="36"
+    :bgPadding="'0 10px'"
+    :iconWidth="24"
+    :iconHeight="24"
+    :iconGap="10"
+    :titleFontSize="22"
+    titleColor="#4CE27E"
+    :titleLineHeight="30"
+    :btnContainerRight="10"
+  >
+    <template #headerBtn>
+      <el-button size="mini" type="primary">操作</el-button>
+    </template>
+    <!-- 模块内容 -->
+    <div>内容区域</div>
+  </l-module-box>
+</template>
+
+<script>
+import LModuleBox from '@/components/moduleBox/l-module-box/index.vue'
+
+export default {
+  components: {
+    LModuleBox
+  }
+}
+</script>
+```
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 computed 属性动态生成内联样式：
+
+```javascript
+computed: {
+  headerStyle() {
+    return {
+      width: typeof this.bgWidth === 'number' 
+        ? `${this.bgWidth}px` 
+        : this.bgWidth,
+      height: typeof this.bgHeight === 'number' 
+        ? `${this.bgHeight}px` 
+        : this.bgHeight,
+      background: this.computedBgImage 
+        ? `url(${this.computedBgImage}) 0 0 no-repeat` 
+        : '',
+      backgroundSize: this.bgSize
+    }
+  }
+}
+```
+
+### 默认资源兜底
+
+```javascript
+import { getIconPath, getBgPath } 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-module-box">
+    <div @click="handleReset" class="l-module-box__header" :style="headerStyle">
+      <img class="l-module-box__icon" :src="computedIcon" :style="iconStyle" alt="">
+      <span class="l-module-box__text" :style="titleStyle">{{ title }}</span>
+      <div class="l-module-box__btn-container" :style="btnContainerStyle">
+        <slot name="headerBtn"></slot>
+      </div>
+    </div>
+    <div class="l-module-box__main-slot">
+      <slot />
+    </div>
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **背景图和图标可选**：`bgImage` 和 `icon` 参数是可选的，未传入时使用默认资源
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认资源**：组件内置默认背景图和图标，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-module-box__header`、`l-module-box__icon` 等 BEM 命名规范
+6. **插槽支持**：支持默认插槽（模块内容）和 `headerBtn` 插槽（标题按钮）
+
+## 适用场景
+
+- ✅ 模块容器展示
+- ✅ 带背景图和图标的标题展示
+- ✅ 需要自定义样式和资源的场景
+- ✅ 需要添加操作按钮的场景
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `ModuleBox` 重命名为 `l-module-box`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 添加默认背景图和默认图标支持
+  - 支持背景图、图标、标题等所有样式自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 支持默认插槽和 `headerBtn` 插槽
+
+> AI生成

package/src/l-module-box/img/images.js

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