Kaynağa Gözat

style: 数据画像页面细节优化与间距压缩

- 对象列表搜索框改为 32px 高、8px 圆角的紧凑输入框,聚焦态使用 #2A50EC
- 左右两栏间距与右侧卡片上下间距保持一致(2px)
- 左侧列表与基本信息中的身份证号取消脱敏,完整展示(窄栏增加 -0.2px 字距避免截断)
- 左侧列表项内填充缩小约 1/3(10px 12px → 6px 8px),行高同步收紧
- 亲密关系人去掉灰色底,压缩区块内边距/卡片内边距与区块高度(312px → 280px)
cc 1 gün önce
ebeveyn
işleme
eb0879f778

+ 2 - 1
ai-electron/frontend/src/case/views/dm/components/IntimacyPanel.vue

@@ -1017,7 +1017,8 @@
       align-items: stretch;
       overflow: hidden;
       padding: 2px;
-      background: #f3f4f6;
+      // 去掉外层灰色底:直接透出所在卡片的白色背景
+      background: transparent;
       box-sizing: border-box;
     }
 

+ 71 - 17
ai-electron/frontend/src/case/views/dm/portrait.vue

@@ -51,7 +51,7 @@
                           toPersonName(item.person)
                         }}</div>
                         <div v-if="item.person.personCertNo" class="person-sub">
-                          {{ maskCertNo(item.person.personCertNo) }}
+                          {{ item.person.personCertNo }}
                         </div>
                       </div>
                     </div>
@@ -3419,7 +3419,7 @@
     }
 
     return [
-      { label: '身份证', value: maskCertNo(person.personCertNo) },
+      { label: '身份证', value: fallbackValue(person.personCertNo) },
       { label: '性别', value: fallbackValue(person.personGender) },
       { label: '民族', value: fallbackValue(person.personNation) },
       { label: '年龄', value: fallbackValue(person.personAge) },
@@ -8838,8 +8838,9 @@
   .@{prefix-cls}.case-portrait-page {
     // ---------------- 左侧对象列表 ----------------
     .page-layout {
+      // 左右两栏间距与右侧卡片之间的上下间距保持一致(右侧卡片 gap = 2px)
       grid-template-columns: 208px minmax(0, 1fr);
-      gap: 12px;
+      gap: 2px;
     }
 
     .left-panel .panel-card {
@@ -8867,37 +8868,53 @@
       font-variant-numeric: tabular-nums;
     }
 
-    .search-box :deep(.ant-input-affix-wrapper),
-    .search-box :deep(.ant-input) {
-      height: 36px;
-      padding-inline: 10px;
+    // 对象列表搜索框:紧凑尺寸 + 小圆角,与面板内其他输入/列表项风格统一
+    // 注意:本页 style 非 scoped,:deep() 不会编译,必须用普通选择器 + 更高层级覆盖旧版胶囊样式
+    .left-panel .panel-card .search-box .ant-input-affix-wrapper,
+    .left-panel .panel-card .search-box .ant-input {
+      height: 32px;
+      padding: 0 10px;
+      border: 1px solid #e5e7eb;
       border-radius: 8px;
-      border-color: #e5e7eb;
       background: #f8fafc;
       box-shadow: none;
+      font-size: 13px;
       transition:
         border-color 0.2s ease,
-        background-color 0.2s ease;
+        background-color 0.2s ease,
+        box-shadow 0.2s ease;
     }
 
-    .search-box :deep(.ant-input-affix-wrapper:hover),
-    .search-box :deep(.ant-input:hover) {
+    .left-panel .panel-card .search-box .ant-input-affix-wrapper:hover,
+    .left-panel .panel-card .search-box .ant-input:hover {
       border-color: #cbd5e1;
       background: #fff;
     }
 
-    .search-box :deep(.ant-input-affix-wrapper-focused),
-    .search-box :deep(.ant-input:focus) {
-      border-color: #1677ff;
+    .left-panel .panel-card .search-box .ant-input-affix-wrapper.ant-input-affix-wrapper-focused,
+    .left-panel .panel-card .search-box .ant-input:focus {
+      border-color: #2a50ec;
       background: #fff;
-      box-shadow: 0 0 0 2px rgb(22 119 255 / 10%);
+      box-shadow: 0 0 0 2px rgb(42 80 236 / 12%);
     }
 
-    .search-box :deep(.ant-input-affix-wrapper .ant-input) {
+    .left-panel .panel-card .search-box .ant-input-affix-wrapper > .ant-input {
+      height: 100%;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
       background: transparent;
+      box-shadow: none;
+      font-size: 13px;
+    }
+
+    .left-panel .panel-card .search-box .ant-input-affix-wrapper .ant-input-prefix {
+      margin-inline-end: 6px;
+      color: #9ca3af;
+      font-size: 13px;
     }
 
-    .search-box__icon {
+    .left-panel .panel-card .search-box .search-box__icon {
       color: #9ca3af;
       font-size: 13px;
     }
@@ -8912,6 +8929,12 @@
       padding: 2px 0 0;
     }
 
+    .left-panel .person-list .person-card {
+      // 列表项内填充在现有基础上缩小约 1/3(10px 12px → 6px 8px),行高同步收紧
+      min-height: 52px;
+      padding: 6px 8px;
+    }
+
     .person-card {
       min-height: 52px;
       padding: 8px;
@@ -8982,6 +9005,8 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       font-variant-numeric: tabular-nums;
+      // 身份证号取消脱敏后为 18 位,收一点字距保证窄栏内完整展示
+      letter-spacing: -0.2px;
     }
 
     .person-card.active .person-sub {
@@ -9098,6 +9123,35 @@
       overflow-wrap: anywhere;
     }
 
+    // ---------------- 亲密关系人:压缩内边距,减少空间浪费 ----------------
+    #section-relation {
+      min-height: 280px;
+      padding: 12px 16px;
+    }
+
+    #section-relation .section-header {
+      margin-bottom: 10px;
+      padding-bottom: 8px;
+    }
+
+    .intimacy-panel {
+      --intimacy-content-height: 176px;
+      gap: 8px;
+    }
+
+    .intimacy-panel .intimacy-card-list {
+      padding: 8px 12px;
+    }
+
+    .intimacy-panel .intimacy-card {
+      padding: 8px 10px;
+      gap: 10px;
+    }
+
+    .intimacy-panel .intimacy-detail {
+      padding: 8px 10px;
+    }
+
     // ---------------- 头像 / 亲密度数字配色 ----------------
     // 基本信息主体头像、亲密关系人头像统一使用项目主色
     .profile-avatar,