feat:部分按钮的双端隐藏和显示配置

src/views/billing/bill/index.vue

@@ -275,7 +275,7 @@ onMounted(() => {
           :loading="loading"
           row-key="id"
           size="small"
-          :expandIconColumnWidth="24"
+
           :pagination="{
             ...mobilePagination,
             total: mobilePagination.total,
@@ -401,4 +401,10 @@ onMounted(() => {
   min-width: 24px !important;
   padding: 0 !important;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>

src/views/billing/cdrlrecords/index.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import {ref, onMounted, watch, computed} 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";
 import dayjs from 'dayjs';
+import {useWindowSize} from "@vueuse/core";
 
 defineOptions({
   name: 'cdrlrecords'
 });
 const { t } = useI18n();
 const router = useRouter();
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < 768);
 const handleBack = () => {
   router.push('/billing/billservice');
 };
@@ -317,7 +320,7 @@ watch(tableData, (newData) => {
 
       <template #extra>
         <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
           {{ t('page.login.common.back') }}
         </a-button>
         <a-button type="primary" :loading="tableLoading" @click="handleSearch">

src/views/billing/packagehistories/index.vue

@@ -16,7 +16,7 @@ const handleBack = () => {
 
 const { t } = useI18n();
 const currencySymbol = ref('¥');
-
+const tableLoading = ref(false);
 const fetchCurrencySymbol = async () => {
   try {
     const response = await getPaymentConfig();
@@ -48,6 +48,7 @@ const formatDateTime = (dateTimeString: string) => {
 };
 
 const getPackageData = async () => {
+  tableLoading.value=true;
   try {
     const response = await fetchPackageHistory({
       pageNum: 1,
@@ -60,6 +61,7 @@ const getPackageData = async () => {
   } catch (error) {
     // console.error('Failed to fetch package history:', error);
   }
+  tableLoading.value=false;
 };
 
 onMounted(() => {
@@ -236,9 +238,15 @@ const formatTraffic = (bytes: number): string => {
   <div class="p-4">
     <div class="text-lg font-bold mb-4 flex justify-between items-center">
       <span>{{ t('page.packagehistories.title') }}</span>
-      <a-button @click="handleBack">
+      <a-button v-if="isMobile" @click="handleBack" >
         {{ t('page.login.common.back') }}
       </a-button>
+      <a-button type="primary" :loading="tableLoading" @click="getPackageData">
+        <template #icon>
+          <span class="i-carbon:refresh"></span>
+        </template>
+        {{ t('page.cdrlrecords.refresh') }}
+      </a-button>
     </div>
     <div>
       <ATable :columns="columns" :data-source="data" row-key="id"
@@ -317,4 +325,10 @@ const formatTraffic = (bytes: number): string => {
   color: #1890ff;
   text-decoration: underline;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>

src/views/billing/rechargehistory/index.vue

@@ -12,7 +12,7 @@ const router = useRouter();
 const handleBack = () => {
   router.push('/billing/billservice');
 };
-
+const tableLoading = ref(false);
 const { t } = useI18n();
 const currencySymbol = ref('¥');
 
@@ -46,57 +46,57 @@ const formatDateTime = (dateTimeString: string) => {
   });
 };
 
+  const {columns, data, loading, getData, mobilePagination, searchParams} = useTable({
+    apiFn: fetchRechargeHistory,
+    apiParams: {
+      pageNum: 1,
+      pageSize: 5,
+    },
+    rowKey: 'id',
+    columns: () => [
+      {
+        title: t('page.Rechargehistory.topupdate'),
+        dataIndex: 'createTime',
+        key: 'createTime',
+        responsive: ['md'],
+        customRender: ({text}) => text ? formatDateTime(text) : ''
+      },
+      {
+        title: t('page.Rechargehistory.amount'),
+        dataIndex: 'orderAmount',
+        key: 'orderAmount',
+        customRender: ({text}: { text: string }) => {
+          const formattedAmount = Number(text).toFixed(2);
+          return `${currencySymbol.value}${formattedAmount}`;
+        }
+      },
+      {
+        title: t('page.Rechargehistory.type'),
+        dataIndex: 'type',
+        key: 'type',
+        customRender: ({text}: { text: number }) => {
+          return h(ATag, {
+            color: text === 1 ? 'blue' : 'green'
+          }, {
+            default: () => text === 1 ? t('page.Rechargehistory.rechargeType') : t('page.Rechargehistory.packageType')
+          })
+        }
+      },
+      {
+        title: t('page.Rechargehistory.status'),
+        dataIndex: 'status',
+        key: 'status',
+        customRender: ({text}: { text: number }) => {
+          return h(ATag, {
+            color: text === 1 ? 'success' : 'warning'
+          }, {
+            default: () => text === 1 ? t('page.Rechargehistory.paid') : t('page.Rechargehistory.unpaid')
+          })
+        }
+      }
+    ]
+  });
 
-const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
-  apiFn: fetchRechargeHistory,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 5,
-  },
-  rowKey: 'id',
-  columns: () => [
-  {
-    title: t('page.Rechargehistory.topupdate'),
-    dataIndex: 'createTime',
-    key: 'createTime',
-    responsive: ['md'],
-    customRender: ({ text }) => text ? formatDateTime(text) : ''
-  },
-  {
-    title: t('page.Rechargehistory.amount'),
-    dataIndex: 'orderAmount',
-    key: 'orderAmount',
-    customRender: ({ text }: { text: string }) => {
-      const formattedAmount = Number(text).toFixed(2);
-      return `${currencySymbol.value}${formattedAmount}`;
-    }
-  },
-  {
-    title: t('page.Rechargehistory.type'),
-    dataIndex: 'type',
-    key: 'type',
-    customRender: ({ text }: { text: number }) => {
-      return h(ATag, {
-        color: text === 1 ? 'blue' : 'green'
-      }, {
-        default: () => text === 1 ? t('page.Rechargehistory.rechargeType') : t('page.Rechargehistory.packageType')
-      })
-    }
-  },
-  {
-    title: t('page.Rechargehistory.status'),
-    dataIndex: 'status',
-    key: 'status',
-    customRender: ({ text }: { text: number }) => {
-      return h(ATag, {
-        color: text === 1 ? 'success' : 'warning'
-      }, {
-        default: () => text === 1 ? t('page.Rechargehistory.paid') : t('page.Rechargehistory.unpaid')
-      })
-    }
-  }
-]
-});
 onMounted(()=>{
   fetchCurrencySymbol();
 })
@@ -107,9 +107,15 @@ onMounted(()=>{
   <div class="p-4">
     <div class="text-lg font-bold mb-4 flex justify-between items-center">
       <span>{{ t('page.Rechargehistory.recharge') }}</span>
-      <a-button @click="handleBack">
+      <a-button v-if="isMobile" @click="handleBack">
         {{ t('page.login.common.back') }}
       </a-button>
+<!--      <a-button type="primary" :loading="tableLoading" @click="getPackageData">-->
+<!--        <template #icon>-->
+<!--          <span class="i-carbon:refresh"></span>-->
+<!--        </template>-->
+<!--        {{ t('page.cdrlrecords.refresh') }}-->
+<!--      </a-button>-->
     </div>
     <div>
       <ATable
@@ -147,4 +153,10 @@ onMounted(()=>{
 .pl-4 {
   padding-left: 1rem;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>

src/views/endpoint/access/index.vue

@@ -9,7 +9,9 @@ defineOptions({
 });
 const { t } = useI18n();
 const router = useRouter();
-
+// 响应式布局
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 const handleBack = () => {
   router.push('/endpoint/clientservice');
 };
@@ -108,7 +110,7 @@ onMounted(() => {
 
       <template #extra>
         <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
           {{ t('page.login.common.back') }}
         </a-button>
         <a-button type="primary" :loading="loading" @click="handleRefresh">

src/views/endpoint/records/index.vue

@@ -10,6 +10,9 @@ defineOptions({
 });
 const router = useRouter();
 const { t } = useI18n();
+// 响应式布局
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 const handleBack = () => {
   router.push('/endpoint/clientservice');
 };
@@ -134,7 +137,7 @@ onMounted(() => {
 
       <template #extra>
         <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
           {{ t('page.login.common.back') }}
         </a-button>
         <a-button type="primary" :loading="loading" @click="handleRefresh">