update

src/layout/header.vue

@@ -7,10 +7,10 @@
         </h2>
         <div class="main_menu">
           <router-link to="/" v-slot="{ isActive }">
-            <span :class="{ active: isActive }">我的房间</span>
+            <span :class="{ active: isActive }">{{ t('room.myRoom') }}</span>
           </router-link>
           <router-link to="/statistic" v-slot="{ isActive }">
-            <span :class="{ active: isActive }">数据看板</span>
+            <span :class="{ active: isActive }">{{ t('room.dashboard') }}</span>
           </router-link>
         </div>
       </div>

src/locales/lang/en/room.ts

@@ -15,6 +15,7 @@ export default {
     descplaceHolder: 'Please enter up to 200 words for the description',
     host: 'Hoster Infomation',
     nickname: 'Nickname',
+    phoneNumber: "Phone Number",
     nicknameRequired: 'Nickname is required',
     nicknameDesc: 'Please enter up to 15 words for the host nickname',
     selectScene: 'select scenes',
@@ -24,7 +25,7 @@ export default {
     name: 'name',
     time: 'time',
     addLeastScene: 'Add a minimum of one scene',
-    advanceConfig:'advanceConfig'
+    advanceConfig: 'Advance Configuration'
   },
   roomOnfired:
     'The studio is livestreaming; please stop the livestream before making any changes!',
@@ -36,7 +37,18 @@ export default {
   nickNameRegrexError: 'The nickname is limited to 1 to 15 characters in Chinese, English, digits, or underscores.',
   startMiniAppLivestreaming: 'livestreaming',
   shareFriends: "Share with friends",
-  scanMiniApp:"Scan the code to access LI-Stream via Wechat",
+  scanMiniApp: "Scan the code to access LI-Stream via Wechat",
   openScanMiniApp: 'Open the Wechat',
-  enterWechat: "Scan the code to start LI-Stream via Wechat"
+  enterWechat: "Scan the code to start LI-Stream via Wechat",
+  dashboard: "Data Kanban",
+  myEndRoom: 'Ended Studios',
+  usingTime: "Time of Use",
+  usingTimeRequire: "Please input the time of Using",
+  setPassword: 'Set Password',
+  authorize: 'Authorize',
+  addUser: 'Add User',
+  userAccount: 'User Account',
+  userAccountRequired: "Please input the User's Account",
+  setRoomNumber:"Set the number of guests in the studio",
+  roomTitle:'Room Title'
 }

src/locales/lang/en/statistic.ts

@@ -0,0 +1,21 @@
+export default {
+  allStatus: 'Overall Overview',
+  roomData: "Room Data",
+  roomMssage: "Room Mssage",
+  top5: 'Ranking of the Number of Livestreaming (Top 5)',
+  mTop5: 'Ranking of the Number of Comments (Top 5)',
+  visits: "Total Number of Visits",
+  clicks: "Total Number of Clicks",
+  shares: 'Total Number of Shares',
+  relatedScenes: "Related Scenes",
+  duration: 'Duration/ Minute',
+  createTime: "Create Time",
+  status: "Status",
+  watch: 'Watch',
+  share: 'Share',
+  pageCount: '%N% data in total',
+  firstEnter: "First time Entrance",
+  departure: "Last time Departure",
+  amount: 'amount',
+  message: 'message'
+}

src/locales/lang/zh/room.ts

@@ -14,6 +14,7 @@ export default {
     descplaceHolder: '请输入简介，限200字。',
     host: '主持人信息',
     nickname: '昵称',
+    phoneNumber: "手机号",
     nicknameRequired: '请输入昵称',
     nicknameDesc: '请输入主持人昵称，限15字',
     selectScene: '选择场景',
@@ -23,7 +24,7 @@ export default {
     name: '名称',
     time: '时间',
     addLeastScene: '至少添加一个场景',
-    advanceConfig:'高级配置'
+    advanceConfig: '高级配置'
   },
   roomOnfired: '房间直播中， 请先关闭直播再修改 ！',
   copyLink: '复制链接',
@@ -36,5 +37,17 @@ export default {
   shareFriends: "分享给好友",
   scanMiniApp: "微信“扫一扫”参与带看",
   openScanMiniApp: '打开微信“扫一扫”',
-  enterWechat: "进入微信小程序开始带看"
+  enterWechat: "进入微信小程序开始带看",
+  dashboard: "数据看板",
+  myEndRoom: "已结束房间",
+  usingTime: "使用时间",
+  usingTimeRequire: "请输入房间使用时间",
+  setPassword: '设置密码',
+  authorize: '授权',
+  addUser: '添加用户',
+  userAccount: '用户账号',
+  userAccountRequired: "请输入完整的账号",
+  setRoomNumber: "设置房间人数",
+  roomTitle: '房间名称',
+
 }

src/locales/lang/zh/statistic.ts

@@ -0,0 +1,21 @@
+export default {
+    allStatus: '整体概况',
+    roomData: "房间数据",
+    roomMssage: "房间留言",
+    top5: '带看次数排行（前5）',
+    mTop5: '留言数排行（前5）',
+    visits: "访问总人数",
+    clicks: "访问总次数",
+    shares: '分享总次数',
+    relatedScenes: "相关场景",
+    duration: '时长/分',
+    createTime: "创建时间",
+    status: "状态",
+    watch: '观看',
+    share: '分享',
+    pageCount: '共有 %N% 条数据',
+    firstEnter: "初次进入房间",
+    departure: "最后离开房间",
+    amount: '数量',
+    message: '留言内容'
+}

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

@@ -105,11 +105,11 @@
           />
           <h4>{{ t('room.form.advanceConfig') }}</h4>
           <a-form-item
-            label="使用时间"
+            :label="t('room.usingTime')"
             class="select-scene"
             name="useTimeList"
             style="margin-bottom: 2px"
-            :rules="[{ required: true, message: `请输入房间使用时间` }]"
+            :rules="[{ required: true, message: t('room.usingTimeRequire') }]"
           >
             <a-range-picker
               :show-time="{ format: 'HH:mm' }"
@@ -123,7 +123,7 @@
           </a-form-item>
 
           <a-form-item
-            label="设置密码"
+            :label="t('room.setPassword')"
             name="visitPassword"
             style="margin-bottom: 2px"
           >
@@ -141,7 +141,11 @@
               :placeholder="['-', '-', '-', '-']"
             />
           </a-form-item>
-          <a-form-item label="授权" name="scenes" style="margin-bottom: 2px">
+          <a-form-item
+            :label="t('room.authorize')"
+            name="scenes"
+            style="margin-bottom: 2px"
+          >
             <a-button
               type="primary"
               size="small"
@@ -149,7 +153,8 @@
               :disabled="isRoomEnd"
               @click="authvisible = true"
             >
-              <template #icon><plus-outlined /></template>添加用户</a-button
+              <template #icon><plus-outlined /></template
+              >{{ t('room.addUser') }}</a-button
             >
 
             <span
@@ -162,7 +167,7 @@
             </span>
           </a-form-item>
           <a-form-item
-            label="设置房间人数"
+            :label="t('room.setRoomNumber')"
             class="maxMan"
             name="maxMan"
             style="margin-bottom: 2px"
@@ -170,7 +175,6 @@
           >
             <a-input-number
               v-model:value="current.maxMan"
-              placeholder="请输入房间人数"
               :min="5"
               :max="50"
               :disabled="isRoomEnd"
@@ -187,27 +191,27 @@
 
     <a-modal
       v-model:visible="authvisible"
-      title="添加用户"
+      :title="t('room.addUser')"
       centered
       @ok="handleAuthConfirm"
     >
       <a-form layout="inline" :model="authformState">
         <a-form-item
-          label="用户账号"
+          :label="t('room.userAccount')"
           name="userName"
           style="margin-bottom: 20px"
-          :rules="[{ required: true, message: `请输入房间使用时间` }]"
+          :rules="[{ required: true, message: t('room.userAccountRequired') }]"
         >
           <a-input
             v-model:value="authformState.userName"
-            placeholder="请输入完整的账号"
+            :placeholder="t('room.userAccountRequired')"
           />
         </a-form-item>
         <a-form-item
-          label="使用时间"
+          :label="t('room.usingTime')"
           name="useTimeList"
           style="margin-bottom: 20px"
-          :rules="[{ required: true, message: `请输入房间使用时间` }]"
+          :rules="[{ required: true, message: t('room.usingTimeRequire') }]"
         >
           <a-range-picker
             :show-time="{ format: 'HH:mm' }"

src/views/room/list.vue

@@ -6,7 +6,7 @@
       </a-button>
 
       <a-button type="text" @click="roomStore.setRoomStatus(2)">
-        <h3>已结束房间 ({{ roomStore.endlist.length }})</h3>
+        <h3>{{ t('room.myEndRoom') }} ({{ roomStore.endlist.length }})</h3>
       </a-button>
     </div>
 

src/views/statistic/index.vue

@@ -11,7 +11,7 @@
           <template #tab>
             <span class="tab-title">
               <AppstoreOutlined />
-              整体概况
+              {{ t('statistic.allStatus') }}
             </span>
           </template>
           <tab1 :current="activeKey" />
@@ -20,39 +20,43 @@
           <template #tab>
             <span class="tab-title">
               <PieChartOutlined />
-              房间数据
+              {{ t('statistic.roomData') }}
             </span>
           </template>
-          <tab2 :current="activeKey"  />
+          <tab2 :current="activeKey" />
         </a-tab-pane>
         <a-tab-pane key="3">
           <template #tab>
             <span class="tab-title">
               <BarChartOutlined />
-              房间留言
+              {{ t('statistic.roomMssage') }}
             </span>
           </template>
 
-          <tab3  :current="activeKey" />
+          <tab3 :current="activeKey" />
         </a-tab-pane>
       </a-tabs>
     </a-config-provider>
   </div>
 </template>
 <script lang="ts" setup>
+import { useI18n } from '@/hook/useI18n'
 import tab1 from './tab/tab1.vue'
 import tab2 from './tab/tab2.vue'
 import tab3 from './tab/tab3.vue'
+
 import { ref, provide, watch } from 'vue'
 import { useLocale } from '@/locales/useLocale'
+
+const { t } = useI18n()
 const activeKey = ref('1')
 const { getAntdLocale } = useLocale()
 </script>
 <style lang="less">
 .statistic-container {
   margin-top: 30px;
-  
-  .ant-card-head-title{
+
+  .ant-card-head-title {
     font-weight: bolder;
   }
 

src/views/statistic/tab/tab1.vue

@@ -8,7 +8,7 @@
     >
       <a-col :span="6">
         <div class="status-item">
-          <span class="label">带看房间</span>
+          <span class="label">{{ t('room.myRoom') }}</span>
           <!-- <span class="number">80</span> -->
           <vue3-autocounter
             ref="counter"
@@ -25,7 +25,7 @@
       </a-col>
       <a-col :span="6">
         <div class="status-item">
-          <span class="label">访问总人数</span>
+          <span class="label">{{ t('statistic.visits') }}</span>
           <vue3-autocounter
             ref="counter"
             class="number"
@@ -41,7 +41,7 @@
       </a-col>
       <a-col :span="6">
         <div class="status-item">
-          <span class="label">访问总次数</span>
+          <span class="label"> {{ t('statistic.clicks') }}</span>
           <vue3-autocounter
             ref="counter"
             class="number"
@@ -57,7 +57,7 @@
       </a-col>
       <a-col :span="6">
         <div class="status-item">
-          <span class="label">分享总次数</span>
+          <span class="label">{{ t('statistic.shares') }} </span>
           <vue3-autocounter
             ref="counter"
             class="number"
@@ -74,7 +74,7 @@
     </a-row>
     <a-row :gutter="20" style="margin-bottom: 30px">
       <a-col :span="12">
-        <a-card title="带看次数排行（前5）" :bordered="false">
+        <a-card :title="t('statistic.top5')" :bordered="false">
           <ul class="topic-list">
             <li v-for="top in takeLookList" :key="top.dataKey">
               <p>
@@ -85,7 +85,7 @@
         </a-card>
       </a-col>
       <a-col :span="12">
-        <a-card title="留言数排行（前5）" :bordered="false">
+        <a-card :title="t('statistic.mTop5')" :bordered="false">
           <ul class="topic-list">
             <li v-for="top in danmakuList" :key="top.dataKey">
               <p>
@@ -155,13 +155,14 @@ import {
   unref,
   reactive
 } from 'vue'
+import { useI18n } from '@/hook/useI18n'
 import Vue3Autocounter from 'vue3-autocounter'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useStatisticStore } from '@/store/modules/statistic'
 
 const statisticStore = useStatisticStore()
-
+const { t } = useI18n()
 const takeLookList = computed(() => statisticStore.top5.takeLookList)
 const danmakuList = computed(() => statisticStore.top5.danmakuList)
 const heroStatus = computed(() => statisticStore.roomData)
@@ -529,10 +530,13 @@ const handleFinish = async () => {
   width: 100%;
   min-height: 500px;
 }
+.ant-card-body:has(.topic-list) {
+  min-height: 308px;
+}
 .topic-list {
   list-style: none;
   padding: 0;
-  min-height: 230px;
+
   li {
     counter-increment: li-counter;
     line-height: 20px;

src/views/statistic/tab/tab2.vue

@@ -9,14 +9,14 @@
             @finish="handleFinish"
             @finishFailed="handleFinishFailed"
           >
-            <a-form-item label="房间名称" name="roomTitle">
+            <a-form-item :label="t('room.roomTitle')" name="roomTitle">
               <a-input
                 v-model:value="formState.roomTitle"
-                placeholder="房间名称"
+                :placeholder="t('room.roomTitle')"
               >
               </a-input>
             </a-form-item>
-            <a-form-item label="使用时间" name="username">
+            <a-form-item :label="t('room.usingTime')" name="username">
               <a-range-picker
                 :show-time="{ format: 'HH:mm' }"
                 format="YYYY-MM-DD HH:mm"
@@ -25,7 +25,9 @@
               />
             </a-form-item>
             <a-form-item>
-              <a-button type="primary" html-type="submit"> 确定 </a-button>
+              <a-button type="primary" html-type="submit">
+                {{ t('base.confirm') }}
+              </a-button>
             </a-form-item>
           </a-form>
         </div>
@@ -59,12 +61,13 @@
 import { computed, onMounted, UnwrapRef, watch, reactive, unref } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 import { useStatisticStore } from '@/store/modules/statistic'
+import { useI18n } from '@/hook/useI18n'
 
+const { t } = useI18n()
 const props = defineProps<{
   current: string
 }>()
 
-
 const statisticStore = useStatisticStore()
 // const total = computed(() => statisticStore.allRoom.total)
 const pagination = computed(() => {
@@ -80,7 +83,7 @@ const pagination = computed(() => {
       fetchList()
     },
     pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
-    showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
+    showTotal: (total: string) => t('statistic.pageCount').replace('%N%', total) //分页中显示总的数据
   }
 })
 
@@ -100,31 +103,31 @@ const columns: TableColumnProps[] = [
   //   dataIndex: 'roomId'
   // },
   {
-    title: '房间名称',
+    title: t('room.roomTitle'),
     dataIndex: 'roomTitle'
   },
   {
-    title: '相关场景',
+    title: t('statistic.relatedScenes'),
     dataIndex: 'sceneNameList'
   },
   {
-    title: '时长/分',
+    title: t('statistic.duration'),
     dataIndex: 'lookTime'
   },
   {
-    title: '创建时间',
+    title: t('statistic.createTime'),
     dataIndex: 'createTime'
   },
   {
-    title: '状态',
+    title: t('statistic.status'),
     dataIndex: 'roomStatus'
   },
   {
-    title: '观看',
+    title: t('statistic.watch'),
     dataIndex: 'lookManCount'
   },
   {
-    title: '分享',
+    title: t('statistic.share'),
     dataIndex: 'shareCount'
   }
 ]
@@ -134,8 +137,8 @@ const fetchList = () => {
     pageNum: pagination.value.current,
     pageSize: pagination.value.pageSize,
     startTime: formState.userTime?.length ? formState.userTime[0] : '',
-      endTime: formState.userTime?.length ? formState.userTime[1] : '',
-      roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
+    endTime: formState.userTime?.length ? formState.userTime[1] : '',
+    roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
   })
 }
 watch(

src/views/statistic/tab/tab3.vue

@@ -9,14 +9,14 @@
             @finish="handleFinish"
             @finishFailed="handleFinishFailed"
           >
-            <a-form-item label="房间名称" name="roomTitle">
+            <a-form-item :label="t('room.roomTitle')" name="roomTitle">
               <a-input
                 v-model:value="formState.roomTitle"
-                placeholder="房间名称"
+                :placeholder="t('room.roomTitle')"
               >
               </a-input>
             </a-form-item>
-            <a-form-item label="使用时间" name="username">
+            <a-form-item :label="t('room.usingTime')" name="username">
               <a-range-picker
                 :show-time="{ format: 'HH:mm' }"
                 format="YYYY-MM-DD HH:mm"
@@ -25,7 +25,9 @@
               />
             </a-form-item>
             <a-form-item>
-              <a-button type="primary" html-type="submit"> 确定 </a-button>
+              <a-button type="primary" html-type="submit">
+                {{ t('base.confirm') }}
+              </a-button>
             </a-form-item>
           </a-form>
         </div>
@@ -66,7 +68,9 @@ import { computed, onMounted, UnwrapRef, watch, unref, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 import { useStatisticStore } from '@/store/modules/statistic'
 import dayjs from 'dayjs'
+import { useI18n } from '@/hook/useI18n'
 
+const { t } = useI18n()
 const statisticStore = useStatisticStore()
 
 const props = defineProps<{
@@ -77,7 +81,6 @@ const msgList = computed(() => statisticStore.roomMsg.list)
 
 console.log('msgList', msgList)
 
-
 interface FormState {
   roomTitle: string
   userTime: string[]
@@ -88,43 +91,43 @@ const formState: UnwrapRef<FormState> = reactive({
 })
 const columns: TableColumnProps[] = [
   {
-    title: '昵称',
+    title: t('room.form.nickname'),
     dataIndex: 'nickName',
     width: 120
   },
   {
-    title: '手机号',
+    title: t('room.form.phoneNumber'),
     // className: 'column-money',
     dataIndex: 'phoneNumber',
     width: 120
   },
   {
-    title: '房间名称',
+    title: t('room.roomTitle'),
     dataIndex: 'roomTitle',
     width: 120
   },
   {
-    title: '时长/分',
+    title: t('statistic.duration'),
     dataIndex: 'onlineTime',
     width: 120
   },
   {
-    title: '初次进入房间',
+    title: t('statistic.firstEnter'),
     dataIndex: 'firstInRoomTime',
     width: 160
   },
   {
-    title: '最后离开房间',
+    title: t('statistic.departure'),
     dataIndex: 'lastOutRoomTime',
     width: 160
   },
   {
-    title: '数量',
+    title: t('statistic.amount'),
     dataIndex: 'textCount',
     width: 80
   },
   {
-    title: '留言内容',
+    title:  t('statistic.message'),
     dataIndex: 'texts',
     width: 140
   }
@@ -143,7 +146,7 @@ const pagination = computed(() => {
       fetchList()
     },
     pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
-    showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
+    showTotal: (total: string) => t('statistic.pageCount').replace('%N%', total) //分页中显示总的数据
   }
 })