# admins

**Repository Path**: zvn_cc/admins

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-14
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Admin Dashboard Template

这是一个基于 Vue 3 + Vite 构建的现代化前端管理后台项目，使用 TypeScript 进行开发。项目采用了模块化的架构设计，具有完整的用户认证、路由管理、状态管理和UI组件系统。

## 技术栈

- **核心框架**: Vue 3.5.18 + TypeScript 5.8.0
- **构建工具**: Vite 7.0.6
- **状态管理**: Pinia 3.0.3 + pinia-plugin-persistedstate 4.5.0
- **UI框架**: Element Plus 2.10.7
- **路由管理**: Vue Router 4.5.1
- **HTTP客户端**: Axios 1.11.0
- **代码规范**: ESLint 9.31.0 + Prettier 3.6.2
- **样式处理**: Sass 1.90.0

## 项目架构

### 目录结构

```
src/
├── api/              # API接口定义
├── layout/           # 布局组件
│   ├── aside/        # 侧边栏菜单
│   └── header/       # 顶部导航
├── router/           # 路由配置
├── stores/           # 状态管理
├── styles/           # 全局样式
├── types/            # TypeScript类型定义
├── utils/            # 工具函数
└── views/            # 页面视图
    ├── order/        # 订单管理模块
    ├── sign/         # 登录模块
    ├── subscribe/    # 订阅管理模块
    ├── user/         # 用户管理模块
    └── welcome/      # 欢迎页面
```

### 核心功能模块

#### 用户认证系统

- 基于 Token 的认证机制
- 登录状态持久化存储
- 全局路由守卫控制访问权限
- 自动处理认证过期情况

#### 布局系统

- 响应式侧边栏菜单（支持折叠）
- 顶部导航栏
- 主内容区域

#### 路由管理

- 主要功能页面：欢迎页面、用户管理、订阅计划、订单列表
- 登录页面和404页面
- 路由元信息配置（标题、访问权限等）
- 全局前置守卫处理权限验证

#### 状态管理

- 用户状态管理（登录信息、用户资料）
- 菜单状态管理（折叠状态）

#### HTTP请求处理

- 基于 Axios 的统一请求封装
- 请求拦截器（自动添加认证头）
- 响应拦截器（统一错误处理）
- 自动处理认证过期跳转登录

## 项目特点

### 开发体验优化

- 支持热重载开发（`npm run dev`）
- TypeScript 类型检查（`npm run type-check`）
- ESLint + Prettier 代码规范
- 自动导入组件和API

### 用户体验优化

- 响应式布局设计
- 加载状态提示
- 统一错误处理和用户提示
- 页面标题自动设置

### 安全性考虑

- 认证状态管理
- 路由访问控制
- 请求头认证信息处理

## 开发环境

### 必需工具

- Node.js 20.19.0 或 22.12.0+
- npm 或 yarn
- VSCode + Volar 插件（推荐）

### 可选工具

- Prettier 插件（用于代码格式化）
- ESLint 插件（用于代码检查）

## 运行命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产环境代码
npm run build

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# 格式化代码
npm run format

# TypeScript 类型检查
npm run type-check
```

## 项目说明

这个项目是一个功能完整的管理后台前端模板，具有良好的架构设计和代码组织，可以作为开发各类管理系统的良好起点。