feat: 更新 '@capp/eden' 依赖至 0.0.14，优化资产中心页面钱包展示样式和信息

pnpm-lock.yaml

@@ -52,8 +52,8 @@ catalogs:
       specifier: 8.0.0
       version: 8.0.0
     '@capp/eden':
-      specifier: http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz
+      specifier: http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz
-      version: 0.0.12
+      version: 0.0.14
     '@cloudflare/workers-types':
       specifier: ^4.20260113.0
       version: 4.20260116.0
@@ -298,7 +298,7 @@ importers:
         version: 8.0.0(@capacitor/core@8.0.0)
       '@capp/eden':
         specifier: 'catalog:'
-        version: http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
+        version: http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
       '@elysiajs/eden':
         specifier: 'catalog:'
         version: 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
@@ -1182,9 +1182,9 @@ packages:
   '@capacitor/synapse@1.0.4':
     resolution: {integrity: sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz':
-    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz}
+    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz}
-    version: 0.0.12
+    version: 0.0.14
     peerDependencies:
       '@elysiajs/eden': ^1.4.6
 
@@ -6903,7 +6903,7 @@ snapshots:
 
   '@capacitor/synapse@1.0.4': {}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
 

pnpm-workspace.yaml

@@ -18,7 +18,7 @@ catalog:
   '@capacitor/keyboard': 8.0.0
   '@capacitor/share': ^8.0.0
   '@capacitor/status-bar': 8.0.0
-  '@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.12.tgz
+  '@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.14.tgz
   '@cloudflare/workers-types': ^4.20260113.0
   '@elysiajs/eden': ^1.4.6
   '@faker-js/faker': ^10.2.0

src/views/asset_center/index.vue

@@ -70,23 +70,52 @@ function handleAction(actionId: string) {
             </div>
           </div>
           <empty v-if="wallets.length === 0" class="my-10" />
-          <div v-else class="flex flex-col gap-4">
+          <div v-else class="wallet-grid">
             <div
               v-for="wallet in wallets"
               :key="wallet.id"
-              class="card rounded-2xl overflow-hidden shadow-sm p-5"
+              class="wallet-card"
             >
-              <div class="flex items-center justify-between">
+              <!-- 卡片头部 -->
-                <div class="flex-1">
+              <div class="wallet-header">
-                  <div class="text-sm text-[#666] mb-1 flex items-center gap-2 font-bold">
+                <div class="wallet-icon-wrapper">
-                    <ion-icon :icon="cardOutline" class="text-xl text-primary" />
+                  <ion-icon :icon="cardOutline" class="wallet-icon" />
+                </div>
+                <div class="wallet-title">
+                  <div class="wallet-name">
                     {{ wallet.walletType.name }}
                   </div>
-                  <div class="text-2xl font-bold text-[#1a1a1a]">
+                  <div class="wallet-code">
-                    ¥ {{ formatAmount(wallet.available) }}
+                    {{ wallet.walletType.code }}
                   </div>
                 </div>
               </div>
+
+              <!-- 余额信息 -->
+              <div class="balance-section">
+                <div class="balance-label">
+                  可用余额
+                </div>
+                <div class="balance-amount">
+                  <span class="currency">¥</span>
+                  <span class="amount">{{ formatAmount(wallet.available) }}</span>
+                </div>
+              </div>
+
+              <!-- 额外信息 -->
+              <div class="wallet-footer">
+                <div class="footer-item">
+                  <span class="footer-label">冻结：</span>
+                  <span class="footer-value">¥{{ formatAmount(wallet.frozen || 0) }}</span>
+                </div>
+                <div class="footer-item">
+                  <span class="footer-label">总额：</span>
+                  <span class="footer-value">¥{{ formatAmount(wallet.available || 0) }}</span>
+                </div>
+              </div>
+
+              <!-- 装饰元素 -->
+              <div class="card-decoration" />
             </div>
           </div>
         </section>
@@ -101,7 +130,147 @@ function handleAction(actionId: string) {
   align-items: center;
   justify-content: center;
 }
-.card {
+
-  /* background: linear-gradient(45deg, #ffffff, #ffdbdb 100%); */
+.wallet-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.wallet-card {
+  position: relative;
+  background: linear-gradient(135deg, #ffffff 0%, #fff9f9 100%);
+  border-radius: 12px;
+  padding: 14px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(196, 30, 58, 0.08);
+}
+
+.wallet-card:active {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.wallet-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.wallet-icon-wrapper {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.25);
+}
+
+.wallet-icon {
+  font-size: 20px;
+  color: white;
+}
+
+.wallet-title {
+  flex: 1;
+}
+
+.wallet-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 1px;
+  letter-spacing: 0.2px;
+}
+
+.wallet-code {
+  font-size: 11px;
+  color: #999;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.balance-section {
+  margin-bottom: 10px;
+  padding: 10px 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.balance-label {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.balance-amount {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+}
+
+.currency {
+  font-size: 16px;
+  font-weight: 700;
+  color: #c41e3a;
+}
+
+.amount {
+  font-size: 24px;
+  font-weight: 800;
+  color: #c41e3a;
+  letter-spacing: 0.3px;
+  line-height: 1;
+}
+
+.wallet-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-item {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.footer-label {
+  font-size: 11px;
+  color: #999;
+  font-weight: 500;
+}
+
+.footer-value {
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+}
+
+.card-decoration {
+  position: absolute;
+  right: -20px;
+  bottom: -20px;
+  width: 80px;
+  height: 80px;
+  background: radial-gradient(circle, rgba(196, 30, 58, 0.05) 0%, transparent 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+/* 为不同的钱包添加不同的装饰颜色 */
+.wallet-card:nth-child(2) .card-decoration {
+  background: radial-gradient(circle, rgba(255, 140, 0, 0.05) 0%, transparent 70%);
+}
+
+.wallet-card:nth-child(3) .card-decoration {
+  background: radial-gradient(circle, rgba(30, 136, 229, 0.05) 0%, transparent 70%);
 }
 </style>