From 0e2239b59f86311fd0400a5f03aabca7ff8d2cd3 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Tue, 17 Mar 2026 09:54:42 +0800
Subject: [PATCH] style(detail): improve detail page layout

---
 frontend/src/styles/base.css          | 38 +++++++++++++++
 frontend/src/views/FactoryDetail.vue  | 45 +++++++++++++-----
 frontend/src/views/MaterialDetail.vue | 66 ++++++++++++++++-----------
 3 files changed, 111 insertions(+), 38 deletions(-)

diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 79a2573..4ae14e9 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -147,3 +147,41 @@ a {
   overflow: auto;
   padding-right: 8px;
 }
+
+.detail-card {
+  padding: 24px;
+}
+
+.detail-descriptions :is(.el-descriptions__table, .el-descriptions__body) {
+  width: 100%;
+}
+
+.detail-descriptions .el-descriptions__cell {
+  vertical-align: top;
+}
+
+.detail-descriptions .el-descriptions__label.el-descriptions__cell {
+  width: 180px;
+  min-width: 180px;
+  white-space: nowrap;
+  color: var(--text-900);
+  font-weight: 600;
+  background: var(--bg-soft);
+}
+
+.detail-descriptions .el-descriptions__content.el-descriptions__cell {
+  color: var(--text-600);
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+@media (max-width: 768px) {
+  .detail-card {
+    padding: 16px;
+  }
+
+  .detail-descriptions .el-descriptions__label.el-descriptions__cell {
+    width: 132px;
+    min-width: 132px;
+  }
+}
diff --git a/frontend/src/views/FactoryDetail.vue b/frontend/src/views/FactoryDetail.vue
index 12b9d1d..771a4bf 100644
--- a/frontend/src/views/FactoryDetail.vue
+++ b/frontend/src/views/FactoryDetail.vue
@@ -4,17 +4,28 @@
       工厂详情
       <el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
     </div>
-    <div class="card" v-if="factory">
-      <el-descriptions :column="2" border>
-        <el-descriptions-item label="工厂全称">{{ factory.factory_name }}</el-descriptions-item>
-        <el-descriptions-item label="品牌">{{ factory.brand }}</el-descriptions-item>
-        <el-descriptions-item label="经销商">{{ factory.dealer_name }}</el-descriptions-item>
-        <el-descriptions-item label="产品分类">{{ factory.product_category }}</el-descriptions-item>
-        <el-descriptions-item label="地区">{{ formatRegion(factory.province, factory.city, factory.district) }}</el-descriptions-item>
-        <el-descriptions-item label="地址">{{ factory.address }}</el-descriptions-item>
-        <el-descriptions-item label="官网">{{ factory.website }}</el-descriptions-item>
-        <el-descriptions-item label="用户账号">{{ (factory.usernames || []).join('、') || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="材料数量">{{ factory.material_count }}</el-descriptions-item>
+    <div class="card detail-card" v-if="factory">
+      <el-descriptions :column="1" border class="detail-descriptions">
+        <el-descriptions-item label="工厂全称">{{ displayText(factory.factory_name) }}</el-descriptions-item>
+        <el-descriptions-item label="品牌">{{ displayText(factory.brand) }}</el-descriptions-item>
+        <el-descriptions-item label="经销商">{{ displayText(factory.dealer_name) }}</el-descriptions-item>
+        <el-descriptions-item label="产品分类">{{ displayText(factory.product_category) }}</el-descriptions-item>
+        <el-descriptions-item label="地区">{{ displayRegion(factory) }}</el-descriptions-item>
+        <el-descriptions-item label="地址">{{ displayText(factory.address) }}</el-descriptions-item>
+        <el-descriptions-item label="官网">
+          <a
+            v-if="factory.website"
+            :href="factory.website"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="website-link"
+          >
+            {{ factory.website }}
+          </a>
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="用户账号">{{ displayList(factory.usernames) }}</el-descriptions-item>
+        <el-descriptions-item label="材料数量">{{ displayText(factory.material_count) }}</el-descriptions-item>
       </el-descriptions>
     </div>
   </div>
@@ -39,6 +50,12 @@ onMounted(loadDetail)
 const goBack = () => {
   router.back()
 }
+
+const displayText = (value) => value || '-'
+
+const displayList = (value) => (value?.length ? value.join('、') : '-')
+
+const displayRegion = (item) => formatRegion(item.province, item.city, item.district) || '-'
 </script>
 
 <style scoped>
@@ -47,5 +64,9 @@ const goBack = () => {
   align-items: center;
   justify-content: space-between;
 }
-</style>
 
+.website-link {
+  color: var(--brand-500);
+  word-break: break-all;
+}
+</style>
diff --git a/frontend/src/views/MaterialDetail.vue b/frontend/src/views/MaterialDetail.vue
index 7a583c0..a46f4e8 100644
--- a/frontend/src/views/MaterialDetail.vue
+++ b/frontend/src/views/MaterialDetail.vue
@@ -1,34 +1,34 @@
-<template>
+<template>
   <div class="page">
     <div class="page-title">
       材料详情
       <el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
     </div>
-    <div class="card" v-if="material">
-      <el-descriptions :column="2" border>
-        <el-descriptions-item label="材料名称">{{ material.name }}</el-descriptions-item>
-        <el-descriptions-item label="专业类别">{{ material.major_category_display }}</el-descriptions-item>
-        <el-descriptions-item label="材料分类">{{ material.material_category }}</el-descriptions-item>
-        <el-descriptions-item label="材料子类">{{ material.material_subcategory }}</el-descriptions-item>
-        <el-descriptions-item label="规格型号">{{ material.spec }}</el-descriptions-item>
-        <el-descriptions-item label="符合标准">{{ material.standard }}</el-descriptions-item>
-        <el-descriptions-item label="应用场景">{{ (material.application_scene_display || []).join('、') }}</el-descriptions-item>
-        <el-descriptions-item label="应用说明">{{ material.application_desc }}</el-descriptions-item>
-        <el-descriptions-item label="替代材料类型">{{ material.replace_type_display }}</el-descriptions-item>
-        <el-descriptions-item label="竞争优势">{{ (material.advantage_display || []).join('、') }}</el-descriptions-item>
-        <el-descriptions-item label="优势说明">{{ material.advantage_desc }}</el-descriptions-item>
-        <el-descriptions-item label="成本对比">{{ material.cost_compare }}</el-descriptions-item>
-        <el-descriptions-item label="成本说明">{{ material.cost_desc }}</el-descriptions-item>
-        <el-descriptions-item label="案例">{{ material.cases }}</el-descriptions-item>
-        <el-descriptions-item label="所属工厂">{{ material.factory_name }}</el-descriptions-item>
-        <el-descriptions-item label="质量等级">{{ material.quality_level }}</el-descriptions-item>
-        <el-descriptions-item label="耐久等级">{{ material.durability_level }}</el-descriptions-item>
-        <el-descriptions-item label="环保等级">{{ material.eco_level }}</el-descriptions-item>
-        <el-descriptions-item label="低碳等级">{{ material.carbon_level }}</el-descriptions-item>
-        <el-descriptions-item label="总评分">{{ material.score_level }}</el-descriptions-item>
-        <el-descriptions-item label="连接方式">{{ material.connection_method }}</el-descriptions-item>
-        <el-descriptions-item label="施工工艺">{{ material.construction_method }}</el-descriptions-item>
-        <el-descriptions-item label="限制条件">{{ material.limit_condition }}</el-descriptions-item>
+    <div class="card detail-card" v-if="material">
+      <el-descriptions :column="1" border class="detail-descriptions">
+        <el-descriptions-item label="材料名称">{{ displayText(material.name) }}</el-descriptions-item>
+        <el-descriptions-item label="专业类别">{{ displayText(material.major_category_display) }}</el-descriptions-item>
+        <el-descriptions-item label="材料分类">{{ displayText(material.material_category) }}</el-descriptions-item>
+        <el-descriptions-item label="材料子类">{{ displayText(material.material_subcategory) }}</el-descriptions-item>
+        <el-descriptions-item label="规格型号">{{ displayText(material.spec) }}</el-descriptions-item>
+        <el-descriptions-item label="符合标准">{{ displayText(material.standard) }}</el-descriptions-item>
+        <el-descriptions-item label="应用场景">{{ displayList(material.application_scene_display) }}</el-descriptions-item>
+        <el-descriptions-item label="应用说明">{{ displayText(material.application_desc) }}</el-descriptions-item>
+        <el-descriptions-item label="替代材料类型">{{ displayText(material.replace_type_display) }}</el-descriptions-item>
+        <el-descriptions-item label="竞争优势">{{ displayList(material.advantage_display) }}</el-descriptions-item>
+        <el-descriptions-item label="优势说明">{{ displayText(material.advantage_desc) }}</el-descriptions-item>
+        <el-descriptions-item label="成本对比">{{ formatPercent(material.cost_compare) }}</el-descriptions-item>
+        <el-descriptions-item label="成本说明">{{ displayText(material.cost_desc) }}</el-descriptions-item>
+        <el-descriptions-item label="案例">{{ displayText(material.cases) }}</el-descriptions-item>
+        <el-descriptions-item label="所属工厂">{{ displayText(material.factory_name) }}</el-descriptions-item>
+        <el-descriptions-item label="质量等级">{{ formatStarLevel(material.quality_level) }}</el-descriptions-item>
+        <el-descriptions-item label="耐久等级">{{ formatStarLevel(material.durability_level) }}</el-descriptions-item>
+        <el-descriptions-item label="环保等级">{{ formatStarLevel(material.eco_level) }}</el-descriptions-item>
+        <el-descriptions-item label="低碳等级">{{ formatStarLevel(material.carbon_level) }}</el-descriptions-item>
+        <el-descriptions-item label="总评分">{{ formatStarLevel(material.score_level) }}</el-descriptions-item>
+        <el-descriptions-item label="连接方式">{{ displayText(material.connection_method) }}</el-descriptions-item>
+        <el-descriptions-item label="施工工艺">{{ displayText(material.construction_method) }}</el-descriptions-item>
+        <el-descriptions-item label="限制条件">{{ displayText(material.limit_condition) }}</el-descriptions-item>
       </el-descriptions>
       <div v-if="material.brochure_url" class="brochure">
         <div class="brochure-title">宣传页</div>
@@ -56,6 +56,14 @@ onMounted(loadDetail)
 const goBack = () => {
   router.back()
 }
+
+const displayText = (value) => value || '-'
+
+const displayList = (value) => (value?.length ? value.join('、') : '-')
+
+const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
+
+const formatStarLevel = (value) => (value ? `${value}星` : '-')
 </script>
 
 <style scoped>
@@ -69,6 +77,12 @@ const goBack = () => {
   margin-top: 20px;
 }
 
+.brochure-title {
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
 .brochure img {
   max-width: 100%;
   border-radius: 8px;