fix：计费规则界面中英适配

src/views/billing/rule/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <ACard
-      title="计费规则配置"
+      :title="t('page.rule.title')"
       :bordered="false"
       :body-style="{ flex: 1, overflow: 'hidden' }"
       class="flex-col-stretch sm:flex-1-hidden"
@@ -17,7 +17,7 @@
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
             <ASpace>
-              <AButton type="primary" @click="handleEdit(record)">编辑</AButton>
+              <AButton type="primary" @click="handleEdit(record)">{{ t('page.rule.edit') }}</AButton>
             </ASpace>
           </template>
         </template>
@@ -39,29 +39,29 @@
         :rules="rules"
         layout="vertical"
       >
-        <AFormItem label="流量" name="traffic">
+        <AFormItem :label="t('page.rule.traffic')" name="traffic">
           <AInputNumber
             v-model:value="currentRule.traffic"
             :min="1"
             :precision="0"
             style="width: 100%"
-            placeholder="请输入流量大小"
+            :placeholder="t('page.rule.pletraffic')"
           />
         </AFormItem>
-        <AFormItem label="价格" name="price">
+        <AFormItem :label="t('page.rule.price')" name="price">
           <AInputNumber
             v-model:value="currentRule.price"
             :min="0"
             :precision="2"
             style="width: 100%"
-            placeholder="请输入价格"
+            :placeholder="t('page.rule.pleprice')"
           />
         </AFormItem>
-        <AFormItem label="单位" name="unit">
+        <AFormItem :label="t('page.rule.unit')" name="unit">
           <ASelect
             v-model:value="currentRule.unit"
             style="width: 100%"
-            placeholder="请选择单位"
+            :placeholder="t('page.rule.pleunit')"
           >
             <ASelect.Option
               v-for="option in unitOptions"
@@ -72,15 +72,15 @@
             </ASelect.Option>
           </ASelect>
         </AFormItem>
-        <AFormItem label="状态" name="enable">
+        <AFormItem :label="t('page.rule.status')" name="enable">
           <ASwitch v-model:checked="currentRule.enable" />
         </AFormItem>
       </AForm>
 
       <template #footer>
         <ASpace>
-          <AButton @click="closeDrawer">取消</AButton>
-          <AButton type="primary" :loading="submitLoading" @click="handleSubmit">确定</AButton>
+          <AButton @click="closeDrawer">{{ t('page.rule.close') }}</AButton>
+          <AButton type="primary" :loading="submitLoading" @click="handleSubmit">{{ t('page.rule.confirm') }}</AButton>
         </ASpace>
       </template>
     </ADrawer>
@@ -105,6 +105,8 @@ import {
 } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import type { ColumnsType } from 'ant-design-vue/es/table';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
 interface BillRule {
   id: number;
@@ -129,7 +131,7 @@ const loading = ref(false);
 const submitLoading = ref(false);
 const data = ref<BillRule[]>([]);
 const drawerVisible = ref(false);
-const drawerTitle = ref('编辑规则');
+const drawerTitle = ref(t('page.rule.modaltitle'));
 const currentRule = ref<BillRuleUpdate | null>(null);
 const formRef = ref<FormInstance>();
 
@@ -149,21 +151,21 @@ const getUnitText = (unit: number) => {
 
 const columns: ColumnsType = [
   {
-    title: '流量',
+    title: t('page.rule.traffic'),
     dataIndex: 'traffic',
     key: 'traffic',
     align: 'center',
     width: 150
   },
   {
-    title: '价格',
+    title: t('page.rule.price'),
     dataIndex: 'price',
     key: 'price',
     align: 'center',
     width: 150
   },
   {
-    title: '单位',
+    title: t('page.rule.unit'),
     dataIndex: 'unit',
     key: 'unit',
     align: 'center',
@@ -171,15 +173,15 @@ const columns: ColumnsType = [
     customRender: ({ text }) => getUnitText(text)
   },
   {
-    title: '状态',
+    title: t('page.rule.status'),
     dataIndex: 'enable',
     key: 'enable',
     align: 'center',
     width: 100,
-    customRender: ({ text: enable }) => (enable ? '启用' : '未启用')
+    customRender: ({ text: enable }) => (enable ? t('page.rule.use') : t('page.rule.unuse'))
   },
   {
-    title: '操作',
+    title: t('page.rule.action'),
     key: 'action',
     align: 'center',
     width: 100,
@@ -188,9 +190,9 @@ const columns: ColumnsType = [
 ];
 
 const rules = {
-  traffic: [{ required: true, message: '请输入流量大小' }],
-  price: [{ required: true, message: '请输入价格' }],
-  unit: [{ required: true, message: '请输入单位' }]
+  traffic: [{ required: true, message: t('page.rule.pletraffic') }],
+  price: [{ required: true, message: t('page.rule.pleprice') }],
+  unit: [{ required: true, message: t('page.rule.pleunit') }]
 };
 
 // 获取列表数据
@@ -204,8 +206,8 @@ const getData = async () => {
       data.value = [];
     }
   } catch (error) {
-    console.error('获取计费规则失败:', error);
-    message.error('获取计费规则失败');
+    console.error('error:', error);
+    message.error(t('page.rule.geterr'));
     data.value = [];
   } finally {
     loading.value = false;
@@ -234,12 +236,12 @@ const handleSubmit = async () => {
     submitLoading.value = true;
 
     await updateBillRule(currentRule.value);
-    message.success('更新成功');
+    message.success(t('page.rule.updatesuc'));
     closeDrawer();
     getData();
   } catch (error) {
-    console.error('更新失败:', error);
-    message.error('更新失败');
+    console.error('update error:', error);
+    message.error(t('page.rule.updateerr'));
   } finally {
     submitLoading.value = false;
   }