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