feat: 更新用户信息组件,添加复制图标并优化用户 UID 显示样式
This commit is contained in:
@@ -2,6 +2,10 @@
|
|||||||
http://ionicframework.com/docs/theming/ */
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
--ion-font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
|
||||||
|
"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
|
||||||
--ui-input-background: #efefef;
|
--ui-input-background: #efefef;
|
||||||
--ui-input-color: #222222;
|
--ui-input-color: #222222;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import { chevronForwardOutline, qrCodeOutline } from "ionicons/icons";
|
import { chevronForwardOutline, copyOutline, qrCodeOutline } from "ionicons/icons";
|
||||||
|
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
</script>
|
</script>
|
||||||
@@ -15,7 +15,7 @@ const { user } = useAuth();
|
|||||||
{{ user?.email }}
|
{{ user?.email }}
|
||||||
</div>
|
</div>
|
||||||
<div class="user-uid">
|
<div class="user-uid">
|
||||||
uid: xxxxxxxx
|
uid: xxxxxxxx <ion-icon :icon="copyOutline" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,6 +45,9 @@ const { user } = useAuth();
|
|||||||
.user-uid {
|
.user-uid {
|
||||||
color: var(--ion-text-secondary);
|
color: var(--ion-text-secondary);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
.link {
|
.link {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,16 +1,31 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
|
||||||
import UserInfo from "./components/user-info.vue";
|
import UserInfo from "./components/user-info.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<IonPage>
|
<IonPage>
|
||||||
<IonHeader>
|
<ion-toolbar class="toolbar">
|
||||||
<IonToolbar>
|
<div slot="end">
|
||||||
<IonTitle>User</IonTitle>
|
<ion-button fill="clear" color="dark">
|
||||||
</IonToolbar>
|
<ion-icon slot="icon-only" :icon="scanOutline" />
|
||||||
</IonHeader>
|
</ion-button>
|
||||||
|
<ion-button fill="clear" color="dark">
|
||||||
|
<ion-icon slot="icon-only" :icon="notificationsOutline" />
|
||||||
|
</ion-button>
|
||||||
|
<ion-button fill="clear" color="dark">
|
||||||
|
<ion-icon slot="icon-only" :icon="settingsOutline" />
|
||||||
|
</ion-button>
|
||||||
|
</div>
|
||||||
|
</ion-toolbar>
|
||||||
<IonContent :fullscreen="true" class="ion-padding">
|
<IonContent :fullscreen="true" class="ion-padding">
|
||||||
<UserInfo />
|
<UserInfo />
|
||||||
</IonContent>
|
</IonContent>
|
||||||
</IonPage>
|
</IonPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.toolbar {
|
||||||
|
--background: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user