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

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>