Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-25 16:43:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

updata:智控台页面添加语言切换，支持中英繁。

Browse Source
This commit is contained in:
rainv123
2025-09-11 17:10:50 +08:00
parent a9b0775469
commit 98a1483032
41 changed files with 3800 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/HeaderBar.vue
+92 -39
View File
@@ -9,52 +9,52 @@
<!-- 中间导航菜单 -->
<div class="header-center">
<div class="equipment-management"
<div class="equipment-management"
:class="{ 'active-tab': $route.path === '/home' || $route.path === '/role-config' || $route.path === '/device-management' }"
@click="goHome">
<img loading="lazy" alt="" src="@/assets/header/robot.png"
:style="{ filter: $route.path === '/home' || $route.path === '/role-config' || $route.path === '/device-management' ? 'brightness(0) invert(1)' : 'None' }" />
智能体管理
<img loading="lazy" alt="" src="@/assets/header/robot.png"
:style="{ filter: $route.path === '/home' || $route.path === '/role-config' || $route.path === '/device-management' ? 'brightness(0) invert(1)' : 'None' }" />
<span class="nav-text">{{ $t('header.smartManagement') }}</span>
</div>
<div v-if="isSuperAdmin" class="equipment-management" :class="{ 'active-tab': $route.path === '/model-config' }"
@click="goModelConfig">
<img loading="lazy" alt="" src="@/assets/header/model_config.png"
<img loading="lazy" alt="" src="@/assets/header/model_config.png"
:style="{ filter: $route.path === '/model-config' ? 'brightness(0) invert(1)' : 'None' }" />
模型配置
<span class="nav-text">{{ $t('header.modelConfig') }}</span>
</div>
<div v-if="isSuperAdmin" class="equipment-management"
<div v-if="isSuperAdmin" class="equipment-management"
:class="{ 'active-tab': $route.path === '/user-management' }" @click="goUserManagement">
<img loading="lazy" alt="" src="@/assets/header/user_management.png"
<img loading="lazy" alt="" src="@/assets/header/user_management.png"
:style="{ filter: $route.path === '/user-management' ? 'brightness(0) invert(1)' : 'None' }" />
用户管理
<span class="nav-text">{{ $t('header.userManagement') }}</span>
</div>
<div v-if="isSuperAdmin" class="equipment-management"
<div v-if="isSuperAdmin" class="equipment-management"
:class="{ 'active-tab': $route.path === '/ota-management' }" @click="goOtaManagement">
<img loading="lazy" alt="" src="@/assets/header/firmware_update.png"
<img loading="lazy" alt="" src="@/assets/header/firmware_update.png"
:style="{ filter: $route.path === '/ota-management' ? 'brightness(0) invert(1)' : 'None' }" />
OTA管理
<span class="nav-text">{{ $t('header.otaManagement') }}</span>
</div>
<el-dropdown v-if="isSuperAdmin" trigger="click" class="equipment-management more-dropdown"
<el-dropdown v-if="isSuperAdmin" trigger="click" class="equipment-management more-dropdown"
:class="{ 'active-tab': $route.path === '/dict-management' || $route.path === '/params-management' || $route.path === '/provider-management' || $route.path === '/server-side-management' }"
@visible-change="handleParamDropdownVisibleChange">
<span class="el-dropdown-link">
<img loading="lazy" alt="" src="@/assets/header/param_management.png"
<img loading="lazy" alt="" src="@/assets/header/param_management.png"
:style="{ filter: $route.path === '/dict-management' || $route.path === '/params-management' || $route.path === '/provider-management' || $route.path === '/server-side-management' ? 'brightness(0) invert(1)' : 'None' }" />
参数字典
<span class="nav-text">{{ $t('header.paramDictionary') }}</span>
<i class="el-icon-arrow-down el-icon--right" :class="{ 'rotate-down': paramDropdownVisible }"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="goParamManagement">
参数管理
{{ $t('header.paramManagement') }}
</el-dropdown-item>
<el-dropdown-item @click.native="goDictManagement">
字典管理
{{ $t('header.dictManagement') }}
</el-dropdown-item>
<el-dropdown-item @click.native="goProviderManagement">
字段管理
{{ $t('header.providerManagement') }}
</el-dropdown-item>
<el-dropdown-item @click.native="goServerSideManagement">
服务端管理
{{ $t('header.serverSideManagement') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -63,11 +63,31 @@
<!-- 右侧元素 -->
<div class="header-right">
<div class="search-container" v-if="$route.path === '/home' && !(isSuperAdmin && isSmallScreen)">
<el-input v-model="search" placeholder="输入名称搜索.." class="custom-search-input"
<el-input v-model="search" :placeholder="$t('header.searchPlaceholder')" class="custom-search-input"
@keyup.enter.native="handleSearch">
<i slot="suffix" class="el-icon-search search-icon" @click="handleSearch"></i>
</el-input>
</div>
<!-- 语言切换下拉菜单 -->
<el-dropdown trigger="click" class="language-dropdown" @visible-change="handleLanguageDropdownVisibleChange">
<span class="el-dropdown-link">
<i class="el-icon-document"></i>
<i class="el-icon-arrow-down el-icon--right" :class="{ 'rotate-down': languageDropdownVisible }"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeLanguage('zh_CN')">
{{ $t('language.zhCN') }}
</el-dropdown-item>
<el-dropdown-item @click.native="changeLanguage('zh_TW')">
{{ $t('language.zhTW') }}
</el-dropdown-item>
<el-dropdown-item @click.native="changeLanguage('en')">
{{ $t('language.en') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<img loading="lazy" alt="" src="@/assets/home/avatar.png" class="avatar-img" />
<el-dropdown trigger="click" class="user-dropdown" @visible-change="handleUserDropdownVisibleChange">
<span class="el-dropdown-link">
@@ -75,8 +95,8 @@
<i class="el-icon-arrow-down el-icon--right" :class="{ 'rotate-down': userDropdownVisible }"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="showChangePasswordDialog">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="handleLogout">退出登录</el-dropdown-item>
<el-dropdown-item @click.native="showChangePasswordDialog">{{ $t('header.changePassword') }}</el-dropdown-item>
<el-dropdown-item @click.native="handleLogout">{{ $t('header.logout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -91,6 +111,8 @@
import userApi from '@/apis/module/user';
import { mapActions, mapGetters } from 'vuex';
import ChangePasswordDialog from './ChangePasswordDialog.vue'; // 引入修改密码弹窗组件
import { changeLanguage } from '@/i18n';
import i18n from '@/i18n';
export default {
name: 'HeaderBar',
@@ -108,6 +130,7 @@ export default {
isChangePasswordDialogVisible: false, // 控制修改密码弹窗的显示
userDropdownVisible: false,
paramDropdownVisible: false,
languageDropdownVisible: false,
isSmallScreen: false
}
},
@@ -115,6 +138,10 @@ export default {
...mapGetters(['getIsSuperAdmin']),
isSuperAdmin() {
return this.getIsSuperAdmin;
},
// 获取当前语言
currentLanguage() {
return i18n.locale || 'zh_CN';
}
},
mounted() {
@@ -182,7 +209,7 @@ export default {
} catch (error) {
console.error('正则表达式创建失败:', error);
this.$message.error({
message: '搜索关键词格式不正确',
message: this.$t('message.error'),
showClose: true
});
}
@@ -197,13 +224,13 @@ export default {
// 调用 Vuex 的 logout action
await this.logout();
this.$message.success({
message: '退出登录成功',
message: this.$t('message.success'),
showClose: true
});
} catch (error) {
console.error('退出登录失败:', error);
this.$message.error({
message: '退出登录失败，请重试',
message: this.$t('message.error'),
showClose: true
});
}
@@ -215,6 +242,19 @@ export default {
handleParamDropdownVisibleChange(visible) {
this.paramDropdownVisible = visible;
},
// 监听语言下拉菜单的可见状态变化
handleLanguageDropdownVisibleChange(visible) {
this.languageDropdownVisible = visible;
},
// 切换语言
changeLanguage(lang) {
changeLanguage(lang);
this.languageDropdownVisible = false;
this.$message.success({
message: this.$t('message.success'),
showClose: true
});
},
// 使用 mapActions 引入 Vuex 的 logout action
...mapActions(['logout'])
@@ -229,7 +269,7 @@ export default {
height: 63px !important;
min-width: 900px;
/* 设置最小宽度防止过度压缩 */
overflow: hidden;
overflow: visible;
}
.header-container {
@@ -261,7 +301,7 @@ export default {
align-items: center;
gap: 25px;
position: absolute;
left: 50%;
left: 44%;
transform: translateX(-50%);
}
@@ -304,29 +344,29 @@ export default {
}
.search-container {
margin-right: 15px;
min-width: 150px;
flex-grow: 1;
max-width: 220px;
margin-right: 5px;
flex: 0.9;
min-width: 60px;
max-width: none;
}
.custom-search-input>>>.el-input__inner {
height: 30px;
border-radius: 15px;
height: 18px;
border-radius: 9px;
background-color: #fff;
border: 1px solid #e4e6ef;
padding-left: 15px;
font-size: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding-left: 8px;
font-size: 9px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
width: 100%;
}
.search-icon {
cursor: pointer;
color: #909399;
margin-right: 8px;
font-size: 14px;
line-height: 30px;
margin-right: 3px;
font-size: 9px;
line-height: 18px;
}
.custom-search-input::v-deep .el-input__suffix-inner {
@@ -345,6 +385,11 @@ export default {
flex-shrink: 0;
}
.language-dropdown {
flex-shrink: 0;
margin-right: 5px;
}
.more-dropdown {
padding-right: 20px;
}
@@ -364,6 +409,14 @@ export default {
transition: transform 0.3s ease;
}
/* 导航文本样式 - 支持中英文换行 */
.nav-text {
white-space: normal;
text-align: center;
max-width: 80px;
line-height: 1.2;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.header-center {