feat: |UI| add forward in mail page (#502)

CHANGELOG.md

@@ -4,6 +4,8 @@
 # main(v0.8.1)
 
 - feat: |Doc| 更新 UI 安装的文档
+- feat: |UI| 对用户隐藏邮箱账号的 ID
+- feat: |UI| 增加邮件详情页的 `转发` 按钮
 
 ## v0.8.0
 

frontend/src/components/MailBox.vue

@@ -3,7 +3,7 @@ import { watch, onMounted, ref, onBeforeUnmount } from "vue";
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-import { CloudDownloadRound, ReplyFilled } from '@vicons/material'
+import { CloudDownloadRound, ReplyFilled, ForwardFilled } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
 import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
 import { utcToLocalDate } from '../utils';
@@ -86,6 +86,7 @@ const { t } = useI18n({
       delete: 'Delete',
       deleteMailTip: 'Are you sure you want to delete mail?',
       reply: 'Reply',
+      forwardMail: 'Forward',
       showTextMail: 'Show Text Mail',
       showHtmlMail: 'Show Html Mail',
       saveToS3: 'Save to S3',
@@ -105,6 +106,7 @@ const { t } = useI18n({
       delete: '删除',
       deleteMailTip: '确定要删除邮件吗?',
       reply: '回复',
+      forwardMail: '转发',
       showTextMail: '显示纯文本邮件',
       showHtmlMail: '显示HTML邮件',
       saveToS3: '保存到S3',
@@ -215,6 +217,15 @@ const replyMail = async () => {
   indexTab.value = 'sendmail';
 };
 
+const forwardMail = async () => {
+  Object.assign(sendMailModel.value, {
+    subject: `${t('forwardMail')}: ${curMail.value.subject}`,
+    contentType: curMail.value.message ? 'html' : 'text',
+    content: curMail.value.message || curMail.value.text,
+  });
+  indexTab.value = 'sendmail';
+};
+
 const onSpiltSizeChange = (size) => {
   mailboxSplitSize.value = size;
 }
@@ -429,6 +440,12 @@ onBeforeUnmount(() => {
                 </template>
                 {{ t('reply') }}
               </n-button>
+              <n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
+                <template #icon>
+                  <n-icon :component="ForwardFilled" />
+                </template>
+                {{ t('forwardMail') }}
+              </n-button>
               <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
                 {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
               </n-button>
@@ -523,6 +540,12 @@ onBeforeUnmount(() => {
                 </template>
                 {{ t('reply') }}
               </n-button>
+              <n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
+                <template #icon>
+                  <n-icon :component="ForwardFilled" />
+                </template>
+                {{ t('forwardMail') }}
+              </n-button>
               <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
                 {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
               </n-button>