Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增核心 API 客户端、认证服务（含令牌刷新和 GitHub OAuth）、图片管理功能及相关 UI 组件和测试。

Browse Source
This commit is contained in:
admin
2026-01-26 09:24:04 +08:00
parent 3c39437af6
commit a4769bc610
8 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/transaction/ImageAttachment/ImageAttachment.tsx
View File

@@ -35,7 +35,7 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
const handleAddClick = () => {
if (disabled) return;
// Check if we can add more images
const check = canAddMoreImages(images.length);
if (!check.canAdd) {
@@ -105,11 +105,11 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
onClick={() => handleImageClick(index)}
>
<img
src={`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1'}/images/${image.id}`}
src={`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1'}/images/${image.id}`}
alt={image.fileName}
className="image-attachment__thumbnail"
/>
{/* Delete button overlay */}
{!disabled && (
<button
@@ -143,7 +143,7 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
<span className="image-attachment__count">
{images.length} / {IMAGE_CONSTRAINTS.maxImages}
</span>
{isApproachingLimit && (
<span className="image-attachment__warning">
<Icon icon="mdi:alert" width="16" />

2
src/components/transaction/ImagePreview/ImagePreview.tsx
View File

@@ -152,7 +152,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
}
const currentImage = images[currentIndex];
const imageUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1'}/images/${currentImage.id}`;
const imageUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1'}/images/${currentImage.id}`;
return (
<div

2
src/hooks/useAutoTokenRefresh.ts
View File

@@ -8,7 +8,7 @@ import { useEffect, useRef, useCallback } from 'react';
import { getAccessToken, getRefreshToken, setTokens, clearTokens } from '../services/authService';
import type { TokenPair } from '../services/authService';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1';
// Refresh token 5 minutes before expiration
const REFRESH_BUFFER_MS = 5 * 60 * 1000;

2
src/services/api.ts
View File

@@ -4,7 +4,7 @@
* Validates: Requirements 12.3, 12.4
*/
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1';
// Token storage keys
const ACCESS_TOKEN_KEY = 'access_token';

2
src/services/authService.ts
View File

@@ -134,7 +134,7 @@ export function logout(): void {
* Validates: Requirements 13.1
*/
export function getGitHubLoginUrl(state?: string): string {
const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1';
const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1';
const url = new URL(`${baseUrl}/auth/github`);
if (state) {
url.searchParams.append('state', state);

22
src/services/imageService.test.ts
View File

@@ -224,14 +224,14 @@ describe('imageService', () => {
it('should use API base URL from environment or default', () => {
const url = getImageUrl(456);
expect(url).toMatch(/^http:\/\/localhost:8080\/api\/v1\/images\/456$/);
expect(url).toMatch(/^http:\/\/localhost:2612\/api\/v1\/images\/456$/);
});
});
describe('API calls', () => {
beforeEach(() => {
// Mock fetch
global.fetch = vi.fn();
globalThis.fetch = vi.fn();
// Mock localStorage
Storage.prototype.getItem = vi.fn(() => 'mock-token');
});
@@ -254,7 +254,7 @@ describe('imageService', () => {
},
};
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: true,
json: async () => mockResponse,
});
@@ -265,7 +265,7 @@ describe('imageService', () => {
// Mock compressImage to return the file as-is (high quality)
const result = await uploadImage(123, file, 'high');
expect(global.fetch).toHaveBeenCalledWith(
expect(globalThis.fetch).toHaveBeenCalledWith(
expect.stringContaining('/transactions/123/images?compression=high'),
expect.objectContaining({
method: 'POST',
@@ -288,7 +288,7 @@ describe('imageService', () => {
});
it('should throw error when upload fails', async () => {
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: false,
status: 400,
json: async () => ({ error: 'Upload failed' }),
@@ -324,14 +324,14 @@ describe('imageService', () => {
},
];
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: true,
json: async () => ({ data: mockImages }),
});
const result = await getTransactionImages(123);
expect(global.fetch).toHaveBeenCalledWith(
expect(globalThis.fetch).toHaveBeenCalledWith(
expect.stringContaining('/transactions/123/images'),
expect.objectContaining({
method: 'GET',
@@ -345,7 +345,7 @@ describe('imageService', () => {
});
it('should throw error when fetch fails', async () => {
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: false,
status: 404,
json: async () => ({ error: 'Transaction not found' }),
@@ -357,14 +357,14 @@ describe('imageService', () => {
describe('deleteImage', () => {
it('should delete image successfully', async () => {
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: true,
json: async () => ({}),
});
await deleteImage(123, 456);
expect(global.fetch).toHaveBeenCalledWith(
expect(globalThis.fetch).toHaveBeenCalledWith(
expect.stringContaining('/transactions/123/images/456'),
expect.objectContaining({
method: 'DELETE',
@@ -376,7 +376,7 @@ describe('imageService', () => {
});
it('should throw error when delete fails', async () => {
(global.fetch as any).mockResolvedValueOnce({
(globalThis.fetch as any).mockResolvedValueOnce({
ok: false,
status: 404,
json: async () => ({ error: 'Image not found' }),

2
src/services/imageService.ts
View File

@@ -6,7 +6,7 @@
import type { TransactionImage, UserSettings } from '../types';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1';
// Token storage key
const ACCESS_TOKEN_KEY = 'access_token';

14
src/services/reportService.ts
View File

@@ -6,7 +6,7 @@
import api from './api';
import type { CurrencyCode } from '../types';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1';
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1';
// Report API Response Types
export interface CurrencySummary {
@@ -94,7 +94,7 @@ export const getTransactionSummary = async (
params: SummaryParams
): Promise<TransactionSummaryResponse> => {
const response = await api.get<{ success: boolean; data: TransactionSummaryResponse }>(
'/reports/summary',
'/reports/summary',
params as unknown as Record<string, string | number | boolean | undefined>
);
if (!response.data) {
@@ -110,7 +110,7 @@ export const getCategorySummary = async (
params: CategoryParams
): Promise<CategorySummaryResponse> => {
const response = await api.get<{ success: boolean; data: CategorySummaryResponse }>(
'/reports/category',
'/reports/category',
params as unknown as Record<string, string | number | boolean | undefined>
);
if (!response.data) {
@@ -126,7 +126,7 @@ export const getTrendData = async (
params: TrendParams
): Promise<TrendDataResponse> => {
const response = await api.get<{ success: boolean; data: TrendDataResponse }>(
'/reports/trend',
'/reports/trend',
params as unknown as Record<string, string | number | boolean | undefined>
);
if (!response.data) {
@@ -163,15 +163,15 @@ export const exportReport = async (params: ExportParams): Promise<void> => {
// Create a temporary anchor element and trigger download
const link = document.createElement('a');
link.href = url;
// Generate filename based on date range and format
const filename = `report_${params.start_date.replace(/-/g, '')}_to_${params.end_date.replace(/-/g, '')}.${params.format === 'pdf' ? 'pdf' : 'xlsx'}`;
link.download = filename;
// Trigger the download
document.body.appendChild(link);
link.click();
// Clean up
document.body.removeChild(link);
window.URL.revokeObjectURL(url);