feat(material): 详情视图分三块展示

view 模式拆为 材料信息 / 品牌与供应商 / 案例信息 三个 el-descriptions，
新增供应商合作模式、省-市展示。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/views/material/MaterialForm.vue

@@ -167,39 +167,52 @@
   </el-form>
 
   <template v-else>
-    <el-descriptions :column="1" border>
+    <el-descriptions title="材料信息" :column="2" border class="detail-section">
       <el-descriptions-item label="材料名称">{{ displayText(modelValue.name) }}</el-descriptions-item>
       <el-descriptions-item label="材料大类">{{ displayText(modelValue.major_category_display) }}</el-descriptions-item>
       <el-descriptions-item label="细分种类">{{ displayText(modelValue.material_category) }}</el-descriptions-item>
       <el-descriptions-item label="材料子类">{{ displayText(modelValue.material_subcategory) }}</el-descriptions-item>
       <el-descriptions-item label="阶段">{{ displayText(modelValue.stage_display) }}</el-descriptions-item>
       <el-descriptions-item label="重要等级">{{ displayText(modelValue.importance_level_display) }}</el-descriptions-item>
-      <el-descriptions-item label="落地项目">{{ displayText(modelValue.landing_project) }}</el-descriptions-item>
+      <el-descriptions-item label="状态">{{ displayText(modelValue.status_display) }}</el-descriptions-item>
-      <el-descriptions-item label="对接人">{{ displayText(modelValue.contact_person) }}</el-descriptions-item>
-      <el-descriptions-item label="对接人联系方式">{{ displayText(modelValue.contact_phone) }}</el-descriptions-item>
-      <el-descriptions-item label="经办人">{{ displayText(modelValue.handler) }}</el-descriptions-item>
-      <el-descriptions-item label="备注">{{ displayText(modelValue.remark) }}</el-descriptions-item>
       <el-descriptions-item label="规格型号">{{ displayText(modelValue.spec) }}</el-descriptions-item>
       <el-descriptions-item label="符合标准">{{ displayText(modelValue.standard) }}</el-descriptions-item>
       <el-descriptions-item label="应用场景">{{ displayList(modelValue.application_scene_display) }}</el-descriptions-item>
       <el-descriptions-item label="应用说明">{{ displayText(modelValue.application_desc) }}</el-descriptions-item>
       <el-descriptions-item label="替代材料类型">{{ displayText(modelValue.replace_type_display) }}</el-descriptions-item>
+      <el-descriptions-item label="连接方式">{{ displayText(modelValue.connection_method) }}</el-descriptions-item>
+      <el-descriptions-item label="施工工艺">{{ displayText(modelValue.construction_method) }}</el-descriptions-item>
+      <el-descriptions-item label="限制条件">{{ displayText(modelValue.limit_condition) }}</el-descriptions-item>
       <el-descriptions-item label="竞争优势">{{ displayList(modelValue.advantage_display) }}</el-descriptions-item>
       <el-descriptions-item label="优势说明">{{ displayText(modelValue.advantage_desc) }}</el-descriptions-item>
       <el-descriptions-item label="成本对比">{{ formatPercent(modelValue.cost_compare) }}</el-descriptions-item>
       <el-descriptions-item label="成本说明">{{ displayText(modelValue.cost_desc) }}</el-descriptions-item>
-      <el-descriptions-item label="案例">{{ displayText(modelValue.cases) }}</el-descriptions-item>
-      <el-descriptions-item label="供应商">{{ displayText(modelValue.factory_name) }}</el-descriptions-item>
-      <el-descriptions-item label="品牌">{{ displayText(modelValue.brand_name) }}</el-descriptions-item>
       <el-descriptions-item label="质量等级">{{ formatStarLevel(modelValue.quality_level) }}</el-descriptions-item>
       <el-descriptions-item label="耐久等级">{{ formatStarLevel(modelValue.durability_level) }}</el-descriptions-item>
       <el-descriptions-item label="环保等级">{{ formatStarLevel(modelValue.eco_level) }}</el-descriptions-item>
       <el-descriptions-item label="低碳等级">{{ formatStarLevel(modelValue.carbon_level) }}</el-descriptions-item>
       <el-descriptions-item label="总评分">{{ formatStarLevel(modelValue.score_level) }}</el-descriptions-item>
-      <el-descriptions-item label="连接方式">{{ displayText(modelValue.connection_method) }}</el-descriptions-item>
-      <el-descriptions-item label="施工工艺">{{ displayText(modelValue.construction_method) }}</el-descriptions-item>
-      <el-descriptions-item label="限制条件">{{ displayText(modelValue.limit_condition) }}</el-descriptions-item>
     </el-descriptions>
+
+    <el-descriptions title="品牌与供应商" :column="2" border class="detail-section">
+      <el-descriptions-item label="品牌">{{ displayText(modelValue.brand_name) }}</el-descriptions-item>
+      <el-descriptions-item label="供应商简称">{{ displayText(modelValue.factory_short_name) }}</el-descriptions-item>
+      <el-descriptions-item label="供应商全称">{{ displayText(modelValue.factory_name) }}</el-descriptions-item>
+      <el-descriptions-item label="合作模式">{{ displayText(modelValue.factory_cooperation_mode_display) }}</el-descriptions-item>
+      <el-descriptions-item label="省-市">{{ displayLocation(modelValue) }}</el-descriptions-item>
+      <el-descriptions-item label="对接人">{{ displayText(modelValue.contact_person) }}</el-descriptions-item>
+      <el-descriptions-item label="对接人联系方式">{{ displayText(modelValue.contact_phone) }}</el-descriptions-item>
+    </el-descriptions>
+
+    <el-descriptions title="案例信息" :column="1" border class="detail-section">
+      <el-descriptions-item label="落地项目">{{ displayText(modelValue.landing_project) }}</el-descriptions-item>
+      <el-descriptions-item label="案例">
+        <div style="white-space: pre-wrap;">{{ displayText(modelValue.cases) }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="经办人">{{ displayText(modelValue.handler) }}</el-descriptions-item>
+      <el-descriptions-item label="备注">{{ displayText(modelValue.remark) }}</el-descriptions-item>
+    </el-descriptions>
+
     <div v-if="modelValue.brochure_url" class="brochure">
       <div class="brochure-title">宣传页</div>
       <img :src="modelValue.brochure_url" alt="宣传页" />
@@ -309,6 +322,10 @@ const displayText = (value) => (value === null || value === undefined || value =
 const displayList = (value) => (value?.length ? value.join('、') : '-')
 const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
 const formatStarLevel = (value) => (value ? `${value}星` : '-')
+const displayLocation = (m) => {
+  const parts = [m?.factory_province, m?.factory_city].filter(Boolean)
+  return parts.length ? parts.join('-') : '-'
+}
 
 onMounted(async () => {
   if (props.mode !== 'edit') return
@@ -368,6 +385,10 @@ defineExpose({ validate, clearValidate })
 </script>
 
 <style scoped>
+.detail-section {
+  margin-bottom: 16px;
+}
+
 .upload {
   display: inline-block;
 }