feat: ✨添加周末

src/components/common/GanttBody.vue

@@ -9,16 +9,18 @@
       </RowVue>
     </template>
 
-    <div
-      v-for="(l, i) in [5, 6, 10, 11]"
-      :key="i"
-      class="xg-gantt-body-date-line weekend"
-      :style="{
-        width: `${ganttColumnWidth}px`,
-        left: `${ganttColumnWidth * l}px`,
-        backgroundColor: '#ccc'
-      }"
-    ></div>
+    <template v-for="(date, i) in ganttHeader.dates">
+      <div
+        v-if="date.isWeekend()"
+        :key="i"
+        class="xg-gantt-body-date-line weekend"
+        :style="{
+          width: `${ganttColumnWidth}px`,
+          left: `${ganttColumnWidth * i}px`,
+          backgroundColor: '#ccc'
+        }"
+      ></div>
+    </template>
 
     <div
       v-if="showToday"
@@ -35,6 +37,7 @@
 </template>
 
 <script lang="ts" setup>
+import useGanttHeader from '@/composables/useGanttHeader';
 import useGanttWidth from '@/composables/useGanttWidth';
 import useInView from '@/composables/useInView';
 import useSlotsBox from '@/composables/useSlotsBox';
@@ -47,6 +50,7 @@ const { bodyHeight } = useStyle();
 const { ganttWidth, ganttColumnWidth } = useGanttWidth();
 const { inView } = useInView();
 const { todayLeft, showToday } = useToday();
+const { ganttHeader } = useGanttHeader();
 </script>
 
 <style lang="scss" scoped>

src/components/slider/index.vue

@@ -87,6 +87,12 @@ onDrag(sliderRef, {
   border-radius: 4px;
   font-size: 12px;
   top: math.div(100% - $h, 2);
+
+  &:hover {
+    filter: brightness(1.2);
+    border: 2px solid #aaa;
+    top: calc(math.div(100% - $h, 2) - 2px);
+  }
 }
 
 .xg-slider.xg-slider-drag {

src/models/param/date.ts

@@ -114,4 +114,13 @@ export class XDate {
   clone() {
     return new XDate(this.date);
   }
+
+  /**
+   * 该日期是否为周末
+   * @returns
+   */
+  isWeekend() {
+    const d = day(this.date).day();
+    return d === 6 || d === 0;
+  }
 }