feat: UI add useSideMargin option

CHANGELOG.md

@@ -24,7 +24,7 @@
 - 修复 `BUG` 随机生成的邮箱名字不合法 #211
 - `admin` 邮件页面支持邮件内容搜索 #210
 - 修复删除地址时邮件未删除的BUG #213
-- UI 增加全局标签页位置配置
+- UI 增加全局标签页位置配置, 侧边距配置
 
 ## v0.3.3
 

frontend/src/App.vue

@@ -8,10 +8,11 @@ import Header from './views/Header.vue';
 import Footer from './views/Footer.vue';
 
 
-const { localeCache, isDark, loading } = useGlobalState()
+const { localeCache, isDark, loading, useSideMargin } = useGlobalState()
 const theme = computed(() => isDark.value ? darkTheme : null)
 const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
+const showSideMargin = computed(() => !isMobile.value && !useSideMargin.value);
 
 const { locale } = useI18n({
   useScope: 'global',
@@ -39,8 +40,8 @@ onMounted(async () => {
     <n-spin description="loading..." :show="loading">
       <n-message-provider>
         <n-grid x-gap="12" :cols="12">
-          <n-gi v-if="!isMobile" span="1"></n-gi>
-          <n-gi :span="isMobile ? 12 : 10">
+          <n-gi v-if="!showSideMargin" span="1"></n-gi>
+          <n-gi :span="showSideMargin ? 12 : 10">
             <div class="main">
               <n-space vertical>
                 <n-layout style="min-height: 80vh;">
@@ -51,7 +52,7 @@ onMounted(async () => {
               </n-space>
             </div>
           </n-gi>
-          <n-gi v-if="!isMobile" span="1"></n-gi>
+          <n-gi v-if="!showSideMargin" span="1"></n-gi>
         </n-grid>
         <n-back-top />
       </n-message-provider>

frontend/src/store/index.js

@@ -55,6 +55,7 @@ export const useGlobalState = createGlobalState(
         const userTab = useStorage('userTab', 'user_settings');
         const indexTab = useStorage('indexTab', 'mailbox');
         const globalTabplacement = useStorage('globalTabplacement', 'top');
+        const useSideMargin = useStorage('useSideMargin', true);
         const userOpenSettings = ref({
             enable: false,
             enableMailVerify: false,
@@ -93,6 +94,7 @@ export const useGlobalState = createGlobalState(
             userOpenSettings,
             userSettings,
             globalTabplacement,
+            useSideMargin,
         }
     },
 )

frontend/src/views/common/Appearance.vue

@@ -5,7 +5,7 @@ import { useGlobalState } from '../../store'
 
 const {
     localeCache, mailboxSplitSize, useIframeShowMail, preferShowTextMail,
-    globalTabplacement
+    globalTabplacement, useSideMargin
 } = useGlobalState()
 
 const { t } = useI18n({
@@ -15,6 +15,7 @@ const { t } = useI18n({
             mailboxSplitSize: 'Mailbox Split Size',
             useIframeShowMail: 'Use iframe Show HTML Mail',
             preferShowTextMail: 'Display text Mail by default',
+            useSideMargin: 'Turn on the side margins on the left and right sides of the page',
             globalTabplacement: 'Global Tab Placement',
             left: 'left',
             top: 'top',
@@ -26,6 +27,7 @@ const { t } = useI18n({
             preferShowTextMail: '默认以文本显示邮件',
             useIframeShowMail: '使用iframe显示HTML邮件',
             globalTabplacement: '全局选项卡位置',
+            useSideMargin: '开启页面左右两侧侧边距',
             left: '左侧',
             top: '顶部',
             right: '右侧',
@@ -51,6 +53,9 @@ const { t } = useI18n({
             <n-form-item-row :label="t('useIframeShowMail')">
                 <n-switch v-model:value="useIframeShowMail" :round="false" />
             </n-form-item-row>
+            <n-form-item-row :label="t('useSideMargin')">
+                <n-switch v-model:value="useSideMargin" :round="false" />
+            </n-form-item-row>
             <n-form-item-row :label="t('globalTabplacement')">
                 <n-radio-group v-model:value="globalTabplacement">
                     <n-radio-button value="top" :label="t('top')" />