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": {
+71 -2
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 (
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper content={original.data} side="bottom"> <TooltipWrapper content={original.data} side="bottom">
<span class="block w-full min-w-0 truncate"> <span class="block w-full min-w-0 truncate">
{original.data} {original.data}
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() => copyToClipboard(original.data)}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }
@@ -188,6 +207,8 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
? `${original.videoId}: ${label}` ? `${original.videoId}: ${label}`
: label; : label;
return ( return (
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper content={tooltipText} side="bottom"> <TooltipWrapper content={tooltipText} side="bottom">
<span class="block w-full min-w-0 truncate cursor-pointer"> <span class="block w-full min-w-0 truncate cursor-pointer">
{original.videoId ? ( {original.videoId ? (
@@ -209,6 +230,31 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
)} )}
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
{showLink ? (
<>
<ContextMenuItem
onClick={() =>
openExternalLink(original.videoUrl)
}
>
<ExternalLink class="size-4" />
{t('common.actions.open_link')}
</ContextMenuItem>
<ContextMenuSeparator />
</>
) : null}
<ContextMenuItem
onClick={() =>
copyToClipboard(original.videoUrl)
}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }
@@ -217,6 +263,8 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.type === 'StringLoad' original.type === 'StringLoad'
) { ) {
return ( return (
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper <TooltipWrapper
content={original.resourceUrl} content={original.resourceUrl}
side="bottom" side="bottom"
@@ -232,6 +280,27 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
</span> </span>
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() =>
openExternalLink(original.resourceUrl)
}
>
<ExternalLink class="size-4" />
{t('common.actions.open_link')}
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem
onClick={() =>
copyToClipboard(original.resourceUrl)
}
>
<Copy class="size-4" />
{t('common.actions.copy')}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
); );
} }