Jafeng/AI-Bill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:优化页面

Browse Source
This commit is contained in:
Jafeng
2025-11-12 16:04:50 +08:00
parent 34cb51e037
commit f5d241a759
5 changed files with 96 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/frontend/src/App.vue
View File

@@ -10,7 +10,10 @@ const showAppShell = computed(() => !route.path.startsWith('/auth'));
<template>
<div class="min-h-screen bg-gray-100 text-gray-900">
<div class="max-w-sm mx-auto min-h-screen relative pb-24 w-full">
<div
class="max-w-sm mx-auto min-h-screen relative w-full"
:class="showAppShell ? 'pb-24' : 'pb-0'"
>
<RouterView />
<QuickAddButton v-if="showAppShell" />
</div>

21
apps/frontend/src/features/auth/pages/LoginPage.vue
View File

@@ -8,10 +8,18 @@ const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const REMEMBER_KEY = 'ai-bill/remember-email';
const form = reactive({
email: 'user@example.com',
password: 'Password123!'
email: '',
password: ''
});
const remember = ref(true);
// 读取记住的邮箱
if (typeof window !== 'undefined') {
const saved = localStorage.getItem(REMEMBER_KEY);
if (saved) form.email = saved;
}
const errorMessage = ref('');
const successMessage = ref('');
@@ -28,6 +36,11 @@ const submit = async () => {
try {
const { data } = await apiClient.post('/auth/login', form);
authStore.setSession(data.tokens, data.user);
if (remember.value && typeof window !== 'undefined') {
localStorage.setItem(REMEMBER_KEY, form.email);
} else if (typeof window !== 'undefined') {
localStorage.removeItem(REMEMBER_KEY);
}
successMessage.value = '登录成功，正在跳转...';
await router.replace(redirectTarget.value);
} catch (error: any) {
@@ -71,6 +84,10 @@ const enterDemoMode = () => {
密码
<input v-model="form.password" type="password" class="px-4 py-3 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-indigo-500" />
</label>
<label class="flex items-center space-x-2 text-xs text-gray-600">
<input v-model="remember" type="checkbox" class="w-4 h-4 rounded border-gray-300" />
<span>记住账号</span>
</label>
<p v-if="errorMessage" class="text-sm text-red-500">{{ errorMessage }}</p>
<p v-if="successMessage" class="text-sm text-emerald-500">{{ successMessage }}</p>
<button

4
apps/frontend/src/features/transactions/pages/TransactionsPage.vue
View File

@@ -196,10 +196,10 @@ const refreshTransactions = async () => {
<div
v-if="showSheet"
class="fixed inset-0 bg-black/40 flex items-end justify-center"
class="fixed inset-0 z-50 bg-black/40 flex items-end justify-center"
@click.self="showSheet = false"
>
<div class="w-full max-w-sm bg-white rounded-t-3xl p-6 space-y-4">
<div class="w-full max-w-sm bg-white rounded-t-3xl p-6 space-y-4 pb-8">
<div class="flex justify-between items-center">
<h2 class="text-lg font-semibold text-gray-900">快速记一笔</h2>
<button @click="showSheet = false">

13
apps/frontend/src/lib/api/client.ts
View File

@@ -25,11 +25,22 @@ apiClient.interceptors.request.use((config) => {
apiClient.interceptors.response.use(
(response) => response,
(error) => {
async (error) => {
if (error.response) {
console.error('API error', error.response.status, error.response.data);
if (error.response.status === 401) {
const authStore = useAuthStore();
// 避免刷新递归：标记本次请求是否已重试
const original = error.config as any;
if (!original._retry) {
original._retry = true;
const ok = await authStore.refresh();
if (ok && authStore.accessToken) {
original.headers = original.headers || {};
original.headers.Authorization = `Bearer ${authStore.accessToken}`;
return apiClient(original);
}
}
authStore.clearSession();
const current = router.currentRoute.value;
if (!current.path.startsWith('/auth')) {

62
apps/frontend/src/stores/auth.ts
View File

@@ -17,6 +17,8 @@ interface AuthState {
accessToken?: string;
refreshToken?: string;
profile?: UserProfile;
expiresIn?: number; // epoch seconds
refreshExpiresIn?: number; // epoch seconds
}
export const useAuthStore = defineStore('auth', {
@@ -27,11 +29,16 @@ export const useAuthStore = defineStore('auth', {
isAuthenticated: (state) => state.status === 'authenticated'
},
actions: {
setSession(tokens: { accessToken: string; refreshToken: string }, profile: UserProfile) {
setSession(
tokens: { accessToken: string; refreshToken: string; expiresIn?: number; refreshExpiresIn?: number },
profile: UserProfile
) {
this.status = 'authenticated';
this.accessToken = tokens.accessToken;
this.refreshToken = tokens.refreshToken;
this.profile = profile;
this.expiresIn = tokens.expiresIn;
this.refreshExpiresIn = tokens.refreshExpiresIn;
if (typeof window !== 'undefined') {
localStorage.setItem(
STORAGE_KEY,
@@ -39,20 +46,59 @@ export const useAuthStore = defineStore('auth', {
status: 'authenticated',
accessToken: tokens.accessToken,
refreshToken: tokens.refreshToken,
profile
profile,
expiresIn: tokens.expiresIn,
refreshExpiresIn: tokens.refreshExpiresIn
})
);
}
this.scheduleRefresh();
},
clearSession() {
this.status = 'guest';
this.accessToken = undefined;
this.refreshToken = undefined;
this.profile = undefined;
this.expiresIn = undefined;
this.refreshExpiresIn = undefined;
if (typeof window !== 'undefined') {
localStorage.removeItem(STORAGE_KEY);
}
},
async refresh() {
if (!this.refreshToken) return false;
try {
const res = await fetch((import.meta as any).env.VITE_API_BASE_URL + '/auth/refresh', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refreshToken: this.refreshToken })
});
if (!res.ok) throw new Error('refresh failed');
const data = await res.json();
this.setSession(
{
accessToken: data.tokens.accessToken,
refreshToken: data.tokens.refreshToken,
expiresIn: data.tokens.expiresIn,
refreshExpiresIn: data.tokens.refreshExpiresIn
},
data.user
);
return true;
} catch (e) {
this.clearSession();
return false;
}
},
scheduleRefresh() {
if (!this.expiresIn) return;
const nowSec = Math.floor(Date.now() / 1000);
const secondsLeft = this.expiresIn - nowSec;
const refreshInMs = Math.max((secondsLeft - 60) * 1000, 5_000); // 提前 60 秒刷新
setTimeout(() => {
void this.refresh();
}, refreshInMs);
},
initialize() {
if (typeof window === 'undefined') {
return;
@@ -62,12 +108,22 @@ export const useAuthStore = defineStore('auth', {
return;
}
try {
const stored = JSON.parse(raw) as { status: AuthStatus; accessToken: string; refreshToken: string; profile: UserProfile };
const stored = JSON.parse(raw) as {
status: AuthStatus;
accessToken: string;
refreshToken: string;
profile: UserProfile;
expiresIn?: number;
refreshExpiresIn?: number;
};
if (stored.status === 'authenticated' && stored.accessToken && stored.refreshToken && stored.profile) {
this.status = stored.status;
this.accessToken = stored.accessToken;
this.refreshToken = stored.refreshToken;
this.profile = stored.profile;
this.expiresIn = stored.expiresIn;
this.refreshExpiresIn = stored.refreshExpiresIn;
this.scheduleRefresh();
}
} catch (error) {
console.warn('Failed to restore auth session', error);