设置页面

src/views/home/setting/General.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+		<div class="label">User Name</div>
+		<div class="value">张三</div>
+	</div>
+	<div>
+		<div class="label">Email</div>
+		<div class="value">zhangsan@example.com</div>
+	</div>
+	<div>
+		<div class="label">Language</div>
+		<dropdown-menu v-model="locale" :list="langs" @change="changeLang" />
+	</div>
+	<div>
+		<div class="label">Log out on this device</div>
+		<button class="logout-btn" @click="logout">Log out</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onBeforeUnmount, inject } from 'vue'
+	import dropdownMenu from '@/components/dropdown-menu.vue'
+	import { useUserInfoStore } from '@/stores'
+	import { useI18n } from 'vue-i18n'
+	const { locale } = useI18n()
+	const reload = inject('reload')
+	const userInfoStore = useUserInfoStore()
+	const langs = ref([
+		{ label: 'English', value: 'ENGLISH' },
+		{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
+	])
+	const changeLang = (value: string) => {
+		locale.value = value
+		reload()
+	}
+	const logout = () => {
+		userInfoStore.logOut()
+	}
+</script>
+ 
+<style lang="less" scoped>
+	.logout-btn {
+		cursor: pointer;
+		height: 3.7rem;
+		width: 9.6rem;
+		border-radius: 3.7rem;
+		border: none;
+		background-color: #ff7a51;
+		color: #fff;
+		font-size: 1.4rem;
+	}
+</style>