From dc879f1ef6b80b4129bfd41bc786b877fb7b22f7 Mon Sep 17 00:00:00 2001
From: chenjiale <cjl601523@gmail.com>
Date: Wed, 24 Dec 2025 16:18:07 +0800
Subject: [PATCH] =?UTF-8?q?```=20feat(model):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=8D=A1=E7=89=87=E5=B1=95=E7=A4=BA=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 unitName 和 systemName 字段到 ModelItem 接口
- 新增 getSubtitle 函数用于生成副标题显示机组和系统信息
- 重构 ModelCard 组件的 UI 结构，使用新的语义化类名
- 增加算法、版本、创建时间等标签显示
- 添加创建人、创建时间等元数据信息行
- 实现锁定状态图标显示
- 增加查看详情和进入诊断按钮
- 优化卡片样式和响应式布局
```
---
 src/views/model/list/ModelCard.vue | 339 ++++++++++++++++++++---------
 src/views/model/list/data.tsx      |   2 +
 2 files changed, 234 insertions(+), 107 deletions(-)

diff --git a/src/views/model/list/ModelCard.vue b/src/views/model/list/ModelCard.vue
index 16aa61c..fd1883e 100644
--- a/src/views/model/list/ModelCard.vue
+++ b/src/views/model/list/ModelCard.vue
@@ -62,6 +62,8 @@ function normalizeCards(modelList: any[] = []): ModelItem[] {
     const card: ModelItem = {
       id: modelCard.id,
       title: modelCard.name,
+      unitName: modelCard.unitName,
+      systemName: modelCard.systemName,
       version: modelCard.version,
       icon: statusIcons[statusIndex],
       value: 1,
@@ -81,6 +83,12 @@ function normalizeCards(modelList: any[] = []): ModelItem[] {
   return cardList
 }
 
+function getSubtitle(item: ModelItem) {
+  const unitText = item.unitName ? `${item.unitName}` : (props.unitId != null ? `${props.unitId}号机组` : '未选择机组')
+  const systemText = item.systemName || (props.systemId != null ? `系统${props.systemId}` : '未选择系统')
+  return `${unitText} · ${systemText}`
+}
+
 async function fetchModelList(queryParams: ModelCardQueryParams, append: boolean) {
   if (listLoading.value)
     return
@@ -196,37 +204,62 @@ onBeforeUnmount(() => {
             :loading="loading || (listLoading && !modelCardList.length)"
             :hoverable="true"
             class="model-card"
-            :style="{ borderLeft: `6px solid ${item.statusColor}` }"
             @click="changeModel(item.id, item.version)"
           >
-            <div class="card-top">
-              <div class="card-title" :title="item.title">
-                {{ item.title }}
+            <div class="model-card__inner">
+              <header class="model-card__header">
+                <div>
+                  <div class="model-card__title" :title="item.title">
+                    {{ item.title }}
+                  </div>
+                  <div class="model-card__subtitle">
+                    {{ getSubtitle(item) }}
+                  </div>
+                </div>
+                <div class="model-card__header-right">
+                  <span class="lock-icon">
+                    <Icon :icon="item.status === '已下装' ? 'ant-design:lock-outlined' : 'ant-design:unlock-outlined'" :size="18" />
+                  </span>
+                </div>
+              </header>
+
+              <div class="model-card__tag-row">
+                <span class="tag-pill tag-pill--blue">{{ item.algorithm || '未知算法' }}</span>
+                <span class="tag-pill tag-pill--green">{{ item.version || 'v-test' }}</span>
+                <span class="tag-pill">{{ item.createTime || '--' }}</span>
               </div>
-              <div class="card-tags">
-                <span class="status-icon" :style="{ color: item.statusColor }">
-                  <Icon :icon="item.icon" :size="20" />
-                </span>
+
+              <div class="model-card__meta-row">
+                <div class="meta-line">
+                  <div class="meta-item">
+                    <span class="meta-label">创建人</span>
+                    <span>{{ item.creator || '未知' }}</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">创建时间</span>
+                    <span>{{ item.createTime || '--' }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="model-card__divider" />
+
+              <div class="model-card__bottom">
+                <div class="deploy-info">
+                  <div class="deploy-info__line">
+                    <span :class="item.status === '已下装' ? 'dot dot--success' : 'dot dot--muted'" />
+                    <span>{{ item.status === '已下装' ? '最近已校验' : '未校验' }}</span>
+                  </div>
+                </div>
+                <div class="model-card__actions">
+                  <button class="btn btn--ghost" @click.stop="changeModel(item.id, item.version)">
+                    查看详情
+                  </button>
+                  <button class="btn btn--primary" @click.stop="changeModel(item.id, item.version)">
+                    进入诊断
+                  </button>
+                </div>
               </div>
-            </div>
-            <div class="card-meta">
-              <span class="meta-item">
-                <Icon icon="ic:baseline-person" :size="16" class="meta-icon" />
-                {{ item.creator || '未知' }}
-              </span>
-              <span class="meta-item">
-                <Icon icon="ant-design:calendar-outlined" :size="16" class="meta-icon" />
-                {{ item.createTime || '--' }}
-              </span>
-            </div>
-            <div class="card-divider" />
-            <div class="card-footer">
-              <span class="algo-pill">
-                {{ item.algorithm || '未知' }}
-              </span>
-              <span class="tag version" :style="{ backgroundColor: item.statusColor, color: '#fff' }">
-                {{ item.version || 'v-test' }}
-              </span>
             </div>
           </Card>
           <template #overlay>
@@ -269,140 +302,227 @@ onBeforeUnmount(() => {
 }
 
 .model-card {
-  padding: 14px 14px 12px;
-  background: linear-gradient(180deg, #fdfdfd 0%, #f7f8fa 100%);
-  border: 1px solid #d0d7de;
-  border-radius: 8px;
-  box-shadow: 0 6px 16px rgb(15 23 42 / 8%);
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  position: relative;
+  width: 100%;
+  border-radius: 20px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 6px 20px rgb(17 24 39 / 8%);
+  overflow: hidden;
+  display: block;
+  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
 }
 
 .model-card:hover {
-  box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
   transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgb(17 24 39 / 16%);
 }
 
-.card-top {
+.icon-card {
   display: flex;
   align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  width: 100%;
+  background-color: #f3f4f6;
+  border: 1px dashed #d1d5db;
+  border-radius: 12px;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.icon-card:hover {
+  background-color: #eef2ff;
+  border-color: #4c7af0;
+}
+
+.model-card__inner {
+  flex: 1;
+  padding: 20px 24px 18px;
+}
+
+.model-card__header {
+  display: flex;
   justify-content: space-between;
-  margin-bottom: 8px;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-.card-title {
-  padding-right: 8px;
-  overflow: hidden;
+.model-card__title {
   font-size: 18px;
   font-weight: 600;
-  line-height: 1.4;
-  color: #1f2937;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-  white-space: nowrap;
+  color: #111827;
+  margin-bottom: 4px;
 }
 
-.card-tags {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
+.model-card__subtitle {
+  font-size: 13px;
+  color: #6b7280;
 }
 
-.tag.version {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  border-radius: 999px;
+.model-card__header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  margin-top: 6px;
 }
 
-.status-icon {
+.lock-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  background-color: rgb(0 0 0 / 6%);
-  border: 1px solid rgb(0 0 0 / 8%);
-  border-radius: 8px;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #9ca3af;
 }
 
-.card-meta {
+.model-card__tag-row {
+  margin-top: 14px;
   display: flex;
   gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.tag-pill {
+  padding: 4px 12px;
+  border-radius: 999px;
   font-size: 12px;
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
+  color: #4b5563;
+}
+
+.tag-pill--blue {
+  background: #eef3ff;
+  border-color: #c7d2fe;
+  color: #2454e6;
+}
+
+.tag-pill--green {
+  background: #e8f7ef;
+  border-color: #b7e4c7;
+  color: #13804c;
+}
+
+.model-card__meta-row {
+  margin-top: 10px;
+  font-size: 13px;
   color: #6b7280;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .meta-item {
-  display: inline-flex;
-  gap: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-line {
+  display: flex;
   align-items: center;
-  min-width: 0;
+  justify-content: space-between;
+  gap: 16px;
 }
 
-.meta-icon {
+.meta-label {
   color: #9ca3af;
+  margin-right: 6px;
 }
 
-.card-footer {
+.model-card__divider {
+  height: 1px;
+  margin: 12px 0 12px;
+  background: linear-gradient(to right, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
+}
+
+.model-card__bottom {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
   gap: 12px;
+}
+
+.deploy-info {
+  font-size: 13px;
+  color: #4b5563;
+}
+
+.deploy-info__line {
+  display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-top: 6px;
+  gap: 6px;
+}
+
+.model-card__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.btn {
+  padding: 6px 16px;
+  border-radius: 999px;
   font-size: 13px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease-out;
+}
+
+.btn--ghost {
+  background: #ffffff;
+  border-color: #e5e7eb;
   color: #4b5563;
+  box-shadow: 0 2px 6px rgb(15 23 42 / 6%);
 }
 
-.card-divider {
-  height: 1px;
-  margin: 4px 0 8px;
-  border-top: 1px dashed #e5e7eb;
+.btn--ghost:hover {
+  background: #f3f4f6;
 }
 
-.footer-text.strong {
-  font-weight: 600;
+.btn--primary {
+  background: #2463f4;
+  border-color: #2463f4;
+  color: #ffffff;
+  box-shadow: 0 6px 14px rgb(37 99 235 / 30%);
 }
 
-.footer-divider {
-  flex: 1;
-  height: 1px;
-  border-top: 1px dashed #e5e7eb;
+.btn--primary:hover {
+  background: #1d4fd8;
+  border-color: #1d4fd8;
 }
 
-.algo-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 10px;
-  font-weight: 700;
-  color: #1d4ed8;
-  letter-spacing: 0.3px;
-  background: #e0e7ff;
-  border: 1px solid #c7d2fe;
-  border-radius: 10px;
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
 }
 
-.icon-card {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 180px;
-  background-color: #f3f4f6;
-  border: 1px dashed #d1d5db;
-  border-radius: 12px;
-  transition: border-color 0.2s ease, background 0.2s ease;
+.dot--success {
+  background: #22c55e;
 }
 
-.icon-card:hover {
-  background-color: #eef2ff;
-  border-color: #4c7af0;
+.dot--muted {
+  background: #d1d5db;
+}
+
+@media (max-width: 640px) {
+  .model-card {
+    width: 100%;
+  }
+
+  .model-card__bottom {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .model-card__actions {
+    align-self: flex-end;
+  }
 }
 
 .load-status {
@@ -419,4 +539,9 @@ onBeforeUnmount(() => {
 .load-more-trigger {
   height: 1px;
 }
+
+:deep(.ant-card-body) {
+  padding: 0;
+  width: 100%;
+}
 </style>
diff --git a/src/views/model/list/data.tsx b/src/views/model/list/data.tsx
index daf638f..67d5299 100644
--- a/src/views/model/list/data.tsx
+++ b/src/views/model/list/data.tsx
@@ -4,6 +4,8 @@ export interface ModelItem {
   id: number
   icon: string
   title: string
+  unitName?: string
+  systemName?: string
   value: number
   total: number
   color: string
-- 
2.30.2