修改图片压缩规则，优化样式

mail-vue/src/components/shadow-html/index.vue

@@ -118,7 +118,6 @@ onMounted(() => {
   shadowRoot = container.value.attachShadow({ mode: 'open' })
   updateContent()
   autoScale()
-  console.log(props.html)
 })
 
 watch(() => props.html, () => {

mail-vue/src/components/tiny-editor/index.vue

@@ -108,6 +108,7 @@ function initEditor() {
       input.addEventListener('change', async (e) => {
         let file = e.target.files[0];
         file = await compressImage(file);
+        console.log(file.size / 1024)
         const reader = new FileReader();
         reader.onload = () => {
           const id = 'blobid' + (new Date()).getTime();

mail-vue/src/layout/write/index.vue

@@ -68,7 +68,6 @@ import {useEmailStore} from "@/store/email.js";
 import {fileToBase64, formatBytes} from "@/utils/file-utils.js";
 import {getIconByName} from "@/utils/icon-utils.js";
 import sendPercent from "@/components/send-percent/index.vue"
-import hasPerm from "@/utils/perm.js";
 
 defineExpose({
   open
@@ -277,7 +276,7 @@ function close() {
 
   .write-box {
     background: #FFFFFF;
-    width: 900px;
+    width: 902px;
     box-shadow: var(--el-box-shadow-light);
     border: 1px solid var(--el-border-color-light);
     transition: var(--el-transition-duration);
@@ -292,7 +291,7 @@ function close() {
     }
 
     @media (min-width: 1024px) {
-      height: min(800px, calc(100vh - 60px));
+      height: min(750px, calc(100vh - 60px));
     }
 
     .title {

mail-vue/src/utils/file-utils.js

@@ -32,12 +32,16 @@ export function base64Size(base64String) {
     return (base64Length * 3) / 4 - padding;
 }
 
-export function compressImage(file, quality = 0.6) {
+export function compressImage(file, config = {}) {
     return new Promise((resolve, reject) => {
+
+        if (file.size < (config.convertSize || 1024 * 1024)) {
+            resolve(file)
+        }
+
         new Compressor(file, {
-            quality,
+            quality: config.quality || 0.8,
             mimeType: 'image/jpeg',
-            convertSize: 1024 * 1024,
             success(result) {
                 resolve(result);
             },

mail-vue/src/views/content/index.vue

@@ -208,9 +208,13 @@ const handleDelete = () => {
 
 .container {
   font-size: 14px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 20px;
+  padding-right: 20px;
   padding-top: 10px;
+  @media (max-width: 1023px) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
 
   .email-title {
     font-size: 20px;
@@ -299,7 +303,11 @@ const handleDelete = () => {
     .email-info {
 
       border-bottom: 1px solid #e7e9ec;
-      margin-bottom: 15px;
+      margin-bottom: 20px;
+      padding-bottom: 8px;
+      @media (max-width: 1024px) {
+        margin-bottom: 15px;
+      }
       .date {
         color: #585d69;
         margin-bottom: 6px;

mail-vue/src/views/sys-setting/index.vue

@@ -285,7 +285,7 @@
               :centerBox="true"
               :full="true"
               :autoCrop="true"
-              :outputSize="0.9"
+              :outputSize="0.92"
           ></vueCropper>
         </div>
         <div class="cut-button">
@@ -304,7 +304,6 @@ import {useSettingStore} from "@/store/setting.js";
 import {useUserStore} from "@/store/user.js";
 import {useAccountStore} from "@/store/account.js";
 import {Icon} from "@iconify/vue";
-import {compressImage} from "@/utils/file-utils.js";
 import {cvtR2Url} from "@/utils/convert.js";
 import {storeToRefs} from "pinia";
 import { debounce } from 'lodash-es'
@@ -424,8 +423,7 @@ function openCut() {
   doc.setAttribute('accept', 'image/*')
   doc.click()
   doc.onchange = async (e) => {
-    const image = await compressImage(e.target.files[0], 0.9)
-    cutImage.value = URL.createObjectURL(image)
+    cutImage.value = URL.createObjectURL(e.target.files[0])
     cutShow.value = true
   }
 }
@@ -550,7 +548,7 @@ function editSetting(settingForm, refreshStatus = true) {
   @media (max-width: 500px) {
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
-  @media (max-width: 767px) {
+  @media (max-width: 1023px) {
     gap: 15px;
     padding: 15px;
   }

mail-worker/dist/index.html

@@ -6,8 +6,8 @@
     <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-zSxipgrR.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-CH_TBBJw.css">
+  <script type="module" crossorigin src="/assets/index-CWszkgaK.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-ii38gjPC.css">
 </head>
 <body>
 <div id="loading-first">