@travel-screen/l-module-components 1.0.0

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="l-trend-card" :style="cardStyle">
+    <img class="l-trend-card__icon" :src="computedIcon" :style="iconStyle" />
+    <div class="l-trend-card__content" :style="contentStyle">
+      <div class="l-trend-card__title" :style="titleStyle">{{ title }}</div>
+      <div class="l-trend-card__num" :style="numStyle">{{ num }}</div>
+      <div class="l-trend-card__rate" :style="rateStyle">
+        <span class="l-trend-card__rate-label" :style="rateLabelStyle">同比</span>
+        <span class="l-trend-card__rate-value" :style="rateValueStyle">{{ dealPercentdDisplay(yoy) }}%</span>
+        <img
+          v-if="judgeRateType(yoy)"
+          class="l-trend-card__rate-trend-icon"
+          :src="judgeRateType(yoy) === 'up' ? computedUpIcon : computedDownIcon"
+          :style="trendIconStyle"
+        />
+      </div>
+      <div class="l-trend-card__rate" :style="rateStyle">
+        <span class="l-trend-card__rate-label" :style="rateLabelStyle">环比</span>
+        <span class="l-trend-card__rate-value" :style="rateValueStyle">{{ dealPercentdDisplay(mom) }}%</span>
+        <img
+          v-if="judgeRateType(mom)"
+          class="l-trend-card__rate-trend-icon"
+          :src="judgeRateType(mom) === 'up' ? computedUpIcon : computedDownIcon"
+          :style="trendIconStyle"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { dealPercentdDisplay, judgeRateType } from '../../utils/util'
+import { getBgPath, getIconPath, getTrendIconPath } from './img/images'
+
+export default {
+  name: 'LTrendCard',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {
+    // 图标（外部传入优先，否则使用默认）
+    computedIcon() {
+      if (this.icon) {
+        return this.icon
+      }
+      return getIconPath(1)
+    },
+
+    // 上升图标（外部传入优先，否则使用默认）
+    computedUpIcon() {
+      if (this.upIcon) {
+        return this.upIcon
+      }
+      return getTrendIconPath('up')
+    },
+
+    // 下降图标（外部传入优先，否则使用默认）
+    computedDownIcon() {
+      if (this.downIcon) {
+        return this.downIcon
+      }
+      return getTrendIconPath('down')
+    },
+
+    // 背景图（外部传入优先，否则使用默认）
+    computedBgImage() {
+      if (this.bgImage) {
+        return this.bgImage
+      }
+      return getBgPath()
+    },
+
+    // 卡片容器样式
+    cardStyle() {
+      return {
+        width: typeof this.cardWidth === 'number' ? `${this.cardWidth}px` : this.cardWidth,
+        height: typeof this.cardHeight === 'number' ? `${this.cardHeight}px` : this.cardHeight,
+        padding: this.cardPadding,
+        boxSizing: this.cardBoxSizing,
+        display: this.cardDisplay,
+        background: this.computedBgImage ? `url(${this.computedBgImage}) no-repeat center / ${this.cardBgSize}` : ''
+      }
+    },
+
+    // 图标样式
+    iconStyle() {
+      return {
+        width: typeof this.iconWidth === 'number' ? `${this.iconWidth}px` : this.iconWidth,
+        height: typeof this.iconHeight === 'number' ? `${this.iconHeight}px` : this.iconHeight,
+        marginLeft: typeof this.iconMarginLeft === 'number' ? `${this.iconMarginLeft}px` : this.iconMarginLeft,
+        marginTop: typeof this.iconMarginTop === 'number' ? `${this.iconMarginTop}px` : this.iconMarginTop,
+        flexShrink: this.iconFlexShrink
+      }
+    },
+
+    // 内容容器样式
+    contentStyle() {
+      return {
+        flex: this.contentFlex,
+        display: this.contentDisplay,
+        flexDirection: this.contentFlexDirection,
+        justifyContent: this.contentJustifyContent
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontWeight: this.titleFontWeight,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        lineHeight: this.titleLineHeight
+      }
+    },
+
+    // 数值样式
+    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,
+        lineHeight: this.numLineHeight,
+        margin: this.numMargin
+      }
+    },
+
+    // 比率容器样式
+    rateStyle() {
+      return {
+        fontSize: typeof this.rateFontSize === 'number' ? `${this.rateFontSize}px` : this.rateFontSize,
+        color: this.rateColor,
+        lineHeight: this.rateLineHeight,
+        display: this.rateDisplay,
+        alignItems: this.rateAlignItems
+      }
+    },
+
+    // 比率标签样式
+    rateLabelStyle() {
+      return {
+        marginRight: typeof this.labelMarginRight === 'number' ? `${this.labelMarginRight}px` : this.labelMarginRight
+      }
+    },
+
+    // 比率数值样式
+    rateValueStyle() {
+      return {
+        marginRight: typeof this.valueMarginRight === 'number' ? `${this.valueMarginRight}px` : this.valueMarginRight
+      }
+    },
+
+    // 趋势图标样式
+    trendIconStyle() {
+      return {
+        width: typeof this.trendIconWidth === 'number' ? `${this.trendIconWidth}px` : this.trendIconWidth,
+        height: typeof this.trendIconHeight === 'number' ? `${this.trendIconHeight}px` : this.trendIconHeight
+      }
+    }
+  },
+  watch: {},
+  mounted() {},
+  created() {},
+  methods: {
+    dealPercentdDisplay,
+    judgeRateType
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-trend-card {
+  // 所有样式通过内联样式控制
+}
+</style>

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

@@ -0,0 +1,243 @@
+const interfaceObj = {
+  // 图标图片：卡片左侧的主图标URL，未传入时使用默认图标
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 标题文本：显示在卡片上的标题文字
+  title: {
+    type: String,
+    default: ''
+  },
+  // 数值：卡片显示的主要数据值
+  num: {
+    type: [String, Number],
+    default: ''
+  },
+  // 同比增长率：与去年同期相比的增长率（%）
+  yoy: {
+    type: [String, Number],
+    default: 0
+  },
+  // 环比增长率：与上一周期相比的增长率（%）
+  mom: {
+    type: [String, Number],
+    default: 0
+  },
+  // 上升图标：增长率上升时显示的图标URL，未传入时使用默认
+  upIcon: {
+    type: String,
+    default: ''
+  },
+  // 下降图标：增长率下降时显示的图标URL，未传入时使用默认
+  downIcon: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 卡片容器相关 ==========
+  // 卡片宽度：整个卡片的宽度
+  cardWidth: {
+    type: [String, Number],
+    default: '150px'
+  },
+  // 卡片高度：整个卡片的高度
+  cardHeight: {
+    type: [String, Number],
+    default: '107px'
+  },
+  // 卡片内边距：卡片内容与边缘的间距（上 右 下 左）
+  cardPadding: {
+    type: String,
+    default: '8px 8px 0 4px'
+  },
+  // 卡片盒模型：CSS box-sizing属性
+  cardBoxSizing: {
+    type: String,
+    default: 'border-box'
+  },
+  // 卡片显示方式：CSS display属性
+  cardDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 背景图：卡片容器的背景图片URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+  // 背景图尺寸：背景图的缩放方式（如：100% 100%）
+  cardBgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+
+  // ========== 图标相关 ==========
+  // 图标宽度：主图标的显示宽度
+  iconWidth: {
+    type: [String, Number],
+    default: '50px'
+  },
+  // 图标高度：主图标的显示高度
+  iconHeight: {
+    type: [String, Number],
+    default: '61px'
+  },
+  // 图标左边距：图标距离卡片左侧的间距
+  iconMarginLeft: {
+    type: [String, Number],
+    default: '2px'
+  },
+  // 图标上边距：图标距离卡片顶部的间距
+  iconMarginTop: {
+    type: [String, Number],
+    default: '5px'
+  },
+  // 图标收缩比例：flex布局中图标的收缩比例（0表示不收缩）
+  iconFlexShrink: {
+    type: [String, Number],
+    default: 0
+  },
+
+  // ========== 内容容器相关 ==========
+  // 内容区弹性比例：内容区域的flex比例
+  contentFlex: {
+    type: [String, Number],
+    default: 1
+  },
+  // 内容区显示方式：内容区域的CSS display属性
+  contentDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 内容区主轴方向：内容区域的flex主轴方向
+  contentFlexDirection: {
+    type: String,
+    default: 'column'
+  },
+  // 内容区主轴对齐：内容区域的flex主轴对齐方式
+  contentJustifyContent: {
+    type: String,
+    default: 'center'
+  },
+
+  // ========== 标题相关 ==========
+  // 标题字体：标题文字的字体族
+  titleFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标题字重：标题文字的粗细
+  titleFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 标题字号：标题文字的大小
+  titleFontSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 标题颜色：标题文字的颜色
+  titleColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 标题行高：标题文字的行高
+  titleLineHeight: {
+    type: [String, Number],
+    default: 1.2
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体：数值文字的字体族
+  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: '22px'
+  },
+  // 数值颜色：数值文字的颜色
+  numColor: {
+    type: String,
+    default: '#4aefa0'
+  },
+  // 数值文字阴影：数值文字的阴影效果
+  numTextShadow: {
+    type: String,
+    default: '0 0 6px rgba(74, 239, 160, 0.5)'
+  },
+  // 数值行高：数值文字的行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1.2
+  },
+  // 数值外边距：数值文字的上下外边距
+  numMargin: {
+    type: String,
+    default: '4px 0'
+  },
+
+  // ========== 比率相关 ==========
+  // 比率字号：同比/环比文字的字体大小
+  rateFontSize: {
+    type: [String, Number],
+    default: '12px'
+  },
+  // 比率颜色：同比/环比文字的颜色
+  rateColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 比率行高：同比/环比文字的行高
+  rateLineHeight: {
+    type: [String, Number],
+    default: 1.6
+  },
+  // 比率显示方式：比率区域的CSS display属性
+  rateDisplay: {
+    type: String,
+    default: 'flex'
+  },
+  // 比率交叉轴对齐：比率区域的flex交叉轴对齐
+  rateAlignItems: {
+    type: String,
+    default: 'center'
+  },
+  // 比率标签右边距："同比"/"环比"标签右侧的间距
+  labelMarginRight: {
+    type: [String, Number],
+    default: '4px'
+  },
+  // 比率数值右边距：比率数值与趋势图标之间的间距
+  valueMarginRight: {
+    type: [String, Number],
+    default: '4px'
+  },
+
+  // ========== 趋势图标相关 ==========
+  // 趋势图标宽度：上升/下降图标的显示宽度
+  trendIconWidth: {
+    type: [String, Number],
+    default: '7px'
+  },
+  // 趋势图标高度：上升/下降图标的显示高度
+  trendIconHeight: {
+    type: [String, Number],
+    default: '10px'
+  }
+}
+
+export default interfaceObj

package/src/utils/tooltip.js

@@ -0,0 +1,30 @@
+/**
+ * ECharts tooltip 工具函数
+ * 从主项目 src/utils/common.js 中提取，去除 $pubFun 全局依赖
+ */
+
+/**
+ * 柱状图/折线图 tooltip 格式化
+ * @param {Array} items - ECharts tooltip params 数组
+ * @param {String} units - 单位
+ * @returns {String} HTML 字符串
+ */
+export function tooltipItemsHtmlString(items, units = '') {
+  return items
+    .map(
+      (el) => `<div class="content-panel">
+    <p>
+      ${
+        el.marker ? el.marker : `<span style="background-color: ${el.color}" class="tooltip-item-icon"></span>`
+      }
+      <span>
+      ${el.seriesName}:
+      </span>
+    </p>
+    <span class="tooltip-value">
+      ${Number(el.value || 0).toLocaleString()} <span class="tip-units">${units}</span>
+    </span>
+  </div>`
+    )
+    .join('')
+}

package/src/utils/util.js

@@ -0,0 +1,27 @@
+/**
+ * L-Module-Components 工具函数
+ */
+
+/**
+ * 处理百分比显示（负数取绝对值）
+ * @param {Number} percentage - 百分比值
+ * @returns {Number} 处理后的值
+ */
+export function dealPercentdDisplay(percentage) {
+  return percentage < 0 ? percentage * -1 : percentage
+}
+
+/**
+ * 判断增长率方向
+ * @param {Number} rate - 增长率
+ * @returns {String} 'up' | 'down' | ''
+ */
+export function judgeRateType(rate) {
+  if (rate > 0) {
+    return 'up'
+  } else if (rate < 0) {
+    return 'down'
+  } else {
+    return ''
+  }
+}