# zy-admin

**Repository Path**: arcanite/zy-admin

## Basic Information

- **Project Name**: zy-admin
- **Description**: react vite  admin 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-10
- **Last Updated**: 2025-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tree Admin - 树苗管理系统

一个基于 React + Vite + Ant Design 的现代化管理后台系统，用于管理样地、设备和数据查询。采用最新的前端技术栈，提供卓越的用户体验和开发体验。

## ✨ 功能特性

### 🎨 现代化UI设计
- **简洁时尚**：采用现代化的设计语言，界面简洁美观
- **响应式布局**：完美适配桌面端和移动端
- **智能主题系统**：支持深色/浅色主题切换，配备华丽的视觉过渡动画
- **高级动画效果**：基于 View Transitions API 的流畅切换动画
- **自定义配色**：支持主题色彩实时切换和个性化配置

### 🌈 视觉动画系统
- **圆形扩散动画**：主题切换时的优雅圆形扩散效果
- **智能性能优化**：自动检测页面复杂度，动态调整动画策略
- **视觉波效果**：布局切换时的美丽波纹扩散动画
- **无缝过渡**：基于现代浏览器API的丝滑切换体验
- **降级方案**：完美兼容不支持新特性的浏览器

### 🎛️ 智能布局系统
- **多模式切换**：支持侧边栏、顶部菜单、混合布局三种模式
- **动态适应**：根据屏幕尺寸和用户习惯智能调整
- **状态持久化**：自动保存用户的布局和主题偏好
- **可视化配置**：图形化的布局选择界面，直观易用

### 📱 Tab管理系统
- **动态标签页**：支持多标签页管理和导航
- **状态保持**：标签页状态自动保存和恢复
- **智能缓存**：优化的页面缓存策略，提升切换速度
- **拖拽排序**：支持标签页拖拽重新排列

### 🌍 国际化支持
- **多语言切换**：支持中文/英文切换
- **完整翻译**：所有界面文本都已国际化
- **语言记忆**：自动记住用户选择的语言
- **动态加载**：按需加载语言包，优化性能

### 📊 核心功能模块

#### 1. 仪表盘
- 系统概览统计
- 实时数据监控
- 系统状态展示
- 最近活动记录

#### 2. 样地管理
- 样地信息的增删改查
- 地理位置信息管理
- 批量操作支持
- 数据验证和错误处理

#### 3. 设备管理
- 设备信息的完整管理
- 支持多种设备类型（普通、4G、网关）
- MAC地址验证
- 设备状态监控

#### 4. 数据查询
- **设备数据查询**：电压、测量值、角度、温度等
- **温湿度数据**：温度和湿度历史数据
- **设备参数**：设备配置参数查询
- 多维度筛选和搜索
- 数据统计和可视化

## 🚀 技术栈

### 核心技术
- **前端框架**：React 19.1.1
- **构建工具**：Vite 7.1.2
- **UI组件库**：Ant Design 5.x
- **路由管理**：React Router DOM 6.x
- **状态管理**：React Context API + Zustand

### 现代化特性
- **视觉动画**：View Transitions API + CSS Animation
- **性能优化**：React.memo + useMemo + useCallback
- **模块化CSS**：CSS Modules + CSS Custom Properties
- **响应式设计**：CSS Grid + Flexbox + Media Queries

### 工具库
- **HTTP客户端**：Axios
- **国际化**：react-i18next
- **日期处理**：Day.js
- **图标库**：@ant-design/icons
- **代码规范**：ESLint + Prettier

### 浏览器API
- **现代特性**：Web Animations API、CSS Containment
- **存储管理**：LocalStorage + SessionStorage
- **兼容性**：支持现代浏览器，优雅降级方案

## 📦 安装和运行

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 🏗️ 项目结构

```
src/
├── components/              # 组件目录
│   ├── Layout/             # 布局系统
│   │   ├── LayoutSelector.jsx    # 布局选择器
│   │   ├── MainLayout.jsx        # 主要布局
│   │   ├── TopMenuLayout.jsx     # 顶部菜单布局
│   │   └── MixedLayout.jsx       # 混合布局
│   ├── TabBar/             # Tab管理系统
│   │   ├── TabBar.jsx           # Tab栏组件
│   │   └── TabBar.css           # Tab样式
│   ├── ThemeSettings/      # 主题配置
│   │   └── ThemeSettings.jsx    # 主题设置面板
│   ├── Dashboard.jsx       # 仪表盘
│   ├── SampleManagement.jsx # 样地管理
│   ├── DeviceManagement.jsx # 设备管理
│   ├── DataQuery.jsx       # 数据查询
│   ├── ThemeAnimationDemo.jsx # 主题动画演示
│   ├── TabDemo.jsx         # Tab演示
│   └── ErrorBoundary.jsx   # 错误边界
├── contexts/               # 上下文管理
│   ├── ThemeConfigContext.jsx  # 主题配置上下文
│   ├── ThemeContext.jsx        # 主题上下文
│   ├── LayoutContext.jsx       # 布局上下文
│   └── NavigationContext.jsx   # 导航上下文
├── stores/                 # 状态管理
│   └── tabStore.js        # Tab状态管理
├── services/              # API服务
│   ├── api.js            # API接口封装
│   └── mockData.js       # 模拟数据
├── i18n/                 # 国际化配置
│   └── index.js          # 语言配置
├── styles/               # 样式文件
│   └── zindex.css        # z-index 管理
├── App.jsx               # 主应用组件
├── main.jsx              # 应用入口
└── index.css             # 全局样式与动画
```

## 🔧 配置说明

### API接口配置
API接口地址在 `src/services/api.js` 中配置：
```javascript
const api = axios.create({
  baseURL: 'http://www.xxxx.com:10010/api/1.0.0/platform/ghy/way',
  timeout: 10000,
});
```

### 主题配置
主题配置采用多层架构设计，支持高级功能：

#### ThemeConfigContext (`src/contexts/ThemeConfigContext.jsx`)
- 深色/浅色模式智能切换
- 自定义主题色彩选择器
- 布局模式动态切换
- 视觉动画配置管理
- 状态持久化存储

#### 视觉动画系统 (`src/index.css`)
```css
/* View Transitions API 动画 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: reveal 0.5s ease-out;
}

/* 智能性能优化 */
.theme-switching-complex .ant-table {
  transition: background-color 0.1s ease-out !important;
}
```

#### 主题色彩配置
- 支持多种预设主题色
- 实时颜色预览
- 自定义RGB/HEX颜色选择
- 智能色彩搭配建议

### 国际化配置
语言配置在 `src/i18n/index.js` 中，支持：
- 中文（zh-CN）
- 英文（en-US）
- 自动语言检测
- 本地存储记忆

## 📱 响应式设计

系统采用响应式设计，支持：
- **桌面端**：完整功能展示
- **平板端**：适配中等屏幕
- **移动端**：侧边栏自动收起，优化触摸操作

## ⚡ 性能优化

### 智能动画优化
- **页面复杂度检测**：自动识别包含表格、表单等复杂组件的页面
- **分层动画策略**：复杂页面采用快速动画，简单页面保持流畅效果
- **GPU加速**：使用CSS transform和will-change优化动画性能
- **动画降级**：不支持新API的浏览器自动采用兼容方案

### 代码分割与懒加载
```javascript
// 组件懒加载
const Dashboard = React.lazy(() => import('./components/Dashboard'));
const DataQuery = React.lazy(() => import('./components/DataQuery'));

// 动态导入优化
const loadComponent = (componentName) => {
  return React.lazy(() => import(`./components/${componentName}`));
};
```

### 状态管理优化
- **Context分离**：主题、布局、导航状态独立管理
- **订阅优化**：精确订阅，避免不必要的重渲染
- **缓存策略**：Tab状态和用户偏好本地持久化

## 🎨 主题定制

### 智能主题系统
- **动态主题切换**：支持16种预设颜色 + 自定义颜色
- **视觉过渡动画**：圆形扩散的主题切换动效
- **响应式配色**：根据环境光线自动建议主题模式

### 浅色主题配色
```css
:root {
  --primary-color: #1890ff;
  --background-color: #ffffff;
  --text-color: rgba(0, 0, 0, 0.85);
  --border-color: #d9d9d9;
}
```

### 深色主题配色
```css
:root.dark {
  --primary-color: #1890ff;
  --background-color: #141414;
  --text-color: rgba(255, 255, 255, 0.85);
  --border-color: #434343;
}
```

### 布局模式
- **侧边栏布局**：经典的管理后台布局
- **顶部菜单布局**：适合宽屏展示的顶部导航
- **混合布局**：结合侧边栏和顶部菜单的灵活布局

## 🔌 API接口

系统集成了完整的API接口，包括：

### 样地管理
- `addGhySample` - 添加样地
- `editGhySample` - 修改样地
- `delGhySample` - 删除样地
- `getSampleList` - 获取样地列表

### 设备管理
- `addGhyDevice` - 添加设备
- `editGhyDevice` - 修改设备
- `delGhyDevice` - 删除设备
- `getDeviceList` - 获取设备列表

### 数据查询
- `getDeviceDataList` - 获取设备数据
- `getDeviceTmpRHList` - 获取温湿度数据
- `getDeviceParamList` - 获取设备参数
- `setDeviceData` - 添加设备数据

## 🚀 部署说明

### 开发环境
```bash
npm run dev
```
访问：http://localhost:5173

### 生产环境
```bash
npm run build
npm run preview
```

### Docker部署
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]
```

## 🌟 技术亮点

### View Transitions API
项目采用最新的 View Transitions API，提供原生级别的页面切换动画：
```javascript
const transition = document.startViewTransition(() => {
  setTheme(newTheme);
});

transition.finished.then(() => {
  // 动画完成后的回调处理
});
```

### CSS Containment 优化
使用 CSS Containment 进行渲染性能优化：
```css
.theme-switching-complex {
  contain: layout style paint;
}
```

### 智能错误边界
完整的错误处理机制，确保应用稳定性：
```javascript
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 错误日志记录和用户友好提示
  }
}
```

## 🚀 部署说明

### 开发环境
```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 访问地址
http://localhost:5173
```

### 生产环境
```bash
# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 使用Serve部署
npx serve dist
```

### Docker部署
```dockerfile
# 多阶段构建优化
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/node_modules ./node_modules
COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "run", "preview"]
```

### 环境变量配置
```bash
# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=Tree Admin System
VITE_ENABLE_ANIMATIONS=true
```

## 🤝 贡献指南

### 开发规范
1. **代码风格**：遵循 ESLint + Prettier 规范
2. **组件规范**：使用函数式组件 + Hooks
3. **性能优化**：合理使用 memo、useMemo、useCallback
4. **类型安全**：推荐使用 TypeScript（可选）

### 提交流程
1. Fork 项目仓库
2. 创建功能分支 (`git checkout -b feature/NewFeature`)
3. 提交代码变更 (`git commit -m 'Add NewFeature'`)
4. 推送到远程分支 (`git push origin feature/NewFeature`)
5. 创建 Pull Request

### 测试覆盖
```bash
# 运行测试
npm run test

# 测试覆盖率
npm run test:coverage

# E2E测试
npm run test:e2e
```

## 📄 许可证

本项目采用 MIT 许可证。您可以自由使用、修改和分发本项目代码。详情请查看 [LICENSE](LICENSE) 文件。

## 📞 支持与反馈

### 获取帮助
- 📖 **文档**：查看项目 Wiki 获取详细文档
- 🐛 **问题反馈**：在 Issues 页面报告 Bug
- 💡 **功能建议**：通过 Issues 提出新功能需求
- 💬 **技术交流**：加入开发者讨论群

### 版本更新
- 🔄 定期关注 Release 页面获取最新版本
- 📋 查看 CHANGELOG.md 了解更新内容
- ⬆️ 按照升级指南平滑升级系统

---

<div align="center">

**🌳 Tree Admin System**

*现代化 • 高性能 • 易扩展*

让树苗管理更简单、更高效！

[![React](https://img.shields.io/badge/React-19.1.1-blue)](https://reactjs.org/)
[![Vite](https://img.shields.io/badge/Vite-7.1.2-purple)](https://vitejs.dev/)
[![Ant Design](https://img.shields.io/badge/Ant%20Design-5.x-green)](https://ant.design/)
[![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

</div>