@travel-screen/l-module-components 1.0.0

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

@@ -0,0 +1,116 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 数值：显示的数值
+  num: {
+    type: [String, Number],
+    default: 0
+  },
+  // 标签：数值下方的标签文字
+  label: {
+    type: String,
+    default: ''
+  },
+
+  // ========== 背景图相关 ==========
+  // 背景图图片：环形装饰的背景图URL，未传入时使用默认背景图
+  bgImage: {
+    type: String,
+    default: ''
+  },
+  // 背景图宽度：环形装饰背景图的宽度
+  bgWidth: {
+    type: [String, Number],
+    default: '88px'
+  },
+  // 背景图高度：环形装饰背景图的高度
+  bgHeight: {
+    type: [String, Number],
+    default: '45px'
+  },
+  // 背景图尺寸：背景图的缩放方式（如：100% 100%）
+  bgSize: {
+    type: String,
+    default: '100% 100%'
+  },
+  // 背景图顶部偏移：背景图距离顶部的偏移量
+  bgTop: {
+    type: [String, Number],
+    default: '-15px'
+  },
+  // 背景图底部边距：背景图距离下方标签的间距
+  bgMarginBottom: {
+    type: [String, Number],
+    default: '6px'
+  },
+
+  // ========== 数值相关 ==========
+  // 数值字体：数值文字的字体族
+  numFontFamily: {
+    type: String,
+    default: 'DINAlternate, DIN Alternate, sans-serif'
+  },
+  // 数值字重：数值文字的粗细（400正常、700粗体、bold加粗）
+  numFontWeight: {
+    type: [String, Number],
+    default: 'bold'
+  },
+  // 数值字号：数值文字的大小
+  numFontSize: {
+    type: [String, Number],
+    default: '26px'
+  },
+  // 数值颜色：数值文字的颜色
+  numColor: {
+    type: String,
+    default: '#4aefa0'
+  },
+  // 数值文字阴影：数值文字的阴影效果
+  numTextShadow: {
+    type: String,
+    default: '0 0 8px rgba(74, 239, 160, 0.6)'
+  },
+  // 数值顶部偏移：数值距离顶部的偏移量
+  numTop: {
+    type: [String, Number],
+    default: '-15px'
+  },
+  // 数值底部边距：数值与背景图之间的间距
+  numMarginBottom: {
+    type: [String, Number],
+    default: '4px'
+  },
+  // 数值行高：数值文字的行高
+  numLineHeight: {
+    type: [String, Number],
+    default: 1
+  },
+  // 数值字体样式：数值文字的样式（italic为斜体）
+  numFontStyle: {
+    type: String,
+    default: 'italic'
+  },
+
+  // ========== 标签相关 ==========
+  // 标签字体：标签文字的字体族
+  labelFontFamily: {
+    type: String,
+    default: 'PingFangSC, PingFang SC'
+  },
+  // 标签字重：标签文字的粗细
+  labelFontWeight: {
+    type: [String, Number],
+    default: 400
+  },
+  // 标签字号：标签文字的大小
+  labelFontSize: {
+    type: [String, Number],
+    default: '16px'
+  },
+  // 标签颜色：标签文字的颜色
+  labelColor: {
+    type: String,
+    default: '#A3C2CC'
+  }
+}
+
+export default interfaceObj

package/src/l-date-picker/README.md

@@ -0,0 +1,276 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: 'e81d3051-b94b-4cd3-8c99-43ff9a1c86cf'
+  PropagateID: 'e81d3051-b94b-4cd3-8c99-43ff9a1c86cf'
+  ReservedCode1: '7c87bb9a-41bd-48be-8ea7-2585b782da6f'
+  ReservedCode2: '7c87bb9a-41bd-48be-8ea7-2585b782da6f'
+---
+
+# LDatePicker 组件说明
+
+## 概述
+
+`LDatePicker` 是一个参数化驱动的日期选择器组件，基于 Element UI 的 el-date-picker 封装。所有样式（容器样式、输入框样式、占位符文本等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **高度灵活**：支持自定义容器样式、输入框样式、占位符文本等
+- ✅ **类型安全**：支持 String 和 Number 类型的尺寸参数
+- ✅ **多种类型**：支持 date、daterange、month、monthrange、year、week 等类型
+- ✅ **v-bind 样式**：使用 Vue 3 的 v-bind CSS 特性实现样式参数化
+
+## 文件结构
+
+```
+l-date-picker/
+── interface/
+│   └── index.js                # Props 定义（20+ 个参数）
+├── index.vue                   # 主组件（内联样式 + v-bind CSS）
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础数据
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `pickerType` | String | `'daterange'` | 选择器类型：date、daterange、month、monthrange、year、week |
+| `timeValue` | String/Array | `[]` | 绑定值：日期选择器绑定的值（支持 .sync） |
+| `width` | String | `'100%'` | 组件宽度 |
+| `clearable` | Boolean | `true` | 是否可清空 |
+| `disabledFuture` | Boolean | `true` | 是否禁用未来日期 |
+
+### 容器样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `containerHeight` | String/Number | `'30px'` | 容器高度 |
+| `containerBorderRadius` | String | `'20px 20px 20px 0'` | 容器圆角 |
+| `containerBgColor` | String | `'#1F364D'` | 容器背景色 |
+| `containerBorder` | String | `'1px solid #40FF9F'` | 容器边框 |
+
+### Element UI 内部样式相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `inputPaddingLeft` | String/Number | `'20px'` | 输入框左侧内边距 |
+| `inputHeight` | String/Number | `'30px'` | 输入框高度 |
+| `inputPadding` | String | `'0 0 2px 0'` | 输入框内边距 |
+| `inputColor` | String | `'rgba(255, 255, 255, 0.7)'` | 输入框文字颜色 |
+| `inputTextAlign` | String | `'center'` | 输入框文字对齐 |
+| `separatorColor` | String | `'rgba(255, 255, 255, 0.7)'` | 分隔符颜色 |
+| `separatorLineHeight` | String/Number | `'26px'` | 分隔符行高 |
+| `iconLineHeight` | String/Number | `'30px'` | 图标行高 |
+| `inputTopOffset` | String/Number | `'-1px'` | 输入框顶部偏移 |
+
+### 占位符文本相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `datePlaceholder` | String | `'选择日期'` | 单个日期选择器的占位符 |
+| `startPlaceholder` | String | `'开始日期'` | 开始日期占位符 |
+| `endPlaceholder` | String | `'结束日期'` | 结束日期占位符 |
+| `rangeSeparator` | String | `'至'` | 范围分隔符 |
+
+### 图标相关
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `showDateIcon` | Boolean | `false` | 是否显示日期图标 |
+
+## 使用方式
+
+### 基本使用（日期范围）
+
+```vue
+<template>
+  <l-date-picker
+    :timeValue.sync="dateRange"
+    pickerType="daterange"
+  />
+</template>
+
+<script>
+import LDatePicker from '@/components/moduleDataNew/l-date-picker/index.vue'
+
+export default {
+  components: {
+    LDatePicker
+  },
+  data() {
+    return {
+      dateRange: ''
+    }
+  }
+}
+</script>
+```
+
+### 月份选择器
+
+```vue
+<template>
+  <l-date-picker
+    :timeValue.sync="monthValue"
+    pickerType="month"
+    width="110px"
+  />
+</template>
+
+<script>
+import LDatePicker from '@/components/moduleDataNew/l-date-picker/index.vue'
+
+export default {
+  components: {
+    LDatePicker
+  },
+  data() {
+    return {
+      monthValue: ''
+    }
+  }
+}
+</script>
+```
+
+### 自定义样式
+
+```vue
+<template>
+  <l-date-picker
+    :timeValue.sync="dateRange"
+    pickerType="daterange"
+    :containerHeight="36"
+    containerBgColor="#2A3F54"
+    containerBorder="1px solid #4CE27E"
+    :containerBorderRadius="'20px'"
+    inputColor="#FFFFFF"
+    separatorColor="#FFFFFF"
+  />
+</template>
+
+<script>
+import LDatePicker from '@/components/moduleDataNew/l-date-picker/index.vue'
+
+export default {
+  components: {
+    LDatePicker
+  },
+  data() {
+    return {
+      dateRange: ''
+    }
+  }
+}
+</script>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-date-picker
+    :timeValue.sync="dateRange"
+    pickerType="daterange"
+    width="150px"
+    :containerHeight="36"
+    containerBgColor="#1E293B"
+    containerBorder="2px solid #4CE27E"
+    :containerBorderRadius="'18px'"
+    :inputPaddingLeft="15"
+    :inputHeight="36"
+    inputColor="#E2E8F0"
+    inputTextAlign="center"
+    separatorColor="#94A3B8"
+    :separatorLineHeight="36"
+    :iconLineHeight="36"
+    startPlaceholder="起始"
+    endPlaceholder="截止"
+    rangeSeparator="-"
+  />
+</template>
+
+<script>
+import LDatePicker from '@/components/moduleDataNew/l-date-picker/index.vue'
+
+export default {
+  components: {
+    LDatePicker
+  },
+  data() {
+    return {
+      dateRange: ''
+    }
+  }
+}
+</script>
+```
+
+## 技术实现
+
+### v-bind CSS 特性
+
+组件使用 Vue 3 的 v-bind CSS 特性将 props 绑定到样式：
+
+```scss
+::v-deep .el-input__inner {
+  height: v-bind(inputHeight);
+  color: v-bind(inputColor);
+  text-align: v-bind(inputTextAlign);
+}
+```
+
+### 容器样式生成
+
+组件通过 computed 属性动态生成容器内联样式：
+
+```javascript
+computed: {
+  containerStyle() {
+    return {
+      width: this.width,
+      height: typeof this.containerHeight === 'number' 
+        ? `${this.containerHeight}px` 
+        : this.containerHeight,
+      borderRadius: this.containerBorderRadius,
+      backgroundColor: this.containerBgColor,
+      border: this.containerBorder
+    }
+  }
+}
+```
+
+## 注意事项
+
+1. **尺寸单位**：Number 类型会自动添加 `px` 单位，String 类型需自行包含单位
+2. **v-bind 特性**：使用 Vue 3 的 v-bind CSS 特性，确保项目支持该特性
+3. **Element UI 依赖**：组件基于 Element UI 的 el-date-picker，需确保已安装 Element UI
+4. **时间值同步**：使用 `:timeValue.sync` 实现双向绑定
+5. **禁用未来日期**：`disabledFuture` 为 true 时，月份选择器会禁用当前月及以后
+6. **占位符定制**：可通过 `startPlaceholder`、`endPlaceholder` 等参数自定义占位符文本
+
+## 适用场景
+
+- ✅ 日期范围选择
+- ✅ 月份选择
+- ✅ 日期选择
+- ✅ 需要自定义样式的日期选择器
+- ✅ 需要与特定主题风格匹配的日期选择器
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `datePicker` 重命名为 `l-date-picker`
+  - 参考 `l-stat-card` 封装结构进行参数化重构
+  - 所有样式配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 支持容器样式、输入框样式、占位符文本等自定义
+  - 使用 v-bind CSS 特性实现样式参数化（类似 Element UI）
+  - 支持多种日期选择类型
+
+> AI生成

package/src/l-date-picker/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="l-date-picker" :style="containerStyle">
+    <el-date-picker
+      v-if="pickerType == 'daterange'"
+      @change="handleChange"
+      :clearable="clearable"
+      format="yyyy-MM-dd"
+      value-format="yyyy-MM-dd"
+      v-model="selectVal"
+      type="daterange"
+      :range-separator="rangeSeparator"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :picker-options="pickerOptions"
+      :style="datePickerStyle">
+    </el-date-picker>
+    <el-date-picker
+      v-else
+      v-model="selectVal"
+      :type="pickerType"
+      @change="handleChange"
+      :clearable="clearable"
+      :format="format"
+      :value-format="valueFormat"
+      :placeholder="datePlaceholder"
+      :range-separator="rangeSeparator"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :picker-options="pickerOptions"
+      :style="datePickerStyle">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+
+export default {
+  name: 'LDatePicker',
+  props: interfaceObj,
+  components: {},
+  data() {
+    const _this = this
+    return {
+      rotate: false,
+      selectVal: '',
+      pickerOptions: {
+        disabledDate(time) {
+          if (!_this.disabledFuture) return false
+          const now = new Date()
+          const currentMonth = new Date(now.getFullYear(), now.getMonth(), 1)
+          return time.getTime() >= currentMonth.getTime()
+        }
+      }
+    }
+  },
+  computed: {
+    // 容器样式
+    containerStyle() {
+      return {
+        width: this.width,
+        height: typeof this.containerHeight === 'number' ? `${this.containerHeight}px` : this.containerHeight,
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        borderRadius: this.containerBorderRadius,
+        backgroundColor: this.containerBgColor,
+        border: this.containerBorder
+      }
+    },
+
+    // DatePicker 样式（用于覆盖 Element UI 默认样式）
+    datePickerStyle() {
+      return {}
+    },
+
+    // 值类型映射
+    valueType() {
+      const valueTypes = {
+        date: 'yyyy-MM-dd',
+        daterange: 'yyyy-MM-dd',
+        month: 'yyyy-MM',
+        monthrange: 'yyyy-MM',
+        year: 'yyyy',
+        week: {
+          format: 'yyyy 第WW周',
+          valueFormat: 'yyyy-MM-dd'
+        }
+      }
+      return valueTypes[this.pickerType]
+    },
+
+    // 格式化字符串
+    format() {
+      return typeof this.valueType === 'object' ? this.valueType.format : this.valueType
+    },
+
+    // 值格式化字符串
+    valueFormat() {
+      return typeof this.valueType === 'object' ? this.valueType.valueFormat : this.valueType
+    },
+
+    // 日期图标显示
+    dateIconDisplay() {
+      return this.showDateIcon ? 'block' : 'none'
+    }
+  },
+  watch: {
+    timeValue: {
+      handler(val) {
+        if (val) {
+          this.selectVal = val
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {},
+  created() {},
+  methods: {
+    handleChange(v) {
+      if (this.pickerType === 'week') {
+        this.weekChange(v)
+      } else {
+        this.$emit('update:timeValue', v)
+        this.$emit('handleChange', v)
+      }
+    },
+    weekChange(val) {
+      // console.log(val, getFurtureDate({ dateVal: val, n: 7 }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-date-picker {
+  // 容器样式通过内联样式控制
+
+  // Element UI 内部样式覆盖
+  ::v-deep .el-range-editor {
+    padding-left: v-bind(inputPaddingLeft) !important;
+  }
+
+  ::v-deep .el-input__inner {
+    width: 100%;
+    height: v-bind(inputHeight);
+    border: none;
+    padding: v-bind(inputPadding);
+    background: none;
+    text-align: v-bind(inputTextAlign);
+    color: v-bind(inputColor);
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: v-bind(iconLineHeight);
+    }
+
+    .el-icon-date {
+      display: v-bind(dateIconDisplay);
+    }
+
+    .el-range-separator {
+      color: v-bind(separatorColor);
+      line-height: v-bind(separatorLineHeight);
+    }
+
+    .el-range-input {
+      color: v-bind(inputColor);
+      background: none;
+      position: relative;
+      top: v-bind(inputTopOffset);
+    }
+  }
+
+  ::v-deep .el-input__prefix {
+    display: none;
+  }
+
+  ::v-deep .el-input__icon {
+    line-height: v-bind(iconLineHeight) !important;
+  }
+}
+</style>

package/src/l-date-picker/interface/index.js

@@ -0,0 +1,128 @@
+const interfaceObj = {
+  // ========== 基础数据 ==========
+  // 选择器类型：date（日期）、daterange（日期范围）、month（月份）、monthrange（月份范围）、year（年份）、week（周）
+  pickerType: {
+    type: String,
+    default: 'daterange'
+  },
+  // 绑定值：日期选择器绑定的值
+  timeValue: {
+    type: [String, Array],
+    default: () => []
+  },
+  // 宽度：组件的宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 是否可清空：是否显示清空按钮
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  // 禁用未来日期：是否禁用未来日期（月份选择器默认禁用当前月及以后）
+  disabledFuture: {
+    type: Boolean,
+    default: true
+  },
+
+  // ========== 容器样式相关 ==========
+  // 容器高度：组件容器的高度
+  containerHeight: {
+    type: [String, Number],
+    default: '30px'
+  },
+  // 容器圆角：组件容器的圆角半径
+  containerBorderRadius: {
+    type: String,
+    default: '20px 20px 20px 0'
+  },
+  // 容器背景色：组件容器的背景颜色
+  containerBgColor: {
+    type: String,
+    default: '#1F364D'
+  },
+  // 容器边框：组件容器的边框样式
+  containerBorder: {
+    type: String,
+    default: '1px solid #40FF9F'
+  },
+
+  // ========== Element UI 内部样式相关 ==========
+  // 输入框内边距左侧：输入框左侧内边距
+  inputPaddingLeft: {
+    type: [String, Number],
+    default: '20px'
+  },
+  // 输入框高度：输入框的高度
+  inputHeight: {
+    type: [String, Number],
+    default: '30px'
+  },
+  // 输入框内边距：输入框的内边距
+  inputPadding: {
+    type: String,
+    default: '0 0 2px 0'
+  },
+  // 输入框文字颜色：输入框内文字的颜色
+  inputColor: {
+    type: String,
+    default: 'rgba(255, 255, 255, 0.7)'
+  },
+  // 输入框文字对齐：输入框内文字的对齐方式
+  inputTextAlign: {
+    type: String,
+    default: 'center'
+  },
+  // 分隔符颜色：日期范围选择器中分隔符的颜色
+  separatorColor: {
+    type: String,
+    default: 'rgba(255, 255, 255, 0.7)'
+  },
+  // 分隔符行高：日期范围选择器中分隔符的行高
+  separatorLineHeight: {
+    type: [String, Number],
+    default: '26px'
+  },
+  // 图标行高：日期选择器图标的行高
+  iconLineHeight: {
+    type: [String, Number],
+    default: '30px'
+  },
+  // 输入框顶部偏移：日期范围输入框的顶部偏移
+  inputTopOffset: {
+    type: [String, Number],
+    default: '-1px'
+  },
+
+  // ========== 占位符文本相关 ==========
+  // 日期占位符：单个日期选择器的占位符文本
+  datePlaceholder: {
+    type: String,
+    default: '选择日期'
+  },
+  // 开始日期占位符：日期范围选择器的开始日期占位符
+  startPlaceholder: {
+    type: String,
+    default: '开始日期'
+  },
+  // 结束日期占位符：日期范围选择器的结束日期占位符
+  endPlaceholder: {
+    type: String,
+    default: '结束日期'
+  },
+  // 范围分隔符：日期范围选择器的范围分隔符
+  rangeSeparator: {
+    type: String,
+    default: '至'
+  },
+
+  // ========== 图标相关 ==========
+  // 是否显示日期图标：是否显示日期选择器的图标
+  showDateIcon: {
+    type: Boolean,
+    default: false
+  }
+}
+
+export default interfaceObj