enhance(frontend): improve MkTl rendering

This commit is contained in:
syuilo 2025-06-28 19:24:55 +09:00
parent dfbc40f868
commit 012b2a9764
4 changed files with 36 additions and 19 deletions

View File

@ -32,9 +32,12 @@ export type TlEvent<E = any> = {
<script lang="ts" setup generic="T extends unknown">
import { computed } from 'vue';
const props = defineProps<{
const props = withDefaults(defineProps<{
events: TlEvent<T>[];
}>();
groupBy?: 'd' | 'h';
}>(), {
groupBy: 'd',
});
const events = computed(() => {
return props.events.toSorted((a, b) => b.timestamp - a.timestamp);
@ -65,6 +68,7 @@ type TlItem<T> = ({
const items = computed<TlItem<T>[]>(() => {
const results: TlItem<T>[] = [];
for (let i = 0; i < events.value.length; i++) {
const item = events.value[i];
@ -79,25 +83,37 @@ const items = computed<TlItem<T>[]>(() => {
data: item.data,
});
if (
i !== events.value.length - 1 &&
nextDate != null && (
date.getFullYear() !== nextDate.getFullYear() ||
if (i !== events.value.length - 1 && nextDate != null) {
let needsSeparator = false;
if (props.groupBy === 'd') {
needsSeparator = (
date.getFullYear() !== nextDate.getFullYear() ||
date.getMonth() !== nextDate.getMonth() ||
date.getDate() !== nextDate.getDate()
);
} else if (props.groupBy === 'h') {
needsSeparator = (
date.getFullYear() !== nextDate.getFullYear() ||
date.getMonth() !== nextDate.getMonth() ||
date.getDate() !== nextDate.getDate() ||
date.getHours() !== nextDate.getHours()
)
) {
results.push({
id: `date-${item.id}`,
type: 'date',
prev: date,
prevText: getDateText(date),
next: nextDate,
nextText: getDateText(nextDate),
});
);
}
if (needsSeparator) {
results.push({
id: `date-${item.id}`,
type: 'date',
prev: date,
prevText: getDateText(date),
next: nextDate,
nextText: getDateText(nextDate),
});
}
}
}
return results;
});
</script>

View File

@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</div>
<div v-else-if="tab === 'timeline'">
<MkTl :events="timeline">
<MkTl :events="timeline" groupBy="h">
<template #left="{ event }">
<div>
<template v-if="event.type === 'finished'">
@ -162,6 +162,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import JSON5 from 'json5';
import type { TlEvent } from '@/components/MkTl.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
@ -172,7 +173,6 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkTl from '@/components/MkTl.vue';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import type { TlEvent } from '@/components/MkTl.vue';
function msSMH(v: number | null) {
if (v == null) return 'N/A';

View File

@ -157,6 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
timestamp: job.finishedOn ?? job.processedOn ?? job.timestamp,
data: job,
}))"
groupBy="h"
class="_monospace"
>
<template #right="{ event: job }">

View File

@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput>
</div>
<MkTl :events="timeline">
<MkTl :events="timeline" groupBy="d">
<template #left="{ event }">
<div>
<MkAvatar :user="event.user" style="width: 26px; height: 26px;"/>