# Orange

**Repository Path**: willxue/Orange

## Basic Information

- **Project Name**: Orange
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Orange - 项目收款管理系统

基于 Vue 3 + TypeScript + Tailwind CSS 开发的项目收款管理系统，采用 Liquid Glass 设计风格。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript
- **Vite** - 下一代前端构建工具
- **Tailwind CSS** - 原子化 CSS 框架
- **Pinia** - Vue 状态管理库
- **Vue Router** - Vue 官方路由管理器
- **Chart.js** - 图表库

## 功能特性

- 📊 **工作台** - 数据概览与快捷操作
- 📁 **项目管理** - 管理所有项目与收款计划
- 📅 **收款日历** - 按日期查看收款计划
- 📈 **数据分析** - 收款趋势与财务报表
- 👥 **客户管理** - 管理客户信息
- 👨‍👩‍👧‍👦 **团队成员** - 团队协作与权限管理
- ⚙️ **系统设置** - 偏好设置与账户管理

## 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

### 代码检查

```bash
npm run lint
```

### 类型检查

```bash
npm run type-check
```

## 项目结构

```
Orange/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 组件
│   │   ├── AppSidebar.vue
│   │   ├── StatCard.vue
│   │   ├── StatusBadge.vue
│   │   └── ProgressBar.vue
│   ├── composables/     # 组合式函数
│   ├── router/          # 路由配置
│   │   └── index.ts
│   ├── stores/          # 状态管理
│   │   ├── useAppStore.ts
│   │   └── useProjectStore.ts
│   ├── styles/          # 样式文件
│   │   └── main.css
│   ├── types/           # 类型定义
│   │   └── index.ts
│   ├── utils/           # 工具函数
│   ├── views/           # 页面视图
│   │   ├── DashboardView.vue
│   │   ├── ProjectsView.vue
│   │   ├── CalendarView.vue
│   │   ├── AnalyticsView.vue
│   │   ├── ClientsView.vue
│   │   ├── TeamView.vue
│   │   ├── SettingsView.vue
│   │   └── LoginView.vue
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── public/              # 公共资源
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
├── tailwind.config.js   # Tailwind 配置
└── README.md
```

## 设计系统

本项目采用 Liquid Glass 设计风格，具有以下特点：

- **毛玻璃效果** - 使用 backdrop-filter 实现透明模糊效果
- **动态光效** - 鼠标移动时的高光反射效果
- **环境自适应** - 自动适应明暗环境
- **流体动画** - 水流般的过渡效果

## 浏览器支持

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 许可证

MIT