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

View File

@@ -18,7 +18,9 @@
"view_details": "View Details",
"configure": "Configure",
"refresh": "Refresh",
"cancel": "Cancel"
"cancel": "Cancel",
"copy": "Copy",
"open_link": "Open Link"
},
"sort_by": "Sort by:",
"time_units": {

View File

@@ -1,11 +1,18 @@
import Location from '../../components/Location.vue';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger
} from '../../components/ui/context-menu';
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 { formatDateFilter, openExternalLink } from '../../shared/utils';
import { copyToClipboard, formatDateFilter, openExternalLink } from '../../shared/utils';
import { i18n } from '../../plugins';
import {
useInstanceStore,
@@ -158,11 +165,23 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
if (original.type === 'Event') {
return (
<TooltipWrapper content={original.data} side="bottom">
<span class="block w-full min-w-0 truncate">
{original.data}
</span>
</TooltipWrapper>
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper content={original.data} side="bottom">
<span class="block w-full min-w-0 truncate">
{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}`
: label;
return (
<TooltipWrapper content={tooltipText} side="bottom">
<span class="block w-full min-w-0 truncate cursor-pointer">
{original.videoId ? (
<span class="mr-1.5">
{original.videoId}:
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper content={tooltipText} side="bottom">
<span class="block w-full min-w-0 truncate cursor-pointer">
{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>
) : null}
</TooltipWrapper>
</ContextMenuTrigger>
<ContextMenuContent>
{showLink ? (
<span
class="cursor-pointer"
onClick={() =>
openExternalLink(original.videoUrl)
}
>
{label}
</span>
) : (
<span>{original.videoName}</span>
)}
</span>
</TooltipWrapper>
<>
<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,21 +263,44 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.type === 'StringLoad'
) {
return (
<TooltipWrapper
content={original.resourceUrl}
side="bottom"
>
<span class="block w-full min-w-0 truncate cursor-pointer">
<span
class="cursor-pointer"
<ContextMenu>
<ContextMenuTrigger asChild>
<TooltipWrapper
content={original.resourceUrl}
side="bottom"
>
<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={() =>
openExternalLink(original.resourceUrl)
}
>
{original.resourceUrl}
</span>
</span>
</TooltipWrapper>
<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>
);
}