搭建结果总览项目分析弹窗骨架

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

@@ -30,6 +30,7 @@
       :visible.sync="projectAnalysisDialogVisible"
       :person="currentProjectAnalysisPerson"
       :source="projectAnalysisSource"
+      :project-name="projectInfo.projectName"
       @close="handleProjectAnalysisDialogClose"
     />
   </div>

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

@@ -4,20 +4,61 @@
     :visible.sync="visibleProxy"
     width="1280px"
     append-to-body
-    @close="handleClose"
+    custom-class="project-analysis-dialog"
+    @close="handleDialogClosed"
   >
-    <div class="project-analysis-dialog-placeholder">
-      <div class="placeholder-title">{{ person && person.name ? person.name : "项目分析" }}</div>
-      <div class="placeholder-subtitle">
-        当前来源：{{ source === "riskModelPeople" ? "命中模型涉及人员" : "风险人员总览" }}
+    <div class="project-analysis-layout">
+      <project-analysis-sidebar
+        class="project-analysis-layout__sidebar"
+        :sidebar-data="dialogData.sidebar"
+      />
+      <div class="project-analysis-layout__main">
+        <el-tabs v-model="activeTab" stretch>
+          <el-tab-pane label="异常明细" name="abnormalDetail">
+            <div class="project-analysis-tab-placeholder">
+              <div class="tab-placeholder-title">异常明细</div>
+              <div class="tab-placeholder-text">{{ getTabDescription("abnormalDetail") }}</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="资产分析" name="assetAnalysis">
+            <div class="project-analysis-tab-placeholder">
+              <div class="tab-placeholder-title">资产分析</div>
+              <div class="tab-placeholder-text">{{ getTabDescription("assetAnalysis") }}</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="征信摘要" name="creditSummary">
+            <div class="project-analysis-tab-placeholder">
+              <div class="tab-placeholder-title">征信摘要</div>
+              <div class="tab-placeholder-text">{{ getTabDescription("creditSummary") }}</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="关系图谱" name="relationshipGraph">
+            <div class="project-analysis-tab-placeholder">
+              <div class="tab-placeholder-title">关系图谱</div>
+              <div class="tab-placeholder-text">{{ getTabDescription("relationshipGraph") }}</div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="资金流向" name="fundFlow">
+            <div class="project-analysis-tab-placeholder">
+              <div class="tab-placeholder-title">资金流向</div>
+              <div class="tab-placeholder-text">{{ getTabDescription("fundFlow") }}</div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
   </el-dialog>
 </template>
 
 <script>
+import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
+import { buildProjectAnalysisDialogData } from "./preliminaryCheck.mock";
+
 export default {
   name: "ProjectAnalysisDialog",
+  components: {
+    ProjectAnalysisSidebar,
+  },
   props: {
     visible: {
       type: Boolean,
@@ -31,8 +72,24 @@ export default {
       type: String,
       default: "riskPeople",
     },
+    projectName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      activeTab: "abnormalDetail",
+    };
   },
   computed: {
+    dialogData() {
+      return buildProjectAnalysisDialogData({
+        person: this.person,
+        source: this.source,
+        projectName: this.projectName,
+      });
+    },
     visibleProxy: {
       get() {
         return this.visible;
@@ -42,8 +99,23 @@ export default {
       },
     },
   },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.resetDialogState();
+      }
+    },
+  },
   methods: {
-    handleClose() {
+    resetDialogState() {
+      this.activeTab = "abnormalDetail";
+    },
+    getTabDescription(tabKey) {
+      const currentTab = this.dialogData.tabs.find((item) => item.key === tabKey);
+      return currentTab ? currentTab.description : "";
+    },
+    handleDialogClosed() {
+      this.resetDialogState();
       this.$emit("close");
     },
   },
@@ -51,21 +123,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.project-analysis-dialog-placeholder {
-  min-height: 160px;
-  padding: 24px;
-  background: #f8fafc;
+.project-analysis-layout {
+  display: flex;
+  gap: 20px;
+  min-height: 640px;
 }
 
-.placeholder-title {
-  font-size: 20px;
+.project-analysis-layout__sidebar {
+  flex: 0 0 320px;
+}
+
+.project-analysis-layout__main {
+  flex: 1;
+  min-width: 0;
+}
+
+.project-analysis-tab-placeholder {
+  min-height: 560px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.tab-placeholder-title {
+  font-size: 18px;
   font-weight: 600;
   color: #0f172a;
 }
 
-.placeholder-subtitle {
+.tab-placeholder-text {
   margin-top: 8px;
   font-size: 13px;
+  line-height: 1.7;
   color: #64748b;
 }
 </style>

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

@@ -0,0 +1,144 @@
+<template>
+  <aside class="project-analysis-sidebar">
+    <section class="sidebar-card">
+      <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>
+      </div>
+      <div class="sidebar-field">
+        <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>
+    </section>
+
+    <section class="sidebar-card">
+      <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">
+        <span class="sidebar-field__label">当前命中模型</span>
+        <span class="sidebar-field__value">{{ sidebarData.modelSummary.currentModel || "-" }}</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="`${tag}-${index}`"
+            size="mini"
+            effect="plain"
+          >
+            {{ tag }}
+          </el-tag>
+        </div>
+        <span v-else class="sidebar-field__value">暂无异常标签</span>
+      </div>
+    </section>
+
+    <section class="sidebar-card">
+      <div class="sidebar-card__title">排查记录摘要</div>
+      <p class="sidebar-summary">{{ sidebarData.recordSummary }}</p>
+    </section>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: "ProjectAnalysisSidebar",
+  props: {
+    sidebarData: {
+      type: Object,
+      default: () => ({
+        basicInfo: {},
+        modelSummary: {
+          riskTags: [],
+        },
+        recordSummary: "",
+      }),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.project-analysis-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sidebar-card {
+  padding: 18px 16px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+}
+
+.sidebar-card__title {
+  margin-bottom: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.sidebar-field + .sidebar-field {
+  margin-top: 12px;
+}
+
+.sidebar-field {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.sidebar-field--column {
+  display: block;
+}
+
+.sidebar-field__label {
+  flex: 0 0 84px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.sidebar-field__value {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: right;
+  color: #0f172a;
+  word-break: break-all;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.sidebar-summary {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #475569;
+}
+</style>

ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js

@@ -128,6 +128,93 @@ export const mockOverviewData = {
   },
 };
 
+export const projectAnalysisTabs = [
+  {
+    key: "abnormalDetail",
+    label: "异常明细",
+    description: "展示异常交易、频繁转账账户与关联交易的分析摘要。",
+  },
+  {
+    key: "assetAnalysis",
+    label: "资产分析",
+    description: "静态承载资产分析页签内容，本轮不接入新接口。",
+  },
+  {
+    key: "creditSummary",
+    label: "征信摘要",
+    description: "静态承载征信摘要页签内容，本轮不接入新接口。",
+  },
+  {
+    key: "relationshipGraph",
+    label: "关系图谱",
+    description: "静态承载关系图谱页签内容，本轮不接入新接口。",
+  },
+  {
+    key: "fundFlow",
+    label: "资金流向",
+    description: "静态承载资金流向页签内容，本轮不接入新接口。",
+  },
+];
+
+function normalizeProjectAnalysisTags(person) {
+  const sourceTags = Array.isArray(person && person.riskPointTagList)
+    ? person.riskPointTagList
+    : Array.isArray(person && person.hitTagList)
+      ? person.hitTagList
+      : [];
+
+  return sourceTags
+    .map((item) => {
+      if (typeof item === "string") {
+        return item;
+      }
+      if (item && typeof item === "object") {
+        return item.ruleName || item.label || item.name || "";
+      }
+      return "";
+    })
+    .filter(Boolean);
+}
+
+function resolveCurrentModel(person, source) {
+  if (source === "riskModelPeople") {
+    if (Array.isArray(person && person.modelNames) && person.modelNames.length) {
+      return person.modelNames.join("、");
+    }
+    return person && person.modelName ? person.modelName : "-";
+  }
+
+  const firstTag = Array.isArray(person && person.riskPointTagList) ? person.riskPointTagList[0] : null;
+  if (firstTag && firstTag.modelName) {
+    return firstTag.modelName;
+  }
+  return "-";
+}
+
+export function buildProjectAnalysisDialogData({ person, source = "riskPeople", projectName = "" } = {}) {
+  const safePerson = person || {};
+  const riskTags = normalizeProjectAnalysisTags(safePerson);
+
+  return {
+    tabs: projectAnalysisTabs,
+    sidebar: {
+      basicInfo: {
+        name: safePerson.name || safePerson.staffName || "-",
+        staffCode: safePerson.staffCode || "-",
+        department: safePerson.department || "-",
+        riskLevel: safePerson.riskLevel || safePerson.warningType || "-",
+        projectName: projectName || safePerson.projectName || "-",
+      },
+      modelSummary: {
+        modelCount: safePerson.modelCount || (Array.isArray(safePerson.modelNames) ? safePerson.modelNames.length : "-"),
+        currentModel: resolveCurrentModel(safePerson, source),
+        riskTags,
+      },
+      recordSummary: "排查记录摘要为静态承载内容，本轮用于展示统一工作台侧栏结构。",
+    },
+  };
+}
+
 const summaryStatMetaMap = mockOverviewData.summary.stats.reduce((acc, item) => {
   acc[item.key] = {
     icon: item.icon,

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

@@ -0,0 +1,20 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const dialog = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue"
+  ),
+  "utf8"
+);
+
+[
+  'activeTab: "abnormalDetail"',
+  "resetDialogState()",
+  'this.activeTab = "abnormalDetail"',
+  "handleDialogClosed()",
+  "if (value) {",
+  "this.resetDialogState()",
+].forEach((token) => assert(dialog.includes(token), token));

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

@@ -0,0 +1,39 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const dialog = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue"
+  ),
+  "utf8"
+);
+const mockSource = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/preliminaryCheck.mock.js"
+  ),
+  "utf8"
+);
+
+[
+  'title="项目分析"',
+  "<project-analysis-sidebar",
+  '<el-tabs v-model="activeTab"',
+  'name="abnormalDetail"',
+  'label="异常明细"',
+  'label="资产分析"',
+  'label="征信摘要"',
+  'label="关系图谱"',
+  'label="资金流向"',
+].forEach((token) => assert(dialog.includes(token), token));
+
+[
+  "projectAnalysisTabs",
+  'key: "abnormalDetail"',
+  'key: "assetAnalysis"',
+  'key: "creditSummary"',
+  'key: "relationshipGraph"',
+  'key: "fundFlow"',
+].forEach((token) => assert(mockSource.includes(token), token));

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

@@ -0,0 +1,29 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const sidebar = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue"
+  ),
+  "utf8"
+);
+
+[
+  "人员基础信息",
+  "命中模型摘要",
+  "排查记录摘要",
+  "姓名",
+  "工号",
+  "部门",
+  "风险等级",
+  "所属项目",
+  "命中模型数",
+  "当前命中模型",
+  "核心异常标签",
+  "暂无异常标签",
+].forEach((token) => assert(sidebar.includes(token), token));
+
+assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
+assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");