优化

src/api/sMsSendManage/loopSend.js

@@ -56,3 +56,11 @@ export function updateLoopSendStatusAPI(data) {
     })
 }
 
+// 获取短信余额
+export function getSmsBalanceAPI() {
+    return request({
+        url: '/msgJob/getMessageBalance',
+        method: 'GET',
+    })
+}
+

src/views/sMsSendManage/loopSend/index.vue

@@ -1,26 +1,10 @@
 <template>
     <div class="app-container">
-        <!-- 短信余额提示 -->
-        <el-alert
-            v-if="smsBalance !== null"
-            :title="`短信余额剩余${smsBalance}条,请及时充值!`"
-            type="warning"
-            :closable="false"
-            show-icon
-            style="margin-bottom: 20px"
-        />
-
         <!-- 循环发送短信列表 -->
-        <ComTable
+        <div class="table-wrapper">
-            ref="comTableRef"
+            <!-- 表格工具栏区域 -->
-            :form-columns="formColumns"
+            <div class="table-toolbar">
-            :table-columns="tableColumns"
+                <div class="toolbar-left">
-            :load-data="listLoopSendAPI"
-            :show-toolbar="true"
-            :show-action="true"
-            :action-columns="actionColumns"
-        >
-            <template #toolbar>
                     <ComButton
                         type="primary"
                         icon="Plus"
@@ -29,7 +13,29 @@
                     >
                         新建
                     </ComButton>
-            </template>
+                </div>
+                <div class="toolbar-right">
+                    <!-- 短信余额提醒 -->
+                    <el-alert
+                        v-if="smsBalance !== null"
+                        :title="`短信余额剩余 ${smsBalance} 条，请及时充值！`"
+                        type="warning"
+                        :closable="false"
+                        show-icon
+                        class="balance-alert"
+                    />
+                </div>
+            </div>
+
+            <ComTable
+                ref="comTableRef"
+                :form-columns="formColumns"
+                :table-columns="tableColumns"
+                :load-data="listLoopSendAPI"
+                :show-toolbar="false"
+                :show-action="true"
+                :action-columns="actionColumns"
+            >
                 <template #taskStatus="{ row }">
                     <el-switch
                         active-value="0"
@@ -42,15 +48,17 @@
                 </template>
             </ComTable>
         </div>
+    </div>
 </template>
 
 <script setup name="LoopSend">
-import { ref, computed, getCurrentInstance } from 'vue'
+import { ref, computed, getCurrentInstance, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { debounce } from 'lodash-es'
 import {
-    listLoopSendAPI,
     delLoopSendAPI,
+    listLoopSendAPI,
+    getSmsBalanceAPI,
     updateLoopSendStatusAPI,
 } from '@/api/sMsSendManage/loopSend.js'
 import config from './config'
@@ -62,7 +70,7 @@ const { proxy } = getCurrentInstance()
 
 const { tableColumns, buildFormColumns } = config
 const comTableRef = ref(null)
-const smsBalance = ref(null) // 短信余额，可以从接口获取
+const smsBalance = ref(null) // 短信余额
 const switchLoadingMap = new Map() // 记录每个 switch 的 loading 状态
 
 // 根据配置构建搜索表单
@@ -193,10 +201,81 @@ const onHandleStatusChange = (value, row) => {
 
 // 使用防抖包装状态修改方法，延迟 300ms
 const debouncedStatusChange = debounce(onHandleStatusChange, 300)
+
+// 获取短信余额
+const getSmsBalance = async () => {
+    try {
+        const result = await getSmsBalanceAPI()
+        if (result.code === 200) {
+            smsBalance.value = result.data || result.balance || null
+        }
+    } catch (error) {
+        console.error('获取短信余额失败:', error)
+    }
+}
+
+onMounted(() => {
+    getSmsBalance()
+})
 </script>
 
 <style lang="scss" scoped>
 .app-container {
     padding: 20px;
 }
+
+.table-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.table-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 0;
+}
+
+.toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.balance-alert {
+    margin: 0;
+    max-width: 400px;
+
+    :deep(.el-alert__content) {
+        .el-alert__title {
+            font-size: 14px;
+            font-weight: 500;
+            color: #e6a23c;
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .table-toolbar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    .toolbar-right {
+        width: 100%;
+    }
+
+    .balance-alert {
+        max-width: 100%;
+    }
+}
 </style>