feat(RNodeFlasherPage): add new RNode Flasher page component and update ToolsPage to link to it

This commit is contained in:
2026-01-04 00:04:18 -06:00
parent c4f13e579b
commit d0db79e4e4
2 changed files with 60 additions and 3 deletions

View File

@@ -0,0 +1,47 @@
<template>
<div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden">
<!-- header -->
<div
class="flex items-center px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/50 backdrop-blur-lg z-10 relative"
>
<div class="flex items-center space-x-2">
<v-icon icon="mdi-chip" color="purple" size="24"></v-icon>
<h1 class="text-xl font-black text-gray-900 dark:text-white">{{ $t("tools.rnode_flasher.title") }}</h1>
</div>
<div class="ml-auto flex items-center space-x-2">
<a
href="/rnode-flasher/index.html"
target="_blank"
class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
title="Open in new tab"
>
<MaterialDesignIcon icon-name="open-in-new" class="size-5" />
<span class="hidden sm:inline">Open in new tab</span>
</a>
<button
class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
@click="$router.push({ name: 'tools' })"
>
<MaterialDesignIcon icon-name="close" class="size-5" />
</button>
</div>
</div>
<!-- content -->
<div class="flex-1 min-h-0 relative">
<iframe src="/rnode-flasher/index.html" class="w-full h-full border-0" allow="serial"></iframe>
</div>
</div>
</template>
<script>
import MaterialDesignIcon from "../MaterialDesignIcon.vue";
export default {
name: "RNodeFlasherPage",
components: {
MaterialDesignIcon,
},
};
</script>

View File

@@ -137,7 +137,7 @@
<MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
</RouterLink>
<a target="_blank" href="/rnode-flasher/index.html" class="tool-card glass-card">
<RouterLink :to="{ name: 'rnode-flasher' }" class="tool-card glass-card">
<div
class="tool-card__icon bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-200"
>
@@ -149,8 +149,18 @@
{{ $t("tools.rnode_flasher.description") }}
</div>
</div>
<MaterialDesignIcon icon-name="open-in-new" class="tool-card__chevron" />
</a>
<div class="flex items-center gap-2">
<a
href="/rnode-flasher/index.html"
target="_blank"
class="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-gray-400 hover:text-blue-500"
@click.stop
>
<MaterialDesignIcon icon-name="open-in-new" class="size-5" />
</a>
<MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
</div>
</RouterLink>
<RouterLink :to="{ name: 'debug-logs' }" class="tool-card glass-card border-dashed border-2">
<div class="tool-card__icon bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">