瀏覽代碼

feat(frontend): 案件数据页卡片化 UI 升级

- 页面背景/留白/卡片间距对齐分析类页面统一规范
- 顶部页签改为分段胶囊样式,操作按钮统一 30px、8px 圆角
- 左侧数据目录、右侧结果表、导入文件管理均改为圆角卡片
- 结果表格表头 40px 浅灰、行高 40px、悬浮浅蓝,分页收进卡片底部
- 导入文件管理:表格工具条(当前页/已选/设置)上移到卡片标题栏,
  表格体撑满剩余高度并在内部滚动,去掉表格下方空白
cc 2 天之前
父節點
當前提交
80702ac943
共有 1 個文件被更改,包括 387 次插入 和 4 次删除
  1. 387 4
      ai-electron/frontend/src/case/views/data/index.vue

+ 387 - 4
ai-electron/frontend/src/case/views/data/index.vue

@@ -2103,7 +2103,7 @@
       }
 
       .table-wrapper .ant-table-body::-webkit-scrollbar-thumb {
-        background: rgba(148, 163, 184, 0.6);
+        background: rgb(148 163 184 / 60%);
         border-radius: 999px;
       }
 
@@ -2251,7 +2251,7 @@
         &.active {
           background: #2f54eb;
           color: #fff;
-          box-shadow: 0 4px 10px rgba(47, 84, 235, 0.35);
+          box-shadow: 0 4px 10px rgb(47 84 235 / 35%);
         }
       }
 
@@ -2736,7 +2736,7 @@
       border: 1px solid #e6edf6;
       border-radius: 12px;
       background: #fff;
-      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+      box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
     }
 
     .govern-config-label {
@@ -2880,7 +2880,7 @@
 
           &:hover {
             color: #93c5fd;
-            background: rgba(30, 64, 175, 0.24);
+            background: rgb(30 64 175 / 24%);
           }
         }
 
@@ -2909,4 +2909,387 @@
       }
     }
   }
+
+  /* ==========================================================================
+   * 案件数据:统一卡片语言(对齐持续联系 / 数据画像)
+   * 背景 #f4f6fa · 卡片圆角 14 · 细边框 #e7ebf3 · 间距 8px · 主色 #2a50ec
+   * ========================================================================== */
+  .@{prefix-cls}.case-data-page {
+    padding: 8px 10px;
+    background: #f4f6fa;
+
+    .page-main {
+      gap: 8px;
+      padding: 0;
+      background: transparent;
+    }
+
+    .header-bar {
+      min-height: 52px;
+      padding: 10px 14px;
+      border: 1px solid #e7ebf3;
+      border-radius: 14px;
+      box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
+    }
+
+    .import-tabs {
+      gap: 4px;
+      padding: 3px;
+      border-radius: 8px;
+      background: #f4f6fa;
+
+      &::after {
+        display: none;
+      }
+
+      &__item {
+        height: 28px;
+        padding: 0 14px;
+        border-radius: 6px;
+        color: #5b6577;
+        font-size: 13px;
+        line-height: 28px;
+
+        &::after {
+          display: none;
+        }
+
+        &.is-active {
+          background: #eef2ff;
+          color: #2a50ec;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .header-actions {
+      &__upload,
+      &__govern,
+      &__config,
+      &__smart,
+      &__result {
+        min-width: 0;
+        height: 30px;
+        padding: 0 14px;
+        border-radius: 8px;
+        font-size: 12px;
+        box-shadow: none;
+      }
+
+      &__config,
+      &__result {
+        border: 1px solid #e7ebf3;
+        background: #fff;
+        color: #5b6577;
+      }
+
+      &__divider {
+        height: 20px;
+        background: #e7ebf3;
+      }
+
+      .ant-btn-primary {
+        border-color: #2a50ec;
+        background: #2a50ec;
+
+        &:hover,
+        &:focus {
+          border-color: #4b6bf0;
+          background: #4b6bf0;
+        }
+      }
+    }
+
+    .page-layout {
+      grid-template-columns: 220px minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .left-panel {
+      padding: 10px;
+      border: 1px solid #e7ebf3;
+      border-radius: 14px;
+      box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
+    }
+
+    .right-panel {
+      gap: 0;
+      padding: 0;
+      border: 1px solid #e7ebf3;
+      border-radius: 14px;
+      box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
+    }
+
+    .right-panel .panel-header {
+      min-height: 42px;
+      padding: 0 14px;
+      border-bottom: 1px solid #eff2f7;
+    }
+
+    .right-panel .panel-title {
+      position: relative;
+      padding-left: 11px;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 22px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        width: 3px;
+        border-radius: 2px;
+        background: #2a50ec;
+      }
+    }
+
+    .right-panel .table-actions .ant-btn {
+      height: 30px;
+      padding: 0 12px;
+      border-radius: 8px;
+      font-size: 12px;
+      box-shadow: none;
+    }
+
+    .right-panel .table-wrapper {
+      padding-top: 8px;
+    }
+
+    .right-panel .table-wrapper .ant-table {
+      font-size: 12px;
+    }
+
+    .right-panel .table-wrapper .ant-table-thead > tr > th {
+      height: 40px;
+      padding: 0 12px;
+      border-bottom: 1px solid #eff2f7;
+      background: #f8fafc;
+      color: #5b6577;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .right-panel .table-wrapper .ant-table-tbody > tr > td {
+      height: 40px;
+      padding: 0 12px;
+      border-bottom: 1px solid #f4f6fa !important;
+      color: #1f2937;
+      font-size: 12px;
+    }
+
+    .right-panel .table-wrapper .ant-table-tbody > tr:hover > td {
+      background: #f8faff !important;
+    }
+
+    .right-panel .table-footer {
+      min-height: 0;
+      padding: 8px 14px 10px;
+      border-top: 1px solid #eff2f7;
+      color: #98a2b3;
+      font-size: 11px;
+    }
+
+    .right-panel .table-footer .ant-pagination-item,
+    .right-panel .table-footer .ant-pagination-prev,
+    .right-panel .table-footer .ant-pagination-next {
+      min-width: 26px;
+      height: 26px;
+      border-radius: 6px;
+      border-color: #e7ebf3;
+      line-height: 24px;
+    }
+
+    .right-panel .table-footer .ant-pagination-item-active {
+      border-color: #2a50ec;
+      background: #eef2ff;
+    }
+
+    .right-panel .table-footer .ant-pagination-item-active a {
+      color: #2a50ec;
+      font-weight: 600;
+    }
+
+    .file-panel {
+      gap: 0;
+      padding: 0;
+      border: 1px solid #e7ebf3;
+      border-radius: 14px;
+      box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
+    }
+
+    .file-panel-header {
+      display: flex;
+      align-items: center;
+      min-height: 42px;
+      padding: 0 14px;
+      border-bottom: 1px solid #eff2f7;
+    }
+
+    .file-panel-header .panel-title {
+      position: relative;
+      padding-left: 11px;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 22px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        width: 3px;
+        border-radius: 2px;
+        background: #2a50ec;
+      }
+    }
+
+    .file-panel__table {
+      padding: 10px 14px 12px;
+      box-sizing: border-box;
+    }
+
+    .case-tree {
+      .jeesite-basic-tree-header {
+        padding: 0 0 8px;
+        margin-bottom: 4px;
+      }
+
+      .jeesite-basic-title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .ant-tree-node-content-wrapper.ant-tree-node-selected {
+        background: #eef2ff;
+        color: #2a50ec;
+      }
+
+      .ant-tree-node-content-wrapper:hover {
+        background: #f6f8ff;
+      }
+    }
+  }
+
+  /* 导入文件:把表格头部工具条(当前页/已选/设置)上移到卡片标题栏右侧 */
+  .@{prefix-cls}.case-data-page {
+    .file-panel {
+      position: relative;
+    }
+
+    .file-panel-header {
+      padding-right: 430px;
+    }
+
+    .file-panel .case-import-list .jeesite-basic-table-header-container {
+      position: absolute;
+      top: 0;
+      right: 14px;
+      left: auto;
+      z-index: 3;
+      display: flex;
+      align-items: center;
+      width: auto !important;
+      height: 42px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+    }
+
+    .file-panel .case-import-list .jeesite-basic-table-header-container > .flex,
+    .file-panel .case-import-list .jeesite-basic-table-header__toolbar {
+      display: flex;
+      align-items: center;
+      height: 42px;
+      gap: 8px;
+    }
+
+    .file-panel .case-import-list .jeesite-basic-table-header__title {
+      display: none;
+    }
+
+    .file-panel .case-import-list .table-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .file-panel .case-import-list .table-meta-chip {
+      height: 24px;
+      padding: 0 8px;
+      border-radius: 6px;
+      background: #f4f6fa;
+      color: #5b6577;
+      font-size: 11px;
+      line-height: 24px;
+    }
+
+    .file-panel .case-import-list .table-meta-chip.is-selected {
+      background: #eef2ff;
+      color: #2a50ec;
+    }
+
+    .file-panel .case-import-list .jeesite-basic-table-header__toolbar > .ant-btn {
+      height: 28px;
+      padding: 0 10px;
+      border-radius: 8px;
+      font-size: 12px;
+    }
+
+    .file-panel .case-import-list .table-settings {
+      display: inline-flex;
+      align-items: center;
+      color: #5b6577;
+    }
+
+    .file-panel__table {
+      padding-top: 8px;
+    }
+  }
+
+  /* 导入文件表格:撑满卡片剩余高度,避免表格下方留白 */
+  .@{prefix-cls}.case-data-page {
+    .file-panel__table > .case-import-list {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-height: 0;
+      height: 100%;
+    }
+
+    .file-panel__table .jeesite-basic-table {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .file-panel__table .jeesite-basic-table > .ant-table-wrapper,
+    .file-panel__table .ant-spin-nested-loading,
+    .file-panel__table .ant-spin-container,
+    .file-panel__table .ant-table,
+    .file-panel__table .ant-table-container {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+    }
+
+    .file-panel__table .ant-table-body {
+      flex: 1 1 auto;
+      min-height: 0;
+      max-height: 100% !important;
+      overflow-y: auto;
+    }
+
+    .file-panel__table .case-import-list .pagination-bar {
+      flex: 0 0 auto;
+      padding-top: 8px;
+    }
+  }
 </style>