wl-design-mobile 0.7.2 → 0.7.3

package/README.md

@@ -1,6 +1,6 @@
-# wl-design-mobile
-
-## Setup
-```
-npm i wl-design-mobile
-```
+# wl-design-mobile
+
+## Setup
+```
+npm i wl-design-mobile
+```

package/doc/img/styles/css/index.css

@@ -1,3 +1,3 @@
-.img-upload-container {
-    padding: 0px 14px 12px 14px;
-}
+.img-upload-container {
+    padding: 0px 14px 12px 14px;
+}

package/edit/list/styles/css/index.css

@@ -1,39 +1,39 @@
-.coll-div {
-    margin-bottom: 8px;
-}
-
-.indicator-title {
-    display: flex;
-    align-items: center;
-    color: var(--scl-blue);
-    font-size: 14px;
-    font-family: 微软雅黑, serif Regular;
-}
-
-.indicator-title .color-line {
-    width: 3px;
-    height: 14px;
-    margin-right: 8px;
-}
-
-.coll-title-icon {
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-
-/* 覆盖折叠面板的标题的padding */
-/deep/ .van-cell {
-    padding: 12px 10px;
-}
-
-/* 覆盖去掉折叠面板的标题下面的线 */
-/deep/ .van-cell::after {
-    border: none;
-}
-
-/* 覆盖折叠面板的内容的padding */
-/deep/ .van-collapse-item__content {
-    padding: 0px 0px 0px 0px;
-}
-
+.coll-div {
+    margin-bottom: 8px;
+}
+
+.indicator-title {
+    display: flex;
+    align-items: center;
+    color: var(--scl-blue);
+    font-size: 14px;
+    font-family: 微软雅黑, serif Regular;
+}
+
+.indicator-title .color-line {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.coll-title-icon {
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+/* 覆盖折叠面板的标题的padding */
+/deep/ .van-cell {
+    padding: 12px 10px;
+}
+
+/* 覆盖去掉折叠面板的标题下面的线 */
+/deep/ .van-cell::after {
+    border: none;
+}
+
+/* 覆盖折叠面板的内容的padding */
+/deep/ .van-collapse-item__content {
+    padding: 0px 0px 0px 0px;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "",
   "main": "index.js",
   "author": "finch",

package/search/{lambo-week-select.vue → lambo-week-date-select.vue}

@@ -1,61 +1,63 @@
 <template>
-  <div
-      class="week-date-picker"
-      @touchstart="handleTouchStart"
-      @touchmove="handleTouchMove"
-      @touchend="handleTouchEnd"
-      @mousedown="handleMouseDown"
-      @mousemove="handleMouseMove"
-      @mouseup="handleMouseUp"
-      @mouseleave="handleMouseLeave"
-  >
+  <div class="week-date-picker" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
+    @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseLeave">
     <div class="week-days">
-      <div
-          v-for="day in weekDays"
-          :key="day.date.getTime()"
-          class="day-item"
-          :class="{
-          'today': day.isToday,
+      <van-icon name="arrow-left" @click="goPrevWeek" />
+      <div v-for="day in weekDays" :key="day.date.getTime()" class="day-item"
+        :class="{ 
+          'today': day.isToday, 
           'active': day.isSelected,
-        }"
-          @click="selectDay(day)"
-      >
+          'has-data': day.hasData
+        }" 
+        @click="selectDay(day)">
         <div class="day-week">{{ day.weekDay }}</div>
-        <div class="day-month">{{ day.month }}月</div>
+        <div class="day-month">{{ day.year }}-{{ day.month }}</div>
         <div class="day-date">{{ day.date.getDate() }}</div>
-        <div v-if="day.isToday" class="today-dot"></div>
+        <!-- 数据点显示 -->
+        <div v-if="day.hasData" class="data-dot"></div>
       </div>
+      <van-icon name="arrow" @click="goNextWeek" />
     </div>
   </div>
 </template>
 
 <script>
-const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+const WEEK_DAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 
 export default {
-  name: "LamboWeekSelect",
+  name: "LamboWeekDateSelect",
 
   data() {
     return {
-      selectedDate: new Date(),
+      selectedDate_: new Date(),
       weekStart: null,
       startX: 0,
       endX: 0,
       isDragging: false,
       swipeThreshold: 50,
-      clickDisabled: false
+      clickDisabled: false,
+      // 模拟数据存储，实际项目中可能从接口获取
+      dataDates: new Set()
     }
   },
   props: {
-    weekDate: {
+    selectedDate: {
       type: String,
-      default: null
+      default: ""
     },
+    // 新增props：传入有数据的日期列表
+    dataDatesList: {
+      type: Array,
+      default: () => []
+    }
   },
 
   created() {
-    if (this.weekDate) {
-      this.initWithWeekDate(this.weekDate);
+    // 初始化数据日期
+    this.initDataDates();
+    
+    if (this.selectedDate) {
+      this.initWithWeekDate(this.selectedDate);
     } else {
       const today = new Date();
       const todayStr = this.formatDateToYYYYMMDD(today);
@@ -63,25 +65,56 @@ export default {
     }
   },
 
+  watch: {
+    // 监听数据日期列表变化
+    dataDatesList: {
+      handler(newList) {
+        this.initDataDates(newList);
+        // 重新计算weekDays以更新数据点显示
+        this.$forceUpdate();
+      },
+      deep: true
+    }
+  },
+
   computed: {
     weekDays() {
       if (!this.weekStart) return [];
-      return Array.from({length: 7}, (_, i) => {
+      return Array.from({ length: 7 }, (_, i) => {
         const date = new Date(this.weekStart);
         date.setDate(this.weekStart.getDate() + i);
         const today = new Date();
+        const dateStr = this.formatDateToYYYYMMDD(date);
+        
         return {
           date,
+          year: date.getFullYear(),
           month: date.getMonth() + 1,
           weekDay: WEEK_DAYS[date.getDay()],
           isToday: this.isSameDay(date, today),
-          isSelected: this.isSameDay(date, this.selectedDate)
+          isSelected: this.isSameDay(date, this.selectedDate_),
+          hasData: this.dataDates.has(dateStr)
         };
       });
     }
   },
 
   methods: {
+    /**
+     * 初始化数据日期集合
+     * @param {Array} dateList - 日期字符串数组，格式：["20241205", "20241206"]
+     */
+    initDataDates(dateList = null) {
+      const dates = dateList || this.dataDatesList;
+      this.dataDates = new Set();
+      
+      dates.forEach(dateStr => {
+        if (dateStr && typeof dateStr === 'string' && dateStr.length === 8) {
+          this.dataDates.add(dateStr);
+        }
+      })
+    },
+
     /**
      * 根据YYYYMMDD格式的字符串初始化组件
      * @param {string} dateFormat- 格式如："20251205"
@@ -93,12 +126,12 @@ export default {
       if (date) {
         console.log("根据传入日期初始化:", dateFormat);
         this.setWeekStart(date);
-        this.selectedDate = new Date(date);
+        this.selectedDate_ = new Date(date);
       } else {
         console.log("日期解析失败，使用今天");
         const today = new Date();
         this.setWeekStart(today);
-        this.selectedDate = new Date(today);
+        this.selectedDate_ = new Date(today);
       }
     },
 
@@ -121,9 +154,9 @@ export default {
 
         // 验证日期是否有效
         if (isNaN(date.getTime()) ||
-            date.getFullYear() !== year ||
-            date.getMonth() !== month ||
-            date.getDate() !== day) {
+          date.getFullYear() !== year ||
+          date.getMonth() !== month ||
+          date.getDate() !== day) {
           return null;
         }
 
@@ -160,20 +193,22 @@ export default {
         this.clickDisabled = false;
         return;
       }
-      this.selectedDate = new Date(day.date);
-      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate);
+      this.selectedDate_ = new Date(day.date);
+      const clickDate = this.formatDateToYYYYMMDD(this.selectedDate_);
       console.log('选中的日期:', clickDate);
       // 触发自定义事件，传递YYYYMMDD格式的日期
       this.$emit('click', clickDate);
     },
 
     goPrevWeek() {
+      console.log('-- goPrevWeek --')
       const newWeekStart = new Date(this.weekStart);
       newWeekStart.setDate(this.weekStart.getDate() - 7);
       this.setWeekStart(newWeekStart);
     },
 
     goNextWeek() {
+      console.log('-- goNextWeek --')
       const newWeekStart = new Date(this.weekStart);
       newWeekStart.setDate(this.weekStart.getDate() + 7);
       this.setWeekStart(newWeekStart);
@@ -234,6 +269,20 @@ export default {
           this.goNextWeek();
         }
       }
+    },
+    
+    /**
+     * 手动添加/移除数据日期（供外部调用）
+     * @param {string} dateStr - YYYYMMDD格式的日期字符串
+     * @param {boolean} hasData - 是否有数据
+     */
+    setDateHasData(dateStr, hasData = true) {
+      if (hasData) {
+        this.dataDates.add(dateStr);
+      } else {
+        this.dataDates.delete(dateStr);
+      }
+      this.$forceUpdate();
     }
   }
 }
@@ -243,7 +292,7 @@ export default {
 .week-date-picker {
   width: 100%;
   background: white;
-  padding: 16px 0;
+  padding: 10px 0;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   user-select: none;
   border-radius: 8px;
@@ -276,13 +325,22 @@ export default {
   flex-shrink: 0;
 }
 
+/* 今天日期的浅蓝色背景 */
+.day-item.today {
+  background-color: #e6efff;
+}
+
 .day-item:hover {
   background-color: #f5f5f5;
   transform: translateY(-2px);
 }
 
+.day-item.today:hover {
+  background-color: #b0d2f9;
+}
+
 .day-item.active {
-  background-color: #1677ff;
+  background-color: #0070D2;
   box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
   transform: translateY(-2px);
 }
@@ -306,21 +364,76 @@ export default {
 }
 
 .day-date {
-  font-size: 20px;
+  font-size: 17px;
   font-weight: 500;
   color: #333;
 }
 
-.today-dot {
+/* 今天日期的文字颜色 */
+.day-item.today .day-week,
+.day-item.today .day-month,
+.day-item.today .day-date {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+/* 数据点样式 - 统一大小和颜色 */
+.data-dot {
   position: absolute;
   bottom: -4px;
-  width: 4px;
-  height: 4px;
-  background-color: #1677ff;
+  width: 5px;
+  height: 5px;
+  background-color: #129456;
   border-radius: 50%;
+  animation: fadeIn 0.3s ease;
 }
 
-.day-item.active .today-dot {
+/* 选中状态下的数据点 - 统一为白色 */
+.day-item.active .data-dot {
   background-color: white;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 今天且有数据时的特殊样式 */
+.day-item.today.has-data {
+  border: 1px solid #CBE2FB;
+}
+
+/* 移动端优化 */
+@media (max-width: 375px) {
+  .day-item {
+    width: 40px;
+    height: 60px;
+  }
+  
+  .day-date {
+    font-size: 16px;
+  }
+  
+  .day-week {
+    font-size: 11px;
+  }
+  
+  .day-month {
+    font-size: 9px;
+  }
+  
+  .data-dot {
+    width: 4px;
+    height: 4px;
+    bottom: -3px;
+  }
 }
-</style>
+</style>

package/util/assist.js

@@ -1,43 +1,43 @@
-// 深拷贝
-export function deepCopy(data) {
-  let i;
-  const t = typeOf(data);
-  let o;
-
-  if (t === 'array') {
-    o = [];
-  } else if (t === 'object') {
-    o = {};
-  } else {
-    return data;
-  }
-
-  if (t === 'array') {
-    for (i = 0; i < data.length; i++) {
-      o.push(deepCopy(data[i]));
-    }
-  } else if (t === 'object') {
-    for (i in data) {
-      o[i] = deepCopy(data[i]);
-    }
-  }
-  return o;
-}
-
-// 判断对象类型
-export function typeOf(obj) {
-  const toString = Object.prototype.toString;
-  const map = {
-    '[object Boolean]': 'boolean',
-    '[object Number]': 'number',
-    '[object String]': 'string',
-    '[object Function]': 'function',
-    '[object Array]': 'array',
-    '[object Date]': 'date',
-    '[object RegExp]': 'regExp',
-    '[object Undefined]': 'undefined',
-    '[object Null]': 'null',
-    '[object Object]': 'object'
-  };
-  return map[toString.call(obj)];
-}
+// 深拷贝
+export function deepCopy(data) {
+  let i;
+  const t = typeOf(data);
+  let o;
+
+  if (t === 'array') {
+    o = [];
+  } else if (t === 'object') {
+    o = {};
+  } else {
+    return data;
+  }
+
+  if (t === 'array') {
+    for (i = 0; i < data.length; i++) {
+      o.push(deepCopy(data[i]));
+    }
+  } else if (t === 'object') {
+    for (i in data) {
+      o[i] = deepCopy(data[i]);
+    }
+  }
+  return o;
+}
+
+// 判断对象类型
+export function typeOf(obj) {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object'
+  };
+  return map[toString.call(obj)];
+}

package/util/bus.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
-
-const Bus = new Vue();
-export default Bus;
+import Vue from 'vue'
+
+const Bus = new Vue();
+export default Bus;