Skip to content

Commit

Permalink
perf: GapList
Browse files Browse the repository at this point in the history
  • Loading branch information
lisonge committed Jul 20, 2024
1 parent fc60e3c commit 9bfa696
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 8 deletions.
35 changes: 35 additions & 0 deletions src/components/GapList.ts
Original file line number Diff line number Diff line change
@@ -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;
20 changes: 12 additions & 8 deletions src/components/WindowCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -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>
Expand All @@ -130,7 +134,7 @@ const activityId = computed(() => {
</template>
设备名称
</NTooltip>
<div w-1px bg-gray h-12px></div>

<NTooltip>
<template #trigger>
<div
Expand All @@ -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>
Expand Down Expand Up @@ -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)">
Expand All @@ -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())">
Expand All @@ -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)">
Expand All @@ -198,7 +202,7 @@ const activityId = computed(() => {
</template>
应用ID
</NTooltip>
<div w-1px bg-gray h-12px></div>

<NTooltip>
<template #trigger>
<div
Expand All @@ -212,7 +216,7 @@ const activityId = computed(() => {
</template>
界面ID
</NTooltip>
</div>
</GapList>
<div flex-1></div>
<div ml-8px>
<slot></slot>
Expand Down

0 comments on commit 9bfa696

Please sign in to comment.