perf: 优化右下角、登录页主题设置

resources/assets/js/App.vue

@@ -6,17 +6,17 @@
             </keep-alive>
         </transition>
         <Spinner/>
-        <AppDown/>
+        <RightBottom/>
     </div>
 </template>
 
 <script>
 import Spinner from "./components/Spinner";
-import AppDown from "./components/AppDown";
+import RightBottom from "./components/RightBottom";
 import {mapState} from "vuex";
 
 export default {
-    components: {AppDown, Spinner},
+    components: {RightBottom, Spinner},
 
     data() {
         return {

resources/assets/js/components/RightBottom.vue

@@ -1,11 +1,19 @@
 <template>
-    <div v-if="showButton" class="common-app-down" :class="{'on-client': !!$Electron}" :data-route="$route.name">
-        <div v-if="$Electron" class="common-app-down-link" @click="releasesNotification">
-            <Icon type="md-download"/> {{$L(repoTitle)}}
+    <div class="common-right-bottom">
+        <div v-if="$Electron" class="common-right-bottom-link" @click="useSSOLogin">
+            <Icon type="ios-globe-outline"/>
+            {{ $L('使用 SSO 登录') }}
         </div>
-        <a v-else class="common-app-down-link" :href="repoReleases.html_url" target="_blank">
-            <Icon type="md-download"/> {{$L(repoTitle)}}
-        </a>
+        <template v-if="showDown">
+            <div v-if="$Electron" class="common-right-bottom-link" @click="releasesNotification">
+                <Icon type="md-download"/>
+                {{ $L(repoTitle) }}
+            </div>
+            <a v-else class="common-right-bottom-link" :href="repoReleases.html_url" target="_blank">
+                <Icon type="md-download"/>
+                {{ $L(repoTitle) }}
+            </a>
+        </template>
     </div>
 </template>
 
@@ -16,9 +24,10 @@ import axios from "axios";
 Vue.component('MarkdownPreview', MarkdownPreview)
 
 import {mapState} from "vuex";
+import {Store} from "le5le-store";
 
 export default {
-    name: 'AppDown',
+    name: 'RightBottom',
     data() {
         return {
             loadIng: 0,
@@ -48,10 +57,12 @@ export default {
             'isDesktop',
             'wsOpenNum',
         ]),
+
         repoTitle() {
             return this.repoStatus == 2 ? '更新客户端' : '客户端下载';
         },
-        showButton() {
+
+        showDown() {
             return this.repoStatus && this.isDesktop && ['login', 'manage-dashboard'].includes(this.$route.name)
         }
     },
@@ -197,7 +208,7 @@ export default {
                 },
                 render: (h) => {
                     return h('div', {
-                        class: 'common-app-down-notification'
+                        class: 'common-right-bottom-notification'
                     }, [
                         h('div', {
                             class: "notification-head"
@@ -230,6 +241,10 @@ export default {
                 path: this.downloadResult.savePath
             });
             this.$Electron.ipcRenderer.send('windowQuit');
+        },
+
+        useSSOLogin() {
+            Store.set('useSSOLogin', true);
         }
     }
 };

resources/assets/js/pages/login.vue

@@ -31,26 +31,45 @@
                 </div>
             </div>
             <div class="login-bottom">
-                <Dropdown trigger="click" @on-click="setLanguage" transfer>
-                    <div class="login-language">
-                        {{currentLanguage}}
+                <Dropdown trigger="click" placement="bottom-start">
+                    <div class="login-setting">
+                        {{$L('设置')}}
                         <i class="taskfont">&#xe689;</i>
                     </div>
-                    <Dropdown-menu slot="list">
-                        <Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
+                    <Dropdown-menu slot="list" class="login-setting-menu">
+                        <Dropdown placement="right-start" @on-click="setTheme">
+                            <DropdownItem>
+                                <div class="login-setting-item">
+                                    {{$L('主题皮肤')}}
+                                    <Icon type="ios-arrow-forward"></Icon>
+                                </div>
+                            </DropdownItem>
+                            <DropdownMenu slot="list">
+                                <Dropdown-item v-for="(item, key) in themeList" :key="key" :name="item.value" :selected="themeMode === item.value">{{$L(item.name)}}</Dropdown-item>
+                            </DropdownMenu>
+                        </Dropdown>
+                        <Dropdown placement="right-start" @on-click="setLanguage">
+                            <DropdownItem divided>
+                                <div class="login-setting-item">
+                                    {{currentLanguage}}
+                                    <Icon type="ios-arrow-forward"></Icon>
+                                </div>
+                            </DropdownItem>
+                            <DropdownMenu slot="list">
+                                <Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
+                            </DropdownMenu>
+                        </Dropdown>
                     </Dropdown-menu>
                 </Dropdown>
                 <div class="login-forgot">{{$L('忘记密码了？')}}<a href="javascript:void(0)" @click="forgotPassword">{{$L('重置密码')}}</a></div>
             </div>
         </div>
-        <div v-if="$Electron" class="login-right-bottom">
-            <Button icon="ios-globe-outline" type="primary" @click="inputServerUrl">{{$L('自定义服务器')}}</Button>
-        </div>
     </div>
 </template>
 
 <script>
 import {mapState} from "vuex";
+import {Store} from "le5le-store";
 
 export default {
     data() {
@@ -71,6 +90,8 @@ export default {
             demoAccount: {},
 
             needInvite: false,
+
+            subscribe: null,
         }
     },
     mounted() {
@@ -81,6 +102,16 @@ export default {
         } else {
             this.clearServerUrl();
         }
+        //
+        this.subscribe = Store.subscribe('useSSOLogin', () => {
+            this.inputServerUrl();
+        });
+    },
+    beforeDestroy() {
+        if (this.subscribe) {
+            this.subscribe.unsubscribe();
+            this.subscribe = null;
+        }
     },
     deactivated() {
         this.loginJump = false;
@@ -90,7 +121,12 @@ export default {
         this.invite = "";
     },
     computed: {
-        ...mapState(['cacheServerUrl']),
+        ...mapState([
+            'cacheServerUrl',
+
+            'themeMode',
+            'themeList',
+        ]),
 
         currentLanguage() {
             return this.languageList[this.languageType] || 'Language'
@@ -121,6 +157,10 @@ export default {
         }
     },
     methods: {
+        setTheme(mode) {
+            this.$store.dispatch("setTheme", mode)
+        },
+
         getDemoAccount() {
             if (this.isNotServer()) {
                 return;
@@ -158,7 +198,7 @@ export default {
 
         inputServerUrl() {
             $A.modalInput({
-                title: "自定义服务器",
+                title: "使用 SSO 登录",
                 value: this.cacheServerUrl,
                 placeholder: "请输入服务器地址",
                 onOk: (value, cb) => {

resources/assets/js/pages/manage.vue

@@ -517,27 +517,7 @@ export default {
         },
 
         setTheme(mode) {
-            if (mode === undefined) {
-                return;
-            }
-            if (!$A.isChrome()) {
-                $A.modalWarning("仅客户端或Chrome浏览器支持主题功能");
-                return;
-            }
-            switch (mode) {
-                case 'dark':
-                    $A.dark.enableDarkMode()
-                    break;
-                case 'light':
-                    $A.dark.disableDarkMode()
-                    break;
-                default:
-                    $A.dark.autoDarkMode()
-                    break;
-            }
-            this.$store.state.themeMode = mode;
-            this.$store.state.themeIsDark = $A.dark.isDarkEnabled();
-            $A.setStorage("cacheThemeMode", mode);
+            this.$store.dispatch("setTheme", mode)
         },
 
         toggleRoute(path) {

resources/assets/js/store/actions.js

@@ -166,6 +166,35 @@ export default {
         }
     },
 
+    /**
+     * 设置主题
+     * @param state
+     * @param mode
+     */
+    setTheme({state}, mode) {
+        if (mode === undefined) {
+            return;
+        }
+        if (!$A.isChrome()) {
+            $A.modalWarning("仅客户端或Chrome浏览器支持主题功能");
+            return;
+        }
+        switch (mode) {
+            case 'dark':
+                $A.dark.enableDarkMode()
+                break;
+            case 'light':
+                $A.dark.disableDarkMode()
+                break;
+            default:
+                $A.dark.autoDarkMode()
+                break;
+        }
+        state.themeMode = mode;
+        state.themeIsDark = $A.dark.isDarkEnabled();
+        $A.setStorage("cacheThemeMode", mode);
+    },
+
     /**
      * 获取基本数据（项目、对话、仪表盘任务）
      * @param dispatch

resources/assets/sass/components/_.scss

@@ -1,4 +1,3 @@
-@import "app-down";
 @import "auto-tip";
 @import "circle";
 @import "drawer-overlay";
@@ -12,3 +11,4 @@
 @import "user-avatar";
 @import "user-input";
 @import "report";
+@import "right-bottom";

resources/assets/sass/components/right-bottom.scss

@@ -1,19 +1,33 @@
-.common-app-down {
+.common-right-bottom {
     position: absolute;
-    bottom: 26px;
+    bottom: 22px;
     right: 26px;
     z-index: 1;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-end;
     transition: bottom 0.3s;
-    &.on-client {
-        &[data-route=login] {
-            bottom: 75px;
+
+    .common-right-bottom-link {
+        display: inline-block;
+        cursor: pointer;
+        line-height: 32px;
+        height: 32px;
+        padding: 0 15px;
+        margin: 4px 0;
+        font-size: 14px;
+        border-radius: 4px;
+        color: #fff;
+        background-color: #8bcf70;
+        border-color: #8bcf70;
+        &:hover {
+            color: #fff;
+            opacity: 0.9;
         }
     }
 }
 
-.common-app-down-notification {
+.common-right-bottom-notification {
     .notification-head {
         display: flex;
         align-items: center;
@@ -57,19 +71,3 @@
         }
     }
 }
-.common-app-down-link {
-    display: inline-block;
-    cursor: pointer;
-    line-height: 32px;
-    height: 32px;
-    padding: 0 15px;
-    font-size: 14px;
-    border-radius: 4px;
-    color: #fff;
-    background-color: #8bcf70;
-    border-color: #8bcf70;
-    &:hover {
-        color: #fff;
-        opacity: 0.9;
-    }
-}

resources/assets/sass/dark.scss

@@ -1,7 +1,7 @@
 body.dark-mode-reverse {
     .ivu-btn-primary,
     .ivu-badge-count,
-    .common-app-down-link {
+    .common-right-bottom .common-right-bottom-link {
         color: #000;
     }
 

resources/assets/sass/pages/page-login.scss

@@ -102,7 +102,7 @@
             display: flex;
             align-items: center;
             width: 388px;
-            .login-language {
+            .login-setting {
                 flex-shrink: 0;
                 display: flex;
                 align-items: center;
@@ -115,6 +115,20 @@
                     font-size: 12px;
                 }
             }
+            .login-setting-menu {
+                display: flex;
+                flex-direction: column;
+            }
+            .login-setting-item {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .ivu-icon {
+                    color: #666666;
+                    padding-left: 6px;
+                    margin-right: -6px;
+                }
+            }
             .login-forgot {
                 flex: 1;
                 padding-left: 24px;
@@ -123,12 +137,4 @@
             }
         }
     }
-    .login-right-bottom {
-        position: absolute;
-        bottom: 26px;
-        right: 26px;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-    }
 }

resources/assets/statics/public/js/language.all.js

@@ -382,7 +382,7 @@
         {"CN": "搜索","EN": "Search for","TC": "搜索","KM": "ស្វែងរក","TH": "ค้นหา","KO": "찾아서","JA": "検索する"},
         {"CN": "时间","EN": "Time","TC": "時間","KM": "បេលវេលា","TH": "เวลา","KO": "시각","JA": "時間"},
         {"CN": "身份","EN": "Identity","TC": "身份","KM": "អត្ដសហ្ញាន","TH": "ตัวตน","KO": "정체","JA": "身元"},
-        {"CN": "设置","EN": "Set","TC": "設置","KM": "តសសនីយផាប","TH": "ตั้ง","KO": "세트","JA": "セットする"},
+        {"CN": "设置","EN": "Setting","TC": "設置","KM": "តសសនីយផាប","TH": "ตั้ง","KO": "세트","JA": "セットする"},
         {"CN": "上传","EN": "Upload","TC": "上傳","KM": "ផ្ទុកឡើង","TH": "ที่อัพโหลด","KO": "업로드","JA": "アップロード"},
         {"CN": "删除","EN": "Delete","TC": "刪除","KM": "របៅបេលរសច","TH": "ลบ","KO": "지우다","JA": "削除する"},
         {"CN": "日历","EN": "Calendar","TC": "日曆","KM": "របកតីតិន","TH": "ปฏิทิน","KO": "달력","JA": "カレンダー"},