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

修复星标不能查看，附件等多个bug，优化样式

Browse Source
This commit is contained in:
eoao
2025-06-05 23:09:05 +08:00
parent cdcd22962f
commit 1c40dc8338
13 changed files with 74 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
mail-vue/src/components/email-scroll/index.vue
View File

@@ -25,7 +25,7 @@
</div>
<div ref="scroll" class="scroll">
<el-scrollbar ref="scrollbarRef" @scroll="handleScroll" >
<el-scrollbar ref="scrollbarRef" @scroll="handleScroll">
<div class="scroll-box" :infinite-scroll-immediate="false" v-infinite-scroll="loadData"
infinite-scroll-distance="600">
<div v-for="item in emailList" :key="item.emailId">
@@ -274,18 +274,26 @@ function htmlToText(email) {
tempDiv.innerHTML = email.content;
const scriptsAndStyles = tempDiv.querySelectorAll('script, style, title');
scriptsAndStyles.forEach(el => el.remove());
const text = tempDiv.textContent || tempDiv.innerText || '';
return text.replace(/\s+/g, ' ').trim();
let text = tempDiv.textContent || tempDiv.innerText || '';
text = text.replace(/\s+/g, ' ').trim();
return cleanSpace(text)
}
if (email.text) {
return email.text
return cleanSpace(email.text)
} else {
return ''
}
}
function cleanSpace(text) {
return text
.replace(/[\u200B-\u200F\uFEFF]/g, '') // 移除零宽空格、ZWNJ、ZWJ、LRM、RLM、BOM
.replace(/\s+/g, ' ') // 多空白合并成一个空格
.trim();
}
function starChange(email) {

18
mail-vue/src/components/shadow-html/index.vue
View File

@@ -32,8 +32,17 @@ function loadFontInShadow() {
}
function updateContent() {
if (!shadowRoot) return
if (!shadowRoot) return;
// 1. 提取 <body> 的 style 属性（如果存在）
const bodyStyleRegex = /<body[^>]*style="([^"]*)"[^>]*>/i;
const bodyStyleMatch = props.html.match(bodyStyleRegex);
const bodyStyle = bodyStyleMatch ? bodyStyleMatch[1] : '';
// 2. 移除 <body> 标签（保留内容）
const cleanedHtml = props.html.replace(/<\/?body[^>]*>/gi, '');
// 3. 将 body 的 style 应用到 .shadow-content
shadowRoot.innerHTML = `
<style>
:host {
@@ -53,6 +62,7 @@ function updateContent() {
width: fit-content;
height: fit-content;
min-width: 100%;
${bodyStyle ? bodyStyle : ''} /* 注入 body 的 style */
}
img {
@@ -72,12 +82,11 @@ function updateContent() {
a {
color: #409EFF !important;
}
</style>
<div class="shadow-content">
${props.html}
${cleanedHtml}
</div>
`
`;
}
function autoScale() {
@@ -109,6 +118,7 @@ onMounted(() => {
shadowRoot = container.value.attachShadow({ mode: 'open' })
updateContent()
autoScale()
console.log(props.html)
})
watch(() => props.html, () => {

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

@@ -96,7 +96,7 @@ const handleResize = () => {
.main-box-show {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-columns: 260px 1fr;
height: calc(100% - 60px);
@media (max-width: 1200px) {
grid-template-columns: 250px 1fr;

4
mail-vue/src/views/login/index.vue
View File

@@ -11,8 +11,8 @@
<div class="form-wrapper">
<div class="container">
<span class="form-title">{{settingStore.settings.title}}</span>
<span class="form-desc" v-if="show === 'login'">请输入你的账号信息以开始使用邮箱系统</span>
<span class="form-desc" v-else>请输入你的账号密码以开始注册邮箱系统</span>
<span class="form-desc" v-if="show === 'login'">请输入账号信息以开始使用邮箱系统</span>
<span class="form-desc" v-else>请输入账号密码以开始注册邮箱系统</span>
<div v-if="show === 'login'">
<el-input class="email-input" v-model="form.email" type="text" placeholder="邮箱" autocomplete="off">
<template #append>

2
mail-vue/src/views/role/index.vue
View File

@@ -18,7 +18,7 @@
<template #default="props">
<div class="role-name">
<span >{{props.row.name}}</span>
<span v-if="props.row.isDefault"><el-tag class="def-tag" type="success">默认</el-tag></span>
<span v-if="props.row.isDefault"><el-tag class="def-tag" >默认</el-tag></span>
</div>
</template>
</el-table-column>

7
mail-vue/src/views/user/index.vue
View File

@@ -71,7 +71,7 @@
<div>
<span class="details-item-title">发件次数:</span>
<span>{{ formatSendCount(props.row) }}</span>
<el-tag style="margin-left: 10px" v-if="props.row.sendAction.hasPerm" type="success">
<el-tag style="margin-left: 10px" v-if="props.row.sendAction.hasPerm" >
{{ formatSendType(props.row) }}
</el-tag>
<el-button size="small" style="margin-left: 10px"
@@ -174,10 +174,11 @@
</el-dialog>
<el-dialog class="dialog" v-model="setTypeShow" title="设置权限" @closed="resetUserForm">
<div class="dialog-box">
<el-select v-model="userForm.type" placeholder="Select">
<el-input disabled model-value="超级管理员" v-if="userForm.type === 0" />
<el-select v-else v-model="userForm.type" placeholder="Select" >
<el-option v-for="item in roleList" :label="item.name" :value="item.roleId" :key="item.roleId"/>
</el-select>
<el-button class="btn" :loading="settingLoading" type="primary" @click="setType"
<el-button :disabled="userForm.type === 0" class="btn" :loading="settingLoading" type="primary" @click="setType"
>保存
</el-button>
</div>