From f411f1738666a915b6501c433f15ea594d61d263 Mon Sep 17 00:00:00 2001
From: Pang <aipaw@live.cn>
Date: Sat, 16 Dec 2023 21:22:26 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/Mobile/NavTitle.vue  | 74 +++++++++++++++
 .../assets/js/pages/manage/setting/index.vue  | 26 +++---
 resources/assets/sass/pages/page-setting.scss | 91 ++++++++++++++-----
 3 files changed, 154 insertions(+), 37 deletions(-)
 create mode 100644 resources/assets/js/components/Mobile/NavTitle.vue

diff --git a/resources/assets/js/components/Mobile/NavTitle.vue b/resources/assets/js/components/Mobile/NavTitle.vue
new file mode 100644
index 000000000..4a0311e2b
--- /dev/null
+++ b/resources/assets/js/components/Mobile/NavTitle.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="mobile-nav-box">
+        <slot name="left">
+            <div class="nav-back" @click="onBack"><i class="taskfont">&#xe676;</i></div>
+        </slot>
+        <div class="nav-title">{{title}}</div>
+        <slot name="right"/>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.mobile-nav-box {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    padding: 0 15px;
+    background: #fff;
+    position: relative;
+
+    .nav-back {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 44px;
+        > i {
+            font-size: 22px;
+            font-weight: 500;
+            color: #333;
+        }
+    }
+
+    .nav-title {
+        flex: 1;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+        text-align: center;
+    }
+}
+</style>
+
+<script>
+export default {
+    name: "MobileNavTitle",
+    props: {
+        title: {
+            default: ""
+        },
+        beforeBack: {
+            type: Function,
+        }
+    },
+
+    methods: {
+        onBack() {
+            if (typeof this.beforeBack === "function") {
+                const before = this.beforeBack();
+                if (before && before.then) {
+                    before.then(() => {
+                        this.goBack()
+                    })
+                }
+                return
+            }
+            this.goBack()
+        }
+    },
+};
+</script>
diff --git a/resources/assets/js/pages/manage/setting/index.vue b/resources/assets/js/pages/manage/setting/index.vue
index 2fd2e60e1..6338a4c54 100644
--- a/resources/assets/js/pages/manage/setting/index.vue
+++ b/resources/assets/js/pages/manage/setting/index.vue
@@ -4,16 +4,13 @@
         <div class="setting-head">
             <div class="setting-titbox">
                 <div class="setting-title">
-                    <div v-if="showMobileBox" class="common-nav-back portrait" @click="goForward({name: 'manage-application'},true)"><i class="taskfont">&#xe676;</i></div>
                     <h1>{{settingTitleName}}</h1>
-                    <div v-if="!showMobileBox" class="setting-more" @click="goBack()">
-                        <Icon type="md-close" />
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="setting-box" :class="{'show-mobile-box':showMobileBox}">
+        <div class="setting-box">
             <div class="setting-menu">
+                <MobileNavTitle :title="$L('设置')"/>
                 <ul>
                     <li
                         v-for="(item, key) in menu"
@@ -33,12 +30,15 @@
                     </li>
                 </ul>
             </div>
-            <div class="setting-content">
-                <div class="setting-content-title">{{titleNameRoute}}</div>
-                <div class="setting-content-view">
-                    <router-view class="setting-router-view"></router-view>
+            <transition name="mobile-dialog">
+                <div v-if="showContent" class="setting-content">
+                    <MobileNavTitle :title="settingTitleName"/>
+                    <div class="setting-content-title">{{titleNameRoute}}</div>
+                    <div class="setting-content-view">
+                        <router-view class="setting-router-view"></router-view>
+                    </div>
                 </div>
-            </div>
+            </transition>
         </div>
     </div>
 </template>
@@ -47,8 +47,10 @@
 import {mapState} from "vuex";
 import {Store} from "le5le-store";
 import axios from "axios";
+import MobileNavTitle from "../../../components/Mobile/NavTitle.vue";
 
 export default {
+    components: {MobileNavTitle},
     data() {
         return {
             version: window.systemInfo.version
@@ -66,8 +68,8 @@ export default {
             return this.$route.name
         },
 
-        showMobileBox() {
-            return this.routeName === 'manage-setting'
+        showContent() {
+            return this.$route.path.match(/^\/manage\/setting\/\w+$/)
         },
 
         menu() {
diff --git a/resources/assets/sass/pages/page-setting.scss b/resources/assets/sass/pages/page-setting.scss
index d81f9633f..d6d841e36 100755
--- a/resources/assets/sass/pages/page-setting.scss
+++ b/resources/assets/sass/pages/page-setting.scss
@@ -33,6 +33,9 @@
         height: 0;
         display: flex;
         padding-bottom: 16px;
+        .mobile-nav-box {
+            display: none;
+        }
         .setting-menu {
             width: 200px;
             flex-shrink: 0;
@@ -374,27 +377,18 @@
 
 body.window-portrait {
     .page-setting {
+        background-color: #f8f8f8;
         .setting-head {
-            margin: 24px 16px 16px;
-            .setting-titbox {
-                .setting-title {
-                    .setting-more {
-                        display: flex;
-                        font-size: 24px;
-                        width: 42px;
-                        height: 42px;
-                        align-items: center;
-                        justify-content: center;
-                    }
-                }
-            }
+            display: none;
         }
         .setting-box {
             position: relative;
-            &.show-mobile-box {
-                .setting-menu {
-                    transform: translateX(0);
-                }
+            .mobile-nav-box {
+                display: flex;
+                position: sticky;
+                top: 0;
+                z-index: 3;
+                background-color: #f8f8f8;
             }
             .setting-menu {
                 position: absolute;
@@ -402,20 +396,49 @@ body.window-portrait {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                z-index: 9;
-                background-color: #ffffff;
-                transform: translateX(-120%);
+                z-index: 1;
                 > ul {
-                    padding: 12px 32px;
+                    padding: 20px 0;
                     > li {
-                        padding: 0 8px;
-                        &:hover {
-                            background-color: transparent;
+                        position: relative;
+                        padding: 0 32px;
+                        line-height: 48px;
+                        margin: 0;
+                        background-color: #ffffff;
+                        &:after {
+                            content: "";
+                            position: absolute;
+                            top: 0;
+                            left: 32px;
+                            right: 0;
+                            z-index: 1;
+                            height: 1px;
+                            transform: scaleY(0.5);
+                            background-color: #F4F4F5;
+                        }
+                        &:first-child {
+                            &:after {
+                                display: none;
+                            }
+                        }
+                        &.divided {
+                            margin-top: 20px;
+                            &:before,
+                            &:after {
+                                display: none;
+                            }
                         }
                     }
                 }
             }
             .setting-content {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+                background-color: #ffffff;
                 .setting-content-title {
                     display: none;
                 }
@@ -431,7 +454,25 @@ body.window-portrait {
             }
             &.submit {
                 .ivu-tabs{
-                    padding: 0 16px 16px 12px;
+                    padding: 0;
+                    .ivu-tabs-bar {
+                        margin-bottom: 0;
+                    }
+                    .ivu-tabs-content {
+                        .ivu-tabs-tabpane {
+                            .setting-component-item {
+                                .ivu-form {
+                                    padding-top: 16px;
+                                }
+                                .setting-footer {
+                                    margin: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+                .setting-footer {
+                    padding: 16px 24px;
                 }
             }
         }