微调-调整日期组件

2024-10-22 14:47:25 +08:00
parent 97d6329d82
commit 0d25e477d7
15 changed files with 586 additions and 554 deletions
--- a/frontend/src/components/Grid/components/GridItem.vue
+++ b/frontend/src/components/Grid/components/GridItem.vue
@@ -1,11 +1,10 @@
 <template>
-  <div v-show="isShow" :style="style">
+  <div v-show='isShow' :style='style'>
    <slot></slot>
  </div>
 </template>
-<script setup lang="ts" name="GridItem">
-import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
-import { BreakPoint, Responsive } from "../interface/index";
+<script setup lang='ts' name='GridItem'>
+import { BreakPoint, Responsive } from '../interface/index'

 type Props = {
  offset?: number;
@@ -26,43 +25,43 @@ const props = withDefaults(defineProps<Props>(), {
  sm: undefined,
  md: undefined,
  lg: undefined,
-  xl: undefined
-});
+  xl: undefined,
+})

-const attrs = useAttrs() as { index: string };
-const isShow = ref(true);
+const attrs = useAttrs() as { index: string }
+const isShow = ref(true)

 // 注入断点
-const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
-const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+const breakPoint = inject<Ref<BreakPoint>>('breakPoint', ref('xl'))
+const shouldHiddenIndex = inject<Ref<number>>('shouldHiddenIndex', ref(-1))
 watch(
-    () => [shouldHiddenIndex.value, breakPoint.value],
-    n => {
-      if (!!attrs.index) {
-        isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
-      }
-    },
-    { immediate: true }
-);
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]))
+    }
+  },
+  { immediate: true },
+)

-const gap = inject("gap", 0);
-const cols = inject("cols", ref(4));
+const gap = inject('gap', 0)
+const cols = inject('cols', ref(4))
 const style = computed(() => {
-  let span = props[breakPoint.value]?.span ?? props.span;
-  let offset = props[breakPoint.value]?.offset ?? props.offset;
+  let span = props[breakPoint.value]?.span ?? props.span
+  let offset = props[breakPoint.value]?.offset ?? props.offset
  if (props.suffix) {
    return {
-      gridColumnStart: cols.value - span - offset + 2,
+      gridColumnStart: cols.value - span - offset + 1,
      gridColumnEnd: `span ${span + offset}`,
-      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
-    };
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset',
+    }
  } else {
    return {
-      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset }/span ${
-          span + offset > cols.value ? cols.value : span + offset
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
      }`,
-      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
-    };
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset',
+    }
  }
-});
+})
 </script>
--- a/frontend/src/components/Grid/index.vue
+++ b/frontend/src/components/Grid/index.vue
@@ -1,25 +1,11 @@
 <template>
-  <div :style="style">
+  <div :style='style'>
    <slot></slot>
  </div>
 </template>

-<script setup lang="ts" name="Grid">
-import {
-  ref,
-  watch,
-  useSlots,
-  computed,
-  provide,
-  onBeforeMount,
-  onMounted,
-  onUnmounted,
-  onDeactivated,
-  onActivated,
-  VNodeArrayChildren,
-  VNode
-} from "vue";
-import type { BreakPoint } from "./interface/index";
+<script setup lang='ts' name='Grid'>
+import type { BreakPoint } from './interface/index'

 type Props = {
  cols?: number | Record<BreakPoint, number>;
@@ -32,136 +18,136 @@ const props = withDefaults(defineProps<Props>(), {
  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
  collapsed: false,
  collapsedRows: 1,
-  gap: 0
-});
+  gap: 0,
+})

-onBeforeMount(() => props.collapsed && findIndex());
+onBeforeMount(() => props.collapsed && findIndex())
 onMounted(() => {
-  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
-  window.addEventListener("resize", resize);
-});
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent)
+  window.addEventListener('resize', resize)
+})
 onActivated(() => {
-  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
-  window.addEventListener("resize", resize);
-});
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent)
+  window.addEventListener('resize', resize)
+})
 onUnmounted(() => {
-  window.removeEventListener("resize", resize);
-});
+  window.removeEventListener('resize', resize)
+})
 onDeactivated(() => {
-  window.removeEventListener("resize", resize);
-});
+  window.removeEventListener('resize', resize)
+})

 // 监听屏幕变化
 const resize = (e: UIEvent) => {
-  let width = (e.target as Window).innerWidth;
+  let width = (e.target as Window).innerWidth
  switch (!!width) {
    case width < 768:
-      breakPoint.value = "xs";
-      break;
+      breakPoint.value = 'xs'
+      break
    case width >= 768 && width < 992:
-      breakPoint.value = "sm";
-      break;
+      breakPoint.value = 'sm'
+      break
    case width >= 992 && width < 1200:
-      breakPoint.value = "md";
-      break;
+      breakPoint.value = 'md'
+      break
    case width >= 1200 && width < 1920:
-      breakPoint.value = "lg";
-      break;
+      breakPoint.value = 'lg'
+      break
    case width >= 1920:
-      breakPoint.value = "xl";
-      break;
+      breakPoint.value = 'xl'
+      break
  }
-};
+}

 // 注入 gap 间距
-provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+provide('gap', Array.isArray(props.gap) ? props.gap[0] : props.gap)

 // 注入响应式断点
-let breakPoint = ref<BreakPoint>("xl");
-provide("breakPoint", breakPoint);
+let breakPoint = ref<BreakPoint>('xl')
+provide('breakPoint', breakPoint)

 // 注入要开始折叠的 index
-const hiddenIndex = ref(-1);
-provide("shouldHiddenIndex", hiddenIndex);
+const hiddenIndex = ref(-1)
+provide('shouldHiddenIndex', hiddenIndex)

 // 注入 cols
 const gridCols = computed(() => {
-  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
-  return props.cols;
-});
-provide("cols", gridCols);
+  if (typeof props.cols === 'object') return props.cols[breakPoint.value] ?? props.cols
+  return props.cols
+})
+provide('cols', gridCols)

 // 寻找需要开始折叠的字段 index
-const slots = useSlots().default!();
+const slots = useSlots().default!()

 const findIndex = () => {
-  let fields: VNodeArrayChildren = [];
-  let suffix: VNode | null = null;
+  let fields: VNodeArrayChildren = []
+  let suffix: VNode | null = null
  slots.forEach((slot: any) => {
    // suffix
-    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+    if (typeof slot.type === 'object' && slot.type.name === 'GridItem' && slot.props?.suffix !== undefined) suffix = slot
    // slot children
-    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
-  });
+    if (typeof slot.type === 'symbol' && Array.isArray(slot.children)) fields.push(...slot.children)
+  })

  // 计算 suffix 所占用的列
-  let suffixCols = 0;
+  let suffixCols = 0
  if (suffix) {
    suffixCols =
-        ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
-        ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0)
  }
  try {
-    let find = false;
+    let find = false
    fields.reduce((prev = 0, current, index) => {
      prev +=
-          ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
-          ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
+        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0)
      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
-        hiddenIndex.value = index;
-        find = true;
-        throw "find it";
+        hiddenIndex.value = index
+        find = true
+        throw 'find it'
      }
-      return prev;
-    }, 0);
-    if (!find) hiddenIndex.value = -1;
+      return prev
+    }, 0)
+    if (!find) hiddenIndex.value = -1
  } catch (e) {
    // console.warn(e);
  }
-};
+}

 // 断点变化时执行 findIndex
 watch(
-    () => breakPoint.value,
-    () => {
-      if (props.collapsed) findIndex();
-    }
-);
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex()
+  },
+)

 // 监听 collapsed
 watch(
-    () => props.collapsed,
-    value => {
-      if (value) return findIndex();
-      hiddenIndex.value = -1;
-    }
-);
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex()
+    hiddenIndex.value = -1
+  },
+)

 // 设置间距
 const gridGap = computed(() => {
-  if (typeof props.gap === "number") return `${props.gap}px`;
-  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
-  return "unset";
-});
+  if (typeof props.gap === 'number') return `${props.gap}px`
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`
+  return 'unset'
+})

 // 设置 style
 const style = computed(() => {
  return {
-    display: "grid",
+    display: 'grid',
    gridGap: gridGap.value,
-    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
-  };
-});
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`,
+  }
+})

-defineExpose({ breakPoint });
+defineExpose({ breakPoint })
 </script>