@travel-screen/l-module-components 1.0.0

package/src/l-data-panel/interface/index.js

@@ -0,0 +1,249 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 数据列表：每项包含 num（数值）和 label（标签文字）
+  dataList: {
+    type: Array,
+    default: () => []
+  },
+
+  // ========== 容器相关 ==========
+  // 容器显示方式：flex、block 等
+  containerDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 容器对齐方式：space-between、center、space-around 等
+  containerJustifyContent: {
+    type: String,
+    default: 'space-between'
+  },
+  // 容器宽度
+  containerWidth: {
+    type: [String, Number],
+    default: '100%'
+  },
+  // 容器高度
+  containerHeight: {
+    type: [String, Number],
+    default: '140px'
+  },
+  // 容器内边距
+  containerPadding: {
+    type: String,
+    default: '0 40px'
+  },
+  // 容器顶部外边距
+  containerMarginTop: {
+    type: [String, Number],
+    default: '40px'
+  },
+  // 容器指针事件：auto、none 等
+  containerPointerEvents: {
+    type: String,
+    default: 'auto'
+  },
+
+  // ========== 卡片通用样式 ==========
+  // 卡片高度
+  cardHeight: {
+    type: [String, Number],
+    default: '110px'
+  },
+  // 卡片显示方式
+  cardDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 卡片主轴方向
+  cardFlexDirection: {
+    type: String,
+    default: 'column'
+  },
+  // 卡片交叉轴对齐
+  cardJustifyContent: {
+    type: String,
+    default: 'center'
+  },
+  // 卡片背景重复方式
+  cardBgRepeat: {
+    type: String,
+    default: 'no-repeat'
+  },
+  // 卡片背景位置
+  cardBgPosition: {
+    type: String,
+    default: 'center'
+  },
+  // 卡片背景尺寸
+  cardBgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+
+  // ========== 卡片1（左侧）相关 ==========
+  // 卡片1定位方式
+  card1Position: {
+    type: String,
+    default: 'relative'
+  },
+  // 卡片1左侧偏移
+  card1Left: {
+    type: [String, Number],
+    default: '7px'
+  },
+  // 卡片1右侧内边距
+  card1PaddingRight: {
+    type: [String, Number],
+    default: '62px'
+  },
+  // 卡片1宽度
+  card1Width: {
+    type: [String, Number],
+    default: '288px'
+  },
+  // 卡片1文字对齐
+  card1TextAlign: {
+    type: String,
+    default: 'right'
+  },
+  // 卡片1背景图
+  card1BgImage: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 卡片2（中间）相关 ==========
+  // 卡片2文字对齐
+  card2TextAlign: {
+    type: String,
+    default: 'center'
+  },
+  // 卡片2宽度
+  card2Width: {
+    type: [String, Number],
+    default: '267px'
+  },
+  // 卡片2背景图
+  card2BgImage: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 卡片3（右侧）相关 ==========
+  // 卡片3文字对齐
+  card3TextAlign: {
+    type: String,
+    default: 'left'
+  },
+  // 卡片3定位方式
+  card3Position: {
+    type: String,
+    default: 'relative'
+  },
+  // 卡片3左侧内边距
+  card3PaddingLeft: {
+    type: [String, Number],
+    default: '62px'
+  },
+  // 卡片3左侧偏移
+  card3Left: {
+    type: [String, Number],
+    default: '-7px'
+  },
+  // 卡片3宽度
+  card3Width: {
+    type: [String, Number],
+    default: '288px'
+  },
+  // 卡片3背景图
+  card3BgImage: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体
+  numFontFamily: {
+    type: String,
+    default: 'DINAlternate, DIN Alternate, YouSheBiaoTiHei, sans-serif'
+  },
+  // 数值字重
+  numFontWeight: {
+    type: [String, Number],
+    default: 'bold'
+  },
+  // 数值字体样式
+  numFontStyle: {
+    type: String,
+    default: 'italic'
+  },
+  // 数值字号
+  numFontSize: {
+    type: [String, Number],
+    default: '44px'
+  },
+  // 数值颜色
+  numColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 数值背景渐变色
+  numBackground: {
+    type: String,
+    default: 'linear-gradient(180deg, #ffffff 0%, #4aefa0 100%)'
+  },
+  // 数值背景裁剪
+  numBackgroundClip: {
+    type: String,
+    default: 'text'
+  },
+  // 数值文字阴影
+  numTextShadow: {
+    type: String,
+    default: '0px 2px 6px rgba(74, 239, 160, 0.5)'
+  },
+  // 数值行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 数值底部边距
+  numMarginBottom: {
+    type: [String, Number],
+    default: '10px'
+  },
+  // 数值右侧内边距
+  numPaddingRight: {
+    type: [String, Number],
+    default: '5px'
+  },
+
+  // ========== 标签相关 ==========
+  // 标签字体
+  labelFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标签字重
+  labelFontWeight: {
+    type: [String, Number],
+    default: 500
+  },
+  // 标签字号
+  labelFontSize: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 标签颜色
+  labelColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 标签行高
+  labelLineHeight: {
+    type: [String, Number],
+    default: 1
+  }
+}
+
+export default interfaceObj

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

@@ -0,0 +1,292 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'af26224c-8a9c-4879-b506-af9043b09f85'
+  PropagateID: 'af26224c-8a9c-4879-b506-af9043b09f85'
+  ReservedCode1: '8f83ed90-2b60-43b2-a6cb-c86120136791'
+  ReservedCode2: '8f83ed90-2b60-43b2-a6cb-c86120136791'
+---
+
+# LDataRing 组件说明
+
+## 概述
+
+`LDataRing` 是一个参数化驱动的单个数据环形展示组件，采用类似 Element UI 的封装方式。所有样式（背景图、数值大小/颜色、标签样式等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **默认背景图**：未传入背景图时自动使用组件内置默认背景图
+- ✅ **高度灵活**：支持自定义背景图尺寸、数值样式、标签样式等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **单一数据项**：每个组件实例展示单个数据项，支持灵活布局
+
+## 文件结构
+
+```
+l-data-ring/
+├── img/
+│   ├── images.js               # 图片映射文件
+│   └── l-data-ring_bg.png      # 默认背景图
+├── interface/
+│   └── index.js                # Props 定义（20+ 个参数）
+├── index.vue                   # 主组件（内联样式驱动）
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `num` | String/Number | `0` | 显示的数值 |
+| `label` | String | `''` | 数值下方的标签文字 |
+
+### 背景图相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `bgImage` | String | `''` | 背景图图片URL（留空则使用默认背景图） |
+| `bgWidth` | String/Number | `'88px'` | 背景图宽度 |
+| `bgHeight` | String/Number | `'45px'` | 背景图高度 |
+| `bgSize` | String | `'100% 100%'` | 背景图尺寸（缩放方式） |
+| `bgTop` | String/Number | `'-15px'` | 背景图顶部偏移 |
+| `bgMarginBottom` | String/Number | `'6px'` | 背景图底部边距 |
+
+### 数值相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numFontFamily` | String | `'DINAlternate, DIN Alternate, sans-serif'` | 数值字体 |
+| `numFontWeight` | String/Number | `'bold'` | 数值字重 |
+| `numFontSize` | String/Number | `'26px'` | 数值字号 |
+| `numColor` | String | `'#4aefa0'` | 数值颜色 |
+| `numTextShadow` | String | `'0 0 8px rgba(74, 239, 160, 0.6)'` | 数值文字阴影 |
+| `numTop` | String/Number | `'-15px'` | 数值顶部偏移 |
+| `numMarginBottom` | String/Number | `'4px'` | 数值底部边距 |
+| `numLineHeight` | String/Number | `1` | 数值行高 |
+| `numFontStyle` | String | `'italic'` | 数值字体样式 |
+
+### 标签相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `labelFontFamily` | String | `'PingFangSC, PingFang SC'` | 标签字体 |
+| `labelFontWeight` | String/Number | `400` | 标签字重 |
+| `labelFontSize` | String/Number | `'16px'` | 标签字号 |
+| `labelColor` | String | `'#A3C2CC'` | 标签颜色 |
+
+## 使用方式
+
+### 基本使用（单项展示）
+
+```vue
+<template>
+  <l-data-ring
+    :num="198"
+    label="活动声量话题数"
+  />
+</template>
+
+<script>
+import LDataRing from '@/components/moduleDataNew/l-data-ring/index.vue'
+
+export default {
+  components: {
+    LDataRing
+  }
+}
+</script>
+```
+
+### 多项数据展示（使用 v-for）
+
+```vue
+<template>
+  <div class="network-metrics">
+    <l-data-ring
+      v-for="(item, index) in networkList"
+      :key="index"
+      :num="item.num"
+      :label="item.label"
+    />
+  </div>
+</template>
+
+<script>
+import LDataRing from '@/components/moduleDataNew/l-data-ring/index.vue'
+
+export default {
+  components: {
+    LDataRing
+  },
+  data() {
+    return {
+      networkList: [
+        { num: 198, label: '活动声量话题数' },
+        { num: 93.28, label: '活动地热度指数' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.network-metrics {
+  display: flex;
+  justify-content: space-around;
+}
+</style>
+```
+
+### 自定义背景图
+
+```vue
+<template>
+  <l-data-ring
+    :num="198"
+    label="活动声量话题数"
+    :bgImage="require('@/assets/custom-bg.png')"
+    :bgWidth="100"
+    :bgHeight="50"
+  />
+</template>
+```
+
+### 自定义数值和标签样式
+
+```vue
+<template>
+  <l-data-ring
+    :num="198"
+    label="活动声量话题数"
+    :numFontSize="30"
+    numColor="#FF6B6B"
+    :numTextShadow="'0 0 10px rgba(255, 107, 107, 0.8)'"
+    :labelFontSize="14"
+    labelColor="#FFFFFF"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-data-ring
+    :num="198"
+    label="活动声量话题数"
+    :bgWidth="100"
+    :bgHeight="55"
+    :bgTop="-20"
+    :bgMarginBottom="8"
+    :numFontSize="28"
+    numColor="#4CE27E"
+    :numTextShadow="'0 0 12px rgba(76, 226, 126, 0.7)'"
+    :numTop="-18"
+    :numMarginBottom="6"
+    :labelFontSize="14"
+    labelColor="#E8EEF4"
+  />
+</template>
+```
+
+## 数据结构
+
+### networkList 格式（用于 v-for 循环）
+
+```javascript
+[
+  { num: 198, label: '活动声量话题数' },
+  { num: 93.28, label: '活动地热度指数' }
+]
+```
+
+- `num`: 数值（支持数字或字符串）
+- `label`: 标签文字
+
+## 技术实现
+
+### 内联样式生成
+
+组件通过 computed 属性动态生成内联样式：
+
+```javascript
+computed: {
+  numStyle() {
+    return {
+      fontFamily: this.numFontFamily,
+      fontWeight: this.numFontWeight,
+      fontSize: typeof this.numFontSize === 'number' 
+        ? `${this.numFontSize}px` 
+        : this.numFontSize,
+      color: this.numColor,
+      textShadow: this.numTextShadow,
+      top: typeof this.numTop === 'number' 
+        ? `${this.numTop}px` 
+        : this.numTop
+    }
+  }
+}
+```
+
+### 默认背景图兜底
+
+```javascript
+computed: {
+  computedBgImage() {
+    if (this.bgImage) {
+      return this.bgImage
+    }
+    // 使用默认背景图
+    return getBgPath()
+  }
+}
+```
+
+### 模板绑定
+
+```vue
+<template>
+  <div class="l-data-ring">
+    <div class="l-data-ring__num" :style="numStyle">{{ num }}</div>
+    <div class="l-data-ring__bg" :style="bgStyle"></div>
+    <div class="l-data-ring__label" :style="labelStyle">{{ label }}</div>
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **背景图可选**：`bgImage` 参数是可选的，未传入时使用默认背景图
+2. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+3. **默认背景图**：组件内置默认背景图，位于 `img/` 目录下
+4. **性能优化**：内联样式通过 computed 缓存，避免重复计算
+5. **BEM 命名**：使用 `l-data-ring__num`、`l-data-ring__bg`、`l-data-ring__label` 等 BEM 命名规范
+6. **单项展示**：本组件为单个数据项展示，多项数据需在外层使用 v-for 循环
+7. **灵活布局**：外层容器可自由设置布局方式（flex、grid 等）
+
+## 适用场景
+
+- ✅ 网络综合分析数据展示
+- ✅ 活动声量/热度指标展示
+- ✅ 单个数据环形展示
+- ✅ 需要自定义背景图和样式的场景
+- ✅ 多项指标并排对比展示（通过 v-for）
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `moduleData_9` 重命名为 `l-data-ring`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 改为单个数据项展示（不再使用 dataList 数组）
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 添加默认背景图支持
+  - 支持背景图、数值、标签等样式自定义
+  - 使用内联样式实现（类似 Element UI）
+
+> AI生成

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

@@ -0,0 +1,21 @@
+/**
+ * LDataRing 组件图片资源映射
+ *
+ * 图片命名规范：
+ * - l-data-ring_bg.png：背景图
+ */
+
+const images = {
+  // 背景图
+  bg: require('./l-data-ring_bg.png')
+}
+
+/**
+ * 获取背景图路径
+ * @returns {String} 背景图路径
+ */
+export function getBgPath() {
+  return images.bg
+}
+
+export default images

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

@@ -0,0 +1,93 @@
+<template>
+  <div class="l-data-ring">
+    <div class="l-data-ring__num" :style="numStyle">{{ num }}</div>
+    <div class="l-data-ring__bg" :style="bgStyle"></div>
+    <div class="l-data-ring__label" :style="labelStyle">{{ label }}</div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getBgPath } from './img/images'
+
+export default {
+  name: 'LDataRing',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      // 使用默认背景图
+      return getBgPath()
+    },
+
+    // 背景图容器样式
+    bgStyle() {
+      return {
+        width: typeof this.bgWidth === 'number' ? `${this.bgWidth}px` : this.bgWidth,
+        height: typeof this.bgHeight === 'number' ? `${this.bgHeight}px` : this.bgHeight,
+        top: typeof this.bgTop === 'number' ? `${this.bgTop}px` : this.bgTop,
+        marginBottom: typeof this.bgMarginBottom === 'number' ? `${this.bgMarginBottom}px` : this.bgMarginBottom,
+        background: this.computedBgImage ? `url(${this.computedBgImage}) no-repeat center / ${this.bgSize}` : ''
+      }
+    },
+
+    // 数值样式
+    numStyle() {
+      return {
+        fontFamily: this.numFontFamily,
+        fontWeight: this.numFontWeight,
+        fontSize: typeof this.numFontSize === 'number' ? `${this.numFontSize}px` : this.numFontSize,
+        color: this.numColor,
+        textShadow: this.numTextShadow,
+        top: typeof this.numTop === 'number' ? `${this.numTop}px` : this.numTop,
+        marginBottom: typeof this.numMarginBottom === 'number' ? `${this.numMarginBottom}px` : this.numMarginBottom,
+        lineHeight: typeof this.numLineHeight === 'number' ? this.numLineHeight : this.numLineHeight,
+        fontStyle: this.numFontStyle
+      }
+    },
+
+    // 标签样式
+    labelStyle() {
+      return {
+        fontFamily: this.labelFontFamily,
+        fontWeight: this.labelFontWeight,
+        fontSize: typeof this.labelFontSize === 'number' ? `${this.labelFontSize}px` : this.labelFontSize,
+        color: this.labelColor
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.l-data-ring {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  &__num {
+    position: relative;
+    line-height: 1;
+  }
+
+  &__bg {
+    position: absolute;
+  }
+
+  &__label {
+    // 字体样式通过内联样式控制
+  }
+}
+</style>