mirror of
https://github.com/fmhy/edit.git
synced 2026-03-11 08:55:38 +00:00
Base64 Dialog (#4751)
* Base64 Dialog * fix light mode with base64 dialog * improve ui * add to dialog message
This commit is contained in:
bread
GitHub
parent
52770da4e1
commit
ecbf7ee6d1
2 changed files with 120 additions and 1 deletions
|
|
@ -1,8 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { useData } from 'vitepress'
|
||||
import { ref, onMounted, onUnmounted, provide, nextTick } from 'vue'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Announcement from './components/Announcement.vue'
|
||||
import Sidebar from './components/SidebarCard.vue'
|
||||
import Base64Dialog from './components/Base64Dialog.vue'
|
||||
import { useTheme } from './themes/themeHandler'
|
||||
|
||||
const { isDark } = useData()
|
||||
|
|
@ -28,7 +30,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
|
|||
)}px at ${x}px ${y}px)`
|
||||
]
|
||||
|
||||
// @ts-expect-error
|
||||
await document.startViewTransition(async () => {
|
||||
isDark.value = !isDark.value
|
||||
// Sync with theme handler
|
||||
|
|
@ -47,6 +48,40 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
|
|||
})
|
||||
|
||||
const { Layout } = DefaultTheme
|
||||
const showBase64Dialog = ref(false)
|
||||
const formattedUrl = ref('')
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
// Check if the clicked element is a link or within a link
|
||||
const target = e.target as HTMLElement
|
||||
const link = target.closest ? target.closest('a') : null
|
||||
|
||||
if (link) {
|
||||
const href = (link as HTMLAnchorElement).href
|
||||
|
||||
if (typeof href === 'string') {
|
||||
if (href.includes('https://rentry.co/FMHYB64') || href.startsWith('https://rentry.co/FMHYB64')) {
|
||||
const dontShow = localStorage.getItem('fmhy-base64-dialog-preference')
|
||||
if (dontShow === 'true') {
|
||||
return // Let the link click proceed normally
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
formattedUrl.value = href
|
||||
showBase64Dialog.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', handleClick, { capture: true })
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', handleClick, { capture: true })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -65,6 +100,7 @@ const { Layout } = DefaultTheme
|
|||
</template>
|
||||
<Content />
|
||||
</Layout>
|
||||
<Base64Dialog :show="showBase64Dialog" :url="formattedUrl" @close="showBase64Dialog = false" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
83
docs/.vitepress/theme/components/Base64Dialog.vue
Normal file
83
docs/.vitepress/theme/components/Base64Dialog.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
url: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
const dontShowAgain = ref(false)
|
||||
|
||||
const close = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const openLink = () => {
|
||||
if (dontShowAgain.value) {
|
||||
localStorage.setItem('fmhy-base64-dialog-preference', 'true')
|
||||
}
|
||||
window.open(props.url, '_blank')
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-show="show" class="fixed inset-0 z-[99999] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click="close">
|
||||
<div
|
||||
class="p-6 rounded-xl shadow-2xl max-w-md w-full"
|
||||
style="background-color: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);"
|
||||
@click.stop
|
||||
>
|
||||
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<div class="i-carbon:information-filled text-primary" />
|
||||
Base64 Encoded Link
|
||||
</h2>
|
||||
<p class="mb-4 text-text-1">
|
||||
The link you clicked leads to a Base64 encoded string.
|
||||
</p>
|
||||
<p class="mb-2 text-text-1">
|
||||
To decode it, you can use:
|
||||
</p>
|
||||
<ul class="list-disc list-inside mb-4 space-y-2 text-text-1">
|
||||
<li>
|
||||
An online tool: <a href="https://www.base64decode.org/" target="_blank" rel="noreferrer" class="text-primary hover:underline font-medium">Base64 Decode</a>
|
||||
</li>
|
||||
<li>
|
||||
A userscript: <a href="https://greasyfork.org/en/scripts/485772-fmhy-base64-auto-decoder" target="_blank" rel="noreferrer" class="text-primary hover:underline font-medium">FMHY Base64 Auto Decoder</a> (using a <a href="/internet-tools#userscripts" target="_blank" class="text-primary hover:underline font-medium">userscript manager</a>)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-6 text-sm text-text-2">
|
||||
For more options: <a href="/text-tools#encode-decode" target="_blank" class="text-primary hover:underline font-medium">Base64 Decoders</a>
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dont-show"
|
||||
v-model="dontShowAgain"
|
||||
class="rounded border-border bg-bg-input text-brand focus:ring-brand"
|
||||
>
|
||||
<label for="dont-show" class="text-sm text-text-1 select-none">Don't show again</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
@click="close"
|
||||
class="px-4 py-2 border border-border rounded-lg hover:bg-bg-input transition-colors font-medium text-text-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="openLink"
|
||||
class="px-4 py-2 border-2 border-brand text-brand bg-[var(--vp-c-bg-alt)] hover:bg-brand hover:text-white rounded-lg transition-colors font-medium"
|
||||
>
|
||||
Open Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
Loading…
Reference in a new issue