feat: add admin account search && delete account for user (#96)

* feat: add admin account search && delete account for user * feat: add admin account search && delete account for user
2026-09-04 23:17:34 +08:00 · 2024-04-04 14:30:07 +08:00
parent a19b9a7eb6
commit 9ce706fad1
17 changed files with 902 additions and 458 deletions
@@ -1,12 +1,11 @@
 <script setup>
-import { NMessageProvider, NGrid, NBackTop, NSpin } from 'naive-ui'
-import { NGi, NSpace, NButton, NConfigProvider } from 'naive-ui'
 import { darkTheme, NGlobalStyle } from 'naive-ui'
 import { zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
+import Header from './views/Header.vue';

 const { localeCache, themeSwitch, loading } = useGlobalState()
 const theme = computed(() => themeSwitch.value ? darkTheme : null)
@@ -42,7 +41,10 @@ onMounted(async () => {
          <n-gi v-if="!isMobile" span="1"></n-gi>
          <n-gi :span="isMobile ? 12 : 10">
            <div class="main">
-              <router-view></router-view>
+              <n-space vertical>
+                <Header />
+                <router-view></router-view>
+              </n-space>
            </div>
          </n-gi>
          <n-gi v-if="!isMobile" span="1"></n-gi>
@@ -36,6 +36,11 @@ const apiFetch = async (path, options = {}) => {
        }
        const data = response.data;
        return data;
+    } catch (error) {
+        if (error.response) {
+            throw new Error(`Code ${error.response.status}: ${error.response.data}` || "error");
+        }
+        throw error;
    } finally {
        loading.value = false;
    }
@@ -1,12 +1,8 @@
 <script setup>
-import { NSpace, NLayoutHeader, NInput, NPagination } from 'naive-ui'
-import { NButton, NModal, NTabs, NTabPane, NInputGroup } from 'naive-ui'
-import { NList, NListItem, NThing, NTag } from 'naive-ui'
-import { NDataTable, NPopconfirm } from 'naive-ui'
 import { ref, h, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useMessage } from 'naive-ui'
+import { User, UserCheck, MailBulk } from '@vicons/fa'

 import { useGlobalState } from '../store'
 import { api } from '../api'
@@ -17,6 +13,7 @@ const message = useMessage()

 const showEmailPassword = ref(false)
 const curEmailPassword = ref("")
+const addressQuery = ref("")

 const authFunc = async () => {
  try {
@@ -42,9 +39,15 @@ const { t } = useI18n({
      delete: 'Delete',
      deleteTip: 'Are you sure to delete this email?',
      refresh: 'Refresh',
-      emails: 'Emails',
+      mails: 'Emails',
      itemCount: 'itemCount',
      query: 'Query',
+      userCount: 'User Count',
+      activeUser: '7 days Active User',
+      mailCount: 'Mail Count',
+      account: 'Account',
+      unknow: 'Unknow',
+      addressQueryTip: 'Leave blank to query all addresses',
    },
    zh: {
      title: '临时邮件 Admin',
@@ -59,9 +62,15 @@ const { t } = useI18n({
      delete: '删除',
      deleteTip: '确定要删除这个邮箱吗？',
      refresh: '刷新',
-      emails: '邮件',
+      mails: '邮件',
      itemCount: '总数',
      query: '查询',
+      userCount: '用户总数',
+      activeUser: '周活跃用户',
+      mailCount: '邮件总数',
+      account: '账号',
+      unknow: '未知',
+      addressQueryTip: '留空查询所有地址',
    }
  }
 });
@@ -97,6 +106,7 @@ const fetchData = async () => {
      `/admin/address`
      + `?limit=${pageSize.value}`
      + `&offset=${(page.value - 1) * pageSize.value}`
+      + (addressQuery.value ? `&query=${addressQuery.value}` : "")
    );
    data.value = results;
    if (addressCount > 0) {
@@ -129,6 +139,7 @@ const columns = [
        h(NButton,
          {
            type: 'success',
+            ghost: true,
            onClick: () => showPassword(row.id)
          },
          { default: () => t('showPass') }
@@ -136,12 +147,13 @@ const columns = [
        h(NButton,
          {
            type: 'success',
+            ghost: true,
            onClick: () => {
              mailAddress.value = row.name
              tab.value = "mails"
            }
          },
-          { default: () => t('emails') }
+          { default: () => t('mails') }
        ),
        h(NPopconfirm,
          {
@@ -161,12 +173,30 @@ watch([page, pageSize], async () => {
  await fetchData()
 })

+const statistics = ref({
+  userCount: 0,
+  mailCount: 0,
+  activeUserCount7days: 0,
+})
+
+const fetchStatistics = async () => {
+  try {
+    const { userCount, activeUserCount7days, mailCount } = await api.fetch(`/admin/statistics`);
+    statistics.value.mailCount = mailCount || 0;
+    statistics.value.userCount = userCount || 0;
+    statistics.value.activeUserCount7days = activeUserCount7days || 0;
+  } catch (error) {
+    console.log(error)
+    message.error(error.message || "error");
+  }
+}

 onMounted(async () => {
  if (!adminAuth.value) {
    showAdminAuth.value = true
  } else {
    await fetchData()
+    await fetchStatistics()
  }
 })

@@ -231,47 +261,66 @@ const fetchMailUnknowData = async () => {
 </script>

 <template>
-  <n-space vertical>
-    <n-layout-header>
-      <div>
-        <h2>{{ t('title') }}</h2>
-      </div>
-      <div>
-        <n-button tertiary @click="() => router.push('/')" type="primary">
-          {{ t('home') }}
+  <div>
+    <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
+      title="Dialog">
+      <template #header>
+        <div>{{ t('auth') }}</div>
+      </template>
+      <p>{{ t('authTip') }}</p>
+      <n-input v-model:value="adminAuth" type="textarea" :autosize="{
+      minRows: 3
+    }" />
+      <template #action>
+        <n-button @click="authFunc" size="small" tertiary round type="primary">
+          {{ t('auth') }}
        </n-button>
-      </div>
-      <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
-        title="Dialog">
-        <template #header>
-          <div>{{ t('auth') }}</div>
-        </template>
-        <p>{{ t('authTip') }}</p>
-        <n-input v-model:value="adminAuth" type="textarea" :autosize="{
-          minRows: 3
-        }" />
-        <template #action>
-          <n-button @click="authFunc" size="small" tertiary round type="primary">
-            {{ t('auth') }}
-          </n-button>
-        </template>
-      </n-modal>
-      <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
-        <template #header>
-          <div>{{ t("password") }}</div>
-        </template>
-        <span>
-          <p>{{ t("passwordTip") }}</p>
-        </span>
-        <n-card>
-          <b>{{ curEmailPassword }}</b>
-        </n-card>
-        <template #action>
-        </template>
-      </n-modal>
-    </n-layout-header>
+      </template>
+    </n-modal>
+    <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("password") }}</div>
+      </template>
+      <span>
+        <p>{{ t("passwordTip") }}</p>
+      </span>
+      <n-card>
+        <b>{{ curEmailPassword }}</b>
+      </n-card>
+      <template #action>
+      </template>
+    </n-modal>
+    <n-row>
+      <n-col :span="8">
+        <n-statistic :label="t('userCount')" :value="statistics.userCount">
+          <template #prefix>
+            <n-icon :component="User" />
+          </template>
+        </n-statistic>
+      </n-col>
+      <n-col :span="8">
+        <n-statistic :label="t('activeUser')" :value="statistics.activeUserCount7days">
+          <template #prefix>
+            <n-icon :component="UserCheck" />
+          </template>
+        </n-statistic>
+      </n-col>
+      <n-col :span="8">
+        <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
+          <template #prefix>
+            <n-icon :component="MailBulk" />
+          </template>
+        </n-statistic>
+      </n-col>
+    </n-row>
    <n-tabs type="segment" v-model:value="tab">
-      <n-tab-pane name="account" tab="account">
+      <n-tab-pane name="account" :tab="t('account')">
+        <n-input-group>
+          <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')" />
+          <n-button @click="fetchData" type="primary" ghost>
+            {{ t('query') }}
+          </n-button>
+        </n-input-group>
        <div style="display: inline-block;">
          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
            show-size-picker>
@@ -280,16 +329,13 @@ const fetchMailUnknowData = async () => {
            </template>
          </n-pagination>
        </div>
-        <n-button tertiary @click="fetchData" type="primary">
-          {{ t('refresh') }}
-        </n-button>
        <n-data-table :columns="columns" :data="data" :bordered="false" />
      </n-tab-pane>
-      <n-tab-pane name="mails" tab="mails">
+      <n-tab-pane name="mails" :tab="t('mails')">
        <n-input-group>
          <n-input v-model:value="mailAddress" />
          <n-button @click="fetchMailData" type="primary" ghost>
-            {{ t('refresh') }}
+            {{ t('query') }}
          </n-button>
        </n-input-group>
        <n-list hoverable clickable>
@@ -317,7 +363,7 @@ const fetchMailUnknowData = async () => {
          </n-list-item>
        </n-list>
      </n-tab-pane>
-      <n-tab-pane name="unknow" tab="unknown">
+      <n-tab-pane name="unknow" :tab="t('unknow')">
        <n-button @click="fetchMailUnknowData" type="primary" ghost>
          {{ t('query') }}
        </n-button>
@@ -348,16 +394,10 @@ const fetchMailUnknowData = async () => {
        </n-list>
      </n-tab-pane>
    </n-tabs>
-  </n-space>
+  </div>
 </template>

 <style scoped>
-.n-layout-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .n-pagination {
  margin-top: 10px;
  margin-bottom: 10px;
@@ -1,308 +0,0 @@
-<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, NSplit, NResult } from 'naive-ui'
-import { NDrawer, NDrawerContent } from 'naive-ui'
-import { watch, onMounted, ref } from "vue";
-import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
-import { useGlobalState } from '../store'
-import { api } from '../api'
-import { CloudDownloadRound } from '@vicons/material'
-import { useIsMobile } from '../utils/composables'
-
-const message = useMessage()
-const isMobile = useIsMobile()
-
-const { settings, themeSwitch } = useGlobalState()
-const autoRefresh = ref(false)
-const data = ref([])
-const timer = ref(null)
-
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const showAttachments = ref(false)
-const curAttachments = ref([])
-const curMail = ref(null);
-
-const { t } = useI18n({
-  locale: 'zh',
-  messages: {
-    en: {
-      autoRefresh: 'Auto Refresh',
-      refresh: 'Refresh',
-      attachments: 'Show Attachments',
-      pleaseSelectMail: "Please select a mail to view."
-    },
-    zh: {
-      autoRefresh: '自动刷新',
-      refresh: '刷新',
-      attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。"
-    }
-  }
-});
-
-const setupAutoRefresh = async (autoRefresh) => {
-  if (autoRefresh) {
-    timer.value = setInterval(async () => {
-      await refresh();
-    }, 30000)
-  } else {
-    clearInterval(timer.value)
-    timer.value = null
-  }
-}
-
-watch(autoRefresh, async (autoRefresh, old) => {
-  setupAutoRefresh(autoRefresh)
-})
-
-watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
-  if (page !== oldPage || pageSize !== oldPageSize) {
-    await refresh();
-  }
-})
-
-const refresh = async () => {
-  if (typeof settings.value.address != 'string' || settings.value.address.trim() === '') {
-    return;
-  }
-  try {
-    const { results, count: totalCount } = await api.fetch(
-      `/api/mails`
-      + `?limit=${pageSize.value}`
-      + `&offset=${(page.value - 1) * pageSize.value}`
-    );
-    data.value = results;
-    if (totalCount > 0) {
-      count.value = totalCount;
-    }
-    if (!isMobile.value && !curMail.value && data.value.length > 0) {
-      curMail.value = results[0];
-    }
-  } catch (error) {
-    message.error(error.message || "error");
-    console.error(error);
-  }
-};
-
-const clickRow = async (row) => {
-  curMail.value = row;
-};
-
-const getAttachments = async (attachment_id) => {
-  try {
-    const res = await api.fetch(
-      `/api/attachment/${attachment_id}`
-    );
-    curAttachments.value = res
-      .filter((item) => item?.content?.data)
-      .map((item) => {
-        return {
-          id: item.contentId || Math.random().toString(36).substring(2, 15),
-          filename: item.filename || "",
-          size: item.size,
-          url: URL.createObjectURL(
-            new Blob(
-              [new Uint8Array(item.content.data)],
-              { type: item.contentType || 'application/octet-stream' }
-            ))
-        }
-      });
-    showAttachments.value = true;
-  } catch (error) {
-    message.error(error.message || "error");
-  }
-};
-
-const mailItemClass = (row) => {
-  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
-};
-
-onMounted(async () => {
-  await api.getSettings();
-  await refresh();
-});
-</script>
-
-<template>
-  <div>
-    <n-layout v-if="settings.address">
-      <n-split class="left" 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; height: 80vh;">
-            <n-list hoverable clickable>
-              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-                :class="mailItemClass(row)">
-                <n-thing class="center" :title="row.subject" style="overflow: scroll">
-                  <template #description>
-                    <n-tag type="info">
-                      ID: {{ row.id }}
-                    </n-tag>
-                    <n-tag type="info">
-                      {{ row.created_at }}
-                    </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 #2>
-          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: scroll;">
-            <n-space>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </n-tag>
-              <n-tag type="info">
-                {{ curMail.created_at }}
-              </n-tag>
-              <n-tag type="info">
-                FROM: {{ curMail.source }}
-              </n-tag>
-              <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 class="mail-item" v-else>
-            <n-result status="info" :title="t('pleaseSelectMail')">
-            </n-result>
-          </n-card>
-        </template>
-      </n-split>
-      <div class="left" 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 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>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </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-card style="overflow: scroll;">
-              <n-space>
-                <n-tag type="info">
-                  ID: {{ curMail.id }}
-                </n-tag>
-                <n-tag type="info">
-                  {{ curMail.created_at }}
-                </n-tag>
-                <n-tag type="info">
-                  FROM: {{ curMail.source }}
-                </n-tag>
-                <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-drawer-content>
-        </n-drawer>
-      </div>
-    </n-layout>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("attachments") }}</div>
-      </template>
-      <n-list hoverable clickable>
-        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-          <n-thing class="center" :title="row.filename">
-            <template #description>
-              <n-space>
-                <n-tag type="info">
-                  Size: {{ row.size }}
-                </n-tag>
-              </n-space>
-            </template>
-          </n-thing>
-          <template #suffix>
-            <n-button tag="a" target="_blank" tertiary type="info" size="small'" :download="row.filename"
-              :href="row.url">
-              <n-icon :component="CloudDownloadRound" />
-            </n-button>
-          </template>
-        </n-list-item>
-      </n-list>
-      <template #action>
-      </template>
-    </n-modal>
-  </div>
-</template>
-
-<style scoped>
-.left {
-  overflow: scroll;
-  text-align: left;
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-}
-
-.overlay-dark-backgroud {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.overlay-light-backgroud {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mail-item {
-  height: 100%;
-}
-</style>
@@ -1,15 +1,10 @@
 <script setup>
-import { NGrid, NLayoutHeader, NInput } from 'naive-ui'
-import { NButton, NSelect, NModal, NIcon, NMenu, NAlert } from 'naive-ui'
-import { NInputGroup, NInputGroupLabel, NCard, NResult } from 'naive-ui'
-import { NSwitch, NPopconfirm, NSkeleton } from 'naive-ui'
-import { useMessage } from 'naive-ui'
 import useClipboard from 'vue-clipboard3'
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
-import { DarkModeFilled, LightModeFilled, MenuFilled } from '@vicons/material'
+import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled } from '@vicons/material'
 import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'

 import { useGlobalState } from '../store'
@@ -19,11 +14,14 @@ const message = useMessage()

 const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
 const { showLogin, openSettings, settings } = useGlobalState()
+const route = useRoute()
 const router = useRouter()
 const isMobile = useIsMobile()
+const isAdminRoute = computed(() => route.path.includes('admin'))

 const showNewEmail = ref(false)
 const showLogout = ref(false)
+const showDelteAccount = ref(false)
 const password = ref('')
 const showPassword = ref(false)
 const emailName = ref("")
@@ -67,6 +65,8 @@ const { t } = useI18n({
            login: 'Login',
            logout: 'Logout',
            logoutConfirm: 'Are you sure to logout?',
+            delteAccount: "Delete Account",
+            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
            auth: 'Auth',
            authTip: 'Please enter the correct auth code',
            settings: 'Settings',
@@ -93,6 +93,8 @@ const { t } = useI18n({
            login: '登录',
            logout: '登出',
            logoutConfirm: '确定要登出吗？',
+            delteAccount: "删除账户",
+            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
            auth: '授权',
            authTip: '请输入正确的授权码',
            settings: '设置',
@@ -116,6 +118,7 @@ const { t } = useI18n({
    }
 });

+const showUserMenu = computed(() => !!settings.value.address)

 const menuOptions = computed(() => [
    {
@@ -143,7 +146,10 @@ const menuOptions = computed(() => [
                size: "small",
                onClick: () => router.push('/admin')
            },
-            { default: () => "Admin" }
+            {
+                default: () => "Admin",
+                icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
+            }
        ),
        show: !!adminAuth.value,
        key: "admin"
@@ -161,7 +167,7 @@ const menuOptions = computed(() => [
                icon: () => h(NIcon, { component: User }),
            }
        ),
-        show: !!jwt.value,
+        show: showUserMenu.value,
        key: "user",
        children: [
            {
@@ -202,6 +208,19 @@ const menuOptions = computed(() => [
                    { default: () => t('logout') }
                ),
                key: "logout"
+            },
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => { showDelteAccount.value = true }
+                    },
+                    { default: () => t('delteAccount') }
+                ),
+                key: "delte_account"
            }
        ]
    },
@@ -261,7 +280,7 @@ const menuOptions = computed(() => [
    }
 ]);

-const menuOptionsMobile = [
+const menuOptionsMobile = computed(() => [
    {
        label: t('menu'),
        icon: () => h(
@@ -273,7 +292,7 @@ const menuOptionsMobile = [
        key: "menu",
        children: menuOptions.value
    },
-];
+]);


 const copy = async () => {
@@ -301,6 +320,18 @@ const newEmail = async () => {
    }
 };

+const deleteAccount = async () => {
+    try {
+        await api.fetch(`/api/delete_address`, {
+            method: 'DELETE'
+        });
+        jwt.value = '';
+        location.reload()
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
+
 onMounted(async () => {
    await api.getOpenSettings(message);
    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
@@ -316,32 +347,34 @@ onMounted(async () => {
                <n-menu v-else mode="horizontal" :options="menuOptionsMobile" />
            </div>
        </n-layout-header>
-        <n-card v-if="!settings.fetched">
-            <n-skeleton style="height: 50vh" />
-        </n-card>
-        <n-alert v-else-if="settings.address" type="info" show-icon>
-            <span>
-                <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
-                <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
-                    <n-icon :component="Copy" /> {{ t('copy') }}
-                </n-button>
-            </span>
-        </n-alert>
-        <n-card v-else>
-            <n-result status="info" :description="t('pleaseGetNewEmail')">
-                <template #footer>
-                    <n-alert v-if="jwt" type="warning" show-icon>
-                        <span>{{ t('fetchAddressError') }}</span>
-                    </n-alert>
-                    <n-button @click="showLogin = true" tertiary round type="primary">
-                        {{ t('login') }}
+        <div v-if="!isAdminRoute">
+            <n-card v-if="!settings.fetched">
+                <n-skeleton style="height: 50vh" />
+            </n-card>
+            <n-alert v-else-if="settings.address" type="info" show-icon>
+                <span>
+                    <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                    <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
+                        <n-icon :component="Copy" /> {{ t('copy') }}
                    </n-button>
-                    <n-button @click="showNewEmail = true" tertiary round type="primary">
-                        {{ t('getNewEmail') }}
-                    </n-button>
-                </template>
-            </n-result>
-        </n-card>
+                </span>
+            </n-alert>
+            <n-card v-else>
+                <n-result status="info" :description="t('pleaseGetNewEmail')">
+                    <template #footer>
+                        <n-alert v-if="jwt" type="warning" show-icon>
+                            <span>{{ t('fetchAddressError') }}</span>
+                        </n-alert>
+                        <n-button @click="showLogin = true" tertiary round type="primary">
+                            {{ t('login') }}
+                        </n-button>
+                        <n-button @click="showNewEmail = true" tertiary round type="primary">
+                            {{ t('getNewEmail') }}
+                        </n-button>
+                    </template>
+                </n-result>
+            </n-card>
+        </div>
        <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
            <template #header>
                <div>{{ t('getNewEmail') }}</div>
@@ -404,6 +437,17 @@ onMounted(async () => {
                </n-button>
            </template>
        </n-modal>
+        <n-modal v-model:show="showDelteAccount" preset="dialog" title="Dialog">
+            <template #header>
+                <div>{{ t('delteAccount') }}</div>
+            </template>
+            <p>{{ t('delteAccountConfirm') }}</p>
+            <template #action>
+                <n-button @click="deleteAccount" size="small" tertiary round type="error">
+                    {{ t('delteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
        <n-modal v-model:show="showAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
            title="Dialog">
            <template #header>
@@ -1,12 +1,304 @@
 <script setup>
-import { NSpace } from 'naive-ui'
-import Header from './Header.vue';
-import Content from './Content.vue';
+import { watch, onMounted, ref } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { api } from '../api'
+import { CloudDownloadRound } from '@vicons/material'
+import { useIsMobile } from '../utils/composables'
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const { settings, themeSwitch } = useGlobalState()
+const autoRefresh = ref(false)
+const data = ref([])
+const timer = ref(null)
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const showAttachments = ref(false)
+const curAttachments = ref([])
+const curMail = ref(null);
+
+const { t } = useI18n({
+  locale: 'zh',
+  messages: {
+    en: {
+      autoRefresh: 'Auto Refresh',
+      refresh: 'Refresh',
+      attachments: 'Show Attachments',
+      pleaseSelectMail: "Please select a mail to view."
+    },
+    zh: {
+      autoRefresh: '自动刷新',
+      refresh: '刷新',
+      attachments: '查看附件',
+      pleaseSelectMail: "请选择一封邮件查看。"
+    }
+  }
+});
+
+const setupAutoRefresh = async (autoRefresh) => {
+  if (autoRefresh) {
+    timer.value = setInterval(async () => {
+      await refresh();
+    }, 30000)
+  } else {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+watch(autoRefresh, async (autoRefresh, old) => {
+  setupAutoRefresh(autoRefresh)
+})
+
+watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
+  if (page !== oldPage || pageSize !== oldPageSize) {
+    await refresh();
+  }
+})
+
+const refresh = async () => {
+  if (typeof settings.value.address != 'string' || settings.value.address.trim() === '') {
+    return;
+  }
+  try {
+    const { results, count: totalCount } = await api.fetch(
+      `/api/mails`
+      + `?limit=${pageSize.value}`
+      + `&offset=${(page.value - 1) * pageSize.value}`
+    );
+    data.value = results;
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+      curMail.value = results[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  }
+};
+
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
+const getAttachments = async (attachment_id) => {
+  try {
+    const res = await api.fetch(
+      `/api/attachment/${attachment_id}`
+    );
+    curAttachments.value = res
+      .filter((item) => item?.content?.data)
+      .map((item) => {
+        return {
+          id: item.contentId || Math.random().toString(36).substring(2, 15),
+          filename: item.filename || "",
+          size: item.size,
+          url: URL.createObjectURL(
+            new Blob(
+              [new Uint8Array(item.content.data)],
+              { type: item.contentType || 'application/octet-stream' }
+            ))
+        }
+      });
+    showAttachments.value = true;
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+onMounted(async () => {
+  await api.getSettings();
+  await refresh();
+});
 </script>

 <template>
-    <n-space vertical>
-        <Header />
-        <Content />
-    </n-space>
+  <div>
+    <n-layout v-if="settings.address">
+      <n-split class="left" 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; height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ row.created_at }}
+                    </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 #2>
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: scroll;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ curMail.created_at }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.source }}
+              </n-tag>
+              <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 class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+      <div class="left" 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 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>
+                  <n-tag type="info">
+                    {{ row.created_at }}
+                  </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-card style="overflow: scroll;">
+              <n-space>
+                <n-tag type="info">
+                  ID: {{ curMail.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ curMail.created_at }}
+                </n-tag>
+                <n-tag type="info">
+                  FROM: {{ curMail.source }}
+                </n-tag>
+                <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-drawer-content>
+        </n-drawer>
+      </div>
+    </n-layout>
+    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("attachments") }}</div>
+      </template>
+      <n-list hoverable clickable>
+        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
+          <n-thing class="center" :title="row.filename">
+            <template #description>
+              <n-space>
+                <n-tag type="info">
+                  Size: {{ row.size }}
+                </n-tag>
+              </n-space>
+            </template>
+          </n-thing>
+          <template #suffix>
+            <n-button tag="a" target="_blank" tertiary type="info" size="small'" :download="row.filename"
+              :href="row.url">
+              <n-icon :component="CloudDownloadRound" />
+            </n-button>
+          </template>
+        </n-list-item>
+      </n-list>
+      <template #action>
+      </template>
+    </n-modal>
+  </div>
 </template>
+
+<style scoped>
+.left {
+  overflow: scroll;
+  text-align: left;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.overlay-dark-backgroud {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.overlay-light-backgroud {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mail-item {
+  height: 100%;
+}
+</style>
@@ -1,6 +1,4 @@
 <script setup>
-import { NSpace, NFormItem, NInput, NSwitch, NButton, NCard } from 'naive-ui'
-import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { onMounted, ref } from 'vue'

@@ -79,33 +77,30 @@ onMounted(async () => {
 </script>

 <template>
-    <n-space vertical>
-        <Header />
-        <div class="center">
-            <n-card v-if="settings.address" :title='t("settings")'>
-                <div class="right">
-                    <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>
-                </div>
-                <div class="left">
-                    <n-form-item :label="t('enableAutoReply')" label-placement="left">
-                        <n-switch v-model:value="enableAutoReply" />
-                    </n-form-item>
-                    <n-form-item :label="t('name')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="name" />
-                    </n-form-item>
-                    <n-form-item :label="t('sourcePrefix')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="sourcePrefix" />
-                    </n-form-item>
-                    <n-form-item :label="t('subject')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" v-model:value="subject" />
-                    </n-form-item>
-                    <n-form-item :label="t('autoReply')" label-placement="left">
-                        <n-input :disabled="!enableAutoReply" type="textarea" v-model:value="autoReplyMessage" />
-                    </n-form-item>
-                </div>
-            </n-card>
-        </div>
-    </n-space>
+    <div class="center">
+        <n-card v-if="settings.address" :title='t("settings")'>
+            <div class="right">
+                <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>
+            </div>
+            <div class="left">
+                <n-form-item :label="t('enableAutoReply')" label-placement="left">
+                    <n-switch v-model:value="enableAutoReply" />
+                </n-form-item>
+                <n-form-item :label="t('name')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="name" />
+                </n-form-item>
+                <n-form-item :label="t('sourcePrefix')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="sourcePrefix" />
+                </n-form-item>
+                <n-form-item :label="t('subject')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" v-model:value="subject" />
+                </n-form-item>
+                <n-form-item :label="t('autoReply')" label-placement="left">
+                    <n-input :disabled="!enableAutoReply" type="textarea" v-model:value="autoReplyMessage" />
+                </n-form-item>
+            </div>
+        </n-card>
+    </div>
 </template>

 <style scoped>