优化列表

src/components/GenericMonitorList.vue

@@ -68,6 +68,7 @@
           :data="data"
           v-loading="loading"
           border
+          stripe
           style="width: 100%"
           @sort-change="handleSortChange"
       >
@@ -78,6 +79,7 @@
             :label="col.title"
             :sortable="col.sorter ? 'custom' : false"
             :formatter="col.formatter"
+            :min-width="col.minWidth"
         >
           <template v-if="col.render" #default="{ row }">
             <component :is="col.render(row)"/>
@@ -213,9 +215,11 @@ onMounted(() => {
 .generic-monitor-list {
   padding: 20px;
 }
+
 .filter-form {
   margin-bottom: 20px;
 }
+
 .el-card {
   border: none;
 }

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 导入 Element Plus 中文语言包
 
 import App from './App.vue';
 import Home from './components/Home.vue';
@@ -47,8 +48,8 @@ router.beforeEach((to, from, next) => {
 // 创建Vue应用实例
 const app = createApp(App);
 
-// 使用Element Plus组件库
+// 全局配置 Element Plus 为中文
-app.use(ElementPlus);
+app.use(ElementPlus, { locale: zhCn });
 
 // 使用路由
 app.use(router);

src/utils/format.js

@@ -0,0 +1,22 @@
+/**
+ * 将 RFC3339 格式的日期时间字符串格式化为 'YYYY-MM-DD HH:mm:ss'
+ * @param {string | null | undefined} rfc3339String - 后端返回的日期时间字符串
+ * @returns {string} - 格式化后的字符串，如果输入无效则返回空字符串或提示
+ */
+export function formatRFC3339(rfc3339String) {
+  if (!rfc3339String) {
+    return '--'; // 或者返回空字符串 ''
+  }
+
+  try {
+    // 例如: "2025-10-17T14:57:01.570169+08:00"
+    // 替换 'T' 为空格，并截取前 19 个字符即可得到 'YYYY-MM-DD HH:mm:ss'
+    return rfc3339String.replace('T', ' ').substring(0, 19);
+  } catch (error) {
+    console.error('Error formatting date:', rfc3339String, error);
+    return rfc3339String; // 格式化失败时返回原始值
+  }
+}
+
+// 你未来还可以添加其他全局格式化函数
+// export function formatCurrency(number) { ... }

src/views/monitor/DeviceCommandLogView.vue

@@ -10,6 +10,7 @@
 <script setup>
 import GenericMonitorList from '../../components/GenericMonitorList.vue';
 import {getDeviceCommandLogs} from '../../api/monitor.js';
+import {formatRFC3339} from '../../utils/format.js'; // 导入全局格式化函数
 
 // 适配通用组件的 fetchData prop
 const fetchDeviceCommandLogs = async (params) => {
@@ -26,12 +27,15 @@ const deviceCommandLogColumns = [
     key: 'device_id',
     sorter: true,
     filterType: 'number', // 设置筛选类型为数字
+    minWidth: 100, // 设置最小宽度
   },
   {
     title: '消息ID',
     dataIndex: 'message_id',
     key: 'message_id',
-    filterType: 'text', // 设置筛选类型为文本
+    // 后端不支持此字段筛选，暂时移除
+    // filterType: 'text', 
+    minWidth: 300, // UUID较长，设置较宽的最小宽度
   },
   {
     title: '发送时间',
@@ -39,6 +43,8 @@ const deviceCommandLogColumns = [
     key: 'sent_at',
     sorter: true,
     filterType: 'dateRange', // 设置筛选类型为日期范围
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
   },
   {
     title: '接收成功',
@@ -46,12 +52,15 @@ const deviceCommandLogColumns = [
     key: 'received_success',
     filterType: 'boolean', // 设置筛选类型为布尔值
     formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
+    minWidth: 100, // 设置最小宽度
   },
   {
     title: '确认时间',
     dataIndex: 'acknowledged_at',
     key: 'acknowledged_at',
     sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
   },
 ];
 </script>