1. 调整计划列表展示项

2. 调整设备列表展示项

src/components/DeviceList.vue

@@ -3,7 +3,12 @@
     <el-card>
       <template #header>
         <div class="card-header">
-          <h2 class="page-title">设备管理</h2>
+          <div class="title-container">
+            <h2 class="page-title">设备管理</h2>
+            <el-button type="text" @click="loadDevices" class="refresh-btn" title="刷新设备列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
           <el-button type="primary" @click="addDevice">添加设备</el-button>
         </div>
       </template>
@@ -37,7 +42,8 @@
         default-expand-all
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         :row-class-name="tableRowClassName"
-        :highlight-current-row="false">
+        :highlight-current-row="false"
+        :scrollbar-always-on="true">
         <el-table-column width="40"></el-table-column>
         <el-table-column prop="name" label="设备名称" min-width="120" />
         <el-table-column prop="type" label="设备类型" min-width="100">
@@ -72,13 +78,15 @@
 </template>
 
 <script>
+import { Refresh } from '@element-plus/icons-vue';
 import deviceService from '../services/deviceService.js';
 import DeviceForm from './DeviceForm.vue';
 
 export default {
   name: 'DeviceList',
   components: {
-    DeviceForm
+    DeviceForm,
+    Refresh // 导入刷新图标组件
   },
   data() {
     return {
@@ -234,10 +242,29 @@ export default {
   padding: 15px 0;
 }
 
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .page-title {
   margin: 0;
   font-size: 1.5rem;
   font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
 }
 
 .dialog-footer {
@@ -266,7 +293,6 @@ export default {
   .device-list {
     padding: 10px;
   }
-  
   .card-header {
     flex-direction: column;
     gap: 15px;

src/components/PlanList.vue

@@ -3,30 +3,58 @@
     <el-card>
       <template #header>
         <div class="card-header">
-          <h2 class="page-title">计划管理</h2>
+          <div class="title-container">
+            <h2 class="page-title">计划管理</h2>
+            <el-button type="text" @click="loadPlans" class="refresh-btn" title="刷新计划列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
           <el-button type="primary" @click="addPlan">添加计划</el-button>
         </div>
       </template>
       
-      <el-table :data="plans" style="width: 100%" table-layout="auto" fit>
+      <!-- 加载状态 -->
-        <el-table-column prop="name" label="计划名称" />
+      <div v-if="loading" class="loading">
-        <el-table-column prop="description" label="计划描述" />
+        <el-skeleton animated />
-        <el-table-column prop="execution_type" label="执行类型">
+      </div>
+      
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          title="获取计划数据失败"
+          :description="error"
+          type="error"
+          show-icon
+          closable
+          @close="error = null"
+        />
+        <el-button type="primary" @click="loadPlans" class="retry-btn">重新加载</el-button>
+      </div>
+      
+      <el-table 
+        v-else
+        :data="plans" 
+        style="width: 100%" 
+        :fit="true"
+        :scrollbar-always-on="true">
+        <el-table-column prop="name" label="计划名称" min-width="120" />
+        <el-table-column prop="description" label="计划描述" min-width="150" />
+        <el-table-column prop="execution_type" label="执行类型" min-width="150">
           <template #default="scope">
             <el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
             <el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
             <el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="execute_count" label="已执行次数" />
+        <el-table-column prop="execute_count" label="已执行次数" min-width="100" />
-        <el-table-column prop="status" label="状态">
+        <el-table-column prop="status" label="状态" min-width="100">
           <template #default="scope">
             <el-tag v-if="scope.row.status === 0" type="danger">禁用</el-tag>
             <el-tag v-else-if="scope.row.status === 1" type="success">启用</el-tag>
             <el-tag v-else type="info">执行完毕</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="cron_expression" label="下次执行时间">
+        <el-table-column prop="cron_expression" label="下次执行时间" min-width="150">
           <template #default="scope">
             {{ formatNextExecutionTime(scope.row.cron_expression) }}
           </template>
@@ -41,6 +69,7 @@
           </template>
         </el-table-column>
       </el-table>
+      
     </el-card>
 
     <!-- 使用新的计划表单组件 -->
@@ -55,6 +84,7 @@
 </template>
 
 <script>
+import { Refresh } from '@element-plus/icons-vue';
 import apiClient from '../api/index.js';
 import PlanForm from './PlanForm.vue';
 import cronParser from 'cron-parser';
@@ -62,13 +92,16 @@ import cronParser from 'cron-parser';
 export default {
   name: 'PlanList',
   components: {
-    PlanForm
+    PlanForm,
+    Refresh
   },
   data() {
     return {
       plans: [],
       dialogVisible: false,
       isEdit: false,
+      loading: false,
+      error: null,
       currentPlan: {
         id: null,
         name: '',
@@ -86,12 +119,17 @@ export default {
   methods: {
     // 加载计划列表
     async loadPlans() {
+      this.loading = true;
+      this.error = null;
+      
       try {
         const response = await apiClient.plans.list();
         this.plans = response.data?.plans || [];
       } catch (err) {
-        this.$message.error('加载计划列表失败: ' + (err.message || '未知错误'));
+        this.error = err.message || '未知错误';
         console.error('加载计划列表失败:', err);
+      } finally {
+        this.loading = false;
       }
     },
     
@@ -209,21 +247,48 @@ export default {
   padding: 15px 0;
 }
 
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .page-title {
   margin: 0;
   font-size: 1.5rem;
   font-weight: bold;
+  line-height: 1;
 }
 
-.dialog-footer {
+.refresh-btn {
-  text-align: right;
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
 }
 
 @media (max-width: 768px) {
   .plan-list {
     padding: 10px;
   }
-  
   .card-header {
     flex-direction: column;
     gap: 15px;

src/views/plan/PlanList.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="planList">
+    <el-table-column prop="executeType" label="执行类型">
+      <template #default="{ row }">
+        <el-tag
+          v-if="row.executeType === 'manual'"
+          type=""
+          class="full-width-tag"
+        >
+          手动
+        </el-tag>
+        <el-tag
+          v-else-if="row.executeType === 'auto-infinite'"
+          type="success"
+          class="full-width-tag"
+        >
+          自动(无限执行)
+        </el-tag>
+        <el-tag
+          v-else-if="row.executeType === 'auto-limited'"
+          type="warning"
+          class="full-width-tag"
+        >
+          自动({{ row.executeTimes }}次)
+        </el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+.full-width-tag {
+  /* 移除默认的宽度限制和文本溢出处理 */
+  max-width: none !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  word-wrap: break-word !important;
+}
+</style>