@travel-screen/l-module-components 1.0.0

package/src/l-module-box/index.vue

@@ -0,0 +1,125 @@
+<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>
+
+<script>
+import interfaceObj from './interface/index'
+import { getIconPath, getBgPath } from './img/images'
+
+export default {
+  name: 'LModuleBox',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 图标图片（外部传入优先，否则使用默认）
+    computedIcon() {
+      if (this.icon) {
+        return this.icon
+      }
+      // 使用默认图标
+      return getIconPath()
+    },
+
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      // 使用默认背景图
+      return getBgPath()
+    },
+
+    // 头部样式
+    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,
+        display: 'flex',
+        alignItems: 'center',
+        gap: typeof this.iconGap === 'number' ? `${this.iconGap}px` : this.iconGap,
+        padding: this.bgPadding,
+        position: 'relative'
+      }
+    },
+
+    // 图标样式
+    iconStyle() {
+      return {
+        flexShrink: 0,
+        width: typeof this.iconWidth === 'number' ? `${this.iconWidth}px` : this.iconWidth,
+        height: typeof this.iconHeight === 'number' ? `${this.iconHeight}px` : this.iconHeight
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        lineHeight: typeof this.titleLineHeight === 'number' ? this.titleLineHeight : this.titleLineHeight,
+        textShadow: this.titleTextShadow
+      }
+    },
+
+    // 按钮容器样式
+    btnContainerStyle() {
+      return {
+        position: 'absolute',
+        right: typeof this.btnContainerRight === 'number' ? `${this.btnContainerRight}px` : this.btnContainerRight
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {
+    handleReset() {
+      this.$emit('handleReset')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-module-box {
+  width: 100%;
+  height: 100%;
+
+  &__header {
+    // 头部样式通过内联样式控制
+  }
+
+  &__icon {
+    // 图标样式通过内联样式控制
+  }
+
+  &__text {
+    // 标题样式通过内联样式控制
+  }
+
+  &__btn-container {
+    // 按钮容器样式通过内联样式控制
+  }
+
+  &__main-slot {
+    // 主内容区域
+  }
+}
+</style>

package/src/l-module-box/interface/index.js

@@ -0,0 +1,93 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 标题文本：显示在模块盒上的标题文字
+  title: {
+    type: String,
+    default: '中文标题'
+  },
+
+  // ========== 背景图相关 ==========
+  // 背景图图片：模块盒标题的背景图URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+  // 背景图宽度：背景图的宽度
+  bgWidth: {
+    type: [String, Number],
+    default: '432px'
+  },
+  // 背景图高度：背景图的高度
+  bgHeight: {
+    type: [String, Number],
+    default: '32px'
+  },
+  // 背景图尺寸：背景图的缩放方式
+  bgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+  // 背景图内边距：背景图的内边距
+  bgPadding: {
+    type: String,
+    default: '0 8px'
+  },
+
+  // ========== 图标相关 ==========
+  // 图标图片：标题左侧的图标URL，未传入时使用默认图标
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 图标宽度：图标的宽度
+  iconWidth: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 图标高度：图标的高度
+  iconHeight: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 图标右边距：图标与标题之间的间距
+  iconGap: {
+    type: [String, Number],
+    default: '7px'
+  },
+
+  // ========== 标题文字相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'YouSheBiaoTiHei'
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#FFFFFF'
+  },
+  // 标题行高：标题文字的行高
+  titleLineHeight: {
+    type: [String, Number],
+    default: '26px'
+  },
+  // 标题文字阴影：标题文字的阴影效果
+  titleTextShadow: {
+    type: String,
+    default: '0px 2px 4px rgba(0,0,0,0.5)'
+  },
+
+  // ========== 按钮容器相关 ==========
+  // 按钮容器右边距：按钮容器距离右侧的间距
+  btnContainerRight: {
+    type: [String, Number],
+    default: '8px'
+  }
+}
+
+export default interfaceObj

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

@@ -0,0 +1,243 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'f28852ce-0ffe-44de-8515-10617f50fb00'
+  PropagateID: 'f28852ce-0ffe-44de-8515-10617f50fb00'
+  ReservedCode1: '32664611-682d-4c5c-9c16-c5cfbaa4b4c5'
+  ReservedCode2: '32664611-682d-4c5c-9c16-c5cfbaa4b4c5'
+---
+
+# LModuleTag 组件说明
+
+## 概述
+
+`LModuleTag` 是一个参数化驱动的模块标签组件，采用类似 Element UI 的封装方式。用于展示带圆形图标、标题和底部线条的模块标签。所有样式（圆形图标、标题文字、底部线条等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **高度灵活**：支持自定义圆形图标、标题样式、底部线条等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **插槽支持**：支持 `headerBtn` 插槽用于添加按钮
+
+## 文件结构
+
+```
+l-module-tag/
+├── img/                          # 图片资源目录（如有需要）
+├── interface/
+│   ── index.js                  # Props 定义（17个参数）
+├── index.vue                     # 主组件（内联样式驱动）
+└── README.md                     # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `title` | String | `'中文标题'` | 显示的标题文字 |
+
+### 圆形图标相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `circleRingWidth` | String/Number | `'10px'` | 圆形外环宽度 |
+| `circleRingHeight` | String/Number | `'10px'` | 圆形外环高度 |
+| `circleRingBg` | String | `'rgba(64, 255, 143, 0.3)'` | 圆形外环背景色 |
+| `circleRingShadow` | String | `'0px 0px 4px 1px rgba(64,255,143,0.5)'` | 圆形外环阴影 |
+| `circleWidth` | String/Number | `'6px'` | 圆形内环宽度 |
+| `circleHeight` | String/Number | `'6px'` | 圆形内环高度 |
+| `circleBg` | String | `'rgb(64, 255, 143)'` | 圆形内环背景色 |
+| `circleShadow` | String | `'0px 0px 4px 1px rgba(64,255,143,0.5)'` | 圆形内环阴影 |
+| `circleMarginRight` | String/Number | `'10px'` | 圆形右边距（与标题的间距） |
+
+### 标题文字相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleFontFamily` | String | `'YouSheBiaoTiHei'` | 标题字体 |
+| `titleFontSize` | String/Number | `'20px'` | 标题字号 |
+| `titleColor` | String | `'#FFFFFF'` | 标题颜色 |
+
+### 底部线条相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `bottomMarginTop` | String/Number | `'5px'` | 底部线条上边距 |
+| `bottomHeight` | String/Number | `'2px'` | 底部线条高度 |
+| `bottomBackground` | String | `'linear-gradient(270deg, rgba(64,255,143,0) 0%, rgba(64,255,143,0.2) 54%, rgba(64,255,143,0.5) 100%)'` | 底部线条渐变背景 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-module-tag title="文旅风险隐患监管" />
+</template>
+
+<script>
+import LModuleTag from '@/components/moduleBox/l-module-tag/index.vue'
+
+export default {
+  components: {
+    LModuleTag
+  }
+}
+</script>
+```
+
+### 带按钮插槽
+
+```vue
+<template>
+  <l-module-tag title="旅游投诉处理">
+    <template #headerBtn>
+      <el-button size="mini">重置</el-button>
+    </template>
+  </l-module-tag>
+</template>
+
+<script>
+import LModuleTag from '@/components/moduleBox/l-module-tag/index.vue'
+
+export default {
+  components: {
+    LModuleTag
+  }
+}
+</script>
+```
+
+### 自定义圆形图标颜色
+
+```vue
+<template>
+  <l-module-tag
+    title="停车服务"
+    :circleRingBg="'rgba(255, 183, 105, 0.3)'"
+    :circleRingShadow="'0px 0px 4px 1px rgba(255,183,105,0.5)'"
+    circleBg="rgb(255, 183, 105)"
+    :circleShadow="'0px 0px 4px 1px rgba(255,183,105,0.5)'"
+    :bottomBackground="'linear-gradient(270deg, rgba(255,183,105,0) 0%, rgba(255,183,105,0.2) 54%, rgba(255,183,105,0.5) 100%)'"
+  />
+</template>
+
+<script>
+import LModuleTag from '@/components/moduleBox/l-module-tag/index.vue'
+
+export default {
+  components: {
+    LModuleTag
+  }
+}
+</script>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-module-tag
+    title="旅游服务"
+    :circleRingWidth="12"
+    :circleRingHeight="12"
+    :circleWidth="8"
+    :circleHeight="8"
+    :circleMarginRight="12"
+    :titleFontSize="22"
+    titleColor="#4CE27E"
+    :bottomMarginTop="8"
+    :bottomHeight="3"
+  >
+    <template #headerBtn>
+      <el-button size="mini" type="primary">操作</el-button>
+    </template>
+  </l-module-tag>
+</template>
+
+<script>
+import LModuleTag from '@/components/moduleBox/l-module-tag/index.vue'
+
+export default {
+  components: {
+    LModuleTag
+  }
+}
+</script>
+```
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 computed 属性动态生成内联样式：
+
+```javascript
+computed: {
+  circleRingStyle() {
+    return {
+      marginRight: typeof this.circleMarginRight === 'number' 
+        ? `${this.circleMarginRight}px` 
+        : this.circleMarginRight,
+      width: typeof this.circleRingWidth === 'number' 
+        ? `${this.circleRingWidth}px` 
+        : this.circleRingWidth,
+      background: this.circleRingBg,
+      boxShadow: this.circleRingShadow,
+      borderRadius: '50%'
+    }
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<template>
+  <div class="l-module-tag" :style="containerStyle">
+    <div class="l-module-tag__header" :style="headerStyle">
+      <div class="l-module-tag__circle-ring" :style="circleRingStyle">
+        <div class="l-module-tag__circle" :style="circleStyle"></div>
+      </div>
+      <span class="l-module-tag__title" :style="titleStyle">{{ title }}</span>
+      <div class="l-module-tag__btn-container">
+        <slot name="headerBtn"></slot>
+      </div>
+    </div>
+    <div class="l-module-tag__bottom" :style="bottomStyle"></div>
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+2. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+3. **BEM 命名**：使用 `l-module-tag__header`、`l-module-tag__circle-ring` 等 BEM 命名规范
+4. **插槽支持**：通过 `headerBtn` 插槽可以添加按钮或其他元素
+5. **圆形图标**：圆形图标由外环和内环两层组成，可以分别自定义样式
+
+## 适用场景
+
+- ✅ 模块标题标签展示
+- ✅ 带图标的标题展示
+- ✅ 需要自定义颜色和样式的场景
+- ✅ 需要添加操作按钮的场景
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `ModuleBoxTag` 重命名为 `l-module-tag`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 支持圆形图标、标题、底部线条等样式自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 支持 `headerBtn` 插槽
+
+> AI生成

package/src/l-module-tag/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="l-module-tag" :style="containerStyle">
+    <div class="l-module-tag__header" :style="headerStyle">
+      <div class="l-module-tag__circle-ring" :style="circleRingStyle">
+        <div class="l-module-tag__circle" :style="circleStyle"></div>
+      </div>
+      <span class="l-module-tag__title" :style="titleStyle">{{ title }}</span>
+      <div class="l-module-tag__btn-container">
+        <slot name="headerBtn"></slot>
+      </div>
+    </div>
+    <div class="l-module-tag__bottom" :style="bottomStyle"></div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+
+export default {
+  name: 'LModuleTag',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 容器样式
+    containerStyle() {
+      return {
+        width: '100%',
+        background: 'none',
+        paddingTop: '0'
+      }
+    },
+
+    // 头部样式
+    headerStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+      }
+    },
+
+    // 圆形外环样式
+    circleRingStyle() {
+      return {
+        marginRight: typeof this.circleMarginRight === 'number' ? `${this.circleMarginRight}px` : this.circleMarginRight,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: typeof this.circleRingWidth === 'number' ? `${this.circleRingWidth}px` : this.circleRingWidth,
+        height: typeof this.circleRingHeight === 'number' ? `${this.circleRingHeight}px` : this.circleRingHeight,
+        background: this.circleRingBg,
+        boxShadow: this.circleRingShadow,
+        borderRadius: '50%'
+      }
+    },
+
+    // 圆形内环样式
+    circleStyle() {
+      return {
+        width: typeof this.circleWidth === 'number' ? `${this.circleWidth}px` : this.circleWidth,
+        height: typeof this.circleHeight === 'number' ? `${this.circleHeight}px` : this.circleHeight,
+        background: this.circleBg,
+        boxShadow: this.circleShadow,
+        borderRadius: '50%'
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {}
+    },
+
+    // 按钮容器样式
+    btnContainerStyle() {
+      return {
+        position: 'absolute',
+        right: '0'
+      }
+    },
+
+    // 底部线条样式
+    bottomStyle() {
+      return {
+        marginTop: typeof this.bottomMarginTop === 'number' ? `${this.bottomMarginTop}px` : this.bottomMarginTop,
+        width: '100%',
+        height: typeof this.bottomHeight === 'number' ? `${this.bottomHeight}px` : this.bottomHeight,
+        background: this.bottomBackground
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {
+    handleReset() {
+      this.$emit('handleReset')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-module-tag {
+  // 基础样式通过内联样式控制
+
+  &__header {
+    // 头部样式通过内联样式控制
+  }
+
+  &__circle-ring {
+    // 圆形外环样式通过内联样式控制
+  }
+
+  &__circle {
+    // 圆形内环样式通过内联样式控制
+  }
+
+  &__title {
+    // 标题样式通过内联样式控制
+  }
+
+  &__btn-container {
+    position: absolute;
+    right: 0;
+  }
+
+  &__bottom {
+    // 底部线条样式通过内联样式控制
+  }
+}
+</style>

package/src/l-module-tag/interface/index.js

@@ -0,0 +1,91 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 标题文本：显示在标签上的标题文字
+  title: {
+    type: String,
+    default: '中文标题'
+  },
+
+  // ========== 圆形图标相关 ==========
+  // 圆形外环宽度：外环的宽度
+  circleRingWidth: {
+    type: [String, Number],
+    default: '10px'
+  },
+  // 圆形外环高度：外环的高度
+  circleRingHeight: {
+    type: [String, Number],
+    default: '10px'
+  },
+  // 圆形外环背景色：外环的背景颜色
+  circleRingBg: {
+    type: String,
+    default: 'rgba(64, 255, 143, 0.3)'
+  },
+  // 圆形外环阴影：外环的阴影效果
+  circleRingShadow: {
+    type: String,
+    default: '0px 0px 4px 1px rgba(64,255,143,0.5)'
+  },
+  // 圆形内环宽度：内环的宽度
+  circleWidth: {
+    type: [String, Number],
+    default: '6px'
+  },
+  // 圆形内环高度：内环的高度
+  circleHeight: {
+    type: [String, Number],
+    default: '6px'
+  },
+  // 圆形内环背景色：内环的背景颜色
+  circleBg: {
+    type: String,
+    default: 'rgb(64, 255, 143)'
+  },
+  // 圆形内环阴影：内环的阴影效果
+  circleShadow: {
+    type: String,
+    default: '0px 0px 4px 1px rgba(64,255,143,0.5)'
+  },
+  // 圆形右边距：圆形与标题之间的间距
+  circleMarginRight: {
+    type: [String, Number],
+    default: '10px'
+  },
+
+  // ========== 标题文字相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'YouSheBiaoTiHei'
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#FFFFFF'
+  },
+
+  // ========== 底部线条相关 ==========
+  // 底部线条上边距：线条与标题之间的间距
+  bottomMarginTop: {
+    type: [String, Number],
+    default: '5px'
+  },
+  // 底部线条高度：线条的高度
+  bottomHeight: {
+    type: [String, Number],
+    default: '2px'
+  },
+  // 底部线条渐变背景：线条的渐变背景
+  bottomBackground: {
+    type: String,
+    default: 'linear-gradient(270deg, rgba(64,255,143,0) 0%, rgba(64,255,143,0.2) 54%, rgba(64,255,143,0.5) 100%)'
+  }
+}
+
+export default interfaceObj