# AgileBoot-Front-End

**Repository Path**: lp8608/AgileBoot-Front-End

## Basic Information

- **Project Name**: AgileBoot-Front-End
- **Description**: 基于Ruoyi的改良版前端基础开发框架。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 88
- **Created**: 2025-03-14
- **Last Updated**: 2025-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.4.x-blue.svg" alt="Vue">
  <img src="https://img.shields.io/badge/Element Plus-2.3.x-blue.svg" alt="Element Plus">
  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
</p>

<h1 align="center">考勤系统前端</h1>

<h4 align="center">基于Vue3 + ElementPlus + Vite的前端项目</h4>

## 📚 项目介绍

本项目是考勤系统的前端部分，基于 AgileBoot 快速开发脚手架开发而成。采用现代化前端技术栈，为企业提供高效、易用的考勤管理解决方案。

### 技术栈

- **核心框架**：[Vue 3](https://v3.cn.vuejs.org) (Composition API)
- **UI 组件库**：[Element Plus](https://element-plus.org/zh-CN)
- **构建工具**：[Vite](https://cn.vitejs.dev)
- **状态管理**：[Pinia](https://pinia.vuejs.org/)
- **路由管理**：[Vue Router 4](https://router.vuejs.org/zh/)
- **HTTP 客户端**：Axios
- **CSS 预处理器**：SCSS

### 项目特性

- 基于 Vue3 Composition API
- 标签页多页签设计
- 响应式布局，支持 PC 端各种尺寸
- 统一的错误处理和权限管理
- 封装常用业务组件

## 🚀 安装运行

### 环境要求

- Node.js: 16.0+
- pnpm: 7.x (推荐 7.30.5)

### 安装步骤

1. **安装 pnpm**（如果尚未安装）

```bash
npm install -g pnpm
```

2. **克隆项目**

```bash
git clone [项目仓库地址]
cd AgileBoot-Front-End
```

3. **安装依赖**

```bash
pnpm install
```

4. **启动开发服务器**

```bash
pnpm run dev
pnpm run dev:filtered ##过滤saas相关警告
```

5. **构建生产版本**

```bash
pnpm run build
```

### 切换 npm 源

如遇下载缓慢，可切换至国内 npm 源：

```bash
npm config set registry https://registry.npmmirror.com
```

## 📂 目录结构

```
AgileBoot-Front-End/
├── public/             # 静态资源
├── src/
│   ├── api/            # API请求模块
│   ├── assets/         # 项目资源文件
│   ├── components/     # 公共组件
│   ├── config/         # 全局配置
│   ├── directives/     # 自定义指令
│   ├── layout/         # 布局组件
│   ├── router/         # 路由配置
│   ├── store/          # Pinia状态管理
│   ├── styles/         # 全局样式
│   ├── types/          # TypeScript类型定义
│   ├── utils/          # 工具函数
│   ├── views/          # 页面视图组件
│   ├── App.vue         # 根组件
│   └── main.ts         # 应用入口
├── .env.*              # 环境变量配置
├── tsconfig.json       # TypeScript配置
├── vite.config.ts      # Vite配置
└── package.json        # 项目依赖
```

## 💼 内置功能

🔑 系统基础功能：

| 功能     | 描述                                   |
| -------- | -------------------------------------- |
| 用户管理 | 系统用户配置、添加、编辑、删除         |
| 部门管理 | 组织机构管理，树结构展现，支持数据权限 |
| 岗位管理 | 配置系统用户所属担任职务               |
| 菜单管理 | 配置系统菜单、操作权限、按钮权限标识   |
| 角色管理 | 角色菜单权限分配、数据范围权限划分     |
| 参数管理 | 系统动态配置参数管理                   |
| 通知公告 | 系统通知公告信息发布维护               |
| 操作日志 | 系统操作日志记录和查询                 |
| 登录日志 | 系统登录日志记录查询                   |
| 在线用户 | 当前系统活跃用户状态监控               |
| 系统接口 | 自动生成 API 接口文档                  |
| 服务监控 | 监控系统 CPU、内存、磁盘等信息         |

## 🔥 考勤业务功能

本项目实现了完整的企业考勤管理功能，主要包括：

### 项目管理

- 项目创建与维护
- 项目基本信息配置
- 项目人员分配

### 订单管理

- 订单创建、修改、查询
- 订单详情查看
- 订单导出
- 关联人员管理

### 结算管理

- 结算周期配置
- 结算单生成
- 结算审批流程
- 结算报表导出

### 考勤记录

- 考勤打卡
- 异常考勤处理
- 考勤汇总统计
- 考勤规则设置

## 🛠️ 二次开发指南

### 开发规范

- 遵循 Vue3 Composition API 风格
- 使用 TypeScript 进行类型检查
- 组件命名采用 PascalCase
- 使用 SCSS 进行样式开发，遵循 BEM 命名规范
- API 请求统一管理，按业务模块划分

### 组件开发

- 公共组件放置在`src/components`目录
- 业务组件放置在对应业务模块的`components`目录
- 组件应当职责单一，避免过度复杂

### 路由配置

- 路由配置位于`src/router/modules`目录
- 按业务模块组织路由
- 支持路由元信息配置（权限、图标等）

## 📋 标签页导航工具方法使用指南

### 基本介绍

`tag-utils.ts` 提供了一套用于在多标签页环境中打开新标签页的工具方法，封装了路由解析、标签创建和导航逻辑，简化多标签页应用中的页面跳转操作。

### 主要功能

- 通过路由名称打开新标签页 - `openTagByName`
- 通过路径打开新标签页 - `openTagByPath`
- 自动处理路由解析和错误情况
- 确保标签页与路由同步
- 提供友好的错误提示

### 使用方法

#### 1. 通过路由名称打开新标签页

```typescript
import { openTagByName } from "@/utils/tag-utils";
import { useRouter } from "vue-router";

// 在组件中使用
const router = useRouter();

// 打开新标签页
openTagByName(
  router, // Vue Router实例
  "AttendanceOrderDetail", // 路由名称
  "订单详情-标题", // 标签标题
  { id: 123 }, // 路由参数
  {
    // 额外元信息
    activeMenu: "/attendance/order",
    dynamicLevel: 3 // 允许同时打开标签数量
  }
);
```

#### 2. 通过路径打开新标签页

```typescript
import { openTagByPath } from "@/utils/tag-utils";
import { useRouter } from "vue-router";

// 在组件中使用
const router = useRouter();

// 打开新标签页
openTagByPath(
  router, // Vue Router实例
  "/attendance/order/123", // 路由路径
  "订单详情-标题", // 标签标题
  { tab: "basic" }, // 查询参数
  {
    // 额外元信息
    keepAlive: true,
    icon: "ep:document"
  }
);
```

### 实际应用示例

订单管理中查看详情按钮实现：

```typescript
// 查看订单详情
const handleView = (row: OrderVO) => {
  // 使用工具方法打开新标签页
  openTagByName(
    router,
    "AttendanceOrderDetail",
    `订单详情-${row.orderCode}`,
    { id: row.orderId },
    {
      activeMenu: "/attendance/order",
      dynamicLevel: 3
    }
  );
};
```

### 注意事项

1. 确保路由名称或路径在路由配置中已正确定义
2. 传递的参数需与路由定义匹配
3. 如遇标签未激活问题，请检查路由路径与标签 path 是否一致
4. 路由参数(params)仅在 name 方式导航时有效，path 方式导航请使用查询参数(query)

## 🔐 许可证

本项目使用 MIT 许可证。原则上不收取任何费用及版权，可商用，不过如需二次开源请联系作者获取许可。