udpate

src/layout/header.vue

@@ -5,28 +5,24 @@
         <a :href="mainURL"><img :src="logoPng" /></a>
       </h2>
       <div class="right_menu_container">
-        <a-dropdown placement="bottomRight">
+        <a-dropdown placement="bottomRight" trigger="click">
           <template #overlay>
             <a-menu style="width: 100px" @click="handlerLangClick">
               <a-menu-item
                 v-for="menu in langList"
                 :key="menu.key"
-                class="menu-item"
+                class="menu-item lang-item"
                 :class="{ [menu.key]: true }"
               >
+                <img style="height: 10px" :src="menu.icon" />
                 {{ menu.label }}
               </a-menu-item>
             </a-menu>
           </template>
-          <div class="avatar">
-            <a-avatar :size="32">
-              <template #icon>
-                <img :src="userStore.current.avatar" />
-              </template>
-            </a-avatar>
+          <div class="avatar" style="margin-right: 30px">
+            <img style="height: 14px" :src="getImgSrc(currentLang.key)" />
             <span>
               {{ currentLang.label }}
-              <!-- <DownOutlined /> -->
             </span>
           </div>
         </a-dropdown>
@@ -70,11 +66,11 @@ import logoPng from '@/assets/images/logo.png'
 import { useLocaleStore } from '@/store/modules/locale'
 import { useI18n } from '@/hook/useI18n'
 import { useLocale } from '@/locales/useLocale'
-import { computed, unref, inject } from 'vue'
+import { computed, unref } from 'vue'
 import { LocaleType } from '#/config'
 import { showLoading } from '@/components/loading'
-
-const getImgSrc = inject('getImgSrc')
+import { getImgSrc } from '@/utils/getImgSrc'
+// const getImgSrc = inject('getImgSrc')
 
 defineOptions({ name: 'LayoutHeader' })
 
@@ -91,12 +87,12 @@ const currentLang = computed(() => {
     label: t(`base.lang.${unref(getLocale)}`)
   }
 })
-console.log('getImgSrc', getImgSrc)
+// console.log('getImgSrc', getImgSrc)
 const langList = localInfo.availableLocales.map((item: string) => {
   return {
     key: item,
     label: t(`base.lang.${item}`),
-    // icon: getImgSrc(unref(getLocale))
+    icon: getImgSrc(item)
   }
 })
 
@@ -133,6 +129,10 @@ const handlerLangClick: MenuProps['onClick'] = async e => {
     color: #fa7c7c;
   }
 }
+.lang-item {
+  text-align: left;
+  vertical-align: middle;
+}
 </style>
 
 <style lang="scss" scoped>

src/locales/lang/en/base.ts

@@ -6,7 +6,7 @@ export default {
   personalCenter: '个人中心',
   logout: '退出登录',
   startLivestring: '开始带看',
-  edit: '编辑',
-  share: '分享',
-  delede: '删除'
+  edit: 'Edit',
+  share: 'Share',
+  delede: 'Delete'
 }

src/locales/lang/en/room.ts

@@ -1,9 +1,7 @@
 export default {
-  createRoom: 'create Room',
-  personalCenter: '个人中心',
-  logout: '退出登录',
-  startLivestring: '开始带看',
-  edit: '编辑',
-  share: '分享',
-  delede: '删除'
+  createRoom: 'Create studios',
+  myRoom: 'My studios',
+  personalCenter: 'Personal Center',
+  logout: 'log out',
+  startLivestring: 'Start livestreaming'
 }

src/locales/lang/zh-CN/base.ts

@@ -8,5 +8,7 @@ export default {
   startLivestring: '开始带看',
   edit: '编辑',
   share: '分享',
-  delede: '删除'
+  delede: '删除',
+  save: '保存',
+  cancel: '取消'
 }

src/locales/lang/zh-CN/room.ts

@@ -1,9 +1,20 @@
 export default {
   createRoom: '创建房间',
+  editRoom: '修改房间',
+  myRoom: '我的房间',
+  searchRoom: '搜索房间',
   personalCenter: '个人中心',
   logout: '退出登录',
   startLivestring: '开始带看',
-  edit: '编辑',
-  share: '分享',
-  delede: '删除'
+  roomInfo: '房间信息',
+  form: {
+    title: '标题',
+    titleRequired: '标题为必填字段',
+    titleplaceHolder: '请输入标题名称，限15字。',
+    desc: '简介',
+    title3: '主持人信息，',
+
+    placeHolder2: '请输入简介，限200字。',
+    placeHolder3: '昵称，请输入主持人昵称，限15字。'
+  }
 }

src/views/room/edit-room/index.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :visible="visible"
-    :title="`${!room ? '创建' : '修改'}房间`"
+    :title="!room ? t('room.createRoom') : t('room.editRoom')"
     :after-close="onCancel"
     width="912px"
     :style="{
@@ -12,7 +12,7 @@
   >
     <template #footer>
       <a-button class="action-bottom" size="middle" @click="visible = false">
-        取消
+        {{ t('base.cancel') }}
       </a-button>
       <a-button
         class="action-bottom"
@@ -20,7 +20,7 @@
         size="middle"
         @click="saveRoom"
       >
-        保存
+        {{ t('base.save') }}
       </a-button>
       <!-- <a-button
         v-if="room"
@@ -48,15 +48,15 @@
         :wrapper-col="{ span: 24 }"
         :model="current"
       >
-        <h4>房间信息</h4>
+        <h4>{{ t('room.roomInfo') }}</h4>
         <a-form-item
-          label="标题"
+          :label="t('room.form.title')"
           name="title"
-          :rules="[{ required: true, message: '标题为必填字段' }]"
+          :rules="[{ required: true, message: t('room.form.titleRequired') }]"
         >
           <a-input
             v-model:value.trim="current.title"
-            placeholder="请输入标题名称，限15字"
+            :placeholder="t('room.form.titleplaceHolder')"
             :maxlength="15"
             show-count
           />
@@ -111,8 +111,10 @@ import unScenePng from '@/assets/images/un-scene.png'
 
 import type { Scene } from '@/store/modules/scene'
 import type { FormInstance } from 'ant-design-vue'
+import { useI18n } from '@/hook/useI18n'
 
 const roomStore = useRoomStore()
+const { t } = useI18n()
 
 // const titleValidator = ref({
 //   validator: (_, value) =>
@@ -151,6 +153,7 @@ export default defineComponent({
     // }
 
     return {
+      t,
       visible,
       current,
       formRef,

src/views/room/list.vue

@@ -1,9 +1,9 @@
 <template>
   <div ref="headerRef" class="header">
-    <h3>我的房间({{ roomStore.list.length }})</h3>
+    <h3>{{ t('room.myRoom') }}({{ roomStore.list.length }})</h3>
     <a-input
       v-model:value="keyword"
-      placeholder="搜索房间"
+      :placeholder="t('room.searchRoom')"
       class="room-search"
       allow-clear
     >