qak2019
/
cents
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: compact offline status indicator

This commit is contained in:
openclaw 2026-07-28 19:34:27 +08:00
parent d99ae4c25c
commit c2b147259e
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/App.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue"; import { onBeforeUnmount, onMounted } from "vue";
import { WifiOff } from "@lucide/vue";
import { useAuthStore } from "./stores/auth"; import { useAuthStore } from "./stores/auth";
const auth = useAuthStore(); const auth = useAuthStore();
@ -13,7 +14,13 @@ onBeforeUnmount(() => window.removeEventListener("online", retrySession));
<template> <template>
<RouterView /> <RouterView />
<div v-if="auth.unavailable && auth.user" class="offline-status" role="status"> <div
服务暂不可用，当前显示本地数据 v-if="auth.unavailable && auth.user"
class="offline-status"
role="status"
aria-label="服务暂不可用，当前显示本地数据"
title="服务暂不可用，当前显示本地数据"
>
<WifiOff :size="16" />
</div> </div>
</template> </template>

18
apps/web/src/styles.css
View File

@ -14,19 +14,19 @@
.offline-status { .offline-status {
position: fixed; position: fixed;
top: max(10px, env(safe-area-inset-top)); top: max(8px, env(safe-area-inset-top));
left: 50%; right: 8px;
z-index: 100; z-index: 100;
max-width: calc(100% - 32px); width: 30px;
padding: 7px 12px; height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid #e9c98d; border: 1px solid #e9c98d;
border-radius: 999px; border-radius: 50%;
background: rgba(255, 248, 228, .96); background: rgba(255, 248, 228, .96);
color: #795b19; color: #795b19;
font-size: 11px; box-shadow: 0 2px 8px rgba(74, 57, 18, .12);
line-height: 1.2;
pointer-events: none;
transform: translateX(-50%);
} }
html, html,