@travel-screen/l-module-components 1.0.0

package/src/l-tabs/interface/index.js

@@ -0,0 +1,115 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 选项卡数据列表：每项包含 name（显示名称）和 value（值）
+  selectData: {
+    type: Array,
+    default: () => [
+      { name: '松兰山景区', value: 1 }
+    ]
+  },
+  // 绑定值：当前选中的选项卡值（支持 .sync）
+  selValue: {
+    type: [Number, String],
+    default: 1
+  },
+  // 宽度：单个选项卡的宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 占位符：未选择时的提示文字（保留用于兼容）
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  // 是否可清空：是否显示清空按钮（保留用于兼容）
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  // 颜色主题：选项卡的颜色主题（保留用于兼容）
+  color: {
+    type: String,
+    default: 'blue'
+  },
+
+  // ========== 容器样式相关 ==========
+  // 容器显示方式：flex 布局方式
+  containerDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 容器右边距：选项卡之间的间距
+  containerGap: {
+    type: [String, Number],
+    default: '10px'
+  },
+
+  // ========== 选项卡样式相关 ==========
+  // 选项卡高度：选项卡的高度
+  tabHeight: {
+    type: [String, Number],
+    default: '27px'
+  },
+  // 选项卡圆角：选项卡的圆角半径
+  tabBorderRadius: {
+    type: String,
+    default: '20px 20px 20px 0'
+  },
+  // 选项卡背景色：选项卡的背景颜色
+  tabBgColor: {
+    type: String,
+    default: '#1F364D'
+  },
+  // 选项卡边框：选项卡的边框样式
+  tabBorder: {
+    type: String,
+    default: '1px solid rgba(64, 255, 159, .5)'
+  },
+  // 选项卡文字颜色：选项卡文字的颜色
+  tabColor: {
+    type: String,
+    default: 'rgba(255,255,255,0.7)'
+  },
+  // 选项卡光标：鼠标悬停时的光标样式
+  tabCursor: {
+    type: String,
+    default: 'pointer'
+  },
+
+  // ========== 激活态样式相关 ==========
+  // 激活态边框：选中选项卡的边框样式
+  activeTabBorder: {
+    type: String,
+    default: '1px solid #40FF9F'
+  },
+  // 激活态文字颜色：选中选项卡的文字颜色
+  activeTabColor: {
+    type: String,
+    default: 'rgba(255,255,255,1)'
+  },
+
+  // ========== 文本样式相关 ==========
+  // 文本对齐方式：选项卡文本的对齐方式
+  textAlign: {
+    type: String,
+    default: 'center'
+  },
+  // 文本字体：选项卡文本的字体族
+  textFontFamily: {
+    type: String,
+    default: 'inherit'
+  },
+  // 文本字号：选项卡文本的字体大小
+  textFontSize: {
+    type: [String, Number],
+    default: 'inherit'
+  },
+  // 文本字重：选项卡文本的字体粗细
+  textFontWeight: {
+    type: [String, Number],
+    default: 'inherit'
+  }
+}
+
+export default interfaceObj

package/src/l-trend-card/README.md

@@ -0,0 +1,415 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '1f540422-4cf8-405a-9e03-e1af865f6666'
+  PropagateID: '1f540422-4cf8-405a-9e03-e1af865f6666'
+  ReservedCode1: '58efed1c-1dc2-4994-825b-5811193ce3de'
+  ReservedCode2: '58efed1c-1dc2-4994-825b-5811193ce3de'
+---
+
+# LTrendCard 组件说明
+
+## 概述
+
+`LTrendCard` 是一个参数化驱动的趋势卡片组件，采用类似 Element UI 的封装方式。所有样式（背景图、图标、文字大小、颜色等）均通过 props 参数动态控制，不再依赖 CSS 样式文件。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **内联样式**：使用 computed 属性动态生成内联样式
+- ✅ **高度灵活**：支持自定义背景图、图标尺寸、字体、颜色等
+- ✅ **默认图片**：未传入图片时自动使用组件内置默认图片
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **趋势指示**：支持同比/环比数据展示，自动显示上升/下降图标
+
+## 设计原则
+
+### Element UI 风格封装
+
+```vue
+<!-- 类似 Element UI 的使用方式 -->
+<l-trend-card
+  title="接待游客"
+  :num="12345"
+  :yoy="15.5"
+  :mom="-3.2"
+  :num-font-size="24"
+  num-color="#4aefa0"
+/>
+```
+
+## 文件结构
+
+```
+l-trend-card/
+├── img/                        # 默认图片资源
+│   ├── images.js               # 图片映射文件
+│   ├── l-trend-card_bg.png     # 默认背景图
+│   ├── l-trend-card_icon_1.png # 默认图标
+│   ├── l-trend-card_icon_up.png   # 上升图标
+│   └── l-trend-card_icon_down.png # 下降图标
+├── interface/
+│   └── index.js                # Props 定义
+├── index.vue                   # 主组件（内联样式驱动）
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础参数
+
+| 参数名 | 类型 | 默认值 | 必填 | 说明 |
+|--------|------|--------|------|------|
+| `icon` | String | `''` | 否 | 图标图片 URL（可选，未传时使用默认） |
+| `title` | String | `''` | 否 | 标题文本 |
+| `num` | String/Number | `''` | 否 | 数据值 |
+| `yoy` | String/Number | `0` | 否 | 同比增长率（%） |
+| `mom` | String/Number | `0` | 否 | 环比增长率（%） |
+| `upIcon` | String | `''` | 否 | 上升图标 URL（可选） |
+| `downIcon` | String | `''` | 否 | 下降图标 URL（可选） |
+| `bgImage` | String | `''` | 否 | 背景图 URL（可选，未传时使用默认） |
+
+### 卡片容器参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `cardWidth` | String/Number | `'150px'` | 卡片宽度 |
+| `cardHeight` | String/Number | `'107px'` | 卡片高度 |
+| `cardPadding` | String | `'8px 8px 0 4px'` | 卡片内边距 |
+| `cardBoxSizing` | String | `'border-box'` | 盒模型 |
+| `cardDisplay` | String | `'flex'` | 显示方式 |
+| `cardBgSize` | String | `'100% 100%'` | 背景图尺寸 |
+
+### 图标参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `iconWidth` | String/Number | `'50px'` | 图标宽度 |
+| `iconHeight` | String/Number | `'61px'` | 图标高度 |
+| `iconMarginLeft` | String/Number | `'2px'` | 图标左边距 |
+| `iconMarginTop` | String/Number | `'5px'` | 图标上边距 |
+| `iconFlexShrink` | String/Number | `0` | 图标收缩比例 |
+
+### 内容容器参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `contentFlex` | String/Number | `1` | 弹性比例 |
+| `contentDisplay` | String | `'flex'` | 显示方式 |
+| `contentFlexDirection` | String | `'column'` | 主轴方向 |
+| `contentJustifyContent` | String | `'center'` | 主轴对齐 |
+
+### 标题参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `titleFontFamily` | String | `'PingFangSC, PingFang SC'` | 标题字体 |
+| `titleFontWeight` | String/Number | `400` | 标题字重 |
+| `titleFontSize` | String/Number | `'16px'` | 标题字号 |
+| `titleColor` | String | `'#ffffff'` | 标题颜色 |
+| `titleLineHeight` | String/Number | `1.2` | 标题行高 |
+
+### 数值参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+| `numFontSize` | String/Number | `'22px'` | 数值字号 |
+| `numColor` | String | `'#4aefa0'` | 数值颜色 |
+| `numTextShadow` | String | `'0 0 6px rgba(74, 239, 160, 0.5)'` | 数值阴影 |
+| `numLineHeight` | String/Number | `1.2` | 数值行高 |
+| `numMargin` | String | `'4px 0'` | 数值外边距 |
+
+### 比率参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `rateFontSize` | String/Number | `'12px'` | 比率字号 |
+| `rateColor` | String | `'#ffffff'` | 比率颜色 |
+| `rateLineHeight` | String/Number | `1.6` | 比率行高 |
+| `rateDisplay` | String | `'flex'` | 比率显示方式 |
+| `rateAlignItems` | String | `'center'` | 比率对齐方式 |
+| `labelMarginRight` | String/Number | `'4px'` | 标签右边距 |
+| `valueMarginRight` | String/Number | `'4px'` | 数值右边距 |
+
+### 趋势图标参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `trendIconWidth` | String/Number | `'7px'` | 趋势图标宽度 |
+| `trendIconHeight` | String/Number | `'10px'` | 趋势图标高度 |
+
+## 使用方式
+
+### 基本使用（使用默认样式）
+
+```vue
+<template>
+  <l-trend-card
+    title="接待游客"
+    :num="12345"
+    :yoy="15.5"
+    :mom="-3.2"
+  />
+</template>
+
+<script>
+import LTrendCard from '@/components/moduleDataNew/l-trend-card/index.vue'
+
+export default {
+  components: {
+    LTrendCard
+  }
+}
+</script>
+```
+
+### 自定义图标和背景图
+
+```vue
+<template>
+  <l-trend-card
+    title="今日收入"
+    :num="9876.5"
+    :yoy="20.3"
+    :mom="5.8"
+    :icon="require('@/assets/income-icon.png')"
+    :bg-image="require('@/assets/income-bg.png')"
+  />
+</template>
+```
+
+### 自定义数值样式
+
+```vue
+<template>
+  <l-trend-card
+    title="客流指数"
+    :num="95.2"
+    :yoy="12.5"
+    :mom="-2.1"
+    :num-font-size="28"
+    num-color="#00F2FE"
+    :num-text-shadow="'0 0 6px rgba(0, 242, 254, 0.5)'"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-trend-card
+    title="酒店预订"
+    :num="238"
+    :yoy="35.2"
+    :mom="8.5"
+    :card-width="200"
+    :card-height="140"
+    :title-font-size="18"
+    title-color="#FFFFFF"
+    :num-font-size="32"
+    :num-font-weight="700"
+    num-color="#4CE27E"
+    :num-text-shadow="'0 0 10px rgba(76, 226, 126, 0.8)'"
+    :rate-font-size="14"
+    rate-color="rgba(255,255,255,0.8)"
+  />
+</template>
+```
+
+### 循环渲染（推荐）
+
+```vue
+<template>
+  <l-trend-card
+    v-for="(item, index) in list"
+    :key="index"
+    :title="item.title"
+    :num="item.num"
+    :yoy="item.yoy"
+    :mom="item.mom"
+    :icon="item.icon"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          title: 'A级景区',
+          num: 934,
+          yoy: 12.5,
+          mom: 3.2,
+          icon: require('@/assets/icons/scenic.png')
+        },
+        {
+          title: '星级酒店',
+          num: 437,
+          yoy: -5.3,
+          mom: -2.1,
+          icon: require('@/assets/icons/hotel.png')
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 图片使用方式
+
+组件接受多个图片参数：
+
+1. **icon**（可选）：主图标 URL
+2. **bgImage**（可选）：背景图 URL
+3. **upIcon**（可选）：上升趋势图标 URL
+4. **downIcon**（可选）：下降趋势图标 URL
+
+**说明**：
+- 如果未传入图片，组件会自动使用内部的默认图片
+- 如果传入了图片，则使用外部传入的图片
+
+### 使用默认图片（不传参）
+
+```vue
+<l-trend-card
+  title="接待游客"
+  :num="12345"
+  :yoy="15.5"
+  :mom="-3.2"
+/>
+<!-- 自动使用组件内置的默认图标和背景图 -->
+```
+
+### 使用 require 引入
+
+```vue
+<l-trend-card
+  :icon="require('@/assets/icons/parking.png')"
+  :bg-image="require('@/assets/bg/parking-bg.png')"
+  :up-icon="require('@/assets/icons/arrow-up.png')"
+  :down-icon="require('@/assets/icons/arrow-down.png')"
+/>
+```
+
+### 使用外部 URL
+
+```vue
+<l-trend-card
+  icon="https://example.com/icon.png"
+  bg-image="https://example.com/bg.png"
+/>
+```
+
+### 从数据对象传入
+
+```vue
+<l-trend-card
+  :icon="item.icon"
+  :bg-image="item.bgImage"
+  :up-icon="item.upIcon"
+  :down-icon="item.downIcon"
+/>
+```
+
+## 尺寸参数说明
+
+所有尺寸参数均支持 String 和 Number 两种类型：
+
+```vue
+<!-- String 类型（带单位） -->
+<l-trend-card :num-font-size="'24px'" />
+
+<!-- Number 类型（自动添加 px） -->
+<l-trend-card :num-font-size="24" />
+```
+
+## 数据格式化
+
+组件内置两个工具函数用于数据处理：
+
+- `dealPercentdDisplay(value)`：格式化百分比数据
+- `judgeRateType(value)`：判断趋势类型（'up' 或 'down'）
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 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,
+      textShadow: this.numTextShadow
+    }
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<div class="l-trend-card__num" :style="numStyle">{{ num }}</div>
+```
+
+### 默认图片兜底
+
+```javascript
+computed: {
+  computedIcon() {
+    if (this.icon) {
+      return this.icon
+    }
+    return getIconPath(1)
+  }
+}
+```
+
+## 注意事项
+
+1. **图片可选**：所有图片参数都是可选的，未传入时使用默认图片
+2. **趋势判断**：正数显示上升图标，负数显示下降图标，0 不显示图标
+3. **数据格式化**：yoy 和 mom 会自动通过 `dealPercentdDisplay` 函数格式化
+4. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+5. **默认图片**：组件内置默认图片，位于 `img/` 目录下
+6. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+7. **BEM 命名**：使用 `l-trend-card__icon`、`l-trend-card__num` 等 BEM 命名规范
+
+## 适用场景
+
+- ✅ 需要展示同比/环比数据的指标卡片
+- ✅ 需要动态调整样式的趋势卡片
+- ✅ 不同页面使用不同主题的卡片
+- ✅ 需要根据数据状态改变颜色/大小
+- ✅ 类似 Element UI 的组件化开发方式
+- ✅ 旅游资源、消费品牌等指标展示
+
+## 更新日志
+
+- **v1.0.0** (2026-06-10)
+  - 从 moduleData_4 重命名为 `l-trend-card`
+  - 移除 CSS 文件依赖，改为 props 驱动
+  - 新增默认图片支持（img/ 目录）
+  - 新增 30+ 个样式控制参数
+  - 使用内联样式实现（类似 Element UI）
+  - 支持 String/Number 类型的尺寸参数
+  - 背景图和图标通过 bgImage/icon 参数外部传入
+  - 新增 computedIcon、computedUpIcon、computedDownIcon、computedBgImage 兜底逻辑
+  - 图片命名规范：l-trend-card_bg.png、l-trend-card_icon_X.png
+
+> AI生成

package/src/l-trend-card/img/images.js

@@ -0,0 +1,41 @@
+/**
+ * l-trend-card 组件图片资源映射
+ * 提供默认背景图和图标获取函数
+ */
+
+const images = {
+  // 背景图
+  bg: require('./l-trend-card_bg.png'),
+  // 图标
+  icons: {
+    1: require('./l-trend-card_icon_1.png'),
+    up: require('./l-trend-card_icon_up.png'),
+    down: require('./l-trend-card_icon_down.png')
+  }
+}
+
+/**
+ * 获取背景图路径
+ * @returns {String} 背景图路径
+ */
+export function getBgPath() {
+  return images.bg
+}
+
+/**
+ * 获取图标路径
+ * @param {Number|String} index - 图标索引（默认 1）或类型（up/down）
+ * @returns {String} 图标路径
+ */
+export function getIconPath(index = 1) {
+  return images.icons[index] || images.icons[1]
+}
+
+/**
+ * 获取趋势图标路径（上/下）
+ * @param {String} type - 趋势类型（'up' 或 'down'）
+ * @returns {String} 趋势图标路径
+ */
+export function getTrendIconPath(type = 'up') {
+  return images.icons[type] || images.icons.up
+}