shumengya/cloud-mail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增深色模式

Browse Source
This commit is contained in:
eoao
2025-08-22 00:13:56 +08:00
parent d3325f0fe3
commit ff8ba81661
180 changed files with 1867 additions and 3346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
mail-vue/src/layout/account/index.vue
View File

@@ -40,7 +40,7 @@
<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"/>
<el-skeleton-item variant="p" style="width: 70%; height: 20px; margin-bottom: 25px"/>
<div style="display: flex; justify-content: space-between">
<el-skeleton-item variant="text" style="width: 20px"/>
<el-skeleton-item variant="text" style="width: 20px"/>
@@ -92,7 +92,7 @@
:value="item"
/>
</el-select>
<div style="color: #333">
<div>
<span>{{ addForm.suffix }}</span>
<Icon class="setting-icon" icon="mingcute:down-small-fill" width="20" height="20"/>
</div>
@@ -428,7 +428,7 @@ path[fill="#ffdda1"] {
.account-box {
border-right: 1px solid var(--el-border-color) !important;
background-color: #FFF;
background-color: var(--el-bg-color);
height: 100%;
overflow: hidden;
@@ -436,7 +436,7 @@ path[fill="#ffdda1"] {
display: flex;
align-items: center;
height: 38px;
box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
box-shadow: var(--header-actions-border);
padding-left: 10px;
padding-right: 10px;
@@ -487,7 +487,7 @@ path[fill="#ffdda1"] {
}
.item {
background-color: #fff;
background-color: var(--el-bg-color);
border-radius: 8px;
padding: 12px 10px;
margin-bottom: 10px;
@@ -532,7 +532,7 @@ path[fill="#ffdda1"] {
}
.item-choose {
background: var(--el-color-primary-light-8);
background: var(--choose-account-background);
}
}
@@ -545,7 +545,7 @@ path[fill="#ffdda1"] {
:deep(.el-input-group__append) {
padding: 0 !important;
padding-left: 8px !important;
background: #FFFFFF;
background: var(--el-bg-color);
}
:deep(.el-dialog) {
@@ -567,7 +567,7 @@ path[fill="#ffdda1"] {
:deep(.el-pagination .el-select) {
width: 100px;
background: #FFF;
background: var(--el-bg-color);
}
.add-email-turnstile {

19
mail-vue/src/layout/aside/index.vue
View File

@@ -143,15 +143,15 @@ const route = useRoute();
:deep(.el-scrollbar__wrap--hidden-default ) {
background: #001529 !important;
background: var(--aside-backgound) !important;
}
:deep(.el-menu-item) {
background: #001529;
background: var(--aside-backgound);
}
:deep(.el-menu) {
background: #001529;
background: var(--aside-backgound);
}
.el-menu {
@@ -163,22 +163,11 @@ const route = useRoute();
}
:deep(.el-divider__text) {
background: #001529;
background: var(--aside-backgound);
color: #FFFFFF;
}
.scroll {
}
.github {
position: absolute;
width: 100%;
bottom: 10px;
display: flex;
justify-content: center;
a{
color: #fff;
}
}
</style>

145
mail-vue/src/layout/header/index.vue
View File

@@ -5,14 +5,14 @@
<span class="breadcrumb-item">{{ $t(route.meta.title) }}</span>
</div>
<div v-perm="'email:send'" class="writer-box" @click="openSend">
<div class="writer" >
<Icon icon="material-symbols:edit-outline-sharp" width="22" height="22" />
<div class="writer">
<Icon icon="material-symbols:edit-outline-sharp" width="22" height="22"/>
</div>
</div>
<div class="toolbar">
<el-dropdown>
<div class="translate icon-item">
<Icon icon="carbon:ibm-watson-language-translator" />
<Icon icon="carbon:ibm-watson-language-translator"/>
</div>
<template #dropdown>
<el-dropdown-menu>
@@ -21,15 +21,21 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="notice icon-item" @click="openNotice">
<Icon icon="streamline-plump:announcement-megaphone" />
<div v-if="uiStore.dark" class="sun-icon icon-item" @click="openDark($event)">
<Icon icon="mingcute:sun-fill"/>
</div>
<el-dropdown :teleported="false" popper-class="detail-dropdown" >
<div v-else class="dark-icon icon-item" @click="openDark($event)">
<Icon icon="solar:moon-linear"/>
</div>
<div class="notice icon-item" @click="openNotice">
<Icon icon="streamline-plump:announcement-megaphone"/>
</div>
<el-dropdown :teleported="false" popper-class="detail-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" />
<Icon class="setting-icon" icon="mingcute:down-small-fill" width="24" height="24"/>
</div>
<template #dropdown>
<div class="user-details">
@@ -37,35 +43,38 @@
{{ formatName(userStore.user.email) }}
</div>
<div class="user-name">
{{userStore.user.name}}
{{ userStore.user.name }}
</div>
<div class="detail-email" @click="copyEmail(userStore.user.email)">
{{ userStore.user.email }}
</div>
<div class="detail-user-type">
<el-tag >{{$t(userStore.user.role.name)}}</el-tag>
<el-tag>{{ $t(userStore.user.role.name) }}</el-tag>
</div>
<div class="action-info">
<div>
<span style="margin-right: 10px">{{$t('sendCount')}}</span>
<span style="margin-right: 10px">{{$t('accountCount')}}</span>
<span style="margin-right: 10px">{{ $t('sendCount') }}</span>
<span style="margin-right: 10px">{{ $t('accountCount') }}</span>
</div>
<div>
<div>
<span v-if="sendCount" style="margin-right: 5px" >{{ sendCount }}</span>
<el-tag v-if="!hasPerm('email:send')" >{{sendType}}</el-tag>
<el-tag v-else >{{sendType}}</el-tag>
<span v-if="sendCount" style="margin-right: 5px">{{ sendCount }}</span>
<el-tag v-if="!hasPerm('email:send')">{{ sendType }}</el-tag>
<el-tag v-else>{{ sendType }}</el-tag>
</div>
<div>
<el-tag v-if="settingStore.settings.manyEmail || settingStore.settings.addEmail" >{{$t('disabled')}}</el-tag>
<span v-else-if="accountCount && hasPerm('account:add')" style="margin-right: 5px">{{ $t('totalUserAccount',{msg: accountCount}) }}</span>
<el-tag v-else-if="!accountCount && hasPerm('account:add')" >{{$t('unlimited')}}</el-tag>
<el-tag v-else-if="!hasPerm('account:add')" >{{$t('unauthorized')}}</el-tag>
<el-tag v-if="settingStore.settings.manyEmail || settingStore.settings.addEmail">
{{ $t('disabled') }}
</el-tag>
<span v-else-if="accountCount && hasPerm('account:add')"
style="margin-right: 5px">{{ $t('totalUserAccount', {msg: accountCount}) }}</span>
<el-tag v-else-if="!accountCount && hasPerm('account:add')">{{ $t('unlimited') }}</el-tag>
<el-tag v-else-if="!hasPerm('account:add')">{{ $t('unauthorized') }}</el-tag>
</div>
</div>
</div>
<div class="logout">
<el-button type="primary" :loading="logoutLoading" @click="clickLogout">{{$t('logOut')}}</el-button>
<el-button type="primary" :loading="logoutLoading" @click="clickLogout">{{ $t('logOut') }}</el-button>
</div>
</div>
</template>
@@ -77,17 +86,18 @@
<script setup>
import router from "@/router";
import hanburger from '@/components/hamburger/index.vue'
import { logout} from "@/request/login.js";
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";
import {useRoute} from "vue-router";
import {computed, ref} from "vue";
import {useSettingStore} from "@/store/setting.js";
import { hasPerm } from "@/perm/perm.js"
import {hasPerm} from "@/perm/perm.js"
import {useI18n} from "vue-i18n";
import {setExtend} from "@/utils/day.js"
const { t } = useI18n();
const {t} = useI18n();
const route = useRoute();
const settingStore = useSettingStore();
const userStore = useUserStore();
@@ -174,6 +184,44 @@ function openNotice() {
uiStore.showNotice()
}
function openDark(e) {
const nextIsDark = !uiStore.dark
const root = document.documentElement
if (!document.startViewTransition) {
switchDark(nextIsDark, root);
return
}
const x = e.clientX
const y = e.clientY
const maxX = Math.max(x, window.innerWidth - x)
const maxY = Math.max(y, window.innerHeight - y)
const endRadius = Math.hypot(maxX, maxY)
// 标记切换目标，供 CSS 选择器使用
root.setAttribute('data-theme-to', nextIsDark ? 'dark' : 'light')
root.style.setProperty('--vt-x', `${x}px`)
root.style.setProperty('--vt-y', `${y}px`)
root.style.setProperty('--vt-end-radius', `${endRadius + 10}px`)
const transition = document.startViewTransition(() => {
switchDark(nextIsDark, root);
})
transition.finished.finally(() => {
// 清理标记
root.removeAttribute('data-theme-to')
})
}
function switchDark(nextIsDark, root) {
root.setAttribute('class', nextIsDark ? 'dark' : '')
uiStore.dark = nextIsDark
}
function openSend() {
uiStore.writerRef.open()
}
@@ -197,7 +245,11 @@ function formatName(email) {
}
</script>
<style>
.detail-dropdown {
color: var(--el-text-color-primary) !important;
}
</style>
<style lang="scss" scoped>
.breadcrumb-item {
@@ -213,10 +265,10 @@ function formatName(email) {
.user-details {
width: 250px;
font-size: 14px;
color: #333;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
.user-name {
font-weight: bold;
margin-top: 10px;
@@ -228,6 +280,7 @@ function formatName(email) {
text-overflow: ellipsis;
text-align: center;
}
.detail-user-type {
margin-top: 10px;
}
@@ -237,16 +290,19 @@ function formatName(email) {
display: grid;
grid-template-columns: auto auto;
margin-top: 10px;
>div:first-child {
> div:first-child {
display: grid;
align-items: center;
gap: 10px;
}
>div:last-child {
> div:last-child {
display: grid;
gap: 10px;
text-align: center;
>div {
> div {
display: flex;
align-items: center;
}
@@ -261,26 +317,31 @@ function formatName(email) {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
color: #5c5958;
color: var(--regular-text-color);
cursor: pointer;
}
.logout {
margin-top: 20px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
.el-button {
border-radius: 6px;
height: 28px;
width: 100%;
}
}
.details-avatar {
margin-top: 20px;
height: 40px;
width: 40px;
border: 1px solid #ccc;
background: var(--el-bg-color);
color: var(--el-text-color-primary);
border: 1px solid var(--dark-border);
font-size: 18px;
display: flex;
align-items: center;
@@ -290,7 +351,6 @@ function formatName(email) {
}
.header {
text-align: right;
font-size: 12px;
@@ -310,8 +370,9 @@ function formatName(email) {
align-items: center;
justify-content: center;
margin-left: 5px;
.writer {
width: 34px;
width: 34px;
height: 34px;
border-radius: 50%;
color: #ffffff;
@@ -320,6 +381,7 @@ function formatName(email) {
display: flex;
align-items: center;
justify-content: center;
.writer-text {
margin-left: 15px;
font-size: 14px;
@@ -334,8 +396,6 @@ function formatName(email) {
height: 100%;
}
.toolbar {
display: flex;
justify-content: end;
@@ -343,6 +403,7 @@ function formatName(email) {
@media (max-width: 767px) {
gap: 10px;
}
.icon-item {
align-self: center;
width: 30px;
@@ -355,7 +416,7 @@ function formatName(email) {
}
.icon-item:hover {
background: #F0F2F5;
background: var(--base-fill);
}
.notice {
@@ -363,6 +424,14 @@ function formatName(email) {
margin-right: 4px;
}
.dark-icon {
font-size: 20px;
}
.sun-icon {
font-size: 24px;
}
.translate {
padding-top: 2px;
font-size: 21px;
@@ -372,14 +441,17 @@ function formatName(email) {
display: flex;
align-items: center;
cursor: pointer;
.avatar-text {
background: var(--el-bg-color);
color: var(--el-text-color-primary);
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 1px solid #ccc;
border: 1px solid var(--dark-border);
}
.setting-icon {
@@ -391,6 +463,7 @@ function formatName(email) {
}
}
.el-tooltip__trigger:first-child:focus-visible {
outline: unset;
}

12
mail-vue/src/layout/index.vue
View File

@@ -60,8 +60,8 @@ onBeforeUnmount(() => {
}
.aside-show {
-webkit-box-shadow: 3px 0 5px rgba(0, 21, 41, .35);
box-shadow: 3px 0 5px rgba(0, 21, 41, 0.35);
-webkit-box-shadow: var(--aside-right-border);
box-shadow: var(--aside-right-border);
transform: translateX(0);
transition: all 100ms ease;
z-index: 101;
@@ -71,7 +71,7 @@ onBeforeUnmount(() => {
left: 0;
z-index: 101;
height: 100%;
background: #fff;
background: var(--el-bg-color);
}
}
@@ -91,7 +91,7 @@ onBeforeUnmount(() => {
.main-container {
min-height: 100%;
background: #FFFFFF;
background: var(--el-bg-color);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@@ -101,8 +101,8 @@ onBeforeUnmount(() => {
}
.el-header {
background: #FFFFFF;
border-bottom: solid 1px var(--el-menu-border-color);
background: var(--el-bg-color);
border-bottom: solid 1px var(--el-border-color);
padding: 0 0 0 0;
}

4
mail-vue/src/layout/main/index.vue
View File

@@ -164,7 +164,7 @@ const handleResize = () => {
.main-view {
background: #FFFFFF;
background: var(--el-bg-color);
}
@@ -176,7 +176,7 @@ const handleResize = () => {
align-items: center;
width: 100%;
.tag {
background: #FFFFFF;
background: var(--el-bg-color);
margin-left: 5px;
}
}

2
mail-vue/src/layout/write/index.vue
View File

@@ -436,7 +436,7 @@ function close() {
justify-content: center;
.write-box {
background: #FFFFFF;
background: var(--el-bg-color);
width: min(1200px,calc(100% - 80px));
box-shadow: var(--el-box-shadow-light);
border: 1px solid var(--el-border-color-light);