优化多个地方
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@ import {Icon} from "@iconify/vue";
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 1366px) {
|
||||
.pc-star {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -13,7 +13,6 @@ export const useSettingStore = defineStore('setting', {
|
||||
|
||||
},
|
||||
persist: {
|
||||
storage: sessionStorage,
|
||||
pick: ['lang'],
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user