@travel-screen/l-module-components 1.0.0

package/src/l-stat-card/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="l-stat-card">
+    <div class="l-stat-card__icon" :style="iconContainerStyle">
+      <img :src="computedIcon" alt="" :style="iconStyle">
+    </div>
+    <div class="l-stat-card__content">
+      <div class="l-stat-card__title" :style="titleStyle">{{ title }}</div>
+      <div class="l-stat-card__value">
+        <span class="l-stat-card__value-num" :style="numStyle">{{ data }}</span>
+        <span class="l-stat-card__value-unit" :style="unitStyle">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getIconPath, getBgPath } from './img/images'
+
+export default {
+  name: 'LStatCard',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 图标图片（外部传入优先，否则使用默认）
+    computedIcon() {
+      if (this.icon) {
+        return this.icon
+      }
+      // 使用默认图标
+      return getIconPath(1)
+    },
+
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      // 使用默认背景图
+      return getBgPath()
+    },
+
+    // 图标容器样式
+    iconContainerStyle() {
+      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
+      }
+    },
+
+    // 图标样式
+    iconStyle() {
+      return {
+        width: typeof this.iconWidth === 'number' ? `${this.iconWidth}px` : this.iconWidth,
+        height: typeof this.iconHeight === 'number' ? `${this.iconHeight}px` : this.iconHeight,
+        position: 'relative',
+        left: typeof this.iconLeft === 'number' ? `${this.iconLeft}px` : this.iconLeft,
+        bottom: typeof this.iconBottom === 'number' ? `${this.iconBottom}px` : this.iconBottom
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        width: typeof this.titleWidth === 'number' ? `${this.titleWidth}px` : this.titleWidth,
+        fontFamily: this.titleFontFamily,
+        fontWeight: this.titleFontWeight,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor
+      }
+    },
+
+    // 数值样式
+    numStyle() {
+      return {
+        fontFamily: this.numFontFamily,
+        fontWeight: this.numFontWeight,
+        fontSize: typeof this.numFontSize === 'number' ? `${this.numFontSize}px` : this.numFontSize,
+        color: this.numColor,
+        background: this.numBackground,
+        WebkitBackgroundClip: this.numBackgroundClip,
+        backgroundClip: this.numBackgroundClip,
+        marginRight: typeof this.numMarginRight === 'number' ? `${this.numMarginRight}px` : this.numMarginRight,
+        lineHeight: this.numLineHeight
+      }
+    },
+
+    // 单位样式
+    unitStyle() {
+      return {
+        fontFamily: this.unitFontFamily,
+        fontWeight: this.unitFontWeight,
+        fontSize: typeof this.unitFontSize === 'number' ? `${this.unitFontSize}px` : this.unitFontSize,
+        color: this.unitColor
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.l-stat-card {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    img {
+      // 尺寸和位置通过内联样式控制
+    }
+  }
+
+  &__content {
+    .l-stat-card__title {
+      // 字体样式通过内联样式控制
+    }
+    .l-stat-card__value {
+      white-space: nowrap;
+      .l-stat-card__value-num {
+        // 数值样式通过内联样式控制
+      }
+      .l-stat-card__value-unit {
+        // 单位样式通过内联样式控制
+      }
+    }
+  }
+}
+</style>

package/src/l-stat-card/interface/index.js

@@ -0,0 +1,159 @@
+const interfaceObj = {
+  // 标题文本：显示在卡片上的标题文字
+  title: {
+    type: String,
+    default: '标题'
+  },
+  // 数据值：卡片显示的主要数值
+  data: {
+    type: [String, Number],
+    default: 0
+  },
+  // 单位：数值后面的单位文字（如：人次、个、家等）
+  unit: {
+    type: String,
+    default: ''
+  },
+  // 图标图片：卡片左侧的图标URL，未传入时使用默认图标
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 背景图：图标容器的背景图片URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 背景图相关 ==========
+  // 背景图宽度：图标容器的背景图宽度
+  bgWidth: {
+    type: [String, Number],
+    default: '60px'
+  },
+  // 背景图高度：图标容器的背景图高度
+  bgHeight: {
+    type: [String, Number],
+    default: '49px'
+  },
+  // 背景图尺寸：背景图的缩放方式（如：100% 100%）
+  bgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+
+  // ========== 图标相关 ==========
+  // 图标宽度：图标图片的显示宽度
+  iconWidth: {
+    type: [String, Number],
+    default: '32px'
+  },
+  // 图标高度：图标图片的显示高度
+  iconHeight: {
+    type: [String, Number],
+    default: '32px'
+  },
+  // 图标左边距：图标距离容器左侧的距离
+  iconLeft: {
+    type: [String, Number],
+    default: '14px'
+  },
+  // 图标下边距：图标距离容器底部的距离
+  iconBottom: {
+    type: [String, Number],
+    default: '2px'
+  },
+
+  // ========== 标题相关 ==========
+  // 标题宽度：标题文本容器的宽度
+  titleWidth: {
+    type: [String, Number],
+    default: '98px'
+  },
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标题字重：标题文字的粗细（400正常、600半粗、700粗体）
+  titleFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 标题颜色：标题文字的颜色值
+  titleColor: {
+    type: String,
+    default: '#A3C2CC'
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体：数值文字的字体族
+  numFontFamily: {
+    type: String,
+    default: 'DIN, DIN'
+  },
+  // 数值字重：数值文字的粗细
+  numFontWeight: {
+    type: [String, Number],
+    default: 600
+  },
+  // 数值字号：数值文字的大小
+  numFontSize: {
+    type: [String, Number],
+    default: '22px'
+  },
+  // 数值颜色：数值文字的颜色（使用渐变时设为transparent）
+  numColor: {
+    type: String,
+    default: 'transparent'
+  },
+  // 数值渐变背景：数值文字的渐变背景（实现渐变文字效果）
+  numBackground: {
+    type: String,
+    default: 'linear-gradient(270deg, #4CE27E 0%, #FFFFFF 100%)'
+  },
+  // 数值背景裁剪：背景裁剪方式（text表示只在文字上显示背景）
+  numBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 数值右边距：数值与单位之间的间距
+  numMarginRight: {
+    type: [String, Number],
+    default: '3px'
+  },
+  // 数值行高：数值文字的行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+
+  // ========== 单位相关 ==========
+  // 单位字体：单位文字的字体族
+  unitFontFamily: {
+    type: String,
+    default: 'SourceHanSansCN, SourceHanSansCN'
+  },
+  // 单位字重：单位文字的粗细
+  unitFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 单位字号：单位文字的大小
+  unitFontSize: {
+    type: [String, Number],
+    default: '13px'
+  },
+  // 单位颜色：单位文字的颜色
+  unitColor: {
+    type: String,
+    default: 'rgba(255,255,255,0.67)'
+  }
+}
+
+export default interfaceObj

package/src/l-tabs/README.md

@@ -0,0 +1,285 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'eaeddf8f-492e-4075-9912-4b2e18ac37d2'
+  PropagateID: 'eaeddf8f-492e-4075-9912-4b2e18ac37d2'
+  ReservedCode1: '6f48e7b5-8ebb-493a-88dc-bae1e42d7d3a'
+  ReservedCode2: '6f48e7b5-8ebb-493a-88dc-bae1e42d7d3a'
+---
+
+# LTabs 组件说明
+
+## 概述
+
+`LTabs` 是一个参数化驱动的选项卡组件，采用类似 Element UI 的封装方式。用于展示可切换的选项卡列表。所有样式（容器样式、选项卡样式、激活态样式、文本样式等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **高度灵活**：支持自定义选项卡样式、激活态样式、文本样式等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **双向绑定**：支持 `selValue.sync` 实现双向数据绑定
+- ✅ **事件支持**：支持 `getValue` 事件监听选项卡切换
+
+## 文件结构
+
+```
+l-tabs/
+├── img/
+│   ├── images.js                       # 图片映射文件
+│   └── l-tabs_bg.png                   # 默认背景图
+├── interface/
+│   └── index.js                        # Props 定义（20+ 个参数）
+├── index.vue                           # 主组件（内联样式驱动）
+└── README.md                           # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `selectData` | Array | `[{ name: '松兰山景区', value: 1 }]` | 选项卡数据列表，每项包含 name 和 value |
+| `selValue` | Number/String | `1` | 当前选中的选项卡值（支持 .sync） |
+| `width` | String | `'100%'` | 单个选项卡的宽度 |
+| `placeholder` | String | `'请选择'` | 占位符（保留用于兼容） |
+| `clearable` | Boolean | `false` | 是否可清空（保留用于兼容） |
+| `color` | String | `'blue'` | 颜色主题（保留用于兼容） |
+
+### 容器样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `containerDisplay` | String | `'flex'` | 容器显示方式 |
+| `containerGap` | String/Number | `'10px'` | 选项卡之间的间距 |
+
+### 选项卡样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `tabHeight` | String/Number | `'27px'` | 选项卡高度 |
+| `tabBorderRadius` | String | `'20px 20px 20px 0'` | 选项卡圆角 |
+| `tabBgColor` | String | `'#1F364D'` | 选项卡背景色 |
+| `tabBorder` | String | `'1px solid rgba(64, 255, 159, .5)'` | 选项卡边框 |
+| `tabColor` | String | `'rgba(255,255,255,0.7)'` | 选项卡文字颜色 |
+| `tabCursor` | String | `'pointer'` | 鼠标悬停光标样式 |
+
+### 激活态样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `activeTabBorder` | String | `'1px solid #40FF9F'` | 激活态边框 |
+| `activeTabColor` | String | `'rgba(255,255,255,1)'` | 激活态文字颜色 |
+
+### 文本样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `textAlign` | String | `'center'` | 文本对齐方式 |
+| `textFontFamily` | String | `'inherit'` | 文本字体 |
+| `textFontSize` | String/Number | `'inherit'` | 文本字号 |
+| `textFontWeight` | String/Number | `'inherit'` | 文本字重 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-tabs
+    :selectData="tabData"
+    :selValue.sync="activeTab"
+    @getValue="handleTabChange"
+  />
+</template>
+
+<script>
+import LTabs from '@/components/moduleDataNew/l-tabs/index.vue'
+
+export default {
+  components: {
+    LTabs
+  },
+  data() {
+    return {
+      activeTab: 1,
+      tabData: [
+        { name: '松兰山景区', value: 1 },
+        { name: '东海岸景区', value: 2 }
+      ]
+    }
+  },
+  methods: {
+    handleTabChange(value) {
+      console.log('选中的选项卡:', value)
+    }
+  }
+}
+</script>
+```
+
+### 自定义样式
+
+```vue
+<template>
+  <l-tabs
+    :selectData="tabData"
+    :selValue.sync="activeTab"
+    :tabHeight="36"
+    tabBgColor="#2A3F54"
+    tabBorder="1px solid #4CE27E"
+    activeTabBorder="2px solid #4CE27E"
+    activeTabColor="#4CE27E"
+    :containerGap="15"
+  />
+</template>
+
+<script>
+import LTabs from '@/components/moduleDataNew/l-tabs/index.vue'
+
+export default {
+  components: {
+    LTabs
+  },
+  data() {
+    return {
+      activeTab: 1,
+      tabData: [
+        { name: '选项一', value: 1 },
+        { name: '选项二', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-tabs
+    :selectData="tabData"
+    :selValue.sync="activeTab"
+    :tabHeight="40"
+    :tabBorderRadius="'20px'"
+    tabBgColor="#1E293B"
+    tabBorder="2px solid #4CE27E"
+    tabColor="#94A3B8"
+    activeTabBorder="2px solid #4CE27E"
+    activeTabColor="#4CE27E"
+    :containerGap="12"
+    :textFontSize="16"
+    textFontWeight="500"
+    @getValue="handleTabChange"
+  />
+</template>
+
+<script>
+import LTabs from '@/components/moduleDataNew/l-tabs/index.vue'
+
+export default {
+  components: {
+    LTabs
+  },
+  data() {
+    return {
+      activeTab: 1,
+      tabData: [
+        { name: '今日客流', value: 1 },
+        { name: '昨日客流', value: 2 },
+        { name: '本周客流', value: 3 }
+      ]
+    }
+  },
+  methods: {
+    handleTabChange(value) {
+      console.log('选项卡切换:', value)
+    }
+  }
+}
+</script>
+```
+
+## 数据结构
+
+### selectData 格式
+
+```javascript
+[
+  { name: '松兰山景区', value: 1 },
+  { name: '东海岸景区', value: 2 },
+  { name: '西海岸景区', value: 3 }
+]
+```
+
+- `name`: 选项卡显示的名称
+- `value`: 选项卡的值（用于绑定和识别）
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 methods 动态生成每个选项卡的内联样式：
+
+```javascript
+methods: {
+  getTabStyle(value) {
+    const isActive = this.selectValue === value
+    return {
+      width: this.width,
+      height: typeof this.tabHeight === 'number' 
+        ? `${this.tabHeight}px` 
+        : this.tabHeight,
+      border: isActive ? this.activeTabBorder : this.tabBorder,
+      color: isActive ? this.activeTabColor : this.tabColor
+    }
+  }
+}
+```
+
+### 激活态判断
+
+通过 `:class` 动态绑定激活态样式：
+
+```vue
+<div
+  :class="{ 'l-tabs__item--active': selectValue === item.value }"
+  :style="getTabStyle(item.value)"
+>
+```
+
+## 注意事项
+
+1. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+2. **双向绑定**：使用 `:selValue.sync` 实现双向绑定
+3. **事件监听**：通过 `@getValue` 监听选项卡切换事件
+4. **数据格式**：`selectData` 数组的每项必须包含 `name` 和 `value` 字段
+5. **性能优化**：内联样式通过 methods 动态生成，避免重复计算
+6. **BEM 命名**：使用 `l-tabs__item`、`l-tabs__item--active` 等 BEM 命名规范
+7. **最后一个选项卡**：通过 `&:last-child` 去除最后一个选项卡的右边距
+
+## 适用场景
+
+- ✅ 选项卡切换
+- ✅ 数据筛选
+- ✅ 视图切换
+- ✅ 需要自定义样式的选项卡组件
+- ✅ 需要与特定主题风格匹配的选项卡组件
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `selectIndex` 重命名为 `l-tabs`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 添加默认背景图支持
+  - 支持选项卡样式、激活态样式、文本样式等自定义
+  - 使用内联样式实现（类似 Element UI）
+  - 支持 `selValue.sync` 双向绑定和 `getValue` 事件
+
+> AI生成

package/src/l-tabs/img/images.js

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

package/src/l-tabs/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="l-tabs" :style="containerStyle">
+    <div
+      v-for="item in selectData"
+      :key="item.value"
+      class="l-tabs__item"
+      :class="{ 'l-tabs__item--active': selectValue === item.value }"
+      :style="getTabStyle(item.value)"
+      @click="handleClick(item.value)"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+
+export default {
+  name: 'LTabs',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {
+      selectValue: this.selValue
+    }
+  },
+  computed: {
+    // 容器样式
+    containerStyle() {
+      return {
+        display: this.containerDisplay,
+        gap: typeof this.containerGap === 'number' ? `${this.containerGap}px` : this.containerGap
+      }
+    }
+  },
+  watch: {
+    selValue: {
+      handler(val) {
+        this.selectValue = val
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {},
+  created() {},
+  methods: {
+    // 获取选项卡样式
+    getTabStyle(value) {
+      const isActive = this.selectValue === value
+      return {
+        width: this.width,
+        height: typeof this.tabHeight === 'number' ? `${this.tabHeight}px` : this.tabHeight,
+        borderRadius: this.tabBorderRadius,
+        backgroundColor: this.tabBgColor,
+        border: isActive ? this.activeTabBorder : this.tabBorder,
+        color: isActive ? this.activeTabColor : this.tabColor,
+        cursor: this.tabCursor,
+        textAlign: this.textAlign,
+        fontFamily: this.textFontFamily,
+        fontSize: typeof this.textFontSize === 'number' ? `${this.textFontSize}px` : this.textFontSize,
+        fontWeight: this.textFontWeight
+      }
+    },
+
+    // 点击事件
+    handleClick(value) {
+      this.selectValue = value
+      this.$emit('update:selValue', value)
+      this.$emit('getValue', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:focus-visible {
+  outline: 0;
+}
+
+.l-tabs {
+  // 容器样式通过内联样式控制
+
+  &__item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // 其他样式通过内联样式控制
+
+    &:last-child {
+      margin-right: 0 !important;
+    }
+  }
+}
+</style>