优化多个地方

This commit is contained in:
eoao
2025-09-03 08:31:44 +08:00
parent 97a7950808
commit b4954e948b
30 changed files with 156 additions and 89 deletions

View File

@@ -238,7 +238,7 @@ let scrollTop = 0
const latestEmail = ref(null)
const scrollbarRef = ref(null)
let reqLock = false
let isMobile = innerWidth < 1025
let isMobile = innerWidth < 1367
let skeletonRows = 0
const queryParam = reactive({
emailId: 0,
@@ -632,7 +632,7 @@ function loadData() {
margin-top: 5px;
margin-bottom: 2px;
color: var(--email-scroll-content-color);
@media (max-width: 1199px) {
@media (max-width: 1366px) {
flex-direction: column;
}
@@ -673,7 +673,7 @@ function loadData() {
padding-left: 15px;
padding-right: 20px;
justify-content: center;
@media (min-width: 1200px) {
@media (min-width: 1367px) {
justify-content: start;
height: 100%;
align-self: start;
@@ -682,7 +682,7 @@ function loadData() {
}
.title-column {
@media (max-width: 1199px) {
@media (max-width: 1366px) {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
@@ -692,10 +692,10 @@ function loadData() {
flex: 1;
display: grid;
grid-template-columns: 240px 1fr;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
padding-right: 15px;
}
@media (max-width: 1024px) {
@media (max-width: 1366px) {
grid-template-columns: 1fr;
gap: 4px;
}
@@ -710,7 +710,7 @@ function loadData() {
display: flex;
flex-direction: column;
align-content: center;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
flex-direction: row;
gap: 5px;
}
@@ -720,7 +720,7 @@ function loadData() {
display: grid;
gap: 5px;
grid-template-columns: auto 1fr;
@media (min-width: 1024px) {
@media (min-width: 1366px) {
grid-template-columns: 1fr;
> span:last-child {
display: none;
@@ -745,7 +745,7 @@ function loadData() {
.phone-time {
font-weight: normal;
font-size: 12px;
@media (min-width: 1200px) {
@media (min-width: 1367px) {
display: none;
}
}
@@ -755,7 +755,7 @@ function loadData() {
.text-skeleton-one {
width: 80%;
height: 16px;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
width: 40%;
}
@media (max-width: 767px) {
@@ -766,10 +766,10 @@ function loadData() {
.text-skeleton-two {
width: min(300px, 100%);
height: 16px;
@media (min-width: 1200px) {
@media (min-width: 1367px) {
display: none;
}
@media (max-width: 1199px) {
@media (max-width: 1366px) {
width: 100%;
}
}
@@ -778,7 +778,7 @@ function loadData() {
.email-text {
display: grid;
grid-template-columns: auto 1fr;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
grid-template-columns: 1fr;
}
@@ -786,7 +786,7 @@ function loadData() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@media (min-width: 1200px) {
@media (min-width: 1367px) {
padding-left: 5px;
}
}
@@ -797,7 +797,7 @@ function loadData() {
text-overflow: ellipsis;
padding-left: 10px;
color: var(--email-scroll-content-color);
@media (max-width: 1199px) {
@media (max-width: 1366px) {
padding-left: 0;
margin-top: 0;
}
@@ -813,13 +813,13 @@ function loadData() {
display: flex;
padding-left: 15px;
align-items: center;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
display: none;
}
}
.email-right-skeleton {
@media (max-width: 1199px) {
@media (max-width: 1366px) {
display: none;
}
}
@@ -844,7 +844,7 @@ function loadData() {
width: 40px;
}
@media (max-width: 1024px) {
@media (max-width: 1366px) {
.pc-star {
display: none;
}

View File

@@ -115,7 +115,7 @@ import {Icon} from "@iconify/vue";
width: 40px;
}
@media (max-width: 1024px) {
@media (max-width: 1366px) {
.pc-star {
display: none;
}

View File

@@ -156,10 +156,7 @@ const route = useRoute();
.el-menu {
border-right: 0;
width: 250px;
@media (max-width: 1199px) {
width: 250px;
}
width: 260px;
}
:deep(.el-divider__text) {

View File

@@ -30,8 +30,8 @@
<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">
<el-dropdown ref="userinfoRef" @visible-change="e => userInfoShow = e" :teleported="false" popper-class="detail-dropdown">
<div class="avatar" @click="userInfoHide" >
<div class="avatar-text">
<div>{{ formatName(userStore.user.email) }}</div>
</div>
@@ -103,6 +103,8 @@ const settingStore = useSettingStore();
const userStore = useUserStore();
const uiStore = useUiStore();
const logoutLoading = ref(false)
const userInfoShow = ref(false)
const userinfoRef = ref({})
const accountCount = computed(() => {
return userStore.user.role.accountCount
@@ -157,6 +159,14 @@ const sendCount = computed(() => {
return userStore.user.sendCount + '/' + userStore.user.role.sendCount
})
function userInfoHide(e) {
if (userInfoShow.value) {
userinfoRef.value.handleClose()
} else {
userinfoRef.value.handleOpen()
}
}
async function copyEmail(email) {
try {
await navigator.clipboard.writeText(email);

View File

@@ -128,7 +128,7 @@ const handleResize = () => {
@media (max-width: 767px) {
position: fixed;
z-index: 100;
width: 250px;
width: 260px;
}
}
@@ -138,7 +138,7 @@ const handleResize = () => {
transform: translateX(-100%);
opacity: 0;
@media (max-width: 1024px) {
width: 250px;
width: 260px;
z-index: 100;
}
}
@@ -148,9 +148,6 @@ const handleResize = () => {
display: grid;
grid-template-columns: 260px 1fr;
height: calc(100% - 60px);
@media (max-width: 1200px) {
grid-template-columns: 250px 1fr;
}
@media (max-width: 767px) {
grid-template-columns: 1fr;
}

View File

@@ -440,7 +440,7 @@ function close() {
.write-box {
background: var(--el-bg-color);
width: min(1200px, calc(100% - 80px));
width: min(1367px, calc(100% - 80px));
box-shadow: var(--el-box-shadow-light);
border: 1px solid var(--el-border-color-light);
transition: var(--el-transition-duration);
@@ -453,6 +453,7 @@ function close() {
width: 100%;
height: 100%;
border-radius: 0;
border: 0;
padding-top: 10px;
}

View File

@@ -94,7 +94,7 @@ router.beforeEach((to, from, next) => {
// 延迟 50ms 才启动进度条
timer = setTimeout(() => {
NProgress.start()
}, 50)
}, 100)
const token = localStorage.getItem('token')
@@ -116,7 +116,7 @@ router.beforeEach((to, from, next) => {
})
function loadBackground(next) {
console.log(131231)
const settingStore = useSettingStore();
const src = cvtR2Url(settingStore.settings.background);
@@ -150,6 +150,7 @@ router.afterEach((to) => {
if (window.innerWidth < 1025) {
uiStore.asideShow = false
}
})
export default router

View File

@@ -13,7 +13,6 @@ export const useSettingStore = defineStore('setting', {
},
persist: {
storage: sessionStorage,
pick: ['lang'],
},
})

View File

@@ -21,4 +21,21 @@ export function cvtR2Url(key) {
domain = domain.slice(0, -1);
}
return domain + '/' + key
}
}
export function toOssDomain(domain) {
if (!domain) {
return null
}
if (!domain.startsWith('http')) {
return 'https://' + domain
}
if (domain.endsWith("/")) {
domain = domain.slice(0, -1);
}
return domain
}

View File

@@ -768,7 +768,7 @@ function createSendGauge() {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
@media (max-width: 1199px) {
@media (max-width: 1366px) {
grid-template-columns: 1fr 1fr;
gap: 15px;
}

View File

@@ -84,7 +84,7 @@ import {useAccountStore} from "@/store/account.js";
import {formatDetailDate} from "@/utils/day.js";
import {starAdd, starCancel} from "@/request/star.js";
import {getExtName, formatBytes} from "@/utils/file-utils.js";
import {cvtR2Url} from "@/utils/convert.js";
import {cvtR2Url,toOssDomain} from "@/utils/convert.js";
import {getIconByName} from "@/utils/icon-utils.js";
import {useSettingStore} from "@/store/setting.js";
import {allEmailDelete} from "@/request/all-email.js";
@@ -116,7 +116,8 @@ function toMessage(message) {
function formatImage(content) {
content = content || '';
const domain = settingStore.settings.r2Domain;
return content.replace(/{{domain}}/g, domain + '/');
console.log(domain)
return content.replace(/{{domain}}/g, toOssDomain(domain) + '/');
}
function showImage(key) {
@@ -258,7 +259,7 @@ const handleDelete = () => {
border-radius: 6px;
width: fit-content;
.att-box {
min-width: min(410px,calc(100vw - 53px));
min-width: min(410px,calc(100vw - 60px));
max-width: 600px;
display: grid;
gap: 12px;

View File

@@ -775,7 +775,7 @@ adjustWidth()
function adjustWidth() {
const width = window.innerWidth
statusShow.value = width > 1090
createTimeShow.value = width > 1200
createTimeShow.value = width > 1367
accountNumShow.value = width > 650
sendNumShow.value = width > 685
typeShow.value = width > 767