feat: 添加 PrimeQrcode 组件并更新用户信息界面，优化头像背景色

package.json

@@ -63,6 +63,7 @@
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/material-icon-theme": "^1.2.44",
     "@iconify-json/material-symbols": "^1.2.50",
+    "@iconify-json/prime": "^1.2.4",
     "@iconify-json/solar": "^1.2.5",
     "@iconify-json/tdesign": "^1.2.11",
     "@iconify/vue": "^5.0.0",

pnpm-lock.yaml

@@ -141,6 +141,9 @@ importers:
       '@iconify-json/material-symbols':
         specifier: ^1.2.50
         version: 1.2.50
+      '@iconify-json/prime':
+        specifier: ^1.2.4
+        version: 1.2.4
       '@iconify-json/solar':
         specifier: ^1.2.5
         version: 1.2.5
@@ -1228,6 +1231,9 @@ packages:
   '@iconify-json/material-symbols@1.2.50':
     resolution: {integrity: sha512-71tjHR70h46LHtBFab3fAd2V/wPTO7JMV5lKnRn3IcF303LaFgAlO0BZeTJDcmCv9d0snRZmnoLZAJVD7/eisw==}
 
+  '@iconify-json/prime@1.2.4':
+    resolution: {integrity: sha512-Hi9N6aUXRPEimLGSg7R8zCECj1RkuKwiuolcaKpTY65pp/utY2JqqZVpBT0mYkCZPMGyqLv6hS6IOwa7GWaoEA==}
+
   '@iconify-json/solar@1.2.5':
     resolution: {integrity: sha512-WMAiNwchU8zhfrySww6KQBRIBbsQ6SvgIu2yA+CHGyMima/0KQwT5MXogrZPJGoQF+1Ye3Qj6K+1CiyNn3YkoA==}
 
@@ -6334,6 +6340,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/prime@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/solar@1.2.5':
     dependencies:
       '@iconify/types': 2.0.0

src/theme/variables.css

@@ -22,12 +22,12 @@ html.ion-palette-light {
   --ion-color-tertiary-shade: #5a5a5a;
   --ion-color-tertiary-tint: #757575;
 
-  --ion-color-success: #2dd55b;
+  --ion-color-success: #2c810e;
-  --ion-color-success-rgb: 45, 213, 91;
+	--ion-color-success-rgb: 44,129,14;
-  --ion-color-success-contrast: #000000;
+	--ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
+	--ion-color-success-contrast-rgb: 255,255,255;
-  --ion-color-success-shade: #28bb50;
+	--ion-color-success-shade: #27720c;
-  --ion-color-success-tint: #42d96b;
+	--ion-color-success-tint: #418e26;
 
   --ion-color-warning: #ffc409;
   --ion-color-warning-rgb: 255, 196, 9;
@@ -142,12 +142,12 @@ html.ion-palette-dark {
   --ion-color-tertiary-shade: #bcbcbc;
   --ion-color-tertiary-tint: #dadada;
 
-  --ion-color-success: #2dd55b;
+  --ion-color-success: #2c810e;
-  --ion-color-success-rgb: 45, 213, 91;
+	--ion-color-success-rgb: 44,129,14;
-  --ion-color-success-contrast: #000000;
+	--ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
+	--ion-color-success-contrast-rgb: 255,255,255;
-  --ion-color-success-shade: #28bb50;
+	--ion-color-success-shade: #27720c;
-  --ion-color-success-tint: #42d96b;
+	--ion-color-success-tint: #418e26;
 
   --ion-color-warning: #ffc409;
   --ion-color-warning-rgb: 255, 196, 9;

src/ui/avatar/index.vue

@@ -3,7 +3,7 @@
 <template>
   <ion-avatar v-bind="$attrs">
     <img
-      src="https://api.iconify.design/material-icon-theme:remix-light.svg"
+      src="https://api.iconify.design/material-icon-theme:drizzle.svg"
       alt="Avatar"
     >
   </ion-avatar>
@@ -11,7 +11,7 @@
 
 <style lang='css' scoped>
 ion-avatar {
-  background-color: var(--ion-color-success);
+  background-color: #e7f6e1;
   padding: 10px;
 }
 </style>

src/views/user/components/user-info.vue

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { chevronForwardOutline, copyOutline, qrCodeOutline } from "ionicons/icons";
+import PrimeQrcode from "~icons/prime/qrcode";
 
 const userStore = useUserStore();
 const { userProfile } = storeToRefs(userStore);
@@ -19,7 +20,8 @@ const { userProfile } = storeToRefs(userStore);
       </div>
     </div>
     <div class="link" @click="$router.push('/onchain-address')">
-      <ion-icon :icon="qrCodeOutline" class="qr-code" />
+      <PrimeQrcode class="qr-code" />
+      <ion-icon :icon="chevronForwardOutline" />
     </div>
   </div>
 </template>