refs #3301 Rewrite Settings with composition API
This commit is contained in:
parent
13b6f3611f
commit
e18533dd43
|
@ -16,21 +16,21 @@
|
||||||
<div></div>
|
<div></div>
|
||||||
<el-aside width="240px" class="menu">
|
<el-aside width="240px" class="menu">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeRoute()"
|
:default-active="activeRoute"
|
||||||
class="setting-menu"
|
class="setting-menu"
|
||||||
:text-color="primaryColor"
|
:text-color="primaryColor"
|
||||||
:background-color="backgroundColor"
|
:background-color="backgroundColor"
|
||||||
:router="true"
|
:router="true"
|
||||||
>
|
>
|
||||||
<el-menu-item :index="`/${id()}/settings/general`">
|
<el-menu-item :index="`/${id}/settings/general`">
|
||||||
<font-awesome-icon icon="gear" class="icon" size="lg" />
|
<font-awesome-icon icon="gear" class="icon" size="lg" />
|
||||||
<span>{{ $t('settings.general.title') }}</span>
|
<span>{{ $t('settings.general.title') }}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item :index="`/${id()}/settings/timeline`">
|
<el-menu-item :index="`/${id}/settings/timeline`">
|
||||||
<font-awesome-icon icon="align-left" class="icon" size="lg" />
|
<font-awesome-icon icon="align-left" class="icon" size="lg" />
|
||||||
<span>{{ $t('settings.timeline.title') }}</span>
|
<span>{{ $t('settings.timeline.title') }}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item :index="`/${id()}/settings/filters`">
|
<el-menu-item :index="`/${id}/settings/filters`">
|
||||||
<font-awesome-icon icon="filter" class="icon" size="lg" />
|
<font-awesome-icon icon="filter" class="icon" size="lg" />
|
||||||
<span>{{ $t('settings.filters.title') }}</span>
|
<span>{{ $t('settings.filters.title') }}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
@ -43,33 +43,43 @@
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapState } from 'vuex'
|
import { defineComponent, computed, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { useStore } from '@/store'
|
||||||
|
import { MUTATION_TYPES } from '@/store/Settings'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: 'Settings',
|
name: 'Settings',
|
||||||
computed: {
|
setup() {
|
||||||
...mapState({
|
const space = `Settings`
|
||||||
primaryColor: state => state.App.theme.primary_color,
|
const store = useStore()
|
||||||
backgroundColor: state => state.App.theme.background_color
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const primaryColor = computed(() => store.state.App.theme.primary_color)
|
||||||
|
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||||
|
const id = computed(() => route.params.id)
|
||||||
|
const activeRoute = computed(() => route.path)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
store.commit(`${space}/${MUTATION_TYPES.CHANGE_ACCOUNT_ID}`, id.value)
|
||||||
|
router.push(`/${id.value}/settings/general`)
|
||||||
})
|
})
|
||||||
},
|
|
||||||
created() {
|
const close = () => {
|
||||||
this.$store.commit('Settings/changeAccountID', this.id())
|
router.push(`/${id.value}/home`)
|
||||||
this.$router.push(`/${this.id()}/settings/general`)
|
}
|
||||||
},
|
|
||||||
methods: {
|
return {
|
||||||
id() {
|
primaryColor,
|
||||||
return this.$route.params.id
|
backgroundColor,
|
||||||
},
|
id,
|
||||||
close() {
|
activeRoute,
|
||||||
this.$router.push(`/${this.id()}/home`)
|
close
|
||||||
},
|
|
||||||
activeRoute() {
|
|
||||||
return this.$route.path
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Loading…
Reference in New Issue