# TadminTestD

**Repository Path**: zxy.cn/tadmin-test-d

## Basic Information

- **Project Name**: TadminTestD
- **Description**:  Vue+.NET前后端项目
- **Primary Language**: Unknown
- **License**: 0BSD
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2024-03-19
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vuex, TypeScript, Aspnet, WebApi

## README



# Vue 3 + TypeScript + Vite 管理后台系统

一个基于 Vue 3、TypeScript 和 Vite 构建的现代化后台管理系统前端项目。

## 项目简介

本项目是一个功能完善的企业级后台管理系统，采用最新的 Vue 3 生态系统开发，提供完整的用户管理、角色管理、菜单管理等核心功能模块。系统设计遵循模块化、组件化原则，具备良好的可扩展性和维护性。

## 技术栈

- **前端框架**: Vue 3.0+
- **构建工具**: Vite 4.0+
- **语言**: TypeScript 4.9+
- **状态管理**: Vuex 4.0+
- **路由管理**: Vue Router 4.0+
- **UI组件**: 自定义组件库
- **图表库**: ECharts 5.0+
- **样式方案**: SCSS + CSS变量
- **HTTP客户端**: Axios

## 主要功能

### 用户管理模块
- 用户列表展示与查询
- 用户新增、编辑、删除
- 用户角色分配
- 用户状态管理

### 角色管理模块
- 角色列表管理
- 角色权限配置
- 角色菜单关联
- 角色新增编辑

### 菜单管理模块
- 菜单结构树形展示
- 菜单增删改查
- 菜单层级配置
- 菜单图标管理

### 系统功能
- 用户登录认证
- 登录态Token管理
- 页面标签导航
- 多级菜单展开
- 个人中心设置

## 项目结构

```
tadmin-test-d/
├── public/                    # 静态资源目录
│   ├── images/               # 图片资源
│   ├── json/                 # 模拟数据JSON
│   │   ├── Card.json
│   │   ├── Role.json
│   │   ├── User.json
│   │   └── router.json
│   └── vite.svg             # Vite图标
├── src/
│   ├── assets/              # 资源文件
│   │   ├── css/            # 全局样式
│   │   │   └── global.scss
│   │   └── vue.svg
│   ├── class/              # 数据模型类
│   │   ├── CardModel.ts
│   │   ├── TagModel.ts
│   │   └── TreeModel.ts
│   ├── components/         # 公共组件
│   │   ├── CardCom.vue     # 卡片组件
│   │   ├── HeaderCom.vue   # 头部组件
│   │   ├── TagCom.vue      # 标签组件
│   │   ├── TreeMenu.vue    # 树形菜单组件
│   │   └── Echarts/        # 图表组件
│   │       ├── Histogram.vue
│   │       ├── Line.vue
│   │       └── Pie.vue
│   ├── http/               # HTTP请求相关
│   │   ├── filter.ts       # 请求拦截器
│   │   └── index.ts        # HTTP封装
│   ├── router/             # 路由配置
│   │   └── index.ts
│   ├── view/               # 页面视图
│   │   ├── admin/          # 管理模块
│   │   │   ├── menu/       # 菜单管理
│   │   │   │   ├── MenuManager.vue
│   │   │   │   ├── add.vue
│   │   │   │   └── class/
│   │   │   │       └── MenuModel.ts
│   │   │   ├── person/     # 人员管理
│   │   │   │   ├── PersonManager.vue
│   │   │   │   ├── add.vue
│   │   │   │   ├── setingRole.vue
│   │   │   │   └── class/
│   │   │   │       └── PersonModel.ts
│   │   │   └── role/       # 角色管理
│   │   │       ├── RoleManager.vue
│   │   │       ├── class/
│   │   │       │   └── Role.ts
│   │   │       └── components/
│   │   │           ├── add.vue
│   │   │           └── setingMenu.vue
│   │   └── index/          # 首页模块
│   │       ├── DeskTop.vue      # 工作台
│   │       ├── LoginPage.vue    # 登录页
│   │       ├── PersonCenter.vue # 个人中心
│   │       ├── RootPage.vue     # 根页面
│   │       └── class/
│   │           └── UserInfo.ts
│   ├── vuex/               # Vuex状态管理
│   │   └── index.ts
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口文件
│   ├── global.ts           # 全局工具类
│   └── vite-env.d.ts       # TypeScript类型声明
├── index.html              # HTML模板
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript配置
├── tsconfig.node.json      # Node环境TypeScript配置
└── vite.config.ts          # Vite配置
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- pnpm >= 7.0.0（推荐）或 npm/yarn

### 安装依赖

```bash
# 使用pnpm安装（推荐）
pnpm install

# 或使用npm
npm install

# 或使用yarn
yarn install
```

### 启动开发服务器

```bash
pnpm dev
```

项目启动后访问 `http://localhost:3000`

### 构建生产版本

```bash
pnpm build
```

### 预览生产版本

```bash
pnpm preview
```

## 开发规范

### 代码风格

- 使用 Vue 3 `<script setup>` 语法糖
- 遵循 TypeScript 严格类型检查
- 组件文件使用 PascalCase 命名
- 工具函数使用 camelCase 命名
- 样式使用 SCSS 预处理器

### 组件开发

```vue
<template>
  <div class="component-name">
    <!-- 模板内容 -->
  </div>
</template>

<script setup lang="ts">
// 组件逻辑
</script>

<style lang="scss" scoped>
.component-name {
  // 样式内容
}
</style>
```

### API接口规范

所有接口请求统一通过 `src/http/index.ts` 封装的 HTTP 模块进行，请求拦截器和响应拦截器在 `filter.ts` 中配置。

## 核心组件说明

### 图表组件 (ECharts)

系统集成了 ECharts 图表库，提供三种基础图表组件：

- **Histogram.vue**: 柱状图组件，用于数据对比展示
- **Line.vue**: 折线图组件，用于趋势分析展示
- **Pie.vue**: 饼图组件，用于占比数据展示

### 导航组件

- **HeaderCom.vue**: 系统顶部导航栏，包含用户信息、消息通知等功能
- **TreeMenu.vue**: 左侧树形菜单，支持多级菜单展开收起
- **TagCom.vue**: 页面标签导航，支持多页面快速切换

### 通用组件

- **CardCom.vue**: 卡片容器组件，用于页面内容区域划分

## 全局工具类

`src/global.ts` 提供了系统常用的工具方法：

- `Tool.Index`: 全局索引计数器
- `Tool.FormatToken()`: Token格式化处理
- `Tool.FormatDate()`: 日期格式化
- `Tool.GetDate()`: 获取当前日期
- `Tool.ClearLocalStorage()`: 清除本地存储
- `Tool.FindTree()`: 树形结构查找

## 模拟数据

项目在 `public/json/` 目录下提供了模拟数据接口：

- `User.json`: 用户数据模拟
- `Role.json`: 角色数据模拟
- `Card.json`: 卡片数据模拟
- `router.json`: 路由数据模拟

## IDE配置

推荐使用 VS Code 进行开发，并安装以下扩展：

- **Volar**: Vue 3 官方语言支持
- **TypeScript Vue Plugin**: TypeScript Vue 插件
- **ESLint**: 代码规范检查
- **Prettier**: 代码格式化

## License

本项目基于 MIT 许可证开源。