Skip to content

Commit 4084771

Browse files
dreamhunter2333dreamhunter2333
authored
feat: |UI| Optimized minimalist mode homepage, added all email page f… (dreamhunter2333#708)
feat: |UI| Optimized minimalist mode homepage, added all email page functions (delete/download/attachments/...)
1 parent 840496c commit 4084771

File tree

13 files changed

+1713
-1520
lines changed

13 files changed

+1713
-1520
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
.DS_Store
12
dist/
23
test/
34
.vscode/

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
22
# CHANGE LOG
33

4+
## main(v1.0.4)
5+
6+
- feat: |UI| 优化极简模式主页, 增加全部邮件页面功能(删除/下载/附件/...), 可在 `外观` 中切换
7+
48
## v1.0.3
59

610
- fix: 修复 github actions 部署问题

‎frontend/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cloudflare_temp_email",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"private": true,
55
"type": "module",
66
"scripts": {
@@ -30,7 +30,7 @@
3030
"naive-ui": "^2.42.0",
3131
"postal-mime": "^2.4.4",
3232
"vooks": "^0.2.12",
33-
"vue": "^3.5.18",
33+
"vue": "^3.5.19",
3434
"vue-clipboard3": "^2.0.0",
3535
"vue-i18n": "^11.1.11",
3636
"vue-router": "^4.5.1"
@@ -42,12 +42,12 @@
4242
"unplugin-auto-import": "^19.3.0",
4343
"unplugin-vue-components": "^28.8.0",
4444
"vite": "^6.3.5",
45-
"vite-plugin-pwa": "^1.0.2",
45+
"vite-plugin-pwa": "^1.0.3",
4646
"vite-plugin-top-level-await": "^1.6.0",
4747
"vite-plugin-wasm": "^3.5.0",
4848
"workbox-build": "^7.3.0",
4949
"workbox-window": "^7.3.0",
50-
"wrangler": "^4.28.1"
50+
"wrangler": "^4.32.0"
5151
},
5252
"packageManager": "[email protected]+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
5353
}

‎frontend/pnpm-lock.yaml‎

Lines changed: 789 additions & 779 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/MailBox.vue‎

Lines changed: 14 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { watch, onMounted, ref, onBeforeUnmount } from "vue";
33
import { useMessage } from 'naive-ui'
44
import { useI18n } from 'vue-i18n'
55
import { useGlobalState } from '../store'
6-
import { CloudDownloadRound, ReplyFilled, ForwardFilled } from '@vicons/material'
6+
import { CloudDownloadRound } from '@vicons/material'
77
import { useIsMobile } from '../utils/composables'
8-
import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
8+
import { processItem } from '../utils/email-parser'
99
import { utcToLocalDate } from '../utils';
10-
import ShadowHtmlComponent from "./ShadowHtmlComponent.vue";
10+
import MailContentRenderer from "./MailContentRenderer.vue";
1111
1212
const message = useMessage()
1313
const isMobile = useIsMobile()
@@ -51,8 +51,8 @@ const props = defineProps({
5151
})
5252
5353
const {
54-
isDark, mailboxSplitSize, indexTab, loading, useUTCDate, autoRefresh, configAutoRefreshInterval,
55-
useIframeShowMail, sendMailModel, preferShowTextMail
54+
isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
55+
autoRefresh, configAutoRefreshInterval, sendMailModel
5656
} = useGlobalState()
5757
const autoRefreshInterval = ref(configAutoRefreshInterval.value)
5858
const data = ref([])
@@ -62,10 +62,7 @@ const count = ref(0)
6262
const page = ref(1)
6363
const pageSize = ref(20)
6464
65-
const showAttachments = ref(false)
66-
const curAttachments = ref([])
6765
const curMail = ref(null);
68-
const showTextMail = ref(preferShowTextMail.value)
6966
7067
const multiActionMode = ref(false)
7168
const showMultiActionDownload = ref(false)
@@ -185,10 +182,6 @@ const clickRow = async (row) => {
185182
curMail.value = row;
186183
};
187184
188-
const getAttachments = (attachments) => {
189-
curAttachments.value = attachments;
190-
showAttachments.value = true;
191-
};
192185
193186
const mailItemClass = (row) => {
194187
return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
@@ -237,14 +230,8 @@ const onSpiltSizeChange = (size) => {
237230
mailboxSplitSize.value = size;
238231
}
239232
240-
const attachmentLoding = ref(false)
241233
const saveToS3Proxy = async (filename, blob) => {
242-
attachmentLoding.value = true
243-
try {
244-
await props.saveToS3(curMail.value.id, filename, blob);
245-
} finally {
246-
attachmentLoding.value = false
247-
}
234+
await props.saveToS3(curMail.value.id, filename, blob);
248235
}
249236
250237
const multiActionModeClick = (enableMulti) => {
@@ -415,57 +402,10 @@ onBeforeUnmount(() => {
415402
<template #2>
416403
<n-card :bordered="false" embedded v-if="curMail" class="mail-item" :title="curMail.subject"
417404
style="overflow: auto; max-height: 100vh;">
418-
<n-space>
419-
<n-tag type="info">
420-
ID: {{ curMail.id }}
421-
</n-tag>
422-
<n-tag type="info">
423-
{{ utcToLocalDate(curMail.created_at, useUTCDate) }}
424-
</n-tag>
425-
<n-tag type="info">
426-
FROM: {{ curMail.source }}
427-
</n-tag>
428-
<n-tag v-if="showEMailTo" type="info">
429-
TO: {{ curMail.address }}
430-
</n-tag>
431-
<n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
432-
<template #trigger>
433-
<n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
434-
</template>
435-
{{ t('deleteMailTip') }}
436-
</n-popconfirm>
437-
<n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
438-
@click="getAttachments(curMail.attachments)">
439-
{{ t('attachments') }}
440-
</n-button>
441-
<n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
442-
:href="getDownloadEmlUrl(curMail.raw)">
443-
<template #icon>
444-
<n-icon :component="CloudDownloadRound" />
445-
</template>
446-
{{ t('downloadMail') }}
447-
</n-button>
448-
<n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
449-
<template #icon>
450-
<n-icon :component="ReplyFilled" />
451-
</template>
452-
{{ t('reply') }}
453-
</n-button>
454-
<n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
455-
<template #icon>
456-
<n-icon :component="ForwardFilled" />
457-
</template>
458-
{{ t('forwardMail') }}
459-
</n-button>
460-
<n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
461-
{{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
462-
</n-button>
463-
</n-space>
464-
<pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
465-
<iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
466-
style="margin-top: 10px;width: 100%; height: 100%;">
467-
</iframe>
468-
<ShadowHtmlComponent v-else :htmlContent="curMail.message" style="margin-top: 10px;" />
405+
<MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
406+
:enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
407+
:onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
408+
:onSaveToS3="saveToS3Proxy" />
469409
</n-card>
470410
<n-card :bordered="false" embedded class="mail-item" v-else>
471411
<n-result status="info" :title="t('pleaseSelectMail')">
@@ -517,89 +457,14 @@ onBeforeUnmount(() => {
517457
style="height: 80vh;">
518458
<n-drawer-content :title="curMail ? curMail.subject : ''" closable>
519459
<n-card :bordered="false" embedded style="overflow: auto;">
520-
<n-space>
521-
<n-tag type="info">
522-
ID: {{ curMail.id }}
523-
</n-tag>
524-
<n-tag type="info">
525-
{{ utcToLocalDate(curMail.created_at, useUTCDate) }}
526-
</n-tag>
527-
<n-tag type="info">
528-
FROM: {{ curMail.source }}
529-
</n-tag>
530-
<n-tag v-if="showEMailTo" type="info">
531-
TO: {{ curMail.address }}
532-
</n-tag>
533-
<n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
534-
<template #trigger>
535-
<n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
536-
</template>
537-
{{ t('deleteMailTip') }}
538-
</n-popconfirm>
539-
<n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
540-
@click="getAttachments(curMail.attachments)">
541-
{{ t('attachments') }}
542-
</n-button>
543-
<n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
544-
:href="getDownloadEmlUrl(curMail)">
545-
<n-icon :component="CloudDownloadRound" />
546-
{{ t('downloadMail') }}
547-
</n-button>
548-
<n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
549-
<template #icon>
550-
<n-icon :component="ReplyFilled" />
551-
</template>
552-
{{ t('reply') }}
553-
</n-button>
554-
<n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
555-
<template #icon>
556-
<n-icon :component="ForwardFilled" />
557-
</template>
558-
{{ t('forwardMail') }}
559-
</n-button>
560-
<n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
561-
{{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
562-
</n-button>
563-
</n-space>
564-
<pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
565-
<iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
566-
style="margin-top: 10px;width: 100%; height: 100%;">
567-
</iframe>
568-
<ShadowHtmlComponent :key="curMail.id" v-else :htmlContent="curMail.message" style="margin-top: 10px;" />
460+
<MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
461+
:enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
462+
:useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail"
463+
:onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
569464
</n-card>
570465
</n-drawer-content>
571466
</n-drawer>
572467
</div>
573-
<n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
574-
<template #header>
575-
<div>{{ t("attachments") }}</div>
576-
</template>
577-
<n-spin v-model:show="attachmentLoding">
578-
<n-list hoverable clickable>
579-
<n-list-item v-for="row in curAttachments" v-bind:key="row.id">
580-
<n-thing class="center" :title="row.filename">
581-
<template #description>
582-
<n-space>
583-
<n-tag type="info">
584-
Size: {{ row.size }}
585-
</n-tag>
586-
<n-button v-if="showSaveS3" @click="saveToS3Proxy(row.filename, row.blob)" ghost type="info"
587-
size="small">
588-
{{ t('saveToS3') }}
589-
</n-button>
590-
</n-space>
591-
</template>
592-
</n-thing>
593-
<template #suffix>
594-
<n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
595-
:href="row.url">
596-
<n-icon :component="CloudDownloadRound" />
597-
</n-button>
598-
</template>
599-
</n-list-item>
600-
</n-list>
601-
</n-spin>
602-
</n-modal>
603468
<n-modal v-model:show="showMultiActionDownload" preset="dialog" :title="t('downloadMail')">
604469
<n-tag type="info">
605470
{{ multiActionDownloadZip.filename }}

0 commit comments

Comments
 (0)