From 9bfa6969a038c11dcbf2078d77a73c92bcec37f3 Mon Sep 17 00:00:00 2001
From: lisonge <i@songe.li>
Date: Sat, 20 Jul 2024 13:26:26 +0800
Subject: [PATCH] perf: GapList

---
 src/components/GapList.ts     | 35 +++++++++++++++++++++++++++++++++++
 src/components/WindowCard.vue | 20 ++++++++++++--------
 2 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/GapList.ts

diff --git a/src/components/GapList.ts b/src/components/GapList.ts
new file mode 100644
index 0000000..b8845a3
--- /dev/null
+++ b/src/components/GapList.ts
@@ -0,0 +1,35 @@
+import { defineComponent, h, computed, type SlotsType, type VNode } from 'vue';
+
+const emptyArray = [] as [];
+const GapList = defineComponent<
+  { tag?: string; virtual?: boolean },
+  {},
+  string,
+  SlotsType<{
+    default: () => VNode[];
+    gap: (props: { index: number }) => VNode[];
+  }>
+>(
+  (props, ctx) => {
+    const tag = computed(() => props.tag || 'div');
+    return () => {
+      const defaultNodes = ctx.slots.default?.() || emptyArray;
+      const nodes: typeof defaultNodes = [];
+      if (defaultNodes.length > 0) {
+        nodes.push(defaultNodes[0]);
+      }
+      if (defaultNodes.length > 1) {
+        for (let i = 1; i < defaultNodes.length; i++) {
+          const gapNodes = ctx.slots.gap?.({ index: i - 1 }) || emptyArray;
+          nodes.push(...gapNodes);
+          nodes.push(defaultNodes[i]);
+        }
+      }
+      if (props.virtual) return nodes;
+      return h(tag.value, props, nodes);
+    };
+  },
+  { props: ['tag', 'virtual'] },
+);
+
+export default GapList;
diff --git a/src/components/WindowCard.vue b/src/components/WindowCard.vue
index 22ea75c..aa82cae 100644
--- a/src/components/WindowCard.vue
+++ b/src/components/WindowCard.vue
@@ -11,6 +11,7 @@ import type { TreeInst } from 'naive-ui';
 import { NTooltip, NTree, NIcon, NButton } from 'naive-ui';
 import type { HTMLAttributes } from 'vue';
 import { computed, nextTick, shallowRef, watch } from 'vue';
+import GapList from '@/components/GapList';
 
 const props = withDefaults(
   defineProps<{
@@ -103,7 +104,10 @@ const activityId = computed(() => {
 <template>
   <div flex flex-col>
     <div flex items-center px-8px>
-      <div flex flex-wrap items-center gap-8px gkd_code>
+      <GapList flex flex-wrap items-center gap-8px gkd_code>
+        <template #gap="{ index }">
+          <div w-1px bg-gray h-12px v-if="index > 0"></div>
+        </template>
         <a href="/" flex title="首页" mr-4px>
           <NButton text>
             <template #icon>
@@ -130,7 +134,7 @@ const activityId = computed(() => {
           </template>
           设备名称
         </NTooltip>
-        <div w-1px bg-gray h-12px></div>
+
         <NTooltip>
           <template #trigger>
             <div
@@ -143,7 +147,7 @@ const activityId = computed(() => {
           </template>
           GKD 版本
         </NTooltip>
-        <div w-1px bg-gray h-12px></div>
+
         <div flex items-center gap-2px max-w-120px>
           <NTooltip v-if="isSystem">
             <template #trigger>
@@ -171,7 +175,7 @@ const activityId = computed(() => {
             应用名称
           </NTooltip>
         </div>
-        <div w-1px bg-gray h-12px></div>
+
         <NTooltip>
           <template #trigger>
             <div @click="copy(getAppInfo(snapshot).versionName)">
@@ -180,7 +184,7 @@ const activityId = computed(() => {
           </template>
           版本名称
         </NTooltip>
-        <div w-1px bg-gray h-12px></div>
+
         <NTooltip>
           <template #trigger>
             <div @click="copy(getAppInfo(snapshot).versionCode.toString())">
@@ -189,7 +193,7 @@ const activityId = computed(() => {
           </template>
           版本代码
         </NTooltip>
-        <div w-1px bg-gray h-12px></div>
+
         <NTooltip>
           <template #trigger>
             <div @click="copy(snapshot.appId)">
@@ -198,7 +202,7 @@ const activityId = computed(() => {
           </template>
           应用ID
         </NTooltip>
-        <div w-1px bg-gray h-12px></div>
+
         <NTooltip>
           <template #trigger>
             <div
@@ -212,7 +216,7 @@ const activityId = computed(() => {
           </template>
           界面ID
         </NTooltip>
-      </div>
+      </GapList>
       <div flex-1></div>
       <div ml-8px>
         <slot></slot>