|
@@ -1,99 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-card shadow="never" header="语言主题">
|
|
|
- <el-form ref="form" label-width="120px" style="margin-top: 20px">
|
|
|
- <el-form-item :label="$t('user.nightmode')">
|
|
|
- <el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>
|
|
|
- <div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="主题颜色">
|
|
|
- <el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="$t('user.language')">
|
|
|
- <el-select v-model="config.lang">
|
|
|
- <el-option label="简体中文" value="zh-cn"></el-option>
|
|
|
- <el-option label="English" value="en"></el-option>
|
|
|
- </el-select>
|
|
|
- <div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
- <el-card shadow="never" header="个人设置" style="margin-top: 20px">
|
|
|
- <el-form ref="form" label-width="120px" style="margin-top: 20px">
|
|
|
- <el-form-item label="自动登出">
|
|
|
- <el-select v-model="config.autoExit">
|
|
|
- <el-option label="从不" :value="0"></el-option>
|
|
|
- <el-option label="1分钟" :value="1"></el-option>
|
|
|
- <el-option label="5分钟" :value="5"></el-option>
|
|
|
- <el-option label="10分钟" :value="10"></el-option>
|
|
|
- <el-option label="15分钟" :value="15"></el-option>
|
|
|
- <el-option label="20分钟" :value="20"></el-option>
|
|
|
- <el-option label="25分钟" :value="25"></el-option>
|
|
|
- <el-option label="30分钟" :value="30"></el-option>
|
|
|
- <el-option label="35分钟" :value="35"></el-option>
|
|
|
- <el-option label="40分钟" :value="40"></el-option>
|
|
|
- <el-option label="45分钟" :value="45"></el-option>
|
|
|
- <el-option label="50分钟" :value="50"></el-option>
|
|
|
- <el-option label="55分钟" :value="55"></el-option>
|
|
|
- <el-option label="60分钟" :value="60"></el-option>
|
|
|
- </el-select>
|
|
|
- <div class="el-form-item-msg">自动登出设置将在下次登录时生效</div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import colorTool from '@/utils/color'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
|
|
|
- config: {
|
|
|
- lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
|
|
|
- dark: this.$TOOL.data.get('APP_DARK') || false,
|
|
|
- colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF',
|
|
|
- autoExit: this.$TOOL.data.get('AUTO_EXIT') || 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'config.dark'(val) {
|
|
|
- if (val) {
|
|
|
- document.documentElement.classList.add('dark')
|
|
|
- this.$TOOL.data.set('APP_DARK', val)
|
|
|
- } else {
|
|
|
- document.documentElement.classList.remove('dark')
|
|
|
- this.$TOOL.data.remove('APP_DARK')
|
|
|
- }
|
|
|
- },
|
|
|
- 'config.lang'(val) {
|
|
|
- this.$i18n.locale = val
|
|
|
- this.$TOOL.data.set('APP_LANG', val)
|
|
|
- },
|
|
|
- 'config.colorPrimary'(val) {
|
|
|
- if (!val) {
|
|
|
- val = '#409EFF'
|
|
|
- this.config.colorPrimary = '#409EFF'
|
|
|
- }
|
|
|
- document.documentElement.style.setProperty('--el-color-primary', val)
|
|
|
- for (let i = 1; i <= 9; i++) {
|
|
|
- document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val, i / 10))
|
|
|
- }
|
|
|
- for (let i = 1; i <= 9; i++) {
|
|
|
- document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val, i / 10))
|
|
|
- }
|
|
|
- this.$TOOL.data.set('APP_COLOR', val)
|
|
|
- },
|
|
|
- 'config.autoExit'(val) {
|
|
|
- if (val == 0) {
|
|
|
- this.$TOOL.data.remove('AUTO_EXIT')
|
|
|
- } else {
|
|
|
- this.$TOOL.data.set('AUTO_EXIT', val)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style></style>
|