feat: ✨complete row

src/components/common/GanttBody.vue

@@ -3,18 +3,11 @@
     class="xg-gantt-body"
     :style="{ height: bodyHeight, width: `${ganttWidth}px` }"
   >
-    <div
-      v-for="d in inView"
-      :key="d.uuid"
-      class="xg-gantt-row"
-      :style="{
-        top: `${d.flatIndex * rowHeight}px`,
-        height: `${rowHeight}px`,
-        ...$styleBox.getBorderColor()
-      }"
-    >
-      <component :is="$slotsBox.slider" :data="d" />
-    </div>
+    <template v-for="d in inView" :key="d.uuid">
+      <RowVue :data="d" class="xg-gantt-row">
+        <component :is="$slotsBox.slider" :data="d" />
+      </RowVue>
+    </template>
   </div>
 </template>
 
@@ -23,9 +16,10 @@ import useGanttWidth from '@/composables/useGanttWidth';
 import useInView from '@/composables/useInView';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useStyle from '@/composables/useStyle';
+import RowVue from './Row.vue';
 
 const { $slotsBox } = useSlotsBox();
-const { bodyHeight, $styleBox, rowHeight } = useStyle();
+const { bodyHeight } = useStyle();
 const { ganttWidth } = useGanttWidth();
 const { inView } = useInView();
 </script>
@@ -35,12 +29,12 @@ const { inView } = useInView();
   position: relative;
 
   .xg-gantt-row {
-    width: 100%;
-    background-color: darkkhaki;
-    position: absolute;
-    overflow: hidden;
-    border-bottom: 1px solid;
-    box-sizing: border-box;
+    // width: 100%;
+    // background-color: darkkhaki;
+    // position: absolute;
+    // overflow: hidden;
+    // border-bottom: 1px solid;
+    // box-sizing: border-box;
   }
 }
 </style>

src/components/common/Row.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    :class="[
+      'xg-row',
+      { 'xg-row__hover': $param.hoverId === props.data.uuid },
+      { 'xg-row__select': $param.selectId === props.data.uuid }
+    ]"
+    :style="{
+      top: `${props.data.flatIndex * rowHeight}px`,
+      height: `${rowHeight}px`,
+      ...$styleBox.getBorderColor()
+    }"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+    @click="onClick"
+    @dblclick="onDblClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useParam from '@/composables/useParam';
+import useStyle from '@/composables/useStyle';
+import RowItem from '@/models/data/row';
+
+const props = defineProps<{ data: RowItem }>();
+
+const { rowHeight, $styleBox } = useStyle();
+
+const { $param } = useParam();
+function onEnter() {
+  $param.hoverId = props.data.uuid;
+}
+
+function onLeave() {
+  $param.hoverId = '';
+}
+
+function onClick() {
+  $param.selectId = props.data.uuid;
+}
+
+function onDblClick() {
+  // 抛出 data
+}
+</script>
+
+<style lang="scss" scoped>
+.xg-row {
+  width: 100%;
+  position: absolute;
+  background-color: #fafafa;
+  overflow: hidden;
+  border-bottom: 1px solid;
+  box-sizing: border-box;
+}
+
+.xg-row.xg-row__hover {
+  background-color: #f0f0f0;
+}
+
+.xg-row__select {
+  background-color: #e0e0e0;
+}
+</style>

src/components/common/TableBody.vue

@@ -1,24 +1,17 @@
 <template>
   <div class="xg-table-body" :style="{ height: bodyHeight }">
-    <div
-      v-for="d in inView"
-      :key="d.uuid"
-      class="xg-table-row"
-      :style="{
-        top: `${d.flatIndex * rowHeight}px`,
-        height: `${rowHeight}px`,
-        ...$styleBox.getBorderColor()
-      }"
-    >
-      <template
-        v-for="(c, i) in $slotsBox.cols.filter(
+    <template v-for="d in inView" :key="d.uuid">
+      <RowVue class="xg-table-row" :data="d">
+        <template
+          v-for="(c, i) in $slotsBox.cols.filter(
           v => !isMerge(v.props?.merge, d as any)
-        )"
-        :key="i"
-      >
-        <component :is="c" :data="d" />
-      </template>
-    </div>
+          )"
+          :key="i"
+        >
+          <component :is="c" :data="d" />
+        </template>
+      </RowVue>
+    </template>
   </div>
 
   <div
@@ -33,11 +26,12 @@
 import useInView from '@/composables/useInView';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useStyle from '@/composables/useStyle';
+import RowVue from './Row.vue';
 
 const props = defineProps<{ gap: number }>();
 
 const { $slotsBox, isMerge } = useSlotsBox();
-const { bodyHeight, rowHeight, $styleBox } = useStyle();
+const { bodyHeight } = useStyle();
 const { inView } = useInView();
 </script>
 
@@ -47,12 +41,6 @@ const { inView } = useInView();
   position: relative;
 
   .xg-table-row {
-    width: 100%;
-    position: absolute;
-    background-color: darkkhaki;
-    overflow: hidden;
-    border-bottom: 1px solid;
-    box-sizing: border-box;
   }
 }
 </style>

src/components/container/SyncScrollContainer.vue

@@ -12,8 +12,8 @@
 // This component idea from https://github.com/metawin-m/vue-scroll-sync
 import useBus from '@/composables/useBus';
 import { uuid } from '@/utils/common';
-import useInView from '@/composables/useInView';
 import { onMounted, reactive, ref } from 'vue';
+import useParam from '@/composables/useParam';
 
 const props = defineProps({
   // 按比例滚动
@@ -60,7 +60,7 @@ function scrollFunc(e: any) {
   scrollAction.y = e.target.scrollTop;
 }
 
-const { setTop } = useInView();
+const { $param } = useParam();
 
 function handleScroll(e: any) {
   // 禁用条件
@@ -131,7 +131,7 @@ onMounted(() => {
         ? (paneHeight * data.scrollTop) / scrollTopOffset
         : data.scrollTop;
 
-      setTop(container!.scrollTop);
+      $param.currentTop = container!.scrollTop;
     }
     if (
       !data.disableHorizontal &&

src/components/root/index.vue

@@ -53,8 +53,8 @@ import { getCurrentInstance, onMounted, onUpdated, ref, toRefs } from 'vue';
 import rootProps from './rootProps';
 import useData from '@/composables/useData';
 import useStyle from '@/composables/useStyle';
-import useInView from '@/composables/useInView';
 import { useResizeObserver } from '@vueuse/core';
+import useParam from '@/composables/useParam';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
@@ -79,10 +79,11 @@ onUpdated(getScrollGapSize);
 // #endregion
 
 // #region 得到组件高度，并保存
-const { setRootHeight } = useInView();
+const { $param } = useParam();
 onMounted(() => {
-  setRootHeight(
-    Math.max(ganttRef.value.$el.offsetHeight, ganttRef.value.$el.clientHeight)
+  $param.rootHeight = Math.max(
+    ganttRef.value.$el.offsetHeight,
+    ganttRef.value.$el.clientHeight
   );
 });
 // #endregion

src/composables/useInView.ts

@@ -7,14 +7,6 @@ export default () => {
   const store = useStore();
 
   const currentTop = computed(() => store.$param.currentTop);
-  function setTop(t: number) {
-    store.$param.currentTop = t;
-  }
-
-  const rootHeight = computed(() => store.$param.rootHeight);
-  function setRootHeight(h: number) {
-    store.$param.rootHeight = h;
-  }
 
   const { rowHeight } = useStyle();
 
@@ -29,7 +21,7 @@ export default () => {
 
   // 数据展示最下面的 index
   const bottom = computed(() => {
-    const count = Math.ceil(rootHeight.value / rowHeight.value);
+    const count = Math.ceil(store.$param.rootHeight / rowHeight.value);
     const t = Math.ceil(currentTop.value / rowHeight.value) + count + preload;
     return Math.min(t, store.$data.length);
   });
@@ -57,8 +49,6 @@ export default () => {
   );
 
   return {
-    inView,
-    setRootHeight,
-    setTop
+    inView: inView as RowItem[]
   };
 };

src/composables/useParam.ts

@@ -0,0 +1,9 @@
+import useStore from '@/store';
+
+export default () => {
+  const store = useStore();
+
+  return {
+    $param: store.$param
+  };
+};

src/models/data/row.ts

@@ -2,7 +2,7 @@
  * @Author: JeremyJone
  * @Date: 2021-09-09 15:50:52
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-04-17 15:04:42
+ * @LastEditTime: 2023-04-18 10:35:13
  * @Description: 一条数据类
  */
 
@@ -13,7 +13,7 @@ import { XDate } from '../param/date';
 
 export default class RowItem {
   /**
-   * 当前数据唯一 ID。如果当前 item 内容发生了变化，更新它。
+   * 当前数据唯一 ID
    */
   readonly uuid: string = uuid(12);
 

src/models/param/param.ts

@@ -16,4 +16,22 @@ export default class Param {
   public set rootHeight(v: number) {
     this._rootHeight = v;
   }
+
+  private _hoverId: string = '';
+  public get hoverId(): string {
+    return this._hoverId;
+  }
+
+  public set hoverId(v: string) {
+    this._hoverId = v;
+  }
+
+  private _selectId: string = '';
+  public get selectId(): string {
+    return this._selectId;
+  }
+
+  public set selectId(v: string) {
+    this._selectId = v;
+  }
 }