style: 优化布局和交互（Loading/空状态/骨架屏）

2026-04-07 16:51:12 +08:00
parent f0e89695f4
commit 2f06aa9f5f
15 changed files with 2216 additions and 1681 deletions
@@ -15,8 +15,14 @@
      </div>
    </div>

+
    <div class="main-content" v-loading="loading">
-      <el-card class="profile-card" shadow="never" v-if="detail">
+      <!-- 空状态 -->
+      <el-empty v-if="!loading && !detail" description="未找到商品数据" :image-size="160">
+        <el-button type="primary" @click="loadDetail">重新加载</el-button>
+      </el-empty>
+
+      <el-card class="profile-card" shadow="hover" v-if="detail">
        <div class="profile-header">
          <div class="profile-basic">
            <div class="icon-wrapper">
@@ -59,14 +65,16 @@
          <el-descriptions-item label="商品ID">{{ detail.goodId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单ID">{{ detail.orderId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="归属项ID">{{ detail.itemId || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="基础价格">{{ detail.renewPrice ? '¥' + (detail.renewPrice / 100).toFixed(2) : '-' }}</el-descriptions-item>
+          <el-descriptions-item label="基础价格">{{ (detail.basePrice || detail.base_price) ? '¥' + ((detail.basePrice || detail.base_price) / 100).toFixed(2) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatTime(detail.CreatedAt) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatTime(detail.UpdatedAt) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

-      <el-card shadow="never" v-if="detail" style="margin-top:20px">
-        <h3 style="margin:0 0 16px;font-size:16px;font-weight:600;color:#303133">关联信息</h3>
+      <el-card shadow="hover" v-if="detail" class="related-card">
+        <template #header>
+          <span class="card-title">关联信息</span>
+        </template>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="商品名称">{{ detail.good?.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商品Table">{{ detail.good?.table || '-' }}</el-descriptions-item>
@@ -224,28 +232,176 @@ watch(goodsId, (newId, oldId) => {
 </script>

 <style scoped>
-.goods-detail-page { padding: 0; }
-.page-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border-bottom: 1px solid #ebeef5; }
-.header-left { display: flex; align-items: center; gap: 0; }
-.back-btn { font-size: 14px; color: #606266; }
-.back-btn:hover { color: #409eff; }
-.page-title { font-size: 16px; font-weight: 600; color: #303133; }
-.header-right { display: flex; gap: 8px; }
-.main-content { padding: 20px; }
-.profile-card { margin-bottom: 0; }
-.profile-header { display: flex; justify-content: space-between; align-items: flex-start; }
-.profile-basic { display: flex; align-items: center; gap: 20px; }
-.icon-wrapper { width: 80px; height: 80px; border-radius: 12px; background: linear-gradient(135deg, #e8f4fd, #d6eaff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.identity { display: flex; flex-direction: column; gap: 8px; }
-.name-row { display: flex; align-items: center; gap: 10px; }
-.name { font-size: 22px; font-weight: 600; color: #303133; margin: 0; }
-.id-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #909399; flex-wrap: wrap; }
-.id-row .label { color: #909399; }
-.id-row .value { color: #606266; font-weight: 500; }
-.profile-stats { display: flex; gap: 32px; flex-shrink: 0; }
-.stat-item { text-align: center; min-width: 80px; }
-.stat-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
-.stat-value { font-size: 14px; font-weight: 600; color: #303133; }
-.note-value { font-weight: 400; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.selector-row { display: flex; align-items: center; width: 100%; }
+.goods-detail-page {
+  padding: 0;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fff;
+  border-bottom: 1px solid #e1e8ed;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.back-btn {
+  font-size: 14px;
+  color: #606266;
+}
+
+.back-btn:hover {
+  color: #409eff;
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-right {
+  display: flex;
+  gap: 8px;
+}
+
+.main-content {
+  padding: 20px;
+  min-height: 300px;
+}
+
+.profile-card {
+  margin-bottom: 0;
+  border: 1px solid #e1e8ed;
+  border-radius: 8px;
+  transition: box-shadow 0.2s;
+}
+
+.profile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.profile-basic {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.icon-wrapper {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #e8f4fd 0%, #d6eaff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+}
+
+.identity {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.name-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.name {
+  font-size: 22px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+}
+
+.id-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #909399;
+  flex-wrap: wrap;
+}
+
+.id-row .label {
+  color: #909399;
+}
+
+.id-row .value {
+  color: #606266;
+  font-weight: 500;
+}
+
+.profile-stats {
+  display: flex;
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.stat-item {
+  text-align: center;
+  min-width: 80px;
+  padding: 10px 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 6px;
+}
+
+.stat-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.note-value {
+  font-weight: 400;
+  font-size: 13px;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.related-card {
+  margin-top: 20px;
+  border: 1px solid #e1e8ed;
+  border-radius: 8px;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.selector-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.el-descriptions__label) {
+  font-weight: 500;
+  color: #606266;
+}
 </style>