style:优化设置移动端界面 (#6443)

* style:优化设置移动端界面

* style:设置-安全界面样式

* style:修复设置-备份账号服务器磁盘移动端无法剧中

* style:优化移动端设置界面

frontend/src/views/setting/backup-account/index.vue

@@ -2,31 +2,29 @@
     <div>
         <LayoutContent :title="$t('commons.button.backup')">
             <template #main>
-                <el-form label-width="130px" :v-key="refresh">
+                <el-form :v-key="refresh">
-                    <el-row :gutter="20">
+                    <div class="flex flex-col gpa-4">
-                        <el-col :span="24">
+                        <div class="flex flex-row justify-between items-center">
-                            <div class="flx-justify-between">
+                            <div class="flex gap-1 items-center">
-                                <span class="flx-align-center">
+                                <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
-                                    <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
+                                <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
-                                    <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
-                                </span>
-                                <div style="float: right">
-                                    <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)">
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
                             </div>
-                            <el-divider class="divider" />
+                            <div>
-                            <div style="margin-left: 20px">
+                                <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)">
-                                <el-form-item :label="$t('setting.backupDir')">
+                                    {{ $t('commons.button.edit') }}
-                                    {{ localData.varsJson['dir'] }}
+                                </el-button>
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormat(0, 0, localData.createdAt) }}
-                                </el-form-item>
                             </div>
-                        </el-col>
+                        </div>
-                    </el-row>
+                        <el-divider class="divider" />
+                        <div class="grid gird-cols-2 items-center justify-center">
+                            <el-form-item :label="$t('setting.backupDir')">
+                                {{ localData.varsJson['dir'] }}
+                            </el-form-item>
+                            <el-form-item :label="$t('commons.table.createdAt')">
+                                {{ dateFormat(0, 0, localData.createdAt) }}
+                            </el-form-item>
+                        </div>
+                    </div>
                 </el-form>
 
                 <div class="common-div">

frontend/src/views/setting/panel/index.vue

@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.panel')" :divider="true">
             <template #main>
-                <el-form :model="form" label-position="left" label-width="150px">
+                <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="150px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
@@ -168,7 +168,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { ElForm } from 'element-plus';
 import { getSettingInfo, updateSetting, getSystemAvailable } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
@@ -194,6 +194,10 @@ const { isProductPro } = storeToRefs(globalStore);
 
 const { switchTheme } = useTheme();
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const form = reactive({
     userName: '',
     password: '',

frontend/src/views/setting/safe/index.vue

@@ -2,7 +2,12 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
             <template #main>
-                <el-form :model="form" v-loading="loading" label-position="left" label-width="150px">
+                <el-form
+                    :model="form"
+                    v-loading="loading"
+                    :label-position="mobile ? 'top' : 'left'"
+                    label-width="150px"
+                >
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
@@ -178,7 +183,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { ElForm, ElMessageBox } from 'element-plus';
 import PortSetting from '@/views/setting/safe/port/index.vue';
 import BindSetting from '@/views/setting/safe/bind/index.vue';
@@ -209,6 +214,10 @@ const sslInfo = ref<Setting.SSLInfo>();
 const domainRef = ref();
 const allowIPsRef = ref();
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const form = reactive({
     serverPort: 9999,
     ipv6: 'disable',