改造结果总览详情弹窗侧栏档案面板

ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue

@@ -1,37 +1,37 @@
 <template>
   <aside class="project-analysis-sidebar">
-    <section class="sidebar-card">
+    <section class="sidebar-profile">
-      <div class="sidebar-section">
+      <div class="sidebar-section__title">人物档案</div>
-        <div class="sidebar-card__title">人员基础信息</div>
+      <div class="sidebar-profile__name-row">
-        <div class="sidebar-field">
+        <div>
-          <span class="sidebar-field__label">姓名</span>
+          <div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</div>
-          <span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
+          <div class="sidebar-profile__meta">
-        </div>
+            <span>工号 {{ sidebarData.basicInfo.staffCode || "-" }}</span>
-        <div class="sidebar-field">
+            <span>部门 {{ sidebarData.basicInfo.department || "-" }}</span>
-          <span class="sidebar-field__label">工号</span>
-          <span class="sidebar-field__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>
-        <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>
         </div>
-      <div class="sidebar-section sidebar-section--split">
+        <span class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
-        <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">
+      <div class="sidebar-profile__grid">
-          <span class="sidebar-field__label">核心异常标签</span>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">所属项目</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
+        </div>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">风险等级</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="sidebar-summary">
+      <div class="sidebar-section__title">模型摘要</div>
+      <div class="sidebar-summary__metric">
+        <span class="sidebar-summary__label">命中模型数</span>
+        <strong class="sidebar-summary__value">{{ sidebarData.modelSummary.modelCount || "-" }}</strong>
+      </div>
+      <div class="sidebar-summary__block">
+        <span class="sidebar-summary__label">核心异常标签</span>
         <div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
           <el-tag
             v-for="(tag, index) in sidebarData.modelSummary.riskTags"
@@ -42,10 +42,16 @@
             {{ formatRiskTag(tag) }}
           </el-tag>
         </div>
-          <span v-else class="sidebar-field__value">暂无异常标签</span>
+        <span v-else class="sidebar-summary__empty">暂无异常标签</span>
-        </div>
       </div>
     </section>
+
+    <section class="sidebar-hint">
+      <div class="sidebar-section__title">辅助提示</div>
+      <p class="sidebar-hint__text">
+        侧栏仅保留人物身份与模型摘要，详细异常请在主区页签中继续查看。
+      </p>
+    </section>
   </aside>
 </template>
 
@@ -80,69 +86,109 @@ export default {
 <style lang="scss" scoped>
 .project-analysis-sidebar {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.sidebar-card {
+.sidebar-profile,
-  padding: 0;
+.sidebar-summary,
-  border: none;
+.sidebar-hint {
-  background: transparent;
+  padding: 20px;
-  box-shadow: none;
+  border-radius: 20px;
+  background: #ffffff;
 }
 
-.sidebar-section {
+.sidebar-section__title {
-  padding: 18px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #92400e;
 }
 
-.sidebar-section--split {
+.sidebar-profile__name-row {
-  border-top: 1px solid #e2e8f0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 12px;
+  margin-top: 14px;
 }
 
-.sidebar-card__title {
+.sidebar-profile__name {
-  margin-bottom: 14px;
+  font-size: 24px;
-  font-size: 15px;
   font-weight: 600;
   color: #0f172a;
 }
 
-.sidebar-field + .sidebar-field {
+.sidebar-profile__meta {
-  margin-top: 12px;
-}
-
-.sidebar-field {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
-  justify-content: space-between;
+  gap: 6px;
-  gap: 12px;
+  margin-top: 8px;
-}
-
-.sidebar-field--column {
-  display: block;
-}
-
-.sidebar-field--column .sidebar-field__label {
-  display: block;
-  margin-bottom: 8px;
-}
-
-.sidebar-field__label {
-  flex: 0 0 84px;
   font-size: 12px;
   color: #64748b;
 }
 
-.sidebar-field__value {
+.sidebar-risk-badge {
-  flex: 1;
+  display: inline-flex;
-  min-width: 0;
+  align-items: center;
-  font-size: 13px;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #fee2e2;
+  font-size: 12px;
+  font-weight: 600;
+  color: #b91c1c;
+}
+
+.sidebar-profile__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.sidebar-profile__item,
+.sidebar-summary__metric,
+.sidebar-summary__block {
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.sidebar-profile__label,
+.sidebar-summary__label {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.sidebar-profile__value,
+.sidebar-summary__value,
+.sidebar-summary__empty {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
   line-height: 1.6;
-  text-align: right;
   color: #0f172a;
   word-break: break-all;
 }
 
+.sidebar-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sidebar-hint__text {
+  margin: 14px 0 0;
+  font-size: 13px;
+  line-height: 1.7;
+  color: #64748b;
+}
+
 .tag-list {
   display: flex;
-  width: 100%;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 8px;

ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js

@@ -25,9 +25,14 @@ const dialog = fs.readFileSync(
 );
 
 [
+  'sidebarData.basicInfo.name || "-"',
   'sidebarData.basicInfo.staffCode || "-"',
   'sidebarData.basicInfo.department || "-"',
+  'sidebarData.basicInfo.projectName || "-"',
+  'sidebarData.basicInfo.riskLevel || "-"',
   "暂无异常标签",
+  "sidebar-profile",
+  "sidebar-risk-badge",
 ].forEach((token) => assert(sidebar.includes(token), token));
 
 [

ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js

@@ -25,13 +25,13 @@ const entry = fs.readFileSync(
 );
 
 [
-  "人员基础信息",
+  "sidebar-profile",
-  "命中模型摘要",
+  "sidebar-summary",
-  "姓名",
+  "sidebar-hint",
-  "工号",
+  "sidebar-risk-badge",
-  "部门",
+  "人物档案",
-  "风险等级",
+  "模型摘要",
-  "所属项目",
+  "辅助提示",
   "命中模型数",
   "核心异常标签",
   "暂无异常标签",
@@ -39,15 +39,16 @@ const entry = fs.readFileSync(
   "tag.ruleName",
   "justify-content: flex-start",
   "width: 100%",
-  ".sidebar-field--column .sidebar-field__label",
+  "sidebar-profile__meta",
-  "margin-bottom: 8px",
+  "sidebar-section__title",
 ].forEach((token) => assert(sidebar.includes(token), token));
 
 assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段");
 assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要");
-assert(!sidebar.includes("sidebar-summary"), "侧栏不应再渲染排查记录摘要文案");
+assert(!sidebar.includes("人员基础信息"), "侧栏主视觉不应继续停留在字段平铺式表单");
 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("资产分布"), "侧栏不应扩展到额外区块");