From 63439ad22cd0868bc9653b0b40adbe5be05ff22c Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 17 Jan 2025 16:20:10 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/modules/global-footer/index.vue  |   7 +-
 src/locales/langs/en-us.ts                   |  14 +-
 src/locales/langs/zh-cn.ts                   |   8 +-
 src/router/elegant/routes.ts                 | 120 +++---
 src/store/modules/auth/index.ts              |   2 +-
 src/views/endpoint/access/index.vue          | 173 +++++++-
 src/views/endpoint/cdrlrecords/index.vue     | 269 ++++++++++++-
 src/views/endpoint/clientservice/index.vue   | 132 ++++++
 src/views/endpoint/records/index.vue         | 212 +++++++++-
 src/views/home/index.vue                     |   8 +-
 src/views/home/modules/card-data.vue         | 239 +----------
 src/views/home/modules/line-chart.vue        | 397 +------------------
 src/views/recharge/balancerecharge/index.vue |  18 +-
 src/views/recharge/rechargeservice/index.vue | 106 +++--
 src/views/userInfo/access/index.vue          |   2 +-
 src/views/userInfo/usercard/index.vue        |  71 ++--
 16 files changed, 1004 insertions(+), 774 deletions(-)
 create mode 100644 src/views/endpoint/clientservice/index.vue

diff --git a/src/layouts/modules/global-footer/index.vue b/src/layouts/modules/global-footer/index.vue
index d8412f6..c63a29a 100644
--- a/src/layouts/modules/global-footer/index.vue
+++ b/src/layouts/modules/global-footer/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {UserOutlined,HomeOutlined,MoneyCollectOutlined} from "@ant-design/icons-vue";
+import {UserOutlined,HomeOutlined,MoneyCollectOutlined,ClusterOutlined} from "@ant-design/icons-vue";
 import {useRouterPush} from "@/hooks/common";
 
 const { routerPushByKey } = useRouterPush();
@@ -15,6 +15,11 @@ defineOptions({
         <HomeOutlined class="text-icon-large" @click="routerPushByKey('home')"/>
       </ButtonIcon>
     </div>
+    <div class="flex-item">
+      <ButtonIcon>
+        <ClusterOutlined  class="text-icon-large" @click="routerPushByKey('endpoint_clientservice')"/>
+      </ButtonIcon>
+    </div>
     <div class="flex-item">
       <ButtonIcon>
         <MoneyCollectOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 3582fc4..2debc4d 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -3,10 +3,10 @@ const viewEn: any = {
   "view.recharge_rechargeservice":"recharge service",
   "view.recharge_balancerecharge":"balance recharge",
   "view.recharge_package":"package",
-  "view.endpoint": "endpoint",
-  "view.endpoint_access": "current",
+  "view.endpoint": "client",
+  "view.endpoint_access": "current client",
   "view.endpoint_records": "Historical",
-  "view.endpoint_cdrlrecords":"CDR records",
+  "view.endpoint_cdrlrecords":"Internet records",
   "view.billing": "Billing",
   "view.billing_histories": "Historical",
   "view.billing_Rechargehistory":"Recharge history",
@@ -281,7 +281,8 @@ const local: any = {
         passwordSameAsOld: 'New password cannot be the same as current password',
         passwordLength: 'Password must be at least 6 characters',
         resetSuccess: 'Password reset successfully',
-        resetFailed: 'Password reset failed, please try again'
+        resetFailed: 'Password reset failed, please try again',
+        byPassword:'reset by current Password'
       },
       bindWeChat: {
         title: 'Bind WeChat'
@@ -598,6 +599,11 @@ const local: any = {
       paid: 'Paid',
       unpaid: 'Unpaid'
     },
+    endpoint:{
+      access:"current client",
+      records:"Historical client",
+      cdrlrecords:"Internet records"
+    },
     cdrlrecords:{
       devicename:"Device name",
       uptraffic:"Traffic Up",
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index bd97905..5be21fe 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -283,7 +283,8 @@ const local:any = {
         byPassword: '通过原密码重置',
         byEmail: '通过邮箱验证码重置',
         resetSuccess: '密码重置成功',
-        resetFailed: '密码重置失败，请重试'
+        resetFailed: '密码重置失败，请重试',
+
       },
       bindWeChat: {
         title: '绑定微信'
@@ -600,6 +601,11 @@ const local:any = {
       paid: '已支付',
       unpaid: '未支付'
     },
+    endpoint:{
+      access:"当前设备",
+      records:"历史设备",
+      cdrlrecords:"上网记录"
+    },
     cdrlrecords:{
       devicename:"设备名称",
       uptraffic:"上传流量",
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index e8a6171..1513991 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -215,55 +215,55 @@ export const generatedRoutes: GeneratedRoute[] = [
 
 /**自定义静态菜单 */
 export const customRoutes: GeneratedRoute[] = [
-  {
-    name:'recharge/rechargeservice',
-    path:'/recharge/rechargeservice',
-    component:'layout.base',
-    meta:{
-      title:'充值服务',
-      i18nKey:'view.recharge',
-      icon:'icon-park-outline:all-application',
-      order:12,
-    },
-    children:[
-      {
-        name: 'recharge_rechargeservice',
-        path: '/recharge/rechargeservice',
-        component: 'view.recharge_rechargeservice',
-        meta: {
-          title: '充值服务',
-          i18nKey: 'view.recharge_rechargeservice',
-          icon: 'material-symbols:filter-list-off',
-          order: 1,
-          hideInMenu: true
-        },
-      },
-      {
-        name: 'recharge_balancerecharge',
-        path: '/recharge/balancerecharge',
-        component: 'view.recharge_balancerecharge',
-        meta: {
-          title: '余额充值',
-          i18nKey: 'view.recharge_balancerecharge',
-          icon: 'material-symbols:filter-list-off',
-          order: 1,
-          hideInMenu: true
-        },
-      },
-      {
-        name: 'recharge_package',
-        path: '/recharge/package',
-        component: 'view.recharge_package',
-        meta: {
-          title: '套餐办理',
-          i18nKey: 'view.recharge_package',
-          icon: 'material-symbols:filter-list-off',
-          order: 1,
-          hideInMenu: true
-        },
-      },
-    ],
-  },
+  // {
+  //   name:'recharge_rechargeservice',
+  //   path:'/recharge/rechargeservice',
+  //   component:'layout.base',
+  //   meta:{
+  //     title:'充值服务',
+  //     i18nKey:'view.recharge',
+  //     icon:'icon-park-outline:all-application',
+  //     order:12,
+  //   },
+  //   children:[
+  //     {
+  //       name: 'recharge_rechargeservice',
+  //       path: '/recharge/rechargeservice',
+  //       component: 'view.recharge_rechargeservice',
+  //       meta: {
+  //         title: '充值服务',
+  //         i18nKey: 'view.recharge_rechargeservice',
+  //         icon: 'material-symbols:filter-list-off',
+  //         order: 1,
+  //         hideInMenu: true
+  //       },
+  //     },
+  //     {
+  //       name: 'recharge_balancerecharge',
+  //       path: '/recharge/balancerecharge',
+  //       component: 'view.recharge_balancerecharge',
+  //       meta: {
+  //         title: '余额充值',
+  //         i18nKey: 'view.recharge_balancerecharge',
+  //         icon: 'material-symbols:filter-list-off',
+  //         order: 1,
+  //         hideInMenu: true
+  //       },
+  //     },
+  //     {
+  //       name: 'recharge_package',
+  //       path: '/recharge/package',
+  //       component: 'view.recharge_package',
+  //       meta: {
+  //         title: '套餐办理',
+  //         i18nKey: 'view.recharge_package',
+  //         icon: 'material-symbols:filter-list-off',
+  //         order: 1,
+  //         hideInMenu: true
+  //       },
+  //     },
+  //   ],
+  // },
   {
     name: 'endpoint',
     path: '/endpoint',
@@ -276,12 +276,24 @@ export const customRoutes: GeneratedRoute[] = [
       //hideInMenu: true
     },
     children: [
+      {
+        name: 'endpoint_clientservice',
+        path: '/endpoint/clientservice',
+        component: 'view.endpoint_clientservice',
+        meta: {
+          title: '设备服务',
+          i18nKey: 'view.endpoint',
+          icon: 'material-symbols:filter-list-off',
+          order: 1,
+          hideInMenu: true
+        },
+      },
       {
         name: 'endpoint_access',
         path: '/endpoint/access',
         component: 'view.endpoint_access',
         meta: {
-          title: '当前',
+          title: '当前设备',
           i18nKey: 'view.endpoint_access',
           icon: 'material-symbols:filter-list-off',
           order: 1
@@ -343,7 +355,7 @@ export const customRoutes: GeneratedRoute[] = [
           i18nKey: 'view.recharge_rechargeservice',
           icon: 'material-symbols:filter-list-off',
           order: 2,
-          hideInMenu: true
+          // hideInMenu: true
         },
       },
       {
@@ -358,9 +370,9 @@ export const customRoutes: GeneratedRoute[] = [
         },
       },
       {
-        name: 'billing_Rechargehistory',
-        path: '/billing/Rechargehistory',
-        component: 'view.billing_Rechargehistory',
+        name: 'billing_rechargehistory',
+        path: '/billing/rechargehistory',
+        component: 'view.billing_rechargehistory',
         meta: {
           title: '充值记录',
           i18nKey: 'view.billing_Rechargehistory',
diff --git a/src/store/modules/auth/index.ts b/src/store/modules/auth/index.ts
index 57554ba..38e61c1 100644
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@@ -72,7 +72,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     startLoading();
 
     const { data: loginToken, error } = await fetchLogin(loginForm);
-
+    console.log(loginToken) //lai
     if (!error) {
       const pass = await loginByToken(loginToken);
       onSuccess && onSuccess();
diff --git a/src/views/endpoint/access/index.vue b/src/views/endpoint/access/index.vue
index 01b090a..c8de333 100644
--- a/src/views/endpoint/access/index.vue
+++ b/src/views/endpoint/access/index.vue
@@ -1,7 +1,174 @@
 <script setup lang="ts">
-import access from '@/views/userInfo/access/index.vue'
+import {ref} from 'vue'
+import type {TableColumnsType} from 'ant-design-vue'
+import {WifiOutlined} from '@ant-design/icons-vue'
+import {useI18n} from "vue-i18n";
+import { useRouter } from 'vue-router';
+defineOptions({
+  name: 'access'
+});
+const { t } = useI18n();
+const router = useRouter();
+
+const handleBack = () => {
+  router.push('/endpoint/clientservice');
+};
+
+// 设备列表数据
+const deviceList = ref<{
+  deviceName: string;
+  macAddress: string;
+  speed: string;
+  id: number;
+}[]>([]);
+const loading = ref(false);
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.access.devicename'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '30%'
+  },
+  {
+    title: t('page.access.mac'),
+    dataIndex: 'macAddress',
+    key: 'macAddress',
+    width: '40%'
+  },
+  {
+    title: t('page.access.speed'),
+    dataIndex: 'speed',
+    key: 'speed',
+    width: '30%',
+    align: 'right'
+  }
+];
+// 格式化速度函数
+function formatSpeed(bytesPerSecond: number): string {
+  // 处理 0 值、undefined 或 null 的情况
+  if (!bytesPerSecond || bytesPerSecond === 0) {
+    return '0 B/s';
+  }
+
+  if (bytesPerSecond < 1024) {
+    return `${Number(bytesPerSecond.toFixed(2))} B/s`;
+  } else if (bytesPerSecond < 1024 * 1024) {
+    return `${Number((bytesPerSecond / 1024).toFixed(2))} KB/s`;
+  } else if (bytesPerSecond < 1024 * 1024 * 1024) {
+    return `${Number((bytesPerSecond / (1024 * 1024)).toFixed(2))} MB/s`;
+  } else {
+    return `${Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2))} GB/s`;
+  }
+}
+
+// 获取设备列表数据
+async function getDeviceList() {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchCurrentDevices();
+    if (!error && data) {
+      // 将API返回的数据映射到表格所需的格式
+      deviceList.value = data.rows.map(item => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        speed: formatSpeed(item.activity) // 如果需要显示设备类型作为速度
+      }));
+    }
+  } catch (err) {
+    console.error('Failed to fetch device list:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getDeviceList();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getDeviceList();
+});
+
+
 </script>
+
 <template>
-<access/>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <WifiOutlined/>
+          <span>{{ t('page.access.currentdevice') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.access.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="deviceList"
+        :pagination="{
+          total: deviceList.length,
+          pageSize: 10,
+          showSizeChanger: false,
+          showTotal: (total) => `共 ${total} 条`
+        }"
+      >
+      </a-table>
+    </a-card>
+  </div>
 </template>
-<style scoped></style>
+
+<style scoped>
+.device-list-container {
+  padding: 8px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 12px;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/endpoint/cdrlrecords/index.vue b/src/views/endpoint/cdrlrecords/index.vue
index 30c6b39..3a2451d 100644
--- a/src/views/endpoint/cdrlrecords/index.vue
+++ b/src/views/endpoint/cdrlrecords/index.vue
@@ -1,7 +1,270 @@
 <script setup lang="ts">
-import cdrlrecords from '@/views/userInfo/cdrlrecords/index.vue'
+import { ref, onMounted } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { HistoryOutlined } from '@ant-design/icons-vue'
+import { useI18n } from "vue-i18n";
+import { fetchCDRHistory } from '@/service/api/auth';
+import {useRouter} from "vue-router";
+defineOptions({
+  name: 'cdrlrecords'
+});
+const { t } = useI18n();
+const router = useRouter();
+const handleBack = () => {
+  router.push('/endpoint/clientservice');
+};
+// 定义记录类型
+interface CDRRecord {
+  id: number;
+  deviceName: string;
+  macAddress: string;
+  trafficUp: string;
+  trafficDown: string;
+  startTime: string;
+  endTime: string;
+}
+
+// 定义API返回的原始数据类型
+interface RawCDRRecord {
+  id: number;
+  clientName: string;
+  clientMac: string;
+  trafficUp: number;  // 字节数
+  trafficDown: number;  // 字节数
+  startTime: number;  // 时间戳
+  endTime: number;    // 时间戳
+}
+
+// CDR记录数据
+const cdrData = ref<CDRRecord[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0
+});
+
+// 展开行控制
+const expandedRowKeys = ref<number[]>([]);
+
+// 处理展开行变化
+function handleExpandChange(expanded: boolean, record: CDRRecord) {
+  if (expanded) {
+    expandedRowKeys.value = [record.id];
+  } else {
+    expandedRowKeys.value = [];
+  }
+}
+
+// 格式化流量数据的函数
+const formatTraffic = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
+}
+
+// 格式化时间戳
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.cdrlrecords.devicename'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '40%'
+  },
+  {
+    title: t('page.cdrlrecords.uptraffic'),
+    dataIndex: 'trafficUp',
+    key: 'trafficUp',
+    width: '30%',
+    align: 'right'
+  },
+  {
+    title: t('page.cdrlrecords.downtraffic'),
+    dataIndex: 'trafficDown',
+    key: 'trafficDown',
+    width: '30%',
+    align: 'right'
+  }
+];
+
+// 获取CDR记录数据
+async function getCDRHistory(page = pagination.value.current, pageSize = pagination.value.pageSize) {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchCDRHistory({
+      pageNum: page,
+      pageSize: pageSize
+    });
+    if (!error && data) {
+      // 将原始数据映射为显示所需的格式
+      cdrData.value = data.rows.map((item: RawCDRRecord) => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        trafficUp: formatTraffic(item.trafficUp),      // 格式化上传流量
+        trafficDown: formatTraffic(item.trafficDown),   // 格式化下载流量
+        startTime: formatTimestamp(item.startTime),     // 格式化开始时间
+        endTime: formatTimestamp(item.endTime)          // 格式化结束时间
+      }));
+      pagination.value.total = data.total;
+    }
+  } catch (err) {
+    console.error('Failed to fetch CDR history:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 处理分页变化
+function handleTableChange(pag: any) {
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+  getCDRHistory(pag.current, pag.pageSize);
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getCDRHistory();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getCDRHistory();
+});
 </script>
+
 <template>
-  <cdrlrecords/>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <HistoryOutlined />
+          <span>{{ t('page.cdrlrecords.cdr') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.cdrlrecords.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="cdrData"
+        :row-key="(record: CDRRecord) => record.id"
+        :expanded-row-keys="expandedRowKeys"
+        @expand="handleExpandChange"
+        :pagination="{
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          showTotal: (total: number) => `共 ${total} 条`,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }"
+        @change="handleTableChange"
+      >
+        <template #expandedRowRender="{ record }">
+          <div class="pl-4">
+            <div>{{ t('page.cdrlrecords.mac') }}: {{ record.macAddress }}</div>
+            <div>{{ t('page.cdrlrecords.uptime') }}: {{ record.startTime }}</div>
+            <div>{{ t('page.cdrlrecords.lasttime') }}: {{ record.endTime }}</div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
 </template>
-<style scoped></style>
+
+<style scoped>
+.device-list-container {
+  padding: 8px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 12px;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  width: 100%;
+}
+
+/* 使表格更紧凑的样式 */
+:deep(.ant-table) .ant-table-thead > tr > th,
+:deep(.ant-table) .ant-table-tbody > tr > td {
+  padding: 8px 4px;
+  font-size: 14px;
+}
+
+/* 在小屏幕下进一步压缩内边距 */
+@media screen and (max-width: 768px) {
+  :deep(.ant-table) .ant-table-thead > tr > th,
+  :deep(.ant-table) .ant-table-tbody > tr > td {
+    padding: 4px 2px;
+    font-size: 13px;
+  }
+}
+
+/* 确保表头文字也能自动换行 */
+:deep(.ant-table) .ant-table-thead > tr > th {
+  white-space: normal;
+  word-break: break-word;
+}
+
+/* 允许单元格内容自动换行 */
+:deep(.ant-table) .ant-table-tbody > tr > td {
+  white-space: normal;
+  word-break: break-word;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+</style>
diff --git a/src/views/endpoint/clientservice/index.vue b/src/views/endpoint/clientservice/index.vue
new file mode 100644
index 0000000..996cf69
--- /dev/null
+++ b/src/views/endpoint/clientservice/index.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useI18n } from "vue-i18n";
+import {
+  RightOutlined,
+  DesktopOutlined,
+  HistoryOutlined,
+  FileTextOutlined
+} from '@ant-design/icons-vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const menuItems = [
+  {
+    icon: DesktopOutlined,
+    title: t('page.endpoint.access'),
+    path: '/endpoint/access'
+  },
+  {
+    icon: HistoryOutlined,
+    title: t('page.endpoint.records'),
+    path: '/endpoint/records'
+  },
+  {
+    icon: FileTextOutlined,
+    title: t('page.endpoint.cdrlrecords'),
+    path: '/endpoint/cdrlrecords'
+  }
+];
+
+const handleMenuClick = (path: string) => {
+  router.push(path);
+};
+</script>
+
+<template>
+  <div class="client-service">
+    <div class="client-service-content">
+      <!-- 菜单列表 -->
+      <div class="menu-list">
+        <div
+          v-for="item in menuItems"
+          :key="item.title"
+          class="menu-item"
+          @click="handleMenuClick(item.path)"
+        >
+          <div class="menu-content">
+            <div class="icon-wrapper">
+              <component :is="item.icon" />
+            </div>
+            <span>{{ item.title }}</span>
+          </div>
+          <RightOutlined />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.client-service {
+  width: 100%;
+  min-height: 100vh;
+  padding: 16px;
+  background-color: #f5f5f7;
+}
+
+.client-service-content {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.menu-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.menu-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.menu-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: #f0f5ff;
+  color: #1890ff;
+}
+
+/* 响应式布局调整 */
+@media screen and (max-width: 768px) {
+  .menu-list {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .menu-item {
+    padding: 16px;
+  }
+
+  .client-service {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/endpoint/records/index.vue b/src/views/endpoint/records/index.vue
index 688650c..de6bacc 100644
--- a/src/views/endpoint/records/index.vue
+++ b/src/views/endpoint/records/index.vue
@@ -1,7 +1,213 @@
 <script setup lang="ts">
-import records from '@/views/userInfo/records/index.vue'
+import { ref, onMounted } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { HistoryOutlined } from '@ant-design/icons-vue'
+import { useI18n } from "vue-i18n";
+import { fetchHistoricalDevices } from '@/service/api/auth';
+import {useRouter} from "vue-router";
+defineOptions({
+  name: 'records'
+});
+const router = useRouter();
+const { t } = useI18n();
+const handleBack = () => {
+  router.push('/endpoint/clientservice');
+};
+
+// 格式化时间戳
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+
+// 格式化流量
+function formatDataUsage(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(2)}KB`;
+  } else if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
+  } else {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)}GB`;
+  }
+}
+
+// 定义记录类型
+interface DeviceRecord {
+  id: number;
+  deviceName: string;
+  macAddress: string;
+  dataUsage: string;
+  connectionTime: string;
+  disconnectionTime: string;
+}
+
+// 设备列表数据
+const deviceList = ref<DeviceRecord[]>([]);
+
+const loading = ref(false);
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.records.clientname'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '30%'
+  },
+  {
+    title: t('page.records.clientmac'),
+    dataIndex: 'macAddress',
+    key: 'macAddress',
+    width: '40%'
+  },
+  {
+    title: t('page.records.dataUsage'),
+    dataIndex: 'dataUsage',
+    key: 'dataUsage',
+    width: '30%',
+    align: 'right'
+  }
+];
+
+// 添加展开行控制
+const expandedRowKeys = ref<number[]>([]);
+
+// 处理展开行变化
+function handleExpandChange(expanded: boolean, record: DeviceRecord) {
+  if (expanded) {
+    expandedRowKeys.value = [record.id];
+  } else {
+    expandedRowKeys.value = [];
+  }
+}
+
+// 获取历史设备列表数据
+async function getHistoricalDeviceList() {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchHistoricalDevices();
+    if (!error && data) {
+      deviceList.value = data.rows.map(item => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        dataUsage: formatDataUsage(item.duration),
+        connectionTime: formatTimestamp(item.startTime),
+        disconnectionTime: formatTimestamp(item.endTime)
+      }));
+    }
+  } catch (err) {
+    console.error('Failed to fetch historical device list:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getHistoricalDeviceList();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getHistoricalDeviceList();
+});
 </script>
+
 <template>
-  <records/>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <HistoryOutlined />
+          <span>{{ t('page.records.clienthistory') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.records.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="deviceList"
+        :row-key="(record: DeviceRecord) => record.id"
+        :expanded-row-keys="expandedRowKeys"
+        @expand="handleExpandChange"
+        :pagination="{
+          total: deviceList.length,
+          pageSize: 10,
+          showSizeChanger: false,
+          showTotal: (total) => `共 ${total} 条`
+        }"
+      >
+        <template #expandedRowRender="{ record }">
+          <div class="pl-4">
+            <div>{{ t('page.records.starttime') }}: {{ record.connectionTime }}</div>
+            <div>{{ t('page.records.endtime') }}: {{ record.disconnectionTime }}</div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
 </template>
-<style scoped></style>
+
+<style scoped>
+.device-list-container {
+  padding: 8px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 12px;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b9743b0..f8bbc54 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import HeaderBanner from './modules/header-banner.vue';
-//import CardData from './modules/card-data.vue';
-//import LineChart from './modules/line-chart.vue';
+import CardData from './modules/card-data.vue';
+import LineChart from './modules/line-chart.vue';
 // import PieChart from './modules/pie-chart.vue';
 // import ProjectNews from './modules/project-news.vue';
 // import CreativityBanner from './modules/creativity-banner.vue';
@@ -21,8 +21,8 @@ provide('updateDashboard', updateDashboard);
 <template>
   <ASpace direction="vertical" :size="16">
     <HeaderBanner ref="headerBannerRef"/>
-<!--    <LineChart />-->
-<!--    <CardData />-->
+    <LineChart />
+    <CardData />
 <!--    <ARow :gutter="[16, 16]">-->
 <!--      <ACol :span="24" :lg="14">-->
 <!--      </ACol>-->
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index a907875..5291569 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -1,241 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
-import { useBillingStore } from '@/store/modules/billing/billing';
-import { useI18n } from 'vue-i18n';
-import { submitOrder } from '@/service/api/auth';
-import { message } from 'ant-design-vue';
-import type { Ref } from 'vue';
+import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue'
 
-const { t } = useI18n();
-// 注入更新仪表盘的方法
-const updateDashboard = inject('updateDashboard') as () => Promise<void>;
-
-interface RechargeOption {
-  amount: number;
-  displayAmount: string;
-  price: number;
-}
-
-const customAmount = ref<string | number | undefined>(undefined);
-const selectedAmount = ref<number | null>(null);
-const isCustomMode = ref<boolean>(false);
-
-const rechargeOptions: Ref<RechargeOption[]> = ref([
-  { amount: 10, displayAmount: '10元', price: 10.00 },
-  { amount: 20, displayAmount: '20元', price: 20.00 },
-  { amount: 30, displayAmount: '30元', price: 30.00 },
-  { amount: 50, displayAmount: '50元', price: 50.00 },
-  { amount: 100, displayAmount: '100元', price: 100.00 },
-  { amount: 200, displayAmount: '200元', price: 200.00 },
-]);
-
-const billingStore = useBillingStore();
-
-const paymentAmount = computed(() => {
-  if (customAmount.value !== undefined && customAmount.value !== '') {
-    return Number(customAmount.value);
-  }
-  return selectedAmount.value || 0;
-});
-
-const handleOptionSelect = (amount: number) => {
-  isCustomMode.value = false;
-  selectedAmount.value = amount;
-  customAmount.value = undefined;
-};
-
-const handleCustomMode = () => {
-  isCustomMode.value = true;
-  selectedAmount.value = null;
-};
-
-const handleCustomAmount = (value: string | number | undefined) => {
-  customAmount.value = value;
-};
-
-// 添加点击外部关闭自定义输入的处理
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (isCustomMode.value &&
-    !target?.closest('.special-option') &&
-    customAmount.value === undefined) {
-    isCustomMode.value = false;
-  }
-};
-
-// 创建一个函数来处理 blur 事件
-const handleBlur = () => {
-  if (customAmount.value === undefined || customAmount.value === '') {
-    isCustomMode.value = false;
-  }
-};
-
-onMounted(async () => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
-const balance = computed(() => billingStore.balance);
-
-// 修改充值处理方法，移除邮箱验证
-const handleRecharge = async () => {
-  // 验证金额
-  if (!paymentAmount.value || paymentAmount.value <= 0) {
-    message.error('请选择或输入正确的充值金额');
-    return;
-  }
-
-  try {
-    await submitOrder({
-      type: 1,
-      orderAmount: paymentAmount.value
-    });
-    message.success('充值订单提交成功！');
-
-    // 更新余额，传入充值金额
-    await billingStore.updateBalance(paymentAmount.value);
-    // 更新仪表盘数据
-    await updateDashboard();
-  } catch (error) {
-    message.error('充值失败，请重试！');
-    console.error('Failed to submit recharge order:', error);
-  }
-};
 </script>
-
 <template>
-  <div class="recharge-container p-4">
-    <!-- 充值金额选择 -->
-    <div class="amount-section mb-6">
-      <div class="text-lg font-bold mb-2">{{ t('page.carddata.Rechargeamount') }}</div>
-      <div class="grid grid-cols-3 gap-4">
-        <div
-          v-for="option in rechargeOptions"
-          :key="option.amount"
-          class="recharge-option cursor-pointer"
-          :class="{ 'selected': selectedAmount === option.amount }"
-          @click="handleOptionSelect(option.amount)"
-        >
-          <div class="text-lg font-medium">{{ option.displayAmount }}</div>
-          <div class="text-sm text-gray-500">{{ t('page.carddata.price') }} {{ option.price.toFixed(2) }}</div>
-        </div>
-
-        <!-- 自定义充选项 -->
-        <div
-          class="special-option"
-          :class="{ 'selected': isCustomMode }"
-          @click="handleCustomMode"
-        >
-          <template v-if="!isCustomMode">
-            <AInputNumber
-              v-model:value="customAmount"
-              :placeholder="t('page.carddata.Customization')"
-              :min="1"
-              :max="999999"
-              class="w-full"
-              @change="handleCustomAmount"
-              @click.stop
-              @blur="handleBlur"
-            />
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <!-- 支付部分 -->
-    <div class="payment-section mt-8 bg-white p-4 rounded-lg border border-gray-100">
-      <div class="flex justify-between items-center mb-4">
-        <span class="text-gray-600">{{ t('page.carddata.Remainingbalance') }}：{{ balance }}元</span>
-        <span class="text-blue-500">{{ t('page.carddata.Theamountreceived') }}：{{ paymentAmount.toFixed(2) }}元</span>
-      </div>
-      <AButton
-        type="primary"
-        size="large"
-        block
-        :disabled="!paymentAmount || paymentAmount <= 0"
-        @click="handleRecharge"
-      >
-        ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
-      </AButton>
-    </div>
-  </div>
+  <BalanceRecharge/>
 </template>
-
-<style scoped>
-.recharge-option {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-  text-align: center;
-  transition: all 0.3s;
-  height: 76px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.recharge-option.selected,
-.special-option.selected {
-  border-color: #1890ff;
-  background-color: #e6f7ff;
-}
-
-.special-option {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 0;
-  text-align: center;
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  transition: all 0.3s;
-  height: 76px;
-}
-
-.special-option :deep(.ant-input-number) {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  border: none;
-  display: flex;
-  align-items: center;
-}
-
-.special-option :deep(.ant-input-number-input-wrap) {
-  height: 100%;
-  width: 100%;
-}
-
-.special-option :deep(.ant-input-number-input) {
-  height: 100%;
-  width: 100%;
-  text-align: center;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &::placeholder {
-    text-align: center;
-    color: #999;
-  }
-}
-
-.special-option :deep(.ant-input-number:focus),
-.special-option :deep(.ant-input-number-focused) {
-  box-shadow: none;
-  border: none;
-}
-
-.payment-section {
-  background-color: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-/* 除之前的后缀样式 */
-:deep(.ant-input-suffix) {
-  display: none;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/home/modules/line-chart.vue b/src/views/home/modules/line-chart.vue
index e34aa6e..939319e 100644
--- a/src/views/home/modules/line-chart.vue
+++ b/src/views/home/modules/line-chart.vue
@@ -1,400 +1,9 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { ref, onMounted, inject } from 'vue';
-import { fetchPackageList, submitOrder } from '@/service/api/auth';
-import { message } from 'ant-design-vue';
+import PackageSubscription from '@/views/recharge/package/index.vue'
 
-const { t } = useI18n();
 
-interface PackageOption {
-  id: string;
-  packageName: string;
-  price: number;
-  clientNum: number;
-  clientNumEnable: boolean;
-  traffic: number;
-  trafficEnable: boolean;
-  trafficDisplay: string;
-  durationEnable: boolean;
-  isRecommended?: boolean;
-  promotion?: string;
-  periodNum: number;
-  periodType: number;
-  validityPeriod: string;
-}
-
-// 添加有效期类型枚举
-const PERIOD_TYPE = {
-  HOUR: 0,
-  DAY: 1,
-  MONTH: 2,
-  YEAR: 3
-} as const;
-
-// 添加有效期单位映射
-const PERIOD_UNIT = {
-  [PERIOD_TYPE.HOUR]: '小时',
-  [PERIOD_TYPE.DAY]: '天',
-  [PERIOD_TYPE.MONTH]: '月',
-  [PERIOD_TYPE.YEAR]: '年'
-} as const;
-
-// 格式化有效期显示
-const formatValidityPeriod = (num: number, type: number): string => {
-  const unit = PERIOD_UNIT[type as keyof typeof PERIOD_UNIT] || '未知';
-  return `${num}${unit}`;
-};
-
-// 流量单位转换函数
-const formatTraffic = (bytes: number): string => {
-  // 处理 0 值、undefined 或 null 的情况
-  if (!bytes || bytes === 0) {
-    return '0B';
-  }
-
-  const B_TO_KB = 1024;
-  const B_TO_MB = 1024 * 1024;
-  const B_TO_GB = 1024 * 1024 * 1024;
-  const B_TO_TB = 1024 * 1024 * 1024 * 1024;
-
-  if (bytes >= B_TO_TB) {
-    // B -> TB
-    return `${(bytes / B_TO_TB).toFixed(2)}TB`;
-  }
-  if (bytes >= B_TO_GB) {
-    // B -> GB
-    return `${(bytes / B_TO_GB).toFixed(2)}GB`;
-  }
-  if (bytes >= B_TO_MB) {
-    // B -> MB
-    return `${(bytes / B_TO_MB).toFixed(2)}MB`;
-  }
-  if (bytes >= B_TO_KB) {
-    // B -> KB
-    return `${(bytes / B_TO_KB).toFixed(2)}KB`;
-  }
-  // 小于1KB的情况，保持B单位
-  return `${bytes.toFixed(2)}B`;
-};
-
-const packageOptions = ref<PackageOption[]>([]);
-const selectedPackage = ref<PackageOption>({
-  id: '1',
-  packageName: '',
-  price: 0,
-  clientNum: 0,
-  clientNumEnable: false,
-  traffic: 0,
-  trafficEnable: false,
-  trafficDisplay: '0GB',
-  durationEnable: false,
-  isRecommended: false,
-  promotion: '',
-  periodNum: 0,
-  periodType: PERIOD_TYPE.MONTH,
-  validityPeriod: '0月'
-});
-
-const fetchPackages = async () => {
-  try {
-    const response = await fetchPackageList();
-    if (response.data && Array.isArray(response.data)) {
-      packageOptions.value = response.data.map(pkg => ({
-        id: pkg.id,
-        packageName: pkg.packageName,
-        price: parseFloat(pkg.price),
-        clientNum: Number(pkg.clientNum),
-        clientNumEnable: pkg.clientNumEnable,
-        traffic: Number(pkg.traffic),
-        trafficEnable: pkg.trafficEnable,
-        trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : '无限制',
-        durationEnable: pkg.durationEnable,
-        isRecommended: pkg.isRecommended || false,
-        promotion: pkg.promotion || '',
-        periodNum: Number(pkg.periodNum),
-        periodType: Number(pkg.periodType),
-        validityPeriod: pkg.durationEnable ? formatValidityPeriod(Number(pkg.periodNum), Number(pkg.periodType)) : '无限制'
-      }));
-
-      if (packageOptions.value.length > 0) {
-        selectedPackage.value = packageOptions.value[0];
-      }
-    }
-  } catch (error) {
-    console.error('Failed to fetch packages:', error);
-  }
-};
-
-const selectPackage = (option: PackageOption) => {
-  selectedPackage.value = option;
-};
-
-// 注入更新仪表盘的方法
-const updateDashboard = inject('updateDashboard') as () => Promise<void>;
-
-// 修改套餐办理方法
-const handleSubmitOrder = async () => {
-  try {
-    await submitOrder({
-      type: 0,
-      packageId: selectedPackage.value.id
-    });
-    message.success('套餐办理成功！');
-    // 更新��表盘数据
-    await updateDashboard();
-  } catch (error) {
-    message.error('套餐办理失败，请重试！');
-    console.error('Failed to submit order:', error);
-  }
-};
-
-onMounted(async () => {
-  await fetchPackages();
-});
 </script>
-
 <template>
-  <div class="package-container">
-    <!-- 顶部价格展示 -->
-    <div class="price-header">
-      <div class="price">
-        <span class="currency">¥</span>
-        <span class="amount">{{ selectedPackage.price }}</span>
-        <span class="period">/月</span>
-      </div>
-      <div class="subtitle">{{ selectedPackage.packageName }}</div>
-    </div>
-
-    <!-- 套餐选择 -->
-    <div class="package-options">
-      <h3 class="section-title">{{ t('page.setmeal.changablelevel') }}</h3>
-      <div class="options-grid">
-        <div
-          v-for="option in packageOptions"
-          :key="option.id"
-          :class="[
-            'option-card',
-            {
-              recommended: option.isRecommended,
-              selected: selectedPackage.id === option.id
-            }
-          ]"
-          @click="selectPackage(option)"
-        >
-          <div v-if="option.isRecommended" class="recommended-tag">
-            {{ t('page.setmeal.highlyrecommended') }}
-          </div>
-          <div class="package-name">{{ option.packageName }}</div>
-          <div class="price">¥{{ option.price }}</div>
-          <div class="traffic">{{ option.trafficEnable ? option.trafficDisplay : '无限制' }}</div>
-          <div class="device-count">
-            {{ option.clientNumEnable ? `${option.clientNum}台设备` : '无限制' }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 套餐详情 -->
-    <div class="package-details">
-      <h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
-      <div class="details-list">
-        <div class="detail-item">
-          <div class="label">套餐名称</div>
-          <div class="value">{{ selectedPackage.packageName }}</div>
-        </div>
-        <div class="detail-item">
-          <div class="label">{{ t('page.setmeal.GeneralPurposeTraffic') }}</div>
-          <div class="value">
-            {{ selectedPackage.trafficEnable ? `${selectedPackage.trafficDisplay}，当月有效` : '无限制' }}
-          </div>
-        </div>
-        <div class="detail-item">
-          <div class="label">设备数量</div>
-          <div class="value">
-            {{ selectedPackage.clientNumEnable ? `最多${selectedPackage.clientNum}台设备同时在线` : '无限制' }}
-          </div>
-        </div>
-        <div class="detail-item">
-          <div class="label">有效期限</div>
-          <div class="value">
-            {{ selectedPackage.durationEnable ? selectedPackage.validityPeriod : '无限制' }}
-          </div>
-        </div>
-        <div class="bottom-bar">
-          <button
-            class="btn-primary"
-            @click="handleSubmitOrder"
-            :disabled="!selectedPackage.id"
-          >
-            {{ t('page.setmeal.Applynow') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+  <PackageSubscription/>
 </template>
-
-<style scoped>
-.package-container {
-  min-height: 100vh;
-  padding: 16px 16px 80px;
-}
-
-.price-header {
-  background: #fff1f0;
-  padding: 20px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-}
-
-.price {
-  color: #ff4d4f;
-  margin-bottom: 8px;
-}
-
-.currency {
-  font-size: 20px;
-}
-
-.amount {
-  font-size: 32px;
-  font-weight: bold;
-}
-
-.period {
-  font-size: 16px;
-}
-
-.subtitle {
-  font-size: 14px;
-  color: #666;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 16px;
-  color: #333;
-  position: relative;
-  padding-left: 12px;
-}
-
-.section-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 16px;
-  background: #1890ff;
-  border-radius: 2px;
-}
-
-.options-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.option-card {
-  background: white;
-  padding: 16px;
-  border-radius: 8px;
-  text-align: center;
-  position: relative;
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.option-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.option-card.selected {
-  border-color: #ff4d4f;
-  background: #fff1f0;
-}
-
-.recommended-tag {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #ff4d4f;
-  color: white;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 0 0 8px 0;
-}
-
-.package-details {
-  background: white;
-  padding: 16px;
-  border-radius: 12px;
-}
-
-.detail-item {
-  display: flex;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.detail-item:last-child {
-  border-bottom: none;
-}
-
-.label {
-  width: 80px;
-  color: #666;
-}
-
-.value {
-  flex: 1;
-  color: #333;
-}
-
-.value.highlight {
-  color: #ff4d4f;
-}
-
-.bottom-bar {
-  padding: 12px 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 60px;
-}
-
-.btn-primary {
-  background: #ff4d4f;
-  color: white;
-  border: none;
-  padding: 12px 32px;
-  border-radius: 24px;
-  font-size: 16px;
-  width: 90%;
-  max-width: 400px;
-}
-
-.package-name {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: #333;
-}
-
-.traffic {
-  font-size: 14px;
-  color: #666;
-  margin-top: 8px;
-}
-
-.device-count {
-  font-size: 14px;
-  color: #666;
-  margin-top: 4px;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/recharge/balancerecharge/index.vue b/src/views/recharge/balancerecharge/index.vue
index 1366908..e793a5f 100644
--- a/src/views/recharge/balancerecharge/index.vue
+++ b/src/views/recharge/balancerecharge/index.vue
@@ -169,15 +169,15 @@ const handleAliPay = async () => {
         ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
       </AButton>
       <!-- 测试：支付宝支付 -->
-      <AButton
-        type="primary"
-        size="large"
-        block
-        :disabled="!paymentAmount || paymentAmount <= 0"
-        @click="handleAliPay"
-      >
-        AliPay
-      </AButton>
+<!--      <AButton-->
+<!--        type="primary"-->
+<!--        size="large"-->
+<!--        block-->
+<!--        :disabled="!paymentAmount || paymentAmount <= 0"-->
+<!--        @click="handleAliPay"-->
+<!--      >-->
+<!--        AliPay-->
+<!--      </AButton>-->
     </div>
   </div>
 </template>
diff --git a/src/views/recharge/rechargeservice/index.vue b/src/views/recharge/rechargeservice/index.vue
index 0edf13b..442d023 100644
--- a/src/views/recharge/rechargeservice/index.vue
+++ b/src/views/recharge/rechargeservice/index.vue
@@ -1,22 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { MenuProps } from 'ant-design-vue';
-import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue';
-import PackageSubscription from '@/views/recharge/package/index.vue';
-import {useRouter} from "vue-router";
-const router = useRouter();
-const handleBack = () => {
-  router.push('/billing/billservice');
-};
+import { useRouter } from "vue-router";
+
+// 使用异步组件加载
+const BalanceRecharge = defineAsyncComponent(() =>
+  import('@/views/recharge/balancerecharge/index.vue')
+);
+const PackageSubscription = defineAsyncComponent(() =>
+  import('@/views/recharge/package/index.vue')
+);
+
 defineOptions({
   name: 'recharge'
 });
 
 const { t } = useI18n();
+const router = useRouter();
+
+const handleBack = () => {
+  try {
+    router.push({
+      name: 'billing_billservice',
+      replace: true
+    });
+  } catch (error) {
+    console.error('Navigation error:', error);
+    // 如果导航失败，尝试使用路径
+    router.push('/billing/billservice');
+  }
+};
 
 // 使用数组 ref 来存储选中的菜单项
-const selectedKeys = ref<(string | number)[]>(['balance']);
+const selectedKeys = ref<string[]>(['balance']);
 
 // 菜单项配置
 const items: MenuProps['items'] = [
@@ -40,24 +57,31 @@ const handleClick: MenuProps['onClick'] = e => {
 
 <template>
   <div class="recharge-container">
-    <!-- 顶部菜单 -->
-    <AMenu
-      v-model:selectedKeys="selectedKeys"
-      mode="horizontal"
-      :items="items"
-      @click="handleClick"
-      class="recharge-menu"
-    />
-    <div class="text-lg font-bold mb-4 flex justify-between items-center">
-    <a-button @click="handleBack" >
-      {{ t('page.login.common.back') }}
-    </a-button>
-    </div>
-    <!-- 内容区域 -->
-    <div class="recharge-content">
-      <Transition name="fade" mode="out-in">
-        <component :is="String(selectedKeys[0]) === 'balance' ? BalanceRecharge : PackageSubscription" />
-      </Transition>
+    <div class="recharge-content-wrapper">
+      <!-- 返回按钮 -->
+      <div class="back-button-wrapper">
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+      </div>
+
+      <!-- 顶部菜单 -->
+      <a-menu
+        v-model:selectedKeys="selectedKeys"
+        mode="horizontal"
+        :items="items"
+        @click="handleClick"
+        class="recharge-menu"
+      />
+
+      <!-- 内容区域 -->
+      <div class="recharge-content">
+        <Transition name="fade" mode="out-in">
+          <component
+            :is="selectedKeys[0] === 'balance' ? BalanceRecharge : PackageSubscription"
+          />
+        </Transition>
+      </div>
     </div>
   </div>
 </template>
@@ -69,6 +93,15 @@ const handleClick: MenuProps['onClick'] = e => {
   padding: 16px;
 }
 
+.recharge-content-wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.back-button-wrapper {
+  margin-bottom: 16px;
+}
+
 .recharge-menu {
   background-color: #fff;
   border-radius: 8px;
@@ -79,6 +112,7 @@ const handleClick: MenuProps['onClick'] = e => {
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
+  min-height: 400px;
 }
 
 /* 过渡动画 */
@@ -101,5 +135,23 @@ const handleClick: MenuProps['onClick'] = e => {
   .recharge-content {
     padding: 12px;
   }
+
+  .recharge-menu {
+    margin-bottom: 12px;
+  }
+
+  :deep(.ant-menu-item) {
+    padding: 0 12px !important;
+  }
+}
+
+/* 确保在小屏幕上菜单项文字不会换行 */
+:deep(.ant-menu-item) {
+  white-space: nowrap;
+}
+
+/* 优化加载状态的显示 */
+:deep(.ant-spin-container) {
+  min-height: 200px;
 }
 </style>
diff --git a/src/views/userInfo/access/index.vue b/src/views/userInfo/access/index.vue
index dbed014..c8de333 100644
--- a/src/views/userInfo/access/index.vue
+++ b/src/views/userInfo/access/index.vue
@@ -11,7 +11,7 @@ const { t } = useI18n();
 const router = useRouter();
 
 const handleBack = () => {
-  router.push('/userInfo/usercard');
+  router.push('/endpoint/clientservice');
 };
 
 // 设备列表数据
diff --git a/src/views/userInfo/usercard/index.vue b/src/views/userInfo/usercard/index.vue
index af299c5..8d4e891 100644
--- a/src/views/userInfo/usercard/index.vue
+++ b/src/views/userInfo/usercard/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 1. 简化导入方式，与 billservice 保持一致
 import { useAuthStore } from '@/store/modules/auth';
+import type { Router } from 'vue-router';
 import { useRouter } from 'vue-router';
-import { computed } from 'vue';
+import { computed, type Component } from 'vue';
 import { useI18n } from "vue-i18n";
 import {
   UserOutlined,
@@ -16,10 +16,17 @@ import {
 } from '@ant-design/icons-vue';
 
 const { t } = useI18n();
-const router = useRouter();
+const router: Router = useRouter();
 const authStore = useAuthStore();
 
-// 2. 保持类型定义
+// 定义菜单项接口
+interface MenuItem {
+  icon: Component;
+  title: string;
+  path: string;
+}
+
+// 定义用户信息接口
 interface UserInfo {
   avatar?: string;
   nickName?: string;
@@ -29,12 +36,12 @@ interface UserInfo {
 
 const user = computed<UserInfo | null>(() => authStore.userInfo?.user || null);
 
-// 3. 简化 menuItems 结构，与 billservice 一致
-const menuItems = [
+// 使用类型注解定义 menuItems
+const menuItems: MenuItem[] = [
   {
     icon: UserOutlined,
     title: t('page.usercard.changeInfo'),
-    path: '/userInfo/profile'  // 使用完整路径
+    path: '/userInfo/profile'
   },
   {
     icon: LockOutlined,
@@ -46,30 +53,30 @@ const menuItems = [
     title: t('page.usercard.kyc'),
     path: '/userInfo/kyc'
   },
-  {
-    icon: MobileOutlined,
-    title: t('page.usercard.deviceconsole'),
-    path: '/userInfo/device'
-  },
-  {
-    icon: LinkOutlined,
-    title: t('page.usercard.access'),
-    path: '/userInfo/access'
-  },
-  {
-    icon: ApiOutlined,
-    title: t('page.usercard.records'),
-    path: '/userInfo/records'
-  },
-  {
-    icon: CalendarOutlined,
-    title: t('page.usercard.cdrlrecords'),
-    path: '/userInfo/cdrlrecords'
-  },
+  // {
+  //   icon: MobileOutlined,
+  //   title: t('page.usercard.deviceconsole'),
+  //   path: '/userInfo/device'
+  // },
+  // {
+  //   icon: LinkOutlined,
+  //   title: t('page.usercard.access'),
+  //   path: '/userInfo/access'
+  // },
+  // {
+  //   icon: ApiOutlined,
+  //   title: t('page.usercard.records'),
+  //   path: '/userInfo/records'
+  // },
+  // {
+  //   icon: CalendarOutlined,
+  //   title: t('page.usercard.cdrlrecords'),
+  //   path: '/userInfo/cdrlrecords'
+  // },
 ];
 
-// 4. 简化路由跳转方法
-const handleMenuClick = (path: string) => {
+// 添加类型注解
+const handleMenuClick = (path: string): void => {
   router.push(path);
 };
 </script>
@@ -77,13 +84,12 @@ const handleMenuClick = (path: string) => {
 <template>
   <div class="user-center">
     <div class="user-center-content">
-      <!-- 顶部用户信息卡片 -->
       <div class="user-card">
         <div class="avatar">
           <template v-if="user?.avatar">
             <img
               :src="user.avatar"
-              :alt="user.nickName"
+              :alt="user?.nickName || '用户'"
             >
           </template>
           <template v-else>
@@ -96,7 +102,6 @@ const handleMenuClick = (path: string) => {
         </div>
       </div>
 
-      <!-- 采用 billservice 的菜单列表结构 -->
       <div class="menu-list">
         <div
           v-for="item in menuItems"
@@ -118,7 +123,7 @@ const handleMenuClick = (path: string) => {
 </template>
 
 <style scoped>
-/* 采用 billservice 的基础样式结构 */
+/* 保持现有样式不变 */
 .user-center {
   width: 100%;
   min-height: 100vh;