complete balance page i18n, fix settings panel BUG

src/components/setting-panel/components/Loli.vue

@@ -37,7 +37,7 @@ import {
   /* 定位看板娘，重要 */
   position: fixed;
   z-index: 9999;
-  top: -250px;
+  top: -270px;
   left: 150px;
 }
 .lass {

src/language/en.ts

@@ -25,7 +25,7 @@ export default {
       fold: 'Fold Aside',
       create: 'CREATE NEW!',
       update: 'Update',
-      balance: 'Balance',
+      balance: 'P & L',
       ranking: 'Ranking',
       bylaw: 'Bylaw',
       contacts: 'Join Us',
@@ -52,4 +52,16 @@ export default {
     time: 'Estimated update time',
     history: 'History Version',
   },
+  balance: {
+    pl: 'Income and Expenditure Statement', // Profit and Loss
+    income: 'INCOME',
+    totalIncome: 'Total Income',
+    expenditure: 'EXPENDITURE',
+    totalExpenditure: 'Total Expenditure',
+    status: 'Economic Status',
+    deficitStatus: 'DEFICIT',
+    deficitAmount: 'Deficit Amount',
+    surplusStatus: 'Surplus',
+    surplusAmount: 'Surplus Amount',
+  },
 }

src/language/zh.ts

@@ -52,4 +52,16 @@ export default {
     time: '预计更新时间',
     history: '历史版本',
   },
+  balance: {
+    pl: '收支公示',
+    income: '收入',
+    totalIncome: '总收入',
+    expenditure: '支出',
+    totalExpenditure: '总支出',
+    status: '经济状态',
+    deficitStatus: '亏损',
+    deficitAmount: '亏损金额',
+    surplusStatus: '盈余',
+    surplusAmount: '盈余金额',
+  },
 }

src/views/balance/Balance.vue

@@ -14,7 +14,7 @@ import { calculateTotalAmount } from './log'
     <!-- 文章部分 -->
     <div class="article">
       <!-- 页面标题 -->
-      <div class="title">收支公示</div>
+      <div class="title">{{ $t('balance.pl') }}</div>
       <!-- 内容区 -->
       <div class="content">
         <Form :isIncome="true" />
@@ -27,8 +27,21 @@ import { calculateTotalAmount } from './log'
           class="amount-status-deficit"
           :class="calculateTotalAmount() >= 0 ? 'amount-status-surplus' : ''"
         >
-          <div>经济状态: <span>亏损</span></div>
+          <div>
-          <div>亏损金额: {{ calculateTotalAmount() }} CNY</div>
+            {{ $t('balance.status') }}:
+            <span>{{
+              calculateTotalAmount() >= 0
+                ? $t('balance.surplusStatus')
+                : $t('balance.deficitStatus')
+            }}</span>
+          </div>
+          <div>
+            {{
+              calculateTotalAmount() >= 0
+                ? $t('balance.surplusAmount')
+                : $t('balance.deficitAmount')
+            }}: {{ calculateTotalAmount() }} CNY
+          </div>
         </div>
       </div>
       <!-- 版权 -->

src/views/balance/components/Form.vue

@@ -4,21 +4,22 @@ import Log from './Log.vue'
 import { calculateTotalIncome, calculateTotalExpenditure } from '../log'
 
 const props = defineProps(['isIncome'])
-const status = props.isIncome ? '收入' : '支出'
+const title = props.isIncome ? 'income' : 'expenditure'
+const total = props.isIncome ? 'totalIncome' : 'totalExpenditure'
 </script>
 
 <template>
   <!-- 收入 -->
   <div class="form" :class="$props.isIncome ? '' : 'expenditure-form'">
     <!-- 标题 -->
-    <div class="title">{{ status }}</div>
+    <div class="title">{{ $t(`balance['${title}']`) }}</div>
     <!-- 收入记录的容器 -->
     <div class="container">
       <Log :isIncome="$props.isIncome" />
     </div>
     <!-- 总收入 -->
     <div class="sum">
-      总{{ status }}:
+      {{ $t(`balance['${total}']`) }}:
       {{
         $props.isIncome ? calculateTotalIncome() : calculateTotalExpenditure()
       }}