From 06bce33c48ac0aef2a5851231e07c49a316b990f Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Fri, 15 Dec 2023 17:33:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pagetable/PageTable.vue    |  4 +-
 mayfly_go_web/src/layout/component/main.vue   | 22 +++++------
 mayfly_go_web/src/layout/footer/index.vue     | 20 +++++-----
 .../src/layout/routerView/iframes.vue         |  2 +-
 mayfly_go_web/src/layout/routerView/link.vue  |  2 +-
 mayfly_go_web/src/theme/app.scss              | 38 +++++++++++++------
 .../db/component/sqleditor/DbSqlEditor.vue    |  2 +-
 .../ops/db/component/table/DbTableData.vue    | 10 ++---
 8 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/mayfly_go_web/src/components/pagetable/PageTable.vue b/mayfly_go_web/src/components/pagetable/PageTable.vue
index cc9b0da2..7c2f8036 100644
--- a/mayfly_go_web/src/components/pagetable/PageTable.vue
+++ b/mayfly_go_web/src/components/pagetable/PageTable.vue
@@ -169,7 +169,7 @@ const props = withDefaults(defineProps<PageTableProps>(), {
     toolButton: true,
     showSearch: false,
     searchItems: () => [],
-    searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 4 }),
+    searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 5 }),
 });
 
 // 接收 columns 并设置为响应式
@@ -243,7 +243,7 @@ onMounted(async () => {
 });
 
 const calcuTableHeight = () => {
-    const headerHeight = isShowSearch.value ? 320 : 240;
+    const headerHeight = isShowSearch.value ? 322 : 242;
     state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
 };
 
diff --git a/mayfly_go_web/src/layout/component/main.vue b/mayfly_go_web/src/layout/component/main.vue
index 2105d6cc..e2161580 100644
--- a/mayfly_go_web/src/layout/component/main.vue
+++ b/mayfly_go_web/src/layout/component/main.vue
@@ -1,26 +1,22 @@
 <template>
     <el-main class="layout-main">
-        <el-scrollbar
-            class="layout-scrollbar"
-            ref="layoutScrollbarRef"
-            v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1"
-            :style="{ minHeight: `calc(100vh - ${state.headerHeight}` }"
-        >
+        <el-scrollbar ref="layoutScrollbarRef" v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1">
             <LayoutParentView />
-            <Footer v-if="themeConfig.isFooter" />
         </el-scrollbar>
-        <Link
-            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
-            :meta="state.currentRouteMeta"
-            v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2"
-        />
+
+        <Link class="h100" :meta="state.currentRouteMeta" v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
+
         <Iframes
-            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
+            class="h100"
             :meta="state.currentRouteMeta"
             v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 1 && state.isShowLink"
             @getCurrentRouteMeta="onGetCurrentRouteMeta"
         />
     </el-main>
+
+    <el-footer v-if="themeConfig.isFooter">
+        <Footer />
+    </el-footer>
 </template>
 
 <script setup lang="ts" name="layoutMain">
diff --git a/mayfly_go_web/src/layout/footer/index.vue b/mayfly_go_web/src/layout/footer/index.vue
index 184401c0..45541efe 100644
--- a/mayfly_go_web/src/layout/footer/index.vue
+++ b/mayfly_go_web/src/layout/footer/index.vue
@@ -1,8 +1,7 @@
 <template>
-    <div class="layout-footer mt15" v-show="isDelayFooter">
+    <div class="layout-footer flex-all-center" v-show="isDelayFooter">
         <div class="layout-footer-warp">
-            <div>Made by mayfly with ❤️</div>
-            <div class="mt5">mayfly-go</div>
+            <div>Made by mayfly-go with ❤️</div>
         </div>
     </div>
 </template>
@@ -32,13 +31,14 @@ export default {
 
 <style scoped lang="scss">
 .layout-footer {
-    width: 100%;
-    display: flex;
-    &-warp {
-        margin: auto;
-        color: #9e9e9e;
-        text-align: center;
-        animation: logoAnimation 0.3s ease-in-out;
+    height: 30px;
+    background-color: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color-light);
+    .layout-footer-warp {
+        font-size: 14px;
+        color: var(--el-text-color-secondary);
+        text-decoration: none;
+        letter-spacing: 0.5px;
     }
 }
 </style>
diff --git a/mayfly_go_web/src/layout/routerView/iframes.vue b/mayfly_go_web/src/layout/routerView/iframes.vue
index 4f5f1b47..e9587c57 100644
--- a/mayfly_go_web/src/layout/routerView/iframes.vue
+++ b/mayfly_go_web/src/layout/routerView/iframes.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-scrollbar">
+    <div>
         <div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
             <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
         </div>
diff --git a/mayfly_go_web/src/layout/routerView/link.vue b/mayfly_go_web/src/layout/routerView/link.vue
index 73aee488..aa93249d 100644
--- a/mayfly_go_web/src/layout/routerView/link.vue
+++ b/mayfly_go_web/src/layout/routerView/link.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-scrollbar">
+    <div>
         <div class="layout-view-bg-white flex layout-view-link">
             <a :href="currentRouteMeta.link" target="_blank" class="flex-margin">{{ currentRouteMeta.title }}：{{ currentRouteMeta.link }}</a>
         </div>
diff --git a/mayfly_go_web/src/theme/app.scss b/mayfly_go_web/src/theme/app.scss
index d8b148cc..46bca497 100644
--- a/mayfly_go_web/src/theme/app.scss
+++ b/mayfly_go_web/src/theme/app.scss
@@ -40,8 +40,8 @@ body,
     -webkit-tap-highlight-color: transparent;
     background-color: var(--bg-main-color);
     font-size: 14px;
-    overflow: hidden;
-    position: relative;
+    // overflow: hidden;
+    // position: relative;
 }
 
 /* 主布局样式
@@ -70,8 +70,9 @@ body,
     }
 
     .layout-main {
-        padding: 0 !important;
-        overflow: hidden;
+        box-sizing: border-box;
+        padding: 8px 10px;
+        overflow-x: hidden;
         width: 100%;
         background-color: var(--bg-main-color);
     }
@@ -107,11 +108,6 @@ body,
         transition: width 0.3s ease;
     }
 
-    .layout-scrollbar {
-        @extend .el-scrollbar;
-        padding: 10px;
-    }
-
     .layout-mian-height-50 {
         height: calc(100vh - 50px);
     }
@@ -125,6 +121,11 @@ body,
     .layout-hide {
         display: none;
     }
+
+    .el-footer {
+        height: auto;
+        padding: 0;
+    }
 }
 
 /* element plus 全局样式
@@ -190,16 +191,21 @@ body,
     }
 }
 
-
 .flex-justify-between {
     display: flex;
     align-items: center; // 垂直方向水平居中
-    justify-content: space-between;  // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
+    justify-content: space-between; // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
+}
+
+.flex-all-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .flex-align-center {
     display: flex;
-    align-items: center;
+    align-items: center; // 垂直方向水平居中
 }
 
 /* 宽高 100%
@@ -362,6 +368,14 @@ body,
     box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
 
+/* content-box (常用内容盒子) */
+.content-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
 .fl {
     float: left;
 }
diff --git a/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue b/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
index f36f366e..bccc2c7d 100644
--- a/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
+++ b/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
@@ -428,7 +428,7 @@ const saveSql = async () => {
             const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
-                inputPattern: /\.+/,
+                inputPattern: /.+/,
                 inputErrorMessage: '请输入SQL脚本名',
             });
             sqlName = input.value;
diff --git a/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue b/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue
index 005219c6..a24608ac 100644
--- a/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue
+++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue
@@ -35,7 +35,7 @@
                                 <div v-else @contextmenu="headerContextmenuClick($event, column)" style="position: relative">
                                     <div class="column-type">
                                         <span v-if="ColumnTypeSubscript[dbDialect.getDataType(column.columnType)] === 'icon-clock'">
-                                            <SvgIcon :size="8" name="Clock" style="cursor: unset" />
+                                            <SvgIcon :size="10" name="Clock" style="cursor: unset" />
                                         </span>
                                         <span class="font8" v-else>{{ ColumnTypeSubscript[dbDialect.getDataType(column.columnType)] }}</span>
                                     </div>
@@ -83,7 +83,7 @@
                                         v-if="nowUpdateCell.dataType == DataType.Number || nowUpdateCell.dataType == DataType.String"
                                         :ref="(el: any) => el?.focus()"
                                         @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="w100"
+                                        class="w100 mb4"
                                         input-style="text-align: center; height: 26px;"
                                         size="small"
                                         v-model="rowData[column.dataKey!]"
@@ -92,7 +92,7 @@
                                         v-if="nowUpdateCell.dataType == DataType.Date"
                                         :ref="(el: any) => el?.focus()"
                                         @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker"
+                                        class="edit-time-picker mb4"
                                         size="small"
                                         v-model="rowData[column.dataKey!]"
                                         :clearable="false"
@@ -104,7 +104,7 @@
                                         v-if="nowUpdateCell.dataType == DataType.DateTime"
                                         :ref="(el: any) => el?.focus()"
                                         @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker"
+                                        class="edit-time-picker mb4"
                                         size="small"
                                         v-model="rowData[column.dataKey!]"
                                         :clearable="false"
@@ -116,7 +116,7 @@
                                         v-if="nowUpdateCell.dataType == DataType.Time"
                                         :ref="(el: any) => el?.focus()"
                                         @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker"
+                                        class="edit-time-picker mb4"
                                         size="small"
                                         v-model="rowData[column.dataKey!]"
                                         :clearable="false"