From e589af9bc02983f352220deb250b821202da36d9 Mon Sep 17 00:00:00 2001
From: jackyu66git <jackyu666@icloud.com>
Date: Wed, 5 Aug 2026 15:01:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A1=A3=E6=A1=88?=
 =?UTF-8?q?=E6=9D=A1=E6=94=B9=E4=B8=BA=E8=87=AA=E5=B7=B1/=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0/=E5=88=97=E8=A1=A8=E4=B8=89=E5=88=86=E5=8C=BA?=
 =?UTF-8?q?=EF=BC=8C=E5=AF=B9=E9=BD=90=E6=B5=8B=E6=B5=8B=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/user-h5/src/pages/HomePage.vue | 97 ++++++++++++++++-------------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/apps/user-h5/src/pages/HomePage.vue b/apps/user-h5/src/pages/HomePage.vue
index 1ad72c2..e9a4414 100644
--- a/apps/user-h5/src/pages/HomePage.vue
+++ b/apps/user-h5/src/pages/HomePage.vue
@@ -43,20 +43,23 @@
       </div>
     </header>
 
-    <!-- 2 建档条（对标测测档案条） -->
-    <router-link to="/portrait" class="archive reveal" style="--d: 40ms">
-      <span class="av" aria-hidden="true">
-        <BrandLogo size="card" class="av-logo" />
-      </span>
-      <span class="archive-body">
+    <!-- 2 档案条：头像 · 添加档案 · 列表 -->
+    <div class="archive reveal" style="--d: 40ms">
+      <router-link to="/portrait" class="av-self" aria-label="自己的档案">
+        <span class="av" aria-hidden="true">
+          <BrandLogo size="card" class="av-logo" />
+        </span>
+        <span class="av-name">自己</span>
+      </router-link>
+      <button type="button" class="av-add" aria-label="添加档案" @click="goPlus('add')">
         <span class="plus-dot" aria-hidden="true">+</span>
-        <span class="archive-text">输入生日，开始愈心解码</span>
-      </span>
-      <span class="archive-tail" aria-hidden="true">
-        <span class="list-ico" />
-        <span class="chev">›</span>
-      </span>
-    </router-link>
+        <span class="av-name">添加</span>
+      </button>
+      <router-link to="/profile" class="archive-tail" aria-label="档案列表">
+        <span class="list-ico" aria-hidden="true" />
+        <span class="chev" aria-hidden="true">›</span>
+      </router-link>
+    </div>
 
     <!-- 3 自己卡：左心情大分 + 右五维竖柱 -->
     <section class="self-card reveal" style="--d: 80ms" @click="router.push('/portrait')">
@@ -554,14 +557,14 @@ function trackGrid(label: string) {
   text-overflow: ellipsis;
 }
 
-/* ── 建档条 ── */
+/* ── 档案条：头像旁 + = 添加档案 ── */
 .archive {
   margin: 12px 16px 0;
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   padding: 10px 12px;
   border-radius: var(--radius-xl);
   background: rgba(255, 255, 255, 0.88);
@@ -569,12 +572,23 @@ function trackGrid(label: string) {
   box-shadow: 0 6px 20px rgba(229, 77, 66, 0.08);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  transition: transform var(--duration-fast) ease;
 }
-.archive:active { transform: scale(0.985); }
+.av-self,
+.av-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  flex-shrink: 0;
+}
+.av-self:active,
+.av-add:active { transform: scale(0.94); }
 .av {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   background: linear-gradient(145deg, #ffe8e0, #ffd0c4);
   display: flex;
@@ -583,46 +597,41 @@ function trackGrid(label: string) {
   overflow: hidden;
   flex-shrink: 0;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  border: 2px solid rgba(229, 77, 66, 0.35);
 }
 .av-logo {
   width: 22px !important;
   height: auto !important;
   max-height: none !important;
 }
-.archive-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.plus-dot {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #ff8a7a, var(--color-primary));
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-  text-align: center;
-  flex-shrink: 0;
-  box-shadow: 0 3px 8px rgba(229, 77, 66, 0.28);
-}
-.archive-text {
-  font-size: 13px;
+.av-name {
+  font-size: 11px;
   font-weight: 600;
   color: #8a4a3a;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1;
+}
+.plus-dot {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 236, 230, 0.95);
+  border: 1.5px dashed rgba(229, 77, 66, 0.35);
+  color: var(--color-primary);
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 37px;
+  text-align: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 .archive-tail {
+  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
   color: #c4a090;
   flex-shrink: 0;
+  padding: 8px 4px;
 }
 .list-ico {
   width: 14px;