保存

2025-04-26 17:24:39 +08:00
commit 24ba4772e6
107 changed files with 13612 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,26 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+mail-vue/node_modules
+mail-vue/dist
+.wrangler
+.venv
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
+1312
--- a/mail-vue/.env.dev
+++ b/mail-vue/.env.dev
@@ -0,0 +1,3 @@
+NODE_ENV = 'dev'
+VITE_APP_TITLE = '开发环境'
+VITE_BASE_URL = 'http://127.0.0.1:8787/api'
--- a/mail-vue/.env.release
+++ b/mail-vue/.env.release
@@ -0,0 +1,3 @@
+NODE_ENV = 'release'
+VITE_APP_TITLE = '发布环境'
+VITE_BASE_URL = '/api'
--- a/mail-vue/.env.remote
+++ b/mail-vue/.env.remote
@@ -0,0 +1,3 @@
+NODE_ENV = 'remote'
+VITE_APP_TITLE = '远程环境'
+VITE_BASE_URL = 'xxxxxx'
--- a/mail-vue/index.html
+++ b/mail-vue/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title></title>
+    <link rel="icon" href="./src/assets/favicon.svg" type="image/svg+xml">
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>
--- a/mail-vue/package-lock.json
+++ b/mail-vue/package-lock.json
--- a/mail-vue/package.json
+++ b/mail-vue/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "video-admin-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode dev",
+    "remote": "vite --mode remote",
+    "build": "vite build --mode release",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@iconify/vue": "^4.3.0",
+    "@vueuse/core": "^12.0.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.7.8",
+    "date-time-format-timezone": "^1.0.22",
+    "dayjs": "^1.11.13",
+    "element-plus": "^2.9.5",
+    "path": "^0.12.7",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "postal-mime": "^2.4.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "less": "^4.2.2",
+    "sass": "^1.82.0",
+    "terser": "^5.39.0",
+    "vite": "6.2.6"
+  }
+}
--- a/mail-vue/public/vite.svg
+++ b/mail-vue/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/mail-vue/src/App.vue
+++ b/mail-vue/src/App.vue
@@ -0,0 +1,31 @@
+<template>
+  <router-view/>
+  <div class="loading" v-if="uiStore.init">
+    <loading/>
+  </div>
+</template>
+<script setup>
+import loading from "@/components/loading/index.vue";
+import {useUiStore} from "@/store/ui.js";
+import {useSettingStore} from "@/store/setting.js";
+import {watch} from "vue";
+
+const settingStore = useSettingStore();
+const uiStore = useUiStore();
+
+watch(() => settingStore.settings.title,
+    (title) => document.title = title,
+    {immediate: true}
+)
+</script>
+
+<style>
+
+.loading {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
--- a/mail-vue/src/assets/favicon.svg
+++ b/mail-vue/src/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="#367af2" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail320)" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail321)" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail322)" fill-opacity="0.75" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail323)" fill-opacity="0.7" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail324)" d="M6.5 5A4.5 4.5 0 0 0 2 9.5v1.09l13.526 7.292a1 1 0 0 0 .948 0L30 10.59V9.5A4.5 4.5 0 0 0 25.5 5z"/><defs><linearGradient id="fluentColorMail320" x1="19.555" x2="26.862" y1="13.332" y2="27.873" gradientUnits="userSpaceOnUse"><stop offset=".199" stop-color="#0094f0" stop-opacity="0"/><stop offset=".431" stop-color="#0094f0"/></linearGradient><linearGradient id="fluentColorMail321" x1="12" x2="4.914" y1="11.79" y2="28.328" gradientUnits="userSpaceOnUse"><stop offset=".191" stop-color="#0094f0" stop-opacity="0"/><stop offset=".431" stop-color="#0094f0"/></linearGradient><linearGradient id="fluentColorMail322" x1="23.383" x2="24.532" y1="20.142" y2="28.575" gradientUnits="userSpaceOnUse"><stop stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="fluentColorMail323" x1="20.333" x2="22.43" y1="12.088" y2="29.25" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient><linearGradient id="fluentColorMail324" x1="10.318" x2="18.903" y1=".976" y2="23.436" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset=".462" stop-color="#29c3ff"/><stop offset="1" stop-color="#4894fe"/></linearGradient></defs></g></svg>
--- a/mail-vue/src/assets/fonts/HarmonyOS_Sans_SC_Regular.woff2
+++ b/mail-vue/src/assets/fonts/HarmonyOS_Sans_SC_Regular.woff2
--- a/mail-vue/src/axios/index.js
+++ b/mail-vue/src/axios/index.js
@@ -0,0 +1,80 @@
+import axios from "axios";
+import router from "@/router";
+import {ElMessage} from 'element-plus';
+
+let http = axios.create({
+    baseURL: import.meta.env.VITE_BASE_URL
+});
+
+http.interceptors.request.use(config => {
+    config.headers.Authorization = `${localStorage.getItem('token')}`
+    return config
+})
+
+http.interceptors.response.use((res) => {
+        return new Promise((resolve, reject) => {
+            const data = res.data
+            if (data.code === 401) {
+                ElMessage({
+                    message: data.message,
+                    type: 'error',
+                    plain: true,
+                })
+                localStorage.removeItem('token')
+                router.push('/login')
+                reject(data)
+            } else if (data.code === 403) {
+                ElMessage({
+                    message: data.message,
+                    type: 'error',
+                    plain: true,
+                })
+                reject(data)
+            } else if (data.code !== 200) {
+                ElMessage({
+                    message: data.message,
+                    type: 'error',
+                    plain: true,
+                })
+                setTimeout(() => {
+                    reject(data)
+                }, 1)
+            }
+            setTimeout(() => {
+                resolve(data.data)
+            }, 1)
+        })
+    },
+    (error) => {
+        if (error.message.includes('Network Error')) {
+            ElMessage({
+                message: '网络错误,请检查网络连接',
+                type: 'error',
+                plain: true,
+            })
+        } else if (error.code === 'ECONNABORTED') {
+            ElMessage({
+                message: '请求超时,请稍后重试',
+                type: 'error',
+                plain: true,
+            })
+            ElMessage.error('')
+        } else if (error.response) {
+            ElMessage({
+                message: `服务器繁忙`,
+                type: 'error',
+                plain: true,
+            })
+        } else {
+            ElMessage({
+                message: '请求失败,请稍后再试',
+                type: 'error',
+                plain: true,
+            })
+        }
+        return Promise.reject(error)
+    })
+
+export default http
+
+
--- a/mail-vue/src/components/email-scroll/index.vue
+++ b/mail-vue/src/components/email-scroll/index.vue
@@ -0,0 +1,494 @@
+<template>
+  <div class="email-container">
+    <div class="header-actions">
+      <el-checkbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          :disabled="!emailList.length"
+          @change="handleCheckAllChange"
+      >
+      </el-checkbox>
+      <Icon class="icon" icon="ion:reload" width="18" height="18"  @click="refreshList" />
+      <Icon class="icon" icon="uiw:delete" width="16" height="16" v-if="getSelectedMailsIds().length > 0" @click="handleDelete" />
+      <Icon class="more-icon icon" width="16" height="16"  icon="akar-icons:dot-grid-fill" @click="changeAccountShow" />
+    </div>
+
+
+    <div ref="scroll"  class="scroll">
+      <el-scrollbar>
+        <div style="height: 100%;" :infinite-scroll-immediate="false" v-infinite-scroll="loadData" infinite-scroll-distance="600">
+          <div v-for="item in emailList" :key="item.emailId">
+            <div class="email-row"
+                 :data-checked="item.checked"
+                 @click="jumpDetails(item)"
+            >
+              <el-checkbox v-model="item.checked"  @click.stop></el-checkbox>
+              <div @click.stop="starChange(item)" class="pc-star">
+                <Icon v-if="item.isStar"   icon="fluent-color:star-16" width="20" height="20" />
+                <Icon v-else icon="solar:star-line-duotone" width="18" height="18" />
+              </div>
+              <div  class="title" :class="accountShow ? 'title-column' : ''">
+                <div class="email-sender">{{ item.name }}</div>
+                <div class="email-subject">{{ item.subject}}</div>
+              </div>
+              <div class="email-right">
+                <span class="email-time">{{ fromNow(item.createTime) }}</span>
+                <div class="phone-star" :class="item.isStar ? 'star-pd' : ''" @click.stop="starChange(item)">
+                  <Icon v-if="item.isStar" icon="fluent-color:star-16" width="20" height="20" />
+                  <Icon v-else icon="solar:star-line-duotone" width="18" height="18" />
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <div class="loading" v-if="loading">
+            <Loading />
+          </div>
+          <div class="follow-loading" v-if="emailList.length > 0 && !noLoading">
+            <Loading />
+          </div>
+          <div class="noLoading" v-if="noLoading && emailList.length > 0">
+            <div>没有更多数据了</div>
+          </div>
+          <div class="empty" v-if="noLoading && emailList.length === 0">
+            <el-empty description="没有任何邮件" />
+          </div>
+        </div>
+      </el-scrollbar>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Loading from "@/components/loading/index.vue";
+import {Icon} from "@iconify/vue";
+import {computed, onActivated, reactive, ref, watch} from "vue";
+import router from "@/router/index.js";
+import {onBeforeRouteLeave} from "vue-router";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useEmailStore} from "@/store/email.js";
+import {useUiStore} from "@/store/ui.js";
+import {useSettingStore} from "@/store/setting.js";
+import {fromNow} from "@/day/day.js";
+
+const props = defineProps({
+  getEmailList: Function,
+  emailDelete: Function,
+  starAdd: Function,
+  starCancel: Function,
+  cancelSuccess: Function,
+  starSuccess: Function,
+  allowStar: {
+    type: Boolean,
+    default: true
+  }
+})
+
+
+const settingStore = useSettingStore()
+const uiStore = useUiStore();
+const emailStore = useEmailStore();
+const loading = ref(false);
+const followLoading = ref(false);
+const noLoading = ref(false);
+const emailList = reactive([])
+const mailTotal = ref(0);
+const checkAll = ref(false);
+const isIndeterminate = ref(false);
+const scroll = ref(null)
+const firstLoad = ref(true)
+let scrollTop = 0
+const queryParam = reactive({
+  emailId: 0,
+  size: 30,
+});
+
+defineExpose({
+  refreshList,
+  deleteEmail,
+  addItemStar,
+  editEmailStar,
+  emailList,
+  firstLoad
+})
+
+onActivated(() => {
+  scroll.value.scrollTop = scrollTop
+})
+
+getEmailList()
+
+onBeforeRouteLeave(() => {
+  scrollTop = scroll.value.scrollTop
+})
+
+
+watch(
+    () => emailList.map(item => item.checked),
+    () => {
+      if (emailList.length > 0) {
+        updateCheckStatus();
+      }
+    },
+    { deep: true }
+);
+
+
+watch(() => emailStore.deleteIds, () => {
+  if (emailStore.deleteIds) {
+    deleteEmail(emailStore.deleteIds)
+  }
+})
+
+const accountShow = computed(() => {
+  return uiStore.accountShow && settingStore.settings.manyEmail === 0
+})
+
+
+function starChange(email) {
+
+  if (!email.isStar) {
+
+    if (!props.allowStar) return;
+
+    email.isStar = 1;
+    props.starAdd(email.emailId).then(() => {
+      email.isStar = 1;
+      props.starSuccess(email)
+    }).catch(() => {
+      email.isStar = 0
+    })
+  } else {
+
+    email.isStar = 0;
+    props.starCancel(email.emailId).then(() => {
+      email.isStar = 0;
+      props.cancelSuccess?.(email)
+    }).catch(() => {
+      email.isStar = 1;
+    })
+  }
+}
+
+function changeAccountShow() {
+  uiStore.accountShow = !uiStore.accountShow;
+}
+
+
+const handleDelete = () => {
+  ElMessageBox.confirm('确认批量删除这些邮件吗?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const emailIds = getSelectedMailsIds();
+    props.emailDelete(emailIds).then(() => {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+        plain: true,
+      })
+      emailStore.deleteIds = emailIds;
+    })
+  })
+}
+
+function deleteEmail(emailIds) {
+  emailIds.forEach(emailId => {
+    emailList.forEach((item,index) => {
+      if (emailId === item.emailId) {
+        emailList.splice(index,1);
+      }
+    })
+  })
+  if (emailList.length < queryParam.size && !noLoading.value) {
+    getEemailList()
+  }
+}
+
+function addItemStar(email) {
+
+  const existIndex = emailList.findIndex(item => item.emailId === email.emailId)
+
+  if (existIndex > -1) {
+    return
+  }
+
+  const index = emailList.findIndex(item => item.emailId < email.emailId)
+
+  if (index !== -1) {
+    emailList.splice(index, 0, email);
+  } else {
+    if (noLoading.value) {
+      emailList.push(email)
+    }
+  }
+}
+
+function editEmailStar(emailId,isStar) {
+  const index = emailList.findIndex(item => item.emailId === emailId)
+  if (index !== -1) {
+    emailList[index].isStar = isStar
+  }
+}
+
+function handleCheckAllChange(val) {
+  emailList.forEach(item => item.checked = val);
+  isIndeterminate.value = false;
+}
+
+// 获取选中的邮件列表id
+function getSelectedMailsIds() {
+  return emailList.filter(item => item.checked).map(item => item.emailId);
+}
+
+
+function updateCheckStatus() {
+  const checkedCount = emailList.filter(item => item.checked).length;
+  checkAll.value = checkedCount === emailList.length;
+  isIndeterminate.value = checkedCount > 0 && checkedCount < emailList.length;
+}
+
+function jumpDetails(email) {
+  emailStore.readEmail = email
+  router.push("/content");
+}
+
+function getEmailList() {
+
+  if (loading.value || followLoading.value || noLoading.value) return;
+
+  if (emailList.length === 0) {
+    loading.value = true
+  }else {
+    followLoading.value = true
+  }
+
+  props.getEmailList(queryParam.emailId, queryParam.size).then(data => {
+
+    if (emailList.length === 0) {
+      firstLoad.value = false
+    }
+
+    let list = data.list.map(item => ({
+      ...item,
+      checked: false
+    }));
+
+    if (data.list.length < queryParam.size) {
+      noLoading.value = true
+    }
+
+    emailList.push(...list);
+    mailTotal.value = data.total;
+    queryParam.emailId = data.list.at(-1).emailId;
+    loading.value = false
+    followLoading.value = false
+  }).catch(() => {
+    loading.value = false
+    followLoading.value = false
+  })
+}
+
+
+function refreshList() {
+  emailList.splice(0);
+  noLoading.value = false;
+  mailTotal.value = 0;
+  checkAll.value = false;
+  firstLoad.value = true
+  isIndeterminate.value = false;
+  queryParam.emailId = 0;
+  getEmailList();
+}
+
+function loadData() {
+  getEmailList()
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.email-container {
+  background: #FFFFFF;
+  border-radius: 8px;
+  padding: 0;
+  font-size: 14px;
+  color: #2e2e2e;
+  overflow: hidden;
+  height: 100%;
+}
+
+.scroll {
+  margin: 0;
+  height: calc(100% - 38px);
+  overflow: auto;
+  .empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+  .noLoading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
+    color: gray;
+  }
+  .follow-loading {
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+.email-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  justify-content: space-between;
+  box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
+  cursor: pointer;
+  position: relative;
+  transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  .el-checkbox{
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    padding-left: 6px;
+  }
+
+  .title-column {
+    @media (max-width: 1200px) {
+      grid-template-columns: 1fr !important;
+      gap: 4px !important;
+    }
+  }
+
+  .title {
+    flex: 1;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 200px 1fr;
+
+    @media (max-width: 991px) {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+
+    .email-sender {
+      font-weight: bold;
+      color: #1a1a1a;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .email-subject {
+      color: #333;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+
+  .email-right {
+    align-self: center;
+    text-align: right;
+    font-size: 12px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    color: #333;
+    padding-left: 20px;
+  }
+
+  &:hover {
+    box-shadow:
+        inset 1px 0 0 rgb(218, 220, 224),
+        inset -1px 0 0 rgb(218, 220, 224),
+        0 1px 2px 0 rgba(60, 64, 67, 0.3),
+        0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    z-index: 2;
+  }
+
+  /*&[data-checked="true"] {
+    background-color: #c2dbff;
+  }*/
+}
+
+
+.phone-star {
+  display: none;
+}
+
+.pc-star {
+  padding-left: 8px;
+  display: flex;
+  width: 40px;
+}
+
+@media (max-width: 991px) {
+  .pc-star {
+    display: none;
+  }
+  .email-right {
+    display: flex;
+    flex-direction: column;
+  }
+  .phone-star {
+    display: block;
+    align-self: end;
+    padding-right: 16px;
+    padding-top: 8px;
+  }
+  .star-pd{
+    padding-top: 6px !important;
+  }
+  .title {
+    padding-left: 8px;
+  }
+}
+
+.email-time {
+  padding-right: 16px !important;
+}
+
+:deep(.el-scrollbar__view) {
+  height: 100%;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 3px 16px;
+  box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
+  .icon {
+    font-size: 18px;
+    margin-left: 16px;
+    cursor: pointer;
+  }
+  .more-icon {
+    margin-left: auto;
+  }
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+</style>
--- a/mail-vue/src/components/hamburger/index.vue
+++ b/mail-vue/src/components/hamburger/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+      fill="currentColor"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits()
+const toggleClick = () => {
+  emit('toggleClick');
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
--- a/mail-vue/src/components/loading/index.vue
+++ b/mail-vue/src/components/loading/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-icon class="is-loading" :style="{ fontSize: `${size}px` }">
+    <svg class="circular" viewBox="0 0 20 20">
+      <g
+          class="path2 loading-path"
+          stroke-width="0"
+          style="animation: none; stroke: none"
+      >
+        <circle r="3.375" class="dot1" rx="0" ry="0" />
+        <circle r="3.375" class="dot2" rx="0" ry="0" />
+        <circle r="3.375" class="dot4" rx="0" ry="0" />
+        <circle r="3.375" class="dot3" rx="0" ry="0" />
+      </g>
+    </svg>
+  </el-icon>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 30
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-select-dropdown__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(v-bind(size) * 3.33px);
+  font-size: calc(v-bind(size) * 0.67px);
+}
+
+.circular {
+  display: inline;
+  height: v-bind(size) + 'px';
+  width: v-bind(size) + 'px';
+  animation: loading-rotate 2s linear infinite;
+}
+.path {
+  animation: loading-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 2;
+  stroke: var(--el-color-primary);
+  stroke-linecap: round;
+}
+.loading-path .dot1 {
+  transform: translate(3.75px, 3.75px);
+  fill: var(--el-color-primary);
+  animation: custom-spin-move 1s infinite linear alternate;
+  opacity: 0.3;
+}
+.loading-path .dot2 {
+  transform: translate(calc(100% - 3.75px), 3.75px);
+  fill: var(--el-color-primary);
+  animation: custom-spin-move 1s infinite linear alternate;
+  opacity: 0.3;
+  animation-delay: 0.4s;
+}
+.loading-path .dot3 {
+  transform: translate(3.75px, calc(100% - 3.75px));
+  fill: var(--el-color-primary);
+  animation: custom-spin-move 1s infinite linear alternate;
+  opacity: 0.3;
+  animation-delay: 1.2s;
+}
+.loading-path .dot4 {
+  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
+  fill: var(--el-color-primary);
+  animation: custom-spin-move 1s infinite linear alternate;
+  opacity: 0.3;
+  animation-delay: 0.8s;
+}
+@keyframes loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+@keyframes custom-spin-move {
+  to {
+    opacity: 1;
+  }
+}
+
+.is-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
--- a/mail-vue/src/day/day.js
+++ b/mail-vue/src/day/day.js
@@ -0,0 +1,21 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.locale('zh-cn')
+dayjs.tz.setDefault('Asia/Shanghai')
+
+function day(time) {
+  return dayjs(time).add(8, 'hours')
+}
+
+export const fromNow = (time) => {
+    return time ? day(time).fromNow() : ''
+}
+
+export default day
--- a/mail-vue/src/layout/account/index.vue
+++ b/mail-vue/src/layout/account/index.vue
@@ -0,0 +1,409 @@
+<template>
+  <div class="account-box">
+    <div class="head-opt">
+      <Icon v-if="settingStore.settings.addEmail === 0" class="icon" icon="ion:add-outline" width="23" height="23" @click="add" />
+      <Icon class="icon" icon="ion:reload" width="18" height="18"  @click="refresh" />
+    </div>
+    <el-scrollbar class="scrollbar">
+      <div v-infinite-scroll="getAccountList" :infinite-scroll-distance="600"  :infinite-scroll-immediate="false">
+        <el-card class="item" :class="itemBg(item.accountId)" v-for="item in accounts" :key="item.accountId" @click="changeAccount(item)">
+          <div class="account">
+            {{ item.email }}
+          </div>
+          <div class="opt">
+            <div class="send-email" @click.stop>
+              <Icon  icon="eva:email-fill" width="22" height="22" color="#fbbd08" />
+            </div>
+            <div class="settings" @click.stop>
+              <Icon v-if="item.accountId === userStore.user.accountId" icon="fluent:settings-24-filled" width="20" height="20" color="#909399" />
+              <el-dropdown v-else >
+                <Icon icon="fluent:settings-24-filled" width="20" height="20" color="#909399" />
+                <template #dropdown >
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="remove(item)">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </el-card>
+
+        <!-- Initial Loading Skeleton -->
+        <template v-if="loading">
+          <el-skeleton v-for="i in 3" :key="i"  animated>
+            <template #template>
+              <el-card class="item">
+                <el-skeleton-item variant="p" style="width: 70%; height: 20px; margin-bottom: 20px" />
+                <div style="display: flex; justify-content: space-between">
+                  <el-skeleton-item variant="text" style="width: 20px" />
+                  <el-skeleton-item variant="text" style="width: 20px" />
+                </div>
+              </el-card>
+            </template>
+          </el-skeleton>
+        </template>
+
+        <!-- Follow Loading Skeleton -->
+        <template v-if="accounts.length > 0 && !noLoading">
+          <el-skeleton animated>
+            <template #template>
+              <el-card class="item">
+                <el-skeleton-item variant="p" style="width: 70%; height: 20px; margin-bottom: 20px" />
+                <div style="display: flex; justify-content: space-between">
+                  <el-skeleton-item variant="text" style="width: 20px" />
+                  <el-skeleton-item variant="text" style="width: 20px" />
+                </div>
+              </el-card>
+            </template>
+          </el-skeleton>
+        </template>
+
+        <div class="noLoading" v-if="noLoading && accounts.length > 0">
+          <div>没有更多数据了</div>
+        </div>
+        <div class="empty" v-if="noLoading && accounts.length === 0">
+          <el-empty description="没有任何邮件" />
+        </div>
+      </div>
+
+    </el-scrollbar>
+    <el-dialog v-model="showAdd" title="添加邮箱" >
+      <form>
+        <div class="container">
+          <el-input v-model="addForm.email" type="text" placeholder="邮箱" autocomplete="off">
+            <template #append>
+              <div  @click.stop="openSelect">
+                <el-select
+                    ref="mySelect"
+                    v-model="addForm.suffix"
+                    placeholder="请选择"
+                    class="select"
+                >
+                  <el-option
+                      v-for="item in domainList"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                  />
+                </el-select>
+                <div style="color: #333">
+                  <span >{{addForm.suffix}}</span>
+                  <Icon class="setting-icon" icon="mingcute:down-small-fill" width="20" height="20" />
+                </div>
+              </div>
+            </template>
+          </el-input>
+          <el-button class="btn" type="primary" @click="submit" :loading="addLoading"
+          >添加
+          </el-button>
+        </div>
+      </form>
+      <div
+          class="add-email-turnstile"
+          :class="verifyShow ? 'turnstile-show' : 'turnstile-hide'"
+          :data-sitekey="settingStore.settings.siteKey"
+          data-callback="onTurnstileSuccess"
+      ></div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {Icon} from "@iconify/vue";
+import {nextTick, reactive, ref} from "vue";
+import {accountList, accountAdd, accountDelete} from "@/request/account.js";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {isEmail} from "@/utils/verify-utils.js";
+import {useSettingStore} from "@/store/setting.js";
+import {useAccountStore} from "@/store/account.js";
+import {useUserStore} from "@/store/user.js";
+
+const userStore = useUserStore();
+const accountStore = useAccountStore();
+const settingStore = useSettingStore();
+const showAdd = ref(false)
+const addLoading = ref(false);
+const domainList = settingStore.domainList
+const accounts = reactive([])
+const noLoading = ref(false)
+const loading = ref(false)
+const followLoading = ref(false);
+const verifyShow = ref(false)
+let turnstileId = false
+let verifyToken = ''
+const addForm = reactive({
+  email: '',
+  suffix: settingStore.domainList[0]
+})
+const queryParams = {
+  accountId: 0,
+  size: 12
+}
+
+const mySelect = ref()
+
+getAccountList()
+
+const openSelect = () => {
+  mySelect.value.toggleMenu()
+}
+
+window.onTurnstileSuccess = (token) => {
+  verifyToken = token;
+  setTimeout(() => {
+    verifyShow.value = false
+  },1500)
+};
+
+function itemBg(accountId) {
+  return accountStore.currentAccountId === accountId ? 'item-choose' : ''
+}
+
+function remove(account) {
+  ElMessageBox.confirm(`确认删除${account.email}吗?`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    accountDelete(account.accountId).then(() => {
+      const index = accounts.findIndex(item => item.accountId === account.accountId);
+      accounts.splice(index, 1);
+      if (accounts.length < queryParams.size) {
+        getAccountList()
+      }
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+        plain: true,
+      })
+    })
+  });
+}
+
+function refresh() {
+  if (loading.value) {
+    return
+  }
+  loading.value = false
+  followLoading.value = false
+  noLoading.value = false
+  queryParams.accountId = 0
+  accounts.splice(0, accounts.length)
+  getAccountList()
+}
+function changeAccount(account) {
+  accountStore.currentAccountId = account.accountId
+}
+
+function add() {
+  showAdd.value = true
+}
+
+function getAccountList() {
+
+  if (loading.value || followLoading.value || noLoading.value) return;
+
+  if (accounts.length === 0) {
+    loading.value = true
+  }else {
+    followLoading.value = true
+  }
+
+  accountList(queryParams.accountId,queryParams.size).then(list => {
+    if (list.length < queryParams.size) {
+      noLoading.value = true
+    }
+    if (accounts.length === 0) {
+      accountStore.currentAccount = list[0].accountId
+    }
+    queryParams.accountId = list.at(-1).accountId
+    accounts.push(...list)
+
+    loading.value = false
+    followLoading.value = false
+  }).catch(() => {
+    loading.value = false
+    followLoading.value = false
+  })
+}
+
+
+function submit()  {
+
+  if (!addForm.email){
+    ElMessage({
+      message: "邮箱不能为空",
+      type: "error",
+      plain: true
+    })
+    return
+  }
+
+  if (!isEmail(addForm.email+addForm.suffix)) {
+    ElMessage({
+      message: "非法邮箱",
+      type: "error",
+      plain: true
+    })
+    return
+  }
+  if (!verifyToken && settingStore.settings.addEmailVerify === 0) {
+    verifyShow.value = true
+    if (!turnstileId) {
+      nextTick(() => {
+        turnstileId = window.turnstile.render('.add-email-turnstile')
+      })
+    } else {
+      window.turnstile.reset(turnstileId)
+    }
+    return;
+  }
+
+  addLoading.value = true
+  accountAdd(addForm.email+addForm.suffix,verifyToken).then(account => {
+    addLoading.value = false
+    showAdd.value = false
+    addForm.email = ''
+    accounts.push(account)
+    verifyToken = ''
+    ElMessage({
+      message: "添加成功",
+      type: "success",
+      plain: true
+    })
+  }).catch(res => {
+    if (res.code === 400) {
+      verifyToken = ''
+      window.turnstile.reset(turnstileId)
+      verifyShow.value = true
+    }
+    addLoading.value = false
+  })
+}
+</script>
+<style scoped lang="scss">
+.account-box {
+
+  border-right: 1px solid var(--el-border-color) !important;
+  background-color: #FFF;
+  height: 100%;
+  overflow: hidden;
+  .head-opt {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
+    .icon{
+      cursor: pointer;
+      margin-left: 10px;
+    }
+    .icon:nth-child(2) {
+      margin-left: 20px;
+    }
+  }
+  .scrollbar {
+    width: 100%;
+    height: calc(100% - 38px);
+    overflow: auto;
+    @media (max-width: 767px) {
+      height: calc(100% - 98px);
+    }
+    .empty {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    .noLoading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0;
+      color: gray;
+    }
+  }
+  .btn {
+    width: 100%;
+    margin-top: 15px;
+  }
+
+  .item {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    cursor: pointer;
+    .account {
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #333;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .opt {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #888;
+
+    }
+
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+  }
+  .item:first-child{
+    margin-top: 10px  ;
+  }
+
+  .item-choose {
+    background: var(--el-color-primary-light-8);
+  }
+}
+
+.setting-icon {
+  position: relative;
+  top: 6px;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0 !important;
+  padding-left: 8px !important;
+  background: #FFFFFF;
+}
+
+:deep(.el-dialog) {
+  width: 400px !important;
+  @media (max-width: 440px) {
+    width: calc(100% - 40px) !important;
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+}
+
+.select {
+  position: absolute;
+  right: 30px;
+  width: 100px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.add-email-turnstile {
+  margin-top: 15px;
+}
+
+.turnstile-show {
+  opacity: 1;
+}
+
+.turnstile-hide {
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+</style>
--- a/mail-vue/src/layout/aside/index.vue
+++ b/mail-vue/src/layout/aside/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-scrollbar class="scroll">
+    <div>
+      <div class="title" >
+        <Icon icon="mdi:email-outline" width="24" height="24" />
+        <div>{{settingStore.settings.title}}</div>
+      </div>
+      <el-menu :collapse="false" text-color="#fff" active-text-color="#fff" style="margin-top: 10px">
+        <el-menu-item @click="router.push('/email')" index="email"
+                      :class="route.meta.name === 'email' ? 'choose-item' : ''">
+          <Icon icon="hugeicons:mailbox-01" width="20" height="20" />
+          <span class="menu-name" style="margin-left: 21px">收件箱</span>
+        </el-menu-item>
+        <el-menu-item @click="router.push('/star')" index="star"
+                      :class="route.meta.name === 'star' ? 'choose-item' : ''">
+          <Icon icon="solar:star-line-duotone" width="20" height="20" />
+          <span class="menu-name" style="margin-left: 20px">星标邮件</span>
+        </el-menu-item>
+        <el-menu-item @click="router.push('/setting')" index="setting"
+                      :class="route.meta.name === 'setting' ? 'choose-item' : ''">
+          <Icon icon="fluent:settings-48-regular" width="20" height="20" />
+          <span class="menu-name" style="margin-left: 20px">个人设置</span>
+        </el-menu-item>
+        <el-menu-item @click="router.push('/sys-setting')" index="sys-setting"  v-if="userStore.user.type === 0"
+                      :class="route.meta.name === 'sys-setting' ? 'choose-item' : ''">
+          <Icon icon="eos-icons:system-ok-outlined" width="18" height="18" />
+          <span class="menu-name" style="margin-left: 23px">系统设置</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import {useUserStore} from "@/store/user.js";
+import router from "@/router/index.js";
+import { useRoute } from "vue-router";
+import {Icon} from "@iconify/vue";
+import {useSettingStore} from "@/store/setting.js";
+
+const settingStore = useSettingStore();
+const userStore = useUserStore();
+const route = useRoute();
+</script>
+
+<style lang="scss" scoped>
+
+.title {
+  margin: 15px 10px;
+  height: 50px;
+  border-radius: 8px;
+  display: flex;
+  position: relative;
+  font-size: 16px;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #1890ff, #1c6dd0);
+  box-shadow: 0 0 12px rgba(24, 144, 255, 0.6), 0 0 20px rgba(24, 144, 255, 0.4);
+  transition: all 0.3s ease;
+
+  :deep(.el-icon) {
+    font-size: 20px;
+  }
+
+  .user-right-icon {
+    align-self: center;
+    position: absolute;
+    font-size: 12px;
+    right: 8px;
+    color: #ffffff;
+  }
+
+}
+
+
+
+.el-menu-item {
+  margin: 5px 10px !important;
+  border-radius: 8px;
+  height: 36px;
+  padding: 10px !important;
+}
+
+.choose-item {
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(4px);
+}
+
+@media (hover: hover) {
+  .el-menu-item:hover {
+    background: rgba(255, 255, 255, 0.08) !important;
+  }
+}
+
+.menu-name {
+  user-select: none;
+}
+
+
+:deep(.el-scrollbar__wrap--hidden-default ) {
+  background: #001529 !important;
+}
+
+:deep(.el-menu-item) {
+  background: #001529;
+}
+
+:deep(.el-menu) {
+  background: #001529;
+}
+
+.el-menu {
+  border-right: 0;
+  width: 250px;
+  @media (max-width: 1199px) {
+    width: 200px;
+  }
+}
+
+:deep(.el-divider__text) {
+  background: #001529;
+  color: #FFFFFF;
+}
+
+.scroll {
+  box-shadow: 6px 0 20px rgba(0, 21, 41, 0.35);
+}
+</style>
--- a/mail-vue/src/layout/header/index.vue
+++ b/mail-vue/src/layout/header/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="header">
+    <div class="btn">
+      <hanburger @click="changeAside"></hanburger>
+      <span class="breadcrumb-item">{{ route.meta.title }}</span>
+    </div>
+    <div class="toolbar">
+      <div class="email">{{ userStore.user.email }}</div>
+      <el-dropdown>
+        <div class="avatar">
+          <div class="avatar-text">
+            <div>{{ formatName(userStore.user.email) }}</div>
+          </div>
+          <Icon class="setting-icon" icon="mingcute:down-small-fill" width="24" height="24" />
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="router.push('/setting')">
+              个人设置
+            </el-dropdown-item>
+            <el-dropdown-item @click="clickLogout">
+              退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import router from "@/router";
+import hanburger from '@/components/hamburger/index.vue'
+import { logout} from "@/request/login.js";
+import {Icon} from "@iconify/vue";
+import {useUiStore} from "@/store/ui.js";
+import {useUserStore} from "@/store/user.js";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const userStore = useUserStore();
+const uiStore = useUiStore();
+function changeAside() {
+  uiStore.asideShow = !uiStore.asideShow
+}
+
+function clickLogout() {
+  logout().then(() => {
+    localStorage.removeItem("token")
+    router.push('/login')
+  })
+}
+
+function formatName(email) {
+  return email[0]?.toUpperCase() || ''
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.breadcrumb-item {
+  font-weight: bold;
+  font-size: 16px;
+  white-space: nowrap;
+}
+
+.setting-icon {
+  margin-right: 10px;
+  position: relative;
+  bottom: 10px;
+}
+
+.header {
+  text-align: right;
+  font-size: 12px;
+  display: grid;
+  height: 100%;
+  gap: 10px;
+  grid-template-columns: auto 1fr;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+
+
+.toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  margin-left: auto;
+  gap: 10px;
+  .email {
+    align-self: center;
+    font-size: 14px;
+    margin-right: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    width: 100%;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+
+    .avatar-text {
+      height: 30px;
+      width: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+    }
+
+    .setting-icon {
+      position: relative;
+      top: 0;
+    }
+  }
+
+}
+.el-tooltip__trigger:first-child:focus-visible {
+  outline: unset;
+}
+</style>
--- a/mail-vue/src/layout/index.vue
+++ b/mail-vue/src/layout/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <el-container class="layout">
+    <el-aside
+        class="aside"
+        :class="uiStore.asideShow ? 'aside-show' : 'el-aside-hide'">
+      <Aside />
+    </el-aside>
+    <div
+        :class="(uiStore.asideShow && isMobile)? 'overlay-show':'overlay-hide'"
+        @click="uiStore.asideShow = false"
+    ></div>
+
+    <el-container class="main-container">
+      <el-main>
+        <el-header>
+            <Header />
+        </el-header>
+        <Main />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import Aside from '@/layout/aside/index.vue'
+import Header from '@/layout/header/index.vue'
+import Main from '@/layout/main/index.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import {useUiStore} from "@/store/ui.js";
+
+const uiStore = useUiStore();
+const isMobile = ref(window.innerWidth < 768)
+
+
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768
+  uiStore.asideShow = window.innerWidth >= 992;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  handleResize()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.el-aside-hide {
+  position: fixed;
+  left: 0;
+  height: 100%;
+  z-index: 100;
+  transform: translateX(-100%);
+  transition: all 100ms ease;
+}
+
+.aside-show {
+  transform: translateX(0);
+  transition: all 100ms ease;
+  z-index: 101;
+  @media (max-width: 767px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 101;
+    height: 100%;
+    background: #fff;
+  }
+}
+
+.el-aside {
+  width: auto;
+  transition: all 100ms ease;
+}
+
+.layout {
+  height: 100%;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.main-container {
+  min-height: 100%;
+  background: #FFFFFF;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.el-main {
+  padding: 0;
+}
+
+.el-header {
+  background: #FFFFFF;
+  border-bottom: solid 1px var(--el-menu-border-color);
+  padding: 0 0 0 0;
+}
+
+.overlay-show {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+  transition: all 0.3s;
+}
+
+.overlay-hide {
+  display: flex;
+  pointer-events: none;
+  opacity: 0;
+}
+</style>
--- a/mail-vue/src/layout/main/index.vue
+++ b/mail-vue/src/layout/main/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div :class=" accountShow ? 'main-box-show' : 'main-box-hide'">
+    <div :class="accountShow ? 'block-show' : 'block-hide'" @click="uiStore.accountShow = false"></div>
+    <account  :class="accountShow ? 'show' : 'hide'" />
+    <router-view class="main-view" v-slot="{ Component,route }">
+      <keep-alive :include="['email','sys-setting','star']">
+        <component :is="Component" :key="route.name"/>
+      </keep-alive>
+    </router-view>
+  </div>
+</template>
+<script setup>
+import account from '@/layout/account/index.vue'
+import {useUiStore} from "@/store/ui.js";
+import {useSettingStore} from "@/store/setting.js";
+import {computed, onBeforeUnmount, onMounted} from "vue";
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  openSend: Function
+})
+
+const settingStore = useSettingStore()
+const uiStore = useUiStore();
+const route = useRoute()
+let  innerWidth =  window.innerWidth
+
+const accountShow = computed(() => {
+  return uiStore.accountShow && settingStore.settings.manyEmail === 0
+})
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  handleResize()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
+const handleResize = () => {
+  if (['content','email'].includes(route.meta.name)) {
+    if (innerWidth !==  window.innerWidth) {
+      innerWidth = window.innerWidth;
+      uiStore.accountShow = window.innerWidth >= 768;
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.block-show {
+  position: fixed;
+  @media (max-width: 767px) {
+    position: absolute;
+    right: 0;
+    border: 0;
+    height: 100%;
+    width: 100%;
+    background: #000000;
+    opacity: 0.6;
+    z-index: 10;
+    transition: all 300ms;
+  }
+}
+
+.block-hide {
+  position: fixed;
+  pointer-events: none;
+  transition: all 300ms;
+}
+
+.show {
+  transition: all 100ms;
+  @media (max-width: 767px) {
+    position: fixed;
+    z-index: 100;
+    width: 199px;
+  }
+}
+
+.hide {
+  transition: all 100ms;
+  position: fixed;
+  transform: translateX(-100%);
+  opacity: 0;
+  @media (max-width: 767px) {
+    width: 199px;
+    z-index: 100;
+  }
+}
+
+
+.main-box-show {
+  display: grid;
+  grid-template-columns: 250px  1fr;
+  @media (max-width: 767px) {
+    grid-template-columns: 1fr;
+  }
+  height: calc(100% - 60px);
+}
+
+.main-box-hide {
+  display: grid;
+  grid-template-columns: 1fr;
+  height: calc(100% - 60px);
+}
+
+
+.main-view {
+  background: #FFFFFF;
+}
+
+
+.navigation {
+  height: 30px;
+  border-bottom: solid 1px var(--el-menu-border-color);
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+  .tag {
+    background: #FFFFFF;
+    margin-left: 5px;
+  }
+}
+</style>
--- a/mail-vue/src/main.js
+++ b/mail-vue/src/main.js
@@ -0,0 +1,20 @@
+import {createApp} from 'vue';
+import App from './App.vue';
+import router from './router';
+import 'element-plus/dist/index.css';
+import './style.css';
+import ElementPlus from 'element-plus';
+import { createPinia } from 'pinia';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import piniaPersistedState from 'pinia-plugin-persistedstate';
+const pinia = createPinia().use(piniaPersistedState)
+const app = createApp(App).use(pinia)
+
+app.use(ElementPlus, {
+    locale: zhCn,
+});
+
+app.use(router)
+app.config.devtools = true;
+
+app.mount('#app');
--- a/mail-vue/src/request/account.js
+++ b/mail-vue/src/request/account.js
@@ -0,0 +1,14 @@
+import http from '@/axios/index.js'
+
+export function accountList(accountId, size) {
+    return http.get('/account/list', {params: {accountId, size}});
+}
+
+export function accountAdd(email,token) {
+    return http.post('/account/add', {email,token})
+}
+
+export function accountDelete(accountId) {
+    return http.delete('/account/delete', {params: {accountId}})
+}
+
--- a/mail-vue/src/request/email.js
+++ b/mail-vue/src/request/email.js
@@ -0,0 +1,17 @@
+import http from '@/axios/index.js';
+
+export function emailList(accountId, emailId, size) {
+    return http.get('/email/list', {params: {accountId, emailId, size}})
+}
+
+export function emailDelete(emailIds) {
+    return http.delete('/email/delete?emailIds=' + emailIds)
+}
+
+export function attList(emailId) {
+    return http.get('/email/attList', {params: {emailId}})
+}
+
+export function emailLatest(emailId,accountId) {
+    return http.get('/email/latest',{params: {emailId,accountId}})
+}
--- a/mail-vue/src/request/login.js
+++ b/mail-vue/src/request/login.js
@@ -0,0 +1,13 @@
+import http from '@/axios/index.js';
+
+export function login(email, password) {
+    return http.post('/login', {email: email, password: password})
+}
+
+export function logout() {
+    return http.delete('/logout')
+}
+
+export function register(form) {
+    return http.post('/register', form)
+}
--- a/mail-vue/src/request/send.js
+++ b/mail-vue/src/request/send.js
@@ -0,0 +1,13 @@
+import http from "@/axios/index.js";
+
+export function sendEmail(form) {
+    return http.post('/send/sendEmail', form)
+}
+
+export function sendList(accountId, sendId, size) {
+    return http.get('/send/list',{ params: {accountId, sendId, size}})
+}
+
+export function sendDelete(sendIds) {
+    return http.delete('/send/delete?sendIds=' + sendIds);
+}
--- a/mail-vue/src/request/setting.js
+++ b/mail-vue/src/request/setting.js
@@ -0,0 +1,9 @@
+import http from '@/axios/index.js';
+
+export function settingSet(setting) {
+    return http.put('/setting/set',setting)
+}
+
+export function settingQuery() {
+    return http.get('/setting/query')
+}
--- a/mail-vue/src/request/star.js
+++ b/mail-vue/src/request/star.js
@@ -0,0 +1,13 @@
+import http from "@/axios/index.js";
+
+export function starAdd(emailId) {
+    return http.post('/star/add', {emailId})
+}
+
+export function starCancel(emailId) {
+    return http.delete('/star/cancel', {params: {emailId}})
+}
+
+export function starList(emailId,size) {
+    return http.get('/star/list', {params: {emailId,size}})
+}
--- a/mail-vue/src/request/user.js
+++ b/mail-vue/src/request/user.js
@@ -0,0 +1,13 @@
+import http from '@/axios/index.js';
+
+export function loginUserInfo() {
+    return http.get('/user/loginUserInfo')
+}
+
+export function resetPassword(password) {
+    return http.put('/user/resetPassword', {password})
+}
+
+export function userDelete() {
+    return http.delete('/user/delete')
+}
--- a/mail-vue/src/router/index.js
+++ b/mail-vue/src/router/index.js
@@ -0,0 +1,184 @@
+import {createRouter, createWebHashHistory} from 'vue-router'
+import {loginUserInfo} from "@/request/user.js";
+import {useUiStore} from "@/store/ui.js";
+import {useAccountStore} from "@/store/account.js";
+import {useUserStore} from "@/store/user.js";
+import {useSettingStore} from "@/store/setting.js";
+
+const routes = [
+    {
+        path: '/',
+        name: 'layout',
+        redirect: '/email',
+        component: () => import('@/layout/index.vue'),
+        children: [
+            {
+                path: '/email',
+                name: 'email',
+                component: () => import('@/views/email/index.vue'),
+                meta: {
+                    title: '收件箱',
+                    name: 'email',
+                    menu: true
+                }
+            },
+            {
+                path: '/content',
+                name: 'content',
+                component: () => import('@/views/content/index.vue'),
+                meta: {
+                    title: '邮件详情',
+                    name: 'content',
+                    menu: false
+                }
+            },
+            {
+                path: '/setting',
+                name: 'setting',
+                component: () => import('@/views/setting/index.vue'),
+                meta: {
+                    title: '个人设置',
+                    name: 'setting',
+                    menu: true
+                }
+            },
+            {
+                path: '/sys-setting',
+                name: 'sys-setting',
+                component: () => import('@/views/sys-setting/index.vue'),
+                meta: {
+                    title: '系统设置',
+                    name: 'sys-setting',
+                    menu: true
+                }
+            },
+            {
+                path: '/star',
+                name: 'star',
+                component: () => import('@/views/star/index.vue'),
+                meta: {
+                    title: '星标邮件',
+                    name: 'star',
+                    menu: true
+                }
+            },
+        ]
+
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('@/views/login/index.vue')
+    },
+    {
+        path: '/test',
+        name: 'test',
+        component: () => import('@/views/test/index.vue')
+    }
+]
+
+
+const router = createRouter({
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes
+})
+
+let firstLogin = true
+
+router.beforeEach(async (to, from, next) => {
+
+    const uiStore = useUiStore()
+
+    if (uiStore.init && to.name === 'login') {
+        await initSetting()
+    }
+
+    const token = localStorage.getItem('token')
+
+    if (!token && to.name !== 'login') {
+        return next({
+            name: 'login'
+        })
+    }
+
+    if (!token && to.name === 'login') {
+        return next()
+    }
+
+    if (uiStore.init && to.name !== 'login') {
+        await initSettingAndUserInfo()
+        firstLogin = false
+        return next()
+    }
+
+    if (firstLogin) {
+        await initUserInfo()
+        firstLogin = false
+        return  next()
+    }
+
+    next()
+
+})
+
+router.afterEach((to) => {
+
+    const uiStore = useUiStore()
+    if (to.meta.menu) {
+        if (['content', 'email'].includes(to.meta.name)) {
+            uiStore.accountShow = window.innerWidth > 767;
+        } else {
+            uiStore.accountShow = false
+        }
+    }
+
+    if (to.name === 'login') {
+        firstLogin = true
+    }
+
+    if (window.innerWidth < 768) {
+        uiStore.asideShow = false
+    }
+})
+
+
+async function initSettingAndUserInfo() {
+    const uiStore = useUiStore()
+    const userStore = useUserStore()
+    const settingStore = useSettingStore()
+    const accountStore = useAccountStore()
+    const [setting,user] = await Promise.all([settingStore.initSetting(),loginUserInfo()])
+    uiStore.init = false
+    accountStore.currentAccountId = user.accountId
+    userStore.user = user
+}
+
+
+async function initUserInfo() {
+    const uiStore = useUiStore()
+    const userStore = useUserStore()
+    try {
+        const user = await loginUserInfo()
+        const accountStore = useAccountStore()
+        accountStore.currentAccountId = user.accountId
+        userStore.user = user
+        uiStore.loginLoading = false
+    } catch (e) {
+        uiStore.loginLoading = false
+        throw e
+    }
+}
+
+
+async function initSetting() {
+    const settingStore = useSettingStore()
+    const uiStore = useUiStore()
+    try {
+        await settingStore.initSetting();
+        uiStore.init = false
+    } catch (e) {
+        throw e
+    }
+}
+
+export default router
--- a/mail-vue/src/store/account.js
+++ b/mail-vue/src/store/account.js
@@ -0,0 +1,7 @@
+    import { defineStore } from 'pinia'
+
+export const useAccountStore = defineStore('account', {
+    state: () => ({
+        currentAccountId: 0,
+    })
+})
--- a/mail-vue/src/store/email.js
+++ b/mail-vue/src/store/email.js
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const useEmailStore = defineStore('email', {
+    state: () => ({
+        deleteIds: 0,
+        starScroll: null,
+        emailScroll: null,
+        readEmail: {},
+    }),
+    persist: {
+        pick: ['readEmail'],
+    },
+})
--- a/mail-vue/src/store/send.js
+++ b/mail-vue/src/store/send.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useSendStore = defineStore('send', {
+    state: () => ({
+        deleteId: 0
+    })
+})
--- a/mail-vue/src/store/setting.js
+++ b/mail-vue/src/store/setting.js
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { settingQuery} from "@/request/setting.js";
+
+export const useSettingStore = defineStore('setting', {
+    state: () => ({
+        domainList: [],
+        settings: {
+            title: '-'
+        }
+    }),
+    actions: {
+        async initSetting() {
+            if (this.domainList.length === 0) {
+                const data = await settingQuery()
+                this.domainList.push(...data.domainList)
+                delete data.domainList
+                this.settings = data
+            }
+        }
+    }
+})
--- a/mail-vue/src/store/ui.js
+++ b/mail-vue/src/store/ui.js
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const useUiStore = defineStore('ui', {
+    state: () => ({
+        asideShow: window.innerWidth > 991,
+        loginLoading: false,
+        accountShow: false,
+        init: true,
+    }),
+    persist: {
+        pick: ['accountShow'],
+    },
+})
--- a/mail-vue/src/store/user.js
+++ b/mail-vue/src/store/user.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+    state: () => ({
+        user: {},
+    })
+})
--- a/mail-vue/src/store/writer.js
+++ b/mail-vue/src/store/writer.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+    state: () => ({
+
+    })
+})
--- a/mail-vue/src/style.css
+++ b/mail-vue/src/style.css
@@ -0,0 +1,79 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+a{
+    color: #333;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+}
+
+@font-face {
+    font-family: 'HarmonyOS';
+    src: url('@/assets/fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+:deep(.el-input__inner:focus) {
+    background-color: transparent !important;
+    border-color: #dcdfe6 !important;
+}
+
+body {
+    font-family: 'HarmonyOS', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif;
+    line-height: 1.5;
+    color: #333;
+    background-color: #fff;
+    font-size: 14px;
+}
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+ul, ol {
+    list-style: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+button, input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    outline: none;
+    border: none;
+    background: none;
+}
+
+*:focus {
+    outline: none;
+}
+
+:root {
+    --el-color-primary: #1890ff;
+    --el-color-primary-dark-2: #1064c0;
+    --el-color-primary-light-3: #4dabff;
+    --el-color-primary-light-5: #69c0ff;
+    --el-color-primary-light-7: #91d5ff;
+    --el-color-primary-light-9: #e6f7ff;
+    --el-text-color-regular: #333;
+}
--- a/mail-vue/src/utils/convert-utils.js
+++ b/mail-vue/src/utils/convert-utils.js
@@ -0,0 +1,6 @@
+import {useSettingStore} from "@/store/setting.js";
+
+export function cvtR2Url(key) {
+    const settingStore = useSettingStore();
+    return 'https://' + settingStore.settings.r2Domain + '/' + key
+}
--- a/mail-vue/src/utils/file-utils.js
+++ b/mail-vue/src/utils/file-utils.js
@@ -0,0 +1,13 @@
+export function getExtName(fileName) {
+    const index = fileName.lastIndexOf('.')
+    return index !== -1 ? fileName.slice(index + 1).toLowerCase() : ''
+}
+
+export function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const size = (bytes / Math.pow(k, i)).toFixed(2);
+    return `${size} ${units[i]}`;
+}
--- a/mail-vue/src/utils/time-utils.js
+++ b/mail-vue/src/utils/time-utils.js
@@ -0,0 +1,3 @@
+export function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms))
+}
--- a/mail-vue/src/utils/verify-utils.js
+++ b/mail-vue/src/utils/verify-utils.js
@@ -0,0 +1,4 @@
+export function isEmail(email) {
+    const reg = /^[a-zA-Z0-9]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]+$/;
+    return reg.test(email);
+}
--- a/mail-vue/src/views/content/index.vue
+++ b/mail-vue/src/views/content/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="box">
+    <div class="header-actions">
+      <Icon class="icon" icon="material-symbols-light:arrow-back-ios-new" width="20" height="20" @click="handleBack"/>
+      <Icon class="icon" icon="uiw:delete" width="16" height="16" @click="handleDelete"/>
+      <Icon class="icon" @click="changeStar" v-if="email.isStar" icon="fluent-color:star-16" width="20" height="20"/>
+      <Icon class="icon" @click="changeStar" v-else icon="solar:star-line-duotone" width="18" height="18"/>
+    </div>
+    <div></div>
+    <el-scrollbar class="scrollbar">
+      <div class="container">
+        <div class="email-title">
+          {{ email.subject }}
+        </div>
+        <div class="content">
+          <div class="email-info">
+            <div>
+              <div class="send"><span class="send-source">发件人</span>
+                <div class="send-name">
+                  <span class="send-name-title">{{ email.name }}</span>
+                  <span><{{ email.sendEmail }}></span>
+                </div>
+              </div>
+              <div class="receive"><span class="source">收件人</span><span>{{ email.receiveEmail }}</span></div>
+              <div class="date">
+                <div>{{ formatDetailDate(email.createTime) }}</div>
+              </div>
+            </div>
+            <div class="icon">
+
+            </div>
+          </div>
+          <el-scrollbar class="htm-scrollbar">
+            <div v-html="email.content"/>
+          </el-scrollbar>
+          <div class="att" v-if="atts.length > 0">
+            <div class="att-title">附件列表</div>
+            <div class="att-item" v-for="att in atts" :key="att.attId">
+              <img v-if="isImage(att.filename)" class="att-image" :src="cvtR2Url(att.key)"/>
+              <div class="att-icon" v-else>
+                <Icon :icon="toIcon(att.filename)" width="20" height="20"/>
+              </div>
+              <div class="att-name">
+                {{ att.filename }}
+              </div>
+              <div>{{ formatBytes(att.size) }}</div>
+              <div class="down-icon att-icon">
+                <a :href="cvtR2Url(att.key)" download>
+                  <Icon icon="system-uicons:push-down" width="22" height="22"/>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup>
+import {reactive, watch} from "vue";
+import {useRouter} from 'vue-router'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {attList, emailDelete} from "@/request/email.js";
+import {Icon} from "@iconify/vue";
+import {useEmailStore} from "@/store/email.js";
+import {useAccountStore} from "@/store/account.js";
+import day from "@/day/day.js";
+import {starAdd, starCancel} from "@/request/star.js";
+import {getExtName, formatBytes} from "@/utils/file-utils.js";
+import {cvtR2Url} from "@/utils/convert-utils.js";
+
+const accountStore = useAccountStore();
+
+const emailStore = useEmailStore();
+
+const router = useRouter()
+const email = emailStore.readEmail
+const atts = reactive([])
+
+attList(email.emailId).then(list => {
+  atts.push(...list)
+})
+
+watch(() => accountStore.currentAccountId, () => {
+  handleBack()
+})
+
+function toIcon(filename) {
+  const extName = getExtName(filename)
+  if (['zip', 'rar', '7z', 'tar', 'tgz'].includes(extName)) return 'hugeicons:file-zip';
+  if (['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv'].includes(extName)) return 'fluent:video-clip-24-regular';
+  if (['txt', 'doc', 'docx', 'md'].includes(extName)) return 'hugeicons:google-doc'
+  if (['xls', 'csv', 'xlsx'].includes(extName)) return 'codicon:table';
+  if (['mp3', 'wav', 'aac', 'ogg', 'flac', 'm4a'].includes(extName)) return 'mynaui:music';
+  if (['.ppt', 'pptx', 'pps', 'potx', 'pot'].includes(extName)) return 'lsicon:file-ppt-filled'
+  if (extName === 'pdf') return 'hugeicons:pdf-02';
+  if (extName === 'apk') return 'proicons:android';
+  if (extName === 'exe') return 'bi:filetype-exe';
+  return "hugeicons:attachment-01"
+}
+
+
+function isImage(filename) {
+  return ['png', 'jpg', 'jpeg', 'bmp', 'gif'].includes(getExtName(filename))
+}
+
+
+const formatDetailDate = (time) => {
+  return day(time).format('YYYY年M月D日 ddd AH:mm')
+}
+
+function changeStar() {
+  if (email.isStar) {
+    email.isStar = 0;
+    starCancel(email.emailId).then(() => {
+      email.isStar = 0;
+      emailStore.emailScroll?.editEmailStar(email.emailId, 0)
+      emailStore.starScroll?.deleteEmail([email.emailId])
+    }).catch((e) => {
+      console.error(e)
+      email.isStar = 1;
+    })
+  } else {
+    email.isStar = 1;
+    starAdd(email.emailId).then(() => {
+      email.isStar = 1;
+      emailStore.emailScroll?.editEmailStar(email.emailId, 1)
+      emailStore.starScroll?.addItemStar(email)
+    }).catch((e) => {
+      console.error(e)
+      email.isStar = 0;
+    })
+  }
+}
+
+const handleBack = () => {
+  router.back()
+}
+
+const handleDelete = () => {
+  ElMessageBox.confirm('确认删除该邮件吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    emailDelete(email.value.emailId).then(() => {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+        plain: true,
+      })
+      emailStore.deleteIds = [email.value.emailId]
+    })
+    router.back()
+  })
+}
+</script>
+<style scoped lang="scss">
+.box {
+  height: 100%;
+  overflow: hidden;
+}
+
+.header-actions {
+  padding: 9px 15px;
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
+  font-size: 18px;
+
+  .icon {
+    cursor: pointer;
+  }
+}
+
+
+.scrollbar {
+  height: calc(100% - 38px);
+  width: 100%;
+}
+
+.container {
+  font-size: 14px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 10px;
+
+  .email-title {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .htm-scrollbar {
+    padding-bottom: 15px;
+    word-break: break-all;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    .att {
+      margin-top: 20px;
+      padding-top: 10px;
+      border-top: 1px solid #e7e9ec;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .att-title {
+        font-weight: bold;
+      }
+
+      .att-item {
+        div {
+          align-self: center;
+        }
+
+        padding: 10px;
+        border-radius: 4px;
+        align-self: start;
+        border: 1px solid #e7e9ec;
+        display: grid;
+        grid-template-columns: auto 1fr auto 20px;
+        gap: 10px;
+
+        .att-icon {
+          display: grid;
+        }
+
+        .att-name {
+
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+        }
+
+        .att-image {
+          width: 60px;
+          height: 60px;
+          object-fit: contain;
+        }
+
+        .down-icon {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .email-info {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #e7e9ec;
+      margin-bottom: 15px;
+
+      /*.date {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+      }*/
+
+      .date {
+        color: #585d69;
+        margin-bottom: 6px;
+      }
+
+      .send {
+        display: flex;
+        margin-bottom: 6px;
+
+        .send-name {
+          color: #585d69;
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .send-name-title {
+          padding-right: 10px;
+        }
+      }
+
+      .receive {
+        margin-bottom: 6px;
+
+        span:nth-child(2) {
+          color: #585d69;
+        }
+      }
+
+      .send-source {
+        white-space: nowrap;
+        font-weight: bold;
+        padding-right: 10px;
+      }
+
+      .source {
+        white-space: nowrap;
+        font-weight: bold;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+</style>
--- a/mail-vue/src/views/email/index.vue
+++ b/mail-vue/src/views/email/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <emailScroll ref="scroll"
+               :cancel-success="cancelStar"
+               :star-success="addStar"
+               :getEmailList="getEmailList"
+               :emailDelete="emailDelete"
+               :star-add="starAdd"
+               :star-cancel="starCancel"/>
+</template>
+
+<script setup>
+import {useAccountStore} from "@/store/account.js";
+import {useEmailStore} from "@/store/email.js";
+import {useSettingStore} from "@/store/setting.js";
+import emailScroll from "@/components/email-scroll/index.vue"
+import {emailList, emailDelete, emailLatest} from "@/request/email.js";
+import {starAdd, starCancel} from "@/request/star.js";
+import {defineOptions, onMounted, ref, watch} from "vue";
+import {sleep} from "@/utils/time-utils.js";
+
+defineOptions({
+  name: 'email'
+})
+
+const emailStore = useEmailStore();
+const accountStore = useAccountStore();
+const settingStore = useSettingStore();
+const scroll = ref({})
+
+onMounted(() => {
+  emailStore.emailScroll = scroll;
+  latest()
+})
+
+
+watch(() => accountStore.currentAccountId, () => {
+  scroll.value.refreshList();
+})
+
+async function latest() {
+  while (true) {
+    const latestId = scroll.value.emailList[0]?.emailId ?? 0
+
+    if (!scroll.value.firstLoad && settingStore.settings.autoRefreshTime) {
+      try {
+        const accountId = accountStore.currentAccountId
+        const list = await emailLatest(latestId,accountId)
+        if (accountId === accountStore.currentAccountId) {
+          scroll.value.emailList.unshift(...list)
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+    await sleep(settingStore.settings.autoRefreshTime * 1000)
+  }
+}
+
+function addStar(email) {
+  emailStore.starScroll?.addItemStar(email)
+}
+
+function cancelStar(email) {
+  emailStore.starScroll?.deleteEmail([email.emailId])
+}
+
+function getEmailList(emailId, size) {
+  return emailList(accountStore.currentAccountId, emailId, size)
+}
+
+</script>
+
--- a/mail-vue/src/views/login/index.vue
+++ b/mail-vue/src/views/login/index.vue
@@ -0,0 +1,451 @@
+<template>
+  <div id="box">
+    <div id="background-wrap">
+      <div class="x1 cloud"></div>
+      <div class="x2 cloud"></div>
+      <div class="x3 cloud"></div>
+      <div class="x4 cloud"></div>
+      <div class="x5 cloud"></div>
+    </div>
+    <div class="form-wrapper">
+      <el-form  autocomplete="off">
+        <div class="container" >
+          <span class="form-title">{{ settingStore.settings.title }}</span>
+          <div class="custom-style" v-if="settingStore.settings.register === 0">
+            <el-segmented v-model="show" :options="options" />
+          </div>
+          <div v-if="show === 'login'">
+            <el-input v-model="form.email" type="text" placeholder="邮箱" autocomplete="off">
+              <template #prefix>
+                <Icon icon="weui:email-outlined" width="22" height="22" />
+              </template>
+              <template #append>
+                <div  @click.stop="openSelect">
+                  <el-select
+                      ref="mySelect"
+                      v-model="suffix"
+                      placeholder="请选择"
+                      class="select"
+                  >
+                    <el-option
+                        v-for="item in domainList"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                    />
+                  </el-select>
+                  <div style="color: #333">
+                    <span >{{suffix}}</span>
+                    <Icon class="setting-icon" icon="mingcute:down-small-fill" width="20" height="20" />
+                  </div>
+                </div>
+              </template>
+            </el-input>
+            <el-input v-model="form.password" placeholder="密码" type="password" autocomplete="off">
+              <template #prefix>
+                <Icon icon="carbon:password" width="22" height="22" />
+              </template>
+            </el-input>
+            <el-button class="btn" type="primary" @click="submit" :loading="uiStore.loginLoading"
+            >登录
+            </el-button>
+          </div>
+          <div v-else>
+            <el-input v-model="registerForm.email" type="text" placeholder="邮箱" autocomplete="off">
+              <template #prefix>
+                <Icon icon="weui:email-outlined" width="22" height="22" />
+              </template>
+              <template #append>
+                <div  @click.stop="openSelect">
+                  <el-select
+                      ref="mySelect"
+                      v-model="suffix"
+                      placeholder="请选择"
+                      class="select"
+                  >
+                    <el-option
+                        v-for="item in domainList"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                    />
+                  </el-select>
+                  <div style="color: #333">
+                    <span>{{suffix}}</span>
+                    <Icon class="setting-icon" icon="mingcute:down-small-fill" width="20" height="20" />
+                  </div>
+                </div>
+              </template>
+            </el-input>
+            <el-input v-model="registerForm.password" placeholder="密码" type="password" autocomplete="off">
+              <template #prefix>
+                <Icon icon="carbon:password" width="22" height="22" />
+              </template>
+            </el-input>
+            <el-input v-model="registerForm.confirmPassword" placeholder="确认密码" type="password" autocomplete="off">
+              <template #prefix>
+                <Icon icon="carbon:password" width="22" height="22" />
+              </template>
+            </el-input>
+            <el-button class="btn" type="primary" @click="submitRegister" :loading="registerLoading"
+            >注册
+            </el-button>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <el-dialog
+        v-model="verifyShow"
+        title="验证你是不是人"
+        width="332"
+        align-center
+    >
+      <div
+          class="register-turnstile"
+          :data-sitekey="settingStore.settings.siteKey"
+          data-callback="onTurnstileSuccess"
+      ></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import router from "@/router";
+import {nextTick, reactive, ref} from "vue";
+import {login} from "@/request/login.js";
+import {register} from "@/request/login.js";
+import {ElMessage} from 'element-plus'
+import {isEmail} from "@/utils/verify-utils.js";
+import {useUiStore} from "@/store/ui.js";
+import {useSettingStore} from "@/store/setting.js";
+import {Icon} from "@iconify/vue";
+
+const settingStore = useSettingStore();
+const uiStore = useUiStore()
+const show = ref('login')
+const form = reactive({
+  email: '',
+  password: '',
+
+});
+const options = [{label: '登录', value: 'login'},{label: '注册', value: 'register'}];
+const mySelect = ref()
+const suffix = ref('')
+const registerForm = reactive({
+  email: '',
+  password: '',
+  confirmPassword: ''
+})
+const domainList =  settingStore.domainList;
+const registerLoading = ref(false)
+suffix.value = domainList[0]
+const verifyShow = ref(false)
+let verifyToken = ''
+let turnstileId = ''
+
+window.onTurnstileSuccess = (token) => {
+  verifyToken = token;
+  setTimeout(() => {
+    verifyShow.value = false
+  },1500)
+};
+
+const openSelect = () => {
+  mySelect.value.toggleMenu()
+}
+
+
+const submit = () => {
+
+  if (!form.email) {
+    ElMessage({
+      message: '邮箱不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (!isEmail(form.email + suffix.value)) {
+    ElMessage({
+      message: '输入的邮箱不合法',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (!form.password) {
+    ElMessage({
+      message: '密码不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (form.password.length < 6) {
+    ElMessage({
+      message: '密码最少六位',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  uiStore.loginLoading = true
+  login(form.email+suffix.value, form.password).then(data => {
+    localStorage.setItem('token', data.token)
+    router.replace({name: 'layout'})
+  }).catch(() => {
+    uiStore.loginLoading = false
+  })
+}
+
+
+function submitRegister() {
+
+  if (!registerForm.email) {
+    ElMessage({
+      message: '邮箱不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (!isEmail(registerForm.email + suffix.value)) {
+    ElMessage({
+      message: '输入的邮箱不合法',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (!registerForm.password) {
+    ElMessage({
+      message: '密码不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (registerForm.password.length < 6) {
+    ElMessage({
+      message: '密码最少六位',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (registerForm.password !== registerForm.confirmPassword) {
+
+    ElMessage({
+      message: '两次密码输入不一致',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (!verifyToken && settingStore.settings.registerVerify === 0) {
+    verifyShow.value = true
+    if (!turnstileId) {
+      nextTick(() => {
+        turnstileId =  window.turnstile.render('.register-turnstile')
+      })
+    } else {
+      nextTick(() => {
+        window.turnstile.reset(turnstileId);
+      })
+    }
+    return;
+  }
+
+  registerLoading.value = true
+  register({email: registerForm.email + suffix.value, password: registerForm.password,token: verifyToken}).then(() => {
+    show.value = 'login'
+    registerForm.email = ''
+    registerForm.password = ''
+    registerForm.confirmPassword = ''
+    registerLoading.value = false
+    verifyToken = ''
+    ElMessage({
+      message: '注册成功',
+      type: 'success',
+      plain: true,
+    })
+  }).catch(res => {
+    if (res.code === 400) {
+      verifyToken = ''
+      window.turnstile.reset(turnstileId)
+      verifyShow.value = true
+    }
+    registerLoading.value = false
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.form-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  background: #FFFFFF;
+  padding: 20px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .switch {
+    padding-top: 10px;
+    font-size: 14px;
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .form-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+
+  .el-input {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+}
+
+form{
+  max-width: 410px;
+  padding: 0 20px;
+}
+
+.setting-icon {
+  position: relative;
+  top: 6px;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0 !important;
+  padding-left: 8px !important;
+  background: #FFFFFF;
+}
+
+.select {
+  position: absolute;
+  right: 30px;
+  width: 100px;
+  opacity: 0;
+  pointer-events: none;
+}
+.custom-style {
+  margin-bottom: 10px;
+}
+.custom-style .el-segmented {
+  --el-border-radius-base: 8px;
+  width: 180px;
+}
+
+#box {
+  background: linear-gradient(to bottom, #2980b9, #6dd5fa, #fff);
+  color: #333;
+  font: 100% Arial, sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+#background-wrap {
+  height: 100%;
+  z-index: 0;
+}
+
+@keyframes animateCloud {
+  0% {
+    margin-left: -500px;
+  }
+
+  100% {
+    margin-left: 100%;
+  }
+}
+
+.x1 {
+  animation: animateCloud 30s linear infinite;
+  transform: scale(0.65);
+}
+
+.x2 {
+  animation: animateCloud 15s linear infinite;
+  transform: scale(0.3);
+}
+
+.x3 {
+  animation: animateCloud 25s linear infinite;
+  transform: scale(0.5);
+}
+
+.x4 {
+  animation: animateCloud 13s linear infinite;
+  transform: scale(0.4);
+}
+
+.x5 {
+  animation: animateCloud 20s linear infinite;
+  transform: scale(0.55);
+}
+
+.cloud {
+  background: linear-gradient(to bottom, #fff 5%, #f1f1f1 100%);
+  border-radius: 100px;
+  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
+  height: 120px;
+  width: 350px;
+  position: relative;
+}
+
+.cloud:after,
+.cloud:before {
+  content: "";
+  position: absolute;
+  background: #fff;
+  z-index: -1;
+}
+
+.cloud:after {
+  border-radius: 100px;
+  height: 100px;
+  left: 50px;
+  top: -50px;
+  width: 100px;
+}
+
+.cloud:before {
+  border-radius: 200px;
+  height: 180px;
+  width: 180px;
+  right: 50px;
+  top: -90px;
+}
+
+</style>
--- a/mail-vue/src/views/setting/index.vue
+++ b/mail-vue/src/views/setting/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="box">
+    <div class="pass">
+      <div class="title">账户与密码</div>
+      <div class="pass-item">
+        <div>邮箱</div>
+        <div>{{ userStore.user.email }}</div>
+      </div>
+      <div class="pass-item">
+        <div>密码</div>
+        <div>
+          <el-button type="primary"  @click="pwdShow = true">修改密码</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="del-email">
+      <div class="title">删除账户</div>
+      <div style="color: #585d69;">
+        此操作将永久删除您的账户及其所有数据，无法恢复
+      </div>
+      <div>
+        <el-button type="primary" @click="deleteConfirm">删除账户</el-button>
+      </div>
+    </div>
+    <el-dialog v-model="pwdShow" title="修改密码" width="340">
+      <form>
+        <div class="update-pwd">
+          <el-input type="password"  placeholder="新的密码" v-model="form.password"/>
+          <el-input type="password"  placeholder="确认密码" v-model="form.newPwd"/>
+          <el-button type="primary" :loading="setPwdLoading"  @click="submitPwd">保存</el-button>
+        </div>
+      </form>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {defineOptions} from "vue";
+import {reactive, ref} from 'vue'
+import {resetPassword, userDelete} from "@/request/user.js";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useUserStore} from "@/store/user.js";
+import router from "@/router/index.js";
+const userStore = useUserStore();
+const setPwdLoading = ref(false)
+
+defineOptions({
+  name: 'setting'
+})
+
+const pwdShow = ref(false)
+const form = reactive({
+  password: '',
+  newPwd: '',
+})
+
+const deleteConfirm = () => {
+  ElMessageBox.confirm('确认删除当前账号及所有数据吗?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userDelete().then(() => {
+      localStorage.removeItem('token');
+      router.replace('/login');
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+        plain: true,
+      })
+    })
+  })
+}
+
+
+function submitPwd() {
+
+  if (!form.password) {
+    ElMessage({
+      message: '密码不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (form.password.length < 6) {
+    ElMessage({
+      message: '密码不能小于6位',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (form.password !== form.newPwd) {
+    ElMessage({
+      message: '两次密码输入不一致',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  setPwdLoading.value = true
+  resetPassword(form.password).then(() => {
+    ElMessage({
+      message: '修改成功',
+      type: 'success',
+      plain: true,
+    })
+    pwdShow.value = false
+    setPwdLoading.value = false
+    form.password = ''
+    form.newPwd = ''
+  }).catch(() => {
+    setPwdLoading.value = false
+  })
+
+}
+
+</script>
+<style scoped lang="scss">
+.box {
+  padding: 40px 40px;
+
+  .update-pwd {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .pass {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 40px;
+
+    .pass-item {
+      display: grid;
+      grid-template-columns: 50px 1fr;
+      gap: 140px;
+      @media (max-width: 767px) {
+        gap: 80px;
+      }
+      div:first-child {
+        font-weight: bold;
+      }
+      div:last-child {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .del-email {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+</style>
--- a/mail-vue/src/views/star/index.vue
+++ b/mail-vue/src/views/star/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <emailScroll type="star" ref="scroll"
+               :allow-star="false"
+               :cancel-success="cancelStar"
+               :getEmailList="starList"
+               :emailDelete="emailDelete"
+               :star-add="starAdd"
+               :star-cancel="starCancel"/>
+</template>
+
+<script setup>
+import emailScroll from "@/components/email-scroll/index.vue"
+import {emailDelete} from "@/request/email.js";
+import {starAdd, starCancel, starList} from "@/request/star.js";
+import {useEmailStore} from "@/store/email.js";
+import {defineOptions, onMounted, ref} from "vue";
+
+defineOptions({
+  name: 'star'
+})
+
+const scroll = ref({})
+const emailStore = useEmailStore();
+
+function cancelStar(email) {
+  emailStore.emailScroll?.editEmailStar(email.emailId, 0)
+  scroll.value.deleteEmail([email.emailId])
+}
+
+onMounted(() => {
+  emailStore.starScroll = scroll
+})
+
+</script>
--- a/mail-vue/src/views/sys-setting/index.vue
+++ b/mail-vue/src/views/sys-setting/index.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="box">
+    <div class="setting">
+      <div class="title">网站设置</div>
+      <div class="setting-item">
+        <div><span>用户注册</span></div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.register"/>
+        </div>
+      </div>
+      <div class="setting-item">
+        <div><span>添加邮箱</span></div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.addEmail"/>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div><span>邮件接收</span></div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.receive"/>
+        </div>
+      </div>
+      <div class="setting-item">
+        <div><span>注册验证</span></div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.registerVerify"/>
+        </div>
+      </div>
+      <div class="setting-item">
+        <div><span>添加验证</span></div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.addEmailVerify"/>
+        </div>
+      </div>
+      <div class="setting-item">
+        <div>
+          <span>多号模式</span>
+          <el-popover
+              content="开启后账号栏出现一个用户可以添加多个邮箱"
+          >
+            <template #reference>
+              <Icon class="warning" icon="fe:warning" width="20" height="20" />
+            </template>
+          </el-popover>
+        </div>
+        <div>
+          <el-switch @change="change" :before-change="beforeChange" :active-value="0" :inactive-value="1"
+                     v-model="setting.manyEmail"/>
+        </div>
+      </div>
+      <div class="setting-item ">
+        <div>
+          <span>轮询刷新</span>
+          <el-popover
+
+              content="轮询请求服务器获取最新邮件人多可能会超出免费额度"
+          >
+            <template #reference>
+              <Icon class="warning" icon="fe:warning" width="20" height="20" />
+            </template>
+          </el-popover>
+        </div>
+        <div class="item-select">
+          <el-select
+              @change="change"
+              style="width: 80px;"
+              v-model="setting.autoRefreshTime"
+              placeholder="Select"
+          >
+            <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+      <div class="setting-item">
+        <div class="title-item"><span>网站标题</span></div>
+        <div class="email-title">
+          <div>{{ setting.title }}</div>
+          <div @click="editTitleShow = true">
+            <Icon icon="iconamoon:edit-light" width="24" height="24"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-model="editTitleShow" title="修改标题" width="340" @close="editTitle = ''">
+      <form>
+        <el-input type="text" placeholder="网站标题" v-model="editTitle"/>
+        <el-button type="primary" :loading="editTitleLoading" @click="saveTitle">保存</el-button>
+      </form>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {defineOptions} from "vue";
+import {ref} from 'vue'
+import {settingSet} from "@/request/setting.js";
+import {ElMessage} from "element-plus";
+import {useSettingStore} from "@/store/setting.js";
+import {useUserStore} from "@/store/user.js";
+import {useAccountStore} from "@/store/account.js";
+import {Icon} from "@iconify/vue";
+
+defineOptions({
+  name: 'sys-setting'
+})
+
+const accountStore = useAccountStore();
+const userStore = useUserStore();
+const editTitleShow = ref(false)
+const settingStore = useSettingStore();
+let setting = ref(settingStore.settings)
+const editTitle = ref('')
+const editTitleLoading = ref(false)
+let backup = {}
+const options = [
+  {
+    label: '关闭',
+    value: 0,
+  },
+  {
+    label: '3s',
+    value: 3,
+  },
+  {
+    label: '5s',
+    value: 5,
+  },
+  {
+    label: '7s',
+    value: 7,
+  },
+  {
+    label: '10s',
+    value: 10,
+  },
+  {
+    label: '15s',
+    value: 15,
+  },
+  {
+    label: '20s',
+    value: 20,
+  }
+]
+
+function beforeChange() {
+  backup = JSON.stringify(setting.value)
+  return true
+}
+
+function change() {
+  editSetting(setting)
+}
+
+function saveTitle() {
+  backup = JSON.stringify(setting.value)
+  setting.value.title = editTitle.value
+  editSetting(setting)
+}
+
+function editSetting(setting) {
+  editTitleLoading.value = true
+  settingSet(setting.value).then(() => {
+    editTitleLoading.value = false
+    ElMessage({
+      message: "设置成功",
+      type: "success",
+      plain: true
+    })
+    if (setting.value.manyEmail === 1) {
+      accountStore.currentAccountId = userStore.user.accountId;
+    }
+    editTitleShow.value = false
+  }).catch(() => {
+    editTitleLoading.value = false
+    setting.value = JSON.parse(backup)
+  })
+}
+
+</script>
+<style scoped lang="scss">
+.box {
+
+  padding: 40px 40px;
+
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .setting {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 40px;
+
+    .setting-item {
+      display: flex;
+      gap: 140px;
+      font-weight: bold;
+      position: relative;
+      @media (max-width: 767px) {
+        gap: 80px;
+      }
+
+      >div:first-child {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+    }
+
+    .warning {
+      position: absolute;
+      left: 65px;
+      color: gray;
+    }
+  }
+}
+
+.email-title {
+  font-weight: normal !important;
+  display: flex;
+  gap: 10px;
+  div:first-child {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.el-button {
+  margin-top: 15px;
+  width: 100%;
+}
+</style>
--- a/mail-vue/src/views/test/index.vue
+++ b/mail-vue/src/views/test/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-scrollbar>
+    <div class="scrollbar-flex-content">
+      <p v-for="item in 1000" :key="item" class="scrollbar-demo-item">
+        {{ item }}
+      </p>
+    </div>
+  </el-scrollbar>
+</template>
+
+<style scoped>
+.scrollbar-flex-content {
+  display: grid;
+  grid-template-columns: 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px;
+  width: 40px;
+}
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-danger-light-9);
+  color: var(--el-color-danger);
+}
+</style>
--- a/mail-vue/vite.config.js
+++ b/mail-vue/vite.config.js
@@ -0,0 +1,31 @@
+import {defineConfig,loadEnv} from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, process.cwd(), 'VITE')
+  return {
+    server: {
+      host: true,
+      port: 3001,
+      hmr: true,
+    },
+    base: env.VITE_STATIC_URL || '/',
+    plugins: [vue()
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src')
+      }
+    },
+    build: {
+      outDir: '../mail-worker/dist',
+      emptyOutDir: true,
+      rollupOptions: {
+        output: {
+          manualChunks: () => 'all-in-one'
+        }
+      },
+      assetsInclude: ['**/*.json'],
+    }
+  }
+})
--- a/mail-worker/.editorconfig
+++ b/mail-worker/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
--- a/mail-worker/.prettierrc
+++ b/mail-worker/.prettierrc
@@ -0,0 +1,6 @@
+{
+	"printWidth": 140,
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true
+}
--- a/mail-worker/dist/assets/HarmonyOS_Sans_SC_Regular-D3EGA0gC.woff2
+++ b/mail-worker/dist/assets/HarmonyOS_Sans_SC_Regular-D3EGA0gC.woff2
--- a/mail-worker/dist/assets/favicon-C5dAZutX.svg
+++ b/mail-worker/dist/assets/favicon-C5dAZutX.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="#367af2" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail320)" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail321)" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail322)" fill-opacity="0.75" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail323)" fill-opacity="0.7" d="M2 10v12.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V10l-13.526 7.292a1 1 0 0 1-.948 0z"/><path fill="url(#fluentColorMail324)" d="M6.5 5A4.5 4.5 0 0 0 2 9.5v1.09l13.526 7.292a1 1 0 0 0 .948 0L30 10.59V9.5A4.5 4.5 0 0 0 25.5 5z"/><defs><linearGradient id="fluentColorMail320" x1="19.555" x2="26.862" y1="13.332" y2="27.873" gradientUnits="userSpaceOnUse"><stop offset=".199" stop-color="#0094f0" stop-opacity="0"/><stop offset=".431" stop-color="#0094f0"/></linearGradient><linearGradient id="fluentColorMail321" x1="12" x2="4.914" y1="11.79" y2="28.328" gradientUnits="userSpaceOnUse"><stop offset=".191" stop-color="#0094f0" stop-opacity="0"/><stop offset=".431" stop-color="#0094f0"/></linearGradient><linearGradient id="fluentColorMail322" x1="23.383" x2="24.532" y1="20.142" y2="28.575" gradientUnits="userSpaceOnUse"><stop stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="fluentColorMail323" x1="20.333" x2="22.43" y1="12.088" y2="29.25" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient><linearGradient id="fluentColorMail324" x1="10.318" x2="18.903" y1=".976" y2="23.436" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset=".462" stop-color="#29c3ff"/><stop offset="1" stop-color="#4894fe"/></linearGradient></defs></g></svg>
--- a/mail-worker/dist/assets/index-CBfzcbRL.js
+++ b/mail-worker/dist/assets/index-CBfzcbRL.js
--- a/mail-worker/dist/assets/index-Co3gDtCe.css
+++ b/mail-worker/dist/assets/index-Co3gDtCe.css
--- a/mail-worker/dist/index.html
+++ b/mail-worker/dist/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title></title>
+    <link rel="icon" href="/assets/favicon-C5dAZutX.svg" type="image/svg+xml">
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+  <script type="module" crossorigin src="/assets/index-CBfzcbRL.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-Co3gDtCe.css">
+</head>
+<body>
+<div id="app"></div>
+
+</body>
--- a/mail-worker/dist/vite.svg
+++ b/mail-worker/dist/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/mail-worker/package-lock.json
+++ b/mail-worker/package-lock.json
--- a/mail-worker/package.json
+++ b/mail-worker/package.json
@@ -0,0 +1,24 @@
+{
+	"name": "mail-cf",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "wrangler dev --config wrangler-dev.toml",
+		"test": "wrangler deploy --config wrangler-test.toml",
+		"deploy": "wrangler deploy",
+		"start": "wrangler dev"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
+		"vitest": "~3.0.7",
+		"wrangler": "^4.7.0"
+	},
+	"dependencies": {
+		"@cloudflare/vite-plugin": "^1.0.5",
+		"dayjs": "^1.11.13",
+		"drizzle-orm": "^0.42.0",
+		"hono": "^4.7.5",
+		"postal-mime": "^2.4.3",
+		"uuid": "^11.1.0"
+	}
+}
--- a/mail-worker/src/api/account-api.js
+++ b/mail-worker/src/api/account-api.js
@@ -0,0 +1,20 @@
+import app from '../hono/hono';
+import accountService from '../service/account-service';
+import result from '../model/result';
+import userContext from '../security/user-context';
+
+app.get('/account/list', async (c) => {
+	const list = await accountService.list(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok(list));
+});
+
+app.delete('/account/delete', async (c) => {
+	await accountService.delete(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok());
+});
+
+app.post('/account/add', async (c) => {
+	const account = await accountService.add(c, await c.req.json(), await userContext.getUserId(c));
+	return c.json(result.ok(account));
+});
+
--- a/mail-worker/src/api/email-api.js
+++ b/mail-worker/src/api/email-api.js
@@ -0,0 +1,26 @@
+import app from '../hono/hono';
+import emailService from '../service/email-service';
+import result from '../model/result';
+import userContext from '../security/user-context';
+import attService from '../service/att-service';
+
+app.get('/email/list', async (c) => {
+	const data = await emailService.list(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok(data));
+});
+
+app.get('/email/latest',async (c) => {
+	const list = await emailService.latest(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok(list));
+})
+
+app.delete('/email/delete', async (c) => {
+	await emailService.delete(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok());
+});
+
+app.get('/email/attList', async (c) => {
+	const attList = await attService.list(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok(attList));
+})
+
--- a/mail-worker/src/api/login-api.js
+++ b/mail-worker/src/api/login-api.js
@@ -0,0 +1,19 @@
+import app from '../hono/hono';
+import loginService from '../service/login-service';
+import result from '../model/result';
+import userContext from '../security/user-context';
+
+app.post('/login', async (c) => {
+	const token = await loginService.login(c, await c.req.json());
+	return c.json(result.ok({ token: token }));
+});
+
+app.post('/register', async (c) => {
+	const jwt = await loginService.register(c, await c.req.json());
+	return c.json(result.ok(jwt));
+});
+
+app.delete('/logout', async (c) => {
+	await loginService.logout(c, await userContext.getUserId(c));
+	return c.json(result.ok());
+});
--- a/mail-worker/src/api/setting-api.js
+++ b/mail-worker/src/api/setting-api.js
@@ -0,0 +1,13 @@
+import app from '../hono/hono';
+import result from '../model/result';
+import settingService from '../service/setting-service';
+
+app.put('/setting/set', async (c) => {
+	await settingService.set(c, await c.req.json());
+	return c.json(result.ok());
+})
+
+app.get('/setting/query', async (c) => {
+	const setting = await settingService.query(c);
+	return c.json(result.ok(setting));
+})
--- a/mail-worker/src/api/star-api.js
+++ b/mail-worker/src/api/star-api.js
@@ -0,0 +1,19 @@
+import app from '../hono/hono';
+import startService from '../service/star-service';
+import userContext from '../security/user-context';
+import result from '../model/result';
+
+app.post('/star/add', async (c) => {
+	await startService.add(c, await c.req.json(), await userContext.getUserId(c));
+	return c.json(result.ok());
+});
+
+app.get('/star/list', async (c) => {
+	const data = await startService.list(c, c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok(data));
+});
+
+app.delete('/star/cancel', async (c) => {
+	await startService.cancel(c, await c.req.query(), await userContext.getUserId(c));
+	return c.json(result.ok());
+});
--- a/mail-worker/src/api/test-api.js
+++ b/mail-worker/src/api/test-api.js
@@ -0,0 +1 @@
+import app from '../hono/hono';
--- a/mail-worker/src/api/user-api.js
+++ b/mail-worker/src/api/user-api.js
@@ -0,0 +1,23 @@
+import app from '../hono/hono';
+import userService from '../service/user-service';
+import result from '../model/result';
+import userContext from '../security/user-context';
+
+app.get('/user/loginUserInfo', async (c) => {
+	const user = await userService.loginUserInfo(c, await userContext.getUserId(c));
+	return c.json(result.ok(user));
+});
+
+app.put('/user/resetPassword', async (c) => {
+	await userService.resetPassword(c, await c.req.json(), await userContext.getUserId(c));
+	return c.json(result.ok());
+});
+
+app.delete('/user/delete', async (c) => {
+	await userService.delete(c, await userContext.getUserId(c));
+	return c.json(result.ok());
+})
+
+
+
+
--- a/mail-worker/src/const/constant.js
+++ b/mail-worker/src/const/constant.js
@@ -0,0 +1,10 @@
+const constant = {
+
+	TOKEN_HEADER: 'Authorization',
+	JWT_UID: 'user_id:',
+	JWT_TOKEN: 'token:',
+	TOKEN_EXPIRE: 60 * 60 * 24 * 30,
+	ATTACHMENT_PREFIX: 'attachments/'
+}
+
+export default constant
--- a/mail-worker/src/const/entity-const.js
+++ b/mail-worker/src/const/entity-const.js
@@ -0,0 +1,42 @@
+export const userConst = {
+	type: {
+		COMMON: 1,
+		ADMIN: 0,
+	},
+}
+
+export const settingConst = {
+	register: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	receive: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	send: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	addEmail: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	manyEmail: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	registerVerify: {
+		OPEN: 0,
+		CLOSE: 1,
+	},
+	addEmailVerify: {
+		OPEN: 0,
+		CLOSE: 1,
+	}
+}
+
+export const isDel = {
+	DELETE: 1,
+	NORMAL: 0
+}
--- a/mail-worker/src/const/kv-const.js
+++ b/mail-worker/src/const/kv-const.js
@@ -0,0 +1,6 @@
+const KvConst = {
+	AUTH_INFO: 'auth-uid:',
+	SETTING: 'setting:',
+}
+
+export default KvConst;
--- a/mail-worker/src/email/email.js
+++ b/mail-worker/src/email/email.js
@@ -0,0 +1,77 @@
+import PostalMime from 'postal-mime';
+import emailService from '../service/email-service';
+import accountService from '../service/account-service';
+import { isDel } from '../const/entity-const';
+import settingService from '../service/setting-service';
+import attService from '../service/att-service';
+import r2Service from '../service/r2-service';
+import constant from '../const/constant';
+import { v4 as uuidv4 } from 'uuid';
+import fileUtils from '../utils/file-utils';
+
+export async function email(message, env, ctx) {
+
+	try {
+
+		if (!await settingService.isReceive({ env })) {
+			return;
+		}
+
+		const account = await accountService.selectByEmailIncludeDel({ env: env }, message.to);
+
+		const reader = message.raw.getReader();
+		let content = '';
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			content += new TextDecoder().decode(value);
+		}
+
+		const email = await PostalMime.parse(content);
+
+		const params = {
+			sendEmail: email.from.address,
+			name: email.from.name,
+			receiveEmail: message.to,
+			subject: email.subject,
+			content: email.html,
+			text: email.text,
+			userId: account.userId,
+			accountId: account.accountId
+		};
+
+		const emailRow = await emailService.receive({ env }, params);
+
+
+		if (email.attachments.length > 0) {
+
+			let attachments = email.attachments.map(item => {
+				let attachment = { ...item };
+				attachment.emailId = emailRow.emailId;
+				attachment.userId = emailRow.userId;
+				attachment.accountId = emailRow.accountId;
+				attachment.key = constant.ATTACHMENT_PREFIX + uuidv4() + fileUtils.getExtFileName(item.filename);
+				attachment.size = item.content.length ?? item.content.byteLength;
+				return attachment;
+			});
+
+			await attService.addAtt({ env }, attachments);
+
+			if (!env.r2) {
+				console.log('r2对象存储未配置, 附件取消保存');
+				return;
+			}
+
+			for (let attachment of attachments) {
+				await r2Service.putObj({ env }, attachment.key, attachment.content, {
+					contentType: attachment.mimeType,
+					contentDisposition: `attachment; filename="${attachment.filename}"`
+				});
+			}
+
+		}
+	} catch (e) {
+		console.error('邮件接收异常: ', e);
+	}
+}
--- a/mail-worker/src/entity/account.js
+++ b/mail-worker/src/entity/account.js
@@ -0,0 +1,12 @@
+import { sqliteTable, text, integer} from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+export const account = sqliteTable('account', {
+	accountId: integer('account_id').primaryKey({ autoIncrement: true }),
+	email: text('email').notNull(),
+	status: integer('status').default(0).notNull(),
+	latestEmailTime: text('latest_email_time'),
+	createTime: text('create_time').default(sql`CURRENT_TIMESTAMP`),
+	userId: integer('user_id').notNull(),
+	isDel: integer('is_del').default(0).notNull(),
+});
+export default account
--- a/mail-worker/src/entity/att.js
+++ b/mail-worker/src/entity/att.js
@@ -0,0 +1,19 @@
+import { sqliteTable, integer, text } from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+
+export const att = sqliteTable('attachments', {
+	attId: integer('att_id').primaryKey({ autoIncrement: true }),
+	userId: integer('user_id').notNull(),
+	emailId: integer('email_id').notNull(),
+	accountId: integer('account_id').notNull(),
+	key: text('key').notNull(),
+	filename: text('filename'),
+	mimeType: text('mime_type'),
+	size: integer('size'),
+	disposition: text('disposition'),
+	related: text('related'),
+	contentId: text('content_id'),
+	encoding: text('encoding'),
+	createTime: text('create_time').default(sql`CURRENT_TIMESTAMP`).notNull(),
+});
+
--- a/mail-worker/src/entity/email.js
+++ b/mail-worker/src/entity/email.js
@@ -0,0 +1,16 @@
+import { sqliteTable, text, integer} from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+export const email = sqliteTable('email', {
+	emailId: integer('email_id').primaryKey({ autoIncrement: true }),
+	sendEmail: text('send_email'),
+	name: text('name'),
+	receiveEmail: text('receive_email').notNull(),
+	accountId: integer('account_id').notNull(),
+	userId: integer('user_id').notNull(),
+	subject: text('subject'),
+	text: text('text'),
+	content: text('content'),
+	createTime: text('create_time').default(sql`CURRENT_TIMESTAMP`).notNull(),
+	isDel: integer('is_del').default(0).notNull()
+});
+export default email
--- a/mail-worker/src/entity/orm.js
+++ b/mail-worker/src/entity/orm.js
@@ -0,0 +1,5 @@
+import { drizzle } from 'drizzle-orm/d1';
+
+export default function orm(c) {
+	return drizzle(c.env.db,{logger: false})
+}
--- a/mail-worker/src/entity/setting.js
+++ b/mail-worker/src/entity/setting.js
@@ -0,0 +1,12 @@
+import { sqliteTable, text, integer} from 'drizzle-orm/sqlite-core';
+export const setting = sqliteTable('setting', {
+	register: integer('register').default(0).notNull(),
+	receive: integer('receive').default(0).notNull(),
+	title: text('title').default('').notNull(),
+	manyEmail: integer('many_email').default(1).notNull(),
+	addEmail: integer('add_email').default(0).notNull(),
+	autoRefreshTime: integer('auto_refresh_time').default(0).notNull(),
+	registerVerify: integer('register_verify').default(1).notNull(),
+	addEmailVerify: integer('add_email_verify').default(1).notNull()
+});
+export default setting
--- a/mail-worker/src/entity/star.js
+++ b/mail-worker/src/entity/star.js
@@ -0,0 +1,11 @@
+import { sqliteTable, integer, text } from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+
+export const star = sqliteTable('star', {
+	starId: integer('star_id').primaryKey({ autoIncrement: true }),
+	userId: integer('user_id').notNull(),
+	emailId: integer('email_id').notNull(),
+	createTime: text('create_time')
+		.notNull()
+		.default(sql`CURRENT_TIMESTAMP`),
+});
--- a/mail-worker/src/entity/user.js
+++ b/mail-worker/src/entity/user.js
@@ -0,0 +1,14 @@
+import { sqliteTable, text, integer} from 'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+const user = sqliteTable('user', {
+	userId: integer('user_id').primaryKey({ autoIncrement: true }),
+	email: text('email').notNull(),
+	type: integer('type').default(1).notNull(),
+	password: text('password').notNull(),
+	salt: text('salt').notNull(),
+	status: integer('status').default(0).notNull(),
+	createTime: text('create_time').default(sql`CURRENT_TIMESTAMP`),
+	activeTime: text('active_time'),
+	isDel: integer('is_del').default(0).notNull(),
+});
+export default user
--- a/mail-worker/src/error/biz-error.js
+++ b/mail-worker/src/error/biz-error.js
@@ -0,0 +1,9 @@
+class BizError extends Error {
+	constructor(message, code) {
+		super(message);
+		this.code = code ? code : 501;
+		this.name = 'BizError';
+	}
+}
+
+export default BizError;
--- a/mail-worker/src/hono/hono.js
+++ b/mail-worker/src/hono/hono.js
@@ -0,0 +1,50 @@
+import { Hono } from 'hono';
+
+const app = new Hono();
+import initDB from '../init/init-db';
+import initCache from '../init/init-cache';
+import verify from '../security/security';
+import result from '../model/result';
+import { cors } from 'hono/cors';
+
+app.use('*', cors());
+
+let initStatus = true;
+app.use('*', async (c, next) => {
+	if (initStatus) {
+		await initDB(c);
+		initStatus = false;
+	}
+	await next();
+});
+
+
+let initCacheStatus = true;
+app.use('*', async (c, next) => {
+	if (initCacheStatus) {
+		await initCache(c);
+		initCacheStatus = false;
+	}
+	await next();
+});
+
+
+app.use('*', async (c, next) => {
+	if(await verify(c)) {
+		await next();
+	}
+});
+
+
+app.onError((err, c) => {
+	if (err.name === 'BizError') {
+		console.log(err.message);
+	}else {
+		console.error(err);
+	}
+	return c.json(result.fail(err.message, err.code));
+});
+
+export default app;
+
+
--- a/mail-worker/src/hono/webs.js
+++ b/mail-worker/src/hono/webs.js
@@ -0,0 +1,9 @@
+import app from './hono';
+import '../api/email-api';
+import '../api/user-api';
+import '../api/login-api';
+import '../api/setting-api';
+import '../api/account-api';
+import '../api/star-api';
+import '../api/test-api';
+export default app;
--- a/mail-worker/src/index.js
+++ b/mail-worker/src/index.js
@@ -0,0 +1,17 @@
+import app from './hono/webs';
+import { email } from './email/email';
+
+export default {
+	fetch(req, env, ctx) {
+		const url = new URL(req.url)
+		console.log(url.pathname)
+		if (url.pathname.startsWith('/api/')) {
+			url.pathname = url.pathname.replace('/api', '')
+			req = new Request(url.toString(), req)
+			return app.fetch(req, env, ctx);
+		}
+
+		return env.ASSETS.fetch(req);
+	},
+	email: email
+};
--- a/mail-worker/src/init/init-cache.js
+++ b/mail-worker/src/init/init-cache.js
@@ -0,0 +1,4 @@
+import settingService from '../service/setting-service';
+export default async function initCache(c) {
+	await settingService.refresh(c)
+}
--- a/mail-worker/src/init/init-db.js
+++ b/mail-worker/src/init/init-db.js
@@ -0,0 +1,96 @@
+export default async function initDB(c) {
+	await c.env.db.prepare(`
+  CREATE TABLE IF NOT EXISTS email (
+    email_id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+    send_email TEXT,
+	  name TEXT,
+		receive_email TEXT NOT NULL,
+		account_id INTEGER NOT NULL,
+		user_id INTEGER NOT NULL,
+    subject TEXT,
+    content TEXT,
+		text TEXT,
+    create_time DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+		is_del INTEGER DEFAULT 0 NOT NULL
+  )
+ `).run();
+
+	await c.env.db.prepare(`
+		CREATE TABLE IF NOT EXISTS star (
+		star_id INTEGER PRIMARY KEY AUTOINCREMENT,
+		user_id INTEGER NOT NULL,
+		email_id INTEGER NOT NULL,
+		create_time DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL
+		)
+	`).run();
+
+	await c.env.db.prepare(`
+		CREATE TABLE IF NOT EXISTS attachments (
+		att_id INTEGER PRIMARY KEY AUTOINCREMENT,
+		user_id INTEGER NOT NULL,
+		email_id INTEGER NOT NULL,
+		account_id INTEGER NOT NULL,
+		key TEXT NOT NULL,
+		filename TEXT,
+		mime_type TEXT,
+		size INTEGER,
+		disposition TEXT,
+		related TEXT,
+		content_id TEXT,
+		encoding TEXT,
+		create_time DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL
+		)
+	`).run();
+
+	await c.env.db.prepare(`
+  CREATE TABLE IF NOT EXISTS user (
+    user_id INTEGER PRIMARY KEY AUTOINCREMENT,
+    email TEXT NOT NULL,
+		type INTEGER DEFAULT 1 NOT NULL,
+		password TEXT NOT NULL,
+		salt TEXT NOT NULL,
+		status INTEGER DEFAULT 0 NOT NULL,
+		create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
+		active_time DATETIME,
+		is_del INTEGER DEFAULT 0 NOT NULL
+  )
+ `).run();
+
+	await c.env.db.prepare(`
+		CREATE TABLE IF NOT EXISTS account (
+		account_id INTEGER PRIMARY KEY AUTOINCREMENT,
+		email TEXT NOT NULL,
+		status INTEGER DEFAULT 0 NOT NULL,
+		latest_email_time DATETIME,
+		create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
+		user_id INTEGER NOT NULL,
+		is_del INTEGER DEFAULT 0 NOT NULL
+		)
+	`).run();
+
+	await c.env.db.prepare(`
+  CREATE TABLE IF NOT EXISTS setting (
+		register INTEGER NOT NULL,
+		receive INTEGER NOT NULL,
+		add_email INTEGER NOT NULL,
+		many_email INTEGER NOT NULL,
+		title TEXT NOT NULL,
+		auto_refresh_time INTEGER NOT NULL,
+		register_verify INTEGER NOT NULL,
+		add_email_verify INTEGER NOT NULL
+  )
+ `).run();
+
+	await c.env.db.prepare(`
+  INSERT INTO setting (register, receive,add_email,many_email,title,auto_refresh_time,register_verify,add_email_verify)
+  SELECT 0, 0, 0, 1, 'Cloud 邮箱', 0, 1, 1
+  WHERE NOT EXISTS (SELECT 1 FROM setting)
+`).run();
+
+}
+
+
+
+
+
+
--- a/mail-worker/src/model/result.js
+++ b/mail-worker/src/model/result.js
@@ -0,0 +1,9 @@
+const result = {
+	ok(data) {
+		return { code: 200, message: 'success', data: data ? data : null };
+	},
+	fail(message, code = 500) {
+		return { code, message };
+	}
+};
+export default result;
--- a/mail-worker/src/security/security.js
+++ b/mail-worker/src/security/security.js
@@ -0,0 +1,60 @@
+import BizError from '../error/biz-error';
+import constant from '../const/constant';
+import jwtUtils from '../utils/jwt-utils';
+import KvConst from '../const/kv-const';
+import { userConst } from '../const/entity-const';
+import dayjs from 'dayjs';
+
+const exclude = [
+	'/login',
+	'/register',
+	'/setting/query'
+];
+
+const adminPerm  = [
+	'/setting/set'
+]
+
+const verify = async (c) => {
+
+	if (c.req.path.startsWith('/test')) {
+		return true
+	}
+
+	if (exclude.includes(c.req.path)) {
+		return true;
+	}
+
+	const jwt = c.req.header(constant.TOKEN_HEADER);
+
+	const result  = await jwtUtils.verifyToken(c, jwt)
+
+	if (!result) {
+		throw new BizError('身份认证失效,请重新登录',401)
+	}
+
+	const {userId, token} = result
+	const authInfo = await c.env.kv.get(KvConst.AUTH_INFO + userId,{ type: 'json' });
+
+	if (!authInfo) {
+		throw new BizError('身份认证失效,请重新登录',401)
+	}
+
+	if(!authInfo.tokens.includes(token)) {
+		throw new BizError('身份认证失效,请重新登录',401)
+	}
+
+	if (adminPerm.includes(c.req.path) && c.env.admin !== authInfo.user.email) {
+		throw new BizError('权限不足',403)
+	}
+
+	if (dayjs().diff(dayjs(authInfo.createTime), 'day') >= 1) {
+		authInfo.refreshTime = new Date().toISOString()
+		await c.env.kv.put(KvConst.AUTH_INFO + userId, JSON.stringify(authInfo), { expirationTtl: constant.TOKEN_EXPIRE });
+	}
+
+	return true
+
+};
+
+export default verify;
--- a/mail-worker/src/security/user-context.js
+++ b/mail-worker/src/security/user-context.js
@@ -0,0 +1,16 @@
+import JwtUtils from '../utils/jwt-utils';
+import constant from '../const/constant';
+
+const userContext = {
+	async getUserId(c) {
+		const jwt = c.req.header(constant.TOKEN_HEADER);
+		const { userId } = await JwtUtils.verifyToken(c, jwt);
+		return Number(userId);
+	},
+	async getToken(c) {
+		const jwt = c.req.header(constant.TOKEN_HEADER);
+		const { token } = JwtUtils.verifyToken(c,jwt);
+		return token;
+	},
+};
+export default userContext;
--- a/mail-worker/src/service/account-service.js
+++ b/mail-worker/src/service/account-service.js
@@ -0,0 +1,127 @@
+import BizError from '../error/biz-error';
+import verifyUtils from '../utils/verify-utils';
+import emailUtils from '../utils/email-utils';
+import userService from './user-service';
+import emailService from './email-service';
+import orm from '../entity/orm';
+import account from '../entity/account';
+import { and, asc, eq, gt } from 'drizzle-orm';
+import { isDel } from '../const/entity-const';
+import settingService from './setting-service';
+import turnstileService from './turnstile-service';
+
+const accountService = {
+
+	async add(c, params, userId) {
+
+
+		if (!await settingService.isAddEmail(c)) {
+			throw new BizError('添加邮箱功能已关闭');
+		}
+
+		let { email, token } = params;
+
+		if (!email) {
+			throw new BizError('邮箱不能为空');
+		}
+
+		if (!verifyUtils.isEmail(email)) {
+			throw new BizError('非法邮箱');
+		}
+
+		if (!c.env.domain.includes(emailUtils.getDomain(email))) {
+			throw new BizError('未配置改邮箱域名');
+		}
+
+		const accountRow = await this.selectByEmailIncludeDel(c, email);
+
+		if (accountRow && accountRow.isDel === isDel.DELETE) {
+			throw new BizError('该邮箱已被注销');
+		}
+
+		if (accountRow) {
+			throw new BizError('该邮箱已被注册');
+		}
+
+		if (await settingService.isAddEmailVerify(c)) {
+			await turnstileService.verify(c, token);
+		}
+
+		return orm(c).insert(account).values({ email: email, userId: userId }).returning().get();
+	},
+
+	selectByEmailIncludeDel(c, email) {
+		return orm(c).select().from(account).where(eq(account.email, email)).get();
+	},
+
+	selectByEmail(c, email) {
+		return orm(c).select().from(account).where(
+			and(
+				eq(account.email, email),
+				eq(account.isDel, isDel.NORMAL)))
+			.get();
+	},
+
+	list(c, params, userId) {
+
+		let { accountId, size } = params;
+
+		accountId = Number(accountId);
+		size = Number(size);
+
+		if (size > 30) {
+			size = 30;
+		}
+
+		if (!accountId) {
+			accountId = 0;
+		}
+		return orm(c).select().from(account).where(
+			and(
+				eq(account.userId, userId),
+				eq(account.isDel, isDel.NORMAL),
+				gt(account.accountId, accountId)))
+			.orderBy(asc(account.accountId))
+			.limit(size)
+			.all();
+	},
+
+	async delete(c, params, userId) {
+
+		let { accountId } = params;
+
+		const user = await userService.selectById(c, userId);
+		const accountRow = await this.selectById(c, accountId);
+
+		if (accountRow.email === user.email) {
+			throw new BizError('不可以删除自己的邮箱');
+		}
+
+		if (accountRow.userId !== user.userId) {
+			throw new BizError('该邮箱不属于当前用户');
+		}
+
+		await orm(c).update(account).set({ isDel: isDel.DELETE }).where(
+			and(eq(account.userId, userId),
+				eq(account.accountId, accountId)))
+			.run();
+		await emailService.removeByAccountId(c, accountId);
+	},
+
+	selectById(c, accountId) {
+		return orm(c).select().from(account).where(
+			and(eq(account.accountId, accountId),
+				eq(account.isDel, isDel.NORMAL)))
+			.get();
+	},
+
+	async insert(c, params) {
+		await orm(c).insert(account).values({ ...params }).returning();
+	},
+
+	async removeByUserId(c, userId) {
+		await orm(c).update(account).set({ isDel: isDel.DELETE }).where(eq(account.userId, userId)).run();
+	}
+};
+
+export default accountService;
--- a/mail-worker/src/service/att-service.js
+++ b/mail-worker/src/service/att-service.js
@@ -0,0 +1,22 @@
+import orm from '../entity/orm';
+import { att } from '../entity/att';
+import { and, eq } from 'drizzle-orm';
+
+const attService = {
+	async addAtt(c, params) {
+		await orm(c).insert(att).values(params).run();
+	},
+	async list(c, params, userId) {
+		const { emailId } = params;
+
+		const list = await orm(c).select().from(att).where(
+			and(
+				eq(att.emailId, emailId),
+				eq(att.userId, userId)))
+			.all();
+
+		return list;
+	}
+};
+
+export default attService;
--- a/mail-worker/src/service/email-service.js
+++ b/mail-worker/src/service/email-service.js
@@ -0,0 +1,102 @@
+import orm from '../entity/orm';
+import email from '../entity/email';
+import { isDel } from '../const/entity-const';
+import { and, desc, eq, gt, inArray, lt, sql } from 'drizzle-orm';
+import { star } from '../entity/star';
+
+const emailService = {
+
+	async list(c, params, userId) {
+
+		let { emailId, accountId, size } = params;
+		size = Number(size);
+		emailId = Number(emailId);
+
+		if (size > 30) {
+			size = 30;
+		}
+
+		if (!emailId) {
+			emailId = 9999999999;
+		}
+
+		const list = await orm(c)
+			.select({
+				...email,
+				starId: star.starId
+			})
+			.from(email)
+			.leftJoin(
+				star,
+				and(
+					eq(star.emailId, email.emailId),
+					eq(star.userId, userId)
+				)
+			)
+			.where(
+				and(
+					lt(email.emailId, emailId),
+					eq(email.accountId, accountId),
+					eq(email.userId, userId),
+					eq(email.isDel, isDel.NORMAL)
+				)
+			)
+			.orderBy(desc(email.emailId))
+			.limit(size)
+			.all();
+
+		const resultList = list.map(item => ({
+			...item,
+			isStar: item.starId != null ? 1 : 0
+		}));
+
+		return { list: resultList };
+	},
+
+	async delete(c, params, userId) {
+		const { emailIds } = params;
+		const emailIdList = emailIds.split(',').map(Number);
+		await orm(c).update(email).set({ isDel: isDel.DELETE }).where(
+			and(
+				eq(email.userId, userId),
+				inArray(email.emailId, emailIdList)))
+			.run();
+	},
+
+	receive(c, params) {
+		return orm(c).insert(email).values({ ...params }).returning().get();
+	},
+
+	async removeByAccountId(c, accountId) {
+		await orm(c).update(email)
+			.set({ isDel: isDel.DELETE })
+			.where(eq(email.accountId, accountId))
+			.run();
+	},
+
+	async removeByUserId(c, userId) {
+		await orm(c).update(email).set({ isDel: isDel.DELETE }).where(eq(email.userId, userId)).run();
+	},
+	selectById(c, emailId) {
+		return orm(c).select().from(email).where(
+			and(eq(email.emailId, emailId),
+				eq(email.isDel, isDel.NORMAL)))
+			.get();
+	},
+
+	latest(c, params, userId) {
+		let { emailId,accountId } = params;
+		return orm(c).select().from(email).where(
+			and(
+				eq(email.userId, userId),
+				eq(email.isDel, isDel.NORMAL),
+				eq(email.accountId, accountId),
+				gt(email.emailId, emailId)
+			))
+			.orderBy(desc(email.emailId))
+			.limit(20);
+	}
+
+};
+
+export default emailService;
--- a/mail-worker/src/service/login-service.js
+++ b/mail-worker/src/service/login-service.js
@@ -0,0 +1,113 @@
+import BizError from '../error/biz-error';
+import userService from './user-service';
+import emailUtils from '../utils/email-utils';
+import { isDel, userConst } from '../const/entity-const';
+import JwtUtils from '../utils/jwt-utils';
+import { v4 as uuidv4 } from 'uuid';
+import KvConst from '../const/kv-const';
+import constant from '../const/constant';
+import userContext from '../security/user-context';
+import verifyUtils from '../utils/verify-utils';
+import accountService from './account-service';
+import settingService from './setting-service';
+import saltHashUtils from '../utils/crypto-utils';
+import cryptoUtils from '../utils/crypto-utils';
+import turnstileService from './turnstile-service';
+
+
+const loginService = {
+
+	async register(c, params) {
+
+		const { email, password, token } = params;
+
+		if (!await settingService.isRegister(c)) {
+			throw new BizError('注册功能已关闭');
+		}
+
+		if (!verifyUtils.isEmail(email)) {
+			throw new BizError('非法邮箱');
+		}
+
+		if (password.length < 6) {
+			throw new BizError('密码必须大于6位');
+		}
+
+		if (!c.env.domain.includes(emailUtils.getDomain(email))) {
+			throw new BizError('非法邮箱域名');
+		}
+
+		const userRow = await userService.selectByEmailIncludeDel(c, email);
+
+		if (userRow && userRow.isDel === isDel.DELETE) {
+			throw new BizError('该邮箱已被注销');
+		}
+
+		if (userRow) {
+			throw new BizError('该邮箱已被注册');
+		}
+
+		if (await settingService.isRegisterVerify(c)) {
+			await turnstileService.verify(c,token)
+		}
+
+		const { salt, hash } = await saltHashUtils.hashPassword(password);
+
+		const userId = await userService.insert(c, { email, password: hash, salt, type: userConst.type.COMMON });
+		await accountService.insert(c, { userId: userId, email });
+	},
+
+	async login(c, params) {
+
+		const { email, password } = params;
+
+		if (!email || !password) {
+			throw new BizError('邮箱和密码不能为空');
+		}
+
+		const userRow = await userService.selectByEmail(c, email);
+
+		if (!userRow) {
+			throw new BizError('该邮箱不存在');
+		}
+
+		if (!await cryptoUtils.verifyPassword(password, userRow.salt, userRow.password)) {
+			throw new BizError('密码输入错误');
+		}
+
+		const uuid = uuidv4();
+		const jwt = await JwtUtils.generateToken(c,{ userId: userRow.userId, token: uuid });
+
+		let authInfo = await c.env.kv.get(KvConst.AUTH_INFO + userRow.userId, { type: 'json' });
+
+		if (authInfo) {
+
+			authInfo.tokens.push(uuid);
+
+		} else {
+
+			authInfo = {
+				tokens: [],
+				user: userRow,
+				refreshTime: new Date().toISOString()
+			};
+
+			authInfo.tokens.push(uuid);
+
+		}
+
+		await c.env.kv.put(KvConst.AUTH_INFO + userRow.userId, JSON.stringify(authInfo), { expirationTtl: constant.TOKEN_EXPIRE });
+		return jwt;
+	},
+
+	async logout(c, userId) {
+		const token = await userContext.getToken(c);
+		const authInfo = await c.env.kv.get(KvConst.AUTH_INFO + userId, { type: 'json' });
+		const index = authInfo.tokens.findIndex(item => item === token);
+		authInfo.tokens.splice(index, 1);
+		await c.env.kv.put(KvConst.AUTH_INFO + userId, JSON.stringify(authInfo));
+	}
+
+};
+
+export default loginService;
--- a/mail-worker/src/service/r2-service.js
+++ b/mail-worker/src/service/r2-service.js
@@ -0,0 +1,11 @@
+const r2Service = {
+	async putObj(c, key, content, metadata) {
+		const body = typeof content === 'string'
+			? new TextEncoder().encode(content)
+			: content;
+		await c.env.r2.put(key, body, {
+			httpMetadata: {...metadata}
+		});
+	}
+};
+export default r2Service;
--- a/mail-worker/src/service/setting-service.js
+++ b/mail-worker/src/service/setting-service.js
@@ -0,0 +1,54 @@
+import KvConst from '../const/kv-const';
+import setting from '../entity/setting';
+import orm from '../entity/orm';
+import { settingConst } from '../const/entity-const';
+
+const settingService = {
+
+	async refresh(c) {
+		const settingRow = await orm(c).select().from(setting).get();
+		await c.env.kv.put(KvConst.SETTING, JSON.stringify(settingRow));
+	},
+
+	async query(c) {
+		const setting = await c.env.kv.get(KvConst.SETTING, { type: 'json' });
+		let domainList = c.env.domain;
+		domainList = domainList.map(item => '@' + item);
+		setting.domainList = domainList;
+		setting.siteKey = c.env.site_key;
+		setting.r2Domain = c.env.r2_domain;
+		return setting;
+	},
+
+	async set(c, params) {
+		await orm(c).update(setting).set({ ...params }).returning().get();
+		await this.refresh(c);
+	},
+
+	async isRegister(c) {
+		const { register } = await this.query(c);
+		return register === settingConst.register.OPEN;
+	},
+
+	async isReceive(c) {
+		const { receive } = await this.query(c);
+		return receive === settingConst.receive.OPEN;
+	},
+
+	async isAddEmail(c) {
+		const { addEmail, manyEmail } = await this.query(c);
+		return addEmail === settingConst.addEmail.OPEN && manyEmail === settingConst.manyEmail.OPEN;
+	},
+
+	async isRegisterVerify(c) {
+		const { registerVerify } = await this.query(c);
+		return registerVerify === settingConst.registerVerify.OPEN;
+	},
+
+	async isAddEmailVerify(c) {
+		const { addEmailVerify } = await this.query(c);
+		return addEmailVerify === settingConst.addEmailVerify.OPEN;
+	}
+};
+
+export default settingService;
--- a/mail-worker/src/service/star-service.js
+++ b/mail-worker/src/service/star-service.js
@@ -0,0 +1,69 @@
+import orm from '../entity/orm';
+import { star } from '../entity/star';
+import emailService from './email-service';
+import BizError from '../error/biz-error';
+import { and, desc, eq, lt, sql } from 'drizzle-orm';
+import email from '../entity/email';
+import { isDel } from '../const/entity-const';
+
+const startService = {
+
+	async add(c, params, userId) {
+		const { emailId } = params;
+		const email = await emailService.selectById(c, emailId);
+		if (!email) {
+			throw new BizError('星标的邮件不存在');
+		}
+		if (!email.userId === userId) {
+			throw new BizError('星标的邮件非当前用户所有');
+		}
+		const exist = await orm(c).select().from(star).where(
+			and(
+				eq(star.userId, userId),
+				eq(star.emailId, emailId)))
+			.get()
+
+		if (exist) {
+			return
+		}
+
+		await orm(c).insert(star).values({ userId, emailId }).run();
+	},
+
+	async cancel(c, params, userId) {
+		const { emailId } = params;
+		await orm(c).delete(star).where(
+			and(
+				eq(star.userId, userId),
+				eq(star.emailId, emailId)))
+			.run();
+	},
+
+	async list(c, params, userId) {
+		let { emailId, size } = params;
+		emailId = Number(emailId);
+		size = Number(size);
+
+		if (!emailId) {
+			emailId = 9999999999;
+		}
+
+		const list = await orm(c).select({
+			isStar: sql`1`.as('isStar'),
+			starId: star.starId
+			, ...email
+		}).from(star)
+			.leftJoin(email, eq(email.emailId, star.emailId))
+			.where(
+				and(
+					eq(star.userId, userId),
+					eq(email.isDel, isDel.NORMAL),
+					lt(star.emailId, emailId)))
+			.orderBy(desc(star.emailId))
+			.limit(size)
+			.all();
+		return { list };
+	}
+};
+
+export default startService;
--- a/mail-worker/src/service/turnstile-service.js
+++ b/mail-worker/src/service/turnstile-service.js
@@ -0,0 +1,30 @@
+import BizError from '../error/biz-error';
+
+const turnstileService = {
+
+	async verify(c, token) {
+
+		if (!token) {
+			throw new BizError('验证token不能为空');
+		}
+		const res = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded'
+			},
+			body: new URLSearchParams({
+				secret: c.env.secret_key,
+				response: token,
+				remoteip: c.req.header('cf-connecting-ip')
+			})
+		});
+
+		const result = await res.json();
+		console.log(result)
+		if (!result.success) {
+			throw new BizError('人机验证失败,请重试',400)
+		}
+	}
+};
+
+export default turnstileService;
--- a/mail-worker/src/service/user-service.js
+++ b/mail-worker/src/service/user-service.js
@@ -0,0 +1,67 @@
+import BizError from '../error/biz-error';
+import accountService from './account-service';
+import orm from '../entity/orm';
+import user from '../entity/user';
+import { eq, and } from 'drizzle-orm';
+import { isDel } from '../const/entity-const';
+import kvConst from '../const/kv-const';
+import cryptoUtils from '../utils/crypto-utils';
+
+const userService = {
+
+	async loginUserInfo(c, userId) {
+		let user = await userService.selectById(c, userId);
+		let account = await accountService.selectByEmailIncludeDel(c, user.email);
+		delete user.password;
+		delete user.salt;
+		user.accountId = account.accountId;
+		user.type = c.env.admin === user.email ? 0 : 1;
+		return user;
+	},
+
+	async resetPassword(c, params, userId) {
+
+		const { password } = params;
+
+		if (password < 6) {
+			throw new BizError('密码不能小于6位');
+		}
+		const { salt, hash } = await cryptoUtils.hashPassword(password);
+		await orm(c).update(user).set({ password: hash, salt: salt }).where(eq(user.userId, userId)).run();
+	},
+
+	selectByEmail(c, email) {
+		return orm(c).select().from(user).where(
+			and(
+				eq(user.email, email),
+				eq(user.isDel, isDel.NORMAL)))
+			.get();
+	},
+
+	async insert(c, params) {
+		const { userId } = await orm(c).insert(user).values({ ...params }).returning().get();
+		return userId;
+	},
+
+	selectByEmailIncludeDel(c, email) {
+		return orm(c).select().from(user).where(eq(user.email, email)).get();
+	},
+
+	selectById(c, userId) {
+		return orm(c).select().from(user).where(
+			and(
+				eq(user.userId, userId),
+				eq(user.isDel, isDel.NORMAL)))
+			.get();
+	},
+
+	async delete(c, userId) {
+		await orm(c).update(user).set({ isDel: isDel.DELETE }).where(eq(user.userId, userId)).run();
+		await Promise.all([
+			c.env.kv.delete(kvConst.AUTH_INFO + userId),
+			accountService.removeByUserId(c, userId)
+		]);
+	}
+};
+
+export default userService;
--- a/mail-worker/src/utils/crypto-utils.js
+++ b/mail-worker/src/utils/crypto-utils.js
@@ -0,0 +1,31 @@
+const encoder = new TextEncoder();
+
+const saltHashUtils = {
+
+	generateSalt(length = 16) {
+		const array = new Uint8Array(length);
+		crypto.getRandomValues(array);
+		return btoa(String.fromCharCode(...array));
+	},
+
+
+	async hashPassword(password) {
+		const salt = this.generateSalt();
+		const hash = await this.genHashPassword(password, salt);
+		return { salt, hash };
+	},
+
+	async genHashPassword(password, salt) {
+		const data = encoder.encode(salt + password);
+		const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+		const hashArray = Array.from(new Uint8Array(hashBuffer));
+		return btoa(String.fromCharCode(...hashArray));
+	},
+
+	async verifyPassword(inputPassword, salt, storedHash) {
+		const hash = await this.genHashPassword(inputPassword, salt);
+		return hash === storedHash;
+	}
+};
+
+export default saltHashUtils;
--- a/mail-worker/src/utils/email-utils.js
+++ b/mail-worker/src/utils/email-utils.js
@@ -0,0 +1,9 @@
+const emailUtils = {
+	getDomain(email) {
+		if (typeof email !== 'string') return ''
+		const parts = email.split('@')
+		return parts.length === 2 ? parts[1] : ''
+	}
+}
+
+export default emailUtils
--- a/mail-worker/src/utils/file-utils.js
+++ b/mail-worker/src/utils/file-utils.js
@@ -0,0 +1,9 @@
+const fileUtils = {
+	getExtFileName(filename) {
+		const index = filename.lastIndexOf('.');
+		return index !== -1 ? filename.slice(index) : '';
+	}
+};
+
+export default fileUtils
+
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>