fix: 一些基本功能

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue

@@ -11,8 +11,11 @@ import {
   VbenIcon,
 } from '@vben-core/shadcn-ui';
 
+import { desensitize } from '../../../../../../../apps/web-antd/src/util/tool';
+
 interface Props {
   items: AnalysisOverviewItem[];
+  myCard: any;
 }
 
 defineOptions({
@@ -26,6 +29,25 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <Card v-if="myCard" class="bank-card w-full" title="我的银行卡">
+      <CardHeader>
+        <CardTitle class="text-xl">{{ myCard?.bank_name }}</CardTitle>
+      </CardHeader>
+
+      <CardContent class="card-content flex items-center justify-between">
+        <span class="card-number">
+          {{ desensitize(myCard?.bank_card, 'bankCard') }}
+        </span>
+        <VbenIcon
+          class="credit-card-icon size-8 flex-shrink-0"
+          icon="fluent-emoji-flat:credit-card"
+        />
+      </CardContent>
+      <CardFooter class="card-footer justify-between">
+        <span>{{ myCard?.bank_user_name }}</span>
+        <span>{{ myCard?.bank_account_type_txt }}</span>
+      </CardFooter>
+    </Card>
     <template v-for="item in items" :key="item.title">
       <Card :title="item.title" class="w-full">
         <CardHeader>
@@ -34,8 +56,9 @@ withDefaults(defineProps<Props>(), {
 
         <CardContent class="flex items-center justify-between">
           <VbenCountToAnimator
+            :decimals="3"
             :end-val="item.value"
-            :start-val="1"
+            :start-val="0"
             class="text-xl"
             prefix=""
           />
@@ -44,8 +67,9 @@ withDefaults(defineProps<Props>(), {
         <CardFooter class="justify-between">
           <span>{{ item.totalTitle }}</span>
           <VbenCountToAnimator
+            :decimals="3"
             :end-val="item.totalValue"
-            :start-val="1"
+            :start-val="0"
             prefix=""
           />
         </CardFooter>
@@ -53,3 +77,71 @@ withDefaults(defineProps<Props>(), {
     </template>
   </div>
 </template>
+
+<style scoped>
+.bank-card {
+  padding: 20px;
+  color: white;
+  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
+  transition: transform 0.2s ease-in-out;
+}
+
+.dark .bank-card {
+  padding: 20px;
+  color: #cd853f; /* 白色文字 */
+  background: linear-gradient(
+    135deg,
+    #3f3f3f 0%,
+    #1a1a1a 100%
+  ); /* 深色渐变背景 */
+
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgb(0 0 0 / 60%); /* 更深的阴影 */
+  transition: transform 0.2s ease-in-out;
+}
+
+.bank-card:hover {
+  transform: translateY(-5px);
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: rgb(255 255 255 / 10%);
+  border-radius: 8px;
+}
+
+.card-number {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji' !important;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+
+.credit-card-icon {
+  font-size: 24px;
+}
+</style>