npmapps 1.0.5 → 1.0.6

package/README.md

@@ -3,4 +3,5 @@
 1.0.2 v-fullScreen.browser.text
 1.0.3 ehcarts-3dpie
 1.0.4 EllTable
-1.0.5 dialogFnJsx
+1.0.5 dialogFnJsx
+1.0.6 calendar

package/app/calendar/README.md

@@ -0,0 +1,329 @@
+# Vue 年度日历组件
+
+基于 Element UI Calendar 组件封装的年度日历组件，支持按年份查看所有月份的日历，并具有节假日显示、今日标记等功能。
+
+## 功能特点
+
+- 年度视图：一次性展示全年12个月的日历
+- 节假日标记：支持显示法定节假日和调休工作日
+- 今日标记：突出显示当前日期
+- 日期选择：支持点击选择具体日期
+- 响应式布局：自适应不同屏幕尺寸
+- 优雅动效：悬浮效果和过渡动画
+- 农历日期：支持显示农历日期信息
+- 自定义样式：提供丰富的样式定制选项
+
+## 安装
+
+```bash
+# 确保已安装Element UI
+npm install element-ui --save
+
+# 复制组件到你的项目中
+cp -r calendar/ src/components/
+```
+
+## 使用方法
+
+### 基础用法
+
+最简单的使用方式，仅显示日历并处理日期点击事件：
+
+```vue
+<template>
+  <calendar @date-click="handleDateClick" />
+</template>
+
+<script>
+import calendar from '@/components/calendar/index.vue'
+
+export default {
+  components: {
+    calendar
+  },
+  methods: {
+    handleDateClick(date) {
+      console.log('选择的日期：', date)
+    }
+  }
+}
+</script>
+```
+
+### 自定义节假日
+
+使用自定义节假日数据，实现节假日和调休日的显示：
+
+```vue
+<template>
+  <calendar 
+    :holiday="holidayData"
+    @date-click="handleDateClick"
+  />
+</template>
+
+<script>
+import calendar from '@/components/calendar/index.vue'
+
+export default {
+  components: {
+    calendar
+  },
+  data() {
+    return {
+      holidayData: [
+        {
+          type: 'holiday',
+          name: '元旦',
+          date: '2024-01-01',
+          lunarDate: '腊月十一'
+        },
+        // 更多节假日数据...
+      ]
+    }
+  },
+  methods: {
+    handleDateClick(date) {
+      this.$message.success(`选择的日期：${date.day}`)
+    }
+  }
+}
+</script>
+```
+
+### 高级配置
+
+展示如何使用更多配置选项来自定义日历的行为和外观：
+
+```vue
+<template>
+  <calendar 
+    :holiday="holidayData"
+    :showWorkday="true"
+    :showToday="true"
+    :clickable="true"
+    :isNextOrPrevClick="false"
+    @date-click="handleDateClick"
+  >
+    <template #year-picker>
+      <div class="custom-year-picker">
+        <el-button @click="prevYear">上一年</el-button>
+        <span>{{ currentYear }}年</span>
+        <el-button @click="nextYear">下一年</el-button>
+      </div>
+    </template>
+  </calendar>
+</template>
+
+<script>
+import calendar from '@/components/calendar/index.vue'
+
+export default {
+  components: {
+    calendar
+  },
+  data() {
+    return {
+      currentYear: new Date().getFullYear(),
+      holidayData: []
+    }
+  },
+  methods: {
+    handleDateClick(date) {
+      this.$message.success(`选择的日期：${date.day}`)
+    },
+    prevYear() {
+      this.currentYear--
+    },
+    nextYear() {
+      this.currentYear++
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-year-picker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+</style>
+```
+
+## 组件 API
+
+### Calendar Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| year | 当前显示的年份 | Date | new Date() |
+| holiday | 节假日数据 | Array | [] |
+| showWorkday | 是否显示工作日标记 | Boolean | true |
+| showToday | 是否显示今日标记 | Boolean | true |
+| clickable | 是否允许点击日期 | Boolean | true |
+| isNextOrPrevClick | 是否禁用上下月份日期点击 | Boolean | false |
+
+### Calendar Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| date-click | 点击日期时触发 | data: { day: 'YYYY-MM-DD' } |
+| year-change | 年份变化时触发 | year: Number |
+
+### Calendar Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| year-picker | 自定义年份选择器 |
+| date-cell | 自定义日期单元格内容 |
+
+### 节假日数据格式
+
+```javascript
+{
+  type: 'holiday',      // 类型：holiday-节假日，workday-调休工作日
+  name: '春节',         // 节日名称
+  date: '2024-02-10',   // 日期，格式：YYYY-MM-DD
+  lunarDate: '正月初一'  // 农历日期（可选）
+}
+```
+
+## 样式定制
+
+### 基础样式覆盖
+
+```css
+/* 日历容器 */
+.calendar-container {
+  padding: 20px;
+  background: #fff;
+}
+
+/* 年份选择器 */
+.year-picker {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* 月份网格 */
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 500px));
+  gap: 50px;
+  justify-content: center;
+}
+
+/* 单个月份容器 */
+.calendar-item {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+/* 日期单元格 */
+.calendar-cell {
+  height: 100%;
+  padding: 8px;
+  cursor: pointer;
+}
+
+/* 今日标记 */
+.today-mark {
+  background-color: #409EFF;
+  color: #fff;
+  border-radius: 50%;
+  padding: 2px;
+}
+
+/* 节假日信息 */
+.holiday-info {
+  font-size: 12px;
+  color: #E6A23C;
+}
+```
+
+### 主题定制
+
+可以通过修改CSS变量来快速更改主题色：
+
+```css
+:root {
+  --calendar-primary-color: #409EFF;
+  --calendar-holiday-color: #E6A23C;
+  --calendar-workday-color: #67C23A;
+  --calendar-text-color: #303133;
+  --calendar-border-radius: 8px;
+  --calendar-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+```
+
+## 注意事项
+
+1. 确保项目中已正确安装并配置 Element UI
+2. 节假日数据需要按照指定格式提供，建议使用专门的节假日API或数据服务
+3. 组件使用响应式布局，会根据屏幕尺寸自动调整显示方式
+4. 如需禁用某些日期的选择，可以通过传入disabledDate函数来实现
+5. 农历日期显示为可选功能，需要额外的农历转换库支持
+
+## 常见问题
+
+### Q: 如何禁用特定日期？
+
+```vue
+<template>
+  <calendar :disabled-date="disabledDate" />
+</template>
+
+<script>
+export default {
+  methods: {
+    disabledDate(date) {
+      return date.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
+    }
+  }
+}
+</script>
+```
+
+### Q: 如何自定义日期单元格的内容？
+
+```vue
+<template>
+  <calendar>
+    <template #date-cell="{ date, data }">
+      <div class="custom-cell">
+        <span>{{ data.day.split('-')[2] }}</span>
+        <small>{{ getCustomContent(date) }}</small>
+      </div>
+    </template>
+  </calendar>
+</template>
+```
+
+### Q: 如何添加自定义事件标记？
+
+```vue
+<template>
+  <calendar :events="eventList" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      eventList: [
+        {
+          date: '2024-01-15',
+          type: 'meeting',
+          content: '项目会议'
+        }
+      ]
+    }
+  }
+}
+</script>
+```

package/app/calendar/customCalendar.vue

@@ -0,0 +1,327 @@
+<template>
+  <el-calendar
+    v-model="value"
+    :class="[
+      { 'hide-button-group': !showButtonGroup },
+      { 'next-or-prev-click': !isNextOrPrevClick },
+    ]"
+    :first-day-of-week="7"
+  >
+    <template slot="dateCell" slot-scope="{ date, data }">
+      <div
+        :class="[
+          'calendar-cell',
+          handleClass(date, data),
+          { selected: isSelected(data.day) },
+        ]"
+        @click="handleDateClick(data)"
+      >
+        <div class="date">
+          {{ parseInt(data.day.split("-")[2]) }}
+          <span v-if="isToday(data.day)" class="today-mark">今</span>
+        </div>
+        <div class="holiday-info">{{ getHolidayInfo(data.day) }}</div>
+      </div>
+    </template>
+  </el-calendar>
+</template>
+
+<script>
+/**
+ * @description 自定义日历组件，基于Element UI的Calendar组件封装
+ * 支持节假日显示、今日标记、日期选择等功能
+ *
+ * @example
+ * <custom-calendar
+ *   :date="new Date()"
+ *   :holiday="holidayList"
+ *   @date-click="handleDateClick"
+ * />
+ */
+export default {
+  data() {
+    return {
+      value: this.date,
+      selectedDate: null,
+    };
+  },
+  props: {
+    /**
+     * 日历当前显示的日期
+     * @type {Date}
+     * @default new Date()
+     */
+    date: {
+      type: Date,
+      default: () => new Date(),
+    },
+    /**
+     * 是否显示日历顶部的按钮组（上个月、下个月等）
+     * @type {Boolean}
+     * @default true
+     */
+    showButtonGroup: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 是否显示工作日标记
+     * @type {Boolean}
+     * @default true
+     */
+    showWorkday: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 节假日数据数组
+     * @type {Array<{date: string, type: string, name: string, lunarDate: string}>}
+     * @default []
+     */
+    holiday: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 是否允许点击日期
+     * @type {Boolean}
+     * @default true
+     */
+    clickable: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 是否显示今日标记
+     * @type {Boolean}
+     * @default true
+     */
+    showToday: {
+      type: Boolean,
+      default: true,
+    },
+
+    isNextOrPrevClick: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    /**
+     * 处理日期单元格的样式类
+     * @param {Date} date - 日期对象
+     * @param {Object} data - 日期数据对象
+     * @returns {string} 样式类名
+     */
+    handleClass(date, data) {
+      let classes = [];
+      const d = this.holiday.find((item) => item.date === data.day);
+      if (d) {
+        classes.push(d.type);
+      }
+      if (this.showToday && this.isToday(data.day)) {
+        classes.push("is-today");
+      }
+      return classes.join(" ");
+    },
+    /**
+     * 获取农历日期
+     * @param {string} day - 日期字符串 (YYYY-MM-DD)
+     * @returns {string} 农历日期
+     */
+    getLunarDate(day) {
+      const d = this.holiday.find((item) => item.date === day);
+      return d ? d.lunarDate : "";
+    },
+    /**
+     * 获取节假日信息
+     * @param {string} day - 日期字符串 (YYYY-MM-DD)
+     * @returns {string} 节假日名称或工作日标记
+     */
+    getHolidayInfo(day) {
+      const d = this.holiday.find((item) => item.date === day);
+      if (d) {
+        return d.name;
+      }
+      return this.showWorkday ? "班" : "";
+    },
+    /**
+     * 处理日期点击事件
+     * @param {string} day - 日期字符串 (YYYY-MM-DD)
+     * @fires date-click
+     */
+    handleDateClick(data) {
+      if (!this.clickable) return;
+      this.selectedDate = data.day;
+      this.$emit("date-click", data);
+    },
+    /**
+     * 判断日期是否被选中
+     * @param {string} day - 日期字符串 (YYYY-MM-DD)
+     * @returns {boolean} 是否选中
+     */
+    isSelected(day) {
+      return this.selectedDate === day;
+    },
+    /**
+     * 判断是否为今天
+     * @param {string} day - 日期字符串 (YYYY-MM-DD)
+     * @returns {boolean} 是否为今天
+     */
+    isToday(day) {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, "0");
+      const date = String(today.getDate()).padStart(2, "0");
+      const todayStr = `${year}-${month}-${date}`;
+      return day === todayStr;
+    },
+  },
+  computed: {},
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.next-or-prev-click :deep(.el-calendar-table__row td.prev) {
+  pointer-events: none;
+}
+.next-or-prev-click :deep(.el-calendar-table__row td.next) {
+  pointer-events: none;
+}
+
+/* 隐藏日历顶部按钮组 */
+.hide-button-group :deep(.el-calendar__button-group) {
+  display: none;
+}
+/* 日历单元格基础样式 */
+:deep(.el-calendar-day) {
+  height: 60px;
+  padding: 2px;
+}
+:deep(.el-calendar-day) /* 日历单元格容器样式 */
+.calendar-cell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 2px !important;
+}
+/* 日期数字样式 */
+.calendar-cell .date {
+  font-size: 16px;
+  font-weight: bold;
+  transition: transform 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+/* 今日标记样式 */
+.calendar-cell .today-mark {
+  font-size: 12px;
+  color: #409eff;
+  font-weight: normal;
+}
+.calendar-cell:hover .date {
+  transform: scale(1.3);
+}
+/* 农历日期样式 */
+.calendar-cell .lunar-date {
+  font-size: 12px;
+  color: #666;
+  transition: transform 0.3s ease;
+}
+.calendar-cell:hover .lunar-date {
+  transform: scale(0.8);
+}
+/* 节假日信息样式 */
+.calendar-cell .holiday-info {
+  font-size: 12px;
+  margin-top: 2px;
+  transition: transform 0.3s ease;
+}
+.calendar-cell:hover .holiday-info {
+  transform: scale(0.8);
+}
+/* 日历单元格容器样式 */
+.calendar-cell {
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  padding: 4px;
+}
+
+/* .calendar-cell:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 1000;
+} */
+
+/* 节假日背景样式 */
+.holiday {
+  background-color: #e7f5ff;
+}
+
+.holiday:hover {
+  background-color: #cce7ff;
+}
+
+/* 周末背景样式 */
+.weekend {
+  background-color: #ebfbee;
+}
+
+.weekend:hover {
+  background-color: #d7f5dc;
+}
+
+/* 选中日期样式 */
+.calendar-cell.selected {
+  background-color: #e7f5ff !important;
+  /* color: white !important; */
+}
+/* .calendar-cell.selected  .holiday-info {
+  transform: scale(0.8);
+}
+
+.calendar-cell.selected .date {
+  transform: scale(1.3);
+}
+
+.calendar-cell.selected .lunar-date {
+  transform: scale(0.8);
+} */
+
+.calendar-cell.selected .holiday-info {
+  /* color: white; */
+}
+
+/* 今日单元格样式 */
+.calendar-cell.is-today {
+  background-color: #f4fce3;
+  /* border: 1px solid #ffa940; */
+}
+
+.calendar-cell.is-today:hover {
+  background-color: #e9fac8;
+}
+
+/* 覆盖Element UI默认的选中样式 */
+:deep(.el-calendar-table td.is-selected) {
+  background-color: transparent;
+  color: inherit;
+}
+</style>

package/app/calendar/data.js

@@ -0,0 +1,177 @@
+export const holiday = [
+  // 春节
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-10',
+    lunarDate: '正月初一'
+  },
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-11',
+    lunarDate: '正月初二'
+  },
+  {
+    type: 'holiday',
+    name: '春节',
+    date: '2024-02-12',
+    lunarDate: '正月初三'
+  },
+  // 清明节
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-04',
+    lunarDate: '二月廿五'
+  },
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-05',
+    lunarDate: '二月廿六'
+  },
+  {
+    type: 'holiday',
+    name: '清明节',
+    date: '2024-04-06',
+    lunarDate: '二月廿七'
+  },
+  // 劳动节
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-01',
+    lunarDate: '三月廿三'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-02',
+    lunarDate: '三月廿四'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-03',
+    lunarDate: '三月廿五'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-04',
+    lunarDate: '三月廿六'
+  },
+  {
+    type: 'holiday',
+    name: '劳动节',
+    date: '2024-05-05',
+    lunarDate: '三月廿七'
+  },
+  // 端午节
+  {
+    type: 'holiday',
+    name: '端午节',
+    date: '2024-06-10',
+    lunarDate: '五月初三'
+  },
+  // 中秋节
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-15',
+    lunarDate: '八月初二'
+  },
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-16',
+    lunarDate: '八月初三'
+  },
+  {
+    type: 'holiday',
+    name: '中秋节',
+    date: '2024-09-17',
+    lunarDate: '八月初四'
+  },
+  // 国庆节
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-01',
+    lunarDate: '八月十八'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-02',
+    lunarDate: '八月十九'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-03',
+    lunarDate: '八月二十'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-04',
+    lunarDate: '八月廿一'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-05',
+    lunarDate: '八月廿二'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-06',
+    lunarDate: '八月廿三'
+  },
+  {
+    type: 'holiday',
+    name: '国庆节',
+    date: '2024-10-07',
+    lunarDate: '八月廿四'
+  },
+  // 普通周末
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-06',
+    lunarDate: '十一月廿五'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-07',
+    lunarDate: '十一月廿六'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-13',
+    lunarDate: '十二月初二'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-14',
+    lunarDate: '十二月初三'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-20',
+    lunarDate: '十二月初九'
+  },
+  {
+    type: 'weekend',
+    name: '周末',
+    date: '2024-01-21',
+    lunarDate: '十二月初十'
+  }
+]

package/app/calendar/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="calendar-container" style="margin-left: 120px;">
+    <div class="control-panel">
+
+    <el-date-picker v-model="year" type="year" placeholder="选择年" class="year-picker">
+    </el-date-picker>
+      <el-switch v-model="showButtonGroup" active-text="显示按钮组" inactive-text="隐藏按钮组" class="control-item"></el-switch>
+      <el-switch v-model="showWorkday" active-text="显示工作日" inactive-text="隐藏工作日" class="control-item"></el-switch>
+      <el-switch v-model="clickable" active-text="允许点击" inactive-text="禁止点击" class="control-item"></el-switch>
+      <!-- <el-switch v-model="showToday" active-text="显示今日标记" inactive-text="隐藏今日标记" class="control-item"></el-switch> -->
+      <el-switch v-model="isNextOrPrevClick" active-text="隔月点击时间" inactive-text="不可隔月点击时间" class="control-item"></el-switch>
+    </div>
+    <div :key="year+''" class="calendar-grid">
+      <div v-for="(item, index) in calendarDate" :key="index" class="calendar-item">
+              <customCalendar 
+                @date-click="dataClick"  
+                :holiday="holiday" 
+                :date="item.date" 
+                :showButtonGroup="showButtonGroup"
+                :showWorkday="showWorkday"
+                :clickable="clickable"
+                :showToday="showToday"
+                :isNextOrPrevClick="isNextOrPrevClick"
+              />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar-container {
+  padding: 20px;
+}
+
+.year-picker {
+  margin-bottom: 20px;
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.control-item {
+  flex: 1;
+  min-width: 200px;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 440px));
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.calendar-item {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  padding: 15px;
+}
+
+.calendar-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+</style>
+<script>
+import customCalendar from "./customCalendar.vue";
+import {holiday} from "./data";
+export default {
+  components: {
+    customCalendar,
+  },
+  data() {
+    return {
+      year: new Date('2024'),
+      showButtonGroup: false,
+      showWorkday: true,
+      clickable: true,
+      showToday: true,
+      isNextOrPrevClick: false,
+      holiday
+    };
+  },
+  methods: {
+    dataClick(data) {
+      console.log(data, "data");
+      this.$message.success("日期选择成功:" + data.day);
+    }
+  },
+  computed: {
+    calendarDate: function () {
+      const selectedYear = this.year.getFullYear();
+      const list = Array.from({ length: 12 }, (_, index) => {
+        const month = String(index + 1).padStart(2, "0");
+        return {
+          month: month,
+          date: new Date(`${selectedYear}-${month}-01`),
+        };
+      });
+      console.log(list, "list");
+
+      return list;
+    },
+  },
+  mounted() {
+    
+  },
+
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "npmapps",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"