feat: 优化 ScrollToTopBtn 组件样式和布局,调整按钮位置和尺寸

This commit is contained in:
jxxghp
2025-04-09 15:22:55 +08:00
parent 22a2bb65c8
commit 561bdf4137
2 changed files with 58 additions and 27 deletions
+13 -15
View File
@@ -47,41 +47,39 @@ onUnmounted(() => {
/* Global Action Button Styles (FAB) */ /* Global Action Button Styles (FAB) */
.global-action-buttons { .global-action-buttons {
position: fixed; position: fixed;
bottom: 30px;
right: 30px;
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
inset-block-end: 30px;
inset-inline-end: 30px;
} }
.global-action-button { .global-action-button {
width: 44px; display: flex;
height: 44px; align-items: center;
background-color: rgba(var(--v-theme-background), 0.8); justify-content: center;
border: 1px solid rgba(var(--v-theme-on-surface), 0.05); border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
border-radius: 50%; border-radius: 50%;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); background-color: rgba(var(--v-theme-background), 0.8);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); block-size: 44px;
display: flex; box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
justify-content: center;
align-items: center;
cursor: pointer;
color: rgb(var(--v-theme-on-surface)); color: rgb(var(--v-theme-on-surface));
cursor: pointer;
inline-size: 44px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
&:hover { &:hover {
background-color: rgba(var(--v-theme-background), 0.95); background-color: rgba(var(--v-theme-background), 0.95);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
color: rgb(var(--v-theme-primary)); color: rgb(var(--v-theme-primary));
transform: translateY(-4px);
} }
svg { svg {
block-size: 20px;
inline-size: 20px;
transition: all 0.3s ease; transition: all 0.3s ease;
width: 20px;
height: 20px;
} }
} }
</style> </style>
+45 -12
View File
@@ -202,9 +202,16 @@ onMounted(() => {
</VCard> </VCard>
</VMenu> </VMenu>
<!-- 名称测试弹窗 --> <!-- 名称测试弹窗 -->
<VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable> <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="35rem" scrollable>
<VCard title="名称识别测试"> <VCard>
<DialogCloseBtn @click="nameTestDialog = false" /> <VCardItem>
<VCardTitle>
<VIcon icon="mdi-text-recognition" class="me-2" />
名称识别测试
</VCardTitle>
<DialogCloseBtn @click="nameTestDialog = false" />
</VCardItem>
<VDivider />
<VCardText> <VCardText>
<NameTestView /> <NameTestView />
</VCardText> </VCardText>
@@ -212,8 +219,14 @@ onMounted(() => {
</VDialog> </VDialog>
<!-- 网络测试弹窗 --> <!-- 网络测试弹窗 -->
<VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable> <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
<VCard title="网络测试"> <VCard>
<DialogCloseBtn @click="netTestDialog = false" /> <VCardItem>
<VCardTitle>
<VIcon icon="mdi-network" class="me-2" />
网速连通性测试
</VCardTitle>
<DialogCloseBtn @click="netTestDialog = false" />
</VCardItem>
<VDivider /> <VDivider />
<VCardText> <VCardText>
<NetTestView /> <NetTestView />
@@ -232,6 +245,7 @@ onMounted(() => {
<DialogCloseBtn @click="loggingDialog = false" /> <DialogCloseBtn @click="loggingDialog = false" />
<VCardItem> <VCardItem>
<VCardTitle class="inline-flex"> <VCardTitle class="inline-flex">
<VIcon icon="mdi-file-document" class="me-2" />
实时日志 实时日志
<a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank"> <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
<div <div
@@ -250,9 +264,16 @@ onMounted(() => {
</VCard> </VCard>
</VDialog> </VDialog>
<!-- 规则测试弹窗 --> <!-- 规则测试弹窗 -->
<VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable> <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="40rem" scrollable>
<VCard title="规则测试"> <VCard>
<DialogCloseBtn @click="ruleTestDialog = false" /> <VCardItem>
<VCardTitle>
<VIcon icon="mdi-filter-cog" class="me-2" />
规则测试
</VCardTitle>
<DialogCloseBtn @click="ruleTestDialog = false" />
</VCardItem>
<VDivider />
<VCardText> <VCardText>
<RuleTestView /> <RuleTestView />
</VCardText> </VCardText>
@@ -260,8 +281,14 @@ onMounted(() => {
</VDialog> </VDialog>
<!-- 系统健康检查弹窗 --> <!-- 系统健康检查弹窗 -->
<VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable> <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
<VCard title="系统健康检查"> <VCard>
<DialogCloseBtn @click="systemTestDialog = false" /> <VCardItem>
<VCardTitle>
<VIcon icon="mdi-cog" class="me-2" />
系统健康检查
</VCardTitle>
<DialogCloseBtn @click="systemTestDialog = false" />
</VCardItem>
<VDivider /> <VDivider />
<VCardText> <VCardText>
<ModuleTestView /> <ModuleTestView />
@@ -276,8 +303,14 @@ onMounted(() => {
scrollable scrollable
:fullscreen="!display.mdAndUp.value" :fullscreen="!display.mdAndUp.value"
> >
<VCard title="消息中心"> <VCard>
<DialogCloseBtn @click="messageDialog = false" /> <VCardItem>
<VCardTitle>
<VIcon icon="mdi-message" class="me-2" />
消息中心
</VCardTitle>
<DialogCloseBtn @click="messageDialog = false" />
</VCardItem>
<VDivider /> <VDivider />
<VCardText ref="chatContainer"> <VCardText ref="chatContainer">
<MessageView @scroll="scrollMessageToEnd" /> <MessageView @scroll="scrollMessageToEnd" />