commit 3c3868e2a7d2669a12a669e117e0dfb6671cced9 Author: 12975 <1297598740@qq.com> Date: Sun Jan 25 20:10:36 2026 +0800 README diff --git a/README.md b/README.md new file mode 100644 index 0000000..ff3254d --- /dev/null +++ b/README.md @@ -0,0 +1,99 @@ +# Novault Frontend + +Novault 的前端应用,一个基于 **React**, **TypeScript** 和 **Vite** 构建的现代化、本地优先的个人记账与资产管理应用。 + +## ✨ 特性 + +- **现代化 UI 设计**: 采用 Premium Glassmorphism(高级玻璃拟态)设计语言,提供流畅、美观的用户体验。 +- **本地优先**: 快速响应,数据安全。 +- **资产可视化**: 包含账户关系图谱、收支报表等丰富的数据可视化功能。 +- **全功能记账**: 支持多账户、多币种、预算管理、周期性交易等。 +- **响应式布局**: 完美适配桌面端、平板和移动端设备。 + +## 🛠 技术栈 + +- **核心框架**: [React](https://react.dev/) + [TypeScript](https://www.typescriptlang.org/) +- **构建工具**: [Vite](https://vitejs.dev/) +- **路由**: [React Router](https://reactrouter.com/) +- **状态/样式管理**: + - CSS Variables & Modules (无第三方 UI 库依赖,完全自定义设计系统) + - Custom Hooks (Theme, Device, etc.) +- **数据可视化**: [Apache ECharts](https://echarts.apache.org/) (via `echarts-for-react`) +- **图标**: [Iconify](https://iconify.design/) (主要使用 Solar Icons 系列) + +## 📂 目录结构 + +``` +frontend/ +├── public/ # 静态资源 (图标, favicon) +├── src/ +│ ├── assets/ # 编译期静态资源 +│ ├── components/ # 通用及业务组件 +│ │ ├── account/ # 账户相关组件 +│ │ ├── budget/ # 预算相关组件 +│ │ ├── common/ # 通用 UI 组件 (Layout, Navigation 等) +│ │ ├── transaction/# 交易相关组件 +│ │ └── ... +│ ├── config/ # 配置文件 (如类别图标映射) +│ ├── hooks/ # 自定义 React Hooks (useTheme 等) +│ ├── pages/ # 页面视图 (路由目标) +│ ├── router/ # 路由配置 +│ ├── services/ # API 服务层 (处理后端通信) +│ ├── styles/ # 全局样式系统 +│ │ ├── variables.css # 设计变量 (颜色, 字体, 间距) +│ │ ├── components.css # 通用组件样式 (Card, Button, Input) +│ │ ├── themes.css # 主题定义 (Light/Dark) +│ │ └── animations.css # 动画定义 +│ ├── types/ # TypeScript 类型定义 +│ ├── utils/ # 通用工具函数 (格式化, 计算) +│ ├── App.tsx # 根组件 +│ └── main.tsx # 入口文件 +└── vite.config.ts # Vite 配置 +``` + +## 🚀 快速开始 + +### 预备环境 + +- Node.js (推荐 v18+) +- npm 或 yarn/pnpm + +### 安装依赖 + +```bash +npm install +``` + +### 启动开发服务器 + +```bash +npm run dev +``` + +应用将在 `http://localhost:5173` (默认端口) 启动。 + +### 构建生产版本 + +```bash +npm run build +``` + +构建产物将输出到 `dist/` 目录。 + +## 🎨 设计系统 + +本项目采用自定义的 **CSS 变量系统** 进行样式管理,主要文件位于 `src/styles/`: + +- **色彩**: 定义了语义化的颜色变量(`--color-primary`, `--color-bg`, `--glass-bg` 等),支持自动深色模式切换。 +- **玻璃拟态**: 通过 `.glass-panel`, `.glass-card` 等类名快速应用磨砂玻璃效果。 +- **响应式**: 使用移动优先的策略,通过 CSS 媒体查询适配不同屏幕。 + +## 🤝 贡献规范 + +1. **组件开发**: 新组件应尽可能复用 `styles/components.css` 中的原子类或组件类。 +2. **服务层**: 所有后端请求应封装在 `src/services/` 下的对应服务文件中。 +3. **类型安全**: 尽量避免使用 `any`,并在 `src/types/` 中定义共享类型。 + +## 📄 License + +MIT