配置语言

2026-03-03 11:10:43 +08:00
parent 84cc6a5607
commit 0e5b3049b6
11 changed files with 260 additions and 105 deletions
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -16,7 +16,7 @@
 			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
 		<div class="menu-item" @click="onTest">
-			<span class="title" v-show="!isCollapse">TEST</span>
+			<span class="title">TEST</span>
 		</div>
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
@@ -34,18 +34,33 @@
 					@click="onClickHistoryItem(item)"
 					:class="{ active: item.id == id }"
 				>
-					<span>{{ item.name }}</span>
+					<input
+						v-show="item.edit"
+						type="text"
+						:value="item.name"
+						ref="inputRef"
+						:input-id="item.id"
+						@click.stop
+						@keyup.enter="(e) => onEnterHistoryItem(e, item)"
+						@blur="(e) => onBlurHistoryItem(e, item)"
+					/>
+					<span class="label" v-show="!item.edit">{{ item.name }}</span>
 					<el-popover
 						placement="right"
 						trigger="click"
 						popper-style="padding: 1rem 0.5rem;"
+						v-model:visible="item.visible"
 					>
 						<template #reference>
 							<span @click.stop class="icon"><svg-icon name="more" size="16" /></span>
 						</template>
 						<div class="history-item-menu">
-							<div class="rename" @click="onRenameHistoryItem(item)">Rename</div>
-							<div class="delete" @click="onDeleteHistoryItem(item)">Delete</div>
+							<div class="rename" @click="onRenameHistoryItem(item)">
+								{{ $t('Home.rename') }}
+							</div>
+							<div class="delete" @click="onDeleteHistoryItem(item)">
+								{{ $t('Home.delete') }}
+							</div>
 						</div>
 					</el-popover>
 				</div>
@@ -55,10 +70,10 @@
 </template>

 <script setup lang="ts">
-	import { computed, ref } from 'vue'
+	import { computed, ref, nextTick } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
-	import { getProjectList } from '@/api/agent'
+	import { getProjectList, updateProject, deleteProject } from '@/api/agent'
 	import { FormatDate } from '@/utils/tools'
 	import MyEvent from '@/utils/myEvent'
 	const { t: $t } = useI18n()
@@ -72,34 +87,47 @@
 		globalStore.setHomeLeftNavCollapse(!isCollapse.value)
 	}
 	const showHistory = ref(true)
-
-	const todayList = ref([])
-	const yesterdayList = ref([])
-	const earlierChatList = ref([])
+	const list = ref([])
 	const historyList = computed(() => {
-		const list = []
-		if (todayList.value.length > 0) {
-			list.push({
+		const str = 'yyyyMMdd'
+		const today = FormatDate(Date.now(), str)
+		const yesterday = FormatDate(Date.now() - 24 * 60 * 60 * 1000, str)
+		const todayList = []
+		const yesterdayList = []
+		const earlierChatList = []
+		list.value.forEach((item: any) => {
+			const date = FormatDate(item.updateTime * 1000, str)
+			if (date == today) {
+				todayList.push(item)
+			} else if (date == yesterday) {
+				yesterdayList.push(item)
+			} else {
+				earlierChatList.push(item)
+			}
+		})
+		const arr = []
+		if (todayList.length > 0) {
+			arr.push({
 				title: true,
 				name: $t('Home.today')
 			})
-			list.push(...todayList.value)
+			arr.push(...todayList)
 		}
-		if (yesterdayList.value.length > 0) {
-			list.push({
+		if (yesterdayList.length > 0) {
+			arr.push({
 				title: true,
 				name: $t('Home.yesterday')
 			})
-			list.push(...yesterdayList.value)
+			arr.push(...yesterdayList)
 		}
-		if (earlierChatList.value.length > 0) {
-			list.push({
+		if (earlierChatList.length > 0) {
+			arr.push({
 				title: true,
 				name: $t('Home.earlierChat')
 			})
-			list.push(...earlierChatList.value)
+			arr.push(...earlierChatList)
 		}
-		return list
+		return arr
 	})

 	const onCreateProject = () => {
@@ -120,16 +148,37 @@
 	const onClickHistoryItem = (item: any) => {
 		router.push({ name: 'agent', params: { id: item.id } })
 	}
+	const inputRef = ref(null)
 	const onRenameHistoryItem = (item: any) => {
-		// const index = historyList.value.findIndex((i: any) => i.id == item.id)
-		// if (index != -1) {
-		// }
+		item.visible = false
+		item.edit = true
+		nextTick(() => {
+			inputRef.value.forEach((v: any) => {
+				const id = v.getAttribute('input-id')
+				if (id == item.id) v.focus()
+			})
+		})
+	}
+	const onEnterHistoryItem = (e: any, item: any) => {
+		e.target.blur()
+	}
+	const onBlurHistoryItem = (e: any, item: any) => {
+		item.edit = false
+		const name = e.target.value
+		if (!name) return console.warn('未输入名称，不允许重命名')
+		item.name = name
+		updateProject(item.id, { name }).then(() => {
+			GetProjectList()
+		})
 	}
 	const onDeleteHistoryItem = (item: any) => {
-		// const index = historyList.value.findIndex((i: any) => i.id == item.id)
-		// if (index != -1) {
-		// 	historyList.value.splice(index, 1)
-		// }
+		item.visible = false
+		deleteProject(item.id).then(() => {
+			GetProjectList()
+			if (item.id == id.value) {
+				router.push({ name: 'mainInput' })
+			}
+		})
 	}

 	const GetProjectList = async () => {
@@ -137,25 +186,13 @@
 			page: 1,
 			size: 100
 		})
-		const str = 'yyyyMMdd'
-		const today = FormatDate(Date.now(), str)
-		const yesterday = FormatDate(Date.now() - 24 * 60 * 60 * 1000, str)
-		todayList.value = []
-		yesterdayList.value = []
-		earlierChatList.value = []
-		const list = res.records || []
-		list.forEach((item: any) => {
-			const obj = { ...item }
-			const date = FormatDate(obj.createTime * 1000, str)
-			if (date == today) {
-				todayList.value.push(obj)
-			} else if (date == yesterday) {
-				yesterdayList.value.push(obj)
-			} else {
-				earlierChatList.value.push(obj)
-			}
+		list.value = []
+		const arr = res.records || []
+		arr.forEach((item: any) => {
+			const obj = { ...item, edit: false, visible: false }
+			list.value.push(obj)
 		})
-}
+	}
 	MyEvent.add('updateProjectList', GetProjectList)
 	GetProjectList()
 </script>
@@ -177,6 +214,7 @@
 			--collapse-top-padding: 4.6rem 0 0 0;
 			--collapse-create-btn-width: 5.1rem;
 			--collapse-menu-item-width: 50%;
+			--collapse-menu-item-icon-margin-right: 0;
 		}
 		> .top {
 			display: flex;
@@ -242,6 +280,7 @@
 			}
 			> .icon {
 				transition: transform 0.2s ease-in-out;
+				margin-right: var(--collapse-menu-item-icon-margin-right, 1.6rem);
 			}
 			&.active > .jiantou {
 				transform: rotate(90deg);
@@ -288,6 +327,14 @@
 						white-space: nowrap;
 						overflow: hidden;
 					}
+					> input {
+						flex: 1;
+						width: 0;
+						height: 100%;
+						border: none;
+						outline: none;
+						background-color: transparent;
+					}
 					> .icon {
 						width: 2.5rem;
 						height: 2.5rem;
--- a/src/views/home/setting/General.vue
+++ b/src/views/home/setting/General.vue
@@ -1,19 +1,19 @@
 <template>
 	<div>
-		<div class="label">User Name</div>
+		<div class="label">{{ $t('Home.userName') }}</div>
 		<div class="value">{{ userInfo?.username || '------' }}</div>
 	</div>
 	<div>
-		<div class="label">Email</div>
+		<div class="label">{{ $t('Home.email') }}</div>
 		<div class="value">{{ userInfo?.email || '------' }}</div>
 	</div>
 	<div>
-		<div class="label">Language</div>
+		<div class="label">{{ $t('Home.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 class="label">{{ $t('Home.logoutDevice') }}</div>
+		<button class="logout-btn" @click="logout">{{ $t('Home.logout') }}</button>
 	</div>
 </template>

--- a/src/views/home/setting/LearnMore.vue
+++ b/src/views/home/setting/LearnMore.vue
@@ -1,11 +1,11 @@
 <template>
 	<div>
-		<div class="label">User Agreement</div>
-		<button @click="onClickUserAgreement">View</button>
+		<div class="label">{{ $t('Home.userAgreement') }}</div>
+		<button @click="onClickUserAgreement">{{ $t('Home.view') }}</button>
 	</div>
 	<div>
-		<div class="label">Privacy Policy</div>
-		<button @click="onClickPrivacy">View</button>
+		<div class="label">{{ $t('Home.privacyPolicy') }}</div>
+		<button @click="onClickPrivacy">{{ $t('Home.view') }}</button>
 	</div>
 </template>

--- a/src/views/home/setting/Profile.vue
+++ b/src/views/home/setting/Profile.vue
@@ -1,22 +1,22 @@
 <template>
 	<div>
-		<div class="label">Region</div>
+		<div class="label">{{ $t('Home.region') }}</div>
 		<dropdown-menu v-model="base" :list="baseList" @change="changeBase" />
 	</div>
 	<div>
-		<div class="label">Role</div>
+		<div class="label">{{ $t('Home.role') }}</div>
 		<dropdown-menu v-model="role" :list="roles" @change="changeRole" />
 	</div>
 	<div>
-		<div class="label">Current Agent Profile</div>
+		<div class="label">{{ $t('Home.currentAgentProfile') }}</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 class="label">{{ $t('Home.currentNotificationFrequency') }}</div>
+		<div class="value">{{ $t('Home.timesPerHour', { time: '3–6' }) }}</div>
 	</div>
 </template>

@@ -27,19 +27,19 @@
 	import { UpdateUserProfile } from '@/api/user'
 	import { useI18n } from 'vue-i18n'
 	const userInfoStore = useUserInfoStore()
-	const { locale } = useI18n()
+	const { t } = useI18n()
 	const base = ref(userInfoStore.state.userInfo.base)
 	const baseList = 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' }
+		{ label: t('Country.unitedStates'), value: 'United States' },
+		{ label: t('Country.singapore'), value: 'Singapore' },
+		{ label: t('Country.australia'), value: 'Australia' },
+		{ label: t('Country.southKorea'), value: 'South Korea' },
+		{ label: t('Country.china'), value: 'China' },
+		{ label: t('Country.italy'), value: 'Italy' },
+		{ label: t('Country.france'), value: 'France' },
+		{ label: t('Country.japan'), value: 'Japan' },
+		{ label: t('Country.canada'), value: 'Canada' },
+		{ label: t('Country.germany'), value: 'Germany' }
 	])
 	const changeBase = (value: string) => {
 		onSubmit({ base: value })
@@ -47,17 +47,17 @@

 	const role = ref(userInfoStore.state.userInfo.role)
 	const roles = ref([
-		{ label: 'Designer', value: 'Designer' },
-		{ label: 'Student', value: 'Student' },
-		{ label: 'Teacher', value: 'Teacher' },
-		{ label: 'Parent', value: 'Parent' },
-		{ value: 'Other', label: 'Other' }
+		{ label: t('Role.designer'), value: 'Designer' },
+		{ label: t('Role.student'), value: 'Student' },
+		{ label: t('Role.teacher'), value: 'Teacher' },
+		{ label: t('Role.parent'), value: 'Parent' },
+		{ label: t('Role.other'), value: 'Other' }
 	])
 	const changeRole = (value: string) => {
 		onSubmit({ role: value })
 	}

-	const agent = ref("Partner")
+	const agent = ref('Partner')
 	const agents = ref([
 		{ label: 'Partner', value: 'Partner' },
 		{ label: 'Observer', value: 'Observer' },
--- a/src/views/home/setting/index.vue
+++ b/src/views/home/setting/index.vue
@@ -9,7 +9,7 @@
 	>
 		<template #header="{ close }">
 			<div class="setting-header">
-				<div class="title">Setting</div>
+				<div class="title">{{ $t('Home.setting') }}</div>
 				<span class="close" @click="close">
 					<svg-icon name="close" size="10" color="#000" />
 				</span>
@@ -56,9 +56,9 @@

 	const nav = ref('setting')
 	const navs = shallowRef([
-		{ icon: 'setting', label: 'General', component: General },
-		{ icon: 'profile', label: 'Profile', component: Profile },
-		{ icon: 'learn-more', label: 'Learn more', component: LearnMore }
+		{ icon: 'setting', label: $t('Home.general'), component: General },
+		{ icon: 'profile', label: $t('Home.profile'), component: Profile },
+		{ icon: 'learn-more', label: $t('Home.learnMore'), component: LearnMore }
 	])
 </script>
 
--- a/src/views/nuic/nuic-3.vue
+++ b/src/views/nuic/nuic-3.vue
@@ -35,27 +35,29 @@
 <script setup lang="ts">
 	import { computed, ref, reactive } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const router = useRouter()
 	const emit = defineEmits(['next'])
 	const data = reactive({
 		baseList: [
-			{ 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' }
+			{ label: t('Country.unitedStates'), value: 'United States' },
+			{ label: t('Country.singapore'), value: 'Singapore' },
+			{ label: t('Country.australia'), value: 'Australia' },
+			{ label: t('Country.southKorea'), value: 'South Korea' },
+			{ label: t('Country.china'), value: 'China' },
+			{ label: t('Country.italy'), value: 'Italy' },
+			{ label: t('Country.france'), value: 'France' },
+			{ label: t('Country.japan'), value: 'Japan' },
+			{ label: t('Country.canada'), value: 'Canada' },
+			{ label: t('Country.germany'), value: 'Germany' }
 		],
 		roleList: [
-			{ label: 'Designer', value: 'Designer' },
-			{ value: 'Student', label: 'Student' },
-			{ value: 'Teacher', label: 'Teacher' },
-			{ value: 'Parent', label: 'Parent' },
-			{ value: 'Other', label: 'Other' }
+			{ label: t('Role.designer'), value: 'Designer' },
+			{ label: t('Role.student'), value: 'Student' },
+			{ label: t('Role.teacher'), value: 'Teacher' },
+			{ label: t('Role.parent'), value: 'Parent' },
+			{ label: t('Role.other'), value: 'Other' }
 		],
 		base: 'China',
 		role: 'Student'