github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-28 04:40:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化设置菜单

Browse Source
This commit is contained in:
kuaifan 2022-12-08 12:36:50 +08:00
parent 1513ebfe99
commit 6bffc040b3
6 changed files with 108 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
resources/assets/js/pages/manage.vue
View File

@ -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: 'password', name: '密码设置'},
{path: 'personal', name: '偏好设置', divided: true},
{path: 'system', name: '系统设置'},
{path: 'clearCache', name: '清除缓存'},
{path: 'system', name: '系统设置', divided: true},
{path: 'version', name: '更新版本', visible: !!this.clientNewVersion},
{path: 'version', name: '更新版本', divided: true, 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: 'password', name: '密码设置'},
{path: 'personal', name: '偏好设置', divided: true},
{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 || {}};

1
resources/assets/js/pages/manage/setting/index.vue
View File

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

65
resources/assets/js/pages/manage/setting/theme.vue Normal file
View File

@ -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>

5
resources/assets/js/routes.js vendored
View File

@ -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',

54
resources/assets/js/store/actions.js vendored
View File

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

2
resources/assets/sass/pages/page-setting.scss vendored
View File

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