From 315942cfcefc9ffcf94a3343c5ec5a718c71d444 Mon Sep 17 00:00:00 2001
From: becomer <thriving123@126.com>
Date: Wed, 21 Oct 2026 17:17:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=EF=BC=9A=E4=BB=85=20VIP=20?=
 =?UTF-8?q?=E7=94=A8=E9=BB=91=E9=87=91=E5=8D=A1=EF=BC=8C=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=81=A2=E5=A4=8D=E7=8F=8D=E7=8F=A0=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一版误解了需求——把两种身份的会员卡都改成了 VIP 黑金色，
实际应只有 VIP 使用该专属色，普通用户保持原有浅色卡片。

改动：
- 恢复 .member-card.is-vip（黑金 + 金色描边 + 金色文字/图标/光晕）
  与 .member-card.is-free（珍珠白 + 深色文字）双形态
- 模板恢复 :class="isVip ? 'is-vip' : 'is-free'"
- 暗色主题恢复 is-free 的墨绿底（白底在暗色下刺眼）
- 头像外圈与底色按身份区分：VIP 白环 + 半透明白底 + 金棕首字，
  普通用户淡品牌色环 + 浅品牌底 + 品牌绿首字
- 「兑换 CDK」按钮保持金色实底，在两种卡片上都有足够对比

保留上一版正确的文案改动：普通用户显示「开通 VIP 即可不限次数」。

已截图确认两种卡片渲染正确（黑金 / 珍珠白 分明）。
npm run build 与 vue-tsc 均通过。
---
 frondend/src/views/profile/ProfileView.vue | 40 +++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/frondend/src/views/profile/ProfileView.vue b/frondend/src/views/profile/ProfileView.vue
index 5e01d75..e635de7 100644
--- a/frondend/src/views/profile/ProfileView.vue
+++ b/frondend/src/views/profile/ProfileView.vue
@@ -473,14 +473,14 @@ async function handleRedeemInvite() {
          中线（切入比例 50%，与中线差值 0px）。头图的 pb 只影响上方留白，
          不影响对齐（pb-14/pb-16 实测均对齐），故保留 pb-16。 -->
     <div class="relative px-4 -mt-11 rise-in" style="animation-delay: 40ms">
-      <div class="member-card relative overflow-hidden hero-clip rounded-3xl px-4 py-3 shadow-xl">
+      <div class="member-card relative overflow-hidden hero-clip rounded-3xl px-4 py-3 shadow-xl" :class="isVip ? 'is-vip' : 'is-free'">
         <div class="pointer-events-none absolute -right-8 -top-10 w-36 h-36 rounded-full member-card-glow" />
         <div class="relative flex items-center gap-3">
           <!-- 头像（原顶部头图内容整合至此处） -->
           <div class="relative flex-shrink-0">
-            <div class="w-11 h-11 rounded-full overflow-hidden ring-2 ring-white/70 shadow-sm bg-white/30 flex items-center justify-center">
+            <div class="w-11 h-11 rounded-full overflow-hidden ring-2 shadow-sm flex items-center justify-center" :class="isVip ? 'ring-white/70 bg-white/30' : 'ring-brand-100 bg-brand-50'">
               <img v-show="userInfo?.avatar && !avatarFailed" :src="userInfo?.avatar" class="w-full h-full object-cover" alt="头像" @error="avatarFailed = true" />
-              <span v-if="!userInfo?.avatar || avatarFailed" class="text-base font-bold" :class="'text-amber-800'">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
+              <span v-if="!userInfo?.avatar || avatarFailed" class="text-base font-bold" :class="isVip ? 'text-amber-800' : 'text-brand-700'">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
             </div>
             <div v-if="isVip" class="vip-badge absolute -right-1.5 -bottom-1 z-10 whitespace-nowrap">VIP</div>
           </div>
@@ -1008,19 +1008,29 @@ async function handleRedeemInvite() {
   mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
 }
 
-/* 会员卡：统一为 VIP 专属黑金色（普通用户与 VIP 同一套质感，
-   区别只在文案与角标；固定色，亮暗主题下表现一致） */
-.member-card {
+/* 会员卡：VIP 为黑金专属色，普通用户为珍珠白（固定色，亮暗下质感一致） */
+.member-card.is-vip {
   background: linear-gradient(135deg, #2b2418 0%, #1b1710 60%, #2d2516 100%);
   border: 1px solid rgb(246 196 69 / 0.35);
 }
-.member-card .member-title { color: #ffe39a; }
-.member-card .member-sub { color: rgb(255 227 154 / 0.75); }
-.member-card .member-icon {
+.member-card.is-vip .member-title { color: #ffe39a; }
+.member-card.is-vip .member-sub { color: rgb(255 227 154 / 0.75); }
+.member-card.is-vip .member-icon {
   color: #5b3a00;
   background: linear-gradient(135deg, #ffe9a8, #f6c445 55%, #e8a020);
 }
-.member-card .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.35), transparent 70%); }
+.member-card.is-vip .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.35), transparent 70%); }
+.member-card.is-free {
+  background: linear-gradient(135deg, #ffffff 0%, #f7fbf9 100%);
+  border: 1px solid rgb(14 40 34 / 0.06);
+}
+.member-card.is-free .member-title { color: #17221f; }
+.member-card.is-free .member-sub { color: #66756f; }
+.member-card.is-free .member-icon {
+  color: #8a5a00;
+  background: linear-gradient(135deg, #fff1c7, #ffe08a);
+}
+.member-card.is-free .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.22), transparent 70%); }
 
 /* 邀请卡主按钮：固定紫（白字 6:1）。不用 bg-purple-600：暗色色板把它映射为浅紫作文字色，白字会看不清 */
 .invite-btn {
@@ -1145,8 +1155,14 @@ async function handleRedeemInvite() {
 
 <style>
 /* 暗色覆盖：非 scoped（scoped 中 :global(.dark) .x 会编译成仅 .dark 而失效）；html.dark 提高优先级压过 .x[data-v] */
-/* 会员卡暗色：仅微调边框透明度（卡片本身已是黑金，暗色下无需换底色） */
-html.dark .member-card { border-color: rgb(246 196 69 / 0.28); }
+/* 会员卡暗色：VIP 微调金色边框透明度；普通用户在暗色下用墨绿底（原亮色白底在暗色刺眼） */
+html.dark .member-card.is-free {
+  background: linear-gradient(135deg, #1e2c28 0%, #18221f 100%);
+  border-color: rgb(255 255 255 / 0.06);
+}
+html.dark .member-card.is-free .member-title { color: #eaf2ef; }
+html.dark .member-card.is-free .member-sub { color: #98aba4; }
+html.dark .member-card.is-vip { border-color: rgb(246 196 69 / 0.28); }
 html.dark .invite-card {
   background: linear-gradient(135deg, #262040 0%, #211b38 100%);
   border-color: rgb(185 165 255 / 0.16);