恢复修改的数据

src/views/cases/cpns/CaseRichText.vue

@@ -5,53 +5,84 @@ interface Props {
   item: Case
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
-const sections = [
-  { key: 'background', title: '项目背景', field: 'background' },
-  { key: 'painPoints', title: '客户痛点', field: 'painPoints' },
-  { key: 'requirements', title: '需求描述', field: 'requirements' },
-  { key: 'deliverables', title: '交付物', field: 'deliverables' },
-] as const
+/**
+ * 案例正文区块（设计稿：一段一张白卡，卡片标题带蓝色竖条）。
+ *
+ * <p>区块的**数量与标题都来自后端**（vm_project_case_catalog：title + content，
+ * 按 sort_order 升序），前端不再写死「项目背景 / 客户痛点 / 需求描述 / 交付物」，
+ * 后端增删目录即自动生效。空内容已在 utils/caseVo.ts#toSections 里过滤。</p>
+ */
 </script>
 
 <template>
   <div class="case-rich">
-    <section v-for="section in sections" :key="section.key" class="case-rich__section">
-      <h3 class="case-rich__title">
+    <section
+      v-for="(section, index) in props.item.sections"
+      :key="`${index}-${section.title}`"
+      class="case-rich__card"
+    >
+      <h3 v-if="section.title" class="case-rich__title">
         {{ section.title }}
       </h3>
-      <p class="case-rich__text">{{ item[section.field] }}</p>
+      <!-- 后端下发富文本 HTML（可能内嵌 img / video），直接渲染 -->
+      <div class="case-rich__html" v-html="section.content" />
     </section>
   </div>
 </template>
 
 <style lang="less" scoped>
 .case-rich {
-  .flex(column, flex-start);
+  // 同 detail.vue：显式 stretch，避免正文块被压成内容宽
+  .flex(column, flex-start, stretch);
   gap: @spacing-base;
 
-  &__section {
-    padding: @spacing-lg @spacing-xl;
-    border-radius: @radius-lg;
+  &__card {
+    padding: @spacing-lg;
+    border-radius: @radius-base;
     background: @white;
-    box-shadow: @shadow-base;
   }
 
   &__title {
-    margin-bottom: @spacing-sm;
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+    margin-bottom: @spacing-base;
     font-size: @font-size-lg;
     font-weight: 600;
     color: @heading-color;
-    padding-left: @spacing-sm;
-    border-left: 3px solid @primary-color;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 16px;
+      border-radius: 2px;
+      background: @primary-color;
+      flex-shrink: 0;
+    }
   }
 
-  &__text {
+  &__html {
     font-size: @font-size-base;
     line-height: 1.8;
     color: @text-color;
-    white-space: pre-wrap;
+    word-break: break-word;
+
+    :deep(p) {
+      margin-bottom: @spacing-sm;
+      // 后端富文本常把「1、…2、…」分条内容放在同一个 <p> 里用 \r\n 分行，
+      // 默认会被 HTML 折叠成一段，故保留换行（与旧纯文本分支的 pre-wrap 行为一致）
+      white-space: pre-wrap;
+    }
+
+    :deep(img),
+    :deep(video) {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin-bottom: @spacing-sm;
+      border-radius: @radius-sm;
+    }
   }
 }
 </style>