feat: 调整网站设置页面 (#1139)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

frontend/src/styles/moblie.scss

@@ -40,4 +40,11 @@
     .el-drawer.rtl {
         width: 80% !important;
     }
+		.site-form-wrapper {
+			width: 90% !important;
+			min-width: auto !important;
+			.el-form-item__label {
+				width: auto !important;
+			}
+		}
 }

frontend/src/views/website/website/config/basic/auth-basic/index.vue

@@ -15,7 +15,7 @@
             width="260px"
             :buttons="buttons"
             :label="$t('commons.table.operate')"
-            fixed="right"
+            :fixed="mobile ? false : 'right'"
             fix
         />
     </ComplexTable>
@@ -30,6 +30,8 @@ import i18n from '@/lang';
 import Create from './create/index.vue';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const props = defineProps({
     id: {
@@ -40,6 +42,9 @@ const props = defineProps({
 const id = computed(() => {
     return props.id;
 });
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 const loading = ref(false);
 const data = ref([]);
 const createRef = ref();

frontend/src/views/website/website/config/basic/default-doc/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :span="8" :offset="1">
+        <el-col :xs="24" :sm="18" :md="8" :lg="8" :xl="8">
             <el-form @submit.prevent ref="defaultForm" label-position="top" :model="defaultModel" :rules="rules">
                 <el-form-item :label="$t('website.defaultDoc')" prop="index">
                     <el-input

frontend/src/views/website/website/config/basic/domain/index.vue

@@ -10,7 +10,13 @@
         </el-table-column>
         <el-table-column :label="$t('website.domain')" prop="domain"></el-table-column>
         <el-table-column :label="$t('website.port')" prop="port"></el-table-column>
-        <fu-table-operations :ellipsis="1" :buttons="buttons" :label="$t('commons.table.operate')" fixed="right" fix />
+        <fu-table-operations
+            :ellipsis="1"
+            :buttons="buttons"
+            :label="$t('commons.table.operate')"
+            :fixed="mobile ? false : 'right'"
+            fix
+        />
     </ComplexTable>
     <Domain ref="domainRef" @close="search(id)"></Domain>
 </template>
@@ -23,6 +29,8 @@ import { computed, onMounted, ref } from 'vue';
 import i18n from '@/lang';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { Promotion } from '@element-plus/icons-vue';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const props = defineProps({
     id: {
@@ -33,6 +41,9 @@ const props = defineProps({
 const id = computed(() => {
     return props.id;
 });
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 let loading = ref(false);
 const data = ref<Website.Domain[]>([]);
 const domainRef = ref();

frontend/src/views/website/website/config/basic/https/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :span="14" :offset="1">
+        <el-col :xs="24" :sm="18" :md="14" :lg="14" :xl="14">
             <el-form ref="httpsForm" label-position="left" label-width="auto" :model="form" :rules="rules">
                 <el-form-item prop="enable" :label="$t('website.enableHTTPS')">
                     <el-switch v-model="form.enable" @change="changeEnable"></el-switch>

frontend/src/views/website/website/config/basic/limit-conn/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :span="8" :offset="1">
+        <el-col :xs="24" :sm="18" :md="8" :lg="8" :xl="8">
             <el-form-item prop="enable" :label="$t('website.enableOrNot')">
                 <el-switch v-model="enable" @change="changeEnable"></el-switch>
             </el-form-item>

frontend/src/views/website/website/config/basic/other/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :span="8" :offset="1">
+        <el-col :xs="24" :sm="18" :md="8" :lg="8" :xl="8">
             <el-form ref="websiteForm" label-position="left" label-width="80px" :model="form" :rules="rules">
                 <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
                     <el-input v-model="form.primaryDomain" disabled></el-input>

frontend/src/views/website/website/config/basic/proxy/index.vue

@@ -26,7 +26,7 @@
             width="260px"
             :buttons="buttons"
             :label="$t('commons.table.operate')"
-            fixed="right"
+            :fixed="mobile ? false : 'right'"
             fix
         />
     </ComplexTable>
@@ -45,6 +45,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElMessageBox } from 'element-plus';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const props = defineProps({
     id: {
@@ -52,6 +54,10 @@ const props = defineProps({
         default: 0,
     },
 });
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 const id = computed(() => {
     return props.id;
 });

frontend/src/views/website/website/config/safety/ccdeny/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="20" v-loading="loading">
-        <el-col :span="10" :offset="1">
+        <el-col :xs="24" :sm="18" :md="10" :lg="10" :xl="10">
             <el-form ref="wafForm" label-position="left" label-width="auto" :model="form" :rules="rules">
                 <el-form-item prop="enable" :label="$t('website.enable')">
                     <el-switch v-model="form.enable" @change="updateEnable"></el-switch>

frontend/src/views/website/website/config/safety/file-block-list/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="1">
+        <el-col :xs="24" :sm="18" :md="10" :lg="10" :xl="10">
             <el-form-item prop="enable" :label="$t('website.enable')">
                 <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
             </el-form-item>

frontend/src/views/website/website/config/safety/simple-list/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="10" :offset="1">
+        <el-col :xs="24" :sm="18" :md="10" :lg="10" :xl="10">
             <el-form-item prop="enable" :label="$t('website.enable')">
                 <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>
             </el-form-item>

frontend/src/views/website/website/config/safety/value-list/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :span="14" :offset="1">
+        <el-col :xs="24" :sm="18" :md="14" :lg="14" :xl="14">
             <el-form>
                 <el-form-item prop="enable" :label="$t('website.enable')">
                     <el-switch v-model="enableUpdate.enable" @change="updateEnable"></el-switch>