mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-04 05:19:12 -04:00
fix: better UI
This commit is contained in:
ShareVB
parent
e86e9212d5
commit
7170450aba
5 changed files with 1026 additions and 1606 deletions
2485
pnpm-lock.yaml
generated
2485
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
|
|||
import xmlHljs from 'highlight.js/lib/languages/xml';
|
||||
import yamlHljs from 'highlight.js/lib/languages/yaml';
|
||||
import iniHljs from 'highlight.js/lib/languages/ini';
|
||||
import bashHljs from 'highlight.js/lib/languages/bash';
|
||||
import markdownHljs from 'highlight.js/lib/languages/markdown';
|
||||
import jsHljs from 'highlight.js/lib/languages/javascript';
|
||||
import cssHljs from 'highlight.js/lib/languages/css';
|
||||
import goHljs from 'highlight.js/lib/languages/go';
|
||||
import csharpHljs from 'highlight.js/lib/languages/csharp';
|
||||
import { Base64 } from 'js-base64';
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -17,12 +24,17 @@ const props = withDefaults(
|
|||
language?: string
|
||||
copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
|
||||
copyMessage?: string
|
||||
wordWrap?: boolean
|
||||
downloadFileName?: string
|
||||
downloadButtonText?: string
|
||||
}>(),
|
||||
{
|
||||
followHeightOf: null,
|
||||
language: 'txt',
|
||||
copyPlacement: 'top-right',
|
||||
copyMessage: 'Copy to clipboard',
|
||||
downloadFileName: '',
|
||||
downloadButtonText: 'Download',
|
||||
},
|
||||
);
|
||||
hljs.registerLanguage('sql', sqlHljs);
|
||||
|
|
@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
|
|||
hljs.registerLanguage('xml', xmlHljs);
|
||||
hljs.registerLanguage('yaml', yamlHljs);
|
||||
hljs.registerLanguage('toml', iniHljs);
|
||||
hljs.registerLanguage('bash', bashHljs);
|
||||
hljs.registerLanguage('markdown', markdownHljs);
|
||||
hljs.registerLanguage('css', cssHljs);
|
||||
hljs.registerLanguage('javascript', jsHljs);
|
||||
hljs.registerLanguage('go', goHljs);
|
||||
hljs.registerLanguage('csharp', csharpHljs);
|
||||
|
||||
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
|
||||
const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
|
||||
const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
|
||||
|
||||
const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
|
||||
const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
|
||||
|
||||
const valueBase64 = computed(() => Base64.encode(value.value));
|
||||
const { download } = useDownloadFileFromBase64(
|
||||
{
|
||||
source: valueBase64,
|
||||
filename: downloadFileName,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
|
|||
:style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
|
||||
>
|
||||
<n-config-provider :hljs="hljs">
|
||||
<n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
|
||||
<n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
|
||||
</n-config-provider>
|
||||
</n-scrollbar>
|
||||
<div absolute right-10px top-10px>
|
||||
<c-tooltip v-if="value" :tooltip="tooltipText" position="left">
|
||||
<div
|
||||
v-if="value && copyPlacement !== 'none'"
|
||||
absolute right-10px
|
||||
:top-10px="copyPlacement === 'top-right' ? '' : 'no'"
|
||||
:bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
|
||||
>
|
||||
<c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
|
||||
<c-button circle important:h-10 important:w-10 @click="copy()">
|
||||
<n-icon size="22" :component="Copy" />
|
||||
</c-button>
|
||||
|
|
@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
|
|||
{{ tooltipText }}
|
||||
</c-button>
|
||||
</div>
|
||||
<div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
|
||||
<c-button secondary @click="download">
|
||||
{{ downloadButtonText }}
|
||||
</c-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
|
||||
import type { Ref } from 'vue';
|
||||
import type { MaybeRef, Ref } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { get } from '@vueuse/core';
|
||||
|
||||
export {
|
||||
getMimeTypeFromBase64,
|
||||
|
|
@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
|
|||
}
|
||||
|
||||
function useDownloadFileFromBase64(
|
||||
{ source, filename, extension, fileMimeType }:
|
||||
{ source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
|
||||
return {
|
||||
download() {
|
||||
downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function useDownloadFileFromBase64Refs(
|
||||
{ source, filename, extension }:
|
||||
{ source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
|
||||
{ source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
|
||||
return {
|
||||
download() {
|
||||
downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
|
||||
downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
|
|||
|
||||
return img;
|
||||
}
|
||||
|
||||
function useDownloadFileFromBase64Refs(
|
||||
{ source, filename, extension }:
|
||||
{ source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
|
||||
return {
|
||||
download() {
|
||||
downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,27 +26,41 @@ const parsedBounce = computed(() => {
|
|||
/>
|
||||
</c-card>
|
||||
|
||||
<c-card v-if="parsedBounce && emailContent" title="Output">
|
||||
<n-p v-if="parsedBounce.email?.bounce" style="color: green">
|
||||
<c-card v-if="parsedBounce && emailContent" title="Output" mb-2>
|
||||
<n-p v-if="parsedBounce.email?.email?.error" style="color: green" mb-2>
|
||||
This mail is a bounce email
|
||||
</n-p>
|
||||
<n-p v-if="!parsedBounce.email?.bounce" style="color: red">
|
||||
<n-p v-if="!parsedBounce.email?.email?.error" style="color: red" mb-2>
|
||||
This mail is NOT a bounce email
|
||||
</n-p>
|
||||
<c-alert v-if="parsedBounce.parsingError">
|
||||
<c-alert v-if="parsedBounce.parsingError" mb-2>
|
||||
{{ parsedBounce.parsingError }}
|
||||
</c-alert>
|
||||
<input-copyable v-if="parsedBounce.email?.recipient" label="Recipient" :value="parsedBounce.email?.recipient" />
|
||||
<input-copyable v-if="parsedBounce.email?.server?.hostname" label="Server (Host)" :value="parsedBounce.email?.server?.hostname" />
|
||||
<input-copyable v-if="parsedBounce.email?.server?.ip" label="Server (IP)" :value="parsedBounce.email?.server?.ip" />
|
||||
<input-copyable v-if="parsedBounce.email?.server?.port" label="Server (Port)" :value="parsedBounce.email?.server?.port" />
|
||||
<input-copyable v-if="parsedBounce.email?.command" label="Recipient" :value="parsedBounce.email?.command" />
|
||||
<c-card v-if="parsedBounce.email?.data" title="Details" mb-2>
|
||||
<input-copyable v-if="parsedBounce.email?.data?.recipient" label="Recipient" :value="parsedBounce.email?.data?.recipient" mb-2 />
|
||||
<div v-if="parsedBounce.email?.email?.error">
|
||||
<c-card title="Error" mb-2>
|
||||
<input-copyable v-if="parsedBounce.email?.data?.command" label="Command" :value="parsedBounce.email?.data?.command" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.code?.basic || parsedBounce.email?.data?.error?.code?.enhanced" label="Code" :value="`${parsedBounce.email?.data?.error?.code?.basic}/${parsedBounce.email?.data?.error?.code?.enhanced}`" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.label" label="Label" :value="parsedBounce.email?.data?.error?.label" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.type" label="Type" :value="parsedBounce.email?.data?.error?.type" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.temporary" label="Temporary" :value="parsedBounce.email?.data?.error?.temporary" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.permanent" label="Permanent" :value="parsedBounce.email?.data?.error?.permanent" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.data?.type" label="Subtype" :value="parsedBounce.email?.data?.error?.data?.type" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.data?.blocked" label="Blocked" :value="parsedBounce.email?.data?.error?.data?.blocked" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.error?.data?.spam" label="Spam" :value="parsedBounce.email?.data?.error?.data?.spam" />
|
||||
</c-card>
|
||||
<c-card v-if="parsedBounce.email?.data?.server?.hostname || parsedBounce.email?.data?.server?.ip" title="Server" mb-2>
|
||||
<input-copyable v-if="parsedBounce.email?.data?.server?.hostname" label="Host" :value="parsedBounce.email?.data?.server?.hostname" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.server?.ip" label="IP" :value="parsedBounce.email?.data?.server?.ip" />
|
||||
<input-copyable v-if="parsedBounce.email?.data?.server?.port" label="Port" :value="parsedBounce.email?.data?.server?.port" />
|
||||
</c-card>
|
||||
<c-card title="Details" mb-2>
|
||||
<textarea-copyable :value="JSON.stringify(parsedBounce.email?.data, null, 2)" />
|
||||
</c-card>
|
||||
<c-card v-if="parsedBounce.email?.email?.error" title="Raw Error" mb-2>
|
||||
<textarea-copyable :value="parsedBounce.email?.email?.error" />
|
||||
<c-card title="Raw Error" mb-2>
|
||||
<textarea-copyable :value="parsedBounce.email?.email?.error" word-wrap />
|
||||
</c-card>
|
||||
</div>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,35 @@ declare module "email-bounce-parser-browser" {
|
|||
export default class EmailBounceParse {
|
||||
read(emailContent: string): {
|
||||
bounce: boolean
|
||||
recipient?: string
|
||||
data: any
|
||||
command: string
|
||||
server?: {
|
||||
hostname: string
|
||||
ip: string
|
||||
port: string
|
||||
}
|
||||
email?: {
|
||||
body?: string
|
||||
intro?: string
|
||||
error?: string
|
||||
}
|
||||
data?: {
|
||||
error?: {
|
||||
code?: {
|
||||
basic?: string
|
||||
enhanced?:string
|
||||
}
|
||||
label?: string
|
||||
type?: string
|
||||
temporary?: boolean
|
||||
permanent?: boolean
|
||||
data?: {
|
||||
type?: string
|
||||
blocked?: boolean
|
||||
spam?: boolean
|
||||
}
|
||||
}
|
||||
recipient?:string
|
||||
server?: {
|
||||
hostname?: string
|
||||
ip?: string
|
||||
port?: string
|
||||
}
|
||||
command?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue