GithubBackup/cloudflare_temp_email
1
0
Fork 0
mirror of https://github.com/dreamhunter2333/cloudflare_temp_email.git synced 2026-09-05 15:38:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: hide mail flags from frontend

Browse Source
This commit is contained in:
dreamhunter2333
2026-08-25 20:59:36 +08:00
parent de8920ccfd
commit b0e801995b
20 changed files with 143 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MailBox.vue
+18 -18
View File
@@ -55,12 +55,12 @@ const props = defineProps({
default: false,
required: false
},
enableMailFlags: {
enableReadStatus: {
type: Boolean,
default: false,
required: false
},
updateMailFlags: {
updateMailReadStatus: {
type: Function,
default: () => { },
required: false
@@ -68,7 +68,7 @@ const props = defineProps({
})
const localFilterKeyword = ref('')
const mailFlagFilter = ref('all')
const readStatusFilter = ref('all')
const {
isDark, mailboxSplitSize, mailListView, mailListPreviewLineClamp, indexTab, loading, useUTCDate,
@@ -106,11 +106,11 @@ const data = computed(() => {
})
const isMailUnread = (mail) => {
return props.enableMailFlags && mail?.mail_flags?.unread === true
return props.enableReadStatus && mail?.unread === true
}
const currentPageHasUnread = computed(() => rawData.value.some(isMailUnread))
const mailFlagFilterOptions = computed(() => [
const readStatusFilterOptions = computed(() => [
{ label: t('allMail'), value: 'all' },
{ label: t('unread'), value: 'unread' },
{ label: t('read'), value: 'read' },
@@ -119,12 +119,12 @@ const mailFlagFilterOptions = computed(() => [
const updateUnreadState = async (mails, action) => {
if (mails.length === 0) return true
try {
const response = await props.updateMailFlags(mails.map(mail => mail.id), 'unread', action)
const response = await props.updateMailReadStatus(mails.map(mail => mail.id), action)
const results = response?.results ?? []
const resultById = new Map(results.map(result => [result.id, result]))
mails.forEach(mail => {
const result = resultById.get(mail.id)
if (result) mail.mail_flags = result.mail_flags
if (result) mail.unread = result.unread
})
return true
} catch (error) {
@@ -133,7 +133,7 @@ const updateUnreadState = async (mails, action) => {
}
}
const markMailsRead = async (mails) => updateUnreadState(mails, 'clear')
const markMailsRead = async (mails) => updateUnreadState(mails, 'read')
const toggleCurrentMailUnread = async () => {
if (!curMail.value) return
@@ -148,7 +148,7 @@ const openMail = async (mail) => {
const markCurrentPageRead = async () => {
if (!await markMailsRead(rawData.value)) return
message.success(t("success"))
if (mailFlagFilter.value === 'unread') await refresh()
if (readStatusFilter.value === 'unread') await refresh()
}
const canGoPrevMail = computed(() => {
@@ -232,14 +232,14 @@ watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
}
})
watch(mailFlagFilter, async () => {
watch(readStatusFilter, async () => {
await backFirstPageAndRefresh()
})
const refresh = async () => {
try {
const { results, count: totalCount } = await props.fetchMailData(
pageSize.value, (page.value - 1) * pageSize.value, mailFlagFilter.value
pageSize.value, (page.value - 1) * pageSize.value, readStatusFilter.value
);
loading.value = true;
rawData.value = await Promise.all(results.map(async (item) => {
@@ -440,10 +440,10 @@ onBeforeUnmount(() => {
<n-button @click="backFirstPageAndRefresh" type="primary" tertiary>
{{ t('refresh') }}
</n-button>
<n-button v-if="enableMailFlags && currentPageHasUnread" @click="markCurrentPageRead" tertiary>
<n-button v-if="enableReadStatus && currentPageHasUnread" @click="markCurrentPageRead" tertiary>
{{ t('markCurrentPageRead') }}
</n-button>
<n-select v-if="enableMailFlags" v-model:value="mailFlagFilter" :options="mailFlagFilterOptions"
<n-select v-if="enableReadStatus" v-model:value="readStatusFilter" :options="readStatusFilterOptions"
style="width: 120px" />
<n-input v-if="showFilterInput" v-model:value="localFilterKeyword"
:placeholder="t('keywordQueryTip')" style="width: 200px; display: flex; align-items: center;"
@@ -528,7 +528,7 @@ onBeforeUnmount(() => {
style="overflow: auto; max-height: 100vh;">
<MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
:enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
:enableMailFlags="enableMailFlags" :onToggleUnread="toggleCurrentMailUnread"
:enableReadStatus="enableReadStatus" :onToggleUnread="toggleCurrentMailUnread"
:onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
</n-card>
<n-card :bordered="false" embedded class="mail-item" v-else>
@@ -600,7 +600,7 @@ onBeforeUnmount(() => {
<n-button @click="backFirstPageAndRefresh" tertiary size="small" type="primary">
{{ t('refresh') }}
</n-button>
<n-button v-if="enableMailFlags && currentPageHasUnread" @click="markCurrentPageRead" tertiary size="small">
<n-button v-if="enableReadStatus && currentPageHasUnread" @click="markCurrentPageRead" tertiary size="small">
{{ t('markCurrentPageRead') }}
</n-button>
</n-space>
@@ -608,8 +608,8 @@ onBeforeUnmount(() => {
<n-input v-model:value="localFilterKeyword"
:placeholder="t('keywordQueryTip')" size="small" clearable />
</div>
<div v-if="enableMailFlags" style="padding: 0 10px; margin-bottom: 10px;">
<n-select v-model:value="mailFlagFilter" :options="mailFlagFilterOptions" size="small" />
<div v-if="enableReadStatus" style="padding: 0 10px; margin-bottom: 10px;">
<n-select v-model:value="readStatusFilter" :options="readStatusFilterOptions" size="small" />
</div>
<div style="overflow: auto; min-height: 60vh; max-height: 100vh;">
<n-list hoverable clickable>
@@ -649,7 +649,7 @@ onBeforeUnmount(() => {
<MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
:enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
:useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
:enableMailFlags="enableMailFlags" :onToggleUnread="toggleCurrentMailUnread"
:enableReadStatus="enableReadStatus" :onToggleUnread="toggleCurrentMailUnread"
:onSaveToS3="saveToS3Proxy" />
</n-card>
</n-drawer-content>
frontend/src/components/MailContentRenderer.vue
+3 -3
View File
@@ -34,7 +34,7 @@ const props = defineProps({
type: Boolean,
default: false
},
enableMailFlags: {
enableReadStatus: {
type: Boolean,
default: false
},
@@ -154,8 +154,8 @@ const handleSaveToS3 = async (filename, blob) => {
{{ t('downloadMail') }}
</n-button>
<n-button v-if="enableMailFlags" size="small" tertiary type="info" @click="onToggleUnread">
{{ mail.mail_flags?.unread ? t('markRead') : t('markUnread') }}
<n-button v-if="enableReadStatus" size="small" tertiary type="info" @click="onToggleUnread">
{{ mail.unread ? t('markRead') : t('markUnread') }}
</n-button>
<n-button v-if="showReply" size="small" tertiary type="info" @click="handleReply">
frontend/src/store/index.js
+1 -1
View File
@@ -24,7 +24,7 @@ export const useGlobalState = createGlobalState(
disableAnonymousUserCreateEmail: false,
disableCustomAddressName: false,
enableUserDeleteEmail: false,
enableMailFlags: false,
enableReadStatus: false,
enableAutoReply: false,
enableIndexAbout: false,
/** @type {string[]} */
frontend/src/views/Index.vue
+6 -6
View File
@@ -32,13 +32,13 @@ const SendMail = defineAsyncComponent(() => {
const { t } = useScopedI18n('views.Index')
const fetchMailData = async (limit, offset, mailFlagFilter = 'all') => {
const fetchMailData = async (limit, offset, readStatus = 'all') => {
if (mailIdQuery.value > 0) {
const singleMail = await api.fetch(`/api/mail/${mailIdQuery.value}`);
if (singleMail) return { results: [singleMail], count: 1 };
return { results: [], count: 0 };
}
const readStatusQuery = mailFlagFilter === 'all' ? '' : `&read_status=${mailFlagFilter}`
const readStatusQuery = readStatus === 'all' ? '' : `&read_status=${readStatus}`
return await api.fetch(
`/api/mails?limit=${limit}&offset=${offset}${readStatusQuery}`
);
@@ -48,10 +48,10 @@ const deleteMail = async (curMailId) => {
await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
};
const updateMailFlags = async (ids, flag, action) => {
return await api.fetch(`/api/mails/flags`, {
const updateMailReadStatus = async (ids, action) => {
return await api.fetch(`/api/mails/read-status`, {
method: 'PATCH',
body: JSON.stringify({ ids, flag, action })
body: JSON.stringify({ ids, action })
});
};
@@ -138,7 +138,7 @@ onMounted(() => {
<MailBox :key="mailBoxKey" :showEMailTo="false" :showReply="openSettings.enableSendMail" :showSaveS3="openSettings.isS3Enabled"
:saveToS3="saveToS3" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
:fetchMailData="fetchMailData" :deleteMail="deleteMail" :showFilterInput="true"
:enableMailFlags="openSettings.enableMailFlags" :updateMailFlags="updateMailFlags" />
:enableReadStatus="openSettings.enableReadStatus" :updateMailReadStatus="updateMailReadStatus" />
</n-tab-pane>
<n-tab-pane v-if="openSettings.enableSendMail" name="sendbox" :tab="t('sendbox')">
<SendBox :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
frontend/src/views/index/SimpleIndex.vue
+8 -9
View File
@@ -50,13 +50,13 @@ const fetchMails = async () => {
totalCount.value = count > 0 ? count : totalCount.value;
const rawMail = results && results.length > 0 ? results[0] : null
currentMail.value = rawMail ? await processItem(rawMail) : null
if (openSettings.value.enableMailFlags && rawMail) {
const response = await api.fetch(`/api/mails/flags`, {
if (openSettings.value.enableReadStatus && rawMail) {
const response = await api.fetch(`/api/mails/read-status`, {
method: 'PATCH',
body: JSON.stringify({ ids: [rawMail.id], flag: 'unread', action: 'clear' })
body: JSON.stringify({ ids: [rawMail.id], action: 'read' })
})
const updatedMail = response.results?.[0]
if (updatedMail) currentMail.value.mail_flags = updatedMail.mail_flags
if (updatedMail) currentMail.value.unread = updatedMail.unread
}
} catch (error) {
console.error('Failed to fetch mails:', error)
@@ -65,18 +65,17 @@ const fetchMails = async () => {
}
const toggleCurrentMailUnread = async () => {
if (!currentMail.value || !openSettings.value.enableMailFlags) return
if (!currentMail.value || !openSettings.value.enableReadStatus) return
try {
const response = await api.fetch(`/api/mails/flags`, {
const response = await api.fetch(`/api/mails/read-status`, {
method: 'PATCH',
body: JSON.stringify({
ids: [currentMail.value.id],
flag: 'unread',
action: 'toggle',
})
})
const updatedMail = response.results?.[0]
if (updatedMail) currentMail.value.mail_flags = updatedMail.mail_flags
if (updatedMail) currentMail.value.unread = updatedMail.unread
} catch (error) {
message.error(error.message || 'error')
}
@@ -246,7 +245,7 @@ onBeforeUnmount(() => {
<div style="margin-top: 16px;">
<MailContentRenderer :mail="currentMail" :showEMailTo="false" :showReply="false"
:enableUserDeleteEmail="openSettings.enableUserDeleteEmail" :showSaveS3="false"
:enableMailFlags="openSettings.enableMailFlags" :onToggleUnread="toggleCurrentMailUnread"
:enableReadStatus="openSettings.enableReadStatus" :onToggleUnread="toggleCurrentMailUnread"
:onDelete="deleteMail" />
</div>
</div>
frontend/src/views/user/UserMailBox.vue
+7 -7
View File
@@ -20,12 +20,12 @@ const queryMail = () => {
mailBoxKey.value = Date.now();
}
const fetchMailData = async (limit, offset, mailFlagFilter = 'all') => {
const fetchMailData = async (limit, offset, readStatus = 'all') => {
return await api.fetch(
`/user_api/mails`
+ `?limit=${limit}`
+ `&offset=${offset}`
+ (mailFlagFilter === 'all' ? '' : `&read_status=${mailFlagFilter}`)
+ (readStatus === 'all' ? '' : `&read_status=${readStatus}`)
+ (addressFilter.value ? `&address=${addressFilter.value}` : '')
);
}
@@ -51,10 +51,10 @@ const deleteMail = async (curMailId) => {
await api.fetch(`/user_api/mails/${curMailId}`, { method: 'DELETE' });
};
const updateMailFlags = async (ids, flag, action) => {
return await api.fetch(`/user_api/mails/flags`, {
const updateMailReadStatus = async (ids, action) => {
return await api.fetch(`/user_api/mails/read-status`, {
method: 'PATCH',
body: JSON.stringify({ ids, flag, action })
body: JSON.stringify({ ids, action })
});
};
@@ -78,7 +78,7 @@ onMounted(() => {
</n-input-group>
<div style="margin-top: 10px;"></div>
<MailBox :key="mailBoxKey" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail" :fetchMailData="fetchMailData"
:deleteMail="deleteMail" :showFilterInput="true" :enableMailFlags="openSettings.enableMailFlags"
:updateMailFlags="updateMailFlags" />
:deleteMail="deleteMail" :showFilterInput="true" :enableReadStatus="openSettings.enableReadStatus"
:updateMailReadStatus="updateMailReadStatus" />
</div>
</template>