Skip to content

Commit 4aaa45a

Browse files
antfuantfu
committed
fix: improve style
1 parent 4ddf133 commit 4aaa45a

4 files changed

Lines changed: 38 additions & 26 deletions

File tree

‎packages/vite/src/app/components/chart/PluginFlamegraph.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { parseReadablePath } from '~/utils/filepath'
77
import { normalizeTimestamp } from '~/utils/format'
88
import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
99
10+
// TODO: maybe better use SunburstChart instead of Flamegraph?
11+
1012
const props = defineProps<{
1113
session: SessionContext
1214
buildMetrics: RolldownPluginBuildMetrics
@@ -25,6 +27,7 @@ const moduleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.va
2527
2628
const n = (node: TreeNodeInput<PluginBuildInfo>) => normalizeTreeNode(node, undefined, false)
2729
30+
// TODO: We need to sort the graph (so the color will be consistent)
2831
const tree = computed(() => {
2932
const resolveIds = moduleTypes.value.map((type, idx) => n({
3033
id: `resolveId-${type.name}-${idx}`,

‎packages/vite/src/app/components/data/PluginDetailsLoader.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ const totalDuration = computed(() => state.value?.calls?.reduce((arc, item) => a
5959
border="~ base rounded-lg"
6060
flex="~ col gap-2"
6161
>
62-
<DisplayPluginName :name="state?.plugin_name!" />
62+
<div font-mono px1>
63+
<DisplayPluginName :name="state?.plugin_name!" />
64+
</div>
6365
<div text-xs font-mono flex="~ items-center gap-3" ml2>
6466
<DisplayDuration
6567
:duration="hookResolveIdDuration" flex="~ gap-1 items-center"

‎packages/vite/src/app/components/data/PluginDetailsTable.vue‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Menu as VMenu } from 'floating-vue'
66
import { computed, ref } from 'vue'
77
import { settings } from '~~/app/state/settings'
88
import { parseReadablePath } from '~/utils/filepath'
9-
import { normalizeTimestamp } from '~/utils/format'
109
import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
1110
1211
const props = defineProps<{
@@ -116,12 +115,6 @@ function toggleDurationSortType() {
116115
</VMenu>
117116
</button>
118117
</div>
119-
<div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
120-
Start Time
121-
</div>
122-
<div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
123-
End Time
124-
</div>
125118
<div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
126119
<button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
127120
Duration
@@ -130,6 +123,12 @@ function toggleDurationSortType() {
130123
</span>
131124
</button>
132125
</div>
126+
<div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
127+
Start Time
128+
</div>
129+
<div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
130+
End Time
131+
</div>
133132
</div>
134133

135134
<DataVirtualList
@@ -145,27 +144,27 @@ function toggleDurationSortType() {
145144
class="border-base border-b-1 border-dashed"
146145
:class="[index === filtered.length - 1 ? 'border-b-0' : '']"
147146
>
148-
<div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
149-
{{ HOOK_NAME_MAP[item.type] }}
147+
<div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
148+
<DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
150149
</div>
151150
<div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
152151
<DisplayModuleId
153152
:id="item.module"
154-
w-full border-none
153+
w-full border-none ws-nowrap
155154
:session="session"
156155
:link="`/session/${session.id}/graph?module=${item.module}`"
157156
hover="bg-active"
158157
border="~ base rounded" block px2 py1
159158
/>
160159
</div>
160+
<div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
161+
<DisplayDuration :duration="item.duration" />
162+
</div>
161163
<div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
162-
<time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
164+
<DisplayTimestamp :timestamp="item.timestamp_start" />
163165
</div>
164166
<div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
165-
<time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
166-
</div>
167-
<div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
168-
<DisplayDuration :duration="item.duration" />
167+
<DisplayTimestamp :timestamp="item.timestamp_end" />
169168
</div>
170169
</div>
171170
</template>

‎packages/vite/src/app/components/flowmap/PluginFlow.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ const tableFieldFilterRules = [
2424
description: 'Module',
2525
icon: 'i-ph-package-duotone',
2626
},
27+
{
28+
match: /duration/,
29+
name: 'duration',
30+
description: 'Duration',
31+
icon: 'i-ph-clock-countdown-duotone',
32+
},
2733
{
2834
match: /startTime/,
2935
name: 'startTime',
@@ -36,22 +42,24 @@ const tableFieldFilterRules = [
3642
description: 'End Time',
3743
icon: 'i-ph-clock-duotone',
3844
},
39-
{
40-
match: /duration/,
41-
name: 'duration',
42-
description: 'Duration',
43-
icon: 'i-ph-clock-countdown-duotone',
44-
},
4545
]
4646
const searchValue = ref<{ selected: string[] | null, search: false }>({
4747
selected: settings.value.pluginDetailsTableFields,
4848
search: false,
4949
})
5050
51-
const selectedFields = computed(() => settings.value.pluginDetailsTableFields ? settings.value.pluginDetailsTableFields : tableFieldFilterRules.map(rule => rule.name))
52-
const { state: showTypeState, next: _toggleShowType } = useCycleList<ClientSettings['pluginDetailsShowType']>(['changed', 'unchanged', 'all'], {
51+
const selectedFields = computed(() =>
52+
settings.value.pluginDetailsTableFields
53+
? settings.value.pluginDetailsTableFields
54+
: tableFieldFilterRules.map(rule => rule.name))
55+
56+
const {
57+
state: showTypeState,
58+
next: _toggleShowType,
59+
} = useCycleList<ClientSettings['pluginDetailsShowType']>(['changed', 'unchanged', 'all'], {
5360
initialValue: settings.value.pluginDetailsShowType,
5461
})
62+
5563
const showTypeText = computed(() => {
5664
if (showTypeState.value === 'all')
5765
return 'Show Changed'
@@ -97,7 +105,7 @@ function toggleShowType() {
97105
<template #header>
98106
<div px2 h10 border="b base" bg-base rounded-t-2 flex="~ items-center justify-end">
99107
<button w8 h8 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(false)">
100-
<i i-fluent:panel-right-expand-20-regular inline-flex op50 />
108+
<i i-ph-sidebar-simple-duotone inline-flex op50 />
101109
</button>
102110
</div>
103111
</template>
@@ -107,7 +115,7 @@ function toggleShowType() {
107115
<div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
108116
<div flex="~ items-center" h-full>
109117
<button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
110-
<i i-fluent:panel-left-expand-20-regular inline-flex op50 />
118+
<i i-ph-sidebar-duotone inline-flex op50 />
111119
</button>
112120
<DataSearchPanel
113121
v-model="searchValue"

0 commit comments

Comments
 (0)