42c5dcef8e
新功能: - 项目创建：支持项目名称和本地路径绑定 - 项目列表：简洁大方的卡片式布局展示 - 项目编辑：支持项目信息修改 - 项目删除：支持项目软删除 - 路径选择：集成系统文件夹选择对话框 - 路径验证：实时验证项目路径有效性 架构设计: - 遵循 Tauri 开发规范的四层架构设计 - 基础设施层：数据库管理、文件系统操作 - 数据访问层：项目仓库模式、SQLite 集成 - 业务逻辑层：项目服务、数据验证 - 表示层：Tauri 命令、前端组件 UI/UX: - 使用 Tailwind CSS 实现简洁大方的设计风格 - 响应式布局适配不同屏幕尺寸 - 流畅的动画效果和交互反馈 - 完整的错误处理和用户提示 技术栈: - 后端：Rust + Tauri + SQLite + 四层架构 - 前端：React + TypeScript + Tailwind CSS + Zustand - 测试：Rust 单元测试 + Vitest 前端测试 - 工具：pnpm 包管理 + 类型安全保证 质量保证: - Rust 单元测试覆盖核心业务逻辑 - 前端组件测试覆盖主要 UI 组件 - TypeScript 严格模式确保类型安全 - 遵循开发规范的代码质量标准 核心特性: - 项目管理：创建、查看、编辑、删除项目 - 路径管理：自动验证、绝对路径转换 - 数据持久化：SQLite 本地数据库存储 - 状态管理：Zustand 响应式状态管理 - 错误处理：完整的错误捕获和用户反馈
29 lines
625 B
TypeScript
29 lines
625 B
TypeScript
import React from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
interface LoadingSpinnerProps {
|
|
size?: 'small' | 'medium' | 'large';
|
|
text?: string;
|
|
}
|
|
|
|
/**
|
|
* 加载动画组件
|
|
*/
|
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
|
size = 'medium',
|
|
text
|
|
}) => {
|
|
const sizeMap = {
|
|
small: 16,
|
|
medium: 24,
|
|
large: 32
|
|
};
|
|
|
|
return (
|
|
<div className={`flex items-center justify-center gap-3 ${size === 'small' ? 'p-4' : 'p-8'}`}>
|
|
<Loader2 size={sizeMap[size]} className="spinner text-primary-600" />
|
|
{text && <span className="text-gray-600">{text}</span>}
|
|
</div>
|
|
);
|
|
};
|