feat: add some context menu to game log page

This commit is contained in:
pa
2026-03-28 02:03:59 +09:00
parent 91ac716c34
commit 2c3e69a215
2 changed files with 109 additions and 38 deletions
+3 -1
View File
@@ -18,7 +18,9 @@
"view_details": "View Details", "view_details": "View Details",
"configure": "Configure", "configure": "Configure",
"refresh": "Refresh", "refresh": "Refresh",
"cancel": "Cancel" "cancel": "Cancel",
"copy": "Copy",
"open_link": "Open Link"
}, },
"sort_by": "Sort by:", "sort_by": "Sort by:",
"time_units": { "time_units": {
+106 -37
View File
@@ -1,11 +1,18 @@
import Location from '../../components/Location.vue'; import Location from '../../components/Location.vue';
import { Badge } from '../../components/ui/badge'; import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button'; import { Button } from '../../components/ui/button';
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger
} from '../../components/ui/context-menu';
import { TooltipWrapper } from '../../components/ui/tooltip'; import { TooltipWrapper } from '../../components/ui/tooltip';
import { ArrowUpDown, FileText, Trash2, X } from 'lucide-vue-next'; import { ArrowUpDown, Copy, ExternalLink, FileText, Trash2, X } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { formatDateFilter, openExternalLink } from '../../shared/utils'; import { copyToClipboard, formatDateFilter, openExternalLink } from '../../shared/utils';
import { i18n } from '../../plugins'; import { i18n } from '../../plugins';
import { import {
useInstanceStore, useInstanceStore,
@@ -158,11 +165,23 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
if (original.type === 'Event') { if (original.type === 'Event') {
return ( return (
<TooltipWrapper content={original.data} side="bottom"> <ContextMenu>
<span class="block w-full min-w-0 truncate"> <ContextMenuTrigger asChild>
{original.data} <TooltipWrapper content={original.data} side="bottom">
</span> <span class="block w-full min-w-0 truncate">
</TooltipWrapper> {original.data}
</span>
</TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() => copyToClipboard(original.data)}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }
@@ -188,27 +207,54 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
? `${original.videoId}: ${label}` ? `${original.videoId}: ${label}`
: label; : label;
return ( return (
<TooltipWrapper content={tooltipText} side="bottom"> <ContextMenu>
<span class="block w-full min-w-0 truncate cursor-pointer"> <ContextMenuTrigger asChild>
{original.videoId ? ( <TooltipWrapper content={tooltipText} side="bottom">
<span class="mr-1.5"> <span class="block w-full min-w-0 truncate cursor-pointer">
{original.videoId}: {original.videoId ? (
<span class="mr-1.5">
{original.videoId}:
</span>
) : null}
{showLink ? (
<span
class="cursor-pointer"
onClick={() =>
openExternalLink(original.videoUrl)
}
>
{label}
</span>
) : (
<span>{original.videoName}</span>
)}
</span> </span>
) : null} </TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
{showLink ? ( {showLink ? (
<span <>
class="cursor-pointer" <ContextMenuItem
onClick={() => onClick={() =>
openExternalLink(original.videoUrl) openExternalLink(original.videoUrl)
} }
> >
{label} <ExternalLink class="size-4" />
</span> {t('common.actions.open_link')}
) : ( </ContextMenuItem>
<span>{original.videoName}</span> <ContextMenuSeparator />
)} </>
</span> ) : null}
</TooltipWrapper> <ContextMenuItem
onClick={() =>
copyToClipboard(original.videoUrl)
}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }
@@ -217,21 +263,44 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.type === 'StringLoad' original.type === 'StringLoad'
) { ) {
return ( return (
<TooltipWrapper <ContextMenu>
content={original.resourceUrl} <ContextMenuTrigger asChild>
side="bottom" <TooltipWrapper
> content={original.resourceUrl}
<span class="block w-full min-w-0 truncate cursor-pointer"> side="bottom"
<span >
class="cursor-pointer" <span class="block w-full min-w-0 truncate cursor-pointer">
<span
class="cursor-pointer"
onClick={() =>
openExternalLink(original.resourceUrl)
}
>
{original.resourceUrl}
</span>
</span>
</TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() => onClick={() =>
openExternalLink(original.resourceUrl) openExternalLink(original.resourceUrl)
} }
> >
{original.resourceUrl} <ExternalLink class="size-4" />
</span> {t('common.actions.open_link')}
</span> </ContextMenuItem>
</TooltipWrapper> <ContextMenuSeparator />
<ContextMenuItem
onClick={() =>
copyToClipboard(original.resourceUrl)
}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }