📃 docs: add README.md

README.md

@@ -1,5 +1,231 @@
-# Vue 3 + Vite
+<h1 align="center" style="background: linear-gradient(to right, rgb(238, 157, 171), skyblue); color: white; line-height: 5em">Double_X 考勤系统</h1>
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 🖥项目简介
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+Double_X 考勤系统基于现代化的前端和后端技术栈开发，提供了灵活、智能的考勤管理解决方案。该系统主要功能包括单次打卡和每周循环打卡两种模式，用户可以根据需求自行设置打卡时段和周期，并支持补卡，满足不同场景下的考勤需求。
+
+前端技术栈采用 Vue 3、Vue Router 和 ElementPlus，带来了流畅的用户体验和高效的界面交互。通过集成高德地图 JS API，用户可以方便地在地图上选择考勤地点，并自定义考勤范围，实现精准定位和灵活管理。
+
+后端技术栈基于 Node.js 和 Express 搭建，配合 MySQL 数据库，提供了稳定、高效的数据存储和管理功能。系统具备强大的数据处理能力，助力用户更好地管理团队考勤。
+
+Double_X 考勤系统支持多种考勤模式和灵活配置，致力于为用户提供便捷、智能的考勤解决方案。
+
+## 📦项目地址
+
+- **前端仓库：**[https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git](https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git)
+- **后端仓库：**[https://git.vthc.cn/Pchen0/Double_X_Attendance.git](https://git.vthc.cn/Pchen0/Double_X_Attendance.git)
+- **演示地址：**[https://kq.ctbu.top](https://kq.ctbu.top)
+
+## 💽Setup
+
+#### 0.安装Node.js
+
+[Node.js官网](https://nodejs.org/en/download/package-manager/)
+
+***Linux***
+
+**使用包管理器安装Node.js**
+
+大多数Linux发行版都附带有包管理器，如APT（Debian、Ubuntu）、YUM（Fedora、CentOS）、DNF（Fedora）、Pacman（Arch Linux）等。你可以使用这些包管理器来安装Node.js。
+
+1. **更新软件包索引**（这一步在某些系统上可能不需要，但是最好还是先执行）：
+
+   ```bash
+   sudo apt update
+   ```
+
+2. **安装Node.js**：
+
+对于Debian和Ubuntu系统，可以使用APT包管理器：
+
+```bash
+   sudo apt install nodejs
+```
+
+对于其他Linux发行版，可以使用相应的包管理器来安装Node.js。下面提供了几种常见发行版的安装方式：
+
+CentOS/RHEL
+
+1.更新软件包索引：
+
+```bash
+   sudo yum update
+```
+
+或者
+
+```bash
+   sudo dnf update
+```
+
+2.安装Node.js：
+
+```bash
+   sudo yum install nodejs
+```
+
+或者
+
+```bash
+   sudo dnf install nodejs
+```
+
+无论你使用哪种Linux发行版，通过包管理器安装Node.js通常是最简单、最可靠的方法。
+
+1. **验证安装**：
+
+安装完成后，你可以通过以下命令验证Node.js和npm（Node.js软件包管理器）是否已正确安装：
+
+```bash
+   node -v
+   npm -v
+```
+
+这将显示已安装的Node.js和npm的版本信息。
+
+***Windows***
+
+在Windows上安装Node.js最简单的方法是使用Node.js的Windows安装程序。
+
+**1.下载安装程序**：
+
+访问 [Node.js官网](https://nodejs.org/en/download/)，下载适用于Windows的Node.js安装程序（.msi文件）。
+
+**2.运行安装程序**：
+
+打开下载的.msi文件以启动安装向导，并按照提示进行安装。你可以接受默认设置，也可以自定义安装选项。
+
+**3.验证安装**：
+
+安装完成后，打开命令提示符，然后输入以下命令来验证Node.js和npm是否已正确安装：
+
+```bash
+   node -v
+   npm -v
+```
+
+这将显示已安装的Node.js和npm的版本信息。
+
+#### 1.克隆远程库
+
+```
+git clone https://git.vthc.cn/Pchen0/Double_X_Attendance.git
+```
+
+#### 2.安装依赖
+
+```
+npm install
+```
+
+#### 3.导入数据并编写配置文件
+
+请将项目目录下的data.sql文件导入您的MySQL数据库，然后编写配置文件：
+
+```bash
+cp config-example.json config.json
+```
+
+Double_X考勤系统使用企业微信登录接口，您需要前往企业微信管理页面添加应用并获取corpid、corpsecret、agentid等信息。
+
+#### 4.运行服务器
+
+```
+node index.js
+```
+
+成功运行后，您将看到以下输出：
+
+![输出示例](./image/readme-1.png)
+
+#### 5. 编译前端页面
+
+本项目依赖于高德地图 JavaScript API。部署前，请先访问高德开放平台创建应用，并配置服务端为 JS API。
+
+##### 操作步骤：
+
+**1.克隆前端仓库**：
+
+```bash
+git clone https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git
+```
+
+**2.安装依赖**：
+
+进入项目目录并安装项目依赖：
+
+```bash
+cd Double_X_Attendance_Web
+npm install
+```
+
+**3.配置环境变量**：
+
+在项目根目录下创建并编辑 `.env` 文件，添加以下环境变量：
+
+- `VITE_API_URL`：你的后端服务器地址
+- `VITE_AMAP_KEY`：高德地图应用 Key
+- `VITE_AMAP_HOST`：代理服务器地址，参考下面的Nginx反向代理配置进行反向代理设置
+
+*Nginx反向代理配置：*
+
+```nginx
+  location /_AMapService/ {
+    set $args "$args&jscode=高德地图应用的安全密钥";
+    proxy_pass https://restapi.amap.com/;
+  }
+```
+
+保存相关配置之后需要通过命令nginx -s reload命令重新加载nginx配置文件。
+
+*示例 `.env` 文件内容：*
+
+```env
+VITE_API_URL=https://your-backend-server.com
+VITE_AMAP_KEY=your-amap-key
+VITE_AMAP_HOST=https://your-proxy-server.com
+```
+
+**4.编译前端页面**：
+
+使用以下命令编译前端页面：
+
+```bash
+npm run build
+```
+
+该命令将生成用于生产环境的优化过的静态文件。
+
+## 💡使用手册
+
+#### 1.设置管理员
+
+首次登录系统的用户将会成为网站管理员，网站管理员可进入网站管理页面查看网站内所有注册用户，并将他们设为管理员。管理员具有管理考勤项目的权限。
+
+拥有管理员权限的用户可对网站内所有考勤项目进行添加、删除等操作。
+
+![设置管理员](./image/readme-2.png)
+
+#### 2.添加/编辑考勤项目
+
+![添加考勤项目](./image/readme-3.png)
+
+**参数说明：**
+
+- 项目名称：考勤项目的名称，便于区分；
+- 参与人：参与考勤的用户，填写用户名，用|分隔；
+- 管理员：对该考勤项目具有编辑、删除、添加补卡记录权限的用户，填写用户名，用|分隔（用户必须具有考勤管理员权限）；
+- 打卡星期：考勤项目的开始星期；
+- 每周循环：开启后将在每周的同一时段进行考勤，关闭时只进行单次考勤；
+- 打卡时间：考勤项目的开始、结束时间，暂不支持跨天；
+- 打卡半径：以在地图上选择的地点为中心设置考勤范围。
+
+#### 3.用户考勤
+
+用户在符合打卡条件的情况下可进行打卡操作。
+
+![用户考勤](./image/readme-4.png)
+
+若未在规定时间内打卡，用户可向考勤管理员申请补卡。
+
+![补卡](./image/readme-5.png)