feat: ui (#79)

frontend/src/views/Content.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { NSpace, NAlert, NSwitch, NCard, NInput, NInputGroupLabel } from 'naive-ui'
 import { NButton, NLayout, NInputGroup, NModal, NSelect, NPagination } from 'naive-ui'
-import { NList, NListItem, NThing, NTag, NIcon } from 'naive-ui'
+import { NList, NListItem, NThing, NTag, NIcon, NSplit } from 'naive-ui'
+import { NDrawer, NDrawerContent } from 'naive-ui'
 import { watch, onMounted, ref } from "vue";
 import useClipboard from 'vue-clipboard3'
 import { useMessage } from 'naive-ui'
@@ -9,9 +10,11 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
 import { api } from '../api'
 import { CloudDownloadRound } from '@vicons/material'
+import { useIsMobile } from '../utils/composables'
 
 const { toClipboard } = useClipboard()
 const message = useMessage()
+const isMobile = useIsMobile()
 
 const { jwt, settings, openSettings } = useGlobalState()
 const autoRefresh = ref(false)
@@ -47,6 +50,7 @@ const { t } = useI18n({
       password: 'Password',
       passwordTip: 'Please copy the password and you can use it to login to your email account.',
       attachments: 'Show Attachments',
+      pleaseSelectMail: "Please select a mail to view."
     },
     zh: {
       yourAddress: '你的邮箱地址是',
@@ -63,6 +67,7 @@ const { t } = useI18n({
       password: '密码',
       passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
       attachments: '查看附件',
+      pleaseSelectMail: "请选择一封邮件查看。"
     }
   }
 });
@@ -134,6 +139,11 @@ const newEmail = async () => {
   }
 };
 
+const curMail = ref(null);
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
 const getAttachments = async (attachment_id) => {
   try {
     const res = await api.fetch(
@@ -173,56 +183,127 @@ onMounted(async () => {
       <n-alert :type='settings.address ? "info" : "warning"' show-icon>
         <span v-if="settings.address">
           {{ t('yourAddress') }} <b>{{ settings.address }}</b>
+          <n-button size="small" class="center" @click="showPassword = true" tertiary round type="primary">
+            {{ t('showPassword') }}
+          </n-button>
           <n-button @click="copy" size="small" tertiary round type="primary">
             {{ t('copy') }}
           </n-button>
         </span>
         <span v-else>
           {{ t('pleaseGetNewEmail') }}
+          <n-button class="center" @click="showNewEmail = true" tertiary round type="primary">
+            {{ t('getNewEmail') }}
+          </n-button>
         </span>
       </n-alert>
-      <n-button v-if="settings.address" class="center" @click="showPassword = true" tertiary round type="primary">
-        {{ t('showPassword') }}
-      </n-button>
-      <n-button v-else class="center" @click="showNewEmail = true" tertiary round type="primary">
-        {{ t('getNewEmail') }}
-      </n-button>
-      <n-switch v-model:value="autoRefresh">
-        <template #checked>
-          {{ t('autoRefresh') }}
+      <n-split v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" default-size="0.25">
+        <template #1>
+          <div>
+            <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+              <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+            </div>
+            <n-switch v-model:value="autoRefresh" size="small">
+              <template #checked>
+                {{ t('autoRefresh') }}
+              </template>
+              <template #unchecked>
+                {{ t('autoRefresh') }}
+              </template></n-switch>
+            <n-button class="center" @click="refresh" size="small" type="primary">
+              {{ t('refresh') }}
+            </n-button>
+          </div>
+          <div style="overflow: scroll; max-height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+                <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <div style="word-break: break-all; font-size: small;">
+                      FROM: {{ row.source }}
+                    </div>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
         </template>
-        <template #unchecked>
-          {{ t('autoRefresh') }}
-        </template></n-switch>
-      <n-button class="center" @click="refresh" round type="primary">
-        {{ t('refresh') }}
-      </n-button>
-      <div>
-        <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple />
+        <template #2>
+          <n-card v-if="curMail" :title="curMail.subject" style="overflow: scroll;">
+            <n-tag type="info">
+              ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+              FROM: {{ curMail.source }}
+            </n-tag>
+            <n-space>
+              <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
+                @click="getAttachments(curMail.attachment_id)">
+                {{ t('attachments') }}
+              </n-button>
+            </n-space>
+            <div v-html="curMail.message" style="max-height: 100vh;"></div>
+          </n-card>
+          <n-card v-else>
+            {{ t('pleaseSelectMail') }}
+          </n-card>
+        </template>
+      </n-split>
+      <div v-else>
+        <div>
+          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+          </div>
+          <n-switch v-model:value="autoRefresh" size="small">
+            <template #checked>
+              {{ t('autoRefresh') }}
+            </template>
+            <template #unchecked>
+              {{ t('autoRefresh') }}
+            </template></n-switch>
+          <n-button class="center" @click="refresh" size="small" type="primary">
+            {{ t('refresh') }}
+          </n-button>
         </div>
-      </div>
-      <n-list hoverable clickable>
-        <n-list-item v-for="row in data" v-bind:key="row.id">
-          <n-thing class="center" :title="row.subject">
-            <template #description>
+        <div id="drawer-target" style="overflow: scroll; max-height: 80vh;">
+          <n-list hoverable clickable>
+            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+              <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                <template #description>
+                  <n-tag type="info">
+                    ID: {{ row.id }}
+                  </n-tag>
+                  <div style="word-break: break-all; font-size: small;">
+                    FROM: {{ row.source }}
+                  </div>
+                </template>
+              </n-thing>
+            </n-list-item>
+          </n-list>
+        </div>
+        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
+          <n-drawer-content :title="curMail.subject" closable>
+            <n-tag type="info">
+              ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+              FROM: {{ curMail.source }}
+            </n-tag>
+            <n-card style="overflow: scroll;">
               <n-space>
-                <n-tag type="info">
-                  FROM: {{ row.source }}
-                </n-tag>
-                <n-tag type="info">
-                  ID: {{ row.id }}
-                </n-tag>
-                <n-button v-if="row.attachment_id" size="small" tertiary type="info"
-                  @click="getAttachments(row.attachment_id)">
+                <n-button v-if="curMail.attachment_id" size="small" tertiary type="info"
+                  @click="getAttachments(curMail.attachment_id)">
                   {{ t('attachments') }}
                 </n-button>
               </n-space>
-            </template>
-            <div v-html="row.message" style="max-height: 400px; overflow: auto; text-align: left;"></div>
-          </n-thing>
-        </n-list-item>
-      </n-list>
+              <div v-html="curMail.message" style="max-height: 100vh;"></div>
+            </n-card>
+          </n-drawer-content>
+        </n-drawer>
+      </div>
     </n-layout>
     <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
       <template #header>
@@ -296,4 +377,9 @@ onMounted(async () => {
   margin-bottom: 10px;
   text-align: center;
 }
+
+.n-split {
+  overflow: scroll;
+  text-align: left;
+}
 </style>