From ef8b004a793db863763dd9325ce205fb2106310c Mon Sep 17 00:00:00 2001
From: longda <longda@example.com>
Date: Fri, 20 Mar 2026 18:26:21 +0800
Subject: [PATCH] =?UTF-8?q?v1.2.2=20=E5=88=97=E8=A1=A8=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=20-=203=E8=A1=8C=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/VERSION              |  7 ++--
 frontend/src/pages/List.jsx | 70 +++++++++++++++++++++++--------------
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/config/VERSION b/config/VERSION
index e1f6aea..8bdea5f 100644
--- a/config/VERSION
+++ b/config/VERSION
@@ -1,5 +1,4 @@
-# 甲辰藏品管理系统 - 版本配置
-VERSION=1.2.1
-VERSION_CODENAME="阶段性稳定版本"
+VERSION=1.2.2
+VERSION_CODENAME="列表优化版本"
 RELEASE_DATE=2026-03-20
-VERSION_NOTES="密码强度验证 - 至少8位需包含大写+小写+数字"
+VERSION_NOTES="藏品列表布局优化 - 3行显示，颜色配置完善"
diff --git a/frontend/src/pages/List.jsx b/frontend/src/pages/List.jsx
index 8168df9..12bb114 100644
--- a/frontend/src/pages/List.jsx
+++ b/frontend/src/pages/List.jsx
@@ -317,6 +317,16 @@ export default function List() {
     return colors[category] || '#64748b'
   }
 
+  const getRarityColor = (rarity) => {
+    const colors = { '通货': '#22c55e', '特色': '#06b6d4', '少见': '#3b82f6', '稀有': '#ec4899', '珍品': '#ef4444', '孤品': '#8b5cf6' }
+    return colors[rarity] || '#64748b'
+  }
+
+  const getPackagingColor = (packaging) => {
+    const colors = { '裸钞': '#22c55e', '单张': '#3b82f6', '标十': '#fbbf24', '标百': '#8b5cf6' }
+    return colors[packaging] || '#64748b'
+  }
+
   const getStatusColor = (status) => {
     const colors = { 
       'in_collection': '#22c55e', 
@@ -350,37 +360,43 @@ export default function List() {
   }
 
   const ListItem = ({ item }) => (
-    <div onClick={() => goDetail(item.id)} style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: '12px', padding: '14px', marginBottom: '10px', cursor: 'pointer' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div style={{ flex: 1 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <div style={{ color: '#fff', fontSize: '15px', fontWeight: '500' }}>{item.code || '-'}</div>
-            {isAdmin && item.owner_name && <div style={{ color: '#60a5fa', fontSize: '11px', padding: '2px 6px', background: 'rgba(96, 165, 250, 0.2)', borderRadius: '4px' }}>👤 {item.owner_name}</div>}
-          </div>
-          <div style={{ color: '#fbbf24', fontSize: '13px', fontFamily: 'monospace', marginTop: '4px' }}>{item.prefixSerial || '-'}</div>
+    <div onClick={() => goDetail(item.id)} style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: '12px', padding: '10px', marginBottom: '8px', cursor: 'pointer' }}>
+      {/* 第1行：编号 + 冠字号 + 包装(蓝色) | 状态 + 持仓类型 + 珍惜度(紫色) */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
+          <span style={{ color: '#fff', fontSize: '13px', fontWeight: '500' }}>{item.code || '-'}</span>
+          <span style={{ color: '#fbbf24', fontSize: '11px', fontFamily: 'monospace' }}>{item.prefixSerial || '-'}</span>
+          {item.packaging && <span style={{ background: getPackagingColor(item.packaging) + '20', color: getPackagingColor(item.packaging), fontSize: '10px', padding: '1px 5px', borderRadius: '3px' }}>{item.packaging}</span>}
         </div>
-        <div style={{ textAlign: 'right' }}>
-          {item.category && <div style={{ color: getCategoryColor(item.category), fontSize: '12px', padding: '3px 10px', background: getCategoryColor(item.category) + '20', borderRadius: '4px', display: 'inline-block', marginBottom: '4px' }}>{getCategoryText(item.category)}</div>}
-          {item.rarity && <div style={{ color: '#8b5cf6', fontSize: '12px', padding: '3px 10px', background: 'rgba(139, 92, 246, 0.2)', borderRadius: '4px', display: 'inline-block', marginBottom: '4px' }}>{item.rarity}</div>}
-          <div style={{ color: getStatusColor(item.status), fontSize: '12px', padding: '3px 10px', background: getStatusColor(item.status) + '20', borderRadius: '4px', display: 'inline-block' }}>{getStatusText(item.status)}</div>
-          {item.gradingScore && <div style={{ color: '#fbbf24', fontSize: '14px', fontWeight: 'bold', marginTop: '6px' }}>{item.gradingScore}</div>}
+        <div style={{ display: 'flex', gap: '3px' }}>
+          {item.status && <span style={{ color: getStatusColor(item.status), fontSize: '9px', padding: '1px 4px', background: getStatusColor(item.status) + '25', borderRadius: '2px' }}>{getStatusText(item.status)}</span>}
+          {item.category && <span style={{ color: getCategoryColor(item.category), fontSize: '9px', padding: '1px 4px', background: getCategoryColor(item.category) + '25', borderRadius: '2px' }}>{getCategoryText(item.category)}</span>}
+          {item.rarity && <span style={{ color: getRarityColor(item.rarity), fontSize: '9px', padding: '1px 4px', background: getRarityColor(item.rarity) + '20', borderRadius: '2px' }}>{item.rarity}</span>}
         </div>
       </div>
-      <div style={{ display: 'flex', gap: '8px', marginTop: '10px', flexWrap: 'wrap' }}>
-        {item.version && <span style={{ background: getVersionColor(item.version).bg, color: getVersionColor(item.version).color, fontSize: '12px', fontWeight: 'bold', padding: '4px 10px', borderRadius: '4px' }}>{item.version}</span>}
-        {item.packaging && <span style={{ background: 'rgba(255,255,255,0.08)', color: '#94a3b8', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>{item.packaging}</span>}
-        {item.isGraded ? <span style={{ background: 'rgba(251, 191, 36, 0.15)', color: '#fbbf24', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>已评级</span> : <span style={{ background: 'rgba(255,255,255,0.08)', color: '#64748b', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>未评级</span>}
-        {item.gradingCompany && <span style={{ background: 'rgba(251, 191, 36, 0.15)', color: '#fbbf24', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>{item.gradingCompany}</span>}
-        {item.threeStar && <span style={{ background: 'rgba(251, 191, 36, 0.15)', color: '#fbbf24', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>三星</span>}
-        {item.specialMark && <span style={{ background: 'rgba(139, 92, 246, 0.15)', color: '#8b5cf6', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>{item.specialMark}</span>}
-        {item.remark && <span style={{ background: 'rgba(100,116,139,0.2)', color: '#94a3b8', fontSize: '11px', padding: '2px 8px', borderRadius: '4px' }}>{item.remark}</span>}
+      {/* 第2行：版本(彩色) + 已评级 + 评级公司 + 评级分数 + 三星 + 特殊标识 | 备注 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '4px', flexWrap: 'wrap', marginBottom: '4px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px', flexWrap: 'wrap' }}>
+          {item.version && <span style={{ background: getVersionColor(item.version).bg, color: getVersionColor(item.version).color, fontSize: '10px', padding: '1px 5px', borderRadius: '3px' }}>{item.version}</span>}
+          {item.isGraded && <span style={{ background: 'rgba(6, 182, 212, 0.15)', color: '#06b6d4', fontSize: '9px', padding: '1px 4px', borderRadius: '2px' }}>已评级</span>}
+          {item.gradingCompany && <span style={{ background: 'rgba(6, 182, 212, 0.15)', color: '#06b6d4', fontSize: '9px', padding: '1px 4px', borderRadius: '2px' }}>{item.gradingCompany.substring(0,4)}</span>}
+          {item.gradingScore && <span style={{ background: 'rgba(249, 115, 22, 0.2)', color: '#f97316', fontSize: '9px', padding: '1px 4px', borderRadius: '2px', fontWeight: 'bold' }}>{item.gradingScore}</span>}
+          {item.threeStar && <span style={{ background: 'rgba(6, 182, 212, 0.15)', color: '#06b6d4', fontSize: '9px', padding: '1px 4px', borderRadius: '2px' }}>三星</span>}
+          {item.specialMark && <span style={{ background: 'rgba(139, 92, 246, 0.15)', color: '#a78bfa', fontSize: '9px', padding: '1px 4px', borderRadius: '2px' }}>{item.specialMark}</span>}
+        </div>
+        {item.remark && <span style={{ background: 'rgba(100,116,139,0.2)', color: '#94a3b8', fontSize: '9px', padding: '1px 4px', borderRadius: '2px', maxWidth: '80px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.remark}</span>}
       </div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
-        {item.costPrice && <span style={{ color: '#94a3b8', fontSize: '12px' }}>成本: <span style={{ color: '#fff' }}>¥{item.costPrice}</span></span>}
-        {item.targetPrice && <span style={{ color: '#94a3b8', fontSize: '12px' }}>目标: <span style={{ color: '#f59e0b' }}>¥{item.targetPrice}</span></span>}
-        {item.goalPrice && <span style={{ color: '#94a3b8', fontSize: '12px' }}>出售: <span style={{ color: '#22c55e' }}>¥{item.goalPrice}</span></span>}
-        {item.repairFee && <span style={{ color: '#94a3b8', fontSize: '12px' }}>修复: <span style={{ color: '#fff' }}>¥{item.repairFee}</span></span>}
-        {item.gradingFee && <span style={{ color: '#94a3b8', fontSize: '12px' }}>评级: <span style={{ color: '#fff' }}>¥{item.gradingFee}</span></span>}
+      {/* 第3行：成本 + 修复 + 评级 | 目标 + 出售 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '10px', color: '#94a3b8', paddingTop: '4px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          {item.costPrice && <span>成本: <span style={{ color: '#e2e8f0' }}>¥{item.costPrice}</span></span>}
+          {item.repairFee && <span>修复: <span style={{ color: '#e2e8f0' }}>¥{item.repairFee}</span></span>}
+          {item.gradingFee && <span>评级: <span style={{ color: '#e2e8f0' }}>¥{item.gradingFee}</span></span>}
+        </div>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          {item.targetPrice && <span>目标: <span style={{ color: '#fbbf24' }}>¥{item.targetPrice}</span></span>}
+          {item.goalPrice && <span>出售: <span style={{ color: '#4ade80' }}>¥{item.goalPrice}</span></span>}
+        </div>
       </div>
     </div>
   )