feat(MainView): 优化用户信息显示内容和布局

src/views/MainView.vue

@@ -19,12 +19,25 @@
                     </el-breadcrumb-item>
                 </el-breadcrumb>
                 <div class="grow"></div>
-                <ElAlert type="success" class="!w-auto !mr-8 invisible md:visible" v-if="user.roles.includes('user')">
-                    费率: {{ user.rate === '1.00' ? '-' : user.rate }}, 已消费: {{ user.send }}, 余额:
-                    {{ user.balance }}
+                <ElAlert
+                    type="success"
+                    class="!w-auto !mr-8 invisible md:visible"
+                    :closable="false"
+                    v-if="user.roles.includes('user')"
+                >
+                    <span>费率: {{ user.rate === '1.00' ? '-' : user.rate }},</span>
+                    <span> 已消费: {{ user.send }},</span>
+                    <span> 余额: {{ user.balance }},</span>
+                    <span> 筛号数量: {{ user.screenBalance }}</span>
                 </ElAlert>
-                <ElAlert type="success" class="!w-auto !mr-8 invisible md:visible" v-if="user.roles.includes('api')">
-                    费率: {{ user.rate === '1.00' ? '-' : user.rate }}, 余额: {{ user.balance }}
+                <ElAlert
+                    type="success"
+                    class="!w-auto !mr-8 invisible md:visible"
+                    :closable="false"
+                    v-if="user.roles.includes('api')"
+                >
+                    <span>费率: {{ user.rate === '1.00' ? '-' : user.rate }},</span>
+                    <span> 余额: {{ user.balance }}</span>
                 </ElAlert>
                 <DarkSwitch class="mr-4" />
                 <el-dropdown @command="onCommand">