npmapps 1.0.6 → 1.0.7

package/app/calendar/customCalendar.vue

@@ -1,327 +0,0 @@
-<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

@@ -1,177 +0,0 @@
-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

@@ -1,116 +0,0 @@
-<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/app/dialogFnJsx/DialogForm.vue

@@ -1,51 +0,0 @@
-<template>
-  <el-form ref="form" :model="formData" label-width="80px">
-    <el-form-item label="名称" prop="name">
-      <el-input 
-        v-model="formData.name"
-        placeholder="请输入名称"
-      />
-    </el-form-item>
-    <el-form-item label="邮箱" prop="email">
-      <el-input
-        v-model="formData.email"
-        placeholder="请输入邮箱"
-      />
-    </el-form-item>
-    <el-form-item label="描述" prop="description">
-      <el-input
-        type="textarea"
-        v-model="formData.description"
-        placeholder="请输入描述"
-        :rows="3"
-      />
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-export default {
-  name: 'DialogForm',
-  data() {
-    return {
-      formData: {
-        name: '',
-        email: '',
-        description: ''
-      }
-    }
-  },
-  methods: {
-    getFormData() {
-      return this.formData
-    },
-    resetForm() {
-      this.formData = {
-        name: '',
-        email: '',
-        description: ''
-      }
-    }
-  }
-}
-</script>