优化L１、L４数据展示界面样式

src/views/L1-data-list/index.vue

@@ -9,7 +9,7 @@
       <a-form layout="inline" :model="formData">
         <a-form-item label="日期范围">
           <a-range-picker v-model:value="formData.dateRange" :placeholder="['开始日期', '结束日期']"
-            format="YYYY-MM-DD hh:mm:ss" class="date-range-picker" show-time />
+            format="YYYY-MM-DD hh:mm:ss" show-time />
         </a-form-item>
         <a-form-item>
           <a-space>
@@ -237,111 +237,54 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "@/assets/styles/variables" as *;
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
 .l1-data-container {
-  display: flex;
+  padding: 20px;
-  flex-direction: column;
+  background: #f5f5f5;
-  height: 100vh;
+  min-height: 100vh;
-  padding: $spacing-lg;
+}
 
-  .page-header {
+.page-header {
-    margin-bottom: $spacing-lg;
+  margin-bottom: 20px;
-    flex-shrink: 0;
 
-    .page-title {
+  .page-title {
-      font-size: $title-font-size;
+    font-size: 24px;
-      color: $text-dark;
+    font-weight: 600;
-      margin: 0;
+    color: #1f2937;
-      font-weight: 600;
+    margin: 0;
-    }
-  }
-
-  .filter-section {
-    background: $bg-light;
-    padding: $spacing-lg;
-    border-radius: $border-radius-lg;
-    margin-bottom: $spacing-lg;
-    flex-shrink: 0;
-
-    .filter-label {
-      font-weight: 500;
-      color: $text-dark;
-      font-size: $content-font-size;
-    }
-  }
-
-  .table-section {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    :deep(.ant-table-wrapper) {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .ant-spin-container,
-      .ant-table {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .ant-table-container {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      .ant-table-body {
-        overflow-y: auto !important;
-      }
-    }
-  }
-
-  .detail-content {
-    .ant-descriptions {
-      margin-top: $spacing-md;
-    }
   }
 }
 
-:deep(.ant-btn-primary) {
+.filter-section {
-  background: $primary-color;
+  background: white;
-  border-color: $primary-color;
+  padding: 20px;
-
+  border-radius: 8px;
-  &:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    background: $primary-light;
+  margin-bottom: 20px;
-    border-color: $primary-light;
-  }
 }
 
-@media (max-width: 768px) {
+.table-section {
-  .l1-data-container {
+  background: white;
-    padding: $spacing-md;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
 
-    .filter-section {
+.detail-content {
-      .ant-row {
+  max-height: 500px;
-        flex-direction: column;
+  overflow-y: auto;
-        gap: $spacing-md;
+}
 
-        .ant-col {
+:deep(.ant-table-thead > tr > th) {
-          width: 100% !important;
+  background: #f8fafc;
-        }
+  font-weight: 600;
-      }
+}
 
-      .date-range-picker {
+:deep(.ant-table-tbody > tr:hover > td) {
-        width: 100%;
+  background: #f0f9ff;
-      }
+}
-    }
+
-  }
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  background: #f8fafc;
 }
 </style>

src/views/L4-data-list/index.vue

@@ -8,13 +8,8 @@
     <div class="filter-section">
       <a-form layout="inline" :model="formData">
         <a-form-item label="日期范围">
-          <a-range-picker
+          <a-range-picker v-model:value="formData.dateRange" :placeholder="['开始日期', '结束日期']"
-            v-model:value="formData.dateRange"
+            format="YYYY-MM-DD hh:mm:ss" show-time />
-            :placeholder="['开始日期', '结束日期']"
-            format="YYYY-MM-DD hh:mm:ss"
-            class="date-range-picker"
-            show-time
-          />
         </a-form-item>
         <a-form-item>
           <a-space>
@@ -37,17 +32,10 @@
 
     <!-- 数据表格 -->
     <div class="table-section">
-      <a-table
+      <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        :columns="columns"
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 1200 }">
-        :data-source="tableData"
+        <template #bodyCell="{ column, record, index }">
-        :loading="loading"
+          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
-        :pagination="pagination"
-        @change="handleTableChange"
-        row-key="id"
-        size="middle"
-        :scroll="{ x: 1200 }"
-      >
-        <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'createTime'">
             {{ formatDateTime(record.createTime) }}
           </template>
@@ -86,24 +74,19 @@
               查看详情
             </a-button>
           </template>
+          <template v-else>
+            {{ record[column.key as string] }}
+          </template>
         </template>
       </a-table>
     </div>
 
     <!-- 详情弹窗 -->
-    <a-modal
+    <a-modal v-model:open="detailModalVisible" title="L4数据详情" width="800px" :footer="null">
-      v-model:open="detailModalVisible"
-      title="L4数据详情"
-      width="800px"
-      :footer="null"
-    >
       <div v-if="selectedRecord" class="detail-content">
         <a-descriptions :column="2" bordered>
-          <a-descriptions-item
+          <a-descriptions-item v-for="(value, key) in selectedRecord" :key="key"
-            v-for="(value, key) in selectedRecord"
+            :label="columns.find((col) => col.key === key)?.title || key">
-            :key="key"
-            :label="columns.find((col) => col.key === key)?.title || key"
-          >
             <template v-if="key === 'createTime'">
               {{ formatDateTime(value) }}
             </template>
@@ -148,13 +131,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
 import { getL4Data } from '@/api/data';
 import { columns } from './data';
 import type { QueryParams } from '@/api/data/model';
 import type { L4Data } from './types';
 import type { Dayjs } from 'dayjs';
+import { idText } from 'typescript';
 
 type DateRangeType = [Dayjs, Dayjs] | undefined;
 
@@ -209,6 +193,8 @@ const fetchData = async () => {
     const params: QueryParams = {
       pageNum: pagination.current,
       pageSize: pagination.pageSize,
+      orderByColumn: 'id',
+      isAsc: 'desc'
     };
 
     // 添加日期范围筛选
@@ -278,7 +264,7 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .l4-data-container {
   padding: 20px;
   background: #f5f5f5;
@@ -287,13 +273,13 @@ onMounted(() => {
 
 .page-header {
   margin-bottom: 20px;
-}
   
-.page-title {
+  .page-title {
-  font-size: 24px;
+    font-size: 24px;
-  font-weight: 600;
+    font-weight: 600;
-  color: #1f2937;
+    color: #1f2937;
-  margin: 0;
+    margin: 0;
+  }
 }
 
 .filter-section {
@@ -304,10 +290,6 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
-.date-range-picker {
-  width: 300px;
-}
-
 .table-section {
   background: white;
   padding: 20px;