perf: 优化设置菜单

resources/assets/js/pages/manage.vue

@@ -26,7 +26,7 @@
                             transfer
                             transfer-class-name="page-manage-menu-dropdown"
                             placement="right-start">
-                            <DropdownItem>
+                            <DropdownItem :divided="!!item.divided">
                                 <div class="manage-menu-flex">
                                     {{$L(item.name)}}
                                     <Icon type="ios-arrow-forward"></Icon>
@@ -54,7 +54,7 @@
                             transfer
                             transfer-class-name="page-manage-menu-dropdown"
                             placement="right-start">
-                            <DropdownItem divided>
+                            <DropdownItem :divided="!!item.divided">
                                 <div class="manage-menu-flex">
                                     {{$L(item.name)}}
                                     <Badge v-if="reportUnreadNumber > 0" class="manage-menu-report-badge" :count="reportUnreadNumber"/>
@@ -72,48 +72,6 @@
                                 <DropdownItem name="exportTask">{{$L('导出任务统计')}}</DropdownItem>
                             </DropdownMenu>
                         </Dropdown>
-                        <!-- 主题皮肤 -->
-                        <Dropdown
-                            v-else-if="item.path === 'theme'"
-                            placement="right-start"
-                            transfer
-                            transfer-class-name="page-manage-menu-dropdown"
-                            @on-click="setTheme">
-                            <DropdownItem divided>
-                                <div class="manage-menu-flex">
-                                    {{$L(item.name)}}
-                                    <Icon type="ios-arrow-forward"></Icon>
-                                </div>
-                            </DropdownItem>
-                            <DropdownMenu slot="list">
-                                <DropdownItem
-                                    v-for="(item, key) in themeList"
-                                    :key="key"
-                                    :name="item.value"
-                                    :selected="themeMode === item.value">{{$L(item.name)}}</DropdownItem>
-                            </DropdownMenu>
-                        </Dropdown>
-                        <!-- 语言设置 -->
-                        <Dropdown
-                            v-else-if="item.path === 'language'"
-                            placement="right-start"
-                            transfer
-                            transfer-class-name="page-manage-menu-dropdown"
-                            @on-click="onLanguage">
-                            <DropdownItem divided>
-                                <div class="manage-menu-flex">
-                                    {{currentLanguage}}
-                                    <Icon type="ios-arrow-forward"></Icon>
-                                </div>
-                            </DropdownItem>
-                            <DropdownMenu slot="list">
-                                <DropdownItem
-                                    v-for="(item, key) in languageList"
-                                    :key="key"
-                                    :name="key"
-                                    :selected="languageType === key">{{item}}</DropdownItem>
-                            </DropdownMenu>
-                        </Dropdown>
                         <!-- 其他菜单 -->
                         <DropdownItem
                             v-else-if="item.visible !== false"
@@ -375,7 +333,6 @@ import DialogModal from "./manage/components/DialogModal";
 import TaskModal from "./manage/components/TaskModal";
 import notificationKoro from "notification-koro1";
 import {Store} from "le5le-store";
-import {languageList, languageType, setLanguage} from "../language";
 
 export default {
     components: {
@@ -397,9 +354,6 @@ export default {
         return {
             loadIng: 0,
 
-            languageList,
-            languageType,
-
             mateName: /macintosh|mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl',
 
             addShow: false,
@@ -502,9 +456,6 @@ export default {
             'wsOpenNum',
             'columnTemplate',
 
-            'themeMode',
-            'themeList',
-
             'wsMsg',
 
             'clientNewVersion',
@@ -593,40 +544,30 @@ export default {
             }
         },
 
-        currentLanguage() {
-            return languageList[languageType] || 'Language'
-        },
-
         menu() {
             const {userIsAdmin} = this;
             if (userIsAdmin) {
                 return [
                     {path: 'taskBrowse', name: '最近打开的任务'},
 
-                    {path: 'personal', name: '个人设置', divided: true},
+                    {path: 'personal', name: '偏好设置', divided: true},
-                    {path: 'password', name: '密码设置'},
+                    {path: 'system', name: '系统设置'},
                     {path: 'clearCache', name: '清除缓存'},
 
-                    {path: 'system', name: '系统设置', divided: true},
+                    {path: 'version', name: '更新版本', divided: true, visible: !!this.clientNewVersion},
-                    {path: 'version', name: '更新版本', visible: !!this.clientNewVersion},
 
                     {path: 'allProject', name: '所有项目', divided: true},
                     {path: 'archivedProject', name: '已归档的项目'},
 
                     {path: 'team', name: '团队管理', divided: true},
 
-                    {path: 'theme', name: '主题皮肤', divided: true},
-
-                    {path: 'language', name: this.currentLanguage, divided: true},
-
                     {path: 'logout', name: '退出登录', style: {color: '#f40'}, divided: true},
                 ]
             } else {
                 return [
                     {path: 'taskBrowse', name: '最近打开的任务'},
 
-                    {path: 'personal', name: '个人设置', divided: true},
+                    {path: 'personal', name: '偏好设置', divided: true},
-                    {path: 'password', name: '密码设置'},
                     {path: 'clearCache', name: '清除缓存'},
 
                     {path: 'version', name: '更新版本', divided: true, visible: !!this.clientNewVersion},
@@ -634,10 +575,6 @@ export default {
                     {path: 'workReport', name: '工作报告', divided: true},
                     {path: 'archivedProject', name: '已归档的项目'},
 
-                    {path: 'theme', name: '主题皮肤', divided: true},
-
-                    {path: 'language', name: this.currentLanguage, divided: true},
-
                     {path: 'logout', name: '退出登录', style: {color: '#f40'}, divided: true},
                 ]
             }
@@ -763,20 +700,12 @@ export default {
     },
 
     methods: {
-        onLanguage(l) {
-            setLanguage(l)
-        },
-
         chackPass() {
             if (this.userInfo.changepass === 1) {
                 this.goForward({name: 'manage-setting-password'});
             }
         },
 
-        setTheme(mode) {
-            this.$store.dispatch("setTheme", mode)
-        },
-
         toggleRoute(path, params) {
             this.show768Menu = false;
             let location = {name: 'manage-' + path, params: params || {}};

resources/assets/js/pages/manage/setting/index.vue

@@ -72,6 +72,7 @@ export default {
             const menu = [
                 {path: 'personal', name: '个人设置'},
                 {path: 'language', name: '语言设置'},
+                {path: 'theme', name: '主题设置'},
                 {path: 'password', name: '密码设置'},
                 {path: 'email', name: '修改邮箱'},
             ]

resources/assets/js/pages/manage/setting/theme.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="setting-item submit">
+        <Form ref="formData" :model="formData" :rules="ruleData" label-width="auto" @submit.native.prevent>
+            <FormItem :label="$L('选择主题')" prop="theme">
+                <Select v-model="formData.theme" :placeholder="$L('选项主题')">
+                    <Option v-for="(item, index) in themeList" :value="item.value" :key="index">{{$L(item.name)}}</Option>
+                </Select>
+            </FormItem>
+        </Form>
+        <div class="setting-footer">
+            <Button :loading="loadIng > 0" type="primary" @click="submitForm">{{$L('提交')}}</Button>
+            <Button :loading="loadIng > 0" @click="resetForm" style="margin-left: 8px">{{$L('重置')}}</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+    data() {
+        return {
+            loadIng: 0,
+
+            formData: {
+                theme: '',
+            },
+
+            ruleData: { },
+        }
+    },
+
+    mounted() {
+        this.initData();
+    },
+
+    computed: {
+        ...mapState([
+            'themeMode',
+            'themeList',
+        ])
+    },
+
+    methods: {
+        initData() {
+            this.$set(this.formData, 'theme', this.themeMode);
+            this.formData_bak = $A.cloneJSON(this.formData);
+        },
+
+        submitForm() {
+            this.$refs.formData.validate((valid) => {
+                if (valid) {
+                    this.$store.dispatch("setTheme", this.formData.theme).then(res => {
+                        res && $A.messageSuccess('保存成功');
+                    })
+                }
+            })
+        },
+
+        resetForm() {
+            this.formData = $A.cloneJSON(this.formData_bak);
+        }
+    }
+}
+</script>

resources/assets/js/routes.js

@@ -44,6 +44,11 @@ export default [
                         path: 'language',
                         component: () => import('./pages/manage/setting/language.vue'),
                     },
+                    {
+                        name: 'manage-setting-theme',
+                        path: 'theme',
+                        component: () => import('./pages/manage/setting/theme.vue'),
+                    },
                     {
                         name: 'manage-setting-keyboard',
                         path: 'keyboard',

resources/assets/js/store/actions.js

@@ -237,33 +237,39 @@ export default {
      * 设置主题
      * @param state
      * @param mode
+     * @returns {Promise<unknown>}
      */
     setTheme({state}, mode) {
-        if (mode === undefined) {
+        return new Promise(function (resolve) {
-            return;
+            if (mode === undefined) {
-        }
+                resolve(false)
-        if (!$A.isChrome()) {
+                return;
-            if ($A.isEEUiApp) {
-                $A.modalWarning("仅Android设置支持主题功能");
-            } else {
-                $A.modalWarning("仅客户端或Chrome浏览器支持主题功能");
             }
-            return;
+            if (!$A.isChrome()) {
-        }
+                if ($A.isEEUiApp) {
-        switch (mode) {
+                    $A.modalWarning("仅Android设置支持主题功能");
-            case 'dark':
+                } else {
-                $A.dark.enableDarkMode()
+                    $A.modalWarning("仅客户端或Chrome浏览器支持主题功能");
-                break;
+                }
-            case 'light':
+                resolve(false)
-                $A.dark.disableDarkMode()
+                return;
-                break;
+            }
-            default:
+            switch (mode) {
-                $A.dark.autoDarkMode()
+                case 'dark':
-                break;
+                    $A.dark.enableDarkMode()
-        }
+                    break;
-        state.themeMode = mode;
+                case 'light':
-        state.themeIsDark = $A.dark.isDarkEnabled();
+                    $A.dark.disableDarkMode()
-        window.localStorage['__theme:mode__'] = mode;
+                    break;
+                default:
+                    $A.dark.autoDarkMode()
+                    break;
+            }
+            state.themeMode = mode;
+            state.themeIsDark = $A.dark.isDarkEnabled();
+            window.localStorage['__theme:mode__'] = mode;
+            resolve(true)
+        });
     },
 
     /**

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

@@ -107,7 +107,7 @@
     }
     .setting-item {
         .ivu-input,
-        .ivu-select-selection {
+        .ivu-select-default {
             max-width: 460px;
         }
         .ivu-form {