From c2629e3945dca59ee739d74c097f7a605c9e03b2 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Thu, 25 May 2023 10:22:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E7=BD=91=E7=AB=99?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=20(#1139)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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                     |  7 +++++++
 .../website/config/basic/auth-basic/index.vue       |  7 ++++++-
 .../website/config/basic/default-doc/index.vue      |  2 +-
 .../website/website/config/basic/domain/index.vue   | 13 ++++++++++++-
 .../website/website/config/basic/https/index.vue    |  2 +-
 .../website/config/basic/limit-conn/index.vue       |  2 +-
 .../website/website/config/basic/other/index.vue    |  2 +-
 .../website/website/config/basic/proxy/index.vue    |  8 +++++++-
 .../website/website/config/safety/ccdeny/index.vue  |  2 +-
 .../website/config/safety/file-block-list/index.vue |  2 +-
 .../website/config/safety/simple-list/index.vue     |  2 +-
 .../website/config/safety/value-list/index.vue      |  2 +-
 12 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/frontend/src/styles/moblie.scss b/frontend/src/styles/moblie.scss
index bf92e9df7..c3ac9e18d 100644
--- a/frontend/src/styles/moblie.scss
+++ b/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;
+			}
+		}
 }
diff --git a/frontend/src/views/website/website/config/basic/auth-basic/index.vue b/frontend/src/views/website/website/config/basic/auth-basic/index.vue
index 697079e88..c6ecdc0d6 100644
--- a/frontend/src/views/website/website/config/basic/auth-basic/index.vue
+++ b/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();
diff --git a/frontend/src/views/website/website/config/basic/default-doc/index.vue b/frontend/src/views/website/website/config/basic/default-doc/index.vue
index fc627807a..7c7a4a6e2 100644
--- a/frontend/src/views/website/website/config/basic/default-doc/index.vue
+++ b/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
diff --git a/frontend/src/views/website/website/config/basic/domain/index.vue b/frontend/src/views/website/website/config/basic/domain/index.vue
index fc819c387..2418e373d 100644
--- a/frontend/src/views/website/website/config/basic/domain/index.vue
+++ b/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();
diff --git a/frontend/src/views/website/website/config/basic/https/index.vue b/frontend/src/views/website/website/config/basic/https/index.vue
index 916da53ed..fe75007ed 100644
--- a/frontend/src/views/website/website/config/basic/https/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/basic/limit-conn/index.vue b/frontend/src/views/website/website/config/basic/limit-conn/index.vue
index 898089312..2f1d5c19b 100644
--- a/frontend/src/views/website/website/config/basic/limit-conn/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/basic/other/index.vue b/frontend/src/views/website/website/config/basic/other/index.vue
index 6c2546c9f..46dd6ad31 100644
--- a/frontend/src/views/website/website/config/basic/other/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/basic/proxy/index.vue b/frontend/src/views/website/website/config/basic/proxy/index.vue
index 6f7b0a7dd..6330bb86b 100644
--- a/frontend/src/views/website/website/config/basic/proxy/index.vue
+++ b/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;
 });
diff --git a/frontend/src/views/website/website/config/safety/ccdeny/index.vue b/frontend/src/views/website/website/config/safety/ccdeny/index.vue
index b278d7d97..0f3fca9e3 100644
--- a/frontend/src/views/website/website/config/safety/ccdeny/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/safety/file-block-list/index.vue b/frontend/src/views/website/website/config/safety/file-block-list/index.vue
index 3ffa8e484..da0a0d4dd 100644
--- a/frontend/src/views/website/website/config/safety/file-block-list/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/safety/simple-list/index.vue b/frontend/src/views/website/website/config/safety/simple-list/index.vue
index c9e9527f2..7422ed5b2 100644
--- a/frontend/src/views/website/website/config/safety/simple-list/index.vue
+++ b/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>
diff --git a/frontend/src/views/website/website/config/safety/value-list/index.vue b/frontend/src/views/website/website/config/safety/value-list/index.vue
index a864ecbe0..39fc0a584 100644
--- a/frontend/src/views/website/website/config/safety/value-list/index.vue
+++ b/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>