From d4421862a83d4b097f414464f6162aa6dbb92135 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Thu, 26 Mar 2026 09:13:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=A1=B9=E7=9B=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=BC=B9=E7=AA=97=E4=BE=A7=E6=A0=8F=E6=A1=A3=E6=A1=88?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProjectAnalysisSidebar.vue         | 168 ++++++++++--------
 ...roject-analysis-dialog-empty-field.test.js |   3 +
 .../project-analysis-dialog-sidebar.test.js   |  26 ++-
 3 files changed, 109 insertions(+), 88 deletions(-)

diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
index ab51d3ec..2b15851f 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -1,49 +1,49 @@
 <template>
   <aside class="project-analysis-sidebar">
-    <section class="sidebar-card">
-      <div class="sidebar-section">
-        <div class="sidebar-card__title">人员基础信息</div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">姓名</span>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
+    <section class="sidebar-profile">
+      <div class="sidebar-profile__name-row">
+        <div>
+          <div class="sidebar-section__eyebrow">人物档案</div>
+          <div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</div>
         </div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">工号</span>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
+        <div class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</div>
+      </div>
+
+      <div class="sidebar-profile__meta">
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">工号</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
         </div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">部门</span>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.department || "-" }}</span>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">部门</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.department || "-" }}</span>
         </div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">风险等级</span>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
-        </div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">所属项目</span>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">所属项目</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
         </div>
       </div>
-      <div class="sidebar-section sidebar-section--split">
-        <div class="sidebar-card__title">命中模型摘要</div>
-        <div class="sidebar-field">
-          <span class="sidebar-field__label">命中模型数</span>
-          <span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
-        </div>
-        <div class="sidebar-field sidebar-field--column">
-          <span class="sidebar-field__label">核心异常标签</span>
-          <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
-            <el-tag
-              v-for="(tag, index) in sidebarData.modelSummary.riskTags"
-              :key="`${formatRiskTag(tag)}-${index}`"
-              size="mini"
-              effect="plain"
-            >
-              {{ formatRiskTag(tag) }}
-            </el-tag>
-          </div>
-          <span v-else class="sidebar-field__value">暂无异常标签</span>
+    </section>
+
+    <section class="sidebar-summary">
+      <div class="sidebar-section__eyebrow">命中模型摘要</div>
+      <div class="sidebar-summary__count">
+        <span class="sidebar-summary__count-label">命中模型数</span>
+        <span class="sidebar-summary__count-value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
+      </div>
+      <div class="sidebar-summary__tags">
+        <span class="sidebar-profile__label">核心异常标签</span>
+        <div v-if="sidebarData.modelSummary.riskTags.length" class="sidebar-tag-list">
+          <el-tag
+            v-for="(tag, index) in sidebarData.modelSummary.riskTags"
+            :key="`${formatRiskTag(tag)}-${index}`"
+            size="mini"
+            effect="plain"
+          >
+            {{ formatRiskTag(tag) }}
+          </el-tag>
         </div>
+        <span v-else class="sidebar-profile__value">暂无异常标签</span>
       </div>
     </section>
   </aside>
@@ -80,72 +80,94 @@ export default {
 <style lang="scss" scoped>
 .project-analysis-sidebar {
   width: 100%;
+  align-self: flex-start;
 }
 
-.sidebar-card {
-  padding: 0;
-  border: none;
-  background: transparent;
-  box-shadow: none;
+.sidebar-profile,
+.sidebar-summary {
+  padding: 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
 }
 
-.sidebar-section {
-  padding: 18px 16px;
+.sidebar-summary {
+  margin-top: 16px;
 }
 
-.sidebar-section--split {
-  border-top: 1px solid #e2e8f0;
-}
-
-.sidebar-card__title {
-  margin-bottom: 14px;
-  font-size: 15px;
+.sidebar-section__eyebrow {
+  font-size: 12px;
   font-weight: 600;
-  color: #0f172a;
+  letter-spacing: 0.08em;
+  color: #64748b;
 }
 
-.sidebar-field + .sidebar-field {
-  margin-top: 12px;
-}
-
-.sidebar-field {
+.sidebar-profile__name-row {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   gap: 12px;
 }
 
-.sidebar-field--column {
-  display: block;
+.sidebar-profile__name {
+  margin-top: 8px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #0f172a;
 }
 
-.sidebar-field--column .sidebar-field__label {
-  display: block;
-  margin-bottom: 8px;
+.sidebar-risk-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #fee2e2;
+  font-size: 12px;
+  font-weight: 600;
+  color: #b91c1c;
 }
 
-.sidebar-field__label {
-  flex: 0 0 84px;
+.sidebar-profile__meta {
+  display: grid;
+  gap: 14px;
+  margin-top: 20px;
+}
+
+.sidebar-profile__item {
+  display: grid;
+  gap: 6px;
+}
+
+.sidebar-profile__label,
+.sidebar-summary__count-label {
   font-size: 12px;
   color: #64748b;
 }
 
-.sidebar-field__value {
-  flex: 1;
-  min-width: 0;
+.sidebar-profile__value,
+.sidebar-summary__count-value {
   font-size: 13px;
   line-height: 1.6;
-  text-align: right;
   color: #0f172a;
   word-break: break-all;
 }
 
-.tag-list {
+.sidebar-summary__count {
+  display: grid;
+  gap: 6px;
+  margin-top: 16px;
+}
+
+.sidebar-summary__tags {
+  display: grid;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.sidebar-tag-list {
   display: flex;
   width: 100%;
   flex-wrap: wrap;
-  justify-content: flex-start;
   gap: 8px;
-  margin-top: 8px;
 }
 </style>
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
index 991c2f6f..00133e8d 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js
@@ -25,8 +25,11 @@ const dialog = fs.readFileSync(
 );
 
 [
+  'sidebarData.basicInfo.name || "-"',
   'sidebarData.basicInfo.staffCode || "-"',
   'sidebarData.basicInfo.department || "-"',
+  'sidebarData.basicInfo.projectName || "-"',
+  'sidebarData.basicInfo.riskLevel || "-"',
   "暂无异常标签",
 ].forEach((token) => assert(sidebar.includes(token), token));
 
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
index a564b3d8..d650a941 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
@@ -25,29 +25,24 @@ const entry = fs.readFileSync(
 );
 
 [
-  "人员基础信息",
-  "命中模型摘要",
-  "姓名",
-  "工号",
-  "部门",
-  "风险等级",
-  "所属项目",
-  "命中模型数",
-  "核心异常标签",
-  "暂无异常标签",
+  "sidebar-profile",
+  "sidebar-profile__name",
+  "sidebar-risk-badge",
+  "sidebar-profile__meta",
+  "sidebar-summary",
+  "sidebar-summary__count",
+  "sidebar-tag-list",
   "formatRiskTag",
   "tag.ruleName",
-  "justify-content: flex-start",
-  "width: 100%",
-  ".sidebar-field--column .sidebar-field__label",
-  "margin-bottom: 8px",
+  "flex-wrap: wrap",
+  "align-items: flex-start",
 ].forEach((token) => assert(sidebar.includes(token), token));
 
 assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段");
 assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要");
-assert(!sidebar.includes("sidebar-summary"), "侧栏不应再渲染排查记录摘要文案");
 assert(!sidebar.includes("position: sticky"), "左侧整卡不应保持固定");
 assert(!sidebar.includes("border: 1px solid #e2e8f0"), "左右区域合并后左侧不应保留独立卡片边框");
+assert(!sidebar.includes("justify-content: space-between"), "不应继续以表单式左右对齐作为主体布局");
 
 assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
 assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");
@@ -55,6 +50,7 @@ assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");
 [
   "this.detailData && this.detailData.basicInfo",
   "...(this.modelSummary || {})",
+  "align-items: flex-start",
 ].forEach((token) => assert(dialog.includes(token), token));
 
 assert(entry.includes(':model-summary="projectAnalysisModelSummary"'), "入口页应继续透传模型摘要");