openbmc-web7：head栏增加语言切换

webui-vue官方是默认在登录之后不支持语言切换功能，如果想更改语言必须退出登录，然后再登录界面选择新的语言，重新登录后方可。在实际使用中显得很不友好，实际使用中肯定是希望在登录后也可以随意切换任何支持的语言。本文将以较小的改动实现这种登录后切换语言的操作，详细请看下文。

增加语言请参考openbmc-web3：添加语言：

1 head栏添加语言切换功能

1.1 功能实现过程

head栏有四个按钮，前两个“健康状态”和“电源状态”是跳转按钮，第三个是“刷新按钮”，第四个用户按钮，下拉选项。

实现语言切换功能，即下拉语言列表，点击对应的语言实现切换功能。

修改src/components/AppHeader/AppHeader.vue文件

在“app-header-user”前面增加一个语言切换按钮，具体html内容如下：

        <li class="nav-item"><b-dropdownid="app-header-language"rightdata-test-id="appHeader-container-language"><template #button-content><span class="responsive-text">{{ currentLangue }}</span></template><template v-for="language in languages"><b-dropdown-item-button :key="language"data-test-id="appHeader-link-profile"@click="changeLangue(language)">{{ language.text }}</b-dropdown-item-button></template></b-dropdown></li>

{{ currentLangue }} 变量动态显示当前语言

使用v-for创建languages数组中包含的item对象，这里使用b-dropdown-item-button组件创建

changeLangue(language) 指定点击item的函数，传入参数是对应的ietm：language（用来更新语言）

languages数组，在data中创建该数组，用于初始化languages数组（参见Login.vue创建）：

    languages: [{value: 'en-US',text: 'English',},{value: 'zh-CN',text: 'Chinese',},{value: 'es',text: 'Español',},{value: 'ru-RU',text: 'Русский',},],

value对应的是语言文件的名称（zh-CN.json)。

text是对应语言名。

currentLangue()计算属性，在computed中增加该计算属性，依据this.$i18n.locale值从languages中匹配text，并显示当前语言：

currentLangue() {return this.languages.find(item=>item.value===this.$i18n.locale).text;},

changeLangue(language)函数，在method中添加该函数用于更新this.$i18n.locale的值：

changeLangue(language) {this.$i18n.locale = language.value;}

1.2 功能实现演示

通过上述修改编译后，可以在head栏看到语言的下拉列表，点击后可实现语言切换。

动态演示：

发现导航栏没有跟随变化，查看导航栏VUE代码，发现只渲染一次，并没有实现动态更新。

2 导航栏添加语言切换功能

2.1 功能实现过程

修改src/components/AppHeader/AppHeader.vue文件：

在该文件的method中的changeLangue(language)函数，增加导航栏刷新信号，用来通知导航栏刷新：

changeLangue(language) {this.$i18n.locale = language.value;this.$emit('refreshNav');}

修改src/layouts/AppLayout.vue文件：

将该文件中的内容换成如下内容：

<div class="app-container&#