# Sleek-Rat-Manager

**Repository Path**: sleek-rat/sleek-rat-manager

## Basic Information

- **Project Name**: Sleek-Rat-Manager
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-07
- **Last Updated**: 2026-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Sleek Rat Manager - 设备管理后台前端

基于 Angular 20+ 和 [NG-ALAIN](https://ng-alain.com/docs/getting-started/zh) 框架构建的现代化设备管理系统前端。

## ✨ 功能特性

- 🎯 **设备管理**: 客户端控制、摄像头监控、文件管理
- 🔐 **权限系统**: 基于角色的访问控制 (RBAC)
- 📱 **响应式设计**: 支持桌面和移动端访问
- 🎨 **现代化 UI**: 基于 Ant Design 的优雅界面
- ⚡ **高性能**: 延迟加载和优化构建
- 🌐 **国际化**: 内置中文支持

## 🛠 技术栈

- **前端框架**: Angular 20+
- **UI 组件库**: NG-ALAIN + ng-zorro-antd (Ant Design)
- **状态管理**: @delon/auth, @delon/acl
- **样式预处理**: Less
- **代码质量**: ESLint + Prettier + Stylelint
- **构建工具**: Angular CLI

## 📋 环境要求

- Node.js: v22.14.0
- Angular CLI: 20.1.4
- NPM: 最新稳定版

## 🚀 快速开始

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

### 开发环境启动
```bash
npm start
# 或使用热模块替换
npm run hmr
```

访问 http://localhost:4200

### 生产环境构建
```bash
npm run build
# 构建并压缩
npm run build-compress
```

## 📝 开发命令

### 开发相关
```bash
npm start                 # 启动开发服务器 (host=0.0.0.0)
npm run hmr              # 启用热模块替换
npm run watch            # 监视模式构建
```

### 构建相关
```bash
npm run build            # 生产环境构建
npm run build-compress   # 构建并压缩
npm run clean           # 清理构建目录
```

### 代码质量
```bash
npm run lint            # 运行所有检查
npm run lint:ts         # TypeScript 检查
npm run lint:style      # 样式检查
npm test               # 单元测试
npm run test-coverage  # 测试覆盖率
```

### 主题和工具
```bash
npm run theme          # 生成主题CSS
npm run icon          # 优化图标
npm run analyze       # 分析构建产物
npm run analyze:view  # 查看包体积分析
```

## 📁 项目结构

```
src/
├── app/
│   ├── core/                 # 核心模块
│   │   ├── models/          # 数据模型
│   │   ├── net/             # HTTP拦截器
│   │   └── startup/         # 启动服务
│   ├── layout/              # 布局组件
│   │   ├── basic/          # 主布局
│   │   └── passport/       # 登录布局
│   ├── routes/              # 路由模块
│   │   ├── client/         # 客户端管理
│   │   ├── user/           # 用户管理
│   │   ├── role/           # 角色管理
│   │   └── personal/       # 个人中心
│   └── shared/              # 共享模块
│       ├── pipes/          # 管道
│       └── utils/          # 工具函数
├── assets/                  # 静态资源
├── environments/            # 环境配置
└── styles/                  # 全局样式
```

## 🔧 配置说明

### 环境配置
- `src/environments/environment.ts` - 开发环境配置
- `src/environments/environment.prod.ts` - 生产环境配置

### 重要配置项
- **Hash 路由**: 默认启用 (`useHash: true`)
- **API 基础地址**: 开发环境指向 `https://localhost:9090/backend/manager`
- **代理配置**: `proxy.conf.js` 用于开发时 API 代理

### ⚠️ 构建注意事项
- 确保 `src/main.html` 中的模板标签 `{{ .base_href }}` 保持不变
- 生产环境 `environment.prod.ts` 中 `baseUrl` 应保持空字符串

## 🎨 NG-ALAIN 脚手架

### 生成模块
```bash
ng g ng-alain:module <module-name>
```

### 生成组件
```bash
# List 组件
ng g ng-alain:list <name> -m=<module>
ng g ng-alain:list <name> -m=<module> --service=root

# Edit 组件
ng g ng-alain:edit <name> -m=<module>

# View 组件
ng g ng-alain:view <name> -m=<module>
```

### 优化工具
```bash
ng g ng-alain:plugin icon    # 图标优化
```

## 🔍 开发指南

### 代码规范
- 使用 ESLint + Prettier 进行代码格式化
- 遵循 Angular 官方风格指南
- 组件文件命名采用 kebab-case
- 使用 TypeScript 严格模式

### 样式开发
- 使用 Less 预处理器
- 遵循 BEM 命名规范
- 利用 NG-ALAIN 主题系统

## 📦 构建优化

- **包体积限制**: 初始包 2MB 警告, 3MB 错误
- **代码分割**: 路由级别的延迟加载
- **Tree Shaking**: 自动移除未使用的代码
- **资源压缩**: 生产环境自动压缩