设置页面

src/views/home/setting/Profile.vue

@@ -0,0 +1,75 @@
+<template>
+	<div>
+		<div class="label">Region</div>
+		<dropdown-menu v-model="region" :list="regions" @change="changeRegion" />
+	</div>
+	<div>
+		<div class="label">Role</div>
+		<dropdown-menu v-model="role" :list="roles" @change="changeRole" />
+	</div>
+	<div>
+		<div class="label">Current Agent Profile</div>
+		<div class="group">
+			<span class="icon"><svg-icon name="xiang" size="20" color="#000" /></span>
+			<dropdown-menu v-model="agent" :list="agents" @change="changeAgent" />
+		</div>
+	</div>
+	<div>
+		<div class="label">Current Notification Frequency</div>
+		<div class="value">3–6 times per hour</div>
+	</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 region = ref('China')
+	const regions = ref([
+		{ label: 'United States', value: 'United States' },
+		{ label: 'Singapore', value: 'Singapore' },
+		{ label: 'Australia', value: 'Australia' },
+		{ label: 'South Korea', value: 'South Korea' },
+		{ label: 'China', value: 'China' },
+		{ label: 'Italy', value: 'Italy' },
+		{ label: 'France', value: 'France' },
+		{ label: 'Japan', value: 'Japan' },
+		{ label: 'Canada', value: 'Canada' },
+		{ label: 'Germany', value: 'Germany' }
+	])
+	const changeRegion = (value: string) => {
+		console.log(value)
+	}
+
+	const role = ref('Designer')
+	const roles = ref([
+		{ label: 'Designer', value: 'Designer' },
+		{ label: 'Student', value: 'Student' },
+		{ label: 'Teacher', value: 'Teacher' },
+		{ label: 'Parent', value: 'Parent' }
+	])
+	const changeRole = (value: string) => {
+		console.log(value)
+	}
+
+	const agent = ref('Partner')
+	const agents = ref([
+		{ label: 'Partner', value: 'Partner' },
+		{ label: 'Observer', value: 'Observer' },
+		{ label: 'Mentor', value: 'Mentor' }
+	])
+	const changeAgent = (value: string) => {
+		console.log(value)
+	}
+</script>
+ 
+<style lang="less" scoped>
+	.group {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+	}
+</style>